Comment réaliser un diaporama en JavaScript ?

Ce cours sert d'initiation au JavaScript. Vous n'avez donc pas besoin de connaître ce langage pour comprendre le tutoriel. Cependant, un minimum de connaissances en HTML est demandé. Mon but est de faire découvrir le JavaScript à l'aide d'un exemple assez simple.

Objectif

Notre objectif est de réaliser un diaporama, en utilisant le JavaScript. Il nous faudra d'abord insérer le code HTML, car c'est la base de toute page web. Ensuite, je vous expliquerai comment insérer le JavaScript dans le document. Et nous aurons fini la 1ère version du diaporama, nous pourrons donc le tester. Enfin, nous verrons comment l'agrémenter, et nous ajouterons quelques fonctionnalités. A la fin de ce tutoriel, vous trouverez l'exemple complet que j'ai réalisé en écrivant ce cours. Comme ça, si à n'importe quel moment vous avez un problème, vous pourrez vous y référer.

Fonctionnement du diaporama : la 1ère version du diaporama se présentera de la manière suivante. Vous aurez sur votre document une image. En cliquant dessus, elle se transformera (comme par magie ;) en la 2e image. Et ainsi de suite... Avant d'aller plus loin, il nous faut préparer les images. Cherchez sur votre disque dur quelques images (3 ou 4 suffiront), toutes du même format (j'ai pris des fichiers .jpg). Copiez-les dans un même répertoire, celui où vous mettrez votre page. Renommez-les de la manière suivante : 1.jpg, 2.jpg, 3.jpg, etc. Ce sera leur ordre d'apparition. Une fois que vous avez fait ça, vous pouvez commencer...

Le code HTML

Commencez par créer un nouveau document HTML, comme si vous vouliez faire une simple page. Le JavaScript a l'avantage de s'intégrer très facilement dans un document HTML. Une fois que vous avez mis les balises de base (c'est-à-dire : html, head et body), insérez une image. L'image à afficher au départ est 1.jpg. Votre code doit ressembler à ça :

<img name="img" src="1.jpg">

Note : Il est important de spécifier un nom à l'image. Cela permettra de la contrôler. J'ai pris ici img, mais vous pouvez choisir ce que vous voulez. Le tout étant de s'en rappeler par la suite.
C'est tout pour la partie HTML !

Insérer du JavaScript

Maintenant, il est tant d'insérer le JavaScript... Pour cela, allez dans la partie head de votre page. Et insérez les lignes suivantes :

<script language="JavaScript">
<!--

// -->
</script>

Place aux explications :

• les balises script indiquent que l'on va utiliser un script. Entre ces 2 balises, on a pas le droit d'utiliser du HTML, faîtes donc attention. Dernière remarque : il ne faut pas oublier de refermer cette balise... sinon, plus rien n'est affiché dans la page (ça m'arrive de temps en temps ;)
• Notez que l'on précise le langage du script (language="JavaScript"). Si vous ne le précisez pas, ce n'est pas grave, ça marche quand même (pour la majorité des browsers). Mais, il vaut mieux le mettre quand même. Vous vous demandez peut-être s'il existe d'autres scripts que JavaScript... Sachez qu'il y a aussi VBScript, mais il est très peu utilisé car il n'est reconnu que sous Windows. C'est le seul autre script que je connais.
• Vous avez peut-être remarqué que les balises script sont mises entre <!-- et -->. C'est du HTML, cela sert à délimiter les commentaires. Rassurez-vous, ce n'est pas pour autant que le JavaScript est ignoré... En fait, ils servent dans le cas où le visiteur aurait un très vieux browser, qui ne reconnaitrait pas le JavaScript. Si on ne mettais pas ces 2 signes, le browser afficherait tout le code JavaScript, sans le comprendre... C'est donc la raison de cette mise en commentaire (je les mets rarement, car les browsers qui ne reconnaissent pas le JavaScript sont très rares...).

Le code JavaScript

Maintenant, il faut remplir entre les balises script. Pour réaliser le diaporama, il faut enregistrer quelque part le numéro de l'image en cours. Nous allons donc utiliser une variable de type entier. Contrairement à beaucoup de langage, il n'y a pas besoin de la déclarer. La déclaration est automatique, elle est faite lorsque l'on va utiliser la variable. Nous avons d'abord besoin de l'initialiser, c'est-à-dire, de lui donner une valeur de départ. Prenons 1, puisque c'est le numéro de l'image au départ. Copier la ligne suivante entre les balises script :

 i = 1; 

Notez que le signe = sert à assigner une valeur à une variable. Remarquez aussi le point-virgule à la fin de la ligne. C'est comme en Pascal (et dans d'autres langages), cela sert à séparer les différentes instructions. Ensuite, il nous faut définir une fonction. Cette fonction aura pour but de changer l'image en cours. Il faudra lui passer en paramètre le numéro de la nouvelle image. Une fonction est définie comme suit :

function nom_de_la_fonction(paramètre1, paramètre2) {

}

Nous allons appeler notre fonction affiche. Les différentes instructions que contiendra la fonction seront placées entre les accolades. Dans l'exemple ci-dessus, il y a 2 paramètres. On peut en mettre autant qu'on veut, ou ne pas en mettre. Mais, même dans ce dernier cas, il faut les paranthèses. Copiez le code suivant juste après l'instruction "i = 1;" :

function affiche(numero) {

}

Comme vous l'aurez deviné, le numéro de l'image à afficher sera stocké dans la variable numero. Attention ! Il ne faut pas confondre i et numero. i aura une portée globale : elle sera utilisée partout et correspond à l'image actuellement affichée. numero aura une portée locale : elle n'est utlisée que dans la fonction affiche et sert à indiquer la nouvelle image que l'on va afficher. C'est important de bien faire la différence entre les 2, car ça vous évitera beaucoup de problèmes... Si vous avez bien compris (je l'espère ;), vous saurez quoi mettre dans la fonction... Il faut assigner la valeur de numero à i. Ensuite, il faut mettre à jour l'image. Et c'est là que l'on aura besoin de son nom. J'espère que vous vous en souvenez : C'est img ;). On a besoin d'accéder à ses propriétés, en paticulier de celle où est stockée le nom de l'image. Je vais vous laisser chercher le nom de la propriété... C'est important de faire des démarches personnelles quand on veut apprendre un langage. Car lire bêtement tout ce que les autres ont écrits n'apporte pas beaucoup. Il faut chercher par soit même... Je vais quand même vous aider un peu. Regardez comment vous avez insérer l'image dans votre code HTML. Regardez surtout où vous avez défini l'image à afficher. C'est la propriété src. C'est donc cela que l'on veut modifier : la propriété src de img. Cela se note : img.src. Il faut lui assigner une nouvelle valeur. Cette valeur dépend de i (ou celle de numero car elles sont égales, puisque nous venons d'assigner la valeur de numero à i). Le nom de l'image est i suivi de .jpg. Ce sera tout pour la fonction affiche. Si vous n'avez pas tout suivi, je vous la donne en entier :

function affiche(numero) {
  i = numero;
  img.src = i+'.jpg';
}

Le principal est fait. Il reste juste à appeler la fonction affiche lorsque l'on clique sur l'image. Cette événement est nommé OnClick. Il faut le définir en même temps que l'image, c'est-à-dire, dans la partie HTML. Il faut lui passer en paramètre le numero de la nouvelle image, c'est-à-dire, i+1. Votre image est donc définie de cette façon :

<img name="img" src="1.jpg" OnClick="affiche(i+1)">

Ca y est ! C'est fini pour la première version de notre diaporama.

Améliorations

Ce qui serait bien, c'est de pouvoir revenir en arrière sur certaines images. C'est très simple, vous verrez. Modifier la première version pour afficher les images en arrière : il faut que ça parte de la dernière image... Prenez le temps de faire cet exercice, il permettra de voir si vous avez compris... Je vous la correction (à ne lire que si vous avez essayé ;), il fallait remplacer i = 1 par i = 4 (si vous aviez 4 images). Remplacez aussi 1.jpg par 4.jpg dans le code HTML. Et remplacez affiche(i+1) par affiche(i-1). J'espère que vous aviez réussi... Maintenant, reprenez la 1ère version. On va ajouter un bouton pour revenir en arrière, et un autre pour avancer (au lieu de cliquer sur l'image). Comme vous avez compris le principe, je vais aller un peu plus vite. Voici le code de la partie HTML :

<input type="button" value="<" OnClick="affiche(i-1)">
<img name="img" src="1.jpg"">
<input type="button" value=">" OnClick="affiche(i+1)">

Essayez de comprendre... et testez.
Maintenant, on va afficher le numéro de l'image en cours. Insérez une zone de texte après l'image. Appelez-la "text". Le code correspondant est :

<input type="texte" name="text" value="1">

Allez ensuite dans la fonction affiche. Et maintenant, il faut assigner à la zone de texte la nouvelle valeur :

texte.value = i;

Vous pouvez tester. Un dernier ajout au diaporama : la possibilité d'aller directement à l'image de notre choix. Il faut réactualiser l'image, à chauqe fois que la zone de texte change. Cet événement est appelé OnChange. Remplacez la ligne de la zone de texte par la suivante :

<input type="texte" name="text" value="1" OnChange="affiche(text.value)">

Vous pouvez encore tester...
Comme promis, je vous donne le code de l'exemple complet :

<html>
<head>

<script language="JavaScript">
<!--
i = 1;

function affiche(numero) {
  i = numero;
  img.src = i+'.jpg';
  text.value = i;
}
// -->
</script>

</head>
<body>

<img name="img" src="1.jpg""><br>
<input type="button" value="<" OnClick="affiche(i-1)">
<input type="texte" name="text" value="1" OnChange="affiche(text.value)">
<input type="button" value=">" OnClick="affiche(i+1)">

</body>
</html>