[Javascript] - Tutoriaux > Les tableaux javascript

Message par **LM2I_Laurent** » lun. 17 sept. 2012 21:57

La déclaration de tableaux
Les tableaux spéciaux
- Les tableaux à indices non numériques
- Les tableaux d'objets
- Les tableaux à plusieurs dimensions
Les propriétés et les méthodes des tableaux
Des exemples utiles

1 - La déclaration de tableaux

C'est quoi un tableau ?
Les tableaux sont des éléments indispensables de la programmation.
Un tableau est une structure ordonnée permettant de recevoir des informations.
Les jours de la semaine peuvent être stockés en mémoire dans un tableau. Le tableau en mémoire peut être comparé au tableau réel:

_____________________________________________________________________________________________________
Indice | 1 | 2 | 3 | 4 | 5 | 6 | 7 |
Contenu | Lundi | Mardi | Mercredi | Jeudi | Vendredi | Samedi | Dimanche |
_____________________________________________________________________________________________________

L'intérêt premier du tableau est de permettre un accès à une information par son indice.
Par exemple, le premier élément de ce tableau contient "Lundi".
Le paragraphe suivant montre comment remplir un tableau.

Déclaration de base
Un tableau est un objet Array. Pour déclarer un tableau, il faut utiliser l'instruction new :

Code : Tout sélectionner

var tab=new Array;

La variable tab a maintenant la structure d'un tableau. Elle possède les propriétés et les méthodes des tableaux et est prête à recevoir le contenu du tableau.

En javascript, comme dans la plupart des langages de programmation, le premier élément du tableau commence à l'indice 0. C'est un peu gênant, mais on s'habitue...
Pour alimenter le tableau avec les jours de la semaine, on écrit le code suivant :

Code : Tout sélectionner

   var tab=new Array;
   tab[0]="Lundi";
   tab[1]="Mardi";
   tab[2]="Mercredi";
   tab[3]="Jeudi";
   tab[4]="Vendredi";
   tab[5]="Samedi";
   tab[6]="Dimanche";
   var longueur=tab.length;

Maintenant, le tableau est initialisé avec les jours de la semaine.
La variable longueur contient 7 : il y a 7 élements dans le tableau de l'indice 0 à l'indice 6 (soit 7-1).

Si on accède à un élément dont l'indice n'existe pas, javascript retourne undefined.
Par exemple, tab[10] n'existe pas, cet élément vaut undefined.

Déclaration accélérée
A partir des versions 4 des navigateurs, la déclaration du tableau des jours de la semaine peut se faire plus directement :

Code : Tout sélectionner

var tab=new Array("Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi","Dimanche");

La fonction Array reçoit en paramètres les éléments ordonnés du tableau. Elle construit le tableau. Array est le constructeur de l'objet tableau.

Le tableau tab a exactement les mêmes propriétés dans les 2 types de création.

2 - Les tableaux spéciaux
Nous avons vu comment créer un tableau simple à une seule dimension. C'est la base de tous les tableaux possibles en javascript.

Changer les indices
Dans certains cas, un indice numérique est moins pratique ou moins explicite qu'un indice sous forme de texte.
Par exemple, imaginons que pour chaque jour de la semaine on ait une page spéciale à charger :
- samedi et dimanche = weekend.html
- mercredi = enfant.html
- les autres jours = semaine.html

Il pourrait être intéressant d'avoir un tableau de ce type :
__________________________________________________________________________________________________________
Indice | Lundi | Mardi | Mercredi | Jeudi | Vendredi | Samedi | Dimanche |
Contenu | semaine | semaine | enfant | semaine | semaine | weekend | weekend |
__________________________________________________________________________________________________________

Qui serait déclaré ainsi en javascript :

Code : Tout sélectionner

   var tab=new Array;
   tab["Lundi"]="semaine";
   tab["Mardi"]="semaine";
   tab["Mercredi"]="enfant";
   tab["Jeudi"]="semaine";
   tab["Vendredi"]="semaine";
   tab["Samedi"]="weekend";
   tab["Dimanche"]="weekend";

Grâce à cette déclaration un peu spéciale, on accède aux éléments du tableau par le jour de la semaine.

Les tableaux d'objets
Pour l'instant, les tableaux que nous avons vus contenaient des valeurs basiques (chaînes de caractères ou nombres). Il est possible d'associer à un élément de tableau un objet javascript complexe.

Imaginons un tableau contenant tous vos animaux domestiques.
Un animal domestique est décrit par :
- son nom
- son espèce
- son âge
Voici la fonction qui construit un animal en mémoire :

Code : Tout sélectionner

 function Animal(un_nom,une_espece,un_age) {
      this.nom=un_nom;
      this.espece=une_espece;
      this.age=un_age;
   }

On peut créer les animaux en appelant la fonction Animal :

Code : Tout sélectionner

var milou=new Animal("Milou","Chien","4")
   var titi=new Animal("Titi","Canari","1")
   var rominet=new Animal("Rominet","Chat","2")

On a maintenant en mémoire 3 variables correspondant à nos 3 animaux :
milou, titi et rominet
ATTENTION : il ne faut pas confondre les variables en minuscules avec le nom de l'animal qui est une chaîne de caractères et qui comporte une majuscule !

Il ne reste qu'à créer le tableau animaux :

Code : Tout sélectionner

var animaux=new Array;
   animaux[0]=milou;
   animaux[1]=titi;
   animaux[2]=rominet;

Ici, le premier élément du tableau animaux contient un objet, la variable milou. Il ne faut pas mettre de guillemet autour de milou : ce n'est pas une chaîne de caractères, mais un nom de variable.

Pour accéder à l'objet premier animal (indice 0), on écrit :
animaux[0]
Pour accéder à ses propriétés, on utilise la notion pointée :
animaux[0].nom
animaux[0].espece
animaux[0].age

Les tableaux à plusieurs dimensions
On vient de voir qu'il est possible de créer des tableaux d'objets. Or un tableau est aussi un objet javascript Array.
Il est donc possible de créer des tableaux de tableaux, ce qui correspond à des tableaux à plusieurs dimensions.
Le nombre de dimensions d'un tableau n'est pas limité; mais nous allons traiter un exemple simple et concret à deux dimensions.

Imaginons un jeu de morpion. La zone de jeu est un plateau de 3 par 3. Supposons cette grille à un moment donné de la partie :
____________________________ __________
| | | X | | 0 |
| X | O | | | 1 |
| O | X | | | 2 |
____________________________ __________
| 0 | 1 | 2 |
____________________________

Cette grille est bien un tableau à 2 dimensions.
Décidons, par convention, d'indicer d'abord la colonne puis la ligne.
Ainsi, la case[0,0] coin supérieur gauche est vide, la case [0,2] coin inférieur gauche contient "O", la case[2,0] coin supérieur droit contient "X".

Comment faire pour créer un tableau javascript de ce type.
On va créer un tableau de 3 colonnes ; une colonne étant un tableau de 3 cases.

D'abord on crée les 3 colonnes :

Code : Tout sélectionner

 var col0=new Array; col0[0]=" "; col0[1]="X"; col0[2]="O";
   var col1=new Array; col1[0]=" "; col1[1]="O"; col1[2]="X";
   var col2=new Array; col2[0]="X"; col2[1]=" "; col2[2]=" ";

Ensuite le tableau morpion :

Code : Tout sélectionner

 var morpion=new Array;
   morpion[0]=col0; morpion[1]=col1; morpion[2]=col2;

Pour accéder à l'élément [0,2], on écrit simplement :

Code : Tout sélectionner

morpion[0][2]

Le premier indice entre crochets appelle la colonne, le second appelle la case de la colonne indicée.

Une fois que le tableau est créé, il devient manipulable comme dans tout autre langage.

3 - Les propriétés et les méthodes des tableaux

Au cours des évolutions des navigateurs et du JavaScript, les tableaux se sont enrichis de propriétés et de méthodes nouvelles.
Pour des raisons de compatibilité entre versions et entre navigateurs, ne sont détaillées dans ce paragraphe que les plus anciennes et les plus sûres.

Le nombre d'éléments
La propriété length retourne le nombre d'éléments d'un tableau.
Si length vaut 0, le tableau est vide.
Si length est supérieure à 0, le tableau possède des éléments de l'indice 0 à length-1

Le découpage en chaînes

La concaténation

4 - Des exemples utiles

Les tableaux sont utilisés dans la plupart des scripts d'un site. Voici quelques scripts simples qui montrent bien l'emploi des tableaux.

Formatage de date
Le formatage de dates est un bon exemple d'utilisation des tableaux.
Le navigateur peut retourner le numéro du jour et du mois en cours. Avec ces indices, on peut aller rechercher le libellé en français du jour et du mois.

Code : Tout sélectionner

   var dt=new Date;
   var jour=dt.getDay();
   var nu=dt.getDate();
   var mois=dt.getMonth();
   var tabjr=new Array("Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi");
   var tabmois=new Array("Janvier","Février","Mars","Avril","Mai","Juin","Juillet", "Août","Septembre","Octobre","Novembre","Décembre");
   document.write("Nous sommes le "+tabjr[jour]+" "+nu+" "+mois);

La méthode getDay() retourne le numéro du jour de la semaine, 0 pour le dimanche à 6 pour samedi.
La méthode getMonth() retourne le numéro du mois, 0 pour Janvier à 11 pour Décembre.
Ici, on affiche le jour et le mois correspondant aux indices retournés.

Tri de tableaux
Il existe déjà des fonctions javascript de tri de tableau. Mais selon les versions, la compatibilité n'est pas assurée. Voici un script qui fonctionne pour tous les tableaux sur tous les navigateurs.

Code : Tout sélectionner

<SCRIPT LANGUAGE="JavaScript">
//D'autres scripts sur http://www.multimania.com/jscript
//Si vous utilisez ce script, merci de m'avertir ! 	< jscript@multimania.com >

var Tableau = new Array(10,7,5,8,0,3,9,10,11,-6);

function disp(txt) { document.write(txt) }
function inverser(tab,i,j) {
	var temp=tab[i];
	tab[i]=tab[j];
	tab[j]=temp;
}
function TriTab(tab,ordre) {
	// tab est le nom du tableau
	// ordre vaut 1 si tri croissant et -1 sinon
	ordre=-ordre;
	var n=tab.length;
	var continuer=true;
	var i=0;
	var iter=0;
	for (i=0;i<n;i++) {tab[i]=ordre*tab[i];}
	while (continuer) {
		iter++;
		continuer=false;
		for (i=0;i<n-1;i++) {
			if (Math.min(tab[i],tab[i+1])!=tab[i+1]) {inverser(tab,i,i+1);  continuer=true;}
		}
	}
	for (i=0;i<n;i++) {tab[i]=ordre*tab[i];}

	return tab;
}
function DispTab(tab) {
	var nb=tab.length;
	for (var i = 0; i < nb; i++)
		disp("El&eacute;ment n° "+i+" : <B>"+tab[i]+"</B><BR>");
}

</SCRIPT>

Source:

http://www.toutjavascript.com/savoir/savoir09.php3