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 :
Voyons ensemble le fonctionnement des trois types de boucles.
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...) 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
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 :
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.
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 !
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 :
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
.
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)
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 ....
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.
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 * ...
En mathématiques, on appelle suite de Syracuse une suite d'entiers naturels définie de la maniÚre suivante :
N
est pair on le divise par 2, sinon on le multiplie par 3 et on ajoute 1Les différente valeurs obtenues constituent la suite de Syracuse pour N.
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 :
x % 2 = 0
si x
est pair.Exemple de rendu afin de tester le programme :
Compléter cette application de maniÚre à ce qu'elle affiche en plus des valeurs de la suite :