Vous êtes sur la page 1sur 28

Support de cours

JavaScript

Avril 2001

Support de cours JavaScript


A) Introduction...................................................................2 B) Javascript dans les pages HTML .......................................4 C) Les Variables .................................................................5 D) Les chanes de caractres................................................8 E) Les vnements ........................................................... 10 F) Les Oprateurs............................................................. 11 G) Les structures conditionnelles ........................................ 13 H) Les Fonctions ............................................................... 16 I) Les Objets du Navigateur .............................................. 19 J) L'objet Window ............................................................ 20 K) Listings Divers ............................................................. 22 L) Exercices ..................................................................... 24 M) Supplment - Les COOKIES ........................................... 25

Note: La majeure partie des textes composant ce document est issue d'un site Internet: http://www.editeurjavascript.com Et certains listings proviennent du livre: Moncur Michael, Javascript 1.3, d. Le Tout en Poche, CampusPress France, Paris, 1999

Support de cours

JavaScript

Avril 2001

A) Introduction
Qu'est-ce que le Javascript? Le Javascript est une extension du langage HTML qui est incluse dans le code. Ce langage est un langage de programmation qui permet d'apporter des amliorations au langage HTML en permettant d'excuter des commandes. A quoi ressemble un script? Un script est une portion de code qui vient s'insrer dans une page HTML. Le code du script n'est toutefois pas visible dans la fentre du navigateur car il est compris entre des balises (ou tags) spcifiques qui signalent au navigateur qu'il s'agit d'un script crit en langage JavaScript. Les balises annonant un code Javascript sont les suivantes: <SCRIPT language="Javascript"> Placez ici le code de votre script </SCRIPT> Masquage du script pour les anciens browsers Ce code est ainsi invisible du point de vue du navigateur c'est--dire que ce dernier n'affiche pas dans sa fentre le code Javascript. Toutefois, d'anciens navigateurs, crs avant l'arrive du Javascript, ne connaissent pas ces balises et donc les ignorent... Le code de votre Javascript risque donc de s'afficher sur votre belle page web et venir gcher votre travail. L'astuce consiste donc ajouter des balises de commentaires l'intrieur mme des balises de script. Ainsi les anciens navigateurs ignoreront tout simplement l'intgralit du script, tandis que les navigateurs rcents l'interprteront (comme il se le doit) comme du Javascript! Voici ce que donne le script une fois "masqu" pour les anciens navigateurs: <SCRIPT language="Javascript"> <!-Placez ici le code de votre script // --> </SCRIPT> Ajouter des commentaires dans votre code Comme dans tout langage de programmation, il est bon d'ajouter des commentaires dans un de ses scripts d'une part pour s'y retrouver lorsque, plusieurs mois aprs, l'on voudra revoir son script d'autre part par esprit d'change pour permettre vos visiteurs curieux de comprendre votre script (cela n'est pas toujours dsir...)

Il ne faut pas confondre les balises de commentaires du langage HTML (destines masquer le script pour certains browsers) et les caractres de commentaires Javascript (permettant de documenter son script)! Pour crire des commentaires, Javascript utilise les conventions utilises en lange C/C++ Pour mettre en commentaires tout une ligne on utilise le double slash: // Tous les caractres derrire le // sont ignors Pour mettre en commentaire une partie du texte (ventuellement sur plusieurs lignes) on utilise le /* et le */: /* Toutes les lignes comprises entre ces repres Sont ignores par l'interprteur de code */ Il faut veiller ne pas embriquer des commentaires, au risque de provoquer une erreur lors de l'excution du code!

Support de cours

JavaScript

Avril 2001

Un exemple de Javascript Comme gnralement dans les tutoriels de Javascript on va faire afficher un boite de dialogue suite au chargement d'une page HTML. Dans ce cas le script est totalement inutile voire ennuyeux pour vos visiteurs... Cet exemple montre ce que l'abus de Javascript peut donner... Il faudra apprendre se servir du Javascript avec modration! Voici la page HTML correspondante: <HTML> <HEAD> <TITLE> Voici une page contenant du Javascript</TITLE> </HEAD> <BODY> <SCRIPT language="Javascript"> <!-alert("Voici un message d alerte!"); // --> </SCRIPT> </BODY> </HTML>

Support de cours

JavaScript

Avril 2001

B) Javascript dans les pages HTML


A quel emplacement insrer le Javascript dans votre page HTML Il y a plusieurs faon d'inclure du JavaScript dans une page HTML: Grce la balise <SCRIPT> En mettant le code dans un fichier Grce aux vnements

Dans la balise script Le code Javascript peut tre insr o vous le dsirez dans votre page Web, vous devez toutefois veiller ce que le navigateur est entirement charg votre script avant d'excuter une instruction. En effet, lorsque le navigateur charge votre page Web, il la traite de haut en bas, de plus vos visiteurs (souvent impatients) peuvent trs bien interrompre le chargement d'une page, auquel cas si l'appel d'une fonction se situe avant la fonction dans votre page il est probable que cela gnrera une erreur si cette fonction n'a pas t charge. Ainsi, on place gnralement le maximum d'lments du script dans la balise d'en-tte (ce sont les lments situe entre les balises <HEAD> et </HEAD>). Les vnements Javascript seront quant eux placs dans le corps de la page (entre les balises <BODY> et </BODY>) comme attribut d'une commande HTML... <SCRIPT language="Javascript"> <!-Placez ici le code de votre script // --> </SCRIPT> L'argument de la balise <SCRIPT> dcrit le langage utilis. Il peut tre "JavaScript" "JavaScript1.1" "JavaScript1.2". On peut ainsi (en passant un argument diffrent de "JavaScript") utiliser d'autres langages de programmation que celui-ci (par exemple le VbScript). Pour utiliser diffrentes versions de JavaScript tout en conservant une certaine compatibilit, il suffit de dclarer plusieurs balises SCRIPT ayant chacune comme paramtre la version du JavaScript correspondante. Dans un fichier externe Il est possible de mettre les codes de JavaScript en annexe dans un fichier ( partir de Netscape 3.0 uniquement). Le code insrer est le suivant: <SCRIPT LANGUAGE=Javascript SRC="url/fichier.js"> </SCRIPT> O url/fichier.js correspond au chemin d'accs au fichier contenant le code en JavaScript, sachant que si celui-ci n'existe pas le navigateur excutera le code insr entre les 2 balises. Grce aux vnements On appelle vnement une action de l'utilisateur, comme le clic d'un des boutons de la souris. Le code dans le cas du rsultat d'un vnement s'crit: <balise eventHandler="code Javascript insrer"> eventHandler reprsente le nom de l'vnement.

Support de cours

JavaScript

Avril 2001

C) Les Variables
Le concept de variable Une variable est un objet repr par son nom, pouvant contenir des donnes, qui pourront tre modifies lors de l'excution du programme. En Javascript, les noms de variables peuvent tre aussi long que l'on dsire, mais doivent rpondre certains critres: un nom de variable doit commencer par une lettre (majuscule ou minuscule) ou un "_" un nom de variables peut comporter des lettres, des chiffres et les caractres _ et & (les espaces ne sont pas autoriss!) Les noms de variables ne peuvent pas tre les noms suivants (qui sont des noms rservs): abstract boolean break byte case catch char class default do double else extends false final finally float goto if, implements, import, in, instanceof, int, interface long native, new, null package, private, protected, public return short, static, super, switch, synchronized this, throw, throws, transient, true, try var, void while, with

Les noms de variables sont sensibles la casse (le Javascript fait la diffrence entre un nom en majuscule et un nom en minuscules), il faut donc veiller utiliser des noms comportant la mme casse! La dclaration de variables Le Javascript tant trs souple au niveau de l'criture ( double-tranchant car il laisse passer des erreurs...), la dclaration des variables peut se faire de deux faons: soit de faon explicite, en faisant prcder la variable du mot cl var qui permet d'indiquer de faon rigoureuse qu'il s'agit d'une variable: var chaine= "bonjour" soit de faon implicite, en crivant directement le nom de la variable suivie du caractre = et de la valeur affecter: chaine= "bonjour"

Le navigateur dtermine seul qu'il s'agit d'une dclaration de variable. Mme si une dclaration implicite est tout fair reconnue par le navigateur, il est tout de mme plus rigoureux de dclarer les variables de faon explicite avec le mot var... Porte (visibilit) des variables Selon l'endroit o on dclare une variable, celle-ci pourra tre accessible (visible) de partout dans le script ou bien que dans une portion confine du code, on parle de "porte" d'une variable.

Support de cours

JavaScript

Avril 2001

Lorsqu'une variable est dclare sans le mot cl var, c'est--dire de faon implicite, elle est accessible de partout dans le script (n'importe quelle fonction du script peut faire appel cette variable). On parle alors de variable globale Lorsque l'on dclare de faon explicite une variable en javascript (en prcdant sa dclaration avec le mot var), sa porte dpend de l'endroit o elle est dclare. Une variable dclare au dbut du script, c'est--dire avant toute fonction sera globale, on pourra alors les utiliser partir de n'importe quel endroit dans le script Une variable dclare par le mot cl var dans une fonction aura une porte limite cette seule fonction, c'est--dire qu'elle est inutilisable ailleurs, on parle alors de variable locale

Les types de donnes dans les variables En Javascript il n'y a pas besoin de dclarer le type de variables que l'on utilise, contrairement des langages volus tels que le langage C ou le Java pour lesquels il faut prciser s'il s'agit d'entier (int), de nombre virgule flottante (float), de caractres (char), ... En fait le Javascript n'autorise la manipulation que de 4 types de donnes: des nombres: entiers ou virgules des chanes de caractres (string): une suite de caractres des boolens: des variables deux tats permettant de vrifier une condition true: si le rsultat est vrai false: lors d'un rsultat faux des variables de type null: un mot caractristique pour indiquer qu'il n'y a pas de donnes

Nombre entier Un nombre entier est un nombre sans virgule qui peut tre exprim dans diffrentes bases: Base dcimale: L'entier est reprsent par une suite de chiffre unitaires (de 0 9) ne devant pas commencer par le chiffre 0 Base hexadcimale: L'entier est reprsent par une suite d'units (de 0 9 ou de A F (ou a f)) devant commencer par 0x ou 0X Base octale: L'entier est reprsent par une suite d'units (incluant uniquement des chiffres de 0 7) devant commencer par 0

Nombre virgule (float) Un nombre virgule flottante est un nombre virgule, il peut toutefois tre reprsent de diffrentes faons: un entier dcimal: 895 un nombre comportant un point (et non une virgule): 845.32 une fraction: 27/11 un nombre exponentiel, c'est--dire un nombre (ventuellement virgule) suivi de la lettre e (ou E), puis d'un entier correspondant la puissance de 10 (sign ou non, c'est--dire prcd d'un + ou d'un -)

Chane de caractres (string) Une chane de caractre est, comme son nom l'indique, une suite de caractres. On la reprsente par la suite de caractres encadre par des guillemets simples (') ou doubles ("), sachant que les deux types de guillemets ne peuvent tre mlangs pour une mme chane de caractres, ce qui signifie que les guillemets dans une chane de caractres existent par paire.

Support de cours

JavaScript

Avril 2001

Il existe des caractres spciaux utiliser dans les chanes pour simuler d'une part des caractres non visuels ou pour viter au navigateur de confondre les caractres d'une chane avec ceux du script, ces caractres sont prcds d'un antislash (\): \b : touche de suppression \f : formulaire plein \n : retour la ligne \r : appui sur la touche ENTREE \t : tabulation \" : guillemets doubles \' : guillemets simples \\ : caractre antislash

Ainsi, si on veut stocker la chaine suivante dans la variable Titre: Qu'y a-t'il dans "c:\windows\" Il faudra crire dans le code Javascript: Titre = "Qu'y a-t'il dans \"c:\\windows\\\""; ou Titre = 'Qu\'y a-t\'il dans \"c:\\windows\\\"'; Boolens (booleans) Un boolen est une variable spcial servant valuer une condition, il peut donc avoir deux valeurs: vrai: reprsent par 1 faux: reprsent par 0

Support de cours

JavaScript

Avril 2001

D) Les chanes de caractres


Les particularits de l'objet String string est un mot anglais qui signifie "chane", il s'agit en fait de chane de caractres. C'est donc une suite de caractres, on la reprsente gnralement par un ensemble de caractres encadr par des guillemets. La longueur maximale d'une telle chane est priori comprise entre 50 et 80 caractres. L'objet String est un objet qui contient un certain nombre de proprits et de mthodes permettant la manipulation de chanes de caractres. Les proprits de l'objet String L'objet string a une seule proprit : la proprit length qui permet de retourner la longueur d'une chane de caractres. Cette proprit est trs utile car lorsque l'on traite une chane de caractres on aime gnralement savoir quel moment s'arrter. La syntaxe de la proprit length est la suivante: x = nom_de_la_chaine.length; x = ('chaine de caracteres').length; On peut donc directement passer la chane de caractres comme objet, en dlimitant la chane par des apostrophes et en plaant le tout entre parenthses. La mthode traditionnelle consistant appliquer une proprit une variable de type string fonctionne bien videmment aussi. Les mthodes de l'objet String Les mthodes de l'objet string permettent de rcuprer une portion d'une chane de caractre, ou bien de la modifier. Pour comprendre les mthodes suivantes, il est tout d'abord ncessaire de comprendre comment est stocke une chane de caractres: Il s'agit en fait d'une sorte de tableau constitu de n caractres (n est donc le nombre de caractres), on note 0 la position du premier caractre (celui l'extrme gauche), puis on les compte de gauche droite en incrmentant ce nombre:

Support de cours

JavaScript

Avril 2001

Mthode charAt(chane, position) ou chane.charAt(position) indexOf(sous-chane, position)

description Retourne le caractre situ la position donne en paramtre Retourne la position d'une sous-chane (lettre ou groupe de lettres) dans une chane de caractre, en effectuant la recherche de gauche droite, partir de la position spcifie en paramtre. La mthode est similaire indexOf(), la diffrence que la recherche se fait de droite gauche: Retourne la position d'une sous-chane (lettre ou groupe de lettres) dans une chane de caractre, en effectuant la recherche de droite gauche, partir de la position spcifie en paramtre. La mthode retourne la sous-chane (lettre ou groupe de lettres) comprise entre les positions 1 et 2 donnes en paramtre. Convertit tous les caractres d'une chane en minuscule Convertit tous les caractres d'une chane en majuscule Convertit tous les caractres d'une chane en majuscule

lastIndexOf(sous-chane, position)

substring(position1, position2) toLowerCase() toUpperCase() toUpperCase() D'autres methodes Mthode anchor(nom_a_donner) big() blink() bold() fixed fontcolor(couleur) fontsize(Size) italics() link(URL) small() strike() sub() sup()

description Transforme le texte en ancrage HTML Augmente la taille de la police Transforme la chane en texte clignotant Met le texte en gras (balise <B>) Transforme le texte en

police fixe (balise <TT>)

Modifie la couleur du texte (admet comme argument la couleur en hexadcimal ou en valeur littrale) Modifie la taille de la police, en afectant la valeur passe en paramtre Transforme le texte en italique (balise <I>) Transforme le texte en hypertexte (balise <A href>) Diminue la taille de la police Transforme le texte en texte barr (balise <strike>) Transforme le texte en Transforme le texte en
indice

(balise <sub>) (balise <sup>)

exposant

Support de cours

JavaScript

Avril 2001

E) Les vnements
Qu'appelle-t'on un vnement? Les vnements sont des actions de l'utilisateur, qui vont pouvoir donner lieu une interactivit. L'vnement par excellence est le clic de souris, car c'est le seul que le HTML gre. Grce au Javascript il est possible d'associer des fonctions, des mthodes des vnements tels que le passage de la souris au-dessus d'une zone, le changement d'une valeur, ... Ce sont les gestionnaires d'vnements qui permettent d'associer une action un vnement. La syntaxe d'un gestionnaire d'vnement est la suivante: onEvenement="Action_Javascript_ou_Fonction();" Les gestionnaires d'vnements sont associs des objets, et leur code s'insrent dans la balise de ceux-ci... Liste des vnements Evnement (gestionnaire d'vnement) Click (onClick) Load (onLoad) Unload (onUnload) MouseOver (onMouseOver) MouseOut (onMouseOut) Focus (onFocus) Blur (onBlur) Change (onChange) Select (onSelect) Submit (onSubmit) Description

Se produit lorsque l'utilisateur clique sur l'lment associ l'vnement Se produit lorsque le navigateur de l'utilisateur charge la page en cours Se produit lorsque le navigateur de l'utilisateur quitte la page en cours Se produit lorsque l'utilisateur positionne le curseur de la souris au-dessus d'un lment Se produit lorsque le curseur de la souris quitte un lment

Cet vnement fait partie du Javascript 1.1


Se produit lorsque l'utilisateur donne le focus un lment, c'est--dire que cet lment est slectionn comme tant l'lment actif Se produit lorsque l'lment perd le focus, c'est--dire que l'utilisateur clique hors de cet lment, celui-ci n'est alors plus slectionn comme tant l'lment actif Se produit lorsque l'utilisateur modifie le contenu d'un champ de donnes Se produit lorsque l'utilisateur slectionne un texte (ou une partie d'un texte) dans un champ de type "text" ou "textarea" Se produit lorsque l'utilisateur clique sur le bouton de soumission d'un formulaire (le bouton qui permet d'envoyer le formulaire)

Objets auxquels on peut associer des vnements Chaque vnement ne peut pas tre associ n'importe quel objet... il est vident qu'un vnement OnChange ne peut pas s'appliquer un lien hypertexte...

Objet Lien hypertexte Page du navigateur Bouton, Case cocher, Bouton radio, Bouton Reset Liste de slection d'un formulaire Bouton Submit Champ de texte et zone de texte

Evnements associables onClick, onMouseOver, onMouseOut onLoad, onUnload onClick onBlur, onChange, onFocus onSubmit onBlur, onChange, onFocus, onSelect

10

Support de cours

JavaScript

Avril 2001

F) Les Oprateurs
Qu'est-ce qu'un oprateur? Les oprateurs sont des symboles qui permettent de manipuler des variables, c'est--dire effectuer des oprations, les valuer, ... On distingue plusieurs types d'oprateurs:

les oprateurs de calcul les oprateurs d'assignation les oprateurs d'incrmentation les oprateurs de comparaison les oprateurs logiques (les oprateurs bit--dit) (les oprateurs de rotation de bit)

Les oprateurs de calcul Les oprateurs de calcul permettent de modifier mathmatiquement la valeur d'une variable

Oprateur + * / =

Dnomination oprateur d'addition oprateur de soustraction oprateur multiplication plus: oprateur division oprateur d'affectation de de

Effet Ajoute deux valeurs Soustrait deux valeurs Multiplie deux valeurs Divise deux valeurs Affecte une variable valeur une

Exemple x+3 x-3 x*3 x/3 x=3

Rsultat (avec x valant 7) 10 4 21 2.3333333 Met la valeur variable x 3 dans la

Les oprateurs d'assignation Ces oprateurs permettent de simplifier des oprations telles que ajouter une valeur dans une variable et stocker le rsultat dans la variable. Une telle oprations s'crirait habituellement de la faon suivante par exemple: x=x+2 Avec les oprateurs d'assignation il est possible d'crire cette opration sous la forme suivante: x+=2 Ainsi, si la valeur de x tait 7 avant opration, elle sera de 9 aprs... Les autres oprateurs du mme type sont les suivants:

Oprateur += -= *= /=

Effet addition deux valeurs et stocke le rsultat dans la variable ( gauche) soustrait deux valeurs et stocke le rsultat dans la variable multiplie deux valeurs et stocke le rsultat dans la variable divise deux valeurs et stocke le rsultat dans la variable

Les oprateurs d'incrmentation Ce type d'oprateur permet de facilement augmenter ou diminuer d'une unit une variable. Ces oprateurs sont trs utiles pour des structures telles que des boucles, qui ont besoin d'un compteur (variable qui augmente de un en un). Un oprateur de type x++ permet de remplacer des notations lourdes telles que x=x+1 ou bien x+=1

Oprateur ++ --

Dnomination Incrmentation Dcrmentation

Effet Augmente d'une unit la variable Diminue d'une unit la variable

Syntaxe x++ x--

Rsultat (avec x valant 7) 8 6

11

Support de cours

JavaScript

Avril 2001

Les oprateurs de comparaison Oprateur == A ne pas confondre avec le signe d'affectation (=)!! < Dnomination Effet Exemple Rsultat valant 7) (avec x

oprateur d'galit

Compare deux valeurs et vrifie leur galit Vrifie qu'une variable est strictement infrieure une valeur Vrifie qu'une variable est infrieure ou gale une valeur Vrifie qu'une variable est strictement suprieure une valeur Vrifie qu'une variable est suprieure ou gale une valeur Vrifie qu'une variable est diffrente d'une valeur

x==3

Retourne 1 si X est gal 3, sinon 0

oprateur d'infriorit stricte oprateur d'infriorit oprateur de supriorit stricte oprateur supriorit oprateur diffrence de

x<3

Retourne 1 si X est infrieur 3, sinon 0 Retourne 1 si X est infrieur 3, sinon 0 Retourne 1 si X est suprieur 3, sinon 0 Retourne 1 si X est suprieur ou gal 3, sinon 0 Retourne 1 si X est diffrent de 3, sinon 0

<=

x<=3

>

x>3

>=

x>=3

!=

de

x!=3

Les oprateurs logiques (boolens) Ce type d'oprateur permet de vrifier si plusieurs conditions sont vraies:

Oprateur || && !

Dnomination OU logique ET logique NON logique

Effet Vrifie qu'une des conditions est ralise Vrifie que toutes les conditions sont ralises Inverse l'tat d'une variable boolenne (retourne la valeur 1 si la variable vaut 0, 0 si elle vaut 1)

Syntaxe ((condition1)||(condition2)) ((condition1)&&(condition2)) (!condition)

12

Support de cours

JavaScript

Avril 2001

G) Les structures conditionnelles


On appelle structure conditonnelle les instructions qui permettent de tester si une condition est vraie ou non, ce qui permet de donner de l'interactivit vos scripts par exemple. L'instruction if L'instruction if est la structure de test la plus basique, on la retrouve dans tous les langages (avec une syntaxe diffrente...). Elle permet d'excuter une srie d'instruction si jamais une condition est ralise. La syntaxe de cette expression est la suivante: if (condition ralis) { liste d'instructions } Remarques: la condition doit tre entre des parenthses il est possible de dfinir plusieurs conditions remplir avec les oprateurs ET et OU (&& et ||) par exemple: if ((condition1)&&(condition2)) teste si les deux conditions sont vraies if ((condition1)||(condition2)) excutera les instructions si l'une ou l'autre des deux conditions est vraie s'il n'y a qu'une instruction, les accolades ne sont pas ncessaires... L'instruction if ... else L'instruction if dans sa forme basique ne permet de tester qu'une condition, or la plupart du temps on aimerait pouvoir choisir les instructions excuter en cas de non ralisation de la condition... L'expression if ... else permet d'excuter une autre srie d'instruction en cas de non-ralisation de la condition. La syntaxe de cette expression est la suivante: if (condition ralis) { liste d'instructions } else { autre srie d'instructions } une faon plus courte de faire un test Il est possible de faire un test avec une structure beaucoup moins lourde grce la structure suivante: (condition) ? instruction si vrai : instruction si faux Remarques:

la condition doit tre entre des parenthses Lorsque la condition est vraie, l'instruction de gauche est excute Lorsque la condition est fausse, l'instruction de droite est excute

Les boucles Les boucles sont des structures qui permettent d'excuter plusieurs fois la mme srie d'instructions jusqu' ce qu'une condition ne soit plus ralise...

13

Support de cours

JavaScript

Avril 2001

La faon la plus commune de faire une boucle, est de crer un compteur (une variable qui s'incrmente, c'est--dire qui augmente de 1 chaque tour de boucle) et de faire arrter la boucle lorsque le compteur dpasse une certaine valeur. La boucle for L'instruction for permet d'excuter plusieurs fois la mme srie d'instructions: c'est une boucle! Dans sa syntaxe, il suffit de prciser le nom de la variable qui sert de compteur (et ventuellement sa valeur de dpart, la condition sur la variable pour laquelle la boucle s'arrte (basiquement une condition qui teste si la valeur du compteur dpasse une limite) et enfin une instruction qui incrmente (ou dcrmente) le compteur. La syntaxe de cette expression est la suivante: for (compteur; condition; modification du compteur) { liste d'instructions } Par exemple: for (i=1; i<6; i++) { Alert(i) } Cette boucle affiche 5 fois la valeur de i, c'est--dire 1,2,3,4,5 Elle commence i=1, vrifie que i est bien infrieur 6, etc... jusqu' atteindre la valeur i=6, pour laquelle la condition ne sera plus ralise, la boucle s'interrompra et le programme continuera son cours. * il faudra toujours vrifier que la boucle a bien une condition de sortie (i.e le compteur s'incrmente correctement) * une instruction Alert(i); dans votre boucle est un bon moyen pour vrifier la valeur du compteur pas pas! * il faut bien compter le nombre de fois que l'on veut faire excuter la boucle: * for(i=0;i<10;i++) excute 10 fois la boucle (i de 0 9) * for(i=0;i<=10;i++) excute 11 fois la boucle (i de 0 10) * for(i=1;i<10;i++) excute 9 fois la boucle (i de 1 9) * for(i=1;i<=10;i++) excute 10 fois la boucle (i de 1 10)

L'instruction while L'instruction while d'instructions. reprsente un autre moyen d'excuter plusieurs fois la mme srie

La syntaxe de cette expression est la suivante: while (condition ralise) { liste d'instructions } Cette instruction excute la liste d'instructions tant que (while est un mot anglais qui signifie tant que) la condition est ralise. La condition de sortie pouvant tre n'importe quelle structure conditionnelle, les risques de boucle infinie (boucle dont la condition est toujours vraie) sont grands, c'est--dire qu'elle risque de provoquer un plantage du navigateur! Saut inconditionnel Il peut tre ncessaire de faire sauter la boucle une ou plusieurs valeurs sans pour autant mettre fin celle-ci.

14

Support de cours

JavaScript

Avril 2001

La syntaxe de cette expression est "continue;" (cette instruction se place dans une boucle!), on l'associe gnralement une structure conditionnelle, sinon les lignes situes entre cette instruction et la fin de la boucle seraient obsoltes. Exemple: Imaginons que l'on veuille imprimer pour x allant de 1 10 la valeur de 1/(x-7) ... il est vident que pour x=7 il y aura une erreur. Heureusement, grce l'instruction continue il est possible de traiter cette valeur part puis de continuer la boucle! x=1 while (x<=10) { if (x == 7) { Alert('division par 0'); continue; } a = 1/(x-7); Alert(x); x++ } Il y avait une erreur dans ce script... peut-tre ne l'avez-vous pas vue: Lorsque x est gal 7, le compteur ne s'incrmente plus, il reste constamment la valeur 7, il aurait fallu crire: x=1 while (x<=10) { if (x == 7) { Alert('division par 0'); x++; continue; } a = 1/(x-7); Alert(x); x++ } Arrt inconditionnel A l'inverse, il peut tre voulu d'arrter prmaturment la boucle, pour une autre conditon que celle prcis dans l'en-tte de la boucle. L'instruction break permet d'arrter une boucle (for ou bien while). Il s'agit, tout comme continue, de l'associer une structure conditionnelle, sans laquelle la boucle ne ferait jamais plus d'un tour! Dans l'exemple de tout l'heure, par exemple si l'on ne savait pas quel moment le dnominateur (x-7) s'annule (bon...OK...pour des quations plus compliques par exemple) il serait possible de faire arrter la boucle en cas d'annulation du dnominateur, pour viter une division par zro! for (x=1; x<=10; x++) { a = x-7; if (a == 0) { Alert('division par 0'); break; } Alert(1/a); }

15

Support de cours

JavaScript

Avril 2001

H) Les Fonctions
On appelle fonction un sous-programme qui permet d'effectuer un ensemble d'instruction par simple appel de la fonction dans le corps du programme principal. Cette notion de sousprogramme est gnralement appele fonction dans les langages autres que le Javascript (touefois leur syntaxe est gnralement diffrente...). Les fonctions et les permettent d'excuter dans plusieurs parties du programme une srie d'instruction, cela permet une simplicit du code et donc une taille de programme minimale. D'autre part, une fonction peut faire appel elle-mme, on parle alors de fonction rcursive (il ne faut pas oublier de mettre une condition de sortie au risque sinon de ne pas pouvoir arrter le programme...). Javascript contient des fonctions prdfinies qui peuvent s'appliquer pour un ou plusieurs types d'objets spcifiques, on appelle ces fonctions des mthodes. La dclaration d'une fonction Avant d'tre utilise, une fonction doit tre dfinie car pour l'appeler dans le corps du programme il faut que le navigateur la connaisse, c'est--dire qu'il connaisse son nom, ses arguments et les instructions qu'elle contient. La dfinition d'une fonction s'appelle "dclaration". La dclaration d'une fonction se fait grce au mot cl function selon la syntaxe suivante: function Nom_De_La_Fonction(argument1, argument2, ...) { liste d'instructions } Remarques:

le mot cl function est suivi du nom que l'on donne la fonction le nom de la fonction suit les mmes rgles que les noms de variables : le nom doit commencer par une lettre un nom de fonction peut comporter des lettres, des chiffres et les caractres _ et & (les espaces ne sont pas autoriss!) le nom de la fonction, comme celui des variables est sensible la casse (diffrenciation entre les minuscules et majuscules) Les arguments sont facultatifs, mais s'il n'y a pas d'arguments, les parenthses doivent rester prsentes Il ne faut pas oublier de refermer les accolades Le nombre d'accolades ouvertes (fonction, boucles et autres structures) doit tre gal au nombre de parenthses fermes! La mme chose s'applique pour les parenthses, les crochets ou les guillemets!

Une fois cette tape franchie, votre fonction ne s'excutera pas tant que l'on ne fait pas appel elle quelque part dans la page! Appel de fonction Pour excuter une fonction, il suffit de faire appel elle en crivant son nom (une fois de plus en respectant la casse) suivie d'une parenthse ouverte (ventuellement des arguments) puis d'une parenthse ferme: Nom_De_La_Fonction(); Remarques:

le point virgule signifie la fin d'une instruction et permet au navigateur de distinguer les diffrents blocs d'instructions si jamais vous avez dfini des arguments dans la dclaration de la fonction, il faudra veiller les inclure lors de l'appel de la fonction (le mme nombre d'arguments spars par des virgules!)

Veillez toujours ce qu'une fonction soit dclare avant d'tre appele, sachant que le navigateur traite la page de haut en bas (Pour viter des erreurs de ce type on dclare

16

Support de cours

JavaScript

Avril 2001

gnralement les fonctions dans des balises SCRIPT situes dans l'en-tte de la page, c'est--dire entre les balises <SCRIPT> et </SCRIPT>) Grce au gestionnaire d'vnement onLoad ( placer dans la balise BODY) il est possible d'excuter une fonction au chargement de la page, comme par exemple l'initialisation des variables pour votre script, et/ou le test du navigateur pour savoir si celui-ci est apte faire fonctionner le script. Il s'utilise de la manire suivante: <HTML> <HEAD> <SCRIPT language="Javascript"> <!-function Chargement() { alert('Bienvenue sur le site'); } //--> </SCRIPT> </HEAD> <BODY onLoad="Chargement();" > Javascript qui ne sert absolument rien si ce n'est dranger vos visiteurs... </BODY> </HTML> Les paramtres d'une fonction Il est possible de passer des paramtres une fonction, c'est--dire lui fournir une valeur ou le nom d'une variable afin que la fonction puisse effectuer des oprations sur ces paramtres ou bien grce ces paramtres. Lorsque vous passez plusieurs paramtres une fonction il faut les sparer par des virgules, aussi bien dans la dclaration que dans l'appel et il faudra veiller bien passer le bon nombre de paramtres lors de l'appel au risque sinon de crer une erreur dans votre Javascript... Imaginons que l'on veuille crer une page Web qui affiche une bote de dialogue (les botes de dialogues sont viter dans vos pages car elles sont nervantes, mais c'est toutefois une manire simple d'apprendre le Javascript) qui affiche un texte diffrent selon le lien sur lequel on appuie. La mthode de base consiste faire une fonction pour chaque texte afficher: <HTML> <HEAD> <SCRIPT language="Javascript"> <!-function Affiche1() { alert('Texte 1'); } function Affiche2() { alert('Texte2'); } //--> </SCRIPT> </HEAD> <BODY onLoad="Chargement();" > <A href="javascript:;" onClick="Affiche1();">Texte1</A> <A href="javascript:;" onClick="Affiche2();">Texte2</A> </BODY> </HTML>

17

Support de cours

JavaScript

Avril 2001

Il existe toutefois une methode plus "classe" qui consiste crer une fonction qui a comme paramtre le texte afficher: <HTML> <HEAD> <SCRIPT language="Javascript"> <!-function Affiche(Texte) { alert(Texte); } //--> </SCRIPT> </HEAD> <BODY onLoad="Chargement();" > <A href="javascript:;" onClick="Affiche('Texte1');">Texte1</A> <A href="javascript:;" onClick="Affiche('Texte2');">Texte2</A> </BODY> </HTML> Rsultat: Aucune diffrence visuellement mais vous n'avez plus qu'une seule fonction qui peut vous afficher n'importe quel texte... Travailler sur des variables dans les fonctions Lorsque vous manipulerez des variables dans des fonctions, il vous arrivera de constater que vous avez beau modifier la variable dans la fonction celle-ci retrouve sa valeur d'origine ds que l'on sort de la fonction... Cela est du la porte des variables, c'est--dire si elles ont t dfinies comme variables globales ou locales.

Une variable dclare implicitement (non prc&eracute;de du mot var) sera globale , c'est--dire accessible aprs excution de la fonction Une variable dclare explicitement (prc&eracute;de du mot var) sera locale , c'est-dire accessible uniquement dans la fonction, toute rfrence cette variable hors de la fonction provoquera une erreur (variable inconnue)...

Le mot-cl this Lorsque vous fates appel une fonction partir d'un objet, par exemple un formulaire, le mot cl this fait rfrence l'objet en cours et vous vite d'avoir dfinir l'objet en tapant window.objet1.objet2... ainsi lorsque l'on passe l'objet en cours en paramtre d'une fonction, il suffit de taper nom_de_la_fonction(this) pour pouvoir manipuler cet objet partir de la fonction. Pour manipuler les proprits de l'objet il suffira de taper this.propriete (o propriete reprsente bien sr le nom de la proprit).

18

Support de cours

JavaScript

Avril 2001

I) Les Objets du Navigateur


Lorsque vous ouvrez une page Web, le navigateur cre des objets prdfinis correspondant la page Web, l'tat du navigateur, et peuvent donner beaucoup d'informations qui vous seront utiles. Les objets de base du navigateur sont les suivants:

navigator: qui contient des informations sur le navigateur de celui qui visite la page window: c'est l'objet o s'affiche la page, il contient donc des proprits concernant la fentre elle-mme mais aussi tous les objets-enfants contenus dans celle-ci location: contient des informations relatives l'adresse de la page l'cran history: c'est l'historique, c'est--dire la liste de liens qui ont t visits prcdemment document: il contient les proprits sur le contenu du document (couleur d'arrire plan, titre, ...)

Ces objets sont largement dpendant du contenu de la page. En effet, mis part des objets tels que navigator qui sont figs pour un utilisateur donn, le contenu des autres objets variera suivant le contenu de la page, car suivant la page les objets prsents dans celles-ci (sous-objets des objets dcrits prcdemment) sont diffrents. voyons voir comment ceux-ci sont organiss Les objets du navigateur sont classs hirarchiquement Les objets du navigateur sont classs dans une hirarchie qui dcrit la page affiche l'cran, et qui permet d'accder n'importe quel objet grce une dsignation dpendant de la hirarchie (on part du sommet puis on descend l'arborescence). Dans cette hirarchie, les descendants d'un objet sont des proprits de ces objets mais peuvent aussi tre des objets qui contiennent eux mme des proprits... Voyons voir quoi ressemble cette hrarchie:
Niveau1 navigator window parent, top location history document images forms links anchors frames, self, Niveau2 Niveau3 Commentaire Informations sur le browser utilis Gestion de la fentre d'affichage Dsignation de la sous-fentre Informations sur l'emplacement de la page Accs l'historique (sites prcdemment visits) Informations sur le contenu de la fentre (lments qui composent la page) Rfrence des images prsentes dans la page Rfrence des formulaires prsents dans la page Rfrence des liens prsents dans la page Rfrence des ancrages prsents dans la page

Comment accder un objet? Pour accder un objet du navigateur, il faut parcourir la hirarchie du navigateur, en partant du sommet (l'objet window), puis en parcourant tous les maillons jusqu' atteindre l'objet dsir. La syntaxe est window.objet1.objet2.objet3.objet_vise (ici il y a trois objets intermdiaire objet1 objet2 objet3 mais ce nombre peut varier de 0 un trs grand nombre d'objets, suivant l'embrication de vos objets dans la page...). Pour accder modifier une proprit de l'objet vis il suffit de rajouter un point, puis le nom de la proprit. Certaines proprits sont modifiables, c'est--dire que dynamiquement on va pouvoir modifier un lment (du texte, une image, ...). Certaines proprits sont par contre en lecture seule, c'est--dire qu'elles permettent uniquement de rcuprer des informations mais qu'on ne peut pas les modifier...

19

Support de cours

JavaScript

Avril 2001

J) L'objet Window
L'objet window est l'objet par exellence dans Javascript, car il est le parent de chaque obet qui compose la page web, il contient donc:

l'objet l'objet l'objet l'objet

document: la page en elle-mme location: le lieu de stockage de la page history: les pages visites prcdemment frames: les cadres (division de la fentre en sous-fentres)

Les mthodes de l'objet window L'objet window possde des mthodes relatives l'ouverture et la fermeture des fentres. Les mthodes alert(), confirm() et prompt() Les mthodes alert(), confirm() et prompt() sont des mthodes qui font apparatre une bote de dialogue, elles sont expliques en dtail dans le chapitre Bote de dialogue. Les mthodes open(), et close() Les mthodes open() et close() sont bien videmment destines permettre l'ouverture et la fermeture de fentres. Toutefois la syntaxe de la mthode open() est longue car elle admet un nombre important de paramtres: La mthode open() permet d'ouvrir une fentre, voici sa syntaxe: window.open("URL","nom_de_la_fenetre","options_de_la_fenetre"); URL dsigne l'url de la page qui sera affiche dans la nouvelle fentre, c'est--dire l'emplacement physique de celle-ci. Les options de la fentre sont les suivantes: option directory = yes/no location = yes/no menubar = yes/no resizable = yes/no scrollbars = yes/no status = yes/no toolbar = yes/no width = largeur (en pixels) height = hauteur (en pixels) description Affiche ou non les boutons de navigation Affiche ou non la barre d'adresse Affiche ou non la barre de menu (fichier, edition, ...) Dfinit si la taille de la fentre est modifiable ou non Affiche ou non les ascenceurs (barres de dfilement) Affiche ou non la barre d'tat Affiche ou non la barre d'outils Dfinit la largeur Dfinit la hauteur

Ainsi, il est possible d'utiliser cette mthode avec n'importe quel gestionnaire d'vnement, directement dans le code excuter ou bien dans une fonction. les options doivent tre saisies les unes aprs les autres, spares par des virgules, sans espace l'ensemble des options doit tre encadr par les guillemets

Chacune des fentres doit cependant tre ferme, il faut donc se servir de la mthode close() qui permet de fermer une fentre. La mthode close() requiert le nom de la fentre comme argument, il suffit donc de crer un bouton (image, hypertexte, ou bouton de formulaire) qui permettra de fermer cette fentre. Pour un lien hypertexte, le code sera:

20

Support de cours

JavaScript

Avril 2001

<A href="javascript:self.close('nom_de_la_fenetre_');">Cliquez ici pour fermer la fentre</A> Pour un bouton (image), le code sera: <A href="javascript:self.close('nom_de_la_fenetre_');"><img src="nom_de_l_image"></A> Il est bien videmment possible d'utiliser cette procdure avec tous les gestionnaires d'vnement, en utilisant par exemple une syntaxe proche de celle-ci: <Ahref="javascript:;"onMouseOver="self.close('nom_de_la_fenetre_');"> <img src="nom_de_l_image"></A>

21

Support de cours

JavaScript

Avril 2001

K) Listings Divers
Listing 1: Le script An 2000 avec le calcul des minutes l: <HTML> 2: <HEAD><TITLE>An 2000</TITLE></HEAD> 3: <BODY> 4: <H1>Compte rebours jusqu' Year 2000</H1> 5: <HR> 6: <SCRIPT LANGUAGE="JavaScript1.1"> 7: maintenant = new Date(); 8: an2000 = new Date("Jan 01 00:00:00 2000"); 9: secondes = (an2000 - maintenant) / 1000; 10: secondes = Math.round(secondes); 11: document.write("Secondes jusqu' l'an 2000: " + seconds) 12: minutes - secondes / 60; 13: minutes = Math.round(minutes); 14: document.write("<P>Minutes jusqu' l'an 2000: " + minutes); 15: </SCRIPT> 16: </BODY> 17: </HTML>

Listing 2: Un exemple complet d'utilisation de fonction 1: <HTML> 2: <HEAD> 3: <TITLE>Fonctions</TITLE> 4: <SCRIPT LANGUAGE="JavaScript"> 5: function Bonjour(untel) { 6: window.alert("Bien le bonjour, " + untel); 7: } 8: </SCRIPT> 9: </HEAD> 10: <BODY> 11: <hl>Exemple de fonction</h1> 12: <P>Vous allez tre salu deux fois de suite.</P> 13: <SGRIPT LANGUAGE="JavaScript"> 14: Bonjour("Anna"); 15: Bonjour("Fred"); 16: </SCRIPT> 17: </BODY> 18: </HTML> Listing 3: Une instruction if dclenchant une srie d'actions 1: if (a == 1) { 2: window.alert("a est gal 1."); 3: } 4: else if (a == 2) { 5: window.alert("a est gale 2."); 6: } 7: else { 8: window.alert("a est diffrent de 1 et 2."); 9: } Listing 4: Le script de test des rponses de l'utilisateur 1: <HTML> 2: <HEAD><TITLE>R&eacute;action &agrave; la r&eacute;ponse de l'utilisateur </TITLE> 3: </HEAD> 4: <BODY> 5: <H1>R&eacute;action &agrave; la r&eacute;ponse de l'utilisateur</H1>

22

Support de cours

JavaScript

Avril 2001

6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: 20: 21: 22: 23: 24:

<P>Entrez votre destination</P> <SCRIPT LANGUAGE="JavaScript1.2"> destination = prompt("O voulez-vous aller ?"); switch (destination) { case "Netscape" : window.location="http://www.netscape.fr"; break; case "Microsoft" : window.location="http://www.microsoft.fr"; break; case "Yahoo" : window.location="http://www.yahoo.fr"; break; default : window.location="http://www.campuspress.fr"; } </SCRIPT> </BODY> </HTML>

Listing 5: Script permettant de connatre les proprits des navigateurs <SCRIPT LANGUAGE="JavaScript"> j=1; for(i in navigator){ document.write("Property "+navigator[i]); document.write("<br>"); j++; } </SCRIPT>

nb

"+

+"

"+i

"

est

23

Support de cours

JavaScript

Avril 2001

L) Exercices
Exercice 1 : Calcul dune moyenne de 4 nombres : afficher les quatre valeurs sur la page ainsi que le rsultat du calcul. Exercice 2 : Demander l'utilisateur d'entrer dix noms via la mthode window.prompt(), stocker ces valeurs dans un tableau, afficher ce tableau sur la page, trier le tableau et afficher sur la page le tableau tri. Exercice 3 : A l'aide de Dreamweaver, crer un formulaire comportant plusieurs champs (textes et numriques), des boutons radio, des checkbox et un bouton de validation. Vous enverrez ce formulaire l'une de vos adresses e-mail. Le but de l'exercice est de vrifier que tous les champs ont t remplis, qu'il n'y a pas de lettres dans les champs numriques, etc. Pour vous aider, utilisez le formulaire de contact que vous avez fait sur votre site web. Si vous n'en avez pas, faites-en un. Exrecice 4 : Sur votre site web, crez une page que vous nommerez "galerie" sur laquelle vous placerez diffrentes images (leurs vignettes = les thumbnails). Vous crirez ensuite un script qui, lorsque vous cliquez sur une des vignettes, fasse apparatre l'image originale dans une nouvelle fentre comportant un bouton permettant de la fermer.

24

Support de cours

JavaScript

Avril 2001

M) Supplment - Les COOKIES


Les Cookies. Nous allons voir ici quoi servent les cookies et comment stocker et rcuprer des informations grce eux. En annexe de ce document, vous trouverez un exemple complet. 1. A quoi servent les cookies ? Les cookies sont trs utiliss, par tous les sites commerciaux et par de plus en plus de sites personnels. La raison est simple. Un cookie permet de stocker de manire permanente des informations sur le poste du visiteur, informations qui pourront tre rcupres lors des futures visites. Voyons quelques unes des principales informations stockes dans les cookies : Le nombre de visites, la date de la dernire visite,... Un identifiant et un mot de passe pour une reconnaissance automatique du visiteur Une liste de mots-cls utiliss dans les moteurs de recherche pour cibler les publicits afficher (Exemple : beaucoup de moteurs de recherche) Une liste de paramtres de prfrences de navigation pour personnaliser la page prsente. Des informations transfrer d'une page l'autre du site. 2. Comment STOCKER des informations ? Le type d'informations stocker n'a aucune influence sur le code. Un cookie est un fichier de texte qui contient une chane de caractres contenant les informations concatnes. Voici la fonction qui permet de stocker une information dans un cookie function SetCookie (name, value) { var argv=SetCookie.arguments; var argc=SetCookie.arguments.length; var expires=(argc > 2) ? argv[2] : null; var path=(argc > 3) ? argv[3] : null; var domain=(argc > 4) ? argv[4] : null; var secure=(argc > 5) ? argv[5] : false; document.cookie=name+"="+escape(value)+((expires==null)? "" : ("; expires="+expires.toGMTString()))+ ((path==null) ? "" : ("; path="+path))+ ((domain==null) ? "" : ("; domain="+domain))+ ((secure==true) ? "; secure" : ""); } La valeur stocker est associe un nom de cookie. La date d'expiration permet de dfinir la longvit du cookie. Si elle est omise, le cookie est dtruit la fermeture du navigateur. Le path indique simplement d'o vient le cookie. Le nom de domaine permet d'identifier le cookie parmi tous ceux stocks sur la machine. La variable secure indique si l'accs au cookie est protg. Donc pour stocker la valeur Arthur dans la variable prenom il suffit d'appeler la fonction comme ceci : var pathname=location.pathname; var myDomain=pathname.substring(0,pathname.lastIndexOf('/')) +'/'; var date_exp = new Date(); date_exp.setTime(date_exp.getTime()+(365*24*3600*1000)); // Ici on dfinit une dure de vie de 365 jours SetCookie("prenom","Arthur",date_exp,myDomain); 3 - Comment RECUPERER les informations ? Voyons un cookie qui contiendrait les informations suivantes :

25

Support de cours

JavaScript

Avril 2001

prenom = Arthur nb_visite = 3 Pour rcuprer l'information prenom, il faut extraire de la chane de caractres composant le cookie, le nom de la variable soit prenom. La valeur de prenom est la chane de caractres situe immdiatement aprs et spare par ';' et par ' '. Voici le code des fonctions ncessaires la rcupration d'une information : function getCookieVal(offset) { var endstr=document.cookie.indexOf (";", offset); if (endstr==-1) endstr=document.cookie.length; return unescape(document.cookie.substring(offset, endstr)); } function GetCookie (name) { var arg=name+"="; var alen=arg.length; var clen=document.cookie.length; var i=0; while (i<clen) { var j=i+alen; if (document.cookie.substring(i, j)==arg) return getCookieVal (j); i=document.cookie.indexOf(" ",i)+1; if (i==0) break; } return null; } Si la variable demande n'est pas contenue dans le cookie, elle est considre comme valant null. Pour rcuprer la variable prenom, il suffit d'appeler la fonction : le_prenom=GetCookie("prenom"); Maintenant, vous savez tout. Il ne reste plus qu' faire preuve d'imagination. La gestion des cookies est toujours la mme, mais leur utilisation est illimite :-) Pour plus dinformations : http://www.netscape.com/newsref/std/cookie_spec.html
<html> <head> <title>Utilisation d'un cookie avec JavaScript</title> <script language="JavaScript"> // Dclaration des variables 'domaine' et 'date d'expiration' var pathname=location.pathname; var myDomain=pathname.substring(0,pathname.lastIndexOf('/')) +'/'; var date_exp = new Date(); date_exp.setTime(date_exp.getTime()+(365*24*3600*1000)); // Voici les 3 fonctions de gestions des cookies function getCookieVal(offset) { var endstr=document.cookie.indexOf (";", offset); if (endstr==-1) endstr=document.cookie.length; return unescape(document.cookie.substring(offset, endstr)); } function GetCookie (name)

26

Support de cours

JavaScript

Avril 2001

{ var arg=name+"="; var alen=arg.length; var clen=document.cookie.length; var i=0; while (i<clen) { var j=i+alen; if (document.cookie.substring(i, j)==arg) return getCookieVal (j); i=document.cookie.indexOf(" ",i)+1; if (i==0) break; } return null; } function SetCookie (name, value) { // un cookie a besoin d'un nom, d'une valeur, d'un nom de domaine, d'une date d'expiration var argv=SetCookie.arguments; var argc=SetCookie.arguments.length; var expires=(argc > 2) ? argv[2] : null; var path=(argc > 3) ? argv[3] : null; var domain=(argc > 4) ? argv[4] : null; var secure=(argc > 5) ? argv[5] : false; document.cookie=name+"="+escape(value)+ ((expires==null) ? "" : ("; expires="+expires.toGMTString()))+ ((path==null) ? "" : ("; path="+path))+ ((domain==null) ? "" : ("; domain="+domain))+ ((secure==true) ? "; secure" : ""); } function disp(txt) { document.write(txt); }

function init() { var nb=GetCookie("nb"); var nom=GetCookie("nom"); } function sto() { // Fonction appele par le bouton "Stocker une information" // Le nom de l'information est prcde de "_" pour ne pas interfrer avec les noms utiliss par le site JScript. var nom=document.forms[0].elements[0].value; var valeur=document.forms[0].elements[1].value; if (nom!="") { if (valeur!="") { SetCookie("_"+nom,valeur,date_exp,myDomain); } } else alert("Il n'y a pas de nom !"); document.forms[0].elements[0].value=""; document.forms[0].elements[1].value=""; } function get() { // Fonction appele par le bouton "Rcuprer une information" // Le nom de l'information est prcde de "_" pour ne pas interfrer avec les noms utiliss par le site JScript. var nom=document.forms[0].elements[3].value; if (nom!="") { var valeur=GetCookie("_"+nom); if (valeur!=null) { document.forms[0].elements[4].value=valeur; } else document.forms[0].elements[4].value="null";

27

Support de cours

JavaScript

Avril 2001

} else document.forms[0].elements[4].value=""; } </script> </head> <body bgcolor="#CCCCCC"> <form method="post" action=""> <table width=500 border=1> <tr> <td colspan=2><b>Enregistrer une information</b></td> </tr> <tr> <td width=300>Entrez le nom de l'information</td> <td width=200><input type="text"></td> </tr> <tr> <td>Entrez la valeur de cette information</td> <td><input type="text"></td> </tr> <tr> <td colspan=2><input type="button" value="Stocker l'information" onClick="sto()"></td> </tr> </table> <p> <hr> <p> <table width=500 border=1> <tr> <td colspan=2><b>Rcuprez une information</b></td> </tr> <tr> <td width=300>Entrez le nom de l'information</td> <td width=200><input type="text"></td> </tr> <tr> <td>L'information vaut</td> <td><input type="text"></td> </tr> <tr> <td colspan=2><input type="button" value="Retourner onClick="get()"></td> </tr> </table> <p> <input type=reset value="effacer les valeurs"> </form> </body> </html>

l'information"

28