Je laisse cet article pour l'instant mais cette partie va être réorganisée

Dessin animé 3 : la boucle For

On reprend l'exemple avec la liste :

maListe = ["zero","un","deux","trois","quatre"];

On veut afficher les textes les un en dessous des autres et on ne veut pas utiliser la fonction draw() comme l'autre fois mais tout écrire d'un seul coup.

Alors on pourrait écrire ça :

text(maListe[0], 10,50);
text(maListe[1], 10,50+50);
text(maListe[2], 10,50+100);
text(maListe[3], 10,50+150);
text(maListe[4], 10,50+200);


ça marcherait mais on veut que ça marche quel que soit le nombre de texte dans le tableau : imaginez qu'il y ait 50 texte on ne va pas écrire cette ligne 50 fois !!!

On va utiliser la boucle For

on appelle cela une boucle car on va avoir un bloc de code qui va être répété en boucle un certain nombre de fois avec une valeur qui va évoluer à chaque passage dans la boucle en augmentant de un (par exemple)

Il faudrait avoir quelque chose comme ça Pour ma nouvelle variable index allant de 0 à 14 faire.... { tel blocde code }

Ca s'écrit comme ça :

For ( 1 ; 2 ; 3 ) { le bloc de code }

• For : ça veut dire "Pour". Attention c'est bien des ; dans les parenthèses ! )
• 1 : On crée une nouvelle variable et on lui met sa valeur de départ ( par exemple : let index = 0 )
• 2 : On met le test pour rester dans la boucle (par exemple : index<5  Tant que index<5 on reste dans la boucle )
• 3 : ce qu'il faut faire à la fin de chaque boucle avant de passer à la suivante : augmenter la valeur de index de 1 : index=index+1 (par exemple)

Cela donnerai donc, par exemple :

for ( let index=0 ; index<5 ; index=index+1 ) { ... ici le code... }

Voir ci-dessous :

Notes :

• index+=1 est équivallent à index=index+1  (c'est un raccourci)... on peut aussi faire -= /= ou *= si on en a besoin !
• J'ai rajouté le dessin d'un cercle à la meme position que les textes pour voir où se trouve les coordonnées des textes par défaut
• J'ai écrit, non pas index<5 mais index<maListe.length ce qui revient au même ! La liste comporte bien 5 éléments mais comme pour le premier index=0 ça va jusqu'à 4
  Vous pouvez essayer d'ajouter ou d'enlever des textes dans la liste : ça marche toujours !

N.B. Prenez le temps à chaque fois de bien comprendre tout ce que fait le code : c'est normal d'avoir besoin d'un peu de temps !!!

Vous pouvez faire toutes les modifications pour voir tout le temps !!!!