Mis à jour le 16/01/2018
  • 20 heures
  • Facile

Ce cours est visible gratuitement en ligne.

Ce cours est en vidéo.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

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

J'ai tout compris !

Répétez des instructions

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

L'objectif de ce chapitre est d'apprendre comment ajouter à nos programmes des possibilités
d'exécution répétitive.

Introduction

Essayons d'écrire un programme qui affiche tous les nombres entre 1 et 5. Voici ce que nous pouvons écrire avec nos connaissances actuelles.

console.log(1);
console.log(2);
console.log(3);
console.log(4);
console.log(5);

Même s'il reste relativement court, ce programme est très répétitif. Que se passerait-il si nous devions afficher non pas 5, mais 100 ou même 1000 nombres ? On doit pouvoir faire mieux.

Pour cela, le langage JavaScript offre la possibilité de répéter l'exécution d'un ensemble d'instructions en plaçant ces instructions à l'intérieur d'une boucle. Le nombre de répétitions peut être connu à l'avance ou dépendre de l'évaluation d'une condition. A chaque répétition, les instructions contenues dans la boucle sont exécutées. C'est ce qu'on appelle un tour de boucle ou encore une itération.

On se sent concerné(e) ?

Nous allons étudier les deux grands types de boucles utilisables en JavaScript ainsi que dans la plupart des autres langages de programmation.

La boucle while

La boucle while permet de répéter des instructions tant qu'une condition est vérifiée.

Exemple d'utilisation

Voici notre programme d'exemple réécrit avec une boucle while.

console.log("Début du programme");
var nombre = 1;
while (nombre <= 5) {
    console.log(nombre);
    nombre++;
}
console.log("Fin du programme");

Tapez cet exemple dans le fichier cours.js situé dans le répertoire chapitre_4/js, créez le fichier cours.html associé dans chapitre_4/html, puis testez l'exemple avec Firefox. Vous obtenez le résultat suivant.

La meilleure solution pour comprendre ce qui s'est passé pendant l'exécution est de déboguer le programme.

Fonctionnement

La syntaxe de l'instruction while est la suivante.

while (condition) {
    // instructions exécutées tant que la condition est vérifiée
}

Avant chaque tour de boucle, la condition associée au while est évaluée.

  • Si elle est vraie, les instructions du bloc de code associé au while sont exécutées. Ensuite, l'exécution revient au niveau du while et la condition est à nouveau vérifiée.

  • Si elle est fausse, les instructions du bloc ne sont pas exécutées et le programme continue juste après le bloc while.

Le bloc d'instructions associé à une boucle est appelé le corps de la boucle.

La boucle for

On a fréquemment besoin d'écrire des boucles dont la condition est basée sur la valeur d'une variable qui est modifiée dans le corps de la boucle, comme dans notre exemple. Pour répondre à ce besoin, JavaScript et la plupart des autres langages disposent d'un autre type de boucle : le for.

Exemple d'utilisation

Voici notre programme d'exemple réécrit avec une boucle for.

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

Tapez et testez cet exemple. Vous obtenez exactement le même résultat que précédemment.

Là encore, le débogage permet de comprendre de l'intérieur le fonctionnement du programme.

Fonctionnement

La syntaxe de l'instruction for est la suivante.

for (initialisation; condition; étape) {
    // instruction executées tant que la condition est vérifiée
}

Son fonctionnement est un peu plus complexe que celui d'un while. Lisez attentivement ce qui suit :

  • L'initialisation se produit une seule fois, au début de l'exécution.

  • La condition est évaluée avant chaque tour de boucle. Si elle est vraie, un nouveau tour de boucle est effectué. Sinon, la boucle est terminée.

  • L'étape  est réalisée après chaque tour de boucle.

Le plus souvent, on utilise l'initialisation pour définir la valeur initiale d'une variable qui sera impliquée dans la condition de la boucle. L'étape sert à modifier la valeur de cette variable.

Compteur de boucle

La variable utilisée dans l'initialisation, la condition et l'étape d'une boucle for est appelée le compteur de la boucle.

Très souvent,  on n'a pas besoin d'utiliser la variable compteur en dehors du corps de la boucle. Dans ce cas, on peut la déclarer en même temps qu'on l'initialise dans la boucle. Notre programme d'exemple peut être réécrit ainsi :

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

Erreurs fréquentes

Boucle while infinie

Le principal risque lié à la boucle while est la "boucle infinie". Il s'agit d'une erreur de programmation très facile à commettre, donc dangereuse.

Modifiez l'exemple de boucle while en oubliant volontairement la ligne qui incrémente la variable nombre.

var nombre = 1;
while (nombre <= 5) {
    console.log(nombre);
    // La variable n'est plus modifiée : la condition sera toujours vraie
}

Testez ce programme avec Firefox : le navigateur semble bloqué pendant une trentaine de secondes, puis il affiche le message ci-dessous.

Message d'erreur du navigateur en cas de boucle infinie
Message d'erreur du navigateur en cas de boucle infinie

Lors de l'exécution de ce programme, on exécute un premier tour de boucle puisque la condition nombre <= 5 est initialement vérifiée. Mais comme on ne modifie plus la variable nombre dans le corps de la boucle, la condition est indéfiniment vraie : il s'agit d'une boucle infinie.

Manipulation du compteur d'une boucle for

Imaginons qu'un accès de folie temporaire vous conduise à modifier le compteur d'une boucle for dans le corps de la boucle, comme dans l'exemple suivant.

for (var compteur = 1; compteur <= 5; compteur++) {
    console.log(compteur);
    compteur++; // La variable est modifiée dans le corps de la boucle
}

L'exécution de cet exemple produit le résultat suivant.

A chaque tour de boucle, la variable compteur est incrémentée deux fois : dans le corps de la boucle, puis dans l'étape exécutée à la fin de chaque tour.

Choix entre un while et un for

Comment choisir le type de boucle à utiliser lorsqu'on doit répéter des instructions dans un programme ?

La boucle for a l'avantage d'intégrer la modification du compteur dans sa syntaxe, ce qui élimine le problème des boucles infinies. En revanche, son utilisation implique que le nombre de tours de boucle soit connu à l'avance. Les scénarios où le nombre de tours ne peut pas être prévu à l'avance seront plus simples à écrire avec un while. C'est notamment le cas lorsque la boucle sert à contrôler une donnée saisie par l'utilisateur, comme dans cet exemple.

var lettre = "";
while (lettre !== "X") {
    lettre = prompt("Tapez une lettre ou X pour sortir :");
    console.log(lettre);
}

Testez cet exemple : il vous demande de saisir une lettre et l'affiche jusqu'à ce que vous tapiez "X". Le nombre de tours de boucle dépend de vos saisies : il est imprévisible.

Voici le même programme, écrit avec un for.

var lettre = "";
for (; lettre !== "X";) {
    lettre = prompt("Tapez une lettre ou X pour sortir :");
    console.log(lettre);
}

On utilise uniquement la condition de sortie et pas l'initialisation ni l'étape : autant choisir le while  !

En conclusion, le choix entre un while et un for dépend du contexte. Toutes les boucles peuvent s'écrire avec un while. Si on peut prévoir à l'avance le nombre de tours de boucles à effectuer, la boucle for est le meilleur choix. Sinon, il vaut mieux utiliser le while.

A vous de jouer !

Voici venu le moment des exercices d'application. Créez ces exercices dans le répertoire chapitre_4. Les consignes habituelles s'appliquent : nommage des variables, indentation, test exhaustif pour trouver d'éventuelles erreurs.

Je vous conseille de réaliser chaque exercice avec le while, puis avec le for. Cela vous entraînera et vous permettra de mieux juger par la suite du meilleur type de boucle à utiliser.

Tournez manège (résultat à obtenir)

Ecrivez un programme manege.js qui fait faire 10 tours de manège en affichant un message à chaque tour.

Ensuite, améliorez votre programme pour que le nombre de tours soit saisi par l'utilisateur.

Nombre pairs (résultat à obtenir)

Examinez le programme parite.js ci-dessous qui affiche les nombres pairs (divisibles par 2) jusqu'à 10.

for (var i = 1; i <= 10; i++) {
    if (i % 2 === 0) {
        console.log(i + " est pair");
    }
}

Il utilise l'opérateur modulo %, qui calcule le reste de la division entière d'un nombre par un autre. Si le résultat du modulo d'un nombre par 2 est 0, alors ce nombre est pair. Voici quelques exemples d'utilisation de cet opérateur.

console.log(10 % 2); // Affiche 0 car 10 = 5 * 2 + 0
console.log(11 % 2); // Affiche 1 car 11 = 5 * 2 + 1

console.log(18 % 3); // Affiche 0 car 18 = 3 * 6 + 0
console.log(19 % 3); // Affiche 1 car 19 = 3 * 6 + 1
console.log(20 % 3); // Affiche 2 car 20 = 3 * 6 + 2

Modifiez le programme parite.js pour qu'il affiche aussi les nombres impairs.

Ensuite, améliorez le programme pour que le nombre initial soit saisi par l'utilisateur.

Contrôle de saisie (résultat à obtenir)

Ecrivez un programme saisie.js qui fait saisir un nombre à l'utilisateur jusqu'à ce que ce nombre soit inférieur ou égal à 100.

Ensuite, améliorez votre programme pour que le nombre saisi soit compris entre 50 et 100.

Réfléchissez bien à la condition de votre boucle : quel est l'inverse de "compris entre 50 et 100" ?

Table de multiplication (résultat à obtenir)

Ecrivez un programme multiplication.js qui fait saisir un nombre à l'utilisateur puis affiche la table de multiplication de ce nombre.

Ensuite, améliorez votre programme pour vérifier que le nombre saisi soit compris entre 2 et 9, en vous inspirant de l'exercice précédent.

Ni oui ni non (résultat à obtenir)

Ecrivez un programme oui_non.js qui fait jouer l'utilisateur au ni oui, ni non : il entre un texte jusqu'à saisir "oui" ou "non", ce qui déclenche la fin du jeu.

Triangle (résultat à obtenir)

Ecrivez un programme triangle.js qui construit progressivement un triangle de 7 lignes.

FizzBuzz (résultat à obtenir)

Ecrivez un programme fizzbuzz.js qui affiche tous les nombres entre 1 et 100 avec les exceptions suivantes :

  • Il affiche "Fizz" à la place du nombre si celui-ci est divisible par 3.

  • Il affiche "Buzz" à la place du nombre si celui-ci est divisible par 5 et non par 3.

Ensuite, améliorez votre programme pour qu'il affiche "FizzBuzz" à la place des nombres divisibles à la fois par 3 et par 5.

Solutions des exercices

Le code source des solutions est consultable en ligne. 

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