Les
évènements sont des actions de l'utilisateur, qui
vont pouvoir donner
lieu à une interactivité.
L'événement par excellence est le clic
de souris, car c'est le seul que le HTML gère.
Grâce au Javascript il est possible
d'associer des fonctions, des méthodes à des
événements tels que le passage
de la souris au-dessus d'une zone, le changement d'une valeur, ...
Ce sont les gestionnaires
d'événements qui permettent d'associer une action
à un événement.
La syntaxe d'un gestionnaire d'événement est la
suivante:
onEvenement="Action_Javascript_ou_Fonction();"
Les gestionnaires
d'événements sont associés
à des objets, et leur code s'insèrent
dans la balise de ceux-ci...
Quelques
exemples d'événements
|
Le
mieux pour apprendre à se servir des
événements est de s'entraîner
à écrire de petits codes...
Pour vous inspirer, pensez à regarder les fichiers sources
de certaines pages web, mais
pensez toujours à respecter les auteurs des codes en ne
faisant pas un copier-coller de leurs
scripts sans leur accord (il est généralement de
bon ton de citer la source du javascript
que l'on récupère...).
| Ouverture d'une boite de dialoque
lors d'un click |
Le code correspondant
à une boîte de dialogue est très
simple:
window.alert("Votre
Texte");
Il s'agit donc de le mettre dans la balise d'un lien hypertexte:
Script:
<html>
<head>
<title>Ouverture d'une boite de dialogue lors d'un
click</head>
</head>
<body>
<a href="#" onClick="window.alert('Message d\'alerte a utiliser
avec moderation');return(false)">Cliquez ici!</a>
</body>
</html>
Analyse du script:
- le gestionnaire
d'événement onClick a
été inséré dans la balise
de lien hypertexte <A href...
- le seul but du script est de faire
apparaître une boîte de
dialogue, ainsi on ne désire pas que le lien nous
entraîne sur une
autre page,
il faut alors insérer "#" dans l'attribut href
pour signaler au navigateur que l'on désire rester sur la
page en cours. Il ne faut pas mettre
un attribut vide au risque de révéler le contenu
de votre répertoire à vos visiteurs...)
- Remarquez l'emploi de \'
dans la phrase "Message d'alerte a utiliser avec moderation"
Le signe antislash (\) précédant le guillemet
permet de signaler au
navigateur qu'il ne faut pas l'interpréter comme un
délimiteur de
chaîne
mais comme un simple caractère pour éviter qu'il
génère une erreur!
Modification
d'une image lors du survol d'un lien par le pointeur de la souris
|
Il peut être
agréable de jouer avec le gestionnaire OnMouseOver
pour créer un menu interactif
qui se modifie au passage de la souris. On peut même ajouter
le gestionnaire OnMouseOut pour rétablir
l'image
originale lorsque le curseur quitte l'image (Rappel:
Son utilisation est limitée aux navigateurs supportant
javascript 1.1 et supérieur!).
Script:
<html>
<head>
<title>Modification d'une image lors du passage de la
souris</head>
</head>
<body>
<a href="#" onMouseOver="document.Img_1.src='image2.gif';"
onMouseOut="document.Img_1.src='image1.gif';"> <img
name="img_1"
src="image1.gif"> </a>
</body>
</html>
Analyse du script:
- Pour pouvoir associer
un événement à une image il faut que
celle-ci soit considérée
comme un lien, ainsi on place la balise <img
...> entre les balises <a ...>
et </a>
- L'événement onMouseOut
est limitée aux navigateurs supportant
javascript 1.1 et supérieur
