Easy-Micro


LANGAGE JavaScript
Tableaux Javascript

Les tableaux - array - en Javascript

Un tableau est une variable repérée par son nom pouvant contenir plusieurs données (soit une matrice).

JavaScript Déclaration d'un tableau (Array)

On déclare une variable de type tableau (une matrice) avec le mot réservé "new" associé à l'objet Array(), exemple:
var montableau = new Array();

La variable "montableau" hérite des attributs de l'objet Array via le mot clé "new". Cette variable devient donc un Array, soit un tableau. Elle peut donc maintenant contenir plusieurs données. Voici comment créer ce tableau, c'est à dire comment remplir cette variable:

<script>
var montableau = new Array();
montableau = ["pommes", "poires", "bananes", "oranges"];
</script>

On utilise la notation a crochets pour remplir un tableau.
Voici une autre technique pour remplir un tableau javascript:

<script>
var montableau = new Array();
montableau[0] = "pommes";
montableau[1] = "poires";
montableau[2] = "bananes";
montableau[3] = "oranges";
</script>

Remarquez qu'une variable de type tableau commence toujours à zéro (0) et non pas à 1.
Voici comment afficher une donnée d'un tableau:

<script>
document.write(montableau[2]);
</script>

L'exemple ci-dessus affiche bananes puisqu'un tableau commence toujours à 0.
Voici comment afficher plusieurs données d'un tableau:

<script>
for(i=0; i < montableau.length; i++) {
document.write(montableau[i]," ");
}
</script>

Exemple:

L'exemple ci-dessus utilise une boucle "for" afin d'afficher la totalité du tableau. Est utilisé ici un compteur (i), initialisé à zéro (i=0), une fin de boucle définie avec la propriété "length" qui permet d'obtenir la taille du tableau (montableau.length) et un pas via l'instruction i++ qui signifie i = i + 1.
Pour plus d'infos sur les Array, voir les méthodes de l'objet Array.

JavaScript Remplissage dynamique de tableau

Cet exemple affiche des photos stockées dans un dossier image (photo_1.jpg, photo_2.jpg...) :

<script>

var mesphotos = new Array();
var nbredephotos = 3;

// remplissage dynamique :
for(i=0; i < nbredephotos; i++) {
mesphotos[i] = "photo_" + i;
}

// Affichage dynamique des photos :
for(i=0; i < mesphotos.length; i++) {
document.write("<img src='images/"+mesphotos[i]+".jpg' width='50' height='75' /> &nbsp;");
}

</script>

JavaScript Affichage dynamique de tableau

Autre exemple: Saisie et boucle sur un Array pour affichage dans un div

Saisissez vos articles

Article 1 :
Article 2 :
Article 3 :

Cet exemple nécessite deux fichiers: 1 fichier HTML et 1 fichier javascript :
Le fichier HTML :
<html>
<head>
<title>Formation Javascript</title>
</head>
<body>
Saisissez vos articles :<br/>

Article 1 : <input type="text" id ="article1" /><br/>
Article 2 : <input type="text" id ="article2" /><br/>
Article 3 : <input type="text" id ="article3" /><br/>

<input type="button" value="Valider" id="btn_Valider" onclick="gestion();"/>

<ul><div id="listeArticle"></div></ul>
<script src="js/mes-fonctions.js"></script>
</body>
</html>


Et un fichier js :
function gestion() {

// Déclaration
var mesarticles = new Array();

// Test de saisie
var article1 = document.getElementById('article1').value;
if(article1 =="") { alert('Merci de saisir au moins 1 article'); return false;}

// Affectation
var article1 = document.getElementById('article1').value;
var article2 = document.getElementById('article2').value;
var article3 = document.getElementById('article3').value;

// Test de saisie
if(article1 !="") {mesarticles[0] = article1;}
if(article2 !="") {mesarticles[1] = article2;}
if(article3 !="") {mesarticles[2] = article3;}

// Ecrire la listes des articles dans un div
document.getElementById("listeArticle").innerHTML += "<h2>Vos articles</h2>";

// Boucle avec += pour afficher plusieurs lignes
for(i=0; i < mesarticles.length; i=i+1) {
document.getElementById("listeArticle").innerHTML += "<li>"+mesarticles[i]+"</li>";
}

// fait disparaître le bouton
document.getElementById('btn_Valider').style.display="none";
}


Suivez les aventures des skippers aquitains sur EasyVoile.com
Flux RSS Easy-Micro - Abonnez-vous Easy-Micro [ François Bisch ]
Mardi 22 janvier 2019 - Semaine 04 - Saint Vincent (Demain: Saint Barnard)
Aujourd'hui, c'est l'anniversaire de Frank Leboeuf (1968-51 ans), footballeur français (défenseur). Autre 22 janvier: 1981 - Début de la série américaine Dallas sur les écrans français (TF1).
Haut de page Easy-Micro