Javascript
L'objet Array
Home

Généralités

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

Tableau à une dimension

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";

Propriétés et méthodes
 
Elément Description
length Retourne le nombre d'éléments du tableau.
join() Regroupe tous les éléments du tableau dans une seule chaîne.
Les différents éléments sont séparés par une caractère séparateur spécifié en argument. Par défaut, ce séparateur est une virgule.
reverse() Inverse l'ordre des éléments (ne les trie pas).
sort() Retourne les éléments par ordre alphabétique (à condition qu'ils soient de même nature)

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

Tableau à deux dimensions

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 :

Tarif

T. Small

T. Médium

T. Large

Chemises
1200
1250
1300
Polos
800
850
900
T-shirts
500
520
540

    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 :

Choix de l'article :
Choix de la taille :


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];
}

Base de données

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 :
Van Lancker*Luc*Rue des brasseurs, 22*7700*Mouscron*Belgium*
Soit dans le cas présent, 6 données.

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

  Encodage de type fixe

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 :

Nom
Prénom
Adresse
Code postal
Ville
Pays
20 positions
10 positions
20 positions
10 positions
10 positions
10 positions

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.

Nom
sur 20 p.
Prénom
sur 10 p.
Adresse
sur 20 p.
Poste
sur 10 p.
Ville
sur 10 p.
Pays
sur 10 p.
Van Lancker Luc Rue des Brasseurs 7700 Mouscron Belgium

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

Nom
Prénom
Adresse
Code postal
Ville
Pays
substring(0,19)
substring(20,29)
substring(30,49)
substring(50,59)
substring(60,69)
substring(70,79)

  Encodage de type variable

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="Van Lancker*Luc*Rue des brasseurs, 22*7700*Mouscron*Belgium*"
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="
    Luc*Rue des brasseurs, 22*7700*Mouscron*Belgium*"
  • 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="Van Lancker*Luc*Rue des brasseurs, 22*7700*Mouscron*Belgium*">
</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>


Home