initial commit

19 files changed, 5799 insertions, 0 deletions

diff --git a/files/fr/learn/javascript/first_steps/a_first_splash/index.html b/files/fr/learn/javascript/first_steps/a_first_splash/index.html
new file mode 100644
index 0000000000..674bcefd33
--- /dev/null
+++ b/files/fr/learn/javascript/first_steps/a_first_splash/index.html
@@ -0,0 +1,708 @@
+---
+title: Notre premier code JavaScript
+slug: Learn/JavaScript/First_steps/A_first_splash
+tags:
+  - Apprendre
+  - Article
+  - CodingScripting
+  - Débutant
+  - Fonctions
+  - JavaScript
+  - Objets
+  - Opérateurs
+  - Variables
+  - structures conditionnelles
+translation_of: Learn/JavaScript/First_steps/A_first_splash
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}</div>
+
+<p class="summary">Maintenant que vous avez appris quelques éléments théoriques sur le JavaScript, et ce que vous pouvez faire avec, nous allons vous donner un cours intensif sur les fonctionnalités basiques du JavaScript avec un tutoriel entièrement pratique. Vous allez construire un jeu simple, étape par étape. Il s'agit de faire deviner un nombre, notre jeu s'appelle « Guess the number ».</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Une culture informatique basique, et des notions de HTML et CSS.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>Avoir une première expérience d'écriture de JavaScript et comprendre les implications de l'écriture d'un programme en JavaScript.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Ne vous attendez pas à comprendre tout le code en détail immédiatement — nous voulons simplement vous présenter les grands concepts pour le moment, et vous donner une idée de la façon dont JavaScript (et d'autres langages de programmation) fonctionne. Dans les articles suivants, vous reviendrez plus en détails sur toutes ces fonctionnalités !</p>
+
+<div class="note">
+<p>Note : De nombreuses fonctionnalités que vous allez voir en JavaScript sont identiques à celles d'autres langages de programmation — fonctions, boucles, etc. La syntaxe du code est différente mais les concepts sont globalement identiques.</p>
+</div>
+
+<h2 id="Penser_comme_un_programmeur">Penser comme un programmeur</h2>
+
+<p>Une des choses les plus difficiles à apprendre en programmation n'est pas la syntaxe, mais comment l'appliquer afin de résoudre un problème réel. Vous devez commencer à penser comme un programmeur — ce qui implique généralement d'examiner les tâches que votre programme doit effectuer, de déterminer les fonctionnalités du code nécessaires à leurs réalisations et comment les faire fonctionner ensemble.</p>
+
+<p>Cela requiert un mélange de travail acharné, d'expérience avec la syntaxe de programmation (de manière générale) et surtout de la pratique — ainsi qu'un peu de créativité. Plus vous allez coder, plus vous aller vous améliorer. On ne peut pas garantir que vous aurez un « cerveau de développeur » en 5 minutes, mais nous allons vous donner plein d'occasions pour pratiquer cette façon de penser, tout au long du cours.</p>
+
+<p>Maintenant que vous avez cela en tête, regardons l'exemple que nous allons construire dans cet article et comment le découper en plusieurs tâches qui ont du sens.</p>
+
+<h2 id="Exemple_—_Jeu_Guess_the_number">Exemple — Jeu : Guess the number</h2>
+
+<p><span id="result_box" lang="fr"><span>Dans cet article, nous allons vous montrer comment construire le jeu simple que vous pouvez voir ci-dessous :</span></span></p>
+
+<div class="hidden">
+<h6 id="Top_hidden_code">Top hidden code</h6>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+
+&lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Number guessing game&lt;/title&gt;
+    &lt;style&gt;
+        html {
+            font-family: sans-serif;
+        }
+
+        body {
+            width: 50%;
+            max-width: 800px;
+            min-width: 480px;
+            margin: 0 auto;
+        }
+
+        .lastResult {
+            color: white;
+            padding: 3px;
+        }
+    &lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+    &lt;h1&gt;Deviner un nombre&lt;/h1&gt;
+    &lt;p&gt;Nous avons généré un nombre aléatoire entre 1 et 100, tentez de le deviner en 10 tours maximum. Pour chaque tentative, nous vous dirons si votre estimation est trop ou pas assez élevée.&lt;/p&gt;
+    &lt;div class="form"&gt; &lt;label for="guessField"&gt;Entrez votre proposition : &lt;/label&gt;&lt;input type="text" id="guessField" class="guessField"&gt; &lt;input type="submit" value="Valider" class="guessSubmit"&gt; &lt;/div&gt;
+    &lt;div class="resultParas"&gt;
+        &lt;p class="guesses"&gt;&lt;/p&gt;
+        &lt;p class="lastResult"&gt;&lt;/p&gt;
+        &lt;p class="lowOrHi"&gt;&lt;/p&gt;
+    &lt;/div&gt;
+&lt;/body&gt;
+&lt;script&gt;
+    // Le JavaScript se place ici
+    let randomNumber = Math.floor(Math.random() * 100) + 1;
+    let guesses = document.querySelector('.guesses');
+    let lastResult = document.querySelector('.lastResult');
+    let lowOrHi = document.querySelector('.lowOrHi');
+    let guessSubmit = document.querySelector('.guessSubmit');
+    let guessField = document.querySelector('.guessField');
+    let guessCount = 1;
+    let resetButton;
+
+    function checkGuess() {
+      let userGuess = Number(guessField.value);
+      if (guessCount === 1) {
+        guesses.textContent = 'Propositions précédentes : ';
+      }
+
+      guesses.textContent += userGuess + ' ';
+
+      if (userGuess === randomNumber) {
+        lastResult.textContent = 'Bravo, vous avez trouvé le nombre !';
+        lastResult.style.backgroundColor = 'green';
+        lowOrHi.textContent = '';
+        setGameOver();
+      } else if (guessCount === 10) {
+        lastResult.textContent = '!!! PERDU !!!';
+        lowOrHi.textContent = '';
+        setGameOver();
+      } else {
+        lastResult.textContent = 'Faux!';
+        lastResult.style.backgroundColor = 'red';
+        if (userGuess &lt; randomNumber) {
+          lowOrHi.textContent='Le nombre saisi est trop petit !' ;
+        } else if(userGuess &gt; randomNumber) {
+          lowOrHi.textContent = 'Le nombre saisi est trop grand!';
+        }
+      }
+
+      guessCount++;
+      guessField.value = '';
+    }
+
+    guessSubmit.addEventListener('click', checkGuess);
+
+    function setGameOver() {
+      guessField.disabled = true;
+      guessSubmit.disabled = true;
+      resetButton = document.createElement('button');
+      resetButton.textContent = 'Rejouer';
+      document.body.appendChild(resetButton);
+      resetButton.addEventListener('click', resetGame);
+    }
+
+    function resetGame() {
+      guessCount = 1;
+      let resetParas = document.querySelectorAll('.resultParas p');
+      for (let i = 0 ; i &lt; resetParas.length ; i++) {
+        resetParas[i].textContent='';
+      }
+
+      resetButton.parentNode.removeChild(resetButton);
+      guessField.disabled = false;
+      guessSubmit.disabled = false;
+      guessField.value='';
+      guessField.focus();
+      lastResult.style.backgroundColor='white';
+      randomNumber=Math.floor(Math.random() * 100) + 1;
+    }
+&lt;/script&gt;
+
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Top_hidden_code', '100%', 320, "", "", "hide-codepen-jsfiddle") }}</p>
+
+<p><span id="result_box" lang="fr"><span>Essayez de jouer et familiarisez-vous avec ce jeu avant de continuer.</span><br>
+ <br>
+ <span>Imaginons que votre patron vous ait donné le résumé suivant pour créer ce jeu :</span></span></p>
+
+<blockquote>
+<p><span id="result_box" lang="fr"><span>Je vous demande de créer un jeu simple de devinette de </span><span>nombre. Le jeu choisit aléatoirement un nombre entre 1 et 100, puis il met le joueur au défi de le deviner en 10 tentatives maxi.</span> <span>À chaque tour, le joueur doit être informé s'il a deviné ou non le bon nombre — si ce n'est pas le cas, le jeu lui indique si son estimation est trop basse ou trop élevée.</span> Le jeu<span> doit également rappeler au joueur les nombres déjà proposés.</span> <span>Le jeu se termine quand le joueur a deviné le nombre mystère, ou s'il a épuisé ses 10 chances.</span> </span>À<span lang="fr"><span> la fin du jeu, le joueur a la possibilité de débuter une nouvelle partie.</span></span></p>
+</blockquote>
+
+<p>La première chose à faire en regardant ce résumé, c'est de le décomposer en tâches simples et codables comme le ferait un programmeur :</p>
+
+<ol>
+ <li>Générer un nombre aléatoire entre 1 et 100.</li>
+ <li>Stocker le nombre de tours déjà joués. Commencer par 1.</li>
+ <li>Fournir au joueur le moyen de saisir un nombre.</li>
+ <li>Stocker l'ensemble des propositions de nombres pour que le joueur puisse les consulter.</li>
+ <li>Vérifier si le nombre saisi par le joueur est correct.</li>
+ <li>S'il est correct :
+  <ol>
+   <li>Afficher un message de félicitations.</li>
+   <li>Empêcher que le joueur saisisse de nouveau un nombre.</li>
+   <li>Afficher un contrôle pour que le joueur puisse rejouer.</li>
+  </ol>
+ </li>
+ <li>S'il est faux et que le joueur a encore des tours à jouer :
+  <ol>
+   <li>Informer le joueur que sa proposition de nombre est fausse.</li>
+   <li>Lui permettre d'entrer une nouvelle proposition de nombre.</li>
+   <li>Incrémenter le nombre de tours de 1.</li>
+  </ol>
+ </li>
+ <li>S'il est faux et que le joueur n'a plus de tours à jouer :
+  <ol>
+   <li>Informer le joueur qu'il a perdu et que la partie est finie.</li>
+   <li>Empêcher que le joueur saisisse de nouveau un nombre.</li>
+   <li>Afficher un contrôle pour que le joueur puisse rejouer.</li>
+  </ol>
+ </li>
+ <li><span id="result_box" lang="fr"><span title="Once the game restarts, make sure the game logic and UI are completely reset, then go back to step 1.
+
+">Une fois le jeu redémarré, s'assurer que la logique du jeu et l'interface utilisateur sont complètement réinitialisées, puis revenir à l'étape 1.</span></span></li>
+</ol>
+
+<p><span id="result_box" lang="fr"><span title="Let's now move forward, looking at how we can turn these steps into code, building up the example, and exploring JavaScript features as we go.">Voyons maintenant comment nous pouvons transformer ces étapes en code. Nous allons développer cet exemple et explorer les fonctionnalités JavaScript </span></span><span lang="fr"><span title="Let's now move forward, looking at how we can turn these steps into code, building up the example, and exploring JavaScript features as we go.">au fur et à mesure.</span></span></p>
+
+<h3 id="Configuration_initiale">Configuration initiale</h3>
+
+<p>Pour commencer ce didacticiel, faites une copie locale du fichier <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html">number-guessing-game-start.html</a>  (à voir <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html">directement ici</a>). Ouvrez-le dans votre éditeur de code et votre navigateur web. Pour l'instant, vous ne verrez qu'un titre, un paragraphe d'instructions et un formulaire pour entrer une estimation, mais le formulaire est pour l'instant inactif.</p>
+
+<p>L'endroit où nous allons ajouter tout notre code se trouve dans l'élément {{htmlelement ("script")}} au bas du code HTML :</p>
+
+<pre class="brush: html">&lt;script&gt;
+
+  // Votre code JavaScript se place ici
+
+&lt;/script&gt;
+</pre>
+
+<h3 id="Ajouter_des_variables_pour_stocker_les_données">Ajouter des variables pour stocker les données</h3>
+
+<p>Commençons. Tout d'abord, ajoutez les lignes suivantes dans l'élément {{htmlelement ("script")}} :</p>
+
+<pre class="brush: js">let randomNumber = Math.floor(Math.random() * 100) + 1;
+
+let guesses = document.querySelector('.guesses');
+let lastResult = document.querySelector('.lastResult');
+let lowOrHi = document.querySelector('.lowOrHi');
+
+let guessSubmit = document.querySelector('.guessSubmit');
+let guessField = document.querySelector('.guessField');
+
+let guessCount = 1;
+let resetButton;</pre>
+
+<p>Cette partie de code définit les variables nécessaires au stockage des données que notre programme utilisera. Les variables sont essentiellement des conteneurs de valeurs (tels que des nombres ou des chaînes de texte). Une variable se crée avec le mot-clé <code>let</code> suivi du nom de la variable. Vous pouvez ensuite attribuer une valeur à la variable avec le signe égal (<code>=</code>) suivi de la valeur que vous voulez lui donner.</p>
+
+<p>Dans notre exemple :</p>
+
+<ul>
+ <li>La première variable — <code>randomNumber</code> — reçoit le nombre aléatoire entre 1 et 100, calculé en utilisant un algorithme mathématique.</li>
+ <li>Les trois variables suivantes sont chacune faite pour stocker une référence aux paragraphes de résultats dans le HTML ; elles sont utilisées pour insérer des valeurs dans les paragraphes plus tard dans le code :
+  <pre class="brush: html">&lt;p class="guesses"&gt;&lt;/p&gt;
+&lt;p class="lastResult"&gt;&lt;/p&gt;
+&lt;p class="lowOrHi"&gt;&lt;/p&gt;</pre>
+ </li>
+ <li>Les deux variables suivantes stockent des références au champ de saisie du formulaire et au bouton de soumission ; elles sont utilisées pour écouter l'envoi de la supposition (guess) plus tard.
+  <pre class="brush: html">&lt;label for="guessField"&gt;Enter a guess: &lt;/label&gt;&lt;input type="text" id="guessField" class="guessField"&gt;
+&lt;input type="submit" value="Submit guess" class="guessSubmit"&gt;</pre>
+ </li>
+ <li>Nos deux dernières variables stockent un nombre de suppositions qui vaut initialement 1 (utilisées pour garder une trace du nombre de suppositions que le joueur a faite) et une référence à un bouton de réinitialisation qui n'existe pas encore.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note </strong>: Vous en apprendrez beaucoup plus sur les variables plus tard dans le cours, en commençant par le <a href="/fr/docs/Learn/JavaScript/First_steps/Variables">prochain article</a>.</p>
+</div>
+
+<h3 id="Fonctions">Fonctions</h3>
+
+<p>Ajoutez maintenant ce qui suit dans votre code JavaScript :</p>
+
+<pre class="brush: js">function checkGuess() {
+  alert('Je suis un espace réservé');
+}</pre>
+
+<p>Les fonctions sont des blocs de code réutilisables que vous pouvez écrire une fois et exécuter encore et encore, pour éviter de réécrire le même code tout le temps. C'est vraiment utile. Il y a plusieurs façons de définir les fonctions, mais pour l'instant nous allons nous concentrer sur un type simple. Ici, nous avons défini une fonction en utilisant le mot-clé <code>function</code> accompagné de son nom suivi de parenthèses. Ensuite, nous avons mis deux accolades (<code>{ }</code>). Dans ces accolades est placé tout le code à exécuter à chaque appel de la fonction.</p>
+
+<p>Quand nous voulons exécuter le code, nous saisissons le nom de la fonction suivi des parenthèses.</p>
+
+<p>Essayez. Enregistrez le code et actualisez la page du navigateur. Puis, allez dans les<a href="/fr/Apprendre/D%C3%A9couvrir_outils_d%C3%A9veloppement_navigateurs"> outils de développement et la console JavaScript </a>et entrez la ligne suivante :</p>
+
+<pre class="brush: js">checkGuess();</pre>
+
+<p>Après avoir pressé <kbd>Entrée</kbd> ou <kbd>Retour</kbd>, vous devriez voir apparaître une alerte « Je suis un espace réservé » ; nous avons défini une fonction dans notre code créant une alerte chaque fois que nous l'appelons.</p>
+
+<div class="note">
+<p><strong>Note</strong> : Vous allez en apprendre beaucoup plus sur les fonctions plus tard dans ce cours.</p>
+</div>
+
+<h3 id="Opérateurs">Opérateurs</h3>
+
+<p>Les opérateurs en JavaScript nous permettent d'effectuer des tests, de faire des calculs, de joindre des chaînes ensemble et d'autres choses de ce genre.</p>
+
+<p>Si vous ne l'avez pas déjà fait, sauvegardez ce code, actualisez la page affichée dans le navigateur et ouvrez les<a href="/fr/Apprendre/D%C3%A9couvrir_outils_d%C3%A9veloppement_navigateurs"> outils de développement et la console Javascript</a>. Ensuite, vous pouvez saisir les exemples ci‑dessous — saisissez chacun dans les colonnes « Exemple » exactement comme indiqué, en appuyant sur la touche <kbd>Entrée</kbd> du clavier après chacun et regardez le résultat renvoyé. Si vous n'avez pas facilement accès aux outils de développement du navigateur, vous pouvez toujours utiliser la console intégrée ci-dessous :</p>
+
+<div class="hidden">
+<h6 id="Hidden_code">Hidden code</h6>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Console JavaScript&lt;/title&gt;
+    &lt;style&gt;
+      * {
+        box-sizing: border-box;
+      }
+
+      html {
+        background-color: #0C323D;
+        color: #809089;
+        font-family: monospace;
+      }
+
+      body {
+        max-width: 700px;
+      }
+
+      p {
+        margin: 0;
+        width: 1%;
+        padding: 0 1%;
+        font-size: 16px;
+        line-height: 1.5;
+        float: left;
+      }
+
+      .input p {
+        margin-right: 1%;
+      }
+
+      .output p {
+        width: 100%;
+      }
+
+      .input input {
+        width: 96%;
+        float: left;
+        border: none;
+        font-size: 16px;
+        line-height: 1.5;
+        font-family: monospace;
+        padding: 0;
+        background: #0C323D;
+        color: #809089;
+      }
+
+      div {
+        clear: both;
+      }
+
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+
+  &lt;/body&gt;
+
+  &lt;script&gt;
+    let geval = eval;
+
+    function createInput() {
+      let inputDiv = document.createElement('div');
+      let inputPara = document.createElement('p');
+      let inputForm = document.createElement('input');
+
+      inputDiv.setAttribute('class','input');
+      inputPara.textContent = '&gt;';
+      inputDiv.appendChild(inputPara);
+      inputDiv.appendChild(inputForm);
+      document.body.appendChild(inputDiv);
+      inputDiv.focus();
+
+      if (document.querySelectorAll('div').length &gt; 1) {
+        inputForm.focus();
+      }
+
+      inputForm.addEventListener('change', executeCode);
+    }
+
+    function executeCode(e) {
+      try {
+        let result = geval(e.target.value);
+      } catch(e) {
+        let result = 'error — ' + e.message;
+      }
+
+      let outputDiv = document.createElement('div');
+      let outputPara = document.createElement('p');
+
+      outputDiv.setAttribute('class','output');
+      outputPara.textContent = 'Résultat : ' + result;
+      outputDiv.appendChild(outputPara);
+      document.body.appendChild(outputDiv);
+
+      e.target.disabled = true;
+      e.target.parentNode.style.opacity = '0.5';
+
+      createInput()
+    }
+
+    createInput();
+
+  &lt;/script&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_code', '100%', 300,"", "", "hide-codepen-jsfiddle") }}</p>
+
+<p>Regardons d'abord les opérateurs arithmétiques, par exemple :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Operator</th>
+   <th scope="col">Name</th>
+   <th scope="col">Example</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>+</code></td>
+   <td>Addition</td>
+   <td><code>6 + 9</code></td>
+  </tr>
+  <tr>
+   <td><code>-</code></td>
+   <td>Soustraction</td>
+   <td><code>20 - 15</code></td>
+  </tr>
+  <tr>
+   <td><code>*</code></td>
+   <td>Multiplication</td>
+   <td><code>3 * 7</code></td>
+  </tr>
+  <tr>
+   <td><code>/</code></td>
+   <td>Division</td>
+   <td><code>10 / 5</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>L'opérateur <code>+</code> peut aussi s'utiliser pour unir des chaînes de caractères (en informatique, on dit <em>concaténer</em>). Entrez les lignes suivantes, une par une :</p>
+
+<pre class="brush: js">let name = 'Bingo';
+name;
+let hello = ' dit bonjour !';
+hello;
+let greeting = name + hello;
+greeting;</pre>
+
+<p>Des raccourcis d'opérateurs sont également disponibles, appelés <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation">opérateurs d'assignation</a> augmentés. Par exemple, si vous voulez simplement ajouter une nouvelle chaîne de texte à une chaîne existante et renvoyer le résultat, vous pouvez faire :</p>
+
+<pre class="brush: js">name += ' dit bonjour !';</pre>
+
+<p>Cela équivaut à :</p>
+
+<pre class="brush: js">name = name + ' dit bonjour !';</pre>
+
+<p>Lorsque nous exécutons des tests vrai/faux (par exemple, dans des conditions — voir {{anch ("Structures conditionnelles", "ci-dessous")}}, nous utilisons des <a href="/fr/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">opérateurs de comparaison</a>, par exemple :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Operator</th>
+   <th scope="col">Name</th>
+   <th scope="col">Example</th>
+  </tr>
+  <tr>
+   <td><code>===</code></td>
+   <td>Égalité stricte (est-ce exactement identique ?)</td>
+   <td><code>5 === 2 + 4</code></td>
+  </tr>
+  <tr>
+   <td><code>!==</code></td>
+   <td>Non égalité (est-ce différent ?)</td>
+   <td><code>'Chris' !== 'Ch' + 'ris'</code></td>
+  </tr>
+  <tr>
+   <td><code>&lt;</code></td>
+   <td>Inférieur à</td>
+   <td><code>10 &lt; 6</code></td>
+  </tr>
+  <tr>
+   <td><code>&gt;</code></td>
+   <td>Supérieur à</td>
+   <td><code>10 &gt; 20</code></td>
+  </tr>
+ </thead>
+</table>
+
+<h3 id="Structures_conditionnelles">Structures conditionnelles</h3>
+
+<p>Revenons à la fonction <code style="font-size: 16px !important; line-height: 24px !important;">checkGuess()</code>. Nous pouvons assurément dire que nous ne souhaitons pas qu'elle renvoie un message d'emplacement réservé. Nous voulons qu'elle vérifie si la supposition du joueur est correcte ou non et qu'elle renvoie une réponse appropriée.</p>
+
+<p>Donc, remplacez l'actuelle fonction <code style="font-size: 16px !important; line-height: 24px !important;">checkGuess()</code> par celle-ci :</p>
+
+<pre class="brush: js line-numbers  language-js"><code class="language-js">function checkGuess(){
+  let userGuess = Number(guessField.value);
+  if (guessCount === 1) {
+    guesses.textContent = 'Propositions précédentes : ';
+  }
+  guesses.textContent += userGuess + ' ';
+
+  if (userGuess === randomNumber) {
+    lastResult.textContent = 'Bravo, vous avez trouvé le nombre !';
+    lastResult.style.backgroundColor = 'green';
+    lowOrHi.textContent = '';
+    setGameOver();
+  } else if (guessCount === 10) {
+     lastResult.textContent = '!!! PERDU !!!';
+     setGameOver();
+  } else {
+     lastResult.textContent = 'Faux !';
+     lastResult.style.backgroundColor = 'red';
+     if (userGuess &lt; randomNumber) {
+      lowOrHi.textContent = 'Le nombre saisi est trop petit !';
+     } else if (userGuess &gt; randomNumber) {
+      lowOrHi.textContent = 'Le nombre saisi est trop grand !';
+     }
+  }
+
+  guessCount++;
+  guessField.value = '';
+  guessField.focus();
+}
+</code></pre>
+
+<p>Pas mal de code — ouf ! Passons en revue chaque section et expliquons ce qu'elle fait.</p>
+
+<ul>
+ <li>La première ligne de la fonction (ligne 2) déclare une variable nommée <code>userGuess</code> et définit sa valeur par celle qui vient d'être saisie dans le champ de texte. Nous faisons passer aussi cette valeur par la méthode  <code style="font-size: 16px !important; line-height: 24px !important;">Number()</code> , juste pour nous assurer que la valeur stockée dans <code>userGuess</code> est bien un nombre.</li>
+ <li>Ensuite, nous rencontrons notre premier bloc de code conditionnel (lignes 3-5). Il permet d'exécuter des instructions de manière sélective, selon certaines conditions qui sont vraies ou non. Cela ressemble un peu à une fonction, mais ce n'est pas le cas. La forme la plus simple du bloc conditionnel commence par le mot clé <code>if</code>, puis parenthèses, puis des accolades <code>{ }</code>.<br>
+  A l'intérieur de ces parenthèses, nous mettons le test. S'il renvoie <code>true</code> , nous exécutons le code à l'intérieur des accolades. Sinon, nous ne le faisons pas, et passons au morceau de code suivant. Dans ce cas, le test vérifie si la variable <code>guessCount</code> est égale à <code>1</code> (c'est-à-dire s'il s'agit de la première supposition du joueur) :
+  <pre class="brush: js">guessCount === 1</pre>
+  Si c'est le cas, nous faisons en sorte que le texte affiché soit « Propositions précédentes : ». Sinon, nous ne le faisons pas.</li>
+ <li>La ligne 6 ajoute la valeur courante <code>userGuess</code> à la fin du paragraphe <code>guesses</code> , plus un espace vide de sorte qu'il y aura un espace entre chaque supposition faite.</li>
+ <li>Le bloc suivant (lignes 8-24) effectue quelques vérifications :
+  <ul>
+   <li>Le premier <code>if(){ }</code> vérifie si la supposition de l'utilisateur est égale au nombre aléatoire <code>randomNumber</code> situé en haut de notre code JavaScript. Si c'est le cas, le joueur a deviné correctement et a gagné le jeu, nous affichons donc un message de félicitations d'une belle couleur verte au joueur, effaçons le contenu de la boîte d'information sur la position de l'estimation et exécutons une fonction appelée <code>setGameOver()</code>, dont nous reparlerons plus tard.</li>
+   <li>Ensuite, nous chaînons un autre test à la fin du précédent avec une structure <code>else if(){ }</code>. Cette structure vérifie si l'utilisateur a épuisé toutes ses tentatives. Si c'est le cas, le programme fait la même chose que dans le bloc précédent, mais avec un message de fin de partie au lieu d'un message de félicitations.</li>
+   <li>Le dernier bloc chaîné à la fin de ce code (<code>else { }</code>) contient du code qui n'est exécuté que si aucun des deux autres tests n'a renvoyé <em>vrai</em> (c'est-à-dire que le joueur n'a pas deviné juste, mais qu'il lui reste des possibilité de supposition). Dans ce cas, nous lui disons que sa supposition est mauvaise, puis nous effectuons un autre test conditionnel pour vérifier si elle est supérieure ou inférieure à la valeur exacte et affichons un autre message approprié pour indiquer si sa supposition est trop forte ou trop faible.</li>
+  </ul>
+ </li>
+</ul>
+
+<ul>
+ <li>Les trois dernières lignes de la fonction (ligne 26-28) préparent à une nouvelle proposition. Nous ajoutons 1 à la variable <code>guessCount</code> qui décompte les tours (<code>++</code> est une opération d'incrémentation — ajout de 1), puis effaçons le champ texte du formulaire et lui redonnons le focus, pour être prêt pour la saisie suivante.</li>
+</ul>
+
+<h3 id="Evénements">Evénements</h3>
+
+<p>À ce stade, nous avons bien implémentée la fonction <code>checkGuess()</code>, mais elle ne s'éxecutera pas parce que nous ne l'avons pas encore appelé.<br>
+ Idéalement, nous voulons l'appeler lorsque le bouton <kbd>Soumettre</kbd> est cliqué, et pour ce faire, nous devons utiliser un événement. Les événements sont des actions qui se produisent dans le navigateur, comme le clic sur un bouton, le chargement d'une page ou la lecture d'une vidéo, en réponse à quoi nous pouvons exécuter des blocs de code. Les constructions qui écoutent l'événement en cours s'appellent des <strong>écouteurs d'événements</strong>, et les blocs de code exécutés en réponse à l'événement déclencheur sont appelés des <strong>gestionnaires d'évenements</strong>.<br>
+ <br>
+ Ajoutez la ligne suivante sous l'accolade de fermeture de votre fonction <code>checkGuess()</code> :</p>
+
+<pre class="brush: js">guessSubmit.addEventListener('click', checkGuess);</pre>
+
+<p>Ici, nous ajoutons un écouteur d'événement au bouton <code>guessSubmit</code> . C'est une méthode qui prend deux valeurs d'entrée (appelées arguments) - le type d'événement que nous écoutons (dans ce cas, <code>click</code>) qui est une chaîne de caractères, et le code que nous voulons exécuter quand l'événement se produit (dans ce cas, la fonction <code>checkGuess()</code>  — notez que nous n'avons pas besoin de spécifier les parenthèses lors de l'écriture dans {{domxref("EventTarget.addEventListener", "addEventListener()")}}).</p>
+
+<p>Essayez d'enregistrer et d'actualiser votre code, votre exemple devrait désormais fonctionner, jusqu'à un certain point. Maintenant, le seul problème est que si vous devinez la bonne réponse ou si vous n'avez plus de tours à jouer, le jeu "va se casser" parce que nous n'avons pas encore implémenté la fonction <code>setGameOver()</code> dont le rôle est de terminer proprement le jeu. Ajoutons maintenant le code manquant pour compléter notre exemple.</p>
+
+<h3 id="Finir_les_fonctionnalités_du_jeu">Finir les fonctionnalités du jeu</h3>
+
+<p>Pour définir la fonction <code>setGameOver()</code> à la fin de notre programme, ajoutez le code ci-dessous tout en bas :</p>
+
+<pre class="brush: js">function setGameOver() {
+  guessField.disabled = true;
+  guessSubmit.disabled = true;
+  resetButton = document.createElement('button');
+  resetButton.textContent = 'Start new game';
+  document.body.appendChild(resetButton);
+  resetButton.addEventListener('click', resetGame);
+}</pre>
+
+<ul>
+ <li>Les deux premières lignes désactivent l'entrée de texte et le bouton en définissant leurs propriétés désactivées à <code>true</code>.  Ceci est nécessaire, car si nous ne le faisons pas, l'utilisateur pourrait soumettre plus de propositions après la fin du jeu, ce qui gâcherait les choses.</li>
+ <li>Les trois lignes suivantes génèrent un nouvel {{htmlelement("button")}} élément, avec le libellé "Démarrer une nouvelle partie" et l'ajoute au bas du HTML existant.</li>
+ <li>La dernière ligne définit un écouteur d'événement sur ce nouveau bouton : un click sur le bouton déclenchera un appel de la fonction  <code>resetGame()</code>.</li>
+</ul>
+
+<p>Reste à définir cette fonction ! Ajoutez le code suivant, tout en bas de votre JavaScript :</p>
+
+<pre class="brush: js">function resetGame() {
+  guessCount = 1;
+
+  let resetParas = document.querySelectorAll('.resultParas p');
+  for (let i = 0 ; i &lt; resetParas.length ; i++) {
+    resetParas[i].textContent = '';
+  }
+
+  resetButton.parentNode.removeChild(resetButton);
+
+  guessField.disabled = false;
+  guessSubmit.disabled = false;
+  guessField.value = '';
+  guessField.focus();
+
+  lastResult.style.backgroundColor = 'white';
+
+  randomNumber = Math.floor(Math.random() * 100) + 1;
+}</pre>
+
+<p>Ce bloc de code assez long réinitialise complètement les paramètres du jeu (le joueur pourra commencer une nouvelle partie). Il permet de  :</p>
+
+<ul>
+ <li>Remettre le compteur <code>guessCount</code> à 1.</li>
+ <li>Effacer tous les paragraphes d'information.</li>
+ <li>Supprimer le bouton de réinitialisation de notre code.</li>
+ <li>Activer les éléments de formulaire, vide et met au point le champ de texte, prêt à entrer une nouvelle proposition.</li>
+ <li>Supprimer la couleur d'arrière-plan du paragraphe <code>lastResult</code>.</li>
+ <li>Génèrer un nouveau nombre aléatoire afin que vous ne deviniez plus le même nombre !</li>
+</ul>
+
+<p><strong>À ce stade, vous devriez avoir un jeu (simple) entièrement fonctionnel — félicitations!</strong></p>
+
+<p>Pour finir, c'est le moment de faire une synthèse sur  quelques caractéristiques importantes du code ;  vous les avez déjà vues, sans forcément vous en rendre compte.</p>
+
+<h3 id="Boucles">Boucles</h3>
+
+<p>Dans le code précédent, une partie à examiner de plus près est la boucle <a href="/fr/docs/Web/JavaScript/Reference/Instructions/for">for</a>. Les boucles sont un concept très important dans la programmation, qui vous permet de continuer à exécuter un morceau de code encore et encore, jusqu'à ce qu'une certaine condition soit remplie.</p>
+
+<p>Pour commencer, allez sur votre <a href="/fr/Apprendre/D%C3%A9couvrir_outils_d%C3%A9veloppement_navigateurs">console developpeur Javascript</a> et entrez ce qui suit :</p>
+
+<pre class="brush: js">for (let i = 1 ; i &lt; 21 ; i++) { console.log(i) }</pre>
+
+<p>Que s'est-il passé ? Les nombres de 1 à 20 s'affichent dans la console. C'est à cause de la boucle. Une boucle : <code>for</code>  prend trois valeurs d'entrée (arguments)</p>
+
+<ol>
+ <li><strong>Une valeur de départ </strong>: Dans ce cas, nous commençons un compte à 1, mais cela pourrait être n'importe quel nombre. Vous pouvez remplacer <code>i</code> par n'importe quel nom (ou presque...) , mais <code>i</code> est utilisé par convention car il est court et facile à retenir.</li>
+ <li><strong>Une condition de fin </strong>: Ici, nous avons spécifié  <code>i &lt; 21</code> la boucle continuera jusqu'à ce que  <code>i</code>  ne soit plus inférieur à 21. Quand <code>i</code> atteindra ou dépassera 21, la boucle s'arrêtera.</li>
+ <li><strong>Un incrémenteur </strong>:  Nous avons spécifié <code>i++</code>, ce qui signifie "ajouter 1 à i". La boucle sera exécutée une fois pour chaque valeur de <code>i</code>, jusqu'a ce que <code>i</code> atteigne une valeur de 21 (comme indiqué ci-dessus). Dans ce cas, nous imprimons simplement la valeur de <code>i</code>  sur la console à chaque itération en utilisant {{domxref("Console.log", "console.log()")}}.</li>
+</ol>
+
+<p>Maintenant, regardons la boucle dans notre jeu de devinettes de nombres <strong>—</strong> ce qui suit peut être trouvé dans la fonction <code>resetGame()</code> :</p>
+
+<pre class="brush: js">let resetParas = document.querySelectorAll('.resultParas p');
+for (let i = 0 ; i &lt; resetParas.length ; i++) {
+  resetParas[i].textContent = '';
+}</pre>
+
+<p>Ce code crée une variable contenant une liste de tous les paragraphes à l'intérieur de <code>&lt;div class="resultParas"&gt;</code>  en utilisant la méthode {{domxref ("Document.querySelectorAll", "querySelectorAll ()")}}, puis il passe dans la boucle et pour chacun d'entre eux supprime le contenu du texte.</p>
+
+<h3 id="Une_petite_discussion_sur_les_objets">Une petite discussion sur les objets</h3>
+
+<p>Voyons une dernière amélioration avant d'aborder cette discussion. Ajoutez la ligne suivante juste en dessous de <code>let resetButton;</code> ligne près du haut de votre JavaScript, puis enregistrez votre fichier :</p>
+
+<pre class="brush: js">guessField.focus();</pre>
+
+<p>Cette ligne utilise la méthode{{domxref("HTMLElement.focus", "focus()")}} pour placer automatiquement le curseur dans le champ texte {{htmlelement ("input")}} dès le chargement de la page, permettant à l'utilisateur de commencer à taper sa première proposition de suite sans avoir à cliquer préalablement dans le champ. Ce n'est qu'un petit ajout, mais cela améliore la convivialité  en donnant à l'utilisateur une bonne idée visuelle de ce qu'il doit faire pour jouer.</p>
+
+<p>Analysons ce qui se passe ici un peu plus en détail. En JavaScript, tout est objet. Un objet JavaScript possède des propriétés, chacune définissant une caractéristique. Vous pouvez créer vos propres objets, mais cela est une notion assez avancée, nous ne la couvrirons que beaucoup plus tard dans le cours. Pour l'instant, nous allons discuter brièvement des objets intégrés que contient votre navigateur, ce qui vous permet de faire beaucoup de choses utiles.</p>
+
+<p>Dans ce cas particulier, nous avons d'abord créé une variable <code>guessField</code> qui stocke une référence au champ de formulaire de saisie de texte dans notre HTML <strong>—</strong> la ligne suivante se trouve parmi nos déclarations de variables en haut du code :</p>
+
+<pre class="brush: js">let guessField = document.querySelector('.guessField');</pre>
+
+<p>Pour obtenir cette référence, nous avons utilisé la méthode {{domxref("document.querySelector", "querySelector()")}} de l'objet {{domxref ("document")}}. <code>querySelector()</code> prend une information - un <a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/Les_sélecteurs">sélecteur CSS </a>qui sélectionne l'élément auquel vous voulez faire référence.</p>
+
+<p>Parce que <code>guessField</code> contient maintenant une référence à un élément {{htmlelement ("input")}}, il aura maintenant accès à un certain nombre de propriétés (essentiellement des variables stockées dans des objets, dont certaines ne peuvent pas être modifiées) et des méthodes (essentiellement des fonctions stockées dans des objets). Une méthode disponible pour entrer des éléments est <code>focus()</code>, donc nous pouvons maintenant utiliser cette ligne pour focaliser l'entrée de texte :</p>
+
+<pre class="brush: js">guessField.focus();</pre>
+
+<p>Les variables qui ne contiennent pas de références aux éléments de formulaire n'auront pas de <code>focus()</code> à leur disposition. Par exemple, la variable <code>guesses</code> contient une référence à un élément {{htmlelement ("p")}} et <code>guessCount</code> contient un nombre.</p>
+
+<h3 id="Jouer_avec_les_objets_du_navigateur">Jouer avec les objets du navigateur</h3>
+
+<p>Jouons un peu avec certains objets du navigateur.</p>
+
+<ol>
+ <li> Tout d'abord, ouvrez votre programme dans un navigateur.</li>
+ <li> Ensuite, ouvrez les <a href="/fr/docs/Apprendre/Découvrir_outils_développement_navigateurs">outils de développement</a> de votre navigateur et assurez-vous que l'onglet de la console JavaScript est ouvert.</li>
+ <li> Tapez <code>guessField</code> et la console vous montrera que la variable contient un élément {{htmlelement ("input")}}. Vous remarquerez également que la console complète automatiquement les noms d'objets existant dans l'environnement d'exécution, y compris vos variables!</li>
+ <li>
+  <p> Maintenant, tapez ce qui suit :</p>
+
+  <pre class="brush: js">guessField.value = 'Hello';
+</pre>
+
+  <p class="brush: js">La propriété <code>value</code> représente la valeur courante entrée dans un champs de texte. Vous verrez qu'en entrant cette commande nous avons changé ce que c'est.</p>
+ </li>
+ <li>Tapez maintenant <code>guesses</code> and appuyez sur entrée. La console vous montrera que la variable contient un élément {{htmlelement ("p")}}.</li>
+ <li>
+  <p>Maintenant, essayez d'entrer la ligne suivante :</p>
+
+  <pre class="brush: js">guesses.value
+</pre>
+
+  <p class="brush: js">Le navigateur va retourner <code>undefined</code>, parce que <code>value</code> n'existe pas dans le paragraphe.</p>
+ </li>
+ <li>
+  <p>Pour changer le texte dans le paragraphe vous aurez besoin de  la propriété {{domxref("Node.textContent", "textContent")}} à la place.<br>
+   Essayez ceci :</p>
+
+  <pre class="brush: js">guesses.textContent = 'Where is my paragraph?';
+</pre>
+ </li>
+ <li>Maintenant, pour des trucs amusants. Essayez d'entrer les lignes ci-dessous, une par une :</li>
+</ol>
+
+<pre class="brush: js" dir="rtl">guesses.style.backgroundColor = 'yellow';
+guesses.style.fontSize = '200%';
+guesses.style.padding = '10px';
+guesses.style.boxShadow = '3px 3px 6px black';</pre>
+
+<p>Chaque élément d'une page possède une propriété de <code>style</code> , qui contient elle-même un objet dont les propriétés contiennent tous les styles CSS en ligne appliqués à cet élément. Cela nous permet de définir dynamiquement de nouveaux styles CSS sur des éléments en utilisant JavaScript.</p>
+
+<h2 id="Cest_fini_pour_le_moment...">C'est fini pour le moment...</h2>
+
+<p>Vous voilà parvenu au bout de cet exemple, bravo ! Essayez votre code enfin complété ou<a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game.html"> jouez avec notre version finale ici</a>. Si vous ne parvenez pas à faire fonctionner l'exemple, vérifiez-le par rapport <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game.html">au code source.</a></p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}</p>
diff --git a/files/fr/learn/javascript/first_steps/index.html b/files/fr/learn/javascript/first_steps/index.html
new file mode 100644
index 0000000000..70e5a0c1f0
--- /dev/null
+++ b/files/fr/learn/javascript/first_steps/index.html
@@ -0,0 +1,70 @@
+---
+title: Premiers pas en JavaScript
+slug: Learn/JavaScript/First_steps
+tags:
+  - Article
+  - Auto-évaluation
+  - Chaînes de caractères
+  - Débutant
+  - Guide
+  - JavaScript
+  - Module
+  - Nombres
+  - Opérateurs
+  - Tableaux
+  - Variables
+translation_of: Learn/JavaScript/First_steps
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Dans notre premier module consacré à JavaScript, nous allons tout d'abord répondre à des questions fondamentales comme « qu'est-ce que JavaScript ? », « à quoi ressemble-t-il ? » et « de quoi est-il capable ? ». Nous vous accompagnerons ensuite dans votre première expérience pratique consistant à écrire du code JavaScript. Après cela, nous examinerons en détail quelques briques de base, telles que les variables, les chaînes de caractères, les nombres, et les tableaux.</p>
+
+<h2 id="Prérequis"><strong>Prérequis</strong></h2>
+
+<p>Avant d'entamer ce module, vous n'avez besoin d'aucune connaissance préalable en JavaScript, mais vous devriez être familier avec HTML et CSS. Nous vous conseillons de lire les modules suivants avant d'aller plus loin :</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML">Commencer avec le Web</a> (qui inclut une <a href="/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics">présentation basique de JavaScript</a>).</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Introduction">Introduction au langage HTML</a>.</li>
+ <li><a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS">Introduction au langage CSS</a>.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note </strong>: Si vous travaillez depuis un ordinateur, une tablette ou depuis un autre appareil sur lequel vous ne pouvez pas créer vos propres fichiers, vous pourrez tester la plupart des exemples en ligne grâce à des outils comme <a href="http://jsbin.com/">JSBin</a> ou <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/First_steps/What_is_JavaScript">Qu'est-ce que JavaScript ?</a></dt>
+ <dd>Bienvenue dans le cours de JavaScript pour débutants proposé par MDN ! Dans ce premier article, nous aborderons JavaScript sous un angle général afin de comprendre ce qu'il est et à quoi il sert. Nous nous assurerons ici que vous cernez bien le but premier du langage.</dd>
+ <dt><a href="/fr/docs/Learn/JavaScript/First_steps/A_first_splash">Notre premier code JavaScript</a></dt>
+ <dd>
+ <p>Maintenant que vous en savez un peu plus sur la partie théorique de JavaScript et sur ce que vous pouvez réaliser avec, nous allons poursuivre avec un cours accéléré sur les fonctionnalités de base du langage par le biais d'un tutoriel axé sur la pratique. Vous développerez ici, pas à pas, un jeu simple consistant à faire deviner un nombre.</p>
+ </dd>
+ <dt><a href="/fr/docs/Learn/JavaScript/First_steps/What_went_wrong">Qu'est-ce qui n'a pas fonctionné ? Déboguer du code JavaScript</a></dt>
+ <dd>
+ <p>Quand vous développiez le jeu de devinette dans le cadre du tutoriel précédent, vous avez pu constater que notre programme ne fonctionnait pas. Pas de panique — cet article est là pour vous éviter de vous arracher les cheveux sur de tels problèmes en vous donnant quelques conseils simples sur la manière de trouver et résoudre les erreurs dans vos programmes JavaScript.</p>
+ </dd>
+ <dt><a href="/fr/docs/Learn/JavaScript/First_steps/Variables">Stocker les informations dont vous avez besoin — les variables</a></dt>
+ <dd>
+ <p>Après avoir lu les articles précédents, vous devriez maintenant mieux comprendre ce qu'est JavaScript, ce qu'il peut faire pour vous, comment l'utiliser de pair avec d'autres technologies du Web, et à quoi ressemblent ses principales fonctionnalités d'un point de vue global. Dans cet article, nous allons aborder les véritables fondements, en présentant l'une des pierres angulaires du langage : les variables.</p>
+ </dd>
+ <dt><a href="/fr/docs/Learn/JavaScript/First_steps/Math">Mathématiques de base en JavaScript — nombres et opérateurs</a></dt>
+ <dd>À ce stade du cours, nous allons parler de mathématiques en JavaScript, à savoir comment combiner des opérateurs arithmétiques avec d'autres fonctionnalités du langage pour arriver à nos fins.</dd>
+ <dt><a href="/fr/docs/Learn/JavaScript/First_steps/Strings">Gérer du texte — les chaînes de caractères en JavaScript</a></dt>
+ <dd>Attaquons-nous maintenant aux chaînes de caractères — le nom savant désignant en programmation des portions de texte. Dans cet article, nous allons voir les bases que vous devez impérativement connaître lors de votre apprentissage de JavaScript, comme la création de chaînes, l'échappement de caractères et la jonction de plusieurs chaînes.</dd>
+ <dt><a href="/fr/docs/Learn/JavaScript/First_steps/methode_chaine_utile">Méthodes utiles pour les chaînes de caractères</a></dt>
+ <dd>Maintenant que nous avons vu les bases relatives aux chaînes de catactères, passons à la vitesse supérieure et regardons ce que nous pouvons faire de plus poussé avec lesdites chaînes grâce aux méthodes natives, comme par exemple déterminer la longueur d'un texte, joindre et séparer des chaînes, remplacer un caractère par un autre, et bien plus encore.</dd>
+ <dt><a href="/fr/docs/Learn/JavaScript/First_steps/tableaux">Les tableaux</a></dt>
+ <dd>Dans le dernier article de ce module, nous allons nous pencher sur les tableaux — un moyen ingénieux de stocker une liste d'éléments dans une unique variable. Ici nous allons voir en quoi cela est pratique, puis nous verrons entre autres comment créer un tableau et comment récupérer, ajouter et supprimer des éléments stockés.</dd>
+</dl>
+
+<h2 id="Auto-évaluation">Auto-évaluation</h2>
+
+<p>L'auto-évaluation suivante teste votre compréhension des bases de JavaScript abordées dans le guide ci-dessus.</p>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/First_steps/Silly_story_generator">Génerateur d'histoires absurdes</a></dt>
+ <dd>Dans le cadre de cette évaluation, votre tâche sera d'utiliser les connaissances que vous avez apprises dans les articles de ce module et de les appliquer pour créer une appli ludique qui génère aléatoirement des histoires absurdes. Amusez-vous bien !</dd>
+</dl>
diff --git a/files/fr/learn/javascript/first_steps/math/index.html b/files/fr/learn/javascript/first_steps/math/index.html
new file mode 100644
index 0000000000..2d35ee076b
--- /dev/null
+++ b/files/fr/learn/javascript/first_steps/math/index.html
@@ -0,0 +1,449 @@
+---
+title: Mathématiques de base en JavaScript — nombres et opérateurs
+slug: Learn/JavaScript/First_steps/Math
+tags:
+  - Apprendre
+  - Article
+  - Codage de scripts
+  - Débutant
+  - Guide
+  - Incrémentation
+  - JavaScript
+  - Math
+  - Opérateurs
+  - augmenté
+  - maths
+  - modulo
+translation_of: Learn/JavaScript/First_steps/Math
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}</div>
+
+<p class="summary">À ce point du didacticiel, nous parlerons de « mathématiques en JavaScript » — comment utiliser les {{Glossary("Operator","operators")}} et autres fonctionnalités pour manier avec succès les nombres pour faire nos bricolages.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Vocabulaire courant de l'informatique, bases de HTML et CSS, compréhension de ce que fait JavaScript.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>Se familiariser avec les bases des maths en JavaScript.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Tout_le_monde_aime_les_maths">Tout le monde aime les maths</h2>
+
+<p>Mouais, peut‑être pas. Certains parmi nous aiment les maths, d'autres les détestent depuis qu'il leur a fallu apprendre les tables de multiplication et les longues divisions à l'école, d'autres se situent entre les deux. Mais personne ne peut nier que les mathématiques sont une connaissance fondamentale dont il n'est pas possible de se passer. Cela devient particulièrement vrai lorsque nous apprenons à programmer en JavaScript (ou tout autre langage d'ailleurs) — une grande part de ce que nous faisons reposant en effet sur le traitement de données numériques, le calcul de nouvelles valeurs, etc. ; vous ne serez donc pas étonné d'apprendre que JavaScript dispose d'un ensemble complet de fonctions mathématiques.</p>
+
+<p>Cet article ne traite que des éléments de base nécessaires pour débuter.</p>
+
+<h3 id="Types_de_nombres">Types de nombres</h3>
+
+<p>En programmation, même l'ordinaire système des nombres décimaux que nous connaissons tous si bien est plus compliqué qu'on ne pourrait le croire. Nous utilisons divers termes pour décrire différents types de nombres décimaux, par exemple :</p>
+
+<ul>
+ <li><strong>Entier :</strong> (<em>Integer </em>en anglais) c'est un nombre sans partie fractionnaire, comme son nom l'indique, par exemple 10, 400 ou -5</li>
+ <li><strong>Nombre à virgule flottante : </strong>(<em>float </em>en anglais) il a un <strong>point</strong> de séparation entre la partie entière et la partie fractionnaire (là où en France nous mettons une virgule), par exemple 12<strong>.</strong>5 et 56<strong>.</strong>7786543</li>
+ <li><strong>Doubles</strong> : (pour double précision) ce sont des nombres à virgule flottante de précision supérieure aux précédents (on les dit plus précis en raison du plus grand nombre de décimales possibles).</li>
+</ul>
+
+<p>Nous disposons même de plusieurs systèmes de numération !  Le décimal a pour base 10 (ce qui signifie qu'il se sert de chiffres entre 0 et 9 dans chaque rang), mais il en existe d'autres :</p>
+
+<ul>
+ <li><strong>Binaire</strong> — utilisé par le plus bas niveau de langage des ordinateurs, il est composé de 0 et de 1.</li>
+ <li><strong>Octal</strong> — de base 8, utilise les chiffres entre 0 et 7 dans chaque rang.</li>
+ <li><strong>Hexadécimal</strong> — de base 16, utilise les chiffres entre 0 et 9 puis les lettres de a à f dans chaque rang. Vous avez peut-être déjà rencontré ces nombres en définissant des couleurs dans les <a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Hexadecimal_values">CSS</a>.</li>
+</ul>
+
+<p><strong>Avant que votre cervelle ne se mette à bouillir, stop !</strong> Pour commencer, nous ne nous intéresserons qu'aux nombres décimaux dans ce cours ; vous aurez rarement besoin de vous servir des autres types, peut-être même jamais.</p>
+
+<p>L'autre bonne nouvelle, c'est que contrairement à d'autres langages de programmation, JavaScript n'a qu'un seul type de donnée pour les nombres, vous l'avez deviné : {{jsxref("Number")}}. Cela signifie que, en JavaScript, quels que soient les types de nombre avec lesquels vous travaillerez, vous les manipulerez tous exactement de la même façon.</p>
+
+<h3 id="Ce_ne_sont_que_des_nombres_pour_moi">Ce ne sont que des nombres pour moi</h3>
+
+<p>Amusons‑nous avec quelques chiffres pour nous familiariser avec la syntaxe de base dont nous aurons besoin. Entrez les commandes listées ci-dessous dans la <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">console JavaScript des outils de développement</a>, ou utilisez la simple console intégrée que vous voyez ci-dessous si vous préférez.</p>
+
+<p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/variables/index.html", '100%', 300)}}</p>
+
+<p><strong><a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/">Ouvrir la console dans une nouvelle fenêtre</a></strong></p>
+
+<ol>
+ <li>Premièrement, déclarons une paire de variables et initialisons‑les respectivement  avec un entier et un nombre avec des décimales, puis saisissons les noms des variables à nouveau pour vérifier que tout est correct :
+  <pre class="brush: js notranslate">var myInt = 5;
+var myFloat = 6.667;
+myInt;
+myFloat;</pre>
+ </li>
+ <li>Les nombres sont saisis sans guillemets — essayez de déclarer et initialiser deux ou trois variables de plus contenant des nombres avant de continuer.</li>
+ <li>Maintenant vérifions que les deux variables d'origine sont du même type de donnée. En JavaScript, l'opérateur nommé {{jsxref("Operators/typeof", "typeof")}} est prévu pour cela. Entrez les deux lignes ci‑dessous comme indiqué :</li>
+ <li>
+  <pre class="brush: js notranslate" dir="rtl">typeof myInt;
+typeof myFloat;</pre>
+ </li>
+ <li><code>"number"</code> est renvoyé dans les deux cas — cela nous facilite les choses quand nous avons des nombres différents de types variés et que nous avons à les traiter de diverses façons. Ouf !</li>
+</ol>
+
+<h3 id="Méthodes_de_nombres_utiles">Méthodes de nombres utiles</h3>
+
+<p>L'objet <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a></code> , une instance qui représente tous les nombres standards que vous utiliserez dans votre JavaScript, a de nombreuses méthodes disponibles pour vous permettre de manipuler les nombres. Nous ne les étudierons pas tous en détail dans cet article car nous voulons qu'il reste une simple introduction et nous verrons seulement les bases essentielles pour le moment; cependant, une fois que vous aurez lu ce module plusieurs fois, il pourra être  utile de visiter les pages de référence d'objet et d'en apprendre plus sur ce qui est disponible.</p>
+
+<p>Par exemple, pour arrondir votre nombre avec un nombre fixe de décimales, utilisez la méthode <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed">toFixed()</a></code>. Tapez les lignes suivantes dans la <a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Web_Console">console de votre navigateur</a>:</p>
+
+<pre class="brush: js notranslate">let lotsOfDecimal = 1.766584958675746364;
+lotsOfDecimal;
+let twoDecimalPlaces = lotsOfDecimal.toFixed(2);
+twoDecimalPlaces;</pre>
+
+<h3 id="Convertir_en_type_de_données_numérique">Convertir en type de données numérique</h3>
+
+<p>Parfois vous pourriez finir avec un nombre stocké de type "string", ce qui rendra difficile le fait d'effectuer un calcul avec. Ca arrive le plus souvent lorsqu'une donnée est entrée dans une entrée de <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms">formulaire</a>, et le <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text">type de donnée entré est du texte</a>. Il éxiste une façon de résoudre ce problème — passer la valeur de "string" dans le constructeur <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/Number">Number()</a></code> pour retourner  une version numérique de la même valeur.</p>
+
+<p>Par exemple, essayez de taper ces lignes dans votre console:</p>
+
+<pre class="brush: js notranslate">let myNumber = '74';
+myNumber + 3;</pre>
+
+<p>Vous obtenez le résultat 743, et non pas 77, car <code>myNumber</code> est en fait défini en tant que "string". Vous pouvez tester en tapant la ligne suivante:</p>
+
+<pre class="brush: js notranslate">typeof myNumber;</pre>
+
+<p>Pour réparer le calcul, vous pouvez faire ceci:</p>
+
+<pre class="brush: js notranslate">Number(myNumber) + 3;</pre>
+
+<h2 id="Opérateurs_arithmétiques">Opérateurs arithmétiques</h2>
+
+<p>Ce sont les opérateurs de base pour effectuer diverses opérations :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Operateur</th>
+   <th scope="col">Nom</th>
+   <th scope="col">But</th>
+   <th scope="col">Exemple</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>+</code></td>
+   <td>Addition</td>
+   <td>Ajoute deux nombres.</td>
+   <td><code>6 + 9</code></td>
+  </tr>
+  <tr>
+   <td><code>-</code></td>
+   <td>Soustraction</td>
+   <td>Soustrait le nombre de droite de celui de gauche.</td>
+   <td><code>20 - 15</code></td>
+  </tr>
+  <tr>
+   <td><code>*</code></td>
+   <td>Multiplication</td>
+   <td>Multiplie les deux nombrer.</td>
+   <td><code>3 * 7</code></td>
+  </tr>
+  <tr>
+   <td><code>/</code></td>
+   <td>Division</td>
+   <td>Divise le nombre de gauche par celui de droite.</td>
+   <td><code>10 / 5</code></td>
+  </tr>
+  <tr>
+   <td><code>%</code></td>
+   <td>
+    <p>Reste (quelquefois nommé modulo)</p>
+   </td>
+   <td>
+    <p>Renvoie le reste de la division du nombre de gauche par celui de droite.</p>
+   </td>
+   <td><code>8 % 3</code> (renvoie 2, car 3 est contenu 2 fois dans 8, et il reste 2.)</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Note </strong>: Quelquefois les nombres impliqués dans des opérations sont nommés {{Glossary("Operand", "operands")}}.</p>
+</div>
+
+<p>Nous n'avons certainement pas besoin de vous apprendre les quatre opérations, mais ce serait bien de tester si vous avez bien compris la syntaxe. Entrez les exemples ci‑dessous dans la <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">console des outils de développement JavaScript</a> ou servez vous de la console intégrée plus haut, comme vous préférez, pour vous familiariser avec la syntaxe.</p>
+
+<ol>
+ <li>Essayez de saisir quelques exemples simples de votre cru, comme :
+  <pre class="brush: js notranslate">10 + 7
+9 * 8
+60 % 3</pre>
+ </li>
+ <li>Déclarez et initialisez quelques variables, puis utilisez‑les dans des opérations — les variables se comporteront exactement comme les valeurs qu'elles contiennent pour les besoins de l'opération. Par exemple :
+  <pre class="brush: js notranslate">var num1 = 10;
+var num2 = 50;
+9 * num1;
+num2 / num1;</pre>
+ </li>
+ <li>Pour terminer cette partie, entrez quelques expressions plus compliquées, comme :
+  <pre class="brush: js notranslate">5 + 10 * 3;
+num2 % 9 * num1;
+num2 + num1 / 8 + 2;</pre>
+ </li>
+</ol>
+
+<p>Certaines opérations de cet ensemble ne vous renvoient peut-être pas le résultat attendu ; le paragraphe qui suit vous explique pourquoi.</p>
+
+<h3 id="Priorité_des_opérateurs">Priorité des opérateurs</h3>
+
+<p>Revenons sur le dernier exemple ci‑dessus, en supposant que <code>num2</code> contient la valeur 50 et <code>num1</code> contient 10 (comme défini plus haut) :</p>
+
+<pre class="brush: js notranslate">num2 + num1 / 8 + 2;</pre>
+
+<p>En tant qu'humain, vous pouvez lire  « <em>50 plus 10 égale 60 »</em>, puis « <em>8 plus 2 égale 10 »</em> et finalement « <em>60 divisé par 10 égale 6 »</em>.</p>
+
+<p>Mais le navigateur <em>calcule « 10 sur 8 égale 1.25 »</em>, puis « <em>50 plus 1.25 plus 2 égale 53.25 »</em>.</p>
+
+<p>Cela est dû aux <strong>priorités entre opérateurs</strong> — certains sont appliqués avant d'autres dans une opération (on parle d'une expression en programmation). En JavaScript, la priorité des opérateurs est identique à celle enseignée à l'école — Multiplication et Division sont toujours effectuées en premier, suivies d'Addition et Soustraction (le calcul est toujours exécuté de la gauche vers la droite).</p>
+
+<p>Si vous voulez contourner les règles de priorité des opérateurs, vous pouvez mettre entre parenthèses les parties que vous souhaitez voir calculées en premier. Pour obtenir un résultat égal à 6, nous devons donc écrire :</p>
+
+<pre class="brush: js notranslate">(num2 + num1) / (8 + 2);</pre>
+
+<p>Essayez-le et voyez.</p>
+
+<div class="note">
+<p><strong>Note </strong>: La liste complète de tous les opérateurs JavaScript et leur priorité peut être trouvée dans <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operator_precedence">Expressions and operators</a>.</p>
+</div>
+
+<h2 id="Opérateurs_dincrémentation_et_de_décrémentation">Opérateurs d'incrémentation et de décrémentation</h2>
+
+<p>Quelquefois vous aurez besoin d'ajouter ou retrancher 1 à une valeur de variable de manière répétitive. On effectue commodément cette opération à l'aide des opérateurs d'incrémentation (<code>++</code>) ou de décrementation (<code>--</code>). Nous nous sommes servis de <code>++</code> dans le jeu « Devinez le nombre » dans notre article <a href="/en-US/docs/Learn/JavaScript/Introduction_to_JavaScript_1/A_first_splash">Première plongée dans le JavaScript</a> pour ajouter 1 à la variable <code>guessCount</code> pour décompter le nombre de suppositions restantes après chaque tour.</p>
+
+<pre class="brush: js notranslate">guessCount++;</pre>
+
+<div class="note">
+<p><strong>Note</strong> : Ces opérateurs sont couramment utilisés dans des <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration">boucles ;</a> nous les verrons plus loin dans ce cours. Par exemple, disons que vous voulez parcourir une liste de prix et ajouter les taxes à chacun. Vous utiliserez une boucle pour obtenir chaque valeur une à une et exécuterez le calcul voulu pour ajouter les taxes à chacune. L'incrément s'utilise pour aller à la valeur suivante. Nous avons mis un exemple concret montrant comment faire — voyez‑le tout de suite, examinez le code source et notez les opérateurs d'incrémentation ! Nous reverrons les boucles en détail plus loin dans ce cours.</p>
+</div>
+
+<p>Jouons avec ces opérateurs dans la console. Notez d'abord qu'il n'est pas possible de les appliquer directement à un nombre, ce qui peut paraître étrange, mais cet opérateur assigne à une variable une nouvelle valeur mise à jour, il n'agit pas sur la valeur elle‑même. Ce qui suit renvoie une erreur :</p>
+
+<pre class="brush: js notranslate">3++;</pre>
+
+<p>Vous ne pouvez donc incrémenter qu'une variable déjà existante. Essayez ceci :</p>
+
+<pre class="brush: js notranslate">var num1 = 4;
+num1++;</pre>
+
+<p>Ok, curieuse la ligne 2 ! En écrivant cela, elle renvoie la valeur 4 — c'est dû au fait que l'explorateur renvoie la valeur courante, <em>puis</em> incrémente la variable. Vous constaterez qu'elle a bien été incrémentée si vous demandez de la revoir :</p>
+
+<pre class="brush: js notranslate">num1;</pre>
+
+<p>C'est pareil avec <code>--</code> : essayez ce qui suit</p>
+
+<pre class="brush: js notranslate">var num2 = 6;
+num2--;
+num2;</pre>
+
+<div class="note">
+<p><strong>Note </strong>: En mettant l'opérateur avant la variable au lieu d'après, le navigateur agira dans l'ordre inverse — incrément/décrément de la variable <em>puis</em> renvoi de la valeur — . Essayez les exemples plus haut, mais cette fois avec <code>++num1</code> et <code>--num2</code>.</p>
+</div>
+
+<h2 id="Opérateurs_dassignation">Opérateurs d'assignation</h2>
+
+<p>Les opérateurs d'assignation sont ceux qui fixent la valeur d'une variable. Nous avons déjà utilisé plusieurs fois le plus élémentaire, <code>=</code> — il donne à la variable de gauche la valeur indiquée à droite :</p>
+
+<pre class="brush: js notranslate">var x = 3; // x contient la valeur 3
+var y = 4; // y contient la valeur 4
+x = y; // x contient maintenant la même valeur que y, 4</pre>
+
+<p>Mais il existe des types plus complexes, qui procurent des raccourcis utiles pour un code plus propre et plus efficace. Les plus courants sont listés ici :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col" style="width: 13%;">Opérateur</th>
+   <th scope="col" style="width: 17%;">Nom</th>
+   <th scope="col" style="width: 40%;">But</th>
+   <th scope="col" style="width: 12%;">Exemple</th>
+   <th scope="col" style="width: 18%;">Raccourci pour</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>+=</code></td>
+   <td>Addition et assignation</td>
+   <td>Ajoute la valeur de droite à la valeur de la variable de gauche, puis renvoie la nouvelle valeur de la variable</td>
+   <td><code>x = 3;<br>
+    x += 4;</code></td>
+   <td><code>x = 3;<br>
+    x = x + 4;</code></td>
+  </tr>
+  <tr>
+   <td><code>-=</code></td>
+   <td>Soustraction et assignation</td>
+   <td>Soustrait la valeur de droite à la valeur de la variable de gauche, puis renvoie la nouvelle valeur de la variable</td>
+   <td><code>x = 6;<br>
+    x -= 3;</code></td>
+   <td><code>x = 6;<br>
+    x = x - 3;</code></td>
+  </tr>
+  <tr>
+   <td><code>*=</code></td>
+   <td>Multiplication et assignation</td>
+   <td>Multiplie la valeur de droite par la valeur de la variable de gauche, puis renvoie la nouvelle valeur de la variable</td>
+   <td><code>x = 2;<br>
+    x *= 3;</code></td>
+   <td><code>x = 2;<br>
+    x = x * 3;</code></td>
+  </tr>
+  <tr>
+   <td><code>/=</code></td>
+   <td>Division et assignation</td>
+   <td>Divise la valeur de la variable de gauche par la valeur de droite, puis renvoie la nouvelle valeur de la variable</td>
+   <td><code>x = 10;<br>
+    x /= 5;</code></td>
+   <td><code>x = 10;<br>
+    x = x / 5;</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Saisissez quelques uns de ces exemples dans la console pour avoir une idée de leur fonctionnement. Dans chaque cas, voyez si vous avez deviné la valeur avant de saisir la deuxième ligne.</p>
+
+<p>Notez que vous pouvez opportunément utiliser une autre variable comme opérateur sur la droite de chaque expression, par exemple :</p>
+
+<pre class="brush: js notranslate">var x = 3; // x contient la valeur 3
+var y = 4; // y contient la valeur 4
+x *= y; // x contient maintenant la valeur 12</pre>
+
+<div class="note">
+<p><strong>Note </strong>: Il y a des tas d'<a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment_operators">autres opérateurs d'assignation disponibles</a>, mais ceux‑ci sont les plus courants que vous devez les connaître dès maintenant.</p>
+</div>
+
+<h2 id="Apprentissage_actif_dimensionner_une_boîte_à_canevas">Apprentissage actif : dimensionner une boîte à canevas</h2>
+
+<p>Dans cet exercice, vous allez manier quelques nombres et opérateurs pour changer la taille d'une boîte. La boîte est tracée à l'aide de l'API de navigateur nommée {{domxref("Canvas API", "", "", "true")}}. Pas besoin de savoir comment elle fonctionne — concentrez-vous simplement sur les mathématiques pour l'instant. Les largeur et hauteur de la boîte (en pixels) sont définies par les variables <code>x</code> et <code>y</code>, qui sont toutes deux initialisées avec la valeur 50.</p>
+
+<p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/editable_canvas.html", '100%', 520)}}</p>
+
+<p><strong><a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/editable_canvas.html">Ouvrir dans une nouvelle fenêtre</a></strong></p>
+
+<p>Le code dans la boîte ci-desssus peut être modifié. Un commentaire signale les deux lignes suivantes, que vous devez mettre à jour pour faire en sorte que la boîte grossisse ou rétrécisse aux tailles données, en utilisant certains opérateurs et/ou valeurs dans chaque cas. Essayez ce qui suit en réinitialisant à chaque étape :</p>
+
+<ul>
+ <li>Modifier la ligne qui calcule x pour que la boîte conserve sa largeur de 50 pixels, mais que 50 soit calculé avec les nombres 43 et 7 ainsi qu'un opérateur arithmétique.</li>
+ <li>Modifier la ligne qui calcule y pour que la boîte prenne une hauteur de 75 pixels, mais que 75 ait été calculé avec les nombres 25 et 3 ainsi qu'un opérateur arithmétique.</li>
+ <li>Modifier la ligne qui calcule x pour que la boîte prenne une largeur de 250pixels, mais que 250 ait été calculé avec deux nombres ainsi que l'opérateur <strong>reste</strong> (modulo).</li>
+ <li>Modifier la ligne qui calcule y pour que la boîte prenne une hauteur de 150pixels, mais que 150 ait été calculé en utilisant 3 nombres et les opérateurs <strong>soustraction </strong>et <strong>division</strong>.</li>
+ <li>Modifier la ligne qui calcule x pour que la boîte prenne une largeur de 200pixels, mais que 200 ait été calculé en se servant du nombre 4 et d'un opérateur d'<strong>assignation</strong>.</li>
+ <li>Modifier la ligne qui calcule y pour que la boîte prenne une hauteur de 200 pixels, mais que 200 ait été calculé en utilisant les nombres 50 et 3 ainsi que les opérateurs <strong>multiplication</strong>, <strong>addition </strong>et <strong>assignation</strong>.</li>
+</ul>
+
+<p>Pas d'inquiétude si vous vous trompez. Vous pouvez toujours presser le bouton Reset et les choses fonctionneront à nouveau. Après avoir répondu correctement aux questions posées, amusez‑vous avec ce code ou définissez vous‑même les défis.</p>
+
+<h2 id="Opérateurs_de_comparaison">Opérateurs de comparaison</h2>
+
+<p>Parfois nous avons besoin d'exécuter des tests vrai/faux (true/false), puis d'agir en fonction du résultat — pour ce faire, nous utilisons des <strong>opérateurs de comparaison</strong>.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Operateur</th>
+   <th scope="col">Nom</th>
+   <th scope="col">But</th>
+   <th scope="col">Exemple</th>
+  </tr>
+  <tr>
+   <td><code>===</code></td>
+   <td>Égalité stricte</td>
+   <td>Teste si les valeurs de droite et de gauche sont identiques</td>
+   <td><code>5 === 2 + 4</code></td>
+  </tr>
+  <tr>
+   <td><code>!==</code></td>
+   <td>Non-égalité stricte</td>
+   <td>Teste si les valeurs de doite et de gauche ne sont pas identiques</td>
+   <td><code>5 !== 2 + 3</code></td>
+  </tr>
+  <tr>
+   <td><code>&lt;</code></td>
+   <td>Inférieur à</td>
+   <td>Teste si la valeur de gauche est plus petite que celle de droite.</td>
+   <td><code>10 &lt; 6</code></td>
+  </tr>
+  <tr>
+   <td><code>&gt;</code></td>
+   <td>Supérieur à</td>
+   <td>Teste si la valeur de gauche est plus grande que celle de droite.</td>
+   <td><code>10 &gt; 20</code></td>
+  </tr>
+  <tr>
+   <td>&lt;=</td>
+   <td>Inférieur ou égal à</td>
+   <td>Teste si la valeur de gauche est plus petite ou égale à celle de droite.</td>
+   <td><code>3 &lt;= 2</code></td>
+  </tr>
+  <tr>
+   <td>&gt;=</td>
+   <td>Supérieur ou égal à</td>
+   <td>Teste si la valeur de gauche est supérieure ou égale à celle de droite.</td>
+   <td><code>5 &gt;= 4</code></td>
+  </tr>
+ </thead>
+</table>
+
+<div class="note">
+<p><strong>Note </strong>: Vous verrez peut‑être certaines personnes utiliser <code>==</code> et <code>!=</code> pour leurs test d'égalité ou non-égalité. Ces opérateurs sont valides en JavaScript, mais différents de <code>===</code>/<code>!==</code>. Les versions avec deux caractères testent si les valeurs sont les mêmes, mais pas si les types de données sont les mêmes.  Les versions strictes à trois caractères testent à la fois l'égalité des valeurs <em>et</em> des types de données. Il y a moins d'erreurs avec les versions strictes, donc nous vous engageons à les utiliser dans tous les cas.</p>
+</div>
+
+<p>Si vous entrez certaines de ces valeurs dans une console, vous constaterez que toutes renvoient une valeur <code>true</code>/<code>false</code> — les booléens mentionnés dans l'article précédent. Ces opérateurs sont très utiles car il nous permettent de prendre des décisions dans le code, et ils sont utilisés chaque fois que nous avons besoin de faire un choix. Par exemple, les booléens s'utilisent pour :</p>
+
+<ul>
+ <li>Afficher l'étiquette textuelle ad-hoc sur un bouton selon qu'une fonctionnalité est active ou pas</li>
+ <li>Afficher un message de fin de jeu si un jeu est terminé ou un message de victoire si le jeu a été remporté</li>
+ <li>Afficher des remerciements saisonniers corrects selon la saison de vacances</li>
+ <li>Faire un zoom avant ou arrière sur une carte selon le niveau de zoom choisi</li>
+</ul>
+
+<p>Nous verrons comment coder cette logique quand nous étudierons les directives conditionnelles dans un article ultérieur. Pour le moment, regardons un exemple rapide :</p>
+
+<pre class="brush: html notranslate">&lt;button&gt;Démarrer la machine&lt;/button&gt;
+&lt;p&gt;La machine est arrêtée.&lt;/p&gt;
+</pre>
+
+<pre class="brush: js notranslate">var btn = document.querySelector('button');
+var txt = document.querySelector('p');
+
+btn.addEventListener('click', updateBtn);
+
+function updateBtn() {
+  if (btn.textContent === 'Démarrer la machine') {
+    btn.textContent = 'Arrêter la machine';
+    txt.textContent = 'La machine est en marche !';
+  } else {
+    btn.textContent = 'Démarrer la machine';
+    txt.textContent = 'La machine est arrêtée.';
+  }
+}</pre>
+
+<p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/conditional.html", '100%', 100)}}</p>
+
+<p><strong><a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/conditional.html">Ouvrir dans une nouvelle fenêtre</a></strong></p>
+
+<p>Vous pouvez voir l'utilisation de l'opérateur d'égalité stricte dans la fonction <code>updateBtn()</code>. Dans ce cas, nous ne testons pas si deux expressions mathématiques ont la même valeur — nous testons si le contenu textuel d'un bouton contient une certaine chaîne — mais c'est toujours le même principe. Si le bouton affiche « Démarrer la machine » quand on le presse, nous changeons son étiquette en « Arrêter la machine » et mettons à jour l'étiquette comme il convient. Si le bouton indique « Arrêter la machine » au moment de le presser, nous basculons l'étiquette à nouveau.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Un contrôle qui alterne entre deux états porte généralement le nom de <strong>toggle</strong> (bascule). Il bascule d'un état l'autre — allumé, éteint, etc.</p>
+</div>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Dans cet article, nous avons exposé les informations fondamentales concernant les nombres en JavaScript, à connaître absolument pour débuter convenablement. Vous verrez encore et encore des utilisations de nombres tout au long de cet introduction au JavaScript, prenons donc une pause pour le moment. Si vous êtes de ceux qui n'aiment pas les maths, vous noterez avec satisfaction que ce chapitre était vraiment très court.</p>
+
+<p>Dans l'article suivant, nous étudierons le texte et les façons dont JavaScript nous permet de le manipuler.</p>
+
+<div class="note">
+<p><strong>Note</strong> : Si les Maths vous plaisent et que vous souhaitez en savoir plus sur la manière dont elles sont implémentées en JavaScript, vous trouverez plus de précisions dans la section principale JavaScript du MDN. Une grande place est réservée dans ces articles aux <a href="/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates">Nombres et dates</a> et aux <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators">Expressions et opérateurs</a>.</p>
+</div>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}</p>
diff --git a/files/fr/learn/javascript/first_steps/methode_chaine_utile/index.html b/files/fr/learn/javascript/first_steps/methode_chaine_utile/index.html
new file mode 100644
index 0000000000..d81c3ccb4e
--- /dev/null
+++ b/files/fr/learn/javascript/first_steps/methode_chaine_utile/index.html
@@ -0,0 +1,479 @@
+---
+title: Méthodes utiles pour les chaînes de caractères
+slug: Learn/JavaScript/First_steps/methode_chaine_utile
+tags:
+  - Apprentissage
+  - Article
+  - Codage
+  - Débutant
+  - JavaScript
+  - Longueur
+  - cas
+  - couper
+  - indexof
+  - majuscule
+  - minuscule
+  - remplacer
+translation_of: Learn/JavaScript/First_steps/Useful_string_methods
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}</div>
+
+<p class="summary">À présent que nous avons vu les bases de la manipulation des chaînes de caractères, allons un cran plus loin et commençons à imaginer les opérations utiles que nous pourrions faire sur les chaînes de caractères avec les méthodes intégrées : trouver la longueur d'une chaîne, assembler ou couper des chaînes, substituer un caractère à un autre dans une chaîne, et plus encore.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Vocabulaire courant de l'informatique, bases de HTML et CSS, compréhension de ce que fait JavaScript.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>Comprendre que les chaînes de caractères sont des objets, et apprendre à utiliser certaines méthodes basiques disponibles sur ces objets pour manipuler les chaînes.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Les_chaînes_de_caractères_sont_des_objets">Les chaînes de caractères sont des objets</h2>
+
+<p id="Useful_string_methods">Nous l'avons déjà dit, et nous le redirons — <em>tout</em> est objet en JavaScript. Lorsque vous créez une chaîne, par exemple en utilisant :</p>
+
+<pre class="brush: js">let string = 'Ceci est une chaîne';</pre>
+
+<p>votre variable devient une instance de l'objet <code>String</code>, et par conséquent possède un grand nombre de propriétés et de méthodes associées. Allez sur la page de l'objet {{jsxref("String")}} et regardez la liste sur le côté de la page !</p>
+
+<p><strong>Avant que votre cervelle ne commence à bouillir, pas de panique !</strong> Vous n'avez vraiment pas besoin de connaître la plupart des méthodes de cette liste au début de cet apprentissage. Mais il est probable que vous utiliserez  certaines assez souvent. Nous allons les voir maintenant.</p>
+
+<p>Entrez quelques exemples dans une console vierge. En voici une ci-dessous (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="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">console de développement du navigateur</a> si vous préférez).</p>
+
+<div class="hidden">
+<h6 id="Hidden_code">Hidden code</h6>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;JavaScript console&lt;/title&gt;
+    &lt;style&gt;
+      * {
+        box-sizing: border-box;
+      }
+
+      html {
+        background-color: #0C323D;
+        color: #809089;
+        font-family: monospace;
+      }
+
+      body {
+        max-width: 700px;
+      }
+
+      p {
+        margin: 0;
+        width: 1%;
+        padding: 0 1%;
+        font-size: 16px;
+        line-height: 1.5;
+        float: left;
+      }
+
+      .input p {
+        margin-right: 1%;
+      }
+
+      .output p {
+        width: 100%;
+      }
+
+      .input input {
+        width: 96%;
+        float: left;
+        border: none;
+        font-size: 16px;
+        line-height: 1.5;
+        font-family: monospace;
+        padding: 0;
+        background: #0C323D;
+        color: #809089;
+      }
+
+      div {
+        clear: both;
+      }
+
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+
+  &lt;/body&gt;
+
+  &lt;script&gt;
+    var geval = eval;
+    function createInput() {
+      var inputDiv = document.createElement('div');
+      var inputPara = document.createElement('p');
+      var inputForm = document.createElement('input');
+
+      inputDiv.setAttribute('class', 'input');
+      inputPara.textContent = '&gt;';
+      inputDiv.appendChild(inputPara);
+      inputDiv.appendChild(inputForm);
+      document.body.appendChild(inputDiv);
+
+      inputForm.addEventListener('change', executeCode);
+    }
+
+    function executeCode(e) {
+      try {
+        var result = geval(e.target.value);
+      } catch(e) {
+        var result = 'error — ' + e.message;
+      }
+
+      var outputDiv = document.createElement('div');
+      var outputPara = document.createElement('p');
+
+      outputDiv.setAttribute('class','output');
+      outputPara.textContent = 'Result: ' + result;
+      outputDiv.appendChild(outputPara);
+      document.body.appendChild(outputDiv);
+
+      e.target.disabled = true;
+      e.target.parentNode.style.opacity = '0.5';
+
+      createInput()
+    }
+
+    createInput();
+
+  &lt;/script&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_code', '100%', 300) }}</p>
+
+<h3 id="Trouver_la_longueur_dune_chaîne">Trouver la longueur d'une chaîne</h3>
+
+<p>C'est facile — il suffit d'utiliser la propriété {{jsxref("String.prototype.length", "length")}}. Entrez ceci :</p>
+
+<pre class="brush: js">let browserType = 'mozilla';
+browserType.length;</pre>
+
+<p>Cette commande doit renvoyer le nombre 7, parce que « mozilla » comporte 7 caractères. C'est utile pour de nombreuses raisons ; par exemple, vous pourriez avoir besoin de trouver les longueurs d'une série de noms pour les afficher par taille ou faire savoir à un utilisateur qu'il a entré un nom trop long dans un champ de formulaire à partir du moment où il dépasse une certaine taille.</p>
+
+<h3 id="Retrouver_un_caractère_donné_dans_une_chaîne">Retrouver un caractère donné dans une chaîne</h3>
+
+<p>Dans le même ordre d'idées, il est possible de faire renvoyer tout caractère d'une chaîne avec <strong>la notation crochets</strong> — c'est-à-dire en ajoutant des crochets (<code>[]</code>) à la fin du nom de la variable. Entre les crochets, mettez le rang du caractère à retrouver ; par exemple, pour retrouver le premier caractère, vous devez  écrire ceci :</p>
+
+<pre class="brush: js">browserType[0];</pre>
+
+<p>Les ordinateurs décomptent à partir de 0, pas de 1 ! Pour retrouver le dernier caractère de <em>n'importe quelle</em> chaîne, on peut utiliser la commande qui suit ; elle combine cette technique avec la propriété <code>length</code>  que nous avons vue plus haut :</p>
+
+<pre class="brush: js">browserType[browserType.length-1];</pre>
+
+<p>La longueur de « mozilla » est de 7 caractères, mais comme le décompte se fait à partir de 0, la position du caractère est 6, d'où la nécessité d'écrire <code>length-1</code>. Vous pourrez utiliser cette propriété pour, par exemple, trouver la première lettre d'une série de chaînes et les trier alphabétiquement.</p>
+
+<h3 id="Trouver_une_sous-chaîne_à_lintérieur_dune_chaîne_et_lextraire">Trouver une sous-chaîne à l'intérieur d'une chaîne et l'extraire</h3>
+
+<ol>
+ <li>Parfois, vous aurez besoin de trouver si une chaîne est présente à l'intérieur d'une autre chaîne plus grande (on dit en général <em>si une sous-chaîne est présente à l'intérieur d'une chaîne</em>). La méthode {{jsxref("String.prototype.indexOf()", "indexOf()")}} permet de le faire ; elle prend un unique ({{glossary("parameter")}}) — la sous-chaîne recherchée. Essayez :
+
+  <pre class="brush: js">browserType.indexOf('zilla');</pre>
+  La commande donne 2 comme résultat, car la sous-chaîne « zilla » commence à la position 2 (0, 1, 2 — donc au troisième caractère) dans « mozilla ». Un tel code s'utilise pour filtrer des chaînes. Par exemple, vous pourriez avoir une liste d'adresses web et ne vouloir afficher que celles qui contiennent « mozilla ».</li>
+</ol>
+
+<ol start="2">
+ <li>On peut faire cela autrement, peut-être plus efficacement encore. Écrivez :
+  <pre class="brush: js">browserType.indexOf('vanilla');</pre>
+  Cela doit vous donner <code>-1</code> comme résultat — renvoyé quand la sous-chaîne, en l'occurence « vanilla », n'est pas trouvée dans la chaîne principale.<br>
+  <br>
+  Vous pouvez utiliser cette propriété pour trouver tous les cas de chaînes <strong>ne</strong> <strong>contenant</strong> <strong>pas</strong> la sous-chaîne « mozilla », ou bien <strong>la contenant</strong>, si vous utilisez l'opérateur négation logique, tel que montré ci-dessous. Vous pourriez faire quelque chose comme :
+
+  <pre class="brush: js">if(browserType.indexOf('mozilla') !== -1) {
+  // faire des tas de choses avec la chaîne
+}</pre>
+ </li>
+ <li>Lorsque vous savez où la sous-chaîne commence à l'intérieur de la chaîne, et savez à quel caractère elle prend fin, vous pouvez utiliser {{jsxref("String.prototype.slice()", "slice()")}} pour l'extraire. Voyez ce code :
+  <pre class="brush: js">browserType.slice(0,3);</pre>
+  Il renvoie « moz » — le premier paramètre est la position du caractère où doit commencer l'extraction, et le second paramètre est la position du caractère se trouvant après le dernier à extraire. Ainsi, l'extraction va de la première position à la dernière, celle-ci non comprise. On peut dire, dans notre cas, que le second paramètre est égal à la longueur de la chaîne retournée.</li>
+ <li>Également, si vous souhaitez extraire tous les caractères après un caractère donné jusqu'à la fin de la chaîne, vous n'avez pas à mettre le second paramètre ! Il suffit d'indiquer la position du caractère à partir duquel vous voulez extraire les caractères restants dans la chaîne. Essayez la commande :
+  <pre class="brush: js">browserType.slice(2);</pre>
+  Elle renvoie « zilla » — le caractère à la position 2 est « z » et comme nous n'avons pas mis de second paramètre, la sous-chaîne retournée comporte tous les caractères restants de la chaîne.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong> : Le second paramètre de <code>slice()</code> est optionnel : s'il n'est pas defini, l'extraction va jusqu'à la fin de la chaîne originale. Il existe aussi d'autres options, allez à la page de {{jsxref("String.prototype.slice()", "slice()")}} pour voir ces autres options.</p>
+</div>
+
+<h3 id="Changer_la_casse">Changer la casse</h3>
+
+<p>Les méthodes {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}} et {{jsxref("String.prototype.toUpperCase()", "toUpperCase()")}} s'appliquent à une chaîne et en convertissent tous les caractères, respectivement en minuscules ou en majuscules. C'est utile si, par exemple, vous souhaitez normaliser toutes les données entrées par des utilisateurs avant de les stocker dans une base de données.</p>
+
+<p>Essayons d'entrer les lignes suivantes et voyons ce qui se passe :</p>
+
+<pre class="brush: js">let radData = 'My NaMe Is MuD';
+radData.toLowerCase();
+radData.toUpperCase();</pre>
+
+<h3 id="Actualiser_des_parties_de_chaîne">Actualiser des parties de chaîne</h3>
+
+<p>Vous pouvez remplacer une sous-chaîne à l'intérieur d'une chaîne avec une autre sous-chaîne à l'aide de la méthode {{jsxref("String.prototype.replace()", "replace()")}}. Cela fonctionne très simplement au niveau basique, bien qu'il soit possible de faire des choses plus avancées, mais nous ne y attarderons pas maintenant.</p>
+
+<p>La méthode prend deux paramètres — la chaîne que vous voulez remplacer et la chaîne avec laquelle vous voulez la remplacer. Essayez avec cet exemple :</p>
+
+<pre class="brush: js">browserType.replace('moz','van');</pre>
+
+<p>À noter : pour que, dans un programme réel, la variable <code>browserType</code> reflète effectivement la valeur actualisée, il faut assigner à la valeur de la variable le résultat de l'opération ; cette dernière ne met pas à jour automatiquement la valeur de la sous-chaîne. Pour ce faire, il faut écrire :<code> browserType = browserType.replace('moz','van');</code></p>
+
+<h2 id="Apprendre_en_pratiquant">Apprendre en pratiquant</h2>
+
+<p>Dans cette section, vous allez pouvoir vous entraîner à écrire du code de manipulation de chaîne. Dans chacun des exercices ci-dessous, nous avons un tableau de chaînes, une boucle qui traîte chaque valeur dans le tableau et l'affiche dans une liste à puces. Vous n'avez pas besoin de comprendre comment fonctionnent les tableaux ou les boucles dès maintenant — cela vous sera expliqué dans de prochains articles. Tout ce dont vous avez besoin dans chaque cas est d'écrire le code qui va renvoyer les chaînes dans le format souhaité.</p>
+
+<p>Chaque exemple est accompagné d'un bouton « Réinitialiser », que vous pouvez utiliser pour réinitialiser le code si vous faites une erreur et que vous ne parvenez pas à la corriger, et un bouton « Montrer la solution » sur lequel vous pouvez cliquer pour afficher une réponse possible si jamais vous êtes vraiment bloqué.</p>
+
+<h3 id="Filtrer_des_messages_de_vœux">Filtrer des messages de vœux</h3>
+
+<p>Dans ce premier exercice, nous commencerons simplement — nous avons un tableau de carte de voeux, mais nous voulons les trier pour ne lister que les messages concernant Noël. Nous attendons de vous que vous utilisiez un test conditionnel à l'intérieur d'une structure <code>if( ... )</code>, pour tester chaque chaîne et ne l'afficher dans la liste que si elle contient un message concernant Noël.</p>
+
+<ol>
+ <li>Réfléchissez d'abord à comment vérifier que le message concerne Noël. Quelle chaîne est présente dans tous ces messages, et quelle méthode pourriez-vous utiliser pour en tester la présence ?</li>
+ <li>Il vous faudra alors écrire un test conditionnel sous la forme <em>opérande1 opérateur opérande2</em>. La chose à gauche est-elle égale à la chose à droite ? Ou dans notre cas, l'appel de méthode de gauche renvoie-t-il le résultat de droite ?</li>
+ <li>Conseil : dans notre cas, il est probablement plus utile de tester si le résultat de l'appel de notre méthode <em>n'est pas égal</em> à un certain résultat.</li>
+</ol>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;div class="output" style="min-height: 125px;"&gt;
+
+&lt;ul&gt;
+
+&lt;/ul&gt;
+
+&lt;/div&gt;
+
+&lt;textarea id="code" class="playable-code" style="height: 290px;"&gt;
+var list = document.querySelector('.output ul');
+list.innerHTML = '';
+var greetings = ['Happy Birthday!',
+                 'Merry Christmas my love',
+                 'A happy Christmas to all the family',
+                 'You\'re all I want for Christmas',
+                 'Get well soon'];
+
+for (var i = 0; i &lt; greetings.length; i++) {
+  var input = greetings[i];
+  // Your conditional test needs to go inside the parentheses
+  // in the line below, replacing what's currently there
+  if (greetings[i]) {
+    var result = input;
+    var listItem = document.createElement('li');
+    listItem.textContent = result;
+    list.appendChild(listItem);
+  }
+}
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: js">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var code = textarea.value;
+
+function updateCode() {
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  textarea.value = jsSolution;
+  updateCode();
+});
+
+var jsSolution = 'var list = document.querySelector(\'.output ul\');\nlist.innerHTML = \'\';\nvar greetings = [\'Happy Birthday!\',\n                 \'Merry Christmas my love\',\n                 \'A happy Christmas to all the family\',\n                 \'You\\\'re all I want for Christmas\',\n                 \'Get well soon\'];\n\nfor(var i = 0; i &lt; greetings.length; i++) {\n  var input = greetings[i];\n  if(greetings[i].indexOf(\'Christmas\') !== -1) {\n    var result = input;\n    var listItem = document.createElement(\'li\');\n    listItem.textContent = result;\n    list.appendChild(listItem);\n  }\n}';
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', '100%', 490) }}</p>
+
+<h3 id="Remettre_les_majuscules">Remettre les majuscules</h3>
+
+<p>Dans cet exercice, nous avons des noms des villes du Royaume-Uni, mais les majuscules ne sont pas au bon endroit. Nous souhaitons modifier les noms pour qu'ils soient en minuscules à l'exception de la première lettre qui doit être une majuscule. Une bonne manière de faire ceci :</p>
+
+<ol>
+ <li>Convertissez la totalité de la chaîne contenue dans la variable <code>input</code> en minuscules et stockez-la dans une nouvelle variable.</li>
+ <li>Récupérez la première lettre de la chaîne dans cette nouvelle variable et stockez-la dans une autre variable.</li>
+ <li>En utilisant la dernière variable comme une sous-chaîne, remplacez la première lettre de la chaîne en minuscules par la première lettre de la chaîne en minuscules transformé en majuscules. Stockez le résultat de cette procédure de remplacement dans une autre nouvelle variable.</li>
+ <li>Changez la valeur de la variable <code>result</code> afin qu'elle soit égale au résultat final plutôt qu'à <code>input</code>.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: Un conseil — les paramètres des méthodes de chaîne n'ont pas besoin d'être des chaînes, elle peuvent aussi être des variables, ou même des variables avec une méthode invoquée sur elles.</p>
+</div>
+
+<div class="hidden">
+<h6 id="Playable_code_2">Playable code 2</h6>
+
+<pre class="brush: html">&lt;div class="output" style="min-height: 125px;"&gt;
+
+&lt;ul&gt;
+
+&lt;/ul&gt;
+
+&lt;/div&gt;
+
+&lt;textarea id="code" class="playable-code" style="height: 250px;"&gt;
+var list = document.querySelector('.output ul');
+list.innerHTML = '';
+var cities = ['lonDon', 'ManCHESTer', 'BiRmiNGHAM', 'liVERpoOL'];
+for(var i = 0; i &lt; cities.length; i++) {
+  var input = cities[i];
+  // write your code just below here
+
+  var result = input;
+  var listItem = document.createElement('li');
+  listItem.textContent = result;
+  list.appendChild(listItem);
+}
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: js">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var code = textarea.value;
+
+function updateCode() {
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  textarea.value = jsSolution;
+  updateCode();
+});
+
+var jsSolution = 'var list = document.querySelector(\'.output ul\');\nlist.innerHTML = \'\';\nvar cities = [\'lonDon\', \'ManCHESTer\', \'BiRmiNGHAM\', \'liVERpoOL\'];\n\nfor(var i = 0; i &lt; cities.length; i++) {\n  var input = cities[i];\n  var lower = input.toLowerCase();\n  var firstLetter = lower.slice(0,1);\n  var capitalized = lower.replace(firstLetter,firstLetter.toUpperCase());\n  var result = capitalized;\n  var listItem = document.createElement(\'li\');\n  listItem.textContent = result;\n  list.appendChild(listItem);\n\n}';
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_2', '100%', 450) }}</p>
+
+<h3 id="Créer_de_nouvelles_chaînes_à_partir_de_morceaux">Créer de nouvelles chaînes à partir de morceaux</h3>
+
+<p>Dans ce dernier exercice, le tableau contient un lot de chaînes contenant des informations à propos d'arrêts de train dans le nord de l'Angleterre. Les chaînes sont des éléments de données contenant le code en trois lettres de l'arrêt, suivi par des données lisibles par machine, suivi par un point-virgule, et enfin le nom de la station lisible par un humain. Par exemple :</p>
+
+<pre>MAN675847583748sjt567654;Manchester Piccadilly</pre>
+
+<p>Nous voulons extraire le code de la station et son nom, et les associer dans une chaîne avec la structure suivante :</p>
+
+<pre>MAN: Manchester Piccadilly</pre>
+
+<p>Nous vous recommandons de procéder de la manière suivante :</p>
+
+<ol>
+ <li>Extraire le code de trois lettres de la station et le stocker dans une nouvelle variable.</li>
+ <li>Trouver la position du caractère point-virgule.</li>
+ <li>Extraire le nom de la station lisible par un humain en utilisant la position du caractère point virgule comme référence, et le stocker dans une nouvelle variable.</li>
+ <li>Concaténer les deux nouvelles variables et une chaîne pour fabriquer la chaîne finale.</li>
+ <li>Changer la valeur de la variable <code>result</code> pour qu'elle soit égale à la chaîne finale, plutôt qu'à <code>input</code>.</li>
+</ol>
+
+<div class="hidden">
+<h6 id="Playable_code_3">Playable code 3</h6>
+
+<pre class="brush: html">&lt;div class="output" style="min-height: 125px;"&gt;
+
+&lt;ul&gt;
+
+&lt;/ul&gt;
+
+&lt;/div&gt;
+
+&lt;textarea id="code" class="playable-code" style="height: 285px;"&gt;
+var list = document.querySelector('.output ul');
+list.innerHTML = '';
+var stations = ['MAN675847583748sjt567654;Manchester Piccadilly',
+                'GNF576746573fhdg4737dh4;Greenfield',
+                'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street',
+                'SYB4f65hf75f736463;Stalybridge',
+                'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield'];
+
+for (var i = 0; i &lt; stations.length; i++) {
+  var input = stations[i];
+  // write your code just below here
+
+  var result = input;
+  var listItem = document.createElement('li');
+  listItem.textContent = result;
+  list.appendChild(listItem);
+}
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: js">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var code = textarea.value;
+
+function updateCode() {
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  textarea.value = jsSolution;
+  updateCode();
+});
+
+var jsSolution = 'var list = document.querySelector(\'.output ul\');\nlist.innerHTML = \'\';\nvar stations = [\'MAN675847583748sjt567654;Manchester Piccadilly\',\n                \'GNF576746573fhdg4737dh4;Greenfield\',\n                \'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street\',\n                \'SYB4f65hf75f736463;Stalybridge\',\n                \'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield\'];\n\nfor(var i = 0; i &lt; stations.length; i++) {\n  var input = stations[i];\n  var code = input.slice(0,3);\n  var semiC = input.indexOf(\';\');\n  var name = input.slice(semiC + 1);\n  var result = code + \': \' + name;\n  var listItem = document.createElement(\'li\');\n  listItem.textContent = result;\n  list.appendChild(listItem);\n}';
+
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_3', '100%', 485) }}</p>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>Il n'est pas possible d'éluder le fait qu'il est très important de savoir manipuler des mots et des phrases lorsqu'on programme — tout particulièrement en JavaScript, dans la mesure où les sites web servent à la communication entre les personnes. Cet article vous a indiqué, pour l'instant, les bases à connaître pour manipuler les chaînes. Ce sera utile lorsque vous aborderez des sujets plus complexes à l'avenir. Pour suivre, nous allons nous intéresser au dernier grand type de données sur lequel nous devons nous concentrer à court terme — les tableaux.</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}</p>
diff --git a/files/fr/learn/javascript/first_steps/silly_story_generator/index.html b/files/fr/learn/javascript/first_steps/silly_story_generator/index.html
new file mode 100644
index 0000000000..b2eae8fff5
--- /dev/null
+++ b/files/fr/learn/javascript/first_steps/silly_story_generator/index.html
@@ -0,0 +1,143 @@
+---
+title: Générateur d'histoires absurdes
+slug: Learn/JavaScript/First_steps/Silly_story_generator
+translation_of: Learn/JavaScript/First_steps/Silly_story_generator
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}</div>
+
+<p class="summary">Dans cette évaluation, vous aurez pour tâche d'utiliser les connaissances que vous avez apprises dans les articles de ce module et de les appliquer dans le but de créer une appli ludique qui génère des histoires absurdes au hasard. Amusez-vous bien !</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>
+    <p>Avant de vous lancer dans cette évaluation, vous devez avoir déjà travaillé sur tous les articles de ce module.</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>
+    <p>Tester la compréhension des fondamentaux JavaScript tels que les variables, les nombres, les opérateurs, les chaînes de caractères et les tableaux.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Point_de_départ">Point de départ</h2>
+
+<p>Pour commencer cette évaluation :</p>
+
+<ul>
+ <li>Allez <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/index.html">chercher le fichier HTML</a> d'exemple et enregistrez-en une copie locale sous le nom <code>index.html</code> dans un nouveau dossier quelque part sur votre ordinateur. Ce fichier contient également la CSS pour mettre en forme l'exemple qui l'accompagne.</li>
+ <li>Allez sur la <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/raw-text.txt">page qui contient le texte brut</a> et gardez la fenêtre ouverte dans un onglet différent de votre navigateur. Vous en aurez besoin plus tard.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: Vous pouvez aussi utiliser un site tel que que <a class="external external-icon" href="http://jsbin.com/">JSBin</a> ou <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> pour votre évaluation. Vous pouvez copier-coller le HTML, CSS et JavaScript vers l'un de ces éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne propose pas d'onglet JavaScript séparé, n'hésitez pas à en intégrer un dans une balise <code>&lt;script&gt;</code> au sein de la page HTML.</p>
+</div>
+
+<h2 id="Résumé_du_projet">Résumé du projet</h2>
+
+<p>On vous a fourni du code HTML/CSS brut ainsi que quelques chaînes de caractères et fonctions JavaScript : vous devez écrire le code JavaScript nécessaire pour transformer ces éléments en un programme fonctionnel, qui fera les choses suivantes :</p>
+
+<ul>
+ <li>Générer une histoire absurde quand on appuie sur le bouton "Generate random story" (Générer une histoire au hasard).</li>
+ <li>Remplacer dans l'histoire le nom par défaut "Bob" par un nom personnalisé, dans le cas où le champ "Enter custom name" (Entrer un nom personnalisé) a été complété avant que le bouton "Générer" soit déclenché.</li>
+ <li>Convertir les unités de poids et de température par défaut (américaines) vers leurs équivalents britanniques si le boutton "radio UK" a été coché avant que le bouton "Générer" soit déclenché.</li>
+ <li>Générer une nouvelle histoire absurde au hasard quand on appuie à nouveau sur le bouton (et encore une, et encore une...)</li>
+</ul>
+
+<p>Les captures d'écran suivantes montrent un exemple de ce que le programme terminé doit afficher :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13667/assessment-1.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+
+<p>Pour vous faire une idée un peu plus précise, <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/assessment-finished/">jetez un œil à l'exemple terminé</a> (mais sans regarder le code source !)</p>
+
+<h2 id="Les_étapes">Les étapes</h2>
+
+<p>Les sections suivantes décrivent ce que vous devez faire :</p>
+
+<p>Installation basique :</p>
+
+<ol>
+ <li>Créez un nouveau fichier nommé <code>main.js</code>, dans le même dossier que <code>index.html</code> file.</li>
+ <li>Appliquez le fichier JavaScript externe à votre code HTML en insérant une balise {{htmlelement("script")}} dans votre code HTML en référençant <code>main.js</code>. Mettez-la juste avant de refermer la balise <code>&lt;/body&gt;</code>.</li>
+</ol>
+
+<p>Variables initiales et fonctions :</p>
+
+<ol>
+ <li>Dans le fichier de texte brut, copiez tout le code présent sous le titre "1. COMPLETE VARIABLE AND FUNCTION DEFINITIONS" et collez-le en haut du fichier <code>main</code>. Cela vous donne trois variables qui stockent les références respectivement vers le champ "Enter custom name", vers le bouton "Generate random story" (<code>randomize</code>), et vers la balise {{htmlelement("p")}} en bas du corps HTML dans lequel l'histoire sera copiée (<code>story</code>). Par ailleurs, vous avez une fonction appelée <code>randomValueFromArray() </code>qui prend une table, et qui renvoie au hasard l'un des éléments qu'elle contient.</li>
+ <li>Maintenant regardons la deuxième section du fichier de texte brut : "2. RAW TEXT STRINGS". Cette section contient des chaînes de caractères qui vont se comporter comme des entrées (<em>input</em>) dans notre program. L'idée est que vous intégriez ces variables internes dans <code>main.js</code>:
+  <ol>
+   <li>Stockez la première longue chaîne de caractères (string) dans la variable <code>storyText</code>.</li>
+   <li>Stockez le premier groupe de trois strings dans le tableau <code>insertX</code>.</li>
+   <li>Stockez le deuxième groupe de trois strings dans le tableau <code>insertY</code>.</li>
+   <li>Stockez le troisième groupe de trois strings dans une tableau <code>insertZ</code>.</li>
+  </ol>
+ </li>
+</ol>
+
+<p>Mettre en place le gestionnaire d'événements (<em>event handler</em>) et le squelette de la fonction :</p>
+
+<ol>
+ <li>Retournez au fichier de texte brut.</li>
+ <li>Copiez le code qui se trouve sous le titre "3. EVENT LISTENER AND PARTIAL FUNCTION DEFINITION" et collez-le en bas de votre fichier <code>main.js</code> principal. Cela :
+  <ul>
+   <li>Ajoute un gestionnaire d'événements pour les clics à la variable <code>randomize</code> de telle sorte que quand on clique sur le bouton associé, la fonction <code>result()</code> se lance.</li>
+   <li>Ajoute une définition partiellement complète de la fonction <code>result()</code> à votre code. Pour le reste de l'évaluation, vous compléterez des lignes au sein de cette fonction pour la compléter et la faire fonctionner correctement.</li>
+  </ul>
+ </li>
+</ol>
+
+<p>Compléter la fonction <code>result()</code> :</p>
+
+<ol>
+ <li>Créer une nouvelle variable nommée <code>newStory</code>, et fixer sa valeur pour qu'elle soit égale à <code>storyText</code>. C'est nécessaire pour que soit créée une nouvelle histoire au hasard à chaque fois qu'on appuiera sur le bouton "Generate" et que la fonction sera lancée. Si on apportait des modifications directement à <code>storyText</code>, on ne pourrait générer une nouvelle histoire qu'une seule fois.</li>
+ <li>Créer trois nouvelles variables nommées <code>xItem</code>, <code>yItem</code>, et <code>zItem</code>, et faites en sorte qu'elles soient égales au résultat de l'appel de <code>randomValueFromArray()</code> sur vos trois tables (le résultat dans chaque cas fera apparaître un élément au hasard en provenance de chacune des tables appelées). Par exemple, vous pouvez appeler la fonction et lui faire retourner une chaîne de caractères au hasard depuis <code>insertX</code> en écrivant <code>randomValueFromArray(insertX)</code>.</li>
+ <li>Ensuite nous allons remplacer les trois fichiers temporaires dans la chaîne <code>newStory</code> — <code>:insertx:</code>, <code>:inserty:</code>, et <code>:insertz:</code> — par les chaînes stockées dans <code>xItem</code>, <code>yItem</code>, and <code>zItem</code>. Ici, une méthode particulière de chaînes pourra vous aider : dans chaque cas, faites que l'appel à la méthode soit égal à <code>newStory</code>, de sorte qu'à chaque appel, <code>newStory</code> est égal à lui-même, mais avec les substitutions effectuées. Ainsi, à chaque fois qu'on appuiera sur le bouton, ces fichiers temporaires seront chacun remplacés par une chaîne de caractères absurdes au hasard. Pour information, la méthode en question remplace seulement la première séquence de sous-chaîne qu'elle trouve, donc vous devrez peut-être l'un des appels deux fois.</li>
+ <li>Dans le premier block <code>if</code>, ajoutez une autre méthode de remplacement de chaîne pour remplacer le nom 'Bob' que vous trouverez dans la chaîne <code>newStory</code> en tant que variable <code>name</code>. Dans ce block, on établit que "Si une valeur a été entrée dans le champ <code>customName</code> text input, on remplacera dans l'histoire le mot Bob par ce nom personnalisé".</li>
+ <li>Dans le deuxième block <code>if</code>, on vérifie que le bouton radio <code>uk</code> a été coché. Si c'est le cas, nous voulons convertir les valeurs de poids et de température de l'histoire. Les pounds et les farenheit deviennent des stones et des centigrades. Procédez comme suit :
+  <ol>
+   <li>Cherchez la formule pour convertir les pounds en stones et les fareinheit en centigrades.</li>
+   <li>Dans la ligne qui définit la variable <code>weight</code> (poids), remplacez 300 par un calcul qui convertit 300 pounds en stones. Le tout englobé dans un <code>Math.round()</code> à la fin duquel vous concatenez <code>'stone'</code>.</li>
+   <li>Dans la ligne qui définit la variable <code>temperature</code>, remplacez 94 par un calcul qui convertit 94 fahrenheit en centigrades. Le tout englobé dans un <code>Math.round()</code> à la fin duquel vous concatenez<code> 'centigrade'</code>.</li>
+   <li>Juste sous la définition des deux variables, ajoutez deux lignes de remplacement de chaînes supplémentaires qui remplacent '94 farhenheit' par les contenus de la variable <code>temperature</code>, et '300 pounds' par les contenus de la variable <code>weight</code>.</li>
+  </ol>
+ </li>
+ <li>Enfin, dans l'antépénultième ligne de la fonction, faites en sorte que la propriété <code>textContent</code> de la variable <code>story</code> (qui référence le paragraphe) soit égale à <code>newStory</code>.</li>
+</ol>
+
+<h2 id="Trucs_et_astuces">Trucs et astuces</h2>
+
+<ul>
+ <li>Aucun besoin de modifier le code HTML, à part pour lui appliquer le JavaScript.</li>
+ <li>Si vous n'êtes pas sûr que le JavaScript est correctement appliqué à votre HTML, essayez de supprimer temporairement tout le contenu du fichier JavaScript, et d'y ajouter un morceau très simple de code JavaScript dont vous savez qu'il aura un effet visible, puis sauvegardez et rafraîchissez. Par exemple, le morceau de code suivant fait que l'arrière plan de la balise {{htmlelement("html")}} devient rouge — donc toute la fenêtre du navigateur devrait devenir rouge si le JavaScript est correctement appliqué :</li>
+ <li>
+  <pre class="brush: js">document.querySelector('html').style.backgroundColor = 'red';</pre>
+ </li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/round">Math.round()</a> est une méthode JavaScript intégrée qui arrondit simplement le résultat d'un calcul à l'entier le plus proche.</li>
+</ul>
+
+<h2 id="Évaluation">Évaluation</h2>
+
+<p>Si vous suivez cette évaluation dans le cadre d'un cours organisé, vous devriez pouvoir soumettre votre travail à votre enseignant/encadrant pour être évalué. Si vous êtes autodidacte, vous pouvez facilement obtenir le guide de notation en vous adressant à la mailing list <a href="https://lists.mozilla.org/listinfo/dev-mdc">dev-mdc</a> ou au canal IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a> sur <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Essayez de faire l'exercice d'abord — vous ne gagnez rien à tricher !</p>
+
+<p>{{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}</p>
+
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li>
+</ul>
diff --git a/files/fr/learn/javascript/first_steps/strings/index.html b/files/fr/learn/javascript/first_steps/strings/index.html
new file mode 100644
index 0000000000..16cf1c51ce
--- /dev/null
+++ b/files/fr/learn/javascript/first_steps/strings/index.html
@@ -0,0 +1,278 @@
+---
+title: Gérer du texte — les chaînes de caractères en JavaScript
+slug: Learn/JavaScript/First_steps/Strings
+tags:
+  - Article
+  - Attacher
+  - Codage
+  - Débutant
+  - Guide
+  - Guillemets
+  - JavaScript
+  - chaînes
+  - concatenation
+translation_of: Learn/JavaScript/First_steps/Strings
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps")}}</div>
+
+<p class="summary">Concentrons-nous maintenant sur les chaînes de caractères - c'est le nom donné à un segment de texte en programmation. Dans cet article, nous aborderons les aspects les plus communs des chaînes de caractères que vous devez vraiment connaître quand vous apprenez JavaScript, comme créer une chaîne de caractères, échapper des guillemets dans une chaîne ou encore concaténer des chaînes.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Connaissance de base en informatique, une compréhension basique de HTML et CSS et savoir ce qu'est JavaScript.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>Devenir familier avec les fondamentaux pour manipuler les chaînes de caractères en JavaScript.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Le_pouvoir_des_mots">Le pouvoir des mots</h2>
+
+<p>Les mots ont beaucoup d'importance pour les humains — ils occupent une large part dans nos façons de communiquer. Comme le Web est un medium essentiellement fondé sur du texte conçu pour permettre aux hommes de communiquer et partager de l'information, il est utile de contrôler les mots qui y sont publiés. {{glossary("HTML")}} donne structure et sens au texte, {{glossary("CSS")}} en gère le style et JavaScript comporte une série de fonctionnalités pour manipuler les chaînes de caractères, créer des messages d'accueil personnalisés, afficher la bonne étiquette quand nécessaire, trier des termes dans l'ordre voulu, et bien d'autres choses encore.</p>
+
+<p>À peu près tous les programmes que nous vous avons montrés jusqu'ici ont impliqué des manipulations de chaînes de caractères.</p>
+
+<h2 id="Chaînes_de_caractères_—_les_bases">Chaînes de caractères — les bases</h2>
+
+<p>À première vue, les chaînes se traitent de la même manière que les nombres ; mais si vous approfondissez la chose, vous commencerez à percevoir des différences notables. Entrons sur la console quelques lignes simples pour nous familiariser avec la chose. À propos de la console, nous en avons placé une ci‑dessous (vous pouvez  <a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html">l'ouvrir</a> dans un onglet ou une fenêtre séparée, ou bien utiliser celle de <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">l'explorateur, </a>comme vous préférez).</p>
+
+<div class="hidden">
+<h6 id="Hidden_code">Hidden code</h6>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;JavaScript console&lt;/title&gt;
+    &lt;style&gt;
+      * {
+        box-sizing: border-box;
+      }
+
+      html {
+        background-color: #0C323D;
+        color: #809089;
+        font-family: monospace;
+      }
+
+      body {
+        max-width: 700px;
+      }
+
+      p {
+        margin: 0;
+        width: 1%;
+        padding: 0 1%;
+        font-size: 16px;
+        line-height: 1.5;
+        float: left;
+      }
+
+      .input p {
+        margin-right: 1%;
+      }
+
+      .output p {
+        width: 100%;
+      }
+
+      .input input {
+        width: 96%;
+        float: left;
+        border: none;
+        font-size: 16px;
+        line-height: 1.5;
+        font-family: monospace;
+        padding: 0;
+        background: #0C323D;
+        color: #809089;
+      }
+
+      div {
+        clear: both;
+      }
+
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+
+  &lt;/body&gt;
+
+  &lt;script&gt;
+    let geval = eval;
+    function createInput() {
+      let inputDiv = document.createElement('div');
+      let inputPara = document.createElement('p');
+      let inputForm = document.createElement('input');
+
+      inputDiv.setAttribute('class','input');
+      inputPara.textContent = '&gt;';
+      inputDiv.appendChild(inputPara);
+      inputDiv.appendChild(inputForm);
+      document.body.appendChild(inputDiv);
+
+      if(document.querySelectorAll('div').length &gt; 1) {
+        inputForm.focus();
+      }
+
+      inputForm.addEventListener('change', executeCode);
+    }
+
+    function executeCode(e) {
+      try {
+        let result = geval(e.target.value);
+      } catch(e) {
+        let result = 'error — ' + e.message;
+      }
+
+      let outputDiv = document.createElement('div');
+      let outputPara = document.createElement('p');
+
+      outputDiv.setAttribute('class','output');
+      outputPara.textContent = 'Result: ' + result;
+      outputDiv.appendChild(outputPara);
+      document.body.appendChild(outputDiv);
+
+      e.target.disabled = true;
+      e.target.parentNode.style.opacity = '0.5';
+
+      createInput()
+    }
+
+    createInput();
+
+  &lt;/script&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_code', '100%', 300) }}</p>
+
+<h3 id="Créer_une_chaîne_de_texte">Créer une chaîne de texte</h3>
+
+<ol>
+ <li>Pour débuter, entrez les lignes suivantes :
+  <pre class="brush: js">let string = 'La révolution ne sera pas télévisée.';
+string;</pre>
+  Comme nous l'avons fait avec les nombres, nous déclarons une variable, l'initialisons avec une valeur de chaîne, puis renvoyons la valeur. La seule différence ici est que lorsque nous écrivons une chaîne, nous la mettons entre guillemets.</li>
+ <li>Si vous ne le faites pas, ou si vous oubliez un des guillemets, vous déclenchez une erreur. Essayez d'entrer une de ces lignes :
+  <pre class="brush: js example-bad">let badString = Voici un test;
+let badString = 'Voici un test;
+let badString = Voici un test';</pre>
+  Ces lignes de code ne fonctionnent pas parce que toute chaîne de texte qui n'est pas écrite entre guillemets est considérée comme un nom de variable, un nom de propriété, un mot réservé ou quelque chose de semblable. Quand l'interpréteur ne parvient pas à trouver la déclaration de ladite variable, une erreur est déclenchée (par ex. « missing ; before statement »). Si l'interpréteur voit le début d'une chaîne  mais ne trouve pas sa fin, comme dans la ligne 2, il se plaint en émettant une erreur (avec « <em>unterminated string literal</em> »). Si votre programme produit de telles erreurs, revoyez‑le et vérifiez qu'aucun guillemet ne manque.</li>
+ <li>L'assertion suivante fonctionne si la variable <code>string</code> a été préalablement définie — essayez maintenant :
+  <pre class="brush: js">let badString = string;
+badString;</pre>
+  <code>badString</code> est maintenant défini avec la même valeur que <code>string</code>.</li>
+</ol>
+
+<h3 id="Guillemets_simples_vs_guillemets_doubles">Guillemets simples vs guillemets doubles</h3>
+
+<ol>
+ <li>En JavaScript, vous pouvez envelopper vos chaînes entre des guillemets simples ou doubles. Les deux expressions suivantes sont correctes :
+  <pre class="brush: js">let sgl = 'Guillemet simple.';
+let dbl = "Guillemets doubles.";
+sgl;
+dbl;</pre>
+ </li>
+ <li>Il y a une toute petite différence entre les deux, et celle que vous retenez relève de la préférence personnelle. Prenez-en une, et tenez‑vous y toutefois : du code avec des mises entre guillemets diversifiées peut amener des confusions, en particulier si vous utilisez les deux sortes dans la même chaîne ! Ce qui suit renvoie une erreur :
+  <pre class="brush: js example-bad">let badQuotes = 'Quoi sur Terre ?";</pre>
+ </li>
+ <li>L'interpréteur pensera que la chaîne n'a pas été fermée, car le type de guillemet autre ne servant pas à délimiter les chaînes peut y être employé. Par exemple, ces deux assertions sont valables :
+  <pre class="brush: js">let sglDbl = 'Mangeriez‑vous un "souper de poisson"?';
+let dblSgl = "J'ai le blues.";
+sglDbl;
+dblSgl;</pre>
+ </li>
+ <li>Bien entendu, vous ne pouvez pas inclure dans la chaîne le même type de guillemet que celui qui est utilisé pour la délimiter. Ce qui suit conduit à une erreur, car l'explorateur ne peut pas déterminer là où se termine la chaîne :
+  <pre class="brush: js example-bad">let bigmouth = 'Je n'ai pas eu droit à prendre place...';</pre>
+  Voilà qui nous amène naturellement au prochain sujet.</li>
+</ol>
+
+<h3 id="Échappement_de_caractères_dans_une_chaîne">Échappement de caractères dans une chaîne</h3>
+
+<p>Pour corriger l'erreur dans notre ligne de code précédente, il nous suffit d'échapper au problème que pose le guillemet. « Échapper des caractères » signifie que nous les marquons de manière à ce qu'ils soient reconnus comme partie intégrante du texte, et non pas comme symbole de code. Dans JavaScript, nous le faisons en mettant une barre oblique inverse juste avant le caractère. Essayons :</p>
+
+<pre class="brush: js">let bigmouth = 'Je n\'ai pas eu droit à prendre place...';
+bigmouth;</pre>
+
+<p>Cela fonctionne à la perfection. Vous pouvez échapper d'autres caractères de la même manière, par ex. <code>\"</code>,  et il y a certains codes spéciaux à côté. Voyez  <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#Escape_notation">Notations d'échappement</a> pour plus de détails.</p>
+
+<h2 id="Concaténation_de_chaînes">Concaténation de chaînes</h2>
+
+<ol>
+ <li>Concaténer est un terme de programmation du genre chic qui signifie « attacher ensemble ». Pour attacher des chaînes en JavaScript, on utilise l'opérateur plus (+) , le même que l'on utilise pour ajouter deux nombres, mais dans ce contexte il fait quelque chose de différent. Voyons un exemple dans la console.
+  <pre class="brush: js">let one = 'Hello, ';
+let two = 'comment allez‑vous ?';
+let joined = one + two;
+joined;</pre>
+  Il en résulte que la variable nommée <code>joined</code> contient la valeur "Hello, comment allez‑vous ?".</li>
+ <li>Dans le dernier exemple, nous avons juste attaché deux chaînes ensemble, mais vous pouvez en attacher autant que vous voulez, pour autant que vous mettiez un signe  <code>+</code>  entre chacune. Essayez ceci :
+  <pre class="brush: js">let multiple = one + one + one + one + two;
+multiple;</pre>
+ </li>
+ <li>Vous pouvez aussi mélanger des variables avec des vraies chaînes. Regardez :
+  <pre class="brush: js">let response = one + 'Je vais bien — et vous ' + two;
+response;</pre>
+ </li>
+</ol>
+
+<div class="note">
+<p><strong>Note </strong>: Quand vous entrez une chaîne dans votre code, entre guillemets simples ou doubles, on l'appelle <strong>chaîne littérale</strong>.</p>
+</div>
+
+<h3 id="Concaténation_dans_un_contexte">Concaténation dans un contexte</h3>
+
+<p>Examinons une concaténation dans une action — voici un exemple tiré en amont de ce cours :</p>
+
+<pre class="brush: html">&lt;button&gt;Pressez‑moi&lt;/button&gt;</pre>
+
+<pre class="brush: js">let button = document.querySelector('button');
+
+button.onclick = function() {
+  let name = prompt('Quel est votre nom ?');
+  alert('Hello ' + name + ', sympa de vous voir !');
+}</pre>
+
+<p>{{ EmbedLiveSample('Concatenation_in_context', '100%', 50) }}</p>
+
+<p>Ici nous utilisons en ligne 4 la fonction {{domxref("Window.prompt()", "Window.prompt()")}}, qui demande à l'utilisateur de répondre à une question par l'intermédiaire d'une boîte de dialogue, puis qui stocke le texte entré dans une variable donnée — dans ce cas <code>name</code>. En ligne 5, nous nous servons de la fonction {{domxref("Window.alert()", "Window.alert()")}} pour afficher un dialogue contenant une chaîne assemblée à partir de deux chaînes littérales et de la variable <code>name</code>, par concaténation.</p>
+
+<h3 id="Nombres_vs_chaînes">Nombres vs chaînes</h3>
+
+<ol>
+ <li>Que se passe-t-il quand nous essayons d'additionner (ou concaténer) une chaîne et un nombre ? Essayons dans la console :
+  <pre class="brush: js">'Front ' + 242;
+</pre>
+  Vous vous attendriez à déclencher une erreur, mais cela fonctionne parfaitement. Essayer de représenter une chaîne comme un nombre n'a vraiment aucun sens, mais représenter un nombre par une chaîne en a, donc le navigateur convertit adroitement le nombre en chaîne et concatène les deux chaînes.</li>
+ <li>Vous pouvez même faire cela avec deux nombres — vous forcez un nombre à devenir une chaîne en le mettant entre guillemets. Essayez ce qui suit (nous nous servons de l'opérateur <code>typeof</code> pour vérifier si la variable est un nombre ou une chaîne):
+  <pre class="brush: js">let myDate = '19' + '67';
+typeof myDate;</pre>
+ </li>
+ <li>Si vous avez une variable numérique que vous souhaitez convertir en chaîne sans autre modification, ou une variable numérique que vous voulez convertir en chaîne sans autre modification, vous pouvez utiliser les constructions suivantes :
+  <ul>
+   <li>L'objet {{jsxref("Number")}} convertit tout ce qui lui est passé en nombre, si c'est possible. Essayez :
+    <pre class="brush: js">let myString = '123';
+let myNum = Number(myString);
+typeof myNum;</pre>
+   </li>
+   <li>D'autre part, tout nombre possède une méthode nommée <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toString">toString()</a></code> qui le convertit en chaîne équivalente. Essayez :
+    <pre class="brush: js">let myNum = 123;
+let myString = myNum.toString();
+typeof myString;</pre>
+   </li>
+  </ul>
+  Ces constructions peuvent être vraiment utiles en certaines circonstances. Par exemple, si un utilisateur entre un nombre dans un champ texte d'un formulaire, c'est une chaîne. Mais si vous voulez ajouter ce nombre à autre chose, il est nécessaire qu'il soit du type <code>number</code>, donc vous pouvez le faire passer par la méthode <code>Number()</code> pour gérer cela. C'est exactement ce que nous avons fait dans le jeu <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game.html#L63">Devinez un nombre, à la ligne 63</a>.</li>
+</ol>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>Voilà donc les bases de la manipulation des chaînes de caractères en JavaScript. Dans le prochain article, nous allons bâtir sur ces éléments en examinant certaines méthodes intégrées disponibles pour les chaînes de caractères dans JavaScript et en les utilisant pour mettre les chaînes de caractères dans la forme voulue.</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps")}}</p>
diff --git a/files/fr/learn/javascript/first_steps/tableaux/index.html b/files/fr/learn/javascript/first_steps/tableaux/index.html
new file mode 100644
index 0000000000..4fc38abf8d
--- /dev/null
+++ b/files/fr/learn/javascript/first_steps/tableaux/index.html
@@ -0,0 +1,528 @@
+---
+title: Les tableaux
+slug: Learn/JavaScript/First_steps/tableaux
+tags:
+  - Apprendre
+  - Article
+  - Codage
+  - Débutants
+  - JavaScript
+  - Lier
+  - Pop
+  - Push
+  - Tableaux
+  - décalage
+  - séparer
+translation_of: Learn/JavaScript/First_steps/Arrays
+---
+<div>{{LearnSidebar}}</div>
+
+<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>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Vocabulaire courant de l'informatique, bases de HTML et CSS, compréhension de ce que fait JavaScript.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>Comprendre ce que sont les tableaux et savoir comment les manipuler en JavaScript.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Quest‑ce_quun_tableau">Qu'est‑ce qu'un tableau ?</h2>
+
+<p>Les tableaux sont généralement décrits comme des "objets de type liste" ; un tableau est un objet contenant plusieurs valeurs. Les objets tableau peuvent être stockés dans des variables et traités de la même manière que tout autre type de valeur, la différence étant que nous pouvons accéder à chaque valeur du tableau individuellement, et faire des choses super utiles et efficaces avec la liste des valeurs, comme boucler et faire la même chose pour chaque valeur. Peut-être que nous avons une série d'articles et leurs prix stockés dans un tableau, et nous voulons les parcourir tous et les imprimer sur une facture, tout en totalisant tous les prix ensemble et en imprimant le prix total en bas.</p>
+
+<p>Sans tableaux, nous devrions stocker chaque valeur dans une variable séparée, puis appeler le code qui effectue l'affichage ou l'impression, puis ajouter séparément chaque élément. Ce serait plus long à écrire, moins efficace et cela comporterait plus de risques d'erreurs. Si nous avions 10 articles à ajouter à la facture, ce serait déjà assez mauvais, mais qu'en serait-il de 100 articles ou de 1000 ? Nous reviendrons sur cet exemple plus loin dans l'article.</p>
+
+<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="/en-US/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">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;JavaScript console&lt;/title&gt;
+    &lt;style&gt;
+      * {
+        box-sizing: border-box;
+      }
+
+      html {
+        background-color: #0C323D;
+        color: #809089;
+        font-family: monospace;
+      }
+
+      body {
+        max-width: 700px;
+      }
+
+      p {
+        margin: 0;
+        width: 1%;
+        padding: 0 1%;
+        font-size: 16px;
+        line-height: 1.5;
+        float: left;
+      }
+
+      .input p {
+        margin-right: 1%;
+      }
+
+      .output p {
+        width: 100%;
+      }
+
+      .input input {
+        width: 96%;
+        float: left;
+        border: none;
+        font-size: 16px;
+        line-height: 1.5;
+        font-family: monospace;
+        padding: 0;
+        background: #0C323D;
+        color: #809089;
+      }
+
+      div {
+        clear: both;
+      }
+
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+
+  &lt;/body&gt;
+
+  &lt;script&gt;
+    var geval = eval;
+    function createInput() {
+      var inputDiv = document.createElement('div');
+      var inputPara = document.createElement('p');
+      var inputForm = document.createElement('input');
+
+      inputDiv.setAttribute('class','input');
+      inputPara.textContent = '&gt;';
+      inputDiv.appendChild(inputPara);
+      inputDiv.appendChild(inputForm);
+      document.body.appendChild(inputDiv);
+
+      if(document.querySelectorAll('div').length &gt; 1) {
+        inputForm.focus();
+      }
+
+      inputForm.addEventListener('change', executeCode);
+    }
+
+    function executeCode(e) {
+      try {
+        var result = geval(e.target.value);
+      } catch(e) {
+        var result = 'error — ' + e.message;
+      }
+
+      var outputDiv = document.createElement('div');
+      var outputPara = document.createElement('p');
+
+      outputDiv.setAttribute('class','output');
+      outputPara.textContent = 'Result: ' + result;
+      outputDiv.appendChild(outputPara);
+      document.body.appendChild(outputDiv);
+
+      e.target.disabled = true;
+      e.target.parentNode.style.opacity = '0.5';
+
+      createInput()
+    }
+
+    createInput();
+
+  &lt;/script&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_code', '100%', 300) }}</p>
+
+<h3 id="Créer_un_tableau">Créer un tableau</h3>
+
+<p>On définit les valeurs d'un tableau par une liste d'éléments entre crochets droits, séparés par des virgules.</p>
+
+<ol>
+ <li>Disons que nous voulons mettre une liste d'achats dans un tableau — nous devons opérer comme suit. Entrez les lignes ci‑après dans la console :
+  <pre class="brush: js">let shopping = ['pain', 'lait', 'fromage', 'houmous', 'nouilles'];
+shopping;</pre>
+ </li>
+ <li>Dans ce cas, chaque élément du tableau est une chaîne, mais gardez en tête que vous pouvez stocker n'importe quel élément dans un tableau — chaîne, nombre, objet, autre variable et même d'autres tableaux. Vous pouvez également mélanger et assortir les types d'articles — il n'est pas obligatoire que ce soient tous des nombres, des chaînes, etc. Essayez ceci :</li>
+ <li>
+  <pre class="brush: js">let sequence = [1, 1, 2, 3, 5, 8, 13];
+let random = ['arbre', 795, [0, 1, 2]];</pre>
+ </li>
+ <li>Créez donc quelques tableaux de votre cru avant de continuer.</li>
+</ol>
+
+<h3 id="Accès_aux_éléments_de_tableau_et_modification_de_ceux‑ci">Accès aux éléments de tableau et modification de ceux‑ci</h3>
+
+<p>Vous pouvez avoir accès isolément aux éléments dans un tableau en utilisant la notation crochet, de la même façon que nous avons eu <a href="/en-US/Learn/JavaScript/First_steps/Useful_string_methods#Retrieving_a_specific_string_character">accès aux lettres dans une chaîne</a>.</p>
+
+<ol>
+ <li>Entrez ceci dans la console :
+  <pre class="brush: js">shopping[0];
+// renvoie "pain"</pre>
+ </li>
+ <li>Vous pouvez aussi modifier un élément dans un tableau en donnant simplement une nouvelle valeur à l'élément. Essayez ceci :
+  <pre class="brush: js">shopping[0] = 'crème de sésame';
+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>
+ </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>
+  <pre class="brush: js">random[2][2];</pre>
+ </li>
+ <li>Poursuivez et faites quelques autres modifications dans les exemples de tableaux avant de poursuivre.</li>
+</ol>
+
+<h3 id="Trouver_la_taille_dun_tableau">Trouver la taille d'un tableau</h3>
+
+<p>Vous pouvez trouver la taille d'un tableau (le nombre d'éléments qu'il comporte) de la même façon que vous obtenez la taille (en caractères) d'un chaîne — avec la propriété {{jsxref("Array.prototype.length","length")}}. Essayez :</p>
+
+<pre class="brush: js">sequence.length;
+// renvoie 7</pre>
+
+<p>Il y a d'autres usages, mais le plus courant permet de dire à une boucle de poursuivre jusqu'à ce que tous les éléments du tableau aient été passés en revue. Ainsi, par exemple :</p>
+
+<pre class="brush: js">let sequence = [1, 1, 2, 3, 5, 8, 13];
+for (var i = 0; i &lt; sequence.length; i++) {
+  console.log(sequence[i]);
+}</pre>
+
+<p>Vous en apprendrez plus sur les boucles dans un prochain article, mais, en résumé, ce code dit :</p>
+
+<ol>
+ <li>Commencer la boucle à l'élément 0 du tableau.</li>
+ <li>Arrêter de tourner quand le dernier élément du tableau sera atteint. Cela fonctionne pour n'importe quelle dimension de tableau ; dans notre cas, on sortira de la boucle à l'élément  7 (c'est bon, car le dernier élément — que nous souhaitons que la boucle traite — est le 6).</li>
+ <li>Afficher chaque élément sur la console de l'explorateur avec<code> <a href="/en-US/docs/Web/API/Console/log">console.log()</a></code>.</li>
+</ol>
+
+<h2 id="Quelques_méthodes_utiles_pour_les_tableaux">Quelques méthodes utiles pour les tableaux</h2>
+
+<p>Dans ce paragraphe nous examinerons quelques méthodes de tableaux à connaître. Elles permettent de scinder des chaînes en éléments de tableau et inversement, et d'ajouter de nouveaux éléments dans des tableaux.</p>
+
+<h3 id="Conversions_entre_chaînes_et_tableaux">Conversions entre chaînes et tableaux</h3>
+
+<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>
+</div>
+
+<ol>
+ <li>Servons‑nous en et voyons comment elle fonctionne. D'abord créons une chaîne dans la console :
+  <pre class="brush: js">let myData = 'Manchester,London,Liverpool,Birmingham,Leeds,Carlisle';</pre>
+ </li>
+ <li>Scindons‑la à chaque virgule :
+  <pre class="brush: js">let myArray = myData.split(',');
+myArray;</pre>
+ </li>
+ <li>Pour terminer, trouvons la taille du nouveau tableau et retrouvons quelques‑uns de ses éléments :
+  <pre class="brush: js">myArray.length;
+myArray[0]; // le premier élément du tableau
+myArray[1]; // le deuxième élément du tableau
+myArray[myArray.length-1]; // le dernier élément du tableau</pre>
+ </li>
+ <li>Vous pouvez également faire le contraire avec la méthode {{jsxref("Array.prototype.join()","join()")}}. Essayons :
+  <pre class="brush: js">let myNewString = myArray.join(',');
+myNewString;</pre>
+ </li>
+ <li>Une autre façon de convertir un tableau en chaîne consiste à se servir de la méthode {{jsxref("Array.prototype.toString()","toString()")}}. <code>toString()</code> est plus simple au plan des arguments que <code>join()</code>, car elle ne prend pas de paramètre, mais elle est plus limitée. Avec <code>join()</code> vous pouvez diversifier les séparateurs (essayez de lancer la commande du point 4 avec un caractère autre que la virgule).
+  <pre class="brush: js">let dogNames = ["Rocket","Flash","Bella","Slugger"];
+dogNames.toString(); //Rocket,Flash,Bella,Slugger</pre>
+ </li>
+</ol>
+
+<h3 id="Ajout_et_suppression_déléments_de_tableau">Ajout et suppression d'éléments de tableau</h3>
+
+<p>Nous n'avons pas encore parlé d'ajout et de suppression d'éléments de tableau — allons‑y. Nous utiliserons le tableau <code>myArray</code> dont nous nous sommes servis à la fin de la dernière section. Si vous n'avez pas entré les commandes de cette section dans la console, il est nécessaire de créer d'abord le tableau :</p>
+
+<pre class="brush: js">let myArray = ['Manchester', 'London', 'Liverpool', 'Birmingham', 'Leeds', 'Carlisle'];</pre>
+
+<p>Premièrement, pour ajouter ou supprimer un élément à la fin du tableau, vous pouvez respectivement utiliser {{jsxref("Array.prototype.push()","push()")}} et {{jsxref("Array.prototype.pop()","pop()")}}.</p>
+
+<ol>
+ <li>Voyons <code>push()</code> d'abord — notez que vous devez mettre en paramètre les éléments que vous souhaitez ajouter à la fin du tableau. Essayez ceci :
+
+  <pre class="brush: js">myArray.push('Cardiff');
+myArray;
+myArray.push('Bradford', 'Brighton');
+myArray;
+</pre>
+ </li>
+ <li>La taille du tableau modifié est renvoyée quand l'appel de la méthode est terminé. Si vous voulez enregistrer la taille du nouveau tableau dans une variable, vous pouvez écrire quelque chose comme ceci :
+  <pre class="brush: js">let newLength = myArray.push('Bristol');
+myArray;
+newLength;</pre>
+ </li>
+ <li>Supprimer le dernier élément de la liste est très simple : il suffit de lancer <code>pop()</code> sur celle‑ci. Essayez :
+  <pre class="brush: js">myArray.pop();</pre>
+ </li>
+ <li>L'élément supprimé est renvoyé à la fin de l'appel de la méthode. Également :
+  <pre class="brush: js">let removedItem = myArray.pop();
+myArray;
+removedItem;</pre>
+ </li>
+</ol>
+
+<p>{{jsxref("Array.prototype.unshift()","unshift()")}} et {{jsxref("Array.prototype.shift()","shift()")}} fonctionnent exactement de la même manière, excepté qu'il travaillent sur la tête du tableau au lieu de la queue.</p>
+
+<ol>
+ <li>D'abord <code>unshift()</code> — essayez :
+
+  <pre class="brush: js">myArray.unshift('Edinburgh');
+myArray;</pre>
+ </li>
+ <li>Maintenant <code>shift()</code> — essayez !
+  <pre class="brush: js">let removedItem = myArray.shift();
+myArray;
+removedItem;</pre>
+ </li>
+</ol>
+
+<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>
+
+<ol>
+ <li>Sous le commentaire <code>// number 1</code> il y a un certain nombre de chaînes de caractères, chacune précise le nom d'un produit et son prix séparé par deux‑points. Placez‑les dans un tableau ; enregistrez‑le sous le nom <code>products</code>.</li>
+ <li>Sur la même ligne que le commentaire <code>// number 2</code> se trouve le début d'une boucle. Dans cette ligne nous avons actuellement <code>i &lt;= 0</code>, test conditionnel qui fait que la <a href="/en-US/Learn/JavaScript/First_steps/A_first_splash#Loops"> boucle</a> stoppe immédiatement, car ce test dit « stopper dès que <code>i</code> est inférieur ou égal à 0 » et <code>i</code> part de 0. Remplacez ce test par un qui  n'arrêtera pas la boucle tant que <code>i</code> sera inférieur à la taille du tableau <code>products</code>.</li>
+ <li>Au dessous du commentaire <code>// number 3</code> nous voudrions que vous écriviez une ligne de code qui scinde l'élément courant du tableau (<code>nom:prix</code>) en deux éléments distincts, un contenant uniquement le nom, l'autre uniquement le prix. Si vous nous ne savez pas trop comment faire, revoyez l'article relatif aux <a href="/fr/docs/Learn/JavaScript/First_steps/methode_chaine_utile">Méthodes utiles pour les chaînes de caractères</a> pour vous aider, ou même mieux, regardez la section {{anch("Converting between strings and arrays")}} de cet article.</li>
+ <li>En plus des lignes de code ci‑dessus, vous aurez aussi à convertir les prix de chaîne de caractères en chiffres. Si vous ne vous souvenez pas comment faire, revoyez le <a href="/fr/docs/Learn/JavaScript/First_steps/Strings#Numbers_versus_strings">premier article à propos des chaînes</a>.</li>
+ <li>Il y a une variable nommée <code>total</code> créée et initialisée à la valeur de 0 en tête du code. Dans la boucle (sous <code>// number 4</code>) ajoutez une ligne qui ajoute à ce total le prix de l'article courant  à chaque itération de la boucle, de sorte que à la fin du code le prix total soit correctement inscrit sur l'envoi. Vous pourriez avoir besoin d'un <a href="/en-US/Learn/JavaScript/First_steps/Math#Assignment_operators">opérateur d'assignation</a> pour faire cela ;-).</li>
+ <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">&lt;div class="output" style="min-height: 150px;"&gt;
+
+&lt;ul&gt;
+
+&lt;/ul&gt;
+
+&lt;p&gt;&lt;/p&gt;
+
+&lt;/div&gt;
+
+&lt;textarea id="code" class="playable-code" style="height: 370px;"&gt;
+var list = document.querySelector('.output ul');
+var totalBox = document.querySelector('.output p');
+var total = 0;
+list.innerHTML = '';
+totalBox.textContent = '';
+// number 1
+                'Caleçons:6.99'
+                'Chaussettes:5.99'
+                'T-shirt:14.99'
+                'Pantalons:31.99'
+                'Chaussures:23.99';
+
+for (var i = 0; i &lt;= 0; i++) { // number 2
+  // number 3
+
+  // number 4
+
+  // number 5
+  itemText = 0;
+
+  var listItem = document.createElement('li');
+  listItem.textContent = itemText;
+  list.appendChild(listItem);
+}
+
+totalBox.textContent = 'Total: $' + total.toFixed(2);
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: js">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var code = textarea.value;
+
+function updateCode() {
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  textarea.value = jsSolution;
+  updateCode();
+});
+
+var jsSolution = 'var list = document.querySelector(\'.output ul\');\nvar totalBox = document.querySelector(\'.output p\');\nvar total = 0;\nlist.innerHTML = \'\';\ntotalBox.textContent = \'\';\n\nvar products = [\'Underpants:6.99\',\n                \'Socks:5.99\',\n                \'T-shirt:14.99\',\n                \'Trousers:31.99\',\n                \'Shoes:23.99\'];\n\nfor(var i = 0; i &lt; products.length; i++) {\n  var subArray = products[i].split(\':\');\n  var name = subArray[0];\n  var price = Number(subArray[1]);\n  total += price;\n  itemText = name + \' — $\' + price;\n\n  var listItem = document.createElement(\'li\');\n  listItem.textContent = itemText;\n  list.appendChild(listItem);\n}\n\ntotalBox.textContent = \'Total: $\' + total.toFixed(2);';
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', '100%', 600) }}</p>
+
+<h2 id="Activité_Top_5_des_recherches">Activité : Top 5 des recherches</h2>
+
+<p>Une bonne utilisation des méthodes de tableaux comme {{jsxref("Array.prototype.push()","push()")}} et {{jsxref("Array.prototype.pop()","pop()")}} permet de conserver un enregistrement des éléments actuellement actifs dans une application web. Dans une scène animée, par exemple, vous pouvez avoir un tableau d'objets représentant les graphiques d'arrière-plan actuellement affichés, et vous pouvez n'en vouloir que 50 à la fois, pour des raisons de performance ou d'encombrement. Chaque fois que de nouveaux objets sont créés et ajoutés au tableau, les plus anciens peuvent être supprimés du tableau pour n'en conserver que le nombre voulu.</p>
+
+<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>
+</div>
+
+<p>Pour terminer l'application, il vous faut :</p>
+
+<ol>
+ <li>Ajouter une ligne sous le commentaire <code>// number 1</code> pour ajouter la valeur qui vient d'être saisie dans la boîte au début du tableau. Cette valeur est récupérée avec <code>searchInput.value</code>.</li>
+ <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">&lt;div class="output" style="min-height: 150px;"&gt;
+
+&lt;input type="text"&gt;&lt;button&gt;Search&lt;/button&gt;
+
+&lt;ul&gt;
+
+&lt;/ul&gt;
+
+&lt;/div&gt;
+
+&lt;textarea id="code" class="playable-code" style="height: 370px;"&gt;
+var list = document.querySelector('.output ul');
+var searchInput = document.querySelector('.output input');
+var searchBtn = document.querySelector('.output button');
+
+list.innerHTML = '';
+
+var myHistory = [];
+
+searchBtn.onclick = function() {
+  // we will only allow a term to be entered if the search input isn't empty
+  if (searchInput.value !== '') {
+    // number 1
+
+    // empty the list so that we don't display duplicate entries
+    // the display is regenerated every time a search term is entered.
+    list.innerHTML = '';
+
+    // loop through the array, and display all the search terms in the list
+    for (var i = 0; i &lt; myHistory.length; i++) {
+      itemText = myHistory[i];
+      var listItem = document.createElement('li');
+      listItem.textContent = itemText;
+      list.appendChild(listItem);
+    }
+
+    // If the array length is 5 or more, remove the oldest search term
+    if (myHistory.length &gt;= 5) {
+      // number 2
+
+    }
+
+    // empty the search input and focus it, ready for the next term to be entered
+    searchInput.value = '';
+    searchInput.focus();
+  }
+}
+&lt;/textarea&gt;
+
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="reset" type="button" value="Reset"&gt;
+  &lt;input id="solution" type="button" value="Show solution"&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: js">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var solution = document.getElementById('solution');
+var code = textarea.value;
+
+function updateCode() {
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  updateCode();
+});
+
+solution.addEventListener('click', function() {
+  textarea.value = jsSolution;
+  updateCode();
+});
+
+var jsSolution = 'var list = document.querySelector(\'.output ul\');\nvar searchInput = document.querySelector(\'.output input\');\nvar searchBtn = document.querySelector(\'.output button\');\n\nlist.innerHTML = \'\';\n\nvar myHistory= [];\n\nsearchBtn.onclick = function() {\n  if(searchInput.value !== \'\') {\n    myHistory.unshift(searchInput.value);\n\n    list.innerHTML = \'\';\n\n    for(var i = 0; i &lt; myHistory.length; i++) {\n      itemText = myHistory[i];\n      var listItem = document.createElement(\'li\');\n      listItem.textContent = itemText;\n      list.appendChild(listItem);\n    }\n\n    if(myHistory.length &gt;= 5) {\n      myHistory.pop();\n    }\n\n    searchInput.value = \'\';\n    searchInput.focus();\n  }\n}';
+
+textarea.addEventListener('input', updateCode);
+window.addEventListener('load', updateCode);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_2', '100%', 600) }}</p>
+
+<h2 id="Testez_vos_compétences_!">Testez vos compétences !</h2>
+
+<p><br>
+ Vous avez atteint la fin de cet article, mais vous souvenez-vous des informations les plus importantes ? Vous pouvez trouver d'autres tests pour vérifier que vous avez bien fixé ces connaissances avant de continuer — voir <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Test_your_skills:_Arrays">Test de compétences : les tableaux</a>.</p>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>Après la lecture de cet article, vous conviendrez que les tableaux semblent fichtrement utiles ; vous les verrez un peu partout en JavaScript, souvent associés à des boucles pour appliquer la même action à chaque élément du tableau. Nous vous indiquerons toutes les bases utiles à savoir à propos des boucles dans le prochain module, mais pour l'instant, félicitations : prenez une pause bien méritée ; vous avez étudié tous les articles du module !</p>
+
+<p>La seule chose restant à faire est de procéder à l'évaluation de ce module pour tester votre compréhension de son contenu.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections">Collections indexées</a> — un guide de niveau avancé à propos des tableaux et de leurs cousins, les tableaux typés.</li>
+ <li>{{jsxref("Array")}} — la page de référence de l'objet <code>Array</code> — pour un guide de référence détaillé à propos des fonctionnalités discutées dans cette page, et plus encore.</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps/Silly_story_generator", "Learn/JavaScript/First_steps")}}</p>
+
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li>
+ <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li>
+</ul>
diff --git a/files/fr/learn/javascript/first_steps/testes_vos_competence_colon__tableaux/index.html b/files/fr/learn/javascript/first_steps/testes_vos_competence_colon__tableaux/index.html
new file mode 100644
index 0000000000..240e934831
--- /dev/null
+++ b/files/fr/learn/javascript/first_steps/testes_vos_competence_colon__tableaux/index.html
@@ -0,0 +1,87 @@
+---
+title: 'Testez vos compétences: Tableaux'
+slug: 'Learn/JavaScript/First_steps/Testes_vos_competence:_Tableaux'
+translation_of: 'Learn/JavaScript/First_steps/Test_your_skills:_Arrays'
+---
+<div>{{learnsidebar}}</div>
+
+<p>This aim of this skill test is to assess whether you've understood our <a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a> article.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: You can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a> to work on the tasks.<br>
+ <br>
+ If you get stuck, then ask us for help — see the {{anch("Assessment or further help")}} section at the bottom of this page.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: In the examples below, if there is an error in your code it will be outputted into the results panel on the page, to help you try to figure out the answer (or into the browser's JavaScript console, in the case of the downloadable version).</p>
+</div>
+
+<h2 id="Arrays_1">Arrays 1</h2>
+
+<p>Let's start off with some basic array practice. In this task we'd like you to create an array of three items, stored inside a variable called <code>myArray</code>. The items can be anything you want — how about your favourite foods or bands?</p>
+
+<p>Next, modify the first two items in the array using simple bracket notation and assignment. Then add a new item to the beginning of the array.</p>
+
+<p>Try updating the live code below to recreate the finished example:</p>
+
+<p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/arrays/arrays1.html", '100%', 400)}}</p>
+
+<div class="blockIndicator note">
+<p><a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/tasks/arrays/arrays1-download.html">Download the starting point for this task</a> to work in your own editor or in an online editor.</p>
+</div>
+
+<h2 id="Arrays_2">Arrays 2</h2>
+
+<p>Now let's move on to another task. Here you are provided with a string to work with. We'd like you to:</p>
+
+<ol>
+ <li>Convert the string into an array, removing the <code>+</code> characters in the process. Save the result in a variable called <code>myArray</code>.</li>
+ <li>Store the length of the array in a variable called <code>arrayLength</code>.</li>
+ <li>Store the last item in the array in a variable called <code>lastItem</code>.</li>
+</ol>
+
+<p>Try updating the live code below to recreate the finished example:</p>
+
+<p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/arrays/arrays2.html", '100%', 400)}}</p>
+
+<div class="blockIndicator note">
+<p><a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/tasks/arrays/arrays2-download.html">Download the starting point for this task</a> to work in your own editor or in an online editor.</p>
+</div>
+
+<h2 id="Arrays_3">Arrays 3</h2>
+
+<p>For this final array task, we provide you with a starting array, and you will work in somewhat the opposite direction. You need to:</p>
+
+<ol>
+ <li>Remove the last item in the array.</li>
+ <li>Add two new names to the end of the array.</li>
+ <li>Go over each item in the array and add its index number after the name inside parentheses, for example <code>Ryu (0)</code>. Note that we don't teach how to do this in the Arrays article, so you'll have to do some research.</li>
+ <li>Finally, join the array items together in a single string called <code>myString</code>, with a separator of "<code> - </code>".</li>
+</ol>
+
+<p>Try updating the live code below to recreate the finished example:</p>
+
+<p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/arrays/arrays3.html", '100%', 400)}}</p>
+
+<div class="blockIndicator note">
+<p><a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/tasks/arrays/arrays3-download.html">Download the starting point for this task</a> to work in your own editor or in an online editor.</p>
+</div>
+
+<h2 id="Assessment_or_further_help">Assessment or further help</h2>
+
+<p>You can practice these examples in the Interactive Editors above.</p>
+
+<p>If you would like your work assessed, or are stuck and want to ask for help:</p>
+
+<ol>
+ <li>Put your work into an online shareable editor such as <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a>. You can write the code yourself, or use the starting point files linked to in the above sections.</li>
+ <li>Write a post asking for assessment and/or help at the <a href="https://discourse.mozilla.org/c/mdn/learn">MDN Discourse forum Learning category</a>. Your post should include:
+  <ul>
+   <li>A descriptive title such as "Assessment wanted for Variables 1 skill test".</li>
+   <li>Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.</li>
+   <li>A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.</li>
+   <li>A link to the actual task or assessment page, so we can find the question you want help with.</li>
+  </ul>
+ </li>
+</ol>
diff --git a/files/fr/learn/javascript/first_steps/variables/index.html b/files/fr/learn/javascript/first_steps/variables/index.html
new file mode 100644
index 0000000000..35104fcaeb
--- /dev/null
+++ b/files/fr/learn/javascript/first_steps/variables/index.html
@@ -0,0 +1,434 @@
+---
+title: Stocker les informations nécessaires — les variables
+slug: Learn/JavaScript/First_steps/Variables
+tags:
+  - Booléens
+  - Declaration
+  - Initialisation
+  - JavaScript
+  - Mise à jour
+  - Nombres
+  - Objets
+  - Tableaux
+  - Typage faible
+  - Variables
+  - chaînes
+translation_of: Learn/JavaScript/First_steps/Variables
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps")}}</div>
+
+<p class="summary">Après lecture des deux articles précédents, vous savez maintenant ce qu'est JavaScript, ce qu'il peut vous apporter, comment l'utiliser aux côtés d'autres technologies web et l'aspect de ses principales fonctionnalités vues de haut. Dans cet article, nous revenons aux fondements réels en examinant comment travailler avec le bloc de construction le plus basique du JavaScript — les variables.</p>
+
+<table class="learn-box">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Vocabulaire courant de l'informatique, bases de HTML et CSS, compréhension de ce que fait JavaScript.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>Se familiariser avec l'usage élémentaire des variables en JavaScript.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Outils_nécessaires">Outils nécessaires</h2>
+
+<p>Tout au long de cet article, on vous demandera de saisir des lignes de code pour tester votre compréhension. Si vous vous servez du navigateur avec un ordinateur de bureau, l'endroit le plus approprié pour saisir les exemples de code est la console JavaScript du navigateur (voyez <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">Les outils de développement du navigateur</a> pour plus d'informations sur la manière d'accéder à ces outils).</p>
+
+<p>Toutefois, nous avons aussi incorporé une console JavaScript dans cette page pour vous permettre d'y écrire le code au cas où vous n'utiliseriez pas un navigateur avec une console JavaScript facilement accessible, ou si vous estimez qu'une console incorporée est plus confortable.</p>
+
+<h2 id="Quest_ce_quune_variable">Qu'est ce qu'une variable ?</h2>
+
+<p>Une variable est un conteneur pour une valeur, tel un nombre à utiliser pour une addition, ou une chaîne devant faire partie d'une phrase. Mais un aspect spécial des variables est que les valeurs contenues peuvent changer. Voyons un exemple simple :</p>
+
+<pre class="brush: html">&lt;button&gt;Pressez moi&lt;/button&gt;</pre>
+
+<pre class="brush: js">const button = document.querySelector('button');
+
+button.onclick = function() {
+  let name = prompt('Quel est votre nom ?');
+  alert('Salut ' + name + ', sympa de vous voir !');
+}</pre>
+
+<p>{{ EmbedLiveSample('What_is_a_variable', '100%', 50) }}</p>
+
+<p>Dans cet exemple, presser le bouton déclenche l'exécution de quelques lignes de code. La première ligne affiche à l'écran une boîte priant l'utilisateur de saisir son nom et stocke la valeur entrée dans une variable. La deuxième affiche un message de bienvenue avec la valeur de la variable.</p>
+
+<p>Pour comprendre le pratique de la chose, imaginons comment nous aurions du coder cet exemple sans utiliser de variable. Serait-ce comme cela ?</p>
+
+<pre class="example-bad">let name = prompt('Quel est votre nom ?');
+
+if (name === 'Adam') {
+  alert('Salut Adam, sympa de vous voir !');
+} else if (name === 'Alan') {
+  alert('Salut Alan, sympa de vous voir !');
+} else if (name === 'Bella') {
+  alert('Salut Bella, sympa de vous voir !');
+} else if (name === 'Bianca') {
+  alert('Salut Bianca, sympa de vous voir !');
+} else if (name === 'Chris') {
+  alert('Salut Chris, sympa de vous voir !');
+}
+
+// ... etc.</pre>
+
+<p>Peut-être ne comprenez‑vous pas (encore !) la syntaxe utilisée, mais vous l'imaginerez sans peine  — si nous n'avions pas de variables à disposition, nous devrions implémenter un bloc de code géant qui vérifierait quel était le nom saisi, puis afficherait un message approprié à ce nom. Cela est évidemment inefficace (le code est déjà plus volumineux avec seulement quatre possibilités) et il ne fonctionnerait certainement pas — il n'est pas possible de stocker tous les choix possibles.</p>
+
+<p>Les variables sont essentielles et à mesure que vous en apprendrez plus sur JavaScript, elles deviendront une seconde nature pour vous.</p>
+
+<p>Une autre particularité des variables : elle peuvent contenir pratiquement de tout — pas uniquement des chaînes ou des nombres. Elles peuvent aussi contenir des données complexes et même des fonctions, ce qui permet de réaliser des choses étonnantes. Vous en apprendrez plus à ce propos au long de ce parcours.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note :</strong> Nous disons que les variables contiennent des valeurs. C'est un distingo important. Les variables ne sont pas les valeurs elles‑mêmes : ce sont des conteneurs pour ces valeurs. Vous pouvez vous les représenter comme une boîte en carton dans laquelle il est possible de ranger des choses.</p>
+</div>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13506/boxes.png" style="display: block; height: 436px; margin: 0px auto; width: 1052px;"></p>
+
+<h2 id="Déclarer_une_variable">Déclarer une variable</h2>
+
+<p>Avant de se servir d'une variable, il faut d'abord la créer — plus précisément, nous disons <em>déclarer la variable</em>. Pour ce faire, nous saisissons le mot‑clé <code>var</code> ou <code>let</code> suivi du nom que vous voulez donner à la variable :</p>
+
+<pre class="brush: js">let myName;
+let myAge;</pre>
+
+<p>Dans ces lignes, nous venons de créer deux variables nommées respectivement <code>myName</code> et <code>myAge</code>. Saisissez les maintenant dans la console de votre navigateur, ou dans la console au bas de la page (Vous <a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html">ouvrez cette console</a> soit dans un onglet séparé, soit dans une fenêtre selon votre préférence). Après cela, essayez de créer une variable (ou deux) en choisissant vous même le nom.</p>
+
+<div class="hidden">
+<h6 id="Hidden_code">Hidden code</h6>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;JavaScript console&lt;/title&gt;
+    &lt;style&gt;
+      * {
+        box-sizing: border-box;
+      }
+
+      html {
+        background-color: #0C323D;
+        color: #809089;
+        font-family: monospace;
+      }
+
+      body {
+        max-width: 700px;
+      }
+
+      p {
+        margin: 0;
+        width: 1%;
+        padding: 0 1%;
+        font-size: 16px;
+        line-height: 1.5;
+        float: left;
+      }
+
+      .input p {
+        margin-right: 1%;
+      }
+
+      .output p {
+        width: 100%;
+      }
+
+      .input input {
+        width: 96%;
+        float: left;
+        border: none;
+        font-size: 16px;
+        line-height: 1.5;
+        font-family: monospace;
+        padding: 0;
+        background: #0C323D;
+        color: #809089;
+      }
+
+      div {
+        clear: both;
+      }
+
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+
+
+  &lt;/body&gt;
+
+  &lt;script&gt;
+    var geval = eval;
+    function createInput() {
+      var inputDiv = document.createElement('div');
+      var inputPara = document.createElement('p');
+      var inputForm = document.createElement('input');
+
+      inputDiv.setAttribute('class','input');
+      inputPara.textContent = '&gt;';
+      inputDiv.appendChild(inputPara);
+      inputDiv.appendChild(inputForm);
+      document.body.appendChild(inputDiv);
+
+      if(document.querySelectorAll('div').length &gt; 1) {
+        inputForm.focus();
+      }
+
+      inputForm.addEventListener('change', executeCode);
+    }
+
+    function executeCode(e) {
+      try {
+        var result = geval(e.target.value);
+      } catch(e) {
+        var result = 'error — ' + e.message;
+      }
+
+      var outputDiv = document.createElement('div');
+      var outputPara = document.createElement('p');
+
+      outputDiv.setAttribute('class','output');
+      outputPara.textContent = 'Result: ' + result;
+      outputDiv.appendChild(outputPara);
+      document.body.appendChild(outputDiv);
+
+      e.target.disabled = true;
+      e.target.parentNode.style.opacity = '0.5';
+
+      createInput()
+    }
+
+    createInput();
+
+  &lt;/script&gt;
+&lt;/html&gt;</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Hidden_code', '100%', 300) }}</p>
+
+<div class="note">
+<p><strong>Note </strong>: En JavaScript, le code de toute instruction doit se terminer par un point‑virgule (<code>;</code>) — il peut fonctionner correctement sans ce point‑virgule pour des lignes isolées, mais ce ne sera probablement pas le cas si vous écrivez plusieurs lignes de code ensemble. Prenez l'habitude de mettre ce point‑virgule.</p>
+</div>
+
+<p>Vous pouvez maintenant tester si ces valeurs existent dans l'environnement d'exécution en saisissant simplement le nom de ces variables, par exemple</p>
+
+<pre class="brush: js">myName;
+myAge;</pre>
+
+<p>Actuellement elles ne contiennent aucune valeur ; ce sont des conteneurs vides. Quand vous entrez les noms des variables, vous obtiendrez la valeur <code>undefined</code> en retour. Si elles n'existent pas, vous aurez un message d'erreur — essayez en saisissant</p>
+
+<pre class="brush: js">scoobyDoo;</pre>
+
+<div class="note">
+<p><strong>Note </strong>: Ne confondez pas une variable qui existe mais sans valeur définie avec une variable qui n'existe pas du tout — ce sont deux choses tout à fait différentes. Dans l'analogie des boîtes, <em>ne pas exister</em> correspond à l'absence de boîte ; <em>valeur indéfinie</em> correspond à une boîte vide.</p>
+</div>
+
+<h2 id="Initialisation_dune_variable">Initialisation d'une variable</h2>
+
+<p>Une fois la variable déclarée, vous pouvez l'initialiser avec une valeur. On réalise cela en saisissant le nom de la variable, suivi d'un signe égale (<code>=</code>), lui-même suivi de la valeur souhaitée pour la variable. Par exemple :</p>
+
+<pre class="brush: js">myName = 'Chris';
+myAge = 37;</pre>
+
+<p>Revenez à la console maintenant et saisissez‑y ces deux lignes. Constatez que la console renvoie en confirmation la  valeur assignée à la variable dans chaque cas. Vous pouvez, à nouveau, faire renvoyer par la console les valeurs de variable en saisissant simplement son nom dans la console — essayez encore :</p>
+
+<pre class="brush: js">myName;
+myAge;</pre>
+
+<p>Il est possible de déclarer et initialiser une variable en même temps, comme ceci :</p>
+
+<pre class="brush: js">let myDog = 'Rover';</pre>
+
+<p>C'est probablement ce que vous ferez la plupart du temps, c'est plus rapide que d'effectuer ces deux actions sur deux lignes distinctes.</p>
+
+<h2 id="La_différence_entre_var_et_let">La différence entre <code>var</code> et <code>let</code></h2>
+
+<p>A ce moment de votre apprentissage, vous vous demandez sans doute : mais quel besoin de deux mot-clé pour définir une variable ? Pourquoi <code>var</code> et <code>let</code> ?</p>
+
+<p>Les raisons sont d'ordre historique. A l'origine, quand Javascript fut créé, il n'y avait que <code>var</code>. Cela fonctionnait plutôt bien dans la plupart des cas, avec parfois quelques surprises -- l'implémentation étonnante du <code>var</code> peut amener à une mauvaise interprétation, voire à des soucis. Ainsi, <code>let</code> a été ajouté dans les versions plus récentes de Javascript, un nouveau mot-clé pour créer des variables, avec un fonctionnement différent de celui du <code>var</code>, réglant ainsi les difficultés évoquées ci-dessus.</p>
+
+<p>Nous évoquons ci-dessous quelques unes de ces différences, sans pouvoir faire ici le tour complet de la question. Vous comprendrez mieux la différence entre ces deux constructions au fur et à mesure de votre progression en JavaScript (si vous ne pouvez pas attendre, consultez la page de référence du <code>let</code>). </p>
+
+<p>Pour commencer, si vous écrivez un programme JavaScript multi-lignes qui déclare et initialise une variable, vous pouvez déclarez une variable avec le mot-clé <code>var</code> après l'avoir initialisée. Cela fonctionnera. Par exemple :</p>
+
+<pre class="brush: js">myName = 'Chris';
+
+function logName(){
+    console.log(myName);
+}
+
+logName();
+
+var myName;
+</pre>
+
+<div class="blockIndicator note">
+<p>Note : l'exemple ci-dessus ne fonctionnera pas si on tape des lignes une à une dans la console, mais seulement quand on exécute un script JavaScript multi-lignes dans un document web.</p>
+</div>
+
+<p>Ce processus se nomme <strong>«</strong> <strong>hoisting »</strong> <span class="st">(en français, "hissage") </span>— lisez <a href="/en-US/docs/Web/JavaScript/Reference/Statements/var#var_hoisting">var hoisting</a> pour plus de précisions sur ce sujet.</p>
+
+<p>Le hissage ne fonctionne plus avec <code>let</code>. Si on remplaçait var par let dans l'exemple ci-dessus, l'exécution du script planterait sur une erreur. C'est une bonne chose — déclarer une variable après l'avoir initialisé produit un code obscur, difficile à lire.</p>
+
+<p>Deuxièmement, quand vous utilisez <code>var</code>, vous pouvez déclarer la même variable autant de fois que vous le désirez, avec <code>let</code> c'est impossible. Le code suivant s'exécute sans erreur :</p>
+
+<pre class="brush: js">var myName = 'Chris';
+var myName = 'Bob';
+</pre>
+
+<p> Celui là produit une erreur sur la seconde ligne :</p>
+
+<pre class="brush: js">let myName = 'Chris';
+let myName = 'Bob';
+</pre>
+
+<p>Le code correct serait :</p>
+
+<pre class="brush: js">let myName = 'Chris' ;
+
+myName = 'Bob' ;</pre>
+
+<p>Encore une fois, c'est une décision sensée des concepteurs du langage. Il n'y a aucune bonne raison de redéclarer une variable —  cela rend les choses obscures.</p>
+
+<p>Pour ces raisons, et d'autres, nous recommandons d'utiliser <code>let</code> plutôt que <code>var</code>. Il n'y a pas de bonne raison d'utiliser <code>var</code>, sauf à rechercher la compatibilité avec de vieilles versions d'Internet Explorer (pas de support du <code>let</code> avant la version 11 ; le support de <code>let</code> par le navigateur Edge ne pose pas de problème).</p>
+
+<h2 id="Mise_à_jour_dune_variable">Mise à jour d'une variable</h2>
+
+<p>Une fois la variable initialisée avec une valeur, vous pouvez simplement modifier (ou mettre à jour) cette valeur en lui assignant une nouvelle valeur. Entrez ces deux lignes dans la console :</p>
+
+<pre class="brush: js">myName = 'Bob';
+myAge = 40;</pre>
+
+<h3 id="Aparté_concernant_les_règles_de_nommage_des_variables">Aparté concernant les règles de nommage des variables</h3>
+
+<p>Vous pouvez nommer une variable comme vous l'entendez, mais il y a des restrictions. Généralement, il convient de se limiter à l'emploi des caractères latins (0-9, a-z, A-Z)  et du underscore ( _ ).</p>
+
+<ul>
+ <li>N'utilisez pas d'autres caractères ; ils pourraient entraîner des erreurs ou être difficiles à comprendre pour un auditoire international.</li>
+ <li>N'utilisez pas le underscore comme premier caractère d'un nom de variable — cette façon d'opérer est utilisée dans certaines constructions JavaScript pour signer certaines spécificités ; il pourrait y avoir confusion.</li>
+ <li>Ne mettez pas un chiffre en début de nom de variable. Ce n'est pas permis et provoque une erreur.</li>
+ <li>Une convention sûre, nommée <a href="https://en.wikipedia.org/wiki/CamelCase#Variations_and_synonyms">"lower camel case"</a> (dos de chameau), consiste à accoler plusieurs mots en mettant le premier en minuscules les suivants commençant par une majuscule. Dans cet article, nous avons adopté cette convention pour les noms de variables.</li>
+ <li>Prenez des noms de variable intuitifs, décrivant les données que la variable contient. Évitez les noms se limitant à un caractère ou à l'inverse des noms trop longs, trop verbeux.</li>
+ <li>Les variables sont sensibles à la casse — donc <code>myage</code> et <code>myAge</code> correspondent à deux variables différentes.</li>
+ <li>Enfin les <em>mots réservés</em> du langage JavaScript ne peuvent pas être choisis comme nom pour une variable — les mots réservés sont les mots qui font effectivement partie de la syntaxe du JavaScript. Donc, vous ne pouvez pas utiliser des mots comme <code>var</code>, <code>function</code>, <code>let</code> ou <code>for</code> comme noms de variable. Les navigateurs les reconnaîtront en tant qu'éléments de code, et cela déclenchera des erreurs.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note </strong>: Une liste exhaustive des mots réservés est proposée dans la page <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords">Lexical grammar — keywords</a>.</p>
+</div>
+
+<p>Exemples de noms corrects :</p>
+
+<pre class="example-good">age
+myAge
+init
+initialColor
+finalOutputValue
+audio1
+audio2</pre>
+
+<p>Exemples de noms incorrects (soit illégal, soit non conforme aux recommandations) :</p>
+
+<pre class="example-bad">1
+a
+_12
+myage
+MYAGE
+var
+document
+skjfndskjfnbdskjfb
+thisisareallylongstupidvariablenameman </pre>
+
+<p>Parmi ces noms, les suivants déclenchent une <code>SyntaxError</code>  :</p>
+
+<pre class="example-invalid">1 //la variable commence par un chiffre
+var //mot réservé
+document //mot réservé
+</pre>
+
+<p>Essayez maintenant de créer quelques variables supplémentaires en tenant compte de ce qui précède.</p>
+
+<h2 id="Types_de_variables">Types de variables</h2>
+
+<p>Plusieurs types de données peuvent être stockés dans des variables. Dans cette section, nous allons les décrire brièvement, puis dans les prochains articles, nous vous en dirons plus.</p>
+
+<p>Jusqu'à présent, nous avons vu les deux types suivants, mais il y en a d'autres.</p>
+
+<h3 id="Nombres">Nombres</h3>
+
+<p>Vous pouvez stocker des nombres dans des variables, soit des nombres entiers comme 30 ou des nombres décimaux comme 2.456 (appelés aussi nombres à virgule flottante). Il n'est pas nécessaire de déclarer le type de la variable dans JavaScript, contrairement à d'autres langages de programmation. Lorsque vous donnez une valeur numérique à une variable, ne la mettez pas entre guillemets.</p>
+
+<pre class="brush: js">var myAge = 17;</pre>
+
+<h3 id="Chaînes">Chaînes</h3>
+
+<p>Les chaînes sont des mots ou des suites de mots. Quand vous stockez dans une variable une valeur chaîne, vous devez la mettre entre guillemets simples ou doubles, sinon JavaScript va tenter de l'interpréter en tant qu'un autre nom de variable.</p>
+
+<pre class="brush: js">var dolphinGoodbye = 'So long and thanks for all the fish';</pre>
+
+<h3 id="Booléens">Booléens</h3>
+
+<p>Les booléens sont des valeurs true/false (vrai/faux) — elles ne peuvent prendre que deux valeurs: <code>true</code> ou <code>false</code>. Elles sont généralement utilisées pour tester une condition, à la suite de laquelle le code est exécuté de manière appropriée. Ainsi, par exemple, un cas simple pourrait être :</p>
+
+<pre class="brush: js">var iAmAlive = true;</pre>
+
+<p>Toutefois, en réalité, un booléen sera plutôt utilisé ainsi :</p>
+
+<pre class="brush: js">var test = 6 &lt; 3;</pre>
+
+<p>Cette expression utilise l'opérateur  « inférieur à » (<code>&lt;</code>) pour tester si 6 est plus petit que 3. Comme vous pouvez vous y attendre, cette expression renverra <code>false</code>, car 6 n'est pas plus petit que 3 ! Vous en apprendrez bien plus à propos de ces opérateurs plus loin dans ce cours.</p>
+
+<h3 id="Tableaux">Tableaux</h3>
+
+<p>Une tableau est un objet unique contenant plusieurs valeurs entre crochets séparées par des virgules. Saisissez les lignes suivantes dans la console :</p>
+
+<pre class="brush: js">var myNameArray = ['Chris', 'Bob', 'Jim'];
+var myNumberArray = [10,15,40];</pre>
+
+<p>Un fois ces tableaux définis, vous pouvez avoir accès à chaque valeur en fonction de leur emplacement dans le tableau. Voyez ces lignes :</p>
+
+<pre class="brush: js">myNameArray[0]; // renverra 'Chris'
+myNumberArray[2]; // renverra 40</pre>
+
+<p>La valeur entre crochets précise l'index correspondant à la position de la valeur que vous souhaitez voir renvoyée. Vous remarquerez que les tableaux en JavaScript sont indexés à partir de zéro : le premier élément a l'index 0.</p>
+
+<p>Vous en apprendrez beaucoup plus au sujet des tableaux dans un article suivant.</p>
+
+<h3 id="Objets">Objets</h3>
+
+<p>En programmation, un objet est une structure de code qui modélise un objet du réel. Vous pouvez avoir un objet simple représentant une place de parking avec sa largeur et sa profondeur ou bien un objet représentant une personne avec comme données son nom, sa taille, son poids, son vernaculaire, comment le contacter, et plus encore.</p>
+
+<p>Entrez la ligne suivant dans la console de votre explorateur :</p>
+
+<pre class="brush: js">var dog = { name : 'Spot', breed : 'Dalmatian' };</pre>
+
+<p>Pour récupérer une information stockée dans un objet, vous pouvez utiliser la syntaxe suivante :</p>
+
+<pre class="brush: js">dog.name</pre>
+
+<p>Nous en resterons là avec les objets pour le moment — vous en saurez plus à leur propos dans un module ultérieur.</p>
+
+<h2 id="Typage_faible">Typage faible</h2>
+
+<p>JavaScript est un « langage faiblement typé », ce qui veut dire que, contrairement à d'autres langages, vous n'êtes pas obligé de préciser quel est le type de donnée que doit contenir une variable (par ex. nombres, chaînes, tableaux, etc).</p>
+
+<p>Par exemple, si vous déclarez une variable et si vous y placez une valeur entre guillemets, le navigateur la traitera comme étant une chaîne :</p>
+
+<pre class="brush: js">var myString = 'Hello';</pre>
+
+<p>Ce sera toujours une chaîne, même si ce sont des nombres, donc soyez prudents :</p>
+
+<pre class="brush: js">var myNumber = '500'; // oops, c'est toujours une chaîne
+typeof(myNumber);
+myNumber = 500; // mieux — maintenant c'est un nombre
+typeof(myNumber);</pre>
+
+<p>Entrez ces quatre lignes dans la console les unes à la suite des autres, et voyez les résultats. Notez l'emploi de la fonction spéciale <code>typeof()</code> — elle renvoie le type de donnée placé dans la variable. À son premier appel, elle renverra <code>string</code>, car à ce stade la variable <code>myNumber</code> contient la chaîne <code>'500'</code>. Observez bien et voyez ce que la fonction renvoie au second appel.</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Maintenant, nous en savons un peu plus à propos des variables JavaScript, en particulier comment les créer. Dans le prochain article, nous verrons en détail les nombres et comment effectuer les opérations mathématiques élémentaires.</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps")}}</p>
diff --git a/files/fr/learn/javascript/first_steps/what_is_javascript/index.html b/files/fr/learn/javascript/first_steps/what_is_javascript/index.html
new file mode 100644
index 0000000000..9579a1dec0
--- /dev/null
+++ b/files/fr/learn/javascript/first_steps/what_is_javascript/index.html
@@ -0,0 +1,397 @@
+---
+title: Qu’est-ce que le JavaScript ?
+slug: Learn/JavaScript/First_steps/What_is_JavaScript
+tags:
+  - API
+  - Apprendre
+  - Article
+  - Commentaires
+  - Defer
+  - Débutant
+  - JavaScript
+  - Navigateur
+  - Script
+  - async
+  - inline
+translation_of: Learn/JavaScript/First_steps/What_is_JavaScript
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}</div>
+
+<p class="summary">Bienvenue dans le cours <em>JavaScript pour débutants</em> sur le MDN. Dans ce premier article nous donnons une description générale de Javascript en présentant le « pourquoi » et le « comment » du JavaScript. L'objectif est que vous compreniez bien son but.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>
+    <p>Une culture informatique basique et une compréhension élémentaire de HTML et CSS.</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>Se familiariser avec JavaScript, ce qu’il peut faire et comment il s’intègre dans un site web.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Une_définition_générale">Une définition générale</h2>
+
+<p>JavaScript est un langage de programmation qui permet d’implémenter des mécanismes complexes sur une page web. À chaque fois qu’une page web fait plus que simplement afficher du contenu statique — afficher du contenu mis à jour à des temps déterminés, des cartes interactives, des animations 2D/3D, des menus vidéo défilants, etc... — JavaScript a de bonnes chances d’être impliqué. C’est la troisième couche des technologies standards du web, les deux premières (<a href="/en-US/docs/Learn/HTML">HTML</a> et <a href="/en-US/docs/Learn/CSS">CSS</a>) étant couvertes bien plus en détail dans d’autres tutoriels sur MDN.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13502/cake.png" style="display: block; margin: 0 auto;"></p>
+
+<ul>
+ <li>{{glossary("HTML")}} est un langage de balises utilisé pour structurer et donner du sens au contenu web. Par exemple : définir des paragraphes, titres et tables de données ou encore intégrer des images ou des vidéos dans une page.</li>
+ <li>{{glossary("CSS")}} est un langage de règles de style utilisé pour mettre en forme le contenu HTML. Par exemple : en modifiant la couleur d’arrière-plan ou les polices, ou en disposant le contenu en plusieurs colonnes.</li>
+ <li>{{glossary("JavaScript")}} est un langage de programmation qui permet de créer du contenu mis à jour de façon dynamique, de contrôler le contenu multimédia, d’animer des images, et tout ce à quoi on peut penser. Bon, peut-être pas tout, mais vous pouvez faire bien des choses avec quelques lignes de JavaScript.</li>
+</ul>
+
+<p>Les trois couches se superposent naturellement. Prenons pour exemple une simple étiquette texte. Les balises HTML lui donnent une structure et un but :</p>
+
+<pre class="brush: html">&lt;p&gt;Player 1: Chris&lt;/p&gt;</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13422/just-html.png" style="height: 28px; width: 108px;"></p>
+
+<p>Nous pouvons ensuite ajouter du CSS pour rendre cela plus joli :</p>
+
+<pre class="brush: css">p {
+  font-family: 'helvetica neue', helvetica, sans-serif;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  text-align: center;
+  border: 2px solid rgba(0,0,200,0.6);
+  background: rgba(0,0,200,0.3);
+  color: rgba(0,0,200,0.6);
+  box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
+  border-radius: 10px;
+  padding: 3px 10px;
+  display: inline-block;
+  cursor:pointer;
+}</pre>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13424/html-and-css.png" style="height: 48px; width: 187px;"></p>
+
+<p>Et enfin utiliser JavaScript pour ajouter un comportement dynamique :</p>
+
+<pre class="brush: js">let para = document.querySelector('p');
+
+para.addEventListener('click', updateName);
+
+function updateName() {
+  let name = prompt('Enter a new name');
+  para.textContent = 'Player 1: ' + name;
+}
+</pre>
+
+<p>{{ EmbedLiveSample('Une_définition_générale', '100%', 80) }}</p>
+
+<p>Essayez de cliquer sur l’étiquette texte pour voir ce qui se passe. Notez que vous pouvez également retrouver cet exemple sur Github — voir le <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/javascript-label.html">code source</a>, ou l’<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/javascript-label.html">exécuter</a>.</p>
+
+<p>JavaScript peut faire bien plus. Voyons cela plus en détail.</p>
+
+<h2 id="Que_peut-il_vraiment_faire">Que peut-il <em>vraiment</em> faire ?</h2>
+
+<p>Le cœur de JavaScript est constitué de fonctionnalités communes de programmation permettant de :</p>
+
+<ul>
+ <li>stocker des valeurs utiles dans des variables. Dans l’exemple plus haut, nous demandons un nouveau nom à l’utilisateur puis le stockons dans une variable appelée <code>name</code>.</li>
+ <li>faire des opérations sur des morceaux de texte (appelés en programmation « chaînes de caractères » ou « strings » en anglais). Dans l’exemple plus haut, nous prenons la chaîne de caractères "Player 1: " et lui adjoignons la variable <code>name</code> pour créer l’étiquette ''Player 1: Chris".</li>
+ <li>exécuter du code en réponse à certains événements se produisant sur une page web. Dans l’exemple, nous avons utilisé un événement (« event ») {{Event("click")}} pour détecter quand l’utilisateur clique sur le bouton ; on exécute alors le code qui met à jour l’étiquette.</li>
+ <li>Et bien plus encore !</li>
+</ul>
+
+<p>Là où ça devient excitant, c’est que de nombreuses fonctionnalités sont basées sur ce cœur de JavaScript. Les « interfaces de programmation applicatives » (APIs pour « Application Programming Interfaces ») donnent accès à des quasi-superpouvoirs dans votre code JavaScript.</p>
+
+<p>Les API sont des blocs de code déjà prêts qui permettent à un développeur d'implémenter des programmes qui seraient difficiles voire impossibles à implémenter sans elles. C'est comme du code "en kit" pour la programmation, très pratiques à assembler et à combiner. Les API sont au code ce que les meubles en kits sont aux fournitures de maison — il est beaucoup plus facile de prendre des panneaux prêts à l'emploi et de les visser ensemble pour faire une étagère que de travailler vous-même sur le design, d'aller chercher le bon bois, de couper tous les panneaux à la bonne taille et la bonne forme, de trouver les vis de la bonne taille, puis les assembler pour faire une étagère.</p>
+
+<p>Elles se divisent généralement en deux catégories :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13508/browser.png" style="display: block; height: 511px; margin: 0px auto; width: 815px;"></p>
+
+<p><strong>Les APIs de navigateur</strong> font partie intégrante de votre navigateur web, et peuvent accéder à des données de l’environnement informatique (l’ordinateur), ou faire d'autres choses complexes. Par exemple :</p>
+
+<ul>
+ <li>l’<a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model">API DOM (Document Object Model)</a> permet de manipuler du HTML et du CSS (créer, supprimer et modifier du HTML, appliquer de nouveaux styles à la page de façon dynamique, etc...). Chaque fois que vous voyez une fenêtre popup sur une page ou du nouveau contenu apparaître (comme dans notre démonstration plus haut), il s’agit d'une action du DOM.</li>
+ <li>l’<a href="https://developer.mozilla.org/en-US/docs/Web/API/Geolocation">API de géolocalisation</a> récupère des informations géographiques. C’est ainsi que <a href="https://www.google.com/maps">Google Maps</a> peut trouver votre position et la situer sur une carte.</li>
+ <li>les APIs <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API">Canvas</a> et <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API">WebGL</a> permettent de créer des animations 2D et 3D. On fait des choses incroyables avec ces technologies, voyez <a href="https://www.chromeexperiments.com/webgl">Chrome Experiments</a> et <a href="http://webglsamples.org/">webglsamples</a>.</li>
+ <li><a href="https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery">les APIs Audio et Video</a>, comme {{domxref("HTMLMediaElement")}} et <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> permettent des actions intéressantes sur le multimédia, telles que jouer de l’audio ou de la vidéo directement dans une page web, ou récupérer le flux vidéo de votre webcam et l’afficher sur l’ordinateur de quelqu’un d’autre (essayez la <a href="http://chrisdavidmills.github.io/snapshot/">Snapshot demo </a>pour vous faire une idée).</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong> : beaucoup des exemples ci-dessus ne fonctionneront pas dans un ancien navigateur. Il vaut mieux utiliser un navigateur moderne comme Firefox, Chrome, Edge ou Opera pour exécuter votre code et faire vos tests. Si vous êtes amené à écrire du code de production (c’est-à-dire destiné à de véritables utilisateurs), il vous faudra prendre en compte la compatibilité pour différents navigateurs.</p>
+</div>
+
+<p>Les<strong> APIs tierces</strong> ne font par défaut pas partie de votre navigateur, et vous devrez en général récupérer le code et les informations les concernant quelque part sur le web. Par exemple :</p>
+
+<ul>
+ <li>l’<a href="https://dev.twitter.com/overview/documentation">API Twitter</a> vous permet par exemple d'afficher vos derniers tweets sur votre site.</li>
+ <li>l’<a href="https://developers.google.com/maps/">API Google Maps</a> permet d’intégrer à votre site des cartes personnalisées et d’autres fonctionnalités de ce type.</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong> : ces APIs sont d’un niveau avancé et nous ne couvrerons aucune d’entre elles dans ce cours, mais les liens ci-dessus fournissent une large documentation si vous voulez en savoir davantage.</p>
+</div>
+
+<p>Et il y a bien plus encore ! Pas de précipitation cependant. Vous ne serez pas en mesure de créer le nouveau Facebook, Google Maps ou Instagram après une journée de travail sur JavaScript, il y a d’abord beaucoup de bases à assimiler. Et c’est pourquoi vous êtes ici. Allons-y !</p>
+
+<h2 id="Que_fait_JavaScript_sur_votre_page">Que fait JavaScript sur votre page ?</h2>
+
+<p>Ici nous allons commencer à réellement nous intéresser au code, et, ce faisant, à explorer ce qui se passe quand vous exécutez du JavaScript dans votre page.</p>
+
+<p>Commençons par un bref récapitulatif de ce qui se passe lorqu'une page web se charge dans le navigateur (voir <a href="/fr/docs/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_fonctionnement_de_CSS#Comment_fonctionnent_vraiment_les_CSS">Comment fonctionnent vraiment les CSS</a>). Quand la page se charge, les codes HTML, CSS et JavaScript s'exécutent dans un environnement (l’onglet du navigateur). C’est un peu comme une usine qui prend des matières premières (le code) et sort un produit (la page web).</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13504/execution.png" style="display: block; margin: 0 auto;"></p>
+
+<p>Le JavaScript est exécuté par le moteur JavaScript du navigateur, après que le HTML et le CSS ont été assemblés et combinés en une page web. Cet enchaînement est nécessaire pour être sûr que la structure et le style de la page sont déjà en place quand le JavaScript commence son exécution.</p>
+
+<p>C’est une bonne chose, étant donné qu’un usage fréquent de JavaScript est de modifier dynamiquement le HTML et le CSS pour mettre à jour l’interface utilisateur, via l’API DOM comme évoqué plus tôt. Charger le JavaScript et essayer de l’exécuter avant que le HTML et le CSS ne soient en place mènerait à des erreurs.</p>
+
+<h3 id="Sécurité_du_navigateur">Sécurité du navigateur</h3>
+
+<p>Chaque onglet du navigateur constitue un périmètre séparé dans lequel s’exécute le code (en termes techniques ces périmètres sont des « environnements d’exécution ») ce qui signifie que, dans la plupart des cas, le code de chaque onglet est exécuté complètement séparément, et le code d’un onglet ne peut affecter directement le code d’un autre onglet ou d’un autre site. C’est une bonne mesure de sécurité. Si ce n’était pas le cas, des pirates pourraient par exemple écrire du code pour voler des informations sur d’autres sites web.</p>
+
+<div class="note">
+<p><strong>Note</strong> : il existe des moyens d’envoyer du code et des données entre différents sites/onglets de façon sécurisée, mais ce sont des techniques avancées que ne nous couvrirons pas dans ce cours.</p>
+</div>
+
+<h3 id="Ordre_d’exécution_du_JavaScript">Ordre d’exécution du JavaScript</h3>
+
+<p>Quand le navigateur rencontre un bloc de JavaScript, il l’exécute généralement dans l’ordre, de haut en bas. Vous devrez donc faire attention à l’ordre dans lequel vous écrivez les choses. Reprenons le bloc de JavaScript vu dans notre premier exemple :</p>
+
+<pre class="brush: js">let para = document.querySelector('p');
+
+para.addEventListener('click', updateName);
+
+function updateName() {
+  let name = prompt('Enter a new name');
+  para.textContent = 'Player 1: ' + name;
+}</pre>
+
+<p>Nous sélectionnons ici un paragraphe de texte (ligne 1), puis lui attachons un «écouteur d'évènement»  (event listener)  ligne 3, pour qu'ensuite, lors d’un clic sur le paragraphe, le bloc de code <code>updateName()</code> (lignes 5-8) s’exécute. Le bloc de code <code>updateName()</code> (ces blocs de code réutilisables sont appelés « fonctions ») demande à l’utilisateur un nouveau nom, et l’insère dans le paragraphe pour mettre à jour l’affichage.</p>
+
+<p>Si vous échangiez les deux premières lignes de code, rien ne fonctionnerait plus, vous obtiendriez une erreur dans la console développeur du navigateur : <code>TypeError: para is undefined</code>. Cela signifie que l’objet <code>para</code> n’existe pas encore, donc nous ne pouvons pas y ajouter d’écouteur d'évènement.</p>
+
+<div class="note">
+<p><strong>Note </strong>: c’est une erreur très fréquente. Il faut veiller à ce que les objets référencés dans votre code existent avant d'essayer de les utiliser.</p>
+</div>
+
+<h3 id="Code_interprété_contre_code_compilé">Code interprété contre code compilé</h3>
+
+<p>En informatique, on parle de code <strong>interprété</strong> ou <strong>compilé</strong>. JavaScript est un langage interprété : le code est exécuté de haut en bas et le résultat du code exécuté est envoyé immédiatement. Vous n’avez pas à transformer le code en une autre forme avant que le navigateur ne l’exécute.</p>
+
+<p>Les langages compilés quant à eux sont transformés (compilés) en une autre forme avant d’être exécutés par l’ordinateur. Par exemple le C et le C++ sont compilés en langage assembleur qui est ensuite exécuté par l’ordinateur.</p>
+
+<p>Chaque approche a ses avantages, ce que nous ne développerons pas pour l’instant.</p>
+
+<h3 id="Code_côté_client_contre_côté_serveur">Code côté client contre côté serveur</h3>
+
+<p>Vous pouvez aussi rencontrer les termes de code <strong>côté serveur</strong> et <strong>côté client</strong>, notamment dans le contexte du développement web. Le code <strong>côté client</strong> est du code exécuté sur l’ordinateur de l’utilisateur : quand une page web est vue, le code côté client de la page est téléchargé, puis exécuté et affiché par le navigateur. Dans ce module JavaScript, nous parlons explicitement de <strong>JavaScript côté client</strong>.</p>
+
+<p>Le code <strong>côté serveur</strong> quant à lui est exécuté sur le serveur, puis ses résultats sont téléchargés et affichés par le navigateur. Citons comme langages web côté serveur populaires le PHP, Python, Ruby, et ASP.NET. Et JavaScript ! JavaScript peut aussi s’utiliser comme un langage <strong>côté serveur</strong>, par exemple dans le populaire environnement Node.js — vous pouvez en apprendre plus sur le JavaScript côté serveur dans notre article<a href="/fr/docs/Learn/Server-side"> Programmation de Sites Web côté serveur</a>.</p>
+
+<h3 id="Code_dynamique_contre_code_statique">Code dynamique contre code statique</h3>
+
+<p>Le mot <strong>dynamique</strong> est utilisé tant pour qualifier le JavaScript côté client que les langages côté serveur. Il se réfère à la capacité de mettre à jour l’affichage d’une page/application web pour montrer des choses différentes en des circonstances différentes, en générant un nouveau contenu quand nécessaire. Le code côté serveur génère dynamiquement du nouveau contenu sur le serveur, par exemple en lisant une base de données, tandis que le JavaScript côté client peut générer dynamiquement un contenu nouveau dans le navigateur, par exemple en créant une nouvelle table HTML, en y insérant les données demandées au serveur, puis en affichant la table dans une page web. Selon le contexte, le terme <em>dynamique</em> prend un sens un peu différent, mais les deux sont très liés, et les deux approches (côté serveur et client) vont souvent de pair.</p>
+
+<p>Une page web sans contenu mis à jour dynamiquement est appelé <strong>statique</strong> : elle montre simplement toujours le même contenu.</p>
+
+<h2 id="Comment_ajouter_du_JavaScript_à_votre_page">Comment ajouter du JavaScript à votre page ?</h2>
+
+<p>Le JavaScript est appliqué à votre page HTML un peu comme le CSS. Les éléments {{htmlelement("link")}} permettent d'appliquer des feuilles de style externes au HTML, les feuilles de styles internes utilisent les éléments {{htmlelement("link")}}. Pour ajouter du JavaScript à un document HTML il y a une seule façon, avec l’élément {{htmlelement("script")}}. Voyons cela sur un exemple.</p>
+
+<h3 id="JavaScript_interne">JavaScript interne</h3>
+
+<ol>
+ <li>Faites d’abord une copie locale de notre fichier d’exemple <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript.html">apply-javascript.html</a>. Enregistrez-le dans un répertoire approprié.</li>
+ <li>Ouvrez le fichier dans votre navigateur web et dans un éditeur de texte. Vous verrez que le HTML crée une page web simple contenant un bouton cliquable.</li>
+ <li>Ensuite, allez dans votre éditeur de texte et ajoutez ce qui suit juste avant la balise fermante <code>&lt;/head&gt;</code> :
+  <pre class="brush: html">&lt;script&gt;
+
+  // JavaScript goes here
+
+&lt;/script&gt;</pre>
+ </li>
+ <li>Ajoutons maintenant du JavaScript dans notre élément {{htmlelement("script")}} pour rendre la page plus dynamique. Ajoutez le code suivant juste en-dessous de la ligne "// JavaScript goes here" :
+  <pre class="brush: js">  document.addEventListener("DOMContentLoaded", function() {
+  function createParagraph() {
+    let para = document.createElement('p');
+    para.textContent = 'Vous avez cliqué sur le bouton!';
+    document.body.appendChild(para);
+  }
+
+  const buttons = document.querySelectorAll('button');
+
+  for(let i = 0; i &lt; buttons.length ; i++) {
+    buttons[i].addEventListener('click', createParagraph);
+  }
+});</pre>
+ </li>
+ <li>Enregistrez le fichier et actualisez le navigateur. Vous pouvez maintenant voir que, lorsque vous cliquez sur le bouton, un nouveau paragraphe est généré et placé en-dessous.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong> : si l’exemple ne semble pas marcher, reprenez pas à pas chaque étape. Avez-vous bien enregistré le code de départ comme un fichier <code>.html</code> ? Avez-vous bien ajouté l’élément {{htmlelement("script")}} juste après la balise <code>&lt;/head&gt;</code> ? Avez-vous collé le bon code JavaScript au bon endroit ? <strong>JavaScript est sensible à la casse, et assez tatillon, il faut donc respecter scrupuleusement la syntaxe indiquée, sans quoi il peut ne pas fonctionner.</strong></p>
+</div>
+
+<div class="note">
+<p><strong>Note </strong>: vous pouvez voir cette version sur GitHub avec <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html">apply-javascript-internal.html</a> (<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html">et aussi en live</a>).</p>
+</div>
+
+<h3 id="JavaScript_externe">JavaScript externe</h3>
+
+<p>Ça marche très bien, mais si nous voulons mettre notre JavaScript dans un fichier externe ? Voyons cela.</p>
+
+<ol>
+ <li>Créez d’abord un nouveau fichier dans le même répertoire que votre fichier HTML. Nommez-le <code>script.js</code> (vérifiez qu’il a bien l’extension de fichier .js, c’est ainsi qu’il est identifié comme fichier JavaScript).</li>
+ <li>Ensuite, copiez-collez tout le script contenu dans l’élément {{htmlelement("script")}} vers le fichier .js, et enregistrez le fichier.</li>
+ <li>À présent remplacez l’élément {{htmlelement("script")}} par :
+  <pre class="brush: html">&lt;script src="script.js" defer&gt;&lt;/script&gt;</pre>
+ </li>
+ <li>Enregistrez et rechargez la page dans votre navigateur, et vous devriez voir la même chose qu’avant. C’est la même chose mais nous avons maintenant le JavaScript dans un fichier externe. C’est une bonne chose en général pour organiser le code et le rendre réutilisable pour plusieurs fichiers HTML. Cela rend aussi le code HTML plus lisible en évitant d’y inclure de gros blocs de Javascript.</li>
+</ol>
+
+<p><strong>Note</strong> : vous pouvez voir cette version sur GitHub avec <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html">apply-javascript-external.html</a> et <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/script.js">script.js</a> (<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html">ainsi qu’en live</a>).</p>
+
+<h3 id="Handlers_JavaScript_en_ligne">Handlers JavaScript en ligne</h3>
+
+<p>Notez que parfois vous tomberez sur des morceaux de JavaScript directement dans le HTML. Ce qui peut ressembler à ça :</p>
+
+<div id="inline_js_example">
+<pre class="brush: js example-bad">function createParagraph() {
+  let para = document.createElement('p');
+  para.textContent = 'Vous avez cliqué !';
+  document.body.appendChild(para);
+}</pre>
+
+<pre class="brush: html example-bad">&lt;button onclick="createParagraph()"&gt;Cliquez-moi!&lt;/button&gt;</pre>
+</div>
+
+<p>Vous pouvez essayer cette version dans la démonstration ci-dessous.</p>
+
+<p>{{ EmbedLiveSample('inline_js_example', '100%', 150) }}</p>
+
+<p>Cet exemple a exactement le même comportement que ceux des deux sections précédentes, sauf que l’élément {{htmlelement("button")}} a un handler <code>onclick</code> en ligne pour déclencher l’exécution de la fonction à la pression du bouton.</p>
+
+<p><strong>Évitez cependant de faire cela.</strong> C’est une mauvaise habitude de polluer le HTML avec du JavaScript, en plus d’être inefficace. Dans cette méthode, on doit inclure l’attribut <code>onclick="createParagraph()"</code> sur chaque bouton où le JavaScript doit s’appliquer.</p>
+
+<p>Une construction en JavaScript pur permet de sélectionner tous les boutons avec une instruction. Dans l'exemple précédent c'est cette partie qui s'en charge :</p>
+
+<pre class="brush: js">let buttons = document.querySelectorAll('button');
+
+for(let i = 0; i &lt; buttons.length ; i++) {
+  buttons[i].addEventListener('click', createParagraph);
+}</pre>
+
+<p>Cela peut sembler un peu plus long que l’attribut <code>onclick</code>, mais cela fonctionnera pour tous les boutons peu importe leur nombre sur la page, et peu importe si des boutons sont ajoutés ou retirés, le code JavaScript n’aura pas besoin d’être modifié.</p>
+
+<div class="note">
+<p><strong>Note  </strong>: essayez de modifier votre version de <code>apply-javascript.html</code> et d’y ajouter quelques boutons dans le fichier. En actualisant la page, tous les boutons devraient créer un paragraphe quand ils sont cliqués. Pas mal, non ?</p>
+</div>
+
+<h3 id="Stratégies_de_chargement_de_script">Stratégies de chargement de script</h3>
+
+<p>Le chargement des scripts au bon moment pose un certain nombre de problèmes. Rien n'est aussi simple qu'il y paraît ! Un problème courant est que le code HTML d’une page se charge en suivant l’ordre d'apparition dans le code source. Si vous utilisez JavaScript pour manipuler des éléments sur la page (plus précisément, le <a href="https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model">DOM</a>), votre code ne fonctionnera pas si le JavaScript est chargé et analysé avant le code HTML sur lequel vous voulez opérer.</p>
+
+<p>Dans les exemples de code interne et externe ci-dessus, le JavaScript est chargé et exécuté dans l'en-tête du document, avant que le corps soit analysé. Cela peut causer une erreur, donc nous avons utilisé des structures pour le contourner.</p>
+
+<p>Dans l'exemple interne, vous pouvez voir cette structure autour du code :</p>
+
+<pre class="brush: js line-numbers language-js">  document.addEventListener("DOMContentLoaded", function() {
+    ...
+  });</pre>
+
+<p>Il s'agit d'un écouteur associé à l'événement <code>DOMContentLoaded</code> du navigateur, cet événement est déclenché quand le <code>body</code> HTML est complètement chargé et analysé. Le code JavaScript à l'intérieur du bloc est exécuté après le déclenchement de <code>DOMContentLoaded</code>. Par conséquent, l'erreur est évitée (vous en apprendrez plus sur les <a href="https://developer.mozilla.org/fr/docs/Apprendre/JavaScript/Building_blocks/Ev%C3%A8nements">événements</a> plus tard dans le cours).</p>
+
+<p>Dans l'exemple externe, nous utilisons une fonctionnalité JavaScript plus moderne pour résoudre le problème, l'attribut <code>async</code>, qui indique au navigateur de continuer à télécharger le contenu HTML une fois que l'élément de balise {{htmlelement("script")}} a été atteint.</p>
+
+<pre class="brush: html">&lt; script src =  "script.js"   async  &gt;  &lt;  / script &gt;</pre>
+
+<p>Dans ce cas, le script et le code HTML se chargeront simultanément et le code fonctionnera.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Dans le cas externe, nous n'avions pas besoin d'utiliser l'événement <code>DOMContentLoaded</code> car l'attribut <code>async</code> a résolu le problème pour nous. Nous n'avons pas utilisé la solution <code>async</code> pour l'exemple JavaScript interne, car elle ne fonctionne que pour les scripts externes.</p>
+</div>
+
+<p>Auparavant, une solution à ce problème consistait à placer votre élément de script juste au bas du corps (par exemple, juste avant la balise), afin qu'il soit chargé après que tout le code HTML a été analysé. Le problème de cette solution (et de la solution <code>DOMContentLoaded</code> vue ci-dessus) est que le chargement et l'analyse du script sont complètements bloqués jusqu'à ce que le DOM HTML soit chargé. Sur des sites plus importants avec beaucoup de JavaScript, cela peut entraîner un problème de performances majeur, ce qui ralentit votre site. C'est pourquoi <code>async</code> a été ajouté aux navigateurs !</p>
+
+<h4 id="async_et_defer">async et defer</h4>
+
+<p>En fait, il existe deux façons de contourner le problème du script de blocage : <code>async</code> et <code>defer</code>. Regardons la différence entre les deux.</p>
+
+<p>Les scripts asynchrones téléchargeront le script sans bloquer le rendu de la page et l'exécuteront dès que le téléchargement du script sera terminé. Vous n'obtenez aucune garantie que les scripts s'exécutent dans un ordre spécifique, mais seulement qu'ils n'empêcheront pas le reste de la page de s'afficher. Il est préférable d'utiliser <code>async</code> lorsque les scripts de la page s'exécutent indépendamment les uns des autres et ne dépendent d'aucun autre script de la page.</p>
+
+<p>Par exemple, si vous avez les éléments de script suivants :</p>
+
+<pre class="brush: html line-numbers language-html"><code class="language-html">   &lt; script   async   src   =  " js/vendor/jquery.js "   &gt;     &lt;/ script  &gt;
+
+   &lt; script   async   src   =  " js/script2.js "   &gt;     &lt;/ script  &gt;
+
+   &lt; script   async   src   =  " js/script3.js "   &gt;     &lt;/ script  &gt;  </code></pre>
+
+<p>Vous ne pouvez pas compter sur l'ordre dans lequel les scripts seront chargés. <code>Jquery.js</code> peut être chargé avant ou après <code>script2.js</code> et <code>script3.js</code>. Si tel est le cas, toute fonction de ces scripts dépendant de <code>jquery</code> générera une erreur, car <code>jquery</code> ne sera pas défini au moment de l'exécution du script.</p>
+
+<p><code>defer</code> exécute les scripts dans l'ordre dans lequel ils apparaissent dans la page et les exécute dès que le script et le contenu sont téléchargés :</p>
+
+<pre class="brush: html line-numbers language-html"><code class="language-html">   &lt; script   defer   src   =  " js/vendor/jquery.js "   &gt;     &lt;/ script  &gt;
+
+   &lt; script   defer   src   =  " js/script2.js "   &gt;     &lt;/ script  &gt;
+
+   &lt; script   defer   src   =  " js/script3.js "   &gt;     &lt;/ script  &gt;  </code></pre>
+
+<p>Tous les scripts dotés de l'attribut de <code>defer</code> seront chargés dans l'ordre dans lequel ils apparaissent sur la page. Ainsi, dans le deuxième exemple, nous pouvons être sûrs que <code>jquery.js</code> se chargera avant <code>script2.js</code> et <code>script3.js</code> et que <code>script2.js</code> se chargera avant <code>script3.js</code>.</p>
+
+<p>Pour résumer :</p>
+
+<ul>
+ <li>Si vos scripts n'ont pas besoin d'attendre l'analyse et peuvent s'exécuter indépendamment sans dépendances, utilisez <code>async</code>.</li>
+ <li>Si vos scripts doivent attendre l'analyse et dépendent d'autres scripts, chargez-les à l'aide de <code>defer</code> et placez leurs éléments {{htmlelement("script")}} correspondants dans l'ordre dans lequel vous souhaitez que le navigateur les exécute.</li>
+</ul>
+
+<h2 id="Commentaires">Commentaires</h2>
+
+<p>Comme pour le HTML et le CSS, il est possible d’écrire des commentaires dans le code JavaScript qui seront ignorés par le navigateur. Ils ne sont là que pour apporter des précisions aux autres développeurs sur le fonctionnement du code (et vous-même, si vous reprenez votre code après six mois sans pouvoir vous rappeler ce que vous avez fait). Les commentaires sont très utiles, et vous devriez les utiliser fréquemment, surtout pour des applications de grande taille. Il y en a deux types :</p>
+
+<ul>
+ <li>Un commentaire sur une ligne s’écrit après un double slash, par exemple :
+  <pre class="brush: js">// Ceci est un commentaire</pre>
+ </li>
+ <li>Un commentaire sur plusieurs lignes s’écrit entre deux balises /* et */, par exemple :
+  <pre class="brush: js">/*
+  Ceci est un commentaire
+  sur deux lignes
+*/</pre>
+ </li>
+</ul>
+
+<p>Ainsi, vous pourriez par exemple annoter notre dernière démonstration de JavaScript de cette manière :</p>
+
+<pre class="brush: js">// Fonction: créer un nouveau paragraphe et l'ajouter en bas du HTML
+
+function createParagraph() {
+  let para = document.createElement('p');
+  para.textContent = 'You clicked the button!';
+  document.body.appendChild(para);
+}
+
+/*
+  1. Regrouper les coordonnées de tous les boutons de la page et les organiser en tableau
+  2. Faire une boucle dans ce tableau et ajouter un "click event listener" à chaque bouton
+
+  Quand le bouton est cliqué, la fonction "createParagraph()" sera exécutée
+*/
+
+let buttons = document.querySelectorAll('button');
+
+for(let i = 0; i &lt; buttons.length ; i++) {
+  buttons[i].addEventListener('click', createParagraph);
+}</pre>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Et voilà votre premier pas dans le monde du JavaScript. Nous avons commencé par la théorie seule, pour vous habituer aux raisons d’utiliser JavaScript, et à ses possibilités. Vous avez pu voir quelques exemples de code et appris comment JavaScript s’intègre avec le reste du code sur votre site web, entre autres choses.</p>
+
+<p>Le JavaScript peut sembler un peu impressionnant pour l’instant, mais pas d’inquiétude, ce cours progressera pas à pas. Dans le prochain article <a href="/fr/docs/Learn/JavaScript/First_steps/A_first_splash">Notre premier code Javascript,</a> nous entrons au cœur du sujet et vous réaliserez vos propres exemples de JavaScript.</p>
+
+<p>{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}</p>
diff --git a/files/fr/learn/javascript/first_steps/what_went_wrong/index.html b/files/fr/learn/javascript/first_steps/what_went_wrong/index.html
new file mode 100644
index 0000000000..004d4a67a7
--- /dev/null
+++ b/files/fr/learn/javascript/first_steps/what_went_wrong/index.html
@@ -0,0 +1,254 @@
+---
+title: Qu'est-ce qui n'a pas fonctionné ? Déboguer du code JavaScript
+slug: Learn/JavaScript/First_steps/What_went_wrong
+tags:
+  - Apprentissage
+  - Article
+  - Codage
+  - Débutant
+  - Erreur
+  - JavaScript
+  - Tutoriel
+  - console.log
+  - débogage
+  - outils de développement
+translation_of: Learn/JavaScript/First_steps/What_went_wrong
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}}</div>
+
+<p class="summary">Après avoir créé le jeu "Devinez le nombre" de l'article précédent, vous avez peut-être constaté qu'il ne fonctionnait pas. Pas de panique — cet article vise à ce que vous ne vous arrachiez pas les cheveux sur ces problèmes en donnant quelques conseils simples sur la façon de trouver et corriger les erreurs dans les programmes JavaScript.</p>
+
+<table class="learn-box standard-table" style="height: 148px; width: 672px;">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>
+    <p>Vocabulaire courant de l'informatique, bases de HTML et CSS, compréhension de ce que fait JavaScript.</p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>Acquérir la capacité et la confiance pour commencer à résoudre des problèmes simples dans votre propre code.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Types_d_erreurs">Types d' erreurs</h2>
+
+<p>En règle générale, les erreurs dans un code sont à ranger dans deux catégories :</p>
+
+<ul>
+ <li><strong>Erreurs de syntaxe : </strong>Ce sont les fautes d'orthographe. Elles empêchent réellement le programme de fonctionner ou l'arrêtent en cours de chemin — elles sont accompagnées de messages d'erreur. Ces erreurs sont généralement simple à corriger, pour autant que vous connaissiez les bons outils et sachiez ce que signifient les messages !</li>
+ <li>
+  <p><strong>Erreurs logiques : </strong>La syntaxe est correcte, mais le code n'est pas ce que vous attendiez : le programme tourne sans planter mais donne des résultats inattendus. Ces erreurs sont souvent plus difficiles à corriger que les erreurs de syntaxe, car il n'y a pas, en général, de message d'erreur pour vous diriger vers la source de l'erreur.</p>
+ </li>
+</ul>
+
+<p>Bon, mais ce n'est pas si simple que cela — il y a d'autres facteurs de différenciation lorsque vous approfondissez. Mais la classification ci-dessus suffiira pour commencer. Nous examinerons ces deux catégories d'erreur un peu plus loin.</p>
+
+<h2 id="Un_exemple_erroné">Un exemple erroné</h2>
+
+<p>Pour commencer, revenons à notre jeu de devinettes numériques — sauf que cette fois-ci, nous explorerons une version qui comporte des erreurs délibérées. Allez sur Github et fabriquez vous-même une copie locale de <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/troubleshooting/number-game-errors.html">number-game-errors.html</a> (<a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/troubleshooting/number-game-errors.html">voyez-la ici</a> en direct).</p>
+
+<ol>
+ <li>Pour commencer, ouvrez la copie locale avec votre éditeur de texte favoris.</li>
+ <li>Essayez de lancer le jeu — vous remarquerez que quand vous pressez le bouton <kbd>Submit guess</kbd>, cela ne fonctionne pas!</li>
+</ol>
+
+<div class="note">
+<p><strong>Note </strong>: Votre propre version de l'exemple de jeu ne fonctionne pas, vous pourriez vouloir la corriger ! Il nous semble plus efficace que vous travailliez sur notre version boguée, afin que vous puissiez apprendre les techniques que nous enseignons ici. Ensuite, vous pouvez revenir en arrière et essayer de réparer votre exemple.</p>
+</div>
+
+<p>À ce stade, consultons la <a href="/fr/docs/Apprendre/Découvrir_outils_développement_navigateurs">console du développeur</a> pour voir si nous pouvons voir des erreurs de syntaxe, puis essayez de les corriger. Vous apprendrez comment ci-dessous.</p>
+
+<h2 id="Réparer_les_erreurs_de_syntaxe">Réparer les erreurs de syntaxe</h2>
+
+<p>Antérieurement dans le cours, nous vous avons demandé de taper quelques commandes JavaScript simples dans la <a href="/fr/docs/Apprendre/Découvrir_outils_développement_navigateurs">console JavaScript</a> <a href="/fr/docs/Apprendre/Découvrir_outils_développement_navigateurs">des outils de développement</a> (si vous ne pouvez pas vous rappeler comment l'ouvrir dans votre navigateur, suivez le lien précédent pour savoir comment). Ce qui est encore plus utile, c'est que la console vous donne des messages d'erreur chaque fois qu'une erreur de syntaxe existe dans le JavaScript qui est introduit dans le moteur JavaScript du navigateur. Maintenant partons en chasse !</p>
+
+<ol>
+ <li>Allez à l'onglet dans lequel est affiché <code>number-game-errors.html</code>, et ouvrez la console  JavaScript. Vous devriez voir un message d'erreur dans les lignes qui suivent : <img alt="" src="https://mdn.mozillademos.org/files/13496/not-a-function.png" style="display: block; margin: 0 auto;"></li>
+ <li>C'est une erreur très facile à trouver, et le navigateur vous fournit quelques indices pour vous en sortir (la copie d'écran ci‑dessus provient de Firefox, mais les autres navigateurs donnent des indications semblables). De gauche à droite, nous avons :
+  <ul>
+   <li>Une croix rouge indiquant que c'est une erreur.</li>
+   <li>Un message d'erreur précisant ce qui ne va pas : "TypeError: guessSubmit.addeventListener is not a function" ("Type d'erreur : guessSubmit.addeventListener n'est pas une fonction")</li>
+   <li>Un lien "Learn More" ("En savoir plus") pointant sur une page MDN explicitant ce que l'erreur signifie avec pléthore de détails.</li>
+   <li>Le nom du fichier JavaScript, lié à l'onglet Debugger de l'outil de développement. Si vous suivez le lien, vous verrez exactement la ligne dans laquelle l'erreur est mise en évidence.</li>
+   <li>Le numéro de la ligne où se situe l'erreur, et le rang du caractère dans cette ligne où l'erreur a été repérée pour la première fois. Dans notre cas, il s'agit de la ligne 86, caractère 3.</li>
+  </ul>
+ </li>
+ <li>En examinant la ligne 86 dans l'éditeur de code, nous voyons :
+  <pre class="brush: js">guessSubmit.addeventListener('click', checkGuess);</pre>
+ </li>
+ <li>Le message d'erreur dit "guessSubmit.addeventListener n'est pas une fonction", donc nous avons probablement mal orthographié quelque chose. Si vous n'êtes pas sûr de la bonne orthographe d'un élément syntaxique, il est fréquemment opportun de regarder dans MDN. Actuellement, la meilleure façon d'opérer consiste à faire une recherche pour  "mdn <em>nom-de-fonctionnalité</em>" avec votre moteur de recherche préféré. Voici un raccourci pour gagner un peu de temps dans le cas présent : <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>.</li>
+ <li>Donc, en regardant cette page, il apparaît que nous avions mal orthographié le nom de la fonction ! Souvenez-vous que JavaScript est sensible à la casse, et que la moindre différence dans l'orthographe ou la casse déclenchera une erreur. Remplacer <code>addeventListener</code> par <code>addEventListener</code> corrigera cela. Faisons‑le maintenant.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong> : Voyez la page relative à <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Not_a_function">TypeError: "x" is not a function</a> pour plus de précisions à propos de cette erreur.</p>
+</div>
+
+<h3 id="Erreurs_de_syntaxe_deuxième_tour">Erreurs de syntaxe : deuxième tour</h3>
+
+<ol>
+ <li>Enregistrez la page et actualisez‑la, vous constaterez que l'erreur a disparu.</li>
+ <li>Maintenant si vous entrez une supposition et pressez le bouton de soumission, vous constaterez ... une autre erreur ! <img alt="" src="https://mdn.mozillademos.org/files/13498/variable-is-null.png" style="display: block; margin: 0 auto;"></li>
+ <li>Cette fois‑ci, l'erreur rapportée est "TypeError: lowOrHi is null", à la ligne 78.
+  <div class="note"><strong>Note</strong> : <code><a href="/en-US/docs/Glossary/Null">Null</a></code> est une valeur spéciale signifiant "rien" ou "aucune valeur". Or <code>lowOrHi</code> a été déclaré et initialisé, mais sans valeur signifiante — il n'a ni type ni valeur.</div>
+
+  <div class="note"><strong>Note </strong>: Cette erreur n'apparaît pas au moment du chargement de la page car elle survient à l'intérieur d'une fonction (dans <code>checkGuess() { ... }</code>). Comme vous l'apprendrez de manière plus précise plus loin dans l'article à propos des fonctions, le code dans les fonctions s'exécute dans une instance séparée du code en dehors des fonctions. Dans notre cas, le code n'avait pas été exécuté et l'erreur ne pouvait pas survenir avant que la fonction <code>checkGuess()</code> soit lancée à la ligne 86.</div>
+ </li>
+ <li>Regardez à la ligne 78, vous verrez ce code :
+  <pre class="brush: js">lowOrHi.textContent = 'Last guess was too high!';</pre>
+ </li>
+ <li>La commande dans cette ligne essaie de définir la propriété <code>textContent</code> de la variable <code>lowOrHi</code> à l'aide d'une chaîne textuelle ; mais cela ne fonctionne pas car <code>lowOrHi</code> ne contient pas ce qui est attendu. Voyons voir — recherchons d'autres occurrences de <code>lowOrHi</code> dans le code. La plus proche que vous trouverez dans le JavaScript se situe à la ligne 48 :
+  <pre class="brush: js">let lowOrHi = document.querySelector('lowOrHi');</pre>
+ </li>
+ <li>Là, nous essayons de faire en sorte que la variable contienne une référence à un élément dans le HTML du document. Vérifions si sa valeur est <code>null</code> après que cette ligne ait été exécutée. Ajoutez le code suivant à la ligne 49 :
+  <pre class="brush: js">console.log(lowOrHi);</pre>
+
+  <div class="note">
+  <p><strong>Note </strong>: <code><a href="/en-US/docs/Web/API/Console/log">console.log()</a></code> est vraiment utile pour déboguer une fonction en affichant sa valeur sur la console. Donc, elle affichera sur cette dernière la valeur de <code>lowOrHi</code> que nous avons essayé de définir à la ligne 48.</p>
+  </div>
+ </li>
+ <li>Enregistrez et actualisez la page, et vous verrez le résultat de <code>console.log()</code> sur la console. <img alt="" src="https://mdn.mozillademos.org/files/13494/console-log-output.png" style="display: block; margin: 0 auto;"> C'est sûr, la valeur de <code>lowOrHi</code> est <code>null</code> à ce niveau ; il y a bien un problème à la ligne 48.</li>
+ <li>Quel est ce problème ? Réfléchissons. À la ligne 48, nous avons utilisé la méthode <code><a href="/en-US/docs/Web/API/Document/querySelector">document.querySelector()</a></code> pour obtenir une référence sur un élément avec un sélecteur CSS. En regardant plus en amont dans notre fichier, nous pouvons trouver le paragraphe en question :
+  <pre class="brush: js">&lt;p class="lowOrHi"&gt;&lt;/p&gt;</pre>
+ </li>
+ <li>Donc, il nous faut un sélecteur de classe ici, précédé d'un point (.), alors que le sélecteur passé à la méthode <code>querySelector()</code> en ligne 48 n'en a pas. Ce pourrait être le problème ! Changeons <code>lowOrHi</code> en <code>.lowOrHi</code> à la ligne 48.</li>
+ <li>Enregistrons et actualisons à nouveau, et la directive <code>console.log()</code> renvoie bien l'élément  <code>&lt;p&gt;</code> attendu. Pfff ! Une autre erreur corrigée ! On peut enlever la ligne <code>console.log()</code> maintenant, ou bien la garder pour s'y reporter plus tard — comme vous l'entendez.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong> : Voyez la page relative à <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Unexpected_type">TypeError: "x" is (not) "y"</a> pour plus de précisions à propos de cette erreur.</p>
+</div>
+
+<h3 id="Erreurs_de_syntaxe_troisième_tour">Erreurs de syntaxe : troisième tour</h3>
+
+<ol>
+ <li>Maintenant si vous essayez de jouer, cela ira mieux — tout se déroule correctement, jusqu'à ce que vous arriviez à la fin, soit en devinant le bon chiffre, soit en épuisant le nombre de tentatives permises.</li>
+ <li>Arrivé là, le jeu échoue à nouveau et vous rencontrez la même erreur qu'au début — "TypeError: resetButton.addeventListener is not a function" ! Mais cette fois‑ci, elle vient de la ligne  94.</li>
+ <li>En regardant cette ligne, il est facile de voir que nous avons fait ici la même erreur que précédemment. Il nous suffit de changer <code>addeventListener</code> en <code>addEventListener</code>. Faites‑le.</li>
+</ol>
+
+<h2 id="Une_erreur_de_logique">Une erreur de logique</h2>
+
+<p>À ce stade, le jeu se déroule correctement, mais après avoir fait quelques parties, vous noterez sans doute que le nombre « aléatoire » à deviner est toujours 0 ou 1. Franchement, de quoi vous dégoûter de jouer !</p>
+
+<p>Il y a sûrement un problème dans la logique du jeu quelque part — le jeu ne renvoie pas d'erreur ; il ne fonctionne pas correctement.</p>
+
+<ol>
+ <li>Recherchons les lignes où la variable <code>randomNumber</code> est définie. L'instance qui stocke en début de jeu le nombre aléatoire à deviner se situe autour de la ligne 44 :
+
+  <pre class="brush: js">let randomNumber = Math.floor(Math.random()) + 1;</pre>
+  Et celle qui génére le nombre aléatoire pour une succession de jeux se situe autour de la ligne 113 :
+
+  <pre class="brush: js">randomNumber = Math.floor(Math.random()) + 1;</pre>
+ </li>
+ <li>Pour vérifier si ces lignes sont vraiment à l'origine du problème, faisons appel à nouveau à notre ami <code>console.log()</code> — insérons la ligne suivante directement en dessous des deux lignes indiquées plus haut :
+  <pre class="brush: js">console.log(randomNumber);</pre>
+ </li>
+ <li>Enregistrons, actualisons et jouons quelques parties — on constate que <code>randomNumber</code> est égal à 1 quel que soit le point où il est raccordé à la console.</li>
+</ol>
+
+<h3 id="Travaillons_la_logique">Travaillons la logique</h3>
+
+<p>Pour corriger cela, examinons d'abord le fonctionnement de cette ligne. Premièrement, appelons <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a></code>, qui génére un nombre décimal aléatoire compris entre 0 et 1, par exemple 0.5675493843.</p>
+
+<pre class="brush: js">Math.random()</pre>
+
+<p>Puis, nous passons le résultat de l'appel de <code>Math.random()</code> à <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor">Math.floor()</a></code>, qui arrondit le nombre passé à l'entier inférieur le plus proche. Puis, on ajoute 1 au résultat :</p>
+
+<pre>Math.floor(Math.random()) + 1</pre>
+
+<p>Garder la partie entière d'un nombre décimal compris entre 0 et 1 renvoie toujours 0, y ajouter 1 donne toujours  1. Il faut multiplier le nombre aléatoire par 100 avant de l'arrondir par défaut. La ligne suivante nous donne un entier aléatoire entre 0 et  99 :</p>
+
+<pre class="brush: js">Math.floor(Math.random()*100);</pre>
+
+<p>Maintenant ajoutons 1 pour obtenir un nombre aléatoire entre 1 et 100 :</p>
+
+<pre class="brush: js">Math.floor(Math.random()*100) + 1;</pre>
+
+<p>Modifiez ces deux lignes comme indiqué, enregistrez, actualisez — le jeu devrait maintenant fonctionner comme il faut !</p>
+
+<h2 id="Autres_erreurs_courantes">Autres erreurs courantes</h2>
+
+<p>D'autres erreurs courantes peuvent être commises en écrivant du code. Ce paragraphe attire votre attention sur la plupart d'entre elles.</p>
+
+<h3 id="SyntaxError_missing_before_statement">SyntaxError: missing ; before statement</h3>
+
+<p>Cette erreur signale généralement l'oubli du point‑virgule à la fin d'une ligne de code ; mais elle peut se révéler parfois plus énigmatique. Par exemple, si, dans la fonction  <code>checkGuess(),</code>nous modifions cette ligne :</p>
+
+<pre class="brush: js">let userGuess = Number(guessField.value);</pre>
+
+<p>en</p>
+
+<pre class="brush: js">let userGuess === Number(guessField.value);</pre>
+
+<p>cela déclenchera cette même erreur car le logiciel pense que vous êtes en train de faire quelque chose d'autre. Vous devez vous assurer que vous n'avez pas confondu l'opérateur d'assignation  (<code>=</code>) — qui fixe une valeur donnée à une variable — avec l'opérateur (<code>===</code>) qui teste la stricte égalité de deux valeurs, et renvoie un résultat  <code>true</code>/<code>false</code> (vrai/faux).</p>
+
+<div class="note">
+<p><strong>Note</strong> : Voyez la page relative à <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement">SyntaxError: missing ; before statement</a> pour plus de précisions à propos de cette erreur.</p>
+</div>
+
+<h3 id="Le_programme_dit_que_vous_avez_gagné_quelle_que_soit_votre_suggestion.">Le programme dit que vous avez gagné quelle que soit votre suggestion.</h3>
+
+<p>Voilà un autre symptome de la confusion entre opérateur d'assignation et opérateur de test d'égalité. Ainsi, dans <code>checkGuess()</code>, si vous modifiez cette ligne :</p>
+
+<pre class="brush: js">if (userGuess === randomNumber) {</pre>
+
+<p>en</p>
+
+<pre class="brush: js">if (userGuess = randomNumber) {</pre>
+
+<p>le test renverra toujours <code>true</code> (vrai) et le programme indiquera que vous avez gagné à tout coup. Soyez attentif !</p>
+
+<h3 id="SyntaxError_missing_after_argument_list">SyntaxError: missing ) after argument list</h3>
+
+<p>Cette erreur est triviale — elle indique en général que vous avez oublié une parenthèse fermante à la fin de l'appel d'une fonction ou d'une méthode.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Voyez la page relative à <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list">SyntaxError: missing ) after argument list</a> pour plus de précisions à ce propos.</p>
+</div>
+
+<h3 id="SyntaxError_missing_after_property_id">SyntaxError: missing : after property id</h3>
+
+<p>Cette erreur concerne généralement un objet JavaScript mal construit, mais dans ce cas nous l'avons déclenchée en modifiant</p>
+
+<pre class="brush: js">function checkGuess() {</pre>
+
+<p>en</p>
+
+<pre class="brush: js">function checkGuess( {</pre>
+
+<p>Le navigateur pense que vous essayez de passer le contenu d'un fonction comme argument pour l'autre fonction. Soyez attentifs avec les parenthèses !</p>
+
+<h3 id="SyntaxError_missing_after_function_body">SyntaxError: missing } after function body</h3>
+
+<p>Facile — elle signifie généralement que vous avez omis une accolade dans une fonction ou dans une structure conditionnelle. Vous l'obtiendrez en effaçant une des accolades voisines de la terminaison de la fonction <code>checkGuess()</code>.</p>
+
+<h3 id="SyntaxError_expected_expression_got_string_ou_SyntaxError_unterminated_string_literal">SyntaxError: expected expression, got '<em>string</em>' ou SyntaxError: unterminated string literal</h3>
+
+<p>Ces erreurs signalent généralement l'oubli de guillemets ouvrants ou fermants dans une chaîne littérale. Dans la première erreur du titre, <em>string</em> doit être remplacé par l'un ou les caractères inattendus que l'explorateur a trouvé à la place du guillemet en début de chaîne. La deuxième erreur indique que la chaîne n'a pas été clôturée avec un guillement fermant.</p>
+
+<p>Pour toutes ces erreurs, revoyez comment nous avons opéré dans les exemples de ce parcours. Quand une erreur survient, regardez le numéro de ligne indiqué, allez à cette ligne et voyez si vous remarquez ce qui ne va pas. N'oubliez pas que l'erreur n'est pas forcément sur la ligne indiquée, et qu'elle ne provient pas forcément d'un des problèmes évoqués plus haut !</p>
+
+<div class="note">
+<p><strong>Note </strong>: Voyez les pages relatives à  <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Unexpected_token">SyntaxError: Unexpected token</a> et <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Unterminated_string_literal">SyntaxError: unterminated string literal</a> pour plus de précisions à ce propos.</p>
+</div>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Voilà ce que nous pouvons dire à propos des erreurs basiques pour de simples programmes JavaScript. Il n'est pas toujours aussi simple de détecter ce qui ne va pas dans du code, mais au moins vous économiserez ainsi quelques heures de veille et vous progresserez plus rapidement si les choses ne déraillent pas dès le début de votre parcours d'apprentissage.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<div>
+<ul>
+ <li>Il y a nombre d'autres erreurs qui n'ont pas été listées ici ; nous les avons récolées dans un référencement qui les explique en détail — voyez <a href="/en-US/docs/Web/JavaScript/Reference/Errors">JavaScript error reference</a>.</li>
+ <li>Si dans votre code vous rencontrez une erreur, et même après avoir lu cet article, vous ne parvenez pas à la corriger, vous pouvez obtenir de l'aide ! Demandez‑la sur le fil de discussion <a class="external external-icon" href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">Learning Area Discourse thread</a> ou par le canal IRC de <a href="irc://irc.mozilla.org/mdn">#mdn</a> sur  <a class="external external-icon" href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Dites‑nous quelle est cette erreur, et nous essayerons de vous aider. Un listing de votre code sera aussi utile.</li>
+</ul>
+</div>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}}</p>
diff --git a/files/fr/learn/javascript/objects/ajouter_des_fonctionnalités_à_notre_démo_de_balles_rebondissantes/index.html b/files/fr/learn/javascript/objects/ajouter_des_fonctionnalités_à_notre_démo_de_balles_rebondissantes/index.html
new file mode 100644
index 0000000000..36232925ec
--- /dev/null
+++ b/files/fr/learn/javascript/objects/ajouter_des_fonctionnalités_à_notre_démo_de_balles_rebondissantes/index.html
@@ -0,0 +1,208 @@
+---
+title: Ajouter des fonctionnalités à notre exercice des balles rebondissantes
+slug: >-
+  Learn/JavaScript/Objects/Ajouter_des_fonctionnalités_à_notre_démo_de_balles_rebondissantes
+tags:
+  - Apprentissage
+  - CodingScripting
+  - Débutant
+  - Evaluation
+  - JavaScript
+  - OOJS
+  - Objet
+  - Orienté objet
+translation_of: Learn/JavaScript/Objects/Adding_bouncing_balls_features
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Object_building_practice", "", "Learn/JavaScript/Objects")}}</div>
+
+<p class="summary">Dans cet exercice, vous devrez utiliser le jeu des balles rebondissantes de l'article précédent comme base, pour y ajouter de nouvelles fonctionnalitées intéressantes.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis:</th>
+   <td>Avant de vous lancer dans cet exercice, il est fortement conseillé d'avoir vus et compris tous les précédents articles de ce module.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectifs:</th>
+   <td>Tester votre connaissance du Javascript orienté objet en conception et en pratique.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Pour_commencer">Pour commencer</h2>
+
+<p>Pour commencer, faite une copie locale de <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/index-finished.html">index-finished.html</a>, <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/style.css">style.css</a>, et <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/main-finished.js">main-finished.js</a> de l'article précédent, dans un nouveau dossier.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Vous pouvez utiliser un site comme <a class="external external-icon" href="http://jsbin.com/">JSBin</a> ou <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a>. Vous pouvez copier vos codes HTML, CSS et JavaScript dans l'un d'entre eux. Si celui que vous utilisez ne possède pas de fenêtres séparées pour les différents langages, ajoutez les dans des balises <code>&lt;script&gt;</code>/<code>&lt;style&gt;</code> dans votre code HTML.</p>
+</div>
+
+<h2 id="Le_projet_en_bref">Le projet en bref</h2>
+
+<p>Notre jeu des balles est assez sympa, mais maintenant il s'agit de le rendre plus interactif en y ajoutant un viseur controlé par l'utilisateur, qui va détruire une balle si il l'a touche. Nous voulons aussi testé votre capacité en programmation orienté objet en créant un object <code>Shape()</code> dont le viseur et les balles peuvent hériter. Pour terminer nous voulons créer un compteur qui permet d'afficher combien de balle il nous reste encore à détruire.</p>
+
+<p>Ce screenshot vous donne une idée du résultat final:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13875/bouncing-evil-circle.png" style="display: block; margin: 0 auto;"></p>
+
+<ul>
+</ul>
+
+<p>Si vous voulez en savoir plus regardez l'exemple finit <a href="http://mdn.github.io/learning-area/javascript/oojs/assessment/">finished example</a> (N'en profitez pas pour récupérer le code source !)</p>
+
+<h2 id="Vos_objectifs">Vos objectifs</h2>
+
+<p>Cette section décrit ce que vous aurez à faire.</p>
+
+<h3 id="Créons_nos_nouveaux_objets">Créons nos nouveaux objets</h3>
+
+<p>Pour commencer, modifions le constructeur de l'objet <code>Ball()</code> pour qu'il devienne le constructeur de <code>Shape()</code> puis créons en un nouveau pour <code>Ball()</code> :</p>
+
+<ol>
+ <li>Le constructeur <code>Shape()</code> devra définir les propriétés <code>x</code>, <code>y</code>, <code>velX</code>, et <code>velY</code> de la même manière que le constructeur <code>Ball()</code> auparavent, mais sans les propriétés <code>color</code> et <code>size</code>.</li>
+ <li><code>Shape()</code> doit aussi définir une nouvelle propriété <code>exists</code>, qui servira à identifier les balles qu'il reste à détruire dans la fenêtre (celles qui n'on pas encore été détruites). Elle doit retourner un booléen (<code>true</code>/<code>false</code>).</li>
+ <li>Le constructeur <code>Ball()</code> doit hériter des propriétés <code>x</code>, <code>y</code>, <code>velX</code>, <code>velY</code>, et <code>exists</code> du constructeur <code>Shape()</code>.</li>
+ <li><code>Ball()</code> doit aussi définir les propriétés <code>color</code> et <code>size</code>, comme à l'origine.</li>
+ <li>N'oubliez pas de définir le prototype de <code>Ball()</code> et son constructeur de manière approprié.</li>
+</ol>
+
+<p>Les méthodes <code>draw()</code>, <code>update()</code>, et <code>collisionDetect()</code> doivent fonctionnées comme avant, sans être modifiées.</p>
+
+<p>Vous devrez ajouter un nouveau paramètre au constructeur <code>new Ball() ( ... )</code> — le paramètre <code>exists</code> doit être le 5ème et être égal à  <code>true</code>.</p>
+
+<p>Vous pouvez recharger la page — Tout doit fonctionner comme avant même après les modifications que vous avez effectuées sur les objets.</p>
+
+<h3 id="Définition_du_EvilCircle()_(viseur)">Définition du EvilCircle() (viseur)</h3>
+
+<p>Il est temps de vous équipez ! — le <code>EvilCircle()</code>! Dans notre jeu nous allons créer un viseur, mais nous allons nous servir de l'objet <code>Shape()</code> pour le définir. Vous voudrez certainement en ajouter un (plusieurs) autre plus tard, qu'un autre joueur ou l'ordinateur pourra contrôler. Vous n'irez probablement pas bien loin avec un seul viseur, mais ce sera suffisant pour le moment !</p>
+
+<p>Le constructeur du <code>EvilCircle()</code> doit hériter des propriétés <code>x</code>, <code>y</code>, <code>velX</code>, <code>velY</code>, et <code>exists</code> de <code>Shape()</code>, mais <code>velX</code> et <code>velY</code> doivent toujours être égales à 20.</p>
+
+<p>Vous devriez utiliser quelque chose comme <code>Shape.call(this, x, y, 20, 20, exists);</code></p>
+
+<p>Le constructeur doit aussi définir ses propres propriétés:</p>
+
+<ul>
+ <li><code>color</code> — <code>'white'</code></li>
+ <li><code>size</code> — <code>10</code></li>
+</ul>
+
+<p>Une fois de plus, souvenez vous de définir vos propriétés héritées en paramètre du constructeur et de définir le prototype et son constructeur de manière appropriée.</p>
+
+<h3 id="Définir_les_méthodes_du_EvilCircle()_(viseur)">Définir les méthodes du EvilCircle() (viseur)</h3>
+
+<p><code>EvilCircle()</code> doit avoir quatre méthodes, comme définie en dessous.</p>
+
+<h4 id="draw()"><code>draw()</code></h4>
+
+<p>Cette méthode doit avoir la même fonction que celle de <code>Ball()</code>: soit dessiner l'objet dans le canvas. Elle fonctionnera quasiment de la même manière, copiez la fonction <code>Ball.prototype.draw</code>. Puis appliquez les modifications suivantes:</p>
+
+<ul>
+ <li>On ne veut pas que le viseur soit plein, mais qu'il ait seulement un contour. Changez <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle">fillStyle</a></code> et <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/fill">fill()</a></code> pour <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/strokeStyle">strokeStyle</a></code> et <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/stroke">stroke()</a></code>.</li>
+ <li>On voudrait qu'il soit aussi un peu plus épais, pour être plus facile à voir. Pour ça on doit définir un attribut <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/lineWidth">lineWidth</a></code> à ctx après l'appel à la fonction <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/beginPath">beginPath()</a></code> (avec une valeur de 3).</li>
+</ul>
+
+<h4 id="checkBounds()"><code>checkBounds()</code></h4>
+
+<p>Cette méthode à la même fonction que la première partie de <code>Ball()</code> <code>update()</code> — Savoir si le viseur va hors de l'écran, et l'arrêter si besoin. Une fois encore, copié la méthode <code>Ball.prototype.update</code>, mais en effectuant quelques changements:</p>
+
+<ul>
+ <li>Débarrassez-vous des deux dernières lignes — on a pas besoin de connaître la position du viseur à chaque frame, car nous le déplacerons d'une manière différente comme vous pourrez le voir.</li>
+ <li>Dans les conditions en <code>if()</code> , si la condition retourne true on ne veut pas modifier (update) les propriétés <code>velX</code>/<code>velY</code>; mais plutôt changer les valeurs de <code>x</code>/<code>y</code> de manière à ce que le viseur revienne doucement dans l'écran. Ajouter ou soustraire de manière appropriée la taille (<code>size)</code> du viseur sera suffisant.</li>
+</ul>
+
+<h4 id="setControls()"><code>setControls()</code></h4>
+
+<p>Cette méthode ajoute un écouteur d'évènement <code>onkeydown</code> à l'objet <code>window</code> ce qui permettra en enfonçant certaine touche du clavier de déplacer le viseur dans la fenêtre. Insérez le code suivant dans la méthode:</p>
+
+<pre class="brush: js">var _this = this;
+window.onkeydown = function(e) {
+    if (e.keyCode === 65) {
+      _this.x -= _this.velX;
+    } else if (e.keyCode === 68) {
+      _this.x += _this.velX;
+    } else if (e.keyCode === 87) {
+      _this.y -= _this.velY;
+    } else if (e.keyCode === 83) {
+      _this.y += _this.velY;
+    }
+  }</pre>
+
+<p>Quand une touche est enfoncée, la propriété <a href="/en-US/docs/Web/API/KeyboardEvent/keyCode">keyCode</a> de l'objet event est consultée pour savoir quelle touche est enfoncée. Si c'est une des touches spécifiée, alors le viseur ce déplacera à gauche, à droite, en haut ou en bas.</p>
+
+<ul>
+ <li>Pour un point bonus, faite apparaître à quel touche correspond le code de celle que l'utilisateur a enfoncé.</li>
+ <li>Pour un second point bonus, pouvez vous nous dire pourquoi nous devons définir <code>var _this = this;</code> de cette façon ? Cela à quelque chose à voir avec la portée des fonction.</li>
+</ul>
+
+<h4 id="collisionDetect()"><code>collisionDetect()</code></h4>
+
+<p>Cette méthode fonctionne d'une manière similaire à <code>Ball()</code> <code>collisionDetect()</code>, copier celle-ci pour vous en servir comme base. Il y a deux différences:</p>
+
+<ul>
+ <li>Dans la condition extérieure <code>if</code>, nous n'avons plus besoin de vérifier si la balle actuellement dans la boucle est celle actuellement surveiller — Parce que ce n'est plus une balle, mais notre viseur ! A la place, on doit tester si la balle visée existe (avec quelle propriété pourrez vous faire cela?). Si elle n'existe pas, c'est qu'elle a déjà été détruite, on a donc pas besoin de la vérifier encore une fois.</li>
+ <li>Dans la condition intérieur <code>if</code>, on ne souhaite plus changer un élément de couleur lorsqu'une collision est détéctée — A la place, on veut détruire les balles qui entre en collision avec le viseur (encore une fois, comment pensez-vous faire cela ?).</li>
+</ul>
+
+<h3 id="Insérer_le_viseur_dans_notre_programme">Insérer le viseur dans notre programme</h3>
+
+<p>Maintenant que nous avons définit notre viseur, on a besoin de le faire apparaître à l'écran. Pour ce faire on doit appliquer quelques modifications à la fonction <code>loop()</code>.</p>
+
+<ul>
+ <li>Premièrement, créons une nouvelle instance de l'objet viseur (en spécifiant les paramètres nécessaire), et appelons sa méthode <code>setControls()</code>. On doit seulement effectuer ses deux actions une seule fois, pas à chaque itération.</li>
+ <li>Au moment où l'on boucle à travers toutes les balles et que l'on appelle les méthodes <code>draw()</code>, <code>update()</code>, et <code>collisionDetect()</code> pour chacune d'entre elle, faite de manière à ce que ces fonctions soit appelées seulement si la balle existe.</li>
+ <li>Appellez les méthodes de l'instance du viseur <code>draw()</code>, <code>checkBounds()</code>, et <code>collisionDetect()</code> à chaque itération de la boucle.</li>
+</ul>
+
+<h3 id="Implémenter_le_compteur_de_score">Implémenter le compteur de score</h3>
+
+<p>Pour implémenter le compteur de score, suivez les étapes suivantes:</p>
+
+<ol>
+ <li>Dans votre fichier HTML, ajoutez un élement {{HTMLElement("p")}} qui contiendra le texte suivant "Ball count: ", juste en dessous de l'élément {{HTMLElement("h1")}} .</li>
+ <li>Dans votre fichier CSS, ajouter les règlesz suivantes:
+  <pre class="brush: css">p {
+  position: absolute;
+  margin: 0;
+  top: 35px;
+  right: 5px;
+  color: #aaa;
+}</pre>
+ </li>
+ <li>Dans votre JavaScript, effectuez les modifications suivante:
+  <ul>
+   <li>Créez une variable qui contiendra la référence vers le paragraphe.</li>
+   <li>Stocker et afficher le nombre de balle présentent à l'écran.</li>
+   <li>Incrémentez le compteur de balle à chaque fois qu'une balle apparait à l'écran.</li>
+   <li>Décrementez le compteur à chaque fois qu'une balle est détruite par le viseur.</li>
+  </ul>
+ </li>
+</ol>
+
+<h2 id="Conseils_et_astuces">Conseils et astuces</h2>
+
+<ul>
+ <li>Cet exercice est un bon challenge. Prenez le temps de faire et de comprendre chaque étape.</li>
+ <li>Ce serait une bonne idée de garder une copie de chaque étape lorsque vous arrivez à la faire marcher correctement, pour vous y réferrer si vous n'arrivez plus à progresser ensuite.</li>
+</ul>
+
+<h2 id="Evaluation">Evaluation</h2>
+
+<p>Si vous effectuez cette évalutation dans le cadre d'un cours, vous devriez pouvoir fournir votre travail à votre professeur/mentor pour correction. Si vous apprenez par vous même, vous pouvez obtenir la correction sur <a href="https://discourse.mozilla.org/t/adding-features-to-our-bouncing-balls-demo-assessment/24689">discussion thread for this exercise</a>, ou sur <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC channel sur <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Tout d'abord effectuez cet exercice — vous n'obtiendrez jamais rien en trichant !</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Object_building_practice", "", "Learn/JavaScript/Objects")}}</p>
+
+<h2 id="Dans_ce_Module">Dans ce Module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics">Object basics</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript for beginners</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Object prototypes</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">Inheritance in JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">Working with JSON data</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Object building practice</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Adding features to our bouncing balls demo</a></li>
+</ul>
diff --git a/files/fr/learn/javascript/objects/basics/index.html b/files/fr/learn/javascript/objects/basics/index.html
new file mode 100644
index 0000000000..6d7276b7b1
--- /dev/null
+++ b/files/fr/learn/javascript/objects/basics/index.html
@@ -0,0 +1,258 @@
+---
+title: 'Les bases de JavaScript, orienté objet'
+slug: Learn/JavaScript/Objects/Basics
+tags:
+  - API
+  - Apprendre
+  - Débutant
+  - JavaScript
+  - Objet
+  - Syntaxe
+  - this
+translation_of: Learn/JavaScript/Objects/Basics
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}</div>
+
+<p class="summary">Dans ce premier article sur les objets JavaScript, nous verrons la syntaxe des objets JavaScript ainsi que quelques fonctionnalités JavaScript déjà aperçues dans les cours précédents, rappelant que beaucoup de fonctionnalités que vous utilisez sont en fait des objets.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Connaissances informatiques de base, connaissances basiques concernant HTML et CSS, bonnes connaissances des bases de JavaScript (cf. <a href="/fr/docs/Learn/JavaScript/First_steps">les premiers pas</a> et <a href="/fr/docs/Learn/JavaScript/Building_blocks">les briques de construction</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectifs :</th>
+   <td>Comprendre les théories de base derrière la programmation orientée objet, comment l'appliquer à JavaScript, et comment travailler avec des objets JavaScript.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Les_bases_de_lobjet">Les bases de l'objet</h2>
+
+<p>Un objet est une collection de données apparentées et/ou de fonctionnalités (qui, souvent, se composent de plusieurs variables et fonctions, appelées propriétés et méthodes quand elles sont dans des objets). Prenons un exemple pour voir à quoi cela ressemble.</p>
+
+<p>Pour commencer, faites une copie locale de notre fichier <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs.html">oojs.html</a>. Il contient peu de choses : un élément {{HTMLElement("script")}} pour écrire notre code à l'intérieur. Nous utiliserons ces éléments de base pour explorer les bases de la syntaxe objet. Durant cette exemple, vous devriez avoir <a href="/fr/docs/Apprendre/D%C3%A9couvrir_outils_d%C3%A9veloppement_navigateurs#La_console_JavaScript">la console JavaScript des outils de développement</a> ouverte et prête, pour y saisir des commandes.</p>
+
+<p>Comme souvent dans JavaScript, pour créer un objet, on commence avec la définition et l'initialisation d'une variable. Essayez de mettre le code ci-dessous sous le code déjà écrit de votre fichier JavaScript, puis sauvegardez et rafraichissez la page :</p>
+
+<pre class="brush: js notranslate">var personne = {};</pre>
+
+<p>Désormais ouvrez la <a href="/fr/docs/Outils/Console_JavaScript#Ouvrir_la_Console_du_navigateur">console JavaScript</a> de votre navigateur, saisissez <code>personne</code> à l'intérieur, et appuyez sur <kbd>Entrée</kbd>. Vous devriez obtenir le résultat suivant :</p>
+
+<pre class="brush: js notranslate">[object Object]</pre>
+
+<p>Félicitations, vous avez créé votre premier objet ! Mais c'est un objet vide, on ne peut pas faire grand-chose avec. Modifions notre objet pour qu'il ressemble à ceci :</p>
+
+<pre class="brush: js notranslate">var personne = {
+  nom: ['Jean', 'Martin'],
+  age: 32,
+  sexe: 'masculin',
+  interets: ['musique', 'skier'],
+  bio: function() {
+    alert(this.nom[0] + ' ' + this.nom[1] + ' a ' + this.age + ' ans. Il aime ' + this.interets[0] + ' et ' + this.interets[1] + '.');
+  },
+  salutation: function() {
+    alert('Bonjour ! Je suis ' + this.nom[0] + '.');
+  }
+};
+</pre>
+
+<p>Après avoir sauvegardé et rafraîchit la page, essayez d'entrer les lignes suivantes dans le champ de saisie <code>input</code> :</p>
+
+<pre class="brush: js notranslate">personne.nom
+personne.nom[0]
+personne.age
+personne.interets[1]
+personne.bio()
+personne.salutation()</pre>
+
+<p>Vous avez désormais des données et des fonctionnalités dans votre objet, et vous pouvez y accéder avec une une syntaxe simple et claire !</p>
+
+<div class="note">
+<p><strong>Note :</strong> Si vous avez des difficultés pour le faire fonctionner, comparez votre code avec notre version — voir <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-finished.html">oojs-finished.html</a> (ou <a href="https://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-finished.html">voir en action</a>). Une erreur courante, quand on commence avec les objets, est de mettre une virgule après la dernière propriété — ce qui provoque une erreur.</p>
+</div>
+
+<p>Alors, comment ça fonctionne ? Un objet est fait de plusieurs membres, qui ont chacun un nom (par exemple <code>nom</code> et <code>age</code> ci-dessus) et une valeur (par exemple. <code>['Jean', 'Martin']</code> et <code>32</code>).</p>
+
+<p>Chaque paire de nom/valeur doit être séparée par une virgule, et le nom et la valeur de chaque membre sont séparés par deux points. La syntaxe suit ce schéma :</p>
+
+<pre class="brush: js notranslate">var monObjet = {
+  nomDuMembre1: valeurDuMembre1,
+  nomDuMembre2: valeurDuMembre2,
+  nomDuMembre3: valeurDuMembre3
+}</pre>
+
+<p>La valeur d'un membre dans un objet peut être n'importe quoi — dans notre objet <code>personne</code>, nous avons du texte, un nombre, deux tableaux et deux fonctions. Les quatre premières éléments sont des données appelées <strong>propriétés</strong> de l'objet, et les deux derniers éléments sont des fonctions qui utilisent les données de l'objet pour faire quelque chose, et sont appelées des <strong>méthodes</strong> de l'objet.</p>
+
+<p>Dans cet exemple, l'objet est créé grâce à un<strong> objet littéral</strong> : on écrit littéralement le contenu de l'objet pour le créer. On distinguera cette structure des objets instanciés depuis des classes, que nous verrons plus tard.</p>
+
+<p>C'est une pratique très courante de créer un objet en utilisant un objet littéral :  par exemple, quand on envoie une requête au serveur pour transférer des données vers une base de données.</p>
+
+<p>Envoyer un seul objet est bien plus efficace que d'envoyer ses membres de manière individuelle, et c'est bien plus simple de travailler avec un tableau quand on veut identifier des membres par leur nom.</p>
+
+<h2 id="Notation_avec_un_point">Notation avec un point</h2>
+
+<p>Ci-dessus, on accède aux membres de l'objet en utilisant la <strong>notation avec un point</strong>.</p>
+
+<p>Le nom de l'objet (<code>personne</code>) agit comme un <strong>espace de noms</strong> (ou <em>namespace</em> en anglais) — il doit être entré en premier pour accéder aux membres <strong>encapsulés</strong> dans l'objet. Ensuite, on écrit un point, puis le membre auquel on veut accéder — que ce soit le nom d'une propriété, un élément d'un tableau, ou un appel à une méthode de l'objet. Par exemple :</p>
+
+<pre class="brush: js notranslate">personne.age
+personne.interets[1]
+personne.bio()</pre>
+
+<h3 id="Sous-espaces_de_noms">Sous-espaces de noms</h3>
+
+<p>Il est même possible de donner un autre objet comme valeur d'un membre de l'objet. Par exemple, on peut essayer de changer la propriété <code>nom</code> du membre et la faire passer de</p>
+
+<pre class="brush: js notranslate">nom: ['Jean', 'Martin'],</pre>
+
+<p>à</p>
+
+<pre class="brush: js notranslate">nom : {
+  prenom: 'Jean',
+  nomFamille: 'Martin'
+},</pre>
+
+<p>Ici, nous avons bien créé un <strong>sous-espace de noms</strong>. Ça a l'air compliqué, mais ça ne l'est pas. Pour accéder à ces élements, il suffit de chaîner une étape de plus avec un autre point. Essayez ceci :</p>
+
+<pre class="brush: js notranslate">personne.nom.prenom
+personne.nom.nomFamille</pre>
+
+<p><strong>Important </strong>: à partir de maintenant, vous allez aussi devoir reprendre votre code et modifier toutes les occurrences de :</p>
+
+<pre class="brush: js notranslate">nom[0]
+nom[1]</pre>
+
+<p>en</p>
+
+<pre class="brush: js notranslate">nom.prenom
+nom.nomFamille</pre>
+
+<p>sinon vos méthodes ne fonctionneront plus.</p>
+
+<h2 id="Notation_avec_les_crochets">Notation avec les crochets</h2>
+
+<p>Il y a une autre façon d'accéder aux membres de l'objet : la notation avec les crochets. Plutôt que d'utiliser ceci :</p>
+
+<pre class="brush: js notranslate">personne.age
+personne.nom.prenom</pre>
+
+<p>Vous pouvez utiliser :</p>
+
+<pre class="brush: js notranslate">personne['age']
+personne['nom']['prenom']</pre>
+
+<p>Cela ressemble beaucoup à la façon d'accéder aux éléments d'un tableau et c'est bien la même chose  — au lieu d'utiliser un indice numérique pour sélectionner un élément, on utilise le nom associé à chaque valeur d'un membre. Ce n'est pas pour rien que les objets sont parfois appelés tableaux associatifs : ils associent des chaînes de caractères (les noms des membres) à des valeurs, de la même façon que les tableaux associent des nombres à des valeurs.</p>
+
+<h2 id="Définir_les_membres_dun_objet">Définir les membres d'un objet</h2>
+
+<p>Jusqu'ici, nous avons vu comment <strong>accéder</strong> aux membres d'un objet. Vous pouvez aussi <strong>modifier</strong> la valeur d'un membre de l'objet en déclarant simplement le membre que vous souhaitez modifier(en utilisant la notation avec le point ou par crochet), comme ceci :</p>
+
+<pre class="brush: js notranslate">personne.age = 45
+personne['nom']['nomFamille'] = 'Rabuchon'</pre>
+
+<p>Essayez de saisir ces deux lignes précédentes, puis accédez à nouveau aux membres pour voir ce qui a changé :</p>
+
+<pre class="brush: js notranslate">personne.age
+personne['nom']['nomFamille']</pre>
+
+<p>Définir les membres ne s'arrête pas à mettre à jour la valeur de propriétés ou méthodes existantes; <strong>vous pouvez aussi créer de nouveaux membres</strong>. Essayez ceci :</p>
+
+<pre class="brush: js notranslate">personne['yeux'] = 'noisette'
+personne.auRevoir = function() { alert("Bye bye tout le monde !"); }</pre>
+
+<p>Vous pouvez maintenant tester vos nouveaux membres :</p>
+
+<pre class="brush: js notranslate">personne['yeux']
+personne.auRevoir()</pre>
+
+<p>Un des aspects pratiques de la notation par crochet est qu'elle peut être utilisée pour définir dynamiquement les valeurs des membres, mais aussi pour définir les noms. Imaginons que nous voulions que les utilisateurs puissent saisir des types de valeurs personnalisées pour les données des personnes, en entrant le nom du membre et sa valeur dans deux champs <code>input</code>. On pourrait avoir ses valeurs comme ceci :</p>
+
+<pre class="brush: js notranslate">var monNomDeDonnee = nomInput.value
+var maValeurDeDonnee = valeurNom.value</pre>
+
+<p>On peut alors ajouter le nom et la valeur du nouveau membre de l'objet <code>personne</code> comme ceci :</p>
+
+<pre class="brush: js notranslate">personne[monNomDeDonnee] = maValeurDeDonnee</pre>
+
+<p>Pour le tester, essayez d'ajouter les lignes ci-dessous dans votre code, juste après le crochet fermante de l'objet <code>personne</code> :</p>
+
+<pre class="brush: js notranslate">var monNomDeDonnee = 'hauteur'
+var maValeurDeDonnee = '1.75m'
+personne[monNomDeDonnee] = maValeurDeDonnee</pre>
+
+<p>Sauvegardez, rafraîchissez et entrez le texte suivant dans le champ de saisie (l'élément <code>input</code>) :</p>
+
+<pre class="brush: js notranslate">personne.hauteur</pre>
+
+<p>Nous n'aurions pas pu construire ce membre avec la notation avec un point, car celle-ci n'accepte qu'un nom et pas une variable pointant vers un nom.</p>
+
+<h2 id="Quest-ce_que_«_this_»">Qu'est-ce que « <code>this</code> » ?</h2>
+
+<p>Vous avez dû remarquer quelque chose d'un peu étrange dans vos méthodes. Celle-ci, par exemple :</p>
+
+<pre class="brush: js notranslate">salutation: function() {
+  alert('Bonjour! Je suis ' + this.nom.prenom + '.');
+}</pre>
+
+<p>Vous vous demandez probablement ce que signifie « <code>this</code> ». Le mot-clé <code>this</code> se réfère à l'objet courant dans lequel le code est écrit —  dans notre cas, <code>this</code> est l'équivalent de <code>personne</code>.  Alors, pourquoi ne pas écrire <code>personne</code> à la place ? Comme vous le verrez dans l'article <a href="/fr/docs/Learn/JavaScript/Objects/Object-oriented_JS">la programmation JavaScript orientée objet pour les débutants</a>, <code>this</code> est très utile — il permet de s'assurer que les bonnes valeurs sont utilisées quand le contexte d'un membre change (on peut par exemple avoir deux personnes, sous la forme de deux objets, avec des noms différents).</p>
+
+<p>Essayons d'illustrer nos propos par une paire d'objet <code>personne</code> simplifiée :</p>
+
+<pre class="brush: js notranslate">var personne1 = {
+  nom: 'Christophe',
+  salutation: function() {
+    alert('Bonjour ! Je suis ' + this.nom + '.');
+  }
+}
+
+var personne2 = {
+  nom: 'Bruno',
+  salutation: function() {
+    alert('Bonjour ! Je suis ' + this.nom + '.');
+  }
+}</pre>
+
+<p>Dans ce cas,  <code>personne1.salutation()</code> affichera "Bonjour ! Je suis Christophe.", tandis que <code>personne2.salutation()</code> affichera "Bonjour ! Je suis Bruno." alors que le code est le même dans les deux cas. Comme expliqué plus tôt, <code>this</code> est égal à l'objet dans lequel se situe le code. Ce n'est pas très utile quand on écrit des objets littéraux à la main, mais ça prend tout son sens quand on génère des objets dynamiques (avec des constructeurs par exemple).</p>
+
+<h2 id="Vous_utilisiez_des_objets_depuis_le_début_!">Vous utilisiez des objets depuis le début !</h2>
+
+<p>Tout au long de ces exemples, vous vous êtes probablement dit que la notation avec un point vous était très familière. C'est parce que vous l'avez utilisée tout au long du cours ! À chaque fois que vous avez travaillé avec un exemple qui utilise une API ou un objet JavaScript natif, nous avons utilisé des objets. Ces fonctionnalités sont construites exactement comme les objets que nous avons manipulés ici, mais sont parfois plus complexes que dans nos exemples.</p>
+
+<p>Ainsi, quand vous utilisez une méthode comme :</p>
+
+<pre class="brush: js notranslate">maChaineDeCaracteres.split(',');</pre>
+
+<p>Vous utilisez une méthode disponible dans une instance du type {{jsxref("String")}}. Dès que vous créez une chaîne de caractères dans votre code, cette chaîne est automatiquement créée comme une instance de <code>String</code> et possède donc plusieurs méthodes/propriétés communes.</p>
+
+<p>Quand vous accédez au DOM (<em>Document Object Model</em> ou « modèle objet du document ») avec <code>document</code> et des lignes telles que :</p>
+
+<pre class="brush: js notranslate">var monDiv = document.createElement('div');
+var maVideo = document.querySelector('video');</pre>
+
+<p>Vous utilisez une méthode disponible dans l'instance de la classe {{domxref("Document")}}. Pour chaque page web chargée, une instance de <code>Document</code> est créée, appelée <code>document</code> et qui représente la structure entière de la page, son contenu et d'autres caractéristiques telles que son URL. Encore une fois, cela signifie qu'elle possède plusieurs méthodes/propriétés communes.</p>
+
+<p>C'est également vrai pour beaucoup d'autres objets/API natifs que vous avez utilisé  — {{jsxref("Array")}}, {{jsxref("Math")}}, etc.</p>
+
+<p>On notera que les objets/API natifs ne créent pas toujours automatiquement des instances d'objet. Par exemple, <a href="/fr/docs/Web/API/Notifications_API">l'API Notifications</a> — qui permet aux navigateurs modernes de déclencher leurs propres notifications — vous demande d'instancier vous-même une nouvelle instance d'objet en utilisant le constructeur pour chaque notification que vous souhaitez lancer. Essayez d'entrer le code ci-dessous dans la console JavaScript :</p>
+
+<pre class="brush: js notranslate">var maNotification = new Notification('Bonjour !');</pre>
+
+<p>Nous verrons les constructeurs dans un prochain article.</p>
+
+<div class="note">
+<p><strong>Note</strong> : On peut voir le mode de communication des objets comme un <strong>envoi de message</strong>. Quand un objet a besoin d'un autre pour faire une action, souvent il va envoyer un message à un autre objet via l'une de ses méthode et attendre une réponse, qui retournera une valeur.</p>
+</div>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Félicitations, vous avez terminé notre premier article sur les objets JavaScript  — vous devriez maintenant mieux comprendre comment on travaille avec des objets en JavaScript. Vous avez pu créer vos propres objets basiques. Vous devriez aussi voir que les objets sont très pratiques pour stocker des données et des fonctionnalités. Si on ne passe pas par un objet et qu'on a une variable différente pour chaque propriété et méthode de notre objet <code>personne</code>, cela sera inefficace et frustrant et vous prendrez le risque de créer des conflits avec d'autres variables et fonctions du même nom.</p>
+
+<p>Les objets permettent de conserver les informations de façon sûre, enfermées dans leur propre « paquet », hors de danger.</p>
+
+<p>Dans le prochain article, nous commencerons à voir la théorie de la programmation orientée objet (POO) et comment utiliser ces techniques en JavaScript.</p>
+
+<p>{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}</p>
diff --git a/files/fr/learn/javascript/objects/heritage/index.html b/files/fr/learn/javascript/objects/heritage/index.html
new file mode 100644
index 0000000000..9359b6f4ee
--- /dev/null
+++ b/files/fr/learn/javascript/objects/heritage/index.html
@@ -0,0 +1,260 @@
+---
+title: L'héritage au sein de JavaScript
+slug: Learn/JavaScript/Objects/Heritage
+tags:
+  - Apprendre
+  - Article
+  - Débutant
+  - Héritage
+  - JS Orienté Objet
+  - JavaScript
+  - Objet
+  - Programmation orientée objet
+  - Prototype
+translation_of: Learn/JavaScript/Objects/Inheritance
+---
+<div>
+<p>{{LearnSidebar}}</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}}</p>
+
+<p>Les présentations ayant été faites pour les concepts du JavaScript orienté objet, cet article détaille comment il est possible de créer une classe fille qui hérite des propriétés de sa classe mère. Nous verrons ensuite quelques conseils quant à l'utilisation du JavaScript orienté objet.</p>
+
+<table>
+ <tbody>
+  <tr>
+   <th scope="row">Pré-requis :</th>
+   <td>Une connaissance générale de l'informatique, des notions d'HTML et CSS, une connaissance des bases en JavaScript (voir <a href="/fr/docs/Learn/JavaScript/First_steps">Premiers pas</a> et <a href="/fr/docs/Learn/JavaScript/Building_blocks">Blocs de construction</a>) ainsi que des notions de JavaScript orienté objet (JSOO) (voir <a href="/fr/docs/Learn/JavaScript/Object-oriented/Introduction">Introduction aux objets</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>Comprendre comment implémenter l'héritage en JavaScript.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Héritage_prototypique">Héritage prototypique</h2>
+
+<p>Nous avons déjà vu le concept d'héritage en action, nous avons vu comment la chaîne de prototypage fonctionnait, et comment les propriétés de cette chaîne sont lues de manière ascendante. En revanche,nous n'avons utilisé pratiquement que quelques fonctionnalités déjà intégrées dans le navigateur pour le faire. Comment créer un objet JavaScript qui hérite d'un autre objet ?</p>
+
+<p>Certains pensent que JavaScript n'est pas un véritable langage orienté objet. Dans les langages orientés objets classiques, on définit des classes objet et on peut ensuite définir laquelle hérite d'une autre (voir <a href="http://www.tutorialspoint.com/cplusplus/cpp_inheritance.htm">C++ inheritance</a> en anglais pour des exemples simples). JavasScript utilise une approche différente : les objets héritant d'un autre n'ont pas de fonctionnalités copiées d'un autre objet, au lieu de ça, ils héritent des fonctionnalités via les liens de la chaîne de prototypage (on parle alors d'un <strong>héritage prototypique</strong>).</p>
+
+<p>Voyons comment cela se passe avec un exemple concret.</p>
+
+<h2 id="Pour_commencer">Pour commencer</h2>
+
+<p>Tout d'abord, faites une copie du fichier <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-start.html">oojs-class-inheritance-start.html</a> (voir la <a href="https://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-start.html">démo</a>). Vous y trouverez le constructeur <code>Personne()</code> que nous avons utilisé jusque là dans l'ensemble des modules, néanmoins il y a un léger changement : nous n'avons défini que les attributs au sein du constructeur.</p>
+
+<pre>function Personne(prenom, nom, age, genre, interets) {
+  this.nom = {
+    prenom,
+    nom
+  };
+  this.age = age;
+  this.genre = genre;
+  this.interets = interets;
+};</pre>
+
+<p>L'ensemble des méthodes est défini dans le prototype :</p>
+
+<pre>Personne.prototype.saluer = function() {
+  alert('Salut! Je suis ' + this.nom.prenom + '.');
+};</pre>
+
+<p>Essayons de créer une classe <code>Professeur</code> similaire à celle que nous avons utilisée jusqu'ici dans les autres modules d'initiations à l'approche objet. Ainsi, cette classe hérite de <code>Personne</code> mais possède aussi :</p>
+
+<ol>
+ <li>Un nouvel attribut <code>matière</code> — qui contiendra la matière que le professeur enseigne.</li>
+ <li>Une méthode <code>saluer</code> un peu plus élaborée, qui sera un peu plus formelle que la méthode de base, cela sera plus approprié, lorsque le professeur s'adrressera à des étudiants, par exemple.</li>
+</ol>
+
+<h2 id="Définissons_le_constructeur_Professeur()">Définissons le constructeur Professeur()</h2>
+
+<p>La première chose à faire est de créer le constructeur <code>Professeur()</code> via l'ajout du code suivant :</p>
+
+<pre>function Professeur(prenom, nom, age, genre, interets, matiere) {
+  Personne.call(this, prenom, nom, age, genre, interets);
+
+  this.matiere = matiere;
+}</pre>
+
+<p>Cela ressemble beaucoup au constructeur <code>Personne</code> mais il y a quelque chose que nous n'avons pas encore vu : la fonction <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Function/call">call()</a></code>. Cette fonction permet d'appeler une fonction définie ailleurs dans le contexte actuel. Le premier paramètre spécifie la valeur de <code>this</code> que l'on souhaite utiliser lors que l'on utilisera la fonction, les paramètres suivants seront les paramètres qui pourront être passés en arguments lorsqu'elle sera appelée.</p>
+
+<p>Nous voulons que le constructeur <code>Professeur()</code> aie les mêmes attributs que <code>Personne()</code>, nous les spécifions donc dans l'appel fait via la fonction <code>call()</code>.</p>
+
+<p>La dernière ligne au sein du constructeur sert simplement à définir l'attribut <code>matière</code> que les professeurs enseignent, ce qui n'est pas valable pour les personnes génériques.</p>
+
+<p>Notez que nous aurions très bien pu écrire tout simplement ceci :</p>
+
+<pre>function Professeur(prenom, nom, age, genre, interets, matiere) {
+  this.nom_complet = {
+    prenom,
+    nom
+  };
+  this.age = age;
+  this.genre = genre;
+  this.interets = interets;
+  this.matiere = matiere;
+}</pre>
+
+<p>Cependant cela aurait eu pour effet de redéfinir les attributs à nouveau, sans les hériter de <code>Personne()</code>, ce qui n'est pas vraiment le but que nous voulons atteindre lorsque l'on parle de l'héritage, cela rajoute aussi des lignes de code inutiles.</p>
+
+<p> </p>
+
+<h3 id="Hériter_d'un_constructeur_sans_paramètres">Hériter d'un constructeur sans paramètres</h3>
+
+<p>Notez que si les valeurs des propriétés du constructeur dont vous héritez ne proviennent pas de paramètres, vous n'avez nullement besoin de les specifier comme arguments additionnels dans l'appel de la fonction <code>call()</code>. Donc, par exemple, si vous avez quelque chose d'aussi simple que ceci :</p>
+
+<pre><code>function Brick() {
+  this.width = 10;
+  this.height = 20;
+}</code></pre>
+
+<p>Vous pouvez hériter des propriétés <code>width</code> et <code>height</code> en procédant comme ceci (Mais  également en suivant bien sûr les différentes étapes décrites ci dessous) :</p>
+
+<pre><code>function BlueGlassBrick() {
+  Brick.call(this);
+
+  this.opacity = 0.5;
+  this.color = 'blue';
+}</code></pre>
+
+<p>Notez que nous n'avons spécifié que <code>this</code> au sein de <code>call()</code> — Aucun autre paramètre n'est requis puisque nous n'héritons ici d'aucune propriété provenant de la classe parente qui soit spécifiée via paramètres.  </p>
+
+<h2 id="Définir_le_prototype_de_Professeur()_et_son_constructeur_référent.">Définir le prototype de Professeur() et son constructeur référent.</h2>
+
+<p>Pour le moment tout va bien, mais nous avons un petit problème. Nous avons défini un  nouveau constructeur et ce dernier possède une propriété <code>prototype</code>, qui par défaut ne contient qu'une référence à la fonction constructrice elle même. En revanche il ne contient pas les méthodes de la propriété <code>prototype</code> du constructeur <code>Personne()</code>. Pour le constater, vous pouvez par exemple entrer <code>Professeur.prototype.constructor</code> dans la console JavaScript pour voir ce qu'il en est. Le nouveau constructeur n'a en aucun cas hérité de ces méthodes. Pour le constater, comparez les sorties de <code>Personne.prototype.saluer</code> et de <code>Professeur.prototype.saluer</code></p>
+
+<p>Notre classe <code>Professeur()</code> doit hériter des méthodes définies dans le prototype de <code>Personne()</code>. Aussi comment procéder pour obtenir ce résultat ?</p>
+
+<p>Ajoutez la ligne suivante à la suite du bloc de code que nous venons d'ajouter :</p>
+
+<pre>Professeur.prototype = Object.create(Personne.prototype);</pre>
+
+<ol>
+ <li>Ici, notre ami <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/create">create()</a></code> vient nous aider à nouveau. Dans ce cas, on l'utilise afin de créer un nouvel objet que nous assignons à <code>Professeur.prototype</code>. Le nouvel objet possède <code>Personne.prototype</code> désormais comme son prototype et héritera ainsi, si et quand le besoin se fera sentir, de toutes les méthodes disponible sur <code>Personne.prototype</code>. </li>
+ <li>Nous avons également besoin de faire encore une chose avant de continuer. Après avoir ajouté la ligne précédente, le constructeur du prototype de <code>Professeur()</code> est désormais équivalent à celui de <code>Personne()</code>, parce que nous avons défini <code>Professeur.prototype</code> pour référencer un objet qui hérite ses propriétés de  <code>Personne.prototype</code> ! Essayez, après avoir sauvegardé votre code et rechargé la page, d'entrer <code>Professeur.prototype.constructor</code> dans la console pour vérifier.</li>
+ <li>Cela peut devenir problématique, autant le corriger dès maintenant. C'est possible via l'ajout de la ligne de code suivante à la fin :
+  <pre>Professeur.prototype.constructor = Professeur;</pre>
+ </li>
+ <li>
+  <p>A présent, si vous sauvegardez et rafraichissez après avoir écrit <code>Professeur.prototype.constructor</code>, cela devrait retourner <code>Professeur()</code>, et en plus nous héritons maintenant de <code>Personne()</code> !</p>
+ </li>
+</ol>
+
+<h2 id="Donner_au_prototype_de_Professeur()_une_nouvelle_fonction_saluer()">Donner au prototype de Professeur() une nouvelle fonction saluer()</h2>
+
+<p>Pour terminer notre code, nous devons définir une nouvelle fonction <code>saluer()</code> sur le constructeur de <code>Professeur()</code>.</p>
+
+<p>La façon la plus facile d'accomplir cela est de la définir sur le prototype de Professeur() — ajoutez ceci à la suite de votre code :</p>
+
+<pre>Professeur.prototype.saluer = function() {
+  var prefix;
+
+  if (this.genre === 'mâle' || this.genre === 'Mâle' || this.genre === 'm' || this.genre === 'M') {
+    prefix = 'M.';
+  } else if (this.genre === 'femelle' || this.genre === 'Femelle' || this.genre === 'f' || this.genre === 'F') {
+    prefix = 'Mme';
+  } else {
+    prefix = '';
+  }
+
+  alert('Bonjour. Mon nom est ' + prefix + ' ' + this.nom_complet.nom + ', et j\'enseigne ' + this.matiere + '.');
+};</pre>
+
+<p>Ceci affiche la salutation du professeur, qui utilise le titre de civilité approprié à son genre, au moyen d'une instruction conditionnelle.</p>
+
+<p> </p>
+
+<h2 id="Exécuter_l'exemple">Exécuter l'exemple</h2>
+
+<p>Une fois tout le code saisi, essayez de créer une instance d'objet <code>Professeur()</code> en ajoutant à la fin de votre JavaScript (ou à l'endroit de votre choix) :</p>
+
+<pre>var professeur1 = new Professeur('Cédric', 'Villani', 44, 'm', ['football', 'cuisine'], 'les mathématiques');</pre>
+
+<p>Sauvegardez et actualisez, et essayez d'accéder aux propriétés et méthodes de votre nouvel objet <code>professeur1</code>, par exemple :</p>
+
+<pre>professeur1.nom_complet.nom;
+professeur1.interets[0];
+professeur1.bio();
+professeur1.matiere;
+professeur1.saluer();Ffa</pre>
+
+<p>Tout cela devrait parfaitement fonctionner. Les instructions des lignes 1,2,3  et 6 accèdent à des membres hérités de la classe générique <code>Personne()</code> via son constructeur, tandis que la ligne 4 accède de façon plus spécifique à un membre qui n'est disponible que via le constructeur de la classe spécialisée <code>Professeur()</code>.</p>
+
+<p><strong>Note</strong>: Si vous rencontrez un problème afin de faire fonctionner ce code comparez le à notre <a href="http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-finished.html">version finalisée</a> (Ou regarder tourner <a href="http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-finished.html">notre demo en ligne</a>).</p>
+
+<p>La méthode que nous avons détaillée ici n'est pas la seule permettant de mettre en place l'héritage de classes en JavaScript, mais elle fonctionne parfaitement et elle vous permet d'avoir une bonne idée de comment implémenter l'héritage en JavaScript.</p>
+
+<p>Vous pourriez également être intéressé par certaines des nouvelles fonctionnalités de {{glossary("ECMAScript")}} qui nous permettent de mettre en place l'héritage d'une façon beaucoup plus élégante en JavaScript (Voir <a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a>). Nous ne les avons pas développées ici parce qu'elles ne sont actuellement pas supportées par tous les navigateurs. Toutes les autres constructions dont nous avons discuté dans cette série d'articles sont supportées par IE9 et les versions moins récentes et il existe des méthodes qui prennent plus en  charge les navigateurs moins récents.</p>
+
+<p>Un moyen habituel est d'utiliser les librairies JavaScript — La plupart des options populaires ont une sélection de fonctionnalités disponibles pour réaliser l'héritage plus facilement et plus rapidement.</p>
+
+<p><a href="http://coffeescript.org/#classes">CoffeeScript</a> par exemple fournit les fonctionnalités <code>class</code>, <code>extends</code>, etc.</p>
+
+<h2 id="Un_exercice_plus_complexe.">Un exercice plus complexe.</h2>
+
+<p>Dans notre <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS#Object-oriented_programming_from_10000_meters">section sur la programmation orientée objet</a> nous avons également inclus  une classe <code>Etudiant</code> comme un concept qui hérite de toutes les fonctionnalités de la classe <code>Personne</code>, et qui a également une méthode <code>saluer()</code> differente de celle de <code>Personne</code> qui est beaucoup moins formelle que la méthode <code>saluer()</code> de <code>Professeur()</code>. Jetez un oeil à ce à quoi ressemble la méthode <code>saluer()</code> de la classe <code>Etudiant</code> dans cette section et essayez d'implémenter votre propre constructeur <code>Etudiant()</code> qui hérite de toutes les fonctionnalités de <code>Personne()</code> et la fonction <code>saluer()</code> différente.</p>
+
+<p><strong>Note</strong>: Si vous rencontrez un problème afin de faire fonctionner ce code comparez le à notre <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-student.html">version finalisée</a> (Ou regarder tourner <a href="http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-student.html">notre demo en ligne</a>).</p>
+
+<h2 id="Résumé_sur_les_membres_de_l'Objet">Résumé sur les membres de l'Objet</h2>
+
+<p>Pour résumer, vous avez de façon basique trois types de propriétés/méthodes à prendre en compte :</p>
+
+<ol>
+ <li>Celles définies au sein d'un constructeur et passées en paramètres aux instances de l'objet. Celles là ne sont pas difficiles à repérer — Dans votre propre code personnalisé, elles sont les membres définis en utilisant les lignes comme <code>this.x = x</code> ; Dans les codes préconstruits propres aux navigateurs, ils sont les membres seulement accessibles aux instances d'objet (usuellement créés en appelant un constructeur via l'utilisation du mot clé <code>new</code>, exemple : <code>var myInstance = new myConstructor()</code>).</li>
+ <li>Celles définies directement sur les constructeurs eux mêmes et accessibles uniquement sur les constructeurs. Celles là sont communément présentes uniquement dans les objets préconstruits des navigateurs et sont reconnus par le fait d'être directement chaînées sur un constructeur et non sur une instance. Par exemple, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys">Object.keys()</a></code>.</li>
+ <li>Celles définies sur un prototype de constructeur qui sont héritées par toutes les instances des classes d'objet. Celles là incluent n'importe quel membre défini sur un prototype de constructeur, exemple : <code>myConstructor.prototype.x()</code>.</li>
+</ol>
+
+<p>Si vous êtes encore dans la confusion par rapport aux différents types ne vous inquiétez pas c'est normal — vous êtes encore entrain d'apprendre et la familiarité apparaîtra avec la pratique.</p>
+
+<h2 id="Quand_devez-vous_utiliser_l'héritage_en_JavaScript">Quand devez-vous utiliser  l'héritage en JavaScript?</h2>
+
+<p>Particulièrement après ce dernier article, vous pourriez penser "woa c'est compliqué". Bien, vous avez vu juste, prototypes et héritages représentent une partie des aspects les plus complexes de JavaScript, mais une bonne partie de la puissance et de la flexibilité de JavaScript vient de sa structure Objet et de l'héritage et il est vraiment très important de comprendre comment cela fonctionne. </p>
+
+<p>D'une certaine manière, vous utilisez l'héritage à plein temps — Que vous utilisiez différentes fonctionnalités d'une WebAPI , ou une méthode/propriété définie par défaut  sur un objet prédéfini du navigateur que vous invoquez sur vos chaînes de caractères, tableaux etc., vous utilisez de façon implicite l'héritage. </p>
+
+<p>En termes d'utilisation de l'héritage dans votre propre code, vous ne l'utiliserez probablement pas si souvent et spécialement pour débuter avec, et dans les petits projets — C'est une perte de temps d'utiliser les objets et l'héritage par amour pour cette pratique quand vous n'en avez pas besoin. Mais à mesure que les bases de votre code s'élargissent vous trouverez cette façon de faire probablement très utile. Si vous trouvez utile et plus pratique de commencer en créant un certain nombre d'objets spécialisés partageant les mêmes fonctionnalités, alors créer un objet générique qui contiendra toutes les fonctionnalités communes dont les objets spécialisés hériteront vous apparaîtra être une pratique peut être plus confortable et efficace par la suite. </p>
+
+<p><strong>Note</strong>: A cause de la manière dont JavaScript fonctionne, avec la chaîne de prototype, etc., le partage de fonctionnalités entre objet est souvent appelée <strong>délégation</strong> — Les objets spécialisés délèguent cette fonctionnalité à l'objet de type générique. C'est certainement beaucoup plus précis que de l'appeler héritage, puisque la fonctionnalité "héritée" n'est pas copiée dans les objets qui "héritent". Au contraire, elle demeure dans l'objet générique.</p>
+
+<p>Lorsque vous utilisez l'héritage, il est conseillé de ne pas avoir trop de degrés d'héritage et de toujours garder minutieusement trace de l'endroit où vous définissez vos propriétés et méthodes. Il est possible de commencer à écrire un code qui modifie temporairement les prototypes des objets prédéfinis du navigateur mais vous ne devriez pas le faire à moins que n'ayiez une très bonne raison. Trop de degrés d'héritages peut conduire à une confusion sans fin et une peine sans fin quand vous essayez de déboguer un tel code. </p>
+
+<p>En définitive, les objets sont juste une autre forme de réutilisation de code comme les fonctions et les boucles avec leurs propres rôles et avantages. Si vous trouvez utile de créer un lot de variables et fonctions relatives et que vous voulez les retracer ensemble et les empaqueter de façon ordonnée, un objet est une bonne idée. Les objets sont également très utiles quand vous souhaitez passer une collection de données d'un endroit à un autre. Toutes ces choses peuvent être accomplies sans l'utilisation d'un constructeur ou de l'héritage. Si vous n'avez besoin que d'une seule instance, l'utilisation d'un simple objet littéral serait certainement un choix beaucoup plus judicieux et vous n'avez certainement pas besoin de l'héritage.</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Cet article a couvert le reste du coeur de la théorie du JSOO et des syntaxes que nous pensons que vous devriez connaître maintenant. A cet stade vous devriez comprendre l'objet JavaScript et les bases de la POO, les prototypes et l'héritage par prototype, comment créer les classes (constructeurs) et les instances d'objet, ajouter des fonctionnalités aux classes, et créer des sous classes qui héritent d'autres classes. </p>
+
+<p>Dans le prochain article, nous jetterons un regard sur comment travailler avec le (JSON),  un format commun d'échange de données écrit en utilisant les objets JavaScript.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="http://www.objectplayground.com/">ObjectPlayground.com</a> — Un site interactif d'appentissage très utile pour en savoir plus sur les Objets.</li>
+ <li><a href="https://www.amazon.com/gp/product/193398869X/">Secrets of the JavaScript Ninja</a>, Chapitre 6 — Un bon livre sur les concepts et techniques avancées du JavaScript par John Resig et Bear Bibeault. Le chapitre 6 couvre très bien les divers aspects des prototypes et de l'héritage ; vous trouverez sûrement facilement une version imprimée ou une version en ligne.</li>
+ <li><a href="https://github.com/getify/You-Dont-Know-JS/blob/master/this%20&amp;%20object%20prototypes/README.md#you-dont-know-js-this--object-prototypes">You Don't Know JS: this &amp; Object Prototypes</a> — Une partie de l'excellente série de manuels sur le JavaScript de Kyle Simpson. Le chapitre 5 en particulier jette un regard beaucoup plus approfondi sur les prototypes que nous ne l'avons fait ici. Nous avons présenté ici une vue simplifiée dans cette série d'articles dédiée aux débutants tandis que Kyle est allé dans les détails les plus profonds et fournit une image beaucoup plus complexe et plus précise.</li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}}</p>
+
+<p> </p>
+
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Basics">Les bases de l'Objet</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">JavaScript  Orienté Objet pour débutants</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Prototypes d'Objet</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Inheritance">L'héritage en JavaScript</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON">Travailler avec les données JSON</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Construire les Objets dans la pratique</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Ajouter des fonctionnalités à la démo de nos balles bondissantes</a></li>
+</ul>
+
+<p> </p>
+</div>
+
+<p> </p>
diff --git a/files/fr/learn/javascript/objects/index.html b/files/fr/learn/javascript/objects/index.html
new file mode 100644
index 0000000000..c388ee3b62
--- /dev/null
+++ b/files/fr/learn/javascript/objects/index.html
@@ -0,0 +1,70 @@
+---
+title: Introduction aux objets JS
+slug: Learn/JavaScript/Objects
+tags:
+  - Apprendre
+  - Article
+  - Auto-évaluation
+  - Débutant
+  - Guide
+  - JavaScript
+  - Objets
+  - Tutoriel
+translation_of: Learn/JavaScript/Objects
+---
+<div>
+<div>{{JsSidebar}}</div>
+
+<div>{{PreviousNext("Apprendre/JavaScript/Building_blocks", "Learn/JavaScript/Objects/Basics")}}</div>
+</div>
+
+<p class="summary">En JavaScript, la plupart des choses sont des objets, des éléments du cœur de JavaScript, comme les chaînes de caractères et les tableaux, aux interfaces de programmation (APIs) des navigateurs construites sur la base de JavaScript. Vous pouvez même créer vos propres objets pour encapsuler des fonctions liées et des variables au sein de paquets efficaces, et se comportant comme des conteneurs de données. Il est important de comprendre la nature orientée objet du JavaScript si vous souhaitez aller loin dans votre connaissance du langage, aussi, avons-nous fourni ce module afin de vous aider. Ici, nous enseignons la théorie de l’objet et sa syntaxe en détail, ensuite, ce sera à vous de voir comment vous souhaitez créer vos propres objets.     </p>
+
+<h2 id="Prérequis">Prérequis</h2>
+
+<p>Avant de commencer ce module, vous devriez avoir quelques familiarités avec le HTML et le CSS. Il serait raisonnable de travailler sur les modules <a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML">Introduction au HTML</a> et <a href="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS">Introduction au CSS</a> avant de commencer avec le JavaScript.</p>
+
+<p>Vous devriez également être familiarisé avec les bases du JavaScript avant de poursuivre en détails avec les objets JavaScript. Avant de commencer ce module, travaillez sur <a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/First_steps">Premiers pas avec JavaScript</a> et <a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks">Les blocs de construction en JavaScript</a>.</p>
+
+<div class="note">
+<p><strong>Remarque</strong>: Si vous travaillez sur un ordinateur, une tablette ou un autre appareil où vous n’avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer les (la plupart des) exemples de code grâce à un programme en ligne comme <a href="http://jsbin.com/">JSBin</a> ou <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/Objects/Basics">Les bases de JavaScript orienté objet</a></dt>
+ <dd>Dans le premier article concernant les objets JavaScript, nous découvrirons la syntaxe fondamentale d’un objet JavaScript, et nous revisiterons certaines fonctionnalités du JavaScript que nous avions vues précédemment dans le cours, en insistant sur le fait que bon nombre d'éléments précedemment abordés sont en fait des objets.</dd>
+</dl>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/Objects/JS_orient%C3%A9-objet">JavaScript orienté objet pour les débutants</a><u> </u></dt>
+ <dd>
+ <p style="margin-left: 36.0pt;">Après avoir vu les notions de base, nous nous pencherons sur le JavaScript orienté objet (JSOO) — cet article présente une vue basique de la théorie de la programmation orientée objet (POO), et explore ensuite comment le JavaScript émule les classes d’objet via les fonctions des constructeurs et comment créer des instances d’objet.</p>
+ </dd>
+ <dt><a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/Objects/Prototypes_Objet">Objets prototypes</a></dt>
+ <dd>
+ <p style="margin-left: 36.0pt;">Les prototypes sont des mécanismes par lesquels les objets JavaScript héritent les fonctionnalités d’un autre objet, et ils fonctionnent différemment des mécanismes d’héritage des langages classiques de programmation orientée objet. Dans cet article, nous explorons cette différence, expliquant comment les chaînes de prototypes fonctionnent et jetant un regard sur comment la propriété prototype peut être utilisée pour ajouter des méthodes aux constructeurs existants.</p>
+ </dd>
+ <dt><a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/Objects/Heritage">L’héritage au sein de JavaScript</a></dt>
+ <dd>
+ <p style="margin-left: 36.0pt;">Avec la plupart des redoutables détails du JSOO maintenant expliqués, cet article montre comment créer les classes (constructeurs) d’objet “enfant” qui héritent des fonctionnalités de leur classes “parents”. De plus, nous présentons certains conseils sur où et comment utiliser le JSOO.</p>
+ </dd>
+ <dt><a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/Objects/JSON">Manipuler des données JSON</a></dt>
+ <dd>
+ <p style="margin-left: 36.0pt;">JavaScript Object Notation (JSON) est un format standard pour la représentation de données structurées comme les objets JavaScript, qui est communément utilisé pour représenter et transmettre les données sur les sites web (ex. : Envoyer certaines données du serveur au client, afin d’être affichées sur une page web). Vous le rencontrerez assez souvent. Aussi, dans cet article, nous vous donnons tout ce dont vous avez besoin pour travailler avec le format JSON utilisant le JavaScript, incluant l’accès aux éléments des données dans un objet JSON et l’écriture de votre propre JSON.</p>
+ </dd>
+ <dt><a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/Objects/Object_building_practice">Pratiques sur la construction d’objet</a></dt>
+ <dd>
+ <p style="margin-left: 36.0pt;">Dans l’article précédent nous avons fait le tour de l’essentiel de la théorie de l’objet JavaScript et les détails de sa syntaxe, vous donnant ainsi une solide base sur laquelle débuter. Dans cet article nous plongeons dans un exercice, vous donnant plus de pratique dans la construction d’objets JavaScript personnalisés, qui produisent quelque chose d’amusant et de plus coloré — quelques balles colorées et bondissantes.</p>
+ </dd>
+</dl>
+
+<h2 id="Auto-évaluation">Auto-évaluation</h2>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Ajoutez des fonctionnalités  à notre  démo des ballons bondissants</a></dt>
+ <dd>Dans cette évaluation, vous devrez utiliser la démo des balles bondissantes de l’article précédent comme un point de départ et y ajouter quelques nouvelles et intéressantes fonctionnalités.</dd>
+</dl>
+
+<p>{{PreviousNext("Apprendre/JavaScript/Building_blocks", "JavaScript/Guide")}} </p>
diff --git a/files/fr/learn/javascript/objects/js_orienté-objet/index.html b/files/fr/learn/javascript/objects/js_orienté-objet/index.html
new file mode 100644
index 0000000000..c16e9a230e
--- /dev/null
+++ b/files/fr/learn/javascript/objects/js_orienté-objet/index.html
@@ -0,0 +1,278 @@
+---
+title: Le JavaScript orienté objet pour débutants
+slug: Learn/JavaScript/Objects/JS_orienté-objet
+tags:
+  - Apprendre
+  - Débutant
+  - Guide
+  - JavaScript
+  - OOJS
+  - OOP
+  - POO
+translation_of: Learn/JavaScript/Objects/Object-oriented_JS
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}</div>
+
+<p class="summary">Après avoir parcouru les fondamentaux, nous allons aborder en détail le JavaScript orienté objet (JSOO). Cet article présente une approche simple de la programmation orientée objet (POO) et détaille comment JavaScript émule des classes objet au travers des méthodes constructeur et comment instancier ces objets.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pré-requis :</th>
+   <td>Connaissances de base en informatique et compréhension des notions HTML et CSS, notions de JavaScript (voir <a href="/fr/docs/Learn/JavaScript/First_steps">Premiers pas</a> et <a href="/fr/docs/Learn/JavaScript/Building_blocks">Blocs de construction</a>)</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>Comprendre les concepts de base derrière la programmation orientée objet et comment ils s'appliquent à JavaScript ( « tout est objet » ) et comment créer des constructeurs et instancier des objets.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="La_programmation_orientée_objet_de_loin">La programmation orientée objet de loin</h2>
+
+<p>Pour commencer, donnons une vue simplifiée et de haut niveau de ce qu'est la programmation orientée objet (POO). On parle d'une vision simplifiée étant donnée que la POO peut devenir très vite complexe et qu'être exhaustif rendrait probablement la découverte plus confuse et difficile qu'autre chose. L'idée de base de la POO consiste à utiliser des objets pour modéliser les objets du monde réel que l'on souhaite représenter dans nos programmes et/ou de fournir un moyen simple d'accéder à une fonctionnalité qu'il serait difficile d'utiliser autrement.</p>
+
+<p>Les objets peuvent contenir des données et du code représentant de l'information au sujet de la chose que l'on essaie de modéliser ainsi que des fonctionnalités ou un comportement que l'on souhaite lui appliquer. Les données (et bien souvent les fonctions) associées à un objet peuvent être stockées (le terme officiel est <strong>encapsulé</strong>) à l'intérieur d'un paquet objet. Il est possible de donner un nom spécifique à un paquet objet afin  d'y faire référence, on parle alors d'<strong>espace de noms</strong> ou <em>namespace</em>, il sera ainsi plus facile de le manipuler et d'y accéder. Les objets peuvent aussi servir pour stocker des données et les transférer facilement sur un réseau.</p>
+
+<h3 id="Définissons_un_modèle_objet">Définissons un modèle objet</h3>
+
+<p>Nous allons voir un programme simple qui affiche des informations à propos des élèves et des professeurs d'une école. Nous allons aborder la théorie de la programmation orientée objet de manière générale sans l'appliquer à un langage particulier.</p>
+
+<p>Pour débuter, nous pouvons réutiliser l'objet Personne que nous avons créé dans notre <a href="/fr/docs/Learn/JavaScript/Objects/Basics">premier article</a>, il définit un ensemble de données et actions d'une personne. Il existe tout un tas de choses que nous pourrions savoir au sujet d'une personne (son adresse, sa taille, sa pointure, son ADN, son numéro de passeport, ses traits particuliers significatifs… ). En l'occurrence, nous souhaitons uniquement afficher son nom, son âge, ses passions, écrire une petite introduction à son sujet en utilisant ces données et lui apprendre à se présenter. On parle alors d'<strong>abstraction </strong>: créer un modèle simplifié de quelque chose de complexe mais qui ne contient que les aspects qui nous intéressent. Il sera alors plus simple de manipuler ce modèle objet simplifié dans le cadre de notre programme.</p>
+
+<p><img alt="Classe Personne avec attributs élémentaires" src="https://mdn.mozillademos.org/files/14867/ClassePersonne.png" style="height: 216px; width: 604px;"></p>
+
+<p>Dans plusieurs langages de POO, la définition d'un objet est appelé une <strong>classe </strong>(comme on le verra ci-après, JavaScript se base sur un mécanisme et une terminologie différente). En réalité ce n'est pas vraiment un objet mais plutôt un modèle qui définit les propriétés que notre objet doit avoir.</p>
+
+<h3 id="Créons_des_objets">Créons des objets</h3>
+
+<p>À partir de notre classe, nous pouvons créer des objets, on parle alors d'<strong>instancier des objets</strong>, une classe objet a alors <strong>une instance</strong>. Il s'agit d'objets qui contiennent les données et attributs définis dans une classe. À partir de notre classe Personne, nous pouvons modéliser des personnes réelles :</p>
+
+<p><img alt="Instantiation on a Personn Class for JS examples (fr)" src="https://mdn.mozillademos.org/files/14869/InstancePersonne.png" style="height: 716px; width: 699px;"></p>
+
+<p>Lorsque l'instance d'un objet est créée, on appelle la <strong>fonction</strong> <strong>constructeur </strong>de la classe pour la créer. On parle d'<strong>instanciation</strong> d'un objet — l'objet ainsi créé est <strong>instancié</strong> à partir de la classe.</p>
+
+<h3 id="Classes_filles">Classes filles</h3>
+
+<p>Pour notre exemple, nous n'allons pas nous contenter de personnes génériques — nous pourrions utiliser des professeurs, des étudiants, qui sont des types un peu plus spécifiques de personnes. En POO, il est possible de créer de nouvelles classes à partir d'autres classes — ces <strong>classes filles</strong> nouvellement créées peuvent <strong>hériter</strong> des propriétés et des attributs de leur <strong>classe mère</strong>. Il est donc possible d'avoir des attributs partagés à l'ensemble des classes plutôt que de les dupliquer. Si besoin, il est possible d'ajouter des fonctions et attributs spécifiques sur chaque classe fille.</p>
+
+<p><img alt="Inheritance principle with French text for JS example" src="https://mdn.mozillademos.org/files/14887/HeritageClasse.PNG" style="height: 709px; width: 696px;"></p>
+
+<p>Cela s'avère très utile puisque les étudiants et les professeurs se ressemblent sur de nombreux aspects : ils ont un nom, un genre, un âge, il est donc utile de ne définir ces attributs qu'une seule fois. Il est aussi possible de redéfinir le même attribut dans différentes classes étant donné que l'attribut appartiendra à chaque fois à un nom d'espace différent. On pourra ainsi avoir différentes formes de salutations : « Hey, je m'appelle [prénom] » pour les étudiants ( « Hey je m'appelle Sam » ) tandis que les professeurs pourront dire quelque chose d'un peu plus formel comme « Bonjour, mon nom est [Titre][Nom] et j'enseigne [matière] » par exemple « Bonjour mon nom est M. Griffiths et j'enseigne la chimie ».</p>
+
+<div class="note">
+<p><strong>Note </strong>: On parle de <strong>polymorphisme</strong>, lorsque des objets réutilisent la même propriété,  mais c'est juste pour info, vous embêtez pas.</p>
+</div>
+
+<p>Une fois la classe fille créée il est alors possible de l'instancier et de créer des objets. Par exemple :</p>
+
+<p><img alt="Professor instantiation example for JS fr" src="https://mdn.mozillademos.org/files/14889/InstanceProf.png" style="height: 703px; width: 696px;"></p>
+
+<p>Dans la suite de l'article, nous nous intéresserons à la mise en œuvre de la programmation orientée objet (POO) au sein de JavaScript.</p>
+
+<h2 id="Constructeurs_et_instances_dobjet">Constructeurs et instances d'objet</h2>
+
+<p>Certains disent que le JavaScript n'est pas vraiment un langage de programmation orienté objet — Il n'existe pas, en JavaScript d'élément <code>class</code> pour créer des classes alors que c'est le cas dans plusieurs langages orientés objet. JavaScript quant à lui, utilise des fonctions spéciales appelées <strong>constructeurs</strong> pour définir les objets et leurs propriétés. Ces constructeurs s'avèrent utiles, puisque bien souvent, nous ne savons pas combien d'objets nous allons définir, les constructeurs nous permettent de créer autant d'objets que nécessaire et d'y associer des données et des fonctions au fur et à mesure.</p>
+
+<p>Lorsqu'un objet est instancié à partir d'une fonction constructeur, les fonctions de la classe ne sont pas copiées directement dans l'objet comme dans la plupart des langages orientés objet (OO). En JavaScript, les fonctions sont liées grâce à une chaîne de référence appelée chaîne prototype (voir <a href="/fr/docs/Learn/JavaScript/Objects/Object_prototypes">Prototypes Objet</a>). Il ne s'agit donc pas d'une véritable instanciation au sens strict puisque JavaScript utilise un mécanisme différent pour partager des fonctionnalités entre les objets.</p>
+
+<div class="note">
+<p><strong>Note</strong> : Ne pas être un "langage classique de POO" n'est pas nécessairement un défaut. Comme nous le mentionnions au début de l'article, la POO peut très vite devenir compliquée et JavaScript, grâce à ses différences parvient à utiliser certains concepts avancés tout en restant abordable.</p>
+</div>
+
+<p>Voyons comment créer des classes via les constructeurs et les utiliser pour instancier des objets en JavaScript. Nous allons commencer par faire une copie locale du fichier <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs.html">oojs.html</a> que nous avons vu dans notre premier article sur les objets.</p>
+
+<h3 id="Un_exemple_simple">Un exemple simple</h3>
+
+<ol>
+ <li>Tout d'abord ; voyons comment définir une personne au travers d'une fonction classique. Vous pouvez ajouter l'exemple ci-dessous dans votre code existant :
+  <pre class="brush: js">function creerNouvellePersonne(nom) {
+  var obj = {};
+  obj.nom = nom;
+  obj.salutation = function() {
+    alert('Salut ! Je m\'appelle ' + this.nom + '.');
+  };
+  return obj;
+}</pre>
+ </li>
+ <li>Vous pouvez désormais créer une personne en appelant cette fonction, essayez en copiant les lignes suivantes dans la console JavaScript de votre navigateur :
+  <pre class="brush: js">var salva = creerNouvellePersonne('Salva');
+salva.nom;
+salva.salutation();</pre>
+  Ça fonctionne bien, mais on peut améliorer notre exemple. Si l'on sait que l'on va créer un objet, pourquoi créer un objet vide pour l'utiliser ensuite ? Heureusement, JavaScript est là et possède des fonctions adaptées comme les constructeurs. À l'abordage !</li>
+ <li>Remplacez la fonction précédente par celle-ci :
+  <pre class="brush: js">function Personne(nom) {
+  this.nom = nom;
+  this.salutation = function() {
+    alert('Bonjour ! Je m\'appelle ' + this.nom + '.');
+  };
+}</pre>
+ </li>
+</ol>
+
+<p>Le constructeur est l'équivalent JavaScript d'une classe. Il possède l'ensemble des fonctionnalités d'une fonction, cependant il ne renvoie rien et ne crée pas d'objet explicitement. Il se contente de définir les propriétés et les méthodes associées. Il y a aussi l'utilisation du mot-clé <code>this</code>, ce mot-clé sert au sein d'une instance qui sera créée à y faire référence, ainsi l'attribut nom sera, pour l'instance, égal au nom passé en argument de la fonction constructrice, la méthode <code>salutation</code><code>()</code> retournera elle aussi le nom passé en argument de la fonction constructrice.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Les fonctions de type constructeur commencent généralement par une majuscule. Cette convention d'écriture permet de repérer les constructeurs plus facilement dans le code.</p>
+</div>
+
+<p>Comment pouvons-nous utiliser un constructeur ?</p>
+
+<ol>
+ <li>Ajoutez les lignes suivantes au code déjà existant :
+  <pre class="brush: js">var personne1 = new Personne('Bob');
+var personne2 = new Personne('Sarah');</pre>
+ </li>
+ <li>Enregistrez votre code et relancez le dans votre navigateur puis essayez d'entrer les lignes suivantes dans la console :
+  <pre class="brush: js">personne1.nom
+personne1.salutation()
+personne2.nom
+personne2.salutation()</pre>
+ </li>
+</ol>
+
+<p>Pas mal ! Vous voyez désormais que nous avons deux nouveaux objets sur cette page, chaque objet étant stocké dans un espace de nom différent, pour y accéder il faut utiliser <code>personne1</code> et <code>personne2</code> pour préfixer les fonctions et attributs. Ce rangement permet de ne pas tout casser et de ne pas rentrer en collision avec d'autres fonctionnalités. Cependant les objets disposent du même attribut <code>nom</code> et de la même méthode <code>salutation()</code>. Heureusement, les attributs et les méthodes utilisent <code>this</code> ce qui leur permet d'utiliser les valeurs propres à chaque instance et de ne pas les mélanger.</p>
+
+<p>Revoyons l'appel au constructeur :</p>
+
+<pre class="brush: js">var personne1 = new Personne('Bob');
+var personne2 = new Personne('Sarah');</pre>
+
+<p>Dans chaque cas, le mot clé <code>new</code> est utilisé pour dire au navigateur que nous souhaitons définir une nouvelle instance, il est suivi du nom de la fonction que l'on utilise et de ses paramètres fournis entre parenthèses, le résultat est stocké dans une variable. Chaque instance est créée à partir de cette définition :</p>
+
+<pre class="brush: js">function Personne(nom) {
+  this.nom = nom;
+  this.salutation = function() {
+    alert('Bonjour ! Je m\'appelle ' + this.nom + '.');
+  };
+}</pre>
+
+<p>Une fois les objets créés, les variables <code>personne1</code> et <code>personne2</code> contiennent les objets suivants :</p>
+
+<pre class="brush: js">{
+  nom: 'Bob',
+  salutation: function() {
+    alert('Bonjour ! Je m\'appelle ' + this.nom + '.');
+  }
+}
+
+{
+  nom: 'Sarah',
+  salutation: function() {
+    alert('Bonjour ! Je m\'appelle ' + this.nom + '.');
+  }
+}</pre>
+
+<p>On peut remarquer qu'à chaque appel de notre fonction constructrice nous définissons <code>salutation()</code> à chaque fois. Cela peut être évité via la définition de la fonction au sein du prototype, ce que nous verrons plus tard.</p>
+
+<h3 id="Créons_une_version_finalisée_de_notre_constructeur">Créons une version finalisée de notre constructeur</h3>
+
+<p>L'exemple que nous avons utilisé jusqu'à présent était destiné à aborder les notions de base des constructeurs. Créons un constructeur digne de ce nom pour notre fonction constructrice <code>Personne()</code>.</p>
+
+<ol>
+ <li>Vous pouvez retirer le code que vous aviez ajouté précédemment pour le remplacer par le constructeur suivant, c'est la même fonction, ça reste un constructeur, nous avons juste ajouté quelques détails :
+  <pre class="brush: js">function Personne(prenom, nom, age, genre, interets) {
+  this.nom = {
+    prenom,
+    nom
+  };
+  this.age = age;
+  this.genre = genre;
+  this.interets = interets;
+  this.bio = function() {
+    alert(this.nom.prenom + ' ' + this.nom.nom + ' a ' + this.age + ' ans. Il aime ' + this.interets[0] + ' et ' + this.interets[1] + '.');
+  };
+  this.salutation = function() {
+    alert('Bonjour ! Je m\'appelle ' + this.nom.prenom + '.');
+  };
+};</pre>
+ </li>
+ <li>Vous pouvez ajouter la ligne ci-dessous pour créer une instance à partir du constructeur :
+  <pre class="brush: js">var personne1 = new Personne('Bob', 'Smith', 32, 'homme', ['musique', 'ski']);</pre>
+ </li>
+</ol>
+
+<p>Vous pouvez accéder aux fonctions des objets instanciés de la même manière qu'avant :</p>
+
+<pre class="brush: js">personne1['age']
+personne1.interets[1]
+personne1.bio()
+// etc.</pre>
+
+<div class="note">
+<p><strong>Note</strong> : Si vous avez du mal à faire fonctionner cet exemple, vous pouvez comparez votre travail avec notre version (voir <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-finished.html">oojs-class-finished.html</a> (vous pouvez aussi jeter un œil à la <a href="https://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-finished.html">démo</a>)</p>
+</div>
+
+<h3 id="Exercices">Exercices</h3>
+
+<p>Vous pouvez démarrer en instanciant de nouveaux objets puis en essayant de modifier et d'accéder à leurs attributs respectifs.</p>
+
+<p>D'autre part, il y a quelques améliorations possibles pour notre méthode <code>bio().</code> En effet elle affiche systématiquement le pronom 'il', même si votre personne est une femme ou bien préfère se définir par un autre genre. De plus, la biographie n'inclut que deux passions, même s'il y en a plus dans la liste. Essayez d'améliorer cette méthode. Vous pourrez mettre votre code à l'intérieur du constructeur (vous aurez probablement besoin de quelques structures conditionnelles et d'une boucle). Réflechissez à la syntaxe des phrases qui devra s'adapter en fonction du genre et du nombre de passions listées.</p>
+
+<div class="note">
+<p><strong>Note</strong>: Si vous êtes bloqués, nous avons mis une réponse possible sur notre dépôt <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-further-exercises.html">GitHub </a>(<a href="https://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-further-exercises.html">la démo</a>) —tentez d'abord l'aventure avant d'aller regarder la réponse !</p>
+</div>
+
+<h2 id="Dautres_manières_dinstancier_des_objets">D'autres manières d'instancier des objets</h2>
+
+<p>Jusque là nous n'avons abordé que deux manières différentes pour créer une instance d'objet, la déclarer de manière explicite et en utilisant le constructeur.</p>
+
+<p>Elles sont toutes les deux valables, mais il en existe d'autres. Afin que vous les reconnaissiez lorsque vous vous baladez sur le Web, nous en avons listées quelques unes.</p>
+
+<h3 id="Le_constructeur_Object">Le constructeur Object()</h3>
+
+<p>Vous pouvez en premier lieu utiliser le constructeur <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object">Object()</a></code> pour créer un nouvel objet. Oui, même les objets génériques ont leur propre constructeur, qui génère un objet vide.</p>
+
+<ol>
+ <li>Essayez la commande suivante dans la console JavaScript de votre navigateur :
+  <pre class="brush: js">var personne1 = new Object();</pre>
+ </li>
+ <li>On stocke ainsi un objet vide dans la variable personne1. Vous pouvez ensuite ajouter des attributs et des méthodes à cet objet en utilisant la notation point ou parenthèses comme vous le souhaitez.
+  <pre class="brush: js">personne1.nom = 'Chris';
+personne1['age'] = 38;
+personne1.salutation = function() {
+  alert('Bonjour ! Je m\'appelle ' + this.nom + '.');
+};</pre>
+ </li>
+ <li>Vous pouvez aussi passer un objet en paramètre du constructeur <code>Object()</code>, afin de prédéfinir certains attributs et méthodes.
+  <pre class="brush: js">var personne1 = new Object({
+  nom: 'Chris',
+  age: 38,
+  salutation: function() {
+    alert('Bonjour ! Je m\'appelle ' + this.nom + '.');
+  }
+});</pre>
+ </li>
+</ol>
+
+<h3 id="Via_la_méthode_create">Via la méthode create()</h3>
+
+<p>Les constructeurs permettent de structurer le code : vous pouvez avoir l'ensemble de vos constructeurs au même endroit et ensuite créer les instances suivant vos besoins, en identifiant clairement leur origine.  </p>
+
+<p>Cependant, on peut vouloir créér des instances d'un objet, sans forcément définir un constructeur au préalable. (Particulierement si l'on a peu d'instances de cet object). JavaScript intègre directement une méthode appelée <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/create">create()</a></code> qui rend cela possible. Elle permet d'instancier un objet à partir d'un objet existant  .</p>
+
+<ol>
+ <li>Essayez d'ajouter la ligne suivante dans votre console JavaScript :
+  <pre class="brush: js">var personne2 = Object.create(personne1);</pre>
+ </li>
+ <li>Maintenant :
+  <pre class="brush: js">personne2.nom
+personne2.salutation()</pre>
+ </li>
+</ol>
+
+<p><code>personne2</code> a été créée à partir de <code>personne1</code> — et elle possède les mêmes propriétés. </p>
+
+<p>L'inconvénient de <code>create()</code> est qu'elle n'est pas supportée par IE8. Ainsi, utiliser les constructeurs peut s'avérer plus judicieux lorsqu'il s'agit de supporter les anciens navigateurs Web.</p>
+
+<p>Nous verrons les détails et les effets de <code>create()</code> plus tard.</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Cet article vous a donné un aperçu simplifié de la programmation orientée objet. Tout n'y a pas été détaillé mais ça vous permet de vous faire une idée. Nous avons vu comment JavaScript s'appuyait sur un certain nombre de principes orienté objet tout en ayant un certain nombre de particularités. Nous avons aussi vu comment implémenter des classes en JavaScript via la fonction constructeur ainsi que les différentes manières de générer des instances d'objets.</p>
+
+<p>Dans le prochain article, nous explorerons le monde des objets prototypes en JavaScript.</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}</p>
diff --git a/files/fr/learn/javascript/objects/json/index.html b/files/fr/learn/javascript/objects/json/index.html
new file mode 100644
index 0000000000..b06c79006d
--- /dev/null
+++ b/files/fr/learn/javascript/objects/json/index.html
@@ -0,0 +1,338 @@
+---
+title: Manipuler des données JSON
+slug: Learn/JavaScript/Objects/JSON
+tags:
+  - Apprendre
+  - Article
+  - Débutant
+  - JSON
+  - JavaScript
+  - Manuel
+  - Objets
+  - Tutoriel
+translation_of: Learn/JavaScript/Objects/JSON
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}</div>
+
+<p class="summary">Le JavaScript Object Notation (JSON) est un format standard utilisé pour représenter des données structurées de façon semblable aux objets Javascript. Il est habituellement utilisé pour structurer et transmettre des données sur des sites web (par exemple, envoyer des données depuis un serveur vers un client afin de les afficher sur une page web ou vice versa). Comme cette notation est extrêmement courante, cet article a pour but de vous donner les connaissances nécessaires pour travailler avec JSON en JavaScript, vous apprendre à analyser la syntaxe du JSON afin d'en extraire des données et écrire vos propres objets JSON.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prérequis :</th>
+   <td>Vocabulaire de base d'informatique, connaissances de base en HTML et CSS, connaissances de base en JavaScript (voir <a href="/en-US/docs/Learn/JavaScript/First_steps">Premiers pas</a> et <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Les blocs</a>) et en Javascript orienté objets (voir <a href="/en-US/docs/Learn/JavaScript/Object-oriented/Introduction">Introduction aux objets</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>Comprendre comment utiliser les données stockées dans un objet JSON, et créer vos propres objets JSON.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Plus_sérieusement_quest_ce_que_le_JSON">Plus sérieusement, qu'est ce que le JSON ?</h2>
+
+<p>{{glossary("JSON")}} est un format de données semblable à la syntaxe des objets JavaScript, qui a été popularisé par <a href="https://en.wikipedia.org/wiki/Douglas_Crockford">Douglas Crockford</a>. Malgré sa syntaxe très similaire à celle des objets littéraux JavaScript, JSON peut être utilisé indépendamment de ce langage et ainsi, de nombreux autres langages de programmation disposent de fonctionnalités permettant d'analyser la syntaxe du JSON et d'en générer.</p>
+
+<p>Le JSON se présente sous la forme  d'une chaîne de caractères —utile lorsque vous souhaitez transmettre les données sur un réseau. Il a donc besoin d'être converti en un objet JavaScript natif lorsque vous souhaitez accéder aux données. Ce n'est pas vraiment un souci puisque le JavaScript fournit un objet global <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON">JSON</a> disposant des méthodes pour assurer la conversion entre les deux.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Convertir une chaîne de caractères en un objet natif se nomme <strong>analyse syntaxique (parsage)</strong> tandis que le contraire porte le nom  de la <strong>linéarisation (stringification)</strong>.</p>
+</div>
+
+<p>Un objet JSON peut être stocké dans son propre fichier qui se présente simplement sous la forme d'un fichier texte avec l'extension <code>.json</code> et le {{glossary("MIME type")}} <code>application/json</code>.</p>
+
+<h3 id="Structure_du_JSON">Structure du JSON</h3>
+
+<p>Nous disions tout à l'heure qu'un objet JSON n'était ni plus ni moins qu'un objet Javascript tout à fait normal et c'est généralement le cas. Un objet JSON accepte comme valeur les mêmes types de données de base que tout autre objet Javascript — chaînes de caractères, nombres, tableaux, booléens et tout autre objet littéral. Cela vous permet de hiérarchiser vos données comme ceci :</p>
+
+<pre class="brush: json">{
+  "squadName": "Super hero squad",
+  "homeTown": "Metro City",
+  "formed": 2016,
+  "secretBase": "Super tower",
+  "active": true,
+  "members": [
+    {
+      "name": "Molecule Man",
+      "age": 29,
+      "secretIdentity": "Dan Jukes",
+      "powers": [
+        "Radiation resistance",
+        "Turning tiny",
+        "Radiation blast"
+      ]
+    },
+    {
+      "name": "Madame Uppercut",
+      "age": 39,
+      "secretIdentity": "Jane Wilson",
+      "powers": [
+        "Million tonne punch",
+        "Damage resistance",
+        "Superhuman reflexes"
+      ]
+    },
+    {
+      "name": "Eternal Flame",
+      "age": 1000000,
+      "secretIdentity": "Unknown",
+      "powers": [
+        "Immortality",
+        "Heat Immunity",
+        "Inferno",
+        "Teleportation",
+        "Interdimensional travel"
+      ]
+    }
+  ]
+}</pre>
+
+<p>Si nous chargeons cet objet dans un fichier Javascript au sein d'une variable appelée <code>superHeroes</code> par exemple, nous pouvons accéder à ses données de la même façon que nous l'avons fait dans l'article <a href="/fr/docs/Learn/JavaScript/Objects/Basics">Les bases de JavaScript orienté objets</a> à l'aide de la notation point / crochets. Par exemple :</p>
+
+<pre class="brush: js">superHeroes.hometown
+superHeroes['active']</pre>
+
+<p>Pour accéder aux données plus profondes de la hiérarchie, vous n'avez qu'à enchaîner à la fois les noms des propriétés et les indexes des tableaux. Par exemple, l'expression suivante pointe vers le troisième superpouvoir du second super héros présent dans la liste :</p>
+
+<pre class="brush: js">superHeroes['members'][1]['powers'][2]</pre>
+
+<ol>
+ <li>D'abord, nous partons de la variable — <code>superHeroes</code></li>
+ <li>À l'intérieur de laquelle nous désirons accéder à la propriété <code>members</code>, donc, nous tapons <code>["members"]</code>.</li>
+ <li><code>members</code> contient un tableau renfermant des objets. Nous désirons accéder au second de ces objets, donc nous utilisons <code>[1]</code>.</li>
+ <li>À l'intérieur de cet objet, nous souhaitons accéder à la propriété <code>powers</code>, donc, nous utilisons <code>["powers"]</code>.</li>
+ <li>Enfin, à l'intérieur de cette propriété <code>powers</code> nous trouvons un nouveau tableau qui contient les super pouvoirs de ce héros. Nous désirons obtenir le troisième, donc nous tapons <code>[2]</code>.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note </strong>: L'objet JSON vu ci-dessus est disponible au sein d'une variable dans notre exemple <a href="http://mdn.github.io/learning-area/javascript/oojs/json/JSONTest.html">JSONTest.html</a> (voir le <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/JSONTest.html">code source</a>). Essayez de le charger et d'accéder aux données en utilisant la console Javascript de votre navigateur.</p>
+</div>
+
+<h3 id="Des_tableaux_en_tant_que_JSON">Des tableaux en tant que JSON</h3>
+
+<p>Un peu plus haut, nous avons dit qu'un objet JSON n'était ni plus ni moins qu'un objet Javascript tout à fait normal et c'est généralement le cas. La raison pour laquelle nous avons dit "généralement le cas" est qu'un tableau peut également être un objet JSON valide, par exemple :</p>
+
+<pre class="brush: json">[
+  {
+    "name": "Molecule Man",
+    "age": 29,
+    "secretIdentity": "Dan Jukes",
+    "powers": [
+      "Radiation resistance",
+      "Turning tiny",
+      "Radiation blast"
+    ]
+  },
+  {
+    "name": "Madame Uppercut",
+    "age": 39,
+    "secretIdentity": "Jane Wilson",
+    "powers": [
+      "Million tonne punch",
+      "Damage resistance",
+      "Superhuman reflexes"
+    ]
+  }
+]</pre>
+
+<p>Le code ci dessus est une notation JSON parfaitement valide. Vous n'aurez qu'à accéder aux éléments de votre tableau en commençant avec un index, par exemple : <code>[0]["powers"][0]</code>.</p>
+
+<h3 id="Notes_diverses">Notes diverses</h3>
+
+<ul>
+ <li>Un objet JSON est uniquement un format de données — il ne contient que des propriétés mais pas de méthodes.</li>
+ <li>La notation JSON nécessite l'usage des guillemets pour être valide. Il est obligatoire d'utiliser des guillemets et non les apostrophes autour des chaînes de caractères et des noms de propriétés.</li>
+ <li>Une simple virgule ou un double point mal placé peut rendre votre fichier JSON invalide et non fonctionnel. Soyez très attentif aux données que vous utilisez (bien que le JSON généré automatiquement par un programme sera moins enclin à contenir des erreurs, à partir du moment où le programme est codé correctement). Vous pouvez utiliser une application comme <a href="http://jsonlint.com/">JSONLint</a> pour valider votre code JSON.</li>
+ <li>Dans l'absolu, le JSON peut prendre la forme de n'importe quel type de données qui serait valide pour être contenu dans du JSON et non juste des tableaux ou des objets. Ainsi, par exemple, une simple chaîne de caractères ou un nombre serait un objet JSON valide.</li>
+ <li>Contrairement au JavaScript dans lequel les propriétés (<em>keys</em>) non entourées de guillemets peuvent être utilisées, en JSON, seules les chaînes de caractères entourées de guillemets peuvent être utilisées en tant que propriétés.</li>
+</ul>
+
+<h2 id="Activité_Manipuler_le_JSON_au_travers_dun_exemple">Activité : Manipuler le JSON au travers d'un exemple</h2>
+
+<p>Allez ! Un petit exemple pour voir comment nous pouvons nous servir de données JSON sur un site web.</p>
+
+<h3 id="Lançons_nous">Lançons nous</h3>
+
+<p>Pour commencer, faites une copie locale de nos fichiers <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes.html">heroes.html</a> et <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/style.css">style.css</a>. Le dernier contient simplement quelques instructions CSS pour la mise en forme de notre page alors que le premier n'est ni plus ni moins qu'un squelette HTML de base :</p>
+
+<pre class="brush: html">&lt;header&gt;
+&lt;/header&gt;
+
+&lt;section&gt;
+&lt;/section&gt;</pre>
+
+<p>Nous trouvons également un élément {{HTMLElement("script")}} dans lequel nous écrirons le code Javascript de cet exercice. Pour le moment, il ne contient que deux lignes destinées à récuperer les éléments {{HTMLElement("header")}} et {{HTMLElement("section")}} pour les stocker dans des variables :</p>
+
+<pre class="brush: js">var header = document.querySelector('header');
+var section = document.querySelector('section');</pre>
+
+<p>Nos données JSON sont disponibles sur notre GitHub ici : <a href="https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json">https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json</a>.</p>
+
+<p>Nous souhaitons les récupérer et, après quelques manipulations du DOM, les afficher comme ceci :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13857/json-superheroes.png" style="display: block; margin: 0 auto;"></p>
+
+<h3 id="Chargeons_notre_JSON">Chargeons notre JSON</h3>
+
+<p>Pour charger nos données JSON, nous allons utiliser l'API {{domxref("XMLHttpRequest")}} (qu'on appelle plus couramment <strong>XHR</strong>). Il s'agit d'un objet JavaScript extrêmement utile qui nous permet de construire une requête afin d'interroger un serveur pour obtenir des ressources diverses (images, texte, JSON, ou n'importe quel extrait HTML) le tout en Javascript. En d'autres termes, cela nous permet de mettre à jour de petites sections de contenu sans avoir à recharger notre page toute entière. Ceci conduit à des pages web plus réactives. Mais même si le sujet est très tentant, il dépasse largement l'objet de cet article pour être expliqué plus en détails.</p>
+
+<ol>
+ <li>Donc, pour commencer, nous allons charger l'URL du fichier JSON que nous voulons récupérer dans une variable. Aussi, ajouter la ligne suivante à votre code Javascript :
+  <pre class="brush: js">var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';</pre>
+ </li>
+ <li>Afin de créer une requête, nous avons besoin d'instancier un nouvel objet <code>XMLHttpRequest</code> à partir de son constructeur en utilisant le mot clé new. Ajouter la ligne suivante à votre script :
+  <pre class="brush: js">var request = new XMLHttpRequest();</pre>
+ </li>
+ <li>Maintenant, nous avons besoin d'ouvrir une nouvelle requête grâce à la méthode <code><a href="/en-US/docs/Web/API/XMLHttpRequest/open">open()</a></code>. Ajoutez la ligne suivante :
+  <pre class="brush: js">request.open('GET', requestURL);</pre>
+
+  <p>Cette méthode prend au moins deux paramètres — il y a d'autres paramètres optionnels disponibles.  Deux suffiront pour notre exemple :</p>
+
+  <ul>
+   <li>La méthode HTTP à utiliser sur le réseau pour notre requête. Dans notre cas, la méthode <code><a href="/en-US/docs/Web/HTTP/Methods/GET">GET</a></code> est appropriée dans la mesure où nous voulons simplement récupérer quelques données.</li>
+   <li>L'URL où adresser notre requête — il s'agit de l'URL du fichier JSON dont nous parlions tout à l'heure.</li>
+  </ul>
+ </li>
+ <li>Ensuite, ajoutez les deux lignes suivantes — ici, nous attribuons la valeur <code>'json'</code><strong> </strong>à  <code><a href="/en-US/docs/Web/API/XMLHttpRequest/responseType">responseType</a></code>, signalant ainsi au serveur que nous attendons une réponse au format JSON. Puis, nous envoyons notre requête à l'aide de la méthode <code><a href="/en-US/docs/Web/API/XMLHttpRequest/send">send()</a></code> :
+  <pre class="brush: js">request.responseType = 'json';
+request.send();</pre>
+ </li>
+ <li>La dernière partie de cette section concerne la réponse du serveur et son traitement. Ajoutez les lignes suivantes à la fin de votre code :
+  <pre class="brush: js">request.onload = function() {
+  var superHeroes = request.response;
+  populateHeader(superHeroes);
+  showHeroes(superHeroes);
+}</pre>
+ </li>
+</ol>
+
+<p>Ici, nous stockons la réponse à notre requête (disponible au travers de la propriété <code><a href="/en-US/docs/Web/API/XMLHttpRequest/response">response</a></code>) dans la variable <code>superHeroes</code> ; cette variable contiendra désormais l'objet JavaScript basé sur le JSON ! Nous passerons ensuite cet objet en paramètre à deux fonctions — la première remplira le &lt;<code>header&gt;</code> avec les données correspondantes tandis que la seconde créera une carte d'identité pour chaque héros de l'équipe et l'ajoutera dans la <code>&lt;section&gt;</code>.</p>
+
+<p>Nous avons encapsulé ce code dans un gestionnaire d'évènements qui s'exécutera quand l'évènement load sera déclenché sur l'objet request (voir <code><a href="/en-US/docs/Web/API/XMLHttpRequestEventTarget/onload">onload</a></code>) — simplement parce que l'évènement load est déclenché quand une réponse a été renvoyée avec succès ; en procédant de la sorte, nous serons certains que la propriété <code>request.response</code> sera disponible au moment où nous essayerons d'en faire quelque chose.</p>
+
+<h3 id="Remplissage_de_len-tête">Remplissage de l'en-tête</h3>
+
+<p>Maintenant que nous avons récupéré et converti en objet JavaScript nos données JSON, il est temps d'en faire bon usage : implémentons donc les deux fonctions évoquées ci-dessus. Avant tout, ajoutons les lignes suivantes en dessous de notre code :</p>
+
+<pre class="brush: js">function populateHeader(jsonObj) {
+  var myH1 = document.createElement('h1');
+  myH1.textContent = jsonObj['squadName'];
+  header.appendChild(myH1);
+
+  var myPara = document.createElement('p');
+  myPara.textContent = 'Hometown: ' + jsonObj['homeTown'] + jsonObj['formed'];
+  header.appendChild(myPara);
+}</pre>
+
+<p>Nous avons appelé le paramètre de cette fonction <code>jsonObj</code>  afin de garder en tête que cet objet JavaScript provient du JSON. Ici, nous créons tout d'abord un élément {{HTMLElement("h1")}} à l'aide de <code><a href="/en-US/docs/Web/API/Document/createElement">createElement()</a></code>, nous fixons son <code><a href="/en-US/docs/Web/API/Node/textContent">textContent</a></code> à la valeur de la propriété <code>squadName</code> de l'objet, puis nous l'ajoutons à l'en-tête en utilisant <code><a href="/en-US/docs/Web/API/Node/appendChild">appendChild()</a></code>. Ensuite, nous faisons quelque chose de relativement similaire avec un élément paragraphe : nous le créons, fixons son contenu et l'ajoutons à l'en-tête. La seule différence est que pour son contenu, nous avons concaténé la chaîne de caractère <code>homeTown</code> et la propriété <code>formed</code> de l'objet.</p>
+
+<h3 id="Création_des_fiches_des_héros">Création des fiches des héros</h3>
+
+<p>Maintenant, ajoutons la fonction suivante qui crée et affiche les fiches de nos super-héros en dessous de notre code :</p>
+
+<pre class="brush: js">function showHeroes(jsonObj) {
+  var heroes = jsonObj['members'];
+
+  for (var i = 0; i &lt; heroes.length; i++) {
+    var myArticle = document.createElement('article');
+    var myH2 = document.createElement('h2');
+    var myPara1 = document.createElement('p');
+    var myPara2 = document.createElement('p');
+    var myPara3 = document.createElement('p');
+    var myList = document.createElement('ul');
+
+    myH2.textContent = heroes[i].name;
+    myPara1.textContent = 'Secret identity: ' + heroes[i].secretIdentity;
+    myPara2.textContent = 'Age: ' + heroes[i].age;
+    myPara3.textContent = 'Superpowers:';
+
+    var superPowers = heroes[i].powers;
+    for (var j = 0; j &lt; superPowers.length; j++) {
+      var listItem = document.createElement('li');
+      listItem.textContent = superPowers[j];
+      myList.appendChild(listItem);
+    }
+
+    myArticle.appendChild(myH2);
+    myArticle.appendChild(myPara1);
+    myArticle.appendChild(myPara2);
+    myArticle.appendChild(myPara3);
+    myArticle.appendChild(myList);
+
+    section.appendChild(myArticle);
+  }
+}</pre>
+
+<p>Pour commencer, on stocke la propriété <code>members</code> de l'objet JavaScript dans une nouvelle variable. Ce tableau contient plusieurs objets contenant les informations relatives à chaque héros.</p>
+
+<p>Maintenant, on utilise une <a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Looping_code">boucle for</a> pour parcourir chaque object du tableau. Pour chaque cas, il faut :</p>
+
+<ol>
+ <li>Créer plusieurs nouveaux éléments : un <code>&lt;article&gt;</code>, un <code>&lt;h2&gt;</code>, trois <code>&lt;p&gt;</code>s, et un <code>&lt;ul&gt;</code>.</li>
+ <li>Mettre le <code>name</code> du héros actuel dans le <code>&lt;h2&gt;</code>.</li>
+ <li>Remplir les trois paragraphes avec leur <code>secretIdentity</code>, leur <code>age</code>, et une ligne nommée "Superpowers:" pour présenter la liste des super-pouvoirs.</li>
+ <li>Stocker la propriété <code>powers</code> dans une nouvelle variable nommée <code>superPowers</code> contenant un tableau listant les super-pouvoirs du héros actuel.</li>
+ <li>Utiliser une autre boucle <code>for</code> pour parcourir les super-pouvoirs du héros actuel — créer pour chacun d'entre eux un élément <code>&lt;li&gt;</code>, y placer le super-pouvoir et placer le <code>listItem</code> dans l'élément <code>&lt;ul&gt;</code> (<code>myList</code>) en utilisant <code>appendChild()</code>.</li>
+ <li>Pour finir, on ajoute <code>&lt;h2&gt;</code>, les <code>&lt;p&gt;</code>s et <code>&lt;ul&gt;</code> à <code>&lt;article&gt;</code> (<code>myArticle</code>), et on ajoute <code>&lt;article&gt;</code> à <code>&lt;section&gt;</code>. L'ordre d'ajout est important, c'est l'ordre dans lequel les éléments seront affichés dans le HTML.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note </strong>: Si vous ne parvenez pas à faire fonctionner l'exemple, consultez notre code source <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes-finished.html">heroes-finished.html</a> (ou regardez-le <a href="http://mdn.github.io/learning-area/javascript/oojs/json/heroes-finished.html">en action</a>.)</p>
+</div>
+
+<div class="note">
+<p><strong>Note </strong>: Si vous comprenez difficilement la notation avec un point/une accolade utilisée pour accéder au JSON, ouvrez le fichier <a href="http://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json">superheroes.json</a> dans un nouvel onglet ou dans votre éditeur de texte et consultez-le pendant la lecture de notre code Javascript. Vous pouvez également vous reporter à notre article <a href="/fr/docs/Learn/JavaScript/Objects/Basics">Les bases du JavaScript orienté objet</a> pour obtenir plus de détails sur la notation avec un point et avec une accolade.</p>
+</div>
+
+<h2 id="Conversion_entre_objets_et_textes">Conversion entre objets et textes</h2>
+
+<p>Dans l'exemple ci-dessus, accéder au JSON est simple, il suffit de définir la requête XHR pour renvoyer la réponse au format JSON en écrivant :</p>
+
+<pre class="brush: js">request.responseType = 'json';</pre>
+
+<p>Mais on n'a pas toujours cette chance — il est possible de recevoir la réponse JSON sous la forme d'une chaîne de caractères et il faut alors la convertir en objet. À l'inverse, lorsqu'on veut envoyer un objet JavaScript à travers le réseau il faut au préalable le convertir en JSON (une chaîne de caractères). Heureusement, ces deux problèmes sont tellement communs dans le développement web qu'un objet <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/JSON">JSON</a> interne a été ajouté aux navigateurs depuis longtemps, contenant les deux méthodes suivantes :</p>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse">parse()</a></code> qui accepte un objet JSON sous la forme d'une chaîne de caractères en paramètre et renvoie l'objet JavaScript correspondant.</li>
+ <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify">stringify()</a></code> qui accepte un objet JavaScript  en paramètre et renvoie son équivalent sous la forme d'une chaîne de caractères JSON.</li>
+</ul>
+
+<p>Vous pouvez voir la première méthode en action dans notre exemple <a href="http://mdn.github.io/learning-area/javascript/oojs/json/heroes-finished-json-parse.html">heroes-finished-json-parse.html</a> (voir le <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes-finished-json-parse.html">code source</a>) — C'est la même chose que pour l'exemple que nous avons écrit un peu plus tôt, à ceci près qu'on indique à la requête XHR de renvoyer la réponse en JSON sous forme de texte avant d'utiliser la méthode <code>parse()</code> pour la convertir en objet JavaScript. La partie du code correspondante se trouve ci-dessous :</p>
+
+<pre class="brush: js">request.open('GET', requestURL);
+request.responseType = 'text'; // now we're getting a string!
+request.send();
+
+request.onload = function() {
+  var superHeroesText = request.response; // get the string from the response
+  var superHeroes = JSON.parse(superHeroesText); // convert it to an object
+  populateHeader(superHeroes);
+  showHeroes(superHeroes);
+}</pre>
+
+<p>Comme vous pouvez le deviner, <code>stringify()</code> fait exactement le contraire. Essayez d'entrer les lignes ci-dessous une par une dans la console Javascript de votre navigateur pour voir la méthode en action :</p>
+
+<pre class="brush: js">var myJSON = { "name": "Chris", "age": "38" };
+myJSON
+var myString = JSON.stringify(myJSON);
+myString</pre>
+
+<p>On commence par créer un objet JavaScript puis on vérifie son contenu avant de le convertir en chaîne de caractères JSON avec <code>stringify()</code> — en sauvegardant au passage le résultat dans une nouvelle variable avant d'effectuer à nouveau une vérification du contenu.</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Dans cet article, nous vous donnons un manuel simple pour utiliser le JSON dans vos programmes, incluant les méthodes de  création et d'analyse syntaxique (parsage)  du JSON  et d'accès aux données qu'il contient. Dans le prochain article, nous débuterons l'apprentissage du Javascript orienté objet.</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON">La page de référence sur l'objet JSON</a></li>
+ <li><a href="/en-US/docs/Web/API/XMLHttpRequest">La page de référence sur l'objet XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Utiliser XMLHttpRequest</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Methods">Les méthodes de requêtes HTTP </a></li>
+ <li><a href="http://json.org">Le site web officiel  avec un lien vers les normes de l' ECMA</a></li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}</p>
diff --git a/files/fr/learn/javascript/objects/la_construction_d_objet_en_pratique/index.html b/files/fr/learn/javascript/objects/la_construction_d_objet_en_pratique/index.html
new file mode 100644
index 0000000000..a2ab4270eb
--- /dev/null
+++ b/files/fr/learn/javascript/objects/la_construction_d_objet_en_pratique/index.html
@@ -0,0 +1,316 @@
+---
+title: La construction d'objet en pratique
+slug: Learn/JavaScript/Objects/la_construction_d_objet_en_pratique
+tags:
+  - Apprendre
+  - Article
+  - Canvas
+  - Débutant
+  - JavaScript
+  - Manuel
+  - Objets
+  - Tutoriel
+translation_of: Learn/JavaScript/Objects/Object_building_practice
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects/Adding_bouncing_balls_features", "Learn/JavaScript/Objects")}}</div>
+
+<p class="summary">Dans l'article précédent, nous avons passé en revue l'essentiel de la théorie de l'objet Javascript et sa syntaxe détaillée, vous donnant ainsi des bases solides sur lesquelles commencer. Dans le présent article nous plongeons dans un exercice pratique afin d'accroître votre savoir-faire dans la construction d'objets entièrement personnalisés donnant un résultat plutôt amusant et très coloré.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pré-requis :</th>
+   <td>
+    <p>Connaissance basique de l'informatique, une compréhension basique du HTML et du CSS, une familiarité avec  les bases du JavaScript (voir <a href="/en-US/docs/Learn/JavaScript/First_steps">Premiers pas</a> et <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Les blocs de construction</a>) et les bases de la programmation objet en JavaScript (voir <a href="/en-US/docs/Learn/JavaScript/Object-oriented/Introduction">Introduction aux objets</a>). </p>
+   </td>
+  </tr>
+  <tr>
+   <th scope="row">Objectif :</th>
+   <td>
+    <p>Acquérir plus de pratique dans l'utilisation des objets et des techniques orientées objet dans un contexte "monde réel".</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Faisons_bondir_quelques_balles">Faisons bondir quelques balles</h2>
+
+<p>Dans cet article, nous écrirons une démo classique de "balles bondissantes", pour vous montrer à quel point les objets peuvent être utiles en JavaScript. Nos petites balles bondiront partout sur notre écran et changeront de couleurs lorsqu'elles se toucheront. L'exemple finalisé ressemblera un peu à ceci : </p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13865/bouncing-balls.png" style="display: block; height: 614px; margin: 0px auto; width: 800px;"></p>
+
+<ol>
+</ol>
+
+<p>Cet exemple utilise l'<a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">API Canvas </a> pour dessiner les balles sur l'écran, et l'API <a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame</a>  pour animer l'ensemble de l'affichage — Nul besoin d'avoir une connaissance préalable de ces APIs, nous expérons qu'une fois cet article terminé, vous aurez envie d'en faire une exploration approfondie. Tout le long du parcours nous utiliserons certains objets formidables et vous montrerons nombre de techniques sympathiques comme des balles bondissantes sur les murs et la vérification de balles qui s'entrechoquent (encore connue sous l'appelation <strong>détection de collision</strong>).</p>
+
+<p>Pour commencer, faites des copies locales de nos fichiers <code><a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/index.html">index.html</a></code>, <code><a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/style.css">style.css</a></code>, et <code><a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/main.js">main.js</a></code>. Ces fichiers contiennent respectivement :</p>
+
+<ol>
+ <li>Un document  HTML très simple contenant un élément {{HTMLElement("h1")}} , un élément {{HTMLElement("canvas")}} pour dessiner nos balles dessus et des élements  pour appliquer notre CSS et notre JavaScript à notre HTML ;</li>
+ <li>Quelques styles très simples qui servent principalement à mettre en forme et placer le <code>&lt;h1&gt;</code>, et se débarasser de toutes barres de défilement ou de marges autour du pourtour de notre page (afin que cela paraisse plus sympathique et élégant) ;</li>
+ <li>Un peu de JavaScript qui sert à paramétrer l'élément  <code>&lt;canvas&gt;</code> et fournir les fonctions globalles que nous utiliserons.</li>
+</ol>
+
+<p>La première partie du script ressemble à ceci :</p>
+
+<pre class="brush: js">const canvas = document.querySelector('canvas');
+
+const ctx = canvas.getContext('2d');
+
+const width = canvas.width = window.innerWidth;
+const height = canvas.height = window.innerHeight;</pre>
+
+<p>Ce script prend une référence à l'élément  <code>&lt;canvas&gt;</code> et ensuite invoque la méthode  <code><a href="/en-US/docs/Web/API/HTMLCanvasElement/getContext">getContext()</a></code> sur lui, nous donnant ainsi un contexte sur lequel nous pouvons commencer à dessiner. La variable résultante  (<code>ctx</code>)  est l'objet qui représente directement la surface du Canvas où nous pouvons dessiner et qui nous permet de dessiner des formes 2D sur ce dernier. </p>
+
+<p>Après, nous configurons  les variables <code>width</code> (largeur) et <code>height</code>(hauteur),  et la largeur et la hauteur de l'élément canvas (représentés par les propriétés  <code>canvas.width</code> et <code>canvas.height</code> ) afin qu'elles soient identiques à la fenêtre du navigateur (la surface sur laquelle apparaît la page web— Ceci peut être tiré des propriétés {{domxref("Window.innerWidth")}} et {{domxref("Window.innerHeight")}}).</p>
+
+<p>Vous verrez qu'ici nous enchaînons les assignations des valeurs des différentes variables ensemble à des fins de rapidité. Ceci est parfaitement autorisé.</p>
+
+<p>Le dernier morceau du script ressemble à ceci :</p>
+
+<pre class="brush: js">function random(min, max) {
+  var num = Math.floor(Math.random() * (max - min + 1)) + min;
+  return num;
+}</pre>
+
+<p>Cette fonction prend deux nombres comme arguments, et renvoie un nombre compris entre les deux. </p>
+
+<h2 id="Modéliser_une_balle_dans_notre_programme">Modéliser une balle dans notre programme</h2>
+
+<p>Notre programme met en œuvre beaucoup de balles bondissant partout sur l'écran. Comme nos balles se comporteront toutes de la même façon, cela semble tout à fait sensé de les représenter avec un objet. Commençons donc en ajoutant le constructeur suivant à la fin de notre code.</p>
+
+<pre class="brush: js">function Ball(x, y, velX, velY, color, size) {
+  this.x = x;
+  this.y = y;
+  this.velX = velX;
+  this.velY = velY;
+  this.color = color;
+  this.size = size;
+}</pre>
+
+<p>Ici, nous incluons des paramètres qui définissent  des propriétés dont chaque balle aura besoin pour fonctionner dans notre programme :</p>
+
+<ul>
+ <li>Les coordonnées <code>x</code> et <code>y</code>  — les coordonnées verticales et horizontales où la balle débutera sur l'écran. Ceci peut se trouver entre 0 (coin à gauche en haut) et la valeur de la hauteur et de la largeur de la fenêtre du navigateur (coin en bas à droite).</li>
+ <li>Une vitesse horizontale et verticale (<code>velX</code> et <code>velY</code>) — à chaque balle est attribuée une vitesse horizontale et verticale; en termes réels ces valeurs seront régulièrement ajoutéés aux valeurs de la coordonnée <code>x</code>/<code>y</code> quand nous commencerons à animer les balles, afin de les faire bouger d'autant sur chaque vignette (frame).</li>
+ <li><code>color</code> — chaque balle a une couleur.</li>
+ <li><code>size</code> — chaque balle a une taille — ce sera son rayon mesuré en pixels.</li>
+</ul>
+
+<p>Ceci règle le problème des propriétés mais qu'en est il des méthodes ? Nous voulons maintenant amener nos balles à faire quelque chose dans notre programme.</p>
+
+<h3 id="Dessiner_la_balle">Dessiner la balle</h3>
+
+<p>En premier lieu ajoutez la méthode <code>draw()</code> au <code>prototype</code> de <code>Ball()</code> :</p>
+
+<pre class="brush: js">Ball.prototype.draw = function() {
+  ctx.beginPath();
+  ctx.fillStyle = this.color;
+  ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
+  ctx.fill();
+}</pre>
+
+<p>En utilisant cette fonction, nous pouvons dire à notre balle de se dessiner sur l'écran en appelant une série de membres du contexte 2D du canvas que nous avons défini plus tôt  (<code>ctx</code>). Le contexte est comme le papier et maintenant nous allons demander à notre stylo d'y dessiner quelque chose :</p>
+
+<ul>
+ <li>Premièrement, nous utilisons <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/beginPath">beginPath()</a></code> pour spécifier que nous voulons dessiner une forme sur le papier.</li>
+ <li>Ensuite, nous utilisons <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle">fillStyle</a></code> pour définir de quelle couleur nous voulons que la forme soit — nous lui attribuons la valeur de la propriété <code>color</code> de notre balle.</li>
+ <li>Après, nous utilisons la méthode <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/arc">arc()</a></code> pour tracer une forme en arc sur le papier. Ses paramètres sont :
+  <ul>
+   <li>Les positions <code>x</code> et <code>y</code> du centre de l'arc — nous specifions donc les propriétés <code>x</code> et <code>y </code>de notre balle.</li>
+   <li>Le rayon de l'arc — nous specifions la propriété <code>size</code> de notre balle.</li>
+   <li>Les deux derniers paramètres spécifient l'intervalle de début et de fin en degrés pour dessiner l'arc. Ici nous avons spécifié 0 degrés et <code>2 * PI </code>qui est l'équivalent de 360 degrés en radians (malheureusement  vous êtes obligés  de spécifier ces valeurs en radians et non en degrés). Cela nous donne un cercle complet. Si vous aviez spécifié seulement  <code>1 * PI</code>, vous auriez eu un demi-cercle (180 degrés).</li>
+  </ul>
+ </li>
+ <li>En dernière position nous utilisons la méthode <code><a href="/en-US/docs/Web/API/CanvasRenderingContext2D/fill">fill()</a></code> qui est habituellement utilisée pour spécifier que nous souhaitons mettre fin au dessin que nous avons commencé avec <code>beginPath()</code>, et remplir la surface délimitée avec la couleur que nous avions spécifiée plus tôt avec <code>fillStyle</code>.</li>
+</ul>
+
+<p>Vous pouvez déjà commencer à tester votre objet.</p>
+
+<ol>
+ <li>Sauvegardez le code et chargez le fichier html dans un navigateur.</li>
+ <li>Ouvrez la console JavaScript du navigateur et actualisez la page afin que la taille du canvas change et prenne la petite taille restante de la fenêtre lorsque la console est ouverte.</li>
+ <li>Tapez dans la console ce qui suit afin de créer une nouvelle instance de balle :
+  <pre class="brush: js">let testBall = new Ball(50, 100, 4, 4, 'blue', 10);</pre>
+ </li>
+ <li>Essayez d'appeler ses membres :
+  <pre class="brush: js">testBall.x
+testBall.size
+testBall.color
+testBall.draw()</pre>
+ </li>
+ <li>Lorsque vous entrerez la dernière ligne, vous devriez voir la balle se dessiner quelque part sur votre canvas.</li>
+</ol>
+
+<h3 id="Mettre_à_jour_les_données_de_la_balle">Mettre à jour les données de la balle</h3>
+
+<p>Nous pouvons dessiner la balle dans n'importe quelle position, mais actuellement pour commencer à la bouger nous aurons besoin d'une sorte de fonction de mise à jour. Insérez donc le code suivant à la fin de votre fichier JavaScript pour ajouter une méthode <code>update()</code> au <code>prototype</code> de <code>Ball()</code>:</p>
+
+<pre class="brush: js">Ball.prototype.update = function() {
+  if ((this.x + this.size) &gt;= width) {
+    this.velX = -(this.velX);
+  }
+
+  if ((this.x - this.size) &lt;= 0) {
+    this.velX = -(this.velX);
+  }
+
+  if ((this.y + this.size) &gt;= height) {
+    this.velY = -(this.velY);
+  }
+
+  if ((this.y - this.size) &lt;= 0) {
+    this.velY = -(this.velY);
+  }
+
+  this.x += this.velX;
+  this.y += this.velY;
+}</pre>
+
+<p>Les quatre premières parties de la fonction vérifient si la balle a atteint le rebord  du canvas. Si c'est le cas, nous inversons la polarité de la vitesse appropriée pour faire bouger la balle dans le sens opposé. Donc par exemple, si la balle se déplaçait vers le haut (positif <code>velY</code>) alors la vitesse verticale est changée afin qu'elle commence à bouger plutôt vers le bas (negatif <code>velY</code>).</p>
+
+<p>Dans les quatre cas nous :</p>
+
+<ul>
+ <li>Verifions si la coordonnée <code>x</code> est plus grande que la largeur du canvas (la balle est en train de sortir du côté droit).</li>
+ <li>Verifions si la coordonnée <code>x</code> est plus petite que 0 (la balle est en train de sortir du côté gauche).</li>
+ <li>Verifions si la coordonnée <code>y</code> est plus grande que la hauteur du canvas (la balle est en train de sortir par le bas).</li>
+ <li>Verifions si la coordonnée <code>y</code> est plus petite que 0 (la balle est en train de sortir par le  haut).</li>
+</ul>
+
+<p>Dans chaque cas, nous incluons la taille <code>size</code> de la balle dans les calculs parce que les coordonnées  <code>x</code>/<code>y</code>  sont situées au centre de la balle mais nous voulons que le pourtour de la balle rebondisse sur le rebord  — nous ne voulons pas que la balle sorte à moité hors de l'écran avant de commencer à rebondir vers l'arrière.</p>
+
+<p>Les deux dernières lignes ajoutent la valeur <code>velX</code> à la coordonnée <code>x</code> et la valeur <code>velY</code> à la coordonnée <code>y</code> — la balle est en effet mise en mouvement chaque fois que cette méthode est invoquée.</p>
+
+<p><span class="short_text" id="result_box" lang="fr"><span>Cela suffira pour l'instant,</span> <span>passons à l'animation !</span></span></p>
+
+<h2 id="Animer_la_balle">Animer la balle</h2>
+
+<p><span id="result_box" lang="fr"><span>Maintenant, rendons cela amusant.</span> <span>Nous allons commencer à ajouter des balles au canvas et à les animer.</span></span></p>
+
+<ol>
+ <li><span id="result_box" lang="fr"><span>Tout d'abord, nous avons besoin d'un endroit où stocker toutes nos balles.</span> <span>Le tableau suivant fera ce travail </span></span>— <span lang="fr"><span>ajoutez-le au bas de votre code maintenant :</span></span>
+
+  <pre class="brush: js">let balls = [];
+</pre>
+
+  <pre>while (balls.length &lt; 25) {
+  let size = random(10,20);
+  let ball = new Ball(
+    // ball position always drawn at least one ball width
+    // away from the edge of the canvas, to avoid drawing errors
+    random(0 + size,width - size),
+    random(0 + size,height - size),
+    random(-7,7),
+    random(-7,7),
+    'rgb(' + random(0,255) + ',' + random(0,255) + ',' + random(0,255) +')',
+    size
+  );
+
+  balls.push(ball);
+}</pre>
+  <span>Tous les programmes qui animent les choses impliquent généralement une boucle d'animation, qui sert à mettre à jour les informations dans le programme et à restituer ensuite la vue résultante sur chaque image de l'animation.</span> <span>C'est la base de la plupart des jeux et autres programmes similaires.</span></li>
+ <li><span id="result_box" lang="fr"><span>Ajoutez ce qui suit au bas de votre code maintenant :</span></span>
+  <pre class="brush: js">function loop() {
+  ctx.fillStyle = 'rgba(0, 0, 0, 0.25)';
+  ctx.fillRect(0, 0, width, height);
+
+  for (let i = 0; i &lt; balls.length; i++) {
+    balls[i].draw();
+    balls[i].update();
+  }
+
+  requestAnimationFrame(loop);
+}</pre>
+
+  <p>Notre fonction <code>loop()</code> fonctionne comme suit :</p>
+
+  <ul>
+   <li><span id="result_box" lang="fr"><span>On définit la couleur de remplissage du canvas en noir semi-transparent, puis dessine un rectangle de couleur sur toute la largeur et la hauteur du canvas, en utilisant <code>fillRect()</code> (les quatre paramètres fournissent une coordonnée de départ et une largeur et une hauteur pour le rectangle dessiné</span> <span>).</span> <span>Cela sert à masquer le dessin de l'image précédente avant que la suivante ne soit dessinée.</span> <span>Si vous ne faites pas cela, vous verrez juste de longs serpents se faufiler autour de la toile au lieu de balles qui bougent !</span> <span>La couleur du remplissage est définie sur semi-transparent, <code>rgba (0,0,0,.25)</code>, pour permettre aux quelques images précédentes de briller légèrement, produisant les petites traînées derrière les balles lorsqu'elles se déplacent.</span> <span>Si vous avez changé 0.25 à 1, vous ne les verrez plus du tout.</span> <span>Essayez de faire varier ce dernier nombre (entre 0 et 1) pour voir l'effet qu'il a.</span></span></li>
+   <li><span id="result_box" lang="fr"><span>On crée un nouvel objet <code>Ball()</code> avec des attributs générées aléatoirement grâce à la fonction <code>random()</code>, puis on ajoute l'objet au tableau, mais seulement lorsque le nombre de balles dans le tableau est inférieur à 25. Donc</span> <span>quand on a 25 balles à l'écran, plus aucune balle supplémentaire n'apparaît.</span> <span>Vous pouvez essayer de faire varier le nombre dans <code>balls.length &lt;25</code> pour obtenir plus, ou moins de balles à l'écran.</span> <span>En fonction de la puissance de traitement de votre ordinateur / navigateur, spécifier plusieurs milliers de boules peut ralentir l'animation de façon très significative !</span></span></li>
+   <li><span id="result_box" lang="fr"><span>Le programme boucle à travers tous les objets du tableau sur chacun desquels il exécute la fonction <code>draw()</code> et <code>update()</code> pour dessiner à l'écran chaque balle et faire les mise à jour de chaque attribut vant le prochain rafraîchissement.</span></span></li>
+   <li><span id="result_box" lang="fr"><span>Exécute à nouveau la fonction à l'aide de la méthode <code>requestAnimationFrame()</code> </span></span>—<span lang="fr"><span> lorsque cette méthode est exécutée en permanence et a reçu le même nom de fonction, elle exécute cette fonction un nombre défini de fois par seconde pour créer une animation fluide.</span> <span>Cela se fait généralement de manière récursive </span></span>—<span lang="fr"><span> ce qui signifie que la fonction s'appelle elle-même à chaque fois qu'elle s'exécute, de sorte qu'elle sera répétée encore et encore.</span></span></li>
+  </ul>
+ </li>
+ <li>Finallement mais non moins important, ajoutez la ligne suivante au bas de votre code — nous devons appeler la fonction une fois pour démarrer l'animation.
+  <pre class="brush: js">loop();</pre>
+ </li>
+</ol>
+
+<p>Voilà pour les bases — <span id="result_box" lang="fr"><span>essayez d'enregistrer et de rafraîchir pour tester vos balles bondissantes!</span></span></p>
+
+<h2 id="Ajouter_la_détection_de_collision">Ajouter la détection de collision</h2>
+
+<p><span id="result_box" lang="fr"><span>Maintenant, pour un peu de plaisir, ajoutons une détection de collision à notre programme, afin que nos balles sachent quand elles ont frappé une autre balle.</span></span></p>
+
+<ol>
+ <li><span id="result_box" lang="fr"><span>Tout d'abord, ajoutez la définition de méthode suivante ci-dessous où vous avez défini la méthode <code>update()</code> (c'est-à-dire le bloc <code>Ball.prototype.update</code>).</span></span>
+
+  <pre class="brush: js">Ball.prototype.collisionDetect = function() {
+  for (let j = 0; j &lt; balls.length; j++) {
+    if (!(this === balls[j])) {
+      const dx = this.x - balls[j].x;
+      const dy = this.y - balls[j].y;
+      const distance = Math.sqrt(dx * dx + dy * dy);
+
+      if (distance &lt; this.size + balls[j].size) {
+        balls[j].color = this.color = 'rgb(' + random(0, 255) + ',' + random(0, 255) + ',' + random(0, 255) +')';
+      }
+    }
+  }
+}</pre>
+
+  <p><span id="result_box" lang="fr"><span>Cette méthode est un peu complexe, donc ne vous inquiétez pas si vous ne comprenez pas exactement comment cela fonctionne pour le moment.</span> Regardons cela pas-à-pas<span> :</span></span></p>
+
+  <ul>
+   <li><span id="result_box" lang="fr"><span>Pour chaque balle <em>b</em>, nous devons vérifier chaque autre balle pour voir si elle est entrée en collision avec <em>b</em>.</span> <span>Pour ce faire, on inspecte toutes les balles du tableau</span></span> <code>balls[]</code> dans une boucle <code>for</code>.</li>
+   <li><span id="result_box" lang="fr"><span>Immédiatement à l'intérieur de cette boucle <code>for</code>, une instruction <code>if</code> vérifie si la balle courante  <em>b'</em> , inspectée dans la boucle, n'est égale à la balle <em>b. Le code correspondant est :  </em><code><em>b</em>'!== <em>b</em></code></span></span><span lang="fr"><span><em>. </em>En effet,</span> n<span>ous ne voulons pas vérifier si une balle <em>b</em> est entrée en collision avec elle-même !</span> N<span>ous contrôlons donc si la balle actuelle <em>b</em></span></span>—<span lang="fr"><span>dont la méthode <code>collisionDetect()</code> est invoquée</span></span>—<span lang="fr"><span>est distincte de la balle <em>b' </em>inspectée dans la boucle<em>. </em>Ainsi</span> <span>le bloc de code venant après l'instruction <code>if</code> ne s'exécutera que si les balles <em>b</em> et <em>b'</em> ne sont pas identiques.</span></span></li>
+   <li><span id="result_box" lang="fr"><span>Un algorithme classique permet ensuite de vérifier la superposition de deux disques</span><span>.</span> <span>Ceci est expliqué plus loin dans</span></span> <a href="/en-US/docs/Games/Techniques/2D_collision_detection">2D collision detection</a>.</li>
+   <li><span id="result_box" lang="fr"><span>Si une collision est détectée, le code à l'intérieur de l'instruction interne <code>if</code> est exécuté.</span> <span>Dans ce cas, nous définissons simplement la propriété <code>color</code> des deux cercles à une nouvelle couleur aléatoire.</span> <span>Nous aurions pu faire quelque chose de bien plus complexe, comme faire rebondir les balles de façon réaliste, mais cela aurait été beaucoup plus complexe à mettre en œuvre.</span> <span>Pour de telles simulations de physique, les développeurs ont tendance à utiliser des bibliothèques de jeux ou de physiques telles que</span></span> <a href="http://wellcaffeinated.net/PhysicsJS/">PhysicsJS</a>, <a href="http://brm.io/matter-js/">matter.js</a>, <a href="http://phaser.io/">Phaser</a>, etc.</li>
+  </ul>
+ </li>
+ <li><span id="result_box" lang="fr"><span>Vous devez également appeler cette méthode dans chaque image de l'animation.</span> <span>Ajouter le code ci-dessous</span></span>  juste après la ligne <code>balls[i].update();</code>:
+  <pre class="brush: js">balls[i].collisionDetect();</pre>
+ </li>
+ <li><span id="result_box" lang="fr"><span>Enregistrez et rafraîchissez la démo à nouveau, et vous verrez vos balles changer de couleur quand elles entrent en collision !</span></span></li>
+</ol>
+
+<div class="note">
+<p><strong>Note </strong>: <span id="result_box" lang="fr"><span>Si vous avez des difficultés à faire fonctionner cet exemple, essayez de comparer votre code JavaScript avec notre <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/main-finished.js">version finale</a> (voir également la <a href="http://mdn.github.io/learning-area/javascript/oojs/bouncing-balls/index-finished.html">démo en ligne</a>).</span></span></p>
+</div>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p><span id="result_box" lang="fr"><span>Nous espérons que vous vous êtes amusé à écrire votre propre exemple de balles aléatoires bondissantes comme dans le monde réel, en utilisant diverses techniques orientées objet et divers objets d'un bout à l'autre du module !</span> Nous espérons vous avoir offert un aperçu<span> utile de l'utilisation des objets.</span><br>
+ <br>
+ <span>C'est tout pour les articles sur les objets </span></span>—<span lang="fr"><span> il ne vous reste plus qu'à tester vos compétences dans l'évaluation sur les objets.</span></span></p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Didacticiel sur canvas</a> — <span id="result_box" lang="fr"><span>un guide pour débutants sur l'utilisation de canvas 2D.</span></span></li>
+ <li><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></li>
+ <li><span id="result_box" lang="fr"><span><a href="/en-US/docs/Games/Techniques/2D_collision_detection">Détection de collision 2D</a> </span></span></li>
+ <li><span id="result_box" lang="fr"><span><a href="/en-US/docs/Games/Techniques/3D_collision_detection">Détection de collision 3D</a> </span></span></li>
+ <li><a href="/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript">Jeu d'évasion 2D utilisant du JavaScript pu</a> —<span id="result_box" lang="fr"><span>un excellent tutoriel pour débutant montrant comment construire un jeu en 2D.</span></span></li>
+ <li><a href="/en-US/docs/Games/Tutorials/2D_breakout_game_Phaser">Jeu d'évasion 2D utilisant phaser</a> — <span id="result_box" lang="fr"><span>explique les bases de la construction d'un jeu 2D en utilisant une bibliothèque de jeux JavaScript.</span></span></li>
+</ul>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects/Adding_bouncing_balls_features", "Learn/JavaScript/Objects")}}</p>
+
+
+
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics">Les bases de l'objet</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">JavaScript orienté objet pour les débutants</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Prototypes d'objets</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">Héritage en JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">Travailler avec des données JSON</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Pratique de construction d'objets</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Ajout de fonctionnalités à notre démo de balles bondissantes</a></li>
+</ul>
diff --git a/files/fr/learn/javascript/objects/prototypes_objet/index.html b/files/fr/learn/javascript/objects/prototypes_objet/index.html
new file mode 100644
index 0000000000..efb3681f18
--- /dev/null
+++ b/files/fr/learn/javascript/objects/prototypes_objet/index.html
@@ -0,0 +1,244 @@
+---
+title: Prototypes Objet
+slug: Learn/JavaScript/Objects/Prototypes_Objet
+tags:
+  - Constructeur
+  - JavaScript
+  - Prototype
+translation_of: Learn/JavaScript/Objects/Object_prototypes
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects")}}</div>
+
+<p class="summary">Les prototypes sont un mécanisme au sein de JavaScript qui permettent aux objets JavaScript d'hériter des propriétés d'autres objets. Les prototypes implémentent un héritage différent de celui rencontré dans les langages de programmation objets habituels. Dans cet article, nous allons aborder ces différences, nous allons aussi voir comment la chaîne de prototypage fonctionne. Nous verrons aussi comment les propriétés prototypes peuvent être utilisées afin d'ajouter des méthodes à des constructeurs existants.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pré-requis :</th>
+   <td>Une connaissance générale de l'informatique, des notions d'HTML et CSS, une connaissance des bases en JavaScript (voir <a href="/fr/docs/Learn/JavaScript/First_steps">Premiers pas</a> et <a href="/fr/docs/Learn/JavaScript/Building_blocks">Blocs de construction</a>) ainsi que des notions de JavaScript orienté objet (JSOO) (voir <a href="/fr/docs/Learn/JavaScript/Object-oriented/Introduction">Introduction aux objets</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objectifs :</th>
+   <td>Comprendre le concept de prototype en JavaScript, comprendre comment fonctionne une chaîne de prototypage et comment ajouter de nouvelles méthodes aux propriétés d'un prototype.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Un_langage_basé_sur_des_prototypes">Un langage basé sur des prototypes ?</h2>
+
+<p>JavaScript est souvent décrit comme un langage basé sur les prototypes, chaque objet pouvant avoir un <strong>prototype objet</strong> d'où il hérite des méthodes et des attributs. Un prototype peut lui aussi avoir son prototype objet duquel il héritera des méthodes et des attributs et ainsi de suite. On parle alors de chaîne de prototypage (ou <em>prototype chain<strong> </strong></em>en anglais). Cela permet d'expliquer pourquoi différents objets possèdent des attributs et des méthodes définis à partir d'autres objets.</p>
+
+<p>En réalité, les méthodes et attributs sont définis dans l'attribut <code>prototype</code> , la fonction constructrice de l'objet et non pas dans les instances des objets elles-mêmes.</p>
+
+<p>En programmation orientée objet classique, les classes sont définies, puis lorsque des instances sont créées, l'ensemble des attributs et des méthodes sont copiés dans l'instance. En JavaScript en revanche, tout n'est pas copié : on établit un lien entre l'objet instancié et son constructeur (c'est un lien dans la chaîne de prototypage). On détermine alors les méthodes et les attributs en remontant la chaîne.</p>
+
+<div class="note">
+<p><strong>Note:</strong> Il faut bien comprendre qu'il y a une différence entre la notion de prototype d'un objet (qu'on obtient via <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf">Object.getPrototypeOf(obj)</a></code>, ou via la propriété dépréciée  <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/proto">__proto__</a></code> ) et l' attribut <code>prototype</code>d'une fonction constructrice. La première concerne chaque instance, le dernier existe uniquement sur une fonction constructrice. Cela dit, <code>Object.getPrototypeOf(new Foobar())</code> renvoie au même object que<code>Foobar.prototype</code>.</p>
+</div>
+
+<p>Prenons un exemple afin de rendre cela un peu plus clair.</p>
+
+<h2 id="Comprendre_les_prototypes_objet">Comprendre les prototypes objet</h2>
+
+<p>Reprenons notre exemple dans lequel nous avions écrit notre constructeur <code>Personne()</code>. Chargez cet exemple dans votre navigateur, si vous ne l'avez plus, vous pouvez utiliser notre exemple<a href="https://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-further-exercises.html"> oojs-class-further-exercises.html</a> example (voir aussi le <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-further-exercises.html">code source</a>).</p>
+
+<p>Dans cet exemple, nous avons défini un constructeur comme suit :</p>
+
+<pre class="brush: js">function Personne(prenom, nom, age, genre, interets) {
+
+  // property and method definitions
+
+};</pre>
+
+<p>Nous avons ensuite instancié des objets comme ceci :</p>
+
+<pre class="brush: js">var personne1 = new Personne('Bob', 'Smith', 32, 'homme', ['musique', 'ski']);</pre>
+
+<p>Si vous entrez  « <code>personne1</code> » dans votre console JavaScript, vous devriez voir que le navigateur essaie de faire de l'auto-complétion avec les attributs de cet objet.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14907/autocomplete_Personne.png" style="height: 304px; width: 288px;"><img alt="" src="https://mdn.mozillademos.org/files/14919/autocomplete_Personne.png" style="height: 288px; width: 303px;"></p>
+
+<p>Dans cette liste vous verrez les membres définis au niveau du constructeur de <code>personne1</code> qui n'est autre  <code>Personne()</code>. On y trouve les valeurs suivantes : <code>nom</code>, <code>age</code>, <code>genre</code>, <code>interets</code>, <code>bio</code>, et <code>salutation</code>. On peut voir aussi d'autres membres tels que <code>watch</code>, <code>valueOf</code> …  Ces membres particuliers sont définis au niveau du prototype objet du constructeur <code>Personne()</code>, qui est <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></code>. On voit ici une mise en œuvre de la chaine de prototypage.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14921/prototype_chaine.PNG" style="height: 137px; width: 703px;"></p>
+
+<p>Que peut-il bien se passer lorsque l'on tente d'appeler une méthode définie pour <code>Object</code> en l'appliquant à <code>Personne</code>1 ? Par exemple :</p>
+
+<pre class="brush: js">personne1.valueOf()</pre>
+
+<p>Cette méthode renvoie simplement la valeur de l'objet pour lequel elle est appelée. Vous pouvez essayer dans votre console ! Lorsque l'on effectue cet appel, il se produit les choses suivantes :</p>
+
+<ul>
+ <li>Le navigateur tente de déterminer si l'objet <code>personne1</code> implémente une méthode <code>valueOf().</code></li>
+ <li>Aucune n'est présente, le navigateur vérifie donc si le prototype objet de <code>personne1</code> (<code>Personne</code>) contient cette méthode.</li>
+ <li>Pas de <code>valueOf()</code> non plus, donc le navigateur regarde si le prototype objet du constructeur <code>Personne()</code> (<code>Object</code>) possède cette méthode. Il y en a une, donc il l'appelle et tout va bien !</li>
+</ul>
+
+<div class="note">
+<p><strong>Note </strong>: Encore une fois, il est important d'insister sur le fait que les méthodes et attributs ne sont <strong>pas</strong> copiés d'un objet à un autre, mais qu'on y accède à chaque fois en remontant la chaine de prototypage.</p>
+</div>
+
+<div class="note">
+<p><strong>Note</strong> : Il n'existe pas de façon officielle d'accéder directement au prototype d'un objet donné. Les « liens » entre les éléments de la chaine sont définis au sein d'une propriété interne appelée <code>[[prototype]]</code> définie dans la spécification de JavaScript. (voir <a href="fr/docs/Web/JavaScript/Language_Resources">ECMAScript</a>). Néanmoins, la plupart des navigateurs modernes implémentent l'attribut <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/proto">__proto__</a></code>   (deux tirets soulignés ou <em>underscore</em> de chaque côté) qui contient le prototype objet d'un objet. Vous pouvez tenter <code>personne1.__proto__</code> et <code>personne1.__proto__.__proto__</code> pour voir à quoi ressemble une chaine de prototypage dans la console !</p>
+</div>
+
+<h2 id="Lattribut_prototype_là_où_lon_définit_les_éléments_héritables">L'attribut prototype : là où l'on définit les éléments héritables</h2>
+
+<p>Mais alors, où définissons-nous les attributs et méthodes qui seront hérités au long de la chaîne de prototypage ? En effet, s'il on regarde à la page de documentation <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></code> on peut voir un large éventail d'attributs et de méthodes qui sont définis, une liste bien plus longue que celle disponible pour notre objet <code>Personne1</code>. Pourquoi <code>Personne1</code> hérite de certains de ces éléments mais pas de tous ?</p>
+
+<p>Cela vient du fait que les éléments hérités sont ceux définis au niveau de l'attribut <code>prototype</code> d'<code>Object</code> (on peut voir cet attribut comme un sous espace de noms). Ainsi, les éléments listés sont ceux sous <code>Object.prototype.</code> et pas ceux situés juste sous <code>Object.</code> La valeur de l'attribut <code>prototype</code> est un objet qui rassemble les attributs et méthodes que l'on souhaite appliquer aux objets tout au long de la chaine de prototypage.</p>
+
+<p>Ainsi <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/watch">Object.prototype.watch()</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/valueOf">Object.prototype.valueOf()</a></code> …  sont disponibles pour n'importe quel objet qui hérite de <code>Object.prototype</code> ce qui inclus les nouvelles instances créées à partir du constructeur <code>Personne()</code>.</p>
+
+<p><code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/is">Object.is()</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/keys">Object.keys()</a></code>, ainsi que d'autres membres non définis dans <code>prototype</code> ne sont pas hérités par les instances d'objet ou les objets qui héritent de <code>Object.prototype</code>. Ces méthodes et attributs sont disponibles uniquement pour le constructeur <code>Object()</code>.</p>
+
+<div class="note">
+<p><strong>Note</strong> : Ça paraît bizarre, d'avoir une méthode définie au sein d'un constructeur qui est lui même une fonction non ? Et bien, une fonction est aussi un type d'objet — vous pouvez jeter un  œil à la documentation du constructeur <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Function">Function()</a></code> si vous ne nous croyez pas.</p>
+</div>
+
+<ol>
+ <li>Vous pouvez vérifier les attributs du prototype en reprenant l'exemple précédent et en entrant le code suivant dans la console JavaScript :
+  <pre class="brush: js">Personne.prototype</pre>
+ </li>
+ <li>Il n'y a pas grand chose renvoyé par le navigateur. En même temps, nous n'avons rien défini dans l'attribut prototype de notre constructeur, et par défaut l'attribut prototype d'un constructeur est toujours vide. Voyons ce que renvoie le code suivant :
+  <pre class="brush: js">Object.prototype</pre>
+ </li>
+</ol>
+
+<p>On observe que plusieurs méthodes sont définies au niveau de l'attribut <code>prototype</code> d'<code>Object</code>, qui seront alors disponibles pour les objets qui héritent d'<code>Object</code>, comme nous l'avons vu plus haut.</p>
+
+<p>Vous verrez qu'il existe plein d'exemples de chaine de prototypage dans JavaScript. Vous pouvez essayer de trouver les méthodes et les attributs définis dans les attributs <code>prototype</code> des objets globeaux comme <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String">String</a></code>,  <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Date">Date</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a></code>, et <code> <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></code>. Chacun de ces objets possède des éléments au sein de leur attribut prototype. Dès lors que l'on crée une chaine de caractères, comme celle-ci :</p>
+
+<pre class="brush: js">var maChaine = 'Ceci est ma chaine de caracteres.';</pre>
+
+<p><code>maChaine </code>possède aussitôt plusieurs méthodes utiles pour manipuler les chaines de caractères telles que <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/split">split()</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf">indexOf()</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/replace">replace()</a></code>…</p>
+
+<div class="warning">
+<p><strong>Important </strong>: L'attribut <code>prototype</code> est un des éléments JavaScript qui peut le plus prêter à confusion. On pourrait penser qu'il s'agit du prototype objet de l'objet courant mais ça ne l'est pas (on peut y accéder via <code>__proto__</code>). L'attribut <code>prototype </code>est un attribut qui contient un objet où l'on définit les éléments dont on va pouvoir hériter.</p>
+</div>
+
+<h2 id="Revenons_sur_create">Revenons sur create()</h2>
+
+<p>Nous avons vu précedemment que la méthode <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/create">Object.create()</a></code> pouvait être utilisée pour instancier des objets.</p>
+
+<ol>
+ <li>Par exemple, vous pouvez essayer le code suivant dans la console JavaScript :
+  <pre class="brush: js">var personne2 = Object.create(personne1);</pre>
+ </li>
+ <li>En réalité <code>create()</code> se contente de créer un nouvel objet à partir d'un prototype spécifique. Dans cet exemple, <code>personne2</code> est créé à partir de <code>personne1</code> qui agit en tant que prototype. Vous pouvez le vérifier via :
+  <pre class="brush: js">person2.__proto__</pre>
+ </li>
+</ol>
+
+<p>Cela renverra l'objet <code>personne1</code>.</p>
+
+<h2 id="Lattribut_constructor">L'attribut <em>constructor</em></h2>
+
+<p>Chaque fonction possède un attribut prototype dont la valeur est un objet contenant un attribut <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor">constructor</a></code>. L'attribut <code>constructor</code> renvoie vers la méthode constructrice utilisée. Nous allons le voir dans la section suivante, les attributs définis dans l'attribut <code>Personne.prototype</code> deviennent disponibles pour toutes les instances créées à partir du constructeur <code>Personne()</code>. De cette manière, l'attribut <code>constructor</code> est aussi disponible au sein de <code>personne1</code> et <code>personne2</code>.</p>
+
+<ol>
+ <li>Par exemple, vous pouvez tester le code suivant :
+  <pre class="brush: js">personne1.constructor
+personne2.constructor</pre>
+
+  <p>Chaque commande devrait renvoyer le constructeur <code>Personne()</code> étant donné qu'il a permis d'instancier ces objets.</p>
+
+  <p>Une astuce qui peut s'avérer utile est d'ajouter des parenthèses à la fin de l'attribut <code>constructor</code> pour le transformer en méthode. Après tout, le constructeur est une fonction que l'on peut appeler si besoin. Il faut juste utiliser le mot-clé <code>new</code> pour signifier que l'on souhaite construire un objet.</p>
+ </li>
+ <li>Par exemple :
+  <pre class="brush: js">var personne3 = new personne1.constructor('Karen', 'Stephenson', 26, 'femme', ['jouer de la batterie', 'escalade']);</pre>
+ </li>
+ <li>Vous pouvez désormais essayer d'accéder aux propriétés de personne3 :
+  <pre class="brush: js">personne3.prenom
+personne3.age
+personne3.bio()</pre>
+ </li>
+</ol>
+
+<p>Ça fonctionne bien. A priori, ce n'est pas la manière la plus simple de créer un objet et vous n'aurez pas à l'utiliser souvent. En revanche, ça peut vous débloquer quand vous devez créer une nouvelle instance et que vous ne disposez pas facilement du constructeur d'origine.</p>
+
+<p>L'attribut <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor">constructor</a></code> possède d'autres intérêts. Par exemple, si vous disposez du nom d'une instance objet vous pouvez utiliser le code suivant pour renvoyer le nom de son constructeur :</p>
+
+<pre class="brush: js">instanceName.constructor.name</pre>
+
+<p>Vous pouvez essayer :</p>
+
+<pre class="brush: js">personne1.constructor.name</pre>
+
+<h2 id="Modifions_les_prototypes">Modifions les prototypes</h2>
+
+<p>Voyons au travers d'un exemple comment modifier l'attribut <code>prototype</code> d'un constructeur (les méthodes ajoutées au prototype seront alors disponibles pour toutes les instances créées à partir du constructeur).</p>
+
+<ol>
+ <li>Revenons à notre exemple <a href="https://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-further-exercises.html">oojs-class-further-exercises.html</a> et faisons une copie local du <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-further-exercises.html">code source</a>. En dessous du JavaScript existant, vous pouvez ajouter le code suivant, ce qui aura pour effet d'ajouter une nouvelle méthode à l'attribut <code>prototype</code> du constructeur :
+
+  <pre class="brush: js">Personne.prototype.aurevoir = function() {
+  alert(this.nom.prenom + ' est sorti. Au revoir !');
+}</pre>
+ </li>
+ <li>Enregistrez vos modifications et chargez la page dans votre navigateur. Vous pouvez ensuite entrer le code suivant dans la console :
+  <pre class="brush: js">personne1.aurevoir();</pre>
+ </li>
+</ol>
+
+<p>Vous devriez voir une fenêtre s'afficher avec un message contenant le nom de la personne. Cette fonctionalité est utile, mais là où ça devient plus intéressant c'est que la chaine de prototypage a été mis à jour dynamiquement, rendant automatiquement cette méthode disponible à l'ensemble des instances existantes.</p>
+
+<p>Revoyons en détail ce qui s'est passé : tout d'abord, nous avons défini le constructeur. Ensuite, nous avons instancié un objet à partir du constructeur. Enfin, nous avons ajouté une nouvelle méthode au prototype du construceur :</p>
+
+<pre class="brush: js">function Personne(prenom, nom, age, genre, interets) {
+
+  // définition des attrbuts et des méthodes
+
+};
+
+var personne1 = new Personne('Tammi', 'Smith', 32, 'neutre', ['musique', 'ski', 'kickboxing']);
+
+Personne.prototype.aurevoir= function() {
+  alert(this.nom.prenom + ' est sorti. Au revoir !');
+}</pre>
+
+<p>Même si nous l'avons déclaré après, la méthode <code>aurevoir()</code> est disponible pour l'instance <code>personne1</code>. Son existence a mis à jour dynamiquement les méthodes de l'instance. Cela démontre ce que nous expliquions plus haut au sujet de la chaine de prototypage : le navigateur la parcourt de manière ascendante. Ainsi, il est possible de trouver directement les méthodes qui n'ont pas été définies au niveau de l'instance, plutôt que de les recopier au sein de l'instance. Cela nous permet de bénéficier d'un système extensible de manière simple et élégante.</p>
+
+<div class="note">
+<p><strong>Note </strong>: Si vous avez du mal à faire fonctionner cet exemple, vous pouvez jeter un œil au notre (<a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-prototype.html">oojs-class-prototype.html</a>, voir la <a href="https://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-prototype.html">démo</a>)</p>
+</div>
+
+<p>Vous verrez peu d'attributs définis au sein de l'attribut <code>prototype</code>, pour la simple et bonne raison que c'est assez peu pratique. Vous pourriez avoir :</p>
+
+<pre class="brush: js">Personne.prototype.nomComplet = 'Bob Smith';</pre>
+
+<p>Mais ce n'est pas très pratique, étant donné qu'une personne ne sera peut-être pas appelée de cette manière. Il est plus cohérent de construire le nom entier en combinant le nom et le prénom :</p>
+
+<pre class="brush: js">Personne.prototype.nomComplet = this.nom.prenom + ' ' + this.nom.nom;</pre>
+
+<p>Ça ne fonctionnera toujours pas. En effet, <code>this</code> aura une portée globale et ne sera pas dans le contexte de la fonction. En appelant cet attribut, nous aurions alors <code>undefined undefined</code>. Dans les exemples précédents sur le prototype, nous arrivions à obtenir quelque chose de fonctionnel puisque nous étions au sein d'une méthode, qui sera utilisée par l'instance. Il est donc possible de définir des attributs invariables au niveau du prototype mais de manière générale, il est préférable de les définir au sein du constructeur.</p>
+
+<p>En fait, on retrouve généralement la chose suivante : les attributs sont définis dans le constructeur, tandis que les méthodes sont définies au niveau du prototype. Cela rend le code plus simple à lire puisque les attributs sont groupés et les méthodes structurées en blocs distincts. Par exempe :</p>
+
+<pre class="brush: js">// Constructeur avec définition des attributs
+
+function Test(a, b, c, d) {
+  // définition des attributs
+};
+
+// Définition de la première méthode
+
+Test.prototype.x = function() { ... }
+
+// Définition de la seconde méthode
+
+Test.prototype.y = function() { ... }
+
+// etc...</pre>
+
+<p>Ce type d'implémentation peut être observée dans l'appli <a href="https://github.com/zalun/school-plan-app/blob/master/stage9/js/index.js">plan d'école</a> de Piotr Zalewa par exemple.</p>
+
+<h2 id="Résumé">Résumé</h2>
+
+<p>Cet article a traité des prototypes objet en JavaScript, en incluant la chaine de prototypage qui permet aux objets d'hériter des propriétés d'un autre objet. Nous avons aussi vu l'attribut prototype et comment nous pouvons l'utiliser pour ajouter des méthodes au constructeur.</p>
+
+<p>Dans le prochain article, nous verrons comment appliquer l'héritage entre deux de nos propres objets.</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects")}}</p>