Chapitre 9 L'objet Array puis les frames...
9.1 Tableau à une dimension
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ément du tableau. On notera que
généralement le nombre d'éléments est limité
à 255. 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. La construction du tableau : carnet = new
Array(3);. L'ajout des données : carnet[0]="Pierre"; carnet[1]="Paul";
carnet[2]="Marie";Pour accéder ensuite à un
élément : document.write(carnet[2]);
Parfois, il sera pratique de charger
le tableau avec une boucle. Supposons que l'on ait à charger 30 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(30);
for (var=i;i<30;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).
9.2 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 : Pierre, Paul, Marie.
document.write(carnet.join("-")); a comme
résultat : Pierre-Paul-Marie.
document.write(carnet.reverse().join("-")); donne :
Marie-Paul-Pierre.
9.3 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 : 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];
}
9.4 Généralités sur les
frames
Utiliser des frames vous permet de
diviser la fenêtre affichant votre page HTML en plusieurs cadres
indépendants les uns des autres. Vous pouvez alors charger des pages
différentes dans chaque cadre. En Javascript, nous nous
intéresserons à la capacité de ces cadres à
interagir. C'est à dire à la capacité d'échanger
des informations entre les frames. En effet, la philosophie du HTML veut que
chaque page composant un site soit une entité indépendante.
Comment pourrait-on faire alors pour garder des informations tout au long du
site ou tout simplement passer des informations d'une page à une autre
page. Tout simplement en utilisant des frames.
9.5 Propriétés
|
Propriétés |
Description |
|
|
|
length |
Retourne le nombre de frames
subordonnés dans un cadre "créateur". |
|
parent |
Synonyme pour le frame
"créateur". |
9.6 Echange d'informations entre frames
Par l'exemple suivant, nous allons
transférer une donnée introduite par l'utilisateur dans une
frame, dans une autre frame.
La page "créatrice" des frames qui contient
deux frames subordonnées "enfant1" et "enfant2" :
<HTML>
<HEAD>
</HEAD>
<FRAMESET ROWS="30%,70%">
<FRAME SRC="enfant1.htm" name="enfant1">
<FRAME SRC="enfant2.htm"
name="enfant2">
</FRAMESET>
</HTML>
Le fichier enfant1.htm :
<HTML>
<BODY>
<FORM name="form1">
<INPUT TYPE="TEXT" NAME="en" value="
">
</FORM>
</BODY>
</HTML>
Le fichier enfant2.htm :
<HTML>
<HEAD>
<SCRIPT LANGUAGE="Javascript">
<!--
function affi(form) {
parent.enfant1.document.form1.en.value=document.form2.out.value
}
//
-->
</SCRIPT>
</HEAD>
<BODY>
Entrez une
valeur et cliquez sur "Envoyer".
<FORM NAME="form2" >
<INPUT
TYPE="TEXT" NAME="out">
<INPUT TYPE="button" VALUE="Envoyer"
onClick="affi(this.form)">
</FORM>
</BODY>
</HTML>
La donnée entrée par
l'utilisateur se trouve par le chemin document.form2.out.value. Nous allons transférer
cette donnée dans la zone de texte de l'autre frame. Pour cela, il faut
en spécifier le chemin complet. D'abord la zone de texte se trouve dans
la frame subordonnée appelée enfant1. Donc le chemin commence par
parent.enfant1. Dans cette frame se trouve un document qui contient un
formulaire (form1) qui contient une zone de texte (en) qui a comme
propriété value. Ce qui fait comme chemin
document.form1.en.value. L'expression complète est bien :
parent.enfant1.document.form1.en.value=document.form2.out.value. |
