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
Nest 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 = 0sixest 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.
