Trucsweb.com

Trucsweb 1997-2017 - 20 ans de partage.

Javascript

Introduction aux tableaux (Array)

RDFFav

Tableaux (Array) à deux dimensions - Construire un tableau avec propriétés dans un tableau

C’est bien beau de pouvoir garder des données dans un tableau mais si chacune des données contient plus d’une valeur nous ne sommes pas plus avancés. C’est pourquoi un tableau permet non seulement des lignes mais aussi des colonnes à l’image d’un chiffrier.tableau introduction manipuler créer remplir new array() Array join split length joindre unir trier tri miltiple 2d deux dimension multi-dimension multidimension tableau horizontal dense array

  • · Niveau : AVANCÉ
  • · Compatibilité : Navigateur 4+

C’est bien beau de pouvoir garder des données dans un tableau mais si chaque donnée contient plus d’une valeur nous ne sommes pas plus avancés. C’est pourquoi un tableau permet non seulement des lignes mais aussi des colonnes à l’image d’un chiffrier.

Créer un tableau à deux dimensions manuellement
Prenons par exemple un tableau qui contient les noms de personnes. Vous pouvez bien sûr les ajouter dans un tableau à une dimension et extraire ensuite le nom et le prénom à l’aide d’une méthode "string.method". Une autre technique consiste à créer un tableau à deux dimensions. Il suffit de créer deux tableaux qui seront ensuite les données ou éléments d’un troisième tableau. La récupération se fait de la même façon qu’un tableau simple. Le premier index référence au tableau x dans le tableau "monTableau" et le deuxième index à la données du tableau x.

<html>
<script type="text/javascript" language="javascript">
<!--

  aNoms = new Array("Nom1","Nom2","Nom3");
  aPrenom= new Array("Prénmom1","Prénmom2","Prénmom3");
  monTableau = new Array(aNoms,aPrenom);

  document.write(monTableau.length+"<br />"); // Résultat = 2
  document.write(monTableau[0].length+"<br />"); // Résultat = 3
  document.write(monTableau[1].length+"<br />"); // Résultat = 3
  document.write(monTableau[0][2]); // Résultat = Nom3
  document.write(monTableau[1][1]); // Résultat = Prénmom2

// -->
</script>
</html>

Autre technique

aNoms = new Array(["Nom1","Nom2","Nom3"],["Prénmom1","Prénmom2","Prénmom3"]);

document.write(aNoms.length+"<br />"); // Résultat = 2
document.write(aNoms[0][2]); // Résultat = Nom3
document.write(aNoms[1][1]); // Résultat = Prénmom2

 

Créer un tableau horizontal
Une autre façon de créer un tableau est de définir des propriétés. Bien que plus lisible, cette technique n’offre pas les mêmes capacités dynamiques que les tableaux simples. Par contre, ce peut être très utile dans un tableau à deux dimensions. Je vais créer le tableau de Jours "aJour" qui spécifie 3 propriétés.

aJour = new Array();
aJour.nom = "Dimanche";
aJour.prof = "Lui Même";
aJour.matiere = "Informatique";

Ce tableau n’est pas basé avec un Index. Vous pouvez accéder de deux façons aux données mais utiliser l’index retourne "undefined" ou "null", donc "aJour.length" retournera toujours 0.

document.write( aJour.matiere ); // Résultat = Informatique
document.write( aJour["matiere"] ); // Résultat = Informatique
document.write( aJour[2] ); // Résultat = undefined ou null
document.write( aJour.length ); // Résultat = 0

 

Tableau à deux dimensions
La grande force des tableaux est de pouvoir créer des tableaux à deux dimensions. En reprenant l’exemple précédent, nous allons créer un tableau de locals dont les données seront un autre tableau des jours de la semaine avec leurs propriétés respectives. J’ai fait une fonction pour créer chaque tableau des journées.

<html>
<script type="text/javascript" language="javascript">
<!--

  function fait_Jour(nNom,nProf,nMatiere) {
    this.nom = nNom;
    this.prof = nProf;
    this.matiere = nMatiere;
  }


  aLocal = new Array(7)
  aLocal[0] = new fait_Jour("Dimanche","Luc","Informatique");
  aLocal[1] = new fait_Jour("Lundi","Pierre","Mathématique");
  aLocal[2] = new fait_Jour("Mardi","Claude","Informatique");
  aLocal[3] = new fait_Jour("Mercredi","Simon","Chimie");
  aLocal[4] = new fait_Jour("Jeudi","",""); // Le local est vide le jeudi ;-)
  aLocal[5] = new fait_Jour("Vendredi","Pierre","Mathématique");
  aLocal[6] = new fait_Jour("Samedi","Claude","Mathématique");

// -->
</script>
</html>

Pour récupérer le nom du professeur qui sera dans le local le vendredi vous devez faire:


document.write( aLocal[5].prof ); // Résultat = Pierre

Récupération dynamique
En utilisant l’objet "date()" et la méthode "getDat()" vous pouvez récupérer le numéro du jour de la semaine courante. Puisque cet objet est aussi un tableau basé à zéro, il suffit de passer cette valeur à notre tableau "aLocal" pour accéder aux informations de ce local selon la journée courante. N’est-ce pas merveilleux!

// Disons qu’aujourd’hui c’est mardi
// Donc, le jour 3 (dimanche étant 0 dans l’objet date())

var nJour = new Date();
document.write(nJour.getDay()); // Résultat = 3
document.write(aLocal[nJour.getDay()].prof); // Résultat = Simon

A chaque journée, le résultat sera différent.

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

Commentaires

  • Votre première méthode n'est pas bonne ! aNoms = new Array(2,2) aNoms[0,0] = Nom1; aNoms[0,1] = Prénmom1; aNoms[1,0] = Nom2; aNoms[1,1] = Prénmom2; document.write(aNoms.length); // Résultat = 2 document.write(aNoms[0,0]); // Résultat = Nom2 et nom pas nom1 !
    64x64
    yarek chmielewski

    2015-04-07 11:0:35

    • Salut, Comme le tutoriel le dit, la première méthode n'était pas conseillé « je vous conseil la deuxième technique ». Désolé de ne pas être plus claire, ce tutoriel a 15 ans donc fait à l'aide de Netscape 3. Je vais retirer le code pour évite la confusion. Merci
      64x64
      oznog
      http://www.trucsweb.com
      2015-04-07 12:36:47

             Visites : 35349 - Pages vues : 79083
      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

      .
      @