Introduction aux tableaux (Array) Construire un tableau simple et récupérer les données par Django (Oznog) Blais, Trucsweb (21 Septembre 2001)
Un tableau ou "Array" est un objet ou structure qui permet de garder, manipuler et ordonner une collection de données. En plus de pouvoir accéder individuellement aux données plusieurs méthodes permettent aussi de trier, "concater", joindre, extraire, inverser, convertir un tableau. Les nombreux avantages sont quasiment indispensables, je ne connais pas un programmeur ni de programme qui puisse se passer des tableaux.
Des tableaux partout
Pour vous mettre au parfum, sachez que la plupart des objets, de la "programmation orientée-objet" comme le Javascript, sont construits sur le principe des tableaux. Vous avez probablement déjà manipuler un tableau, que ce soit les éléments d'un formulaire, les liens de l'objet "history" ou tous autres "objets" de l'architecture d'un document HTML. ATTENTION, nous ne parlons pas ici d'un tableau ou "table" HTML bien qu'un tableau soit une liste de lignes avec un nombre x de colonnes, exactement comme une feuille de chiffrier Excel par exemple.
Structure de données
Avant de pouvoir créer et utiliser un tableau il faut savoir qu'il est constituer de données classées par un "index" numérique. Chacune des données ayant une position x dans le tableau. Ce nombre est très important car il est la seule référence pour accéder aux données. Une donnée à son numéro ou index qui lui est propre et UNIQUE. Donc, les données se suivent par ordre croissant de l'Index" numérique. L'index numérique commence toujours à zéro.
Basé à zéro (attention)
Un index basé à zéro. L'erreur la plus fréquente est d'oublier ce petit détail qui fait en sorte que la première donnée (index = 0) soit perdue. Perdre une donnée est une chose mais imaginer faire une boucle sur le tableau de 1 à longueur du tableau ( length ), lorsque la boucle arrivera au dernier, l'index sera dépassé de 1 ce qui entraînera inévitablement une erreur d'exécution. Donc le plus important à ce stade-ci est de bien saisir l'ordre des données et l'index basé à zéro, soit:
monTableau[0]
monTableau[1]
monTableau[2]
monTableau[3]
Ce tableau est de longueur 4 bien que l'index se termine à 3. Noter les crochets qui indiquent le numéro de l'index, ces crochets obligatoires indique au moteur Javascript qu'il a affaire à un tableau. Vous ne pourrez jamais afficher une donnée du tableau sans donner l'index entre crochets.
Créer un tableau et la propriété " length "
Contrairement à plusieurs langages de programmation, un tableau Javascript est entièrement dynamique, vous pouvez à tout moment ajouter une donnée. Il existe plusieurs techniques pour créer un tableau.
// Création d'un objet Array
monTableau = new Array();
// Création d'un objet Array et réserver le nombre de données du tableau
monTableau = new Array (NombreDeDonnées);
// Création d'un objet Array en spécifiant les données
// Noter que les caractères doivent être entre guillemets
monTableau = new Array(Données0, Données1, ..., DonnéesN);
Créer un tableau et réserver l'espace qu'occupera les données.
monTableau = new Array(7);
document.write(monTableau.length); // Résultat = 7
monTableau, vide pour l'instant, est prêt à recevoir 7 données (de 0 à 6). La propriété " length " s'ajuste toujours à la quantité de données du tableau. Cette propriété utilisée en exemple ici est utile pour connaître le nombre de données ou encore pour faire une boucle de toutes les données d'un tableau.
Entrer les données dans le tableau
Si je reprends l'exemple précédent, je peux ajouter manuellement les données. Je vais ajouter les 7 jours de la semaine. Vous verrez très bien que le tableau contient 7 données bien que le dernier index soit 6.
<html>
<script type="text/javascript" language="javascript">
<!--
monTableau = new Array(7);
monTableau[0] = "Dimanche"
monTableau[1] = "Lundi"
monTableau[2] = "Mardi"
monTableau[3] = "Mercredi"
monTableau[4] = "Jeudi"
monTableau[5] = "Vendredi"
monTableau[6] = "Samedi"
document.write( monTableau.length ); // Résultat = 7
// -->
</script>
</html>
Ajoutons une donnée, la propriété " length " augmentera de 1.
<html>
<script type="text/javascript" language="javascript">
<!--
monTableau = new Array(7);
monTableau[0] = "Dimanche"
monTableau[1] = "Lundi"
monTableau[2] = "Mardi"
monTableau[3] = "Mercredi"
monTableau[4] = "Jeudi"
monTableau[5] = "Vendredi"
monTableau[6] = "Samedi"
document.write(monTableau.length); // Résultat = 7
monTableau[7] = "2iem dimanche";
document.write( monTableau.length ); // Résultat = 8
// -->
</script>
</html>
Récupérer les données de notre tableau
Récupérer les données est un jeu d'enfant, il suffit de spécifier l'index et le tour est joué. Vous pouvez aussi utiliser la propriété " length " du tableau créé pour afficher toutes les données dans une boucle de programmation ou encore utiliser la méthode join() qui extrait toutes les données dans une chaîne de caractères en séparent les données par un délimitateur.
<html>
<script type="text/javascript" language="javascript">
<!--
document.write( monTableau[2] ); // Résultat = Mardi
// À l'aide d'une boucle
for (i=0; i>monTableau.length; i++) document.write(monTableau[i]);
// Résultat = DimancheLundiMardiMercrediJeudiVendrediSamedi
// À l'aide de la méthode join()
document.write( monTableau.join(",") );
// Résultat = Dimanche,Lundi,Mardi,Mercredi,Jeudi,Vendredi,Samedi
// -->
</script>
</html>
Deuxième technique de créer un tableau
Vous pouvez créer un tableau en passant en paramètre une chaîne de données séparées par des virgules.
<html>
<script type="text/javascript" language="javascript">
<!--
monTableau = new Array("Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi");
document.write(monTableau.length); // Résultat = 7
monTableau[7] = "2iem dimanche";
document.write( monTableau.length ); // Résultat = 8
document.write( monTableau[2] ); // Résultat = Mardi
// -->
</script>
</html>
Encore plus simple, rappelez-vous que les crochets indiquent qu'il s'agit d'un tableau, alors, en spécifiant la chaîne entre crochets, vous n'avez même pas à créer un tableau, le brillant moteur Javascript saura quoi faire.
<html>
<script type="text/javascript" language="javascript">
<!--
monTableau = ["Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi"];
document.write(monTableau.length); // Résultat = 7
// -->
</script>
</html>
Plus compacte, cette technique dite "dense array" est très pratique, si vous avez par exemple une chaîne de mots dynamique qui contient un nombre x de mots séparé par un délimitateur commun. Vous pouvez la transférer dans un tableau avec la méthode "string.split" pour ensuite connaître le nombre de mots ou encore accéder a un mot spécifique.
<html>
<script type="text/javascript" language="javascript">
<!--
maChaine = "Dimanche,Lundi,Mardi,Mercredi,Jeudi,Vendredi,Samedi";
monTableau = maChaine.split(",");
document.write(monTableau.length); // Résultat = 7
document.write( monTableau[2] ); // Résultat = Mardi
// -->
</script>
</html>
Méthodes et propriétés
En sachant comment intégrer des données dans un tableau et comment les récupérer vous avez en main un des plus puissants outils de programmation. Avec cette base vous pouvez faire pratiquement n'importe quoi. Mais le Javascript nous simplifie encore plus la tâche avec les méthodes. Les méthodes peuvent manipuler un tableau en quelques mots. Voici la liste des méthodes et des propriétés de l'objet Array, cliquez sur une méthode ou une propriété pour en savoir d'avantage.
| 
