SELFHTML/Aides à la navigation JavaScript/DOM Référence objet| SELFHTML/Aides à la navigation JavaScript/DOM Référence objet |
 |
Array |
|
Propriétés:
Méthodes:
|
 | |
L'objet Array est conçu comme "conteneur" pour des chaînes de variables de même nature. Dans le langage de programmation on parle également d'un "tableau". Si par exemple vous voulez sauvegarder les 16 couleurs de base, vous n'avez pas besoin de 16 variables mais d'un objet Array dans lequel vous pouvez sauvegarder 16 valeurs de même nature (dans l'exemple: valeurs de couleur)
nom_objet = new Array(); mes_femmes = new Array(); |
nom_objet = new Array(nombre); mes_femmes = new Array(100); |
nom_objet = new Array(Element0, Element1, ..., element_n);
mes_femmes = new Array("Annie","Estelle","Francine","Carole"); |
Vous sauvegardez une instance objet de Array dans un nom que vous attribuez vous même. Derrière le nom est placé un signe égal à la suite duquel est placé le mot réservé new et l'appel de la fonction objet Array().
Utilisez le schéma 1 si vous ne savez pas encore au moment de la définition combien d'éléments doivent être stockés dans le tableau de variables.
Utilisez le schéma 2 si vous savez déjà au moment de la définition combien d'éléments doivent être stockés dans le tableau de variables. Vous pouvez transmettre le nombre d'éléments à la fonction objet comme paramètre..
Utilisez le schéma 3, pour remplir tout de suite le tableau de variables avec des valeurs de départ. Pour les variantes 1 et 2 les différentes variables du tableau restent vides jusqu'à ce que dans le cours du programme une valeur leur soit attribuée.
Après avoir créé une instance de l'objet Array, vous pouvez l'utiliser dans votre code JavaScript.
<html><head><title>Test</title> <script type="text/javascript"> <!-- nombres = new Array(34,86,167,413); var x = nombres[1]; alert(x); //--> </script> </head><body> </body></html> |
Après avoir sauvegardé une instance de l'objet Array dans un nom (dans l'exemple le nom nombres), vous pouvez comme il est montré dans la deuxième ligne, adresser les différentes valeurs dans le tableau de variables. Dans l'exemple est définie une variable usuelle x. Est affectée à cette variable la valeur de la deuxième variable du tableau, donc 86. Pensez à ce que le compteur commence à 0, c'est à dire que vous adressez la première valeur du tableau dans l'exemple avec nombres[0] la deuxième avec nombres[1] etc...
Vous pouvez également créer des tableaux à plusieurs dimensions.
<html><head><title>Test</title> <script type="text/javascript"> <!-- var a = new Array(4) for (var i=0; i < a.length; ++i) a[i] = new Array(10); a[3][1] = "Hello"; alert(a[3][1]); //--> </script> </head><body> </body></html> |
L'exemple définit dans un premier temps un tableau a à 4 éléments. Ensuite, dans une 
boucle for, est défini pour chacun de ces éléments un nouveau tableau, où pour chaque tableau 10 éléments vides sont créés. Enfin vous pouvez, par une mention telle que a[3][1], adresser le deuxième élément (1) dans le quatrième tableau (3). Dans l'exemple, cet élément se voit affecter la valeur Hello. Pour le contrôle, la valeur est sortie dans une boite de dialogue.
 |
tableaux associatifsLes tableaux associatifs sont des tableaux dans lesquels l'accès aux différents éléments se fait à l'aide d'une chaîne de caractères. La chaîne de caractères est considérée comme clé pour l'accès. Tous les objets JavaScript, qui possèdent une propriété name ou id, comme par exemple les objets forms ou bien elements, représentent pour JavaScript des tableaux associatifs.
Les tableaux associatifs sont particulièrement indiqués en relation avec des tableaux à plusieurs dimensions. Ils permettent, indépendamment de la position, de rechercher la valeur d'un élément. L'inconvénient en est que les méthodes de l'objet Array ne lui sont pas applicables. De même les tableaux associatifs ne connaissent-ils pas la propriété length. Les éléments d'un tableau associatif ne peuvent toujours être adressés qu'avec leur nom ou par une boucle for-in.
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!--
var employe=new Array();
employe[0] = new Array();
employe[0]["nom"] = "Descartes";
employe[0]["prenom"] = "Jean";
employe[0]["residence"]= "Cahors";
employe[1]=new Array()
employe[1]["nom"] = "Amora";
employe[1]["prenom"] = "Celeste";
employe[1]["residence"]= "Dijon";
for (var i=0;i<employe.length;i++)
{
document.write("<dl><dt>employe "+(i+1)+"<\/dt>");
for (var propriete in employe[i])
document.write("<dd>"+ propriete + ": "+employe[i][propriete]+"<\/dd>");
document.write("<\/dl>");
}
//-->
</script>
</body></html>
|
L'exemple définit un tableau employe. Ce tableau comprend deux éléments. Chacun de ces éléments représente lui-même un tableau. Il s'agit cependant ici de tableaux associatifs, car comme clé sont employés les termes nom, prenom et residence. À chacun de ces éléments est attribuée une valeur correspondante.
La boucle for qui suit sert à sortir les éléments du tableau employe et leurs propriétés respectives. Après le début de la boucle for le commencement d'une liste de définition est d'abord écrit dans le document avec la méthode write en mentionnant le numéro d'ordre de l'employé. Ce qui correspond à la position dans le tableau augmentée de un, étant donné que pour les éléments de tableau, le comptage commence à 0. Enfin est appelée une autre boucle intérieure. Étant donné qu'il est accédé ici à un tableau associatif, une boucle for in est employée. Cette boucle parcourt chaque index du tableau associatif adressé et écrit sa propriété et la valeur correspondante dans le document. Quand la boucle for-in est terminée, la liste de définitions est également fermée pour parcourir le prochain élément du tableau employe.
|
|
lengthSauvegarde le nombre d'éléments d'un tableau. Pensez que tous les objets JavaScript ayant une propriété length comme par exemple les objets forms ou elements, représentent des tableaux pour JavaScript.
<html><head><title>Test</title> <script type="text/javascript"> <!-- var nombres = new Array(1,2,4,8,16,32,64,128,256); alert(nombres.length + " nombres sont définis"); //--> </script> </head><body> </body></html> |
L'exemple définit un tableau comportant 9 nombres. Ensuite est sorti pour le contrôle, le nombre d'éléments contenus dans le tableau.
|
|
concat()Concatène un tableau à un autre. Attend comme paramètre le nom de le tableau à concaténer. Renvoie le tableau résultant de la concaténation. Vous pouvez aussi transmettre plusieurs tableaux comme paramètre à la méthode.
<html><head><title>Test</title> <script type="text/javascript"> <!-- var nombres = new Array(1,2,3); var autres_nombres = new Array(10,20,30); total_nombres = nombres.concat(autres_nombres); alert(total_nombres.length); //--> </script> </head><body> </body></html> |
L'exemple définit dans un premier temps deux tableaux nombres et autres_nombres, contenant chacun trois nombres, puis une variable total_nombres dans laquelle est sauvegardée enfin la valeur renvoyée par concat(): celle-ci est employée sur le premier tableau défini nombres en concaténant le deuxième tableau autres_nombres. Pour le contrôle, le nombre total des éléments de total_nombres est sorti. Ce tableau contient maintenant les valeurs 1,2,3,10,20,30 - et a de ce fait 6 éléments.
La méthode concat() génère diverses références sur les tableaux qui lui sont transmis. Si dans les tableaux à concaténer, un objet est sauvegardé, alors une espèce de pointeur sera sauvegardé dans le tableau venant d'être créé. Ce qui signifie que si cet objet est modifié, le tableau créé par la méthode concat() est également modifié. Si pourtant des nombres et des chaînes de caractères sont contenus dans les tableaux concaténés, une copie de ces valeurs est créée. Des modifications ultérieures n'auront alors aucune influence sur le tableau créé par la méthode concat().
<html><head><title>Test</title>
<script type="text/javascript">
<!--
var nombres=new Array(1,2);
var plus_de_nombres = new Array(nombres,3,4);
var autres_nombres = new Array(5,6,7);
total_nombres = plus_de_nombres.concat(autres_nombres);
alert(total_nombres);
nombres[0]=70;
alert("nombres: " +nombres);
autres_nombres[0]=70;
alert("autres_nombres: " +autres_nombres);
alert("total_nombres: " +total_nombres);
//-->
</script>
</head><body>
</body></html>
|
Dans l'exemple, trois tableaux ont été définis. Le premier élément du tableau plus_de_nombres est ici le tableau nombres. Ce faisant, un objet du type Array est sauvegardé dans le tableau plus_de_nombres. Avec la méthode concat() est concaténé au tableau plus_de_nombres le tableau autres_nombres. Dans la variable total_nombres est alors sauvegardé un tableau avec les éléments 1,2,3,4,5,6,7.
Dans la partie script qui suit, les premiers éléments des tableaux nombres et autres_nombres reçoivent chacun la valeur 70. Les deux tableaux sont d'ailleurs effectivement modifiés, comme le montre la sortie pour contrôle dans une boite de dialogue. Dans le tableau total_nombres créé par la méthode concat() sont maintenant sauvegardées les valeurs 70,2,3,4,5,6,7 . La dernière fenêtre de dialogue le montre. La modification du tableau nombres a donc été prise en compte, la modification du tableau autres_nombres par contre ne l'a pas été. La raison en est que le tableau nombres était contenu en tant qu'objet dans le tableau plus_de_nombres et que pour cette raison, chaque modification est prise en compte. Les valeurs du tableau autres_nombres étaient par contre du type nombre, et une copie en a été faite. Ses modifications ultérieures restent donc sans effet.
|
|
join()Transforme un tableau en chaîne de caractères. Attend comme paramètre un ou plusieurs signes de séparation par lequel/lesquels les éléments du tableau doivent être séparés dans la chaîne de caractères.
<html><head><title>Test</title>
<script type="text/javascript">
<!--
var nombres = new Array(1,2,4,8,16,32,64,128,256);
var chaine_nombres = nombres.join(" ");
alert(chaine_nombres);
//-->
</script>
</head><body>
</body></html>
|
L'exemple définit un tableau avec 9 nombres. Ensuite, la méthode join est appliquée à la variable nombres, dans laquelle le tableau est sauvegardé. Ce faisant, un espace a été transmis comme paramètre dans l'exemple. La valeur renvoyée par la procédure est stockée dans la variable chaine_nombres. Le résultat en est que tous les nombres définis se trouvent dans chaine_nombres et sont alors séparés les uns des autres par des espaces. Pour le contrôle, le résultat et sorti dans une boite de dialogue.
|
|
pop()Retire le dernier élément d'un tableau et modifie ainsi le nombre d'éléments dans le tableau. La valeur retournée par la méthode est le contenu de l'élément effacé.
<html><head><title>Test</title>
<script type="text/javascript">
<!--
var nombres = new Array(1,2,3,4,5);
alert(nombres.length + " nombres dans le tableau");
function retirer()
{
nombres.pop();
alert(nombres.length + " nombres dans le tableau");
}
//-->
</script>
</head><body>
<a href="javascript:retirer()">retirer un nombre</a>
</body></html>
|
L'exemple définit à la lecture du fichier un tableau nombres avec 5 éléments. Pour le contrôle, le nombre d'éléments est sorti dans une boite de dialogue. Dans le corps de fichier de l'exemple est défini un lien qui lorsqu'on le clique appelle la fonction retirer(), qui à chaque fois retire avec la méthode pop() le dernier élément du tableau nombres. Pour le contrôle, la nouvelle longueur du tableau est sortie.
Pour les navigateurs qui ne connaissent pas la méthode pop(), vous pouvez retirer le dernier élément en affectant au tableau une nouvelle taille, par exemple avec nombres.length=nombres.length-1.
|
|
push()Ajoute un ou plusieurs éléments à la fin d'un tableau. Attend comme paramètre un ou plusieurs éléments à ajouter. Renvoie dans la version JavaScript 1.2 le dernier élément (le plus récent), dans les dernières versions de JavaScript par contre. c'est la taille du tableau qui est renvoyée.
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!--
var lieux = new Array("Angoulême");
document.write(lieux.join(",") + '<p>');
var element_plus_recent = lieux.push("Paris");
document.write(lieux.join(",") + '<br>');
document.write('Lieu le plus récent: ' + element_plus_recent + '<p>');
var element_plus_recent = lieux.push("Marseille","Lyon","Lille","Bordeaux");
document.write(lieux.join(",") + '<br>');
document.write('Élément le plus récent: ' + element_plus_recent);
//-->
</script>
</body></html>
|
L'exemple crée, dans un JavaScript noté dans le corps de fichier, un tableau lieux, dans lequel on ne sauvegarde d'abord qu'une valeur - à savoir: Angoulême. Pour le contrôle, le contenu est écrit dans le fichier avec la méthode write(). Ensuite, on ajoute un élément au tableau avec la méthode push() - à savoir Paris. La valeur retournée par l'opération est sauvegardée dans la variable element_plus_recent. Pour le contrôle, le tableau ainsi étendu et la valeur renvoyée sont écrits dans le fichier. Le tableau est maintenant constitué des éléments Angoulême et Paris. L'élément le plus récent est Paris. Ensuite sont ajoutés selon le même schéma quatre nouveaux éléments dans le tableau. Suite à quoi, le tableau comprend ensuite, outre les deux villes déjà vues, les quatre nouvelles. Dans la variable element_plus_recent n'est cependant sauvegardé que le dernier, le plus récent des éléments. Dans l'exemple c'est Bordeaux. Pour le contrôle ces processus sont aussi écrits dans le fichier.
Pour les navigateurs qui ne connaissent pas la méthode push(), vous pouvez ajouter un nouvel élément en élargissant le tableau , par exemple avec nombres[nombres.length]="valeur"
|
|
reverse()Inverse l'ordre des éléments à l'intérieur d'un tableau. Le premier élément est ensuite le dernier, le dernier devient le premier.
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!--
var nom = new Array("S","E","R","G","E");
nom.reverse();
document.write(nom.join(""));
//-->
</script>
</body></html>
|
L'exemple définit un tableau nom dont les éléments sont constitués des différentes lettres du nom Serge. Ensuite, la méthode reverse() est appliquée sur ce tableau. À l'aide de la méthode join() le tableau est enfin écrit dans le fichier avec le nouvel ordre de ses éléments. Il y est écrit de telle sorte qu'aucun signe ne figure entre ses éléments (ce qui s'obtient par une chaîne de caractères vide "" pour join(). Le résultat en est que le nom Serge est écrit à l'envers dans le fichier.
|
|
shift()Retire le premier élément d'un tableau. Les éléments qui suivent sont déplacés vers l'avant en conséquence. Celui qui était deuxième élément jusqu'alors devient premier etc. Retourne l'élément retiré.
<html><head><title>Test</title>
<script type="text/javascript">
<!--
var nombres = new Array(1,2,3,4,5);
alert("Premier nombre dans : " + nombres[0]);
function retirer()
{
var element_efface = nombres.shift();
alert("Premier nombre dans le tableau: " + nombres[0]);
}
//-->
</script>
</head><body>
<a href="javascript:retirer()">retirer un nombre</a>
</body></html>
|
L'exemple définit à la lecture du fichier un tableau nombres avec 5 éléments. Pour le contrôle, la valeur du premier élément est sortie dans une boite de dialogue, dans l'exemple 1. Dans le corps du fichier, l'exemple contient un lien qui, lorsqu'on le clique, appelle la fonction retirer(), qui retire le premier élément du tableau nombres avec la méthode shift(). Pour le contrôle, le nouveau premier élément est sorti.
|
|
slice()Extrait une partie d'un tableau. Attend comme paramètre le numéro d'index du premier et du dernier élément à extraire. Le numéro d'index pour le dernier élément peut également être une valeur négative. Ce qui signifie à peu près "l'élément n° tant en partant de la fin", où là aussi on commence à compter à partir de 0. Une valeur de -1 signifie donc l'avant dernier élément.
La méthode renvoie les éléments extraits sous forme de nouveau tableau.
<html><head><title>Test</title>
<script type="text/javascript">
<!--
var nombres = new Array(1,2,3,4,5);
for(var i = 0; i < nombres.length; ++i)
{
var nouveaux_nombres = nombres.slice(i,nombres.length);
alert(nouveaux_nombres.join(","));
}
//-->
</script>
</head><body>
</body></html>
|
L'exemple définit un tableau nombres avec 5 éléments. Ensuite, une boucle for est notée. La boucle compte de 0 à 4. Dans la boucle, à chaque tour, le résultat de nombres.slice(i,nombres.length) est sauvegardé dans un nouveau tableau nommé nouveaux_nombres. Le compteur de boucles i y est le numéro d'index du premier élément à extraire. Le dernier élément à extraire est mentionné dans l'exemple par nombres.length (ce qui n'est à vrai dire pas tout à fait correct étant donné que le nombre d'éléments est plus élevé de 1 que l'index du dernier élément - Netscape interprète pourtant correctement de cette façon, l'Explorer Internet MS 4 interprète par contre plus conformément aux attentes; là il faut travailler avec nombres.length-1). Par les mentions tous les éléments depuis l'élément i jusqu'au dernier élément sont extraits. Étant donné que i est incrémenté à chaque passage de boucle, il y aura dans l'exemple de moins en moins de chiffres extraits, à savoir toujours les derniers du tableau.
La méthode slice() génère diverses références sur les tableaux qui lui sont transmis. Si dans les tableaux à concaténer, un objet est sauvegardé, alors une espèce de pointeur sera sauvegardé dans le tableau venant d'être créé. Ce qui signifie que si cet objet est modifié, le tableau créé par la méthode slice() est également modifié. Si pourtant des nombres et des chaînes de caractères sont contenus dans les tableaux concaténés, une copie de ces valeurs est créée. Des modifications ultérieures n'auront alors aucune influence sur le tableau créé par la méthode slice().
Dans sa façon de référencer, la méthode slice() se comporte exactement comme la méthode concat().
|
|
splice()Ajoute un ou plusieurs nouveaux éléments dans un tableau et cela à un certain endroit choisi. Écrase en le faisant des éléments existants. Attend les paramètres suivants:
1. index départ = numéro d'index dans le tableau auquel le ou les nouveaux éléments doivent être insérés.
2. nombre = nombre d'éléments à insérer.
3.[4...] élément[s] = nouveaux éléments.
Le troisième et les paramètres suivants sont facultatifs. En ne mentionnant que les deux premiers paramètres des éléments vides seront insérés.
<html><head><title>Test</title>
<script type="text/javascript">
<!--
var nombres = new Array(1,2,3);
nombres.splice(1,3,4,5,6);
alert(nombres.join(","));
//-->
</script>
</head><body>
</body></html>
|
L'exemple définit un tableau nombres, comprenant 3 éléments avec les nombres 1 à 3. Ensuite, la méthode splice() est appliquée, et ce de la façon suivante: au numéro d'index 1 (donc au deuxième chiffre du tableau) 3 nouveaux éléments sont insérés - à savoir les éléments avec les valeurs 4, 5 et 6. Les éléments précédents avec les valeurs 2 et 3 sont écrasés avec les valeurs 4 et 5. L'élément avec la valeur 6 est ajouté. À l'issue, le tableau contient donc 4 éléments avec les valeurs suivantes: 1,4,5,6.
|
|
sort()Trie les éléments d'un tableau. Si vous ne transmettez aucun paramètre, le tri se fait alphabétiquement, les valeurs numériques sont transformées automatiquement en chaînes de caractères, et triées en tant que telles. De ce fait le nombre 13, par exemple, est placé avant le nombre 7, parce qu'alphabétiquement "13", comme chaîne de caractères, vient avant 7. Si vous voulez trier des valeurs numériques, vous pouvez définir une fonction de comparaison et transmettre son nom comme paramètre.
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!--
function tri_nombres(a,b)
{ return a-b; }
var noms = new Array("Thérèse","Noémie","Carole","Séverine");
noms.sort();
var nombres = new Array(27,2,10,4);
nombres.sort(tri_nombres);
var sortie_noms = noms.join(",");
var sortie_nombres = nombres.join(",");
document.write("Noms triés: " + sortie_noms + "<br>");
document.write("Nombres triés: " + sortie_nombres);
//-->
</script>
</body></html>
|
L'exemple montre comment trier des chaînes de caractères et des valeurs numériques. Dans l'exemple est défini un tableau noms dont les éléments représentent des chaînes de caractères. Pour trier un tel tableau, il suffit simplement d'appliquer la méthode sort() sur le tableau. Les éléments du tableau sont alors triés à nouveau alphabétiquement. Pour trier des nombres vous avez besoin d'une simple fonction de comparaison. À cet effet, vous pouvez utiliser la fonction tri_nombres() définie dans l'exemple. L'exemple définit un tableau nombres et applique la méthode sort() sur ce tableau en transmettant comme paramètre le nom de la fonction tri_nombres. Ainsi les éléments du tableau sont triés dans l'ordre numérique.
La fonction tri_nombres() régit comment deux éléments doivent être triés. Elle possède les paramètres a et b. Pendant le processus de tri, la fonction est appelée avec respectivement deux éléments du tableau. La valeur retournée est un nombre qui peut être plus petit, plus grand ou égal à 0. Ce nombre résulte de la différence entre les deux paramètres. Si la valeur renvoyée par tri_nombres() est plus grande que 0, alors cela signifie que le paramètre a a un index plus élevé que le paramètre b. Dans l'ordre du tri, b vient ainsi avant a. Si la valeur renvoyée par tri_nombres() est plus petite que 0, alors cela signifieque le paramètre a a un index plus bas que le paramètre b. Dans l'ordre de tri, a vient ainsi avant b. Si la valeur retournée est 0 , alors les deux éléments sont égaux et leur ordre n'a pas besoin d'être modifié.
Si vous désirez un tri inverse, appliquez après la méthode sort() la méthode reverse().
|
|
unshift()Insère au début d'un tableau un ou plusieurs nouveaux éléments. Attend comme paramètre les éléments à insérer. Retourne le nouveau nombre d'éléments du tableau.
<html><head><title>Test</title>
<script type="text/javascript">
<!--
var nombres = new Array(5,6,7,8,9);
var nouveau_nombre = nombres.unshift(1,2,3,4);
alert(nouveau_nombre);
alert(nombres.join(","));
//-->
</script>
</head><body>
</body></html>
|
L'exemple définit un tableau nombres avec 5 éléments, à savoir les nombres de 5 à 9. Ensuite sont ajoutés 4 nouveaux chiffres au début du tableau à l'aide de la méthode unshift() à savoir les chiffres du 1 à 4. La valeur renvoyée par l'opération est sauvegardée dans la variable nouveau_nombre. Pour le contrôle est sortie ensuite d'abord la valeur de nouveau_nombre et ensuite le nouveau tableau complet. Le nombre d'éléments est maintenant de 9 et le tableau comprend les éléments 1,2,3,4,5,6,7,8,9 .
|
| |
 |
Boolean
|
 |
location
|
| SELFHTML/Aides à la navigation JavaScript/DOM Référence objet |
© 2001 Stefan Münz / © 2003 Traduction 
Serge François, 13405@free.fr selfhtml@fr.selfhtml.org
