Javascript - Pour rendre vos pages interactives

Auteur: Mohamed CHINY Durée necessaire pour le cours de Javascript - Pour rendre vos pages interactives Niveau recommandé pour le cours de Javascript - Pour rendre vos pages interactives Supports vidéo non disponibles pour ce cours Exercices de renforcement disponibles pour ce cours Quiz disponible pour ce cours

Page 10: Objet Array: les tableaux

Toutes les pages

L'objet Array

Les tableaux sont un type spécial de variables qui permettent de contenir plusieurs valeurs à la fois. Si une variable classique peut avoir une seule valeur, les tableaux, quant à eux, peuvent en contenir autant que l'on souhaite.

En Javascript, un tableau est un objet. Il peut contenir des entrées du même type de de types différents. Il peut même contenir d'autres tableaux. On parle alors d'un tableau à 2 dimensions ou à 3 dimensions etc...

Déclaration d'un tableau

Pour déclarer un tableau en Javascript, il existe plusieurs méthodes. Pour mieux comprendre comment ça fonctionne, on va considérer que l'on veut créer un tableau d'éléments qui renferme les valeurs suivantes: "Javascript", "Coté client" et 40. "Javascript" indique la technologie à apprendre, "Coté client" indique l'endroit où il s’exécute et 40 représente une estimation sur le nombre d'heures nécessaires pour en maîtriser les bases.

Tout d'abord, ce tableau est sensé accueillir 3 entrées. Chaque entrée sera indexée par un indice numérique commençant de 0 et qui s'incrémente de 1. On aura donc les indices 0,1 et 2 qui représenteront respectivement "Javascript", "Coté client" et 40.

Première méthode:
tab=new Array();
tab[0]="Javascript";
tab[1]="Coté client";
tab[2]=40;
Ici nous avons créé un tableau identifié par le nom tab. Le nom d'un tableau vérifie les même règles de nommage d'une variable classique. Le mot clé new signifie que l'on veut créer un nouvel objet. En effet, en programmation orientée objet (ou prototype) on utilise le mot clé new pour créer un objet à partir d'une classe (cas de la POO) ou à partir d'un prototype (cad de la POP). Cependant, il faut désigner à partir de quel objet (prototype) on veut créer notre objet tab, c'est le rôle de Array() (avec A majuscule). Dans ce cas tab sera un objet tableau.

Après la création de l'objet tab on a procédé à l'initialisation de ses indexes. On parle en fait d'un tableau indexé, c'est à dire qu'il utilise des indices numériques spécifiés entre les crochets ([]) pour accueillir les différentes valeurs. Vous avez remarqué que nous avons déclaré les indexes dans l'ordre (0 puis 1 puis 2). Cependant rien ne nous oblige à les incrémenter de 1. On aurait donc pu, à titre d'exemple, déclarer les indexes 0 puis 1 puis 10. Dans ce cas, les indexes sautés (de 2 à 9) sont vides.

Comme je l'ai spécifié plus haut, un tableau peut accueillir des éléments de types différents. Dans notre cas, les deux premiers éléments sont des chaines de caractères tandis que le troisième et un nombre entier.

Deuxième méthode:
tab=new Array();
tab=["Javascript","Coté client",40];
Ici l'initialisation des indexes est faite en une seule instruction. Deux crochets renferment les trois valeurs. La première valeur est implicitement indexée par 0, la deuxième par 1 et la troisième par 2.

Troisième méthode:
tab=new Array("Javascript","Coté client",40);
Dans ce cas, nous avons déclaré une seule instruction qui permet de créer l'objet tableau et l'initialiser par les valeurs passées entre les parenthèses. Là encore, les indexes sont implicites. Ils commencent de 0 et s'incrémentent à chaque nouvel élément déclaré.

Tableau à plusieurs dimensions

Il est possible de créer un tableau à plusieurs dimensions. Pour simplifier, je vous expliquerai le principe d'un tableau à 2 dimensions. En se basant dessus, vous pouvez créer autant de dimensions que vous voulez.

Imaginons que nous voulons créer un tableau qui contient: "Le nom de l'entreprise", "Nombre d'employés" et "Chiffre d'affaires". Il y'aura 3 entreprises en tout.

Commençons d'aborder par déclarer trois tableaux élémentaires (à une dimension) pour chaque entreprise:
tab1=new Array("Entreprise A",40,1000000);
tab2=new Array("Entreprise B",90,5000000);
tab3=new Array("Entreprise C",110,9000000);
Maintenant que les trois tableaux sont déclarés, nous allons déclarer le tableau principal qui regroupera toutes ces données:
tab=new Array(tab1,tab2,tab3);
Là, nous avons déclaré le tableau tab qui regroupe les trois tableaux déclarés avant (tab1, tab2 et tab3). Ce tableau contient deux dimensions. Pour que vous compreniez à quoi cela correspond, il s'agit en fait d'une matrice, ou une grille qui est divisées en lignes et en colonnes. En tout, la grille contient trois lignes (qui représente les entreprises) et trois colonnes qui représentent les données de chaque entreprise.

En schématisant ceci, on obtient la forme suivante:

Entreprise A
[0][0]
40
[0][1]
1000000
[0][2]
Entreprise B
[1][0]
90
[1][1]
5000000
[1][2]
Entreprise C
[2][0]
110
[2][1]
9000000
[2][2]

Pour appeler la première colonne de la première ligne (la valeur "Entreprise A") on fait appel à tab[0][0]. Le premier crochet contient l'indice de la ligne et le deuxième l'indice de la colonne.

Parcourir un tableau

Pour parcourir tous les éléments d'un tableau, la méthode la plus connue et l'utilisation de la boucle for ou la boucle while.

Supposons qu'on veut afficher toutes les valeurs du dernier tableau (à deux dimensions) dans une boite de dialogue alerte. Le code ressemblerai donc à ceci:
str="";
for(i=0;i<3;i++){
   for(j=0;j<3;j++){
      str+=tab[i][j]+" ";
   }
   str+="\n";
}
alert(str);
Puisque nous avons un tableau à deux dimensions, alors on aura forcément besoin de deux boucles. La première avec l’indice i parcourt les linges, et la deuxième avec l'indice j parcourt les colonnes. Chaque boucle fait trois itérations de 0 à 2 (car on sait qu'il y a trois entreprises, chacune dispose de trois données).

A chaque fois, on affecte à la variable str la valeurs de la cellule en cours en conservant son ancienne valeur (affectation avec concaténation). Le \n désigne nouvelle ligne pour passer à la ligne suivante dans la boite de dialogue alert().
La balise <br /> ne génère de retour à la ligne que dans le document HTML. Si on veut retourner à la ligne dans une boite alert() ou dans un espace de texte (textarea) on recours au mot clé universel \n.

Attributs et méthodes de l'objet Array

L'objet Array dispose d'un ensemble d'attributs et méthodes qui permettent de manipuler les tableaux. En voici les plus utilisés:
  • length: Cet attribut retourne la taille du tableau, c'est à dire le nombre d'élément que celui ci contient.
  • sort(): Cette méthode retourne le tableau dont les éléments sont triés dans l'ordre alphanumérique croissant.
  • reverse(): Cette méthode retourne le tableau dont l'ordre des éléments a été inversé.
  • join(): Cette méthode retourne une chaîne de caractères constituée des éléments du tableau séparés par l’occurrence passée en paramètres (entre les parenthèses).

Exemples:
tab=new Array("A","B",10);
tab.length;
/* Retourne 3 */

tab.sort();
/* Retourne un tableau dont les éléments sont déclarés dans cet ordre: 10, A, B */

tab.reverse();
/* Retourne un tableau dont les éléments sont déclarés dans cet ordre: 10, B, A */

tab.join("-");
/* Retourne la chaîne de caractères "A-B-10" */

tab.sort().reverse().join("-");
/* Retourne la chaîne de caractères: "B-A-10" */
Comme vous l'avez constaté dans le dernier exemple, on peut imbriquer les méthodes. L'instruction tab.sort().reverse().join("-") exécute les traitements suivant:
  1. sort() crée un tableau dont les éléments sont ceux de tab triés dans l'ordre alphanumérique croissant.
  2. reverse() crée un tableau dont les éléments sont ceux du tableau obtenu dont les éléments sont inversés.
  3. join("-") crée une chaîne de caractère à partir des éléments du dernier tableau obtenu séparés par "-".