Programmation orientée objet et événementielle en JavaScript Département SRC Pôle Universitaire de Vichy Bruno Bachelet
PARTIE III Les événements Programmation objet et événementielle en JavaScript - SRC Vichy / S2-2012 2
Interface interactive et événements Interface interactive = réagir aux actions de l'utilisateur Capter une action code HTML Réagir à cette action code JavaScript Qu'est-ce qu'un événement? Généralement, action de l'utilisateur dans la page Souris, clavier Mais aussi, action du navigateur Chargement d'une page, erreur de téléchargement Evénement capté par l'élément HTML qui le subit <balise onévénement="code JavaScript"> </balise> Différents types d'événements Evénements de la souris Evénements du clavier Evénements de formulaire Evénements de page Programmation objet et événementielle en JavaScript - SRC Vichy / S2-2012 3
Identification d'un élément HTML Modification d'un élément HTML identification <balise id="identifiant" > </balise> <balise name="identifiant" > </balise> Accès à l'élément à partir de son identifiant document.getelementbyid("identifiant") document.getelementbyname("identifiant") Utilisation de l'attribut «id» préconisée Attribut «name» maintenant obsolète Encore utile pour les formulaires Dans ce cas, mettre les deux: «id» et «name» «name» sert pour la soumission du formulaire Autre possibilité d'accès aux éléments HTML Images: document.images["identifiant"] Formulaires: document.forms["identifiant"] Programmation objet et événementielle en JavaScript - SRC Vichy / S2-2012 4
Evénements de la souris Evénements que l'utilisateur déclenche avec la souris Susceptibles d'être subis par n'importe quel élément visible Evénements liés à l'action du bouton mousedown Déclenché lorsque le bouton de la souris est enfoncé sur un élément mouseup Déclenché lorsque le bouton de la souris est relâché sur un élément click Déclenché lors d'un clic de la souris (enfoncé puis relâché) sur un élément dblclick Déclenché lors d'un double-clic de la souris sur un élément Evénements liés au déplacement mouseover Déclenché lorsque la souris arrive sur un élément mouseout Déclenché lorsque la souris sort d'un élément mousemove Déclenché lorsque la souris bouge sur un élément Programmation objet et événementielle en JavaScript - SRC Vichy / S2-2012 5
Exemple de gestion de la souris <html> <head> <script type="text/javascript"> function danser() { document.images["pingouin"].src = "danse.gif"; function attendre() { document.images["pingouin"].src = "immobile.gif"; </script> </head> <body> <img id="pingouin" src="immobile.gif" onmouseover="danser();" onmouseout="attendre();"/> </body> </html> Programmation objet et événementielle en JavaScript - SRC Vichy / S2-2012 6
Evénements du clavier Evénements que l'utilisateur déclenche avec le clavier Sont subis a priori par les zones de saisie keydown keyup Déclenché lorsqu'une touche du clavier est enfoncée Déclenché lorsqu'une touche du clavier est relâchée keypress Déclenché par l'appui sur une touche du clavier (enfoncé puis relâché) Programmation objet et événementielle en JavaScript - SRC Vichy / S2-2012 7
Exemple de gestion du clavier <html> <head> <script type="text/javascript"> var n = 0; function compter() { n++; document.getelementbyid("compteur").innerhtml = n; </script> </head> <body> <form> <input type="text" onkeypress="compter();"/> </form> <p id="compteur"></p> </body> </html> Programmation objet et événementielle en JavaScript - SRC Vichy / S2-2012 8
Evénements de formulaire Evénements que l'utilisateur déclenche en manipulant un formulaire Sont donc subis par les champs d'un formulaire Evénements liés au formulaire change Déclenché lorsque le contenu d'un élément est modifié Déclenché au moment de la perte du focus par l'élément submit Déclenché à la soumission d'un formulaire Code JavaScript retourne «true» ou «false» pour valider la soumission reset Déclenché à la réinitialisation du formulaire Evénements liés à une sélection focus Déclenché lorsque l'élément récupère le focus blur Déclenché lorsque l'élément perd le focus select Déclenché lorsqu'une partie du contenu de l'élément est sélectionnée Programmation objet et événementielle en JavaScript - SRC Vichy / S2-2012 9
Exemple de gestion d'un formulaire <html> <head> <script type="text/javascript"> function verifier() { var annee = document.getelementbyid("annee").value; if (annee >= 1900 && annee <= 2000) return true; else { alert("l'année doit être entre 1900 et 2000"); return false; </script> </head> <body> <form method="get" action="sauve.php" onsubmit="return verifier();"> <input type="text" name="annee" id="annee"/> <input type="submit"/> </form> </body> </html> Programmation objet et événementielle en JavaScript - SRC Vichy / S2-2012 10
Evénements de page Evénements déclenchés par la navigation dans une page load Déclenché une fois que la page est chargée Utilisé sur la balise <body> unload Déclenché au moment où la page est quittée Utilisé sur la balise <body> error Déclenché suite à une erreur de chargement Utilisé sur la balise <img> abort Déclenché lorsque le chargement de la page est abandonné Utilisé sur la balise <img> Programmation objet et événementielle en JavaScript - SRC Vichy / S2-2012 11
Exemple de gestion de la page <html> <head> <script type="text/javascript"> var arrivee; function debut() { var date = new Date(); arrivee = date.gettime(); function fin() { var date = new Date(); var duree = (date.gettime() - arrivee) / 1000; alert("vous êtes restés " + duree + " secondes sur la page."); </script> </head> <body onload="debut();" onunload="fin();">... </body> </html> Programmation objet et événementielle en JavaScript - SRC Vichy / S2-2012 12