Programmation événementielle en JS

Résumé

L'utilisateur déclenche un "événement" (clic, déplacement souris, clic sur un bouton, choix d'un option de liste déroulante etc ...) relativement à un objet (lien, composant de formulaire ..).
L'événement est décelé (capté) par l'objet cible si celui-ci possède une "sensibilité" à l'événement. Il faut donc connaitre la correspondance objet-événement.
S'il prévoit un intérêt à "répondre" à cet événement, le programmeur doit à l'avance, associer du code JS ou une fonction JS à un tel couple objet-événement. L'appel et l'exécution de ce code ou de cette fonction seront automatiquement déclenchés par l'événement, et constituent ainsi la "réponse" à celui-ci.
Les fonctions sont déclarées dans la partie <HEAD> et les appels en général associés à la balise de l'objet HTML qui va capter l'événement. Il faut veiller à bien gérer le passage de paramétres, souvent un formulaire entier.

Evénements JS

Nous avons déjà vu des exemples d'appels de fonctions JavaScript provoquées par des événements qui surviennent au moment de l'exécution du programme.
Ces événements sont des actions qui sont déclenchées le plus souvent par l'utilisateur.
Par exemple, un clic sur un bouton (composant de formulaire) est un événement, comme l'est la validation d'un texte saisi dans une ligne de texte, ou le choix d'une option dans un composant case à cocher

Le navigateur reconnait un ensemble d'événements associés à des balises, des liens et des composants de formulaires. Par programmation, on peut leur associer des fonctions particulières appelées gestionnaires d'événements appelée systématiquement lorsque ces événements sont provoqués.

Un gestionnaire d'événement est une procédure particulière attachée à une balise HTML,

prédéfinie par le langage JS (par exemple onClick)
déclenchée par l'événement correspondant (click sur un composant de type button)
qui apparait dans la balise du composant qui reçoit l'événement
et à laquelle on affecte une fonction écrite en JS, déclarée préalablement

définition générale

onEvent est le nom du gestionnaire d'événements associé à l'événement Event, comme onClick
Balise est un nom de balise qui sait gérer un tel événement.
"code JS" est généralement une fonction déclarée auparavant dans une section <HEAD> <SCRIPT>...</SCRIPT> </HEAD>
Mais ce peut être aussi une suite d'instructions JS, séparées par des virgules.

Supposons déjà déclarée une fonction nommée calculer. On peut appeler le navigateur à l'exécuter au moment où l'utilisateur clique sur un bouton.
Pour cela il suffit d'affecter cette fonction calculer avec ses paramètres, au gestionnaire onClick qui réagit à l'événement click
Le code à écrire est : Le paramètre this.form fait référence au formulaire qui contient le bouton lui-même.

Remarques

On peut utiliser plusieurs gestionnaires d'événements sur un même composant.
Par exemple : <A HREF="URL" onMouseOver="fct1()" onMouseOut="fct2()">voir ...</A>

Liste des événements

onBlur : se produit quand un champ Textarea, Text ou Select n'est plus activé.
onChange : se produit quand un champ Textarea, Text ou Select est modifié par l'utilisateur.
onClick : se produit quand un composant Button, Checkbox, Radio Link, Reset ou Submit reçoit un click souris
onFocus : se produit quand un composant Textarea, Text ou Select est activé.
onLoad : se produit quand le navigateur a fini de charger une fenêtre ou toutes les frames d'un FRAMESET. L'événement onLoad se positionne dans la balise BODY ou dans la balise FRAMESET
onMouseOver : se produit quand la souris passe sur un Hyperlien ou une zone activable d'une image.
onSelect se produit quand un composant Textarea ou Text est sélectionné.
onSubmit : se produit quand un formulaire est globalement validé appui du bouton Submit.
onUnload :se produit quand on quitte un document. L'événement onUnload se positionne dans la balise BODY ou dans la balise FRAMESET.
onAbort : se produit quand l'utilisateur interrompt le chargement d'une image
onError : se produit quand le chargement d'une page ou d'une image produit une erreur.
onMouseout : se produit quand la souris quitte une zone Area d'une image ou un hyperlien.
onReset : se produit quand on clique sur le bouton reset d'un formulaire

Tableau récapitulatif

Gest. événement	provoqué par l'utilisateur qui ...	sur les objets ...
onBlur	enlève le focus du composant	text, textarea, select
onChange	change la valeur d'un texte ou d'un composant à options	text, textarea, select
onClick	clique sur un composant ou un hyperlien	button, checkbox, radio, reset, submit
onFocus	donne le focus au composant	text, textarea, select
onLoad	charge la page dans le navigateur	balises BODY, FRAMESET
onMouseOut	la souris quitte un lien ou une ancre	balises <A HREF..>, <AREA HREF..>
onMouseOver	bouge la souris sur un lien ou une ancre	balises <A HREF..>, <AREA HREF..>
onReset	efface les saisies d'un formulaire	bouton reset
onSelect	sélectionne une zone d'édition d'un formulaire	text, textarea
onSubmit	soumet un formulaire	bouton submit
onUnload	quitte la page	balises BODY, FRAMESET

Programmer un formulaire

Prérequis: Il est nécessaire de connaitre déjà les champs (ou composants) de formulaires du langage HTML.
Pour les découvrir, voir ce chapitre d'introduction aux formulaires HTML
Un formulaire form se présente comme un objet inclus dans un objet document ( page HTML).
On sait que lui-même se conduit comme un conteneur d'autres objets que sont les composants usuels d'une interface graphique.
Ces objets possèdent des propriétés et des méthodes (fonctions) qui correspondent pratiquement aux attributs des balises HTML qui les construisent .
Pour l'essentiel, la tâche du programmeur est d'analyser les traitements à effectuer sur les informations extraites du formulaire puis d'écrire les fonctions correspondantes, appelées par le déclenchement d'événements par l'utilisateur.

Champ de TEXTE

<FORM NAME="Questions">
<INPUT TYPE="text" NAME="classe" VALUE=""  SIZE=10> ;
</FORM>

Le texte entré par l'utilisateur est affecté à la propriété value du composant classe situé dans le formulaire Questions placé dans le document courant appelé document (par défaut).
De l'intérieur de ce document, le contenu du champ de texte est donc "visible" et accessible par son nom complet :
document.Questions.classe.value
En particulier, il peut être récupéré et affecté à une variable MaClasse par l'expression: MaClasse = document.Questions.classe.value
La référence F.classe.value est suffisante car la portée du formulaire F est le document où il est inséré.
Les formulaires dans un même document sont stockés dans un tableau appelé forms; le premier formulaire est alors noté forms[0], la deuxième est forms[1] etc..
Si Questions est situé en position de premier formulaire, on peut remplacer l'affectation précédente par :
MaClasse = document.forms[0].classe.value

Liste de sélection SELECT

<FORM NAME="F">
<SELECT NAME="liste" 
	onChange='F.resultat.value+=F.liste.options[F.liste.selectedIndex].value' > ;
<OPTION VALUE="matin ... " >Matin
<OPTION VALUE="midi ... ">Midi
<OPTION VALUE="soir ... ">Soir
</SELECT>
<INPUT TYPE=TEXTE SIZE=40 NAME="resultat" VALUE="Vous avez sélectionné : " >
</FORM>

Propriétés de l'objet SELECT

selectedIndex est une propriété dont la valeur est le numéro de l'élément sélectionné dans la liste
var num = F.liste.selectedIndex ---> num est le numéro de l'élément sélectionné dans le composant liste situé dans le formulaire F.
options[]est le tableau prédéfini contenant les objets de la liste
F.liste.options[num] est l'objet champ situé au N° num (rappel : le 1er a le numéro 0)
F.liste.options[num].value est la valeur de l'option N° num de la liste.
F.liste.options[num].text est le texte suivant le champ <OPTION>.

Boutons de sélection RADIO

<FORM NAME="F">
<INPUT TYPE="RADIO" NAME="choix" value="sup. à 10" CHECKED 
	onClick='F.resultat.value=this.value'>plus de 10
<INPUT TYPE="RADIO" NAME="choix" value="entre 8 et 10" 
	onClick='F.resultat.value=this.value'>entre 8 et 10
<INPUT TYPE="RADIO" NAME="choix" value="inf. à 8" 
	onClick='F.resultat.value=this.value'>moins de 8

<INPUT TYPE=TEXTE SIZE=15 NAME="resultat" VALUE="" >
</FORM>

Propriétés de l'objet RADIO

F.choix[num] est le bouton radio N° num (le 1er a le numéro 0) de l'ensemble de boutons nommé choix
checked est le booléen décrivant l'état d'un bouton : if (F.choix[num].checked) ....
F.choix[num].value est la valeur associée au bouton N° num de la série de bouton.

Cases à cocher CHECKBOX

Le traitement est complètement semblable au cas des boutons radio, à la différence que chaque case possède un nom propre distinct des autres. L'état checked de chaque case doit donc être testé individuellement.
Voir l'exemple complet qui suit.

Bouton de validation SUBMIT

Lorsque l'utilisateur "soumet" ses réponses en cliquant sur le bouton submit, une fonction programmée en réaction au gestionnaire de l'événement onSubmit peut analyser ses choix et y répondre.
On peut plus simplement préférer utiliser un bouton normal qui lance une fonction en réaction à l'événement onClick()
Voir l'exemple suivant.

Exemple récapitulatif

Voici la reprise du questionnaire présenté en exemple dans le chapitre formulaire du cours HTML.

Examiner en détail cette annexe. Exécuter plusieurs fois et parallèlement étudier le code JS.
Comprendre comment on peut effectuer des traitements à partir des choix de l'utilisateur.

Traitement d'un questionnaire (exemple-evenement.html)

Envoyer un formulaire

Pour envoyer la saisie d'un formulaire sans faire appel à des programmes à placer sur le serveur WEB, on peut envoyer le formulaire par courrier électronique de façon simple pour l'utilisateur.
Il suffit d'ajouter un attribut particulier ACTION= dans la balise <FORM > qui précise le mode de transmission
Voici comment envoyer le contenu du formulaire par e-mail,

Etude des événements onMouse sur une image en coordonnées

Revoir si nécessiaire l'écriture des balises correspondantes aux images cliquables, par exemple dans ce cours.

Ici, on détourne les hyperliens correspondant aux zones de l'image cliquable de façon à ce qu'un clic dans une zone appelle une fonction.
Pour cela, on n'affecte pas d'URL à l'attribut HREF de la balise <AREA>.
A la place, on affecte un appel d'une fonction (déjà déclarée) aux gestionnaires d'événements onMouseOver ou onMouseOut pour réagir au passage de la souris sur chacune des zones.

<MAP NAME="mon_image"> <AREA HREF="" SHAPE="poly" COORDS="x,y,..." onMouseOver="fct1()" > <AREA HREF="" SHAPE="circle" COORDS="x,y,..."onMouseOver="fct2()" > .......................................... </MAP> .......................................... <IMG SRC="fichier image.gif" USEMAP="#mon_image">

Dans l'exemple ci-dessous le passage de la souris sur la zone France de la carte, génére un événement onMouseOver qui provoque l'appel de la fonction affiche(France), tandis que le fait de quitter cette même zone associé à l'événement onMouseOut provoque l'appel de affiche(efface).

Exemple (référence : JavaScript, Michel Dreyfus, édition Sybex)

QUELQUES ETATS D'EUROPE

Pays :
Population : hab.
Superficie : km²
Gouvernement :
Capitale :
Monnaie :