[Plan du site]
Vous êtes ici ---
> Le Site du Zér0
> Les tutoriels
> Non-Officiels
> Site Web
> Javascript
> Lecture du tutoriel
Les boucles
Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)
Dans le chapitre précédent, vous avez découvert les conditions et leur utilisation à travers des tests "Si... alors... sinon...".
Eh bien nous allons en voir une autre utilisation : les boucles.
Petit exercice
En guise de présentation, vous allez réaliser un petit exercice pour faire connaissance avec les boucles.
Votre mission, si toutefois vous l'acceptez : afficher la liste de tous les nombres plus petits que 10 (une boite de dialogue par nombre).
Vous vous dites : "ça va être un jeu d'enfant". En effet...
Code : JavaScript1
2
3
4
5
6
7
8
9 | alert(1);
alert(2);
alert(3);
alert(4);
alert(5);
alert(6);
alert(7);
alert(8);
alert(9);
|
Mais c'est un peu long et très ennuyant
.
Pour éviter de s'ennuyer en programmant (on est quand même là pour s'amuser
), nous allons apprendre une autre méthode, beaucoup plus puissante, pour arriver au même résultat.
Utiliser une boucle
Ce qu'il faudrait, c'est pouvoir demander à l'ordinateur de "compter", et tant qu'il n'a pas atteint 10, d'afficher la valeur.
Eh bien c'est sur ce modèle que sont conçues ce qu'on appelle les
boucles : on
répète une action
tant que une condition est satisfaite.
Pourquoi
les boucles ? Car il en existe plusieurs différentes, qui s'utilisent dans des situations elles aussi différentes.
Syntaxe et fonctionnement
Commençons par la boucle la plus simple...
En voici la syntaxe :
Code : JavaScript1
2
3
4 | while(condition)
{
instructions
}
|
Fonctionnement de la boucle "while"
la condition est satisfaite, on
répète les instructions.
Si la condition n'est pas vérifiée au premier tour de boucle, alors les instructions ne seront pas exécutées.
Voici le fonctionnement exact de la boucle, illustré par le schéma ci-contre :
# Si la condition est vérifiée,
--> Alors on exécute les instructions, et on retourne à
#,
--> Sinon on passe à la suite.
Reprenons notre petit exercice...
On va créer une variable qui servira à "compter".
Tant que cette variable sera inférieure à 10, on
affichera un message, puis on l'
incrémentera.
Incrémenter une variable signifie augmenter sa valeur (en général, de 1).
Décrémenter signifie diminuer sa valeur.
Ce qui nous donne :
Code : JavaScript1
2
3
4
5
6
7 | var i = 1; // on initialise le compteur
while(i < 10) // tant que i<10 ...
{
// ... on affiche un message
alert(i);
i++;
}
|
Si vous oubliez d'incrémenter votre variable, la condition sera toujours vraie !
La boucle ne s'arrêtera donc jamais...
Vous obtiendrez sûrement un message d'erreur de votre navigateur vous proposant d'interrompre le script.
Présentation de cette boucle
Un code qui revient souvent...
Les boucles
while sont, comme vous venez de le voir, très "basiques" : la syntaxe est on ne peut plus simple !
Lors de leur utilisation, il est très fréquent d'utiliser un
compteur, comme nous l'avons fait dans l'exemple précédent.
Ce compteur, qui n'est rien d'autre qu'une variable (souvent appelée
i, mais ce n'est pas une obligation, même si c'est pratique à écrire
), est ensuite incrémenté (ou décrémenté) à chaque tour de boucle.
On se retrouve souvent avec un code qui ressemble à ceci :
Code : JavaScript1
2
3
4
5
6
7 | var i;
i = 0; // initialisation
while(i < 10) // condition
{
alert(i); // action
i++; // incrementation
}
|
Mais ça ne serait pas plus pratique avec une boucle qui regroupe tout ça ?
Eh bien justement si, et c'est le but de cette nouvelle boucle, que nous allons étudier dans les paragraphes suivants...
Une boucle qui va nous simplifier la vie
Voici la boucle
for, qui regroupe tout ce que nous voulions !
Sa syntaxe ?
Code : JavaScript1
2
3
4 | for(initialisation ; condition ; incrementation)
{
instructions
}
|
Ce sont bien des points-virgules qui se trouvent entre les parenthèses après le for.
Attention à ne pas les confondre avec des virgules, qui sont utilisées pour séparer les arguments des fonctions.
Et notre code précédent se transforme comme par magie !
Code : JavaScript1
2
3 | var i; // on déclare notre variable
for(i=0; i<10; i++) // 3-en-1 :) initialisation + condition + incrémentation
alert(i); // action
|
Il n'y a qu'une instruction à effectuer à chaque tour de boucle.
Les accolades sont donc devenues inutiles, c'est pourquoi je ne les ai pas mises.
Voilà qui est plus pratique
!
Et encore plus pratique : on peut déclarer la variable
i directement dans le
for, comme ceci :
Code : JavaScript1
2 | for(var i=0; i<10; i++)
alert(i);
|
N'est-ce pas
formidable ?
Un peu de pratique
Les boucles for sont plus pratiques que les boucles while, mais uniquement dans certains cas !
Il est parfois plus judicieux d'utiliser une boucle while, notamment lorsqu'on ne retrouve pas cette structure "initialisation / condition / incrémentation" (nous en verrons des exemples par la suite).
Petit exemple
Vous devriez maintenant être capables de faire une boucle (on va utiliser
for) qui fait la somme des nombres de 1 à 10 (inclus).
Je vous laisse faire, cela ne devrait pas vous poser de problème.
Vous avez terminé ?
Voici un corrigé :
Secret (cliquez pour afficher)Code : JavaScript1
2
3
4
5 | var i;
var somme = 0; // variable pour le resultat
for(i=1; i<=10; i++)
somme += i; // on ajoute la valeur du compteur à notre resultat
alert(somme);
|
Ce qu'il ne faut pas faire
Ce qui est rigolo avec les boucles
for, c'est qu'on peut mettre tout plein de trucs dans les parenthèses.
Et avec une indentation "excentrique", ainsi qu'avec des noms de variables qui ne veulent rien dire, on obtient des résultats vraiment géniaux
.
Voyez plutôt :
Code : JavaScript1
2 | var azerty=0,arezty;
for(arezty=0;azerty<10;arezty+= azerty=1 +azerty);alert(arezty);
|
Pas mal, vous ne trouvez pas ?
Que fait ce code ? Ah... eh bien comme l'exemple juste avant, il fait la somme des nombres de 1 à 10...
Ce code est un excellent exemple... de ce qu'il ne faut pas faire !
À moins que vous aimiez les codes illisibles...
Voici quelques conseils concernant les boucles
for :
- évitez de modifier la variable qui sert de compteur à l'extérieur des parenthèses du for, qui sont prévues pour ça.
- Inversement, évitez de mettre entre ces parenthèses du code qui ne concerne pas directement cette variable.
- Pour rappel, donnez des noms explicites et pas trop longs à vos variables (i ou j, parfois cpt, étant des noms classiques pour des compteurs).
- Pensez également à bien indenter votre code, et à mettre quelques commentaires, (uniquement) s'ils s'avèrent nécessaires.
Le dernier type de boucle que nous allons aborder ressemble assez fortement à
while.
La syntaxe
Sa syntaxe est la suivante :
Code : JavaScript1
2
3
4
5 | do
{
instructions
}
while(condition);
|
Ici, le while est placé à la fin de la boucle, après les instructions qui le concernent : c'est pour ça qu'il est suivit d'un point-virgule.
Comment ça marche ?
Fonctionnement de la boucle "do... while"
Vous avez pu remarquer que le
while est placé à la fin de la boucle : c'est ce qui fait la différence avec la boucle "while" que nous avons vue plus haut.
Quelle différence ?
Eh bien le test est effectué après les instructions, ce qui veut dire que ces dernières seront exécutées
au moins une fois, quelle que soit la condition (cf. le petit schéma ci-contre).
Un petit exemple...
Une des utilisations possibles : on demande des noms à l'utilisateur (avec
prompt()) tant qu'il ne clique pas sur "
Annuler" (ou qu'il ne laisse pas le champ vide).
Pour l'instant, on ne va pas s'occuper d'enregistrer tous les noms qu'il a tapés.
Voici une manière de coder cet exemple :
Code : JavaScript1
2
3
4 | var saisie;
do
saisie = prompt("Entrez un nom, ou cliquez sur Annuler pour quitter");
while(saisie != null && saisie != '');
|
ou bien, en "simplifiant" un peu :
Code : JavaScript1
2
3
4 | var saisie;
do
saisie = prompt("Entrez un nom, ou cliquez sur Annuler pour quitter");
while(saisie); // ca revient au meme que dans l'exemple ci-dessus
|
Après avoir fait le tour des boucles (sans jeu de mot
), nous allons aborder un dernier point dans ce chapitre : les
instructions de contrôle, qui ne sont rien d'autre que des instructions qui agissent sur les boucles.
break
Comment ça marche ?
La première, qui se prénomme
break (ce qui signifie "casser" pour les non-anglophones), est très simple d'utilisation. Elle arrête immédiatement la boucle dans laquelle elle se trouve (le script continue normalement, en reprenant juste après la boucle en question).
Petit exemple :
Code : JavaScript1
2
3
4
5
6
7 | var i;
for(i=0; i<20; i++)
{
if(3*i > 10)
break;
alert(3*i);
}
|
On va afficher les multiples de 3. Mais si un multiple dépasse 10, on s'arrête.
Un code moins bien "organisé"
Cette instruction est très pratique dans certains cas.
Cependant, elle est à éviter autant que possible : il vaut mieux créer une condition plus complète pour votre boucle, plutôt que d'insérer des if avec des break dans toute la boucle.
L'exemple plus haut est correct du point de vue de la syntaxe, mais c'est exactement l'utilisation qu'il ne faut pas faire de
break.
Voici une manière bien mieux structurée pour ce même exemple :
Code : JavaScript1
2
3 | var i;
for(i=0; 3*i<=10; i++)
alert(3*i);
|
Ici, tout ce qui concerne la boucle se trouve entre les parenthèses du
for, ce qui rend le code bien mieux "organisé".
Cas de boucles imbriquées
Et si on met un break à l'intérieur d'une boucle, qui est elle-même à l'intérieur d'une autre boucle ?
Dans ce cas, il s'applique uniquement à la boucle la plus "imbriquée".
Dans l'exemple qui suit, le
break s'applique seulement à la boucle avec la variable
j.
Code : JavaScript1
2
3
4
5
6
7
8
9 | var i, j;
for(i=0; i<5; i++)
{
for(j=0; j<5; j++)
{
if(j == 2)
break;
}
}
|
continue
L'instruction de contrôle suivante,
continue, s'utilise de manière quelque peu semblable.
Fonctionnement...
Lorsque l'instruction
continue est rencontrée, toutes les instructions qui suivront seront ignorées, jusqu'à ce qu'on arrive à la fin des instructions de la boucle. La boucle continue ensuite normalement.
Pour simplifier,
continue permet en quelque sorte de "sauter" certains tours de la boucle.
... et exemple
Vous allez tout de suite comprendre avec cet exemple.
Code : JavaScript1
2
3
4
5
6
7 | var i;
for(i=-5; i<=5; i++)
{
if(i == 0)
continue;
alert("L'inverse de " + i + " est " + 1/i);
}
|
Lorsque
i vaut 0, on saute les instructions qui restent dans la boucle (ici,
alert()), puis on reprend avec i = 1 (la valeur suivante).
On affiche donc le message pour i =
-5,
-4,
-3,
-2,
-1, (on saute le 0),
1,
2,
3,
4 et
5.
Bien, il est temps de mettre un peu en pratique ce que vous venez d'apprendre.
Exercice
Le script que vous allez créer est un script du SdZ... Oui, vous avez bien entendu ! C'est un script qui est utilisé sur ce site
.
Le sujet
Vous avez tous utilisé au moins une fois le zCode...
Nous allons nous intéresser ici au bouton servant à insérer une liste à puces.
Notre script a pour rôle de demander le contenu de chaque puce à l'utilisateur, et de créer le zCode correspondant.
Quelques consignes pour vous guider
On va demander le contenu de chaque puce grâce à
prompt().
C'est ici qu'on va devoir utiliser une boucle : on demande
tant que l'utilisateur ne laisse pas le champ vide.
Au final, on va récupérer le zCode dans une variable.
On l'affichera grâce à
alert() pour vérifier le fonctionnement du script.
À vous de jouer
.
Correction
Je n'ai pas fait une, mais plusieurs corrections, plus ou moins bonnes.
Version 1 : "bof bof"
Voici ce qu'on peut obtenir après une petite réflexion :
Code : JavaScript 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 | // initialisations
var zCode = '<liste>\n';
var saisie = '';
// boucle
do
{
saisie = prompt("Contenu de la puce ?");
if(saisie)
zCode += "<puce>" + saisie + "</puce>\n";
}while(saisie);
// fin
zCode += "</liste>";
alert(zCode);
|
Plusieurs points ne sont pas très "propres".
Tout d'abord, si on ne remplit aucune puce, on se retrouve avec ceci :
Code : Zcode
Certes, un "détail", mais si facile à corriger que c'est dommage de le laisser comme ça.
Autre remarque : à quelques lignes près, on voit deux fois le même test :
if(saisie) et
while(saisie).
Ce n'est jamais bien bon de se répéter (par exemple, si on doit modifier la condition, c'est un peu
relou de le faire deux fois
).
Si on veut modifier ça, il va falloir enregistrer la saisie dans une variable, pour l'ajouter au zCode uniquement au tour de boucle suivant (une fois que le test de la boucle aura été fait)... Ce qui complique un peu l'affaire.
Version 1 améliorée
Voici le même code, après avoir modifié les problèmes soulignés ci-dessus.
Code : JavaScript 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21 | var zCode = '';
var saisie = '';
// variable "temporaire", pour le 2e point
var texte = '<liste>\n';
do
{
// on ajoute le texte saisi au tour precedent
zCode += texte;
// on demande du texte et on enregistre dans la variable "temporaire"
saisie = prompt("Contenu de la puce ?");
texte = "<puce>" + saisie + "</puce>\n";
}while(saisie);
// le 1er "detail"
if(zCode == '<liste>\n')
zCode = '';
else
zCode += "</liste>";
alert(zCode);
|
Version 2 : tout-en-un
Une autre solution consisterait à
enregistrer et à
tester en même temps le texte saisi.
Comment ? Eh bien en plaçant l'affectation
dans la condition.
En voici le principe :
Code : JavaScript1
2
3 | var saisie;
while(saisie = prompt("Texte"))
// instructions
|
ce qui équivaut, je vous le rappelle, à ceci :
Code : JavaScript1
2
3 | var saisie;
while( (saisie=prompt("Texte")) == true )
// instructions
|
Ne confondez pas le = (opérateur d'affectation) avec == (opérateur de comparaison) !
Il faut bien comprendre que cette condition (appelée à chaque tour de boucle) se compose de
deux étapes :
- tout d'abord, l'instruction saisie = prompt("Texte"), que vous comprenez maintenant sans difficulté.
- Ensuite, le test, avec la nouvelle valeur de la variable modifiée ci-dessus.
Bref, pour revenir à notre exemple, ça nous donne ceci :
Code : JavaScript 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 | // initialisation
var zCode = "<liste>\n";
var saisie;
// boucle
while(saisie = prompt("Contenu de la puce ?"))
zCode += "<puce>" + saisie + "</puce>\n";
// finitions
if(zCode == '<liste>\n')
zCode = '';
else
zCode += "</liste>";
alert(zCode);
|
Pas mal, vous ne trouvez pas ?
Nous avons maintenant fait le tour de l'utilisation des tests : ceci nous rapproche beaucoup de la fin de cette première partie consacrée à la syntaxe du JS.
Tutoriels
Communauté
Mon compte
Recherche
Livre d'or
Publicité
98 Zéros connectés |
10 requêtes |
0.1174s (0.1043s)
