Infoforall

Javascript 04 : WHILE et FOR nominatif

Nous allons utiliser le FOR numérique et nominatif associé à une structure de données particulière (le Array ou tableau) pour réaliser ceci :

Les 16 carrés en tri de couleur

Vous verrez également les boucles WHILE et nous finirons sur la réalisation de l'interface.

1 - La boucle WHILE - TANT QUE

Bien, passons aux boucles WHILE : on peut demander au programme de faire plusieurs fois la même chose tant qu’une condition précise est respectée (true).

Tant que la condition donnée est vraie, le programme va lancer les instructions à l’intérieur de la structure. Il est donc possible que cette instruction ne se fasse jamais si la condition n’est pas vérifiée initialement.

Cette boucle s'utilise comme ceci :

while (condition) {

    Instruction 1 à répéter;

    Instruction 2 à répéter;

}

Tout ce qui entre les accolades sera répété tant que la condition est vérifiée (true). Pensez donc à bien refermer votre accolade. La tabulation n'est ici qu'une indication visuelle pour le lecteur humain : il faut les respecter pour rendre votre code lisible mais l'ordinateur n'en tient aucun compte lui.

Voilà un premier exemple qui vous montre comment demander une note tant que la note est supérieure à 20.

Le code HTML ne fait que provoquer l'appel de votre fonction lorsqu'on appuie sur le bouton :

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" />

        <title>Boucle WHILE</title>

        <meta http-equiv="content-Language" content="fr" />

        <link rel="stylesheet" href="style_1.css" />

    </head>


    <body>


        <header>

            <h1>Boucle while</h1>

        </header>


        <section>

            <p><input type="button" onclick="exemple_tantque()" value="Lancement du while/tant que"></p>

        </section>


        <script type="text/javascript" src="js_chap_04.js"></script>


    </body>

</html>

Le code js de la fonction exemple_tantque() :

function exemple_tantque() {

    // Acquisition des donnees note 1

    var note1 = 21;

    while (note1>20) {

        note1 = prompt("Donner votre note ");

        note1 = parseInt(note1);

    }

    alert("Votre note valide est "+note1);

}

01° Pourquoi rentre-t-on forcément au moins une fois dans la boucle ? Quelle est la fonction qui transforme la chaîne de caractères en integer ? Modifier le programme pour qu’il vérifie en plus que la note soit bien supérieure à 0.

...CORRECTION...

On rentre dans la boucle puisqu'on place arbitrairement 21 dans la variable note1. La condition du WHILE est donc vraie : 21 est bien strictement supérieur à 20.

La fonction int() permet de transformer le string de la réponse en entier.

Pour la condition double :

    while (note1>20 || note1<0) {

Une autre façon de faire : on part d’un test true et on le rend false lorsqu’on estime qu’on peut sortir :

function exemple_tantque() {

    // Acquisition des donnees note 1

    var note1 = 21;

    var test = true;

    while (test) {

        note1 = prompt("Donner votre note ");

        note1 = parseInt(note1);

        test = (note1>20) || (note1<0);

    }

    alert("Votre note valide est "+note1);

}

On remarque qu'on doit se compliquer la vie uniquement pour rentrer dans la boucle au moins une fois. En réalité, il existe une boucle plus adaptée à la situation : la boucle do {instructions;} while (condition);.

do {

    instruction_1;

    instruction_2;

} while (condition);

Cette boucle fait exactement ce qu'on veut : on rentre dans la boucle quelque soit les conditions initiales (do dans le sens "exécute" en français) et on teste la poursuite à la fin de la boucle plutôt qu'au début.

02° Compléter le code suivant pour qu'il fasse exactement comme le code précédent.

function exemple_tantque() {

    // Acquisition des donnees note 1

    var note1;


    // COMPLETER ICI


    alert("Votre note valide est "+note1);

}

...CORRECTION...

function exemple_tantque() {

    // Acquisition des donnees note 1

    var note1;


    do {

        note1 = prompt("Donner votre note ");

        note1 = parseInt(note1);

    } while (note1>20 || note1<0) ;


    alert("Votre note valide est "+note1);

}

Comme vous le voyez, on gagne en lignes de code dans les instructions de la boucle : on n'a plus à gérer la condtion avant d'entrer dans la boucle et de la modifier dans la boucle.

On teste simplement la condition finale pour savoir si on continue ou si on sort. N'oubliez pas le point-virgule à la fin du while dans cette configuration (alors qu'on en place pas dans un while "normal".

On retiendra donc qu'avec javascript, on peut utiliser while si dans certains cas on ne veut pas rentrer du tout dans la boucle et do .. while si on veut rentrer au moins une fois dans la boucle.

03° Tester votre code avec 3, 4.9, 20.3 ou même A... Voyez-vous le problème ?

Et oui. Comme, nous avons utilisé la fonction native parseInt, il convertit en entier. Bon, la solution est simple : il faut utiliser la fonction native parseFloat.

        note1 = parseFloat(note1);

Par contre, pour le deuxième problème, c'est plus embêtant : si on tape autre chose qu'un chiffre, il ne parvient pas à comparer, on obtient alors une condition fausse pour continuer et on finit par sortir. Il affiche alors NaN pour Not A Number.

Et si on veut vérifier que la chaîne tapée par l’utilisateur est bien un chiffre ?

Il faudrait utiliser la fonction native isNaN (pour is Not a Number) : isNaN(x) renvoie true si le string x ne peut pas être analysé comme un nombre. Si c'est un nombre (entier, réel, en notation scientifique...), elle renvoie false.

04° Modifier le code pour qu'il demande un nombre jusqu'à obtenir quelque chose d'interprétable comme un nombre, même 5e-3 par exemple. Il faudra utiliser un do...while et la fonction isNaN(x).

Attention, si vous avez travaillé correctement 12.6 devrait être reconnu comme un nombre alors que 12,6 non. Faites donc très attention entre la façon française de noter les nombres réels (12,6) et la façon anglosaxonne (12.60). Les codes informatiques usuels ne reconnaissent que la notation anglosaxonne.

...CORRECTION...

function exemple_tantque() {

    // Acquisition des donnees note 1

    var note1;


    do {

        note1 = prompt("Donner votre note ");

        note1 = parseFloat(note1);

    } while (note1>20 || note1<0 || isNaN(note1) ) ;


    alert("Votre note valide est "+note1);

}

2 - Lecture d’éléments avec une boucle itérative nominative FOR

2.1 Lecture des caractères contenus dans une chaine de caractères (string)

Javascript peut lire un à un les éléments de base (notés x dans l’exemple ci-dessous) constitutifs d’un objet (y ci-dessous) plus complexe. Or, une chaîne de caractères n’est rien d’autre qu’un ensemble de caractères ! On utilise pour cela l’instruction FOR. Le principe est simple à comprendre : on lui dit de faire des actions sur chaque x contenu dans y :

Nous allons pour cela créer une page qui ne contient qu'un input de type texte, le lire dans javascript et afficher un à un ses caractères dans la console.

<!DOCTYPE html>

<html>


    <head>

        <meta charset="UTF-8" />

        <title>Lecture avec js</title>

        <meta http-equiv="content-Language" content="fr" />

        <link rel="stylesheet" href="style_1.css" />

    </head>


    <body>


        <header>

            <h1>FOR dans un élément nominatif</h1>

        </header>


        <section>

            <p>Votre string :

                <input type="text" id="mon_string" onchange="lireCar()" value="Votre string.">

            </p>

        </section>


        <script type="text/javascript" src="js_chap_04.js"></script>


    </body>


</html>

Et pour le script js

function lireCar() {

    var sTexte = document.getElementById("mon_string").value;

    console.log(sTexte);

    for (x in sTexte) {

        console.log(x);

    }

}

05° Lancez le code et tentez de voir ce qui ne fonctionne pas !

Et oui, si vous testez le script avec "Hello World !", vous allez obtenir :

Hello World !

0

1

2

3

4

5

6

7

8

9

10

11

12

Console : n'oubliez pas qu'on affiche le résultat dans la console du navigateur. Il vaut donc penser à l'afficher via le menu de votre navigateur.

06° A votre avis, à quoi correspondent les nombres ?

...CORRECTION...

Simplement au numéro du caractère, à son index.

N'oubliez pas que les index commencent à zéro :

Le x = 0 correspond à l'index du caractère 'H',

Le x = 1 correspond à l'index du caractère 'e'...

Contrairement à Python par exemple, lorsqu'on utilise un for (x in y) sur un objet y itérable, x correspond au numéro d'index de l'élément, pas l'élément lui même.

Si on veut voir le contenu de la "case", il faut utiliser la méthode charAt des objets String. Il faut donc noter ceci pour afficher le caractère contenu dans la case plutôt que le numéro de la case x : 

sTexte.charAt(x)

07° Modifier le code pour qu'il affiche les caractères un à un dans la console.

Hello World !

H

e

l

l

o

W

o

r

l

d

!

...CORRECTION...

function lireCar() {

    var sTexte = document.getElementById("mon_string").value;

    console.log(sTexte);

    for (x in sTexte) {

        console.log(sTexte.charAt(x));

    }

}

08° Modifier une dernière fois le code pour obtenir :

Hello World !

Case 0 contient : H

Case 1 contient : e

Case 2 contient : l

Case 3 contient : l

Case 4 contient : o

Case 5 contient :

Case 6 contient : W

Case 7 contient : o

Case 8 contient : r

Case 9 contient : l

Case 10 contient : d

Case 11 contient :

Case 12 contient : !

...CORRECTION...

function lireCar() {

    var sTexte = document.getElementById("mon_string").value;

    console.log(sTexte);

    for (x in sTexte) {

        console.log( "Case "+x+ " contient : "+sTexte.charAt(x) );

    }

}

En réalité, il existe une manière d'obtenir directement le caractère : ce n'est pas un for (x in sTexte) qu'il faut utiliser mais un for (x of sTexte). On change en réalité d'instruction : le programme va directement vous donner le contenu des cases.

Avec cette technique, on accéde directement au contenu :

function lireCar() {

    var sTexte = document.getElementById("mon_string").value;

    console.log(sTexte);

    for (x of sTexte) {

        console.log(x);

    }

}

09° Utiiser la technique du for (x of y) pour constater que cela fonctionne bien.

10° Créer le code de la fonction transforme() pour qu’il transforme les voyelles (a,e,i,o,u,y) en majuscules et toutes les autres lettres en minuscules. Ainsi « Hello World ! » devrait faire apparaître “hEllO wOrld !” dans le span d'id resultat. On utilisera deux méthodes (présentés ci-dessous) qui fonctionnent sur maChaine si maChaine est un caractère ou une chaîne de caractères.

On utilisera le bout de code suivant pour la section de votre HTML

        <section>

            <p>Votre string :

                <input type="text" id="mon_string" onchange="transforme()" value="Votre string.">

            </p>

            <p>La transformation : <span id="resultat"></span></p>

        </section>

Voici trois petites aides pour réaliser votre fonction javascript :

Méthode toLowerCase :

maChaine.toLowerCase() renvoie maChaine en minuscule si maChaine est une lettre ou une chaîne.

Pour MODIFIER maChaine, il faudrait donc noter maChaine = maChaine.toLowerCase().

Méthode toUpperCase :

maChaine.toUpperCase() renvoie maChaine en majuscule si maChaine est une lettre ou une chaîne.

Il faudra donc lire les caractères un à un et agir sur eux en fonction de leur nature. On peut créer une chaîne nouvelleChaine (initialement vide) au fur et à mesure en utilisant une instruction du type : nouvelleChaine = nouvelleChaine + caractere.

...CORRECTION...

function transforme() {

    var sTexte = document.getElementById("mon_string").value;

    var nouvelleChaine = "";

    for (x of sTexte) {

        if (x=="a" || x=="e" || x=="y" || x=="u" || x=="i" || x=="o") {

            nouvelleChaine = nouvelleChaine + x.toLowerCase();

        } else {

            nouvelleChaine = nouvelleChaine + x.toUpperCase();

        }

    }

    document.getElementById("resultat").innerHTML = nouvelleChaine;

}

11° Rajout à la question précédente : on supprime les espaces qu’on remplace par un underscore _.

Voilà le résultat attendu en image :

transforme()

...CORRECTION...

function transforme() {

    var sTexte = document.getElementById("mon_string").value;

    var nouvelleChaine = "";

    for (x of sTexte) {

        if (x=="a" || x=="e" || x=="y" || x=="u" || x=="i" || x=="o") {

            nouvelleChaine = nouvelleChaine + x.toLowerCase();

        } else if (x==" ") {

            nouvelleChaine = nouvelleChaine + "_";

        } else {

            nouvelleChaine = nouvelleChaine + x.toUpperCase();

        }

    }

    document.getElementById("resultat").innerHTML = nouvelleChaine;

}

2.2 Lecture des élements contenus dans un tableau (Array)

Bon, et si l'objet n’est pas composé d’un ensemble uniforme de composants de base ? Essayons. Dans le code suivant, tableau est composé d’integers, d’un string et même d’une concaténation. Nous verrons, dans la partie suivante, que tableau est ce qu’on appelle un Array : un ensemble ordonné d’éléments pouvant être différents les uns des autres.

function transforme2() {

    var tableau =[1,2,9,8,"ah ah ah",45,"a"+"b"];

    console.log(tableau);

    for (x of tableau) {

        console.log(x);

    }

}

Pour lancer facilement le script, nous utiliserons un bouton :

<!DOCTYPE html>

<html>


    <head>

        <meta charset="UTF-8" />

        <title>Boucle FOR nominative</title>

        <meta http-equiv="content-Language" content="fr" />

        <link rel="stylesheet" href="style_1.css" />

    </head>


    <body>


        <header>

            <h1>For et Array</h1>

        </header>


        <section>

            <p><input type="button" id="mon_bouton" onclick="transforme2()" value="Lancer le script !"></p>

        </section>


        <script type="text/javascript" src="js_chap_04.js"></script>

    </body>

</html>

12° Créer le HTML et le script javascript. Alors, ça fonctionne ou non ? Avons-nous trouvé une première limite à ce que Javascript sait faire ?

Normalement, vous devriez voir ceci dans le journal de votre console web 

Array(7) [1, 2, 9, 8, "ah ah ah", 45, "a"+"b"]

1

2

9

8

ah ah ah

45

ab

2.3 Mots d'une phrase ou phrases d'un texte

On peut également énoncer les mots d’une phrase plutôt que les caractères d’un mot.

Pour cela, il nous faut un string phrase par exemple.

On utilisera la méthode split(" ") pour séparer la phrase en ses différents composants, à savoir des mots séparés par des espaces.

Ainsi mots = phrase.split(" ") va créer un Array mots qui va contenir les mots de la phrase. Attendez … L’espace comme « caractère » ? C’est un peu bizarre, non ? Nous allons voir tout cela dans l'activité suivante sur les strings : nous allons voir que l’espace est effectivement vu par l’ordinateur comme un caractère et pas comme un caractère « vide ».

13° Utiliser le code suivant pour vérifier que le programme parvient bien à séparer les mots de la phrase. Ca fonctionne ou non ? Est-ce parfait ?

function transforme2() {

    var phrase = "Désormais, nous allons pouvoir gérer des phrases, longues ou courtes.";

    var mots = phrase.split(" ");

    console.log(mots);

    for (mot of mots) {

        console.log(mot);

    }

}

Vous devriez obtenir ceci sur votre console

Array(10) [ "Désormais,", "nous", "allons", "pouvoir", "gérer", "des", "phrases,", "longues", "ou", "courtes." ]

Désormais,

nous

allons

pouvoir

gérer

des

phrases,

longues

ou

courtes.

Vous pouvez vous documenter facilement sur la méthode split. Une simple recherche « javascript split » devrait vous amener vers de multiples sites vous offrant la documentation adéquate.

Bon, comment régler le problème de la virgule ? Une rapide inspection de split ne règle pas le problème : on peut faire un split(',') pour choisir la virgule comme paramètre séparateur. Mais il faudra alors faire un deuxième passage avec split(' ') puisqu’on ne peut utiliser qu’un caractère de séparation.

Pour revenir au problème, deux solutions s’offrent à nous en fouillant un peu les bibliothèques de fonctions ou en réfléchissant un peu : on supprime toutes les virgules et autres séparateurs

14a° Résolution 1 : On supprime avant le split(" ") à l’aide de la méthode replace(old, new) qui permet de remplacer la chaîne de caractères old par la chaîne de caractères new). Nous allons habilement remplacer les virgules et points par … rien. En gros, cela va les supprimer, non ?

function transforme2() {

    var phrase = "Désormais, nous allons pouvoir gérer des phrases, longues ou courtes.";

    phrase = phrase.replace(',','');

    var mots = phrase.split(" ");

    console.log(mots);

    for (mot of mots) {

        console.log(mot);

    }

}

Et cela donne :

Array [ "Désormais", "nous", "allons", "pouvoir", "gérer", "des", "phrases,", "longues", "ou", "courtes." ]

Désormais

nous

allons

pouvoir

gérer

des

phrases,

longues

ou

courtes.

Zut. Une seule virgule a disparu !

Pour faire disparaitre les autres, il faut utiliser ce qu'on appelle une expression régulière : on va taper :

phrase = phrase.replace(/,/g,'');

On voit qu'on remplace les guillemets (ouvrant et fermant) par des slashs (ouvrant et fermant) et qu'on utilise un g pour indiquer que la recherche doit être globale.

Pour le point, c'est plus compliqué : le point . est un mot-clé dans une expression régulière. Il veut dire "n'importe quel caractère". Si vous voulez exprimer que vous voulez chercher un point, il faut taper \. et pas juste .. On a ainsi :

phrase = phrase.replace(/\./g,'');

14b° Résolution 1 (v2) : Modifier le script en utilisant une modification globale sur les caractères de type virgule, point, point-virgule... C'est fonctionne mieux non ?

function transforme2() {

    var phrase = "Désormais, nous allons pouvoir gérer des phrases, longues ou courtes.";

    phrase = phrase.replace(/,/g,'');

    phrase = phrase.replace(/\./g,'');

    /* On pourrait remplacer les deux replace par

    phrase = phrase.replace(/,?\.?/g,'');

    */

    var mots = phrase.split(" ");

    console.log(mots);

    for (mot of mots) {

        console.log(mot);

    }

}

On voit que la liste mots est bien mise à jour (elle ne possède plus d’éléments avec des points ou des virgules).

Array(10) [ "Désormais", "nous", "allons", "pouvoir", "gérer", "des", "phrases", "longues", "ou", "courtes" ]

Désormais

nous

allons

pouvoir

gérer

des

phrases

longues

ou

courtes

15° Résolution 2 : On supprime après le split à l’aide de la méthode replace qui permet de remplacer. Nous allons habilement remplacer les virgules et points par … rien. En gros, cela va les supprimer :

function transforme2() {

    var phrase = "Désormais, nous allons pouvoir gérer des phrases, longues ou courtes.";

    var mots = phrase.split(" ");

    console.log(mots);

    for (mot of mots) {

        mot = mot.replace(/,/g,'');

        mot = mot.replace(/\./g,'');

        console.log(mot);

    }

    console.log(mots);

}

Vous devriez voir ceci dans la console :

Array(10) [ "Désormais,", "nous", "allons", "pouvoir", "gérer", "des", "phrases,", "longues", "ou", "courtes." ]

Désormais

nous

allons

pouvoir

gérer

des

phrases

longues

ou

courtes

Array(10) [ "Désormais,", "nous", "allons", "pouvoir", "gérer", "des", "phrases,", "longues", "ou", "courtes." ]

Là, on constate un problème : mots n'est pas modifiée après la boucle. C’est normal : mot est défini à partir de mots mais il n’existe ensuite pas de lien entre eux. Donc modifier mot ne va pas mettre à jour le tableau mots qui ne se met pas automatiquement à jour. C’est un problème qu’il va falloir résoudre par la suite.

Dernière chose : on peut tester la présence d’un caractère dans une chaîne de caractères à l’aide de la méthode indexOf("X",optionnel) :

Si on ne lui donne pas d'argument optionnel, cette méthode renvoie l'index (le numéro de la "case") du première caractère "X" correspondant dans la chaine de caractères. Elle renvoie donc un nombre valant de 0 à plus s'il trouve le caractère. La méthode renvoie par contre -1 si elle ne trouve pas le caractère dans la chaine de caractères.

On peut donc l'utiliser pour tester la présence d'un caractère dans une chaîne : si la méthode renvoie -1, c'est que la chaîne testée ne contient pas le caractère voulu !

Le résultat directement ci-dessous avant de vous montrer le code lui-même :

16° Vérifiez que le code fonctionne pour la détection d'un caractère. Et un mot ?

Votre string :

Votre test :

Réponse :

Code HTML à utiliser

<!DOCTYPE html>

<html>


    <head>

        <meta charset="UTF-8" />

        <title>Methode IndexOf</title>

        <meta http-equiv="content-Language" content="fr" />

        <link rel="stylesheet" href="style_1.css" />

    </head>


    <body>


        <header>

            <h1>Recherche d'un caractère dans une chaine</h1>

        </header>


        <section>


            <p>Votre string :</p>

            <p><input type="text" id="mon_string2" value="Votre string"></p>


            <p>Votre test :</p>

            <p><input type="text" id="mon_test2" value=""></p>


            <p><input type="button" id="mon_bouton" onclick="chercheEtTrouve()" value="Lancer le script !"></p>

            <p>Réponse : <span id="resultat2"></span></p>


        </section>


        <script type="text/javascript" src="js_chap_04.js"></script>

    </body>

</html>

La fonction javascript chercheEtTrouve() est décrite ici :

function chercheEtTrouve() {

    var sTexte = document.getElementById("mon_string2").value;

    var sCarac = document.getElementById("mon_test2").value;

    var sResultat = "?";

    if (sTexte.indexOf(sCarac) >= 0) {

        sResultat = "Le test est dans votre chaîne.";

    } else {

        sResultat = "Le test n'est pas dans votre chaîne.";

    }

    document.getElementById("resultat2").innerHTML = sResultat;

}

Une courte remarque pour les curieux :

Si vous regardez d'autres scripts trouvés ça et là, vous risquez un jour de tomber sur ceci :

if (~(sTexte.indexOf(sCarac))) {

à la place de :

if (sTexte.indexOf(sCarac) (>= 0) {

On voit donc que le tilde ~ remplace le test >= 0. Ce tilde est clairement hors de propos ici. Il concerne la gestion des bits. Mais sachez juste que son utilisation incrémente la valeur de l'index de 1. Si la méthode ne trouve rien, elle place l'index à -1 et l'incrémentation place la condition à la valeur 0 ou false. Dans tous les autres cas, on obtient avec le +1 un nombre strictement positif que Javascript va interpréter en true. Et voilà comment un petit tilde fait gagner quelques caractères dans votre code mais risque de faire perdre le fil au lecteur qui ne connait pas cette petite manipulation.

Dernière remarque : la méthode lastIndexOf renvoie, elle, la position de la dernière occurrence de la chaîne recherchée, là où indexOf vous donne la première.

17° Modifier chercheEtTrouve() pour qu'elle puisse indiquer si la chaîne recherchée se trouve une fois et une seule fois dans l'autre chaîne. Il faudra tester si le résultat des deux méthodes lastIndexOf et indexOf correspond au même index.

Voilà pour l’instant sur l’interaction entre chaînes de caractères et boucle. Nous compléterons encore les choses par la suite. Nous allons maintenant commencer par expliquer pourquoi l’espace est considéré comme un caractère …

Si vous cherchez des renseignements complémentaires, w3schools.

3 - Structure de données Array (tableau)

Cette partie va vous permettre d'utiliser la plupart des connaissances vues sur les deux activités traitant des tests et des boucles.

Nous allons maintenant voir les tableaux, un objet de classe Array en Javascript. C'est une structure de données qui va vous permettre de stocker des données créées en grand nombre lors de l'utilisation d'un TANT QUE ou d'une boucle FOR.

Dans l'activité précédente, nous avions créés des balises div colorées mais nous ne pouvions pas stocker leurs références pour pouvoir les modifier par la suite. Nous allons voir comment pallier à cela.

Première description des tableaux Array

Nous avons déjà vu plusieurs exemples de tableaux Array plus haut :

  • Le résultat d'un split :
  • ['Désormais', 'nous', 'allons', 'pouvoir', 'gérer', 'des', 'phrases', 'longues', 'ou', 'courtes']

  • L'exemple de la lecture directe avec un FOR nominatif :
  • var tableau =[1,2,9,8,"ah ah ah",45,"a"+"b"];

    for (element of tableau) {

        console.log(element);

    }

Qu'est qu'un Array ? C'est une structure de données :

Le string est donc une structure de données proche du Array, mais le string n'est pas modifiable après création contrairement au tableau Array. Vous allez voir qu'on retrouve beaucoup de choses vues avec les strings d'ailleurs.

var tableau =[1,2,9,8,"ah ah ah",45,"a"+"b"];

Cela crée un tableau de 7 éléments contenant les nombres 1, 2, 9, 8, le string "ah ah ah", le nombre 45 et le string "ab".

Si on veut afficher un tableau, alert(mon_tableau) fonctionne.

var tableau =[1,2,9,8,"ah ah ah",45,"a"+"b"];

alert(tableau);

On obtient alors une fenêtre pop-up dans laquelle s'affiche ceci :

1, 2, 9, 8, ah ah ah, 45, ab

Si on veut connaitre le nombre d'éléments dans un Array tableau, il faut rechercher la propriété length :

var tableau =[1,2,9,8,"ah ah ah",45,"a"+"b"];

alert(tableau.length);

On obtient alors le nombre d'éléments dans le tableau :

7

Par contre, attention : le premier élément a un index de 0 et le dernier un index de 6.

Si on veut accéder à l'un des éléments d'un Array , on cherchera l'index 2 si on cherche le 3e puisqu'on commence à 0. On utilisera les crochets :

var tableau =[1,2,9,8,"ah ah ah",45,"a"+"b"];

alert(tableau[2]);

9

Attention, on le répète : le premier élément est l'élément 0. On affiche bien 9 qui possède l'index 2.

4.2 Array et boucle FOR

Première méthode :

Pour parcourir un tableau Array, il suffit d'utiliser un for numérique ou nominatif. Voici un exemple avec l'affichage en console plutôt que dans une fenêtre 'alert' :

var tableau =[1,2,9,8,"ah ah ah",45,"a"+"b"];

for (var numIndex=0 ; numIndex < tableau.length; numIndex++) {

    console.log(tableau[numIndex]);

}

Ce code permet d'afficher ceci dans la console web :

1

2

9

8

ah ah ah

45

ab

Deuxième méthode pour accéder aux numéros d'index : on peut utiliser un FOR-IN nominatif, comme avec les strings :

var tableau =[1,2,9,8,"ah ah ah",45,"a"+"b"];

for (numIndex in tableau) {

    console.log(tableau[numIndex]);

}

Cela donne le même affichage qu'avec la méthode 1.

Troisième méthode : le FOR-OF nominatif qui permet d'accéder directement au contenu, sans passer par les index :

var tableau =[1,2,9,8,"ah ah ah",45,"a"+"b"];

for (element of tableau) {

    console.log(element);

}

Cela donne le même affichage qu'avec la méthode 1.

Nous allons utiliser ceci dans le cadre d'un mini-projet :

Présentation du mini-projet

Nous allons reprendre l'interface des carrés colorés de l'activité précédente, mais je voudrais maintenant rentrer des couleurs dans un tableau Array de façon à pouvoir changer à l'envie les couleurs de mes carrés colorés.

Par exemple :

tableau_des_couleurs = [ 'red', "blue", 'yellow', 'red', "blue", 'yellow', 'red', "blue", 'yellow', 'red', "blue", 'yellow', 'red', "blue", 'yellow', 'red', "blue", 'yellow' ]

Voici la page HTML de base :

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" />

        <title>Mini-projet</title>

        <meta http-equiv="content-Language" content="fr" />

        <link rel="stylesheet" href="interface1.css" />

    </head>


    <body>


        <header>

            <h1>Mini-projet FOR et IF</h1>

        </header>


        <section>


            <p><input type="button" onclick="creation()" value="Lancer la création des carrés"></p>


            <div id="conteneur">

            </div>


        </section>


        <script type="text/javascript" src="js_miniprojet.js"></script>

    </body>

</html>

Le CSS qu'il faudra nommer "interface1.css".

#conteneur {

    position : relative;

    margin: 0px;

    padding: 0px;

    border: 1px solid #660000;

    width: 500px;

    height: 500px;

}


.carre {

    display: inline-block;

    position : absolute;

    margin: 0px;

    padding: 0px;

    border: 1px solid black;

}

Voici le Javascript que nous avions utilisé :"js_miniprojet.js". Seule la boucle dans la fonction creation est à comprendre. La seule instruction importante vis à vis de notre projet est : rajouter_carre(x,y,"blue");. Les deux fonctions destruction et rajouter_carre sont juste utilisées, elles ne sont pas à modifier.

largeur = 100;

marge = 20;

nombreCarres = 16;


function creation() {

    /*

    Cette fonction va détruire les anciens carrés puis créer les nouveaux carrés

    L'ensemble est créé dans la balise div d'id "conteneur"

    */

    destruction();

    alert("DEBUT DE LA CREATION DES CARRES");

    for (var numIndex=0; numIndex<nombreCarres; numIndex++) {

        var decalage = marge + (largeur+marge)*numIndex;

        var x = decalage%480;

        var y = marge + Math.floor(decalage/480)*(largeur+marge);

        rajouter_carre(x,y,"blue");

    }

}


function destruction() {

    /*

    Cette fonction permet de détruire tous les carrés colorés présents dans la div d'id "conteneur"

    */

    var listeNoeuds = document.getElementsByTagName(".carre");

    for (var i = 0; i < listeNoeuds.length; i++) {

        var noeud = listeNoeuds[i];

        var noeudParent = noeud.parentNode;

        noeudParent.removeChild(noeud);

    }

}


function rajouter_carre(x,y,couleur){

    /*

    Cette fonction permet de rajouter un carré dans la div conteneur

    Elle possède trois paramètres :

        La position horizontale x, un entier

        La position verticale y, un entier

        La couleur du fond coloré, sous forme d'un string

    */

    var refConteneur = document.getElementById("conteneur");

    var refCarre = document.createElement('div');

    refCarre.style.width = largeur+"px";

    refCarre.style.height = largeur+"px";

    refCarre.className = "carre";

    refCarre.style.left = x+"px";

    refCarre.style.top = y+"px";

    refCarre.style.backgroundColor = couleur;

    refConteneur.appendChild(refCarre);

}

18° Créer les 3 fichiers HTML-CSS-JS pour vérifier que cela fonctionne. Rajouter ensuite le tableau tableau_des_couleurs et modifier ensuite la fonction creation pour que les couleurs soient définies en fonction du numéro du carré : on doit aller chercher la couleur d'un carré en utilisant son numéro comme index dans le tableau.

Vous devriez obtenir ceci :

Les 16 carrés en tri de couleur

...CORRECTION ...

largeur = 100;

marge = 20;

nombreCarres = 16;


tableau_des_couleurs = [ 'red', "blue", 'yellow', 'red', "blue", 'yellow', 'red', "blue", 'yellow', 'red', "blue", 'yellow', 'red', "blue", 'yellow', 'red', "blue", 'yellow' ];


function creation() {

    /*

    Cette fonction va détruire les anciens carrés puis créer les nouveaux carrés

    L'ensemble est créé dans la balise div d'id "conteneur"

    */

    destruction();

    alert("DEBUT DE LA CREATION DES CARRES");

    for (var numIndex=0; numIndex<nombreCarres; numIndex++) {

        var decalage = marge + (largeur+marge)*numIndex;

        var x = decalage%480;

        var y = marge + Math.floor(decalage/480)*(largeur+marge);

        rajouter_carre(x,y,tableau_des_couleurs[numIndex]);

    }

}

Voilà pour le moment. Il existe encore bien des choses à apprendre sur les tableaux. Nous verrons cela dans une activité propre à ceux-ci. Nous y verrons comment rajouter des éléments ou en supprimer par exemple. Cela sera pratique pour garder en mémoire le fait d'avoir cliqué sur un carré par exemple.

Dans l'activité suivante, nous allons voir assez précisement comment gérer les chaînes de caractères. La plupart des applications nécessitent en effet de vérifer les données rentrées par l'utilisateur.