Guide pratique et progressif du langage Javascript

Les événements et les scripts

Ça fait quoi le javascript ?

L'inconvénient du Javascript c'est que l'interaction avec le monde extérieur est sérieusement limitée pour des raisons de sécurité, on peut présenter des panneaux, écrire du texte ou du html, montrer des images, faire défiler du texte en bas de page, etc, mais pas question de lire ou d'écrire un fichier sans passer par d'autres outils qui nécessitent une infrastructure professionelle qui n'est généralement pas mise à disposition par un fournisseur d'accès "normal" (pour ne pas dire ordinaire), et encore moins quand il est gratuit.

Comme vaguement évoqué dans la page précédente, Javascript et le HTML possèdent une grande quantité de fonctions.

Il en existe plusieurs catégories, des fonctions générales (liées à la page web ou non), des fonctions consacrées aux objets que la page peut contenir (boutons, liens, formulaires, ...), des fonctions mathématiques, des fonctions de date, de navigation, etc... Une certaine catégorie de ces fonctions s'appelle les événements, car elles ne sont actives que suite à une action bien précise de l'utilisateur (un clic, une touche du clavier, un mouvement de souris, un changement de taille de fenêtre, ...) et se placent généralement tout simplement dans des commandes HTML existantes, ce sont des fonctions faciles à utiliser car elles nécessitent peu ou pas de programmation.

Les événements

Comme je vous sens totalement fébrile à l'idée d'écrire déjà votre première page WEB avec du Javascript et que je n'ai pas encore réussi à vous faire décrocher, je ne vais pas m'étendre pour le moment sur ce sujet, je vais vous en donner un petit échantillon, ainsi que quelques fonctions, juste pour démarrer:

onLoad()=""	S'exécute quand on charge la page web, doit être placé dans `<BODY>`
onUnload()=""	S'exécute quand on quitte la page web, doit être placé dans `<BODY>`
onmouseOver=""	S'exécute quand on met le pointeur sur un objet, peut être placé dans le lien `<A HREF="">`
onmouseOut=""	S'exécute quand le pointeur quitte un objet, peut être placé dans le lien `<A HREF="">`
alert("texte ici")	Affiche un panneau avec le texte et un bouton OK
window.status=""	Affiche un texte en bas de page, avec un peu de boulot (comprenez un peu de programmation), permet de faire défiler du texte

Attention ! Javascript 1.0 et 1.1 sont sensibles aux majuscules/minuscules, trompez-vous dans l'emplacement du caractère majuscule ou oubliez-le et ça ne marchera pas.

Attention bis ! onmouseOut="" est du Javascript 1.1, ça ne fonctionnera donc pas avec Netscape 2.0 et Internet Explorer 3.0, vous étiez prévenus, ne pleurez pas.

Si ces quelques événements et fonctions ne vous suggèrent rien, il vaut peut-être mieux pour vous abandonner tout de suite le Javascript, si par contre elles vous donnent des démangeaisons au bout des doigts, attendez donc encore la fin de la page, avant d'aller faire des bêtises et d'aller au devant de grandes déceptions...

On peut naturellement imbriquer les événements avec les fonctions,
par exemple:

<BODY onLoad="alert('Bonjour !');" onUnload="alert('Au revoir !');">

Est parfaitement valide bien qu'épouvantablement casse-pieds ! Le HTML est en rouge, les ajouts Javascripts au HTML sont en vert, et le Javascript pur est en bleu. Si vous n'arrivez pas à comprendre ce que fait ce petit bout de "programme" javascript, essayez-le dans une de vos pages...

Pour les petits curieux, voici déjà et comme promis une liste complète et barbante d'événements, mais absolument indispensable pour savoir tout ce que l'on peut faire en javascript interractif.

Les scripts

Là, ça se complique un peu, mais on va tâcher d'y aller en douceur.

Les événements c'est bien et c'est indispensable, mais ce n'est pas toujours suffisant. De plus, bien qu'on puisse faire beaucoup de choses à l'intérieur d'un événement, il vaut mieux que celui-ci exécute un script qui lui, contiendra tout ce que vous voulez faire et ne sera pas forcément répété à chaque objet ou événement, donc, à de nombreuses fois dans la page.

Pour qu'un script s'exécute, il faut qu'il soit dans la partie de la page déjà reçue et de préférence avant l'événement qui l'appelle, et pour qu'il ne s'exécute qu'à un moment bien précis, et pas au chargement de la page, on place ce genre de scripts dans la partie <HEAD></HEAD> du document, grâce aux marqueurs <SCRIPT> et </SCRIPT>.

Si toutefois l'on souhaite que le script en question s'exécute dans une partie bien précise de la page au lieu d'être appelé par un évenement, on le placera à l'endroit voulu.

De plus, pour ne pas que le script s'affiche bêtement dans l'écran des navigateurs de l'époque héroïque qui ne comprennent pas les marqueurs <SCRIPT>, on utilise une petite astuce du langage HTML. Ce qui donne:


<HEAD>
  <SCRIPT LANGUAGE="Javascript">
    <!-- ;                            (astuce anti-affichage de script)

      vos scripts Javascript ici

    // -->                            (astuce anti-affichage de script)
  </SCRIPT>
</HEAD>

Il faut encore savoir qu'une ligne de javascript (qui ne coïncide pas forcément avec la fin physique d'une ligne) doit se terminer obligatoirement par un ";" ce qui permet de mettre plusieurs instructions par ligne physique ou inversement une instruction complexe et longue répartie sur plusieurs lignes, ce qui en facilite la lecture.
Le "//" est le début d'un commentaire en Javascript, ce qui le suit n'est pas exécuté.
on peut mettre autant de scripts que l'on veut dans l'exemple ci-dessus.

Ne paniquez pas déjà, nous reverrons tranquillement cela plus loin.

On mélange les deux et on touille

Pour faire un exemple utile, nous allons dynamiser l'aspect d'un bouton graphique dans un lien, pour cela il nous faut donc:

Une bête page web: celle-ci fera très bien l'affaire
Un lien "classique": <A HREF="PageX.html"> <IMG SRC="pic1.gif"> </A>
Deux images, "pic1.gif" que voici: et "pic1.actif.gif" que voilà:

Et on bricole le lien HTML de la manière suivante:

<A HREF="PageX.html" onmouseOver="actif();" onmouseOut="passif();"><IMG SRC="pic1.gif" NAME="bouton1"></A>

En fait, on ajoute simplement au lien (en noir) les événements onmouseOver="" et onmouseOut="" qui appellent respectivement les scripts actif() et passif() (qu'il faut encore créer) et on donne un nom à l'objet image que l'on doit changer avec NAME="bouton1" dans le marqueur HTML correspondant (soit, <IMG SRC="">, puisque j'ai promis de tout vous dire).

Rappel: Attention aux majuscules/minuscules "onmouseout" n'est pas identique à "onmouseOut" ni à "Onmouseout", c'est valable aussi pour les scripts de nom "actif" et "passif" et tout le javascript version 1.1 ou moins.

Et maintenant le script (ou plutôt les scripts) entre <HEAD></HEAD>:


<SCRIPT LANGUAGE="Javascript">
  <!-- ;
  function actif(){document.images["bouton1"].src="pic1.actif.gif"};
  function passif(){document.images["bouton1"].src="pic1.gif"};
  // -->
</SCRIPT>

Voici maintenant quelques explications:

En passant le pointeur de la souris sur le lien <A HREF="">, la fonction onmouseOver="" appelle le script actif(), celui-ci attribue le contenu du fichier de nom "pic1.actif.gif" à l'objet image de nom "bouton1". Les notions d'objet et de hiérarchie sont très importantes en Javascript, et nous y reviendrons.

En éloignant le pointeur de la souris du lien, la fonction onmouseOut="" n'appelle pas le script passif() qui n'attribue pas le fichier "pic1.gif" à l'objet image de nom "bouton1" sous netscape 2.0 ou msie 3.0 (puisque onmouseOut n'existe pas) et laisse l'image bêtement sélectionnée.

Ce qui donne: (Vous pouvez contrôler en passant le pointeur sur cette horreur).

Plus simple, mais...

Si vous êtes un esprit fin, vous aurez remarqué que dans l'exemple ci-dessus, l'utilité d'un script est non seulement nulle mais même ridicule, en effet, comme on donne le nom de l'objet image et celui du fichier dans le script, celui-ci n'est valable que pour un seul bouton.

Il aurait fallu passer en paramètre ces deux noms au script pour justifier sa présence, mais le but de l'exercice était de vous faire prendre des bonnes habitudes tout de suite, sans rien compliquer, tout en vous donnant quelque chose à vous mettre sous la dent.

Pour un nombre limité de boutons il aurait encore mieux valu écrire directement:

<A HREF="PageX.html" onmouseOver="document.images['bouton1'].src='pic1.actif.gif';" onmouseOut="document.images['bouton1'].src='pic1.gif';"> <IMG SRC="pic1.gif" NAME="bouton1"> </A>

Et se passer du script, mais cette méthode à des inconvénients que nous verrons plus loin.

A noter: l'utilisation d'apostrophes ' ' entre les guillemets " " pour ne pas fausser la syntaxe html.

Si vous désirez seulement changer une image sans pour autant aller quelque part en cliquant dessus, mettez simplement <A HREF="#" ...>, car il n'est pas possible d'utiliser onmouseOut et on mouseOver sans lien ou objet.

Comme vous le voyez, il existe plusieurs façons d'écrire un programme, ce qui rend les choses encore plus compliquées pour lire et comprendre celui d'une autre personne, et il existe aussi de bonnes et de mauvaises habitudes pour l'écriture, je vais essayer de vous faire utiliser les "bonnes", même si elles semblent plus compliquées, elles sont largement payantes au bout du compte.

Ca ne fonctionne pas chez vous ? (Javascript strict)

Et bien c'est normal si vous n'utilisez pas netscape ou msie (version 4 ou plus) et que le Javascript de votre navigateur est plus strict (pour ne pas dire plus standard), si l'on veut faire les choses proprement, il faut encore passer par quelques étapes de plus, ces étapes permettent aussi le chargement préalable de toutes les images (normales et alternées) ce qui ne provoque pas d'attente quand on passe le pointeur dessus la première fois, c'est la bonne marche à suivre même si ce n'est pas la plus simple, et la voici:

Déclarer un tableau (de nom "img") qui va contenir les images, de la façon suivante:
img=new Array();
Déclarer un objet image pour chaque image de la page, comme ça:
img[0]=new Image();
img[1]=new Image();
Donner le nom du fichier de chaque image dans la propriété correspondante (.src):
img[0].src="imageoff.gif";
img[1].src="imageon.gif";
Mettre tout ça dans une routine entre <HEAD></HEAD>:
function initialisation() { img=new Array(); img[0]=new Image(); img[0].src="imageoff.gif"; img[1]=new Image(); img[1].src="imageon.gif" }
Executer la routine au chargement de la page dans le marqueur BODY:
<BODY onLoad="initialisation();">
Et enfin l'utiliser dans les routines actif et passif entre <HEAD></HEAD>:
<SCRIPT> ; </SCRIPT>

Pourquoi tant de haine ? Et bien certaines versions de javascript estiment qu'il ne faut pas laisser remplir certaines propriétés avec n'importe quel type de variable et qu'une propriété quelconque ne peut être égale qu'à une propriété de même type, tel par exemple que l'adresse d'une page HTML: document.location=liste[0].location et non pas directement document.location="http://xxx.yyy/mapage.html", et donc que document.images[xxx].src ne peut pas être directement égal à un nom de fichier image, pas de panique, nous reparlerons plus loin des propriétés, des types et autres mic-mac.

D'accord, c'est beaucoup plus long et beaucoup plus compliqué, mais bien plus efficace, clair et bien plus compatible.

Vous avez le choix d'écrire des programmes simples qui fonctionnent apparement bien chez vous sans vous casser la tête, ou d'écrire vos programmes avec soin pour limiter l'affichage de nombreuses erreurs par page et obtenir un fonctionnement correct sur un maximum de machines et de versions, à vous de choisir.

Pas si vite !

Ne courez pas tout de suite modifier vos 250 pages web avec des images alternées grâce à ces rudiments, vous pourriez le regretter quand vous serez obligé de refaire le travail, attendez si possible d'en savoir plus (lisez au moins la page suivante).

Retour Suite

Dernière mise à jour de cette page: 10/03/2002, visiteurs:

depuis le 6 avril 2002