Javascript

 |
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 :
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 :
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 :
Ensuite, on déclare chaque élément du
tableau comme un tableau à 1 dimension :
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 :
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> |

|