« JavaScript/Les tableaux » : différence entre les versions

Une page de Wikiversité, la communauté pédagogique libre.
Contenu supprimé Contenu ajouté
(:Julien:) (discussion | contributions)
Aucun résumé des modifications
Ligne 8 : Ligne 8 :
| niveau =
| niveau =
}}
}}
==Les tableaux==
Les tableaux (array en Anglais) sont des tableurs virtuels où peuvent être stockées des centaines d'informations à la fois. À la base, un tableau n'est qu'une simple variable. Il existe deux sortes de tableaux :


Les '''tableaux''' (array en anglais) sont des tableurs virtuels où peuvent être stockées des centaines d'informations à la fois. À la base, un tableau n'est qu'une simple variable. Il existe deux sortes de tableaux :
* les tableaux à indices numériques

* les tableaux associatifs
* les tableaux à indices numériques ;
* les tableaux associatifs.


Les valeurs d'un tableau peuvent être de tout type (booléen, nombre, chaîne de caractères, array...). JavaScript propose l'objet Array avec plusieurs méthodes permettant de manipuler les tableaux sans problème.
Les valeurs d'un tableau peuvent être de tout type (booléen, nombre, chaîne de caractères, array...). JavaScript propose l'objet Array avec plusieurs méthodes permettant de manipuler les tableaux sans problème.


===Tableaux à indices numériques===
==Tableaux à indices numériques==
Ce sont des tableaux ou chaque valeur est associée à un indice (nombre entier positif).
Ce sont des tableaux chaque valeur est associée à un indice (nombre entier positif).
====Déclaration====
===Déclaration===
Voici comment déclarer un tableau à indices numériques en JavaScript et lui donner des valeurs de départ :
Voici comment déclarer un tableau à indices numériques en JavaScript et lui donner des valeurs initiales :


<source lang="javascript">
<source lang="javascript">
var mon_tableau = new Array('Christophe', 'Sarah', 'Carole', 'Alex', 'Nicolas', 'Sandrine'); // 1ère méthode
var mon_tableau = new Array('Christophe', 'Sarah', 'Carole', 'Alex', 'Nicolas', 'Sandrine'); // première méthode
var mon_tableau = ['Christophe', 'Sarah', 'Carole', 'Alex', 'Nicolas', 'Sandrine']; // 2nde méthode
var mon_tableau = ['Christophe', 'Sarah', 'Carole', 'Alex', 'Nicolas', 'Sandrine']; // seconde méthode
</source>
</source>


====Accès aux valeurs====
===Accès aux valeurs===
Pour accéder aux valeurs d'un tableau à indices numériques, la seule possibilité est de passer par les indices de chaque valeurs contenues dans ce tableau. La numérotation des indices commence par 0 (zéro).
Pour accéder aux valeurs d'un tableau à indices numériques, la seule possibilité est de passer par l'indice de chacune des valeurs contenues dans ce tableau. La numérotation des indices commence par 0 (zéro).


<source lang="javascript">
<source lang="javascript">
document.write(mon_tableau[0]); // Affiche "Christophe"
document.write(mon_tableau[0]); // Affiche "Christophe"
document.write(mon_tableau[4]); // Affiche "Nicolas"
document.write(mon_tableau[4]); // Affiche "Nicolas"
</source>
</source>


'''<u>Listage des valeurs</u>'''
====Listage des valeurs====


Pour lister l'intégralité du tableau, vous aurez donc deviné qu'il va nous falloir utiliser une boucle. Veuillez noter qu'il va nous être utile de connaître la "longueur" du tableau (le nombre d'indice qu'il possède). Pour cela, on va faire appelle à la méthode '''length''' de Array. Ainsi, on pourra accéder aux valeurs de notre tableau grâce aux indices qu'il possède; comme ceci :
Pour lister l'intégralité du tableau, il nous faut utiliser une boucle. Il va nous être utile de connaître la "longueur" du tableau (le nombre d'indice qu'il possède). Pour cela, on fait appel à la méthode '''length''' de l'objet Array. Ainsi, on accède aux valeurs de notre tableau grâce à ses indices comme ceci :


<source lang="javascript">
<source lang="javascript">
Ligne 45 : Ligne 45 :
</source>
</source>


'''<u>Affection de valeurs</u>'''
====Affection de valeurs====


Pour remplir un tableau d'une seule valeur (0 par exemple), on va aussi pouvoir utiliser une boucle.
Pour remplir un tableau avec une seule valeur (13 par exemple), on utilise une boucle.


<source lang="javascript">
<source lang="javascript">
var a = 0;
var a = 13;
var long_tableau = 10;
var long_tableau = 10;
var mon_tableau = new Array();
var mon_tableau = new Array();
Ligne 60 : Ligne 60 :
</source>
</source>


Sachez que comme affirmé plus haut, il existe des tableaux de tableau de tableau... (ce sont des tableaux multidimensionnels) Ainsi, ceci est tout à fait faisable :
Il existe des tableaux de tableaux de tableau... (ce sont des tableaux multidimensionnels). Ainsi, ceci est tout à fait faisable :


<source lang="javascript">
<source lang="javascript">
Ligne 67 : Ligne 67 :
</source>
</source>


===Tableaux associatifs===
==Tableaux associatifs==
Un tableau est dit "associatif" lorsque chacune de ses valeurs est associée à un nom.
Un tableau est dit "associatif" lorsque chacune de ses valeurs est associée à un nom.


====Déclaration====
===Déclaration===
Pour attacher le nom à sa valeur, on utilise le signe mathématique simplement le égal comme ceci :
Pour attacher le nom à sa valeur, on utilise le signe mathématique égal comme ceci :


<source lang="javascript">
<source lang="javascript">
Ligne 84 : Ligne 84 :
</source>
</source>


====Accès aux valeurs====
===Accès aux valeurs===


Comme précédemment sauf qu'on utilisera le nom associé à la variable plutôt que son indice :
Comme précédemment sauf qu'on utilise le nom associé à la variable au lieu de son indice :


<source lang="javascript">
<source lang="javascript">
Ligne 92 : Ligne 92 :
</source>
</source>


'''<u>Listage des valeurs</u>'''
====Listage des valeurs====


Pour lister les valeurs du tableau mon_tableau ci-dessus, on procèdera ainsi :
Pour lister les valeurs du tableau mon_tableau ci-dessus, on procède ainsi :


<source lang="javascript">
<source lang="javascript">
Ligne 101 : Ligne 101 :
}
}
</source>
</source>
En effet, la boucle for(...in...) va attribuer à la variable ''nom_indice'' le nom de l'indice et passer au suivant à chaque itération. Il est à noter que cette méthode permet aussi de lister les noms d'indices si nécessaire.
En effet, la boucle for(...in...) attribue à la variable ''nom_indice'' le nom de l'indice et passe au suivant à chaque itération. Il est à noter que cette méthode permet aussi de lister les noms d'indices si nécessaire.


'''<u>Affectation de valeurs</u>'''
====Affectation de valeurs====


Soit directement en utilisant le nom de l'indice:
Soit directement en utilisant le nom de l'indice:
Ligne 116 : Ligne 116 :
</source>
</source>


===Des outils pratiques===
==Des outils pratiques==
Même si nous n'avons pas encore vu comment marchaient les fonctions en JavaScript; il est à savoir que celui-ci met à disposition des fonctions pour la gestion des tableaux. En voici la liste des principale :
Même si nous n'avons pas encore vu comment marchaient les fonctions en JavaScript; il est à savoir que celui-ci met à disposition des fonctions pour la gestion des tableaux. En voici la liste des principale :


Ligne 128 : Ligne 128 :
* '''Tableau.splice()''' : cette méthode ajoute ou retire des éléments dans Tableau.
* '''Tableau.splice()''' : cette méthode ajoute ou retire des éléments dans Tableau.


Voilà. À présent, vous en savez assez sur la tableaux en JavaScript pour pouvoir continuer le cours tranquillement.
À présent, vous en savez assez sur la tableaux en JavaScript pour pouvoir continuer le cours tranquillement.


{{Bas de page
{{Bas de page

Version du 22 avril 2009 à 10:31

Début de la boite de navigation du chapitre
Les Tableaux
Icône de la faculté
Chapitre no {{{numéro}}}
Leçon : JavaScript
Chap. préc. :Structures de contrôle
Chap. suiv. :Boîtes de dialogues
fin de la boite de navigation du chapitre
En raison de limitations techniques, la typographie souhaitable du titre, « JavaScript : Les Tableaux
JavaScript/Les tableaux
 », n'a pu être restituée correctement ci-dessus.

Les tableaux (array en anglais) sont des tableurs virtuels où peuvent être stockées des centaines d'informations à la fois. À la base, un tableau n'est qu'une simple variable. Il existe deux sortes de tableaux :

  • les tableaux à indices numériques ;
  • les tableaux associatifs.

Les valeurs d'un tableau peuvent être de tout type (booléen, nombre, chaîne de caractères, array...). JavaScript propose l'objet Array avec plusieurs méthodes permettant de manipuler les tableaux sans problème.

Tableaux à indices numériques

Ce sont des tableaux où chaque valeur est associée à un indice (nombre entier positif).

Déclaration

Voici comment déclarer un tableau à indices numériques en JavaScript et lui donner des valeurs initiales :

var mon_tableau = new Array('Christophe', 'Sarah', 'Carole', 'Alex', 'Nicolas', 'Sandrine'); // première méthode
var mon_tableau = ['Christophe', 'Sarah', 'Carole', 'Alex', 'Nicolas', 'Sandrine']; // seconde méthode

Accès aux valeurs

Pour accéder aux valeurs d'un tableau à indices numériques, la seule possibilité est de passer par l'indice de chacune des valeurs contenues dans ce tableau. La numérotation des indices commence par 0 (zéro).

document.write(mon_tableau[0]); // Affiche "Christophe"
document.write(mon_tableau[4]); // Affiche "Nicolas"

Listage des valeurs

Pour lister l'intégralité du tableau, il nous faut utiliser une boucle. Il va nous être utile de connaître la "longueur" du tableau (le nombre d'indice qu'il possède). Pour cela, on fait appel à la méthode length de l'objet Array. Ainsi, on accède aux valeurs de notre tableau grâce à ses indices comme ceci :

for (i = 0; i <= mon_tableau.length-1; i++)
{
  document.write(i+" => "+mon_tableau[i]); // On affiche chaque couples indice => valeur
}

Affection de valeurs

Pour remplir un tableau avec une seule valeur (13 par exemple), on utilise une boucle.

var a = 13;
var long_tableau = 10;
var mon_tableau = new Array();

for (i = 0; i <= long_tableau; i++)
{
  mon_tableau[i] = a;
}

Il existe des tableaux de tableaux de tableau... (ce sont des tableaux multidimensionnels). Ainsi, ceci est tout à fait faisable :

var mon_tableau = new Array('Christophe', new Array('Sarah', 'Carole', 'Alex', 'Nicolas', 'Sandrine'));
document.write(mon_tableau[1][0]); // Affiche "Sarah"

Tableaux associatifs

Un tableau est dit "associatif" lorsque chacune de ses valeurs est associée à un nom.

Déclaration

Pour attacher le nom à sa valeur, on utilise le signe mathématique égal comme ceci :

var mon_tableau = new Array();

mon_tableau['prenom_0'] = 'Christophe';
mon_tableau['prenom_1'] = 'Sarah';
mon_tableau['prenom_2'] = 'Carole';
mon_tableau['prenom_3'] = 'Alex';
mon_tableau['prenom_4'] = 'Nicolas';
mon_tableau['prenom_5'] = 'Sandrine';

Accès aux valeurs

Comme précédemment sauf qu'on utilise le nom associé à la variable au lieu de son indice :

document.write(mon_tableau['prenom_3']); // Affiche "Alex"

Listage des valeurs

Pour lister les valeurs du tableau mon_tableau ci-dessus, on procède ainsi :

for (var nom_indice in mon_tableau){
	document.write(mon_tableau[nom_indice]);
}

En effet, la boucle for(...in...) attribue à la variable nom_indice le nom de l'indice et passe au suivant à chaque itération. Il est à noter que cette méthode permet aussi de lister les noms d'indices si nécessaire.

Affectation de valeurs

Soit directement en utilisant le nom de l'indice:

mon_tableau['prenom_3'] = "Alex"

Soit via la boucle for(...in...) (ici remise à 0 de toutes les valeurs du tableau)

for (var nom_indice in mon_tableau){
	mon_tableau[nom_indice] = 0;
}

Des outils pratiques

Même si nous n'avons pas encore vu comment marchaient les fonctions en JavaScript; il est à savoir que celui-ci met à disposition des fonctions pour la gestion des tableaux. En voici la liste des principale :

  • concat (Tableau1, Tableau2[, Tableau3, ...]) : cette méthode permet de concaténer (coller) plusieurs tableaux pour n'en former plus qu'un seul.
  • join (Tableau) ou Tableau.join() : cette méthode renvoie tous les éléments (valeurs) de Tableau sous forme d'une chaîne de caractères.
  • Tableau.push (valeur1[, valeur2, ...]) : cette méthode permet d'ajouter des éléments à la fin de Tableau.
  • Tableau.unshift (valeur1[, valeur2, ...]) : cette méthode permet d'ajouter des éléments au début de Tableau.
  • pop (Tableau) ou Tableau.pop() : cette méthode supprime le dernier élément de Tableau après avoir retourné sa valeur.
  • Tableau.reverse() : cette méthode inverse l'ordre des éléments de Tableau.
  • Tableau.sort() : cette méthode permet de trier tous les éléments de Tableau.
  • Tableau.splice() : cette méthode ajoute ou retire des éléments dans Tableau.

À présent, vous en savez assez sur la tableaux en JavaScript pour pouvoir continuer le cours tranquillement.