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)

Soit on déclare une variable de type tableau (une matrice) avec le mot réservé "new" associé à l'objet Array(), soit on utilise le raccourci []. Exemple :
let montableau = new Array();
let montableau = [];
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. Idem avec le raccourci [].

Voici comment créer ce tableau, c'est à dire comment remplir cette variable:
<script>
let montableau = []; // ou bien let 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>
let montableau = [];
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.

Autre technique :
<script>
let fruits = [
  { nom: "Kiwi", vitamine: "C" },
  { nom: "Mangue", vitamine: "A" },
  { nom: "Cassis", vitamine: "E" }
];</script>
Pour afficher ce tableau dans la console, vous pouvez utiliser l'instruction window.console.table(fruits);

Voici comment afficher une donnée d'un tableau:
<script>
window.console.log(montableau[2]); // résultat : bananes
</script>
L'exemple ci-dessus affiche bananes puisqu'un tableau commence toujours à 0.

Affiche le dernier élément d'un tableau:
<script>
let ledernier = montableau[montableau.length - 1];
</script>
La propriété length d'un tableau indique le nombre d'éléments qu'il contient.

Pour afficher plusieurs données d'un tableau, on utilise une boucle de programme (ici la boucle for):
<script>
for(let i=0; i < montableau.length; i++) {
window.console.log(montableau[i]," ");
}
</script>
Résultat : pommes poires bananes oranges

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 Passage par valeur ou référence

Classiquement les nombres, les valeurs logiques et les chaînes sont passés par valeur.

let nombreDInvites = 20;

let totalnombreDInvites = nombreDInvites; // 20


c'est la valeur 20 qui est copiée dans la nouvelle variable (totalnombreDInvites), et aucun lien n'est maintenu entre les deux variables. Ce n'est pas le cas avec les objets et tableaux, qui sont passés par référence.

let artiste = {
    nom: "Daniel Radcliffe",
    age: 32,
    disponible: true
};

let toutLesArtistes = [artiste]; // nouveau tableau contenant l'objet ci-dessus

artiste.disponible = false; // modification de l'objet

console.log(toutLesArtistes ) // affiche { nom: "Daniel Radcliffe", âge: 32, disponible: false }
La propriété "disponible" est passée à false dans le tableau toutLesArtistes alors qu'elle est modifiée dans l'objet artiste

JavaScript Travaillez sur les tableaux

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>
 
let mesphotos = [];
let nbredephotos = 3;
 
// remplissage dynamique :
for(let i=0; i < nbredephotos; i++) {
mesphotos[i] = "photo_" + i;
}
 
// Affichage dynamique des photos :
for(let i=0; i < mesphotos.length; i++) {
window.console.log("<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>


Le fichier js :
function gestion() {

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

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


// Affectation
let article1 = document.getElementById('article1').value;
let article2 = document.getElementById('article2').value;
let 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";
}

JavaScript Sets et maps

Les ensembles (sets) et les cartes (maps) sont d'autres types de collection en JavaScript

Set

En JavaScript, un set, ou ensemble, est une liste non ordonnée. Cela signifie que vous ne pouvez pas récupérer de façon fiable les éléments de liste, car ils n'ont pas d'indice fixe. Vous pouvez par contre ajouter et supprimer des éléments (les doublons ne sont pas autorisés) et vérifier si un ensemble contient ou non un élément particulier. Les ensembles peuvent être pratiques pour enregistrer les utilisateurs en ligne à un instant donné, pour vérifier s'ils le sont ou non. Plus d'infos sur les Sets

Map

En revanche, une map est une liste ordonnée de paires clés/valeurs. Bien qu'elle ressemble à un objet, il y a des différences importantes. Par exemple, les clés peuvent avoir n'importe quelle valeur (et pas seulement des chaînes) dans les cartes. Vous pouvez facilement trouver combien d'éléments une map contient, et il est possible de filtrer ou modifier dans certains cas les paires clés/valeurs. Plus d'infos sur les Maps

> Faire le Quizz OpenClassRooms sur les variables et les tableaux

Voir ensuite les structures de contrôle Javascript en commençant par l'instruction conditionnelle IF

< Page précédente JAVASCRIPT Page suivante >