Aller au menu - Aller au contenu

Icône Les boucles

Par Avatar JoSé2
Mise à jour : 22/07/2009
5 116 visites depuis 7 jours, dont 94 sur ce chapitre classé 38/786
Dans le chapitre précédent, vous avez découvert les conditions et leur utilisation à travers des tests "Si... alors... sinon...".

Eh bien nous allons en voir une autre utilisation : les boucles.
Retour en haut
Sommaire du chapitre :
Icône du chapitre
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

Des boucles ? Pour quoi faire ?

Petit exercice



En guise de présentation, vous allez réaliser un petit exercice pour faire connaissance avec les boucles.

Votre mission, si toutefois vous l'acceptez : afficher la liste de tous les nombres plus petits que 10 (une boite de dialogue par nombre).

Vous vous dites : "ça va être un jeu d'enfant". En effet...
Code : JavaScript
1
2
3
4
5
6
7
8
9
alert(1);
alert(2);
alert(3);
alert(4);
alert(5);
alert(6);
alert(7);
alert(8);
alert(9);

Mais c'est un peu long et très ennuyant :euh: .

Pour éviter de s'ennuyer en programmant (on est quand même là pour s'amuser :) ), nous allons apprendre une autre méthode, beaucoup plus puissante, pour arriver au même résultat.


Utiliser une boucle



Ce qu'il faudrait, c'est pouvoir demander à l'ordinateur de "compter", et tant qu'il n'a pas atteint 10, d'afficher la valeur.
Eh bien c'est sur ce modèle que sont conçues ce qu'on appelle les boucles : on répète une action tant que une condition est satisfaite.

Pourquoi les boucles ? Car il en existe plusieurs différentes, qui s'utilisent dans des situations elles aussi différentes.
Retour en haut

Boucle "while"

Syntaxe et fonctionnement



Commençons par la boucle la plus simple...

En voici la syntaxe :
Code : JavaScript
1
2
3
4
while(condition)
{
        instructions
}


Fonctionnement de la boucle "while"
Image utilisateur


Tant que la condition est satisfaite, on répète les instructions.

Si la condition n'est pas vérifiée au premier tour de boucle, alors les instructions ne seront pas exécutées.

Voici le fonctionnement exact de la boucle, illustré par le schéma ci-contre :
# Si la condition est vérifiée,
--> Alors on exécute les instructions, et on retourne à #,
--> Sinon on passe à la suite.



Reprenons notre petit exercice...



On va créer une variable qui servira à "compter".
Tant que cette variable sera inférieure à 10, on affichera un message, puis on l'incrémentera.

Incrémenter une variable signifie augmenter sa valeur (en général, de 1).
Décrémenter signifie diminuer sa valeur.


Ce qui nous donne :
Code : JavaScript
1
2
3
4
5
6
7
var i = 1;      // on initialise le compteur
while(i < 10)   // tant que i<10 ...
{
        // ... on affiche un message
        alert(i);
        i++;
}


Si vous oubliez d'incrémenter votre variable, la condition sera toujours vraie !
La boucle ne s'arrêtera donc jamais...
Vous obtiendrez sûrement un message d'erreur de votre navigateur vous proposant d'interrompre le script.
Retour en haut

Boucle "for"

Présentation de cette boucle



Un code qui revient souvent...



Les boucles while sont, comme vous venez de le voir, très "basiques" : la syntaxe est on ne peut plus simple !

Lors de leur utilisation, il est très fréquent d'utiliser un compteur, comme nous l'avons fait dans l'exemple précédent.
Ce compteur, qui n'est rien d'autre qu'une variable (souvent appelée i, mais ce n'est pas une obligation, même si c'est pratique à écrire :D ), est ensuite incrémenté (ou décrémenté) à chaque tour de boucle.

On se retrouve souvent avec un code qui ressemble à ceci :
Code : JavaScript
1
2
3
4
5
6
7
var i;
i = 0;  // initialisation
while(i < 10)   // condition
{
        alert(i);       // action
        i++;    // incrementation
}


Mais ça ne serait pas plus pratique avec une boucle qui regroupe tout ça ?

Eh bien justement si, et c'est le but de cette nouvelle boucle, que nous allons étudier dans les paragraphes suivants...


Une boucle qui va nous simplifier la vie



Voici la boucle for, qui regroupe tout ce que nous voulions !

Sa syntaxe ?
Code : JavaScript
1
2
3
4
for(initialisation ; condition ; incrementation)
{
        instructions
}


Ce sont bien des points-virgules qui se trouvent entre les parenthèses après le for.
Attention à ne pas les confondre avec des virgules, qui sont utilisées pour séparer les arguments des fonctions.


Et notre code précédent se transforme comme par magie !
Code : JavaScript
1
2
3
var i;  // on déclare notre variable
for(i=0; i<10; i++)     // 3-en-1 :) initialisation + condition + incrémentation
        alert(i);       // action


Il n'y a qu'une instruction à effectuer à chaque tour de boucle.
Les accolades sont donc devenues inutiles, c'est pourquoi je ne les ai pas mises.


Voilà qui est plus pratique :) !

Et encore plus pratique : on peut déclarer la variable i directement dans le for, comme ceci :
Code : JavaScript
1
2
for(var i=0; i<10; i++)
        alert(i);

N'est-ce pas formidable ? :D


Un peu de pratique



Les boucles for sont plus pratiques que les boucles while, mais uniquement dans certains cas !
Il est parfois plus judicieux d'utiliser une boucle while, notamment lorsqu'on ne retrouve pas cette structure "initialisation / condition / incrémentation" (nous en verrons des exemples par la suite).


Petit exemple



Vous devriez maintenant être capables de faire une boucle (on va utiliser for) qui fait la somme des nombres de 1 à 10 (inclus).
Je vous laisse faire, cela ne devrait pas vous poser de problème.

Vous avez terminé ?
Voici un corrigé :
Secret (cliquez pour afficher)
Code : JavaScript
1
2
3
4
5
var i;
                var somme = 0;  // variable pour le resultat
                for(i=1; i<=10; i++)
                        somme += i;     // on ajoute la valeur du compteur à notre resultat
                alert(somme);



Ce qu'il ne faut pas faire



Ce qui est rigolo avec les boucles for, c'est qu'on peut mettre tout plein de trucs dans les parenthèses.
Et avec une indentation "excentrique", ainsi qu'avec des noms de variables qui ne veulent rien dire, on obtient des résultats vraiment géniaux :diable: .
Voyez plutôt :
Code : JavaScript
1
2
var azerty=0,arezty;
for(arezty=0;azerty<10;arezty+=  azerty=1  +azerty);alert(arezty);


Pas mal, vous ne trouvez pas ? ^^
Que fait ce code ? Ah... eh bien comme l'exemple juste avant, il fait la somme des nombres de 1 à 10...

Ce code est un excellent exemple... de ce qu'il ne faut pas faire !
À moins que vous aimiez les codes illisibles...

Voici quelques conseils concernant les boucles for :
  • évitez de modifier la variable qui sert de compteur à l'extérieur des parenthèses du for, qui sont prévues pour ça.
  • Inversement, évitez de mettre entre ces parenthèses du code qui ne concerne pas directement cette variable.
  • Pour rappel, donnez des noms explicites et pas trop longs à vos variables (i ou j, parfois cpt, étant des noms classiques pour des compteurs).
  • Pensez également à bien indenter votre code, et à mettre quelques commentaires, (uniquement) s'ils s'avèrent nécessaires.
Retour en haut

Boucle "do ... while"

Le dernier type de boucle que nous allons aborder ressemble assez fortement à while.


La syntaxe



Sa syntaxe est la suivante :
Code : JavaScript
1
2
3
4
5
do
{
        instructions
}
while(condition);

Ici, le while est placé à la fin de la boucle, après les instructions qui le concernent : c'est pour ça qu'il est suivit d'un point-virgule.



Comment ça marche ?



Fonctionnement de la boucle "do... while"
Image utilisateur



Vous avez pu remarquer que le while est placé à la fin de la boucle : c'est ce qui fait la différence avec la boucle "while" que nous avons vue plus haut.

Quelle différence ?


Eh bien le test est effectué après les instructions, ce qui veut dire que ces dernières seront exécutées au moins une fois, quelle que soit la condition (cf. le petit schéma ci-contre).




Un petit exemple...



Une des utilisations possibles : on demande des noms à l'utilisateur (avec prompt()) tant qu'il ne clique pas sur "Annuler" (ou qu'il ne laisse pas le champ vide).
Pour l'instant, on ne va pas s'occuper d'enregistrer tous les noms qu'il a tapés.

Rappel : la syntaxe est la suivante :
Code : JavaScript
1
var nom = prompt('Entrez un nom');

Si l'utilisateur clique sur "Annuler", la variable vaudra null.


Voici une manière de coder cet exemple :
Code : JavaScript
1
2
3
4
var saisie;
do
        saisie = prompt("Entrez un nom, ou cliquez sur Annuler pour quitter");
while(saisie != null && saisie != '');

ou bien, en "simplifiant" un peu :
Code : JavaScript
1
2
3
4
var saisie;
do
        saisie = prompt("Entrez un nom, ou cliquez sur Annuler pour quitter");
while(saisie);  // ca revient au meme que dans l'exemple ci-dessus
Retour en haut

Instructions de contrôle

Après avoir fait le tour des boucles (sans jeu de mot :D ), nous allons aborder un dernier point dans ce chapitre : les instructions de contrôle, qui ne sont rien d'autre que des instructions qui agissent sur les boucles.


break



Comment ça marche ?



La première, qui se prénomme break (ce qui signifie "casser" pour les non-anglophones), est très simple d'utilisation. Elle arrête immédiatement la boucle dans laquelle elle se trouve (le script continue normalement, en reprenant juste après la boucle en question).

Petit exemple :
Code : JavaScript
1
2
3
4
5
6
7
var i;
for(i=0; i<20; i++)
{
        if(3*i > 10)
                break;
        alert(3*i);
}

On va afficher les multiples de 3. Mais si un multiple dépasse 10, on s'arrête.


Un code moins bien "organisé"



Cette instruction est très pratique dans certains cas.
Cependant, elle est à éviter autant que possible : il vaut mieux créer une condition plus complète pour votre boucle, plutôt que d'insérer des if avec des break dans toute la boucle.


L'exemple plus haut est correct du point de vue de la syntaxe, mais c'est exactement l'utilisation qu'il ne faut pas faire de break.
Voici une manière bien mieux structurée pour ce même exemple :
Code : JavaScript
1
2
3
var i;
for(i=0; 3*i<=10; i++)
        alert(3*i);

Ici, tout ce qui concerne la boucle se trouve entre les parenthèses du for, ce qui rend le code bien mieux "organisé".


Cas de boucles imbriquées



Et si on met un break à l'intérieur d'une boucle, qui est elle-même à l'intérieur d'une autre boucle ?

Dans ce cas, il s'applique uniquement à la boucle la plus "imbriquée".

Dans l'exemple qui suit, le break s'applique seulement à la boucle avec la variable j.
Code : JavaScript
1
2
3
4
5
6
7
8
9
var i, j;
for(i=0; i<5; i++)
{
        for(j=0; j<5; j++)
        {
                if(j == 2)
                        break;
        }
}



continue



L'instruction de contrôle suivante, continue, s'utilise de manière quelque peu semblable.

Fonctionnement...



Lorsque l'instruction continue est rencontrée, toutes les instructions qui suivront seront ignorées, jusqu'à ce qu'on arrive à la fin des instructions de la boucle. La boucle continue ensuite normalement.

Pour simplifier, continue permet en quelque sorte de "sauter" certains tours de la boucle.


... et exemple



Vous allez tout de suite comprendre avec cet exemple.
Code : JavaScript
1
2
3
4
5
6
7
var i;
for(i=-5; i<=5; i++)
{
        if(i == 0)
                continue;
        alert("L'inverse de " + i + " est " + 1/i);
}


Lorsque i vaut 0, on saute les instructions qui restent dans la boucle (ici, alert()), puis on reprend avec i = 1 (la valeur suivante).

On affiche donc le message pour i = -5, -4, -3, -2, -1, (on saute le 0), 1, 2, 3, 4 et 5.
Retour en haut

Application

Bien, il est temps de mettre un peu en pratique ce que vous venez d'apprendre.


Exercice



Le script que vous allez créer est un script du SdZ... Oui, vous avez bien entendu ! C'est un script qui est utilisé sur ce site :) .


Le sujet



Vous avez tous utilisé au moins une fois le zCode...
Nous allons nous intéresser ici au bouton servant à insérer une liste à puces.

Notre script a pour rôle de demander le contenu de chaque puce à l'utilisateur, et de créer le zCode correspondant.

Rappel : zCode d'une liste à puces
Code : Zcode
1
2
3
4
5
<liste>
<puce>Contenu de la puce 1</puce>
<puce>Contenu de la puce 2</puce>
...
</liste>


Quelques consignes pour vous guider



On va demander le contenu de chaque puce grâce à prompt().
C'est ici qu'on va devoir utiliser une boucle : on demande tant que l'utilisateur ne laisse pas le champ vide.

Au final, on va récupérer le zCode dans une variable.
On l'affichera grâce à alert() pour vérifier le fonctionnement du script.

À vous de jouer ;) .



Correction



Je n'ai pas fait une, mais plusieurs corrections, plus ou moins bonnes.


Version 1 : "bof bof"



Voici ce qu'on peut obtenir après une petite réflexion :
Code : JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
// initialisations
var zCode = '<liste>\n';
var saisie = '';

// boucle
do
{
        saisie = prompt("Contenu de la puce ?");
        if(saisie)
                zCode += "<puce>" + saisie + "</puce>\n";
}while(saisie);

// fin
zCode += "</liste>";
alert(zCode);


Plusieurs points ne sont pas très "propres".

Tout d'abord, si on ne remplit aucune puce, on se retrouve avec ceci : Code : Zcode
1
2
<liste>
</liste>

Certes, un "détail", mais si facile à corriger que c'est dommage de le laisser comme ça.

Autre remarque : à quelques lignes près, on voit deux fois le même test : if(saisie) et while(saisie).
Ce n'est jamais bien bon de se répéter (par exemple, si on doit modifier la condition, c'est un peu relou de le faire deux fois ^^ ).

Si on veut modifier ça, il va falloir enregistrer la saisie dans une variable, pour l'ajouter au zCode uniquement au tour de boucle suivant (une fois que le test de la boucle aura été fait)... Ce qui complique un peu l'affaire.


Version 1 améliorée



Voici le même code, après avoir modifié les problèmes soulignés ci-dessus.
Code : JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
var zCode = '';
var saisie = '';
// variable "temporaire", pour le 2e point
var texte = '<liste>\n';

do
{
        // on ajoute le texte saisi au tour precedent
        zCode += texte;
        // on demande du texte et on enregistre dans la variable "temporaire"
        saisie = prompt("Contenu de la puce ?");
        texte = "<puce>" + saisie + "</puce>\n";
}while(saisie);

// le 1er "detail"
if(zCode == '<liste>\n')
        zCode = '';
else
        zCode += "</liste>";

alert(zCode);



Version 2 : tout-en-un



Une autre solution consisterait à enregistrer et à tester en même temps le texte saisi.

Comment ? Eh bien en plaçant l'affectation dans la condition.
En voici le principe :
Code : JavaScript
1
2
3
var saisie;
while(saisie = prompt("Texte"))
        // instructions

ce qui équivaut, je vous le rappelle, à ceci :
Code : JavaScript
1
2
3
var saisie;
while( (saisie=prompt("Texte")) == true )
        // instructions


Ne confondez pas le = (opérateur d'affectation) avec == (opérateur de comparaison) !


Il faut bien comprendre que cette condition (appelée à chaque tour de boucle) se compose de deux étapes :
  • tout d'abord, l'instruction saisie = prompt("Texte"), que vous comprenez maintenant sans difficulté.
  • Ensuite, le test, avec la nouvelle valeur de la variable modifiée ci-dessus.



Bref, pour revenir à notre exemple, ça nous donne ceci :
Code : JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
// initialisation
var zCode = "<liste>\n";
var saisie;

// boucle
while(saisie = prompt("Contenu de la puce ?"))
        zCode += "<puce>" + saisie + "</puce>\n";

// finitions
if(zCode == '<liste>\n')
        zCode = '';
else
        zCode += "</liste>";

alert(zCode);


Pas mal, vous ne trouvez pas ? :soleil:
Retour en haut

Q.C.M.

Un peu de vocabulaire...

Code : JavaScript
1
i++;

Quel est le terme exact correspondant à cette instruction ?
Les boucles while et do... while sont :
Quel type de boucle est-il le plus judicieux d'utiliser pour afficher la table de multiplication par 5 ?
Code : JavaScript
1
2
3
4
var texte;
do
        texte = prompt("Tapez ce que vous voulez");
while(isNaN(texte));


Ce code demandera une valeur jusqu'à ce qu'on...
Code : JavaScript
1
2
3
4
5
var texte = "Bonjour";
while(texte = prompt("Tapez ce que vous voulez"))
{
     // instructions
}


Que fera ce code ?

Statistiques de réponses au QCM

Retour en haut
Nous avons maintenant fait le tour de l'utilisation des tests : ceci nous rapproche beaucoup de la fin de cette première partie consacrée à la syntaxe du JS.
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

Partager

Retour en haut
15 commentaires pour "Les boucles"
Note moyenne : 3.51 / 4 (260 votes)
Pseudo Commentaire
Hors ligne jozpat # Posté le 27/01/2010 à 13:00:55

Bonjour,
sortant du tuto de Mateo sur l'XHTML et CSS je me suis mis sur ce tuto pour dynamiser mon futur site.
Tout à bien démarré jusqu'à l'exercice sur les boucles (à la fin du chapitre).
Hé ,oui je ne connais pas le zcode et c'est à partir de la que vous m'avez perdu...
(vous ne pouvez pas savoir comment ça ma embrouillé la tête...)
Pourrait-il y avoir un exercice autre ? (si on démarre de zéro on est censé ne connaitre que le HTML et CSS je crois...)
Merci.
Hors ligne SamoT # Posté le 27/01/2010 à 20:27:51

Études : Université Louis Pasteur de Strasbourg

 Sympas le tuto mais là j'arrive au dernier exercice et je ne sais pas ce qu'est un "zCode". Peu être que je l'ai déjà utiliser mais en tout cas je ne sais pas de quoi il s'agit. une petite explication serai la bienvenue. Mais le reste est très bien merci beaucoup !
Hors ligne noobzor # Posté le 16/05/2010 à 17:38:11

bonjour,

J'ai cru noter un erreur dans le QCM à la troisième question:

Code : JavaScript
1
2
3
4
var texte;
do
        texte = prompt("Tapez ce que vous voulez");
while(isNaN(texte));

Ce code demandera une valeur jusqu'à ce qu'on...

tape un nombre OU qu'on laisse le champ vide
Hors ligne Pilon # Posté le 29/06/2010 à 11:41:25

Bonjour,

Pour ceux qui ont des problèmes avec le zcode, une simple recherche suffisait pour trouver votre réponse...
Pour reprendre la description d'origine "Le zCode (abréviation de "Zér0-Code") est le langage inventé par le Site du Zér0 pour la rédaction de messages sur le site."
Plus d'infos ici :)

Bonne courage à tous.
Hors ligne -SkYnet- # Posté le 08/10/2010 à 19:32:22
Avatar

Avis : Très bon

Bonjour à tous,

c'est bien beau de faire une liste à puces mais quand les balises

<puce>blabla</puce> restent ça fait tache donc comment mettre une chtite image qui remplacerait les balises moche et bete que sont puce :p :lol:
"Nous finissons tous par mourir, notre but n'est pas d'être immortel, notre but est de créer quelque chose qui nous survivra." Chuck Palahniuk
 

Voir tous les commentaires