L'objet Array

L'objet Array (ou tableaux) est une liste d'éléments indexés dans lesquels on pourra ranger (écrire) des données ou aller reprendre ces données (lire).

Attention ! L'objet Array est du Javascript 1.1

Pour faire un tableau, il faut procéder en deux étapes :

• d'abord construire la structure du tableau. A ce stade, les éléments du tableau sont vides.
• ensuite affecter des valeurs dans les cases ainsi définies.

On commence par définir le tableau :

nom_du_tableau = new Array (x);

où x est le nombre d'éléments du tableau.

On notera que, "le nombre d'éléments est limité à 255. Cette restriction ne figure pas dans la documentation de Netscape mais elle a été constatée expérimentalement." Source : Javascript de Michel Dreyfus Collection Mégapoche.

Ensuite, on va alimenter la structure ainsi définie :

nom_du_tableau[i] = "elément";

où i est un nombre compris entre 0 et x moins 1.

Exemple : un carnet d'adresse avec 3 personnes

construction du tableau :
carnet = new Array(3);

ajout des données :
carnet[0]="Dupont";
carnet[1]="Médard";
carnet[2]="Van Lancker";

pour accéder un élément, on emploie :
document.write(carnet[2]);

On notera ici que les données sont bien visibles au lecteur un peu initié (view source).

Remarques :

• Quand on en aura l'occasion, il sera pratique de charger le tableau avec une boucle. Supposons que l'on ait à charger 50 images. Soit on le fait manuellement, il faut charger 0.gif, 1.gif, 2.gif... Soit on utilise une boucle du style :
  function gifs() {
  gif = new Array(50);
  for (var=i;i<50;i++)
  {gif[i] =i+".gif";}
  }
  
• Javascript étant un langage peu typé, il n'est pas nécessaire de déclarer le nombre d'élément du tableau (soit x). Javascript prendra comme nombre d'éléments, le nombre i le plus élevé lors de "l'alimentation" de la structure (en fait i + 1).Ainsi la formulation suivante serait aussi correcte pour un tableau à 3 dimensions.
  carnet = new Array();
  carnet[2]="Van Lancker";

Dans le cadre de notre exemple,

document.write(carnet.join()); donne comme résultat : Médard,Dupont,Van Lancker.
document.write(carnet.join("-")); a comme résultat : Médard-Dupont-Van Lancker.
document.write(carnet.reverse().join("-")); donne : Van Lancker-Dupont-Médard

On peut créer des tableaux à deux dimensions (et plus encore) par un petit artifice de programmation.

On déclare d'abord un tableau à 1 dimension de façon classique :

nom_du_tableau = new Array (x);

Ensuite, on déclare chaque élément du tableau comme un tableau à 1 dimension :

nom_du_tableau[i] = new Array(y);

Pour un tableau de 3 sur 3 :

nom = new Array(3);
nom[0] = new Array(3);
nom[1] = new Array(3);
nom[2] = new Array(3);
nom[0][0]="1200"; nom[0][1]="1250"; nom[0][2]="1300";
nom[1][0]="800"; nom[1][1]="850"; nom[1][2]="900";
nom[2][0]="500"; nom[2][1]="520"; nom[2][2]="540";

Pour exploiter ces données, voici une illustration de ce qui est possible :

Le formulaire s'écrit :

<FORM name="form" >
<SELECT NAME="liste">
<OPTION>Chemises
<OPTION>Polos
<OPTION>T-shirts
</SELECT>
<SELECT NAME="taille">
<OPTION>T. Small
<OPTION>T. Médium
<OPTION>T. Large
</SELECT>
<INPUT TYPE="button" VALUE="Donner le prix" onClick="affi(this.form)">
<INPUT TYPE="TEXT" NAME="txt">
</FORM>

où la fonction affi() se formule comme suit :

function affi() {
i = document.form.liste.selectedIndex;
j= document.form.taille.selectedIndex
document.form.txt.value=nom[i][j];
}

Que voilà un titre ronflant ! Si Javascript peut stocker des données et présenter celles-ci selon les souhaits du client, on est quand même très loin des outils spécifiques pour ce genre de travail.
Vos bases de données en Javascript seront toujours de type statique et surtout d'un encodage laborieux.

Jusqu'à présent, nous n'avions défini que quelques caractères dans les éléments des tableaux. Dans les strings, on peut en mettre beaucoup et surtout avec les outils de manipulation des strings de Javascript, on pourra stocker des choses du genre :
AFLAURENT*9 place de la Nation*75011*Paris*France*
Soit dans le cas présent, 6 données.

C'est ce que nous détaillons ci-après.

Reprenons notre exemple de carnet d'adresse. De façon classique, on doit prévoir les différents champs et le nombre de positions consacrées à chaque champ. Soit par exemple :

Chaque enregistrement devra respecter ce nombre de positions prédéterminées. Les positions surnuméraires devront être complétées avec des blancs. Avec un risque d'erreur élevé à l'encodage et un temps de chargement de la page sensiblement augmenté pour finalement ne transmettre que des espaces vides.

Pour reprendre les différentes données, on utilisera l'instruction substring(x,y). Ainsi :

Le principe est d'ajouter un séparateur entre chaque champ. On demandera à Javascript de retirer les caractères compris entre deux séparateurs.

Avec le séparateur *, les données deviennent :
str="AFLAURENT*9 place de la Nation*75011*Paris*France*"
soit 60 positions au lieu de 80 soit un gain de 25 % (mais l'échantillon n'est pas représentatif).

Pour lire ces différentes données, on va procéder en plusieurs étapes :

• Par pos=str.indexOf("*"), on note la position dans le string du premier séparateur rencontré.
• Par str.substring(0,pos), on aura la première donnée comprise entre le début du string (position 0) et la position moins 1 du séparateur soit ici Van Lancker.
• Par str=str.substring(pos+1,str.length), on recrée un string correspondant au string de départ moins la donnée partielle que l'on vient d'extraire moins un séparateur. Ce qui donne :
  str="AFLAURENT*9 place de la Nation*75011*Paris*France*"
• Et ceci, par une boucle, autant de fois qu'il y a de séparateurs mois 1.

Pour stocker des données, le moyen le plus pratique pour stocker des données est le contrôle de formulaire Hidden (caché) plutôt que le string.

Pourquoi, me direz vous ? Bien qu'avec des string cela fonctionne, on risque de buter sur la limitation de longueur des strings en Javascript de, selon la littérature, 50 à 80 caractères. Ce qui entraîne l'emploi de signes + et de la concatenation des données pour qu'elles soient acceptées par le compilateur Javascript.

Le contrôle de formulaire Hidden n'est quand à lui pas sujet à cette limitation de caractères. On peut y stocker 30 K (et plus) de données. Il suffira alors d'entrer dans de contrôle de formulaire Hidden l'attribut value="les données à stocker".

Le script complet sera quelque chose du genre :

<HTML>
<BODY>
<FORM name="form">
<INPUT type=hidden name="data" value="AFLAURENT*9 place de la Nation*75011*Paris*France*">
</FORM>
<SCRIPT LANGUAGE="javascript">
str=document.form.data.value; // on extrait le string du contrôle caché
nsep=6 // nombre de séparateurs
for (var i=0;i<nsep;i++){
pos=str.indexOf("*");
document.write(str.substring(0,pos)+ "<BR>");
str=str.substring(pos+1,str.length);
}
</SCRIPT>
</BODY>
</HTML>