Scripts et routines

Limiter les dégats
Maintenant que vous avez enfin vu quelque chose de concret et de fonctionnel après tout ce blabla, essayons de réduire les problèmes et de simplifier le travail (alléchant non ?).

Pour faire des scripts utilisables par tout le monde, voire ne fonctionnant pas mais au moins ne générant pas des kyrielles d'erreurs à vous décourager de lire la page, il existe au moins deux possibilités, écrire une série de scripts par version du langage ou limiter l'exécution des scripts au Javascript 1.2, c'est-à-dire en fait juste Netscape 4.0 (ou peut-être plus, il y a des problèmes de compatibilité avec la 4.7) et MSIE 4.x, 5.x (idem) et ignorer les autres.

Autre possibilité, se limiter aux fonctions disponibles du javascript 1.0 (voire 1.1 si l'on veut se permettre d'oublier les antiquités pour pauvres ou nostalgiques).

Rappelez-vous du marqueur <SCRIPT LANGUAGE="Javascript">, eh bien si vous mettez la version du langage avec le nom de celui-ci, seuls les navigateurs possédant cette version exécuteront le contenu de ce marqueur.

Les masochistes et les forçats eux utiliseront:

<SCRIPT LANGUAGE="Javascript1.0">
les scripts pour les antiquités ici
</SCRIPT>
<SCRIPT LANGUAGE="Javascript1.1">
les scripts pour les vieilleries ici
</SCRIPT>
<SCRIPT LANGUAGE="Javascript">
les scripts pour le reste (1.2, 1.3, etc...) ici
</SCRIPT>

Pour les cas vraiment très graves (genre sado-masochistes) il est aussi possible d'écrire encore plus de scripts en testant quel est le navigateur utilisé, et quelle en est la version, à fin d'utiliser les innombrables, merveilleuses et incompatibles finesses de chacun d'entre eux.

A vous de voir ce que vous voulez faire, quant à moi je pense que si l'on souhaite uniquement fournir un "plus" par rapport au html standard, il est possible d'ignorer tout ce qui n'est pas du 1.2 en utilisant <SCRIPT LANGUAGE="Javascript1.2"> uniquement, ce qui ne générera pas d'erreurs d'objets ou de fonctions non existantes avec des vieilles versions, mais nécessitera des changements dans toutes les pages le jour où la 1.3 sortira...


Les routines
Et maintenant un dernier truc pénible à encaisser (pour cette page), ça s'appelle "passer des paramètres à une fonction", ça permet d'utiliser la même fonction pour une quantité illimitée de choses parfaitement identiques, mais toutes différentes... Pour information, une fonction de ce genre est appelée alors, "une routine", devinez pourquoi.

Prenez l'exemple précédent, comme on utilise des noms fixes il ne sert que pour un seul bouton, grave erreur, il suffit de modifier le script comme ça:

<SCRIPT LANGUAGE="Javascript1.2">
<!-- ;
var bouton="";      // (déclare la variable de nom "bouton" en mode texte);
var fichier="";     // (déclare la variable de nom "fichier" en mode texte);
function actif(bouton,fichier){document.images[bouton].src=fichier};
function passif(bouton,fichier){document.images[bouton].src=fichier};
// -->
</SCRIPT>

Et de bricoler le lien comme ceci:

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

Pour un autre bouton ?

<A HREF="PageY.html" onmouseOver="actif('bouton2','pic1.actif.gif');" onmouseOut="passif('bouton2','pic1.gif');"><IMG SRC="pic1.gif" NAME="bouton2"></A>

Si l'image du bouton doit être différente, il suffit simplement de changer aussi ce nom de fichier (pic1.gif et pic1.actif.gif), soit:

<A HREF="PageZ.html" onmouseOver="actif('bouton3','zorro.gif');" onmouseOut="passif('bouton3','estarrivé.gif');"><IMG SRC="zorro.gif" NAME="bouton3"></A>


Variables+Fonctions()+Tableaux['']=Charabia !
Aaaaaaaaaaaaaaaaaaaaaaaaarrrrrrrrrrrrrrrrgggghh !

Qu'est-ce que c'est que tout ce bigntz ? Des guillemets, des zapostrophes, des parenthèses, des crochets, des zaccolades, des noms tordus, non mais ! Y'a pas marqué la poste ici et c'est pas non plus la SNCF ! (Par contre, mon guide ne fait jamais la grève, lui).

Et pourtant c'est possible, même si je n'y suis pas allé avec le dos de la cuillère, pas de panique, c'est plus simple que vous ne le pensez, ceux qui ont des notions de programmation et qui ont tout compris peuvent passer à la suite, les autres, attachez vos ceintures, on y va.

Un texte entre guillemets (ou apostrophes) représente ce qu'on appelle une chaîne de caractères:
"silence" ou 'silence' représente pour javascript les caractères "s" "i" "l" "e" "n" "c" "e", les uns à la suite des autres, alors que le mot silence représente:

  1. Une fonction s'il est suivi de parenthèses, exemple: alert(){}; Les parenthèses servent à recevoir d'éventuels paramètres (nous y reviendrons) et les accolades délimitent ce que la fonction exécute quand on l'apelle.

    Une fonction est une suite d'opérations qui fait quelque chose ou qui retourne une valeur calculée (un nombre, un mot, une phrase, une date etc...).

  2. Une variable s'il est suivi d'un opérateur (plus, moins, fois, divisé, etc...) ou du signe "=", exemple: nombre=2.

    Une variable, c'est une espèce de mémoire qui retourne simplement la valeur que l'on y met.

    • Pour déclarer une variable en javascript strict (et 1.0) on utilise la commande "var", exemple:
      var zoubida=5; (rappel: pour terminer une ligne de javascript on utilise toujours ";")
    • Pour afficher le contenu de la variable zoubida on peut utiliser la commande "document.write", exemple:
      document.write(zoubida);
      Si zoubida contient toujours le nombre 5, cette commande écrira "5" dans la page web.
      Si quelque part dans le programme on affecte à zoubida la valeur 3.14, la même commande que ci-dessus affichera "3.14" etc...
    • Si vous voulez écrire le mot "zoubida", vous utiliserez les guillemets ou les apostrophes pour délimiter le mot:
      document.write('zoubida');
    • Ou bien vous affecterez la chaîne de caractère "zoubida" à une variable (pourquoi pas à la variable zoubida car je suis sadique) de la manière suivante:
      var zoubida="zoubida";
      Et en utilisant: document.write(zoubida); vous obtiendrez ce résultat.
    • L'oubli de guillemets ou d'apostrophes, est souvent la cause de problèmes, si on écrit:
      document.write(salut les amis); il est très peu probable que quoi que ce soit s'affiche, sauf si vous avez utilisé une des variables salut, les et/ou amis, celles-ci seront vides et il n'y aura donc rien à afficher (ou éventuellement "0", ou "undefined", ou encore plus probable, un message d'erreur incompréhensible).
    • Si je vous dis encore que l'on peut utiliser une variable dans un calcul, je vous aurai presque tout dit, exemple de division par deux:
      document.write(zoubida/2);
      Donnera 2.5 si zoubida est égal à 5, ou une erreur si zoubida contient du texte, ou encore 2.49999999 sur un pentium (je ne plaisante qu'à moitié).

  3. Un tableau s'il est suivi de crochets, exemple: image[0];

    Et un tableau c'est tout simplement une collection de variables qui sont mises dans un ordre donné.

Le nom d'une variable, d'une fonction ou d'un tableau ne doit comporter que les caractères A à Z, a à z, les chiffres et le caractère "_", le premier caractère doit impérativement être une lettre ou "_" et ne doit pas être un mot reservé, adieu donc aux accents.

On parle de type de données ou type de variable en fonction de ce que la variable ou le tableau contiennent, à savoir un type texte, ou un type numérique, il existe d'autres types plus exotiques, mais ce qu'il faut retenir, c'est que l'on ne peut pas combiner les deux, l'addition numérique de 7 et de "nains" ne peut pas donner un résultat logique (sauf dans un contexte particulier).

Mais le javascript est assez tolérant de ce coté là et on peut changer le type d'une variable au cours d'un programme sans qu'il proteste et il convertit même les types "à la volée" en cas de besoin, par exemple l'opérateur de concaténation de chaine de caractères "+" assemblera "salut" et "les copains", mais aussi 7 et "nains" en convertissant le nombre contenu dans une variable numérique, en chaine de caractère de bon aloi, sans vous embêter, mais aussi sans vous avertir (ce qui peut-être ennuyeux).


Bon, mais comment ça fonctionne ?
C'est bien joli tout ça, mais je n'ai encore rien compris ! OK ! Regardons tranquillement comment marche l'exemple ci-dessus.

<A HREF="PageX.html" onmouseOver="actif('bouton1','pic1.actif.gif');" onmouseOut="passif('bouton1','pic1.gif');">

  • L'option onmouseOver="" du marqueur <A HREF="">, c'est encore du HTML, et c'est pour ça qu'il y a des guillemets, pour délimiter le contenu de cette option, cela implique qu'il ne faut plus utiliser de guillemets à l'intérieur de cette option et tout ce qui se trouve à l'intérieur est du javascript et doit se terminer par ";".
  • actif();, c'est une fonction que l'on crée nous-mêmes, et il va falloir écrire une routine qui lui correspond dans la partie <SCRIPT></SCRIPT>, il ne faut pas utiliser un nom de fonction javascript toute faite, ni un mot réservé (ces noms sont tous en anglais, on ne risque pas grand chose en choisissant celui-là).
  • 'bouton1','pic1.actif.gif', ce sont les paramètres que l'on passe à la routine actif(); entre <SCRIPT></SCRIPT>, il aurait pu y en avoir aucun, ou plus que deux, tout dépend ce que l'on veut faire, ici on a besoin de ces deux, ce sont le nom du bouton dont on veut changer l'aspect et le nom de fichier de l'image qui doit être montrée pour changer cet aspect quand on exécute cette fonction. Comme on ne veut pas passer des variables à la routine, on utilise des apostrophes pour délimiter les noms (on envoie donc à la routine des chaînes de caractères).
    Note: Les paramètres doivent obligatoirement être séparés par une virgule.
Je résume donc, quand le pointeur va passer sur ce lien, la fonction onmouseOver vas appeler la routine actif et lui passer "bouton1" et "pic1.actif.gif" en paramètre, simple non ?

Entre <SCRIPT></SCRIPT> la routine function actif(bouton,fichier){document.images[bouton].src=fichier}; fonctionne comme ceci:

  • La commande function explique à javascript que le nom arbitrairement choisi précédemment et qui suit cette commande est une fonction.
  • actif(), c'est le nom de la fonction, choisi par nous et appelée par onmouseOver quand le pointeur passe dessus le lien, on aurait pu l'appeler zorro, flash ou n'importe quoi d'autre, mais il vaut mieux choisir un nom qui explique ce que fait la fonction, si on veut s'y retrouver dans une page qui en contient beaucoup.
  • bouton et fichier, ce sont des variables contenant les paramètres que l'on reçoit et dont on a besoin dans la routine pour exécuter ce que l'on désire. Comme cette routine peut être appelée de plusieurs endroits et donc avec des paramètres différents, on stocke ce que l'on reçoit dans une variable (mémoire) dont j'ai choisi moi-même les noms, la première s'appelle bouton et la seconde fichier, même remarque pour le choix des noms de variable que pour les fonctions (et c'est moi qui commande ici !).
    Dans notre exemple, la variable bouton va recevoir la chaîne de caractère "bouton1" et la variable fichier va recevoir la chaîne de caractère "pic1.actif.gif".
  • { }, les accolades indiquent ce qui appartient à la fonction actif() et ce qui doit être exécuté, en effet, comme on peut écrire autant de lignes de programme que l'on veut pour une fonction, il faut bien expliquer à javascript où la fonction commence (en fait tout de suite après la fermeture de parenthèse), mais surtout où elle finit.
  • document.images[xxx].src=yyy, là, il va falloir me croire sur parole (pour le moment), si je vous dis que cette variable un peu spéciale est liée à l'image du bouton grâce au nom du bouton (qui doit être unique dans la page web) et que l'on change cette image grâce à =yyy.
    Comme en lieu et place de xxx on met une variable de nom bouton qui contient la chaîne de caractère "bouton1", et qu'à la place de yyy on met une variable de nom fichier qui contient la chaîne "pic1.actif.gif" on remplace l'image courante par celle contenue dans ce fichier.
    Si, dans un autre lien, on appelle la fonction actif() en passant "bouton2" et un nom de fichier pour l'image, cette routine va changer cette image pour le bouton2 (si il existe).
CQFD ! Et passez-moi l'aspirine.

C'est débile !
Dans la page précédente, il est pourtant expliqué qu'il ne faut pas utiliser cette méthode pour changer les images, alors c'est quoi cette horreur ?
Ben, c'est parce que je n'ai pas voulu trop compliquer les choses, dans cette page. Ici, on apprend surtout à passer des paramètres à une routine, pour un exemple absolument complet et correct, voir ci-dessous.

A quoi sert d'avoir deux routines actif et passif absolument identiques ?

A rien, on peut maintenant n'utiliser plus qu'une seule routine puisque on envoie l'image en paramètre et que cette image peut être tout ce que vous voulez. Il faut éventuellement lui trouver un nom plus approprié. Bravo de l'avoir remarqué !

Vous ne l'aviez pas remarqué ? Bon, consolez-vous, moi non plus je ne l'avais pas vu en écrivant la page, il m'a fallu six mois et environ dix relectures pour m'en rendre compte, de plus tout ça n'est pas très optimisé on peut encore le simplifier et l'améliorer, mais comme vous en avez marre des explications et que vous mourrez d'impatience de refaire vos pages, reprenez cet exemple et utilisez-le dans vos pages.


Ne partez pas, on peut discuter
Si tout ça vous semble en définitive trop compliqué ou ne vous intéresse pas, pas de problème, tout ce que vous avez à faire, c'est de piquer mes routines ou celles que l'on trouve sur le web (j'en ai vu plus de mille) et de les utiliser telles quelles ou d'essayer de les adapter à vos besoins. Lisez encore la page suivante qui expose simplement quelques principes de base qui vous seront quand-même très utiles pour un minimum de compréhension du javascript.

RetourInfo Suite

Dernière mise à jour de cette page: 04/09/2001, visiteurs: depuis le 6 avril 2002