Trucsweb.com

Trucsweb.com

Javascript

Introduction aux tableaux (Array)

RDFFav

Introduction aux tableaux (Array) - Construire un tableau simple et récupérer les données

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...tableau tableaux introduction manipuler créer remplir new array() Array concat push join toString pop reverse shift slice sort splice toSource unshift valueOf Propriétés length prototype joindre unir trier triIntroduction aux tableaux (Array) - Construire un tableau simple et récupérer les données

  • · Niveau : INTERMÉDIAIRE
  • · Compatibilité : Navigateur 4+

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.

Exemple de création
var aVilles = ["Montréal", "Paris", "New York"]; 
var aVilles = new Array("Montréal", "Paris", "New York");
alert(aVilles[1]);          // Récupérer la deuxième ville
aVilles[0] = "Rimouski";    // Changer la valeur

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.

Méthodes
Array concat() (push)
join() (toString) pop()
reverse() shift()
slice() sort()
splice() toSource
unshift() valueOf()
Propriétés
length prototype
Exemples

aVilles.toString(); // conversion en une chaine de caractère : résultat "Montréal,Paris,New York"
aVilles.join(" * "); // Joindre: "Montréal * Paris * New York"
aVilles.pop(); // supprimer un élément
aVilles.push("Rimouski"); // ajouter un nouvel élément
aVilles[aVilles.length] = "Rimouski"; // ajouter un nouvel élément, comme « push »
aVilles.shift(); // supprimer le premier élément
aVilles.unshift("Rimouski"); // ajouter un nouvel élément au début
delete aVilles[0]; // changer l’élément pour indéfini (non recommandé)
aVilles.splice(2, 0, "Le Bic", "Rivière-du-Loup"); // ajouter un élément (où, combien en enlever, liste d’éléments)
var aTout = aVilles.concat(aPays,aContinents); // joindre deux matrices (aVilles suivit par pays et continents)
aVilles.slice(1,4); // éléments de [1] à [4-1]
aVilles.sort(); // tri alphabétique
aVilles.reverse(); // tri alphabétique descendant
x.sort(function(a, b){return a - b}); // tri numérique
x.sort(function(a, b){return b - a}); // tri numérique descendant
plusgrand = x[0]; // le premier élément de la matrice trié est la valeur la plus basse (ou la plus élevée)
x.sort(function(a, b){return 0.5 - Math.random(}); // ordre aléatoire

Django (Oznog) Blais
Dernière mise à jour :

Commentaires

    Ajouter un commentaire
    Votre adresse de courriel ne sera pas publiée. * L'astérisque indique les champs obligatoires.
    Votre évaluation du tutoriel

           Visites : 15755 - Pages vues : 41673
    X

    Trucsweb.com Connexion

    Connexion

    X

    Trucsweb.com Mot de passe perdu

    Connexion

    X

    Trucsweb.com Conditions générales

    Conditions

    Responsabilité

    La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

    Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

    Droit applicable et juridiction compétente

    Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

    X

    Trucsweb.com Trucsweb

    X

    Trucsweb.com Glossaire

    X

    Trucsweb.com Trucsweb

    X

    Trucsweb.com Trucsweb

    Conditions

    Aucun message!

    Merci.

    X
    Aucun message!
    X

    Trucsweb.com Créer un compte

    Créer un compte

    .
    @