Contenu principal
Apprendre à coder
Cours : Apprendre à coder > Chapitre 1
Leçon 12: Les bouclesRésumé : les boucles
Voici un résumé de ce que nous avons couvert dans ce module sur les boucles.
Quand nous écrivons des programmes, nous avons souvent besoin de répéter plusieurs fois des bouts de code, peut-être même les répéter avec seulement quelques modifications à chaque fois. Pour éviter d'avoir à faire cela, on peut utiliser des boucles. JavaScript contient deux sortes de boucles, les boucles while et les boucles for.
Une boucle while est un moyen de répéter du code jusqu'à ce qu'une condition ne soit plus vérifiée. Par exemple, cette boucle while va afficher les valeurs de y aux coordonnées (30, y), tant que y est plus petit que 400. La boucle ajoute 20 à y, à chaque itération. y s'initialise à 40 et la boucle l'incrémente à 60, 80, 100, 120, etc...
var y = 40;
while (y < 400) {
text(y, 30, y);
y += 20;
}
Il est important que la condition entre les parenthèses ne soit plus vérifiée à un moment ou à une autre, car sinon, nous aurions affaire à une boucle infinie ! C'est ce qui arriverait si nous supprimions
y += 20
, car y serait toujours à 40, et donc toujours plus petit que 400, et le programme ne s'arrêterait plus.var y = 40;
while (y < 400) {
text(y, 30, y);
}
La boucle for est similaire à la boucle while, mais avec une syntaxe plus spécialisée. Les programmeurs ont inventé la boucle for quand il se sont aperçus qu'ils reproduisaient souvent les 3 mêmes actions : créer des variables compteur (comme la variable y ci-dessus), les incrémenter d'une certaine valeur, et vérifier si elles sont plus petites qu'une valeur. La syntaxe d'une boucle for détient un emplacement spécifique pour chacune de ces trois actions. Voici la même boucle que la première boucle while ci-dessus, écrite selon la syntaxe de la boucle for :
for (var y = 40; y < 400; y += 20) {
text(y, 30, y);
}
Les boucles peuvent également être imbriquées. C'est d'ailleurs assez courant d'imbriquer des boucles for, en particulier dans le cas des dessins en 2 dimensions, car cela facilite la représentation de formes pouvant être vues comme des quadrillages. Quand on imbrique une boucle dans une autre boucle, on demande au programme de "faire une chose X fois, et pour chaque fois qu'il le fait, de faire également une autre chose Y fois". Imaginez le dessin d'une grille : nous demandons au programme de "créer une colonne 10 fois, et pour chaque colonne, de créer 15 cellules à l'intérieur". Voilà comment utiliser des boucles for imbriquées pour réaliser cela :
for (var col = 0; col < 10; col++) {
for (var row = 0; row < 15; row++) {
rect(col*20, row*20, 20, 20);
}
}
Comment choisir entre la boucle while et la boucle for ? C'est à vous de voir ! Beaucoup de programmeurs préfèrent les boucles for car on a moins de chance de créer accidentellement des boucles infinies (il est plus difficile d'oublier d'indiquer l'incrémentation), mais quelquefois une boucle while aura plus de sens. Essayez les deux !
Vous souhaitez rejoindre la discussion ?
- Comment l'ordinateur sait que le col correspond à Y et que le row corrspond à X ? parceque là je suis u peu perdu(6 votes)
- lorsqu'on crée un rectangle en utilisant la fonction rect on passe toujours les variables dans le même ordre :
rect (abscisse,ordonnée,longueur,hauteur)
donc l'ordre rect(col*20, row*20, 20, 20); indique que col*20 est l'abscisse et row*20 l'ordonnée(17 votes)
- Bonjour , au fait comment programmer avec du JS hors khan academy et sans HTML ou CSS s'il vous plait?(6 votes)
- jusqu'à combien de boucles peut-on imbriquer ?(5 votes)
- comment on fait pour insérer une image!(3 votes)
- var monImage = getImage(); // pour uploader une image dans la bibliothèque
image (monImage, x, y, w, h);
ou bien d'emblée:
image(getImage(), x, y, w, h); // et attention aux parenthèses!(5 votes)
- Bonjour , quel programme puis-je utiliser pour faire des petits test , j'ai installé éclipse IDE mais le langage n'est pas le même !
Merci :(3 votes) - comment fais t-on si on ne sais jamais dans les paramètres des textes, ellipse, rectangle ou ligne quel paramètre modifie tel chose et je ne comprend pas quand on fait * aurais je un problème de logique ?(1 vote)
- il faut simplement retenir que c'est toujours x avant y comme dans l'alphabet.
x correspondant a la largeur et y a la hauteur
rect( x = positionnement largeur , y positionnement hauteur , x = taille en largeur , y = taille en hauteur )
voila je c'est pas si c'est très clair alors si sa ne l'est pas hésite pas a redemander et si tu a déjà trouver ta réponse cela servira peut être a quelqu’un d'autre(5 votes)