JavaScript en boucle

Table des matières

    Afficher la table des matières

Les boucles peuvent exécuter un bloc de code tant qu'une condition spécifiée est vraie.

La boucle while

La boucle while parcourt un bloc de code tant qu'une condition spécifiée est vraie.

Syntaxe

while (condition) {
      // code block to be executed
 }

Exemple

Dans l’exemple suivant, le code de la boucle sera exécuté encore et encore, tant que une variable (i) est inférieure à 10 :

Exemple

while (i < 10) {
    text += "The number is " + i;
    i++;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript While Loop</h2>

<p id="demo"></p>

<script>
let text = "";
let i = 0;
while (i < 10) {
  text += "<br>The number is " + i;
  i++;
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Si vous oubliez d'augmenter la variable utilisée dans la condition, la boucle ne se terminera jamais. Cela fera planter votre navigateur.

La boucle do while

La boucle do while est une variante de la boucle while. Cette boucle va exécutez le bloc de code une fois, avant de vérifier si la condition est vraie, alors il le fera répétez la boucle tant que la condition est vraie.

Syntaxe

do {
      // code block to be executed
}
while (condition);

Exemple

L'exemple ci-dessous utilise une boucle do while. La boucle sera toujours exécuté au moins une fois, même si la condition est fausse, car le bloc de code est exécuté avant que la condition ne soit testée :

Exemple

do {
    text += "The number is " + i;
    i++;
 }
while (i < 10);

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Do While Loop</h2>

<p id="demo"></p>

<script>
let text = ""
let i = 0;

do {
  text += "<br>The number is " + i;
  i++;
}
while (i < 10);  

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

N'oubliez pas d'augmenter la variable utilisée dans la condition, sinon la boucle ne finira jamais !

Comparaison de pour et de pendant

Si vous avez lu le chapitre précédent, à propos de la boucle for, vous découvrirez qu'une boucle while est à peu près la même chose qu'une boucle for, avec les instructions 1 et 3 omises.

La boucle dans cet exemple utilise une boucle for pour récupérer la voiture noms du tableau des voitures :

Exemple

const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i = 0;
let text = "";

for (;cars[i];) {
    text += cars[i];
   
i++;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
const cars = ["BMW", "Volvo", "Saab", "Ford"];

let i = 0;
let text = "";
for (;cars[i];) {
  text += cars[i] + "<br>";
  i++;
}

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

La boucle dans cet exemple utilise une boucle while pour collecter les noms de voitures du tableau cars :

Exemple

const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i = 0;
let text = "";
 
 while (cars[i]) {
    text += cars[i];
   
i++;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
const cars = ["BMW", "Volvo", "Saab", "Ford"];

let i = 0;
let text = "";
while (cars[i]) {
  text += cars[i] + "<br>";
  i++;
}

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>