Boucles JavaScript

Introduction

Dans ce laboratoire, vous apprendrez à utiliser les boucles en JavaScript. Les boucles sont un concept fondamental en programmation qui vous permet d'exécuter un bloc de code de manière répétée. Ceci est utile pour des tâches telles que l'itération sur des listes de données ou l'exécution d'une action un nombre spécifique de fois.

Vous explorerez les trois principaux types de boucles en JavaScript :

• Boucle for : Répète un bloc de code un nombre connu de fois.
• Boucle while : Répète un bloc de code tant qu'une condition spécifiée est vraie.
• Boucle do-while : Similaire à une boucle while, mais elle exécute le bloc de code au moins une fois avant de vérifier la condition.

Vous apprendrez également à utiliser l'instruction break pour sortir prématurément d'une boucle.

Tout votre travail sera effectué dans le WebIDE. Vous écrirez du code JavaScript dans le fichier script.js, qui est déjà lié dans index.html. Vous pouvez voir la sortie de votre code en passant à l'onglet Web 8080 dans l'environnement du laboratoire.

Créer une boucle for avec initialiseur et condition

Dans cette étape, vous allez créer votre première boucle for. La boucle for est idéale lorsque vous savez à l'avance combien de fois vous souhaitez répéter une action.

La syntaxe de base d'une boucle for est la suivante :
for (initialiseur; condition; expression-finale) { // code à exécuter }

• Initialiseur : let i = 0 en est un exemple. Il s'exécute une seule fois au tout début pour déclarer et initialiser une variable de compteur.
• Condition : i < 5 en est un exemple. Cette expression est vérifiée avant chaque itération de la boucle. Si elle est vraie, la boucle continue ; si elle est fausse, la boucle s'arrête.

Créons une boucle simple qui génère une liste d'éléments. Ouvrez le fichier script.js depuis l'explorateur de fichiers à gauche et ajoutez le code suivant.

const output = document.getElementById("output");
let htmlContent = "<ul>";

// Cette boucle for a un initialiseur (let i = 0) et une condition (i < 3)
for (let i = 0; i < 3; i++) {
  htmlContent += `<li>Item ${i}</li>`;
}

htmlContent += "</ul>";
output.innerHTML = htmlContent;

Dans ce code :

• let i = 0 initialise le compteur de boucle i à 0.
• i < 3 est la condition qui maintient la boucle en cours tant que i est inférieur à 3.
• i++ est l'expression finale qui incrémente le compteur après chaque itération (nous nous concentrerons sur cela à l'étape suivante).

Après avoir ajouté le code, enregistrez le fichier. Ensuite, cliquez sur l'onglet Web 8080 pour voir le résultat. Vous devriez voir une liste non ordonnée avec trois éléments.

Utiliser l'incrément dans la boucle for pour compter

Dans cette étape, vous allez vous concentrer sur la troisième partie de la boucle for : l'expression finale, qui est généralement utilisée pour incrémenter le compteur.

L'expression finale (par exemple, i++) s'exécute à la fin de chaque itération de la boucle. Elle met à jour le compteur de boucle, le rapprochant du point où la condition devient fausse. i++ est un raccourci courant pour i = i + 1.

Modifions la boucle pour compter de 1 à 5. Remplacez le code existant dans script.js par le suivant :

const output = document.getElementById("output");
let htmlContent = "<h2>Counting from 1 to 5:</h2>";

// L'expression finale i++ incrémente le compteur après chaque boucle
for (let i = 1; i <= 5; i++) {
  htmlContent += `Count: ${i}<br>`;
}

output.innerHTML = htmlContent;

Notez les changements :

• L'initialiseur est maintenant let i = 1, donc nous commençons à compter à partir de 1.
• La condition est i <= 5, donc la boucle s'exécute tant que i est inférieur ou égal à 5.
• L'expression i++ garantit que le compteur augmente à chaque itération.

Enregistrez le fichier et actualisez l'onglet Web 8080. Vous verrez la sortie changer pour afficher une liste de comptes de 1 à 5.

Implémenter une boucle while pour la répétition

Dans cette étape, vous allez découvrir la boucle while. Une boucle while continue d'exécuter un bloc de code tant qu'une condition spécifiée est vraie.

La syntaxe est plus simple qu'une boucle for :
while (condition) { // code à exécuter }

Avec une boucle while, vous devez gérer l'initialisation de la variable de compteur avant la boucle et son incrémentation à l'intérieur de la boucle. Oublier d'incrémenter le compteur entraînera une boucle infinie, qui peut faire planter votre navigateur.

Réécrivons l'exemple de comptage précédent en utilisant une boucle while. Remplacez le code dans script.js par celui-ci :

const output = document.getElementById("output");
let htmlContent = "<h2>Counting with a while loop:</h2>";

let i = 1; // 1. Initialiseur
while (i <= 5) {
  // 2. Condition
  htmlContent += `Count: ${i}<br>`;
  i++; // 3. Incrémentation
}

output.innerHTML = htmlContent;

Ce code obtient le même résultat que la boucle for de l'étape précédente, mais la structure est différente. L'initialiseur, la condition et l'incrémentation sont maintenant des instructions distinctes.

Enregistrez le fichier et vérifiez l'onglet Web 8080. La sortie devrait être identique à celle de l'étape précédente, démontrant une manière différente d'obtenir la même répétition.

Ajouter une boucle do-while pour au moins une exécution

Dans cette étape, vous allez explorer la boucle do-while. Cette boucle est une variante de la boucle while avec une différence clé : la boucle do-while exécutera toujours son bloc de code au moins une fois, avant de vérifier la condition.

La syntaxe est la suivante :
do { // code à exécuter } while (condition);

Ceci est utile lorsque vous devez effectuer une action d'abord, puis décider si vous devez la répéter. Voyons cela en action avec un exemple où la condition est initialement fausse.

Remplacez le code dans script.js par le suivant :

const output = document.getElementById("output");
let htmlContent = "<h2>Testing a do-while loop:</h2>";

let i = 10; // Commence avec une valeur qui rend la condition while fausse

// Cette boucle s'exécutera une fois, même si i n'est pas inférieur à 5
do {
  htmlContent += `The value of i is: ${i}<br>`;
  i++;
} while (i < 5);

output.innerHTML = htmlContent;

Dans cet exemple, la condition i < 5 est fausse dès le départ car i vaut 10. Cependant, comme il s'agit d'une boucle do-while, le code à l'intérieur du bloc do s'exécute une fois avant que la condition ne soit vérifiée.

Enregistrez le fichier et regardez l'onglet Web 8080. Vous verrez le message "The value of i is: 10", prouvant que la boucle s'est exécutée exactement une fois.

Sortir d'une boucle avec l'instruction break

Dans cette étape, vous apprendrez comment sortir prématurément d'une boucle à l'aide de l'instruction break. L'instruction break termine immédiatement la boucle courante et transfère le contrôle à l'instruction suivant la boucle.

Ceci est utile lorsque vous recherchez quelque chose dans une boucle et que vous souhaitez vous arrêter dès que vous l'avez trouvé, sans terminer les itérations restantes.

Utilisons une boucle for qui est censée s'exécuter 10 fois mais qui s'arrêtera plus tôt lorsqu'une certaine condition sera remplie. Remplacez le code dans script.js par celui-ci :

const output = document.getElementById("output");
let htmlContent = "<h2>Using the break statement:</h2>";

for (let i = 1; i <= 10; i++) {
  if (i === 6) {
    htmlContent += "Found 6! Breaking the loop.<br>";
    break; // Quitte la boucle immédiatement
  }
  htmlContent += `Current number is ${i}<br>`;
}

htmlContent += "Loop finished.";
output.innerHTML = htmlContent;

Dans ce code, la boucle for est configurée pour compter de 1 à 10. Cependant, l'instruction if vérifie si i est égal à 6. Lorsque c'est le cas, l'instruction break est exécutée et la boucle se termine. Le code n'affichera pas les nombres 7 à 10.

Enregistrez le fichier et affichez l'onglet Web 8080. Vous verrez le comptage s'arrêter à 5, suivi du message "Breaking the loop".

Résumé

Félicitations pour avoir terminé ce laboratoire sur les boucles JavaScript ! Vous avez appris à contrôler le flux de vos programmes en répétant des blocs de code.

Dans ce laboratoire, vous avez couvert :

• La boucle for, qui est parfaite lorsque vous connaissez le nombre d'itérations à l'avance, en utilisant un initialiseur, une condition et une expression finale.
• La boucle while, qui se répète tant qu'une condition est vraie et nécessite une gestion manuelle du compteur.
• La boucle do-while, qui garantit au moins une exécution du bloc de code avant de vérifier la condition.
• L'instruction break, qui offre un moyen de sortir prématurément de n'importe quelle boucle en fonction d'une condition.

Maîtriser les boucles est une étape essentielle pour devenir un développeur JavaScript compétent. N'hésitez pas à expérimenter davantage avec le code de ce laboratoire pour consolider votre compréhension.