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.
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.
voici quelques évènements et leurs description
| 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 |
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
De façon littéraire, au clic de l'utilisateur, ouvrir une boite d'alerte avec le message indiqué.
| nclick Evénement classique en informatique, le clic de la souris. <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.
|
| 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). 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. <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. |
| 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é.
| ||||||||||||||||||||||
| La syntaxe de onmouseOver Le code du gestionnaire d'événement onmouseOver s'ajoute aux balises de lien : 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 ? |
RSS Feed (xml)
Aucun commentaire:
Enregistrer un commentaire