Trucsweb.com

Trucsweb.com

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 arrayTableaux (Array) à deux dimensions - Construire un tableau avec propriétés dans un tableau

  • · 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
    Date (GMT) : 2015-04-07 11:0:35 (UTC +0000)

    • 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
      Date (GMT) : 2015-04-07 12:36:47 (UTC +0000)

      • J'ai besoin de creer un tableau de trois colonnes et 3 lignes en javascript merci de m'aider
        64x64
        Ata
        Date (GMT) : 2019-03-18 13:35:06 (UTC +0000)
        Date local : Mon Mar 18 2019 14:43:40 GMT+0100 (Paris, Madrid)
        • Salut, « trois colonnes et 3 lignes » ??? Les lignes sont illimitées avec un tableau (array), c'est-à-dire une matrice. Est-ce que tu sais ce qu'est un « Array » ou une matrice ? Est-ce que tu ne parlerais pas plutôt d'un tableau HTML créer en JavaScript ? Enfin, sinon en JavaScript, c'est toujours le même principe de Tableaux (Array) à deux dimensions, mais dans laquelle on peut stocker d'autre matrice comme des objets... Peux-tu préciser ta question et surtout ce que tu veux vraiment faire avec ce tableau. Merci.
          64x64
          oznog
          Date (GMT) : 2019-03-18 13:50:34 (UTC +0000)
          Date local : Mon Mar 18 2019 09:59:05 GMT-0400 (heure d’été de


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

               Visites : 75984 - Pages vues : 120973
        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

        .
        @