• Facile

Ce cours est visible gratuitement en ligne.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Mis à jour le 14/08/2017

Les boucles

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

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.

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...

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.

Boucle "while"

Syntaxe et fonctionnement

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

En voici la syntaxe :

while(condition)
{
        instructions
}

Fonctionnement de la boucle "while"

Image utilisateur

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

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.

Ce qui nous donne :

var i = 1;      // on initialise le compteur
while(i < 10)   // tant que i<10 ...
{
        // ... on affiche un message
        alert(i);
        i++;
}

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 :

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 ?

for(initialisation ; condition ; incrementation)
{
        instructions
}

Et notre code précédent se transforme comme par magie !

var i;  // on déclare notre variable
for(i=0; i<10; i++)     // 3-en-1 :) initialisation + condition + incrémentation
        alert(i);       // action

Voilà qui est plus pratique :) !

Et encore plus pratique : on peut déclarer la variable i directement dans le for, comme ceci :

for(var i=0; i<10; i++)
        alert(i);

N'est-ce pas formidable ? :D

Un peu de pratique

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é :

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 :

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...

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.

Boucle "do ... while"

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

La syntaxe

Sa syntaxe est la suivante :

do
{
        instructions
}
while(condition);
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.

Voici une manière de coder cet exemple :

var saisie;
do
        saisie = prompt("Entrez un nom, ou cliquez sur Annuler pour quitter");
while(saisie != null && saisie != '');

ou bien, en "simplifiant" un peu :

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

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 :

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é"

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 :

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.

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.

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.

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.

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 :

// 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 :

<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.

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 :

var saisie;
while(saisie = prompt("Texte"))
        // instructions

ce qui équivaut, je vous le rappelle, à ceci :

var saisie;
while( (saisie=prompt("Texte")) == true )
        // instructions

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 :

// 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:

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.

Exemple de certificat de réussite
Exemple de certificat de réussite