La boucle for en JS
Un peu d'histoire
Il est important de connaître l'histoire pour comprendre le présent et imaginer le futur (cette petite maxime est de moi. Elle guide un peu ma vie).
Du coup, je voulais rendre hommage à Ada Lovelace qui, au début des années 1800 a posé les bases de la boucle for que nous utilisons tous en développement aujourd'hui.
Femme, donc privée d'instruction.
Femme, donc privée du droit de travailler
Vivante à une époque où les ordinateurs n'existaient pas
Elle a posé les bases d'une notion fondamentale en informatique !
Femme, donc privée de la reconnaissance de son travail !
J'espère réparer un peu de ce mal qui lui a été causé.
le principe d'une boucle
On a déjà tous écouté une chanson "en boucle" autrement en la répétant de début jusqu'à la fin à plusieurs reprise.
C'est le principe d'une boucle. On répète les choses plusieurs fois. Toutefois, il y a une différence avec la boucle informatique. Si celle-ci peut répéter les mêmes instructions (les mêmes paroles et mélodies de la chanson) elle peut aussi les changer à chaque passage (à chaque lecture). C'est même plutôt souhaitable...
Mais à quoi ça peut bien servir ?
Imaginez que vous vouliez créer une liste déroulante sur un site web avec tous les pays du monde. Il y en a 198 !
<select name="pays">
<option selected disabled>Choisir un pays</option>
<option value="1">France</option>
<option value="2">Allemagne</option>
<option value="3">Angleterre</option>
</select>
Ce serait long et fastidieux. La boucle est la solution.
analyse de la structure d'une boucle
Quels sont les éléments d'une boucle alors ?
Il faut dire à la machine qu'on veut écrire tous les pays, sans exception du premier au dernier.
Nos paramètres indispensables sont donc :
1. le point de départ, le premier élément de notre liste. Dans un array, l'indice 0.
2. le dernier élément, là où la machine doit s'arrêter. Ca peut paraitre bête car pour nous c'est le dernier élément de la liste. Mais une machine pourrait continuer indéfiniment sans trouver cela stupide. Si je n'éteind pas la lumière en sortant de chez moi, l'ampoule ne va pas trouver étrange d'éclairer alors que personne n'est dans la pièce ... Donc pourquoi notre ordinateur n'afficherait-il pas des lignes vides ? Le code serait exact. Inutile mais exact.
3. le rythme de la boucle, comme pour notre chanson. Veut-on écouter chaque seconde, afficher chaque pays ou faire une lecture rapide, afficher un pays sur 2 ? En informatique, on parlera d'incrément.
Et bien sûr, dans notre exemple on veut écrire quelque chose, une ligne HTML. Voilà l'élément principal, l'objet même de notre boucle.
la syntaxe
for( let i=0; i<200; i++){
// code à exécuter en boucle
// ici on l'excutera 200 fois (de 0 à 199)
}
La boucle for() contient donc 3 paramètres
1. let i=0 : une variable locale initialisée à 0. Le point de départ
2. i<200 : la limite à ne pas dépasser pour i. Le point final de sortie de notre boucle
3. l'incrément, ici de 1 en 1.
i++ est une syntaxe courte de i = i + 1
mise en pratique
Reprenons notre exemple des pays.
Les pays seront stockés dans un array (un tableau de données).
let pays = ["France", "Espagne", "Australie"];
Chaque élément a un numéro.
console.log(pays[0]); // affichera France
On montre à la boucle comment faire une ligne et on lui demande de faire de même (encore et encore la même opération), de répéter la ligne, jusqu'à la fin du tableau.
for(let i=O; i<3; i++){
document.write('<option value="'+i+'">'+pays[i]+'</option>');
}
1. du pays 0, soit la France
2. au pays 2 (car inférieur à 3) soit l'Australie
3. en affichant chaque pays
4. on écrit : document.write()
5. une option dont la value est l'indice du array
6. et qui contient le texte contenu dans cet array à l'indice indiqué
La problématique, c'est qu'on ne sait pas toujours quand se finit la boucle ... Par exemple, je ne suis pas sensé me souvenir qu'il y a 198 pays officiellement reconnus.
On va donc laisser la machine compter le nombre d'éléments contenus dans le array.
for(let i=O; i<pays.length; i++){
document.write('<option value="'+i+'">'+pays[i]+'</option>');
}
pays.length renvoie le nombre d'éléments. Or il y a trois pays. On aura donc bien la même chose : i<3.
cas d'utilisation
La liste des pays est un bon exemple, réel, bien q u'on ne le ferait pas ainsi.
Affecter un effet javascript à une collection d'image. Quand on clique sur une image elle grossit et se place au dessus du contenu (une lightbox). On montre à la machine comment faire avec la première image (celle en indice 0) jusqu'à la fin de la collection d'images.
exercices
exercice 1
exercice 2
corrigés
exercice 1
// ma liste d'amis
let amis = ['hasdin', 'juliette', 'mathieu', 'virginie', 'franck', 'fatima'];
// le début de la UL, hors boucle car cette balise ne SE REPETE PAS
document.write('<ul>');
// la boucle
for(let i=O; i<amis.length; i++){
// la LI se répète mais contient un prénom différent
document.write('<li>'+amis[i]+'</li');
}
// la fin de la UL hors boucle car elle ne se répète pas non plus
document.write('</ul>');
exercice 2
for ( let i=78; i<198; i+=2){
console.log(i);
}