<< Retour au sommaire

 

 

L’objet « Array »

 

 

 

Le sommaire :

  1. Présentation.
  2. Le tableau en une dimension.
  3. Le tableau en 2 dimensions.
  4. Méthodes & Propriétés.

 

 

Présentation

 

L’objet « Array » est en quelque sorte une variable indicée, on dit plus couramment d’ailleurs, « un tableau ».

 

En effet, contrairement à une variable classique, l’objet « Array » permet de définir des variables pouvant contenir plusieurs valeurs et qui seront référencées par des indices.

 

Désormais, je vous parlerai de « tableau ».

 

 


Le tableau en une dimension

 

Pour déclarer un tableau en une seule dimension, voici la syntaxe :

 

NomDuTableau = new Array(NombreCellules);

 

La description :

 

« NomDuTableau » est le nom du tableau, rien de plus…

« NombreCellules » permet de dimensionner le tableau, il s’agit d’un entier qui précise le nombre de cellules que contiendra le tableau.

 

Par exemple, pour déclarer le tableau « clients » avec 100 cellules :

clients = new Array(100);

 

Ensuite, pour réaliser un traitement sur l’une des cellules du tableau, vous devez placer l’indice entre crochets.

 

Par exemple :

document.write (clients[49]);

 

Mais pour faire afficher le premier client, ce sera :

document.write (clients[0]);

 

Et oui, le premier indice d’un tableau est 0.

Par conséquent, si vous définissez un tableau de « N » cellules, les indices utilisables seront compris entre 0 et « N -1 ».

 

Par exemple, pour affecter « DUPONT » à la position 5 du tableau :

clients[4] = "DUPONT";

 

Voici un exemple.

 

Ici, dès que la page s’ouvre, une boucle « for » vous oblige à saisir le nom de 5 contacts.

A chaque itération de la boucle, le tableau « contacts » reçoit le nouveau contact et l’indice utilisé est très logiquement le compteur de la boucle.

Lorsque la saisie est terminée, une seconde boucle affiche le contenu du tableau !

 

Exemple 1, afficher le tableau >>

 

Voici le code :

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

<head>

<title>Jouons avec un tableau</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

</head>

<body>

<h1> affichage de 5 contacts</h1>

<pre>

<script type="text/javascript">

/* initialisation d'une variable qui sera utilisée pour afficher le numéro du contact dans la boucle */ 

numéro = 0;

// initialisation d'une variable qui recevra la qaisie de l'utilisateur

nom = "";

// déclaration du tableau en une seule dimension 5 cellules

contacts = new Array(5);

// c'est partie pour la boucle et pour 5 ittérations

for (i=0;i<5;i=i+1) {

 numéro = numéro +1;

 nom = window.prompt ("Saisissez le nom numéro "+numéro+" : ","");

 contacts[i] = nom; }

document.writeln ("les 5 contacts sont :");

// affichage du contenu du tableau

for (i=0;i<5;i=i+1) {

 document.writeln (contacts[i]); }

</script>

</pre>

</body>

</html>

 

 


Le tableau en 2 dimensions

 

Pour déclarer un tableau en 2 dimensions, nous devons procéder à quelques manipulations !

Remarquez, nous sommes bien là pour cela ? non ?

 

Pour déclarer un tableau en 2 dimensions, par exemple comme pour une « bataille navale », c’est-à-dire avec des lignes et des colonnes, nous devons tout d’abord déclarer la première dimension, celle qui correspondra aux lignes, puis, pour chacune d’entre elles, définir le nombre de colonnes…

voici la syntaxe de la première étape :

// déclaration d’un tableau comportant 3 lignes

MonTableau = new Array(3);

 

Maintenant, pour chacune des lignes, nous devons définir, ou plutôt, déclarer le nombre de colonnes.

 

voici donc la syntaxe de la deuxième étape :

// 2 colonnes par ligne

MonTableau[0] = new Array (2);

MonTableau[1] = new Array (2);

MonTableau[2] = new Array (2);

 

Bien sûr, pour la deuxième étape, nous pouvons ruser par l’intermédiaire de l’emploi d’une boucle !

for (i=0 ;i<3 ;i++) MonTableau[i] = new Array(2);

 

Ensuite, pour affecter une donnée dans l’une des cellules du tableau, par exemple dans la deuxième colonnes de la première ligne :

 

MonTableau[0][1] = « ça marche ! » ;

 

Voici un exemple qui utilise un tableau de 3 lignes et de 2 colonnes pour stocker des données portant sur des entreprises.

Chaque entreprise aura sa propre ligne, et pour chacune d’entre elles, la « raison sociale » et « la ville ».

 

Exemple 2, Afficher le tableau "Entreprises" >>

 

Voici le code :

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

<head>

<title>les entreprises</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

</head>

<body>

<pre>

<script type="text/javascript">

// déclaration d'un tableau en 2 dimensions

entreprises = new Array(3);

for (i=0;i<3;i++) entreprises[i]=new Array(2);

// affectation des données dans le tableau

entreprises[0][0] = "SOS vacances";

entreprises[0][1] = "PARIS";

entreprises[1][0] = "Night-club la sauterelle";

entreprises[1][1] = "SAINT-MARTIN du PETIT BOIS PERDU";

entreprises[2][0] = "Vêtements 33";

entreprises[2][1] = "BORDEAUX";

// affichage des données du tableau

for (i=0;i<3;i=i+1) {

 document.writeln (entreprises[i][0]+" à "+entreprises[i][1]); }

</script>

</pre>

<p>Fin du tableau</p>

</body>

</html>

 

 


Méthodes & propriétés

 

 

Les méthodes applicables sur un objet de type « Array »

Méthodes

Descriptions

Length

Retourne le nombre de lignes contenu dans un tableau.

document.write (MonTableau.length);

join()

Regroupe le contenu du tableau dans une variable unique. L’argument que vous devez placer entre les parenthèses correspondra au séparateur de lignes. Quant au séparateur de colonne, ce sera automatiquement une virgule.

var contenu = MonTableau.join(";");

reverse()

Inverse le contenu du tableau :

document.write (MonTableau.reverse());

sort()

Retourne le contenu du tableau trié par ordre alphabétique :

document.write (MonTableau.sort());

 

En reprenant l’exemple du chapitre précédent, voici maintenant la mise en application des méthodes sur le tableau « entreprises ».

 

Exemple 3, afficher le tableau "entreprises" avec les méthodes >>

 

Le code :

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

<head>

<title>les entreprises</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

</head>

<body>

<pre>

<script type="text/javascript">

// déclaration d'un tableau en 2 dimensions

entreprises = new Array(3);

for (i=0;i<3;i++) entreprises[i]=new Array(2);

// affectation des données dans le tableau

entreprises[0][0] = "SOS vacances";

entreprises[0][1] = "PARIS";

entreprises[1][0] = "Night-club la sauterelle";

entreprises[1][1] = "SAINT-MARTIN du PETIT BOIS PERDU";

entreprises[2][0] = "Vêtements 33";

entreprises[2][1] = "BORDEAUX";

// affichage des données du tableau

for (i=0;i<3;i=i+1) {

 document.writeln (entreprises[i][0]+" à "+entreprises[i][1]); }

// Affichage du nombre de lignes contenu dans le tableau

NombreLignes = entreprises.length;

document.writeln ("le nombre de lignes du tableau est de "+NombreLignes);

// regroupement du contenu du tableau dans une variable unique

var contenu = entreprises.join(";");

document.writeln ("résultat du regroupement du contenu du tableau dans une variable unique :");

document.writeln (contenu);

// inversement de l'affichage des cellules

document.writeln ("Affichage du tableau à l'envers !");

document.writeln (entreprises.reverse());

// Affichage du contenu du tableau par ordre alphabétique

document.writeln ("Le contenu du tableau par ordre alphabétique :");

document.writeln (entreprises.sort());

</script>

</pre>

<p>Fin du tableau</p>

</body>

</html>

 

Philippe BOULANGER