Les tableaux en Javascript

Les tableaux en Javascript

  1. Objectifs

    • Connaitre l’objet array() dans JavaScript.
    • Etre capable de manipuler les tableaux d’éléments
  2. Définitions

    • Un tableau, en Javascript, est une variable pouvant contenir plusieurs données indépendantes.
    • Les différentes valeurs sont rangées dans les “cases” du tableau numérotées à partir de 0.
    • Un tableau, en Javascript, est un objet qui hérite de l’objet global standard Array, qui lui même hérite l’objet fondamental Object.
  3. Création et initialisation de tableau

    1. Création
      • Le langage Javascript fournit plusieurs façons de créer un tableau :
      • 
        var MonTableau = [];
        var MonTableau = new Array();
    2. Initialisation
      • Pour initialiser un tableau, la syntaxe suivante est utilisée:
      • MonTableau [i]=element;où i est un nombre compris entre 0 et la longueur du tableau-1.

        
        var MonTableau = [ ];
        MonTableau [0]= "Nour";
        MonTableau [1]= "Salah";
        MonTableau [2]= "Mourad";
        MonTableau [3]= "Alexender";
        MonTableau [4]= "Lamia";
        MonTableau [5]= "Sabrine";
        
      • La définition et l’initialisation peuvent se faire lors de la même instruction sous la forme suivante:
      • 
        var mon_tableau = new Array('Nour', 'Salah', 'Mourad', 'Alexendar',
         'Lamia', 'Sabrine');// première méthode
        var mon_tableau = ['Nour', 'Salah', 'Mourad', 'Alexender',
         'Lamia', 'Sabrine']; // seconde méthode
        



  4. Parcourir un tableau

    • Pour accéder aux valeurs d’un tableau est de passer par l’indice de chacune des valeurs contenues dans ce tableau. La numérotation des indices commence par 0 (zéro).
    • On accède à un élément du tableau par le nom du tableau et le numéro de l’indice, soit dans notre exemple précédente MonTableau[0] pour ‘Nour’
      1. a l’aide d’une boucle for
        • Exemple:
          • Afficher le contenu du tableau dans une page HTML en utilisant le boucle for dans un script
          • <!DOCTYPE html >
            <html lang="fr">
            <head>
            <title>JavaScript</title>
            <meta ="UTF-8">
            <script>
             var mon_tableau = new Array('Nour', 'Salah', 'Mourad', 'Alexendar', 'Lamia', 'Sabrine');
            for(var i=0;i<6;i++)
            {
            document.write(mon_tableau[i]+'</br>');
            }
            </script>
            </head>
            <body>
            
            </body>
            </html> 
          • Dans cet exemple l’affichage est réalisé à travers une boucle for vous pouvez regarder ce cours
        • a l’aide d’une boucle for in
          • Exemple:
            • Afficher le contenu du tableau dans une page HTML en utilisant le boucle for dans un script
            • <!DOCTYPE html >
              <html lang="fr">
              <head>
              <title>JavaScript</title>
              <meta ="UTF-8">
              <script>
               var mon_tableau = new Array('Nour', 'Salah', 'Mourad', 'Alexendar', 'Lamia', 'Sabrine');
              for(var i in mon_tableau)
              {
              document.write(mon_tableau[i]+'</br>');
              }
              </script>
              </head>
              <body>
              
              </body>
              </html> 
            • Dans cet exemple l’affichage est réalisé à travers un boucle for in
  5. Exemple

    • // Création d'un tableau à 4 éléments
      var tableau = new Array( 4 );
      
      // Entrée des 4 données
      tableau[ 0 ] = 35;
      tableau[ 1 ] = 22;
      tableau[ 2 ] = 29;
      tableau[ 3 ] = 56;
      
      // Affichage de la taille du tableau
      document.write( "La taille du tableau est" + tableau.length );
      
      // Affichage du 1er élément du tableau
      document.write( "Le 1er élément du tableau est" + tableau[0] );
      
      // Affichage du 4ème et dernier élément du tableau
      document.write( "Le 4ème et dernier élément du tableau est" + tableau[3] );
  6. Application

    1. Énonce
      • Dans une page HTML5 créer un script Javascript pour réaliser les taches suivantes:
      • Déclarer un tableau de 10 élément javascript
      • Remplir le tableau avec des nombres entiers aléatoires allants de 20 à 100
      • Afficher le résultat dans un élément div
    2. Correction
      • <!DOCTYPE html>
        <html lang="fr">
        <head>
          <title>Vos tables de multiplication</title>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1">
         
          <script type="text/javascript">
        function nbraleatoire(min, max) {
          return Math.floor(Math.random() * (max - min + 1)) + min;
        }
        function rechercheNbrAleatoire(){
         var mon_tableau = new Array(10);
         var nbr="";
        for(var i =0 ;i< mon_tableau.length;i++)
        {
        	nbr+=mon_tableau[i]=nbraleatoire(20,100)+"<br>";
        }
        document.getElementById('AffichernbrAleatoir').innerHTML=nbr;
          }
          </script> 
        </head>
        <body onload="rechercheNbrAleatoire();">
        <div class="container" id="AffichernbrAleatoir">
        </div>
        
        
        </body>
        </html>



Abonnez vous à notre chaîne YouTube gratuitement