Javascript

Ce cours ne nécessite aucune connaissance informatique préalable, excepté celle du HTML. Le Javascript est un langage de programmation appliqué aux objets d'un document HTML.

L'objet Array


Liste des propriétés d'un tableau :

length Nombre d'élément dans le tableau
[nb] élément du tableau

Liste des méthodes de l'objet :

join() reverse() sort()

Les tableaux sont utilisé pour transmettre des données par référence aux fonctions : voir "langage - valeur/référence".


Table de données : définition et utilisation Haut de page

En Javascript, une variable est un objet. De ce fait, les notions d'objet peuvent s'appliqué sur toutes les variables ; nous pouvons donc y ajouter les méthode de conversion numérique (valueOf()) et de chaîne (toString()). Nous pouvons dire que chaque variable est un regroupement de données et de méthode,  donc un objet.

Un tableau est aussi un objet. La particularité de celui-ci, est de pouvoir indexé les éléments (propriétés)  numériquement, sans leurs données de nom. De plus, l'objet procède des méthodes propres qui lui permet de convertir la table, et de trier ses éléments.

Pour définir un tableau, vous devez déclarer une instance (variable) de l'objet tableau :

syntaxe : [var] instance = new Array( [taille | liste_d'élément] );

Lorsque vous avez créer une instance (variable) de l'objet tableau, elle possède les méthodes de l'objet tableau, et ses propres propriétés (données) Ces propriété aussi appelé élément du tableau, à l'exception de "length", peuvent être de format différent.

Pour affecté un élément d'un tableau, il suffi de l'indexer :

syntaxe : tab[ index ] = valeur ;

tab est le nom de l'instance (variable), index le numéro de l'élément (commence toujours à zéro), et valeur l'affectation.

Cette exemple nous montre quelque affectation, simple, habituelle et dangereuse : regardons le pas à pas :

En /*A*/, nous déclaration une instance Tab1 de tableau de taille 0. Nous aurions aussi pu écrire "new Array(0)" .
En /*B*/, nous affectons la chaîne 'A' à l'élément 0 du tableau "Tab1", puis en /*C*/, nous affichons le contenu du tableau Tab1.

En /*D*/, déclaration le tableau Tab2 de taille deux avec 2 éléments indéfini ; En /*E*/, nous affectations le 2ème élément du tableau Tab2, puis en /*F*/, nous affichons du contenu de Tab2.

<HTML><body><script><!--

var Tab1 = new Array();             /*A*/
Tab1[0] = 'A';                      /*B*/
document.write("Tab1=",Tab1,"<br>");//C

var Tab2 = new Array(2);    /*D*/
Tab2[1] = 25;               /*E*/
document.write("Tab2=",Tab2,"<br>");//F

var Tab3 = new Array('C','D');       /*G*/
document.write("Tab3=",Tab3,"<hr>");//H

Tab4 = Tab2;                         /*I*/
Tab4[0] = 'E';                       /*J*/

for (t=1;t<=4;t++)                   /*K*/
  {a = "Tab"+t;
   document.write(a,"=",eval(a),"<br>");
  }

//--></script></body></HTML>

En /*G*/, nous définition et affectons le tableau Tab3 avec les éléments 'C' et 'D', d'index respectivement 0 et 1 ; En /*H*/, nous affichons le contenu de Tab3.

En /*I*/, nous déclaration d'une variable de référence pointant sur les données de Tab2. Tab2 et Tab4 sont les même objet ; c'est-à-dire que toutes les données sont commun. Ainsi, l'affectation en /*J*/ est faite sur le tableau Tab2.

En /*K*/, nous affichons le contenu des quatre tableaux.

Pour plus d'information sur la méthode eval(), reportez-vous à : "langage : eval()". @@@


Table de données : ajout et troncature Haut de page

Ajouter : pour ajouter un élément dans un tableau, il vous suffit de l'indexé. Ainsi, sur un tableau de taille, pas exemple, nul, vous pouvez ajouter l'élément 25 directement en l'indexant (Ex : Tab[25] = 'coucou'). Dans ce cas, l'ensemble des éléments d'index inférieur inexistant sont créer sans affectation (undefined).

Supprimer : vous ne pouvez pas supprimer d'élément dans tableau. Cependant, vous pouvez lui affecter "undefined", se qui vous permettra de prendre connaissance de sont état. Dans le cas où cette élément serez en fin de tableau, vous pouvez tronquer l'élément pour le supprimer.

Tronquer : la propriété length n'est pas en lecture seul. De ce fait, vous pouvez la modifier pour tronquer ou agrandir un tableau. Ce procédé est fonctionnel sur IE4 et Netscape.

Dans cette exemple, nous affichons notre tableau Tab après chaque modification.

Nous commençons par déclarons le tableau Tab en lui préaffectant trois éléments de format différent, puis nous l'agrandissions à 26 élément, et nous terminons en le tronquant.

<HTML><body><script><!--

var Tab=new Array('A',1,Math);
document.write(Tab,'<br>');

Tab[25]="GOWAP";
document.write(Tab,"<br>");

Tab.length=2;
document.write(Tab,"<br>");

//--></script></body></HTML>


Tableau multidimensionnels Haut de page

L'objet Array ne nous permet pas, à première vu, de définir directement des tableaux à plusieurs dimensions. Cependant, nous pouvons très bien définir un tableau dont chacun de ces éléments seront des tableaux.

Notions mathématique : certain informaticien parle de vecteur lorsqu'il s'agie de table (tableau) à une dimension : nous noterons m, la dimension du vecteur. Définir un tableau à deux dimension revient à générer un tableau de n vecteur. Nous parlerons dans ce cas d'une matrice de dimension (n × m),  où m est la dimension du vecteur, et n le nombre d'élément vecteur contenue dans le tableau.

Notre exemple pourrait être utiliser par une entreprise pour informé sa clientèle potentiel de la tarification d'un de ces produits.

Ce tableau (fictif) contient les tarifications d'un tee-shirt à l'effigie du GOWAP :

  Homme Femme
R V B R V B
M 20 22 14 27 15 14
L 20 23 18 38 21 28
X 25 27 23 43 35 30
XL 28 30 13 40 40 40
XXL 30 33 14 53 53 53

Dans cet exemple, nous affectons directement le tableau pendant la création. Cette méthode simplifie le code, mais par forcément la lecture.

A la fin du script, la fonction "aff()" est appelé pour affecter la zone de saisie.

Chaque élément du formulaire détourne un événement, afin d'assurer la cohérence du tarif affiché.

<HTML><body>

<form NAME="f">
Sexe :
<input type=radio name=sexe
   onClick=aff(); checked>Homme
<input type=radio name=sexe
   onClick=aff();>Femme<br>
Taille
<select onChange=aff(); name=taille
size=1 ><option>M<option>L<option>X
<option selected>XL<option>XXL</select>
Couleur
<select onChange=aff(); name=couleur
size=1><option>Rouge<option>Vert
<option>Bleu</select><br>

Prix de l'article à ce jours
<input type=text name=prix>
</form>

<script LANGUAGE="JavaScript"><!--
var radio;
var tab =  new Array(
  new Array( new Array(20,20,25,28,30),
             new Array(22,23,27,30,33),
             new Array(14,18,23,13,14)),
  new Array( new Array(27,38,43,40,53),
             new Array(15,21,35,40,53),
             new Array(14,28,30,40,53)));

function aff()
{
  obj = document.f;
  for (var t=0;t<obj.sexe.length;t++)
    if (obj.sexe[t].checked)radio=t;
  obj.prix.value=tab[radio]
       [obj.couleur.selectedIndex]
       [obj.taille.selectedIndex]+" FF";
}

aff();

// --></script></body></HTML>

Pour plus d'information sur les boutons radio, reportez-vous à "formulaire - radio".


Autre Haut de page

Pour d'autres information sur l'affectation et l'utilisation d'un tableau, reportez-vous à : "langage - tableau". Les tableau sont aussi utilisés pour transmettre des arguments par référent : "langage - valeur/référence".


Array - length Haut de page

Un objet tableau est un regroupement d'élément (objet) accessible par indexage numérique.

Cette propriété nous indique le nombre d'élément contenue dans ce tableau.
Le première élément du tableau est indexé par le nombre zéro (0).
<HTML><body><script><!--

var Tab = new Array('A','B','C');
document.write(Tab,'<hr>');

for (t in Tab)
  document.write(t,' = ',Tab[t],'<br>');

//--></script></body></HTML>


Array - join(séparateur) Haut de page
Cette méthode retourne une même chaîne de caractère contenant l'ensemble des éléments du tableau, séparé par le séparateur.

A défaut de spécification, la virgule est utilisé comme séparateur.

<HTML><body><script><!--

var Tab = new Array('A','B','C');

document.write(Tab.join(),"<hr>");
document.write(Tab.join("#"));

//--></script></body></HTML>


Array - reverse() Haut de page
Cette méthode inverse les éléments d'un tableau
Ce n'est pas un nouveau tableau : seul l'indexage est modifié.
<HTML><body><script><!--

var Tab = new Array('A','B','C');

document.write(Tab,"<hr>");
document.write(Tab.reverse(),"<hr>");
document.write(Tab);

//--></script></body></HTML>


Array - sort([fonction_ordre]) Haut de page

Cette fonction trie les éléments d'un tableau selon l'ordre spécifier par la fonction, ou par ordre alphanumérique (numérique ou alphabétique) à défaut de spécification.

La fonction "fonction_ordre" reçoit deux arguments, et doit retourner une valeur positive, nul ou négative respectivement si l'ordre est correct, équivalent, mauvais.
<HTML><body><script><!--

function trier(a,b)
{return (a < b)?1:-1;}

var Tab = new Array('B','A','C');

document.write(Tab,"<hr>");
document.write(Tab.sort(),"<hr>");
document.write(Tab.sort(trier));

//--></script></body></HTML>


Dernière mise à jour : dimanche 06 janvier 2008