doc5. La gestion des événements en HTML
download 
Plainte Transcription
5. La gestion des événements en HTML
420-183
Programmation 1
5. La gestion des
événements en
HTML
Les événements
Afin de pouvoir utiliser les formulaires HTML comme interface utilisateur pour notre programmation JavaScript, nous devons utiliser le traitement des événements. Un événement est quelque chose
qui se produit. Que peut-il se produire lorsqu'un utilisateur utilise un ordinateur? S'il clique avec la
souris, c'est un événement. S'il presse une clé du clavier, c'est un événement. S'il choisit un élément
d'un menu, c'est un événement. On dit que l'environnement Windows fonctionne par événements.
C'est que Windows attend sans cesse que se produise un événement, et lorsque c'est le cas, il réagit en
traitant cet événement. Faire de la programmation, sous Windows, consiste donc à prévoir quelles
actions seront effectuées lorsque tel ou tel événement se produira.
Si notre formulaire HTML contient deux boutons, un sur lequel est inscrit «Valider» et un sur lequel
est inscrit «Annuler», nous devrons programmer les instructions qui devront être exécutées dans le
cas où chacun de ces deux boutons sera cliqué. En JavaScript, nous devrons programmer deux
fonctions et nous devrons spécifier que lorsque l'événement «clic sur le bouton Valider» se produit,
c'est la première fonction qui est exécutée, alors que si c'est l'événement «clic sur le bouton Annuler»
qui se produit, alors c'est la deuxième fonction qui sera exécutée.
Différents événements pourront être traités dans un formulaire HTML:
onClick
onLoad
onUnload
onFocus
onChange
onSelect
Session A-2008
Lorsqu'un clic est effectué, par exemple sur un
bouton.
Lorsque la page est initialement affichée.
Lorsque l'on quitte cette page web (en cliquant sur
un hyperlien, par exemple).
Lorsque le curseur arrive dans un champ ou sur un
bouton, par exemple, avec la touche «Tab» du
clavier.
Lorsque le contenu d'un champ ou d'une liste
déroulante est modifié.
Lorsqu'un élément d'une liste déroulante est
sélectionné, par exemple.
© 2008, Marc-Gabriel Vallières
page 5-1
La définition d'un script et des fonctions JavaScript
La programmation en langage JavaScript qui servira à définir les traitements des événements pouvant
se produire dans notre formulaire doit être incluse dans le fichier HTML, mais ne doit pas être
affichée sur la page. Nous l'inclurons donc dans la section de l'entête (<head>...</head>) et nous
l'encadrerons par les balises <script> et </script>.
<html>
<head>
<title>Mon formulaire</title>
<script language="JavaScript">
Programmation JavaScript...
</script>
</head>
<body>
<form name="Form1">
Contenu du formulaire...
</form>
</body>
</html>
Pour chaque événement différent, nous devrons écrire une fonction en JavaScript, et nous devrons
spécifier que cette fonction sera exécutée lorsque l'événement se produit. Si notre formulaire
contient un bouton «Valider», nous spécifierons le paramètre onClick dans la définition du bouton et
nous définirons la fonction appropriée dans l'entête:
<html>
<head>
<title>Mon formulaire</title>
<script language="JavaScript">
function traiterBouton()
{
instructions JavaScript à exécuter
}
</script>
</head>
<body>
<form name="Form1">
...
<input type="button" value="Valider" onClick="JavaScript:traiterBouton();">
...
</form>
</body>
</html>
Session A-2008
© 2008, Marc-Gabriel Vallières
page 5-2
L'instruction alert
Afin de pouvoir tester, nous utiliserons une instruction JavaScript simple, qui permet d'ouvrir une
petite fenêtre et d'afficher un message, l'instruction alert. Dans la page web suivante, une première
fenêtre s'ouvre lorsque la page est affichée une première fois, et une seconde fenêtre s'ouvre lorsque
l'utilisateur clique sur le bouton du formulaire:
<html>
<head>
<title>Mon formulaire</title>
<script language="JavaScript">
function chargement()
{
alert("La page vient de s'afficher!");
}
function traiterBouton()
{
alert("Vous avez cliqué sur le bouton!");
}
</script>
</head>
<body onLoad="JavaScript:chargement();">
<form name="Form1">
<input type="button" value="Valider" onClick="JavaScript:traiterBouton();">
</form>
</body>
</html>
Session A-2008
© 2008, Marc-Gabriel Vallières
page 5-3
