for

Les boucles pour (for)

Une boucle "pour" sert à répéter une action. On distingue deux types de boucle :

Boucle "pour" : on connaît à l'avance le nombre de répétitions de l'action à exécuter.
Boucle "tant que" (qui sera vue plus tard) : le nombre de répétitions est conditionné par l'évolution de l'état de certaines variables du programme.

Un premier exemple : la table de multiplication du 8.

		 
		Pour k allant de 1 à 10 :
		    afficher k*8
		fin_pour

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Table du 8 </title>
    </head>
    <body>
        <script>
        for(let i = 1; i < 11; i++){
            document.write( 8 * i + '<br>');
        }
        </script>
    </body>
</html>

Un second exemple : calcul de la somme des premiers entiers naturels.

Calculons la somme S = 1+2+3+...+n des n premiers entiers positifs :


n=15 
s=0 # initialisation de la variable s qui contiendra la somme
pour j prenant les valeurs 1, 2, 3, ..., n faire
  s=s+j
fin_pour
Afficher :  La somme des entiers compris entre 1 et {valeur de n} est égale à {valeur de s}.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Somme </title>
    </head>
    <body>
        <script>
        let n = 15; // on va calculer la somme des entiers de 1 à n=15
        let s = 0; // variable qui contiendra la somme finale
        for(let i = 1; i <= n; i += 1){
            	s += i;  
        }        
        document.write(`La somme des entiers de 1 à ${n} est égale à ${s}.`);  
        </script>
    </body>
</html>

Modifions ce programme pour que toutes les sommes intermédiaires soient affichées :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Somme </title>
    </head>
    <body>
        <script>
        let n = 15; // on va calculer la somme des entiers de 1 à n=15
        let s = 0; // variable qui contiendra la somme finale
        for(let i = 1; i <= n; i += 1){
            	s = s+i;
            	document.write(`La somme des entiers de 1 à ${i} est égale à ${s}.<br>`);
        }
        </script>
    </body>
</html>

Les boucles avec pas distinct de 1.

Comment afficher les entiers impairs entre 3 et 21 ?

La variable de boucle (i dans le code ci-dessous) est initialisée à la valeur 3.
Ensuite, la valeur de la variable est augmentée de deux à chaque tour de boucle ( i += 2).

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Entiers impairs </title>
    </head>
    <body>
        <script>
        for(let i = 3; i <= 21; i += 2){
            	document.write(i + '<br>');
        }  
        </script>
    </body>
</html>

Les boucles avec pas négatif.

Comment afficher les entiers en ordre décroissant ?

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> En décroissant </title>
    </head>
    <body>
        <script>
        for(let i = 15; i > 0; i -= 1){
            	document.write(i + '<br>');
        }  
        </script>
    </body>
</html>

let

L'utilisation de let à la place de var pour déclarer la variable i d'indice de boucle permet de limiter la portée de la variable i au corps de la boucle.

Comparer les scripts qui suivent :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> var </title>
    </head>
    <body>
        <script>
		var i = 50;
        for( i = 0; i <= 2; i += 1){
            	 document.write("Valeur de i : " + i + "<br>" );
        }  
        document.write("Valeur de i après la boucle : " + i );
        </script>
    </body>
</html>

Dans ce premier cas, on a déclaré la variable i en dehors de la boucle, cette variable existe donc encore à la sortie de boucle.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> var </title>
    </head>
    <body>
        <script>
        for(var i = 0; i <= 2; i += 1){
            	 document.write("Valeur de i : " + i +"<br>" );
        }  
        document.write("Valeur de i après la boucle : " + i );
        </script>
    </body>
</html>

Ce second cas est plus étonnant (surtout lorsqu'on a déjà pratiqué certains langages de programmation) : la variable est encore connue en sortie de boucle alors que sa déclaration est faite dans la boucle.

let permet de "corriger" ce problème : on aimerait que cette variable i qui n'est utile que lors des itérations de boucle disparaisse hors de la boucle pour ne pas risquer de venir "polluer" le reste du code (et également accessoirement dans l'espoir de libérer de la mémoire).

let permet donc de limiter la portée de la variable i à la boucle (ou plus généralement au bloc dans lequel on a déclaré une variable avec le mot clef let).

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> let </title>
    </head>
    <body>
        <script>
		for(let i = 0; i <= 2; i += 1){
            	 document.write("Valeur de i : " + i +"<br>" );
        }  
        document.write("Valeur de i après la boucle : " );
        document.write( i );
        </script>
    </body>
</html>