docLes évènements JavaScript Les événements JavaScript
download 
Plainte Transcription
Les évènements JavaScript Les événements JavaScript
9/11/16 Les évènements JavaScript INF2005– Programma3on web– A. Obaid Les événements JavaScript • Les évènements JavaScript – PermeGent aux programmes de réponder aux inerac3ons avec l'usager et de modifier la page en conséquence. • Les applica3ons web deviennent plus dynamique et interac3ves INF2005– Programma3on web– A. Obaid 2 1 9/11/16 Traitement d'un évènement • On peut déclarer un événement rela3f à un élément et lui associer une fonc3on ges3onnaire d'évènement (event handler) • On peut le faire de différentes facons: – En u3lisant la méthode addEventListener() – En u3lisant l'évènement comme aGribut de l'élément – En associant l'évènement au nom de l'élément DOM INF2005– Programma3on web– A. Obaid 3 Traitement d'un évènement • Le modèle en ligne d'inscrip3on du ges3onnaire traite l'évènement comme aGribut d'une balise HTML: – <element onClick="fonc9on(…);"> …</element> • Le modèle tradi3onnel consiste à on associer le nom du ges3onnaire à un nœud du DOM – element.onload="fonc9on(…)" INF2005– Programma3on web– A. Obaid 4 2 9/11/16 Évènement onLoad • Tiré lorsque l'objet est complètement chargé. <script> var nSecondes=0; func3on debutTimer(){ window.setInterval("majTimer()", 1000); } func3on majTimer(){ nSecondes++; document.getElementById("Compteur").innerHTML= nSecondes; } </script> <body onLoad="debutTimer()"> <span id="Compteur"> 0 <span> </body> INF2005– Programma3on web– A. Obaid 5 Traitement d'un évènement <body> <p id="p1"> Passez par dessus ce paragraphe et vous verrez. </p> <div id="div1"> </div> <script> var element= document.getElementById("p1"); element.addEventListener("mouseover", maFonc3on1); element.addEventListener("mouseout", maFonc3on2); func3on maFonc3on1() { document.getElementById("div1").innerHTML += "La souris est passee ! <br>" } func3on maFonc3on2() { document.getElementById("div1").innerHTML += "<b> La souris est par3e ! <br></b>" } </script> </body> INF2005– Programma3on web– A. Obaid 3 9/11/16 Évènement mouseMove • Tiré lorsque l'usager déplace la souris par dessus un objet. • On peut se servir des coordonnées de la souris : – event.clientX: coordonnée horizontale dans la fenêtre courante – event.clientY: coordonnée ver3cale dans la fenêtre courante • On a aussi: – event.pageX: coordonnée horizontale dans le document courant. – event.pageX: coordonnée ver3cale dans le document courant. – event.screenX: coordonnée horizontale dans l'écran. – event.screenX: coordonnée ver3cale dans l'écran INF2005– Programma3on web– A. Obaid 7 Évènement mouseMove <head> <style> #oiseau { posi3on: absolute; width: 200px; } </style> <script> func3on majObjetVolant (event) { var mouseX = event.clientX; var mouseY = event.clientY; var objetVolant = document.getElementById("oiseau"); objetVolant.style.let = mouseX + "px"; objetVolant.style.top = mouseY + "px"; } </script> </head> <body onmousemove="majObjetVolant(event);"> <img id="oiseau" src="oiseau.gif" /> </body> INF2005– Programma3on web– A. Obaid 8 4 9/11/16 Propriétés de l'objet event • Les propriété de l'objet event Object `:
– clientX, clientY
– pageX, pageY
– screenX, screenY
– shiftKey, ctrlKey, altKey
• Vrai si Ctrl, Shift ou Alt est pressée,
– which
• unicode de la valeur de la clé pressée
– timeStamp
• Temps auquel l'évènement a été déclenché.
– target:
• Objectif de l'événement (FireFox ?)
– …
INF2005– Programma3on web– A. Obaid 9 Évènement mouseOver <head> <script> func3on affiche(nomImage) { document.Image1.src=nomImage; } </script> </head> <body> <a href="javascript:void()" onMouseOver="affiche('Laforest.jpg');">Lousie Laforest</a> | <a href="javascript:void()" onMouseOver="affiche('Obaid.jpg');"> Abdel Obaid</a> | <a href="javascript:void()" onMouseOver="affiche('Nkambou.jpg');"> Roger Nkambou</a> | <a href="javascript:void()" onMouseOver="affiche('Ajib.jpg');"> Wessam Ajib</a> | <a href="javascript:void()" onMouseOver="affiche('Gagnon.jpg');"> E3enne Gagnon</a> <p> <img src=“baid.jpg" width=200 name="Image1" /> </p> </body> INF2005– Programma3on web– A. Obaid 10 5 9/11/16 Évènement mouseOver <html> <head> <script> func3on bienvenue() { alert("Bienvenue chez moi !"); } func3on aurevoir() { alert("Au revoir et a la prochaine !"); } </script> </head> <body> <p onMouseover="bienvenue();" onMouseout="aurevoir();"> Essayez de passer votre cursuer sur ce paragraphe <br /> Si vous sortez vous verrez autre chose </p> </body> INF2005– Programma3on web– A. Obaid 11 Évènements focus et blur • focus : ac3vé lorsque le focus arrive sur un élément. Ex: un champ de saisie. – U3lisé pour changer l'aspect de l'elément courant (Ex. couleur de background). • blur : ac3vé quand un élément perd le focus. – U3lisé pour effectuer une valida3on sur le contenu de l'élément (ex. voir si une adresse courriel correcte), INF2005– Programma3on web– A. Obaid 12 6 9/11/16 Évènements focus et blur <!DOCTYPE html> <html> <body> Enter your name: <input type="text" id="fname" onblur="myFunc3on()"> <p> When you leave the input field, a func3on is triggered which transforms the input text to upper case.</p> <script> func3on myFunc3on() { var x = document.getElementById("fname"); x.value = x.value.toUpperCase(); } </script> Source: hGp://www.w3schools.com/jsref/tryit.asp?
filename=tryjsref_onblur </body> </html> INF2005– Programma3on web– A. Obaid 13 Évènements focus et blur var vForm = document.getElementById("form1"); vForm.addEventListener("focus", func3on( event ) { event.target.style.background = "red"; }); vForm.addEventListener("blur", func3on( event ) { event.target.style.background = ""; }); <form id="form1"> <input type="text" placeholder= "Saisissez le nom"> <input type="password" placeholder= "Mot de passe "> </form> func3on verifieAge( ) { if( parseInt( document.form1.age.value ) < 12 ) { window.alert( "Vous avez moins de 12 ans. " ) ; }} <input type="text" name="age" onBlur=" verifieAge( ) "> INF2005– Programma3on web– A. Obaid 14 7 9/11/16 Évènement onChange • Ac3vé lorsque la valeur d'une élémenet change func3on valider() { var cCourriel=vCourriel=document.monFormulaire.courriel; var vCourriel=document.monFormulaire.courriel.value; if (vCourriel.indexOf("@") < 1) { alert("Votre adresse n'est pas valide"); cCourriel.focus(); } } <form name="monFormulaire" > Entrez votre nom: <input type="text" name="nom" /> Entrez votre courriel: <input type="text" name="courriel" onchange="valider();" /> </form> INF2005– Programma3on web– A. Obaid 15 Évènement onChange • U3lisé pour détecter des changements dans une sélec3on de <select> func3on goPage() { var p = document.f1.unePage.value; loca3on = "Nouvellepage" + p + ".html"; } <form name="f1"> <select name="unePage" onChange="goPage();"> <op3on selected> Choisissez une page</op3on> <op3on value="1">Page 1</op3on> <op3on value="2">Page 2</op3on> <op3on value="3">Page 3</op3on> </select> <input type="reset"> </form> INF2005– Programma3on web– A. Obaid 16 8 9/11/16 Évèmenets onKeyUp et onKeyDown • U3lisés pour détecter la frappe des touches – Pour valider ou modifier en temps réel une saisie func3on filtrer(element) { var vSaisie=document.getElementById(element); var regexp=/[^0-‐9]/g; vSaisie.value=vSaisie.value.replace(regexp,""); } <input type="text" id="saisie" onKeyUp="filtrer('saisie')" /> INF2005– Programma3on web– A. Obaid 17 Évèmenet onKeyPress • U3lisé pour déterminé la clé qui a été préssée <body onkeypress="afficher(event)"> <script > func3on afficher(evenement) { document.formulaire.affichage.value= String.fromCharCode(evenement.which); } </script> <form name="formulaire"> Touche tapee: <input type="text" name="affichage" size= 1 /> </form> </body>^ INF2005– Programma3on web– A. Obaid 18 9
