Chargement...

Boucle for

Jusqu’ici vous choisissiez le chemin une seule fois avec if et switch. Sur une page réelle, il faut souvent répéter le même travail : cinq lignes, une somme, une courte liste. Copier cinq fois la même instruction casse au premier changement. for garde une seule copie et fait avancer un compteur.

Comment avance une boucle for ?

Tant que la condition est vraie, le bloc { } s’exécute à nouveau. Entre parenthèses, trois parties séparées par des points-virgules : d’où part le compteur, jusqu’où il continue, comment il change après chaque tour. Quand la condition devient fausse, la boucle s’arrête et le programme continue à la ligne suivante.

Les trois pièces de l’en-tête

📊 Pièces quotidiennes de for

Partie Lecture quotidienne Usage typique
début (init) démarre le compteur ici… let i = 0
condition continue tant que c’est vrai… i < 5
mise à jour après chaque tour, change le compteur… i++

Les débutants comptent souvent avec un petit entier nommé i. Ce nom est une habitude, pas une règle — n ou step conviennent aussi. Sans mise à jour, la condition peut ne jamais devenir fausse et la boucle tourne sans fin.

Comptage simple avec for

javascript 
for (let i = 0; i < 5; i++) {
console.log(i);
}

Compter du début à l’arrêt

Ça part de 0. Tant que i est inférieur à 5, on l’affiche puis on ajoute un. La console montre 0 à 4 — cinq tours. La valeur 5 n’apparaît pas car la condition échoue d’abord.

Lisez un tour au calme : condition → corps → mise à jour → condition encore. La mise à jour n’est pas dans le corps ; elle est dans l’en-tête pour que chaque tour avance de la même façon.

Journaliser une étape claire

javascript 
for (let i = 1; i <= 3; i++) {
console.log("step " + i);
}

Partir de un, libellés plus clairs

Ici le compteur commence à 1 et la condition est i <= 3 ; vous voyez step 1 à step 3. Zéro ou un est un choix de conception — alignez seulement la condition.

Somme avec for

javascript 
let total = 0;
for (let i = 1; i <= 4; i++) {
total = total + i;
}
console.log(total);

Construire la somme tour après tour

total part de zéro et prend la valeur actuelle de i à chaque tour. Après 1+2+3+4, on obtient 10. La boucle brille quand le résultat grandit au fil des tours, pas pour une seule branche.

Pas de deux

javascript 
for (let i = 0; i < 8; i += 2) {
console.log(i);
}

Avancer de deux en deux

i += 2 avance de deux chaque tour : 0, 2, 4, 6. L’emplacement de mise à jour n’est pas réservé à i++ — tout changement honnête qui rapproche la fin convient.

Coller un texte court

javascript 
let line = "";
for (let i = 1; i <= 3; i++) {
line = line + "n" + i + " ";
}
console.log(line);

Coller des morceaux pendant la boucle

line commence vide et chaque tour ajoute un morceau. Après trois tours vous avez quelque chose comme n1 n2 n3. Le même motif servira plus tard pour bâtir le texte de page.

Voir le résultat sur la page

Exécutez un court comptage, construisez un message, puis écrivez-le sur la page.

Comptage de page avec for

html 
<!DOCTYPE html>
<html>
<head>
<title>For — page count</title>
</head>
<body>
<p id="out">…</p>
<script>
let msg = "";
for (let i = 1; i <= 4; i++) {
msg = msg + i + " ";
}
let box = document.getElementById("out");
box.textContent = "count=" + msg.trim();
</script>
</body>
</html>

La page affiche count=1 2 3 4. Changez la borne supérieure, actualisez, lisez la nouvelle liste. La leçon suivante avec while répète aussi, mais vérifie la condition autrement — quand vous connaissez déjà le plan du compteur, for reste l’outil propre.

À vous de jouer

  1. Écrivez un for avec i < 5 qui journalise 0…4.
  2. Modifiez-le pour journaliser 1…5 avec i <= 5.
  3. Sommez 1…5 dans total et journalisez le résultat.
  4. Affichez les pairs sous 10 avec i += 2.
  5. Dans la boucle, construisez un texte de trois libellés (a, b, c).
  6. Dans la démo HTML, changez seulement la borne, actualisez, lisez count=.

Erreurs fréquentes

  • Décalage d’un : i < 5 au lieu de i <= 5 (ou l’inverse) quand le nombre de tours voulu diffère
  • Oublier la mise à jour (i++) pour que la condition ne finisse jamais
  • Mettre en boucle d’un tour ce qu’un seul if suffisait
  • Modifier une autre variable que celle de la condition
  • Supposer que i reste utile après la boucle s’il est déclaré avec let dans l’en-tête (portée de bloc)

Résumé

  • for répète le corps tant que la condition est vraie
  • L’en-tête a trois pièces : début, condition, mise à jour
  • Excellent pour compter, sommer et bâtir un texte court
  • La mise à jour peut être i++, i += 2 ou un autre pas clair
  • Si la boucle construit un message, montrez-le aussi sur la page
  • Suite : boucle while — répéter tant qu’une condition tient, sans en-tête à trois pièces

🧠 Testez Vos Connaissances

Prêt à Commencer

Testez Vos Connaissances

Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet

❓
8
Questions
🎯
70%
Pour Réussir
♾️
∞
Temps
🔄
∞
Tentatives

📝 Instructions

  • Lisez chaque question attentivement
  • Sélectionnez la meilleure réponse pour chaque question
  • Vous pouvez refaire le quiz autant de fois que vous le souhaitez
  • Votre progression sera affichée en haut
Sujet 23 de 23
Javascript Tutoriel