Premiers pas en JavaScript
26.1 tableaux
cuy copyleft
  See You Why?  

 


test relatif aux objets et leurs méthodes (25.9) | | les tableaux multidimensionnels (26.2)

Contenu

 

 

I. Les tableaux en JS

Depuis le début, nous avons appris à utiliser les variables en JS. Nous avons dû d'abord déclarer cette variable, ensuite lui affecter une valeur.

Ainsi, si nous avions à retenir nos 6 élèves d'une même classe, nous devions déclarer 6 variables puis affecter chacune d'elles d'une valeur, ce qui aurait pu être fait ainsi :

var eleve1;
var eleve2;
var eleve3;
var eleve4;
var eleve5;
var eleve6;
eleve1 = "ElifS";
eleve2 = "FredD";
eleve3 = "KathiaN";
eleve4 = "LaetitiaH";
eleve5 = "MelanieA";
eleve6 = "SihamF";

Certes, il existe quelques façons plus rapides d'obtenir le même résultat,
soit en déclarant les 6 variables dans une même instruction,

var eleve1,eleve2,eleve3,eleve4,eleve5,eleve6;
eleve1 = "ElifS";
eleve2 = "FredD";
eleve3 = "KathiaN";
eleve4 = "LaetitiaH";
eleve5 = "MelanieA";
eleve6 = "SihamF";

soit en déclarant et affectant les variables en une seule instruction,

var eleve1 = "ElifS";
var eleve2 = "FredD";
var eleve3 = "KathiaN";
var eleve4 = "LaetitiaH";
var eleve5 = "MelanieA";
var eleve6 = "SihamF";

mais le travail est ardu et il nécessite de retenir le nom de 6 variables et de savoir laquelle est celle souhaitée. Les tableaux (ou arrays) sont un moyen de mieux organiser sa programmation.

ou

Un tableau, c'est quoi ?

Un tableau, c'est par exemple ça...

... oui, mais... en informatique ?

Les tableaux sont un groupe de variables, généralement de même type,
qui se distinguent les unes des autres uniquement par un indice.

Certains vont jusqu'à dire qu'un tableau est une variable
qui peut contenir d'autres variables.

A. La déclaration d'un tableau (array)

Comme pour les variables, il faut déclarer un tableau, puis lui affecter des valeurs. En déclarant un tableau, on lui donne un nom et un bon nom doit nous rappeler le contenu de la variable... donc eleve était un mauvais choix, puisqu'un enseignant a toujours (ou presque) des élèves de différentes classes... la dénomination '3rse' n'est-elle pas plus judicieuse ?

Un tableau de dimension "un" mais à 5 éléments, c'est un peu ça :

ou encore ça:

pour ceux qui définissent les tableaux comme variables numérotées,
on devra encore vous le rappeler souvent, en informatique, on commence à compter à partir de 0 (=zéro)...
donc,
le nombre d'éléments = le dernier indice + 1 ;
et réciproquement,
le dernier indice = le nombre d'éléments - 1.

Un tableau de dimension "un" c'est un peu comme un meuble qui portera un nom "dossiers_en_cours" et dont chaque tiroir sera repéré par sa place à partir du bas (comme des étages). Ça tombe bien, le rez-de-chaussée est l'étage 0, mais c'est un premier niveau.

La syntaxe de déclaration d'un tableau est

    var nom_du_tableau = new Array;

ou

    var nom_du_tableau = new Array(nombre_d_elements_du_tableau);

Donc pour notre classe d'élèves, nous utiliserons un tableau de dimension 1 (on ne retiendra qu'une seule information, un repère mnémotechnique basé sur les prénom et nom de chacun) et de 6 éléments (les 6 élèves de notre classe);
nous pourrions adopter la déclaration suivante :

    var el_3rse = new Array; ou     var el_3rse = new Array(6);

Gros risque d'erreur déjà signalé : le nom des variables doit commencer par une voyelle ou un underscore '_'... d'où le 'el' (pour rappeler que c'est une liste d'élèves) en début de nom de variable ; et la dimension (non obligatoire en JS) se note entre parenthèses... pardon, vous aurez corrigé la dimension est 1 ici, mais c'est la taille qui se note entre parenthèses et malheureusement, cette taille ne peut pas dépasser 255.

B. l'affectation d'un tableau (ou array)

Voilà la déclaration faite, il ne reste plus qu'à affecter une valeur pour chaque élément de l'array (du tableau). JS permet différentes façons de donner des valeurs à notre tableau déclaré. En voici une :

    el_3rse[0] = "ElifS";
    el_3rse[1] = "FredD";
    el_3rse[2] = "KathiaN";
    el_3rse[3] = "LaetitiaH";
    el_3rse[4] = "MelanieA";
    el_3rse[5] = "SihamF";

Le lecteur attentif aura remarqué que
- l'on place un indice entre crochets, immédiatement derrière le nom du tableau ;
- contrairement à la déclaration où la dimension est notée entre parenthèses ;
- le premier élément de la liste ne porte pas l'indice 1, mais l'indice 0 ;
- le dernier élément (le sixième) ne porte pas l'indice 6, mais l'indice 5 ;
- chaque affectation est une instruction et doit se terminer par un point-virgule ;
- que les 6 éléments ont donc des indices de 0 à 5.

Une autre façon de donner les valeurs d'un tableau :

    el_3rse = ["ElifS","FredD","KathiaN","LaetitiaH","MelanieA","SihamF"];

Ici aussi, le lecteur attentif remarquera que
- le nom du tableau est noté devant le signe d'affectation '=', sans crochets, ni indice ;
- la liste est notée entre crochets ;
- les éléments de la liste sont séparés par des virgules ;
- ici, les éléments étant des chaines de caractères, chaque élément est noté entre guilles ;
- l'affectation se fait en une seule instruction et doit se terminer par un point-virgule.

Il existe d'autres méthodes, dont une qui peut affecter des valeurs à un tableau de façon dynamique en utilisant la boucle FOR...

Comme pour les variables, il est aussi possible de déclarer et d'affecter un tableau en une intruction unique. Il faudra alors écrire le code :

    var el_3rse = new Array("ElifS","FredD","KathiaN","LaetitiaH","MelanieA","SihamF");

Ici aussi, le lecteur devra faire attention :
- le mot réservé 'Array' est suivi de parenthèses et pas de crochets comme dans la méthode précédente ;
- le mot réservé 'Array' commence par une capitale (vulgairement appelée majuscule) ;
- comme une autre déclaration explicite, l'instruction commence par le mot réservé var ;
- les éléments sont séparés par des virgules ;
-

Tout appel à un élément d'un tableau avec un indice non conforme, sera considéré comme "undefined".

Cerise sur le gateau: nous ne l'avions pas encore signalé, les tableaux JavaScript sont des objets JS... ils auront donc des propriétés et des méthodes. C'est ce qui sera abordé dans les chapitres 28 et suivants.

C. l'accès aux données d'un tableau (ou array)

Votre tableau est déclaré et des valeurs lui ont été affectées... reste à voir comment accéder à ces informations.

Le nom du tableau suivi d'un indice entre crochets suffit pour désigner l'un des éléments du tableau (ne pas oublier que les indices commencent à 0 et ont pour valeur maximale, le nombre d'éléments moins 1 et ce nombre ne peut pas dépasser 255). À l'école primaire, vous avez eu bien du mal à compter à partir de 1, les ordinateurs comptent généralement à partir de 0 :-( . On pourra donc écrire :

    document.write("Le/la 4e élève de mon tableau est " + el_3rse[3]);

 

 

II. Tableaux multidimentionnels

voir suite >>>

 

III. Tableaux associatifs

voir suite >>>

 

VIII. Exercices relatifs aux tableaux ou arrays...

voir suite >>>

 

IX. Test relatif aux tableaux ou arrays...

voir suite >>>

 

 


test relatif aux objets et leurs méthodes (25.9) | | les tableaux multidimensionnels (26.2)