|  développez.com  |  L'ouèbe d'Iza  | 

L'objet Array et les variables de tableaux

Cette page a été testé avec Internet Explorer 5.5 ( bons résultats ) et avec Netscape Communicator 4.7 ( pourri ! ) sous Windows 95 ( je sais, c'est vieux comme OS ).
 

Table des matières

 

Résumé ou chapitre complet ?

Croyez-le ou non, ce document se voulait au départ le résumé de 5 pages d'un manuel JavaScript format de poche !

Au tout début, je voulais juste faire en exercices les exemples du manuel que j'étais en train de lire. À savoir JavaScript 1.5 ( éditions CampusPress, voir la bibliographie à la fin de ce document ). Mais, dans un navigateur, le résultat d'un script ne donnant pas beaucoup d'indications sur le script lui-même, j'ai cru bon d'y ajouter quelques bref commentaires. Ceux-ci ne suffisant pas toujours, j'ai ajouté aussi la transcription HTML du script lui-même. Ces transcriptions nécessitant à leur tour quelques explications... et la roue tourne !

Tant et si bien que maintenant, ce document débute avec une table des matières. Si vous l'imprimez, vous obtiendrez pas loin d'une dizaine de pages en format Lettre ( l'équivalent américain du A4 ). Nous somme loin du cinq pages en format de poche...

|  Tables des matières  |  Rubrique suivante  |

Déclaration et initialisation...

1. Avec new Array( )

Lorsqu'on déclare une variable ( implicitement ou explicitement ) et qu'on l'utilise comme tableau de valeurs, on crée en fait un objet Array qui possède des propriétés et des méthodes comme n'importe quel autre objet.

On déclare d'abord la variable en tant que nouveau tableau ( new Array( ) ) puis on remplis le tableau indice par indice.

semaine = new Array(7)
semaine[0] = "dimanche"
semaine[1] = "lundi"
semaine[2] = "mardi"
semaine[3] = "mercredi"
semaine[4] = "jeudi"
semaine[5] = "vendredi"
semaine[6] = "samedi"

Le mot clé new est un opérateur qui sert exclusivement à créer une instance d'objet. Ici nous avons créé un objet de la classe Array nommé semaine.

Notez que la taille du tableau est explicitement indiquée en paramètre et que chaque indice est placé entre crochets ( [ et ] ). Le plus grand indice correspond à la taille du tableau -1 (le premier indice étant toujours 0).
Notez aussi qu'il n'est pas nécessaire d'indiquer la taille lors de la déclaration du tableau.

Vous pourrez trouver plus d'explications dans un manuel comme JavaScript et VBScript, manuel pratique aux éditions ENI ( page 132 : Voir la bibliographie au bas de cette page ) ou encore sur le site devedge.netscape.com dans la partie Array de la référence JavaScript 1.5 ( voir la Webbographie au bas de cette page ).

Exemple 1 :
Le script suivant affiche la valeur de semaine à l'indice 4 : 

<html><head>
<title>Les tableaux</title>
</head><body>
<script language="javascript" type="text/javascript">
<!--
semaine = new Array(7);
semaine[0] = "dimanche";
semaine[1] = "lundi";
semaine[2] = "mardi";
semaine[3] = "mercredi";
semaine[4] = "jeudi";
semaine[5] = "vendredi";
semaine[6] = "samedi";
document.write(semaine[4]);
//-->
</script>
</body></html>

Le code ci-haut contient les balises html. Pour le tester, vous n'avez qu'à le sélectionner, le copier ( Edition / Copier ) puis le coller dans un éditeur de texte ( Edition / Coller ) comme le Bloc-notes de Windows. Vous enregistrez ensuite le fichier au format html ( .htm ou .html ). Dans la zone Type de fichier de la boîte de dialogue Enregistrer sous, choisissez Tous (*.*) plutôt que Document texte. Ceci afin d'éviter que votre éditeur n'ajoute l'extension .txt à votre fichier.
Tous les autres exemples de cette page ne contiendront pas les balises html. Enregistrez donc votre fichier et servez vous en comme modèle pour les autres scripts.
Ou encore utilisez ce code html de page vide comme modèle :

<html><head>
<title>Titre de votre page</title>
</head><body>
<!-- Corps du texte  --
     vous insérez le script
     après ce commentaire -->

</body></html>

2. Avec new Array( ) en passant les valeurs en paramètres

On peut aussi déclarer le tableau en passant les données en paramètres à l'intérieur des parenthèses. De cette façon, vous itinialisez le tableau tout en définissant sa taille.

semn = new Array("dimanche","lundi","mardi","mercredi","jeudi","vendredi","samedi")

Exemple 2 :
Le script suivant affiche la valeur de semn à l'indice 2 : 

<script language="javascript" type="text/javascript">
<!--
semn = new Array("dimanche","lundi","mardi","mercredi","jeudi","vendredi","samedi");
document.write(semn[2]);
//-->
</script>

3. Sans l'aide de new Array( )

On peut se passer de la commande new Array( ) en initialisant directement la variable comme un tableau en plaçant la série de valeurs entre crochets ( [ et ] ). Celà a pour effet d'initialiser la variable en tant que tableau et d'en définir la taille.

joursem = ["dimanche","lundi","mardi","mercredi","jeudi","vendredi","samedi"]

Exemple 3 :
Le script suivant affiche la valeur de joursem à l'indice 6 : 

<script language="javascript" type="text/javascript">
<!--
joursem = ["dimanche","lundi","mardi","mercredi","jeudi","vendredi","samedi"];
document.write(joursem[6]);
//-->
</script>

Notez que dans chacun des exemples ci-haut, le premier indice est toujours 0 ( zéro ) et ce peu importe la méthode utilisée pour déclarer et initialiser le tableau.

4. Les tableaux de valeurs numériques

On peut également déclarer des tableaux destinés à contenir des valeurs numériques de la même manière que pour les tableaux contenant des chaînes. Les trois exemples suivants sont des manières valides de déclarer des tableaux numériques et de les initialiser.

1. 
montableau = new Array(3);
montableau[0] = 1;
montableau[1] = 2;
montableau[2] = 3;
montableau[3] = 4;
2. 
tableau = new Array(1,2,3,4)
3. 
tablnum = [1,2,3,4]

Les trois manières auront le même résultat.

Notez que les valeurs numériques n'ont pas à être placées entre guillemets qui sont réservés au valeurs de chaînes (objets String).
Notez aussi qu'un tableau peut contenir à la fois des données numériques et des chaînes de caractères.
untableau = ["Isabelle",44,"Yves",47]

|  Tables des matières  |  Rubrique suivante  |

Manipulation de tableaux

5. Scinder une chaîne de caractères

Il est possible de scinder ( découper ) une chaîne de caractères en pour placer chacune des parties dans un tableau. Il suffit d'utiliser la méthode split() de l'objet String.

parties = "Ceci est une chaîne".split(" ")

Le caractère placé en argument ( entre les parenthèses ) sert à indiquer où se fait la séparation. Ici, il s'agit d'un espacement. Le tableau suivant est automatiquement créé.

parties[0] contenant "Ceci"
parties[1] contenant "est"
parties[2] contenant "une"
parties[3] contenant "chaîne"

Notez que le caractère d'espacement ayant servi à la séparation n'apparaît dans aucune des chaînes crées dans le tableau parties.
Le paramètre de la fonction split() doit être une expression régulière ( ou RegExpObj pour Regular Expression Object ). Une expression régulière valide doit être soit une chaîne de caractères ( un ou plusieurs caractères placés entre guillemets ) ou une variable contenant une chaîne de caractères.

6. Joindre les parties d'un tableau en une chaîne

Il est possible de concaténer les éléments d'un tableau en utilisant la méthode join() de l'objet Array. L'argument entre parenthèses est un caractère ou une chaîne de caractères ( entre guillemets ). Si l'expression ( caractère ou chaîne ) est omis, il sera automatiquement remplacé par une virgule.

chaineOriginale = parties.join(" ")
donnera ceci :
chaineOriginale qui contient "Ceci est une chaîne"
alors que
chaineOriginale = parties.join()
donnera celà :
chaineOriginale qui contient "Ceci,est,une,chaîne"
 
Test du script :
Script Effet 
<script language="javascript" type="text/javascript">
<!--
parties = "Ceci est une cha&icirc;ne".split(" ");
document.write(parties[0] + "<br>");
document.write(parties[1] + "<br>");
document.write(parties[2] + "<br>");
document.write(parties[3] + "<br>");
document.write(parties.join() + "<br>");
document.write(parties.join(" ") + "<br>");
//-->
</script>

Notez la syntaxe HTML du caractère accentué î : &icirc;

Les manipulations de chaînes de ce types peuvent paraître inutiles puisqu'il existe déjà des fonctions ( méthodes ) de manipulations de chaînes qui font le même travail. Par contre, les méthodes split() et join() trouvent toute leur utilité lors de la cueillette d'informations provenant d'un formulaire. Mais ça, c'est un autre chapitre...

|  Tables des matières  |  Rubrique suivante  |

Le tri de données

7. Trier des tableaux contenant des valeurs de chaînes

On peut trier un tableau en utilisant la méthode sort(). Cette méthode crée un nouveau tableau dont les éléments sont triés par ordre alphabétique. J'entends par nouveau tableau que la version originale du tableau sera écrasée par la version triée. Il est donc prudent, avant de trier un tableau de déterminer si l'ordre présent dans le tableau a ou non une quelconque importance et, si oui, de faire une copie du tableau et de trier la copie plutôt que l'original. Nous verrons en détails au point 8 comment s'effectue le tri et quel effet a ce tri sur les variables de tableaux.

Considérez l'exemple suivant :

noms = new Array(4);
noms[0] = "Charles-Henri de Saint-Éleuthère";
noms[1] = "Charles Lokolm";
noms[2] = "Arlette Zébline";
noms[3] = "Prudence Ovolan";
noms_tries = noms.sort();

La dernière instruction place une copie du tableau trié noms dans le nouveau tableau noms_tries.

Test du script :
Script Effet
<script language="javascript" type="text/javascript">
<!--
noms = new Array(4); // tableau d'origine
i = 0 // indice pour la boucle for... in;

/* Intitialisation du tableau noms */
noms[0] = "Charles-Henri de Saint-Éleuthère";
noms[1] = "Charles Lokolm";
noms[2] = "Arlette Zébline";
noms[3] = "Prudence Ovolan";

/* Tri du tableau noms vers le tableau noms_tries */
noms_tries = noms.sort();

/* Affichage des données dans noms_tries */
for (i in noms_tries)
   {
   document.write(noms_tries[i] + "<br>")
   }
//-->
</script>

Je vous ai fait grâce pour cette fois de la syntaxe HTML des caractères accentués. J'ai cependant poussé une petite boucle for... in ( qui renvoie chaque indice d'une collection d'objets, ici les éléments du tableau ) et qui permet, entre autres, d'appeler chacune des données d'un tableau sans avoir à les nommer toutes systématiquement. Amusant ! non ? Remarquez aussi comment l'ajout de commentaires rend plus facile la lecture le repérage des différentes parties du code


 8. Trier des tableaux contenant des valeurs alpha-numériques

Ça se complique un peu lorsque l'on veut trier des données numériques. Comme nous l'avons vu précédemment, la méthode sort() trie alphabétiquement. Ce qui veut dire que chiffres et lettres sont traités comme des caractères. Donc, les nombres sont triés en ordre alphabétique plutôt que numérique.

Par exemple, le tableau suivant
tableau = [100,12,10]
s'il était trié avec sort()
tableau.sort()
équivaudrait à le réinitialiser comme ceci :
tableau = [10,100,12]
ce qui n'a rien à voir avec un tri numérique. Car lorsqu'on trie un tableau contenant des valeurs numériques, on s'attend à le retrouver en ordre ! N'est-ce pas ?

Avant de procéder au tri numérique, finissons-en avec le tri alphabétique. L'exemple suivant montre comment la méthode sort() fait le tri dans un tableau contenant toutes sortes de données.

Trier différentes données avec la méthode sort()
Script Effet
<script language="javascript" type="text/javascript">
<!--
/* Déclaration des variables */
donnees = new Array( ); //tableau
i = 0; //indice

/* Initialisation du tableau donnees */
donnees[0] = "Simon";
donnees[1] = "simon";
donnees[2] = "andré";
donnees[3] = "André";
donnees[4] = "_annee";
donnees[5] = " annee";
donnees[6] = "3 chiens";
donnees[7] = 30;
donnees[8] = 33;
donnees[9] = 300;

/* Tri du tableau */
enordre = donnees.sort();

/* Affichage des données de donnees */
for (i in donnees)
   {
   document.write(donnees[i] + "<br>");
   }

document.write("<br>"); //saut de ligne
i = 0; //réinitialise i

/* Affichage des données de enordre */
for (i in donnees)
   {
   document.write(enordre[i] + "<br>");
   }
//-->
</script>

Remarquez comment le tri s'est effectué et comment le tableau donnees a été modifié dans l'opération. Nous reviendront plus loin sur ce second point.

Lors du tri, les chaînes débutant avec une ou plusieures espaces1 sont placés au début ( on ne peut le voir vraiment ici puisque le navigateur supprime les espaces en début de ligne ). Viennent ensuite les chiffres. La chaîne débutant avec 3 suivi d'une espace est placé devant les autre nombres commençant par 3 puisque les nombres sont traités comme des chaînes. Ainsi, les 3 suivis de zéro(s) viennent avant les 3 suivis d'autres chiffres comme le nombre 33. Veinnent ensuite les lettres majuscules. Elles sont toutes classés avant les minuscules, i.e. Z vient avant a. Et finalement, le caractère de soulignement vient après les majuscules et avant les minuscules. On en a fini avec l'ordre de classement. Ouf !

J'ai aussi fait exprès de trier directement le tableau vers un autre tableau pour en vérifier l'effet. Comme nous l'avions vu précédemment, la méthode sort() trie bel et bien le tableau même si l'on envoie le tri vers une autre variable de tableau. L'exemple suivant montre comment le fait de copier le tableau et trier la copie permet de préserver l'ordre original des données d'un tableau.

Trier des données en préservant l'ordre original
Script modifié Effet
Voici la portion de script qu'il faut modifier
entre l'initialisation des données et l'affichage des tableaux :
/* Copie du tableau donnees vers enordre */
enordre = new Array();
for (i in donnees)
   {
   enordre[i] = donnees[i];
   }
i = 0;  //réinitialise i pour la prochaine boucle

/* Tri de enordre */
enordre.sort();

Cette fois, le tableau donnees est resté intact alors que la copie ( enordre ) a bien été triée.
Attention toutefois, vous ne pourriez copier le tableau donnees vers enordre en utilisant l'instruction
enordre = donnees
car ceci crérait une "liaison" entre les deux tableaux. Par la suite, le simple fait de trier enordre aurait pour effet de trier donnees aussi. Ce qui s'est produit dans l'exemple utilisant l'instruction
enordre = donnees.sort()
est légèrement différent. Le tableau donnees a été trié puis copié vers le tableau enordre.

 
9. Trier un tableau numérique

Pour trier numériquement un tableau, il faut passer une fonction en paramètre à la méthode sort(). En fait la fonction doit être programmée car il n'existe pas de paramètres prédéfini pour la méthode sort(). Celà permet aussi de déterminer le critère de tri selon vos propres besoins mais nécessite aussi un minimum de connaissances en programmation JavaScript.

Nous allons donc créer une fonction comparant deux à deux les éléments d'un tableau et nous en servir comme critère de tri en la passant comme argument dans la méthode sort().

function comparerNombres(a,b)
   {
   return a-b;
   }

Cette fonction est ( sauf pour le nom ) identique à la fonction que vous trouverez à la page 89 du livre JavaScript 1.5 aux éditions CampusPress. Vous la retrouverez aussi dans les références JavaScript 1.5 sur le site http://devedge.netscape.com/, à la section Array du premier chapitre, dans les explications de la méthode sort(). Voir l'adresse complète au bas de la page. Vous trouverez aussi à cette adresse, les explications détaillées sur l'ordre de tri. En anglais... Quant à la fonction qui nous occupe :

Voyons un peu ce que celà donne dans la pratique :

Script avec un tableau uniquement numérique Effet obtenu
<script language="javascript" type="text/javascript">
<!--
function comparerNombres(a,b)
   {
   return a-b;
   }
tableau = [30,10,200,4]
i = 0
tableau.sort(comparerNombres);
for (i in tableau)
   {
   document.write(tableau[i] + "<br>");
   }
//-->
</script>
 

Pour trier les tableau d'une manière alpha-numérique en respectant à la fois l'ordre alphabétique et l'ordre numérique, il faudra créer un fonction différente tenant compte du type de données contenues dans le tableau. Mais ça, c'est une autre histoire...

|  Tables des matières  |  Rubrique suivante  |

Bibliographie

Webographie

Notes diverses sans lien direct avec le texte...

1.
 Selon Le français au bureau, Guides de l'Office de la langue française
   gouvernement du Québec, 1996 :

« Le mot espace est traditionnelement du genre féminin en typographie. Dans la langue générale, au sens de " mesure de ce qui sépare deux points, deux objets ", donc aussi bien deux lettres ou deux mots, on emploie espace au masculin. »

J'aime bien la tradition en typographie. Vous avez sans doute remarqué, je crois.

Retour

|  Déclaration et initialisation  |  Manipulation  |  Tri  |  Haut de la page  |
|  Développez.com  |  L'ouèbe d'Iza  |