| Javascript
 |
Généralités
Avec les événements et surtout leur gestion,
nous abordons le côté "magique"
de Javascript.
En Html classique, il y a un événement que vous connaissez bien.
C'est le clic de la souris sur un lien pour vous transporter sur une
autre page Web. Hélas, c'est à peu près le seul. Heureusement,
Javascript va en ajouter une bonne dizaine, pour votre plus grand
plaisir.
Les événements Javascript, associés aux
fonctions, aux méthodes et aux formulaires, ouvrent grand la porte
pour une réelle interactivité
de vos pages.
|
|
Les événements
Passons en revue différents événements
implémentés en Javascript.
|
Description |
Evénement |
| Lorsque l'utilisateur clique sur un bouton, un lien ou tout
autre élément. |
Clik |
| Lorsque la page est chargée par le browser ou le navigateur. |
Load |
| Lorsque l'utilisateur quitte la page. |
Unload |
| Lorsque l'utilisateur place le pointeur de la souris sur un
lien ou tout autre élément. |
MouseOver |
Lorsque le pointeur de la souris quitte un lien ou tout autre
élément.
Attention : Javascript 1.1 (donc pas sous
MSIE 3.0 et Netscape 2) |
MouseOut |
| Lorsque un élément de formulaire a le focus c-à-d devient la
zone d'entrée active. |
Focus |
| Lorsque un élément de formulaire perd le focus c-à-d que
l'utilisateur clique hors du champs et que la zone d'entrée n'est
plus active. |
Blur |
| Lorsque la valeur d'un champ de formulaire est modifiée. |
Change |
| Lorsque l'utilisateur sélectionne un champ dans un élément de
formulaire. |
Select |
| Lorsque l'utilisateur clique sur le bouton Submit pour
envoyer un formulaire |
Submit |
|
|
Les gestionnaires d'événements
Pour être efficace, il faut qu'à ces
événements soient associées les actions prévues par vous. C'est le
rôle des gestionnaires d'événements. La syntaxe est
onévénement="fonction()"
Par exemple,
onClick="alert('Vous avez cliqué sur cet
élément')".
De façon littéraire, au clic de l'utilisateur, ouvrir une boite
d'alerte avec le message indiqué.
|
|
onclick
Evénement classique en informatique, le clic
de la souris.
Le code de ceci est :
<FORM>
<INPUT TYPE="button" VALUE="Cliquez ici"
onClick="alert('Vous avez bien cliqué ici')">
</FORM>
Nous reviendrons en détail sur les formulaires dans le
chapitre suivant.
|
|
onLoad et onUnload
L'événement Load survient lorsque la page a
fini de se charger. A l'inverse, Unload survient lorsque
l'utilisateur quitte la page.
Les événements onLoad et onUnload sont utilisés sous forme
d'attributs de la balise <BODY> ou
<FRAMESET>. On peut ainsi écrire un script
pour souhaiter la bienvenue à l'ouverture d'une page et un petit mot
d'au revoir au moment de quitter celle-ci.
<HTML>
<HEAD>
<SCRIPT LANGUAGE='Javascript'>
function bienvenue() {
alert("Bienvenue à cette page");
}
function au_revoir() {
alert("Au revoir");
}
</SCRIPT>
</HEAD>
<BODY
onLoad='bienvenue()' onUnload='au_revoir()'>
Html normal
</BODY>
</HTML>
|
|
onmouseOver et onmouseOut
L'événement onmouseOver se produit lorsque
le pointeur de la souris passe au dessus (sans cliquer) d'un lien ou
d'une image. Cet événement est fort pratique pour, par exemple,
afficher des explications soit dans la barre de statut soit avec une
petite fenêtre genre infobulle.
A titre d'illustration, passez avec le pointeur de la souris sur
le mot voyelles (sans cliquer sur le lien).
Voyelles
L'événement onmouseOut, généralement associé à un onmouseOver, se
produit lorsque le pointeur quitte la zone sensible (lien ou image).
Notons qui si onmouseOver est du Javascript 1.0, onmouseOut est du
Javascript 1.1.
En clair, onmouseOut ne fonctionne pas avec
Netscape 2.0 et Explorer 3.0.
Nous parlons plus longuement de onmouseOver er de onmouseOut dans
le chapitre "Les événements -- Avancé --".
|
|
onFocus
L'événement onFocus survient lorsqu'un champ de saisie a le focus
c.-à-d. quand son emplacement est prêt à recevoir ce que
l'utilisateur à l'intention de taper au clavier. C'est souvent la
conséquence d'un clic de souris ou de l'usage de la touche "Tab".
Si vous cliquez dans la zone de texte, vous effectuez un focus
|
|
onBlur
L'événement onBlur a lieu lorsqu'un champ de formulaire perd le
focus. Cela se produit quand l'utilisateur ayant terminé la saisie
qu'il effectuait dans une case, clique en dehors du champ ou utilise
la touche "Tab" pour passer à un champ. Cet événement sera souvent
utilisé pour vérifier la saisie d'un formulaire.
Si après avoir cliqué et/ou écrit dans la zone de texte,
vous cliquez ailleurs dans le document, vous produisez un événement
Blur.
Le code est :
<FORM>
<INPUT TYPE=text onBlur="alert('Ceci
est un Blur')">
</FORM>
|
|
onchange
Cet événement s'apparente à l'événement onBlur mais avec une
petite différence. Non seulement la case du formulaire doit avoir
perdu le focus mais aussi son contenu doit avoir été modifié par
l'utilisateur.
|
|
onselect
Cet événement se produit lorsque l'utilisateur a sélectionné (mis
en surbrillance ou en vidéo inverse) tout ou partie d'une zone de
texte dans une zone de type text ou textarea. |
Fin de la partie prévue pour les débutants --- Début de la partie
considérée comme avancée
|
Gestionnaires d'événement disponibles en
Javascript
Il nous semble utile dans cette partie
"avancée" de présenter la liste des objets auxquels correspondent des
gestionnaires d'événement bien déterminé.
| Objets |
Gestionnaires
d'événement disponibles |
| Fenêtre |
onLoad, onUnload |
| Lien hypertexte |
onClick, onmouseOver, on mouseOut |
| Elément de texte |
onBlur, onChange, onFocus, onSelect |
| Elément de zone de texte |
onBlur, onChange, onFocus, onSelect |
| Elément bouton |
onClick |
| Case à cocher |
onClick |
| Bouton Radio |
onClick |
| Liste de sélection |
onBlur, onChange, onFocus |
| Bouton Submit |
onClick |
| Bouton Reset |
onClick |
|
|
La syntaxe de onmouseOver
Le code du gestionnaire d'événement onmouseOver s'ajoute aux
balises de lien :
<A HREF=""
onmouseOver="action()">lien</A>
Ainsi, lorsque l'utilisateur passe avec sa souris sur le lien, la
fonction action() est appelée. L'attribut HREF est indispensable. Il
peut contenir l'adresse d'une page Web si vous souhaitez que le lien
soit actif ou simplement des guillemets si aucun lien actif n'est
prévu. Nous reviendrons ci-après sur certains désagréments du codage
HREF="".
Voici un exemple. Par le survol du lien "message important", une
fenêtre d'alerte s'ouvre.
Le code est :
<BODY>
...
<A HREF="" onmouseOver="alert('Coucou')">message important</A>
...
<BODY>
ou si vous préférez utiliser les balises <HEAD>
<HTML>
<HEAD>
<SCRIPT language="Javascript">
function message(){
alert("Coucou")
}
</SCRIPT>
</HEAD>
<BODY>
<A HREF="" onmouseOver="message()">message important</A>
</BODY>
</HTML>
|
|
La syntaxe de onmouseOut
Tout à fait similaire à onmouseOver, sauf que l'événement se
produit lorsque le pointeur de la souris quitte le lien ou la zone
sensible.
Au risque de nous répéter, si onmouseOver
est du Javascript 1.0 et sera donc reconnu par tous les browsers,
onmouseOut est du Javascript 1.1 et ne sera reconnu que par Netscape
3.0 et plus et Explorer 4.0 et plus (et pas par Netscape 2.0 et
Explorer 3.0)
On peut imaginer le code suivant :
<A HREF="" onmouseOver="alert('Coucou')" onmouseOut="alert('Au
revoir')">message important</A>
Les puristes devront donc prévoir une
version différente selon les versions Javascript.
|
|
Problème! Et si on clique quand même...
Vous avez codé votre instruction onmouseOver avec le lien fictif
<A HREF=""... >, vous avez même prévu un petit texte, demandant
gentiment à l'utilisateur de ne pas cliquer sur le lien et comme de
bien entendu celui-ci clique quand même.
Horreur, le browser affiche alors l'entièreté des répertoires de sa
machine ou de votre site). Ce qui est un résultat non désiré et pour
le moins imprévu.
Pour éviter cela, prenez l'habitude de mettre l'adresse de la page
encours ou plus simplement le signe # (pour un ancrage) entre les
guillemets de HREF. Ainsi, si le lecteur clique quand même sur le
lien, au pire, la page encours sera simplement rechargée et sans
perte de temps car elle est déjà dans le cache du navigateur.
Prenez donc l'habitude de mettre le code suivant
<A HREF="#" onmouseOver="action()"> lien </A>.
|
|
Changement d'images
Avec le gestionnaire d'événement onmouseOver, on peut prévoir
qu'après le survol d'un image par l'utilisateur, une autre image
apparaisse (pour autant qu'elle soit de la même
taille).
le code est relativement simple.
<HTML>
<HEAD>
<SCRIPT LANGUAGE="Javascript1.1">
function lightUp() {
document.images["homeButton"].src="button_hot.gif"
}
function dimDown() {
document.images["homeButton"].src="button_dim.gif"
}
</SCRIPT>
</HEAD>
<BODY>
<A HREF="#" onmouseOver="lightUp();" onmouseOut="dimDown();">
<IMG SRC="button_dim.gif" name="homeButton" width=100 height=50
border=0> </A>
</BODY>
</HTML>
Compléter toujours en Javascript les
attributs width=x height=y de vos images.
Il n'y a pas d'exemple ici pour la
compatibilité avec les lecteurs utilisant explorer 3.0 en effet, non
seulement onmouseOut mais aussi image[] est du Javascript 1.1.
|
|
L'image invisible
Ce changement d'image ne vous donne-t-il pas des idées?... Petit
futé! Et oui, on peut prévoir une image invisible de la même couleur
que l'arrière plan (même transparente). On la place avec malice sur
le chemin de la souris de l'utilisateur et son survol peut ,à l'insu
de l'utilisateur, déclencher un feu d'artifice d'actions de votre
choix. Magique le Javascript ? |
|
