Techniques à Objets et Internet Le Web et sa programmation Jean-François Perrot Université Pierre et Marie Curie (Paris 6) Cours n 5 : Introduction à Javascript-3 Fonctions en Javascript Application à l'écriture des réflexes Jean-François Perrot JavaScript 3 1 Sommaire Fonctions et procédures : 3-13 load / unload : 14-19 radio : 20-25 check : 26-30 hidden : 31 select : 32-34 textarea : 35-36 Jean-François Perrot JavaScript 3 2 1
Fonctions & procédures en JavaScript En l'absence de typage, fonctions et procédures en Javascript sont uniformément déclarées comme function les fonctions renvoient un résultat (par return) ; les procédures n'en renvoient pas. Les arguments et les variables déclarées dans les fonctions sont locaux (inaccessibles hors du texte de la fonction). il en va différemment pour les variables déclarées hors des fonctions, quisont toutes globales. Les fonctions peuvent être récursives. On peut donc écrire factorielle (ô joie!) Les fonctions se déclarent de préférence dans l'en-tête de la page (elles sont naturellement appelées dans la partie du script située dans le corps de la page). Jean-François Perrot JavaScript 3 3 La mère de toutes les fonctions... <html> <head> <title>factorielle</title> function fac (n) { if ( n == 0 ) { return 1; else { return n*fac(n-1); </head> Déclaration dans l'en-tête......appel dans le corps de la page. <body> <p>debut</p> <p> var n = parseint(prompt("un _ nombre S.V.P.", "")); document.write("<h2>factorielle _ de "+n+" vaut "+fac(n)+"</h2>"); </p> <p>fin</p> </body> </html> Fac1.html Jean-François Perrot JavaScript 3 4 2
Essais Mais si par inadvertance on clique "cancel"... Tout va bien si on tape un entier... Jean-François Perrot JavaScript 3 5 Un test bien utile... Fonction d'utilité publique, déclarée dans un fichier "isint.js" Syntaxe : la longueur d'une chaîne xxx est donnée par xxx.length (et non pas xxx.length() comme en Java) le caractère d'indice k = charat(k) comme en Java l'opérateur " " désigne la disjonction logique ("ou") [et "&&" la conjonction ("et") ] comme en Java function isint(chaine) { var ch; if ( chaine == null chaine == "" ) { return false; for (i = 0; i < chaine.length; i++) { ch = chaine.charat(i); if ( ch < "0" ch > "9" ) { return false; return true; Jean-François Perrot JavaScript 3 6 3
Mise en œuvre du test <html> <head> <title>factorielle</title> <script type="text/javascript"> function fac (n) { if ( n == 0 ) { return 1; else { return n*fac(n-1); <script type="text/javascript" src="isint.js"> </head> <body> <p>debut</p> <p> var lu = prompt("un nombre entier S.V.P.", ""); var n; if (! isint(lu) ) { alert(lu + " n\'est pas un entier!"); else { n = parseint(lu); document.write("<h2>factorielle de "+ n + _ " vaut "+ fac(n) +"</h2>"); </p> <p>fin</p> </body> </html> Fac2.html Syntaxe : la négation logique s'exprime par l'opérateur "!" (comme en Java) Jean-François Perrot JavaScript 3 7 Essais (bis) Jean-François Perrot JavaScript 3 8 4
Répétition par récursion L'utilisation d'un appel récursif permet d'obtenir sans peine un effet de répétition. Pour cela, il faut donner un nom à l'action exécutée par le script, et donc définir une procédure ad hoc. Exemple de réalisation : on choisit de renvoyer dans un fichier fac.js la définition de la fonction fac (supposée d'intérêt général), à l'instar du test isint. la séquence d'instructions du corps de la page précédente devient la procédure faire (sans argument) déclarée dans l'en-tête de la nouvelle page. un appel récursif à faire est ajouté à l'alerte "pas un nombre!" Jean-François Perrot JavaScript 3 9 Réalisation : l'en-tête <html> <head> <title>factorielle</title> <script type="text/javascript" src="fac.js"> < /script> <script type="text/javascript" src="isint.js"> < /script> function faire() { var lu = prompt("un nombre entier S.V.P.", ""); var n; if (! isint(lu) ) { alert(lu + " n\'est pas un entier!\n Recommencez S.V.P."); faire(); //l'appel récursif, but de l'opération else { n = parseint(lu); document.write("<h2>factorielle de "+n+" vaut "+fac(n)+"</h2>"); < /script> </head> Fac3.html Jean-François Perrot JavaScript 3 10 5
Réalisation : le corps de la page <body> Debut <p> faire(); // un appel suffit! < /script> </p> Fin </body> </html> Jean-François Perrot JavaScript 3 11 Exercice JavaScript considère qu'une chaîne de chiffres commençant par 0 doit être interprétée comme la donnée d'un nombre en octal, ce qui entraîne une série de conséquences imprévues : Jean-François Perrot JavaScript 3 12 6
Exercice (suite) 1. Ajouter à la page "factorielle" (dernière version) un dialogue vérifiant que si la chaîne commence par 0, elle représente correctement un entier (pas de chiffre > 7), et si non, refuser la donnée et en demander une autre ; si oui, demander à l'utilisateur s'il confirme sa donnée en octal : dans l'affirmative, la traiter, dans la négative, en demander une autre. 2. Le test isint sous sa forme actuelle n'admet pas de blanc ni avant ni après la chaîne, ce qui peut conduire à des situations curieuses. Y remédier. Jean-François Perrot JavaScript 3 13 Les événements Load & UnLoad L'événement Load se déclenche lorsque la page a été entièrement chargée. L'événement UnLoad se déclenche au moment où l'utilisateur quitte la page (fermeture du navigateur ou ouverture d'une nouvelle page). Les handlers correspondants onload et onunload s'écrivent dans la balise <body...>. Exemple : EssaiLoad1.html <body onload="bonjour();" onunload="au_revoir();"> où les procédures Javascript bonjour et au_revoir sont définies dans l'en-tête... Jean-François Perrot JavaScript 3 14 7
Exemple avec Load & UnLoad : l'en-tête <html> <head> <title>essaiload</title> var nom; function bonjour() { alert("bonjour, cher(e) "+nom+"!\n" +"et bienvenue chez moi."); function au_revoir() { alert("au revoir, cher(e) "+nom+"!\n" +"et merci de votre visite."); </head> EssaiLoad1.html Jean-François Perrot JavaScript 3 15 Exemple avec Load & UnLoad : le corps de la page <body onload="bonjour();" onunload="au_revoir();"> <p>debut</p> <p> EssaiLoad1.html alert("la page va se charger..."); alert("la page se charge..."); nom = prompt("au fait, a qui ai-je l'honneur...?", "Votre nom _ S.V.P."); alert("enchante', cher(e) "+nom+"!"); </p> <p>fin</p> </body> </html> Jean-François Perrot JavaScript 3 16 8
Exemple avec Load & UnLoad : début Jean-François Perrot JavaScript 3 17 Exemple avec Load & UnLoad : milieu Load! Jean-François Perrot JavaScript 3 18 9
Exemple avec Load & UnLoad : fin UnLoad! Jean-François Perrot JavaScript 3 19 <input type="radio"...> alias "bouton-radio" ou radio button Rappel : Les "boutons-radio" vont par groupes portant le même nom mais des valeurs différentes. Chaque groupe correspond à un champ unique : les différents boutons servent à sélectionner une et une seule des valeurs proposées, qui est alors la valeur du champ. Par exemple : pour un champ nommé "couleur", on peut proposer un choix exclusif entre les valeurs rouge, orangé, jaune, vert, bleu, indigo et violet, par un jeu de 7 boutons radio. Il faut donc distinguer les propriétés et méthodes relatifs à chaque bouton de celles qui visent le groupe tout entier. Jean-François Perrot JavaScript 3 20 10
radio button suite Rappel : Le groupe se matérialise par un tableau de boutons, qui porte le nom (name) commun à tous ses membres. Le nombre de boutons est donc accessible par l'attribut length du tableau en question Chaque bouton radio a comme Propriétés defaultchecked (booléen) fixée dans la balise par la présence ou l'absence de l'attribut checked checked (booléen) modifiable par affectation value (chaîne) fixée dans la balise <input...value="unechaine"...> handlers d'événements : un seul onclick Méthodes : une seule click() simulant l'événement Click Jean-François Perrot JavaScript 3 21 Essai avec boutons radio : les couleurs <body> <p>debut</p> <form> <p> <input type= "radio" name="couleur" value="#ff0000" onclick="montrer(value);"/> Rouge<br /> <input type= "radio" name="couleur" value="#ff8000" onclick="montrer(value);"/> Orangé<br /> <input type= "radio" name="couleur" value="#ffff00" onclick="montrer(value);"/>jaune<br /> <input type= "radio" name="couleur" value="#00ff00" onclick="montrer(value);"/>vert<br /> <input type= "radio" name="couleur" value="#0000ff" onclick="montrer(value);"/>bleu<br /> <input type= "radio" name="couleur" value="#000080" onclick="montrer(value);"/>indigo<br /> <input type= "radio" name="couleur" value="#ff00ff" onclick="montrer(value);"/>violet </p> </form> <p>fin</p> </body> </html> Jean-François Perrot JavaScript 3 22 11
Essai avec boutons radio : l'affichage <html> <head> <title>essairadio</title> function montrer(clr) { document.write ('<span style="color:' + clr + '; font-size: 48pt; font-weight: bold;">démonstration</span>' ); </head> Mauvaise idée! Provoque l'ouverture d'un nouveau document. Sémantique imprécise... sans saut de ligne! Jean-François Perrot JavaScript 3 23 Essai avec boutons radio : variante <form> <p> <input type= "radio" name="couleur" value="#ff0000"/>rouge<br /> <input type= "radio" name="couleur" value="#ff8000"/> Orangé<br /> <input type= "radio" name="couleur" value="#ffff00"/>jaune<br /> <input type= "radio" name="couleur" value="#00ff00"/>vert<br /> <input type= "radio" name="couleur" value="#0000ff"/>bleu <br /> <input type= "radio" name="couleur" value="#000080"/>indigo<br /> <input type= "radio" name="couleur" value="#ff00ff"/>violet </p> <p> <input type= "button" value="choisissez" onclick="for ( i=0; i<couleur.length; i++ ) { if ( Couleur[i].checked ) { montrer(couleur[i].value); break; "> </p> </form> Jean-François Perrot JavaScript 3 24 12
Essai avec boutons radio : variante (suite) Jean-François Perrot JavaScript 3 25 <input type="checkbox"...> alias "case à cocher" ou checkbox Rappel : Propriétés : name (chaîne) fixée dans la balise <input...name="lenom"...> defaultchecked (booléen) fixée dans la balise par la présence ou l'absence de l'attribut checked checked (booléen) modifiable par affectation ou par Click value (chaîne) fixée dans la balise <input...value="unechaine"...> handlers d'événements : un seul onclick Méthodes : une seule click() simulant l'événement Click. Jean-François Perrot JavaScript 3 26 13
Emploi des cases à cocher Rappel : Les champs checkbox portent une double information leur valeur (chaîne), qui est transmise (au script CGI) si la propriété checked est vraie au moment de l'envoi ; cette valeur est fixée dans le texte html ; l'indicateur (booléen) checked, modifiable par Javascript(et par l'utilisateur : événement Click) et utilisable pour toute sorte de tests. Voici un exemple utilisant l'indicateur checked et où les propriétés valeur ne jouent aucun rôle. Jean-François Perrot JavaScript 3 27 Essai avec checkbox : le formulaire <body> <p>debut</p> <form> <p> <input type= "checkbox" name="red"/>rouge <br /> <input type= "checkbox" name="green"/>vert <br /> <input type= "checkbox" name="blue"/>bleu </p><p> Quand c'est fini cliquez... <input type= "button" value="ici" onclick='montrer(red.checked, Green.checked, Blue.checked);'> </p> </form> <p>fin</p> </body> </html> Jean-François Perrot JavaScript 3 28 14
Essai avec checkbox : l'affichage <html> <head> <title>essaicheck</title> function montrer(r, G, B) { var clr = ""; if (R) clr+="ff"; else clr+="00"; if (G) clr+="ff"; else clr+="00"; if (B) clr+="ff"; else clr+="00"; document.write ('<span style="color:' + clr + '; font-size: 48pt; font-weight: bold;">démonstration</span>' ); </head> Jean-François Perrot JavaScript 3 29 Essai avec checkbox : autre solution Si on donne le même nom à différents champs checkbox, ils seront regroupés en un tableau portant ce nom (à la manière des boutons radio). On peut alors exploiter ce tableau en bloc au lieu de s'intéresser aux cases individuellement. <form> <p> <input type= "checkbox" name="couleur">rouge <br /> <input type= "checkbox" name="couleur">vert <br /> <input type= "checkbox" name="couleur">bleu </p><p> Quand c'est fini cliquez... <input type= "button" value="ici" onclick='var c=""; for ( i=0; i<couleur.length; i++ ) { if ( Couleur[i].checked ) c += "FF"; else c += "00"; montrer(c);'> <!-- avec la fonction montrer(clr) de l'ex. radio --> </p></form> Jean-François Perrot JavaScript 3 30 15
<input type="hidden"...> alias "champ caché" ou hidden Rappel : Comme son nom l'indique, un champ caché n'est pas exhibé sur la page. À quoi peut-il servir? À contenir une information de service que l'utilisateur n'a pas à connaître (p.ex. une adresse sur le serveur) À contenir une valeur intermédiaire lors d'un calcul. Il n'a qu'une propriété (en plus de son nom) value, qui est une chaîne de caractères, aucun événement, aucune méthode. Jean-François Perrot JavaScript 3 31 Élément <select...> Rappel : Un élément <select...> présente une liste (en représentation interne, un tableau) d'options. Chaque option porte une étiquette qui l'identifie, et les propriétés fixées dans la balise html value (chaîne) et defaultselected (booléen, indiquépar la présence ou non de l'attribut selected) La liste elle-même possède une propriété selectedindex qui permet d'accéder à l'option choisie Elle réagit aux trois événements Blur, Focus et Change par des handlers appropriés (comme les champs-texte) Jean-François Perrot JavaScript 3 32 16
Essai avec <select...> <form> <p> <select name="couleur" onchange="montrer(this[selectedindex].value)"> <!-- avec la fonction montrer(clr) de l'ex. radio --> <option value="ff0000">rouge </option> <option value="#ff8000">orangé </option> <option value="#ffff00"> Jaune </option> <option value="#00ff00"> Vert </option> <option value="#0000ff" selected> Bleu </option> <option value="#000080"> Indigo </option> <option value="#ff00ff"> Violet </option> </select> </p> </form> Jean-François Perrot JavaScript 3 33 Essai avec <select...> (démo) Jean-François Perrot JavaScript 3 34 17
Élément <textarea...> Rappel : Ne diffère du champ-texte que par la possibilité de gérer plusieurs lignes. Mêmes propriétés, mêmes fonctionnalités. <form> <p> Tapez votre texte ici : <textarea name="entree" rows=5 cols=20> Ceci est un exemple </textarea> </p> <p> Cliquez... <input type= "button" value="ici" onclick='montrer(entree.value);'> </p> </form> Jean-François Perrot JavaScript 3 35 <html> <head> <title>essaitextarea</title> function montrer(txt) { document.write ("<h2>"+txt+"</h2>"); </head> Essai avec <textarea...> sur une seule ligne! Jean-François Perrot JavaScript 3 36 18