Les tableaux en Javascript
Les tableaux en Javascript
-
Objectifs
- Connaitre l’objet array() dans JavaScript.
- Etre capable de manipuler les tableaux d’éléments
-
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.
-
Création et initialisation de tableau
-
Création
- Le langage Javascript fournit plusieurs façons de créer un tableau :
-
Initialisation
- Pour initialiser un tableau, la syntaxe suivante est utilisée:
- La définition et l’initialisation peuvent se faire lors de la même instruction sous la forme suivante:
-
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’
-
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
- 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
- Dans cet exemple l’affichage est réalisé à travers un boucle for in
var MonTableau = [];
var MonTableau = new Array();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";
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
<!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> <!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> 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
-
É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
-
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>