|
VII. Programmation évènementielle en JS
1.
Résumé
L'utilisateur déclenche un " évènement " (clic, déplacement souris, clic sur un bouton, choix d'une 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 connaître 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és 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.
2. Évè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 reconnaît un ensemble d'évènement associés à des balises, des liens et des composants de formulaire. Par programmation, on peut leur associer des fonctions particulières appelées
gestionnaires d'évènement appelée systématiquement lorsque ces évènement sont provoqués.
Un gestionnaire d' évènement est une procédure particulière attachée à une balise
HTML,
· qui est prédéfinie par le langage JS (par exemple onClick)
· qui est déclenchée par l'évènement correspondant (click sur un composant de type
button)
· qui apparaît 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 :
<Balise OnEvent = " Code JS ">
· 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.
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>.
3. Liste des évènements
· onBlur : se produit quand un champ Textarea 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, Rodio
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
· onAbord : 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.
a) Tableau récapitulatif
|
Gest.
Evè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 aui composant |
Text, textarea, select |
| onLoad |
Charge la page dans le navigateur |
BalisesBODY,FRAMESET |
| onMouseOut |
La souris quitte un lien ou une ancre |
Balises <A HREF..> <AREA HREF..> |
| onMouseOver |
Bouge la souris sur un lien une 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 |
Boutton submit |
| onUnload |
Quitte la page |
Balises BODY,FRAMESET |
4. Programmer un formulaire
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ènement par l'utilisateur.
a) Champ de TEXTE
<FORM NAME= "Question ">
<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.
b) Liste de sélection SELECT
|
<FORM NAME=''F ''>
<SELECT NAME=''liste''
onChange='F.résultat.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=''résultat" 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.lisste.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].tex est le texte suivant le champ <OPTION>
c) 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é au bouton N° num de la série de bouton.
d) 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).
e) 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ènemen,t
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).
5. 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,
|
<FORM ACTION=''mailto:nomDestinataire@nomServeur''
METHOD=''POST''>
…………………
<INPUT TYPE=''SUBMIT''VALUE''="Envoyer''>
<INPUT TYPE=''RESET''VALUE=''Effacer''>
</FORM> |
6. Evènements onMouse sur une image
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''> |
|
