Boucle for en Javascript
Introduction
Il existe plusieurs types de boucles. Les boucles sont des blocs d'instructions qui permettent de répéter un blonc d'instructions "autant de fois que nécessaire".
"Autant de fois que nécessaire" est exprimé par la personne qui code la boucle:
répéter un nombre fixe de fois: 5 fois, ou 67 fois par exemple
répéter un nombre variable de fois: autant de fois que la valeur dans la variable compteur, autant de fois que demandé par l'utilisateur, autant de fois qu'il y a de cases dans un tableau, etc.
répéter un nombre qui dépend de la situation: tant qu'on a pas trouvé la bonne réponse, au bout d'un certain temps, tant que l'utilisateur demande de continuer etc.
Dans les trois cas, on peut utiliser une boucle while, et dans les deux premiers on peut également utiliser une boucle for.
Syntaxe
Syntaxe générique:
La boucle for s'écrit comme suit en JavaScript: le mot clef for, puis entre parenthèses un début suivi d'un point virgule suivi d'une condition pour continuer suivie de l'incrémentation. Enfin, le bloc d'instructions sont entre accolades:
for( début ; condition pour continuer; incrémentation)
{
//instructions à répéter en javascript
}
Les instructions qui ne sont pas en gras sont à déterminer par le programmeur.
Exemple
Imaginons que l'on veuille faire un compteur de 0 à 10, de 1 en 1:
début: une variable (appelons-la compteur) vaut 0 au début -> let compteur=0
condition pour continuer: la variable (que nous avons appellée compteur) est inférieure à 11 -> compteur <11
incrémentation: la variable (que nous avons appellée compteur) augment de 1 à chaque fois -> compteur ++ OU compteur=compteur+1 OU compteur=+=1
instructions à répéter: afficher la variable -> alert(compteur)
for ( let compteur =0 ; compteur<11 ; compteur++)
{
alert(compteur);
}
Répéter un nombre fixe de fois une instruction
Syntaxe générique :
Imaginons que l'on veut répéter une instruction un nombre n de fois:
for( let maVariableCompteur=0 ; maVariableCompteur<n ; maVariableCompteur++)
{
//instructions à répéter en javascript qui se répétera n fois
}
Exemple
Répéter ajouter 170 fois le nombre 57
instructions à répéter: une variable (appellons-là somme) vaut elle-même plus 57 -> somme=somme+57 OU somme+=57
let somme=0;
for ( let repetition =0 ; repetition<170 ; repetition++)
{
somme+=57;
}
alert(somme);
Exercice 1
Vous aller devoir ajouter 5 fois le texte entré par un utilisateur et l'affciher à la fin.
Par exemple, si un utilisateur entre:
"Le"
" "
"cours de"
"base de données"
"est avec PhPMyAdmin"
Le système affichera à la fin "Le coursdebase de donnéesest avec PhPMyAdmin".
Essayer de faire l'exercice par vous même sans regarder la correction
Compréhension: Quels sont les éléments suivants dans l'algorithme à implementer?
début: ?
condition pour continuer: ?
incrémentation: ?
instructions à répéter: ?
début: on commence avec une variable qui sert à compter, égale à 0 au début
condition pour continuer: l'instruction n'a pas été répétée 5 fois, c'est à dire la variable est inférieure à 5
incrémentation: la variable qui sert à compter vaut 1 de plus
instructions à répéter: demander à l'utilisateur d'entrer un texte, puis concaténer une chaine de caractère avec le nouveau texte
Programmation boucle for: Programmer la boucle for, sans programmer les instructions à répéter
for ( let repetition =0 ; repetition<5; repetition++)
{
}
Programmation complète : Programmer l'ensemble de l'algorithme
let chaineDeCaracteres="";
for ( let repetition =0 ; repetition<5; repetition++)
{
chaineDeCaracteres+=prompt("Enter le texte à ajouter"); // OU en deux instructions: let ajout=prompt("Enter le texte à ajouter"); chaineDeCaracteres+= ajout;
}
alert (chaineDeCaracteres);
Répéter un nombre variable de fois une instruction
Syntaxe générique :
Imaginons que l'on veut répéter une instruction un nombre contenu dans la variable maVariable de fois:
for( let maVariableCompteur=0 ; maVariableCompteur<maVariable ; maVariableCompteur++)
{
//instructions à répéter en javascript qui se répétera n fois
}
Exemple
Transformer un mot en une série de "*" au tant de fois qu'il y a de caractères dans une String
grandeur variable: la longueur de la chaine de caractères ( en utilisant length )
instructions à répéter: une variable de type String se voit ajouter d'une "*"
let motEntreParUtilisateur=prompt("Enter votre mot");
let motTransforme="";
for ( let repetition =0 ; repetition<motEntreParUtilisateur.length ; repetition++)
{
motTransforme+="*";
}
alert(motTransforme);
Exercice 2
Vous aller devoir saluer tous les utilisateurs, sachant que chaque utilisateur est dans une case d'un tableau Array
Par exemple, si nous avez le tableau:
let etudiants= [ "Martine" , "Jane", "Williams" ];
votre programme va afficher "Bonjour Martine Jane Williams"
Essayer de faire l'exercice par vous même sans regarder la correction
Compréhension: Quels sont les éléments suivants dans l'algorithme à implementer?
début: ?
condition pour continuer (grandeur variable): ?
incrémentation: ?
instructions à répéter: ?
début: on commence à l'index 0, au début du tableau
condition pour continuer: nous ne sommes pas arrivés à la fin du tableau, à l'index de la taille du tableau (etudiants.length) moins 1
incrémentation: nous nous rendons à l'index en cours plus 1
instructions à répéter: concatener le prénom de l'index en cours à la suite de "Bonjour ...."
Programmation boucle for: Programmer la boucle for, sans programmer les instructions à répéter
for ( let index =0 ; index< etudiants.length; index++)
{
}
Programmation complète : Programmer l'ensemble de l'algorithme
let texteBonjourEtudiants="Bonjour ";
for ( let index =0 ; index< etudiants.length; index++)
{
texteBonjourEtudiants+= etudiants[index] +" ";
}
alert (texteBonjourEtudiants);
Modification : Programmer l'algorithme pour afficher un "et" entre l'avant dernier et le dernier prénom
Ex: "Bonjour Martine Jane et Williams"
let texteBonjourEtudiants="Bonjour ";
for ( let index =0 ; index< (etudiants.length-1); index++)
{
texteBonjourEtudiants+= etudiants[index] +" ";
}
alert (texteBonjourEtudiants+ "et "+ etudiants[etudiants.length-1]);
Exercices de révision
A partir de la Programmation complète de l'exercice 1, créer l'équivalent en boucle while
let chaineDeCaracteres="";
let repetition =0
while (repetition<5)
{
chaineDeCaracteres+=prompt("Enter le texte à ajouter"); // OU en deux instructions: let ajout=prompt("Enter le texte à ajouter"); chaineDeCaracteres+= ajout;
repetition++;
}
alert (chaineDeCaracteres);
A partir de la Programmation complète de l'exercice 2, créer l'équivalent en boucle while
let texteBonjourEtudiants="Bonjour ";
let index =0
while ( index< etudiants.length)
{
texteBonjourEtudiants+= etudiants[index] +" ";
index++;
}
alert (texteBonjourEtudiants);