Guide pratique et progressif du langage Javascript

Les boucles

Bis !

Une boucle est une astuce pour forcer un programme à se répéter, de manière à pouvoir exécuter un certain nombre d'opérations pratiquements semblables sans avoir à écrire de nombreuses fois la même chose, le programme reprend son exécution en arrière, on dit alors qu'il "boucle".

La boucle for (pour)

On utilise en général une boucle "for" pour aller d'un nombre à un autre, mais libre à vous de lui trouver d'autres emplois.

La syntaxe est la suivante:

for ([initialisation]; [condition]; [comptage]) {programme}

initialisation sert en général à mettre la variable du compteur à sa valeur initiale, elle est facultative.
Tant que la condition est vraie, la boucle s'effectue, sinon l'exécution se poursuit plus loin, l'omission de la condition donne une boucle sans fin.
comptage est l'endroit idéal pour incrémenter ou décrémenter la variable de boucle, mais on peut le laisser vide ou y faire autre chose.
et enfin, programme, ou vous mettrez sur autant de lignes que vous voudrez, ce que vous aurez à exécuter.

Exemples:

for (x=0;x<10;x++) {document.write(x);} écris les chiffres de 0 à 9
for (x=5;x<15;x=x+2) {document.write(x);} écris les chiffres impairs de 5 à 13
for (x=9;x>=0;x--) {document.write(x);} écris les chiffres 9 à 0
for (;;) {document.writeln('Faites sauter la banque !');} écris ce texte à l'infini (ou jusqu'au plantage)

Ne croyez pas que les boucles ne servent qu'à produire des nombres, si par exemple vous avez sur votre page un panneau de sélection, une boucle for peut vous permettre de compter le nombre de lignes sélectionnées et d'afficher (ou de créer un nouveau tableau) avec ces lignes (ou le contraire), et pourtant c'est toujours une simple boucle for qui fait le travail.

Exemple complet:

<SCRIPT>
function compte(objet_select)
{
var nbre_select=0;
for (var x=0; x<objet_select.options.length; x++)
{
if (objet_select.options[x].selected==true) {nbre_select++;}
}
return nbre_select;
}
</SCRIPT>
<FORM NAME="Formulaire1">
<P>Choisissez des objets dans la liste ci-dessous
<BR><SELECT NAME="Liste1" MULTIPLE>
<OPTION SELECTED>Facture
<OPTION>Vélo
<OPTION>Ballon
<OPTION>Chemise
<OPTION>Pistache
<OPTION>Raton laveur
</SELECT>
<P><INPUT TYPE="button" NAME="Bouton1" VALUE="Combien sont sélectionnés ?"
onClick="alert ('Nombre d\'élément sélectionné: '+compte(document.Formulaire1.Liste1))">
</FORM>

Et les explications détaillées à l'extrême:

On déclare un script (éventuellement entre <HEAD> et </HEAD>)
On déclare une nouvelle fonction de nom "compte" et qui reçoit en paramètre le nom de l'objet liste qui sera stocké temporairement dans la variable "objet_select".
Début du programme de la fonction.
On initialise une variable de nom "nbre_select" avec la valeur "0", cette variable contiendra à la fin de la boucle le compte d'objets sélectionnés.
Et voilà la bête boucle for vue ci-dessus, on déclare et initialise la variable de boucle "x" à zéro, cette variable va servir à parcourir toute la liste de l'objet panneau de sélection, puis on teste justement si cette variable est toujours plus petite que le nombre d'éléments dans la liste (qui est obtenu par la propriété .options.length de l'objet donné en paramètre), et enfin on incrémente la variable de comptage (x++, ce qui est identique à x=x+1).
Début de la boucle.
Ici on teste si la propriété .options[x].selected de l'objet donné en paramètre est vraie (true), options[x] donne la xième ligne de la liste et si la propriété .selected est vraie on augmente de 1 (incrémente) la variable nbre_select qui contient le nombre de lignes sélectionnées. On pourrait aussi transférer cette ligne dans un tableau ou une autre liste, ou faire toute autre opération désirée.
Fin de la boucle for.
Cette instruction change la valeur de retour de la fonction avec la valeur du nombre de lignes sélectionnées.
Fin de la fonction compte().
Fin du script.
Dans le document HTML on déclare un formulaire de nom "Formulaire1", original non ?.
On explique ce que l'on désire voire faire (ça vaux mieux).
On déclare un panneau de sélection multiple de nom "Liste1", stupéfiant hein ?
On met une ligne sélectionnée par défaut, car tel est notre bon plaisir.
On garnit les lignes suivantes.
Encore.
Encore.
Et encore.
Vous êtes sourd ou quoi ?
Bon y'en a assez, on ferme la liste.
On déclare enfin un bouton dont on se fiche éperdument du nom et on lui ajoute une fonction javascript, onClick, qui appelle quand le bouton est cliqué une autre fonction javascript, alert, à laquelle on passe d'abord un peu de texte
J'ai coupé la ligne pour que cela sois plus lisible, mais comme il n'y a pas de ";" l'exécution continue comme si c'était la même ligne, je reprend donc:
un peu de texte pour alert, et , grâce à "+" qui colle les textes, un retour de la magnifique et grandiose fonction personnelle que vous avez créé ci-dessus et qui donne le nombre de lignes sélectionnées. La fonction alert, affiche le résultat dans une boîte de dialogue ordinaire. TADAAAAH !!!
Oui mais pour que la fonction fonctionne, il faut encore lui dire sur quel objet travailler donc, j'appelle la fonction compte avec comme paramètre l'objet "Formulaire1.Liste1" et si vous retournez en ligne 2, on stocke ce paramètre dans objet_select et on utilise en fait en ligne 5 "Formulaire1.Liste1.options.length" et en 7: "Formulaire1.Liste1.options[x].selected" ce qui est bien l'objet et la propriété que l'on veut lire, si vous en doutez, consultez la référence à la ligne "options - Groupe objets - Toutes les options du marqueur SELECT".
A oui, il faut encore dire à la page web que le formulaire est fini.

Et maintenant pour se détendre:

Comme vous pouvez le voir maintenant, une simple boucle for permet de faire bien plus de choses que vous ne le croyez, vous n'êtes limité que par votre imagination, et les connaissances du langage javascript ne vous donnent pas automatiquement celles de la programmation, mais le guide n'est pas terminé et vous verrez encore bien d'autres techniques là ou ailleurs.

Facile ?

Vous avez compris comment fonctionne l'exemple ci dessus ? C'est bien !
Vous ne comprenez pas comment il faut faire pour construire un programme comme ça ? C'est normal !

On construit un programme exactement comme on construit une maison, vous pouvez acheter les portes et fenêtres en premier, mais il vous faudra débuter par les fondations, l'ordre d'exécution des travaux détermine l'ordre d'achat des matériaux et il vaut mieux avoir des plans avant de commencer quoi que ce soit, quand au résultat, il n'est pas toujours celui que l'on espérait, même si il ne manque rien et que les travaux ont étés faits dans le bon ordre.

C'est kif pour un programme, sans les plans, un type expérimenté pourra tout juste se construire une cabane pleine de trous, susceptible de dégringoler en cas de fortes chutes de neige, alors un débutant...

Nous verrons comment on fait pour faire les plans quand vous aurez passé tout ce que l'on peut utiliser en revue. Pour construire efficacement, il y a intérêt à bien connaitre les matériaux (entre autre), comme le savait le dernier des trois petits cochons.

Do... while (fait... tant que)

Nous allons voir maintenant un autre type de boucle dont la propriété ou l'inconvénient, ça dépend de ce que l'on veut faire avec, est de s'exécuter au moins une fois, même si la condition est fausse.

La syntaxe est la suivante: do {programme;} while (condition);

Ici, pas d'initialisation, il faut la faire si besoin avant la boucle.
programme, ou vous mettrez sur autant de lignes que vous voudrez, ce que vous aurez à exécuter. Si l'on veut sortir un jour de la boucle, il faut veiller ici à rendre le test faux une fois ou l'autre.
Et enfin la condition, ce qui fait que si elle est fausse, c'est trop tard, le programme s'est déjà exécuté une fois.

Exemples:

x=0; do {document.write(x); x++;} while (x<10); écris les chiffres de 0 à 9
x=0; do {document.write(x); x=x+2;} while (x!=5); écris les chiffres de 0 à l'infini

Utiliser un test d'égalité dans une boucle n'est pas forcément une bonne idée, dans le dernier exemple, le programme ne sortira jamais de la boucle, et il existe encore des pièges plus subtils, si le résultat d'un calcul ne donne pas un nombre entier l'égalité ne pourra jamais être établie.
Je me suis laissé dire que javascript produisait souvent des résultats du style 25/5=4.999999999, l'ordinateur n'étant pas humain considérera toujours que 4.99999999999 n'est pas égal à 5.
Il vaut mieux utiliser quand c'est possible un test du genre plus grand ou égal (>=), ou plus petit ou égal (<=), ou alors arrondir le résultat d'un calcul avant le test avec la fonction Math.round().

Autre erreur courante:

x=0; do {document.write(x); x=x+2;} while (x==6); écris 0 et s'arrête

Une erreur dans le test est une chose courante, il ne faut pas perdre de vue que la boucle fonctione TANT QUE le test est vrai et non pas JUSQU'À comme on a tendence à penser, dans ce cas-ci la boucle ne s'exécute qu'une seule fois, mais souvent l'erreur conduit à faire des boucles infinies et on se demande pourquoi le programme qui suit la boucle ne s'exécute pas...

while (tant que)

Une autre ! Bon, d'accord. Et si on enlevait l'inconvénient de la boucle do... while en faisant le test avant ? Voilà une idée qu'elle est bonne, et tant qu'à faire enlevons aussi le mot "do" qui ne sert plus à rien, et le point virgule après la condition ne sert plus à rien non plus, puisque il y a maintenant des accolades, on peut aussi le faire sauter, zut ! on ne peut plus rien enlever d'autre, c'est bien dommage.

La syntaxe est donc la suivante: while (condition) {programme;}

Ici, non plus il n'y a pas d'initialisation, il faut la faire si besoin avant la boucle.
condition, qui exécute la boucle tant qu'elle est vraie.
programme, ou vous mettrez sur autant de lignes que vous voudrez, ce que vous aurez à exécuter. Si l'on veut sortir un jour de la boucle, il faut veiller ici à rendre le test faux une fois ou l'autre.

Exemple:

x=9; while (x>=0) {document.write(x); x--;} ; écris les chiffres de 9 à 0

Une condition de sortie c'est bien, mais parfois, il peut arriver que l'on veuille sortir d'une boucle à plusieurs conditions ou pour plusieurs raisons, pour cela il suffit d'utiliser les opérateurs logiques && (ET) ou || (OU) et de bien réfléchir, par exemple pour sortir d'une boucle SI a="test" OU b=3:

b=9; while (a!="test"||b!=3) {document.write(b); b--;} ;

Qu'est-ce que c'est que ce bigntz ? Ben oui, TANT QUE a EST DIFFERENT DE "test" ("!=", ou aussi "pas égal à", comme vous voulez) OU QUE b EST DIFFERENT DE 3, la boucle continue, autre piège, "test" EST DIFFERENT DE "Test", si vous voulez faire des tests sur des chaînes de caractères, faites-le en majuscules ou en minuscules grâce à la propriété appropriée (je vous ai donné un énorme indice, cherchez vous-même (dans le bas de la page)).

Courage !

Ne flippez pas maintenant, je sais que c'est dur, mais il n'y a plus que 253 pages et c'est fini (non, je plaisante), vous n'êtes pas obligé de devenir un cador de la programmation, je vous l'ai déjà dit, et c'est en forgeant que l'on devient forgeron.

Retour Suite

Dernière mise à jour de cette page: 04/09/2001, visiteurs:

depuis le 6 avril 2002