Les tableaux javascript

Les tableaux javascript
JavaScript a une gestion particulière des tableaux. Un tableau est un objet Array. (voir la page JavaScript, langage
objet pour plus d'infos sur ce type de programmation)
Vous trouverez au sommaire de cette page :
1 - La déclaration de tableaux
2 - Les tableaux spéciaux
Les tableaux à indices non numériques
Les tableaux d'objets
Les tableaux à plusieurs dimensions
3 - Les propriétés et les méthodes des tableaux
4 - Des exemples utiles
1 - La déclaration de tableaux
C'est quoi un tableau ?
Les tableaux sont des éléments indispensables de la programmation.
Passez au paragraphe suivant si vous connaissez déjà les tableaux en 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
Contenu
1
Lundi
2
Mardi
3
Mercredi
4
Jeudi
5
Vendredi
6
Samedi
7
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 :
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 :
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).
Voyez le formulaire pour obtenir le contenu du tableau à l'indice voulu.
0
Indice
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 :
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
Contenu
Lundi
semaine
Mardi
semaine
Mercredi
enfant
Jeudi
semaine
Vendredi
semaine
Samedi
weekend
Dimanche
weekend
Qui serait déclaré ainsi en javascript :
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";
Voyez le formulaire pour obtenir le contenu du tableau à l'indice voulu. (Attention à la majuscule)
Lundi
Indice
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.
Je vous invite à lire la page concernant le JavaScript objet si vous n'êtes pas familier avec la notion d'objet.
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 :
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 :
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 :
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
Ce formulaire permet d'afficher les propriétés des animaux du tableaux
Indice
1
Propriété
espece
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
X O
O X
0
1
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 :
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 :
var morpion=new Array;
morpion[0]=col0; morpion[1]=col1; morpion[2]=col2;
Pour accéder à l'élément [0,2], on écrit simplement :
morpion[0][2]
Le premier indice entre crochets appelle la colonne, le second appelle la case de la colonne indicée.
Un petit formulaire pour tester le tableau morpion :
0
0
morpion[
] [
]
Une fois que le tableau est créé, il devient manipulable comme dans tout autre langage.
L'algorithme pour faire jouer la machine au morpion ne doit pas être sorcier à trouver (mais je me fixe comme objectif
d'offrir toujours plus de scripts et de conseils, donc vous ne le trouverez pas tout de suite ici !).
JavaScript n'est pas adapté aux gros algorithmes, car c'est un langage interprété donc assez lent. Même s'il est
envisageable de développer un script d'échecs ou de dames, les performances ne seraient pas à la hauteur du temps
passé au développement.
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 du site. Voici quelques scripts simples qui montrent bien l'emploi des
tableaux.
REMARQUE : En programmation, il n'y a jamais une solution unique à un besoin. Comme en philo, ces scripts sont des
exemples didactiques et ne prétendent pas être les meilleurs.
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.
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);
Voici le résultat de ce script : Nous sommes le Mardi 4 Janvier
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.
Voir le script tri de tableau
Les scripts du site utilisant les tableaux
Moteur de recherche objet