83950tgpa0007 03

Initiation Javascript
Squence 3
Contenu
1. Campons le dcor 2. Code javascript entre <body> et </body> 3. Code javascript entre <head> et </head> 4. Code javascript dans un fichier spar 5. La gestion des vnements utilisateur 6. Utilisation des valeurs contenues dans les contrles 7. Modification des lments dun document HTML 8. Syntaxe du langage javascript 9. La gestion des cookies 10. Et si on compltait notre site avec ce quon a appris ? 11. Conclusion
1.Campons le dcor
Voici ci-dessous, ce que vous avez pu lire, dans la squence 1, dans la partie traitant des scripts clients.
Utilisation de scripts clients

Dans le cas de lutilisation de scripts clients, les traitement sont intgrs la description de la page envoye. Il sagit, dans ce cas, de scripts (crits dans un langage de script), intgrs au code source de la page, et qui sont excuts par le navigateur de linternaute. Le dveloppeur (cest--dire vous!) crit, par exemple en javascript ou VBscript, des morceaux de programmes appels scripts, intgrs dans le code HTML dcrivant la page, et traduits par le navigateur avant visualisation. Donc, pour crer ce type de site, on utilise du langage HTML et un langage de script client. Nous, on va faire du javascript, car tous les navigateurs savent dcoder ce langage de script. Par contre, nous ne verrons pas VBScript, car seul Internet Explorer sait le traduire. Chose promise, chose due... en avant pour du javascript. Nhsitez pas relire les passages de la squence 1 vous permettant de bien re-situer la place du langage javascript dans la jungle des technologies Web. Javascript a t cr par Netscape (lditeur qui a conu le navigateur du mme nom) afin danimer les pages HTML et de crer plus dinteractivit entre linternaute et les sites quil frquente. Les sites utilisant du HTML et du javascript ne sont pas pour autant O des sites dynamiques. 81
8 3950 TG PA 00
Squence 3
Rappel : les sites dynamiques sont des sites dont les pages sont construites au moment de la visualisation laide dun programme sexcutant sur le serveur. Disons que les sites dont les pages contiennent du javascript sont plus anims que sils taient uniquement dcrits avec du HTML, et disons galement que les langages de script client permettent de dporter une partie des traitements sur le poste de linternaute. Lorsquon souhaite enrichir une page HTML laide dinstructions en javascript, les instructions sont dans le code de la page. Cest le navigateur de linternaute qui se charge dexcuter les instructions.
O Il ne faut pas confondre le langage javascript, avec le langage java.

Leurs noms se ressemblent, certaines instructions aussi (ben oui, cest de langlais), on peut sen servir pour dvelopper pour le Web (des scripts clients en ce qui concerne javascript , des applets et des servlets entre autres en ce qui concerne java) . Mais ils sont fondamentalement diffrents : javaScript est un langage de script interprt par le navigateur, cest--dire quil ne sexcute que dans des pages WEB et contrle le navigateur ; le java est un langage de programmation externe, ce qui signifie quun programme java peut sexcuter indpendamment de tout navigateur.
1A. Utilit du javascript

Ce langage permet lcriture de programmes que le HTML ne permet pas dcrire et dont le rle est denrichir le comportement des pages. Ca, cest le ct gadget du rle du javascript, le terme gadget ne signifiant pas que cet aspect du javascript est inutile. Mais surtout le javascript permet : danimer le comportement des pages HTML par la gestion des interventions de linternaute sur les pages (on appelle a la gestion des vnements utilisateur, cest--dire des vnements provoqus par lutilisateur) ; de contrler le navigateur de linternaute (paramtrer le comportement des pages HTML visualises en fonction du navigateur de linternaute, par exemple) ; de crer, lire ou dtruire des cookies. Enfin, le javascript permet : de contrler les saisies effectues par linternaute avant denvoyer le formulaire de saisie au serveur pour traitement. Ce dernier aspect de javascript prendra toute sa mesure lorsque nous aurons vu les applications Web, qui ncessitent lusage dun langage de script pour serveur, comme PhP par exemple. En attendant davoir vu les applications Web, on pourra toujours faire semblant quon envoie un formulaire au serveur et quon vrifie, avant de lenvoyer, laide dinstructions javascript, que toutes les saisies ont t correctement effectues. Dans ce chapitre, on ne va pas, comme dans le prcdent, crer nos pages au fur et mesure de la dcouverte des concepts. Ce quon va plutt faire : on va se crer une page essaisJavascript.html, dans laquelle on va tester tout un tas de petits exemples tout au long de la prsentation des concepts de base. Ensuite, quand on en saura un peu plus, on utilisera nos connaissances en javascript pour enrichir notre site de quelques fonctionnalits. Allez, cest dit, on fait comme a. 82
8 3950 TG PA 00
Squence 3
1B. O crit-on les instructions javascript dans une page HTML ?

Lorsquon insre des instructions javascript dans la description HTML dune page, les instructions javascript sont encadres par les balises <script language = "javascript"> et </script>. Dans un mme document HTML, on peut mettre plusieurs couples de balises <script language="javascript"> et </script>. En ce qui concerne lemplacement des balises <script> et </script> dans le document HTML, on a trois possibilits : les placer entre les balises <body> et </body>. Dans ce cas, le navigateur excute les instructions au fur et mesure quil les rencontre ; les placer entre les balises <head> et </head>. Cest ce quil faut faire quand on crit une fonction. On crit la fonction dans lentte de la page (donc, entre les balises <head> et </head>), et on lappelle dans le corps de la page (donc, on lappelle entre les balises <body> et </body>).
Remarque
Dans ces deux premiers cas, on peut, mme lintrieur des balises <head> et </head> dune part, ainsi que des balises <body> et </body> dautre part, trouver plusieurs couples de balises <script language= "javascript"> et </script>. Il existe une troisime possibilit pour intgrer du code javascript dans un document HTML. En effet, on peut aussi crire du code javascript dans un fichier spar (dextension .js) et intgrer ce fichier dans le document HTML. On va aborder ces diffrentes possibilits ci-dessous.
2.Code javascript entre <body> et </body>

2A. Structure gnrale
La structure gnrale dune page HTML intgrant des instructions en javascript est la suivante.
<html> <head> <title>Structure gnrale dune page utilisant du javascript </title> </head> <body> <--Partie HTML de la page --> <script language="javascript"> <-- dclarations et instructions javascript --> </script> <--Suite de la description HTML de la page --> </body> </html>
83
8 3950 TG PA 00
Squence 3
Si les instructions javascript sont places dans la partie <body>...</body> du document HTML, le navigateur excute les instructions javascript ds quil les rencontre.
Remarque
Lattribut language de la balise script sert indiquer quel est le langage de script utilis. Ce langage peut tre, entre autres, du javascript, du vbscript. Dans le cas o le langage de script utilis est le javascript, lattribut language est optionnel car le langage de script par dfaut est le javascript.
2B. Le premier exemple

Dans votre page essaisJavascript.html, tapez le code source suivant :
<html> <head> <title>essais javascript </title> </head> <body>  Cette premire phrase fait partie de la description en HTML de la page.<br> <script language="javascript">  alert (a par contre); alert ("cest du javascript"); document.write("Fin de la partie javascript.<br>"); </script>  Ce texte est aussi dans la partie HTML de la page. </body> </html>
Et hop! Ouvrez votre page dans votre navigateur. Waow!
2C. Que nous apprend ce premier exemple ?

Il nous apprend que : dans javascript, chaque instruction se termine par un point-virgule ; les chanes de caractres sont places entre doubles quotes ("....") ou simples quotes (...) ; alert(...) est une procdure affichant une bote de dialogue contenant le texte pass en paramtre ; document reprsente le document HTML courant ; la syntaxe document.write(...) permet dafficher le texte pass en paramtre dans la page, comme si on lavait crit dans la description HTML de la page ; les commentaires, entre les balises <script language="javascript"> et </script>, peuvent tre encadrs par <-- et -->.
8 3950 TG PA 00
84
Squence 3
2D. Allez, un second exemple

Modifiez lexemple ci-dessus comme ci-dessous:
<html> <head> <title>essais javascript </title> </head> <body>  Cette premire phrase fait partie de la description en HTML de la page.<br> <script language="javascript">  var monNombre ; monNombre = 4 ; alert (monNombre vaut + monNombre); </script>  Ce texte est aussi dans la partie HTML de la page. </body> </html>
2E. Que nous apprend ce second exemple ?

Il nous apprend comment on dclare les variables en javascript. En javascript, cest--dire entre les balises <script language="javascript"> et </script>, la dclaration des variables se fait avec le mot cl var.
Remarque importante
Lors de la dclaration, on nindique pas le type des variables. Les variables prennent dynamiquement le type des valeurs quelles contiennent. Dans cet exemple, linstruction alert (monNombre vaut + monNombre); nous montre que, comme en algo, le signe + est utilis la fois pour laddition des nombres et la concatnation des chanes de caractres. Dans notre page de test, essayez maintenant de remplacer :
alert (monNombre vaut + monNombre);

Par :
alert (monNombre vaut + MonNombre);

La modification consiste simplement mettre un M majuscule au dbut de la variable monNombre.
8 3950 TG PA 00
85
Squence 3
Maintenant, testez cette fentre aprs avoir enregistr la modification. Vous avez vu, a marche plus !! Cela signifie que javascript est sensible la casse utilise pour les variables. Pour lui, la variable monNombre et la variable MonNombre ne sont pas la mme variable.
O Javascript est galement sensible la casse pour ses propres mots cls.
Exemple : lobjet document ne sera pas reconnu si vous lappelez Document . Des instructions comme if, while, for ne seront pas reconnues non plus si vous leur collez des majuscules. Il faut tre trs vigilant quand on na pas lhabitude dutiliser un langage de programmation sensible la casse.
2F. Allez, un dernier exemple pour la route

Reprenez notre magnifique page et modifiez le code source comme suit :
<html> <head> <title>essais javascript </title> </head> <body>  Cette premire phrase fait partie de la description en HTML de la page.<br> <script language="javascript">  document.write("Dbut de la partie javascript.<br>"); saisie = prompt("Saisissez votre prnom : ", "Prnom"); document.write ("Vous vous appelez ", saisie, ".<br>"); </script>  Ce texte est aussi dans la partie HTML de la page. </body> </html>
Testez votre page. Maintenant, la place de
saisie = prompt("Saisissez votre prnom :", "Prnom");

tapez...
saisie = prompt("Saisissez votre prnom :");

Bon, la valeur par dfaut qui saffiche dans la zone de saisie nest pas trs engageante dans ce dernier cas.
8 3950 TG PA 00
86
Squence 3
2G. Cet exemple, que nous apprend-il ?

2G1. La fonction prompt
Cet exemple nous apprend que, pour rcuprer une valeur saisie par lutilisateur (linternaute), il faut utiliser la fonction prompt , qui permet de rcuprer, dans la variable spcifie, la valeur saisie par lutilisateur, suivant la syntaxe gnrale suivante :
Valeur = prompt ("Message de saisie", "valeur par dfaut")
2G2. La classe Window

Lorsque vous appelez la procdure alert("...."), ou encore la fonction prompt("..."), en fait vous appelez des mthodes de la classe Window, une classe faisant partie de javascript . Cette classe Window intgre galement des objets, comme document par exemple. La procdure write ("...") est une mthode applicable lobjet document laide de la syntaxe document.write("..."). Pour afficher du texte dans une page HTML depuis un script javascript, on peut aussi utiliser la syntaxe document.writeln("..."). La mthode writeln permet, comme la mthode write, dafficher le texte dans une page HTML, mais en rajoutant un retour chariot. Pour essayer cette dernire possibilit, dans le code de notre fentre, remplacez le code :
document.write ("Vous vous appelez", saisie, ".<br>");

par le code :
document.writeln ("Vous vous appelez", saisie, ".");

Puis testez. La classe window propose galement la mthode close, qui permet de fermer la page courante. La syntaxe dutilisation de cette mthode est window.close( ). Pour tester cette mthode, rajoutez, juste avant la balise </script> linstruction :
Window.close( )
Enregistrez votre modif, puis rouvrez ou rafrachissez votre page. Moi, avant la fermeture de la page, jai un petit message de la part de mon navigateur, me demandant si je confirme la fermeture.
2G3. Mise en forme du texte Remarque

Ds quil sagit dafficher du texte dans la page HTML ( laide de write ou writeln), on peut rajouter toutes les mises en forme HTML vues au chapitre dernier (comme <br>, ou comme <pre>...</pre> par exemple), mais elles doivent tre, comme les constantes texte, entre quotes ou entre doubles quotes.
8 3950 TG PA 00
87
Squence 3
Par contre, pour mettre en forme du texte lorsquon affiche des messages javascript (utilisation de alert ou prompt), il faut utiliser ce quon appelle des squences dchappement . Ce sont des combinaisons de touches qui indiquent javascript comment prsenter le texte des messages. Exemple : la squence dchappement \n permet dinsrer un saut de ligne dans le texte affich. Essayons linstruction suivante dans notre page de test :
alert ("a par contre, \n cest du javascript.");

Bon, maintenant, testons les squences dchappement suivantes dans notre page. Squence dchappement \n : alert ("a par contre, \n cest du javascript."); \r : alert ("a par contre, \r cest du javascript."); \t : alert ("a par contre, \t cest du javascript."); \ : alert (a par contre, c\est du javascript.); \ : alert ("il me dit, c\est du javascript.\"); \\ : alert ("le fichier est dans c:\\fred"); Description Saut de ligne Retour chariot. Mme effet que \n Tabulation horizontale Guillemet simple Guillemet double Barre oblique inverse (afin que le caractre antislash soit interprt comme un caractre)
Par contre, pour crire Dbut de la partie javascript , sur 2 lignes, laide de linstruction write, on ne peut pas utiliser \n, jutilise donc <br >. Pourquoi ? Parce que pour document.write, tout ce qui lui est pass en paramtre est du HTML.
document.write("Dbut de la <br> partie javascript")
3.Code javascript entre <head> et </head>

Remarque
toutes les particularits sur le javascript vues au paragraphe prcdent, traitant du code javascript plac entre les balises <body> et </body>, sont galement valables lorsque le code est plac entre les balises <head> et </head>.
3A. Syntaxe gnrale

Lorsquon veut crire puis utiliser une fonction en javascript, on lcrit dans len-tte de la page HTML suivant le modle suivant :
<head> <title>...</title> <script language ="javascript"> function nomDeLaFonction(paramtresDeLaFonction) { // dclarations et instructions javascript de la fonction } </script> </head>
8 3950 TG PA 00
88
Squence 3
Ensuite, on appelle cette fonction dans le corps de la page HTML, entre les balises <script language = "javascript"> et </script>, ou bien on lassocie un vnement provoqu par lutilisateur (par exemple, on associe la fonction crite en javascript lvnement click sur un bouton de formulaire).
3B. Un exemple
Cet exemple montre comment crire une fonction qui lve au carr le nombre pass en paramtre, et comment appeler cette fonction dans la partie <body>. Tapez ce code dans notre page de test.
<html> <head> <title> essais javascript </title>  <script language= "javascript"> function carre(saisie) {  resultat = saisie * saisie  return resultat }  </script> </head> <body> <script language="javascript"> saisie = prompt ("Saisir un nombre");  document.write ("Le rsultat est :", carre(saisie)); </script> </body> </html>
8 3950 TG PA 00
89
Squence 3
4.Code javascript dans un fichier spar

Afin dallger le code dun fichier HTML il est possible de placer le code des fonctions dans un fichier spar. Celui-ci aura comme extension .js et devra tre plac dans le mme rpertoire que le fichier HTML.
4A. Syntaxe gnrale

On peut aussi crire du code javascript dans un fichier spar (dextension .js) et intgrer ce fichier dans le document HTML suivant le modle suivant :
<html> <head>  <script src = "fichierJavaScript.js"></script> </head> <body> <script>  </script> </body> </html>
4B. Un exemple
Nous allons crer dans un fichier spar, fonction.js, une fonction, afficheDateHeure dont le rle sera dafficher la date et lheure. Ensuite, dans notre page de test, nous indiquerons que nous intgrons ce fichier fonction.js, puis nous appellerons la fonction afficheDateHeure. Voici le code source de la fonction. Il sagit donc du contenu du fichier fonction.js. Pour crer ce fichier, dans le bloc notes de windows, je tape le code source et jenregistre le fichier en lappelant fichier.js.
function afficheDateHeure( ) { // Dclaration des variables // La variable dateComplete va contenir la date systme, heures et minutes incluses var dateComplete; // La variable minutes est destine contenir les minutes var minutes; // La variable jour est destine contenir le jour de la date var jour; // La variable mois est destine contenir le mois de la date var mois;
8 3950 TG PA 00
90
Squence 3
// Fin de la dclaration des variables // Dbut du traitement // Affectation de la date complte la variable dateComplete dateComplete = new Date() // On extrait les minutes de la date complte et on les affecte la variable // minutes
minutes = dateComplete.getMinutes(); // Si le nombre de minutes est sur un seul chiffre, on le formate en lui rajoutant // un zro if (minutes <= 9) minutes= "0"+ minutes; // On extrait le jour de la date complte et on laffecte la variable jour jour = dateComplete.getDate(); // Formatage ventuel du jour sur 2 chiffres if (jour < = 9) jour = "0" + jour; // On extrait le mois de la date complte et on laffecte la variable mois mois = dateComplete.getMonth() + 1 // formatage ventuel sur 2 chiffres if (mois <= 9) mois = "0" + mois; document.write ("Nous sommes le ",jour,"/",mois,"/",dateComplete.getYear()); document.write(" et il est ",dateComplete.getHours()," heures ",minutes," minutes.") }
Remarque
en javascript, on peut dclarer et initialiser chaque variable en une seule instruction. Dans le code ci-dessus, on aurait tout fait pu crire :
var var var var
dateComplete = new Date(); minutes = dateComplete.getMinutes(); jour = dateComplete.getDate(); mois = dateComplete.getMonth() + 1;
8 3950 TG PA 00
91
Squence 3
Ce qui concentre les 8 lignes suivantes en 4.
var dateComplete; var minutes; var jour; var mois; dateComplete = new Date() minutes = dateComplete.getMinutes(); jour = dateComplete.getDate(); mois = dateComplete.getMonth() + 1;
Remarque
la cinquime ligne du code source prcdent, je n'ai pas mis de point virgule, et pourtant ce code source est correct car en javascript, le sparateur d'instructions est soit le point virgule, soit le saut de ligne. Voici maintenant le code de notre page de test. Tapez ce code puis ouvrez cette page dans votre navigateur pour la tester.
<HTML> <HEAD> <title> Appel dune fonction spare </title> <script language="javascript" src="fonction.js"> </script> </HEAD> <BODY> <center> <H3>Appel de la fonction qui affiche la date et lheure </H3><BR> <script language="javascript"> afficheDateHeure() </script> </center> </BODY> </HTML>
4C. Cet exemple nous apprend beaucoup de choses, lesquelles ?

4C1. Les commentaires
Dans un fichier javascript (dextension .js), on ne peut pas mettre  pour les commentaires, il faut utiliser // pour les commentaires. Par contre, lorsquon est dans un document HTML, entre les balises <script> et </script>, on peut utiliser , ou bien //.
4C2. La classe Date

Comme la classe Window, la classe Date est une classe faisant partie de javascript (on dit que ce sont des classes prdfinies, car elles ont t cres par les concepteurs du langage et intgres dans le langage, le dveloppeur na donc pas crer cette classe).
8 3950 TG PA 00
92
Squence 3
Notez bien la majuscule Date, si vous ne la mettez pas, lexcution, vous avez un message derreur vous disant assez peu sympathiquement quil ne sait pas qui est date. Essayez dans le fichier fonction.js, de remplacer dateComplete = new Date() par dateComplete = new date(), vous verrez. La classe Date contient des mthodes qui permettent de manipuler la date systme, comme la mthode getFullYear() par exemple. Pour pouvoir appeler ces diffrentes mthodes de manipulation de la date systme, il faut avoir, au pralable, rang la date systme dans une variable. Dans notre exemple, cest linstruction dateComplete = new Date() qui a pour effet daffecter la date systme la variable dateComplete. Vous remarquerez que la syntaxe daffectation est assez particulire, puisquon utilise le mot cl new. Cest quil ne sagit pas dune affectation classique. La classe Date nest pas une fonction, ni une variable, mais une classe. L, on va faire un tout petit bout de thorie objet. Une classe, cest un peu comme un type structur (chapitre 7 du cours dalgo de premire anne). Lorsquon cre la classe, on dcrit quelles sont les informations quelle contient (ce quon appelle les champs propos des types structurs, et quon appelle les attributs ou proprits lorsquil sagit dune classe), mais, en plus, au moment o on dcrit la classe, on y dcrit les fonctions et les procdures permettant de manipuler les diffrents attributs. Les fonctions et procdures permettant de manipuler les attributs sappellent des mthodes. Si la classe est correctement dcrite, on ne peut pas manipuler directement ses attributs, on est oblig dutiliser les mthodes de la classe pour accder ses attributs. Exemple : dans le cas de la classe Date, on ne peut pas accder lanne de la date systme sans utiliser la mthode getFullYear(), la fonction qui renvoie lanne de la date systme. Lorsque les attributs dune classe ne sont accessibles que via les mthodes de la classe, on dit que ces attributs sont privs. Comme les mthodes font partie de la description de la classe, on dit quelles sont encapsules (sous-entendu encapsules dans la description de la classe). Revenons notre affectation dateComplete = new Date(). Il ne sagit pas dune affectation classique, do le mot cl new, mais de ce quon appelle une instanciation, cest--dire, la cration dune occurrence, dune instance, dun objet de la classe Date, par appel dune fonction spciale, crite dans la description de la classe, qui porte le nom de la classe, et qui sappelle, en thorie objet, un constructeur. Dans la plupart des cas, on ne peut pas utiliser les mthodes dune classe si on na pas dabord instanci cette classe, cest--dire cr une variable du type de la classe. Ici, linstruction dateComplete = new Date() a pour rle de doter lobjet dateComplete de tous les attributs avec, pour valeurs, les caractristiques de la date du jour, mais aussi de toutes les mthodes de la classe Date. Cette sorte daffectation (cest une instanciation) nous permet ensuite dutiliser toutes les mthodes de la classe Date pour manipuler les informations sur la date, contenues dans lobjet dateComplete. Lexemple de code javascript contenu dans le fichier fonction.js nous montre quelles sont les mthodes disponibles dans la classe Date.
8 3950 TG PA 00
93
Squence 3
Une fois quon a affect sa valeur dateComplete laide de linstruction new Date(), on peut utiliser les mthodes getMinutes( ), getDate(), getMonth( ), getYear( ), getHours( ). Ces mthodes sont toutes des fonctions, puisquon range leur rsultat dans une variable. Vous remarquerez la syntaxe dappel de ces mthodes : nomDeLobjet.nomDeLaMthode. Exemple : dateComplete.getDate() Cette syntaxe signifie appelle la mthode getDate() sur lobjet dateComplete , autrement dit applique dateComplete le traitement dcrit dans getDate() . Mais alors, pourquoi, quand on utilise des instructions comme document.write, on na pas dabord instanci la classe Window par une instruction du type new Window() ? Il y a deux raisons possibles cela : un objet Window peut-tre automatiquement instanci par le navigateur au lancement de tout script javascript ; la classe Window est une classe spciale (dite statique), qui na pas besoin dtre instancie pour quon puisse utiliser ses membres (cest--dire ses attributs et ses mthodes).
5.La gestion des vnements utilisateur

Cet aspect de javascript vous a t cit dans la prsentation gnrale du langage. On peut, laide de balises HTML particulires auxquelles on associe du code javascript, grer les actions de lutilisateur sur les contrles de formulaire se trouvant sur une page. On a dj vu les balises de description des formulaires dans la squence 2, dans le paragraphe sur les formulaires HTML. Je vous invite donc jeter nouveau un coup dil sur cette partie du cours si elle ne vous a pas laiss un souvenir imprissable (ce qui me vexerait un tantinet, mais, bon..., je dois admettre, hlas, que le thme de mes crits est peut-tre moins attrayant que les thmes dvelopps dans les BD et les romans qui sentassent sur vos tables de chevet).
5A. Un premier exemple

lexemple de code suivant nous montre comment lancer un traitement particulier ds que lutilisateur clique sur un bouton. Tapez puis testez ce code dans notre page HTML nous servant faire nos tests javascript. <html> <head> <title> Gestion des vnements utilisateur </title> <script language = "javascript"> function clicSurCliqueMoi() { alert("Mais arrte de me cliquer dessus!") } </script> </head>
8 3950 TG PA 00
94
Squence 3
<body> <form > <input type = "button" value = "Clique-moi" onClick = "clicSurCliqueMoi()"> </form> </body> </html>
5B. Que nous apprend ce premier exemple ?

Il nous rappelle tout dabord que : pour poser des contrles sur une page HTML (qui devient alors ce quon appelle un formulaire), il faut indiquer ces contrles entre les balises <form> et </form> ; pour mettre un bouton sur notre formulaire, il faut utiliser la balise <input...> ; dans cette balise <input...>, il faut donner lattribut type (qui dtermine le type du contrle), la valeur button laide de la syntaxe <input type="button"...> ; toujours dans cette balise <input>, lattribut value dtermine, dans le cas dun bouton, le libell saffichant sur le bouton, laide de la syntaxe <input type="button" value="Information"...>. Cet exemple nous apprend galement que : pour programmer le clic sur notre bouton, on utilisera lvnement onClick() ; pour indiquer au navigateur quel traitement dclencher lorsque lutilisateur clique sur notre bouton Clique-moi, on utilise la syntaxe onClick="clicSurCliqueMoi( )". Cette syntaxe a pour effet dindiquer la chose suivante au navigateur : lorsque lutilisateur provoque lvnement onCLick() du bouton Clique-moi, alors, appeler la fonction cliqueSurCliqueMoi() ; chaque fois quon veut programmer un vnement utilisateur, on doit crer la fonction correspondante car la syntaxe gnrale est :
<input nomDeLvnement = "nomDeLaFonctionAssocieALvnement ( )">
5C. De quels vnements dispose-t-on ?

Ci-dessous, je vous prsente quelques vnements, mais il en existe bien dautres, diffrents selon les contrles. Pour connatre dautres vnements, je vous invite aller chercher sur le net, notamment sur le site du W3C, qui fait une prsentation complte du langage javascript.
5C1. Lvnement onClick

Vous lavez vu plus haut, cet vnement se produit lorsque linternaute clique sur le contrle. Cet vnement sapplique aux contrles button, aux checkbox, aux radio, aux select , textaera et text , aux images, bref, tout objet sur lequel on peut cliquer, cest--dire tous les contrles de formulaire et aux images. Exemple : vous avez un exemple de fonctionnement de cet vnement avec un contrle button dans le paragraphe prcdent. Nous allons reprendre cet exemple et le modifier de manire comprendre comment faire lorsque le contrle est une image ou un bouton radio.
8 3950 TG PA 00
95
Squence 3
Dans lexemple prcdent, remplacez :
<input type = "button" value="Clique-moi" onClick="clicSurCliqueMoi()">

Par :
<IMG SRC = "imageTheme.jpg" onClick = "clicSurCliqueMoi()">

Note : je pars du principe que le fichier imageTheme.jpg se trouve dans le mme rpertoire que ma page de test, cest un fichier image quon a dj utilis au chapitre dernier (comme quoi mme en informatique, on peut faire du neuf avec du vieux). Puis testez votre fentre en cliquant sur limage. Rappel: pour tester les modifications apportes une page HTML ouverte dans le navigateur, il faut dabord enregistrer les modifications du fichier source, dextension HTML. Ensuite, il faut aller dans le navigateur et choisir la commande Actualiser, le navigateur rechargera la nouvelle version de votre page. Remplacez maintenant :
<IMG SRC = "imageTheme.jpg" onClick = "clicSurCliqueMoi()">

Par :
<input type = "radio" value = "Essai" onClick= "clicSurCliqueMoi()">

Puis testez. Bon, cest moche mais on voit bien que a marche. Ensuite, pour tester ce que a fait sur un lien, mettez la ligne de code suivante :
<a href = "lien bidon" onClick = "clicSurCliqueMoi()"> lien </a>

Bon, comme notre lien contient un URI bidon, aprs que lvnement onClick se soit excut, on a une erreur, mais cest pas grave, ce quon voulait tester, ctait lvnement onClick sur les liens, et on voit bien que a fonctionne. Je vous laisse tester ce que a fait avec les autres contrles de formulaires. Il vous suffit de remplacer radio par nimporte quel autre contrle.
5C2. Lvnement onChange

Cet vnement se produit lors de la sortie du contrle si son tat a t modifi. On peut utiliser cet vnement pour les contrles contenant du texte (contrles select , text ou textarea). Dans ce cas, lvnement onChange sera provoqu lors de la sortie de la zone de saisie, et cela, seulement si son contenu a t modifi. Exemple : pour bien comprendre comment cet vnement fonctionne, dans la page de test, mettez la ligne suivante entre les balises <form> et </form> :
... essai : <Input type = "text" value = "on teste" onChange = "test()"> ...
Enregistrez la modif puis ractualisez votre page dans votre navigateur.
8 3950 TG PA 00
96
Squence 3
Faites le premier test suivant : cliquez dans la zone de texte, puis cliquez ailleurs sur la page. Rien ne se passe parce que vous navez pas modifi son contenu. Maintenant, retournez dans la zone de texte, modifiez son contenu, puis cliquez nouveau ailleurs sur la page. Et paf, notre beau message saffiche, parce quon a modifi ltat du contrle. On peut galement programmer cet vnement pour tout contrle pouvant changer dtat. checkbox et radio : dans ce cas, lorsque linternaute sort du contrle, si celui-ci nest pas dans le mme tat que lorsque linternaute y est entr, alors, lvnement onChange se produira. Si par contre, linternaute coche puis dcoche, ou bien dcoche puis coche le contrle, la sortie, le contrle sera dans le mme tat qu lentre, lvnement ne sera pas dclench. Faites les tests en remplaant tout btement text par checkbox et/ou radio dans la ligne de code de lexemple ci-dessus. select : dans ce cas, ds que linternaute choisit dans la liste autre chose que le choix dj fait (soit le choix par dfaut, soit un choix effectu prcdement par linternaute), lvnement est dclench. Exemple : essayez le code ci-dessous :
<form > essai :
<Select name = "preference" onChange = "test()"> <option> les livres <option> les films <option> la musique </select>
</form>
Pour testez, faites les deux manips suivantes : slectionnez autre chose que les films. L, lvnement se dclenche ; ensuite, rafrachissez votre fentre, droulez la liste, mais slectionnez les films. L, lvnement ne se dclenche pas.
Remarque
Cet vnement ne sapplique pas aux button car linternaute na pas la possibilit de les faire changer dtat. Il ne sapplique pas non plus aux images ni aux liens.
5C3. Lvnement onFocus

Cet vnement sapplique tout contrle focusable, cest--dire tout contrle pouvant dtenir le focus : button, checkbox, radio, select , textaera et text . Certain(e)s se demandent peut-tre quelle est la diffrence entre onClick et onFocus. Eh bien je men vais vous le dire. On peut donner le focus un contrle autrement quen cliquant dessus (par exemple en appuyant sur tab jusqu ce que ce soit ce contrle qui obtienne le focus), et on peut cliquer sur un objet ayant dj le focus, et mme, on peut cliquer sur des objets non focusables, comme les images, par exemple.
8 3950 TG PA 00
97
Squence 3
Exemple : faisons quelques tests pour bien comprendre cet vnement onFocus. Dans notre page de test, on sest arrt tester lvnement onChange sur les contrles select . Remplaons tout simplement :
essai :
Par :
<Select name = "preference" onChange = "test()">
essai :
<Select name = "preference" onFocus = "test()">
et testons. Lvnement se dclenche la premire fois quon clique dans la liste, cest--dire lorsquelle reoit le focus. Si on clique ailleurs dans la page, rien ne se passe, et si on reclique dessus aprs avoir cliqu ailleurs, lvnement est nouveau provoqu. De mme, une fois que la liste a le focus, si on le lui retire en appuyant sur tab, puis quon lui redonne en appuyant nouveau sur tab, lvnement est nouveau dclench. Je vous laisse faire les tests de votre choix sur les autres contrles focusables . Inspirez-vous des exemples des paragraphes prcdents si vous ne voyez pas trop comment effectuer les tests.
Remarque
lexemple suivant ne fonctionne pas
<IMG SRC = "Nnuphars.jpg" onFocus = "test()">

... car une image simple ne peut pas recevoir le focus. Par contre, on peut utiliser cet vnement sur un lien. Lorsque linternaute clique sur le lien, lvnement se dclenche, puis donne le focus au lien. Faites lessai avec, par exemple...
<a href = "lien bidon" onFocus = "test ()"> lien </a>
5C4. Lvnement onBlur

Cet vnement onBlur se produit en sortie du contrle, cest--dire lorsque le focus (le curseur) quitte le contrle, soit par appui de la touche tab, soit parce que linternaute clique ailleurs dans le formulaire. Cet vnement est lvnement inverse de lvnement onFocus, que lon vient de voir. Cet vnement sapplique aux contrles select, textaera et text , et galement tous les contrles qui peuvent recevoir le focus, et donc, dont on peut sortir.
8 3950 TG PA 00
98
Squence 3
Exemples
Modifiez notre page de test comme suit
<html> <head> <title> Gestion des vnements utilisateur </title> <script language = "javascript"> function test( ) {alert("Evnement dclench") } </script> </head> <body> <form > <input type = "select" value = "Essai" onBlur = "test()"> </form> </body> </html>
...et ouvrez-la dans votre navigateur (aprs avoir enregistr les modifications de votre fichier .html). Cliquez dans la zone de texte, puis appuyez sur tab ou cliquez ailleurs dans la page pour provoquer la sortie de la zone de texte. Vous avez vu ? a marche!! Reprenez le code source de cet exemple et remplacez :
<input type = "select" value = "Essai" onBlur = "test()">

Par :
<input type = "textarea" value = "Essai" onBlur = "test()">

puis testez nouveau. Faites la mme chose en remplaant textarea par text puis testez encore une fois. Remplacez ensuite le type de contrle par ceux que vous voulez tester pour vous faire une ide du comportement que cela provoque sur le formulaire (vous pouvez essayer les checkbox, les radio, les select , les button).
Remarque
lexemple suivant ne fonctionne pas
<IMG SRC = "imageTheme.jpg" onBlur = "test()">

... car comme une image simple ne peut pas recevoir le focus, elle ne peut pas non plus le perdre. Par contre, bien sr, cet vnement sapplique aux liens. Je vous laisse le soin de tester a avec le lien bidon quon a utilis dans les exemples prcdents.
8 3950 TG PA 00
99
Squence 3
5C5. Lvnement onMouseOver

Cet vnement se produit lorsque le curseur de souris passe sur le contrle (sans forcment lui donner le focus). Cet vnement peut-tre utilis pour tout objet au dessus duquel la souris peut passer, cest--dire tous les contrles de formulaire ainsi que les images et les liens. Pour vous en persuader, reprenez des bouts de code des paragraphes prcdents, remplacez les vnements utiliss par lvnement onMouseOver et testez votre page. Vous constaterez quil nest pas ncessaire de cliquer pour provoquer lvnement, mais juste de passer au dessus.
5C6. Lvnement onMouseOut

Cest lvnement inverse du prcdent. Il se produit lorsque le curseur de souris quitte lobjet, mme si on ne lui a pas donn le focus. Bon, pour les tests, je vous laisse faire, hein!
5C7. Lvnement onSelect

Cet vnement se produit lorsque lutilisateur slectionne du texte dans le contrle. Il sapplique tous les contrles dans lequel on peut saisir du texte que lon peut slectionner, cest--dire les contrles select , textaera et text . Exemple : pour tester cet vnement, utilisez la ligne suivante.
<input type = "textarea" value = "Essai" onSelect = "test()">

Pour tester votre page, slectionnez du texte dans la zone de texte Essai. Remplacez ensuite textarea par select , puis par text .
5C8. Les vnements onLoad et onUnLoad

Ces vnements sont diffrents de ceux vus prcdemment, car ils ne sappliquent pas aux contrles de formulaire. En effet, ces vnements se produisent lors du chargement ou du rafrachissement (pour onLoad) ou du dchargement, cest--dire en gnral de la fermeture (pour onUnLoad) de la page ou du frameset . Pour tester lvnement onLoad sur les frameset , reprenez une page de la squence 2 o on a test les frameset , remettez la description de notre fonction test() entre les balises <head> et </head> de la page
<script language = "javascript"> function test() { alert("Evnement dclench") } </script>

puis, dans la balise frameset , rajoutez : onLoad = "test()"
8 3950 TG PA 00
100
Squence 3
Exemple :
<frameset cols = "30%, *" onLoad = "test()"> <frameset rows = "50%,50%"> <frame src = "premierePage.htm"> <frame src = "imageTheme.jpg"> </frameset> <frame src = "deuxiemePage.htm"> </frameset>
Puis ouvrez la page. Normalement, notre merveilleux message vnement dclench devrait safficher ds que la page est affiche par le navigateur. Pour tester lvnement onLoad dans la balise body, reprenez notre page de tests sur javascript, et dans la balise body, rajoutez onLoad = "test()", puis ouvrez ou rafrachissez la page. Maintenant, pour tester onUnLoad, remplacez, dans les deux pages prcdentes, onLoad par onUnLoad, rafrachissez vos pages puis fermez-les.
5C9. Les vnements onReset et onSubmit

Lvnement onReset se produit lorsque linternaute clique sur un bouton reset pour annuler lenvoi du formulaire. Lvnement onSubmit se produit lorsque linternaute clique sur un bouton submit pour envoyer le formulaire. Pour que lvnement onReset se produise, il faut un bouton reset . Pour que lvnement onSubmit se produise, il faut un bouton submit . Ces vnements concernent la balise <form>. Pour tester lvnement submit , je vous propose le code source suivant, mettre dans notre page de test.
<form onSubmit = "test()"> <input type = "select" value = "saisir"> <Input type = "submit" name = "monBoutonEnvoyer" value = "Envoyer"> <Input type = "reset" name = "monBoutonAnnuler" value = "Annuler"> </form>
Pour tester votre page, cliquez sur le bouton Envoyer, le message saffiche. Maintenant, pour tester lvnement onReset , modifiez le code source comme suit :
<form onReset <input type = <Input type = <Input type = </form>
= "test()"> "select" value = "saisir"> "submit" name = "monBoutonEnvoyer" value = "Envoyer"> "reset" name = "monBoutonAnnuler" value = "Annuler">
Rafrachissez votre page puis cliquez sur le bouton Annuler. Ce sont ces vnements quon utilisera quand, avant denvoyer le formulaire au serveur, on voudra vrifier les saisies de lutilisateur. 101
8 3950 TG PA 00
Squence 3
5C10. Rcapitulatif des vnements tudis

Lvnement : onClick onChange Est provoqu par le fait que : Lutilisateur clique sur un objet. Lorsquon sort du contrle (cest--dire lorsquil perd le focus), et que le contrle a chang dtat par rapport au moment o on y est entr. Un contrle reoit le focus. Le focus (le curseur) quitte le contrle. La souris arrive sur lobjet. Et sapplique : tout contrle de formulaire sur lequel on peut cliquer, ainsi quaux liens et aux images. Tout contrle pouvant changer dtat.
onFocus onBlur onMouseOver
tout contrle focusable et aux liens. tout contrle focusable, pouvant donc perdre le focus, et aux liens. Tout contrle de formulaire au dessus duquel on peut passer avec la souris, ainsi quaux images et aux liens. Tout contrle de formulaire au dessus duquel on peut passer avec la souris, et donc que la souris peut quitter, ainsi quaux images et aux liens. Champ texte (textarea, select, text). Aux balises body et frameset. Balises body et frameset. Balise form. Balise form.
onMouseOut
La souris quitte lobjet.
onSelect onLoad onUnLoad onReset onSubmit
Linternaute a slectionn du texte dans le contrle. Le chargement du document est termin. On quitte la page en cours. Linternaute annule lenvoi dun formulaire en cliquant sur un bouton reset. Linternaute envoie un formulaire en cliquant sur un bouton submit.
5C11. Les autres vnements

titre indicatif, et pour que vous compreniez bien que ci-dessus, on ne voit quune petite partie des vnements disponibles, voici quelques autres vnements utilisables pour une liste <select...>, vnements que lon na pas tudis. Je vous indique entre parenthses quand ces vnements se produisent : onAfterUpDate (aprs que la liste ait t mise jour); onBeforeUpDate (avant que la liste ne soit mise jour); onDblClick (si linternaute double-clique sur la liste); onKeyDown (si lutilisateur appuie sur une touche de clavier lorsque cest la liste qui a le focus); onKeyUp (lorsque linternaute relche la touche de clavier enfonce et que cest la liste qui a le focus); onMouseDown (quand linternaute enfonce un bouton de souris); onMouseMove (quand la souris bouge); onMouseUp (quand linternaute relche le bouton de souris); onSelectStart (lorsque linternaute commence la slection dans la liste). etc. Il y en a encore dautres. Cest la mme chose pour les autres contrles. 102
8 3950 TG PA 00
Squence 3
5D. Liens hypertexte et JavaScript

Je vous renvoie, dans la squence 2, au paragraphe intitul Les liens, pour vous rafrachir la mmoire leur propos. On a trois faons complmentaires dassocier un traitement javascript un lien.
5D1. La premire faon

Cest celle quon a dj aborde plus haut, dans la prsentation des diffrents vnements. La syntaxe gnrale est :
<a href = "URI" nomDeLvnement = "nomDeLaFonction"> texte du lien </a>

Les vnements sont des vnements applicables aux liens, cest--dire : onFocus, onClick, onMouseOut , onMouseOver et onBlur. Pour les tests concernant cette faon de faire, je vous renvoie ci-dessus aux tests sur les diffrents vnements.
5D2. La deuxime faon

Elle consiste associer directement le traitement Javascript au lien en utilisant la syntaxe suivante:
<A href = "javascript:nomDeLaFonction()"> Texte du lien </A>

Le traitement javascript sera excut lorsque lutilisateur clique sur le lien. Pour essayer, je vous propose de reprendre encore notre page de test, et de la modifier comme suit :
<html> <head> <title> Gestion des vnements utilisateur </title> <script language = "javascript"> function test() {alert("Evnement dclench")} </script> </head> <body > <form > <A href = "javascript:test()"> Texte du lien </A> </form> </body> </html>
Pour tester la page, il suffit de louvrir dans le navigateur et de cliquer sur le lien. En tout cas, le moins quon puisse dire de notre fonction test(), cest quelle aura sacrment servi!!
8 3950 TG PA 00
103
Squence 3
Remarque
La situation propose ci-dessus diffre de lexemple suivant de lien utilisant lvnement onClick :
<a href = "lien bidon" onClick = "test ()"> lien </a>

Dans cet exemple, on indique un URI dans lattribut href et en plus, on programme lvnement onClick. Ceci a deux effets : cela ouvre la ressource indique dans lattribut href et cela lance le traitement spcifi dans lvnement onClick. Alors que, dans linstruction :
<A href = "javascript:test()"> Texte du lien </A>

lattribut href contient le nom du traitement javascript, et pas dURI. Ceci aura donc juste pour effet de lancer le traitement test() lorsque linternaute cliquera sur le lien.
5D3. La troisime faon

On peut dire quelle permet de gnraliser la seconde faon tous les vnements applicables aux liens. Voici la syntaxe gnrale : <A href = "javascript:void(0)" nomEvnement = "nomFonction"> Texte du lien </A> Comme la deuxime faon, le lien ne contient pas dURI, mais un appel un sous-programme qui sappelle void, avec pour paramtre 0. Ceci a pour effet de neutraliser le rle initial du lien, qui est de donner accs la ressource spcifie dans lattribut href. Ensuite, on na plus qu prciser quel vnement on veut programmer, et quel traitement on veut lui associer. Exemple : cet exemple ressemble plus des gammes qu autre chose, mais notre but ici nest pas de faire dans la dentelle, simplement de faire des tests simples. On fera beau aprs, pour notre site. Notez que pour tester onBlur, il faut dabord donner le focus au lien (avec la touche tab ou en cliquant dessus) et quensuite, il faut lui retirer le focus, par exemple en rappuyant sur tab ou en cliquant ailleurs sur notre bellissime page (si, bellissime, a se dit, la preuve ? cest que le correcteur orthographique de mon traitement de texte prfr ne me souligne mme pas le mot en rouge. Par contre, il me souligne rappuyer, qui, priori, ne se dit pas trop... En fait, il faut dire r-appuyer, l, il dit rien mon correcteur orthographique, mais moi, rappuyer, jaime bien).
8 3950 TG PA 00
104
Squence 3
<html> <head> <title> Association liens/Evnements </title> <script language = "javascript"> function test() {alert("Evnement dclench")} </script> </head> <body > <form >
test de onMouseOver : <A href="javascript:void(0)" onMouseOver = "test()"> Texte du lien </A> <br> test de onMouseOut : <A href="javascript:void(0)" onMouseOut= "test()"> Texte du lien </A> <br>
test de onFocus : <A href="javascript:void(0) " onFocus= "test()"> Texte du lien </A> <br> test de onClick : <A href="javascript:void(0)" onClick = "test()"> Texte du lien </A> <br> test de onBlur : <A href="javascript:void(0)" onBlur = "test( )"> Texte du lien </A> <br> </form> </body> </html>
Bon, nous voil peu prs au courant du minimum en ce qui concerne les liens.
6.Utilisation des valeurs contenues dans les contrles

Ce paragraphe a pour but de vous montrer comment : rcuprer une valeur saisie ou slectionne dans un contrle par linternaute; affecter une valeur un contrle. Pour ce faire, on utilise diffrentes proprits des contrles. Tout contrle possde une proprit name. La proprit name dun contrle est son nom. Ce nom est utilis lors de la programmation, exactement comme le nom dune variable. part cette proprit commune, on nutilise pas toujours les mmes proprits pour manipuler le contenu des contrles. Nous allons passer en revue chaque type de contrle afin de voir ce quon peut en faire.
6A. Utilisation des valeurs contenues dans les zones de saisie et de texte
Pour une zone de texte (textarea) ou une zone de saisie (text, select, password), la proprit value contient tout instant le texte contenu dans la zone (ce texte a t saisi par linternaute ou bien il a t affect par programmation la zone).
8 3950 TG PA 00
105
Squence 3
6A1. Un premier exemple

Testez le code suivant. La fonction test a ici pour rle dafficher la valeur saisie par linternaute dans la zone de saisie saisissez votre nom au clic sur le bouton Cliquer ici.
<html> <head> <title> Gestion des vnements</title> <script language = "javascript"> function test(form) {alert (form.saisie.value)} </script> </head> <Body> <form> Saisissez votre nom : <input type = "text" name = "saisie" size = "5"> <P> <input type = "button" value = "Cliquer ici" onClick = "test(this.form)"> <p> </form> </body> </html>
Expliquons certaines instructions de cet exemple en dtail. Vous remarquerez que lentte de la fonction test a chang. Cet entte function test(form) indique au navigateur que la fonction test est dcrite pour un formulaire, le paramtre form utilis ici lors de la description de la fonction test est un paramtre formel (si vous ne savez plus ce quest un paramtre formel, je vous renvoie votre cours dalgo, chapitre6). Lorsquon appelle la fonction test , dans lvnement onClick, on utilise la syntaxe suivante onClick = "test(this.form)". On appelle ici la fonction test en lui passant this.form en paramtre. this.form est un paramtre effectif, il dsigne le formulaire courant, cest--dire le formulaire en train dtre visualis par le navigateur. Dans la description de la fonction test, linstruction alert (form.saisie.value) signifie : affiche la valeur (value) du contrle qui sappelle saisie, ce contrle se trouve dans le formulaire que je tai pass en paramtre (form). Vous pourrez remarquer que pour un button, la proprit value contient le libell du bouton. On en reparlera un peu plus bas.
6A2. Un second exemple

Modifiez lexemple prcdent conformment au code ci-dessous. Ce formulaire a pour rle de rcuprer la valeur saisie dans la zone de texte Saisissez votre nom, puis de le concatner la chane de caractres ppp et dafficher le rsultat dans la zone de texte Le nom modifi vaut maintenant . Encore un programme pour lequel les clients vont se battre dans le but dtre le premier en faire lacquisition...
8 3950 TG PA 00
106
Squence 3
<html> <head> <title> Manipulation du contenu des contrles </title> <script language = "javascript"> function test(form) {form.resultat.value = form.saisie.value + "ppp"} </script> </head> <Body> <form> Saisissez votre nom : <input type = "text" name = "saisie" size = "5"> <P> <input type = "button" value="Cliquer ici" onClick = "test(this.form)"> <p>
Le nom modifi vaut maintenant : <input type = "text" name = "resultat" size = "10"> <P>
</form> </body> </html> Cet exemple nous montre que pour affecter une valeur une zone de texte, il faut utiliser la syntaxe nomDuContrle.value = valeur
6A3. Allez, un petit troisime avec des calculs Remarque pralable

Vous savez dj quen javascript, le type des variables nest dtermin qu lexcution. On dit que les variables ont un type dynamique, pas parce que le gars de la variable a la pche, non (ha! Ha! Celle l, elle est idiote, mais elle me fait mourir de rire), mais parce que ce type nest dtermin que lorsque le programme est en cours dinterprtation par le navigateur. Ceci signifie que dune visualisation de page lautre, le type des valeurs contenues dans une variable peut changer. Ceci nest pas le cas dans dautres langages, o les variables ont un type statique, cest--dire dtermin une fois pour toute lors de la dclaration. Ceci nest pas non plus le cas des contrles contenant du texte. La proprit value, mme si elle contient des chiffres, est de type texte (ou chane de caractres, comme vous voulez). Si un contrle contient des chiffres, ce sont bien des chiffres, et pas un nombre. Cela signifie que lorsquon veut effectuer des additions sur le contenu de la proprit value dun contrle, on doit dabord convertir cette valeur en un nombre. Il faut donc utiliser la fonction quon avait appele val en algo. En javascript, cette fonction sappelle parseFloat . Elle convertit en rel la chane de caractres quon lui passe en paramtre. Pour convertir le contenu dun contrle, on utilisera donc la syntaxe ParseFloat(nomDuContrle. value). Et lorsquon utilisera la fonction parseFloat dans la description dune fonction, on utilisera la syntaxe ParseFloat(form.nomDuContrle.value).
8 3950 TG PA 00
107
Squence 3
Lexemple : essayez le code suivant :
<html> <head> <title> Gestion des vnements</title> <script language = "javascript"> function test(form) {form.resultat.value = parseFloat(form.saisie.value) + 20} </script> </head> <Body> <form> Saisissez votre ge : <input type = "text" name = "saisie" size = "5"> <P> <input type = "button" value = "Cliquer ici" onClick = "test(this.form)"> <p> Dans 20 ans, vous aurez : <input type = "text" name = "resultat" size = "10"> <P> </form> </body> </html>
Maintenant, on va tester a sans utiliser la fonction parseFloat . Remplacez :
form.resultat.value = parseFloat(form.saisie.value) + 20
Par :
form.resultat.value = form.saisie.value + 20
Vous avez vu ? a a concatn lge saisi avec 20!! Parce quil croit quil doit concatner, notre pauvre navigateur, puisquune des deux valeurs entourant le signe + est une chane. Alors si on avait utilis une autre opration arithmtique, quest-ce que a aurait donn, sans parseFloat ? Jessaie tout de suite, je remplace :
form.resultat.value = form.saisie.value + 20
Par :
form.resultat.value = form.saisie.value 20
Ben oui... - 20, parce que moi, en plus, a marrange davoir 20 ans de moins dans vingt ans que 20 ans de plus dans vingt ans. Eh ben l, a marche sans parseFloat? Pourquoi ? Parce que l, il ny a aucune ambigut, le navigateur sait bien que le signe correspond forcment une soustraction, une opration arithmtique, donc, il convertit dynamiquement le texte contenu dans saisie en un nombre pour pouvoir effectuer le calcul. Jessaie aussi avec / et avec *, a fonctionne aussi sans parseFloat . Donc, en fait, on na besoin dutiliser parseFloat que pour laddition, et tout a parce que le signe + correspond la fois la concatnation et laddition.
8 3950 TG PA 00
108
Squence 3
6A4. Allez, encore un petit qui utilise deux fonctions diffrentes

Nous allons... sniff... dire au revoir notre fonction test ... et la remplacer par deux petites fonctions plus et moins, dont le rle est dajouter ou de retrancher5 au nombre saisi. Voil le code.
<html> <head> <title> Gestion des vnements</title> <script language = "javascript"> function plus(form) {form.saisie.value = parseFloat(form.saisie.value) + 5} function moins(form) {form.saisie.value = form.saisie.value - 5} </script> </head> <Body> <form> Saisissez le nombre : <input type = "text" name = "saisie" size = "5"> <P> <input type = "button" value = "Plus" onClick = "plus(this.form)"> <p> <input type = "button" value = "Moins" onClick = "moins(this.form)"> <p> </form> </body> </html>
Pour bien vous assurer que la proprit value a bien le mme rle pour tous les contrles contenant du texte, dans lexemple prcdent, remplacez successivement :
<input type = "text"...

Par :
<input type = "select"...

Puis par :
<input type = "textarea"...

Puis :
<input type = "password"...

Avec un contrle password, vous pouvez constatez que mme le rsultat apparat crypt. Donc, pour vrifier que le calcul est correctement effectu, dans la description de nos fonctions plus et moins, rajoutez linstruction :
alert(form.saisie.value);
8 3950 TG PA 00
109
Squence 3
6B. Manipulations des items dune liste droulante

6B1. Utilisation
Pour savoir quelle valeur a t slectionne dans une liste par linternaute, il faut utiliser la proprit value. Voici un exemple :
<html> <head> <title> Gestion des vnements</title> <script language = "javascript"> function nouvelleSelection(form) {alert("Vous avez slectionn" + form.preference.value)} </script> </head> <Body> <form> Je suis plus intress(e) par : <Select name = "preference" onChange = "nouvelleSelection(this.form)"> <option value = 1> les livres <option value = 2> les films <option value = 3> la musique </select> </form> </body> </html>
Vous pouvez (euh... en fait, cest largement conseill) aussi tester ce qui suit :
.... Je suis plus intress(e) par : <Select name = "preference" onChange = "nouvelleSelection(this.form)"> <option value = les livres> les livres <option value = les films> les films <option value = la musique selected> la musique </select> ....
Cet exemple nous montre que : lattribut selected dsigne quelle option doit tre slectionne par dfaut; pour pouvoir manipuler la valeur slectionne dans une liste, il faut complter la description des <option> en valorisant leur attribut value. Lattribut value des <option...> permet de faire en sorte que si lutilisateur slectionne une option dans la liste, cest le contenu de son attribut value qui est affect lattribut value de la liste <select>;
8 3950 TG PA 00
110
Squence 3
si la proprit value des options contient du texte, il doit tre entre quotes. Sil contient des nombres, ils peuvent tre entre quotes (dans ce cas ils sont considrs comme du texte) ou non (dans ce cas, ils sont considrs comme des valeurs numriques).
6B2. Modification
On peut modifier la proprit value dune option. Si, par exemple, vous rajoutez le code suivant dans notre formulaire de test :
<input type = "button" value = "Clic!" onClick = "majeur.value = tralala; alert(majeur.value);">

Vous avez vu ? Dans cet exemple, je mets deux instructions javascript directement dans la description de lvnement onClick. Ceci m'oblige utiliser des simples et doubles quotes, afin qu'il n'y ait pas de confusion entre instructions et chanes de caractres. Quelques explications : partir du moment o le navigateur a interprt cette ligne, la proprit value de la checkbox majeur vaudra tralala, ce qui en soit nest pas fondamental, me direzvous, et vous aurez bien raison de me dire a. Le but de cet exemple simpliste est de vous montrer que la modification est possible. On peut considrer, en quelque sorte, que la proprit value, cest comme une variable qui accompagne le contrle, variable que lon peut utiliser pour stocker une valeur dont on a besoin.
6B3. Ajout
On peut galement ajouter une entre de liste par programmation. Tiens, la preuve :
... <Select name = "preference"> <option value = les livres> les livres <option value = les films> les films <option value = la musique selected> la musique <script language = "javascript"> document.write(<option value = "le truc"> le truc); </script> </select> ...
Lexemple prcdent est stupide, puisquon se contente de rajouter par programmation une constante chane de caractres. Stupide, mais utile (si, si,) car plus loin, on apprendra construire les lments de formulaires, leur contenu et leur valeur entirement par calcul, et cet exemple est la premire brique du majestueux difice logiciel que je souhaite vous amener construire (hou l, je commence fatiguer, on dirait... comment a, je ne fais que continuer fatiguer!!).
8 3950 TG PA 00
111
Squence 3
Enfin, pas si stupide que a... il nous apprend : quon peut utiliser la mthode write de lobjet document pour construire par programmation une page HTML ; quon peut mettre des scripts dans la description dun contrle de formulaire.
6C. Manipulations des checkbox

6C1. Utilisation
Commencez par tester a Cochez si vous tes majeur : <Input type = "checkbox" name = "majeur" value = "vrai" onClick = "alert(majeur.value)" checked> Ah oui, au fait, au passage, lattribut checked indique au navigateur que la checkbox est coche par dfaut. part a, vous voyez que cest tout simple, quand on veut rcuprer la proprit value dune checkbox. Aprs, on peut en faire ce quon veut (lutiliser dans des tests, des calculs, des concatnations etc.).
6C2. Modification
On peut aussi modifier la proprit value dune checkbox... Cochez si vous tes majeur : <Input type = "checkbox" name = "majeur" value = "vrai" onClick = "majeur.value = tralala; alert(majeur.value);" checked>
6C3. Test
Maintenant, on peut souhaiter savoir si cette chekbox a t coche ou non par lutilisateur...
<html> <head> <title> Gestion des vnements</title> <script language = "javascript"> function essaiCheckBox(form) { if (form.majeur.checked) alert("Donc, vous tes majeur") else } </script> </head> <Body> <form> Cochez si vous tes majeur : <Input type = "checkbox" name = "majeur" value = "vrai"> <input type = "button" value = "Clic!" onClick = "essaiCheckBox(this.form)"> </form> </body> </html> alert("Vous tes mineur");
8 3950 TG PA 00
112
Squence 3
6C4. Manipulation de la proprit checked

Et enfin, trs intressant aussi, on peut cocher ou dcocher une checkbox par programmation. Exemple : Essayez ce qui suit :
<html> <head> <title> Gestion des vnements</title> </head> <Body> <form> Cochez si vous tes majeur : <Input type = "checkbox" name = "majeur" value = "vrai" checked> <br> <input type = "button" value = "Clic!" onClick="majeur.checked = false"> </form> </body> </html>
Vous avez vu ? Quand linternaute clique sur le bouton clic! La checkbox est dcoche sans cliquer dessus. Pour obtenir cela, je me suis contente daffecter la valeur false lattribut checked de la checkbox, ce qui signifie que lattribut checked de la checkbox devient faux, ce qui signifie que la checkbox est dcoche. Sur le mme modle que lexemple prcdent, on peut aussi affecter par programmation la valeur true la proprit checked dune checkbox. Autre exemple : on peut aussi faire un truc sympa (si, si, vous allez voir, cest sympa comme truc ...). On peut, par programmation, faire en sorte que : si la checkbox est coche, alors, au clic sur notre bouton clic!, elle sera dcoche; si elle est dcoche, au clic sur notre bouton clic!, elle sera coche. Il sagit en fait dinverser la valeur de lattribut checked de la checkbox. Regardez, tapez et testez. Dans le code de lexemple ci-dessus, remplacez avantageusement linstruction :
<input type = "button" value = "Clic!" onClick = "majeur.checked = false">

Par : <input type = "button" value = "Clic!" onClick="majeur.checked = !majeur.checked"> Puis testez en cliquant inlassablement sur notre bouton clic!, aprs avoir rafrachi votre page, bien sr. Vous avez vu ? Cest chouette hein chaque fois quon clique sur notre bouton, ltat de la checkbox sinverse. En algo, linstruction javascript majeur.checked = !majeur.checked scrirait :
majeur.checked = non majeur.checked.

On vient donc dapprendre que le non scrit ! Amusant, non! ?
8 3950 TG PA 00
113
Squence 3
6D. Manipulation des contrles radio

Comme pour les checkbox, on dispose des attributs value et checked. Un petit rappel : pour que plusieurs boutons radio soient considrs comme faisant partie dun mme groupe, leur attribut name doit tre le mme pour tous. Cette faon dutiliser les boutons radio est dcrite dans la squence2, dans la partie sur les formulaires. Vous pouvez retourner y jeter un coup dil si vous avez besoin de vous rafrachir la mmoire.
6D1. Manipulation des radio ne faisant pas partie dun groupe

Quand on a un contrle radio tout seul, ne faisant pas partie dun groupe, on peut le manipuler exactement comme une checkbox. Pour ce type dutilisation des radio, je vous renvoie donc au paragraphe prcdent (on peut utiliser et modifier sa proprit checked, et on peut aussi utiliser et modifier sa proprit value).
6D2. Manipulation de plusieurs radio

Dans ce prsent paragraphe, on va plutt sintresser aux spcificits des contrles radio, savoir le fait quils soient souvent plusieurs traiter du mme thme dans une page. Allez, maintenant, rien que pour voir, testez le bout de code suivant :
... <form> Cochez si vous tes majeur : <Input type = "radio" name = "majeur" value = "vrai" checked> majeur <br> Cochez si vous tes mineur : <Input type = "radio" name = "mineur" value = "faux" > mineur <br> <input type = "button" value = "Clic!" onClick="majeur.checked = !majeur.checked ; mineur.checked = !mineur.checked"> </form> ...
Dans le code ci-dessus, on na pas cr de groupe de contrles radio, nos radio sont indpendants lun de lautre. Bon, quand on clique sur notre bouton clic!, a inverse la slection des radio, par contre, comme les radio sont indpendants lun de lautre, le choix nest pas exclusif et une fois quon a coch un radio, il le reste. Cest plutt bof, comme comportement. Et maintenant, modifiez comme suit : ... <form> Cochez si vous tes majeur : <Input type = "radio" name = "majeurOuMineur" value = "vrai" checked> majeur <br> Cochez si vous tes mineur : <Input type = "radio" name = "majeurOuMineur" value = "faux" > mineur <br> <input type = "button" value = "Clic!" onClick="majeurOuMineur.checked = !majeurOuMineur.checked;"> </form> ...
8 3950 TG PA 00
114
Squence 3
L, on a cr un groupe de radio. Alors l, maintenant, quand on teste, lorsquon clique sur notre bouton clic! Il ne se passe absolument rien. Cela signifie que, comme linstruction majeurOuMineur.checked = !majeurOuMineur. checked nest pas applicable, le navigateur lignore purement et simplement, ce qui, soit dit en passant vaut mieux quun message derreur. Les navigateurs se comportent comme a parce que justement, il arrive que dans la page quils doivent visualiser, il se trouve des instructions, symboles quils ne connaissent pas (cas par exemple dun vieux navigateur qui aurait affaire une version trop rcente de javascript). Par contre, comme nos deux radio ont la mme proprit name, ils font partie du mme groupe et lorsquon slectionne un des choix, lautre est automatiquement dslectionn. Oui, mais moi je veux que lutilisateur puisse manipuler les radio soit par un clic direct dessus, soit en cliquant sur le bouton clic! En fait, voil ce que je veux exactement : faire en sorte que les choix soient exclusifs; dcocher un choix coch par un clic sur le radio; faire en sorte que lorsquun choix est dcoch, lautre est automatiquement coch; modifier la valeur de la proprit checked de chaque radio au clic sur un bouton. Il faut donc : utiliser des radio indpendants (cest--dire ne possdant pas la mme valeur pour leur attribut name); programmer leurs vnements onClick respectifs en plus de programmer lvnement onClick de notre bouton clic!
8 3950 TG PA 00
115
Squence 3
Jai cherch et trouv (dans ma petite tte) le bout de code suivant, qui donne aux radio un comportement un peu plus riche : <html> <head> <title> Manipulation des contrles radio</title> <script language = "javascript"> function inverseSelection(form) { form.majeur.checked = !form.majeur.checked; form.mineur.checked = !form.mineur.checked; } </script> </head> <Body> <form name = "maPage"> Cochez si vous tes majeur : <Input type = "radio" name = "majeur" value = "vrai" checked onclick = "mineur.checked = !mineur.checked; majeur.checked = !mineur.checked;"> majeur <br> Cochez si vous tes mineur : <Input type = "radio" name = "mineur" value = "faux" onclick = "majeur.checked = !majeur.checked; mineur.checked = !majeur.checked;"> mineur <br> <input type = "button" value = "Clic!" onClick="inverseSelection(maPage)"> </form> </body> </html> Le comportement de la page est le suivant : quand la page souvre, cest le radio majeur qui est coch par dfaut ; quand on clique sur le bouton clic!, cela a pour effet dinverser la slection des radio ; quand on clique sur un radio, sil tait coch, il est dcoch et cest lautre radio qui est coch ; sil tait dcoch, il est coch et lautre radio est dcoch. Le comportement est un peu plus riche que si on utilise des radio appartenant un mme groupe. Maintenant, si on veut permettre des choix non exclusifs, alors l, ce nest pas la peine de sembter programmer le comportement des radio, il suffit dutiliser des checkbox.
8 3950 TG PA 00
116
Squence 3
6E. Manipulation des contrles bouton

6E1. Le libell du button
Lorsquon utilise la syntaxe <input type....> pour crer un bouton, la proprit value du bouton contient, vous avez pu le constater, le libell du bouton. On peut changer par programmation ce libell. Exemple : <input type = "button" value = "Ajouter" onClick = "this.value = On change"> Vous pouvez constater, avec cet exemple que : lorsque vous le testez, au clic sur le bouton, son libell change ; on nest pas oblig de systmatiquement crer une fonction pour programmer un vnement. Ici, je me suis contente daffecter directement les instructions javascript lvnement onClick.
6E2. Activation/dsactivation du button

On peut, par programmation, je vous lavait expliqu dans la squence 2, activer ou dsactiver un bouton. Exemple tester : compltez notre page dessais javascript de la manire suivante :
... <input type = "button" name = "inverserSelection" onClick="inverseSelection(maPage)" value = "Clic!" disabled> <br> <BUTTON name = "boutonActiver" value = "activer" type = "button" onClick = "inverserSelection.disabled = false;"> Activer </button> ...
Vous constatez que quand on clique sur le bouton Activer, cela a pour effet de rendre actif le bouton clic!, ce qui permet de cliquer dessus. Ce qui serait top, cest de changer le libell du bouton Activer en Dsactiver une fois que le bouton clic! a t activ. Une solution simple serait dutiliser la syntaxe <input..> pour le bouton Activer et de changer son libell en changeant sa proprit value, comme a <input type = "button" name = "boutonActiver" value = "Activer" onClick = inverserSelection.disabled= false;boutonActiver.value= "Dsactiver";
>
Remarque
Vous avez remarqu au passage que comme jutilise "Dsactiver", une chane de caractre entre doubles quotes pour affecter une nouvelle valeur la proprit value du bouton, jai encadr le code javascript de simples quotes, sinon, le code ne fonctionne plus, le navigateur sarrtant dans son interprtation la premire double quote de la chane "Dsactiver" qui pour lui, est la marque de la fin du code javascript.
8 3950 TG PA 00
117
Squence 3
Autre solution : une solution existe, plus propre car utilisant la syntaxe <button...>, un petit peu plus complexe aussi, puisque ce quil faut, cest modifier le texte du bouton, qui est plac entre les balises <button...> et </button>. Pour ce faire, il faut affecter un identifiant au contrle, rcuprer cet identifiant laide dune fonction prdfinie, et changer le texte Activer en Dsactiver, comme a <button type= "button" id= "monBout" name= "boutonActiver" value= "Activer" onClick = inverserSelection.disabled = false; document.getElementById("monBout").childNodes[0].nodeValue= "Dsactiver";> Activer </button> Lavantage de cette faon de faire, cest quon peut modifier tout lment de document avec la mthode getElementById partir du moment o on a affect un attribut Id cet lment. Llment que lon modifie nest pas forcment un contrle de formulaire, a peut tre un lment statique de la page. On peut mme modifier les options dune liste <select.> de cette faon, ou mme les options dune liste pas <select..>, une liste normale quoi (une liste ol ou une liste ul), ou mme le contenu dun tableau, la taille dune image, tout quoi!!! Expliquons ce bout de code, un peu plus compliqu que le prcdent, je vous laccorde. document.getElementById("monBout") nous permet de rcuprer le contrle dont lattribut Id vaut "monBout". childNodes[0] nous permet de rcuprer le premier lment de llment dont lId est "monBout". Bon, l, il faut que jexplique que : pour tout lment ayant un attribut Id, un tableau sappelant childNodes est accessible par programmation. Lindice du premier lment de ce tableau est 0(zro). Ce tableau contient les valeurs des diffrents lments de texte de llment. Dans le cas de notre bouton Activer, le tableau childNodes contient un seul lment, qui est le libell du bouton. document.getElementById("monBout").childNodes[0].nodeValue nous permet daccder la valeur (nodeValue) du premier lment texte (childNodes[0].) du contrle dont lattribut est "monBout" (getElementById("monBout").) dans le document courant (document.). Ouf!! Jai expliqu!!!
7.Modification des lments dun document HTML

On a dj vu un peu plus haut un exemple qui nous permettait de rajouter des lments dans un document HTML laide de la mthode write. Ce prsent paragraphe a pour but dclaircir un peu comment modifier des lments se trouvant dj dans le document. Bon, on vient juste den parler ci-dessus, partir du moment o on a dot un lment dun attribut Id, on peut agir dessus par programmation, en utilisant la mthode getElementById.
8 3950 TG PA 00
118
Squence 3
On peut galement accder un lment par sa proprit name et dans ce cas, on utilise la mthode getElementByName, ce qui suppose que les lments de notre document auxquels on veut accder ont une proprit name. Il existe encore dautres moyens de modifier un document HTML par programmation. Par exemple, on peut accder llment que lon veut modifier par son tag (cest--dire le truc entre <> qui encadre llment), laide de la mthode getElementsByTagName. Nous ne verrons pas ici ces faons de faire, car ce cours a pour but une initiation. Si vous souhaitez approfondir les diffrents moyens quoffre javascript de modifier les lments dun document HTML, je vous invite vous documenter par tout moyen votre convenance (en allant fouiner sur le net, en achetant des bouquins). Mon but est de vous montrer que cest possible et pas si compliqu que a. Aprs, vous pourrez transposer ce quon va voir ici : la suppression dlments, avec, par exemple, la mthode removeChild ; lajout dlments avec, par exemple, createElement ; dautres traitements encore. Comme dans le paragraphe ci-dessus, nous allons utiliser la mthode getElementById. Si on utilise ce procd sur une liste <select..>, vous allez voir ci-dessous que a nous permet de changer les options de la liste. Cest trop fort, ce truc, vous ne trouvez pas ? Pour tester a, on va reprendre un exemple dj utilis plus haut dans ce prsent ouvrage, tout aussi inspir que pdagogique (Ben quoi, cest le printemps, alors je moffre des fleurs, na!). Donc on va reprendre notre liste :
<Select name = "preference"> <option value = les livres> les livres <option value = les films> les films <option value = la musique selected> la musique </select>
Puis, pour dclencher la modification de la liste, on va reprendre notre bouton clic! Donc, on va modifier le code comme suit :
<html> <head> <title> Gestion des vnements</title> <script language = "javascript"> function modifListe(idDeLelement) {document.getElementById(idDeLelement).childNodes[0].nodeValue = "Blablabla";} </script> </head> <Body> <form name = "monFormulaire">
8 3950 TG PA 00
119
Squence 3
<Select name = "preference" Id = idSelect> <option value = les livres Id = option1> les livres </option> <option value = les films> les films </option> <option value = la musique selected> la musique </option> </select> <p> <button type = "button" name = "boutonActiver" value = "activation" onClick = modifListe("option1");> Clic! </button> </form> </body> </html>
L, btement, quand on clique sur notre bouton clic!, a change la premire option de la liste preference. Il suffit de drouler la liste aprs avoir cliqu sur clic! pour sen rendre compte. Expliquons quand-mme ce bout de code : vous remarquerez tout dabord que, pour pouvoir utiliser getElementById, jai rajout un attribut Id loption de la liste que je souhaite modifier. Bon, maintenant, parlons de la fonction modifListe. La fonction modifListe prend un paramtre. Dans la description de la fonction, jai appel ce paramtre idDeLelement pour quon se rappelle bien que ce paramtre formel, cest lattribut Id de llment. Ce quon veut, cest changer la valeur du premier node de cet lment. Cette fonction affecte la valeur Blablabla (nodeValue = "Blablabla") du premier node (childNodes[0].) de llment dont lId a t pass en paramtre (getElementById(IdDeLelement).), et ceci, dans le document courant (document). Vous pouvez constater que le tableau qui rfrence les nodes dun lment est indic partir de0. Oui mais madame, c koi un node ? Ah, enfin, il y en a un qui pense me poser la question... cest pas trop tt!! Alors, un node, quest-ce que cest ? laide de tout un ensemble de mthodes et de proprits de lobjet document , les navigateurs ( partir de Internet Explorer 5 et Netscape Navigator 6) savent voir un document HTML comme un ensemble compltement hirarchis dlments. Pour tout lment, on a moyen de connatre les lments quil contient, et par quel lment il est contenu. Les mthodes de lobjet document permettent galement daccder aux lments via leurs indices dans des tableaux dans lesquels ils sont rpertoris suivant la hirarchie du document. Autrement dit, les navigateurs savent voir tout document HTML sous forme dune arborescence, et mettent notre disposition des outils javascript (des fonctions, des procdures, des proprits) nous permettant daccder et de mettre jour cette arborescence. Exemple : en crant le paragraphe
<p> On explique ckoi un node </p>

... vous avez cr, linsu de votre plein gr, deux objets : un paragraphe et du texte.
8 3950 TG PA 00
120
Squence 3
Lobjet texte On explique c koi un node tant contenu dans le tag objet <p></p> , il est considr par votre navigateur comme lenfant de <p>. Donc, notre paragraphe a un enfant, auquel on accde en allant dans le tableau qui rpertorie les enfants de ce paragraphe, ce tableau sappelle childNodes, le premier enfant est lindice 0 de ce tableau. Maintenant, si je veux mettre en gras le mot node dans mon paragraphe, je vais crire
<p> On explique ckoi un <b> node </b></p>

...et l, notre paragraphe se retrouve avec deux enfants : on explique ckoi un <b> ...et <b> a lui mme un enfant, node. Maintenant jen viens la signification du terme node. Chaque lment identifiable dun document HTML est un node. Dans notre exemple, on a quatre nodes : <p>, on explique c koi un, <b>, node. Pour avancer un peu dans la comprhension de ce nouveau concept super puissant mais, quelque peu, je vous laccorde, compliqu, je vous propose denrichir un peu lexemple de code nous permettant de modifier les items de la liste. Voil la modification que je vous propose : on permet lutilisateur de slectionner un item de la liste ; une fois quil a fait sa slection, on lui affiche une bote de dialogue o il doit saisir quelle nouvelle valeur il veut donner litem de liste quil a slectionn ; on modifie la liste. Voil le code. Tapez-le, testez-le, jexplique ensuite. <html> <head> <title> Modification dune liste par programmation </title> <script language = "javascript"> function modifListe(idDeLelement, val) {document.getElementById(idDeLelement).childNodes[0].nodeValue = val;} </script> </head> <Body> <form name = monFormulaire> <Select name = preference Id = IdSelect onChange = " var valeur = prompt (Quelle nouvelle valeur pour cet item ?, preference.value);
8 3950 TG PA 00
121
Squence 3
modifListe(preference.value, valeur);"> <option value = livres Id = livres> les livres </option> <option value = films Id = films> les films </option> <option value = musique Id = musique selected> la musique </option> </select> </form> </body> </html>
Observons notre liste select tout dabord: jai trich, vous avez vu ? jai affect la mme valeur lattribut Id et lattribut value de chaque option. Pourquoi jai fait a ? Eh ben parce que dans une liste select la proprit value de la liste est tout instant identique la proprit value de loption slectionne, donc, avec ma tricherie, la proprit value de la liste est tout instant identique la proprit Id de loption slectionne. Cest fort, hein!! Ensuite, quest-ce que jai fait dautre ? laide de la fonction prompt , je rcupre dans la variable valeur la nouvelle valeur que lutilisateur veut attribuer litem de liste quil a slectionn. Puis, jappelle la fonction modifListe en lui passant, comme paramtres, lattribut value de la liste. Donc, en fait, grce ma petite tricherie, je lui passe lId de loption dont il veut modifier le texte. Le second paramtre pass modifListe est le nouveau texte de loption. Allons maintenant regarder de plus prs la fonction modifListe. Cette fonction rcupre llment modifier grce document.getElementById(idDeLelement)., idDeLelement ayant t pass en paramtre. Puis, grce childNodes[0].nodeValue = val, la fonction affecte la valeur val (qui est le second paramtre qui lui a t pass) au texte (nodeValue) du premier enfant de loption (chilNodes[0]).
Une dernire remarque

Comme on a utilis lvnement onChange de la liste, ce nest que lorsque lutilisateur choisira dans la liste un autre item que celui qui est slectionn, que la modification se produira. Voil, voil. Bon, il y a dautres moyens de faire, mon but ici nest pas dtre exhaustive, mais de vous montrer que cest possible. Voil, on en a peu prs fini avec les bases de la manipulation des pages laide dinstructions javascript. Afin dcrire des traitements un peu plus sophistiqus, il est temps maintenant de voir les bases du langage javascript lui-mme, cest--dire comment on dclare les variables, comment on crit des instructions conditionnelles, des boucles etc. On, continuera, dans cette partie sur la syntaxe, voir quelles applications concrtes elles nous permettent.
8 3950 TG PA 00
122
Squence 3
8.Syntaxe du langage javascript

On va, dans ce paragraphe, reprendre point par point tout ce qui caractrise le langage, mme si certaines caractristiques ont dj t abordes de manire plus ou moins formelle dans les paragraphes prcdents. Certains paragraphes seront donc assez synthtiques, car les explications vous ont dj t donnes antrieurement.
8A. Les commentaires

Chaque ligne de commentaires doit tre prcde de //. Chaque bloc de commentaires doit tre encadr par /* et */.
8B. Empcher lexcution des lignes de script

Il est ncessaire que les navigateurs ninterprtent pas le code javascript principalement dans deux situations.
Vieux navigateurs
Lorsquune page est interprte par un trs vieux navigateur ne sachant pas interprter le javascript (ils sont de plus en plus rares, mais il en reste), le navigateur affiche sur la page le code javascript, au lieu de linterprter. Pour viter a, il suffit dencadrer tout code javascript avec des commentaires HTML. Comme a, un navigateur ne sachant pas interprter le javascript croira quil sagit dun bloc de commentaires, par contre, un navigateur sachant interprter le javascript reprera les balises <script> et </script> et interprtera le script. Exemple : testez ce qui suit, et vous verrez quavec votre navigateur, le code javascript est interprt.
<script language="javascript"> <!-var monNombre ; monNombre = 4 ; alert (monNombre vaut + monNombre); --> </script>
Vieux navigateurs ou internaute ne voulant pas de script

Le second cas o il faut empcher lexcution des scripts, cest si linternaute a configur son navigateur de manire ce quil ninterprte pas les scripts, ou bien si le navigateur est trop vieux pour savoir interprter les scripts. Bon, il ne sait pas ce quil loupe, linternaute, en refusant que nos scripts soient interprts, mais cest lui qui commande, alors alors, si notre mise en page est faite laide de script et que le navigateur ne linterprte pas, a risque dtre un beau chahut sur notre page. Pour viter a, on peut utiliser les balises <noscript> et </noscript>. Le code HTML encadr par <noscript> et </noscript> ne sera interprt que si le navigateur : est un vieux navigateur qui ne sait pas interprter le javascript; a t configur par linternaute pour ne pas interprter le javascript.
8 3950 TG PA 00
123
Squence 3
Ce quon peut mettre entre <noscript> et </noscript> : la description dun document HTML nutilisant pas de javascript; la redirection vers une autre page. Exemple : ici, on redirige vers une autre page <html> <head> <noscript> <meta http-equiv= "refresh" content= "0; URL= http://www.lesite.fr/lapage.html"> </noscript> <title> </title> <script language = "javascript"> ... </script> </head> <Body> <form></form> ... </body> </html>
8C. Les variables

La casse
Vous le savez dj car je vous lai signal plus haut, javascript est sensible la casse (les verres, les assiettes quand a casse, il est mu... non, bon, daccord, celle-l, elle est vaseuse). Un langage sensible la casse, cela implique pour le dveloppeur de respecter les majuscules et minuscules des variables quil dclare et utilise.
Les noms des variables

En ce qui concerne les noms que vous donnez vos variables, il existe deux restrictions : les noms de variables ne doivent pas commencer par des chiffres; ils ne doivent pas contenir despace.
Dclaration
On peut dclarer une variable de diffrentes manires : var maVariable; Cette dclaration est classique, dans le sens o elle naffecte pas de valeur la variable maVariable lors de la dclaration. Cette dclaration utilise le mot rserv var pour indiquer quil sagit dune dclaration. var maVariable = 15; Ici, on initialise la variable lors de sa dclaration.
8 3950 TG PA 00
124
Squence 3
maVariable = 15; Cette dernire faon de dclarer une variable est possible mais ambige dans la mesure o labsence du mot rserv var implique une possible confusion de cette dclaration avec une opration daffectation.
Type
Lorsquon dclare une variable, on nindique pas son type. Cest le type de la valeur quelle prend qui dtermine le type de la variable. Selon la valeur quelle contient, une variable peut tre des diffrents type suivants.
Chane de caractres
Vous lavez dj constat, les chanes de caractres sont encadres par des simples quotes (...), ou bien par des doubles quotes ("..."). La seule condition respecter : ne pas, par exemple, commencer une chane avec une simple quote et la finir avec une double, ou linverse. Pourquoi ces deux possibilits ? Car elle nous donne lavantage suivant: si on cre une chane de caractres encadre par des doubles quotes, on peut y insrer des mots entre simples quotes. Inversement, si on cre une chane de caractres encadre par des simples quotes, on peut y insrer des mots entre doubles quotes. Cest bien pratique, a. Pourquoi ? Parce que si on veut insrer une chane utilisant des simples quotes dans une chane encadre par des simples quotes, la deuxime simple quote rencontre, javascript considrera que cest la fin de la chane. Exemple : testez a...
var maChaine = Aujourdhui, cest dimanche

Et cest vrai en plus, quaujourdhui, cest dimanche eh oui, je travaille pour vous mme le dimanche!! Javascript va considrer que la variable machaine vaut Aujourd car il interprte la quote contenue dans le mot Aujourdhui comme la quote fermante de la chane maChane. Pour rsoudre le problme, deux solutions : la plus simple mon got, cest denlever les simples quotes externes et de les remplacer par des doubles, comme a var maChaine = "Aujourdhui, cest dimanche" ; prcder chaque simple quote ne marquant pas le dbut et la fin de la chane par un antislash (\), javascript saura que ce sont des apostrophes et pas des marqueurs de fin de chane, comme a var maChaine = Aujourd\hui, c\est dimanche.
Nombres
Rien de plus simple que de donner une valeur numrique une variable. Exemples :
var monNombre = 4.123; var maVar= monNombre * 541;
8 3950 TG PA 00
125
Squence 3
Boolens
Javascript met notre disposition les deux valeurs boolennes vrai et faux : true, false. Exemple :
var monBool = true; var autreBool; autreBool = !monBool /* Aprs lopration daffectation ci-dessus, la variable autreBool vaut la ngation de la variable monBool.*/
Null
On peut utiliser la valeur null pour laffecter une variable. Cela signifie que la variable na pas de valeur. Aprs, on peut sen servir pour faire des tests. Exemple : var maVar; var monRes; monRes = prompt(Saisissez le jour :,); if monRes = Dimanche maVar = null; ... if maVar = null alert("Cest dimanche aujourdhui, vous ne devriez pas travailler");
Rgles de porte
Vous vous rappelez ce quon appelle les rgles de porte ? On a vu a dans le cours dalgo, la squence 6 sur les sous-programmes. En bref, une variable, selon lendroit o elle est dclare, nest pas visible de partout. Les rgles de porte sont les rgles utilises par le langage de programmation en ce qui concerne la visibilit des variables. Une variable dclare dans un sous-programme avec le mot cl var est locale au sous-programme. Toute variable dclare dans un bloc javascript avec le mot cl var est visible dans ce bloc et dans les sous-programme de ce bloc. Bref, cest comme en algo et cest trs bien comme a. javascript possde une caractristique assez pige en ce qui concerne la dclaration des variables : Une variable dclare dans un sous-programme sans le mot cl var est globale, et donc visible par le programme appelant et les autres sous-programmes.
Remarque
Je vous dconseille cette pratique. Quitte dclarer une variable globale, autant la dclarer dans le bloc o elle est visible, cest--dire ici, dans le programme appelant, et avec le mot cl var pour une meilleure lisibilit.
8 3950 TG PA 00
126
Squence 3
8D. Les oprations

8D1. Les oprations arithmtiques
Vous prsenter a sous forme dun tableau me parat pratique : Opration Addition Soustraction Multiplication Division Symbole + * /
Lorsquon veut modifier la valeur dune variable partir de sa propre valeur (laugmenter de 5, la multiplier par 2), il existe des critures plus synthtiques que lcriture daffectation classique. nouveau, je vous prsente a sous forme dun petit tableau : criture classique nombre = nombre + 1; nombre = nombre 1; nombre = nombre + 7; nombre = nombre - 7; nombre = nombre * 7; nombre = nombre / 7; criture synthtique nombre ++; ou ++ nombre ; nombre --; ou -- nombre ; nombre += 7; nombre -= 7; nombre *= 7; nombre /= 7;
ONe pas crire de btise avec les oprateurs dincrmentation (++, --).
En effet, imaginons le code suivant :
... var nombre = 10; var res; res = nombre ++; alert(res); ...
La valeur 10 saffiche. Pourquoi ? La valeur de la variable nombre est affecte la variable res et cest seulement aprs que nombre est incrment. Par contre, si on crit :
... var nombre = 10; var res; res = ++nombre; alert(res); ...
cest la valeur 11 qui saffiche car la variable nombre est incrmente avant dtre affecte res.
8 3950 TG PA 00
127
Squence 3
8D2. Les oprations de comparaison

Allez, encore un petit tableau Opration Egalit Diffrence Infriorit stricte Infriorit large Supriorit stricte Supriorit large Symbole en javascript == (deux signes = la suite lun de lautre) != < <= > >=
8D3. Les oprateurs logiques

Et un tableau de plus... Opration ou Symbole en javascript || (deux barres verticales, obtenues, sur le clavier en tapant Alt Gr + la touche 6 - | du clavier) && !
et non
8D4. Opration de concatnation

On la dj utilise dans nos exemples, je vous le rappelle simplement ici, loprateur de concatnation est le signe +. Jattire nouveau votre attention sur les particularits de la concatnation avec les exemples suivants, que je vous propose de tester dans notre page de test.
var nombre = 2; alert("On est le" + 4); // le message On est le 4 saffiche alert (4 + nombre); alert(4 + eval(nombre)); alert(eval(4 + nombre); // la chane de caractres 42 saffiche, car nombre est de type chane, // donc 4 et 2 sont concatns // 6 saffiche car on a converti nombre en une variable // numrique laide de la fonction eval // le nombre 42 saffiche car on a converti la chane de caractres // 42 en un nombre laide de la fonction eval.
Remarque
pour convertir une chane en un nombre, je vous avais dj prsent la fonction parsefloat, maintenant, vous savez quon peut aussi utiliser la fonction eval. Et pour convertir un nombre en chane, que faut-il utiliser ? Rien, vous voyez dans les exemples du dessus qu partir du moment o on concatne un nombre avec une chane, il est automatiquement converti en chane, cest classe, hein!!
8 3950 TG PA 00
128
Squence 3
Allez, maintenant, on attaque une prsentation rapide des diffrentes structures algorithmiques disponibles dans le javascript.
8E. Les structures conditionnelles

8E1. La structure Si... Alors... Sinon... FinSi
Structure algorithme Si condition Alors instruction FinSi Si condition Alors instruction 1 FinSi Si condition Alors instruction 1 Sinon instruction 2 FinSi Si condition Alors instruction 1 FinSi ... instruction n instruction y else if (condition) { instruction 1; ... instruction n ; } { instruction x ; instruction y ; } else if instruction 2 instruction n ; if (condition) { instruction 1; instruction 2 ; ... instruction n ; } (condition) instruction 1; instruction 2 ; if Syntaxe correspondante en javascript (condition) instruction;
Sinon instruction x
Remarques
Important : il faut absolument penser encadrer les conditions par des parenthses, sinon, on a une erreur de syntaxe. on peut, bien sr, navoir quune seule instruction dans le bloc Alors et plusieurs dans le bloc Sinon, et on peut aussi avoir plusieurs instructions dans le bloc Alors et une seule dans le bloc Sinon.
8 3950 TG PA 00
129
Squence 3
Je ne vous prsente pas dexemple pour le moment, car vous allez appliquer tout cela notre site dans quelques petites pages. Une application possible, laquelle vous pouvez rflchir ds maintenant : les conditionnelles nous permettent par exemple de tester si lutilisateur a bien saisi tous les champs obligatoires avant denvoyer son formulaire en cliquant sur un bouton submit .
8E2. La structure SelonCas Faire

Structure algorithmique Selon cas expression FinSelon ... switch (expression) Syntaxe correspondante en javascript { case valeur1 : // Liste dinstructions excute si expression = valeur1 // sil y a plusieurs instructions, alors elles sont encadre par // { et }. [break]; case valeur2 : // Liste dinstructions excute si expression = valeur2 // sil y a plusieurs instructions, alors elles sont encadre par // { et }. [break]; case valeurN : // Liste dinstructions excute si expression = valeurN // sil y a plusieurs instructions, alors elles sont encadre par // { et }. [break]; default : // Liste dinstructions, excute si lexpression na aucun // des valeurs allant de valeur1 valeurN ] // sil y a plusieurs instructions, alors elles sont encadre par // { et }. } [break]; valeur1 : valeur2 : ... valeurN : [ Sinon : // Liste dinstructions excute si expression = valeurN // Liste dinstructions, excute si lexpression na aucune // des valeurs allant de valeur1 valeurN ] faire // Liste dinstructions excute si expression = valeur1 // Liste dinstructions excute si expression = valeur2
Le mot cl break la fin de chaque cas est optionnel. Si on le met, cela rend les cas exclusifs les uns par rapport aux autres puisque break sert quitter linstruction switch et excuter la premire instruction suivant la fin du switch. Bon, l, on va faire un petit exemple tout simple. Ca nous permettra de tester le comportement avec et sans break.
8 3950 TG PA 00
130
Squence 3
Alors je vous prviens tout de suite, mon exemple est stupide. Jai rarement fait mieux dans la dbilit, en ce qui concerne les exemples, jentends. Mon but est de vous faire comprendre quoi sert le break. On va donc tester plusieurs versions pour comprendre. Voici la premire version de mon super code source :
<html> <head><title> Test du switch avec un exemple idiot </title></head> <Body> <script language="javascript"> var nombre; nombre = prompt(Saisir le nombre tester); switch(nombre) { case 6 : alert(Multiple de 2); case 6 : alert(Multiple de 3); default : alert(Pas 6); } </script> </body> </html>
Lors du test (moi, je lai test une fois en saisissant 6 et une fois en saisissant une autre valeur que6), on comprend tout de suite quoi sert le break. Si on ne met pas break, les conditions ne sont pas exclusives. Donc, si le slecteur (ici, la variable nombre) satisfait plusieurs conditions, les traitements correspondant chacune de ces conditions sont effectus. Mme le default!! Pourquoi ? Eh bien probablement parce que default signifie ici nimporte quelle condition . En fait, le fait que a passe aussi dans le default vient du fonctionnement du switch. Quand il ny a pas de break, toutes les conditions case sont values. Essayons la deuxime version (je ne remets pas le dbut ni la fin de la page, seul le switch est modifi).
... switch(nombre) { case 6 : alert(Multiple de 2); case 6 : alert(Multiple de 3); break; default : alert(Pas 6); } ...
Bon, le fait de rajouter un break fait quon ne passe plus dans le default lorsque6 a t saisi.
8 3950 TG PA 00
131
Squence 3
La troisime version maintenant :
switch(nombre) { case 6 : alert(Multiple de 2); break; case 6 : alert(Multiple de 3); break; default: alert(Pas 6); } ...
Cette fois, cause du break quon a rajout, on sort aprs affichage du premier message, ce qui ne nous arrange pas dans notre cas, mais a nous apprendra inventer des exemples dbiles. On peut donc utiliser des switch quivalents des si alors sinon imbriqus, dans ce cas, il faut utiliser des break. On peut aussi utiliser le switch comme une succession de si alors Maintenant, essayez ce qui suit :
switch(nombre) { case 6 : alert(Multiple de 2); break; case 6 : alert(Multiple de 3); break; default: alert(Pas 6); } ...
Jai simplement enlev les simples quotes autour des 6 du case, et maintenant, quand je saisis 6 a marche mme pus!! Est-ce que a voudrait dire que les valeurs des case doivent tre des chanes de caractres ? Pour vrifier cette hypothse (quelque peu hasardeuse, je vous laccorde), je complte mon switch comme a : switch(eval(nombre)). Et l, a fonctionne nouveau. Donc, mon hypothse tait fausse. Le problme tait tout autre : les valeur saisies laide de la fonction prompt , mme si on saisit des chiffres, sont des chanes de caractres. Si, dans les case, les conditions portent sur des nombres, il faut convertir en numrique les valeurs saisies. Bon, il tait dbile, mon exemple, mais il nous a quand-mme permis de comprendre pas mal de choses. Voil, jen ai fini avec les notions de base sur les structures conditionnelles. Maintenant, attaquons les boucles (cest--dire les structures itratives).
8 3950 TG PA 00
132
Squence 3
8F. Les boucles

Il y en a plusieurs, en javascript, dont for et while. Le for permet de traduire le pour et le TantQue, le while quivaut au TantQue. On va commencer par le while, dont la syntaxe est trs proche de lalgo, sauf que ce nest pas en franais. Dailleurs, ce propos, pour dire correctement while with the good accent, prononcer ouaill-l. Nous ne verrons pas les autres instructions itratives dans ce support, oh combien incomplet, mais dj, oh combien long.
8F1. Linstruction while

Cest notre habituel TantQue. Si certains parmi vous ne se souviennent plus des spcificits de la structure TantQue, je vous renvoie votre cours dalgo, chapitre 4, squence 4. En javascript, voici la syntaxe du TantQue :
while (condition) //instruction // ou // bloc dinstructions encadr par { et }

Le comportement du while est exactement le mme que celui du TantQue, alors, plutt que de repartir dans la description de la structure, je vous propose de faire un exemple, sympa, cette fois, lexemple, enfin, si tant est quun bout de code puisse tre sympathique. Ce que je vous propose, cest de construire, laide dune boucle while, un tableau HTML comportant des informations. Le sujet : on propose linternaute de saisir, par ordre de prfrence, quels sont, en musique, ses auteurs, chanteurs, ou groupes prfrs. Au fur et mesure de sa saisie, on construit le tableau, qui saffiche dans le document HTML courant (cest--dire ouvert). La saisie sarrte lorsque linternaute saisit une * au lieu dun nom dartiste.
<html> <head> <title> Parlez-nous de vos gots, cher visiteur </title> <script language = javascript> function saisieArtistes() { // compteur dartistes var nbArtistes = 0; var artisteSaisi = ; // deux simples quotes la suite l'une de l'autre // construction du dbut du tableau document.write(<table border = 1>); document.write(<TR> <TD> Ordre de prfrence </TD> <TD> Artiste </TD> </Tr>); artisteSaisi = prompt(Saisissez un artiste (* pour terminer),); // dans la ligne prcdente, '' signifie deux simples quotes la suite l'une de l'autre
8 3950 TG PA 00
133
Squence 3
while (artisteSaisi !=*) { nbArtistes ++; document.write(<TR> <TD> + nbArtistes + </TD> <TD> + artisteSaisi + </TD> </TR>); artisteSaisi = prompt(Saisissez un artiste (* pour terminer),); } // fermeture de la table document.write(</table>); // On complte la page avec une zone pour saisir le-mail et un bouton pour envoyer le // formulaire document.write(<form>);
document.write(Saisissez votre adresse e-mail : <input type = "text" Value = "email"> <br>);
document.write(<Input type="submit" name = "monBoutonEnvoyer" value="Envoyer">); document.write(</form>); } </script> </head> <Body>  Bonjour,<br> Vos gots en matire de musique nous intressent <br> Nous vous proposons donc de saisir vos 5 artistes prfrs. <br> Si un article concernant un de ces 5 artistes est disponible la vente, <br> Nous ne manquerons pas de vous avertir par mail.<br> Si vous tes prt pour la saisie, cliquez sur le bouton "Saisir les artistes". <br> <form> <button name = bSaisie onCLick = saisieArtistes()> Saisir les Artistes </button> </form> </body> </html>
Vous avez test ? Cest sympa hein. Bon, je vous laisse le soin de fignoler le look de cette page. Le seul truc qui me drange pour le moment, en ce qui concerne le fonctionnement, cest que mme si linternaute ne saisit aucun artiste (cest--dire s'il saisit demble une *), on a quandmme lentte du tableau ainsi que les lments de formulaire qui saffiche.
8 3950 TG PA 00
134
Squence 3
Pour corriger a, on peut, par exemple : mettre la construction de lentte du tableau lintrieur du while avec un test. Ce test vrifie si le nombre dartiste est 1, si oui, on construit lentte du tableau, sinon, non ; nafficher la zone de saisie de ladresse de messagerie et le bouton envoyer que si lutilisateur a effectivement saisi au moins un artiste. Voici ci-dessous le code source modifi, jai mis en gras les modifications. D ans le code ci-dessous, jai mis certaines instructions document.write sur plusieurs lignes par manque de place en largeur, mais jai constat que si on fait effectivement cela dans le code source de la page, javascript considre quil y a une erreur. En javascript il y a en fait deux sparateurs d'instruction : le point virgule et le saut de ligne.
Donc, mme si dans le code ci-dessous, certaines instructions document.write stalent sur plusieurs lignes, tapez-les en une seule ligne dans votre diteur.
<html> <head> <title> Parlez-nous de vos gots, cher visiteur </title> <script language = javascript> function saisieArtistes() { // compteur dartistes var nbArtistes = 0; artisteSaisi = prompt(Saisissez un artiste (* pour terminer),); while (artisteSaisi !=*) { nbArtistes ++; if (nbArtistes == 1) { // construction du dbut du tableau document.write(<table border = 1>);
document.write(<TR> <TD> Ordre de prfrence </TD> <TD> Artiste </TD> </TR>); } // fin du if (nbArtistes == 1) document.write(<TR> <TD> + nbArtistes + </TD> <TD> + artisteSaisi + </TD> </TR>); artisteSaisi = prompt(Saisissez un artiste (* pour terminer),); } // fin du while // fermeture de la table document.write(</table>); if (nbArtistes > 0)
8 3950 TG PA 00
135
Squence 3
{ // On complte la page avec une zone pour saisir lemail et un bouton pour envoyer le // formulaire document.write(<form>); document.write(Saisissez votre adresse e-mail : <input type = "text" Value = "email"> <br>); document.write(<Input type="submit" name = "monBoutonEnvoyer" value="Envoyer">); document.write(</form>); } else history.back(); } </script> </head> <Body> ...je ne vous remets pas la fin, qui na absolument pas chang. </html>
Voil, il ne reste plus qu expliquer le sens de linstruction history.back();, se trouvant dans le else, cest--dire sexcutant lorsque le nombre dartistes saisis est 0. Pour comprendre ce que a fait, mettez le else en commentaires (en prcdant la ligne de //) et relancez laffichage de votre page. Vous constatez que, quand lutilisateur ne saisit aucun artiste, la fentre courante reste affiche, mais nest plus active : on peut toujours schiner cliquer 50 fois sur le bouton Saisir les artistes, rien ne se passe. Par contre, si on clique sur l'icne prcdant de votre navigateur, la fentre est de nouveau active, car elle est dans ltat antrieur au fait que linternaute nait saisi aucun artiste. Ce quil faut, donc, cest revenir ltat antrieur de notre page, quand elle tait encore active. Cest ce quoi sert la mthode back() de lobjet history. Cette mthode permet de ramener le navigateur la page prcdente, comme si linternaute cliquait sur le bouton Prcdent de son navigateur. Voil. On pourrait encore peaufiner le comportement de notre page. Notamment, on devrait contrler, laide dun test, si linternaute a bien renseign son e-mail avant denvoyer le formulaire. Mais ceci ne relve pas dun paragraphe sur la prsentation des boucles. On le fera plus tard, quand on en sera rinvestir ce quon a appris en javascript, pour amliorer notre site.
8 3950 TG PA 00
136
Squence 3
8F2. Linstruction for

Cette instruction permet de traduire la fois le pour et le TantQue. Pour comprendre comment cette instruction sutilise, je vais reprendre les structures algorithmiques, et vous indiquer leur traduction en javascript. Structure algorithmique Pour i de valDeb valFin (augmenter de n) Faire instruction FinPour Pour i de valDeb valFin (augmenter de n) Faire instruction 1 instruction 2 ... instruction n FinPour Pour i dcroissant de valDeb valFin (diminuer de n) Faire instruction FinPour Pour i dcroissant de valDeb valFin (diminuer de n) Faire instruction 1 instruction 2 ... instruction n FinPour initialisation TantQue condition Faire instruction 1 instruction 2 instruction n instruction modifiant la valeur de condition FinTantQue Voil. Expliquons un peu quand-mme. Que le for traduise un pour ou un TantQue, la signification gnrale est la suivante : en partant de la situation initiale (For(initialisation;...), et tant que condition est vraie (... condition;), excuter les instructions ci-dessous puis excuter linstruction modifiant la valeur de condition. Allez , on se fait des exemples, cest le mieux pour comprendre. Mon premier est simpliste et profondment inutile, sauf pdagogiquement :
var i; for (i = 1; i <= 10; i += 1 ) // au lieu de i += 1, on peut aussi crire i ++ document.write(i + <br>);
Traduction en javascript for (i = valDeb; i <= valFin; i += n) instruction; for (i = valDeb; i <= valFin; i += n) { instruction 1; instruction 2; ... instruction n; } for (i = valDeb; i >= valFin; i -= n) instruction; for (i = valDeb; i >= valFin; i -= n) { instruction 1; instruction 2; ... instruction n; } for (initialisation; condition; instruction modifiant la valeur de condition) { instruction 1; instruction 2; instruction n; }
8 3950 TG PA 00
137
Squence 3
Mon second est tout aussi inutile et simpliste :
var i; for (i = 10; i >= 1; i -= 1) // au lieu de i -= 1, on peut aussi crire i -document.write(i + );

Mon troisime ne vaut gure mieux :
var choix; var rep = prompt ("Voulez-vous commencer(oui/non)","") for (choix = rep; choix == "oui"; choix = prompt ("Voulez-vous commencer(oui/ non)","")) { document.write ("Votre choix :" + choix + "<br>"); document.write ("Bravo pour ce choix <br>"); }
Mon tout rattrape un peu le reste, cest la traduction du programme du paragraphe prcdent, avec un for au lieu dun while. Rappelez-vous que les instructions document.write ne doivent pas staler sur plusieurs lignes.
<html> <head> <title> Parlez-nous de vos gots, cher visiteur </title> <script language = javascript> function saisieArtistes() { var nbArtistes = 0; for (artisteSaisi = prompt(Saisissez un artiste (* pour terminer),);artisteSaisi != *; artisteSaisi = prompt(Saisissez un artiste (* pour terminer),)) { nbArtistes ++; if (nbArtistes == 1) { // construction du dbut du tableau document.write(<table border = 1>); document.write(<TR> <TD> Ordre de prfrence </TD> <TD> Artiste </TD> </TR>); } document.write(<TR> <TD> + nbArtistes + </TD> <TD> + artisteSaisi + </TD> </TR>);
/ / ici, jai enlev artisteSaisi = prompt(Saisissez un artiste (* pour terminer),)
// puisque cette instruction est dans le for }
8 3950 TG PA 00
138
Squence 3
// fermeture de la table document.write(</table>); if (nbArtistes > 0) // etc...etc... la suite ne change pas Bon, je pense quen ce qui concerne les boucles, on est au clair, alors maintenant, il ne nous reste plus qu voir les tableaux, et on aura fait le tour des bases du langage. Ensuite, je ne reviendrai que trs succinctement sur les fonctions, pour vous donner quelques petites prcisions, puis ensuite, on passera la gestion des cookies.
8G. Les tableaux

Attention, je ne parle pas ici des tableaux apparaissant sur les pages html, mais dun certain type de variables composes, capables de contenir une collection de donnes, que lon peut manipuler par leur indice de rangement dans le collection.
8G1. Dclaration
En javascript, un tableau est un objet de la classe Array. On a dj utilis quelques classes dans ce chapitre (la classe Date, la classe Window). Puisquun tableau est un objet de la classe Array, il faut, comme pour la classe Date, non pas le dclarer, mais linstancier laide de la syntaxe new . On a plusieurs faons de dclarer un tableau, principalement trois faons. Premire faon : dclarer et valoriser un tableau de littraux (cest--dire de valeurs). Dans ce cas, pas besoin de new, puisquon numre directement le contenu du tableau. Exemple : v ar monTableauDeLitteraux;
monTableauDeLitteraux = [truc, 4, bidule];

Rappel : parmi les deux lignes de lexemple ci-dessus, la premire, cest la dclaration, la deuxime, cest la valorisation du tableau. On peut crire dclaration et valorisation en une seule ligne, comme a : var monTableauDeLitteraux = [truc, 4, bidule]; Pour constater ce que a donne, testez donc le petit bout de code suivant :
var monTableauDeLitteraux = [truc, 4, bidule]; for (var i = 0; i <= 2; i++) document.write(monTableauDeLitteraux [i]);
Cet exemple nous montre que : le premier lment de tout tableau est lindice 0 ; on peut, dans un tableau, mlanger des nombres, des chanes ; on peut dclarer une variable au moment de lutiliser (Cest ce quon fait quand on crit for(var i = 0)). On dclare et on initialise i, le compteur ditrations, lintrieur du for. Si on avait voulu faire exactement comme en algo, on aurait crit :
var i; for (i = 0; i <= 2; i++) document.write(monTableauDeLitteraux [i]);
8 3950 TG PA 00
139
Squence 3
Deuxime faon : dclarer et instancier un tableau dune certaine taille. Exemple : v ar monTableau; // Dclaration
monTableau = new Array(2); // Instanciation

En une ligne :
var monTableau = new Array(2); // Dclaration et instanciation

Un petit bout de code pour montrer comment a marche Ce petit bout de code permet de saisir des valeurs et de les ranger dans le tableau.
var monTableau = new Array(2); for (var i = 0; i <= 1; i++) monTableau[i] = prompt (Saisir llment dindice" + i,"")
Testez. Maintenant, regardez, je modifie le code ci-dessus :
var monTableau = new Array(2); for (var i = 0; i <= 5; i++) monTableau[i] = prompt (saisir llment dindice" + i,"")
Ici, jessaie de faire saisir lutilisateur plus dlments (6 lments) que le tableau ne peut en contenir (le tableau peut contenir 3 lments). Et a marche. Cela signifie que mme si on dfinit la taille lors de linstanciation, la taille du tableau est extensible. Tous les tableaux sont de taille dynamique. Ceci nous amne la troisime faon. Troisime faon : on instancie le tableau sans indiquer sa taille. Exemple : v ar monTableau = new Array(); Reprenez lexemple du dessus et modifiez linstanciation pour vrifier que je ne vous raconte pas de btises. Convaincus ? Donc, inutile de sembter indiquer la taille lors de linstanciation.
8G2. Affectation de valeurs aux lments dun tableau

Quel que soit le mode dinstanciation choisi (tableau de valeurs littrales, tableau de taille dfinie ou non), on peut, entre autres, affecter des valeurs aux lments dun tableau : par affectation directe (Exemple : tab[2] = "machin") ; par saisie (Exemple : tab[2] = prompt ("Saisir llment","")).
8G3. Les proprits et mthodes dun tableau

Comme un tableau est un objet de la classe Array, il possde tout un tas de proprits et de mthodes que lon peut utiliser pour le manipuler. Quil sagisse dune proprit ou dune mthode, la syntaxe dutilisation est : nomDuTableau.propritOuMthode([paramtres]) Voici, de manire non exhaustive, celles qui me paraissent les plus intressantes.
8 3950 TG PA 00
140
Squence 3
Les proprits
En fait, un tableau ne possde quune proprit, la proprit length, qui contient, tout moment, le nombre dlments du tableau. Si mon tableau sappelle monTableau, alors, tout instant, lexpression monTableau.length a pour valeur le nombre dlments contenus dans le tableau monTableau.
Les mthodes
L, par contre, il y en a un bon petit paquet. Jen ai slectionn quelques unes. Je vous rappelle quune mthode, cest un sous-programme qui nest utilisable que pour une certaine classe dlments. La mthode concat Exemple :
// tableau1 et tableau2 sont deux tableaux instancis // et valoriss au pralable. tableau1.concat(tableau2)

Cette mthode rajoute tous les lments de tableau2 la fin de tableau1. La mthode reverse Elle inverse lordre de rangement des lments dans le tableau. Exemple :
// on suppose que tab contient a, b, c tab.reverse(); // tab contient dsormais c, b, a

La mthode slice Elle fait pareil que reverse mais seulement entre les bornes passes en paramtres. Exemple :
tab.slice(1,2) retournera le tableau entre les indices 1 et 2.

La mthode sort Elle trie le tableau. Exemple :
tab.sort() triera le tableau tab dans lordre croissant.

Une petite remarque au passage : si on veut quun tableau soit tri dans lordre dcroissant, il suffit dappeler successivement sort et reverse dessus, et le tour est jou. La mthode splice Elle remplace, partir de lindice spcifi, le nombre dlments spcifis. Exemple :
tab.splice(1, 3, x, y, z) remplacera par x, y et z les trois lments du tableaux partir de lindice 1.

Bon, il en existe dautres, mais tre exhaustive nest pas mon but, alors on va sarrter l. 141
8 3950 TG PA 00
Squence 3
8G4. Les tableaux deux dimensions

Pour en crer, on cre des tableaux de tableaux. Exemple :
var tab = new Array(); tab[0] = new Array(); // Le premier lment de tab est un tableau tab[1] = new Array(); // Le second lment de tab est un tableau
On peut ici considrer quon a cr un tableau de n lignes et 2 colonnes. Pour accder aux lments dun tel tableau, on fait comme a :
tab [indiceDeLaLigne] [indiceDeLaColonne]

Voil, je ne vais pas plus avant dans la description des tableaux 2 dimensions. Vous pouvez aussi bien entendu crer des tableaux de dimensions suprieures. Passons maintenant aux sous-programmes.
8H. Les fonctions et procdures

On en a dj crit pas mal depuis le dbut de cette initiation javascript. Vous avez expriment le passage de paramtres, lendroit o on dcrit les fonctions, comment on les appelle mais on va formaliser tout a en quelques coups de cuillre pot (tiens, propos de cette expression en quelques coups de cuillre pots je me suis toujours pose plein de questions, comme par exemple : Ah bon ? Il y a des cuillers exprs pour les pots ?, ou bien Mais qui a bien pu rendre clbre cette expression ?... si vous avez la rponse ces questions existentielles, merci de les envoyer laccueil du cned, qui me les fera parvenir). Alors, revenons nos moutons (tiens, propos de cette expression revenons nos moutons... je me suis toujours pos plein de questions comme par exemple).
Les fonctions ? Une premire remarque

Mme pour les fonctions que lon attache aux vnements (onClick, onBlur), lorsque vous crivez une fonction, efforcez-vous de faire en sorte quelle respecte les principes vus dans le cours dalgo : tout lment (variable, contrle de formulaire, formulaire etc...), utilis dans une fonction, sil est dclar dans le programme appelant, doit tre pass en paramtre la fonction.
Les mots cls pour une fonction et pour une procdure

Que le sous-programme soit une procdure ou une fonction, le mot cl pour dcrire le sous-programme est le mme, il sagit du mot cl function. Ce qui va faire la diffrence entre une fonction et une procdure, cest la prsence ou non du mot cl return (quivalent du mot cl renvoyer de lalgo). Un sous-programme sera une fonction sil renvoie un rsultat. Cest exactement comme en algo, il faut utiliser le mot cl return (quivalent du mot-cl renvoyer de lalgo). Dans ce cas, et toujours comme en algo, lappel se comporte comme une expression. Tiens, en guise dexemple, je vous mets ci-dessous la traduction de notre fonction de lalgo foncSomme (je vous encourage consulter nouveau votre chapitre 6 dalgo, si les fonctions commencent tre pour vous un souvenir un peu flou), ainsi que lappel de cette fonction dans le document HTML. vos claviers!! 142
8 3950 TG PA 00
Squence 3
<html> <head> <title> Tests sur les fonctions </title> <script language = "javascript"> // dbut fonction function fonctionSomme(var1,var2) { return var1 + var2; } // fin fonction </script> </head> <body> <script language = "javascript"> document.write(resultat = + fonctionSomme(2,4) + <br> ); </script> </body> </html>
Et maintenant regardez : je mamuse changer la description de la fonction de place (faites-en autant), pour voir si elle doit tre dcrite un endroit prcis.
<html> <head> <title> Tests sur les fonctions </title></head> <body> <script language = "javascript"> function fonctionSomme(var1,var2) {return var1 + var2;} document.write(resultat = + fonctionSomme(2,4) + <br> ); </script> </body>
</html> Bon, apparemment, on peut mettre la description dune fonction o on veut.
8 3950 TG PA 00
143
Squence 3
Fais-voir si on peut la mettre en dessous de lappel ?
<html> <head> <title> Tests sur les fonctions </title></head> <body> <script language = "javascript"> document.write(resultat = + fonctionSomme(2,4) + <br> ); function fonctionSomme(var1,var2) {return var1 + var2;} </script> </body> </html>
Ben oui, a marche aussi. Et encore plus bas ?
<html> <head> <title> Tests sur les fonctions </title></head> <body> <script language = "javascript"> document.write(resultat = + fonctionSomme(2,4) + <br> ); </script> </body> <script language = "javascript"> function fonctionSomme (var1, var2) {return var1 + var2 ;} </script> </html>
Ah non, l, a marche plus, mais cest normal, car le javascript doit forcment se trouver soit entre <head> et </head>, soit entre <body> et </body>. Et les procdures, a existe en javascript ? Oui, a existe. Ce sont des sous-programmes qui ne comportent pas le mot cl return, mais qui effectuent un traitement quand-mme. Comme en algo, lappel des procdures se comporte comme une instruction, et pas comme une expression. Seulement, il existe une limitation par rapport ce quon a vu en algo : les paramtres rsultats renvoys par une procdure (ce quon a appel les donnes modifies dans le cours dalgo) ne peuvent tre que de deux types : tableau ou objet. Je mexplique : on ne peut pas passer en donnes modifies un paramtre dun type de base, cest--dire une variable. Cela vient du mode de passage des paramtres, sur lequel on na pas la main. Cest javascript qui dcide du mode de passage des paramtres, en fonction de leur catgorie (les variables sont passes par valeur, les objets et les tableaux sont passs par rfrence, ce mode de passage tant quivalent au mode de passage par adresse).
8 3950 TG PA 00
144
Squence 3
On va faire un petit test pour mieux comprendre. On va traduire notre fonction fonctionSomme en une procdure procSomme, dont lalgo est dans votre cours dalgo, et on va voir ce que a donne. Pour mmoire, je vous remets ci-dessous lalgo de cette procdure : Procdure ProcSomme (donnes utilises nombre1, nombre2 : entiers, Donnes modifies ResSomme : entier) Dbut ResSomme nombre1 + nombre2 Fin La traduction javascript serait donc la suivante :
<html> <head> <title> Tests sur les fonctions </title></head> <body> <script language = "javascript"> // description de la procdure function procSomme(var1,var2, resSomme) {resSomme = var1 + var2;} var res ; // appel de la procdure procSomme (2,4,res) ; document.write(resultat = + res + <br> ); // affichage du rsultat </script> </body> </html> Quand on teste, on voit que le rsultat est undefined, ce qui signifie que res na pas de valeur dfinie lextrieur du sous-programme. Donc, les modifications que cette variable a subies lintrieur du sous-programme ne sont pas rpercutes lextrieur du sous-programme.
Alors, bigre, comment va ton sen sortir ? Eh bien quand on voudra avoir des variables en donnes modifies, il faudra les mettre dans un tableau, ou crer un objet. On ne verra pas pour notre part la cration dobjets, mais on a vu les tableaux et on va rcrire notre procdure procSomme en mettant notre variable res dans un tableau.
<html> <head> <title> Pas dide pour le titre </title></head> <body> <script language = "javascript"> // description de la procdure function procSomme(var1,var2, resSomme) {resSomme[0] = var1 + var2;} res = new Array(); // appel de la procdure procSomme (2,4,res) ; document.write(resultat = + res[0] + <br> ); </script> </body> </html>
8 3950 TG PA 00
145
Squence 3
Testez... a marche, et en plus, a ne mange pas de pain. Tiens, a ne mange pas de pain, cest pareil que les cuillers pots, a. videmment quune fonction a ne va pas manger de pain. .... Quoique Quoique (Raymond Devos, de lAcadmie franaise).
Et le mode de passage des paramtres alors ?

Comme je vous lai dj dit plus haut, mis part les tableaux et les paramtres qui sont passs par rfrence (mode de passage quivalent au mode de passage par adresse), les paramtres sont passs par valeur. Ce qui implique que lorsquon passe un objet (soit un objet prdfini comme document , form, soit un objet quon aura cr nous-mme, ce quon napprendra pas faire ici) ou un tableau en paramtre une procdure, et que cet objet ou ce tableau est modifi dans la procdure, les modifications quil subit lintrieur de la procdure sont rpercutes dans le programme appelant. Cela implique aussi que les modifications subies par un paramtre simple (comme une variable) dans une procdure ne sont pas rpercutes lextrieur de la fonction.
Et le nombre de rsultats renvoys ?

Ben un rsultat, comme en algo, si on a employ le mot cl return. Si, par contre, il ny a pas de mot cl return, et quon a donc crit une procdure, et quon a pass des paramtres de type objet ou tableau, et quils sont modifis dans la procdure, ils seront aussi modifis lextrieur, a fait donc autant de rsultats que de paramtres passs par rfrence.
Une fonction doit-elle obligatoirement avoir au moins un paramtre ?

Cest une bonne question que je me remercie de mtre pose. Non, une fonction peut avoir de 0 255 paramtres. Mais comme parmi ces paramtres, il peut y avoir des tableaux, on peut donc passer un nombre important de paramtres. Voil, cette fois, on a vu toutes les notions de base concernant le langage. Maintenant, on va apprendre grer des cookies avec javascript, puis, aprs cet intermde pour le moins ptissier, nous allons faire voluer notre site laide des connaissances quon a acquises au cours de cette squence. Puis, ce sera la fin de ce premier cours dinitiation et on se retrouvera en deuxime anne pour la suite de nos palpitantes aventures.
9.la gestion des cookies

Ces petits fichiers trs utiles vous ont t prsents la squence 1. Je vous rappelle ici lessentiel les concernant.
9A. dfinition
Ce sont des petits fichiers texte, stocks sur le poste de linternaute, permettant de personnaliser son accs notre site en conservant des informations dune connexion lautre. Ils permettent aussi de conserver certaines informations dune page consulte lautre dun mme site, car les variables javascript ne peuvent pas tre transmises dune page lautre. Les paramtres obligatoires dun cookie sont son nom et sa valeur (comme pour une variable en fait), ses paramtres optionnels sont sa date dexpiration, son chemin, son domaine de validit.
8 3950 TG PA 00
146
Squence 3
La valeur dun cookie : cest une chane de caractres. La date dexpiration : si on ne lindique pas, le cookie sera dtruit la fermeture du navigateur. Le chemin : si on ne le prcise pas, le cookie ne sera accessible que depuis le rpertoire de la page accde ainsi que depuis les ventuels sous-rpertoires de ce rpertoire. Si on prcise un autre chemin, le cookie sera accessible depuis le rpertoire indiqu dans ce chemin, ainsi que depuis les ventuels sous-rpertoires de ce rpertoire. Le domaine : il permet de prciser le serveur sur lequel le cookie est accessible.
Remarques importantes
Tout cookie appartient un seul site. Ce site est le seul connatre ses cookies. i linternaute consulte un site, et que sur la machine de cet internaute, il existe des cookies S appartenant ce site, tous les cookies de ce site sont transmis au serveur chaque fois que la machine de linternaute envoie une requte http au serveur hbergeant le site consult. En javascript, on accde un cookie (cest--dire quon le cre, quon y lit et quon y crit) laide dun objet document.cookie.
9B. Cration, lecture dun cookie

La syntaxe de cration dun nouveau cookie est la suivante:
document.cookie = "nomDuCookie = valeurDuCookie"

Tous les cookies correspondant un objet document (la page courante) sont rangs dans lobjet document.cookie, qui a la forme suivante :
"nomDuPremierCookie = valeurDuPremierCookie ; nomDuSecondCookie = valeurDuSecondCookie ;.; nomDuNimeCookie = valeurDuNimeCookie"

Pour prciser le chemin dun cookie lors de sa cration, afin de dterminer sa visibilit (cest--dire en fait quelles pages du site sont autorises accder au cookie), on utilise le mot-cl path. Pour quun cookie soit visible par toutes les pages dun site, il faut crire :
document.cookie = "nomDuCookie = valeurDuCookie ; path=/"

Pour lire un cookie particulier, puisquils sont tous dans lobjet document.cookie la suite les uns des autres, on doit rechercher son nom et rcuprer sa valeur dans lobjet document.cookie. Comme lobjet document.cookie se comporte comme une chane de caractres, on peut utiliser des fonctions comme sous-chane (substring en javascript), longueur (length en javascript)...
9C. Ce quil faut faire pour se faciliter notre vie de dveloppeur

Il faut vous crer un fichier dextension .js, que vous intgrerez toutes les pages utilisant des cookies. Ce fichier, appelons-le gestionCookies.js, contiendra des fonctions permettant de grer facilement les cookies de tout document. Ce fichier est une bibliothque de fonctions permettant de grer les cookies. En fait, cette bibliothque de fonctions existe dj. Elle a t mise dans le domaine public (cest-dire que tout le monde a le droit de lutiliser) par un informaticien (ben oui, pas un pharmacien,
8 3950 TG PA 00
147
Squence 3
cest idiot ce que je viens dcrire), Bill Dortch. Cette bibliothque de fonctions javascript est un fichier dextension .js permettant une gestion complte des cookies en javascript (cration, lecture, suppression...). Vous trouverez cette bibliothque sur le net ent tapant Bill Dortch javascript dans un moteur de recherche. Mais avant de nous contenter dutiliser les fonctions de quelquun dautre, je vous propose den crire deux toutes simples : une permettant de crer un cookie (cest--dire de lajouter dans lobjet document.cookie), et lautre permettant daccder un cookie dans lobjet document. cookie (cest--dire de le lire). Nous essayerons ensuite dappeler ces fonctions afin de voir ce que a donne. Ensuite, dans le paragraphe suivant, nous utiliserons des cookies (au moins un) pour transmettre des informations dune page une autre de notre site. Dacc ? Oui, dacc.
9D. Fonctions de cration et de lecture dun cookie

Allez la premire fonction. Cette fonction, lorsquon lappelle, a pour effet de rajouter un cookie dans lobjet document. cookie, ce cookie ayant pour nom le paramtre nomDuCookie, et ayant pour valeur le paramtre valeurDuCookie.
function ajouterCookie(nomDuCookie, valeurDuCookie) { document.cookie = nomDuCookie + "=" + valeurDuCookie; }

La seconde fonction permet, elle de lire un cookie, cest--dire de rcuprer sa valeur partir de son nom, pass en paramtre la fonction. Avant de vous prsenter le code de cette fonction qui lit un cookie, je souhaite vous prsenter certaines fonctions de manipulation des chanes de caractres que je nai pas eu loccasion de vous prsenter jusqu prsent. Ces fonctions de manipulation de chanes de caractres sont des mthodes cest--dire quelles ont t dcrites pour des objets de la classe String. La syntaxe dutilisation de ces fonctions est donc nomDeLaChaine.nomDeLaMthode. Dans les objets de la classe String, comme dans les chanes de caractre en algo, on peut accder chaque caractre via son indice dans la chane. La seule diffrence avec lalgo rside dans le fait que le premier caractre dune chane maChaine est lindice 0 (zro) et le dernier caractre lindice longueur(machaine) 1. La mthode indexOf : cette mthode est une fonction qui retourne la position de dbut de la chane de caractre passe en paramtre. Exemple : soit maChaine un objet de la classe String. Supposons que maChaine contienne "Salut les tudiants du cned". Soit lappel de fonction suivant : var res = maChaine.indexOf("les"); Aprs cet appel, la variable res vaudra 6 car la chane les commence la 7e position dans la chane maChane.
8 3950 TG PA 00
148
Squence 3
Une autre utilisation de la mthode indexOf : si, en second paramtre, on indique un indice de dbut de recherche la mthode indexOf, alors la recherche commence partir de cet indice. Le rsultat renvoy, lui, par contre, est la position de dbut de la chane passe en paramtre depuis le dbut de la chane sur laquelle on appelle la mthode indexOf. Euh... Vous me suivez l ? Exemple : je reprends la variable maChaine de lexemple du dessus. Elle vaut toujours Salut les tudiants du cned. Lappel var autreRes = maChaine.indexOf("a", 1) renvoie la valeur 1. En effet, la recherche commence partir du deuxime caractre (caractre dindice 1 dans maChaine), et, comme par hasard, partir du deuxime caractre, quand on recherche "a", il est lindice1 dans maChaine (le deuxime caractre de "Salut les tudiants du Cned" est "a"). Maintenant, si mon appel devient var autreRes = maChaine.indexOf("a", 3), le rsultat renvoy est 15 car, quand on recherche "a" partir du 4e caractre (cest--dire partir du caractre dindice 3), on le trouve lindice 15 de maChaine (cest le 16e caractre).
Remarque
si le caractre recherch ne figure pas dans la chane, la fonction indexOf renvoie la valeur1. La mthode length : cest une fonction qui renvoie la longueur de la chane sur laquelle elle est appele. Exemple : lappel maChaine.length renvoie 27. La mthode subString : cest notre brave fonction sous-chaine de lalgo. Deux utilisations possibles : En indiquant lindice de dbut de lextraction, au quel cas le rsultat sera une chane contenant tous les caractres de la chane source partir de lindice spcifi. Exemple : maChaine.substring(10) renvoie la valeur tudiants du cned. En indiquant lindice de dbut et lindice de fin de la copie, auquel cas, le rsultat sera une chane contenant les caractres de la chane source se situant entre lindice de dbut et lindice de fin. Exemple : maChaine.substring(10, 18) renvoie la valeur tudiant , sans s. Sans s signifie que le caractre de lindice de fin est exclu de lextraction. Revenons notre fonction qui sait rcuprer la valeur dun cookie partir de son nom. Vl lcode, jlai comment : function lireCookie(nomDuCookie) { // La variable posNom contiendra la position de dbut du nom du cookie // La variable posDebutValeur contiendra la position de dbut de la valeur du cookie // La variable posFinValeur contiendra la position de fin de la valeur du cookie // La variable valeur contiendra la valeur du cookie var posNom, posDebutValeur, posFinValeur, valeur;
8 3950 TG PA 00
149
Squence 3
/* on rcupre dans la variable posNom, laide de la mthode indexOf la position du premier caractre du nom du cookie */ posNom = document.cookie.indexOf(nomDuCookie); /* partir de la position du premier caractre du nom du cookie, et de la longueur du nom du cookie, on calcule la position du premier caractre de la valeur */ posDebutValeur = posNom + nomDuCookie.length + 1; /* On calcule maintenant la position du prochain point virgule, qui permet de dterminer la position du dernier caractre de la valeur du cookie */ posFinValeur = document.cookie.indexOf(";", posDebutValeur); /* Si on na pas trouv de point virgule, cest quon est la fin du cookie */ if (posFinValeur == -1) /* Dans ce cas, on rcupre la sous-chane partir de posDebutValeur jusqu la fin de la chaine */ valeur = document.cookie.substring(posDebutValeur); /* sinon, cest--dire si on a trouv un point virgule */ else /* on rcupre la sous-chane se situant entre posDebutValeur et finDebutV leur */ valeur = document.cookie.substring(posDebutValeur, posFinValeur); /* on renvoie la valeur au programme appelant */ return valeur; } Bon, il ne nous reste plus qu appeler nos deux petites fonctions de cration et de lecture pour comprendre comment a marche. Pour mieux se rendre compte quoi servent les cookies, on va crer deux pages : une o on cre le cookie et qui comporte un lien sur lautre page, et lautre qui lit et affiche le cookie. Pour transmettre une information dune page lautre, les cookies sont LA solution. Allez, cest pppppparti pour la premire page!!!
8 3950 TG PA 00
150
Squence 3
Elle sappelle creationCookie.html
<html> <head> <title> Cration du cookie </title></head> <body> <script language = "javascript"> function ajouterCookie(nomDuCookie, valeurDuCookie) { document.cookie = nomDuCookie + "=" + valeurDuCookie + ";path=/"; alert("Merci, votre saisie a t prise en compte"); } </script> Saisissez votre nom : <input type = "text" name = "nom" maxlength = "30" > <br> <button type = "button" name = "monBouton" onClick = "ajouterCookie (cookieNom, nom.value)" > Valider </button> <br> <a href = "lectureCookie.html"> Accder la page suivante </a> </body> </html>
Bon, vous voyez bien ce qui se passe quand vous testez. Cette fentre est simple, alors inutile de lexpliquer en long, en large ou en travers. Pour linstant, on a une erreur sur le lien, puisquon na pas encore cr la page rfrence. Note : jaurais pu me fatiguer un peu plus et mettre un test, pour ne crer le cookie que si un nom a bien t saisi petite flemme... La deuxime page sappelle lectureCookie.html
<html> <head><title> Lecture du cookie </title></head> <body> <script language = "javascript"> function lireCookie(nomDuCookie) { var posNom, posDebutValeur, posFinValeur, valeur; posNom = document.cookie.indexOf(nomDuCookie); posDebutValeur = posNom + nomDuCookie.length + 1; posFinValeur = document.cookie.indexOf(";", posDebutValeur); if (posFinValeur == -1) valeur = document.cookie.substring(posDebutValeur); else valeur = document.cookie.substring(posDebutValeur, posFinValeur); return valeur; } // fin de la fonction document.write (Re-bonjour + lireCookie("cookieNom") + , content que tu sois toujours avec nous); </script> </html>
8 3950 TG PA 00
151
Squence 3
Attention, si vous faites des essais successifs pour cause de bugs. Pensez bien fermer votre explorateur entre chaque test afin que le cookie prcdemment cr soit dtruit. Bon, ben voil pour les kouqui.
10.Et si on compltait notre site avec ce quon a appris ?

Avec tout ce quon a vu, on a vraiment de quoi faire : avec vous, ici, je vais juste aborder un point quon na pas abord, le contrle des saisies avant envoi dun formulaire. On peut, avant denvoyer (mme pour de faux), le formulaire rempli, contrler que linternaute a bien renseign les zones obligatoires. On va voir deux exemples. Dans aucun des deux, je nai utilis lvnement onSubmit de la balise form pour y dcrire les traitements de contrle. Pourquoi ? Parce que submit envoie le formulaire au serveur sans tenir compte des contrles de saisie. On utilise submit quand on ne fait pas faire les contrle par la machine cliente, mais par le serveur, ce qui nest pas notre but ici. De mme, je nai pas mis les traitements de contrle dans lvnement onClick dun bouton submit , car le formulaire est automatiquement envoy au serveur lorsquon utilise ce type de bouton. En fait, avec un bouton submit les contrles sont bien effectus, mais le formulaire est quand mme envoy mme si ces contrle ne sont pas satisfaisants.
10A. Contrle de saisie dans le formulaire de la squence 2

Celui-l, on la construit au cours du paragraphe sur les formulaires, il ressemble peu prs a:
On va juste faire un contrle, gnralisable tous les contrles du formulaire : si la zone o linternaute doit saisir son mot de passe est vide lors du clic sur le bouton envoyer, on le signale linternaute, sinon, on envoie le formulaire.
8 3950 TG PA 00
152
Squence 3
Voici le code, jai mis en gras ce qui a chang par rapport la version de la squence 2.
<HTML> <body> <script language = "javascript"> function verif(form) { if (form.motdepasse.value == ) alert(Saisissez votre mot de passe); else form.submit(); } </script> <FORM ACTION = "http://adresse bidon" METHOD = "post" enctype = "html" NAME = "inscription" > Nom : <Input type="text" name="nom" maxlength=15> <br> Cochez si vous tes majeur : <Input type = "checkbox" name = "majeur" value = "vrai"> <br> Sexe : <BR> H: <Input type="radio" name="sexe" value="h"> F: <Input type="radio" name="sexe" value="f"> <br> Commentaires :<BR> <TEXTAREA COLS = 40 ROWS = 3 WRAP = "SOFT"> Mettez ici vos commentaires et ventuellement, votre adresse e-mail </textarea> <br> Je suis plus intress(e) par : <Select name="preference"> <option> les livres <option> les films <option> la musique </select> <br> <br> indiquez votre date de naissance : <Input type = "date" name = "dateNaiss" size = 8 > <br> Choisissez-vous un mot de passe (huit caractres) : <Input type = "password" name = "motdepasse" size = 8 maxlength = 8 > <br> <Input type = "reset" name = "monBoutonAnnuler" value = "Annuler"> <Input type = "button" name = "monBoutonEnvoyer" value = "Envoyer" onClick = "verif(this.form)"> </FORM> Je prendrai en compte votre inscription ds sa rception. </body> </html>
8 3950 TG PA 00
153
Squence 3
Quelques explications :
Vous avez srement vu que dans la description html de la page, jai remplac le bouton submit par :
<Input type = "button" name = "monBoutonEnvoyer" value = "Envoyer" onClick = "verif(this.form)">

cest dans lvnement onClick de ce bouton que jappelle la fonction verif, qui contrle la saisie du mot de passe. Expliquons le code de la fonction verif.
function verif(form) { if (form.motdepasse.value == ) alert(Saisissez votre mot de passe); else form.submit(); }

Ce code est assez simple (un peu trop peut-tre, ce qui ne le rend pas trs professionnel, mais on est l pour apprendre). Si le mot de passe est vide, alors un message lindique linternaute. Sinon, le formulaire pass en paramtre la fonction verif est envoy par appel de la mthode submit ladresse spcifie dans lattribut action de la balise form. Quand on teste notre page, si le mot de passe a t renseign, le navigateur essaie daccder la ressource spcifi dans lattribut action. Nous, a nous gnre une erreur parce quon a indiqu une adresse http bidon, mais on constate lessentiel : le formulaire est envoy.
10B. Contrle de saisie dans le formulaire construit dynamiquement

Vous savez, cest le formulaire quon construit partir de la saisie par linternaute de ses artistes prfrs. Cet exemple est intressant, car il faut aussi mettre les instructions javascript dans des instructions document.write, ce qui nous oblige jongler quelque peu avec les simples quotes, les doubles quotes La seule partie du code source concerne par la modification est la fonction saisieArtiste. Je vous remets donc simplement la partie de code modifie, et jai mis en gras les modifs. Rappel : mme si, ci-dessous, certaines instructions document.write stalent sur plusieurs lignes, dans notre code source, elles doivent tre crites sur une seule ligne.
<html> <head> <title> Parlez-nous de vos gots, cher visiteur </title> <script language = javascript> function saisieArtistes() {
8 3950 TG PA 00
154
Squence 3
var nbArtistes = 0; for (artisteSaisi = prompt(Saisissez un artiste (* pour terminer),);artisteSaisi != *; artisteSaisi = prompt(Saisissez un artiste (* pour terminer),)) { nbArtistes ++; if (nbArtistes == 1) { document.write(<table border = 1>); document.write(<TR> <TD> Ordre de prfrence </TD> <TD> Artiste </TD>); } document.write(<TR> <TD> + nbArtistes + </TD> <TD> + artisteSaisi + </TD> </TR>); } // fermeture de la table document.write(</table>); if (nbArtistes > 0) { document.write(<form name = monFormulaire action =adresse bidon method = POST>); document.write(Saisissez votre adresse e-mail : <input type = text name = email Value = e-mail> <br>); document.write(<button name = monBoutonEnvoyer onClick=if (email.value == \email\) alert(\zone non renseigne\); else monFormulaire.submit() ;> Envoyer </ button>); document.write(</form>); } else history.back(); } // la suite du code ne change pas
Linstruction qui nous intresse ici, cest, bien sr
document.write(<button name = monBoutonEnvoyer onClick=if (email.value == \email\) alert(\zone non renseigne\); else monFormulaire.submit() ;> Envoyer </ button>);
Vous constatez que jai remplac le bouton submit par un bouton normal, et que les instructions de contrle sont dans lvnement onClick de ce bouton. Expliquons pas pas ces instructions de contrle. if (email.value == \e-mail\). Cette instruction nest pas complique en soi. La question qui se pose cest pourquoi mettre des \ devant chaque quote encadrant la chane de caractre e-mail ? 155
8 3950 TG PA 00
Squence 3
Si je mets des simples quotes, comme, dans mon instruction document.write, jindique entre simples quotes ce qui est crire sur la page, si je ne mets pas les \ pour encadrer la chane e-mail, javascript comprendra que linstruction quil doit excuter est la suivante : document.write(<button name = monBoutonEnvoyer onClick=if (email.value == \ et il va gnrer une erreur car, selon son interprtation, il manque la parenthse fermante. Maintenant, si jencadre ma chane e-mail avec des doubles quotes, sans mettre d\, le navigateur va comprendre que, lors du clic sur le bouton, je lui demande dexcuter linstruction suivante : if (email.value == \ Cette instruction tant incorrecte, le navigateur me gnre un message derreur. Le problme est le mme pour la chane de caractres passe en paramtre la procdure alert. Testez cette page. Bon, a marche. La cration dynamique nous donne la page suivante :
Si je ne renseigne pas mon e-mail, jai le message suivant qui saffiche lorsque je clique sur le bouton envoyer :
Si je renseigne mon e-mail, lorsque je clique sur Envoyer, jai un message derreur qui me dit que le navigateur ne trouve pas la page demande, ce qui est normal, puisquon a indiqu une adresse bidon. Maintenant, ce qui est intressant, cest dafficher le code source de cette page que lon gnre dynamiquement (pour faire a, dans internet explorer, je choisis, dans le menu Affichage, loption de menu Source).
8 3950 TG PA 00
156
Squence 3
Voici le code source qui saffiche, mais sur une seule ligne :
<table border = 1><TR> <TD> Ordre de prfrence </TD> <TD> Artiste </TD></TR><TR> <TD>1</TD> <TD>p</TD> </TR></table><form name = monFormulaire action =adresse bidon method = POST>Saisissez votre adresse e-mail : <input type = text name = email Value = e-mail> <br><button name = monBoutonEnvoyer onClick=if (email.value == e-mail) alert(zone non renseigne); else monFormulaire.submit() ;> Envoyer </ button></form>
Pourquoi ce code se trouve sur une seule ligne ? Parce que jai utilis linstruction document.write pour gnrer le code source de cette page. part a, dans ce code source, on retrouve bien tout ce qui a t tap dans les instructions document.write. Aprs avoir trouv ce code, qui fonctionne mais ne me plat gure (je ne le trouve pas trs joli), je me suis dit quil fallait essayer de lamliorer
Tentatives damliorations
Dabord, cette ligne trop longue, a mnerve. Alors jai essay de la couper. Jai remplac la ligne :
document.write(<button name = monBoutonEnvoyer onClick=if (email.value == \email\) alert(\zone non renseigne\); else monFormulaire.submit() ;> Envoyer </button>);
Par les lignes :
document.write(<button name = monBoutonEnvoyer ); document.write(onClick=if (email.value == \e-mail\) ); document.write(alert(\e-mail non renseign\); ) document.write(else monFormulaire.submit() ;> Envoyer </button>);
a a march : jutilise 4 instructions document.write pour dcrire mon bouton, elles sont mises bout bout comme si ctait une seule. Bon, cest dj mieux. Par contre, quand on affiche le code source de la page gnre, on a toujours tout le code gnr sur une seule ligne. Alors jai remplac la plupart des instructions document.write par des instructions document. writeln. a donne le code source suivant, jai mis en gras les instructions modifies.
<head> <title> Parlez-nous de vos gots, cher visiteur </title> <script language = javascript> function saisieArtistes() { var nbArtistes = 0; for (artisteSaisi = prompt(Saisissez un artiste (* pour terminer),);artisteSaisi != *;
8 3950 TG PA 00
157
Squence 3
artisteSaisi = prompt(Saisissez un artiste (* pour terminer),)) { nbArtistes ++; if (nbArtistes == 1) { document.writeln(<table border = 1>); document.writeln(<TR> <TD> Ordre de prfrence </TD> <TD> Artiste < / T D > < / TR>); } document.writeln(<TR> <TD> + nbArtistes + </TD> <TD> + artisteSaisi + </ TD> </TR>); } // fermeture de la table document.writeln(</table>); if (nbArtistes > 0) { document.writeln(<form name = monFormulaire action =adresse bidon method = POST>); document.writeln(Saisissez votre adresse e-mail : <input type = text name = email Value = e-mail> <br>); document.write(<button name = monBoutonEnvoyer ); document.writeln(onClick=if (email.value == \e-mail\) ); document.writeln(alert(\e-mail non renseign\); ) document.writeln(else monFormulaire.submit() ;> Envoyer </button>); document.writeln(</form>); } else history.back(); } </script> </head> // etcetcla suite ne change pas
Je teste. Ca donne a :
8 3950 TG PA 00
158
Squence 3
La page gnre par notre code a dsormais le code source suivant, plus lisible que quand tout est bourr sur une seule ligne :
<table border = 1> <TR> <TD> Ordre de prfrence </TD> <TD> Artiste </TD></TR> <TR> <TD>1</TD> <TD>Ringo</TD> </TR> <TR> <TD>2</TD> <TD>Gantal Choya</TD> </TR> <TR> <TD>3</TD> <TD>Ernestine Lastar</TD> </TR> </table> <form name = monFormulaire action =adresse bidon method = POST> Saisissez votre adresse e-mail : <input type = text name = email Value = email> <br> <button name = monBoutonEnvoyer onClick=if (email.value == e-mail) alert(e-mail non renseign); else monFormulaire.submit() ;> Envoyer </button> </form>
E nsuite, je me suis dit : Tout ce code directement dans onClick, cest cradouille quand-mme. On va faire une fonction. Alors jai crit, sur une seule ligne :
document.write(<button name = monBoutonEnvoyeronClick = verif(monFormulaire)> Envoyer </button>);

Et puis, juste en dessous de la fonction saisieArtistes, juste avant la balise </script>, jai crit la fonction verif que jappelle dans mon onClick :
function verif(form) { if (form.email.value == e-mail) alert(E-mail non renseign); else form.submit(); }

Je teste mon nouveau code source. Arggggh !! Bouououhhhhouououh ! Sniff !!! a marche pas
Pourquoi a ne marche pas ?

Parce que, le code source de la page tant construit dynamiquement, le code source de la fonction doit ltre aussi, dans le nouveau document que lon cre laide de document.write. Pour linstant, nous crivons le code de la fonction dans une page, et appelons la fonction dans celle qui est construite dynamiquement. Le navigateur ne trouve donc pas la fonction. La solution consisterait crire dynamiquement la fonction dans la page construite dynamiquement. Une meilleure solution consisterait crire la fonction dans un fichier .js et intgrer ce fichier .js dans le document cr dynamiquement. Je vous dtaille ces deux solutions ci-aprs. 159
8 3950 TG PA 00
Squence 3
V oici la premire des deux solutions. Jy cris le code de la fonction de manire ce quil se trouve dans la page que lon gnre dynamiquement, laide de document.writeln.
<html> <head> <title> Parlez-nous de vos gots, cher visiteur </title> <script language = javascript> function saisieArtistes() { // compteur dartistes var nbArtistes = 0; for (artisteSaisi = prompt(Saisissez un artiste (* pour terminer),);artisteSaisi != *; artisteSaisi = prompt(Saisissez un artiste (* pour terminer),)) { nbArtistes ++; if (nbArtistes == 1) { // construction du dbut du tableau document.writeln(<head>); document.writeln(<script>); document.writeln(function verif(form) {if (form.email.value == \e-mail\) alert(\Mot de passe non renseign\); else form.submit();}); document.writeln(<\/script>); document.writeln(</head>); document.writeln(<body>); document.writeln(<table border = 1>); d ocument.writeln(<TR> <TD> Ordre de prfrence </TD> <TD> Artiste </TD></TR>); } d ocument.writeln(<TR> <TD> + nbArtistes + </TD> <TD> + artisteSaisi + </ TD> </TR>); } // fermeture de la table document.writeln(</table>); if (nbArtistes > 0) { // On complte la page avec une zone pour saisir lemail et un bouton pour envoyer le // formulaire document.writeln(<form name = monFormulaire action =adresse bidon method = POST>);
8 3950 TG PA 00
160
Squence 3
document.writeln(Saisissez votre adresse e-mail : <input type = text name = email Value = e-mail> <br>); document.writeln(<button name = monBoutonEnvoyer onClick=verif(this.form)> Envoyer </button>); document.writeln(</form>); } else history.back(); document.writeln(</body>); } </script> </head> // etcetc la suite ne change pas
Parlons un peu des modifications apportes notre code source. Comme tout code javascript doit tre plac entre les balises <head> et </head> ou bien les balises <body> et <body>, dans la page que nous construisons dynamiquement, je rajoute les balises <head> et </head> laide des instructions : document.writeln(<head>); et document.writeln(</head>);
Ensuite, dans cette page construite dynamiquement, entre les balises <head> et </head>, il doit y avoir les balises <script ..> et </script>. Cest pourquoi jai rajout les instructions :
document.writeln(<head>); document.writeln(<script>); // Cest entre ces deux balises que je vais rajouter le code source de la fonction verif document.writeln(<\/script>); document.writeln(</head>);
Enfin, je rajoute le code source de la fonction verif, ce qui nous donne le bloc de code suivant :
document.writeln(<head>); document.writeln(<script>); document.writeln(function verif(form) {if (form.email.value == \e-mail\) alert(\Mot de passe non renseign\); else form.submit();}); document.writeln(<\/script>); document.writeln(</head>);
Sur le mme principe, jai rajout, dans la page que nous construisons dynamiquement, les balises <body> et </body>. Elles sont optionnelles. Pour vous en persuader, il vous suffit de mettre en commentaires les instructions ayant pour rle de rajouter ces deux balises, comme a
8 3950 TG PA 00
161
Squence 3
// document.writeln(<body>); ..... // document.writeln(</body>); // dans ce cas, les balises <body> et </body> ne figureront pas dans le document // que nous construisons dynamiquement.
de tester notre page et dafficher le code source de la page que nous gnrons dynamiquement. Vous pouvez constater quon ny voit pas de balises <body> et </body>. Certain(e)s se demandent peut-tre pourquoi, quand on rajoute la balise fermante </script> laide de linstruction document.writeln, on est oblig de faire prcder le / dun \. En effet, pour que la balise fermante </script> sinscrive correctement dans le document que nous gnrons dynamiquement, on doit crire document.writeln(<\/script>);. Pourquoi ne peut-on pas crire tout simplement document.writeln(</script>); ? Tout dabord, essayons denlever ce fameux \ et regardons ce que a donne. Dans le code source, je remplace : document.writeln(<\/script>); par : document.writeln(</script>); Ae, ae, quel carnage quand je raffiche ma page ! ! Vous aussi ? Par contre, si la place, jcris: document.writeln(<+/script>); L, a fonctionne. Ce qui est bizarre, cest que linstruction document.writeln(</table>); ne pose pas de problme, de mme que linstruction document.writeln(</head>);. Donc, cest, seule, linstruction document.writeln(</script>); qui pose problme si on la laisse comme a. Pourquoi ? Eh bien, quand on crit document.writeln(</script>);, ce que voit javascript, cest, dune part, document.writeln(, qui est une instruction incorrecte, et dautre part </script>, qui est lindicateur de fin de script, do ce carnage si on ncrit pas document.writeln(<\/script>); ou document.writeln(<+/script>); (cette dernire solution est rigolote, elle consiste tromper linterprteur javascript sur ce quil lit. En effet, comme le < et le / ne sont pas colls, il ne voit pas que cest crit </script>, le bougre ! !). Pour finir lexplication de cette version de notre page, il ne reste plus qu prciser que linstruction document.writeln(<button name = monBoutonEnvoyer onClick=verif(this.form)>
8 3950 TG PA 00
162
Squence 3
Envoyer </button>); permet de faire en sorte que la fonction verif soit appele lorsque linternaute clique sur le bouton Envoyer. On peut galement rajouter une dernire remarque. On peut tout fait remplacer : if (form.email.value == \e-mail\) alert(\Mot de passe non renseign\); par : if (form.email.value == e-mail) alert(Mot de passe non renseign); au cas o il sen trouve parmi vous qui naiment pas les \. Passons maintenant la dernire solution, celle o on utilise un fichier .js dans lequel se trouve la fonction verif. En repartant de la solution prcdente, il suffit de remplacer les lignes : document.writeln(<script>); document.writeln(function verif(form) {if (form.email.value == \e-mail\) alert(\Mot de passe non renseign\); else form.submit();}); document.writeln(<\/script>); par la ligne : document.writeln(<script language = javascript src = verifier.js><\/script>);. Ensuite, il faut crer le fichier verif.js, dans lequel figurera le code source de la fonction verif, comme a :
function verif(form) { if (form.email.value == e-mail) alert(E-mail non renseign); else form.submit(); }

On enregistre ce fichier verif.js au mme endroit que notre page, et zou, on teste !! Gruute (juron sudois, quivalent de zut, mais comme je jure pas mal, jessaie de varier), a ne fonctionne plus. Et cest l quil faut faire trs attention : ceux et celles qui utilisent un autre navigateur quinternet explorer se disent mais si a fonctionne !!, celles et ceux qui utilisent internet explorer se disent elle a raison, a ne fonctionne pas. Pourquoi ? Pour comprendre, remplacez le message E-mail non renseign par le message E-mail non renseigne, testez, a marche !! Cest un collgue qui ma donn un coup de main, car moi non plus je ne comprenais pas.
8 3950 TG PA 00
163
Squence 3
Alors voil lexplication : internet explorer ne sait pas grer les accents dans les fichiers javascript externes. Pour que a fonctionne, il faut donc : remplacer nos messages avec accents par des messages sans accent, genre Renseignez votre e-mail, mais ce nest pas toujours facile; remplacer les caractres accentus par leur code html, dans notre cas, le message devient E-mail non renseign&acute. Voil, jen ai fini avec la mise au point sur cette partie concernant lcriture des contrles de saisie laide de javascript.
10C. Quest-ce quon pourrait faire dautre ?

On pourrait aller faire une bonne sieste au soleil, ou faire des courses, ou bien... Non, mais je veux dire : dans les concepts vus prcdemment, quels sont ceux quil serait bon que les tudiants du cned rinvestissent dans leur site ? Ah! Bon... Le truc sur les cookies, quon a dvelopp sur deux pages de tests, ils peuvent le reprendre et lutiliser sur deux pages du site. Par exemple, ils peuvent inviter linternaute saisir son prnom et son nom ds la page daccueil, ranger a dans deux cookies, et aller lire ces cookies lorsque, sur les autres pages, ils ont besoin du nom et/ou du prnom. Dans le formulaire de saisie des coordonnes quon a retravaill au paragraphe 10, ils peuvent mme mettre directement le nom et le prnom de linternaute en allant lire les bons cookies, en crivant des instructions du genre :
nom.value = document.lireCookie( "cookieNom");

Oui, cest une bonne ide a. Merci On les laisse faire ? Oui, on les laisse faire. Maintenant, ils ont besoin de rinvestir leurs connaissances, et de manipuler.
11.Une petite conclusion

Bien, vous avez atteint la fin de ce support de cours (1re anne) sur la programmation web. Vous avez t initis aux bases, et cest dj pas mal, hein!!! Je flicite les courageuses et les courageux qui sont arrivs jusquici. a leur ouvre les portes du monde merveilleux du support de cours 2e anne de POW. Je sens que cela les comble de bonheur... Lan prochain, nous aborderons, les langages de script serveur (pour faire des site dynamiques et des applications web), les feuilles de style, XML et quelques autres joyeusets qui vous permettront de parfaire vos connaissances en programmation web. Alors bonnes ouacances, et lan prochain pour la suite des aouantures du oueb. Et surtout, surtout , ne supprimez pas ce que vous avez cr au cours de ce fascicule, on sen resservira lan prochain. Notamment, on apprendra crire un programme sexcutant sur le serveur (un script serveur) et sachant extraire les donnes dun formulaire renvoy par linternaute. On se retrouve la rentre prochaine...
8 3950 TG PA 00
164

83950tgpa0007 03

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

83950tgpa0007 03

Uploaded by

Copyright:

Available Formats

Initiation Javascript

Utilisation de scripts clients

O Il ne faut pas confondre le langage javascript, avec le langage java.

1A. Utilit du javascript

1B. O crit-on les instructions javascript dans une page HTML ?

2.Code javascript entre <body> et </body>

2B. Le premier exemple

2C. Que nous apprend ce premier exemple ?

2D. Allez, un second exemple

2E. Que nous apprend ce second exemple ?

alert (monNombre vaut + monNombre);

alert (monNombre vaut + MonNombre);

2F. Allez, un dernier exemple pour la route

saisie = prompt("Saisissez votre prnom :", "Prnom");

saisie = prompt("Saisissez votre prnom :");

2G. Cet exemple, que nous apprend-il ?

Valeur = prompt ("Message de saisie", "valeur par dfaut")

2G2. La classe Window

document.write ("Vous vous appelez", saisie, ".<br>");

document.writeln ("Vous vous appelez", saisie, ".");

2G3. Mise en forme du texte Remarque

alert ("a par contre, \n cest du javascript.");

document.write("Dbut de la <br> partie javascript")

3.Code javascript entre <head> et </head>

3A. Syntaxe gnrale

4.Code javascript dans un fichier spar

4A. Syntaxe gnrale

var var var var

dateComplete = new Date(); minutes = dateComplete.getMinutes(); jour = dateComplete.getDate(); mois = dateComplete.getMonth() + 1;

Ce qui concentre les 8 lignes suivantes en 4.

4C. Cet exemple nous apprend beaucoup de choses, lesquelles ?

4C2. La classe Date

5.La gestion des vnements utilisateur

5A. Un premier exemple

5B. Que nous apprend ce premier exemple ?

<input nomDeLvnement = "nomDeLaFonctionAssocieALvnement ( )">

5C. De quels vnements dispose-t-on ?

5C1. Lvnement onClick

Dans lexemple prcdent, remplacez :

<input type = "button" value="Clique-moi" onClick="clicSurCliqueMoi()">

<IMG SRC = "imageTheme.jpg" onClick = "clicSurCliqueMoi()">

<IMG SRC = "imageTheme.jpg" onClick = "clicSurCliqueMoi()">

<input type = "radio" value = "Essai" onClick= "clicSurCliqueMoi()">

<a href = "lien bidon" onClick = "clicSurCliqueMoi()"> lien </a>

5C2. Lvnement onChange

<form > essai :

5C3. Lvnement onFocus

<Select name = "preference" onChange = "test()">

<Select name = "preference" onFocus = "test()">

<IMG SRC = "Nnuphars.jpg" onFocus = "test()">

<a href = "lien bidon" onFocus = "test ()"> lien </a>

5C4. Lvnement onBlur

<input type = "select" value = "Essai" onBlur = "test()">

<input type = "textarea" value = "Essai" onBlur = "test()">

<IMG SRC = "imageTheme.jpg" onBlur = "test()">

5C5. Lvnement onMouseOver

5C6. Lvnement onMouseOut

5C7. Lvnement onSelect

<input type = "textarea" value = "Essai" onSelect = "test()">

5C8. Les vnements onLoad et onUnLoad

<script language = "javascript"> function test() { alert("Evnement dclench") } </script>

5C9. Les vnements onReset et onSubmit

<form onReset <input type = <Input type = <Input type = </form>

O Il ne faut pas confondre le langage javascript, avec le langage java.