Les boucles en JavaScript

Formation Soyez un druide du JavaScript !

Tutorial Thumbnail

Comme tout langage de programmation moderne, il est possible qu'il soit nécessaire de répéter des opérations plusieurs fois lorsqu'une condition est remplie. Cependant, le développeur ne va pas s'amuser à copier / coller le même code afin de réaliser cette tache un certain nombre de fois. C'est pour cela que les boucles existent. Il existe trois type de boucles en Javascript :

  • La boucle while (Tant que... Faire),
  • La boucle do... while (Répéter... Tant que ...),
  • La boucle for (Pour).

Voyons ensemble le fonctionnement des trois types de boucles.


La boucle "while" (Tant que... Faire)

La boucle "while" (Tant que... Faire) permet de répéter une série d'instructions tant qu'une condition donnée est vraie c'est à dire tant que la condition de sortie n'est pas vérifiée.


Algorithme :

Tant que (condition vraie) Faire
    # -> Instructions à répéter tant que la condtion est vraie
Fin Tant que


Codage en JavaScript :

while (condition) {
    // Code à exécuter tant que la condition est vraie 
}


Voici un exemple de code :

let n = 1;

while (n <= 30) {
    n = n * 5;
    console.log(n);
}
Les valeurs affichées de ce programme, une fois la boucle terminée, seront : 5, 25 et 125.


La boucle "do... while" (Répéter... Tant que...)

La boucle do... while (Répéter... Tant que...) permet de répéter une suite d'instructions jusqu'à ce qu'une condition ne soit plus vérifiée.


Algorithme :

Répéter
    # -> Instructions à répéter tant que la condition est vraie
Tant que (condition vraie)


Codage en JavaScript :

do {
    // Code à exécuter tant que la condition est vraie
} while (condition vraie);


Un exemple dans le cas où cette boucle permet d'afficher les valeurs de n tant que n > 0 donc jusqu'à ce que n = 0.

let n = 10;          // Valeur de "n" au départ

// Faire tant que la valeur de "n" soit > 0  
do {
   console.log(n);   // Affichage de "n" en partant de 10
   n--;              // Décrémentation  de "n" - 1
} while (n > 0);
Les valeurs affichées une fois la boucle terminée seront : 10, 9, 8, 7, 6, 5, 4, 3, 2 et 1.

La boucle do... while est relativement semblable à la boucle while, la différence se situe simplement au niveau de l'ordre dans lequel vont se faire les opérations. Dans le cas de la boucle do.. while, le code contenu dans la boucle sera exécuté avant que la condition de sortie soit évaluée.


Cela signifie qu'à la différence de la boucle while, on effectuera toujours un passage dans une boucle do.. while même si la condition de sortie est vraie dès le départ.


La boucle "for"

La boucle for permet de répéter une suite d'instructions un nombre de fois déterminé à l'avance. Ce type de boucle nécessite un compteur de boucle. Ce compteur est un nombre entier. Pour ce compteur, il faut :

  • une valeur initiale (par défaut 0)
  • un nombre de boucles à exécuter (constante NB_BOUCLES) -> une condition pour rester dans la boucle
  • une incrémentation automatique de 1 à la fin de l'exécution du contenu de la boucle

Algorithme :

Pour variableCompteur Allant de 0 A (NB_BOUCLES-1) au pas de 1# -> Instructions à répéter le nombre de fois correspondant à NB_BOUCLES
Fin Pour


Codage en JavaScript :

for (variableCompteur = 0; variableCompteur < NB_BOUCLES; variableCompteur++) {
   // Code à répéter dans la boucle
}
Pour que la boucle soit répétée NB_BOUCLES fois, la condition pour rester dedans est "variableCompteur" < NB_BOUCLES.


Dans cet exemple, la variable représentant le compteur de boucle est i, cette variable peut être déclarée directement dans la boucle avant d'être initialisée à 0. Le nombre de passages dans la boucle est spécifié dans la condition de sortie avec la valeur 10. A chaque passage dans la boucle, la valeur de i est affichée dans la console puis incrémentée automatiquement.

for (let i = 0; i < 10; i++) {
  console.log(i);  
}
Les valeurs affichées une fois la boucle terminée seront : 0,1,2,3,4,5,6,7,8 et 9.


Exercices

Pour voir si tu as bien compris le fonctionnement des boucles, n'hésite-pas à t'entrainer de ton côté avec les exercices proposés ci-dessous. Prends ton éditeur préféré, créé un nouveau projet contenant un fichier HTML et JavaScript et c'est parti !


Exercice 1 : Calcul de factorielle

Pour tout nombre entier n > 1, la factorielle (noté n!) est définie par : n! = n x (n-1) x (n-2) x ... x 1 et par convention : 0! = 1.


Par exemple :

  • 1! = 1
  • 2! = 1 x 2 = 2
  • 3! = 1 x 2 x 3 = 6
  • 4! = 1 x 2 x 3 x 4 = 24
  • 10! = 1 x 2 x 3 x 4 x 5 x 6 x 7 x 8 x 9 x 10 = 3 628 800

Codez une application JavaScript qui permet de calculer et afficher dans la console du navigateur la factorielle d'un nombre en utilisant une boucle for.


Exercice 2 : Conversion Euros/Dollars

Codez une application JavaScript qui affiche une table de conversion de sommes d'argent exprimées en euros, en dollars canadiens. La progression des sommes de la table sera "géométrique", comme dans l'exemple ci-dessous :

1 euro(s) = 1.65 dollar(s)
2 euro(s) = 3.30 dollar(s)
4 euro(s) = 6.60 dollar(s)
8 euro(s) = 13.20 dollar(s)
etc.. (s'arrêter à 16384 euros) 


Exercice 3 : Nombres triples

Codez une application JavaScript qui calcule et affiche une suite de 12 nombres dont chaque terme soit égal au triple du terme précédent. La valeur de départ pourra être choisie.

Exemple :

Valeur de départ : 2
Valeurs de la suite : 2 6 18 54 162 486 .... 


Exercice 4 : Suite de Fibonacci

La suite de Fibonacci est une suite d'entiers dans laquelle chaque terme est la somme des deux termes qui le précèdent. Elle commence par les termes 0 et 1.

Suite de Fibonacci : 0 1 1 2 3 5 8 13 21 ....


Codez une application JavaScript qui calcule et affiche les 17 premiers nombres de la suite de Fibonacci.


Exercice 5 : Table de multiplication

Codez une application JavaScript qui calcule et affiche les 20 premiers termes de la table de multiplication par 7, en signalant au passage (à l'aide d'une astérisque) ceux qui sont multiples de 3.

Exemple :

7 14 21 * 28 35 42 * ...


Activité : Conjecture de Syracuse

En mathématiques, on appelle suite de Syracuse une suite d'entiers naturels définie de la manière suivante :

  • On part d'un nombre entier N plus grand que zéro
  • Si N est pair on le divise par 2, sinon on le multiplie par 3 et on ajoute 1
  • On répète cette opération tant que la dernière valeur calculée n'est pas arrivée à 1

Les différente valeurs obtenues constituent la suite de Syracuse pour N.


Version 1 :

Dans votre EDI préféré comme Visual Studio Code par exemple, créez dans votre dossier de projet un nouveau fichier HTML 5 (.html) et ainsi qu'un fichier JavaScript (.js).

Codez les instructions JavaScript qui permettent de calculer et d'afficher dans la console du navigateur les valeurs constituant la suite de Syracuse d'un nombre N.


Les conditions devront être les suivantes :

  • Le nombre N sera directement initialisé dans le programme.
  • Pour tester si un nombre est pair avec l'opérateur modulo (%) : x % 2 = 0 si x est pair.
  • Les différentes valeurs de la suite seront stockées dans une chaine de caractères avant d'être affichées.

Exemple de rendu afin de tester le programme :



Version 2 :

Compléter cette application de manière à ce qu'elle affiche en plus des valeurs de la suite :

  • Le temps de vol : c'est à dire le nombre d'itérations qui ont été réalisées pour arriver à 1.
  • L'altitude maximale : c'est à dire la valeur maximale de la suite.

Niveau Débutant

Technologie utilisée :

Proposer une modification
Antoine
Par Antoine
Rédigé le Mardi 18 Octobre 2022