Avez-vous une question? (216) 97 656 803 hajjriadh@gmail.com
JavaScript

Les tableaux en Javascript

Un cours complet pour maîtriser Les tableaux en Javascript.

0 chapitres 0 QCM Accès gratuit
Commencer Retour aux cours
Sommaire du cours
La syntaxe de base de Javascript
Où et comment insérer du JavaScript ?
Les variables en JavaScript
Exercice les variables en JavaScript
Les chaînes de caractères en JavaScript
TP les chaines de caractères en JavaScript
Les limites du langage HTML
Historique du langage JavaScript
Apport de JavaScript
Les objets JavaScript
Les opérateurs en JavaScript
Exercice divers en JavaScript Série 02
L’accès aux éléments HTML en Javascript
Les conditions if else en JavaScript
La structure switch en JavaScript
Autres catégories
News
Microsoft Office
Les cours de programmation
MOS
WordPress
Ressources pédagogiques
Voir tout le catalogue

  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";
    3. La définition et l'initialisation peuvent se faire lors de la même instruction sous la forme suivante:
      4. 
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>
      2. Dans cet exemple l'affichage est réalisé à travers une boucle for vous pouvez regarder ce cours
  5. 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>
  6. Dans cet exemple l'affichage est réalisé à travers un boucle for in

  • 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] );

  • 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>
    Sommaire du cours JavaScript
    Tableau à plusieurs dimensions en JS