Vous y avez gouté...
Créons des messages d'alertes...
générons des messages "mouseover"...
bien !
Après cette leçon, vous pourrez :
Note : Si vous n'avez pas les documents des leçons précédentes, téléchargez une copie maintenant.
Notre première dose de JavaScript consiste à intégrer une commande dans un tag hyperlien pour faire autre chose qu'envoyer vers un URL quand on clique sur le lien. Cela permet aux liens de faire plus que simplement transférer vers un autre document :
<a href="alt.html" onClick="Texte JavaScript; return false">Texte du lien</a>
NOTE : Le texte JavaScript décrit sera exécuté quand l'internaute clique sur le lien hypertexte. L'évènement onClick="..." est activé par un clic de souris. Notez que le "C" doit être en majuscules !
L'ajout du texte JavaScript return false indique au navigateur web d'ignorer l'URL du tag href=. Pourtant, si le navigateur de la personne consultant la page ne supporte pas le JavaScript, le code onClick="..." est ignoré et l'internaute est envoyé vers l'URL alt.html. Cela permet de supporter une palette d'utilisateurs très large en proposant une page HTML à la place du JavaScript. Si vous voulez vérifier que ça marche, allez dans les Préférences/Options de votre navigateur et cherchez une case où désactiver le JavaScript (n'oubliez pas de le réactiver quand vous avez fini !). Cela vaut le coup si vous ajoutez des fonctionnalités JavaScript dans vos pages.
La première chose que nous allons faire est de modifier la page de terminologie de notre projet Web Volcan, afin que la liste de mots du premier paragraphe affiche un message d'alerte expliquant leur signification.
<li><A HREF="term_1.html" onClick="alert('Une caldera est une dépression
de terrain de forme circulaire causée par l\'éruption d\'une plaque
de magma proche de la surface.'); return false">caldera</A>
<li><A HREF="term_2.html" onClick="alert('La vésicularité est une mesure qui consiste
à évaluer le pourcentage de poches d\'air dans le volume d\'une roche.'); return false">
vésicularité</a>
<li><A HREF="term_3.html" onClick="alert('La Pahoehoe est un flot de lave de type basaltique
qui vient d\'un mot Hawaiien signifiant lisse et effilé.'); return false">pahoehoe</a>
<li><A HREF="term_4.html" onClick="alert('La rhéologie est l\'étude de la déformation
des matériaux.'); return false">rhéologie</a>
<li><A HREF="term_5.html" onClick='alert("Un lahar est une coulée de boue
partant des flancs d'un volcan. On dit que le mot vient de la phrase \"Attention !\"
en Indonésien."); return false'>lahar</a>
NOTES : nous avons créé une commande JavaScript qui annule le tag hyperlien avec une instruction affichant une phrase dans une boite "d'alerte" à l'écran.
Le code JavaScript renverra un message d'erreur si il y a des caractères RETOUR CHARIOT dans la commande ! Donc, chaque ligne <li> ne doit avoir qu'un seul RETOUR CHARIOT en fin de ligne. Si vous voulez copier et coller ce code, utilisez cet exemple qui se chargera dans une nouvelle fenêtre de navigateur.
Si il y a des erreurs dans votre JavaScript, le navigateur génèrera des messages d'erreur en essayant d'interprêter le code. Pour voir comment ça marche, faites le Test d'Erreur JavaScript.
Regardez attentivement comment les guillemets sont utilisés dans la partie onClick du tag. La commande JavaScript toute entière doit être entre guillemets. Et la commande alert doit aussi être incluse entre guillemets. On utilise indifféremment les cotes ou les guillemets pour cela :
<A HREF="#" onClick="alert('Vous Ítes le patron !')">Dis-moi quelque chose</A>
est équivalent à :
<A HREF="#" onClick='alert("Vous Ítes le patron !")'>Dis-moi quelque chose</A>
Et après ? Supposons que le message que vous voulez afficher dans l'alerte JavaScript doive contenir le caractère guillemet. JavaScript doit savoir que le guillemet signifie simplement le caractère guillemet et non une partie de l'instruction JavaScript. Il suffit de le précéder de la barre oblique inversée (backslash - \), astuce connue chez les techniciens sous le nom de "séquence d'échappement".
Dans l'exemple ci-dessus, nous voulons entourer le mot Attention ! du dernier élément de la liste entre guillemets. Si nous voulions utiliser les simples cotes, voici comment procéder :
<li><A HREF="#" onClick="alert('Un lahar
est une coulée de boue partant des flancs d\'un volcan. On dit que le mot vient
de la phrase \'Attention !\' en Indonésien.')">lahar</a>
Mais, comme nous voulions des guillemets, nous avons interverti les cotes et les guillemets comme suit :
<li><A HREF="#" onClick='alert("Un lahar
est une coulée de boue partant des flancs d'un volcan. On dit
que le mot vient de la phrase \"Attention !\" en
Indonésien.")'>lahar</a>
Pour finir, nous devons créer 5 nouvelles (et petites) pages HTML pour les internautes n'ayant pas JavaScript.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//FR"> <html> <head> <title>Terminologie des Volcans</title> </head> <BODY BGCOLOR=#000000 TEXT=#FFFF00 LINK=#33CCFF VLINK=#FF6666> <h2 align=center> Une <font color="#FF0000">Caldera</font> est une dépression de terrain de forme circulaire causée par l'éruption d'une plaque de magma proche de la surface</h2> <center> <a href="term.html">retour</a> </center> </body> </html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//FR"> <html> <head> <title>Terminologie des Volcans</title> </head> <BODY BGCOLOR=#000000 TEXT=#FFFF00 LINK=#33CCFF VLINK=#FF6666> <h2 align=center> La <font color="#FF0000">Vésicularité</font> est une mesure qui consiste à évaluer le pourcentage de poches d'air dans le volume d'une roche. </h2> <center> <a href="term.html">retour</a> </center> </body> </html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//FR"> <html> <head> <title>Terminologie des Volcans</title> </head> <BODY BGCOLOR=#000000 TEXT=#FFFF00 LINK=#33CCFF VLINK=#FF6666> <h2 align=center> La <font color="#FF0000">Pahoehoe</font> est un flot de lave de type basaltique qui vient du mot Hawaiien lisse et effilé. </h2> <center> <a href="term.html">retour</a> </center> </body> </html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//FR"> <html> <head> <title>Terminologie des Volcans</title> </head> <BODY BGCOLOR=#000000 TEXT=#FFFF00 LINK=#33CCFF VLINK=#FF6666> <h2 align=center> La <font color="#FF0000">rhéologie</font> est l'étude de la déformation des matériaux. </h2> <center> <a href="term.html">retour</a> </center> </body> </html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//FR"> <html> <head> <title>Terminologie des Volcans</title> </head> <BODY BGCOLOR=#000000 TEXT=#FFFF00 LINK=#33CCFF VLINK=#FF6666> <h2 align=center> Un <font color="#FF0000">lahar</font> est une coulée de boue partant des flancs d'un volcan. On dit que le mot vient de la phrase "Attention !" en Indonésien </h2> <center> <a href="term.html">retour</a> </center> </body> </html>
Jusqu'ici, nous avons appris comment utiliser JavaScript pour faire quelque chose quand un utilisateur clique sur un lien hypertexte. Nous pouvons ajouter une autre fonctionnalité à nos hyperliens pour faire quelque chose quand l'utilisateur déplace simplement sa souris sur le texte du lien (sans cliquer dessus).
Le comportement normal pour cette action consiste, pour le navigateur, à afficher dans la barre d'état (généralement en bas à gaucbe de la fenêtre du navigateur) l'URL auquel le lien conduit, comme quand vous déplacez votre souris, sans cliquer, sur ce lien vers notre didacticiel.
Avec JavaScript, nous pouvons créer un message personnalisé qui s'affichera à la place de l'URL, comme ce second lien vers notre didacticiel. En cliquant l'un de ces deux liens, vous serez transféré vers le site web spécifié dans l'URL de l'hyperlien.
Le format JavaScript pour ajouter cette fonctionnalité est :
<a href="xxxx.html"
onMouseOver="window.status='texte personnalisé';
return true">texte du lien</a>
L'évènement JavaScript qui déclenche le message personnalisé est onMouseOver="...", ce qui veut dire que le lien hypertexte dit : "quand la souris passe sur moi, faire ceci". Il y a ici deux fonctions JavaScript différentes, séparées par un point-virgule (;).
window.status='texte personnalisé';Cette commande JavaScript dit : "Afficher dans la barre d'état tout ce qui se trouve entre guillemets".
return trueCe "message" est renvoyé au navigateur pour lui confirmer que la commande est terminée. Nous ne pouvons pas expliquer ce qui est réellement nécessaire, mais ça ne marchera pas sans que vous incluiez tout cela !
Maintenant, nous allons ajouter un message mouseOver aux liens que nous avons modifié pour la page web de terminologie qui affiche les alertes.
<ul>
<li><A HREF="term_1.html"
onClick="alert('Une caldera est une dépression de terrain de forme circulaire
causée par l'éruption d'une plaque de magma proche de la surface'); return false"
onMouseOver="window.status='Qu'est-ce qu'une caldera ?';
return true">caldera</A>
<li><A HREF="term_2.html"
onClick="alert('La Vésicularité est une mesure qui consiste à évaluer le pourcentage de poches d'air
dans le volume d'une roche.'); return false"
onMouseOver="window.status='Qu'est-ce que la vésicularité ?';
return true">vésicularité</a>
<li><A HREF="term_3.html"
onClick="alert('La Pahoehoe est un flot de lave de type basaltique qui vient du mot
Hawaiien lisse et effilé.'); return false"
onMouseOver="window.status='Qu'est-ce que la pahoehoe ?';
return true">pahoehoe</a>
<li><A HREF="term_4.html"
onClick="alert('La Rhéologie est l'étude de la déformation des matériaux.'); return false"
onMouseOver="window.status='Qu'est-ce que la rhéologie ?';
return true">rheology</a>
<li><A HREF="term_5.html"
onClick='alert("Un lahar est une coulée de boue partant des flancs d'un volcan.
On dit que le mot vient de la phrase \"Attention !\" en Indonésien");
return false'
onMouseOver="window.status='Qu'est-ce qu'un lahar ?';
return true">lahar</a>
</ul>
NOTE : Si vous souhaitez copier et coller ce code, utilisez cet exemple de HTML qui s'affichera dans une nouvelle fenêtre.
<map name="volcmap"> <area shape="rect" href="http://volcano.und.edu/vwdocs/frequent_questions/grp7/europe/question308.html" coords="48,46,204,153" onMouseOver="window.status='informations sur les volcans de type surtseyan'; return true"> <area shape="rect" href="explode.html" coords="0,66,26,227" onMouseOver="window.status='description de l\'échelle du dynamisme explosif'; return true"> <area shape="rect" href="height.html" coords="95,283,378,309" onMouseOver="window.status='description de l\'échelle de hauteur de la colonne éruptive'; return true"> <area shape="rect" href="http://www.geo.mtu.edu/volcanoes/pinatubo/" coords="321,154,468,261" onMouseOver="window.status='informations sur les volcans de type plinien'; return true"> <area shape="rect" href="http://stromboli.net/" coords="172,155,318,274" onMouseOver="window.status='informations sur les volcans de type strombolien'; return true"> <area shape="rect" href="http://hvo.wr.usgs.gov/volcanowatch/" coords="36,155,168,276" onMouseOver="window.status='informations sur les volcans de type hawaiien'; return true"> <area shape="rect" href="http://www.geo.mtu.edu/volcanoes/santamaria/" coords="90,3,343,123" onMouseOver="window.status='informations sur les volcans de type phréato-plinien'; return true"> </map>
NOTE : Si vous souhaitez copier et coller ce code, utilisez cet exemple de HTML qui s'affichera dans une nouvelle fenêtre.
Si votre JavaScript marche, la barre d'état affichera les messages personnalisés décrivant les liens, quand vous déplacez votre souris sur la page, plutôt que les URLs.
NOTE : Depuis Avril 1999, cette technique des onMouseOver à l'intérieur des tags <map>...</map> ne fonctionne pas sous les navigateurs Microsoft Internet Explorer 5.0.
Utiliser la technique du mouseOver peut être une fonctionnalité efficace de votre site web, mais gardez à l'esprit qu'il est parfois plus utile pour l'internaute de connaître l'URL vers lequel le lien connecte (par exemple pour connaître le nom de la compagnie propriétaire du site web grâce à son URL) -- le message onMouseOver cache cette information. Utilisez-le là oû cela est un besoin, autant pour la conception de votre site web que pour les utilisateurs.
Comparez vos pages web avec cet exemple du document-type. Si vos pages sont différentes de l'exemple ou que les liens hypertexte ne fonctionnent pas correctement, vérifiez le texte que vous avez tapé dans l'éditeur de texte. Souvenez-vous que le JavaScript est très sensible aux fautes de frappe -- un guillemet ou un point-virgule manquants peuvent détruire votre page !
Revoyons les grandes lignes de cette leçon :
Ajoutez quelques alertes JavaScript et du code mouseOver dans quelques hyperliens de vos pages web.
Points Supplémentaires : Pouvez-vous trouver un moyen pour qu'un mouseOver génère une alerte ?
Prenez une deuxième dose d'aspirine web dans votre pharmacie JavaScript... JavaScript qui crée du contenu et des bas-de-page dynamiques.
Ecrire le HTML : Leçon 27a : Une 'tite Dose de JavaScript : Alertes et Rollovers
©1994-2003
Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges
La 'net connection (en anglais) à MCLI est
Alan Levine
Suggestions en Français à Bernard Bensoussan
URL: http://www.mcli.dist.maricopa.edu/tut/tut27a.html