{"id":5614,"date":"2024-08-29T00:12:16","date_gmt":"2024-08-29T00:12:16","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/creer-un-tableau-a-dimensions-en-javascript\/"},"modified":"2025-01-07T16:27:09","modified_gmt":"2025-01-07T16:27:09","slug":"creer-un-tableau-a-dimensions-en-javascript","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/creer-un-tableau-a-dimensions-en-javascript\/","title":{"rendered":"8.3 Cr\u00e9er un Tableau \u00e0 Dimensions en JavaScript"},"content":{"rendered":"\n\n\n<p><strong>Cr\u00e9er un Tableau \u00e0 Dimensions en JavaScript<\/strong> est une \u00e9tape essentielle pour structurer et manipuler des donn\u00e9es de mani\u00e8re efficace dans vos applications web. Dans cet article, nous allons apprendre \u00e0 cr\u00e9er et utiliser des tableaux multidimensionnels en JavaScript \u00e0 travers des exemples concrets.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 la Cr\u00e9ation de Tableaux Multidimensionnels en JavaScript<\/h2>\n\n\n\n<div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n  <iframe src=\"https:\/\/player.vimeo.com\/video\/658886067?dnt=1&#038;fullscreen=0&#038;pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n  \n  <!-- Popup Desktop -->\n  <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-spciale-\">Profitez de l\u2019offre sp\u00e9ciale !<\/h2>\n    <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n  <\/div>\n\n  <!-- Popup Mobile -->\n  <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Cours sp\u00e9cial \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    var iframe = document.getElementById('vimeoPlayer');\n    var player = new Vimeo.Player(iframe);\n    var isPopupDisplayed = false;\n\n    player.on('play', function() {\n        if (!isPopupDisplayed) {\n            player.on('timeupdate', function(data) {\n                if (data.seconds >= 120 && !isPopupDisplayed) { \/\/ 120 seconds = 2 minutes\n                    \/\/ Pause the video and display the popup\n                    player.pause().then(function() {\n                        if (window.innerWidth > 768) {\n                            document.querySelector('.desktop-popup').style.display = 'block';\n                        } else {\n                            document.querySelector('.mobile-popup').style.display = 'block';\n                        }\n                        fetchPriceAndUpdatePopup();\n                        isPopupDisplayed = true;\n                    });\n                }\n            });\n        }\n    });\n\n    function fetchPriceAndUpdatePopup() {\n        fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')\n            .then(response => response.text())\n            .then(html => {\n                var parser = new DOMParser();\n                var fetchedDoc = parser.parseFromString(html, 'text\/html');\n                var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n                var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n                var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n                var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n\n                document.getElementById('price').textContent = price;\n                document.getElementById('priceMobile').textContent = price;\n                document.querySelector('.desktop-popup del').textContent = originalPrice;\n                document.querySelector('.mobile-popup del').textContent = originalPrice;\n            })\n            .catch(error => console.error('Error fetching the price:', error));\n    }\n\n    function closePopup() {\n        document.querySelector('.desktop-popup').style.display = 'none';\n        document.querySelector('.mobile-popup').style.display = 'none';\n        player.play(); \/\/ Allows resuming the video only after closing the popup\n    }\n});\n<\/script>\n\n\n\n<p>Un tableau multidimensionnel est un tableau qui contient d&rsquo;autres tableaux comme \u00e9l\u00e9ments. Cela permet de cr\u00e9er des structures de donn\u00e9es plus complexes, comme des grilles, des matrices ou des tableaux de tableaux. Voyons comment cr\u00e9er et manipuler de tels tableaux en JavaScript.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cr\u00e9er un Tableau \u00e0 Deux Dimensions en JavaScript<\/h3>\n\n\n\n<p>Pour cr\u00e9er un tableau \u00e0 deux dimensions en JavaScript, il suffit de cr\u00e9er un tableau dont les \u00e9l\u00e9ments sont eux-m\u00eames des tableaux. Voici un exemple simple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Cr\u00e9er un tableau \u00e0 deux dimensions\nlet tableau2D = &#91;\n  &#91;1, 2, 3],\n  &#91;4, 5, 6],\n  &#91;7, 8, 9]\n];\n\nconsole.log(tableau2D);\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Acc\u00e9der aux \u00c9l\u00e9ments d&rsquo;un Tableau \u00e0 Deux Dimensions<\/h3>\n\n\n\n<p>Pour acc\u00e9der aux \u00e9l\u00e9ments d&rsquo;un tableau \u00e0 deux dimensions, on utilise deux indices : le premier pour sp\u00e9cifier la ligne et le second pour sp\u00e9cifier la colonne. Voici comment acc\u00e9der aux \u00e9l\u00e9ments :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Acc\u00e9der \u00e0 l'\u00e9l\u00e9ment de la premi\u00e8re ligne, deuxi\u00e8me colonne\nlet element = tableau2D&#91;0]&#91;1];\nconsole.log(element); \/\/ Affiche 2\n\n\/\/ Modifier l'\u00e9l\u00e9ment de la troisi\u00e8me ligne, premi\u00e8re colonne\ntableau2D&#91;2]&#91;0] = 10;\nconsole.log(tableau2D&#91;2]&#91;0]); \/\/ Affiche 10\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Parcourir un Tableau \u00e0 Deux Dimensions<\/h3>\n\n\n\n<p>Il est souvent n\u00e9cessaire de parcourir un tableau \u00e0 deux dimensions. On peut utiliser des boucles imbriqu\u00e9es pour it\u00e9rer sur chaque \u00e9l\u00e9ment :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Parcourir le tableau \u00e0 deux dimensions\nfor (let i = 0; i &lt; tableau2D.length; i++) {\n  for (let j = 0; j &lt; tableau2D&#91;i].length; j++) {\n    console.log(tableau2D&#91;i]&#91;j]);\n  }\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples Avanc\u00e9s de Tableaux Multidimensionnels<\/h3>\n\n\n\n<p>Les tableaux multidimensionnels peuvent \u00eatre utilis\u00e9s pour des t\u00e2ches plus complexes. Par exemple, pour repr\u00e9senter une matrice ou pour stocker des donn\u00e9es tabulaires. Voici un exemple de matrice et comment effectuer des op\u00e9rations dessus :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Cr\u00e9er une matrice 3x3\nlet matrice = &#91;\n  &#91;1, 2, 3],\n  &#91;4, 5, 6],\n  &#91;7, 8, 9]\n];\n\n\/\/ Fonction pour ajouter deux \nmatrices de m\u00eame taille\nfunction ajouterMatrices(matrice1, matrice2) {\n  let resultat = &#91;];\n  for (let i = 0; i &lt; matrice1.length; i++) {\n    let ligne = &#91;];\n    for (let j = 0; j &lt; matrice1&#91;i].length; j++) {\n      ligne.push(matrice1&#91;i]&#91;j] + matrice2&#91;i]&#91;j]);\n    }\n    resultat.push(ligne);\n  }\n  return resultat;\n}\n\n\/\/ Exemple d'utilisation\nlet matrice2 = &#91;\n  &#91;9, 8, 7],\n  &#91;6, 5, 4],\n  &#91;3, 2, 1]\n];\n\nlet somme = ajouterMatrices(matrice, matrice2);\nconsole.log(somme);\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation des Tableaux Multidimensionnels pour les Donn\u00e9es Tabulaires<\/h3>\n\n\n\n<p>Les tableaux multidimensionnels sont parfaits pour stocker des donn\u00e9es tabulaires, comme les informations d&rsquo;un journal ou les scores d&rsquo;\u00e9tudiants. Voici un exemple de stockage et de manipulation de donn\u00e9es tabulaires :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Stocker les scores des \u00e9tudiants dans un tableau multidimensionnel\nlet scores = &#91;\n  &#91;\"Alice\", 85, 90, 88],\n  &#91;\"Bob\", 78, 82, 84],\n  &#91;\"Charlie\", 92, 88, 91]\n];\n\n\/\/ Calculer la moyenne des scores pour chaque \u00e9tudiant\nfor (let i = 0; i &lt; scores.length; i++) {\n  let total = 0;\n  for (let j = 1; j &lt; scores&#91;i].length; j++) {\n    total += scores&#91;i]&#91;j];\n  }\n  let moyenne = total \/ (scores&#91;i].length - 1);\n  console.log(`${scores&#91;i]&#91;0]} - Moyenne: ${moyenne}`);\n}\n<\/code><\/pre>\n\n\n\n<p>En utilisant cette m\u00e9thode de stockage, nous pouvons facilement acc\u00e9der, manipuler et analyser les donn\u00e9es de chaque \u00e9tudiant.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion sur les Tableaux \u00e0 Dimensions en JavaScript<\/h2>\n\n\n\n<p>Cr\u00e9er et manipuler des <strong>tableaux \u00e0 dimensions en JavaScript<\/strong> est une comp\u00e9tence essentielle pour d\u00e9velopper des applications web robustes. Avec ces connaissances, vous pouvez stocker des donn\u00e9es complexes, les manipuler et les afficher de mani\u00e8re efficace. Pour approfondir vos connaissances, vous pouvez consulter notre <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-un-tableau-en-javascript\" target=\"_blank\" rel=\"noopener\">article sur les tableaux en JavaScript<\/a> pour comprendre les bases. Pour plus de tutoriels, consultez aussi notre article sur <a href=\"https:\/\/wikiform.fr\/codespace\/creer-un-tableau-simple-en-javascript-tutoriel\" target=\"_blank\" rel=\"noopener\">la cr\u00e9ation de tableaux simples en JavaScript<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2023\/10\/javascript-formation-50-off.png\" loading=\"lazy\" alt=\"Learnify Formation JavaScript Offre 50%\" title=\"\"><\/a>\n\n\n\n<p>Pour en savoir plus sur le JavaScript, n&rsquo;h\u00e9sitez pas \u00e0 lire notre guide complet sur les <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-javascript-explications-definition\" target=\"_blank\" rel=\"noopener\">fondamentaux de JavaScript<\/a>, ou explorez notre liste des <a href=\"https:\/\/wikiform.fr\/codespace\/extensions-pour-javascript-guide-complet\" target=\"_blank\" rel=\"noopener\">meilleures extensions pour JavaScript<\/a>. Vous pouvez \u00e9galement d\u00e9couvrir comment <a href=\"https:\/\/wikiform.fr\/codespace\/placer-code-javascript-guide-pratique\" target=\"_blank\" rel=\"noopener\">placer efficacement votre code JavaScript<\/a> dans vos projets.<\/p>\n\n\n\n<p>Pour apprendre les bases de JavaScript, lisez notre <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\">tutoriel d\u00e9taill\u00e9 sur les fondamentaux de JavaScript<\/a>. Continuez \u00e0 explorer les diff\u00e9rentes fonctionnalit\u00e9s des tableaux en JavaScript pour am\u00e9liorer vos comp\u00e9tences en d\u00e9veloppement, comme comment <a href=\"https:\/\/wikiform.fr\/codespace\/ajouter-element-au-tableau-en-javascript-push-unshift\" target=\"_blank\" rel=\"noopener\">ajouter des \u00e9l\u00e9ments au tableau<\/a> ou comment <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-fonction-splice-en-javascript-tutoriel\" target=\"_blank\" rel=\"noopener\">utiliser la fonction splice<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-JAVASCRIPT-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation JavaScript Offre 50%\" title=\"\"><\/a>\n\n\n","protected":false},"excerpt":{"rendered":"<p>Cr\u00e9er un Tableau \u00e0 Dimensions en JavaScript est une \u00e9tape essentielle pour structurer et manipuler des donn\u00e9es de mani\u00e8re efficace dans vos applications web. Dans&#8230;<\/p>\n","protected":false},"author":3,"featured_media":2867,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[18],"class_list":["post-5614","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-4-javascript","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5614","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=5614"}],"version-history":[{"count":2,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5614\/revisions"}],"predecessor-version":[{"id":6103,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5614\/revisions\/6103"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2867"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5614"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5614"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5614"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}