Traduction
Tutoriel sur Javascript, Vue.js, jQuery.js & Node.js
Tutoriel JavaScript - recherche
L'auteur : Patrick Darcheville
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Une boucle est un bloc d'instructions qui est exécuté N fois. Chaque passage dans la boucle est appelée une itération.
Ce bloc d'instructions est exécuté tant qu'une condition est vérifiée.
Souvent la condition est basée sur une variable qui fait fonction de compteur ou de compte à rebours.
C'est à dire que la variable doit être incrémentée (sa valeur augmente) OU être décrémentée (sa valeur diminue)
à chaque itération.
Il y a trois façon d'écrire une instruction d'incrémentation.
La dernière solution est la plus répandue.
Il y a bien sûr trois façons pour la décrémentation. Supposons que nous voulons décrémenter la variable vrebours de 1.
while (condition)
{
instruction1 ; instruction2: ... instructionN;
}
Le bloc d'instructions est exécuté tant que la condition retourne TRUE. Il y a sortie de la boucle dès que la condition
retourne FALSE.
Le bloc d'instructions peut très bien ne jamais être exécuté ; il suffit que la condition retourne toujours FALSE !
Si la condition est toujours TRUE alors la boucle va se répéter à l'infini ... Ce qui est gênant.
Il s'agit de vérifier si on a bien saisi une donnée au format numérique.
let vnote;
while (isNaN(vnote))
{
vnote = prompt('tapez une note entière ou décimale') ;
}
alert('saisie correcte');;
La saisie d'un nombre réel est délicate pour un francophone. Il risque, par exemple, de saisir 10,5 et non pas 10.5 ce qui
provoquera une
erreur (voir boucle for). Donc tant que le contenu de la variable vnote n'est pas au format numérique (caractères : chiffres et un point)
alors il faut recommencer la saisie.
Nous avons utilisé la fonction isNaN argumenté avec la variable vnote. isNaN est fonction JS qui est l'acronyme
de "is Not a Numéric". Donc l'expression isNaN(vnote) retourne true si vnote contient, par exemple, 'aaa' (valeur initale) ou 10,5.
Il faut qu'il y ait au moins une itération (pour pouvoir effectuer la saisie). Il faut donc initialiser la variable vnote avec une valeur non numérique afin la condition du while retourne TRUE.
do
{
instruction1 ; instruction2; .... ; instructionN ;
}
while (condition) ;
Il y a forcément au moins une itération puisque le test se fait en fin de boucle !
var vnote ;
alert('attention le séparateur décimal est le point et non pas la virgule !') ;
do
{ vnote = prompt('tapez une note entière ou décimale') ; }
while (isNaN(vnote)) ;
alert('saisie correcte');
Ce programme fait exactement la même chose que le précédent : forcer l'utilisateur à répéter la saisie tant que le format n'est pas numérique. Mais la structure do ... while est mieux adaptée puisqu'il y a forcément une itération et c'est bien ce que nous voulons. Nous n'avons plus besoin de l'astuce consistant à initialiser la variable avec une valeur non numérique.
for (initialisation ; condition ; incrémentation )
{ instruction1 ; instruction2; .... ; instructionN ; }
var note ; vsomme = 0 ;
for(var vcompteur = 0; vcompteur < 3 ; vcompteur++)
{
vnote= prompt('tapez une note entière ou décimale') ;
vsomme += parseFloat(vnote) ;
// nouveau cumul de points après conversion de la chaîne en réel
} // fin for
var vmoyenne = vsomme / vcompteur ;
alert('points : ' + vsomme);
alert('moyenne : ' + vmoyenne) ;
Testez ce script en saisissant les entiers 11 puis 12 et enfin 13
Donc total = 36 et moyenne = 12.
Ce programme permet de calculer la moyenne de trois notes qui peuvent être décimales.
Observons attentivement ce qui se trouve entre parenthèses après le mot réservé for.
Il n'y a pas d'autre itération puisque compteur devient égal à 3. Donc sortie de la boucle.
En effet malgré un format numérique incorrect il n'y a pas plantage car la fonction parseFloat convertit la chaîne à l'entier inférieur. Donc dans ce cas le script fait la moyenne de trois entiers 10.
Une boucle peut contenir les instructions break et continue.
Mais quel est l'intérêt d'utiliser ces instructions. En fait elles simplifient la programmation JS !
En particulier elles sont très utiles pour gérer les erreurs de saisie.
Je rappelle que JavaScript est sensible à la casse : il faut écrire ces deux instructions en minuscules dans les scripts.
L'instruction break permet une sortie anticipée d'une boucle.
Cette instruction est toujours dans un test.
Exemple : trois tentatives maximales pour saisie le mot de passe. Possibilité de sortir de la boucle dès la première saisie si cette dernière est correcte.
var valide = false;
var vcompteur =0;
alert('pour la saisie du mot de passe vous avez droit à trois essais') ;
while (vcompteur < 3)
{
var vmot = prompt('saisir le mot de passe') ;
if(vmot=="sesame") {valide =true ; break;}
vcompteur++;
}
if (valide) alert("vous êtes connecté!");
else alert("connexion impossible");
Une boucle est normalement exécutable 3 fois pour saisir le mot de passe.
Mais dès que le mot de passe saisi est valide ("sesame") valide passe à VRAI et sortie de la boucle (commande break).
L'instruction break existe aussi dans la structure switch pour sortir du test multiple après exécution d'un case.
L'instruction continue dans une boucle permet l'arrêt de l'itération en cours et le passage à la suivante.
Comme break l'instruction continue est exécutée si un test est vérifié.
Exemple : le programme doit afficher les N premiers nombres pairs.
Donc si le reste de la division entière du nombre par 2 ne donne pas zéro il ne faut pas afficher ce nombre et passer à l'itération suivante.
var maxi =prompt("saisir un entier inférieur ou égal à 60");
maxi = parseInt(maxi); if (maxi >60) maxi =60;
// la limite ne peut dépasser 60
for (var compteur = 0 ; compteur <= maxi; compteur++)
{
if(compteur%2 != 0) continue;
document.write(compteur + " est un nombre pair !
");
}
Notez le test ; si le reste de la division entière est différent de zéro alors passage à l'itération suivante (instruction continue)
Une boucle est dite infinie lorsque la condition de la boucle est toujours VRAI.
console.clear();
let cumul = 0;
for (; ;)
{
cumul++;
console.log("cumul : " + cumul);
if (cumul >=100) break;
}
let rebours =100 ;
let i =1 ;
while (i==1) // condition toujours vrai puisque la valeur de i n'est pas modifiée
{
rebours--;
console.log("rebours : " + rebours);
if (rebours == 0) break;
}
Notez deux façons de réaliser des boucles infinies. Préférez la deuxième solution.
Dans chaque boucle il faut bien sûr un instruction du genre if (condition) break pour quitter la boucle infinie.
Attention les affichages se font dans la console ...
let rebours =1000000 ;
let i =1 ;
while (i==1)
{
rebours--;
document.write("
rebours : " + rebours);
}
La boucle est vraiment sans fin puisqu'il n'y a pas de "break" dans le bloc d'instructions.
Heureusement les navigateurs ont intégré un sécurité. S'ils testent un script trop long à s'exécuter ils affichent un message proposant un "break manuel".
Thème : moyenne de trois notes avec contrôle de saisie.
let vnote, vsomme = 0, vmoyenne ;
for(let vcompteur = 1; vcompteur < 4 ; vcompteur++)
{
do
{ vnote = prompt('tapez note de rang ' + vcompteur) ; }
// la boite de saisie précise le rang la note à saisir
while (isNaN(vnote)) ;
vsomme += parseFloat(vnote) ;
} // fin for
vmoyenne = vsomme / 3 ;
alert('Points : ' + vsomme);
alert('Moyenne : ' + vmoyenne) ;
Il y une boucle DO ... pour le contrôle de saisie. On reste dans cette boucle tant que la saisie n'est pas au format numérique.
Cette boucle DO ... est contenue dans une boucle FOR ...
Dans ce paragraphe je vais présenter la boucle for ... in ....
Ci-dessous un document HTML dans un Iframe :
Cette page web comprend cinq images.
Chaque image a trois attributs : src, id et draggable.
Le script crée la collection d'image dans la variable "images".
Puis une boucle parcourt cette collection : for (var i in images)
La boucle affiche pour chaque image la valeur de sa source, de son ID et de l'attribut "draggable".
La boucle for ... in ... est très pratique pour parcourir une collection.
L'attribut draggable à true autorise le déplacement de l'élément dans le cadre d'un "drag and drop".