Javascript: les boucles

  • prérequis : Avoir fini l'introduction au Javascript, la logique booléene, les opérateurs de comparaison, les opérateurs logiques.

  • objectif : Comprendre et savoir utiliser les structures de contrôle for , while , do..while.

Pour comprendre ce que sont les boucles, Imaginons que l'on veuille afficher la suite des nombres de 1 à 10.
On pourrait effectuer 10 console.log('') avec à chaque fois la valeur dont on a besoin.
Seulement si on doit effectuer cette opération 1OOO fois, on ne va noter mille fois console.log(''), Javascript nous offre un outil pour ça!

En effet, Javascript permet de repeter l'execution d'un ensemble d'instruction en mettant ces instructions dans une boucle.
Le nombre de répétitions peut être connu à l'avance ou dépendre de l'évaluation d'une condition.
Il en exite deux principales, la boucle while et la boucle for.

while

La première, la boucle while, permet d'executer des instructions tant que la conditions testée reste vraie.

Syntax:

while(condition) {  
    //instruction à executer si condition est vraie
    instruction1;
    instruction2;
    ...
}

Exemple:

Reprenons notre exemple ou il faut afficher des nombre de 1 à 5:

var nombre = 1; // on initialise notre variable à 1

while (nombre <= 5) {  
    console.log(nombre);
    nombre++;
}

Que fait le programme ?

Tout d'abord on initialise une variable nombre à 1.
Ensuite, la boucle va tester la condition: nombre plus petit ou égale à 5 => reponse vraie (1 <= 5)
Si la reponse est vraie on affiche le nombre et on l'incremente de 1
Maintenan nombre vaut 2, on recommence depuis le debut (2 <= 5 ? si oui on affiche et increment sinon on sort de là!)

do .. while

La boucle do .. while est une variante de la boucle while. Lorsque la boucle while test la condition avant de savoir si il faut executer son code, la boucle do .. while va d'abord executer ses instruction au moin une fois puis ensuite verifira si la condition est respectée pour continuer.

Syntax:

do {  
    //instruction à executer
       instruction1;
    instruction2;
    ...
} while (condition);

Exemple:

Reprenons notre exemple où il faut afficher les nombres de 1 à 5.

var nombre = 1;

do {  
    console.log(nombre);
    nombre++;
} while (nombre <= 5);

La subtilité de cette boucle est dans son execution une fois avant de tester la condition.
Ainsi, si nombre valait par ememple 8, on aurait afficher "8" puis la variable nombre se serait incrementer (nombre vaudra 9 maintenant) et enfin on aurait testé la conditionqui ici serait fausse.
Dans la boucle while "traditionnelle" on verifirait tout de suite la condition qui serait fausse et donc n'afficherait rien.

for

Nous avons vus que nous pouvons repeter une actions un nombre de fois tant qu'une condition est vraie.
Il exite un autre type de boucle qui permet d'effectuer ces actions, c'est la boucle for.

Attention, il y a des raisons spécifique à l'utilisations de la boucle for ou while.

Reprenons notre exemple precedant, cette fois-ci avec une boucle for:

for (var nombre = 1; nombre<=5; nombre++) {  
    console.log(nombre);
}

Que se passe-t-il ?

Tout d'abord, on initialise une variable nombre à 1.
Ensuite on verifie la condition: 1 <= 5 ? si oui, on affiche le nombre et on lui ajoute 1.
maintenant nombre vaut 2, et on recommence jusqu'à ce que la condition ne soit plus respectée.

pour se representer une boucle on peut effectuer un tableau avec chaque ligne representant un tour de boucle

dessin sans titre 4

Syntax:

for (initialisation; condition; etape) {  
    instructions à executer;
}
  • initialisation: se produit au debut de la boucle et une seule fois.
  • condition: est evalué à chaque tour de boucle, si elle est vraie: un nouveau tour de boucle est effectué sinon la boucle est terminée.
  • étape: est réaliser à chaque tour, et est généralement utilisée pour mettre à jour ou incrémenter le compteur qu'est la variable d'initialisation.

Matthieu Dehondt

Read more posts by this author.

Lille - France

Subscribe to Skillcode

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!