JavaScript-2
Transcription
JavaScript-2
Techniques à Objets et Internet Le Web et sa programmation Jean-François Perrot Université Pierre et Marie Curie (Paris 6) Cours n° 4 : Introduction à Javascript -2 • Événements en Javascript • Application au traitement des formulaires Jean-François Perrot JavaScript 2 1 Intervention de Javascript grâce aux "événements" • Dans la perspective purement html, tout le travail d'interprétation d'un formulaire (y compris la détection d'erreurs et d'incohérences) est confiée au script CGI, lequel tourne sur le serveur et échappe donc au client. • Grâce à un système d'événements, on va pouvoir coupler le mécanisme des formulaires avec du code Javascript tournant chez le client. • L'intervention de Javascript va pemettre de garder une partie du contrôle des opérations au client : Par exemple, vérifier la validité du contenu d'un formulaire avant de l'envoyer au serveur. • Dans certains cas, on pourra se passer complètement du serveur... Jean-François Perrot JavaScript 2 2 1 Événements en html/Javascript • D'une manière analogue aux événements de Windows exploités en Visual Basic et en Visual J++, on associe à différentes zones d'une page Web des événements exploitables par Javascript. Quelles zones ? Quels événements ? --> La plupart (mais pas toutes !) vont être des zones correspondant aux différents champs d'un formulaire... • La spécification d'une action sur événement s'écrit – à l'intérieur de la balise ouvrant la zone – sous la forme onévénement = "code Javascript" – le code en question peut renvoyer une valeur logique (vrai par défaut) qui conditionne la suite du calcul. Exemple : onclick = "alert('Gare aux coups !'); return true;" Jean-François Perrot JavaScript 2 3 Nomenclature des événements html/Javascript • • • • Click MouseOver MouseOut Focus • Blur • select • Submit • Change • Load • UnLoad Jean-François Perrot l'utilisateur clique dans la zone la souris entre dans la zone la souris sort de la zone pour un champ de formulaire, il devient activable id. devient inactivable pour un champ de formulaire un de ses éléments a été choisi pour un formulaire, on l'envoie pour un champ de formulaire, on a modifié son contenu une page vient d'être chargée une page vient d'être quittée JavaScript 2 4 2 Événements associés aux liens (links) • Les zones de lien sont le théâtre de trois événements : Click, MouseOver et MouseOut, traités par trois handlers onclick, onmouseover et onmouseout. • Si la valeur logique renvoyée par le handler onclick est faux, le lien n'est pas ouvert par le clic. Si la valeur logique renvoyée par le handler onmouseover est vrai, le lien n'est pas affiché au bas de la fenêtre. • Exemple : EssaiLink.html <a href="date.html" onmouseover = "return !confirm('Vraiment ?');" onmouseout= "return confirm('Vous renoncez ?');" onclick="return confirm('De\'cide\'ment ?');"> Saut dans l'inconnu</a> Jean-François Perrot JavaScript 2 5 Lien 1 Pour répondre "non" à la première question (posée par onmouseover), il a fallu que la souris quitte la zone du lien. D'où la seconde question (posée par onmouseout) ... Jean-François Perrot JavaScript 2 6 3 Lien 2 Cette fois, on a répondu "oui", en tapant "retour-chariot", donc sans bouger la souris de la zone du lien. La valeur renvoyée par le handler onmouseover est donc faux, ce qui provoque l'apparition de l'URL du lien dans la zone inférieure de la fenêtre. Jean-François Perrot JavaScript 2 7 Lien 3 La souris restant sur la zone du lien, on clique, ce qui déclenche le handler onclick. Si dans la fenêtre de dialogue on clique sur "Annuler", la fenêtre questionnante disparaît, et rien d'autre ne se produit, puisque le handler a renvoyé faux, ce qui inhibe l'ouverture du lien - mais la zone du lien reste en rouge, car elle a été activée... Jean-François Perrot JavaScript 2 8 4 Lien 4 Cette fois on a cliqué "OK" dans la fenêtre de dialogue lancée par le handler onclick, et le lien "date.html" a été dûment ouvert. Jean-François Perrot JavaScript 2 9 Représentation de la page comme objet • La clé de la mise en œuvre de Javascript réside dans la représentation de la page et de ses composants comme "objets" Javascript. • Exemple 1 : quand on écrit document.write("bla...bla...") on envoie en fait un ordre write (méthode) à l'objet document • Exemple 2 : la ligne au bas de la fenêtre est connue de Javascript comme la propriété status de l'objet window. On peut donc la modifier depuis Javascript par une simple affectation : window.status = "bla...bla..." Jean-François Perrot JavaScript 2 10 5 Désigner les "objets" par leur nom • Pour pouvoir agir sur les "objets" qui composent la page, il faut pouvoir les désigner. – Le cas des "objets standard" document et window est particulier. • La plupart des "objets" sont connus par un nom, qui leur est attribué sous la clé name dans la balise ouvrante. • Exemple avec des images : Le nom du fichier-source d'une image est une propriété ".src" de l'objet image, donc directement affectable - à condition de savoir désigner l'objet en question ! <a href = "" onmouseover='flip.src = "flip2.gif";' vert/noir onmouseout='flip.src = "flip1.gif";'> rouge/blanc <img name="flip" src="flip1.gif" width = "30" height = "30" alt = "" /> </a> EssaiImg1.html Jean-François Perrot JavaScript 2 11 Représentation des formulaires comme "objets" Javascript noms des éléments • Un formulaire est constitué d'éléments dont chacun est à son tour un"objet". • Chaque élément est doté d'un nom (name), qui permet de l'identifier dans le formulaire. Sauf dans le cas des boutons radio, chaque élément du formulaire porte un nom différent des autres. Ne pas confondrce nom avec le texte "cosmétique" entourant l'élement ! • Syntaxe : Ce nom apparaît comme une propriété parmi d'autres dans le texte html de la balise qui crée l'élement : <input type="text" name="Entree" value="xxx" /> Il est accessible au code Javascript sous l'identificateur name. Il ne faut pas le modifier par programme ! Hélas Javascript ne fait que peu de contrôles à l'exécution... Jean-François Perrot JavaScript 2 12 6 Représentation des formulaires comme "objets" Javascript propriétés des éléments • Chaque élément est doté d'un certain nombr /e de propriétés, (les variables d'instance de Java) dont – la plupart ont pour valeurs des chaînes de caractères – certaines sont à valeurs booléennes ou entières • Toutes ces propriétés sont accessibles au code Javascript (à condition de savoir désigner l'élément). • Certaines de ces propriétés sont modifiables par programme (affectationd'une valeur) ou par action de l'utilisateur : Click. • Les autres sont fixées dans le texte html de la balise créant l'élément : les tentatives de modification resteront sans effet. Si elles ne sont pas fournies, elles prennent une valeur par défaut ("" pour les chaînes). Jean-François Perrot JavaScript 2 13 Représentation des formulaires comme "objets" Javascript événements et méthodes • Chaque élément est le siège de certains événements, (cf. la liste vue précédemment) auxquels il réagit comme indiqué dans les handlers correspondants. • En outre, chaque élément est capable d'exécuter certaines méthodes, qui ont pour effet de déclencher (simuler) certains des événements auxquels réagit l'élément en question. • On a ainsi deux manières d'activer un élément de formulaire : – par "action directe" (événement --> handler) – par programme (appel de méthode --> handler) Jean-François Perrot JavaScript 2 14 7 Rappel : Les trois grande catégories d'éléments de formulaires Les éléments de formulaire se répartissent en trois catégories : • les input qui peuvent prendre des formes ("types") multiples ; <input type="..." name="nnn"...> • les select qui permettent de choisir dans une liste d'options ; <select name="nnn"> <option value="aaa">1</option> <option value="bbb">2</option> ... </select> • les textarea qui autorisent l'utilisateur à fournir un texte de plusieurs lignes. <textareaname="nnn" rows="rr" cols="cc"> texte par défaut </textarea> Jean-François Perrot JavaScript 2 15 Rappel : Les différentes espèces ("types") d'éléments input • Les champs-texte (text fields) type="text" et leur variante les mots de passe type="password" • Les "boutons" (buttons) type="button" et leurs deux sous-espèces particulières – les réinitialiseurs (reset) type="reset" – les envoyeurs (submit) type="submit" • Les "boutons radio" (radio buttons) type="radio" • Les cases à cocher (checkboxes) type="checkbox" • Les champs cachés (hidden) type="hidden" Jean-François Perrot JavaScript 2 16 8 <input type="text"...> alias "champ-texte" ou text field • Rappel : Propriétés (chaînes) : – name fixée dans la balise <input...name="leNom"...> – defaultvalue fixée dans la balise <input...value="laValeurInitiale"...> – value modifiable par affectation ! • handlers d'événements : onblur, onfocus, onchange, onselect • Méthodes : simulent trois des quatre événements ci-dessus – focus() – blur() – select() Jean-François Perrot JavaScript 2 17 Exemple avec des champs texte <html> <head> <title>EssaiText</title> </head> <body> <p>Debut</p> <form> <p> Tapez ici : <input type= "text" name="Entree" onfocus='this.value = ""; Sortie1.value=""; Sortie2.value="";' onchange="Sortie1.value = this.value;" onselect="Sortie2.value = this.value;" /> </p> <p> Mais lisez ici ... <input type= "text" name="Sortie1" onfocus="this.blur();" /> </p> <p> ou ici : <input type= "text" name="Sortie2" onfocus="this.blur();" /> </p> </form> <p>Fin</p> </body> </html> L'effet de onfocus="this.blur();" est de protéger le champ contre l'écriture. Jean-François Perrot JavaScript 2 18 9 Exemple avec des champs texte : essai Combien de clics... entre ces deux images ? Jean-François Perrot JavaScript 2 19 <input type="password"...> alias "mot de passe" ou password • Propriétés, événements & méthodes :comme le champ texte, mais sans le handler onchange • Comportement : au lieu d'afficher la chaîne tapée par l'utilisateur, chaque caractère est remplacé par une étoile (ou par tout autre caractère anomyme). • Exemple : comme dans l'exemple précédent, avec : <input type= "password" name="Entree" onfocus='this.value = ""; Sortie1.value = ""; Sortie2.value ="";' onblur="Sortie1.value = this.value;" onselect="Sortie2.value = this.value;" /> • L'événement Blur pour un champ texte est assez voisin de Change... Jean-François Perrot JavaScript 2 20 10 Essai de mot de passe Pouvez-vous reconstituer la séquence d'actions qui a conduit à cette situation, sachant qu'aucun caractère n'a été effacé ? Jean-François Perrot JavaScript 2 21 <input type="button"...> alias "bouton" ou push button • Les champs-texte peuvent déclencher des actions via les événements Focus, Blur, Change et select. Mais ces déclenchements sont des sous-produits d'autres phénomènes, ce qui peut nuire à la clarté du code. • On peut donc préférer des instruments qui ne servent qu'à déclencher des actions : les boutons ! • Propriétés : – name (chaîne) fixée dans la balise <input...name="leNom"...> – value (chaîne) fixée dans la balise (apparaît sur le bouton) <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 2 22 11 Exemple avec push button <html> <head> <title>EssaiBouton</title> </head> <body> <p>Debut</p> <form> <p> Ne tapez pas ici : <input type= "text" name="Entree" onfocus='value=""; this.blur(); Go.click()' /> </p> <p> Cliquez ... <input type= "button" name="Go" value="ici" onclick='Entree.value = prompt("Que voulez-vous dire ?",""); '></p> </form> <p>Fin</p> </body> </html> Jean-François Perrot JavaScript 2 23 Essai de push button Cliquer dans le champ-texte ou sur le bouton donne le même résultat. Jean-François Perrot JavaScript 2 24 12 <input type="reset"...> alias "bouton reset" • Rappel : Un bouton reset a en principe pour fonction de remettre l'ensemble du formulaire dans son état initial. • Il a les mêmes propriétés et fonctionnalités qu'un push button ordinaire : c'est un bouton avec un handler onclick par défaut qui réinitialise le formulaire. • Il est donc normalement unique dans le formulaire. • Mais on peut également redéfinir onclick pour déclencher d'autres actions, et utiliser plusieurs boutons reset ... Si les actions en question renvoient false, la réinitialisation standard est inhibée, et les reset deviennent alors indistinguables de push button ordinaires. Jean-François Perrot JavaScript 2 25 Exemple avec reset <form> <p>Tapez ici : <input type= "text" name="Entree" onchange="Sortie1.value = this.value;" onselect="Sortie2.value = this.value;"/> </p> <p> Mais lisez ici ... <input type= "text" name="Sortie1" onfocus="this.blur();" /> </p> <p> ou ici : <input type= "text" name="Sortie2" onfocus="this.blur();" /> </p> <p> <input type= "reset" value="raz"> <input type= "reset" value="normaliser" onclick="Sortie1.value =Entree.value; Sortie2.value = Entree.value; return false;" > </p> </form> Jean-François Perrot JavaScript 2 26 13 Exemple avec reset (essais) Jean-François Perrot JavaScript 2 27 <input type="submit"...> alias "bouton submit" • Rappel : Un bouton submit a en principe pour fonction d'envoyer le contenu courant du formulaire au script CGI chargé de son exploitation. • Il a les mêmes propriétés et fonctionnalités qu'un push button ordinaire : c'est un bouton avec un handler onclick par défaut qui envoie le contenu du formulaire. • Il est donc normalement unique dans le formulaire. • Mais on peut également redéfinir onclick pour déclencher d'autres actions (vérifications...), et utiliser plusieurs boutons submit ... Il est plus difficile d'inhiber l'expédition standard est, et de rendre ainsi les submit (comme les reset) indistinguables de push button ordinaires (voir les objets formulaires). Jean-François Perrot JavaScript 2 28 14