Tableau multidimensionnel en Javascript

Comprendre Les Tableaux Multidimensionnels en JavaScript

Introduction

Les tableaux multidimensionnels en JavaScript sont des tableaux qui contiennent d’autres tableaux comme éléments. Ils permettent de créer des structures de données complexes comme des matrices ou des grilles. Comprendre les tableaux multidimensionnels est essentiel pour gérer des données en deux dimensions ou plus.

Qu’est-ce qu’un Tableau Multidimensionnel ?

Un tableau multidimensionnel est simplement un tableau de tableaux. Le plus courant est le tableau bidimensionnel, souvent utilisé pour représenter des matrices ou des grilles.

Création d’un Tableau Multidimensionnel

Vous pouvez créer un tableau bidimensionnel en imbriquant des tableaux à l’intérieur d’un autre tableau.


let damier = [
    [0, 1, 0, 1],
    [1, 0, 1, 0],
    [0, 1, 0, 1],
    [1, 0, 1, 0]
];

Dans cet exemple, damier est un tableau qui contient quatre tableaux, chacun représentant une ligne du damier.

Accéder aux Éléments d’un Tableau Multidimensionnel

Pour accéder à un élément spécifique dans un tableau multidimensionnel, vous devez utiliser deux indices : un pour la ligne et un pour la colonne.


let damier = [
    [0, 1, 0, 1],
    [1, 0, 1, 0],
    [0, 1, 0, 1],
    [1, 0, 1, 0]
];

let valeur = damier[1][2]; // Accède à l’élément de la deuxième ligne, troisième colonne
console.log(valeur); // 1

Modifier les Éléments d’un Tableau Multidimensionnel

Vous pouvez modifier les éléments en utilisant leurs indices respectifs.


let damier = [
    [0, 1, 0, 1],
    [1, 0, 1, 0],
    [0, 1, 0, 1],
    [1, 0, 1, 0]
];

damier[2][3] = 0; // Change l’élément de la troisième ligne, quatrième colonne à 0
console.log(damier[2][3]); // 0

Parcourir un Tableau Multidimensionnel

Utilisez des boucles imbriquées pour parcourir tous les éléments d’un tableau multidimensionnel.


let damier = [
    [0, 1, 0, 1],
    [1, 0, 1, 0],
    [0, 1, 0, 1],
    [1, 0, 1, 0]
];

for (let i = 0; i < damier.length; i++) {
for (let j = 0; j < damier[i].length; j++) {
console.log(« Élément à [ » + i + « ][ » + j + « ] : » + damier[i][j]);
}
}

Dans cet exemple, la boucle externe parcourt chaque ligne et la boucle interne parcourt chaque élément de la ligne.

Exemple Pratique : Créer un Damier

Voyons un exemple où nous créons dynamiquement un damier de 8×8.


let taille = 8;
let damier = [];

for (let i = 0; i < taille; i++) {
    damier[i] = []; // Crée une nouvelle ligne
    for (let j = 0; j < taille; j++) {
        if ((i + j) % 2 === 0) {
            damier[i][j] = 0; // Case blanche
        } else {
            damier[i][j] = 1; // Case noire
        }
    }
}

console.log(damier);

Dans l’exemple ci-dessus :

La boucle externe crée chaque ligne du damier.
La boucle interne remplit chaque case avec 0 ou 1, en alternant pour créer le motif du damier.

Pour créer un damier en HTML, CSS, et JavaScript, où chaque case est en noir ou blanc et affiche la référence du tableau correspondante au centre, suivez ces étapes :

HTML

Créez une structure de base en HTML pour le conteneur du damier.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Damier en JavaScript par Développeur Pro</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="damier"></div>
    <script src="script.js"></script>
</body>
</html>

CSS

Ajoutez du style Css pour le damier et les cases.


/* styles.css */
#damier {
    display: grid;
    grid-template-columns: repeat(8, 50px);
    grid-template-rows: repeat(8, 50px);
}

.case {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    font-weight: bold;
}

.case.noire {
    background-color: black;
    color: white;
}

.case.blanche {
    background-color: white;
    color: black;
}

JavaScript

Ajoutez le code JavaScript pour générer le damier et insérer les cases avec les références.


// script.js
let taille = 8;
let damier = document.getElementById('damier');

for (let i = 0; i < taille; i++) {
    for (let j = 0; j < taille; j++) {
        let caseDiv = document.createElement('div');
        caseDiv.classList.add('case');
        
        if ((i + j) % 2 === 0) {
            caseDiv.classList.add('blanche');
        } else {
            caseDiv.classList.add('noire');
        }
        
        caseDiv.innerText = `${i},${j}`;
        damier.appendChild(caseDiv);
    }
}

Explication

HTML : La structure de base contient une div avec l’ID damier pour contenir les cases et lie les fichiers CSS et JavaScript.
CSS :
- Le conteneur #damier est configuré en grille avec 8 colonnes et 8 lignes de 50 pixels chacune.
- Chaque .case est stylisée pour avoir une taille de 50×50 pixels et centrer le texte.
- Les classes .noire et .blanche définissent les couleurs de fond et de texte.
JavaScript :
- Le script génère le damier en utilisant deux boucles for imbriquées.
- Pour chaque case, il crée un div avec la classe case.
- La couleur de la case est déterminée par la somme des indices i et j.
- Les références du tableau sont insérées comme texte dans chaque case.
- Chaque div est ajouté au conteneur damier.

Avec cette approche, vous obtenez un damier interactif en noir et blanc avec les références de tableau affichées au centre de chaque case.

Conclusion

Les tableaux multidimensionnels en JavaScript vous permettent de gérer des données en deux dimensions ou plus de efficacement. En créant, accédant et modifiant des tableaux de tableaux, vous pouvez représenter des structures de données complexes comme des grilles ou des matrices.

Pour approfondir vos connaissances et maîtriser Javascript, Je t’offre un guide bonus exclusif. Ce guide t’aideras en Javascript avec aisance. Perfectionne tes compétences en JavaScript et de deviens un expert en JS !

Quelques liens en supplément de ce cours :

https://developpeur-pro.com/cours-javascript-les-bases

https://developer.mozilla.org/fr

https://stackoverflow.com/

Rejoignez notre Newsletter et Restez Informé !

Vous souhaitez rester à jour avec les dernières tendances et actualités du monde du développement et le métier de développeur. Comment devenir développeur pro ? Rejoignez notre newsletter pour obtenir un accès exclusif à du contenu premium, des astuces de codage, des mises à jour sur les nouvelles fonctionnalités et bien plus encore !

Avantages de l’Inscription

Restez Informé: Recevez des articles informatifs sur les dernières avancées et les meilleures pratiques de codage et les softkills.
Promos Exclusives: Accédez à des formations détaillés et à des exemples de code pour améliorer vos compétences en programmation.
Aperçus des Nouveautés: Soyez parmi les premiers à découvrir les nouvelles fonctionnalités et les frameworks émergents dans l’écosystème du développement FrontEnd et Backend.
Communauté Engagée: Rejoignez une communauté passionnée de développeurs et partagez vos idées, questions et expériences.

Comment S’Inscrire

C’est simple et rapide ! Remplissez le formulaire d’inscription avec votre adresse e-mail et cliquez sur « S’Inscrire ». Vous recevrez régulièrement notre newsletter dans votre boîte de réception.

L’inscription à notre newsletter est un moyen idéal de rester informé et de progresser dans le domaine de la programmation et du développement pour devenir un développeur professionnel ou une développeuse pro.