diff options
Diffstat (limited to 'files/fr/learn/javascript/first_steps/arrays/index.html')
| -rw-r--r-- | files/fr/learn/javascript/first_steps/arrays/index.html | 41 |
1 files changed, 15 insertions, 26 deletions
diff --git a/files/fr/learn/javascript/first_steps/arrays/index.html b/files/fr/learn/javascript/first_steps/arrays/index.html index f38aeee181..b201776dd1 100644 --- a/files/fr/learn/javascript/first_steps/arrays/index.html +++ b/files/fr/learn/javascript/first_steps/arrays/index.html @@ -22,9 +22,9 @@ original_slug: Learn/JavaScript/First_steps/tableaux <div>{{PreviousMenuNext("Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps/Silly_story_generator", "Learn/JavaScript/First_steps")}}</div> -<p class="summary">Dans le dernier article de ce module, nous examinerons les tableaux — une façon de stocker proprement une liste d'éléments de données sous un seul nom de variable. Ici nous verrons pourquoi c'est utile, puis nous apprendrons comment créer un tableau, y retrouver, y ajouter ou en enlever les éléments dedans, et quelques à‑côtés en bonus.</p> +<p>Dans le dernier article de ce module, nous examinerons les tableaux — une façon de stocker proprement une liste d'éléments de données sous un seul nom de variable. Ici nous verrons pourquoi c'est utile, puis nous apprendrons comment créer un tableau, y retrouver, y ajouter ou en enlever les éléments dedans, et quelques à‑côtés en bonus.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -45,10 +45,7 @@ original_slug: Learn/JavaScript/First_steps/tableaux <p>Comme précédemment, initions‑nous aux bases pratiques des tableaux en entrant quelques exemples dans une console JavaScript. En voici une plus bas (vous pouvez aussi <a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html">ouvrir cette console</a> dans un onglet ou une fenêtre séparés ou utiliser la <a href="/fr/docs/Learn/Common_questions/What_are_browser_developer_tools">console développeur de l'explorateur</a> si vous préférez).</p> -<div class="hidden"> -<h6 id="Hidden_code">Hidden code</h6> - -<pre class="brush: html"><!DOCTYPE html> +<pre class="brush: html hidden"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> @@ -153,9 +150,8 @@ original_slug: Learn/JavaScript/First_steps/tableaux </script> </html></pre> -</div> -<p>{{ EmbedLiveSample('Hidden_code', '100%', 300) }}</p> +<p>{{ EmbedLiveSample('Quest‑ce_quun_tableau', '100%', 300) }}</p> <h3 id="Créer_un_tableau">Créer un tableau</h3> @@ -188,7 +184,8 @@ let random = ['arbre', 795, [0, 1, 2]];</pre> shopping; // shopping renvoie maintenant [ "crème de sésame", "lait", "fromage", "houmous", "nouilles" ]</pre> - <div class="note"><strong>Note </strong>: Nous l'avons déjà dit, mais enseigner c'est répéter — les ordinateurs commencent les décomptes à partir de 0 !</div> + <div class="note"> + <p><strong>Note :</strong> Nous l'avons déjà dit, mais enseigner c'est répéter — les ordinateurs commencent les décomptes à partir de 0 !</p></div> </li> <li>Notez qu'un tableau à l'intérieur d'un tableau est appelé un tableau multidimensionnel. Vous accédez à un des éléments de ce tableau interne en chaînant deux paires de crochets. Par exemple, pour avoir accès à l'un des éléments (le troisième) du tableau élément du tableau <code>random</code> (voir la section précédente), vous pouvez écrire quelque chose comme :</li> <li> @@ -228,7 +225,7 @@ for (var i = 0; i < sequence.length; i++) { <p>Souvent, vous serez confronté à des données brutes contenues dans une longue chaîne de caractères, et vous voudrez peut-être en extraire les éléments utiles sous une forme plus pratique pour en faire quelque chose, comme les afficher dans un tableau de données. Pour ce faire, nous pouvons utiliser la méthode {{jsxref ("String. prototype. prototype. split ()","split ()")}}. Dans sa formulation la plus simple, elle prend un seul paramètre, le caractère servant de séparateur ; elle renverra les sous-chaînes entre séparateurs en tant qu'éléments d'un tableau.</p> <div class="note"> -<p><strong>Note </strong>: D'accord, techniquement parlant c'est une méthode de chaîne, et non une méthode de tableau, mais nous la mettons dans le chapitre des tableaux car elle est bien à sa place ici.</p> +<p><strong>Note :</strong> D'accord, techniquement parlant c'est une méthode de chaîne, et non une méthode de tableau, mais nous la mettons dans le chapitre des tableaux car elle est bien à sa place ici.</p> </div> <ol> @@ -302,7 +299,7 @@ removedItem;</pre> </li> </ol> -<h2 id="Activité_affichons_les_produits_!">Activité : affichons les produits !</h2> +<h2 id="Activité_affichons_les_produits">Activité : affichons les produits</h2> <p>Revenons à l'exemple que nous avons décrit plus haut — afficher les noms des produits et leurs prix pour un envoi, puis faire le total des prix et l'afficher à la fin de la liste. Dans l'exemple modifiable ci‑dessous, il y a des commentaires numérotés — chacun d'entre eux marque l'emplacement où vous devez ajouter quelque chose au code. Voici :</p> @@ -315,10 +312,7 @@ removedItem;</pre> <li>Nous souhaitons que vous modifiez la ligne au‑dessous de <code>// number 5</code> de sorte que la variable <code>itemText</code> soit égale à « nom actuel de l'élément — $prix actuel de l'élément », par exemple « Shoes — $23.99 » dans chaque cas, de façon à ce qu'une information correcte soit affichée sur l'envoi. Il s'agit d'une simple concaténation de chaînes de caractères, chose qui doit vous être familière.</li> </ol> -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> - -<pre class="brush: html"><div class="output" style="min-height: 150px;"> +<pre class="brush: html hidden"><div class="output" style="min-height: 150px;"> <ul> @@ -363,7 +357,7 @@ totalBox.textContent = 'Total: $' + total.toFixed(2); </div> </pre> -<pre class="brush: js">var textarea = document.getElementById('code'); +<pre class="brush: js hidden">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var code = textarea.value; @@ -387,9 +381,8 @@ var jsSolution = 'var list = document.querySelector(\'.output ul\');\nvar totalB textarea.addEventListener('input', updateCode); window.addEventListener('load', updateCode); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', '100%', 600) }}</p> +<p>{{ EmbedLiveSample('Activité_affichons_les_produits', '100%', 600) }}</p> <h2 id="Activité_Top_5_des_recherches">Activité : Top 5 des recherches</h2> @@ -398,7 +391,7 @@ window.addEventListener('load', updateCode); <p>Dans cet exemple nous allons montrer une utilisation beaucoup plus simple — ici, nous allons vous fournir un site de recherche fictif, avec une boîte de recherche. Voici l'idée : quand un terme est entré dans la boîte de recherche, les 5 précédents termes entrés sont affichés dans la liste. Quand le nombre de termes dépasse 5, le dernier terme est supprimé chaque fois qu'un nouveau terme est ajouté ; ainsi, le 5 termes précédents sont toujours affichés.</p> <div class="note"> -<p><strong>Note</strong> : Dans une application réelle avec boîte de recherche, vous pourriez vraisemblablement cliquer sur un des termes de la liste pour revenir à la recherche précédente, et l'application afficherait les vrais résultats ! Mais pour le moment nous en resterons à quelque chose de simple.</p> +<p><strong>Note :</strong> Dans une application réelle avec boîte de recherche, vous pourriez vraisemblablement cliquer sur un des termes de la liste pour revenir à la recherche précédente, et l'application afficherait les vrais résultats ! Mais pour le moment nous en resterons à quelque chose de simple.</p> </div> <p>Pour terminer l'application, il vous faut :</p> @@ -408,10 +401,7 @@ window.addEventListener('load', updateCode); <li>Ajouter une ligne sous le commentaire <code>// number 2</code> pour supprimer la valeur en fin de liste du tableau.</li> </ol> -<div class="hidden"> -<h6 id="Playable_code_2">Playable code 2</h6> - -<pre class="brush: html"><div class="output" style="min-height: 150px;"> +<pre class="brush: html hidden"><div class="output" style="min-height: 150px;"> <input type="text"><button>Search</button> @@ -466,7 +456,7 @@ searchBtn.onclick = function() { </div> </pre> -<pre class="brush: js">var textarea = document.getElementById('code'); +<pre class="brush: js hidden">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var code = textarea.value; @@ -490,9 +480,8 @@ var jsSolution = 'var list = document.querySelector(\'.output ul\');\nvar search textarea.addEventListener('input', updateCode); window.addEventListener('load', updateCode); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code_2', '100%', 600) }}</p> +<p>{{ EmbedLiveSample('Activité_Top_5_des_recherches', '100%', 600) }}</p> <h2 id="Testez_vos_compétences_!">Testez vos compétences !</h2> |