From faa96e657621455284245018b8a3b5050b613e6b Mon Sep 17 00:00:00 2001
From: julieng <julien.gattelier@gmail.com>
Date: Sun, 14 Nov 2021 14:30:47 +0100
Subject: convert content to md

---
 .../build_your_own_function/index.md               | 425 +++++++-----
 .../building_blocks/conditionals/index.md          | 607 ++++++++---------
 .../javascript/building_blocks/events/index.md     | 633 +++++++++---------
 .../javascript/building_blocks/functions/index.md  | 478 ++++++++------
 .../building_blocks/image_gallery/index.md         | 187 +++---
 files/fr/learn/javascript/building_blocks/index.md |  54 +-
 .../building_blocks/looping_code/index.md          | 733 ++++++++++-----------
 .../building_blocks/return_values/index.md         | 230 ++++---
 8 files changed, 1745 insertions(+), 1602 deletions(-)

(limited to 'files/fr/learn/javascript/building_blocks')

diff --git a/files/fr/learn/javascript/building_blocks/build_your_own_function/index.md b/files/fr/learn/javascript/building_blocks/build_your_own_function/index.md
index 696c4d50d3..96c62c5ff3 100644
--- a/files/fr/learn/javascript/building_blocks/build_your_own_function/index.md
+++ b/files/fr/learn/javascript/building_blocks/build_your_own_function/index.md
@@ -15,61 +15,110 @@ tags:
 translation_of: Learn/JavaScript/Building_blocks/Build_your_own_function
 original_slug: Apprendre/JavaScript/Building_blocks/Build_your_own_function
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "Learn/JavaScript/Building_blocks")}}
 
-<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "Learn/JavaScript/Building_blocks")}}</div>
-
-<p>Dans l'article précédent, nous avons traité essentiellement de la théorie. Le présent article fournira une expérience pratique. Ici vous allez mettre en pratique ces connaissances en construisant vos propres fonctions. Tout au long, nous expliquerons également quelques détails supplémentaires concernant les fonctions.</p>
+Dans l'article précédent, nous avons traité essentiellement de la théorie. Le présent article fournira une expérience pratique. Ici vous allez mettre en pratique ces connaissances en construisant vos propres fonctions. Tout au long, nous expliquerons également quelques détails supplémentaires concernant les fonctions.
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Prérequis :</th>
-   <td>Savoir-faire de base, une compréhension minimale HTML et CSS, <a href="/fr/docs/Learn/JavaScript/First_steps">premiers pas en JavaScript</a>, <a href="/fr/docs/Learn/JavaScript/Building_blocks/Functions">Fonctions — blocs de code réutilisables</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Objectif :</th>
-   <td>Fournir quelques pratiques de création de fonctions, et expliquer un peu plus les détails associés.</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Prérequis :</th>
+      <td>
+        Savoir-faire de base, une compréhension minimale HTML et CSS,
+        <a href="/fr/docs/Learn/JavaScript/First_steps"
+          >premiers pas en JavaScript</a
+        >,
+        <a href="/fr/docs/Learn/JavaScript/Building_blocks/Functions"
+          >Fonctions — blocs de code réutilisables</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Objectif :</th>
+      <td>
+        Fournir quelques pratiques de création de fonctions, et expliquer un peu
+        plus les détails associés.
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Apprentissage_actif_Construisons_une_fonction">Apprentissage actif : Construisons une fonction</h2>
+## Apprentissage actif : Construisons une fonction
 
-<p>La fonction que nous allons construire sera nommée <code>displayMessage()</code>. Elle affichera une boîte de message personnalisée sur une page web. Elle fonctionnera comme un substitut personnalisé de la fonction <a href="/fr/docs/Web/API/Window/alert">alert()</a> du navigateur. Vous avez déjà vu cela avant, mais nous allons simplement nous rafraîchir la mémoire — essayez le code qui suit dans la console JavaScript de votre navigateur, sur n'importe quelle page que vous aimez :</p>
+La fonction que nous allons construire sera nommée `displayMessage()`. Elle affichera une boîte de message personnalisée sur une page web. Elle fonctionnera comme un substitut personnalisé de la fonction [alert()](/fr/docs/Web/API/Window/alert) du navigateur. Vous avez déjà vu cela avant, mais nous allons simplement nous rafraîchir la mémoire — essayez le code qui suit dans la console JavaScript de votre navigateur, sur n'importe quelle page que vous aimez :
 
-<pre class="brush: js">alert('This is a message');</pre>
+```js
+alert('This is a message');
+```
 
-<p>La fonction prend un seul argument en paramètre — la chaîne de caractères qui est affichée dans la boîte d'alerte. Vous pouvez essayer de varier la syntaxe de la chaîne pour modifier le message.</p>
+La fonction prend un seul argument en paramètre — la chaîne de caractères qui est affichée dans la boîte d'alerte. Vous pouvez essayer de varier la syntaxe de la chaîne pour modifier le message.
 
-<p>La fonction <a href="/fr/docs/Web/API/Window/alert">alert()</a> est assez limitée : vous pouvez modifier le message, mais vous ne pouvez pas facilement faire varier autre chose, comme la couleur, une icône, ou autre chose. Nous en construirons une qui s'avérera plus amusante.</p>
+La fonction [alert()](/fr/docs/Web/API/Window/alert) est assez limitée : vous pouvez modifier le message, mais vous ne pouvez pas facilement faire varier autre chose, comme la couleur, une icône, ou autre chose. Nous en construirons une qui s'avérera plus amusante.
 
-<div class="note">
-<p><strong>Note :</strong> Cet exemple devrait fonctionner correctement dans tous les navigateurs modernes, mais elle pourrait avoir un comportement un peu plus inattendu dans un navigateur ancien. Nous recommandons donc de faire cet exercice dans un navigateur moderne tel que Firefox, Opera, ou Chrome.</p>
-</div>
+> **Note :** Cet exemple devrait fonctionner correctement dans tous les navigateurs modernes, mais elle pourrait avoir un comportement un peu plus inattendu dans un navigateur ancien. Nous recommandons donc de faire cet exercice dans un navigateur moderne tel que Firefox, Opera, ou Chrome.
 
-<h2 id="La_fonction_de_base">La fonction de base</h2>
+## La fonction de base
 
-<p>Pour commencer, mettons en place une fonction de base.</p>
+Pour commencer, mettons en place une fonction de base.
 
-<div class="note">
-<p><strong>Note :</strong> Pour les conventions de nommage des fonctions, vous devez suivre les mêmes règles que les <a href="/fr/Learn/JavaScript/First_steps/Variables#An_aside_on_variable_naming_rules">conventions de noms de variables</a>. Ce qui est bien, c'est que vous pouvez les différencier — les noms de fonctions se terminent par des parenthèses, pas les variables.</p>
-</div>
+> **Note :** Pour les conventions de nommage des fonctions, vous devez suivre les mêmes règles que les [conventions de noms de variables](/fr/Learn/JavaScript/First_steps/Variables#An_aside_on_variable_naming_rules). Ce qui est bien, c'est que vous pouvez les différencier — les noms de fonctions se terminent par des parenthèses, pas les variables.
+
+1.  Commencez par faire une copie locale du fichier [function-start.html](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-start.html). Vous pourrez voir que le code HTML est simple — l'élément body ne contient qu'un seul bouton. Nous avons également ajouté quelques règles CSS de base pour styliser la boîte de message personnalisée, et un élément {{htmlelement("script")}} pour écrire notre code JavaScript.
+2.  Ensuite, ajoutez le code ci-dessous à l'intérieur de l'élément `<script> `:
+
+    ```js
+    function displayMessage() {
+
+    }
+    ```
+
+    Nous commençons avec le mot-clé `function`, qui signifie que nous définissons une fonction. Celui-ci est suivi par le nom que nous voulons donner à notre fonction, des parenthèses et des accolades. Tous les paramètres que nous voulons donner à notre fonction vont à l'intérieur des parenthèses, et le code qui s'exécute lorsque nous appelons la fonction va à l'intérieur des accolades.
+
+3.  Enfin, ajoutez le code suivant à l'intérieur des accolades :
+
+    ```js
+    var html = document.querySelector('html');
 
-<ol>
- <li>Commencez par faire une copie locale du fichier <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-start.html">function-start.html</a>. Vous pourrez voir que le code HTML est simple — l'élément body ne contient qu'un seul bouton. Nous avons également ajouté quelques règles CSS de base pour styliser la boîte de message personnalisée, et un élément {{htmlelement("script")}} pour écrire notre code JavaScript.</li>
- <li>Ensuite, ajoutez le code ci-dessous à l'intérieur de l'élément <code>&lt;script&gt; </code>:
-  <pre class="brush: js">function displayMessage() {
+    var panel = document.createElement('div');
+    panel.setAttribute('class', 'msgBox');
+    html.appendChild(panel);
 
-}</pre>
-  Nous commençons avec le mot-clé <code>function</code>, qui signifie que nous définissons une fonction. Celui-ci est suivi par le nom que nous voulons donner à notre fonction, des parenthèses et des accolades. Tous les paramètres que nous voulons donner à notre fonction vont à l'intérieur des parenthèses, et le code qui s'exécute lorsque nous appelons la fonction va à l'intérieur des accolades.</li>
- <li>Enfin, ajoutez le code suivant à l'intérieur des accolades :
-  <pre class="brush: js">var html = document.querySelector('html');
+    var msg = document.createElement('p');
+    msg.textContent = 'This is a message box';
+    panel.appendChild(msg);
 
+    var closeBtn = document.createElement('button');
+    closeBtn.textContent = 'x';
+    panel.appendChild(closeBtn);
+
+    closeBtn.onclick = function() {
+      panel.parentNode.removeChild(panel);
+    }
+    ```
+
+Étant donné qu'il y a pas mal de code à analyser, allons-y pas à pas.
+
+La première ligne utilise une fonction de l'API DOM appelée {{domxref("document.querySelector()")}} pour sélectionner l'élément {{htmlelement("html")}} et stocker une référence vers cet élément dans une variable appelée `html`, de façon à pouvoir l'utiliser plus tard :
+
+```js
+var html = document.querySelector('html');
+```
+
+La section suivante utilise une autre fonction de l'API DOM appelée {{domxref("Document.createElement()")}} pour créer un élément {{htmlelement("div")}} et stocker une référence vers lui dans une variable appelée `panel` (Dans la suite de l'article, nous parlerons simplement du panneau `<div>`.). Cet élément sera le conteneur extérieur de notre boîte de message.
+
+Puis, nous utilisons encore une autre fonction de l'API DOM appelée {{domxref("Element.setAttribute()")}} pour ajouter un attribut `class` à notre panneau qui aura pour valeur `msgBox`. Ceci rendra plus facile la mise en forme de l'élément — si vous regardez le CSS de la page, vous verrez que nous utilisons un sélecteur de classe `.msgBox` dans le but de styliser la boîte de message ainsi que son contenu.
+
+Finallement, nous appelons une fonction du DOM nommée {{domxref("Node.appendChild()")}} sur la variable `html` créée précédemment, qui insère un élément, en tant qu'enfant, à l'intérieur d'un autre. Nous spécifions le panneau `<div>` (panel) comme l'enfant que nous voulons ajouter à l'intérieur de l'élément `<html>`. Nous avons besoin de le faire puisque l'élément que nous avons créé ne peut pas apparaître de lui-même sur la page — nous avons besoin de préciser où le mettre.
+
+```js
 var panel = document.createElement('div');
 panel.setAttribute('class', 'msgBox');
 html.appendChild(panel);
+```
+
+Les deux sections suivantes font usage des mêmes fonctions `createElement()` et `appendChild()` que nous avons déjà vu pour créer deux nouveaux éléments — l'un {{htmlelement("p")}} et l'autre {{htmlelement("button")}} —  et pour les insèrer dans la page en tant qu'enfant du panneau `<div>`. On utilise leur propriété {{domxref("Node.textContent")}} — qui représente le contenu textuel d'un élément — pour insérer un message à l'intérieur du paragraphe, ainsi qu'un 'x' à l'intérieur du bouton. Ce bouton sera cliqué / activé quand l'utilisateur voudra fermer la boîte de message.
 
+```js
 var msg = document.createElement('p');
 msg.textContent = 'This is a message box';
 panel.appendChild(msg);
@@ -77,167 +126,185 @@ panel.appendChild(msg);
 var closeBtn = document.createElement('button');
 closeBtn.textContent = 'x';
 panel.appendChild(closeBtn);
+```
 
+Finalement, nous utilisons un gestionnaire d'évènements {{domxref("GlobalEventHandlers.onclick")}} de sorte qu'un clic sur le bouton déclenche le bout de code chargé de supprimer la totalité du panneau de la page — c'est-à-dire fermer la boîte de message.
+
+Le gestionnaire `onclick` est une propriété disponible sur le bouton (en fait, sur n'importe quel élément de la page) qui pourra se voir transmettre une fonction en paramètre pour spécifier quel morceau de code sera déclenché quand le bouton sera cliqué. Vous en apprendrez bien plus dans notre article sur les évènements. Nous avons passé à notre gestionnaire  `onclick` une fonction anonyme, qui contient le code exécuté quand le bouton est cliqué. L'instruction définie dans la fonction utilise la fonction de l'API DOM {{domxref("Node.removeChild()")}} pour indiquer que nous tenons à supprimer un élément enfant spécifique de l'élément HTML — dans notre cas le panneau `<div>`.
+
+```js
 closeBtn.onclick = function() {
   panel.parentNode.removeChild(panel);
-}</pre>
- </li>
-</ol>
+}
+```
 
-<p>Étant donné qu'il y a pas mal de code à analyser, allons-y pas à pas.</p>
+Au final, l'intégralité du bloc de code génère un bloc de code HTML et l'insère dans la page, ce qui ressemble à ça :
 
-<p>La première ligne utilise une fonction de l'API DOM appelée {{domxref("document.querySelector()")}} pour sélectionner l'élément {{htmlelement("html")}} et stocker une référence vers cet élément dans une variable appelée <code>html</code>, de façon à pouvoir l'utiliser plus tard :</p>
+```html
+<div class="msgBox">
+  <p>This is a message box</p>
+  <button>x</button>
+</div>
+```
 
-<pre class="brush: js">var html = document.querySelector('html');</pre>
+Ça nous a fait beaucoup de code à passer en revue — ne vous inquiétez pas trop si vous ne vous souvenez pas exactement de comment chaque instruction fonctionne ! Bien que la partie principale sur laquelle nous voulions mettre l'accent ici est la structure de la fonction et son utilisation, nous avons voulu montrer quelque chose d'intéressant pour mettre en valeur cet exemple.
 
-<p>La section suivante utilise une autre fonction de l'API DOM appelée {{domxref("Document.createElement()")}} pour créer un élément {{htmlelement("div")}} et stocker une référence vers lui dans une variable appelée <code>panel</code> (Dans la suite de l'article, nous parlerons simplement du panneau <code>&lt;div&gt;</code>.). Cet élément sera le conteneur extérieur de notre boîte de message.</p>
+## Appeler la fonction
 
-<p>Puis, nous utilisons encore une autre fonction de l'API DOM appelée {{domxref("Element.setAttribute()")}} pour ajouter un attribut <code>class</code> à notre panneau qui aura pour valeur <code>msgBox</code>. Ceci rendra plus facile la mise en forme de l'élément — si vous regardez le CSS de la page, vous verrez que nous utilisons un sélecteur de classe <code>.msgBox</code> dans le but de styliser la boîte de message ainsi que son contenu.</p>
+À présent, nous avons notre fonction définie comme il faut dans notre balise `<script>`, mais il ne se passera rien si on laisse les choses en l'état.
 
-<p>Finallement, nous appelons une fonction du DOM nommée {{domxref("Node.appendChild()")}} sur la variable <code>html</code> créée précédemment, qui insère un élément, en tant qu'enfant, à l'intérieur d'un autre. Nous spécifions le panneau <code>&lt;div&gt;</code> (panel) comme l'enfant que nous voulons ajouter à l'intérieur de l'élément <code>&lt;html&gt;</code>. Nous avons besoin de le faire puisque l'élément que nous avons créé ne peut pas apparaître de lui-même sur la page — nous avons besoin de préciser où le mettre.</p>
+1.  Ajoutez la ligne suivante au-dessous de votre fonction pour l'appeler :
 
-<pre class="brush: js">var panel = document.createElement('div');
-panel.setAttribute('class', 'msgBox');
-html.appendChild(panel);</pre>
+    ```js
+    displayMessage();
+    ```
 
-<p>Les deux sections suivantes font usage des mêmes fonctions <code>createElement()</code> et <code>appendChild()</code> que nous avons déjà vu pour créer deux nouveaux éléments — l'un {{htmlelement("p")}} et l'autre {{htmlelement("button")}} —  et pour les insèrer dans la page en tant qu'enfant du panneau <code>&lt;div&gt;</code>. On utilise leur propriété {{domxref("Node.textContent")}} — qui représente le contenu textuel d'un élément — pour insérer un message à l'intérieur du paragraphe, ainsi qu'un 'x' à l'intérieur du bouton. Ce bouton sera cliqué / activé quand l'utilisateur voudra fermer la boîte de message.</p>
+    Cette ligne appelle la fonction en la faisant fonctionner immédiatement. Lorsque vous enregistrez votre code et rechargez la page dans le navigateur, vous voyez la petite boîte de message apparaître immédiatement, une seule fois. Après tout, nous ne l'appelons bien qu'une fois.
 
-<pre class="brush: js">var msg = document.createElement('p');
-msg.textContent = 'This is a message box';
-panel.appendChild(msg);
+2.  Maintenant, ouvrez vos outils de développement sur la page d'exemple, allez à la console JavaScript et tapez-y la ligne à nouveau, vous verrez qu'elle apparaît encore une fois ! C'est génial, nous avons maintenant une fonction réutilisable que nous pouvons appeler chaque fois que nous le voulons.
 
-var closeBtn = document.createElement('button');
-closeBtn.textContent = 'x';
-panel.appendChild(closeBtn);</pre>
+    Cela dit, nous voulons probablement qu'elle apparaisse en réponse aux actions de l'utilisateur ou du système. Dans une application réelle, une telle boîte de message serait probablement appelée en réponse à de nouvelles données disponibles, si une erreur s'est produite, si l'utilisateur essaie de supprimer son profil ("Êtes vous sûr de vouloir réaliser cette action ?"), ou encore si l'utilisateur ajoute un nouveau contact et que l'opération se termine avec succès, etc.
 
-<p>Finalement, nous utilisons un gestionnaire d'évènements {{domxref("GlobalEventHandlers.onclick")}} de sorte qu'un clic sur le bouton déclenche le bout de code chargé de supprimer la totalité du panneau de la page — c'est-à-dire fermer la boîte de message.</p>
+    Dans cette démo, nous faisons apparaître le message quand l'utilisateur clique sur le bouton.
 
-<p>Le gestionnaire <code>onclick</code> est une propriété disponible sur le bouton (en fait, sur n'importe quel élément de la page) qui pourra se voir transmettre une fonction en paramètre pour spécifier quel morceau de code sera déclenché quand le bouton sera cliqué. Vous en apprendrez bien plus dans notre article sur les évènements. Nous avons passé à notre gestionnaire  <code>onclick</code> une fonction anonyme, qui contient le code exécuté quand le bouton est cliqué. L'instruction définie dans la fonction utilise la fonction de l'API DOM {{domxref("Node.removeChild()")}} pour indiquer que nous tenons à supprimer un élément enfant spécifique de l'élément HTML — dans notre cas le panneau <code>&lt;div&gt;</code>.</p>
+3.  Supprimez la ligne précédente que vous avez ajoutée.
+4.  Ensuite, vous sélectionnerez le bouton et stockerez une référence vers celui-ci dans une variable. Ajoutez la ligne suivante à votre code, au-dessus de la définition de fonction :
 
-<pre class="brush: js">closeBtn.onclick = function() {
-  panel.parentNode.removeChild(panel);
-}</pre>
-
-<p>Au final, l'intégralité du bloc de code génère un bloc de code HTML et l'insère dans la page, ce qui ressemble à ça :</p>
-
-<pre class="brush: html">&lt;div class="msgBox"&gt;
-  &lt;p&gt;This is a message box&lt;/p&gt;
-  &lt;button&gt;x&lt;/button&gt;
-&lt;/div&gt;</pre>
-
-<p>Ça nous a fait beaucoup de code à passer en revue — ne vous inquiétez pas trop si vous ne vous souvenez pas exactement de comment chaque instruction fonctionne ! Bien que la partie principale sur laquelle nous voulions mettre l'accent ici est la structure de la fonction et son utilisation, nous avons voulu montrer quelque chose d'intéressant pour mettre en valeur cet exemple.</p>
-
-<h2 id="Appeler_la_fonction">Appeler la fonction</h2>
-
-<p>À présent, nous avons notre fonction définie comme il faut dans notre balise <code>&lt;script&gt;</code>, mais il ne se passera rien si on laisse les choses en l'état.</p>
-
-<ol>
- <li>Ajoutez la ligne suivante au-dessous de votre fonction pour l'appeler :
-  <pre class="brush: js">displayMessage();</pre>
-  Cette ligne appelle la fonction en la faisant fonctionner immédiatement. Lorsque vous enregistrez votre code et rechargez la page dans le navigateur, vous voyez la petite boîte de message apparaître immédiatement, une seule fois. Après tout, nous ne l'appelons bien qu'une fois.</li>
- <li>
-  <p>Maintenant, ouvrez vos outils de développement sur la page d'exemple, allez à la console JavaScript et tapez-y la ligne à nouveau, vous verrez qu'elle apparaît encore une fois ! C'est génial, nous avons maintenant une fonction réutilisable que nous pouvons appeler chaque fois que nous le voulons.</p>
-
-  <p>Cela dit, nous voulons probablement qu'elle apparaisse en réponse aux actions de l'utilisateur ou du système. Dans une application réelle, une telle boîte de message serait probablement appelée en réponse à de nouvelles données disponibles, si une erreur s'est produite, si l'utilisateur essaie de supprimer son profil ("Êtes vous sûr de vouloir réaliser cette action ?"), ou encore si l'utilisateur ajoute un nouveau contact et que l'opération se termine avec succès, etc.</p>
-
-  <p>Dans cette démo, nous faisons apparaître le message quand l'utilisateur clique sur le bouton.</p>
- </li>
- <li>Supprimez la ligne précédente que vous avez ajoutée.</li>
- <li>Ensuite, vous sélectionnerez le bouton et stockerez une référence vers celui-ci dans une variable. Ajoutez la ligne suivante à votre code, au-dessus de la définition de fonction :
-  <pre class="brush: js">var btn = document.querySelector('button');</pre>
- </li>
- <li>Enfin, ajoutez la ligne suivante à la précédente :
-  <pre class="brush: js">btn.onclick = displayMessage;</pre>
-  D'une manière similaire à notre ligne <code>closeBtn.onclick...</code> à l'intérieur de la fonction, ici, nous appelons un certain code en réponse à un clic sur un bouton. Mais dans ce cas, au lieu d'appeler une fonction anonyme contenant du code, nous appelons directement notre nom de fonction.</li>
- <li>Essayez d'enregistrer et de rafraîchir la page, maintenant vous devriez voir la boîte de message s'afficher lorsque vous cliquez sur le bouton.</li>
-</ol>
-
-<p>Vous vous demandez peut-être pourquoi nous n'avons pas inclus les parenthèses après le nom de la fonction. C'est parce que nous ne voulons pas appeler la fonction immédiatement, seulement après que le bouton aura été cliqué. Si vous modifiez la ligne pour :</p>
-
-<pre class="brush: js">btn.onclick = displayMessage();</pre>
-
-<p>Enregistrez et rafraîchissez la page, vous verrez que la boîte de message apparaît sans que le bouton ait été cliqué ! Dans ce contexte, les parenthèses sont parfois appelées "opérateur d'appel / invocation de fonction". Vous ne les utilisez que lorsque vous souhaitez exécuter la fonction immédiatement dans la portée actuelle. Dans le même ordre d'idée, le code à l'intérieur de la fonction anonyme n'est pas exécuté immédiatement, car il se trouve à l'intérieur de la portée de la fonction.</p>
-
-<p>Si vous avez essayé la dernière expérimentation, assurez-vous d'annuler la dernière modification avant de poursuivre.</p>
-
-<h2 id="Améliorer_la_fonction_à_laide_de_paramètres">Améliorer la fonction à l'aide de paramètres</h2>
-
-<p>En l'état, la fonction n'est pas très utile — on ne veut pas montrer le même message par défaut à chaque fois. Améliorons la en ajoutant quelques paramètres, ils permettront d'appeler la fonction avec différentes options.</p>
-
-<ol>
- <li>Premièrement, mettons à jour la première ligne :
-  <pre class="brush: js">function displayMessage() {</pre>
-  par :
-
-  <pre class="brush: js">function displayMessage(msgText, msgType) {</pre>
-  Maintenant, quand nous appelons la fonction, nous pouvons fournir deux valeurs de variables entre les parenthèses : une pour spécifier le message à afficher dans la boîte, l'autre pour le type de message.</li>
- <li>Pour faire usage du premier paramètre, mettez à jour la ligne suivante à l'intérieur de votre fonction :
-  <pre class="brush: js">msg.textContent = 'This is a message box';</pre>
-  avec :
-
-  <pre class="brush: js">msg.textContent = msgText;</pre>
- </li>
- <li>Vous devez maintenant mettre à jour votre appel de fonction pour inclure un texte de message mis à jour. Modifiez la ligne suivante :
-  <pre class="brush: js">btn.onclick = displayMessage;</pre>
-  par ce bloc :
-
-  <pre class="brush: js">btn.onclick = function() {
-  displayMessage('Woo, this is a different message!');
-};</pre>
-  Si nous voulons spécifier des paramètres à l'intérieur des parenthèses pour la fonction que nous appelons, alors nous ne pouvons pas l'appeler directement — nous avons besoin de la mettre à l'intérieur d'une fonction anonyme de sorte qu'elle n'est pas dans la portée immédiate et n'est donc pas appelée immédiatement. Maintenant, elle ne sera pas appelée tant que le bouton ne sera pas cliqué.</li>
- <li>Rechargez et essayez le code à nouveau et vous verrez qu'il fonctionne toujours très bien, sauf que maintenant vous pouvez également modifier le message à l'intérieur du paramètre pour obtenir des messages différents affichés dans la boîte !</li>
-</ol>
-
-<h3 id="Un_paramètre_plus_complexe">Un paramètre plus complexe</h3>
-
-<p>Passons au paramètre suivant. Celui-ci va demander un peu plus de travail — selon la valeur du paramètre <code>msgType</code>, la fonction affichera une icône et une couleur d'arrière-plan différentes.</p>
-
-<ol>
- <li>Tout d'abord, téléchargez les icônes nécessaires à cet exercice (<a href="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/functions/icons/warning.png">warning</a> et <a href="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/functions/icons/chat.png">chat</a>) depuis GitHub. Enregistrez-les dans un nouveau dossier appelé <code>icons</code> dans le même répertoire que votre fichier HTML.
-
-  <div class="note">
-    <p><strong>Note :</strong> icônes <a href="https://www.iconfinder.com/icons/1031466/alarm_alert_error_warning_icon">warning</a> et <a href="https://www.iconfinder.com/icons/1031441/chat_message_text_icon">chat</a> trouvés sur iconfinder.com, et créés par <a href="https://www.iconfinder.com/nazarr">Nazarrudin Ansyari</a>. Merci !</p></div>
- </li>
- <li>Ensuite, trouvez le CSS à l'intérieur de votre fichier HTML. Nous ferons quelques changements pour faire place aux icônes. Tout d'abord, mettez à jour la largeur <code>.msgBox</code> en changeant :
-  <pre class="brush: css">width: 200px;</pre>
-  par :
-
-  <pre class="brush: css">width: 242px;</pre>
- </li>
- <li>Ensuite, ajoutez les lignes à l'intérieur de la règle CSS <code>.msgBox p { ... }</code> :
-  <pre class="brush: css">padding-left: 82px;
-background-position: 25px center;
-background-repeat: no-repeat;</pre>
- </li>
- <li>Maintenant, nous devons ajouter du code à notre fonction <code>displayMessage()</code> pour gérer l'affichage de l'icône. Ajoutez le bloc suivant juste au dessus de l'accolade fermante "<code>}</code>" de votre fonction :
-  <pre class="brush: js">if (msgType === 'warning') {
-  msg.style.backgroundImage = 'url(icons/warning.png)';
-  panel.style.backgroundColor = 'red';
-} else if (msgType === 'chat') {
-  msg.style.backgroundImage = 'url(icons/chat.png)';
-  panel.style.backgroundColor = 'aqua';
-} else {
-  msg.style.paddingLeft = '20px';
-}</pre>
-  Ici, quand <code>msgType</code> a la valeur <code>'warning'</code>, l'icône d'avertissement est affichée et le fond du panneau prend la couleur rouge. Si <code>msgType</code> a la valeur <code>'chat'</code>, l'icône de chat est affichée et l'arrière-plan du panneau est bleu. Si le paramètre <code>msgType</code> n'a pas de valeur du tout (ou s'il a une valeur totalement différente), alors la partie du code contenue dans <code>else { ... }</code> est exécutée : le paragraphe prend un padding par défaut et il n'y a ni icône ni couleur d'arrière-plan. En fait, on fournit un état par défaut si aucun paramètre <code>msgType</code> n'est fourni, ce qui signifie qu'il s'agit d'un paramètre facultatif !</li>
- <li>Nous allons tester notre fonction mise à jour, essayez de mettre à jour l'appel <code>displayMessage()</code> :
-  <pre class="brush: js">displayMessage('Woo, this is a different message!');</pre>
-  par soit l'un ou l'autre :
-
-  <pre class="brush: js">displayMessage('Your inbox is almost full — delete some mails', 'warning');
-displayMessage('Brian: Hi there, how are you today?','chat');</pre>
-  Vous pouvez voir à quel point notre petite (plus tant que cela maintenant) fonction est devenue utile :</li>
-</ol>
-
-<div class="note">
-<p><strong>Note :</strong> Si vous avez des difficultés à mettre en œuvre cet exemple, n'hésitez pas à verifier votre code par rapport à la <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-stage-4.html">version définitive sur GitHub</a> (aussi, vous pouvez tester la <a href="http://mdn.github.io/learning-area/javascript/building-blocks/functions/function-stage-4.html">démo</a>), ou nous demander de l'aide.</p>
-</div>
+    ```js
+    var btn = document.querySelector('button');
+    ```
+
+5.  Enfin, ajoutez la ligne suivante à la précédente :
+
+    ```js
+    btn.onclick = displayMessage;
+    ```
+
+    D'une manière similaire à notre ligne `closeBtn.onclick...` à l'intérieur de la fonction, ici, nous appelons un certain code en réponse à un clic sur un bouton. Mais dans ce cas, au lieu d'appeler une fonction anonyme contenant du code, nous appelons directement notre nom de fonction.
+
+6.  Essayez d'enregistrer et de rafraîchir la page, maintenant vous devriez voir la boîte de message s'afficher lorsque vous cliquez sur le bouton.
+
+Vous vous demandez peut-être pourquoi nous n'avons pas inclus les parenthèses après le nom de la fonction. C'est parce que nous ne voulons pas appeler la fonction immédiatement, seulement après que le bouton aura été cliqué. Si vous modifiez la ligne pour :
+
+```js
+btn.onclick = displayMessage();
+```
+
+Enregistrez et rafraîchissez la page, vous verrez que la boîte de message apparaît sans que le bouton ait été cliqué ! Dans ce contexte, les parenthèses sont parfois appelées "opérateur d'appel / invocation de fonction". Vous ne les utilisez que lorsque vous souhaitez exécuter la fonction immédiatement dans la portée actuelle. Dans le même ordre d'idée, le code à l'intérieur de la fonction anonyme n'est pas exécuté immédiatement, car il se trouve à l'intérieur de la portée de la fonction.
+
+Si vous avez essayé la dernière expérimentation, assurez-vous d'annuler la dernière modification avant de poursuivre.
+
+## Améliorer la fonction à l'aide de paramètres
+
+En l'état, la fonction n'est pas très utile — on ne veut pas montrer le même message par défaut à chaque fois. Améliorons la en ajoutant quelques paramètres, ils permettront d'appeler la fonction avec différentes options.
+
+1.  Premièrement, mettons à jour la première ligne :
+
+    ```js
+    function displayMessage() {
+    ```
+
+    par :
+
+    ```js
+    function displayMessage(msgText, msgType) {
+    ```
+
+    Maintenant, quand nous appelons la fonction, nous pouvons fournir deux valeurs de variables entre les parenthèses : une pour spécifier le message à afficher dans la boîte, l'autre pour le type de message.
+
+2.  Pour faire usage du premier paramètre, mettez à jour la ligne suivante à l'intérieur de votre fonction :
+
+    ```js
+    msg.textContent = 'This is a message box';
+    ```
+
+    avec :
+
+    ```js
+    msg.textContent = msgText;
+    ```
+
+3.  Vous devez maintenant mettre à jour votre appel de fonction pour inclure un texte de message mis à jour. Modifiez la ligne suivante :
+
+    ```js
+    btn.onclick = displayMessage;
+    ```
+
+    par ce bloc :
+
+    ```js
+    btn.onclick = function() {
+      displayMessage('Woo, this is a different message!');
+    };
+    ```
+
+    Si nous voulons spécifier des paramètres à l'intérieur des parenthèses pour la fonction que nous appelons, alors nous ne pouvons pas l'appeler directement — nous avons besoin de la mettre à l'intérieur d'une fonction anonyme de sorte qu'elle n'est pas dans la portée immédiate et n'est donc pas appelée immédiatement. Maintenant, elle ne sera pas appelée tant que le bouton ne sera pas cliqué.
+
+4.  Rechargez et essayez le code à nouveau et vous verrez qu'il fonctionne toujours très bien, sauf que maintenant vous pouvez également modifier le message à l'intérieur du paramètre pour obtenir des messages différents affichés dans la boîte !
+
+### Un paramètre plus complexe
+
+Passons au paramètre suivant. Celui-ci va demander un peu plus de travail — selon la valeur du paramètre `msgType`, la fonction affichera une icône et une couleur d'arrière-plan différentes.
+
+1.  Tout d'abord, téléchargez les icônes nécessaires à cet exercice ([warning](https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/functions/icons/warning.png) et [chat](https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/functions/icons/chat.png)) depuis GitHub. Enregistrez-les dans un nouveau dossier appelé `icons` dans le même répertoire que votre fichier HTML.
+
+    > **Note :** icônes [warning](https://www.iconfinder.com/icons/1031466/alarm_alert_error_warning_icon) et [chat](https://www.iconfinder.com/icons/1031441/chat_message_text_icon) trouvés sur iconfinder.com, et créés par [Nazarrudin Ansyari](https://www.iconfinder.com/nazarr). Merci !
+
+2.  Ensuite, trouvez le CSS à l'intérieur de votre fichier HTML. Nous ferons quelques changements pour faire place aux icônes. Tout d'abord, mettez à jour la largeur `.msgBox` en changeant :
+
+    ```css
+    width: 200px;
+    ```
+
+    par :
+
+    ```css
+    width: 242px;
+    ```
+
+3.  Ensuite, ajoutez les lignes à l'intérieur de la règle CSS `.msgBox p { ... }` :
+
+    ```css
+    padding-left: 82px;
+    background-position: 25px center;
+    background-repeat: no-repeat;
+    ```
+
+4.  Maintenant, nous devons ajouter du code à notre fonction `displayMessage()` pour gérer l'affichage de l'icône. Ajoutez le bloc suivant juste au dessus de l'accolade fermante "`}`" de votre fonction :
+
+    ```js
+    if (msgType === 'warning') {
+      msg.style.backgroundImage = 'url(icons/warning.png)';
+      panel.style.backgroundColor = 'red';
+    } else if (msgType === 'chat') {
+      msg.style.backgroundImage = 'url(icons/chat.png)';
+      panel.style.backgroundColor = 'aqua';
+    } else {
+      msg.style.paddingLeft = '20px';
+    }
+    ```
+
+    Ici, quand `msgType` a la valeur `'warning'`, l'icône d'avertissement est affichée et le fond du panneau prend la couleur rouge. Si `msgType` a la valeur `'chat'`, l'icône de chat est affichée et l'arrière-plan du panneau est bleu. Si le paramètre `msgType` n'a pas de valeur du tout (ou s'il a une valeur totalement différente), alors la partie du code contenue dans `else { ... }` est exécutée : le paragraphe prend un padding par défaut et il n'y a ni icône ni couleur d'arrière-plan. En fait, on fournit un état par défaut si aucun paramètre `msgType` n'est fourni, ce qui signifie qu'il s'agit d'un paramètre facultatif !
+
+5.  Nous allons tester notre fonction mise à jour, essayez de mettre à jour l'appel `displayMessage()` :
+
+    ```js
+    displayMessage('Woo, this is a different message!');
+    ```
+
+    par soit l'un ou l'autre :
+
+    ```js
+    displayMessage('Your inbox is almost full — delete some mails', 'warning');
+    displayMessage('Brian: Hi there, how are you today?','chat');
+    ```
+
+    Vous pouvez voir à quel point notre petite (plus tant que cela maintenant) fonction est devenue utile :
 
-<h2 id="Conclusion">Conclusion</h2>
+> **Note :** Si vous avez des difficultés à mettre en œuvre cet exemple, n'hésitez pas à verifier votre code par rapport à la [version définitive sur GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-stage-4.html) (aussi, vous pouvez tester la [démo](http://mdn.github.io/learning-area/javascript/building-blocks/functions/function-stage-4.html)), ou nous demander de l'aide.
 
-<p>Vous êtes venu à bout de cette activité, félicitations ! Cet article vous a amené à travers tout le processus de construction d'une fonction pratique personnalisée, qui avec un peu plus de travail pourrait être transposée dans un projet réel. Dans l'article suivant, nous allons conclure l'apprentissage des fonctions en expliquant un autre concept connexe essentiel — les valeurs de retour.</p>
+## Conclusion
 
-<ul>
-</ul>
+Vous êtes venu à bout de cette activité, félicitations ! Cet article vous a amené à travers tout le processus de construction d'une fonction pratique personnalisée, qui avec un peu plus de travail pourrait être transposée dans un projet réel. Dans l'article suivant, nous allons conclure l'apprentissage des fonctions en expliquant un autre concept connexe essentiel — les valeurs de retour.
 
-<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "Learn/JavaScript/Building_blocks")}}</p>
+{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "Learn/JavaScript/Building_blocks")}}
diff --git a/files/fr/learn/javascript/building_blocks/conditionals/index.md b/files/fr/learn/javascript/building_blocks/conditionals/index.md
index 5a6a89cc13..cfa97937f9 100644
--- a/files/fr/learn/javascript/building_blocks/conditionals/index.md
+++ b/files/fr/learn/javascript/building_blocks/conditionals/index.md
@@ -15,112 +15,122 @@ tags:
 translation_of: Learn/JavaScript/Building_blocks/conditionals
 original_slug: Apprendre/JavaScript/Building_blocks/conditionals
 ---
-<p>{{LearnSidebar}}</p>
+{{LearnSidebar}}
 
-<p>{{NextMenu("Apprendre/JavaScript/Building_blocks/Looping_code", "Apprendre/JavaScript/Building_blocks")}}</p>
+{{NextMenu("Apprendre/JavaScript/Building_blocks/Looping_code", "Apprendre/JavaScript/Building_blocks")}}
 
-<p>Dans tout langage de programmation, le code doit prendre des décisions et agir en fonction des différents paramètres. Par exemple dans un jeu, si le nombre de vies du joueur atteint 0, alors le jeu est terminé. Dans une application météo, si elle est consultée le matin, l'application montrera une image du lever de soleil ; l'application proposera des étoiles et la lune s'il fait nuit. Dans cet article nous allons découvrir comment ces instructions conditionnelles fonctionnent en JavaScript.</p>
+Dans tout langage de programmation, le code doit prendre des décisions et agir en fonction des différents paramètres. Par exemple dans un jeu, si le nombre de vies du joueur atteint 0, alors le jeu est terminé. Dans une application météo, si elle est consultée le matin, l'application montrera une image du lever de soleil ; l'application proposera des étoiles et la lune s'il fait nuit. Dans cet article nous allons découvrir comment ces instructions conditionnelles fonctionnent en JavaScript.
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Prérequis :</th>
-   <td>Connaissances du vocabulaire informatique, compréhension des bases du HTML et des CSS, <a href="/fr/docs/Learn/JavaScript/First_steps">Premiers pas en JavaScript</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Objectif :</th>
-   <td>Comprendre comment utiliser les structures conditionnelles en JavaScript.</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Prérequis :</th>
+      <td>
+        Connaissances du vocabulaire informatique, compréhension des bases du
+        HTML et des CSS,
+        <a href="/fr/docs/Learn/JavaScript/First_steps"
+          >Premiers pas en JavaScript</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Objectif :</th>
+      <td>
+        Comprendre comment utiliser les structures conditionnelles en
+        JavaScript.
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Vous_laurez_à_une_condition_!..">Vous l'aurez à une condition !..</h2>
+## Vous l'aurez à une condition !..
 
-<p>Les êtres humains (et d'autres animaux) prennent tout le temps des décisions qui affectent leur vie, de la plus insignifiante (« Est‑ce que je devrais prendre un biscuit ou deux ? ») à la plus importante (« Est‑ce que je dois rester dans mon pays natal et travailler à la ferme de mon père, ou déménager aux États-Unis et étudier l'astrophysique ? »)</p>
+Les êtres humains (et d'autres animaux) prennent tout le temps des décisions qui affectent leur vie, de la plus insignifiante (« Est‑ce que je devrais prendre un biscuit ou deux ? ») à la plus importante (« Est‑ce que je dois rester dans mon pays natal et travailler à la ferme de mon père, ou déménager aux États-Unis et étudier l'astrophysique ? »)
 
-<p>Les instructions conditionnelles nous permettent de représenter ce genre de prise de décision en JavaScript, du choix qui doit être fait (par ex. « un biscuit ou deux »), à la conséquence de ces choix (il se peut que la conséquence de « manger un biscuit » soit « avoir encore faim », et celle de « manger deux biscuits » soit « se sentir rassasié, mais se faire gronder par maman pour avoir mangé tous les biscuits ».)</p>
+Les instructions conditionnelles nous permettent de représenter ce genre de prise de décision en JavaScript, du choix qui doit être fait (par ex. « un biscuit ou deux »), à la conséquence de ces choix (il se peut que la conséquence de « manger un biscuit » soit « avoir encore faim », et celle de « manger deux biscuits » soit « se sentir rassasié, mais se faire gronder par maman pour avoir mangé tous les biscuits ».)
 
-<p><img alt="" src="cookie-choice-small.png"></p>
+![](cookie-choice-small.png)
 
-<h2 id="Instruction_if_..._else">Instruction if ... else</h2>
+## Instruction if ... else
 
-<p>Intéressons nous de plus près à la forme la plus répandue d'instruction conditionnelle que vous utiliserez en JavaScript — la modeste <a href="/fr/docs/Web/JavaScript/Reference/Instructions/if...else">instruction</a> <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/if...else">if ... else</a></code>.</p>
+Intéressons nous de plus près à la forme la plus répandue d'instruction conditionnelle que vous utiliserez en JavaScript — la modeste [instruction](/fr/docs/Web/JavaScript/Reference/Instructions/if...else) [`if ... else`](/fr/docs/Web/JavaScript/Reference/Instructions/if...else).
 
-<h3 id="Syntaxe_élémentaire_if_..._else">Syntaxe élémentaire if ... else</h3>
+### Syntaxe élémentaire if ... else
 
-<p>La syntaxe élémentaire de <code>if...else</code> ressemble à cela en {{glossary("pseudocode")}}:</p>
+La syntaxe élémentaire de `if...else` ressemble à cela en {{glossary("pseudocode")}}:
 
-<pre>if (condition) {
-  code à exécuter si la condition est true
-} else {
-  sinon exécuter cet autre code à la place
-}</pre>
+    if (condition) {
+      code à exécuter si la condition est true
+    } else {
+      sinon exécuter cet autre code à la place
+    }
 
-<p>Ici nous avons:</p>
+Ici nous avons:
 
-<ol>
- <li>Le mot‑clé <code>if</code> suivie de parenthèses.</li>
- <li>Une condition à évaluer, placée entre les parenthèses (typiquement « cette valeur est‑elle plus grande que cet autre valeur ? » ou « cette valeur existe‑t‑elle ? »). Cette condition se servira des <a href="/fr/docs/Learn/JavaScript/First_steps/Math#Comparison_operators">opérateurs de comparaison</a> que nous avons étudié dans le précédent module, et renverra <code>true</code> ou <code>false</code>.</li>
- <li>Une paire d'accolades, à l'intérieur de laquelle se trouve du code — cela peut être n'importe quel code voulu ; il sera exécuté seulement si la condition renvoie <code>true</code>.</li>
- <li>Le mot‑clé <code>else</code>.</li>
- <li>Une autre paire d'accolades, à l'intérieur de laquelle se trouve du code différent — tout code souhaité et il sera exécuté seulement si la condition ne renvoie pas <code>true</code>.</li>
-</ol>
+1.  Le mot‑clé `if` suivie de parenthèses.
+2.  Une condition à évaluer, placée entre les parenthèses (typiquement « cette valeur est‑elle plus grande que cet autre valeur ? » ou « cette valeur existe‑t‑elle ? »). Cette condition se servira des [opérateurs de comparaison](/fr/docs/Learn/JavaScript/First_steps/Math#Comparison_operators) que nous avons étudié dans le précédent module, et renverra `true` ou `false`.
+3.  Une paire d'accolades, à l'intérieur de laquelle se trouve du code — cela peut être n'importe quel code voulu ; il sera exécuté seulement si la condition renvoie `true`.
+4.  Le mot‑clé `else`.
+5.  Une autre paire d'accolades, à l'intérieur de laquelle se trouve du code différent — tout code souhaité et il sera exécuté seulement si la condition ne renvoie pas `true`.
 
-<p>Ce code est facile à lire pour une personne — il dit « <strong>si</strong> la <strong>condition</strong> renvoie <code>true</code>, exécuter le code A, <strong>sinon</strong> exécuter le code B ».</p>
+Ce code est facile à lire pour une personne — il dit « **si** la **condition** renvoie `true`, exécuter le code A, **sinon** exécuter le code B ».
 
-<p>Notez qu'il n'est pas nécessaire d'inclure une instruction <code>else</code> et le deuxième bloc entre accolades — le code suivant est aussi parfaitement correct :</p>
+Notez qu'il n'est pas nécessaire d'inclure une instruction `else` et le deuxième bloc entre accolades — le code suivant est aussi parfaitement correct :
 
-<pre>if (condition) {
-  code à exécuter si la condition est true
-}
+    if (condition) {
+      code à exécuter si la condition est true
+    }
 
-exécuter un autre code</pre>
+    exécuter un autre code
 
-<p>Cependant, vous devez faire attention ici — dans ce cas, le deuxième bloc de code n'est pas controlé par l'instruction conditionnelle, donc il sera <strong>toujours</strong> exécuté, que la condition ait renvoyé <code>true</code> ou <code>false</code>. Ce n'est pas nécessairement une mauvaise chose, mais il se peut que ce ne soit pas ce que vous vouliez — le plus souvent vous voudrez exécuter un bloc de code <em>ou</em> l'autre, et non les deux.</p>
+Cependant, vous devez faire attention ici — dans ce cas, le deuxième bloc de code n'est pas controlé par l'instruction conditionnelle, donc il sera **toujours** exécuté, que la condition ait renvoyé `true` ou `false`. Ce n'est pas nécessairement une mauvaise chose, mais il se peut que ce ne soit pas ce que vous vouliez — le plus souvent vous voudrez exécuter un bloc de code *ou* l'autre, et non les deux.
 
-<p>Une dernière remarque, vous verrez quelques fois les instructions <code>if...else</code> écrites sans accolades, de manière abrégée, ainsi :</p>
+Une dernière remarque, vous verrez quelques fois les instructions `if...else` écrites sans accolades, de manière abrégée, ainsi :
 
-<pre>if (condition) code à exécuter si la condition est true
-else exécute un autre code à la place</pre>
+    if (condition) code à exécuter si la condition est true
+    else exécute un autre code à la place
 
-<p>Ce code est parfaitement valide, mais il n'est pas recommandé — il est nettement plus facile de lire le code et d'en déduire ce qui se passe si vous utilisez des accolades pour délimiter les blocs de code, des lignes séparées et des indentations.</p>
+Ce code est parfaitement valide, mais il n'est pas recommandé — il est nettement plus facile de lire le code et d'en déduire ce qui se passe si vous utilisez des accolades pour délimiter les blocs de code, des lignes séparées et des indentations.
 
-<h3 id="Un_exemple_concret">Un exemple concret</h3>
+### Un exemple concret
 
-<p>Pour mieux comprendre cette syntaxe, prenons un exemple concret. Imaginez un enfant à qui le père ou la mère demande de l'aide pour une tâche. Le parent pourrait dire « Mon chéri, si tu m'aides en allant faire les courses, je te donnerai un peu plus d'argent de poche pour que tu puisses t'acheter ce jouet que tu voulais ». En JavaScript, on pourrait le représenter de cette manière :</p>
+Pour mieux comprendre cette syntaxe, prenons un exemple concret. Imaginez un enfant à qui le père ou la mère demande de l'aide pour une tâche. Le parent pourrait dire « Mon chéri, si tu m'aides en allant faire les courses, je te donnerai un peu plus d'argent de poche pour que tu puisses t'acheter ce jouet que tu voulais ». En JavaScript, on pourrait le représenter de cette manière :
 
-<pre class="brush: js">let coursesFaites = false;
+```js
+let coursesFaites = false;
 
 if (coursesFaites === true) {
   let argentDePoche = 10;
 } else {
   let argentDePoche = 5;
-}</pre>
+}
+```
 
-<p>Avec un tel code, la variable <code>coursesFaites</code> renvoie toujours <code>false</code>, imaginez la déception de ce pauvre enfant. Il ne tient qu'à nous de fournir un mécanisme pour que le parent assigne <code>true</code> à la variable <code>coursesFaites</code> si l'enfant a fait les courses.</p>
+Avec un tel code, la variable `coursesFaites` renvoie toujours `false`, imaginez la déception de ce pauvre enfant. Il ne tient qu'à nous de fournir un mécanisme pour que le parent assigne `true` à la variable `coursesFaites` si l'enfant a fait les courses.
 
-<div class="note">
-<p><strong>Note :</strong> Vous pouvez voir une <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/allowance-updater.html">version plus complète de cet exemple sur GitHub</a> (ainsi qu'en <a href="http://mdn.github.io/learning-area/javascript/building-blocks/allowance-updater.html">version live</a>.)</p>
-</div>
+> **Note :** Vous pouvez voir une [version plus complète de cet exemple sur GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/allowance-updater.html) (ainsi qu'en [version live](http://mdn.github.io/learning-area/javascript/building-blocks/allowance-updater.html).)
 
-<h3 id="else_if">else if</h3>
+### else if
 
-<p>Il n'y a qu'une alternative dans l'exemple précédent — mais qu'en est‑il si l'on souhaite plus de choix ?</p>
+Il n'y a qu'une alternative dans l'exemple précédent — mais qu'en est‑il si l'on souhaite plus de choix ?
 
-<p>Il existe un moyen d'enchaîner des choix / résultats supplémentaires à <code>if...else</code> — en utilisant <code>else if</code> entre. Chaque choix supplémentaire nécessite un bloc additionnel à placer entre <code>if() { ... }</code> et <code>else { ... }</code> — regardez l'exemple suivant plus élaboré, qui pourrait faire partie d'une simple application de prévisions météo:</p>
+Il existe un moyen d'enchaîner des choix / résultats supplémentaires à `if...else` — en utilisant `else if` entre. Chaque choix supplémentaire nécessite un bloc additionnel à placer entre `if() { ... }` et `else { ... }` — regardez l'exemple suivant plus élaboré, qui pourrait faire partie d'une simple application de prévisions météo:
 
-<pre class="brush: html">&lt;label for="weather"&gt;Select the weather type today: &lt;/label&gt;
-&lt;select id="weather"&gt;
-  &lt;option value=""&gt;--Make a choice--&lt;/option&gt;
-  &lt;option value="sunny"&gt;Sunny&lt;/option&gt;
-  &lt;option value="rainy"&gt;Rainy&lt;/option&gt;
-  &lt;option value="snowing"&gt;Snowing&lt;/option&gt;
-  &lt;option value="overcast"&gt;Overcast&lt;/option&gt;
-&lt;/select&gt;
+```html
+<label for="weather">Select the weather type today: </label>
+<select id="weather">
+  <option value="">--Make a choice--</option>
+  <option value="sunny">Sunny</option>
+  <option value="rainy">Rainy</option>
+  <option value="snowing">Snowing</option>
+  <option value="overcast">Overcast</option>
+</select>
 
-&lt;p&gt;&lt;/p&gt;</pre>
+<p></p>
+```
 
-<pre class="brush: js">const select = document.querySelector('select');
+```js
+const select = document.querySelector('select');
 const para = document.querySelector('p');
 
 select.addEventListener('change', setWeather);
@@ -139,178 +149,188 @@ function setWeather() {
   } else {
     para.textContent = '';
   }
-}</pre>
+}
+```
 
-<p>{{ EmbedLiveSample('else_if', '100%', 100) }}</p>
+{{ EmbedLiveSample('else_if', '100%', 100) }}
 
-<ol>
- <li>Ici nous avons l'élément HTML {{htmlelement("select")}} nous permettant de sélectionner divers choix de temps et un simple paragraphe.</li>
- <li>Dans le JavaScript, nous conservons une référence aussi bien à l'élément {{htmlelement("select")}} qu'à l'élément {{htmlelement("p")}}, et ajoutons un écouteur d'évènement à l'élément <code>&lt;select&gt;</code> de sorte que la fonction <code>setWeather()</code> soit exécutée quand sa valeur change.</li>
- <li>Quand cette fonction est exécutée, nous commençons par assigner à la variable <code>choice</code> la valeur actuellement sélectionnée dans l'élément <code>&lt;select&gt;</code>. Nous utilisons ensuite une instruction conditionnelle pour montrer différents textes dans le paragraphe en fonction de la valeur de <code>choice</code>. Remarquez comment toutes les conditions sont testées avec des blocs <code>else if() {...}</code>, mis à part le tout premier testé avec un  <code>bloc if() {...}</code>.</li>
- <li>Le tout dernier choix, à l'intérieur du bloc <code>else {...}</code>, est simplement une option de "secours" — le code qui s'y trouve ne sera exécuté que si aucune des conditions n'est <code>true</code>. Dans ce cas, il faut vider le texte du paragraphe si rien n'est sélectionné, par exemple si un utilisateur décide de resélectionner le texte à substituer « --Choisir-- » présenté au début.</li>
-</ol>
+1.  Ici nous avons l'élément HTML {{htmlelement("select")}} nous permettant de sélectionner divers choix de temps et un simple paragraphe.
+2.  Dans le JavaScript, nous conservons une référence aussi bien à l'élément {{htmlelement("select")}} qu'à l'élément {{htmlelement("p")}}, et ajoutons un écouteur d'évènement à l'élément `<select>` de sorte que la fonction `setWeather()` soit exécutée quand sa valeur change.
+3.  Quand cette fonction est exécutée, nous commençons par assigner à la variable `choice` la valeur actuellement sélectionnée dans l'élément `<select>`. Nous utilisons ensuite une instruction conditionnelle pour montrer différents textes dans le paragraphe en fonction de la valeur de `choice`. Remarquez comment toutes les conditions sont testées avec des blocs `else if() {...}`, mis à part le tout premier testé avec un  `bloc if() {...}`.
+4.  Le tout dernier choix, à l'intérieur du bloc `else {...}`, est simplement une option de "secours" — le code qui s'y trouve ne sera exécuté que si aucune des conditions n'est `true`. Dans ce cas, il faut vider le texte du paragraphe si rien n'est sélectionné, par exemple si un utilisateur décide de resélectionner le texte à substituer « --Choisir-- » présenté au début.
 
-<div class="note">
-<p><strong>Note :</strong> Vous trouverez également <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-else-if.html">cet exemple sur GitHub</a> (ainsi qu'en <a href="http://mdn.github.io/learning-area/javascript/building-blocks/simple-else-if.html">version live</a> ici.)</p>
-</div>
+> **Note :** Vous trouverez également [cet exemple sur GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-else-if.html) (ainsi qu'en [version live](http://mdn.github.io/learning-area/javascript/building-blocks/simple-else-if.html) ici.)
 
-<h3 id="Une_note_sur_les_opérateurs_de_comparaison">Une note sur les opérateurs de comparaison</h3>
+### Une note sur les opérateurs de comparaison
 
-<p>Les opérateurs de comparaison sont utilisés pour tester les conditions dans nos instructions conditionnelles. Nous avons d'abord regardé les opérateurs de comparaison dans notre <a href="/fr/docs/Learn/JavaScript/First_steps/Math#Opérateurs_de_comparaison">Mathématiques de base en JavaScript — nombres et opérateurs</a> article. Nos choix sont :</p>
+Les opérateurs de comparaison sont utilisés pour tester les conditions dans nos instructions conditionnelles. Nous avons d'abord regardé les opérateurs de comparaison dans notre [Mathématiques de base en JavaScript — nombres et opérateurs](/fr/docs/Learn/JavaScript/First_steps/Math#Opérateurs_de_comparaison) article. Nos choix sont :
 
-<ul>
- <li><code>===</code> et <code>!==</code> — teste si une valeur est identique ou non à une autre.</li>
- <li><code>&lt;</code> and <code>&gt;</code> —teste si une valeur est inférieure ou non à une autre.</li>
- <li><code>&lt;=</code> and <code>&gt;=</code> — teste si une valeur est inférieur ou égal, ou égal à, ou supérieur ou égal à une autre.</li>
-</ul>
+- `===` et `!==` — teste si une valeur est identique ou non à une autre.
+- `<` and `>` —teste si une valeur est inférieure ou non à une autre.
+- `<=` and `>=` — teste si une valeur est inférieur ou égal, ou égal à, ou supérieur ou égal à une autre.
 
-<div class="note">
-<p><strong>Note :</strong> Revoyez le contenu du lien précédent si vous voulez vous rafraîchir la mémoire.</p>
-</div>
+> **Note :** Revoyez le contenu du lien précédent si vous voulez vous rafraîchir la mémoire.
 
-<p>Nous souhaitons mentionner à propos des tests des valeurs booléennes (<code>true</code>/<code>false</code>) un modèle courant que vous rencontrerez souvent. Toute valeur autre que <code>false</code>, <code>undefined</code>, <code>null</code>, <code>0</code>, <code>NaN</code> ou une chaîne vide  (<code>''</code>) renvoie <code>true</code> lorsqu'elle est testée dans une structure conditionnelle, vous pouvez donc simplement utiliser un nom de variable pour tester si elle est <code>true</code>, ou même si elle existe (c'est-à-dire si elle n'est pas <code>undefined</code>).<br>
- Par exemple :</p>
+Nous souhaitons mentionner à propos des tests des valeurs booléennes (`true`/`false`) un modèle courant que vous rencontrerez souvent. Toute valeur autre que `false`, `undefined`, `null`, `0`, `NaN` ou une chaîne vide  (`''`) renvoie `true` lorsqu'elle est testée dans une structure conditionnelle, vous pouvez donc simplement utiliser un nom de variable pour tester si elle est `true`, ou même si elle existe (c'est-à-dire si elle n'est pas `undefined`).
+Par exemple :
 
-<pre class="brush: js">const fromage = 'Comté';
+```js
+const fromage = 'Comté';
 
 if (fromage) {
   console.log('Ouaips ! Du fromage pour mettre sur un toast.');
 } else {
   console.log('Pas de fromage sur le toast pour vous aujourd\'hui.');
-}</pre>
+}
+```
 
-<p>Et, revenant à notre exemple précédent sur l'enfant rendant service à ses parents, vous pouvez l'écrire ainsi :</p>
+Et, revenant à notre exemple précédent sur l'enfant rendant service à ses parents, vous pouvez l'écrire ainsi :
 
-<pre class="brush: js">let coursesFaites = false;
+```js
+let coursesFaites = false;
 
 if (coursesFaites) { // pas besoin d'écrire explicitement '=== true'
   let argentDePoche = 10;
 } else {
   let argentDePoche = 5;
-}</pre>
+}
+```
 
-<h3 id="if_..._else_imbriqué"> if ... else imbriqué</h3>
+###  if ... else imbriqué
 
-<p>Il est parfaitement correct d'ajouter une déclaration <code>if...else</code> à l'intérieur d'une autre — pour les imbriquer. Par exemple, nous pourrions mettre à jour notre application de prévisions météo pour montrer un autre ensemble de choix en fonction de la température :</p>
+Il est parfaitement correct d'ajouter une déclaration `if...else` à l'intérieur d'une autre — pour les imbriquer. Par exemple, nous pourrions mettre à jour notre application de prévisions météo pour montrer un autre ensemble de choix en fonction de la température :
 
-<pre class="brush: js">if (choice === 'sunny') {
-  if (temperature &lt; 86) {
+```js
+if (choice === 'sunny') {
+  if (temperature < 86) {
     para.textContent = 'Il fait ' + temperature + ' degrés dehors — beau et ensoleillé. Allez à la plage ou au parc et achetez une crème glacée.';
-  } else if (temperature &gt;= 86) {
+  } else if (temperature >= 86) {
     para.textContent = 'Il fait ' + temperature + ' degrés dehors — VRAIMENT CHAUD ! si vous voulez sortir, n\'oubliez pas de mettre de la crème solaire.';
   }
-}</pre>
+}
+```
 
-<p>Même si tout le code fonctionne ensemble, chaque déclaration <code>if...else</code> fonctionne indépendamment de l'autre.</p>
+Même si tout le code fonctionne ensemble, chaque déclaration `if...else` fonctionne indépendamment de l'autre.
 
-<h3 id="Opérateurs_logiques_AND_OR_et_NOT">Opérateurs logiques AND, OR et NOT</h3>
+### Opérateurs logiques AND, OR et NOT
 
-<p>Si vous voulez tester plusieurs conditions sans imbriquer des instructions <code>if...else</code> , les <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_logiques">opérateurs logiques</a> pourront vous rendre service. Quand ils sont utilisés dans des conditions, les deux premiers sont représentés comme ci dessous :</p>
+Si vous voulez tester plusieurs conditions sans imbriquer des instructions `if...else` , les [opérateurs logiques](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_logiques) pourront vous rendre service. Quand ils sont utilisés dans des conditions, les deux premiers sont représentés comme ci dessous :
 
-<ul>
- <li><code>&amp;&amp;</code> — AND ; vous permet d'enchaîner deux ou plusieurs expressions de sorte que toutes doivent être individuellement égales à <code>true</code> pour que l'enemble de l'expression retourne <code>true</code>.</li>
- <li><code>||</code> — OR ; vous permet d'enchaîner deux ou plusieurs expressions ensemble de sorte qu'il suffit qu'une au plus soit évaluée comme étant  <code>true</code> pour que l'ensemble de l'expression renvoie <code>true</code>.</li>
-</ul>
+- `&&` — AND ; vous permet d'enchaîner deux ou plusieurs expressions de sorte que toutes doivent être individuellement égales à `true` pour que l'enemble de l'expression retourne `true`.
+- `||` — OR ; vous permet d'enchaîner deux ou plusieurs expressions ensemble de sorte qu'il suffit qu'une au plus soit évaluée comme étant  `true` pour que l'ensemble de l'expression renvoie `true`.
 
-<p>Pour vous donner un exemple de AND, le morceau de code précedent peut être réécrit ainsi :</p>
+Pour vous donner un exemple de AND, le morceau de code précedent peut être réécrit ainsi :
 
-<pre class="brush: js">if (choice === 'sunny' &amp;&amp; temperature &lt; 86) {
+```js
+if (choice === 'sunny' && temperature < 86) {
   para.textContent = 'Il fait ' + temperature + ' degrés dehors — beau temps ensoleillé. Allez à la plage ou au parc et achetez une crème glacée.';
-} else if (choice === 'sunny' &amp;&amp; temperature &gt;= 86) {
+} else if (choice === 'sunny' && temperature >= 86) {
   para.textContent = 'Il fait ' + temperature + ' degrés dehors — VRAIMENT CHAUD ! Si vous voulez sortir, assurez‑vous d'avoir passé une crème solaire.';
-}</pre>
+}
+```
 
-<p>Ainsi, par exemple, le premier bloc de code ne sera exécuté que si <code>choice === 'sunny'</code> <em>ET</em> <code>temperature &lt; 86</code> renvoient tous deux <code>true</code>.</p>
+Ainsi, par exemple, le premier bloc de code ne sera exécuté que si `choice === 'sunny'` _ET_ `temperature < 86` renvoient tous deux `true`.
 
-<p>Voyons un petit exemple avec OR :</p>
+Voyons un petit exemple avec OR :
 
-<pre class="brush: js">if (camionDeGlaces || etatDeLaMaison === 'on fire') {
+```js
+if (camionDeGlaces || etatDeLaMaison === 'on fire') {
   console.log('Vous devriez sortir de la maison rapidement.');
 } else {
   console.log('Vous pouvez probablement rester dedans.');
-}</pre>
+}
+```
 
-<p>Le dernier type d'opérateur logique, NOT, exprimé par l'opérateur <code>!</code>,  peut s'utiliser pour nier une expression. Combinons‑le avec OR dans cet exemple :</p>
+Le dernier type d'opérateur logique, NOT, exprimé par l'opérateur `!`,  peut s'utiliser pour nier une expression. Combinons‑le avec OR dans cet exemple :
 
-<pre class="brush: js">if (!(camionDeGlaces || etatDeLaMaison === 'on fire')) {
+```js
+if (!(camionDeGlaces || etatDeLaMaison === 'on fire')) {
   console.log('Vous pouvez probablement rester dedans.');
 } else {
   console.log('Vous devriez sortir de la maison rapidement.');
-}</pre>
+}
+```
 
-<p>Dans cet extrait, si la déclaration avec OR renvoie <code>true</code>, l'opérateur NOT va nier l'ensemble : l'expression retournera donc <code>false</code>.</p>
+Dans cet extrait, si la déclaration avec OR renvoie `true`, l'opérateur NOT va nier l'ensemble : l'expression retournera donc `false`.
 
-<p>Vous pouvez combiner autant d'instructions logiques que vous le souhaitez, quelle que soit la structure. L'exemple suivant n'exécute le code entre accolades que si les deux instructions OR renvoient true, l'instruction AND recouvrante renvoie alors <code>true</code> :</p>
+Vous pouvez combiner autant d'instructions logiques que vous le souhaitez, quelle que soit la structure. L'exemple suivant n'exécute le code entre accolades que si les deux instructions OR renvoient true, l'instruction AND recouvrante renvoie alors `true` :
 
-<pre class="brush: js">if ((x === 5 || y &gt; 3 || z &lt;= 10) &amp;&amp; (loggedIn || userName === 'Steve')) {
+```js
+if ((x === 5 || y > 3 || z <= 10) && (loggedIn || userName === 'Steve')) {
   // exécuter le code
-}</pre>
+}
+```
 
-<p>Une erreur fréquente avec l'opérateur OR dans des instructions conditionnelles est de n'indiquer la variable dont vous testez la valeur qu'une fois, puis de donner une liste de valeurs sensées renvoyer <code>true</code> séparées par des || (OR) opérateurs. Par exemple :</p>
+Une erreur fréquente avec l'opérateur OR dans des instructions conditionnelles est de n'indiquer la variable dont vous testez la valeur qu'une fois, puis de donner une liste de valeurs sensées renvoyer `true` séparées par des || (OR) opérateurs. Par exemple :
 
-<pre class="example-bad brush: js">if (x === 5 || 7 || 10 || 20) {
+```js example-bad
+if (x === 5 || 7 || 10 || 20) {
   // exécuter le code
-}</pre>
+}
+```
 
-<p>Dans ce cas, la condition dans le <code>if(...) </code>sera toujours évaluée à vrai puisque 7 (ou toute autre valeur non nulle) est toujours <code>true</code>. Cette condition dit en réalité « si x est égal à 5, ou bien 7 est vrai » — ce qui est toujours le cas. Ce n'est pas ce que nous voulons logiquement ! Pour que cela fonctionne, vous devez définir un test complet entre chaque opérateur OR :</p>
+Dans ce cas, la condition dans le `if(...) `sera toujours évaluée à vrai puisque 7 (ou toute autre valeur non nulle) est toujours `true`. Cette condition dit en réalité « si x est égal à 5, ou bien 7 est vrai » — ce qui est toujours le cas. Ce n'est pas ce que nous voulons logiquement ! Pour que cela fonctionne, vous devez définir un test complet entre chaque opérateur OR :
 
-<pre class="brush: js">if (x === 5 || x === 7 || x === 10 ||x === 20) {
+```js
+if (x === 5 || x === 7 || x === 10 ||x === 20) {
   // exécuter le code
-}</pre>
+}
+```
 
-<h2 id="Instruction_switch">Instruction switch</h2>
+## Instruction switch
 
-<p>Les Instructions <code>if...else</code>  font bien le travail d'aiguiller la programmation selon des conditions, mais elles ne sont pas sans inconvénient. Elles sont principalement adaptées aux cas où vous avez un choix binaire, chacun nécessitant une quantité raisonnable de code à exécuter, et/ou au cas où les conditions sont complexes (par ex. plusieurs opérateurs logiques). Si vous voulez juste fixer la valeur d'une variable à un choix donné ou afficher une déclaration particulière en fonction d'une condition, cette syntaxe peut devenir un peu lourde, surtout si le nombre de choix est important.</p>
+Les Instructions `if...else`  font bien le travail d'aiguiller la programmation selon des conditions, mais elles ne sont pas sans inconvénient. Elles sont principalement adaptées aux cas où vous avez un choix binaire, chacun nécessitant une quantité raisonnable de code à exécuter, et/ou au cas où les conditions sont complexes (par ex. plusieurs opérateurs logiques). Si vous voulez juste fixer la valeur d'une variable à un choix donné ou afficher une déclaration particulière en fonction d'une condition, cette syntaxe peut devenir un peu lourde, surtout si le nombre de choix est important.
 
-<p>Les <a href="/fr/docs/Web/JavaScript/Reference/Instructions/switch">instructions switch</a> sont vos amies — elles prennent une seule valeur ou expression en entrée, puis examinent une palette de choix jusqu'à trouver celui qui correspond, et exécutent le code qui va avec. Voici un peu de pseudo-code, pour vous donner l'idée :</p>
+Les [instructions switch](/fr/docs/Web/JavaScript/Reference/Instructions/switch) sont vos amies — elles prennent une seule valeur ou expression en entrée, puis examinent une palette de choix jusqu'à trouver celui qui correspond, et exécutent le code qui va avec. Voici un peu de pseudo-code, pour vous donner l'idée :
 
-<pre class="brush: js"><strong>switch (expression) {</strong>
-  <strong>case</strong> choix1<strong>:</strong>
+```js
+switch (expression) {
+  case choix1:
     exécuter ce code
-    <strong>break;</strong>
+    break;
 
-  <strong>case</strong> choix2<strong>:</strong>
+  case choix2:
     exécuter ce code à la place
-    <strong>break;</strong>
+    break;
 
-  // incorporez autant de <strong>case</strong> que vous le souhaitez
+  // incorporez autant de case que vous le souhaitez
 
-  <strong>default:</strong>
+  default:
     sinon, exécutez juste ce code
-<strong>}</strong></pre>
-
-<p>Ici nous avons</p>
-
-<ol>
- <li>Le mot‑clé <code>switch</code> suivi de parenthèses.</li>
- <li>Une expression ou une valeur mise entre les parenthèses.</li>
- <li>Le mot‑clé <code>case</code> suivi d'une expression ou d'une valeur, et de deux‑points.</li>
- <li>Le code exécuté si l'expression/valeur de <code>case</code> correspond à celles de <code>switch</code>.</li>
- <li>Une déclaration <code>break</code>, suivie d'un point‑virgule. Si le choix précédent correspond à l'expression/valeur, le navigateur va stopper l'exécution du bloc de code ici et continuer après l'instruction <strong>switch</strong>.</li>
- <li>Vous pouvez rajouter autant de <strong>cas</strong> que vous le souhaitez. (points 3–5)</li>
- <li>Le mot‑clé <code>default</code>,  suivi d'une même structure de code qu'aux points 3-5, sauf que <code>default</code> n'a pas de choix après lui et n'a donc pas besoin de l'instruction <code>break</code>  puisqu'il n'y a plus rien à exécuter après ce bloc. C'est l'option <code>default</code> qui sera exécutée si aucun choix ne correspond.</li>
-</ol>
-
-<div class="note">
-<p><strong>Note :</strong> Vous n'avez pas à inclure la section  <code>default</code> — elle peut être omise en toute sécurité s'il n'y a aucune chance que l'expression finisse par égaler une valeur inconnue. À contrario, vous devez l'inclure s'il est possible qu'il y ait des cas inconnus.</p>
-</div>
+}
+```
+
+Ici nous avons
 
-<h3 id="Un_exemple_de_switch">Un exemple de switch</h3>
+1.  Le mot‑clé `switch` suivi de parenthèses.
+2.  Une expression ou une valeur mise entre les parenthèses.
+3.  Le mot‑clé `case` suivi d'une expression ou d'une valeur, et de deux‑points.
+4.  Le code exécuté si l'expression/valeur de `case` correspond à celles de `switch`.
+5.  Une déclaration `break`, suivie d'un point‑virgule. Si le choix précédent correspond à l'expression/valeur, le navigateur va stopper l'exécution du bloc de code ici et continuer après l'instruction **switch**.
+6.  Vous pouvez rajouter autant de **cas** que vous le souhaitez. (points 3–5)
+7.  Le mot‑clé `default`,  suivi d'une même structure de code qu'aux points 3-5, sauf que `default` n'a pas de choix après lui et n'a donc pas besoin de l'instruction `break`  puisqu'il n'y a plus rien à exécuter après ce bloc. C'est l'option `default` qui sera exécutée si aucun choix ne correspond.
 
-<p>Voyons un exemple concret — nous allons réécrire notre application de prévision météo en utilisant une instruction <code>switch</code> à la place :</p>
+> **Note :** Vous n'avez pas à inclure la section  `default` — elle peut être omise en toute sécurité s'il n'y a aucune chance que l'expression finisse par égaler une valeur inconnue. À contrario, vous devez l'inclure s'il est possible qu'il y ait des cas inconnus.
 
-<pre class="brush: html">&lt;label for="weather"&gt;Select the weather type today: &lt;/label&gt;
-&lt;select id="weather"&gt;
-  &lt;option value=""&gt;--Make a choice--&lt;/option&gt;
-  &lt;option value="sunny"&gt;Sunny&lt;/option&gt;
-  &lt;option value="rainy"&gt;Rainy&lt;/option&gt;
-  &lt;option value="snowing"&gt;Snowing&lt;/option&gt;
-  &lt;option value="overcast"&gt;Overcast&lt;/option&gt;
-&lt;/select&gt;
+### Un exemple de switch
 
-&lt;p&gt;&lt;/p&gt;</pre>
+Voyons un exemple concret — nous allons réécrire notre application de prévision météo en utilisant une instruction `switch` à la place :
 
-<pre class="brush: js">const select = document.querySelector('select');
+```html
+<label for="weather">Select the weather type today: </label>
+<select id="weather">
+  <option value="">--Make a choice--</option>
+  <option value="sunny">Sunny</option>
+  <option value="rainy">Rainy</option>
+  <option value="snowing">Snowing</option>
+  <option value="overcast">Overcast</option>
+</select>
+
+<p></p>
+```
+
+```js
+const select = document.querySelector('select');
 const para = document.querySelector('p');
 
 select.addEventListener('change', setWeather);
@@ -335,39 +355,43 @@ function setWeather() {
     default:
       para.textContent = '';
   }
-}</pre>
+}
+```
 
-<p>{{ EmbedLiveSample('Un_exemple_de_switch', '100%', 100) }}</p>
+{{ EmbedLiveSample('Un_exemple_de_switch', '100%', 100) }}
 
-<div class="note">
-<p><strong>Note :</strong> Vous trouverez également cet <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-switch.html">exemple sur GitHub</a> (voyez‑le en <a href="http://mdn.github.io/learning-area/javascript/building-blocks/simple-switch.html">cours d'exécution </a>ici aussi.)</p>
-</div>
+> **Note :** Vous trouverez également cet [exemple sur GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-switch.html) (voyez‑le en [cours d'exécution ](http://mdn.github.io/learning-area/javascript/building-blocks/simple-switch.html)ici aussi.)
 
-<h2 id="Opérateur_ternaire">Opérateur ternaire</h2>
+## Opérateur ternaire
 
-<p>Voici une dernière syntaxe que nous souhaitons vous présenter avant de nous amuser avec quelques exemples. L'<a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_conditionnel">opérateur ternaire ou conditionnel</a> est un petit morceau de code qui teste une condition et renvoie une valeur ou expression si elle est <code>true</code> et une autre si elle est <code>false</code> — elle est utile dans certains cas, et occupe moins de place qu'un bloc <code>if...else</code> si votre choix est limité à deux possibilités à choisir via une condition <code>true</code>/<code>false</code>. Voici le pseudo‑code correspondant :</p>
+Voici une dernière syntaxe que nous souhaitons vous présenter avant de nous amuser avec quelques exemples. L'[opérateur ternaire ou conditionnel](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_conditionnel) est un petit morceau de code qui teste une condition et renvoie une valeur ou expression si elle est `true` et une autre si elle est `false` — elle est utile dans certains cas, et occupe moins de place qu'un bloc `if...else` si votre choix est limité à deux possibilités à choisir via une condition `true`/`false`. Voici le pseudo‑code correspondant :
 
-<pre>( condition ) ? exécuter ce code : exécuter celui‑ci à la place</pre>
+    ( condition ) ? exécuter ce code : exécuter celui‑ci à la place
 
-<p>Regardons cet exemple simple :</p>
+Regardons cet exemple simple :
 
-<pre class="brush: js">let formuleDePolitesse = ( est_anniversaire ) ? 'Bon anniversaire Mme Smith — nous vous souhaitons une belle journée !' : 'Bonjour Mme Smith.';</pre>
+```js
+let formuleDePolitesse = ( est_anniversaire ) ? 'Bon anniversaire Mme Smith — nous vous souhaitons une belle journée !' : 'Bonjour Mme Smith.';
+```
 
-<p>Ici, nous avons une variable nommée <code>est_anniversaire</code> — si elle est <code>true</code>, nous adressons à notre hôte un message de « Bon anniversaire » ; si ce n'est pas le cas, c'est-à-dire si <code>est_anniversaire</code> renvoie <code>false</code>, nous disons simplement « Bonjour ».</p>
+Ici, nous avons une variable nommée `est_anniversaire` — si elle est `true`, nous adressons à notre hôte un message de « Bon anniversaire » ; si ce n'est pas le cas, c'est-à-dire si `est_anniversaire` renvoie `false`, nous disons simplement « Bonjour ».
 
-<h3 id="Exemple_opérateur_ternaire">Exemple opérateur ternaire</h3>
+### Exemple opérateur ternaire
 
-<p>L'opérateur ternaire ne sert pas qu'à définir des valeurs de variables ; vous pouvez aussi exécuter des fonctions, ou des lignes de code — ce que vous voulez. Voici un exemple concret de choix de thème où le style du site est déterminé grâce à un opérateur ternaire.</p>
+L'opérateur ternaire ne sert pas qu'à définir des valeurs de variables ; vous pouvez aussi exécuter des fonctions, ou des lignes de code — ce que vous voulez. Voici un exemple concret de choix de thème où le style du site est déterminé grâce à un opérateur ternaire.
 
-<pre class="brush: html">&lt;label for="theme"&gt;Select theme: &lt;/label&gt;
-&lt;select id="theme"&gt;
-  &lt;option value="white"&gt;White&lt;/option&gt;
-  &lt;option value="black"&gt;Black&lt;/option&gt;
-&lt;/select&gt;
+```html
+<label for="theme">Select theme: </label>
+<select id="theme">
+  <option value="white">White</option>
+  <option value="black">Black</option>
+</select>
 
-&lt;h1&gt;This is my website&lt;/h1&gt;</pre>
+<h1>This is my website</h1>
+```
 
-<pre class="brush: js">const select = document.querySelector('select');
+```js
+const select = document.querySelector('select');
 const html = document.querySelector('html');
 document.body.style.padding = '10px';
 
@@ -379,69 +403,62 @@ function update(bgColor, textColor) {
 select.onchange = function() {
   ( select.value === 'black' ) ? update('black','white') : update('white','black');
 }
-</pre>
+```
 
-<p>{{ EmbedLiveSample('Exemple_opérateur_ternaire', '100%', 300, "", "", "hide-codepen-jsfiddle") }}</p>
+{{ EmbedLiveSample('Exemple_opérateur_ternaire', '100%', 300, "", "", "hide-codepen-jsfiddle") }}
 
-<p>Nous mettons un élément {{htmlelement('select')}} pour choisir un thème (noir ou blanc), plus un simple élément {{htmlelement('h1')}} pour afficher un titre de site web. Nous avons aussi une fonction <code>update()</code>, qui prend deux couleurs en paramètre (entrées). La couleur de fond du site est déterminée par la couleur indiquée dans le premier paramètre fourni, et la couleur du texte par le deuxième.</p>
+Nous mettons un élément {{htmlelement('select')}} pour choisir un thème (noir ou blanc), plus un simple élément {{htmlelement('h1')}} pour afficher un titre de site web. Nous avons aussi une fonction `update()`, qui prend deux couleurs en paramètre (entrées). La couleur de fond du site est déterminée par la couleur indiquée dans le premier paramètre fourni, et la couleur du texte par le deuxième.
 
-<p>Nous avons également mis un écouteur d'événement <a href="/fr/docs/Web/API/GlobalEventHandlers/onchange">onchange</a> qui sert à exécuter une fonction contenant un opérateur ternaire. Il débute par un test de condition — <code>select.value === 'black'</code>. Si le test renvoie <code>true</code>, nous exécutons la fonction <code>update()</code> avec les paramètres blanc et noir : cela signifie que le fond sera noir et le texte blanc. S'il renvoie <code>false</code>, nous exécutons <code>update()</code> avec les paramètres noir et blanc, les couleurs du site seront inversées.</p>
+Nous avons également mis un écouteur d'événement [onchange](/fr/docs/Web/API/GlobalEventHandlers/onchange) qui sert à exécuter une fonction contenant un opérateur ternaire. Il débute par un test de condition — `select.value === 'black'`. Si le test renvoie `true`, nous exécutons la fonction `update()` avec les paramètres blanc et noir : cela signifie que le fond sera noir et le texte blanc. S'il renvoie `false`, nous exécutons `update()` avec les paramètres noir et blanc, les couleurs du site seront inversées.
 
-<div class="note">
-<p><strong>Note :</strong> Vous trouverez également cet <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-ternary.html">exemple sur GitHub</a> (voyez‑le en <a href="http://mdn.github.io/learning-area/javascript/building-blocks/simple-ternary.html">cours d'exécution </a>ici aussi.)</p>
-</div>
+> **Note :** Vous trouverez également cet [exemple sur GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-ternary.html) (voyez‑le en [cours d'exécution ](http://mdn.github.io/learning-area/javascript/building-blocks/simple-ternary.html)ici aussi.)
 
-<h2 id="Apprentissage_actif_un_calendrier_simple">Apprentissage actif : un calendrier simple</h2>
+## Apprentissage actif : un calendrier simple
 
-<p>Dans cet exemple nous allons vous aider à finaliser une application de calendrier simple. Dans le code, vous avez :</p>
+Dans cet exemple nous allons vous aider à finaliser une application de calendrier simple. Dans le code, vous avez :
 
-<ul>
- <li>Un élément {{htmlelement("select")}} permettant à l'utilisateur de choisir un mois.</li>
- <li>Un pilote d'événement <code>onchange</code> pour détecter si la valeur choisie dans le menu <code>&lt;select&gt;</code> a été modifiée.</li>
- <li>Une fonction <code>createCalendar()</code> qui trace le calendrier et affiche le mois voulu dans l'élément {{htmlelement("h1")}}.</li>
-</ul>
+- Un élément {{htmlelement("select")}} permettant à l'utilisateur de choisir un mois.
+- Un pilote d'événement `onchange` pour détecter si la valeur choisie dans le menu `<select>` a été modifiée.
+- Une fonction `createCalendar()` qui trace le calendrier et affiche le mois voulu dans l'élément {{htmlelement("h1")}}.
 
-<p>Vous aurez besoin d'écrire une instruction conditionnelle dans la fonction <code>onchange</code>, juste au dessous du commentaire <code>// AJOUTER LA CONDITION ICI</code>. Elle doit :</p>
+Vous aurez besoin d'écrire une instruction conditionnelle dans la fonction `onchange`, juste au dessous du commentaire `// AJOUTER LA CONDITION ICI`. Elle doit :
 
-<ol>
- <li>Noter le mois choisi (enregistré dans la variable <code>choice</code>. Ce doit être la valeur de l'élément <code>&lt;select&gt;</code> après un changement, "Janvier" par exemple).</li>
- <li>Faire en sorte que la variable nommée <code>days</code> soit égale au nombre de jours du mois sélectionné. Pour ce faire, examinez le nombre de jours dans chaque mois de l'année. Vous pouvez ignorer les années bissextiles pour les besoins de cet exemple.</li>
-</ol>
+1.  Noter le mois choisi (enregistré dans la variable `choice`. Ce doit être la valeur de l'élément `<select>` après un changement, "Janvier" par exemple).
+2.  Faire en sorte que la variable nommée `days` soit égale au nombre de jours du mois sélectionné. Pour ce faire, examinez le nombre de jours dans chaque mois de l'année. Vous pouvez ignorer les années bissextiles pour les besoins de cet exemple.
 
-<p>Conseils :</p>
+Conseils :
 
-<ul>
- <li>Utilisez un OR logique pour grouper plusieurs mois ensemble dans une même condition, beaucoup d'entre eux ont le même nombre de jours.</li>
- <li>Voyez quel est le nombre de jours le plus courant et utilisez le comme valeur par défaut.</li>
-</ul>
+- Utilisez un OR logique pour grouper plusieurs mois ensemble dans une même condition, beaucoup d'entre eux ont le même nombre de jours.
+- Voyez quel est le nombre de jours le plus courant et utilisez le comme valeur par défaut.
 
-<p>Si vous faites une erreur, vous pouvez toujours réinitialiser l'exemple avec le bouton "Réinitialiser". Si vous êtes vraiment bloqué, pressez "Voir la solution".</p>
+Si vous faites une erreur, vous pouvez toujours réinitialiser l'exemple avec le bouton "Réinitialiser". Si vous êtes vraiment bloqué, pressez "Voir la solution".
 
-<pre class="brush: html hidden">&lt;div class="output" style="height: 500px;overflow: auto;"&gt;
-  &lt;label for="month"&gt;Choisissez un mois : &lt;/label&gt;
-  &lt;select id="month"&gt;
-    &lt;option value="Janvier"&gt;Janvier&lt;/option&gt;
-    &lt;option value="Février"&gt;Février&lt;/option&gt;
-    &lt;option value="Mars"&gt;Mars&lt;/option&gt;
-    &lt;option value="Avril"&gt;Avril&lt;/option&gt;
-    &lt;option value="Mai"&gt;Mai&lt;/option&gt;
-    &lt;option value="Juin"&gt;Juin&lt;/option&gt;
-    &lt;option value="Juillet"&gt;Juillet&lt;/option&gt;
-    &lt;option value="Août"&gt;Août&lt;/option&gt;
-    &lt;option value="Septembre"&gt;Septembre&lt;/option&gt;
-    &lt;option value="Octobre"&gt;Octobre&lt;/option&gt;
-    &lt;option value="Novembre"&gt;Novembre&lt;/option&gt;
-    &lt;option value="Decembre"&gt;Décembre&lt;/option&gt;
-  &lt;/select&gt;
+```html hidden
+<div class="output" style="height: 500px;overflow: auto;">
+  <label for="month">Choisissez un mois : </label>
+  <select id="month">
+    <option value="Janvier">Janvier</option>
+    <option value="Février">Février</option>
+    <option value="Mars">Mars</option>
+    <option value="Avril">Avril</option>
+    <option value="Mai">Mai</option>
+    <option value="Juin">Juin</option>
+    <option value="Juillet">Juillet</option>
+    <option value="Août">Août</option>
+    <option value="Septembre">Septembre</option>
+    <option value="Octobre">Octobre</option>
+    <option value="Novembre">Novembre</option>
+    <option value="Decembre">Décembre</option>
+  </select>
 
-  &lt;h1&gt;&lt;/h1&gt;
+  <h1></h1>
 
-  &lt;ul&gt;&lt;/ul&gt;
-&lt;/div&gt;
+  <ul></ul>
+</div>
 
-&lt;hr&gt;
+<hr>
 
-&lt;textarea id="code" class="playable-code" style="height: 500px;"&gt;
+<textarea id="code" class="playable-code" style="height: 500px;">
 var select = document.querySelector('select');
 var list = document.querySelector('ul');
 var h1 = document.querySelector('h1');
@@ -457,7 +474,7 @@ select.onchange = function() {
 function createCalendar(days, choice) {
   list.innerHTML = '';
   h1.textContent = choice;
-  for (var i = 1; i &lt;= days; i++) {
+  for (var i = 1; i <= days; i++) {
     const listItem = document.createElement('li');
     listItem.textContent = i;
     list.appendChild(listItem);
@@ -465,15 +482,16 @@ function createCalendar(days, choice) {
 }
 
 createCalendar(31,'Janvier');
-&lt;/textarea&gt;
+</textarea>
 
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="reset" type="button" value="Réinitialiser"&gt;
-  &lt;input id="solution" type="button" value="Voir la solution"&gt;
-&lt;/div&gt;
-</pre>
+<div class="playable-buttons">
+  <input id="reset" type="button" value="Réinitialiser">
+  <input id="solution" type="button" value="Voir la solution">
+</div>
+```
 
-<pre class="brush: css hidden">.output * {
+```css hidden
+.output * {
   box-sizing: border-box;
 }
 
@@ -491,9 +509,10 @@ createCalendar(31,'Janvier');
   background-color: #4A2DB6;
   color: white;
 }
-</pre>
+```
 
-<pre class="brush: js hidden">const textarea = document.getElementById('code');
+```js hidden
+const textarea = document.getElementById('code');
 const reset = document.getElementById('reset');
 const solution = document.getElementById('solution');
 let code = textarea.value;
@@ -512,42 +531,41 @@ solution.addEventListener('click', function() {
   updateCode();
 });
 
-var jsSolution = 'var select = document.querySelector(\'select\');\nvar list = document.querySelector(\'ul\');\nvar h1 = document.querySelector(\'h1\');\n\nselect.onchange = function() {\n  var choice = select.value;\n  var days = 31;\n  if(choice === \'February\') {\n    days = 28;\n  } else if(choice === \'April\' || choice === \'June\' || choice === \'September\'|| choice === \'November\') {\n    days = 30;\n  }\n\n  createCalendar(days, choice);\n}\n\nfunction createCalendar(days, choice) {\n  list.innerHTML = \'\';\n  h1.textContent = choice;\n for(var i = 1; i &lt;= days; i++) {\n    var listItem = document.createElement(\'li\');\n    listItem.textContent = i;\n    list.appendChild(listItem);\n  }\n }\n\ncreateCalendar(31,\'January\');';
+var jsSolution = 'var select = document.querySelector(\'select\');\nvar list = document.querySelector(\'ul\');\nvar h1 = document.querySelector(\'h1\');\n\nselect.onchange = function() {\n  var choice = select.value;\n  var days = 31;\n  if(choice === \'February\') {\n    days = 28;\n  } else if(choice === \'April\' || choice === \'June\' || choice === \'September\'|| choice === \'November\') {\n    days = 30;\n  }\n\n  createCalendar(days, choice);\n}\n\nfunction createCalendar(days, choice) {\n  list.innerHTML = \'\';\n  h1.textContent = choice;\n for(var i = 1; i <= days; i++) {\n    var listItem = document.createElement(\'li\');\n    listItem.textContent = i;\n    list.appendChild(listItem);\n  }\n }\n\ncreateCalendar(31,\'January\');';
 
 textarea.addEventListener('input', updateCode);
 window.addEventListener('load', updateCode);
-</pre>
+```
 
-<p>{{ EmbedLiveSample('Apprentissage_actif_un_calendrier_simple', '100%', 1110, "", "", "hide-codepen-jsfiddle") }}</p>
+{{ EmbedLiveSample('Apprentissage_actif_un_calendrier_simple', '100%', 1110, "", "", "hide-codepen-jsfiddle") }}
 
-<h2 id="Activité_plus_de_choix_de_couleurs">Activité : plus de choix de couleurs</h2>
+## Activité : plus de choix de couleurs
 
-<p>Nous allons reprendre l'exemple de l'opérateur ternaire vu plus haut et transformer cet opérateur ternaire en une directive <code>switch</code>  qui nous permettra une plus grande variété de choix pour le site web tout simple. Voyez l'élément {{htmlelement("select")}} — cette fois, il n'y a pas deux options de thème, mais cinq. Il vous faut ajouter une directive <code>switch</code> au dessous du commentaire  <code>// AJOUT D'UNE DIRECTIVE SWITCH</code> :</p>
+Nous allons reprendre l'exemple de l'opérateur ternaire vu plus haut et transformer cet opérateur ternaire en une directive `switch`  qui nous permettra une plus grande variété de choix pour le site web tout simple. Voyez l'élément {{htmlelement("select")}} — cette fois, il n'y a pas deux options de thème, mais cinq. Il vous faut ajouter une directive `switch` au dessous du commentaire  `// AJOUT D'UNE DIRECTIVE SWITCH` :
 
-<ul>
- <li>Elle doit accepter la variable <code>choice</code> comme expression d'entrée.</li>
- <li>Pour chaque cas, le choix doit être égal à une des valeurs possibles pouvant être choisies, c'est-à-dire blanc, noir, mauve, jaune ou psychédélique.</li>
- <li>Chaque cas exécutera la fonction <code>update()</code> à laquelle deux valeurs de couleurs seront passées, la première pour le fond, la seconde pour le texte. Souvenez vous que les valeurs de couleurs sont des chaînes ; elle doivent donc être mises entre guillemets.</li>
-</ul>
+- Elle doit accepter la variable `choice` comme expression d'entrée.
+- Pour chaque cas, le choix doit être égal à une des valeurs possibles pouvant être choisies, c'est-à-dire blanc, noir, mauve, jaune ou psychédélique.
+- Chaque cas exécutera la fonction `update()` à laquelle deux valeurs de couleurs seront passées, la première pour le fond, la seconde pour le texte. Souvenez vous que les valeurs de couleurs sont des chaînes ; elle doivent donc être mises entre guillemets.
 
-<p>Si vous faites une erreur, vous pouvez toujours réinitialiser l'exemple avec le bouton « Réinitialiser ». Si vous êtes vraiment bloqué, pressez « Voir la solution ».</p>
+Si vous faites une erreur, vous pouvez toujours réinitialiser l'exemple avec le bouton « Réinitialiser ». Si vous êtes vraiment bloqué, pressez « Voir la solution ».
 
-<pre class="brush: html hidden">&lt;div class="output" style="height: 300px;"&gt;
-  &lt;label for="theme"&gt;Choisissez un thème : &lt;/label&gt;
-  &lt;select id="theme"&gt;
-    &lt;option value="white"&gt;Blanc&lt;/option&gt;
-    &lt;option value="black"&gt;Noir&lt;/option&gt;
-    &lt;option value="purple"&gt;Mauve&lt;/option&gt;
-    &lt;option value="yellow"&gt;Jaune&lt;/option&gt;
-    &lt;option value="psychedelic"&gt;Psychédélique&lt;/option&gt;
-  &lt;/select&gt;
+```html hidden
+<div class="output" style="height: 300px;">
+  <label for="theme">Choisissez un thème : </label>
+  <select id="theme">
+    <option value="white">Blanc</option>
+    <option value="black">Noir</option>
+    <option value="purple">Mauve</option>
+    <option value="yellow">Jaune</option>
+    <option value="psychedelic">Psychédélique</option>
+  </select>
 
-  &lt;h1&gt;Voici mon site Web&lt;/h1&gt;
-&lt;/div&gt;
+  <h1>Voici mon site Web</h1>
+</div>
 
-&lt;hr&gt;
+<hr>
 
-&lt;textarea id="code" class="playable-code" style="height: 450px;"&gt;
+<textarea id="code" class="playable-code" style="height: 450px;">
 const select = document.querySelector('select');
 const html = document.querySelector('.output');
 
@@ -560,15 +578,16 @@ select.onchange = function() {
 function update(bgColor, textColor) {
   html.style.backgroundColor = bgColor;
   html.style.color = textColor;
-}&lt;/textarea&gt;
+}</textarea>
 
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="reset" type="button" value="Réinitialiser"&gt;
-  &lt;input id="solution" type="button" value="Voir la solution"&gt;
-&lt;/div&gt;
-</pre>
+<div class="playable-buttons">
+  <input id="reset" type="button" value="Réinitialiser">
+  <input id="solution" type="button" value="Voir la solution">
+</div>
+```
 
-<pre class="brush: js hidden">const textarea = document.getElementById('code');
+```js hidden
+const textarea = document.getElementById('code');
 const reset = document.getElementById('reset');
 const solution = document.getElementById('solution');
 let code = textarea.value;
@@ -591,33 +610,29 @@ const jsSolution = 'const select = document.querySelector(\'select\');\nlet html
 
 textarea.addEventListener('input', updateCode);
 window.addEventListener('load', updateCode);
-</pre>
+```
 
-<p>{{ EmbedLiveSample('Activité_plus_de_choix_de_couleurs', '100%', 850) }}</p>
+{{ EmbedLiveSample('Activité_plus_de_choix_de_couleurs', '100%', 850) }}
 
-<h2 id="Conclusion">Conclusion</h2>
+## Conclusion
 
-<p>C'est tout ce qu'il est nécessaire de connaître à propos des structures conditionnelles en JavaScript pour le moment ! Je pense que vous avez assurément compris ces concepts et travaillé les exemples aisément ; s'il y a quelque chose que vous n'avez pas compris, relisez cet article à nouveau, ou bien <a href="/fr/Apprendre#Nous_contacter">contactez‑nous</a> pour une aide.</p>
+C'est tout ce qu'il est nécessaire de connaître à propos des structures conditionnelles en JavaScript pour le moment ! Je pense que vous avez assurément compris ces concepts et travaillé les exemples aisément ; s'il y a quelque chose que vous n'avez pas compris, relisez cet article à nouveau, ou bien [contactez‑nous](/fr/Apprendre#Nous_contacter) pour une aide.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Learn/JavaScript/First_steps/Math#Opérateurs_de_comparaison">Opérateurs de comparaison</a></li>
- <li><a href="/fr/docs/Web/JavaScript/Guide/Contrôle_du_flux_Gestion_des_erreurs#Les_instructions_conditionnelles">Les instructions conditionnelles</a></li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Instructions/if...else">Référence if...else</a></li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_conditionnel">Référence opérateur conditionnel (ternaire)</a></li>
-</ul>
+- [Opérateurs de comparaison](/fr/docs/Learn/JavaScript/First_steps/Math#Opérateurs_de_comparaison)
+- [Les instructions conditionnelles](/fr/docs/Web/JavaScript/Guide/Contrôle_du_flux_Gestion_des_erreurs#Les_instructions_conditionnelles)
+- [Référence if...else](/fr/docs/Web/JavaScript/Reference/Instructions/if...else)
+- [Référence opérateur conditionnel (ternaire)](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_conditionnel)
 
-<p>{{NextMenu("Apprendre/JavaScript/Building_blocks/Looping_code", "Apprendre/JavaScript/Building_blocks")}}</p>
+{{NextMenu("Apprendre/JavaScript/Building_blocks/Looping_code", "Apprendre/JavaScript/Building_blocks")}}
 
-<h2 id="Dans_ce_module">Dans ce module</h2>
+## Dans ce module
 
-<ul>
- <li><a href="/fr/Apprendre/JavaScript/Building_blocks/conditionals">Prendre des décisions dans du code — conditions</a></li>
- <li><a href="/fr/Apprendre/JavaScript/Building_blocks/Looping_code">Les boucles dans le code</a></li>
- <li><a href="/fr/Apprendre/JavaScript/Building_blocks/Fonctions">Fonctions — blocs de code réutilisables</a></li>
- <li><a href="/fr/Apprendre/JavaScript/Building_blocks/Build_your_own_function">Construire vos propres fonctions</a></li>
- <li><a href="/fr/Apprendre/JavaScript/Building_blocks/Return_values">Valeurs de retour des fonctions</a></li>
- <li><a href="/fr/Apprendre/JavaScript/Building_blocks/Ev%C3%A8nements">Introduction aux événements</a></li>
- <li><a href="/fr/Apprendre/JavaScript/Building_blocks/Image_gallery">Gallerie d'images</a></li>
-</ul>
+- [Prendre des décisions dans du code — conditions](/fr/Apprendre/JavaScript/Building_blocks/conditionals)
+- [Les boucles dans le code](/fr/Apprendre/JavaScript/Building_blocks/Looping_code)
+- [Fonctions — blocs de code réutilisables](/fr/Apprendre/JavaScript/Building_blocks/Fonctions)
+- [Construire vos propres fonctions](/fr/Apprendre/JavaScript/Building_blocks/Build_your_own_function)
+- [Valeurs de retour des fonctions](/fr/Apprendre/JavaScript/Building_blocks/Return_values)
+- [Introduction aux événements](/fr/Apprendre/JavaScript/Building_blocks/Ev%C3%A8nements)
+- [Gallerie d'images](/fr/Apprendre/JavaScript/Building_blocks/Image_gallery)
diff --git a/files/fr/learn/javascript/building_blocks/events/index.md b/files/fr/learn/javascript/building_blocks/events/index.md
index b8bd4ba3d6..0f5ea11526 100644
--- a/files/fr/learn/javascript/building_blocks/events/index.md
+++ b/files/fr/learn/javascript/building_blocks/events/index.md
@@ -4,62 +4,71 @@ slug: Learn/JavaScript/Building_blocks/Events
 translation_of: Learn/JavaScript/Building_blocks/Events
 original_slug: Apprendre/JavaScript/Building_blocks/Evènements
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}
 
-<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}</div>
-
-<p>Les événements sont des actions ou des occurrences qui se produisent dans le système que vous programmez et dont le système vous informe afin que vous puissiez y répondre d'une manière ou d'une autre si vous le souhaitez. Par exemple, si l'utilisateur clique sur un bouton d'une page Web, vous pouvez répondre à cette action en affichant une boîte d'information. Dans cet article, nous allons discuter de quelques concepts importants concernant les événements, et regarder comment ils fonctionnent dans les navigateurs. Ce ne sera pas une étude exhaustive; mais seulement ce que vous devez savoir à ce stade.</p>
+Les événements sont des actions ou des occurrences qui se produisent dans le système que vous programmez et dont le système vous informe afin que vous puissiez y répondre d'une manière ou d'une autre si vous le souhaitez. Par exemple, si l'utilisateur clique sur un bouton d'une page Web, vous pouvez répondre à cette action en affichant une boîte d'information. Dans cet article, nous allons discuter de quelques concepts importants concernant les événements, et regarder comment ils fonctionnent dans les navigateurs. Ce ne sera pas une étude exhaustive; mais seulement ce que vous devez savoir à ce stade.
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Prérequis:</th>
-   <td>Connaissances de base en informatique, une compréhension de base de HTML et CSS, <a href="/fr/docs/Learn/JavaScript/First_steps">Premiers pas en JavaScript</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Objectif:</th>
-   <td>Comprendre la théorie fondamentale des événements, comment ils fonctionnent dans les navigateurs et comment les événements peuvent différer dans différents environnements de programmation.</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Prérequis:</th>
+      <td>
+        Connaissances de base en informatique, une compréhension de base de HTML
+        et CSS,
+        <a href="/fr/docs/Learn/JavaScript/First_steps"
+          >Premiers pas en JavaScript</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Objectif:</th>
+      <td>
+        Comprendre la théorie fondamentale des événements, comment ils
+        fonctionnent dans les navigateurs et comment les événements peuvent
+        différer dans différents environnements de programmation.
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Une_série_d'événements_heureux">Une série d'événements heureux</h2>
+## Une série d'événements heureux
 
-<p>Comme mentionné ci-dessus, les événements sont des actions ou des occurrences qui se produisent dans le système que vous programmez — le système déclenche un signal quelconque lorsqu'un événement se produit, et fournit également un mécanisme par lequel une  action est exécutée automatiquement (p.ex. un code en cours d'exécution) lorsque l'événement se produit. Par exemple, dans un aéroport, lorsque la piste est libre pour qu'un avion décolle, un signal est communiqué au pilote et, par conséquent, il commence à piloter l'avion.</p>
+Comme mentionné ci-dessus, les événements sont des actions ou des occurrences qui se produisent dans le système que vous programmez — le système déclenche un signal quelconque lorsqu'un événement se produit, et fournit également un mécanisme par lequel une  action est exécutée automatiquement (p.ex. un code en cours d'exécution) lorsque l'événement se produit. Par exemple, dans un aéroport, lorsque la piste est libre pour qu'un avion décolle, un signal est communiqué au pilote et, par conséquent, il commence à piloter l'avion.
 
-<p><img alt="" src="MDN-mozilla-events-runway.png"></p>
+![](MDN-mozilla-events-runway.png)
 
-<p>Dans le cas du Web, les événements sont déclenchés à l'intérieur de la fenêtre du navigateur et tendent à être rattachés à un élément spécifique qui s'y trouve - il peut s'agir d'un élément unique, d'un ensemble d'éléments, du document HTML chargé dans l'onglet en cours ou toute la fenêtre du navigateur. Il y a beaucoup de types différents d'événements qui peuvent se produire, par exemple :</p>
+Dans le cas du Web, les événements sont déclenchés à l'intérieur de la fenêtre du navigateur et tendent à être rattachés à un élément spécifique qui s'y trouve - il peut s'agir d'un élément unique, d'un ensemble d'éléments, du document HTML chargé dans l'onglet en cours ou toute la fenêtre du navigateur. Il y a beaucoup de types différents d'événements qui peuvent se produire, par exemple :
 
-<ul>
- <li>L'utilisateur clique avec la souris sur un certain élément ou en place le curseur sur un certain élément.</li>
- <li>L'utilisateur appuie sur une touche du clavier.     </li>
- <li>L'utilisateur redimensionne ou ferme la fenêtre du navigateur.     </li>
- <li>Une page web finissant de se charger.     </li>
- <li>Un formulaire en cours de soumission     </li>
- <li>Une vidéo en cours de lecture, en pause ou en fin de lecture.     </li>
- <li>Une erreur qui survient.</li>
-</ul>
+- L'utilisateur clique avec la souris sur un certain élément ou en place le curseur sur un certain élément.
+- L'utilisateur appuie sur une touche du clavier.
+- L'utilisateur redimensionne ou ferme la fenêtre du navigateur.
+- Une page web finissant de se charger.
+- Un formulaire en cours de soumission
+- Une vidéo en cours de lecture, en pause ou en fin de lecture.
+- Une erreur qui survient.
 
-<p>Vous vous en rendrez compte (notamment en jetant un coup d'œil à la section MDN <a href="/fr/docs/Web/Events">Référence des événements</a> ), il y a <strong>beaucoup</strong> d'événements auxquels vous pouvez répondre.<br>
- <br>
- Chaque événement disponible a un <strong>gestionnaire d'événement</strong>, qui est un bloc de code (généralement une fonction JavaScript définie par l'utilisateur) qui sera exécuté lorsque l'événement se déclenchera. Lorsqu'un tel bloc de code est défini pour être exécuté en réponse à un déclenchement d'événement, nous disons que nous <strong>enregistrons un gestionnaire d'événements</strong>. Notez que les gestionnaires d'événements sont parfois appelés <strong>écouteurs d'événements</strong> - ils sont à peu près interchangeables pour ce qui nous concerne, même si à la rigueur, ils fonctionnent ensemble. L'écouteur écoute l'événement qui se produit et le gestionnaire est le code qui est exécuté en réponse à ce qui se passe.</p>
+Vous vous en rendrez compte (notamment en jetant un coup d'œil à la section MDN [Référence des événements](/fr/docs/Web/Events) ), il y a **beaucoup** d'événements auxquels vous pouvez répondre.
 
-<div class="note">
-<p><strong>Note :</strong> il est important de noter que les événements web ne font pas partie du langage du noyau JavaScript — ils sont définis comme faisant partie des APIs JavaScript intégrées du navigateur</p>
-</div>
+Chaque événement disponible a un **gestionnaire d'événement**, qui est un bloc de code (généralement une fonction JavaScript définie par l'utilisateur) qui sera exécuté lorsque l'événement se déclenchera. Lorsqu'un tel bloc de code est défini pour être exécuté en réponse à un déclenchement d'événement, nous disons que nous **enregistrons un gestionnaire d'événements**. Notez que les gestionnaires d'événements sont parfois appelés **écouteurs d'événements** - ils sont à peu près interchangeables pour ce qui nous concerne, même si à la rigueur, ils fonctionnent ensemble. L'écouteur écoute l'événement qui se produit et le gestionnaire est le code qui est exécuté en réponse à ce qui se passe.
+
+> **Note :** il est important de noter que les événements web ne font pas partie du langage du noyau JavaScript — ils sont définis comme faisant partie des APIs JavaScript intégrées du navigateur
 
-<h3 id="Un_exemple_simple">Un exemple simple</h3>
+### Un exemple simple
 
-<p>Regardons un exemple simple pour expliquer ce que nous entendons ici. Vous avez déjà utilisé des événements et des gestionnaires d'événements dans de nombreux exemples de ce cours, mais récapitulons simplement pour consolider nos connaissances. Dans l'exemple suivant, nous avons un {{htmlelement ("bouton")}} unique, qui, lorsqu'il est pressé, fera passer l'arrière-plan à une couleur aléatoire:</p>
+Regardons un exemple simple pour expliquer ce que nous entendons ici. Vous avez déjà utilisé des événements et des gestionnaires d'événements dans de nombreux exemples de ce cours, mais récapitulons simplement pour consolider nos connaissances. Dans l'exemple suivant, nous avons un {{htmlelement ("bouton")}} unique, qui, lorsqu'il est pressé, fera passer l'arrière-plan à une couleur aléatoire:
 
-<pre class="brush: html">&lt;button&gt;Change color&lt;/button&gt;</pre>
+```html
+<button>Change color</button>
+```
 
-<pre class="brush: css hidden">button { margin: 10px };</pre>
+```css hidden
+button { margin: 10px };
+```
 
-<p>Le JavaScript ressemblera à ça :</p>
+Le JavaScript ressemblera à ça :
 
-<pre class="brush: js">var btn = document.querySelector('button');
+```js
+var btn = document.querySelector('button');
 
 function random(number) {
   return Math.floor(Math.random()*(number+1));
@@ -68,228 +77,242 @@ function random(number) {
 btn.onclick = function() {
   var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
   document.body.style.backgroundColor = rndCol;
-}</pre>
+}
+```
+
 
-<p> </p>
 
-<p>Dans ce code, nous stockons une référence au bouton dans une variable appelée btn, en utilisant la fonction {{domxref ("Document.querySelector ()")}}. Nous définissons également une fonction qui renvoie un nombre aléatoire. La troisième partie du code est le gestionnaire d'événement. La variable <code>btn</code> pointe sur un élément <code>&lt;button&gt;</code> , et ce type d'objet a un certain nombre d'événements qui peuvent être déclenchés, et par conséquent, des gestionnaires d'événements sont disponibles. Nous sommes à l'écoute du déclenchement de l'événement click, en définissant la propriété <code>onclick</code>   du gestionnaire d'événements comme une fonction anonyme contenant du code qui génère une couleur RVB aléatoire et lui affecte la couleur d'arrière-plan <code>&lt;body&gt;</code> .<br>
- <br>
- Ce code sera maintenant exécuté chaque fois que l'événement "click" se déclenchera sur l'élément <code>&lt;button&gt;</code>, c'est-à-dire chaque fois qu'un utilisateur cliquera dessus.</p>
+Dans ce code, nous stockons une référence au bouton dans une variable appelée btn, en utilisant la fonction {{domxref ("Document.querySelector ()")}}. Nous définissons également une fonction qui renvoie un nombre aléatoire. La troisième partie du code est le gestionnaire d'événement. La variable `btn` pointe sur un élément `<button>` , et ce type d'objet a un certain nombre d'événements qui peuvent être déclenchés, et par conséquent, des gestionnaires d'événements sont disponibles. Nous sommes à l'écoute du déclenchement de l'événement click, en définissant la propriété `onclick`   du gestionnaire d'événements comme une fonction anonyme contenant du code qui génère une couleur RVB aléatoire et lui affecte la couleur d'arrière-plan `<body>` .
 
-<p>Vous pourrez voir cet exemple s'afficher sur toute la page en cliquant sur <a href="https://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventhandlerattributes.html">ce lien.</a></p>
+Ce code sera maintenant exécuté chaque fois que l'événement "click" se déclenchera sur l'élément `<button>`, c'est-à-dire chaque fois qu'un utilisateur cliquera dessus.
 
-<p> </p>
+Vous pourrez voir cet exemple s'afficher sur toute la page en cliquant sur [ce lien.](https://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventhandlerattributes.html)
 
-<h3 id="Ce_ne_sont_pas_que_des_pages_web">Ce ne sont pas que des pages web</h3>
 
-<p>Une autre chose qui mérite d'être mentionnée à ce stade est que les événements ne sont pas particuliers à JavaScript - la plupart des langages de programmation ont un certain type de modèle d'événement, et la façon dont cela fonctionne diffère souvent de celle de JavaScript. En fait, le modèle d'événement en JavaScript pour les pages Web diffère du modèle d'événement pour JavaScript tel qu'il est utilisé dans d'autres environnements.</p>
 
-<p>Par exemple, <a href="/fr/docs/Learn/Server-side/Express_Nodejs">Node.js</a> est un runtime JavaScript très populaire qui permet aux développeurs d'utiliser JavaScript pour créer des applications réseau et serveur. Le modèle <a href="https://nodejs.org/docs/latest-v5.x/api/events.html">Node.js event model</a> s'appuie sur des écouteurs pour écouter les événements et des émetteurs pour générer des événements périodiquement — bien qu'il ne le semble pas à première vue, le code est très différent, en particulier lorsqu'il utilise des fonctions comme <code>on()</code> pour enregistrer un écouteur d'événement, et <code>once()</code> pour enregistrer un écouteur d'événement qui s'efface après sa première exécution. le document <a href="https://nodejs.org/docs/latest-v8.x/api/http.html#http_event_connect">HTTP connect event docs</a> propose un bon exemple d'utilisation.</p>
+### Ce ne sont pas que des pages web
 
-<p>Comme autre exemple, vous pouvez désormais utiliser JavaScript pour créer des extensions inter-navigateurs — comme améliorations de la fonctionnalité du navigateur — à l'aide d'une technologie appelée <a href="/fr/Add-ons/WebExtensions">WebExtensions</a>. Le modèle d'événement est similaire au modèle d'événements Web, mais un peu différent — les écouteurs d'événements sont sensibles à la casse (p.ex.<code>onMessage</code> plutôt que <code>onmessage</code>), et doivent êtres combinés à la fonction <code>addListener</code>. Jetez un oeil à la page <a href="/fr/Add-ons/WebExtensions/API/runtime/onMessage">runtime.onMessage page</a> pour voir un exemple.</p>
+Une autre chose qui mérite d'être mentionnée à ce stade est que les événements ne sont pas particuliers à JavaScript - la plupart des langages de programmation ont un certain type de modèle d'événement, et la façon dont cela fonctionne diffère souvent de celle de JavaScript. En fait, le modèle d'événement en JavaScript pour les pages Web diffère du modèle d'événement pour JavaScript tel qu'il est utilisé dans d'autres environnements.
 
-<p>Vous n'avez pas besoin de comprendre quoi que ce soit à propos d'autres environnements de ce type à ce stade de votre apprentissage; nous voulions juste préciser que les événements peuvent différer selon les environnements de programmation.</p>
+Par exemple, [Node.js](/fr/docs/Learn/Server-side/Express_Nodejs) est un runtime JavaScript très populaire qui permet aux développeurs d'utiliser JavaScript pour créer des applications réseau et serveur. Le modèle [Node.js event model](https://nodejs.org/docs/latest-v5.x/api/events.html) s'appuie sur des écouteurs pour écouter les événements et des émetteurs pour générer des événements périodiquement — bien qu'il ne le semble pas à première vue, le code est très différent, en particulier lorsqu'il utilise des fonctions comme `on()` pour enregistrer un écouteur d'événement, et `once()` pour enregistrer un écouteur d'événement qui s'efface après sa première exécution. le document [HTTP connect event docs](https://nodejs.org/docs/latest-v8.x/api/http.html#http_event_connect) propose un bon exemple d'utilisation.
 
-<h2 id="De_quelle_manière_utiliser_les_événements_Web">De quelle manière utiliser les événements Web ?</h2>
+Comme autre exemple, vous pouvez désormais utiliser JavaScript pour créer des extensions inter-navigateurs — comme améliorations de la fonctionnalité du navigateur — à l'aide d'une technologie appelée [WebExtensions](/fr/Add-ons/WebExtensions). Le modèle d'événement est similaire au modèle d'événements Web, mais un peu différent — les écouteurs d'événements sont sensibles à la casse (p.ex.`onMessage` plutôt que `onmessage`), et doivent êtres combinés à la fonction `addListener`. Jetez un oeil à la page [runtime.onMessage page](/fr/Add-ons/WebExtensions/API/runtime/onMessage) pour voir un exemple.
 
-<p>Il existe plusieurs façons d'ajouter un code d'écouteur d'événement aux pages Web afin qu'il soit exécuté lorsque l'événement associé se déclenche. Dans cette section, nous allons passer en revue les différents mécanismes et discuter de ceux que vous devriez utiliser.</p>
+Vous n'avez pas besoin de comprendre quoi que ce soit à propos d'autres environnements de ce type à ce stade de votre apprentissage; nous voulions juste préciser que les événements peuvent différer selon les environnements de programmation.
 
-<h3 id="Les_propriétés_du_gestionnaire_d'événement">Les propriétés du gestionnaire d'événement</h3>
+## De quelle manière utiliser les événements Web ?
 
-<p>Voici les propriétés qui existent pour contenir le code du gestionnaire d'événement que nous avons vu le plus fréquemment pendant le cours. Revenons à l'exemple ci-dessus :</p>
+Il existe plusieurs façons d'ajouter un code d'écouteur d'événement aux pages Web afin qu'il soit exécuté lorsque l'événement associé se déclenche. Dans cette section, nous allons passer en revue les différents mécanismes et discuter de ceux que vous devriez utiliser.
 
-<pre class="brush: js">var btn = document.querySelector('button');
+### Les propriétés du gestionnaire d'événement
+
+Voici les propriétés qui existent pour contenir le code du gestionnaire d'événement que nous avons vu le plus fréquemment pendant le cours. Revenons à l'exemple ci-dessus :
+
+```js
+var btn = document.querySelector('button');
 
 btn.onclick = function() {
   var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
   document.body.style.backgroundColor = rndCol;
-}</pre>
+}
+```
 
-<p>La propriété <code><a href="/fr/docs/Web/API/GlobalEventHandlers/onclick">onclick</a></code> est la propriété du gestionnaire d'événement utilisée dans cette situation. C'est essentiellement une propriété comme les autres disponibles sur le bouton (p.ex. <code><a href="/fr/docs/Web/API/Node/textContent">btn.textContent</a></code>, ou <code><a href="/fr/docs/Web/API/HTMLElement/style">btn.style</a></code>), mais d'un type spécial — lorsque vous la définissez comme étant égale à du code, ce code est exécuté lorsque l'événement se déclenche sur le bouton.</p>
+La propriété [`onclick`](/fr/docs/Web/API/GlobalEventHandlers/onclick) est la propriété du gestionnaire d'événement utilisée dans cette situation. C'est essentiellement une propriété comme les autres disponibles sur le bouton (p.ex. [`btn.textContent`](/fr/docs/Web/API/Node/textContent), ou [`btn.style`](/fr/docs/Web/API/HTMLElement/style)), mais d'un type spécial — lorsque vous la définissez comme étant égale à du code, ce code est exécuté lorsque l'événement se déclenche sur le bouton.
 
-<p>Vous pouvez également définir la propriété du gestionnaire d'événement comme étant égale au nom d'une fonction définie (comme nous l'avons vu dans <a href="/fr/Apprendre/JavaScript/Building_blocks/Build_your_own_function">Construire votre propre fonction</a>). Le code suivant fonctionnera tout pareil:</p>
+Vous pouvez également définir la propriété du gestionnaire d'événement comme étant égale au nom d'une fonction définie (comme nous l'avons vu dans [Construire votre propre fonction](/fr/Apprendre/JavaScript/Building_blocks/Build_your_own_function)). Le code suivant fonctionnera tout pareil:
 
-<pre class="brush: js">var btn = document.querySelector('button');
+```js
+var btn = document.querySelector('button');
 
 function bgChange() {
   var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
   document.body.style.backgroundColor = rndCol;
 }
 
-btn.onclick = bgChange;</pre>
+btn.onclick = bgChange;
+```
 
-<p>De nombreuses propriétés de gestionnaire d'événement sont disponibles. Faisons une expérience.</p>
+De nombreuses propriétés de gestionnaire d'événement sont disponibles. Faisons une expérience.
 
-<p>Tout d'abord, faites une copie locale de <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerproperty.html">random-color-eventhandlerproperty.html</a>, et ouvrez-le dans votre navigateur. C'est juste une copie de l'exemple simple de couleur aléatoire avec lequel nous avons déjà joué dans cet article. Maintenant, changez <code>btn.onclick</code> pour lui attribuer, tour à tour, les différentes valeurs qui suivent, et observez le résultat:</p>
+Tout d'abord, faites une copie locale de [random-color-eventhandlerproperty.html](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerproperty.html), et ouvrez-le dans votre navigateur. C'est juste une copie de l'exemple simple de couleur aléatoire avec lequel nous avons déjà joué dans cet article. Maintenant, changez `btn.onclick` pour lui attribuer, tour à tour, les différentes valeurs qui suivent, et observez le résultat:
 
-<ul>
- <li><code><a href="/fr/docs/Web/API/GlobalEventHandlers/onfocus">btn.onfocus</a></code> et <code><a href="/fr/docs/Web/API/GlobalEventHandlers/onblur">btn.onblur</a></code> — La couleur change lorsque le bouton est net ou grisé (essayez d'appuyer sur la touche Tab pour l'activer et l'éteindre à nouveau). Ceux-ci sont souvent utilisés pour afficher des informations sur la façon de remplir les champs de formulaire lorsqu'ils sont sélectionnés, ou afficher un message d'erreur si un champ de formulaire vient d'être rempli avec une valeur incorrecte.</li>
- <li><code><a href="/fr/docs/Web/API/GlobalEventHandlers/ondblclick">btn.ondblclick</a></code> — La couleur change seulement si l'élément est double-cliqué.</li>
- <li><code><a href="/fr/docs/Web/API/GlobalEventHandlers/onkeypress">window.onkeypress</a></code>, <code><a href="/fr/docs/Web/API/GlobalEventHandlers/onkeydown">window.onkeydown</a></code>, <code><a href="/fr/docs/Web/API/GlobalEventHandlers/onkeyup">window.onkeyup</a></code> — La couleur change si l'on appuie sur une touche du clavier. <code>keypress</code> se réfère à un appui normal sur la touche (bouton appuyé puis relâché), alors que <code>keydown</code> et <code>keyup</code> se réfèrent respectivement à l'appui et au relâchement sur la touche. Notez que cela ne fonctionne pas si vous essayez d'enregistrer ce gestionnaire d'événement sur le bouton lui-même - nous avons dû l'enregistrer sur l'objet <a href="/fr/docs/Web/API/Window">window</a>, qui représente la fenêtre entière du navigateur.</li>
- <li><code><a href="/fr/docs/Web/API/GlobalEventHandlers/onmouseover">btn.onmouseover</a></code> et <code><a href="/fr/docs/Web/API/GlobalEventHandlers/onmouseout">btn.onmouseout</a></code> — La couleur changera respectivement lorsque le pointeur de la souris survolera le bouton, ou lorsque le curseur arrêtera le survol du bouton pour s'éloigner de ce dernier.</li>
-</ul>
+- [`btn.onfocus`](/fr/docs/Web/API/GlobalEventHandlers/onfocus) et [`btn.onblur`](/fr/docs/Web/API/GlobalEventHandlers/onblur) — La couleur change lorsque le bouton est net ou grisé (essayez d'appuyer sur la touche Tab pour l'activer et l'éteindre à nouveau). Ceux-ci sont souvent utilisés pour afficher des informations sur la façon de remplir les champs de formulaire lorsqu'ils sont sélectionnés, ou afficher un message d'erreur si un champ de formulaire vient d'être rempli avec une valeur incorrecte.
+- [`btn.ondblclick`](/fr/docs/Web/API/GlobalEventHandlers/ondblclick) — La couleur change seulement si l'élément est double-cliqué.
+- [`window.onkeypress`](/fr/docs/Web/API/GlobalEventHandlers/onkeypress), [`window.onkeydown`](/fr/docs/Web/API/GlobalEventHandlers/onkeydown), [`window.onkeyup`](/fr/docs/Web/API/GlobalEventHandlers/onkeyup) — La couleur change si l'on appuie sur une touche du clavier. `keypress` se réfère à un appui normal sur la touche (bouton appuyé puis relâché), alors que `keydown` et `keyup` se réfèrent respectivement à l'appui et au relâchement sur la touche. Notez que cela ne fonctionne pas si vous essayez d'enregistrer ce gestionnaire d'événement sur le bouton lui-même - nous avons dû l'enregistrer sur l'objet [window](/fr/docs/Web/API/Window), qui représente la fenêtre entière du navigateur.
+- [`btn.onmouseover`](/fr/docs/Web/API/GlobalEventHandlers/onmouseover) et [`btn.onmouseout`](/fr/docs/Web/API/GlobalEventHandlers/onmouseout) — La couleur changera respectivement lorsque le pointeur de la souris survolera le bouton, ou lorsque le curseur arrêtera le survol du bouton pour s'éloigner de ce dernier.
 
-<p>Certains événements sont très généraux et disponibles presque partout (par exemple un gestionnaire <code>onclick</code> peut être enregistré sur presque n'importe quel élément), alors que certains sont plus spécifiques et seulement utiles dans certaines situations (par exemple, il est logique d'utiliser <a href="/fr/docs/Web/API/GlobalEventHandlers/GlobalEventHandlers.onplay">onplay</a> seulement sur des éléments spécifiques, comme des {{htmlelement("video")}}).</p>
+Certains événements sont très généraux et disponibles presque partout (par exemple un gestionnaire `onclick` peut être enregistré sur presque n'importe quel élément), alors que certains sont plus spécifiques et seulement utiles dans certaines situations (par exemple, il est logique d'utiliser [onplay](/fr/docs/Web/API/GlobalEventHandlers/GlobalEventHandlers.onplay) seulement sur des éléments spécifiques, comme des {{htmlelement("video")}}).
 
-<h3 id="Les_gestionnaires_d'événements_en_ligne_ne_les_utilisez_pas_!">Les gestionnaires d'événements en ligne : ne les utilisez pas !</h3>
+### Les gestionnaires d'événements en ligne : ne les utilisez pas !
 
-<p>Vous pourriez également voir un motif comme celui-ci dans votre code:</p>
+Vous pourriez également voir un motif comme celui-ci dans votre code:
 
-<pre class="brush: html">&lt;button onclick="bgChange()"&gt;Press me&lt;/button&gt;
-</pre>
+```html
+<button onclick="bgChange()">Press me</button>
+```
 
-<pre class="brush: js">function bgChange() {
+```js
+function bgChange() {
   var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
   document.body.style.backgroundColor = rndCol;
-}</pre>
+}
+```
 
-<div class="note">
-<p><strong>Note :</strong> Vous trouverez le <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerattributes.html">code source complet </a>de cet exemple sur GitHub (également <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventhandlerattributes.html">le voir s'exécuter</a>).</p>
-</div>
+> **Note :** Vous trouverez le [code source complet ](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerattributes.html)de cet exemple sur GitHub (également [le voir s'exécuter](http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventhandlerattributes.html)).
+
+La première méthode d'enregistrement des gestionnaires d'événements trouvés sur le Web impliquait des **attributs HTML du gestionnaire d'événement** (c'est-à-dire **les gestionnaires d'événements en ligne**) comme celui présenté ci-dessus — la valeur de l'attribut est littéralement le code JavaScript que vous souhaitez exécuter lorsque l'événement survient. L'exemple ci-dessus appelle une fonction définie dans un élément {{htmlelement("script")}} sur la même page, mais vous pouvez également insérer du JavaScript directement dans l'attribut comme par exemple :
 
-<p>La première méthode d'enregistrement des gestionnaires d'événements trouvés sur le Web impliquait des <strong>attributs HTML du gestionnaire d'événement</strong> (c'est-à-dire <strong>les gestionnaires d'événements en ligne</strong>) comme celui présenté ci-dessus — la valeur de l'attribut est littéralement le code JavaScript que vous souhaitez exécuter lorsque l'événement survient. L'exemple ci-dessus appelle une fonction définie dans un élément {{htmlelement("script")}} sur la même page, mais vous pouvez également insérer du JavaScript directement dans l'attribut comme par exemple :</p>
+```html
+<button onclick="alert('Hello, this is my old-fashioned event handler!');">Press me</button>
+```
 
-<pre class="brush: html">&lt;button onclick="alert('Hello, this is my old-fashioned event handler!');"&gt;Press me&lt;/button&gt;</pre>
+Vous trouverez des équivalents d'attributs HTML pour la plupart des propriétés du gestionnaire d'événement; cependant, vous ne devriez pas les utiliser — ils sont considérés comme une mauvaise pratique. Il peut sembler facile d'utiliser un attribut de gestionnaire d'événement si vous voulez avancer rapidement, mais ils deviennent rapidement ingérables et inefficaces.
 
-<p>Vous trouverez des équivalents d'attributs HTML pour la plupart des propriétés du gestionnaire d'événement; cependant, vous ne devriez pas les utiliser — ils sont considérés comme une mauvaise pratique. Il peut sembler facile d'utiliser un attribut de gestionnaire d'événement si vous voulez avancer rapidement, mais ils deviennent rapidement ingérables et inefficaces.<br>
- <br>
- Pour commencer, ce n'est pas une bonne idée de mélanger votre HTML et votre JavaScript, car il deviennent difficile à analyser — garder votre JavaScript au même endroit est préférable; s'il se trouve dans un fichier séparé, vous pourrez l'appliquer à plusieurs documents HTML.</p>
+Pour commencer, ce n'est pas une bonne idée de mélanger votre HTML et votre JavaScript, car il deviennent difficile à analyser — garder votre JavaScript au même endroit est préférable; s'il se trouve dans un fichier séparé, vous pourrez l'appliquer à plusieurs documents HTML.
 
-<p>Même dans un fichier unique, les gestionnaires d'événement en ligne ne sont pas une bonne idée. Un bouton ça va, mais que faire si vous avez 100 boutons ? Vous devez ajouter 100 attributs au fichier; la maintenance se transformerait très vite en un cauchemar. Avec JavaScript, vous pouvez facilement ajouter une fonction de gestionnaire d'événement à tous les boutons de la page, peu importe leur nombre, en utilisant quelque chose comme ceci :</p>
+Même dans un fichier unique, les gestionnaires d'événement en ligne ne sont pas une bonne idée. Un bouton ça va, mais que faire si vous avez 100 boutons ? Vous devez ajouter 100 attributs au fichier; la maintenance se transformerait très vite en un cauchemar. Avec JavaScript, vous pouvez facilement ajouter une fonction de gestionnaire d'événement à tous les boutons de la page, peu importe leur nombre, en utilisant quelque chose comme ceci :
 
-<pre class="brush: js">var buttons = document.querySelectorAll('button');
+```js
+var buttons = document.querySelectorAll('button');
 
-for (var i = 0; i &lt; buttons.length; i++) {
+for (var i = 0; i < buttons.length; i++) {
   buttons[i].onclick = bgChange;
-}</pre>
+}
+```
 
-<div class="note">
-<p><strong>Note :</strong> Séparer votre logique de programmation de votre contenu rend également votre site plus convivial pour les moteurs de recherche.</p>
-</div>
+> **Note :** Séparer votre logique de programmation de votre contenu rend également votre site plus convivial pour les moteurs de recherche.
 
-<h3 id="addEventListener()_et_removeEventListener()">addEventListener() et removeEventListener()</h3>
+### addEventListener() et removeEventListener()
 
-<p>Le dernier type de mécanisme d'événement est défini dans le <a href="https://www.w3.org/TR/DOM-Level-2-Events/">Document Object Model (DOM) Level 2 Events</a> , qui fournit aux navigateurs une nouvelle fonction: <code><a href="/fr/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>. Cela fonctionne de la même manière que les propriétés du gestionnaire d'événement, mais la syntaxe est évidemment différente. Nous pourrions réécrire notre exemple de couleur aléatoire comme ceci:</p>
+Le dernier type de mécanisme d'événement est défini dans le [Document Object Model (DOM) Level 2 Events](https://www.w3.org/TR/DOM-Level-2-Events/) , qui fournit aux navigateurs une nouvelle fonction: [`addEventListener()`](/fr/docs/Web/API/EventTarget/addEventListener). Cela fonctionne de la même manière que les propriétés du gestionnaire d'événement, mais la syntaxe est évidemment différente. Nous pourrions réécrire notre exemple de couleur aléatoire comme ceci:
 
-<pre class="brush: js">var btn = document.querySelector('button');
+```js
+var btn = document.querySelector('button');
 
 function bgChange() {
   var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
   document.body.style.backgroundColor = rndCol;
 }
 
-btn.addEventListener('click', bgChange);</pre>
+btn.addEventListener('click', bgChange);
+```
 
-<div class="note">
-<p><strong>Note :</strong> Vous trouverez le <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-addeventlistener.html">code source complet </a>de cet exemple sur GitHub (également <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-addeventlistener.html">le voir s'exécuter</a>).</p>
-</div>
+> **Note :** Vous trouverez le [code source complet ](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-addeventlistener.html)de cet exemple sur GitHub (également [le voir s'exécuter](http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-addeventlistener.html)).
 
-<p>Dans la fonction <code><a href="/fr/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> , nous spécifions deux paramètres - le nom de l'événement pour lequel nous voulons enregistrer ce gestionnaire, et le code qui comprend la fonction du gestionnaire que nous voulons exécuter en réponse. Notez qu'il est parfaitement approprié de placer tout le code dans la fonction  <code><a href="/fr/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>, dans une fonction anonyme, comme ceci:</p>
+Dans la fonction [`addEventListener()`](/fr/docs/Web/API/EventTarget/addEventListener) , nous spécifions deux paramètres - le nom de l'événement pour lequel nous voulons enregistrer ce gestionnaire, et le code qui comprend la fonction du gestionnaire que nous voulons exécuter en réponse. Notez qu'il est parfaitement approprié de placer tout le code dans la fonction [`addEventListener()`](/fr/docs/Web/API/EventTarget/addEventListener), dans une fonction anonyme, comme ceci:
 
-<pre class="brush: js">btn.addEventListener('click', function() {
+```js
+btn.addEventListener('click', function() {
   var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
   document.body.style.backgroundColor = rndCol;
-});</pre>
+});
+```
+
+Ce mécanisme a certains avantages par rapport aux mécanismes plus anciens discutés précédemment. Pour commencer, il existe une fonction réciproque, [`removeEventListener()`](/fr/docs/Web/API/EventTarget/removeEventListener), qui supprime un écouteur ajouté précédemment. Par exemple, cela supprimerait l'écouteur du premier bloc de code de cette section:
+
+```js
+btn.removeEventListener('click', bgChange);
+```
+
+Ceci n'a pas beaucoup de sens pour les programmes simples et de petite taille, mais pour les programmes plus grands et plus complexes, cela peut améliorer l'efficacité, de nettoyer les anciens gestionnaires d'événements inutilisés. De plus, par exemple, cela vous permet d'avoir un même bouton qui effectue différentes actions dans des circonstances différentes - tout ce que vous avez à faire est d'ajouter / supprimer des gestionnaires d'événements convenablement.
+
+D'autre part, vous pouvez également enregistrer plusieurs gestionnaires pour le même écouteur. Les deux gestionnaires suivants ne seraient pas appliqués:
+
+```js
+myElement.onclick = functionA;
+myElement.onclick = functionB;
+```
 
-<p>Ce mécanisme a certains avantages par rapport aux mécanismes plus anciens discutés précédemment. Pour commencer, il existe une fonction réciproque,  <code><a href="/fr/docs/Web/API/EventTarget/removeEventListener">removeEventListener()</a></code>, qui supprime un écouteur ajouté précédemment. Par exemple, cela supprimerait l'écouteur du premier bloc de code de cette section:</p>
+Comme la deuxième ligne remplacerait la valeur de `onclick` définie par le premier. Cependant, ceci fonctionnerait:
 
-<pre class="brush: js">btn.removeEventListener('click', bgChange);</pre>
+```js
+myElement.addEventListener('click', functionA);
+myElement.addEventListener('click', functionB);
+```
 
-<p>Ceci n'a pas beaucoup de sens pour les programmes simples et de petite taille, mais pour les programmes plus grands et plus complexes, cela peut améliorer l'efficacité, de nettoyer les anciens gestionnaires d'événements inutilisés. De plus, par exemple, cela vous permet d'avoir un même bouton qui effectue différentes actions dans des circonstances différentes - tout ce que vous avez à faire est d'ajouter / supprimer des gestionnaires d'événements convenablement.<br>
- <br>
- D'autre part, vous pouvez également enregistrer plusieurs gestionnaires pour le même écouteur. Les deux gestionnaires suivants ne seraient pas appliqués:</p>
+Les deux fonctions seraient maintenant exécutées lorsque l'élément est cliqué.
 
-<pre class="brush: js">myElement.onclick = functionA;
-myElement.onclick = functionB;</pre>
+En outre, il existe un certain nombre d'autres fonctionnalités et options puissantes disponibles avec ce mécanisme d'événement. Celles-ci sont un peu hors de propos pour cet article, mais si vous voulez en savoir plus sur elles, jetez un oeil aux pages de référence de  [`addEventListener()`](/fr/docs/Web/API/EventTarget/addEventListener) et [`removeEventListener()`](/fr/docs/Web/API/EventTarget/removeEventListener).
 
-<p>Comme la deuxième ligne remplacerait la valeur de <code>onclick</code> définie par le premier. Cependant, ceci fonctionnerait:</p>
+### Quel mécanisme devrais-je utiliser ?
 
-<pre class="brush: js">myElement.addEventListener('click', functionA);
-myElement.addEventListener('click', functionB);</pre>
+Parmi les trois mécanismes, vous ne devriez certainement pas utiliser les attributs du gestionnaire d'événement HTML - ceux-ci sont obsolètes et constituent une mauvaise pratique, comme mentionné ci-dessus.
 
-<p>Les deux fonctions seraient maintenant exécutées lorsque l'élément est cliqué.<br>
- <br>
- En outre, il existe un certain nombre d'autres fonctionnalités et options puissantes disponibles avec ce mécanisme d'événement. Celles-ci sont un peu hors de propos pour cet article, mais si vous voulez en savoir plus sur elles, jetez un oeil aux pages de référence de  <code><a href="/fr/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> et <code><a href="/fr/docs/Web/API/EventTarget/removeEventListener">removeEventListener()</a></code>.</p>
+Les deux autres sont relativement interchangeables, au moins pour des utilisations simples:
 
-<h3 id="Quel_mécanisme_devrais-je_utiliser">Quel mécanisme devrais-je utiliser ?</h3>
 
-<p>Parmi les trois mécanismes, vous ne devriez certainement pas utiliser les attributs du gestionnaire d'événement HTML - ceux-ci sont obsolètes et constituent une mauvaise pratique, comme mentionné ci-dessus.<br>
- <br>
- Les deux autres sont relativement interchangeables, au moins pour des utilisations simples:<br>
-  </p>
 
-<ul>
- <li>     Les propriétés du gestionnaire d'événement ont moins de puissance et d'options, mais une meilleure compatibilité entre les navigateurs (prise en charge depuis Internet Explorer 8). Vous devriez probablement commencer par ceux-ci pendant votre apprentissage.</li>
- <li>      Les événements du DOM Niveau 2 (<code>addEventListener()</code>, etc.) sont plus puissants, mais peuvent aussi devenir plus complexes et moins bien supportés (supportés depuis Internet Explorer 9). Vous devriez également vous entraîner avec, et tenter de les utiliser si possible.</li>
-</ul>
+- Les propriétés du gestionnaire d'événement ont moins de puissance et d'options, mais une meilleure compatibilité entre les navigateurs (prise en charge depuis Internet Explorer 8). Vous devriez probablement commencer par ceux-ci pendant votre apprentissage.
+- Les événements du DOM Niveau 2 (`addEventListener()`, etc.) sont plus puissants, mais peuvent aussi devenir plus complexes et moins bien supportés (supportés depuis Internet Explorer 9). Vous devriez également vous entraîner avec, et tenter de les utiliser si possible.
 
-<p>Les principaux avantages du troisième mécanisme : vous pouvez supprimer le code du gestionnaire d'événement si nécessaire en utilisant <code>removeEventListener()</code>, et vous pouvez ajouter plusieurs écouteurs du même type aux éléments si nécessaire. Par exemple, vous pouvez appeler <code>addEventListener('click', function() { ... })</code> sur un élément plusieurs fois, avec différentes fonctions spécifiées dans le deuxième argument. Cela est impossible avec les propriétés du gestionnaire d'événement car toute tentative ultérieure de définition d'une propriété remplacera les propriétés précédentes, par exemple:</p>
+Les principaux avantages du troisième mécanisme : vous pouvez supprimer le code du gestionnaire d'événement si nécessaire en utilisant `removeEventListener()`, et vous pouvez ajouter plusieurs écouteurs du même type aux éléments si nécessaire. Par exemple, vous pouvez appeler `addEventListener('click', function() { ... })` sur un élément plusieurs fois, avec différentes fonctions spécifiées dans le deuxième argument. Cela est impossible avec les propriétés du gestionnaire d'événement car toute tentative ultérieure de définition d'une propriété remplacera les propriétés précédentes, par exemple:
 
-<pre class="brush: js">element.onclick = function1;
+```js
+element.onclick = function1;
 element.onclick = function2;
-etc.</pre>
+etc.
+```
 
-<div class="note">
-<p><strong>Note:</strong> Si vous êtes appelé à prendre en charge des navigateurs plus anciens qu'Internet Explorer 8 dans votre travail, vous risquez de rencontrer des difficultés, car ces anciens navigateurs utilisent des modèles d'événements différents des nouveaux navigateurs. Mais n'ayez crainte, la plupart des bibliothèques JavaScript (par exemple <code>jQuery</code>) ont des fonctions intégrées qui permettent d'éliminer les différences entre navigateurs. Ne vous en faites pas trop à ce stade de votre parcours d'apprentissage.</p>
-</div>
+> **Note :** Si vous êtes appelé à prendre en charge des navigateurs plus anciens qu'Internet Explorer 8 dans votre travail, vous risquez de rencontrer des difficultés, car ces anciens navigateurs utilisent des modèles d'événements différents des nouveaux navigateurs. Mais n'ayez crainte, la plupart des bibliothèques JavaScript (par exemple `jQuery`) ont des fonctions intégrées qui permettent d'éliminer les différences entre navigateurs. Ne vous en faites pas trop à ce stade de votre parcours d'apprentissage.
 
-<h2 id="D'autres_concepts_liés_aux_événements">D'autres concepts liés aux événements</h2>
+## D'autres concepts liés aux événements
 
-<p>Dans cette section, nous aborderons brièvement quelques concepts avancés relatifs aux événements. Il n'est pas important de les comprendre entièrement à ce stade, mais cela pourra servir à expliquer certains modèles de code que vous rencontrerez probablement de temps en temps.</p>
+Dans cette section, nous aborderons brièvement quelques concepts avancés relatifs aux événements. Il n'est pas important de les comprendre entièrement à ce stade, mais cela pourra servir à expliquer certains modèles de code que vous rencontrerez probablement de temps en temps.
 
-<h3 id="L'objet_événement">L'objet événement</h3>
+### L'objet événement
 
-<p>Parfois, dans une fonction de gestionnaire d'événement, vous pouvez voir un paramètre spécifié avec un nom tel que  <code>event</code>, <code>evt</code>, ou simplement <code>e</code> . C'est ce qu'on appelle l'objet événement, qui est automatiquement transmis aux gestionnaires d'événements pour fournir des fonctionnalités et des informations supplémentaires. Par exemple, réécrivons légèrement notre exemple de couleur aléatoire:</p>
+Parfois, dans une fonction de gestionnaire d'événement, vous pouvez voir un paramètre spécifié avec un nom tel que `event`, `evt`, ou simplement `e` . C'est ce qu'on appelle l'objet événement, qui est automatiquement transmis aux gestionnaires d'événements pour fournir des fonctionnalités et des informations supplémentaires. Par exemple, réécrivons légèrement notre exemple de couleur aléatoire:
 
-<pre class="brush: js">function bgChange(e) {
+```js
+function bgChange(e) {
   var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
   e.target.style.backgroundColor = rndCol;
   console.log(e);
 }
 
-btn.addEventListener('click', bgChange);</pre>
+btn.addEventListener('click', bgChange);
+```
 
-<div class="note">
-<p><strong>Note :</strong> Vous trouverez le <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventobject.html">code source complet </a>de cet exemple sur GitHub (également <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventobject.html">le voir s'exécuter</a>).</p>
-</div>
+> **Note :** Vous trouverez le [code source complet ](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventobject.html)de cet exemple sur GitHub (également [le voir s'exécuter](http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventobject.html)).
 
-<p>Ici, vous pouvez voir que nous incluons un objet événement, <strong>e</strong>, dans la fonction, et dans la fonction définissant un style de couleur d'arrière-plan sur <code>e.target</code> - qui est le bouton lui-même. La propriété <code>target</code> de l'objet événement est toujours une référence à l'élément sur lequel l'événement vient de se produire. Donc, dans cet exemple, nous définissons une couleur d'arrière-plan aléatoire sur le bouton, pas sur la page.</p>
+Ici, vous pouvez voir que nous incluons un objet événement, **e**, dans la fonction, et dans la fonction définissant un style de couleur d'arrière-plan sur `e.target` - qui est le bouton lui-même. La propriété `target` de l'objet événement est toujours une référence à l'élément sur lequel l'événement vient de se produire. Donc, dans cet exemple, nous définissons une couleur d'arrière-plan aléatoire sur le bouton, pas sur la page.
 
-<div class="note">
-<p><strong>Note :</strong> Vous pouvez utiliser n'importe quel nom pour l'objet d'événement - il vous suffit de choisir un nom que vous pouvez ensuite utiliser pour le référencer dans la fonction du gestionnaire d'événements. <code>e</code>/<code>evt</code>/<code>event</code> sont les plus couramment utilisés par les développeurs car ils sont courts et faciles à retenir. C'est toujours bon de s'en tenir à une norme.</p>
-</div>
+> **Note :** Vous pouvez utiliser n'importe quel nom pour l'objet d'événement - il vous suffit de choisir un nom que vous pouvez ensuite utiliser pour le référencer dans la fonction du gestionnaire d'événements. `e`/`evt`/`event` sont les plus couramment utilisés par les développeurs car ils sont courts et faciles à retenir. C'est toujours bon de s'en tenir à une norme.
 
-<p><code>e.target</code>est incroyablement utile lorsque vous voulez définir le même gestionnaire d'événements sur plusieurs éléments et affecter une action à chacun d'entre eux quand un événement se produit sur eux. Vous pourriez, par exemple, avoir un ensemble de 16 tuiles qui disparaissent quand on clique dessus. Il est utile de toujours pouvoir affecter une action à  <code>e.target</code>, plutôt que de devoir la sélectionner de manière plus difficile. Dans l'exemple suivant (voir <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/useful-eventtarget.html">useful-eventtarget.html</a> pour le code source ; et ici pour le voir <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/useful-eventtarget.html">s'exécuter</a>), nous avons créé 16 éléments {{htmlelement("div")}} avec JavaScript. Quand nous les sélectionnons tous en utilisant {{domxref("document.querySelectorAll()")}}, puis que nous faisons une boucle sur chacun d'eux, en ajoutant un gestionnaire <code>onclick</code> à chacun de sorte qu'une couleur aléatoire est appliquée lorsque l'élément est cliqué:</p>
+`e.target`est incroyablement utile lorsque vous voulez définir le même gestionnaire d'événements sur plusieurs éléments et affecter une action à chacun d'entre eux quand un événement se produit sur eux. Vous pourriez, par exemple, avoir un ensemble de 16 tuiles qui disparaissent quand on clique dessus. Il est utile de toujours pouvoir affecter une action à  `e.target`, plutôt que de devoir la sélectionner de manière plus difficile. Dans l'exemple suivant (voir [useful-eventtarget.html](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/useful-eventtarget.html) pour le code source ; et ici pour le voir [s'exécuter](http://mdn.github.io/learning-area/javascript/building-blocks/events/useful-eventtarget.html)), nous avons créé 16 éléments {{htmlelement("div")}} avec JavaScript. Quand nous les sélectionnons tous en utilisant {{domxref("document.querySelectorAll()")}}, puis que nous faisons une boucle sur chacun d'eux, en ajoutant un gestionnaire `onclick` à chacun de sorte qu'une couleur aléatoire est appliquée lorsque l'élément est cliqué:
 
-<pre class="brush: js">var divs = document.querySelectorAll('div');
+```js
+var divs = document.querySelectorAll('div');
 
-for (var i = 0; i &lt; divs.length; i++) {
+for (var i = 0; i < divs.length; i++) {
   divs[i].onclick = function(e) {
     e.target.style.backgroundColor = bgChange();
   }
-}</pre>
+}
+```
 
-<h4>Résultat</h4>
+#### Résultat
 
-<p>Le résultat est le suivant (essayez de cliquer dessus - amusez-vous):</p>
+Le résultat est le suivant (essayez de cliquer dessus - amusez-vous):
 
-<pre class="brush: html hidden">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-  &lt;head&gt;
-    &lt;meta charset="utf-8"&gt;
-    &lt;title&gt;Useful event target example&lt;/title&gt;
-    &lt;style&gt;
+```html hidden
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Useful event target example</title>
+    <style>
       div {
         background-color: red;
         height: 100px;
         width: 25%;
         float: left;
       }
-    &lt;/style&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
-    &lt;script&gt;
-      for (var i = 1; i &lt;= 16; i++) {
+    </style>
+  </head>
+  <body>
+    <script>
+      for (var i = 1; i <= 16; i++) {
         var myDiv = document.createElement('div');
         document.body.appendChild(myDiv);
       }
@@ -305,50 +328,55 @@ for (var i = 0; i &lt; divs.length; i++) {
 
       var divs = document.querySelectorAll('div');
 
-      for (var i = 0; i &lt; divs.length; i++) {
+      for (var i = 0; i < divs.length; i++) {
         divs[i].onclick = function(e) {
           e.target.style.backgroundColor = bgChange();
         }
       }
-    &lt;/script&gt;
-  &lt;/body&gt;
-&lt;/html&gt;</pre>
-
-<p>{{ EmbedLiveSample('Résultat', '100%', 400, "", "", "hide-codepen-jsfiddle") }}</p>
-
-<p>La plupart des gestionnaires d'événements que vous rencontrerez ne disposent que d'un ensemble standard de propriétés et de fonctions (méthodes) disponibles sur l'objet événement (voir la liste complète sur {{domxref("Event")}} ). Cependant, certains gestionnaires plus avancés ajoutent des propriétés spécialisées contenant des données supplémentaires dont ils ont besoin pour fonctionner. Le <a href="/fr/docs/Web/API/MediaRecorder_API">Media Recorder API</a>, par exemple, a un événement <code>dataavailable</code> , qui se déclenche quand un fichier audio ou vidéo a été enregistré et est disponible pour être utilisé (par exemple, pour l'enregistrer ou le lire). L'objet événement du gestionnaire <a href="/fr/docs/Web/API/MediaRecorder/ondataavailable">ondataavailable</a> correspondant dispose d'une propriété <code>data</code> contenant les données audio ou vidéo enregistrées pour vous permettre d'y accéder et de l'utiliser.</p>
-
-<h3 id="Éviter_le_comportement_par_défaut">Éviter le comportement par défaut</h3>
-
-<p>Parfois, vous rencontrerez une situation où vous voudrez arrêter un événement qui adopte son comportement par défaut. L'exemple le plus courant est celui d'un formulaire Web, par exemple un formulaire d'inscription personnalisé. Lorsque vous remplissez les détails et appuyez sur le bouton "Soumettre", le comportement naturel consiste à soumettre les données à une page spécifiée sur le serveur pour traitement, et le navigateur redirige vers une page de "message de réussite" quelconque (ou la même page, si une autre n'est pas spécifiée.).<br>
- <br>
- Le problème survient lorsque l'utilisateur n'a pas soumis les données correctement. En tant que développeur, vous devez arrêter la soumission au serveur et lui envoyer un message d'erreur indiquant ce qui ne va pas et ce qui doit être fait pour corriger les erreurs. Certains navigateurs prennent en charge les fonctions de validation automatique des données de formulaire, mais comme beaucoup ne le font pas, il est conseillé de ne pas vous y fier et d'implémenter vos propres contrôles de validation. Regardons un exemple simple.<br>
- <br>
- Tout d'abord, un simple formulaire HTML qui vous oblige à entrer votre nom et votre prénom:</p>
-
-<pre class="brush: html">&lt;form&gt;
-  &lt;div&gt;
-    &lt;label for="fname"&gt;First name: &lt;/label&gt;
-    &lt;input id="fname" type="text"&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-    &lt;label for="lname"&gt;Last name: &lt;/label&gt;
-    &lt;input id="lname" type="text"&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-     &lt;input id="submit" type="submit"&gt;
-  &lt;/div&gt;
-&lt;/form&gt;
-&lt;p&gt;&lt;/p&gt;</pre>
-
-<pre class="brush: css hidden">div {
+    </script>
+  </body>
+</html>
+```
+
+{{ EmbedLiveSample('Résultat', '100%', 400, "", "", "hide-codepen-jsfiddle") }}
+
+La plupart des gestionnaires d'événements que vous rencontrerez ne disposent que d'un ensemble standard de propriétés et de fonctions (méthodes) disponibles sur l'objet événement (voir la liste complète sur {{domxref("Event")}} ). Cependant, certains gestionnaires plus avancés ajoutent des propriétés spécialisées contenant des données supplémentaires dont ils ont besoin pour fonctionner. Le [Media Recorder API](/fr/docs/Web/API/MediaRecorder_API), par exemple, a un événement `dataavailable` , qui se déclenche quand un fichier audio ou vidéo a été enregistré et est disponible pour être utilisé (par exemple, pour l'enregistrer ou le lire). L'objet événement du gestionnaire [ondataavailable](/fr/docs/Web/API/MediaRecorder/ondataavailable) correspondant dispose d'une propriété `data` contenant les données audio ou vidéo enregistrées pour vous permettre d'y accéder et de l'utiliser.
+
+### Éviter le comportement par défaut
+
+Parfois, vous rencontrerez une situation où vous voudrez arrêter un événement qui adopte son comportement par défaut. L'exemple le plus courant est celui d'un formulaire Web, par exemple un formulaire d'inscription personnalisé. Lorsque vous remplissez les détails et appuyez sur le bouton "Soumettre", le comportement naturel consiste à soumettre les données à une page spécifiée sur le serveur pour traitement, et le navigateur redirige vers une page de "message de réussite" quelconque (ou la même page, si une autre n'est pas spécifiée.).
+
+Le problème survient lorsque l'utilisateur n'a pas soumis les données correctement. En tant que développeur, vous devez arrêter la soumission au serveur et lui envoyer un message d'erreur indiquant ce qui ne va pas et ce qui doit être fait pour corriger les erreurs. Certains navigateurs prennent en charge les fonctions de validation automatique des données de formulaire, mais comme beaucoup ne le font pas, il est conseillé de ne pas vous y fier et d'implémenter vos propres contrôles de validation. Regardons un exemple simple.
+
+Tout d'abord, un simple formulaire HTML qui vous oblige à entrer votre nom et votre prénom:
+
+```html
+<form>
+  <div>
+    <label for="fname">First name: </label>
+    <input id="fname" type="text">
+  </div>
+  <div>
+    <label for="lname">Last name: </label>
+    <input id="lname" type="text">
+  </div>
+  <div>
+     <input id="submit" type="submit">
+  </div>
+</form>
+<p></p>
+```
+
+```css hidden
+div {
   margin-bottom: 10px;
 }
-</pre>
+```
 
-<p>Maintenant un peu de JavaScript - ici nous implémentons une vérification très simple dans un gestionnaire d'événement <a href="/fr/docs/Web/API/GlobalEventHandlers/onsubmit">onsubmit</a> (l'événement submit est renvoyé sur un formulaire quand il est soumis) qui vérifie si les champs de texte sont vides. Si c'est le cas, nous appelons la fonction  <code><a href="/fr/docs/Web/API/Event/preventDefault">preventDefault()</a></code> sur l'objet événement - ce qui stoppe la soumission du formulaire - puis nous affichons un message d'erreur dans le paragraphe sous notre formulaire pour indiquer à l'utilisateur ce qui ne va pas :</p>
+Maintenant un peu de JavaScript - ici nous implémentons une vérification très simple dans un gestionnaire d'événement [onsubmit](/fr/docs/Web/API/GlobalEventHandlers/onsubmit) (l'événement submit est renvoyé sur un formulaire quand il est soumis) qui vérifie si les champs de texte sont vides. Si c'est le cas, nous appelons la fonction [`preventDefault()`](/fr/docs/Web/API/Event/preventDefault) sur l'objet événement - ce qui stoppe la soumission du formulaire - puis nous affichons un message d'erreur dans le paragraphe sous notre formulaire pour indiquer à l'utilisateur ce qui ne va pas :
 
-<pre class="brush: js">var form = document.querySelector('form');
+```js
+var form = document.querySelector('form');
 var fname = document.getElementById('fname');
 var lname = document.getElementById('lname');
 var submit = document.getElementById('submit');
@@ -359,26 +387,26 @@ form.onsubmit = function(e) {
     e.preventDefault();
     para.textContent = 'You need to fill in both names!';
   }
-}</pre>
+}
+```
 
-<p>Évidemment, cette validation est assez faible - cela n'empêcherait pas l'utilisateur de valider le formulaire avec des espaces ou des nombres entrés dans les champs, par exemple - mais cela est acceptable. Le résultat est le suivant :</p>
+Évidemment, cette validation est assez faible - cela n'empêcherait pas l'utilisateur de valider le formulaire avec des espaces ou des nombres entrés dans les champs, par exemple - mais cela est acceptable. Le résultat est le suivant :
 
-<p>{{ EmbedLiveSample('Éviter_le_comportement_par_défaut', '100%', 140, "", "", "hide-codepen-jsfiddle") }}</p>
+{{ EmbedLiveSample('Éviter_le_comportement_par_défaut', '100%', 140, "", "", "hide-codepen-jsfiddle") }}
 
-<div class="note">
-<p><strong>Note :</strong> pour le code source, voir <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/preventdefault-validation.html">preventdefault-validation.html</a> (et le voir s'exécuter <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/preventdefault-validation.html">ici</a>.)</p>
-</div>
+> **Note :** pour le code source, voir [preventdefault-validation.html](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/preventdefault-validation.html) (et le voir s'exécuter [ici](http://mdn.github.io/learning-area/javascript/building-blocks/events/preventdefault-validation.html).)
 
-<h3 id="Le_bouillonnement_et_la_capture">Le bouillonnement et la capture</h3>
+### Le bouillonnement et la capture
 
-<p>Le dernier sujet à aborder ici est quelque chose que vous ne rencontrerez pas souvent, mais cela peut être une vraie difficulté si vous ne le comprenez pas. Le bouillonnement et la capture d'événements sont deux mécanismes qui décrivent ce qui se passe lorsque deux gestionnaires du même type d'événement sont activés sur un même élément. Regardons un exemple pour faciliter cela - ouvrez l'exemple <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box.html">show-video-box.html</a> dans un nouvel onglet (et le <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html">code source </a>dans un autre). C'est également disponible en live ci-dessous.</p>
+Le dernier sujet à aborder ici est quelque chose que vous ne rencontrerez pas souvent, mais cela peut être une vraie difficulté si vous ne le comprenez pas. Le bouillonnement et la capture d'événements sont deux mécanismes qui décrivent ce qui se passe lorsque deux gestionnaires du même type d'événement sont activés sur un même élément. Regardons un exemple pour faciliter cela - ouvrez l'exemple [show-video-box.html](http://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box.html) dans un nouvel onglet (et le [code source ](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html)dans un autre). C'est également disponible en live ci-dessous.
 
-<pre class="brush: html hidden">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-  &lt;head&gt;
-    &lt;meta charset="utf-8"&gt;
-    &lt;title&gt;Show video box example&lt;/title&gt;
-    &lt;style&gt;
+```html hidden
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Show video box example</title>
+    <style>
       div {
         position: absolute;
         top: 50%;
@@ -404,20 +432,20 @@ form.onsubmit = function(e) {
         margin: 40px auto;
       }
 
-    &lt;/style&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
-    &lt;button&gt;Display video&lt;/button&gt;
+    </style>
+  </head>
+  <body>
+    <button>Display video</button>
 
-    &lt;div class="hidden"&gt;
-      &lt;video&gt;
-        &lt;source src="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/events/rabbit320.mp4" type="video/mp4"&gt;
-        &lt;source src="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/events/rabbit320.webm" type="video/webm"&gt;
-        &lt;p&gt;Your browser doesn't support HTML5 video. Here is a &lt;a href="rabbit320.mp4"&gt;link to the video&lt;/a&gt; instead.&lt;/p&gt;
-      &lt;/video&gt;
-    &lt;/div&gt;
+    <div class="hidden">
+      <video>
+        <source src="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/events/rabbit320.mp4" type="video/mp4">
+        <source src="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/events/rabbit320.webm" type="video/webm">
+        <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
+      </video>
+    </div>
 
-    &lt;script&gt;
+    <script>
 
       var btn = document.querySelector('button');
       var videoBox = document.querySelector('div');
@@ -441,128 +469,121 @@ form.onsubmit = function(e) {
         video.play();
       });
 
-    &lt;/script&gt;
-  &lt;/body&gt;
-&lt;/html&gt;</pre>
+    </script>
+  </body>
+</html>
+```
 
-<p>{{ EmbedLiveSample('Le_bouillonnement_et_la_capture', '100%', 500, "", "", "hide-codepen-jsfiddle") }}</p>
+{{ EmbedLiveSample('Le_bouillonnement_et_la_capture', '100%', 500, "", "", "hide-codepen-jsfiddle") }}
 
-<p>Ceci est un exemple assez simple qui montre et cache une balise {{htmlelement("div")}} avec une balise {{htmlelement("video")}} à l'intérieur:</p>
+Ceci est un exemple assez simple qui montre et cache une balise {{htmlelement("div")}} avec une balise {{htmlelement("video")}} à l'intérieur:
 
-<pre class="brush: html">&lt;button&gt;Display video&lt;/button&gt;
+```html
+<button>Display video</button>
 
-&lt;div class="hidden"&gt;
-  &lt;video&gt;
-    &lt;source src="rabbit320.mp4" type="video/mp4"&gt;
-    &lt;source src="rabbit320.webm" type="video/webm"&gt;
-    &lt;p&gt;Your browser doesn't support HTML5 video. Here is a &lt;a href="rabbit320.mp4"&gt;link to the video&lt;/a&gt; instead.&lt;/p&gt;
-  &lt;/video&gt;
-&lt;/div&gt;</pre>
+<div class="hidden">
+  <video>
+    <source src="rabbit320.mp4" type="video/mp4">
+    <source src="rabbit320.webm" type="video/webm">
+    <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
+  </video>
+</div>
+```
 
-<p>Quand le {{htmlelement("button")}} est cliqué, la vidéo est affichée, en changeant l'attribut de classe sur la balise <code>&lt;div&gt;</code> de <code>hidden</code> à <code>showing</code> ( le CSS de l'exemple contient ces deux classes, qui positionnent respectivement la boîte hors de l'écran et sur l'écran.) :</p>
+Quand le {{htmlelement("button")}} est cliqué, la vidéo est affichée, en changeant l'attribut de classe sur la balise `<div>` de `hidden` à `showing` ( le CSS de l'exemple contient ces deux classes, qui positionnent respectivement la boîte hors de l'écran et sur l'écran.) :
 
-<pre class="brush: js">btn.onclick = function() {
+```js
+btn.onclick = function() {
   videoBox.setAttribute('class', 'showing');
-}</pre>
+}
+```
 
-<p>Nous ajoutons ensuite quelques gestionnaires d'événements  <code>onclick</code> supplémentaires - le premier à <code>&lt;div&gt;</code> et le second à <code>&lt;video&gt;</code>. L'idée est que lorsque l'on clique sur la zone du <code>&lt;div&gt;</code> en dehors de la vidéo, la boîte doit être masquée à nouveau; Lorsque la vidéo elle-même est cliquée, la vidéo devrait commencer à jouer. </p>
+Nous ajoutons ensuite quelques gestionnaires d'événements `onclick` supplémentaires - le premier à `<div>` et le second à `<video>`. L'idée est que lorsque l'on clique sur la zone du `<div>` en dehors de la vidéo, la boîte doit être masquée à nouveau; Lorsque la vidéo elle-même est cliquée, la vidéo devrait commencer à jouer.
 
-<pre>videoBox.onclick = function() {
-  videoBox.setAttribute('class', 'hidden');
-};
+    videoBox.onclick = function() {
+      videoBox.setAttribute('class', 'hidden');
+    };
 
-video.onclick = function() {
-  video.play();
-};</pre>
+    video.onclick = function() {
+      video.play();
+    };
+
+Mais il y a un problème - actuellement, lorsque vous cliquez sur la vidéo, elle commence à jouer, mais cela entraîne le fait que `<div>` est également caché en même temps. C'est parce que la vidéo est dans le `<div>` - elle en fait partie - alors que cliquer sur la vidéo lance les _deux_ gestionnaires d'événements ci-dessus.
+
+#### Explication du bouillonnement et de la capture
 
-<p>Mais il y a un problème - actuellement, lorsque vous cliquez sur la vidéo, elle commence à jouer, mais cela entraîne le fait que <code>&lt;div&gt;</code> est également caché en même temps. C'est parce que la vidéo est dans le <code>&lt;div&gt;</code> - elle en fait partie - alors que cliquer sur la vidéo lance les <em>deux</em> gestionnaires d'événements ci-dessus.</p>
+Quand un événement se déclenche sur un élément qui a des éléments parents (p.ex. l'élément {{htmlelement("video")}} dans notre cas), les navigateurs modernes utilisent deux phases différentes: la phase de **capture** et la phase de **bouillonnement**.
 
-<h4 id="Explication_du_bouillonnement_et_de_la_capture">Explication du bouillonnement et de la capture</h4>
+Dans la phase de capture:
 
-<p>Quand un événement se déclenche sur un élément qui a des éléments parents (p.ex. l'élément {{htmlelement("video")}} dans notre cas), les navigateurs modernes utilisent deux phases différentes: la phase de <strong>capture</strong> et la phase de <strong>bouillonnement</strong>.<br>
- <br>
- Dans la phase de capture:</p>
+- Le navigateur vérifie si l'ancêtre le plus éloigné de l'élément ({{htmlelement("html")}}) dispose d'un gestionnaire d'événement `onclick` enregistré pendant la phase de capture et le lance si c'est le cas.
+- Ensuite, il passe à l'élément suivant à l'intérieur de `<html>` et fait la même chose, puis la suivante, et ainsi de suite jusqu'à ce qu'il atteigne l'élément sur lequel on a cliqué.
 
-<ul>
- <li>Le navigateur vérifie si l'ancêtre le plus éloigné de l'élément ({{htmlelement("html")}}) dispose d'un gestionnaire d'événement <code>onclick</code> enregistré pendant la phase de capture et le lance si c'est le cas.</li>
- <li>Ensuite, il passe à l'élément suivant à l'intérieur de <code>&lt;html&gt;</code> et fait la même chose, puis la suivante, et ainsi de suite jusqu'à ce qu'il atteigne l'élément sur lequel on a cliqué.</li>
-</ul>
+Dans la phase de bouillonnement, l'opposé exact se produit:
 
-<p>Dans la phase de bouillonnement, l'opposé exact se produit:<br>
- <br>
-      Le navigateur vérifie si l'élément qui a été cliqué a un gestionnaire d'événement <code>onclick</code> enregistré dans la phase de bouillonnement et l'exécute si c'est le cas.<br>
-      Ensuite, il passe à l'élément ancêtre immédiat et fait la même chose, puis le suivant, et ainsi de suite jusqu'à ce qu'il atteigne l'élément <code>&lt;html&gt;</code>.</p>
+Le navigateur vérifie si l'élément qui a été cliqué a un gestionnaire d'événement `onclick` enregistré dans la phase de bouillonnement et l'exécute si c'est le cas.
+     Ensuite, il passe à l'élément ancêtre immédiat et fait la même chose, puis le suivant, et ainsi de suite jusqu'à ce qu'il atteigne l'élément `<html>`.
 
-<p><a href="https://mdn.mozillademos.org/files/16064/bubbling-capturing.png"><img alt="" src="bubbling-capturing.png"></a></p>
+[![](bubbling-capturing.png)](https://mdn.mozillademos.org/files/16064/bubbling-capturing.png)
 
-<p>(Cliquez sur l'image pour l'agrandir et la voir traduite en français.)</p>
+(Cliquez sur l'image pour l'agrandir et la voir traduite en français.)
 
-<p>Dans les navigateurs modernes, par défaut, tous les gestionnaires d'événements sont enregistrés dans la phase de bouillonnement. Ainsi, dans notre exemple actuel, lorsque vous cliquez sur la vidéo, l'événement click fait un bouillonnement de l'élément <code>&lt;video&gt;</code> vers l'élément <code>&lt;html&gt;</code>. Comme ceci :</p>
+Dans les navigateurs modernes, par défaut, tous les gestionnaires d'événements sont enregistrés dans la phase de bouillonnement. Ainsi, dans notre exemple actuel, lorsque vous cliquez sur la vidéo, l'événement click fait un bouillonnement de l'élément `<video>` vers l'élément `<html>`. Comme ceci :
 
-<ul>
- <li>Il trouve d'abord le gestionnaire <code>video.onclick...</code> et le lance, de manière à ce que la vidéo soit jouée en premier.</li>
- <li>Ensuite il trouve le gestionnaire <code>videoBox.onclick...</code> et le lance, de sorte que la vidéo est cachée.</li>
-</ul>
+- Il trouve d'abord le gestionnaire `video.onclick...` et le lance, de manière à ce que la vidéo soit jouée en premier.
+- Ensuite il trouve le gestionnaire `videoBox.onclick...` et le lance, de sorte que la vidéo est cachée.
 
-<h4 id="Régler_le_problème_avec_stopPropagation()">Régler le problème avec stopPropagation()</h4>
+#### Régler le problème avec stopPropagation()
 
-<p>C'est un comportement ennuyeux, mais il y a un moyen de l'éviter ! L'objet événement standard dispose d'une fonction appelée <code><a href="/fr/docs/Web/API/Event/stopPropagation">stopPropagation()</a></code>, qui, lorsqu'il est invoqué sur l'objet événement d'un gestionnaire, fait en sorte que le gestionnaire soit exécuté, mais l'événement ne remonte pas plus haut dans la chaîne, et donc plus aucun autre gestionnaire ne sera exécuté.<br>
- <br>
- Nous pouvons donc résoudre notre problème actuel en changeant la fonction du deuxième gestionnaire dans le bloc de code précédent comme ceci:</p>
+C'est un comportement ennuyeux, mais il y a un moyen de l'éviter ! L'objet événement standard dispose d'une fonction appelée [`stopPropagation()`](/fr/docs/Web/API/Event/stopPropagation), qui, lorsqu'il est invoqué sur l'objet événement d'un gestionnaire, fait en sorte que le gestionnaire soit exécuté, mais l'événement ne remonte pas plus haut dans la chaîne, et donc plus aucun autre gestionnaire ne sera exécuté.
 
-<pre class="brush: js">video.onclick = function(e) {
+Nous pouvons donc résoudre notre problème actuel en changeant la fonction du deuxième gestionnaire dans le bloc de code précédent comme ceci:
+
+```js
+video.onclick = function(e) {
   e.stopPropagation();
   video.play();
-};</pre>
+};
+```
 
-<p>Vous pouvez faire une copie locale du <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html">code source show-video-box.html </a> et le modifier vous-même ou regarder le résultat ici :  <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box-fixed.html">show-video-box-fixed.html</a> (ou voir le <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box-fixed.html">code source</a>).</p>
+Vous pouvez faire une copie locale du [code source show-video-box.html ](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html)et le modifier vous-même ou regarder le résultat ici :  [show-video-box-fixed.html](http://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box-fixed.html) (ou voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box-fixed.html)).
 
-<div class="note">
-<p><strong>Note :</strong> Pourquoi s'embêter à capturer et bouillonner ? Eh bien, aux heures sombres où les navigateurs étaien peu compatibles entre eux qu'ils ne le sont aujourd'hui, Netscape n'utilisait que la capture d'événements, et Internet Explorer n'utilisait que les bouillonnements. Quand le W3C a décidé d'essayer de normaliser le comportement et de parvenir à un consensus, ils en sont arrivés à ce système qui inclue les deux, qui est celui implémenté dans les navigateurs modernes.</p>
-</div>
+> **Note :** Pourquoi s'embêter à capturer et bouillonner ? Eh bien, aux heures sombres où les navigateurs étaien peu compatibles entre eux qu'ils ne le sont aujourd'hui, Netscape n'utilisait que la capture d'événements, et Internet Explorer n'utilisait que les bouillonnements. Quand le W3C a décidé d'essayer de normaliser le comportement et de parvenir à un consensus, ils en sont arrivés à ce système qui inclue les deux, qui est celui implémenté dans les navigateurs modernes.
 
-<div class="note">
-<p><strong>Note :</strong> Comme mentionné ci-dessus, par défaut, tous les gestionnaires d'événements sont enregistrés dans la phase de bouillonnement, ce qui est plus logique la plupart du temps. Si vous voulez vraiment enregistrer un événement dans la phase de capture, vous pouvez le faire en enregistrant votre gestionnaire avec <code><a href="/fr/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>, et en positionnant la troisième propriété, qui est optionnelle, sur<code>true</code>.</p>
-</div>
+> **Note :** Comme mentionné ci-dessus, par défaut, tous les gestionnaires d'événements sont enregistrés dans la phase de bouillonnement, ce qui est plus logique la plupart du temps. Si vous voulez vraiment enregistrer un événement dans la phase de capture, vous pouvez le faire en enregistrant votre gestionnaire avec [`addEventListener()`](/fr/docs/Web/API/EventTarget/addEventListener), et en positionnant la troisième propriété, qui est optionnelle, sur`true`.
+
+#### Délégation d'événement
+
+Le bouillonnement nous permet également de tirer parti de la délégation d'événements - ce concept repose sur le fait que si vous voulez exécuter du code lorsque vous cliquez sur l'un des nombreux éléments enfants, vous pouvez définir l'écouteur d'événement sur leur parent et ainsi leur répercuter les événement, plutôt que de devoir définir l'écouteur d'événement sur chaque enfant individuellement.
 
-<h4 id="Délégation_d'événement">Délégation d'événement</h4>
+Un bon exemple est une série d'éléments de liste - si vous voulez que chacun d'eux fasse apparaître un message lorsque vous cliquez dessus, vous pouvez définir l'écouteur d'événement `click` sur la balise parente `<ul>`, et il apparaîtra sur les éléments de la liste.
 
-<p>Le bouillonnement nous permet également de tirer parti de la délégation d'événements - ce concept repose sur le fait que si vous voulez exécuter du code lorsque vous cliquez sur l'un des nombreux éléments enfants, vous pouvez définir l'écouteur d'événement sur leur parent et ainsi leur répercuter les événement, plutôt que de devoir définir l'écouteur d'événement sur chaque enfant individuellement.<br>
- <br>
- Un bon exemple est une série d'éléments de liste - si vous voulez que chacun d'eux fasse apparaître un message lorsque vous cliquez dessus, vous pouvez définir l'écouteur d'événement <code>click</code> sur la balise parente <code>&lt;ul&gt;</code>, et il apparaîtra sur les éléments de la liste.</p>
+Ce concept est expliqué plus loin sur le blog de David Walsh, avec de multiples exemples - voir [How JavaScript Event Delegation Works](https://davidwalsh.name/event-delegate).
 
-<p>Ce concept est expliqué plus loin sur le blog de David Walsh, avec de multiples exemples - voir <a href="https://davidwalsh.name/event-delegate">How JavaScript Event Delegation Works</a>.</p>
+## Conclusion
 
-<h2 id="Conclusion">Conclusion</h2>
+Vous devriez maintenant maîtriser tout ce que vous devez savoir sur les événements Web à ce stade de votre apprentissage. Comme mentionné ci-dessus, les événements ne font pas vraiment partie du langage du noyau JavaScript principal - ils sont définis dans les API Web du navigateur.
 
-<p>Vous devriez maintenant maîtriser tout ce que vous devez savoir sur les événements Web à ce stade de votre apprentissage. Comme mentionné ci-dessus, les événements ne font pas vraiment partie du langage du noyau JavaScript principal - ils sont définis dans les API Web du navigateur.<br>
- <br>
- En outre, il est important de comprendre que les différents contextes dans lesquels JavaScript est utilisé tendent à avoir des modèles d'événements différents - des API Web à d'autres domaines tels que WebExtensions du navigateur et Node.js (JavaScript côté serveur). Nous ne nous attendons pas à ce que vous compreniez tous ces domaines maintenant, mais cela aide certainement à comprendre les bases des événements à mesure que vous avancez dans l'apprentissage du développement Web.</p>
+En outre, il est important de comprendre que les différents contextes dans lesquels JavaScript est utilisé tendent à avoir des modèles d'événements différents - des API Web à d'autres domaines tels que WebExtensions du navigateur et Node.js (JavaScript côté serveur). Nous ne nous attendons pas à ce que vous compreniez tous ces domaines maintenant, mais cela aide certainement à comprendre les bases des événements à mesure que vous avancez dans l'apprentissage du développement Web.
 
-<p>S'il y a quelque chose que vous n'avez pas compris, n'hésitez pas à relire l'article, ou <a href="/fr/Learn#Contact_us">contactez-nous </a>pour demander de l'aide.</p>
+S'il y a quelque chose que vous n'avez pas compris, n'hésitez pas à relire l'article, ou [contactez-nous ](/fr/Learn#Contact_us)pour demander de l'aide.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="http://www.quirksmode.org/js/events_order.html">Event order</a> (discussion sur la capture et le bouillonnement) — une pièce superbement détaillée de Peter-Paul Koch.</li>
- <li><a href="http://www.quirksmode.org/js/events_access.html">Event accessing</a> (discussion sur l'objet événement) — une autre pièce superbement détaillée de Peter-Paul Koch.</li>
- <li><a href="/fr/docs/Web/Events">Event reference</a></li>
-</ul>
+- [Event order](http://www.quirksmode.org/js/events_order.html) (discussion sur la capture et le bouillonnement) — une pièce superbement détaillée de Peter-Paul Koch.
+- [Event accessing](http://www.quirksmode.org/js/events_access.html) (discussion sur l'objet événement) — une autre pièce superbement détaillée de Peter-Paul Koch.
+- [Event reference](/fr/docs/Web/Events)
 
-<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}</p>
+{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}
 
-<p> </p>
 
-<h2 id="Dans_ce_module">Dans ce module</h2>
 
-<ul>
- <li><a href="/fr/Apprendre/JavaScript/Building_blocks/conditionals">Prendre des décisions dans le code - les conditions</a></li>
- <li><a href="/fr/Apprendre/JavaScript/Building_blocks/Looping_code">Les boucles dans le code</a></li>
- <li><a href="/fr/Apprendre/JavaScript/Building_blocks/Fonctions">les fonctions - des blocs de code réutilisables</a></li>
- <li><a href="/fr/Apprendre/JavaScript/Building_blocks/Build_your_own_function">Construisez votre propre fonction</a></li>
- <li><a href="/fr/Apprendre/JavaScript/Building_blocks/Return_values">les valeurs de retour des fonction</a><a href="/fr/docs/Learn/JavaScript/Building_blocks/Return_values">s</a></li>
- <li><a href="/fr/Apprendre/JavaScript/Building_blocks/Ev%C3%A8nements">Introduction aux événement</a><a href="/fr/Apprendre/JavaScript/Building_blocks/Ev%C3%A8nements">s</a></li>
- <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Image_gallery">Galerie d'images</a></li>
-</ul>
+## Dans ce module
 
-<p> </p>
+- [Prendre des décisions dans le code - les conditions](/fr/Apprendre/JavaScript/Building_blocks/conditionals)
+- [Les boucles dans le code](/fr/Apprendre/JavaScript/Building_blocks/Looping_code)
+- [les fonctions - des blocs de code réutilisables](/fr/Apprendre/JavaScript/Building_blocks/Fonctions)
+- [Construisez votre propre fonction](/fr/Apprendre/JavaScript/Building_blocks/Build_your_own_function)
+- [les valeurs de retour des fonction](/fr/Apprendre/JavaScript/Building_blocks/Return_values)[s](/fr/docs/Learn/JavaScript/Building_blocks/Return_values)
+- [Introduction aux événement](/fr/Apprendre/JavaScript/Building_blocks/Ev%C3%A8nements)[s](/fr/Apprendre/JavaScript/Building_blocks/Ev%C3%A8nements)
+- [Galerie d'images](/fr/docs/Apprendre/JavaScript/Building_blocks/Image_gallery)
diff --git a/files/fr/learn/javascript/building_blocks/functions/index.md b/files/fr/learn/javascript/building_blocks/functions/index.md
index eb804d4dcf..afd792fac3 100644
--- a/files/fr/learn/javascript/building_blocks/functions/index.md
+++ b/files/fr/learn/javascript/building_blocks/functions/index.md
@@ -4,324 +4,387 @@ slug: Learn/JavaScript/Building_blocks/Functions
 translation_of: Learn/JavaScript/Building_blocks/Functions
 original_slug: Apprendre/JavaScript/Building_blocks/Fonctions
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}
 
-<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}</div>
-
-<p>Les <strong>fonctions</strong> sont un autre concept essentiel de la programmation, qui permettent de stocker dans un bloc défini une partie de code qui effectue une seule tâche afin de l'appeler plus tard lorsque nous en avons besoin en utilisant une seule commande courte — au lieu de ré-écrire l'intégralité de ce code à chaque fois. Dans cet article nous explorons les concepts fondamentaux inhérents aux fonctions tels que la syntaxe de base, comment les définir et les invoquer, leur portée et leurs paramètres.</p>
+Les **fonctions** sont un autre concept essentiel de la programmation, qui permettent de stocker dans un bloc défini une partie de code qui effectue une seule tâche afin de l'appeler plus tard lorsque nous en avons besoin en utilisant une seule commande courte — au lieu de ré-écrire l'intégralité de ce code à chaque fois. Dans cet article nous explorons les concepts fondamentaux inhérents aux fonctions tels que la syntaxe de base, comment les définir et les invoquer, leur portée et leurs paramètres.
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Prerequis:</th>
-   <td>Culture informatique basique, compréhension basique du HTML et du CSS, <a href="/fr/docs/Learn/JavaScript/First_steps">Premiers pas en JavaScript...</a></td>
-  </tr>
-  <tr>
-   <th scope="row">Objectif:</th>
-   <td>Comprendre les concepts fondamentaux des fonctions JavaScript.</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Prerequis:</th>
+      <td>
+        Culture informatique basique, compréhension basique du HTML et du CSS,
+        <a href="/fr/docs/Learn/JavaScript/First_steps"
+          >Premiers pas en JavaScript...</a
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Objectif:</th>
+      <td>Comprendre les concepts fondamentaux des fonctions JavaScript.</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Où_trouve-ton_des_fonctions">Où trouve-t'on des fonctions ?</h2>
+## Où trouve-t'on des fonctions ?
 
-<p>En JavaScript, vous trouverez des fonctions partout. En fait, nous avons utilisé des fonctions depuis le début du cours ; nous n'en avons simplement pas beaucoup parlé. Toutefois, il est maintenant temps de parler des fonctions de manière explicite et d'explorer réellement leur syntaxe.</p>
+En JavaScript, vous trouverez des fonctions partout. En fait, nous avons utilisé des fonctions depuis le début du cours ; nous n'en avons simplement pas beaucoup parlé. Toutefois, il est maintenant temps de parler des fonctions de manière explicite et d'explorer réellement leur syntaxe.
 
-<p>Presque à chaque fois que vous utilisez une structure de JavaScript qui utilise une paire de parenthèses — <code>()</code> — et que vous n'utilisez <strong>pas</strong> une structure usuelle et intégrée du langage telle que les boucles <a href="/fr/Learn/JavaScript/Building_blocks/Looping_code#The_standard_for_loop">for</a>, <a href="/fr/Learn/JavaScript/Building_blocks/Looping_code#while_and_do_..._while">while </a>ou<a href="/fr/Learn/JavaScript/Building_blocks/Looping_code#while_and_do_..._while"> do...while </a>, ou une déclaration <a href="/fr/Learn/JavaScript/Building_blocks/conditionals#if_..._else_statements">if...else </a>, vous utilisez une fonction.</p>
+Presque à chaque fois que vous utilisez une structure de JavaScript qui utilise une paire de parenthèses — `()` — et que vous n'utilisez **pas** une structure usuelle et intégrée du langage telle que les boucles [for](/fr/Learn/JavaScript/Building_blocks/Looping_code#The_standard_for_loop), [while ](/fr/Learn/JavaScript/Building_blocks/Looping_code#while_and_do_..._while)ou[ do...while ](/fr/Learn/JavaScript/Building_blocks/Looping_code#while_and_do_..._while), ou une déclaration [if...else ](/fr/Learn/JavaScript/Building_blocks/conditionals#if_..._else_statements), vous utilisez une fonction.
 
-<h2 id="Les_fonctions_intégrées_du_navigateur">Les fonctions intégrées du navigateur</h2>
+## Les fonctions intégrées du navigateur
 
-<p>Nous avons beaucoup utilisé les fonctions intégrées du navigateur dans ce cours. Comme par exemple à chaque fois que nous avons manipulé une chaîne de caractères :</p>
+Nous avons beaucoup utilisé les fonctions intégrées du navigateur dans ce cours. Comme par exemple à chaque fois que nous avons manipulé une chaîne de caractères :
 
-<pre class="brush: js">var myText = 'I am a string';
+```js
+var myText = 'I am a string';
 var newString = myText.replace('string', 'sausage');
 console.log(newString);
 // La fonction replace () sélectionne une chaîne,
 // remplace une sous-chaîne par une autre, et renvoie
-// la nouvelle chaîne avec les modifications effectuées.</pre>
+// la nouvelle chaîne avec les modifications effectuées.
+```
 
-<p>Ou à chaque fois que nous avons manipulé un tableau :</p>
+Ou à chaque fois que nous avons manipulé un tableau :
 
-<pre class="brush: js">var myArray = ['I', 'love', 'chocolate', 'frogs'];
+```js
+var myArray = ['I', 'love', 'chocolate', 'frogs'];
 var madeAString = myArray.join(' ');
 console.log(madeAString);
 // La fonction join() sélectionne un tableau, rassemble
 // tous les éléments du tableau dans une chaîne,
-// et renvoie cette nouvelle chaîne.</pre>
+// et renvoie cette nouvelle chaîne.
+```
 
-<p>Ou à chaque fois que nous avons généré un nombre aléatoire :</p>
+Ou à chaque fois que nous avons généré un nombre aléatoire :
 
-<pre class="brush: js">var myNumber = Math.random();
+```js
+var myNumber = Math.random();
 // la fonction random() génère un nombre aléatoire
 // entre 0 et 1, et renvoie
-// ce nombre</pre>
+// ce nombre
+```
 
-<p>... nous avons utilisé une fonction !</p>
+... nous avons utilisé une fonction !
 
-<div class="note">
-<p><strong>Note :</strong> N'hésitez pas à copier ces lignes dans la console JavaScript de votre navigateur afin de vous familiariser à nouveau avec leur fonctionnalité si vous en ressentez le besoin.</p>
-</div>
+> **Note :** N'hésitez pas à copier ces lignes dans la console JavaScript de votre navigateur afin de vous familiariser à nouveau avec leur fonctionnalité si vous en ressentez le besoin.
 
-<p>Le langage Javascript a de nombreuses fonctions intégrées pour vous permettre de faire des choses utiles sans devoir écrire tout le code vous-même. En fait, certains codes que vous appelez quand<strong> invoquez</strong> (un mot sophistiqué pour dire lancer ou exécuter) une fonction intégrée du navigateur ne pourraient pas être écrits en JavaScript — la plupart de ces fonctions appellent des parties de code interne du navigateur qui est très majoritairement écrit en langages de bas niveau comme le C++, et non pas en langage web comme JavaScript.</p>
+Le langage Javascript a de nombreuses fonctions intégrées pour vous permettre de faire des choses utiles sans devoir écrire tout le code vous-même. En fait, certains codes que vous appelez quand **invoquez** (un mot sophistiqué pour dire lancer ou exécuter) une fonction intégrée du navigateur ne pourraient pas être écrits en JavaScript — la plupart de ces fonctions appellent des parties de code interne du navigateur qui est très majoritairement écrit en langages de bas niveau comme le C++, et non pas en langage web comme JavaScript.
 
-<p>Gardez à l'esprit que certaines fonctions intégrées du navigateur ne font pas partie du noyau du langage JavaScript — certaines font partie des APIs du navigateur qui sont construites à partir du langage par défaut pour apporter encore plus de fonctionnalités ( consultez cette <a href="/fr/docs/Learn/JavaScript/First_steps/What_is_JavaScript">section antérieure de notre cours</a> pour une description plus détaillée ). Nous aborderons l'utilisation des APIs du navigateur plus en détail dans un module ultérieur.</p>
+Gardez à l'esprit que certaines fonctions intégrées du navigateur ne font pas partie du noyau du langage JavaScript — certaines font partie des APIs du navigateur qui sont construites à partir du langage par défaut pour apporter encore plus de fonctionnalités ( consultez cette [section antérieure de notre cours](/fr/docs/Learn/JavaScript/First_steps/What_is_JavaScript) pour une description plus détaillée ). Nous aborderons l'utilisation des APIs du navigateur plus en détail dans un module ultérieur.
 
-<h2 id="Fonctions_versus_méthodes">Fonctions versus méthodes</h2>
+## Fonctions versus méthodes
 
-<p>Une chose que nous devons éclaircir avant d'aller plus loin — d'un point de vue technique les fonctions intégrées du navigateur ne sont pas des fonctions mais des <strong>méthodes</strong>. Cela peut vous effrayer ou vous désorienter mais n'ayez crainte — les mots fonction et méthode sont largement interchangeables, du moins pour ce qui nous concerne, à ce niveau de votre apprentissage.</p>
+Une chose que nous devons éclaircir avant d'aller plus loin — d'un point de vue technique les fonctions intégrées du navigateur ne sont pas des fonctions mais des **méthodes**. Cela peut vous effrayer ou vous désorienter mais n'ayez crainte — les mots fonction et méthode sont largement interchangeables, du moins pour ce qui nous concerne, à ce niveau de votre apprentissage.
 
-<p>La distinction réside dans le fait que les méthodes sont des fonctions définies à l'intérieur d'objets. Les fonctions intégrées au navigateur (méthodes) et les variables (que l'on appelle <strong>propriétés</strong>) sont stockées dans des objets structurés, pour rendre le code plus efficace et facile à manier.</p>
+La distinction réside dans le fait que les méthodes sont des fonctions définies à l'intérieur d'objets. Les fonctions intégrées au navigateur (méthodes) et les variables (que l'on appelle **propriétés**) sont stockées dans des objets structurés, pour rendre le code plus efficace et facile à manier.
 
-<p>Vous n'aurez pas besoin d'apprendre les rouages des objets structurés du JavaScript pour le moment — vous pouvez attendre un module ultérieur qui vous en apprendra tous les rouages internes et comment les créer par vous même. Pour le moment, nous souhaitons simplement éviter toute confusion possible entre méthode et fonction — car vous êtes susceptibles de rencontrer les deux termes si vous en recherchez les ressources disponibles sur le Web. </p>
+Vous n'aurez pas besoin d'apprendre les rouages des objets structurés du JavaScript pour le moment — vous pouvez attendre un module ultérieur qui vous en apprendra tous les rouages internes et comment les créer par vous même. Pour le moment, nous souhaitons simplement éviter toute confusion possible entre méthode et fonction — car vous êtes susceptibles de rencontrer les deux termes si vous en recherchez les ressources disponibles sur le Web.
 
-<h2 id="Fonctions_personnalisées">Fonctions personnalisées</h2>
+## Fonctions personnalisées
 
-<p>Nous avons également rencontré beaucoup de fonctions personnalisées dans le cours jusqu'ici — fonctions définies dans votre code, et non pas dans le navigateur. À chaque fois que vous voyez un nom personnalisé suivi de parenthèses, vous utilisez une fonction personnalisée. Dans notre exemple <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/random-canvas-circles.html">random-canvas-circles.html </a>tiré de l'article <a href="/fr/Apprendre/JavaScript/Building_blocks/Looping_code">les boucles dans le code </a>(voir aussi le <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html">code source </a>complet), nous avons inclus une fonction personnalisée <code>draw()</code>qui ressemblait à ça :</p>
+Nous avons également rencontré beaucoup de fonctions personnalisées dans le cours jusqu'ici — fonctions définies dans votre code, et non pas dans le navigateur. À chaque fois que vous voyez un nom personnalisé suivi de parenthèses, vous utilisez une fonction personnalisée. Dans notre exemple [random-canvas-circles.html ](http://mdn.github.io/learning-area/javascript/building-blocks/loops/random-canvas-circles.html)tiré de l'article [les boucles dans le code ](/fr/Apprendre/JavaScript/Building_blocks/Looping_code)(voir aussi le [code source ](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html)complet), nous avons inclus une fonction personnalisée `draw()`qui ressemblait à ça :
 
-<pre class="brush: js">function draw() {
+```js
+function draw() {
   ctx.clearRect(0,0,WIDTH,HEIGHT);
-  for (var i = 0; i &lt; 100; i++) {
+  for (var i = 0; i < 100; i++) {
     ctx.beginPath();
     ctx.fillStyle = 'rgba(255,0,0,0.5)';
     ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
     ctx.fill();
   }
-}</pre>
+}
+```
 
-<p>Cette fonction dessine 100 cercles aléatoires dans un élément {{htmlelement("canvas")}}. À chaque fois que nous voulons faire cela, il suffit d'invoquer la fonction comme suit :</p>
+Cette fonction dessine 100 cercles aléatoires dans un élément {{htmlelement("canvas")}}. À chaque fois que nous voulons faire cela, il suffit d'invoquer la fonction comme suit :
 
-<pre class="brush: js">draw();</pre>
+```js
+draw();
+```
 
-<p>au lieu de devoir ré-écrire tout le code à chaque fois que nous voulons la répéter. De plus, les fonctions peuvent contenir tous les codes qu'il vous plaira — vous pouvez même appeler d'autres fonctions à l'intérieur d'une fonction. Par exemple, la fonction ci-dessus appelle la fonction <code>random()</code> trois fois, comme définie par le code suivant :</p>
+au lieu de devoir ré-écrire tout le code à chaque fois que nous voulons la répéter. De plus, les fonctions peuvent contenir tous les codes qu'il vous plaira — vous pouvez même appeler d'autres fonctions à l'intérieur d'une fonction. Par exemple, la fonction ci-dessus appelle la fonction `random()` trois fois, comme définie par le code suivant :
 
-<pre class="brush: js">function random(number) {
+```js
+function random(number) {
   return Math.floor(Math.random()*number);
-}</pre>
+}
+```
 
-<p>Nous avions besoin de cette fonction car la fonction intégrée du navigateur <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a> génère uniquement un nombre décimal aléatoire compris entre 0 et 1 alors que nous voulions un nombre entier compris entre 0 et un nombre défini.</p>
+Nous avions besoin de cette fonction car la fonction intégrée du navigateur [Math.random()](/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/random) génère uniquement un nombre décimal aléatoire compris entre 0 et 1 alors que nous voulions un nombre entier compris entre 0 et un nombre défini.
 
-<h2 id="Invoquer_des_fonctions">Invoquer des fonctions</h2>
+## Invoquer des fonctions
 
-<p>Vous êtes probablement au clair avec cela maintenant, mais juste au cas où... pour utiliser une fonction après qu'elle ait été définie, vous devez la lancer - ou l'invoquer. Pour ce faire, vous devez inclure le nom de la fonction quelque part dans le code suivi par des parenthèses.</p>
+Vous êtes probablement au clair avec cela maintenant, mais juste au cas où... pour utiliser une fonction après qu'elle ait été définie, vous devez la lancer - ou l'invoquer. Pour ce faire, vous devez inclure le nom de la fonction quelque part dans le code suivi par des parenthèses.
 
-<pre class="brush: js">function myFunction() {
+```js
+function myFunction() {
   alert('hello');
 }
 
 myFunction()
-// appelle la fonction une fois</pre>
+// appelle la fonction une fois
+```
 
-<h2 id="Fonctions_anonymes">Fonctions anonymes</h2>
+## Fonctions anonymes
 
-<p>Vous pouvez rencontrer des fonctions définies et invoquées de manière légèrement différentes. Nous venons juste de créer une fonction comme celle-ci :</p>
+Vous pouvez rencontrer des fonctions définies et invoquées de manière légèrement différentes. Nous venons juste de créer une fonction comme celle-ci :
 
-<pre class="brush: js">function myFunction() {
+```js
+function myFunction() {
   alert('hello');
-}</pre>
+}
+```
 
-<p>Mais vous pouvez également créer une fonction qui n'a pas de nom :</p>
+Mais vous pouvez également créer une fonction qui n'a pas de nom :
 
-<pre class="brush: js">function() {
+```js
+function() {
   alert('hello');
-}</pre>
+}
+```
 
-<p>Ceci est une <strong>fonction anonyme </strong>— elle n'a pas de nom ! De plus, elle ne produira pas d'effet par elle-même. Les fonctions anonymes sont généralement utilisées en association avec un gestionnaire d'évènement, comme dans l'exemple suivant qui lance le code inscrit dans la fonction lorsque le bouton associé est cliqué :</p>
+Ceci est une **fonction anonyme** — elle n'a pas de nom ! De plus, elle ne produira pas d'effet par elle-même. Les fonctions anonymes sont généralement utilisées en association avec un gestionnaire d'évènement, comme dans l'exemple suivant qui lance le code inscrit dans la fonction lorsque le bouton associé est cliqué :
 
-<pre class="brush: js">var myButton = document.querySelector('button');
+```js
+var myButton = document.querySelector('button');
 
 myButton.onclick = function() {
   alert('hello');
-}</pre>
+}
+```
 
-<p>Cet exemple ci-dessus nécessite qu'il y ait un élément HTML {{htmlelement("button")}} disponible sur la page afin qu'il puisse être cliqué. Vous avez déjà rencontré ce type de structure plusieurs fois dans ce cours et vous en apprendrez plus à son sujet lorsque vous en étudierez l'utilisation dans l'article suivant.</p>
+Cet exemple ci-dessus nécessite qu'il y ait un élément HTML {{htmlelement("button")}} disponible sur la page afin qu'il puisse être cliqué. Vous avez déjà rencontré ce type de structure plusieurs fois dans ce cours et vous en apprendrez plus à son sujet lorsque vous en étudierez l'utilisation dans l'article suivant.
 
-<p>Vous pouvez également assigner une fonction anonyme en tant que valeur d'une variable, comme par exemple :</p>
+Vous pouvez également assigner une fonction anonyme en tant que valeur d'une variable, comme par exemple :
 
-<pre class="brush: js">var myGreeting = function() {
+```js
+var myGreeting = function() {
   alert('hello');
-}</pre>
+}
+```
 
-<p>Cette fonction peut désormais être invoquée en utilisant :</p>
+Cette fonction peut désormais être invoquée en utilisant :
 
-<pre class="brush: js">myGreeting();</pre>
+```js
+myGreeting();
+```
 
-<p>Cela a pour effet d'attribuer un nom à la fonction ; vous pouvez également utiliser la fonction anonyme en tant que valeur de variables multiples, comme par exemple :</p>
+Cela a pour effet d'attribuer un nom à la fonction ; vous pouvez également utiliser la fonction anonyme en tant que valeur de variables multiples, comme par exemple :
 
-<pre class="brush: js">var anotherGreeting = function() {
+```js
+var anotherGreeting = function() {
   alert('hello');
-}</pre>
+}
+```
 
-<p>Cette fonction peut désormais être invoquée en utilisant au choix :</p>
+Cette fonction peut désormais être invoquée en utilisant au choix :
 
-<pre class="brush: js">myGreeting();
-anotherGreeting();</pre>
+```js
+myGreeting();
+anotherGreeting();
+```
 
-<p>Cela peut toutefois générer de la confusion, donc ne le faites pas ! Lorsque l'on crée des fonctions, il vaut mieux se contenter de cette forme :</p>
+Cela peut toutefois générer de la confusion, donc ne le faites pas ! Lorsque l'on crée des fonctions, il vaut mieux se contenter de cette forme :
 
-<pre class="brush: js">function myGreeting() {
+```js
+function myGreeting() {
   alert('hello');
-}</pre>
+}
+```
 
-<p>Vous utiliserez principalement des fonctions anonymes simplement pour lancer une partie de code en réponse à un évènement — comme lorsqu'un bouton est cliqué — en utilisant un gestionnaire d'évènement. Cela devrait ressembler à ça :</p>
+Vous utiliserez principalement des fonctions anonymes simplement pour lancer une partie de code en réponse à un évènement — comme lorsqu'un bouton est cliqué — en utilisant un gestionnaire d'évènement. Cela devrait ressembler à ça :
 
-<pre class="brush: js">myButton.onclick = function() {
+```js
+myButton.onclick = function() {
   alert('hello');
   // Je peux mettre ici autant
   // de code que je le souhaite
-}</pre>
+}
+```
 
-<h2 id="Paramètres_des_fonctions">Paramètres des fonctions</h2>
+## Paramètres des fonctions
 
-<p>Certaines fonctions nécessitent que l'on définisse des <strong>paramètres</strong> lorsqu'on les appelle — ce sont des valeurs qui doivent êtres inclues dans les parenthèses de la fonction pour que celle-ci fonctionne correctement.</p>
+Certaines fonctions nécessitent que l'on définisse des **paramètres** lorsqu'on les appelle — ce sont des valeurs qui doivent êtres inclues dans les parenthèses de la fonction pour que celle-ci fonctionne correctement.
 
-<div class="note">
-<p><strong>Note :</strong> Les paramètres sont parfois appelés arguments, propriétés ou encore attributs.</p>
-</div>
+> **Note :** Les paramètres sont parfois appelés arguments, propriétés ou encore attributs.
 
-<p>Par exemple, la fonction intégrée du navigateur <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a> ne nécessite pas de paramètres. lorsqu'elle est appelée, elle renvoie toujours un nombre aléatoire compris entre 0 et 1 : </p>
+Par exemple, la fonction intégrée du navigateur [Math.random()](/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/random) ne nécessite pas de paramètres. lorsqu'elle est appelée, elle renvoie toujours un nombre aléatoire compris entre 0 et 1 :
 
-<pre class="brush: js">var myNumber = Math.random();</pre>
+```js
+var myNumber = Math.random();
+```
 
-<p>La fonction de chaîne intégrée du navigateur <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/replace">replace()</a> nécessite toutefois deux paramètres — la sous-chaîne qu'elle doit remplacer à l'intérieur de la chaîne, et la sous-chaîne par laquelle elle doit la remplacer :</p>
+La fonction de chaîne intégrée du navigateur [replace()](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/replace) nécessite toutefois deux paramètres — la sous-chaîne qu'elle doit remplacer à l'intérieur de la chaîne, et la sous-chaîne par laquelle elle doit la remplacer :
 
-<pre class="brush: js">var myText = 'I am a string';
-var newString = myText.replace('string', 'sausage');</pre>
+```js
+var myText = 'I am a string';
+var newString = myText.replace('string', 'sausage');
+```
 
-<div class="note">
-<p><strong>Note :</strong> Quand vous devez définir plusieurs paramètres, ils doivent être séparés par des virgules.</p>
-</div>
+> **Note :** Quand vous devez définir plusieurs paramètres, ils doivent être séparés par des virgules.
 
-<p>Il est également à noter que parfois les paramètres sont optionnels — vous n'avez pas à les spécifier. Si vous ne le faites pas, la fonction va généralement adopter un comportement par défaut. Par exemple, la fonction de tableau <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/join">join()</a> a des paramètres optionnels :</p>
+Il est également à noter que parfois les paramètres sont optionnels — vous n'avez pas à les spécifier. Si vous ne le faites pas, la fonction va généralement adopter un comportement par défaut. Par exemple, la fonction de tableau [join()](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/join) a des paramètres optionnels :
 
-<pre class="brush: js">var myArray = ['I', 'love', 'chocolate', 'frogs'];
+```js
+var myArray = ['I', 'love', 'chocolate', 'frogs'];
 var madeAString = myArray.join(' ');
 // renvoie 'I love chocolate frogs'
 var madeAString = myArray.join();
-// renvoie 'I,love,chocolate,frogs'</pre>
+// renvoie 'I,love,chocolate,frogs'
+```
 
-<p>Si aucun paramètre n'est inclus pour spécifier un caractère de jointure / délimitation, une virgule est utilisée par défaut.</p>
+Si aucun paramètre n'est inclus pour spécifier un caractère de jointure / délimitation, une virgule est utilisée par défaut.
 
-<h2 id="La_portée_des_fonctions_et_les_conflits.">La portée des fonctions et les conflits.</h2>
+## La portée des fonctions et les conflits.
 
-<p>Parlons un peu de la {{glossary("portée")}} — un concept très important lorsque l'on a affaire à des fonctions. Lorsque vous créez une fonction, les variables et les autres choses qui sont définies à l'intérieur de la fonction ont leur propre <strong>portée</strong>, ce qui signifie qu'elles sont enfermées dans leur propre compartiment séparé et qu'elles ne peuvent pas être affectées par d'autres fonctions ou par le code en dehors de la fonction.</p>
+Parlons un peu de la {{glossary("portée")}} — un concept très important lorsque l'on a affaire à des fonctions. Lorsque vous créez une fonction, les variables et les autres choses qui sont définies à l'intérieur de la fonction ont leur propre **portée**, ce qui signifie qu'elles sont enfermées dans leur propre compartiment séparé et qu'elles ne peuvent pas être affectées par d'autres fonctions ou par le code en dehors de la fonction.
 
-<p>Le plus haut niveau en dehors de toutes vos fonctions est appelé la <strong>portée globale</strong>. Les valeurs définies dans la portée globale sont accessibles à partir de n'importe qu'elle partie du code.</p>
+Le plus haut niveau en dehors de toutes vos fonctions est appelé la **portée globale**. Les valeurs définies dans la portée globale sont accessibles à partir de n'importe qu'elle partie du code.
 
-<p>Le JavaScript est construit de cette façon pour plusieurs raisons —  mais principalement à cause de la sécurité et de l'organisation. Parfois, vous ne voulez pas que vos variables soient accessibles depuis toutes les autres parties du code — des script externes appelés depuis l'extérieur de la fonction pourraient interférer avec votre code et causer des problèmes parce qu'ils utilisent les mêmes noms de variables que d'autres parties du code, provoquant des conflits. Cela peut être fait de manière malveillante ou simplement par accident.</p>
+Le JavaScript est construit de cette façon pour plusieurs raisons —  mais principalement à cause de la sécurité et de l'organisation. Parfois, vous ne voulez pas que vos variables soient accessibles depuis toutes les autres parties du code — des script externes appelés depuis l'extérieur de la fonction pourraient interférer avec votre code et causer des problèmes parce qu'ils utilisent les mêmes noms de variables que d'autres parties du code, provoquant des conflits. Cela peut être fait de manière malveillante ou simplement par accident.
 
-<p>Par exemple, disons que vous avez un fichier HTML qui appelle deux fichiers JavaScript externes, et que les deux ont une variable et une fonction définie qui utilisent le même nom :</p>
+Par exemple, disons que vous avez un fichier HTML qui appelle deux fichiers JavaScript externes, et que les deux ont une variable et une fonction définie qui utilisent le même nom :
 
-<pre class="brush: html">&lt;!-- Excerpt from my HTML --&gt;
-&lt;script src="first.js"&gt;&lt;/script&gt;
-&lt;script src="second.js"&gt;&lt;/script&gt;
-&lt;script&gt;
+```html
+<!-- Excerpt from my HTML -->
+<script src="first.js"></script>
+<script src="second.js"></script>
+<script>
   greeting();
-&lt;/script&gt;</pre>
+</script>
+```
 
-<pre class="brush: js">// first.js
+```js
+// first.js
 var name = 'Chris';
 function greeting() {
   alert('Hello ' + name + ': welcome to our company.');
-}</pre>
+}
+```
 
-<pre class="brush: js">// second.js
+```js
+// second.js
 var name = 'Zaptec';
 function greeting() {
   alert('Our company is called ' + name + '.');
-}</pre>
+}
+```
 
-<p>Les deux fonctions que vous voulez appeler s'appellent <code>greeting()</code>, mais vous ne pouvez accéder qu'à la fonction <code>greeting()</code> du second fichier <code>second.js</code>  — car celui-ci est appliqué au code HTML plus tard dans le code source, de sorte que sa variable et sa fonction écrasent celles du premier fichier <code>first.js</code>.</p>
+Les deux fonctions que vous voulez appeler s'appellent `greeting()`, mais vous ne pouvez accéder qu'à la fonction `greeting()` du second fichier `second.js`  — car celui-ci est appliqué au code HTML plus tard dans le code source, de sorte que sa variable et sa fonction écrasent celles du premier fichier `first.js`.
 
-<div class="note">
-<p><strong>Note :</strong> Vous pouvez voir cet exemple <a href="http://mdn.github.io/learning-area/javascript/building-blocks/functions/conflict.html">s'exécuter sur GitHub</a> (voir aussi le <a href="https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/functions">code source</a>).</p>
-</div>
+> **Note :** Vous pouvez voir cet exemple [s'exécuter sur GitHub](http://mdn.github.io/learning-area/javascript/building-blocks/functions/conflict.html) (voir aussi le [code source](https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/functions)).
 
-<p>En conservant des parties de votre code enfermées dans des fonctions, vous évitez de tels problèmes. Cette procédure est considérée comme une bonne pratique.</p>
+En conservant des parties de votre code enfermées dans des fonctions, vous évitez de tels problèmes. Cette procédure est considérée comme une bonne pratique.
 
-<p>C'est un peu comme au zoo. Les lions, zèbres, tigres et pingouins sont enfermés dans leurs propres enclos, et n'ont accès qu'aux éléments se trouvant à l'intérieur de leur enclos — de la même manière que la portée des fonctions. S'il leur était possible de pénétrer dans les autres enclos, des problèmes se produiraient. Au mieux, des animaux différents seraient dans l'inconfort au sein d'un habitat étranger — un lion ou un tigre se sentirait très mal dans l'environnement humide et glacé des pingouins. Au pire, les lions et les tigres pourraient essayer de manger les pingouins !</p>
+C'est un peu comme au zoo. Les lions, zèbres, tigres et pingouins sont enfermés dans leurs propres enclos, et n'ont accès qu'aux éléments se trouvant à l'intérieur de leur enclos — de la même manière que la portée des fonctions. S'il leur était possible de pénétrer dans les autres enclos, des problèmes se produiraient. Au mieux, des animaux différents seraient dans l'inconfort au sein d'un habitat étranger — un lion ou un tigre se sentirait très mal dans l'environnement humide et glacé des pingouins. Au pire, les lions et les tigres pourraient essayer de manger les pingouins !
 
-<p><img alt="" src="MDN-mozilla-zoo.png"></p>
+![](MDN-mozilla-zoo.png)
 
-<p>Le gardien du zoo est comme la portée globale — il ou elle a les clefs pour accéder à chaque enclos, pour l'approvisionner en nourriture, soigner les animaux malades, ...etc.</p>
+Le gardien du zoo est comme la portée globale — il ou elle a les clefs pour accéder à chaque enclos, pour l'approvisionner en nourriture, soigner les animaux malades, ...etc.
 
-<h3 id="Apprentissage_actif_Jouer_avec_la_portée">Apprentissage actif : Jouer avec la portée</h3>
+### Apprentissage actif : Jouer avec la portée
 
-<p>Jetons un coup d'oeil à un exemple réel pour démontrer les effets de la portée.</p>
+Jetons un coup d'oeil à un exemple réel pour démontrer les effets de la portée.
 
-<ol>
- <li>Tout d'abord, faisons un copie locale de notre exemple <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-scope.html">function-scope.html</a>. Celui-ci contient deux fonctions appelées <code>a()</code> et <code>b()</code>, et trois variables — <code>x</code>, <code>y</code>, and <code>z</code> — deux d'entre elles sont définies à l'intérieur de la fonction, et l'autre dans la portée globale. Il contient également une troisième fonction appelée <code>output()</code>, qui prend un seul paramètre et le renvoie dans un paragraphe de la page.</li>
- <li>Ouvrez l'exemple ci-dessus dans un navigateur et dans un éditeur de texte.</li>
- <li>Ouvrez la console JavaScript dans les outils de développement de votre navigateur et entrez la commande suivante :
-  <pre class="brush: js">output(x);</pre>
-  Vous devriez voir la valeur de la variable <code>x</code> renvoyée à l'écran.</li>
- <li>Maintenant essayez d'entrer les commandes suivantes :
-  <pre class="brush: js">output(y);
-output(z);</pre>
+1.  Tout d'abord, faisons un copie locale de notre exemple [function-scope.html](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-scope.html). Celui-ci contient deux fonctions appelées `a()` et `b()`, et trois variables — `x`, `y`, and `z` — deux d'entre elles sont définies à l'intérieur de la fonction, et l'autre dans la portée globale. Il contient également une troisième fonction appelée `output()`, qui prend un seul paramètre et le renvoie dans un paragraphe de la page.
+2.  Ouvrez l'exemple ci-dessus dans un navigateur et dans un éditeur de texte.
+3.  Ouvrez la console JavaScript dans les outils de développement de votre navigateur et entrez la commande suivante :
 
-  <p>Toutes les deux devraient vous renvoyer un message d'erreur du type : "<a href="/fr/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: y is not defined</a>". Pourquoi ? À cause de la portée de la fonction — <code>y</code> and <code>z</code> sont enfermées dans les fonctions <code>a()</code> et <code>b()</code>, donc <code>output()</code> ne peut pas les atteindre lorsqu'elles sont appelées depuis la portée globale.</p>
- </li>
- <li>
-  <p>Néanmoins, que se passe-t-il losqu'elles sont appelées de l'intérieur d'une autre fonction ? Essayer d'éditer <code>a()</code> et <code>b()</code> pour qu'elles aient la forme suivante :</p>
+    ```js
+    output(x);
+    ```
 
-  <pre class="brush: js">function a() {
-  var y = 2;
-  output(y);
-}
+    Vous devriez voir la valeur de la variable `x` renvoyée à l'écran.
 
-function b() {
-  var z = 3;
-  output(z);
-}</pre>
-  Sauvegardez le code et rechargez-le dans votre navigateur, puis essayez d'appeler les fonctions <code>a()</code> et <code>b()</code> depuis la console JavaScript :
-
-  <pre class="brush: js">a();
-b();</pre>
-  Vous devriez voir les valeurs <code>y</code> and <code>z</code> renvoyées sur la page. Cela fonctionne très bien car la fonction <code>output()</code> est applée à l'intérieur des autres fonctions — dans la portée dans laquelle les variables qu'elle renvoie sont définies. La fonction <code>output()</code> est elle-même disponible n'importe où dans le code, car elle est définie dans la portée globale.</li>
- <li>Maintenant essayer de mettre à jour le code comme ceci :
-  <pre class="brush: js">function a() {
-  var y = 2;
-  output(x);
-}
+4.  Maintenant essayez d'entrer les commandes suivantes :
 
-function b() {
-  var z = 3;
-  output(x);
-}</pre>
-  Sauvegardez et rechargez à nouveau dans la console JavaScript :</li>
- <li>
-  <pre class="brush: js">a();
-b();</pre>
-  Les deux fonctions <code>a()</code> et <code>b()</code> appelées devraient renvoyer la valeur x — 1. Cela fonctionne très bien car même si la fonction <code>output()</code> n'est pas dans la même portée que celle dans laquelle  <code>x</code> est définie, <code>x</code> est une variable globale et donc elle est disponible dans n'importe quelle partie du code.</li>
- <li>Pour finir, essayez de mettre à jour le code comme ceci :
-  <pre class="brush: js">function a() {
-  var y = 2;
-  output(z);
-}
+    ```js
+    output(y);
+    output(z);
+    ```
+
+    Toutes les deux devraient vous renvoyer un message d'erreur du type : "[ReferenceError: y is not defined](/fr/docs/Web/JavaScript/Reference/Errors/Not_defined)". Pourquoi ? À cause de la portée de la fonction — `y` and `z` sont enfermées dans les fonctions `a()` et `b()`, donc `output()` ne peut pas les atteindre lorsqu'elles sont appelées depuis la portée globale.
 
-function b() {
-  var z = 3;
-  output(y);
-}</pre>
- </li>
- <li>Sauvegardez et rechargez à nouveau dans la console JavaScript :
-  <pre class="brush: js">a();
-b();</pre>
-  Cette fois l'appel de <code>a()</code> et <code>b()</code> renverra l'erreur "<a href="/fr/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: z is not defined</a>"  — parce que l'appel de la fonction <code>output()</code> et des variables qu'elle essaie d'afficher ne sont pas définis dans les mêmes portées — les variables sont en effet invisibles pour cet appel de fonction.</li>
-</ol>
+5.  Néanmoins, que se passe-t-il losqu'elles sont appelées de l'intérieur d'une autre fonction ? Essayer d'éditer `a()` et `b()` pour qu'elles aient la forme suivante :
 
-<div class="note">
-<p><strong>Note :</strong> Ces règles de portée ne s'appliquent pas aux boucles (ex. <code>for() { ... }</code>) ni aux instructions conditionnelles (ex. <code>if() { ... }</code>) — elles semblent très similaires, mais ce n'est pas la même chose ! Prenez garde de ne pas les confondre.</p>
-</div>
+    ```js
+    function a() {
+      var y = 2;
+      output(y);
+    }
 
-<div class="note">
-<p><strong>Note :</strong> Le message d'erreur <a href="/fr/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: "x" is not defined</a> est l'un des plus courant que vous pourrez rencontrer. S'il s'affiche et que vous êtes sûr d'avoir défini la variable en question, vérifiez quelle est sa portée.</p>
-</div>
+    function b() {
+      var z = 3;
+      output(z);
+    }
+    ```
 
-<h3 id="Des_fonctions_à_lintérieur_de_fonctions">Des fonctions à l'intérieur de fonctions</h3>
+    Sauvegardez le code et rechargez-le dans votre navigateur, puis essayez d'appeler les fonctions `a()` et `b()` depuis la console JavaScript :
 
-<p>Gardez à l'esprit que vous pouvez appeler une fonction de n'importe où, même à l'intérieur d'une autre fonction. Ceci est souvent utilisé comme un moyen de garder le code bien organisé — si vous avez une grande fonction complexe, elle est plus facile à comprendre si vous la divisez en plusieurs sous-fonctions :</p>
+    ```js
+    a();
+    b();
+    ```
 
-<pre class="brush: js">function myBigFunction() {
+    Vous devriez voir les valeurs `y` and `z` renvoyées sur la page. Cela fonctionne très bien car la fonction `output()` est applée à l'intérieur des autres fonctions — dans la portée dans laquelle les variables qu'elle renvoie sont définies. La fonction `output()` est elle-même disponible n'importe où dans le code, car elle est définie dans la portée globale.
+
+6.  Maintenant essayer de mettre à jour le code comme ceci :
+
+    ```js
+    function a() {
+      var y = 2;
+      output(x);
+    }
+
+    function b() {
+      var z = 3;
+      output(x);
+    }
+    ```
+
+    Sauvegardez et rechargez à nouveau dans la console JavaScript :
+
+7.  ```js
+    a();
+    b();
+    ```
+
+    Les deux fonctions `a()` et `b()` appelées devraient renvoyer la valeur x — 1. Cela fonctionne très bien car même si la fonction `output()` n'est pas dans la même portée que celle dans laquelle  `x` est définie, `x` est une variable globale et donc elle est disponible dans n'importe quelle partie du code.
+
+8.  Pour finir, essayez de mettre à jour le code comme ceci :
+
+    ```js
+    function a() {
+      var y = 2;
+      output(z);
+    }
+
+    function b() {
+      var z = 3;
+      output(y);
+    }
+    ```
+
+9.  Sauvegardez et rechargez à nouveau dans la console JavaScript :
+
+    ```js
+    a();
+    b();
+    ```
+
+    Cette fois l'appel de `a()` et `b()` renverra l'erreur "[ReferenceError: z is not defined](/fr/docs/Web/JavaScript/Reference/Errors/Not_defined)"  — parce que l'appel de la fonction `output()` et des variables qu'elle essaie d'afficher ne sont pas définis dans les mêmes portées — les variables sont en effet invisibles pour cet appel de fonction.
+
+> **Note :** Ces règles de portée ne s'appliquent pas aux boucles (ex. `for() { ... }`) ni aux instructions conditionnelles (ex. `if() { ... }`) — elles semblent très similaires, mais ce n'est pas la même chose ! Prenez garde de ne pas les confondre.
+
+> **Note :** Le message d'erreur [ReferenceError: "x" is not defined](/fr/docs/Web/JavaScript/Reference/Errors/Not_defined) est l'un des plus courant que vous pourrez rencontrer. S'il s'affiche et que vous êtes sûr d'avoir défini la variable en question, vérifiez quelle est sa portée.
+
+### Des fonctions à l'intérieur de fonctions
+
+Gardez à l'esprit que vous pouvez appeler une fonction de n'importe où, même à l'intérieur d'une autre fonction. Ceci est souvent utilisé comme un moyen de garder le code bien organisé — si vous avez une grande fonction complexe, elle est plus facile à comprendre si vous la divisez en plusieurs sous-fonctions :
+
+```js
+function myBigFunction() {
   var myValue;
 
   subFunction1();
@@ -340,11 +403,12 @@ function subFunction2() {
 function subFunction3() {
   console.log(myValue);
 }
-</pre>
+```
 
-<p>Assurez-vous simplement que les valeurs utilisées dans la fonction ont une portée correcte. L'exemple ci-dessus entraînerait une erreur <code>ReferenceError: myValue is not defined</code>, car bien que la valeur <code>myValue</code>  est définie dans la même portée que les appels de fonction, elle n'est pas définie dans les définitions de fonctions - le code réel qui est exécuté lorsque les fonctions sont appelées. Pour que cela fonctionne, vous devez passer la valeur dans la fonction en tant que paramètre, comme ceci :</p>
+Assurez-vous simplement que les valeurs utilisées dans la fonction ont une portée correcte. L'exemple ci-dessus entraînerait une erreur `ReferenceError: myValue is not defined`, car bien que la valeur `myValue`  est définie dans la même portée que les appels de fonction, elle n'est pas définie dans les définitions de fonctions - le code réel qui est exécuté lorsque les fonctions sont appelées. Pour que cela fonctionne, vous devez passer la valeur dans la fonction en tant que paramètre, comme ceci :
 
-<pre class="brush: js">function myBigFunction() {
+```js
+function myBigFunction() {
   var myValue = 1;
 
   subFunction1(myValue);
@@ -362,32 +426,28 @@ function subFunction2(value) {
 
 function subFunction3(value) {
   console.log(value);
-}</pre>
+}
+```
 
-<h2 id="Conclusion">Conclusion</h2>
+## Conclusion
 
-<p>Cet article a exploré les concepts fondamentaux inhérents aux fonctions, ouvrant la voie au suivant dans lequel nous passerons à la pratique et vous guiderons à travers les étapes pour construire votre propre fonction personnalisée.</p>
+Cet article a exploré les concepts fondamentaux inhérents aux fonctions, ouvrant la voie au suivant dans lequel nous passerons à la pratique et vous guiderons à travers les étapes pour construire votre propre fonction personnalisée.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Guide/Fonctions">Fonctions</a> — aborde certaines fonctionnalités avancées non incluses ici.</li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Valeurs_par_d%C3%A9faut_des_arguments">Valeur par défaut des arguments</a>, <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es">Fonctions fléchées</a> — références avancées</li>
-</ul>
+- [Fonctions](/fr/docs/Web/JavaScript/Guide/Fonctions) — aborde certaines fonctionnalités avancées non incluses ici.
+- [Valeur par défaut des arguments](/fr/docs/Web/JavaScript/Reference/Fonctions/Valeurs_par_d%C3%A9faut_des_arguments), [Fonctions fléchées](/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es) — références avancées
 
-<ul>
-</ul>
+<!---->
 
-<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}</p>
+{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}
 
-<h2 id="Dans_ce_module">Dans ce module</h2>
+## Dans ce module
 
-<ul>
- <li><a href="/fr/Apprendre/JavaScript/Building_blocks/conditionals">Prendre des décisions dans le code — conditions</a></li>
- <li><a href="/fr/Apprendre/JavaScript/Building_blocks/Looping_code">Les boucles dans le code</a></li>
- <li><a href="/fr/Apprendre/JavaScript/Building_blocks/Fonctions">Fonctions — des blocs de code réutilisables</a></li>
- <li><a href="/fr/Apprendre/JavaScript/Building_blocks/Build_your_own_function">Construire votre propre fonction</a></li>
- <li><a href="/fr/Apprendre/JavaScript/Building_blocks/Return_values">Valeurs de retour des fonctions</a></li>
- <li><a href="/fr/Apprendre/JavaScript/Building_blocks/Ev%C3%A8nements">Introduction aux évènements</a></li>
- <li><a href="/fr/Apprendre/JavaScript/Building_blocks/Image_gallery">Galerie d'images</a></li>
-</ul>
+- [Prendre des décisions dans le code — conditions](/fr/Apprendre/JavaScript/Building_blocks/conditionals)
+- [Les boucles dans le code](/fr/Apprendre/JavaScript/Building_blocks/Looping_code)
+- [Fonctions — des blocs de code réutilisables](/fr/Apprendre/JavaScript/Building_blocks/Fonctions)
+- [Construire votre propre fonction](/fr/Apprendre/JavaScript/Building_blocks/Build_your_own_function)
+- [Valeurs de retour des fonctions](/fr/Apprendre/JavaScript/Building_blocks/Return_values)
+- [Introduction aux évènements](/fr/Apprendre/JavaScript/Building_blocks/Ev%C3%A8nements)
+- [Galerie d'images](/fr/Apprendre/JavaScript/Building_blocks/Image_gallery)
diff --git a/files/fr/learn/javascript/building_blocks/image_gallery/index.md b/files/fr/learn/javascript/building_blocks/image_gallery/index.md
index bc09ea1194..78d6530000 100644
--- a/files/fr/learn/javascript/building_blocks/image_gallery/index.md
+++ b/files/fr/learn/javascript/building_blocks/image_gallery/index.md
@@ -15,148 +15,135 @@ tags:
 translation_of: Learn/JavaScript/Building_blocks/Image_gallery
 original_slug: Apprendre/JavaScript/Building_blocks/Image_gallery
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}
 
-<div>{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}</div>
-
-<p>Maintenant que nous avons examiné les blocs fondamentaux de construction de JavaScript,  nous allons tester vos connaissances sur les boucles, les fonctions, les conditions et les événements  en vous aidant à créer un élément assez commun que vous verrez  sur de nombreux sites web. Une galerie JavaScript animée.</p>
+Maintenant que nous avons examiné les blocs fondamentaux de construction de JavaScript,  nous allons tester vos connaissances sur les boucles, les fonctions, les conditions et les événements  en vous aidant à créer un élément assez commun que vous verrez  sur de nombreux sites web. Une galerie JavaScript animée.
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Conditions préalables:</th>
-   <td>Avant de tenter cette évaluation, vous devriez avoir parcouru tous les articles de ce module. </td>
-  </tr>
-  <tr>
-   <th scope="row">Objectif:</th>
-   <td>Tester la compréhension des boucles, des fonctions, des conditions et des événements JavaScript.</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Conditions préalables:</th>
+      <td>
+        Avant de tenter cette évaluation, vous devriez avoir parcouru tous les
+        articles de ce module. 
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Objectif:</th>
+      <td>
+        Tester la compréhension des boucles, des fonctions, des conditions et
+        des événements JavaScript.
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Point_de_départ">Point de départ</h2>
-
-<p>Pour réaliser cette évaluation, vous devez récupérer le fichier<a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/gallery/gallery-start.zip?raw=true"> ZIP</a> et le décompresser quelque par sur votre ordinateur.</p>
+## Point de départ
 
-<p>Vous pouvez également 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> pour effectuer votre évalution. Vous pouvez copier le code HTML,CSS et JavaScript dans l'un de ces éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne dispose pas de panneaux JavaScript/CSS séparés, n'hésitez pas à utiliser les éléments <code>&lt;script&gt;</code>/<code>&lt;style&gt;</code> dans la page HTML.</p>
+Pour réaliser cette évaluation, vous devez récupérer le fichier[ ZIP](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/gallery/gallery-start.zip?raw=true) et le décompresser quelque par sur votre ordinateur.
 
-<div class="note">
-<p><strong>Note :</strong> Si vous êtes bloqué, demandez-nous de l'aide — voir la section {{anch("Évaluation ou aide supplémentaire")}} au bas de cette page.</p>
-</div>
+Vous pouvez également utiliser un site comme [JSBin](http://jsbin.com/) ou  [Thimble](https://thimble.mozilla.org/) pour effectuer votre évalution. Vous pouvez copier le code HTML,CSS et JavaScript dans l'un de ces éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne dispose pas de panneaux JavaScript/CSS séparés, n'hésitez pas à utiliser les éléments `<script>`/`<style>` dans la page HTML.
 
-<h2 id="Résumé_du_projet">Résumé du projet</h2>
+> **Note :** Si vous êtes bloqué, demandez-nous de l'aide — voir la section {{anch("Évaluation ou aide supplémentaire")}} au bas de cette page.
 
-<p>Vous avez reçu des fichiers HTML, CSS, des images et quelques lignes de code JavaScript; vous devez écrire le code JavaScript nécessaire pour en faire un programme fonctionnel. Le corps HTML ressemble à ceci:</p>
+## Résumé du projet
 
-<pre class="brush: html">&lt;h1&gt;Image gallery example&lt;/h1&gt;
+Vous avez reçu des fichiers HTML, CSS, des images et quelques lignes de code JavaScript; vous devez écrire le code JavaScript nécessaire pour en faire un programme fonctionnel. Le corps HTML ressemble à ceci:
 
-&lt;div class="full-img"&gt;
-  &lt;img class="displayed-img" src="images/pic1.jpg"&gt;
-  &lt;div class="overlay"&gt;&lt;/div&gt;
-  &lt;button class="dark"&gt;Darken&lt;/button&gt;
-&lt;/div&gt;
+```html
+<h1>Image gallery example</h1>
 
-&lt;div class="thumb-bar"&gt;
+<div class="full-img">
+  <img class="displayed-img" src="images/pic1.jpg">
+  <div class="overlay"></div>
+  <button class="dark">Darken</button>
+</div>
 
-&lt;/div&gt;</pre>
+<div class="thumb-bar">
 
-<p>L'exemple ressemble à ceci:</p>
+</div>
+```
 
-<p><img alt="" src="gallery.png"></p>
+L'exemple ressemble à ceci:
 
+![](gallery.png)
 
-<p>Les parties les plus intéressantes du fichier CSS de l'exemple:</p>
+Les parties les plus intéressantes du fichier CSS de l'exemple:
 
-<ul>
- <li>Positionnez les trois éléments en absolu à l’intérieur du <code>full-img &lt;div&gt;</code>: le <code>&lt;img&gt;</code> dans lequel l’image est affichée grandeur nature, un  <code>&lt;div&gt;</code> vide dimensionné à la même taille que le <code>&lt;img&gt;</code> et placé juste au-dessus (ceci est utilisé pour appliquer un effet assombrissant à l'image via une couleur d'arrière-plan semi-transparente), et un bouton <code>&lt;button&gt;</code>qui est utilisé pour contrôler l'effet d'assombrissement.</li>
- <li>Réglez la largeur des images à l'intérieur de <code>thumb-bar &lt;div&gt;</code>(appelées images miniatures) à 20% et faites un float à gauche pour qu'elles soient côte-à-côte sur une ligne.</li>
-</ul>
+- Positionnez les trois éléments en absolu à l’intérieur du `full-img <div>`: le `<img>` dans lequel l’image est affichée grandeur nature, un  `<div>` vide dimensionné à la même taille que le `<img>` et placé juste au-dessus (ceci est utilisé pour appliquer un effet assombrissant à l'image via une couleur d'arrière-plan semi-transparente), et un bouton `<button>`qui est utilisé pour contrôler l'effet d'assombrissement.
+- Réglez la largeur des images à l'intérieur de `thumb-bar <div>`(appelées images miniatures) à 20% et faites un float à gauche pour qu'elles soient côte-à-côte sur une ligne.
 
-<p>Votre JavaScript doit:</p>
+Votre JavaScript doit:
 
-<ul>
- <li>Itérer toutes les images dans une boucle, et pour chacune d'elle, insérer un élément <code>&lt;img&gt;</code> à l'intérieur de <code>thumb-bar &lt;div&gt;</code> qui va incorporer cette image dans la page.</li>
- <li>Associer un gestionnaire d'événement <code>onclick</code> à chaque <code>&lt;img&gt;</code> à l'intérieur de <code>thumb-bar &lt;div&gt;</code> pour que, lorsqu'elles sont cliquées, l'image correspondante soit affichée dans l'élément <code>displayed-img &lt;img&gt;</code>.</li>
- <li>Associer un gestionnaire d'événement <code>onclick</code> au <code>&lt;button&gt;</code> pour que, lorsqu'il est cliqué, un effet assombrissant soit appliqué à l'image grandeur nature. Losrqu'il est cliqué à nouveau, l'effet doit disparaitre.</li>
-</ul>
+- Itérer toutes les images dans une boucle, et pour chacune d'elle, insérer un élément `<img>` à l'intérieur de `thumb-bar <div>` qui va incorporer cette image dans la page.
+- Associer un gestionnaire d'événement `onclick` à chaque `<img>` à l'intérieur de `thumb-bar <div>` pour que, lorsqu'elles sont cliquées, l'image correspondante soit affichée dans l'élément `displayed-img <img>`.
+- Associer un gestionnaire d'événement `onclick` au `<button>` pour que, lorsqu'il est cliqué, un effet assombrissant soit appliqué à l'image grandeur nature. Losrqu'il est cliqué à nouveau, l'effet doit disparaitre.
 
-<p>Pour vous donner une idée, regardez l'<a href="http://mdn.github.io/learning-area/javascript/building-blocks/gallery/">exemple</a> (Ne regardez pas le code source!).</p>
+Pour vous donner une idée, regardez l'[exemple](http://mdn.github.io/learning-area/javascript/building-blocks/gallery/) (Ne regardez pas le code source!).
 
-<h2 id="Les_différentes_étapes">Les différentes étapes</h2>
+## Les différentes étapes
 
-<p>Les sections suivantes décrivent ce que vous avez à faire.</p>
+Les sections suivantes décrivent ce que vous avez à faire.
 
-<h3 id="Itération_sur_les_images">Itération sur les images</h3>
+### Itération sur les images
 
-<p>Nous vous avons fourni des lignes qui storent une référence à <code>thumb-bar &lt;div&gt;</code> dans une variable nommée <code>thumbBar</code>, créent un nouvel élément <code>&lt;img&gt;</code>, définissent son attribut <code>src</code> à un emplacement de valueur <code>xxx</code>, et ajoutent ce nouvel élément <code>&lt;img&gt;</code> dans <code>thumbBar</code>.</p>
+Nous vous avons fourni des lignes qui storent une référence à `thumb-bar <div>` dans une variable nommée `thumbBar`, créent un nouvel élément `<img>`, définissent son attribut `src` à un emplacement de valueur `xxx`, et ajoutent ce nouvel élément `<img>` dans `thumbBar`.
 
-<p>Vous avez besoin de:</p>
+Vous avez besoin de:
 
-<ol>
- <li>Ajouter votre code en-dessous du commentaire <em>Looping through images</em> à l'intérieur d'une boucle qui itère sur les 5 images — vous n'avez besoin que de 5 itérations, chacune représentant une image.</li>
- <li>Remplacez, pour chaque itération,  la valeur <code>xxx</code> de l'emplacement par une chaîne de caractères qui correspond au chemin de l'image considérée. Il faut définir la valeur de l'attribut <code>src</code> dans chaque cas. Gardez à l'esprit que, à chaque fois, l'image est dans le répertoire des images et que son nom est <code>pic1.jpg</code>, <code>pic2.jpg</code>, etc.</li>
-</ol>
+1.  Ajouter votre code en-dessous du commentaire _Looping through images_ à l'intérieur d'une boucle qui itère sur les 5 images — vous n'avez besoin que de 5 itérations, chacune représentant une image.
+2.  Remplacez, pour chaque itération,  la valeur `xxx` de l'emplacement par une chaîne de caractères qui correspond au chemin de l'image considérée. Il faut définir la valeur de l'attribut `src` dans chaque cas. Gardez à l'esprit que, à chaque fois, l'image est dans le répertoire des images et que son nom est `pic1.jpg`, `pic2.jpg`, etc.
 
-<h3 id="Ajout_dun_gestionnaire_onclick_à_chaque_miniature">Ajout d'un gestionnaire onclick à chaque miniature</h3>
+### Ajout d'un gestionnaire onclick à chaque miniature
 
-<p>À chaque itération, vous devez ajouter un gestionnaire <code>onclick</code> au <code>newImage</code> courant. Il doit:</p>
+À chaque itération, vous devez ajouter un gestionnaire `onclick` au `newImage` courant. Il doit:
 
-<ol>
- <li>Trouver la valeur de l'attribut <code>src</code> de l'image courante. Cela peut être fait avec la fonction <code><a href="/fr/docs/Web/API/Element/getAttribute">getAttribute()</a></code> sur <code>&lt;img&gt;</code>, en lui passant le paramètre <code>"src"</code> à chaque fois. Mais comment avoir l'image? Utiliser <code>newImage</code> ne marche pas du fait que la boucle est finie avant que le gestionnaire d'événement ne soit appelé; de cette manière, la valeur de <code>src</code> sera toujours celle du dernier <code>&lt;img&gt;</code>. Pour résoudre cela, gardez à l'esprit que, pour chaque gestionnaire d'événement, c'est <code>&lt;img&gt;</code> qui en est la cible. Pourquoi ne pas récupérer l'information de l'objet événement?</li>
- <li>Exécuter une fonction, en lui passant en paramètre la fameuse valeur de <code>src</code>. Vous pouvez nommer la fonction à votre guise.</li>
- <li>Cette fonction du gestionnaire d'événement doit définir la valeur de l'attribut <code>src</code> de <code>displayed-img &lt;img&gt;</code> à la valeur du <code>src</code> passé en paramètre. Nous vous avons fourni une ligne qui stocke une référence de l'<code>&lt;img&gt;</code> concerné dans une variable nommée <code>displayedImg</code>. Notez que nous voulons une fonction nommée.</li>
-</ol>
+1.  Trouver la valeur de l'attribut `src` de l'image courante. Cela peut être fait avec la fonction [`getAttribute()`](/fr/docs/Web/API/Element/getAttribute) sur `<img>`, en lui passant le paramètre `"src"` à chaque fois. Mais comment avoir l'image? Utiliser `newImage` ne marche pas du fait que la boucle est finie avant que le gestionnaire d'événement ne soit appelé; de cette manière, la valeur de `src` sera toujours celle du dernier `<img>`. Pour résoudre cela, gardez à l'esprit que, pour chaque gestionnaire d'événement, c'est `<img>` qui en est la cible. Pourquoi ne pas récupérer l'information de l'objet événement?
+2.  Exécuter une fonction, en lui passant en paramètre la fameuse valeur de `src`. Vous pouvez nommer la fonction à votre guise.
+3.  Cette fonction du gestionnaire d'événement doit définir la valeur de l'attribut `src` de `displayed-img <img>` à la valeur du `src` passé en paramètre. Nous vous avons fourni une ligne qui stocke une référence de l'`<img>` concerné dans une variable nommée `displayedImg`. Notez que nous voulons une fonction nommée.
 
-<h3 id="Écrire_le_gestionnaire_du_bouton_dassombrissement">Écrire le gestionnaire du bouton d'assombrissement</h3>
+### Écrire le gestionnaire du bouton d'assombrissement
 
-<p>Il ne reste que notre <code>&lt;button&gt;</code> d'assombrissement — nous vous avons fourni une ligne qui stocke une référence au <code>&lt;button&gt;</code> dans une variable appelée <code>btn</code>. Vous devez ajouter un gestionnaire <code>onclick</code> qui:</p>
+Il ne reste que notre `<button>` d'assombrissement — nous vous avons fourni une ligne qui stocke une référence au `<button>` dans une variable appelée `btn`. Vous devez ajouter un gestionnaire `onclick` qui:
 
-<ol>
- <li>Vérifie la classe appliquée à <code>&lt;button&gt;</code> — à nouveau, vous pouvez utiliser <code>getAttribute()</code>.</li>
- <li>Si le nom de classe est <code>"dark"</code>, changer la classe du <code>&lt;button&gt;</code> pour <code>"light"</code> (avec <code><a href="/fr/docs/Web/API/Element/setAttribute">setAttribute()</a></code>), son contenu textuel par "Lighten", et le {{cssxref("background-color")}} du voile d'assombrissement <code>&lt;div&gt;</code> par <code>"rgba(0,0,0,0.5)"</code>.</li>
- <li>Si le nom de classe n'est pas <code>"dark"</code>, changer la classe du <code>&lt;button&gt;</code> pour <code>"dark"</code>, son contenu textuel par "Darken", et le {{cssxref("background-color")}} du voile d'assombrissement <code>&lt;div&gt;</code> par <code>"rgba(0,0,0,0)"</code>.</li>
-</ol>
+1.  Vérifie la classe appliquée à `<button>` — à nouveau, vous pouvez utiliser `getAttribute()`.
+2.  Si le nom de classe est `"dark"`, changer la classe du `<button>` pour `"light"` (avec [`setAttribute()`](/fr/docs/Web/API/Element/setAttribute)), son contenu textuel par "Lighten", et le {{cssxref("background-color")}} du voile d'assombrissement `<div>` par `"rgba(0,0,0,0.5)"`.
+3.  Si le nom de classe n'est pas `"dark"`, changer la classe du `<button>` pour `"dark"`, son contenu textuel par "Darken", et le {{cssxref("background-color")}} du voile d'assombrissement `<div>` par `"rgba(0,0,0,0)"`.
 
-<p>Les lignes suivantes fournissent une base pour réaliser les changements  décrits aux points 2 et 3.</p>
+Les lignes suivantes fournissent une base pour réaliser les changements  décrits aux points 2 et 3.
 
-<pre class="brush: js">btn.setAttribute('class', xxx);
+```js
+btn.setAttribute('class', xxx);
 btn.textContent = xxx;
-overlay.style.backgroundColor = xxx;</pre>
+overlay.style.backgroundColor = xxx;
+```
+
+## Conseil
 
-<h2 id="Conseil">Conseil</h2>
+- Vous n'avez pas besoin d'éditer le code HTML ni le code CSS.
 
-<ul>
- <li>Vous n'avez pas besoin d'éditer le code HTML ni le code CSS.</li>
-</ul>
+## Évaluation ou aide supplémentaire
 
-<h2 id="Évaluation_ou_aide_supplémentaire">Évaluation ou aide supplémentaire</h2>
+Si vous souhaitez que votre travail soit évalué, ou si vous êtes bloqué et que vous voulez demander de l'aide :
 
-<p>Si vous souhaitez que votre travail soit évalué, ou si vous êtes bloqué et que vous voulez demander de l'aide :</p>
+1.  Mettez votre travail dans un éditeur partageable en ligne tel que [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), ou [Glitch](https://glitch.com/).
+2.  Rédiger un sujet pour demander une évaluation et/ou une aide à le [forum Discourse du MDN](https://discourse.mozilla.org/c/mdn). Ajoutez la balise "learning" à votre message pour que nous puissions le trouver plus facilement. Votre message doit inclure :
 
-<ol>
- <li>Mettez votre travail dans un éditeur partageable en ligne tel que <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, ou <a href="https://glitch.com/">Glitch</a>.</li>
- <li>Rédiger un sujet pour demander une évaluation et/ou une aide à le <a href="https://discourse.mozilla.org/c/mdn">forum Discourse du MDN</a>. Ajoutez la balise "learning" à votre message pour que nous puissions le trouver plus facilement. Votre message doit inclure :
-  <ul>
-   <li>Un titre descriptif tel que "Évaluation demandée pour la galerie d'images".</li>
-   <li>Des détails sur ce que vous souhaitez que nous fassions — par exemple ce que vous avez déjà essayé, si vous êtes bloqué et avez besoin d'aide.</li>
-   <li>Un lien vers l'exemple que vous souhaitez faire évaluer ou pour lequel vous avez besoin d'aide, dans un éditeur en ligne. C'est une bonne pratique à adopter — il est très difficile d'aider une personne ayant un problème de codage si on ne peut pas voir son code.</li>
-   <li>Un lien vers la page de la tâche ou de l'évaluation proprement dite, afin que nous puissions trouver la question pour laquelle vous souhaitez de l'aide.</li>
-  </ul>
- </li>
-</ol>
+    - Un titre descriptif tel que "Évaluation demandée pour la galerie d'images".
+    - Des détails sur ce que vous souhaitez que nous fassions — par exemple ce que vous avez déjà essayé, si vous êtes bloqué et avez besoin d'aide.
+    - Un lien vers l'exemple que vous souhaitez faire évaluer ou pour lequel vous avez besoin d'aide, dans un éditeur en ligne. C'est une bonne pratique à adopter — il est très difficile d'aider une personne ayant un problème de codage si on ne peut pas voir son code.
+    - Un lien vers la page de la tâche ou de l'évaluation proprement dite, afin que nous puissions trouver la question pour laquelle vous souhaitez de l'aide.
 
-<p>Si vous suivez cette évaluation dans le cadre d'un cours organisé, vous devriez pouvoir donner votre travail à votre professeur ou mentor pour la notation. Si vous apprenez en autodidacte, vous pouvez obtenir le guide de notation simplement en le demandant <a href="https://discourse.mozilla.org/t/image-gallery-assessment/24687">sur le fil de discussion de cet exercice</a>, ou sur <a href="irc://irc.mozilla.org/mdn">#mdn</a> du canal IRC de <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Faites d'abord l'exercice, vous ne gagnerez rien à tricher!</p>
+Si vous suivez cette évaluation dans le cadre d'un cours organisé, vous devriez pouvoir donner votre travail à votre professeur ou mentor pour la notation. Si vous apprenez en autodidacte, vous pouvez obtenir le guide de notation simplement en le demandant [sur le fil de discussion de cet exercice](https://discourse.mozilla.org/t/image-gallery-assessment/24687), ou sur [#mdn](irc://irc.mozilla.org/mdn) du canal IRC de [Mozilla IRC](https://wiki.mozilla.org/IRC). Faites d'abord l'exercice, vous ne gagnerez rien à tricher!
 
-<p>{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}</p>
+{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}
 
-<h2 id="Dans_ce_module">Dans ce module</h2>
+## Dans ce module
 
-<ul>
- <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/conditionals">Prendre des décisions dans le code — conditions</a></li>
- <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Looping_code">Les boucles dans le code</a></li>
- <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Fonctions">Fonctions — des blocs de code réutilisables</a></li>
- <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Build_your_own_function">Construire vos propres fonctions</a></li>
- <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Return_values">Valeurs de retour des fonctions</a></li>
- <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Ev%C3%A8nements">Introduction aux événements</a></li>
- <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Image_gallery">Galerie d'images</a></li>
-</ul>
+- [Prendre des décisions dans le code — conditions](/fr/docs/Apprendre/JavaScript/Building_blocks/conditionals)
+- [Les boucles dans le code](/fr/docs/Apprendre/JavaScript/Building_blocks/Looping_code)
+- [Fonctions — des blocs de code réutilisables](/fr/docs/Apprendre/JavaScript/Building_blocks/Fonctions)
+- [Construire vos propres fonctions](/fr/docs/Apprendre/JavaScript/Building_blocks/Build_your_own_function)
+- [Valeurs de retour des fonctions](/fr/docs/Apprendre/JavaScript/Building_blocks/Return_values)
+- [Introduction aux événements](/fr/docs/Apprendre/JavaScript/Building_blocks/Ev%C3%A8nements)
+- [Galerie d'images](/fr/docs/Apprendre/JavaScript/Building_blocks/Image_gallery)
diff --git a/files/fr/learn/javascript/building_blocks/index.md b/files/fr/learn/javascript/building_blocks/index.md
index f93cdfbd85..bb9e1f50da 100644
--- a/files/fr/learn/javascript/building_blocks/index.md
+++ b/files/fr/learn/javascript/building_blocks/index.md
@@ -13,44 +13,36 @@ tags:
 translation_of: Learn/JavaScript/Building_blocks
 original_slug: Apprendre/JavaScript/Building_blocks
 ---
-<div>{{JsSidebar}}</div>
+{{JsSidebar}}{{PreviousNext("Learn/JavaScript/First_steps", "Learn/JavaScript/Objects")}}
 
-<div>{{PreviousNext("Learn/JavaScript/First_steps", "Learn/JavaScript/Objects")}}</div>
+Dans ce module nous allons continuer à voir l'ensemble des fonctionnalités clefs du JavaScript en nous concentrant plus particulièrement sur les structures les plus répandues telles que les conditions, les boucles, les fonctions et les événements. Nous avons déjà vu ces notions dans le cours mais sans nous y attarder, nous allons maintenant les étudier en détails.
 
-<p>Dans ce module nous allons continuer à voir l'ensemble des fonctionnalités clefs du JavaScript en nous concentrant plus particulièrement sur les structures les plus répandues telles que les conditions, les boucles, les fonctions et les événements. Nous avons déjà vu ces notions dans le cours mais sans nous y attarder, nous allons maintenant les étudier en détails.</p>
+## Prérequis
 
-<h2 id="Prérequis">Prérequis</h2>
+Avant de commencer ce module, vous devriez connaître les bases du [HTML ](/fr/Apprendre/HTML/Introduction_%C3%A0_HTML)et du [CSS ](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS)et avoir suivi le module précédent, [JavaScript Premiers Pas.](/fr/docs/Learn/JavaScript/First_steps)
 
-<p>Avant de commencer ce module, vous devriez connaître les bases du <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML">HTML </a>et du <a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS">CSS </a>et avoir suivi le module précédent, <a href="/fr/docs/Learn/JavaScript/First_steps">JavaScript Premiers Pas.</a></p>
+> **Note :** Si vous travaillez depuis un ordinateur, une tablette ou depuis un autre appareil sur lequel vous ne pouvez pas créer vos propres fichiers, ce n'est pas un problème, vous pourrez essayer la plupart des exemples en lignes grâce à des outils comme [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/) .
 
-<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, ce n'est pas un problème, vous pourrez essayer la plupart des exemples en lignes grâce à des outils 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> .</p>
-</div>
+## Guides
 
-<h2 id="Guides">Guides</h2>
+- [Prendre des décisions dans votre code — les conditions](/fr/docs/Learn/JavaScript/Building_blocks/conditionals)
+  - : Quelque soit le langage de programmation, notre programme doit prendre des décisions et effectuer des actions différentes selon les valeurs traitées. Dans un jeu par exemple, si le nombre de vies du joueur est égal à 0, le jeu s'achève. Sur le même principe, une application météo affiche un fond d'aube si elle est lancée le matin, des étoiles et la Lune si, au contraire, elle est lancée la nuit. Dans cet article, nous allons voir comment les structures conditionnelles fonctionnent en JavaScript.
+- [Les boucles](/fr/Apprendre/JavaScript/Building_blocks/Looping_code)
+  - : Parfois une action doit être réalisée plusieurs fois d'affilée. Par exemple, parcourir une liste de noms. En programmation, les boucles effectuent ce genre de tâches à merveille. Ici, nous allons examiner les structures de boucles en JavaScript.
+- [Les fonctions — réutiliser des blocs de code](/fr/docs/Learn/JavaScript/Building_blocks/Functions)
+  - : Un autre concept essentiel en programmation est celui de **fonctions.** Les **fonctions** permettent de définir un morceau de code réalisant une tâche particulière qui pourra être appelé ultérieurement dans le reste du programme par une simple ligne, ce qui évite d'écrire plusieurs fois le même code. Dans cet article, nous allons voir les concepts qui se cachent derrière les fonctions tels que la syntaxe de base, la définition et l'appel d'une fonction, sa portée et ses paramètres.
+- [Créez votre propre fonction](/fr/Apprendre/JavaScript/Building_blocks/Build_your_own_function)
+  - : L'essentiel sur la théorie des fonctions a été traité dans le chapitre précédent, cet article va vous permettre de mettre en pratique vos connaissances avec un exercice. Nous allons construire notre propre fonction et nous en profiterons pour expliquer quelques notions plus avancées, utiles pour travailler avec les fonctions.
+- [Les valeurs de retour des fonctions](/fr/docs/Learn/JavaScript/Building_blocks/Return_values)
+  - : Il reste un dernier point à vous présenter avant de terminer cette partie sur les fonctions, il s'agit des valeurs retournées. Une fois leur exécution finie, les fonctions renvoient des valeurs, pour certaines d'entre-elles ce retour nous est utile. Il est important de bien comprendre ce que sont ces valeurs, comment les utiliser dans notre programme et comment faire en sorte que nos fonctions renvoient des valeurs qui nous soient utiles.
+- [Introduction aux événements](/fr/docs/Learn/JavaScript/Building_blocks/Events)
+  - : Les événements sont des actions ou occurences qui surviennent au cours de l'exécution de votre programme, auxquels vous pouvez répondre de la manière que vous souhaitez. Par exemple, si l'utilisateur clique sur une page web, vous pourriez vouloir répondre à cette action en affichant un élément d'information. Dans ce dernier article, nous allons voir des concepts importants se rapportant aux événements et voir la manière dont ils fonctionnent au sein des navigateurs.
 
-<dl>
- <dt><a href="/fr/docs/Learn/JavaScript/Building_blocks/conditionals">Prendre des décisions dans votre code — les conditions</a></dt>
- <dd>Quelque soit le langage de programmation, notre programme doit prendre des décisions et effectuer des actions différentes selon les valeurs traitées. Dans un jeu par exemple, si le nombre de vies du joueur est égal à 0, le jeu s'achève. Sur le même principe, une application météo affiche un fond d'aube si elle est lancée le matin, des étoiles et la Lune si, au contraire, elle est lancée la nuit. Dans cet article, nous allons voir comment les structures conditionnelles fonctionnent en JavaScript.</dd>
- <dt><a href="/fr/Apprendre/JavaScript/Building_blocks/Looping_code">Les boucles</a></dt>
- <dd>Parfois une action doit être réalisée plusieurs fois d'affilée. Par exemple, parcourir une liste de noms. En programmation, les boucles effectuent ce genre de tâches à merveille. Ici, nous allons examiner les structures de boucles en JavaScript.</dd>
- <dt><a href="/fr/docs/Learn/JavaScript/Building_blocks/Functions">Les fonctions — réutiliser des blocs de code</a></dt>
- <dd>Un autre concept essentiel en programmation est celui de <strong>fonctions. </strong>Les<strong> fonctions</strong> permettent de définir un morceau de code réalisant une tâche particulière qui pourra être appelé ultérieurement dans le reste du programme par une simple ligne, ce qui évite d'écrire plusieurs fois le même code. Dans cet article, nous allons voir les concepts qui se cachent derrière les fonctions tels que la syntaxe de base, la définition et l'appel d'une fonction, sa portée et ses paramètres.</dd>
- <dt><a href="/fr/Apprendre/JavaScript/Building_blocks/Build_your_own_function">Créez votre propre fonction</a></dt>
- <dd>L'essentiel sur la théorie des fonctions a été traité dans le chapitre précédent, cet article va vous permettre de mettre en pratique vos connaissances avec un exercice. Nous allons construire notre propre fonction et nous en profiterons pour expliquer quelques notions plus avancées, utiles pour travailler avec les fonctions.</dd>
- <dt><a href="/fr/docs/Learn/JavaScript/Building_blocks/Return_values">Les valeurs de retour des fonctions</a></dt>
- <dd>Il reste un dernier point à vous présenter avant de terminer cette partie sur les fonctions, il s'agit des valeurs retournées. Une fois leur exécution finie, les fonctions renvoient des valeurs, pour certaines d'entre-elles ce retour nous est utile. Il est important de bien comprendre ce que sont ces valeurs, comment les utiliser dans notre programme et comment faire en sorte que nos fonctions renvoient des valeurs qui nous soient utiles.</dd>
- <dt><a href="/fr/docs/Learn/JavaScript/Building_blocks/Events">Introduction aux événements</a></dt>
- <dd>Les événements sont des actions ou occurences qui surviennent au cours de l'exécution de votre programme, auxquels vous pouvez répondre de la manière que vous souhaitez. Par exemple, si l'utilisateur clique sur une page web, vous pourriez vouloir répondre à cette action en affichant un élément d'information. Dans ce dernier article, nous allons voir des concepts importants se rapportant aux événements et voir la manière dont ils fonctionnent au sein des navigateurs.</dd>
-</dl>
+## Auto-évaluation
 
-<h2 id="Auto-évaluation">Auto-évaluation</h2>
+L'auto-évaluation suivante teste votre compréhension des bases du JavaScript vues dans le guide ci-dessus.
 
-<p>L'auto-évaluation suivante teste votre compréhension des bases du JavaScript vues dans le guide ci-dessus.</p>
+- [Galerie de photos](/fr/docs/Learn/JavaScript/Building_blocks/Image_gallery)
+  - : Maintenant que vous avez fini ce chapitre sur la construction de blocs en JavaScript, vous allez pouvoir tester vos connaissances sur les boucles, les fonctions, les conditions et les événements en codant un élément que l'on retrouve sur de très nombreux sites web, une galerie de photos en JavaScript.
 
-<dl>
- <dt><a href="/fr/docs/Learn/JavaScript/Building_blocks/Image_gallery">Galerie de photos</a></dt>
- <dd>Maintenant que vous avez fini ce chapitre sur la construction de blocs en JavaScript, vous allez pouvoir tester vos connaissances sur les boucles, les fonctions, les conditions et les événements en codant un élément que l'on retrouve sur de très nombreux sites web, une galerie de photos en JavaScript.</dd>
-</dl>
-
-<p>{{PreviousNext("Learn/JavaScript/First_steps", "Learn/JavaScript/Objects")}}  </p>
+{{PreviousNext("Learn/JavaScript/First_steps", "Learn/JavaScript/Objects")}}
diff --git a/files/fr/learn/javascript/building_blocks/looping_code/index.md b/files/fr/learn/javascript/building_blocks/looping_code/index.md
index fcd352b560..11c8dc0c25 100644
--- a/files/fr/learn/javascript/building_blocks/looping_code/index.md
+++ b/files/fr/learn/javascript/building_blocks/looping_code/index.md
@@ -18,72 +18,73 @@ tags:
 translation_of: Learn/JavaScript/Building_blocks/Looping_code
 original_slug: Apprendre/JavaScript/Building_blocks/Looping_code
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}
 
-<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}</div>
-
-<p>Les langages de programmation sont très utiles pour effectuer des tâches répétitives, allant de calculs basiques à à peu près n'importe quelle autre situation où vous avez un certain nombre d'actions similaires à répéter. Ici, nous allons étudier les structures de boucle disponible dans JavaScript qui répondent à un tel besoin.</p>
+Les langages de programmation sont très utiles pour effectuer des tâches répétitives, allant de calculs basiques à à peu près n'importe quelle autre situation où vous avez un certain nombre d'actions similaires à répéter. Ici, nous allons étudier les structures de boucle disponible dans JavaScript qui répondent à un tel besoin.
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Prérequis :</th>
-   <td>Culture informatique basique, compréhension basique du HTML et du CSS, <a href="/fr/docs/Learn/JavaScript/First_steps">Premiers pas en JavaScript...</a></td>
-  </tr>
-  <tr>
-   <th scope="row">Objectif :</th>
-   <td>Comprendre comment utiliser les boucles dans JavaScript.</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Prérequis :</th>
+      <td>
+        Culture informatique basique, compréhension basique du HTML et du CSS,
+        <a href="/fr/docs/Learn/JavaScript/First_steps"
+          >Premiers pas en JavaScript...</a
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Objectif :</th>
+      <td>Comprendre comment utiliser les boucles dans JavaScript.</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Laissez-moi_dans_la_boucle">Laissez-moi dans la boucle</h2>
+## Laissez-moi dans la boucle
 
-<p>Boucles, boucles, boucles. Alors qu'elles sont associées aux <a href="https://fr.wikipedia.org/wiki/Boucles_d%27or_et_les_Trois_Ours">cheveux d'une célèbre héroïne de fiction</a>, elles sont également un concept extrêmement important en programmation. Les boucles de programmation ne font que faire la même action encore et toujours – ce qui se traduit par <strong>itérer</strong> en langage de programmeur.</p>
+Boucles, boucles, boucles. Alors qu'elles sont associées aux [cheveux d'une célèbre héroïne de fiction](https://fr.wikipedia.org/wiki/Boucles_d%27or_et_les_Trois_Ours), elles sont également un concept extrêmement important en programmation. Les boucles de programmation ne font que faire la même action encore et toujours – ce qui se traduit par **itérer** en langage de programmeur.
 
-<p>Commençons par examiner le cas d'un fermier qui doit s'assurer d'avoir assez de nourriture pour nourrir sa famille pour la semaine. Il pourrait ainsi utiliser la boucle suivante :</p>
+Commençons par examiner le cas d'un fermier qui doit s'assurer d'avoir assez de nourriture pour nourrir sa famille pour la semaine. Il pourrait ainsi utiliser la boucle suivante :
 
-<p><br>
- <img alt="" src="loop_js-02-farm.png"></p>
+![](loop_js-02-farm.png)
 
-<p>Une boucle a normalement un ou plusieurs des composants suivants :</p>
+Une boucle a normalement un ou plusieurs des composants suivants :
 
-<ul>
- <li> Un <strong>compteur</strong>, qui est initialisé à une certaine valeur - c'est le point de départ de la boucle ("Départ : Je n'ai pas de nourriture / I have no food", ci-dessus).</li>
- <li>Une <strong>condition de sortie</strong>, qui est le critère grâce auquel la boucle s'arrête - la plupart du temps, il s'agira d'une certaine valeur que le compteur doit atteindre. Elle est illustrée ci-dessus par "Ai-je assez de nourriture ? / Have I got enough food?". Disons qu'il aura besoin de 10 portions de nourriture pour nourir sa famille.</li>
- <li>Un <strong>itérateur</strong>, qui incrémente généralement le compteur petit-à-petit à chaque boucle successive, jusqu'à ce que ceui-ci remplisse la condition de sortie. Nous n'avons pas explicitement illustré cela ci-dessus, mais nous pouvons penser que le fermier peut récolter 2 portions de nourriture par heure. On peut donc dire que, toutes les heures, la quantité de nourriture collectée est incrémentée de 2, et il regarde s'il a assez de nourriture. S'il a atteint 10 portions (la condition de sortie), il peut arrêter sa récolte et rentrer chez lui, satisfait de sa journée.</li>
-</ul>
+- Un **compteur**, qui est initialisé à une certaine valeur - c'est le point de départ de la boucle ("Départ : Je n'ai pas de nourriture / I have no food", ci-dessus).
+- Une **condition de sortie**, qui est le critère grâce auquel la boucle s'arrête - la plupart du temps, il s'agira d'une certaine valeur que le compteur doit atteindre. Elle est illustrée ci-dessus par "Ai-je assez de nourriture ? / Have I got enough food?". Disons qu'il aura besoin de 10 portions de nourriture pour nourir sa famille.
+- Un **itérateur**, qui incrémente généralement le compteur petit-à-petit à chaque boucle successive, jusqu'à ce que ceui-ci remplisse la condition de sortie. Nous n'avons pas explicitement illustré cela ci-dessus, mais nous pouvons penser que le fermier peut récolter 2 portions de nourriture par heure. On peut donc dire que, toutes les heures, la quantité de nourriture collectée est incrémentée de 2, et il regarde s'il a assez de nourriture. S'il a atteint 10 portions (la condition de sortie), il peut arrêter sa récolte et rentrer chez lui, satisfait de sa journée.
 
-<p>En {{glossary("pseudocode")}}, cela ressemblerait à ce qui suit :</p>
+En {{glossary("pseudocode")}}, cela ressemblerait à ce qui suit :
 
-<pre>loop(nourriture = 0; besoinNourriture = 10) {
-  if (nourriture = besoinNourriture) {
-    exit loop;
-    // Nous avons assez de nourriture, on rentre
-  } else {
-    nourriture += 2; // On doit rester 1 heure de plus
-    // La boucle se répète ensuite
-  }
-}</pre>
+    loop(nourriture = 0; besoinNourriture = 10) {
+      if (nourriture = besoinNourriture) {
+        exit loop;
+        // Nous avons assez de nourriture, on rentre
+      } else {
+        nourriture += 2; // On doit rester 1 heure de plus
+        // La boucle se répète ensuite
+      }
+    }
 
-<p>La quantité de nourriture dont le fermier a besoin est donc initialisée à 10, et la quantité dont il dispose est initialisée à 0. A chaque itération de la boucle, on vérifie si la quantité de nourriture dont le fermier dispose est égale à la quantité requise. Si c'est le cas, on peut sortir de la boucle. Sinon, le fermier passe une heure de plus à récolter de la nourriture, et la boucle itère à nouveau.</p>
+La quantité de nourriture dont le fermier a besoin est donc initialisée à 10, et la quantité dont il dispose est initialisée à 0. A chaque itération de la boucle, on vérifie si la quantité de nourriture dont le fermier dispose est égale à la quantité requise. Si c'est le cas, on peut sortir de la boucle. Sinon, le fermier passe une heure de plus à récolter de la nourriture, et la boucle itère à nouveau.
 
-<h3 id="À_quoi_ça_sert">À quoi ça sert ?</h3>
+### À quoi ça sert ?
 
-<p>Arrivé à ce stade, vous avez sans doute compris le concept global des boucles, mais vous vous dites probablement : "Ok, bien, mais comment cela va-t-il m'aider à améliorer mes codes en JavaScript ?". Comme nous l'avons dit plus tôt, <strong>les boucles ne font rien d'autre que répéter la même action encore et encore</strong>, ce qui peut s'avérer utile pour <strong>effectuer rapidement des tâches répétitives</strong>.</p>
+Arrivé à ce stade, vous avez sans doute compris le concept global des boucles, mais vous vous dites probablement : "Ok, bien, mais comment cela va-t-il m'aider à améliorer mes codes en JavaScript ?". Comme nous l'avons dit plus tôt, **les boucles ne font rien d'autre que répéter la même action encore et encore**, ce qui peut s'avérer utile pour **effectuer rapidement des tâches répétitives**.
 
-<p>Souvent, le code sera légèrement différent à chaque itération successive, ce qui signifie que vous pouvez effectuer une certaine quantité de tâches similaires, mais néanmoins quelque peu différentes - si vous avez beaucoup de calculs différents à effectuer, vous n'allez pas effectuer le même calcul encore et encore !</p>
+Souvent, le code sera légèrement différent à chaque itération successive, ce qui signifie que vous pouvez effectuer une certaine quantité de tâches similaires, mais néanmoins quelque peu différentes - si vous avez beaucoup de calculs différents à effectuer, vous n'allez pas effectuer le même calcul encore et encore !
 
-<p>Regardons maintenant un exemple qui illustre parfaitement en quoi les boucles sont si intéressantes. Disons que nous voulons dessiner 100 cercles aléatoirement sur un <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/random-canvas-circles.html" title="L'élément &lt;canvas> permet de modifier une zone graphique via un script (habituellement en JavaScript ou grâce à WebGL). Il peut par exemple être utilisé afin de dessiner des graphiques, manipuler des images ou jouer des animations."><code>&lt;canvas&gt;</code></a> (appuyez sur le bouton <em>Update</em> pour lancer le programme à nouveau et voir différentes dispositions aléatoires).</p>
+Regardons maintenant un exemple qui illustre parfaitement en quoi les boucles sont si intéressantes. Disons que nous voulons dessiner 100 cercles aléatoirement sur un [`<canvas>`](http://mdn.github.io/learning-area/javascript/building-blocks/loops/random-canvas-circles.html "L'élément <canvas> permet de modifier une zone graphique via un script (habituellement en JavaScript ou grâce à WebGL). Il peut par exemple être utilisé afin de dessiner des graphiques, manipuler des images ou jouer des animations.") (appuyez sur le bouton _Update_ pour lancer le programme à nouveau et voir différentes dispositions aléatoires).
 
-<h4>Exemple</h4>
+#### Exemple
 
-<pre class="brush: html hidden">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-  &lt;head&gt;
-    &lt;meta charset="utf-8"&gt;
-    &lt;title&gt;Random canvas circles&lt;/title&gt;
-    &lt;style&gt;
+```html hidden
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Random canvas circles</title>
+    <style>
       html {
         width: 100%;
         height: inherit;
@@ -103,15 +104,15 @@ original_slug: Apprendre/JavaScript/Building_blocks/Looping_code
         top: 5px;
         left: 5px;
       }
-    &lt;/style&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
+    </style>
+  </head>
+  <body>
 
-  &lt;button&gt;Update&lt;/button&gt;
+  <button>Update</button>
 
-  &lt;canvas&gt;&lt;/canvas&gt;
+  <canvas></canvas>
 
-    &lt;script&gt;
+    <script>
     const bouton = document.querySelector('button');
     const canvas = document.querySelector('canvas');
     const ctx = canvas.getContext('2d');
@@ -128,7 +129,7 @@ original_slug: Apprendre/JavaScript/Building_blocks/Looping_code
 
     function draw() {
       ctx.clearRect(0, 0, WIDTH, HEIGHT);
-      for (let i = 0; i &lt; 100; i++) {
+      for (let i = 0; i < 100; i++) {
         ctx.beginPath();
         ctx.fillStyle = 'rgba(255,0,0,0.5)';
         ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
@@ -138,169 +139,165 @@ original_slug: Apprendre/JavaScript/Building_blocks/Looping_code
 
     bouton.addEventListener('click',draw);
 
-    &lt;/script&gt;
+    </script>
 
-  &lt;/body&gt;
-&lt;/html&gt;</pre>
+  </body>
+</html>
+```
 
-<p>{{ EmbedLiveSample('Exemple', '100%', 400) }}</p>
+{{ EmbedLiveSample('Exemple', '100%', 400) }}
 
-<h4>Principe de boucle</h4>
+#### Principe de boucle
 
-<p>Vous n'avez pas besoin de comprendre entièrement le code pour l'instant, mais regardons plus en détail la partie du code qui trace les 100 cercles :</p>
+Vous n'avez pas besoin de comprendre entièrement le code pour l'instant, mais regardons plus en détail la partie du code qui trace les 100 cercles :
 
-<pre class="brush: js">for (let i = 0; i &lt; 100; i++) {
+```js
+for (let i = 0; i < 100; i++) {
   ctx.beginPath();
   ctx.fillStyle = 'rgba(255,0,0,0.5)';
   ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
   ctx.fill();
-}</pre>
+}
+```
 
-<p>Vous devriez comprendre l'idée basique - nous utilisons une boucle pour effectuer 100 itérations de ce code, chacune dessinant un cercle à une position quelconque sur la page. La quantité de lignes de code nécessaire serait identique si l'on voulait tracer 100 cercles, 1000 ou même 100000. Seul le nombre d'itérations devrait changer.</p>
+Vous devriez comprendre l'idée basique - nous utilisons une boucle pour effectuer 100 itérations de ce code, chacune dessinant un cercle à une position quelconque sur la page. La quantité de lignes de code nécessaire serait identique si l'on voulait tracer 100 cercles, 1000 ou même 100000. Seul le nombre d'itérations devrait changer.
 
-<p>Si nous n'utilisions pas de boucle ici, nous aurions du répéter le code suivant pour chaque cercle que nous aurions voulu dessiner :</p>
+Si nous n'utilisions pas de boucle ici, nous aurions du répéter le code suivant pour chaque cercle que nous aurions voulu dessiner :
 
-<pre class="brush: js">ctx.beginPath();
+```js
+ctx.beginPath();
 ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
 ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
-ctx.fill();</pre>
+ctx.fill();
+```
+
+Mais cela prend du temps inutilement, et rend le code difficilement maintenable. Les boucles sont vraiment les meilleures.
 
-<p>Mais cela prend du temps inutilement, et rend le code difficilement maintenable. Les boucles sont vraiment les meilleures.</p>
+## La boucle standard
 
-<h2 id="La_boucle_standard">La boucle standard</h2>
+Commençons maintenant à voir quelques formes de boucles spécifiques. La première, celle que vous utiliserez le plus souvent, est la boucle [for](/fr/docs/Web/JavaScript/Reference/Instructions/for). Elle a la syntaxe suivante :
 
-<p>Commençons maintenant à voir quelques formes de boucles spécifiques. La première, celle que vous utiliserez le plus souvent, est la boucle <a href="/fr/docs/Web/JavaScript/Reference/Instructions/for">for</a>. Elle a la syntaxe suivante :</p>
+    for (initialisation; condition de sortie; expression finale) {
+      // code à exécuter
+    }
+
+Nous avons ici :
 
-<pre>for (initialisation; condition de sortie; expression finale) {
-  // code à exécuter
-}</pre>
+1.  Le mot-clé `for`, suivi par des parenthèses.
+2.  A l'intérieur des parenthèses, on a trois objets :
 
-<p>Nous avons ici :</p>
+    1.  Une **initialisation** — il s'agit souvent d'une variable initialisée à une certaine valeur, qui est incrémentée afin de compter le nombre de fois où la boucle s'est exécutée. On peut également la nommer **compteur**.
+    2.  Une **condition de sortie** — comme mentionné précédemment, cela définit le moment où la boucle doit arrêter de s'exécuter. C'est généralement une expression contenant un opérateur de comparaison, un test pour voir si la condition de sortie est atteinte.
+    3.  Une **expression finale** — Elle est toujours évaluée (ou exécutée) chaque fois que la boucle a effectué une itération complète. Cela sert souvent à incrémenter (ou dans certains cas décrémenter) le compteur, pour le rapprocher de la valeur de la condition de sortie.
 
-<ol>
- <li>Le mot-clé <code>for</code>, suivi par des parenthèses.</li>
- <li>A l'intérieur des parenthèses, on a trois objets :
-  <ol>
-   <li>Une <strong>initialisation</strong> — il s'agit souvent d'une variable initialisée à une certaine valeur, qui est incrémentée afin de compter le nombre de fois où la boucle s'est exécutée. On peut également la nommer <strong>compteur</strong>.</li>
-   <li>Une <strong>condition de sortie</strong> — comme mentionné précédemment, cela définit le moment où la boucle doit arrêter de s'exécuter. C'est généralement une expression contenant un opérateur de comparaison, un test pour voir si la condition de sortie est atteinte.</li>
-   <li>Une <strong>expression finale</strong> — Elle est toujours évaluée (ou exécutée) chaque fois que la boucle a effectué une itération complète. Cela sert souvent à incrémenter (ou dans certains cas décrémenter) le compteur, pour le rapprocher de la valeur de la condition de sortie.</li>
-  </ol>
- </li>
- <li>Des accolades contenant un bloc de code — ce code sera exécuté chaque fois que la boucle itère.</li>
-</ol>
+3.  Des accolades contenant un bloc de code — ce code sera exécuté chaque fois que la boucle itère.
 
-<p>Regardons maintenant un vrai exemple, afin de visualiser leurs actions plus clairement.</p>
+Regardons maintenant un vrai exemple, afin de visualiser leurs actions plus clairement.
 
-<pre class="brush: js">const chats = ['Bill', 'Jeff', 'Pete', 'Biggles', 'Jasmin'];
+```js
+const chats = ['Bill', 'Jeff', 'Pete', 'Biggles', 'Jasmin'];
 let info = "Mes chat s'appellent ";
 const paragraphe = document.querySelector('p');
 
-for (let i = 0; i &lt; chats.length; i++) {
+for (let i = 0; i < chats.length; i++) {
   info += chats[i] + ', ';
 }
 
-paragraphe.textContent = info;</pre>
+paragraphe.textContent = info;
+```
 
-<h3>Sortie</h3>
+### Sortie
 
-<p>Cela nous donne la sortie suivante :</p>
+Cela nous donne la sortie suivante :
 
-<pre class="brush: html hidden">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-  &lt;head&gt;
-    &lt;meta charset="utf-8"&gt;
-    &lt;title&gt;Exemple de boucles&lt;/title&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
+```html hidden
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Exemple de boucles</title>
+  </head>
+  <body>
 
-  &lt;p&gt;&lt;/p&gt;
+  <p></p>
 
-    &lt;script&gt;
+    <script>
     const chats = ['Bill', 'Jeff', 'Pete', 'Biggles', 'Jasmin'];
     let info = "Mes chats s'appellent ";
     const paragraphe = document.querySelector('p');
 
-    for (let i = 0; i &lt; chats.length; i++) {
+    for (let i = 0; i < chats.length; i++) {
       info += chats[i] + ', ';
     }
 
     paragraphe.textContent = info;
 
-    &lt;/script&gt;
+    </script>
 
-  &lt;/body&gt;
-&lt;/html&gt;</pre>
+  </body>
+</html>
+```
 
-<p>{{ EmbedLiveSample('Sortie', '100%', 60) }}</p>
+{{ EmbedLiveSample('Sortie', '100%', 60) }}
 
-<div class="note">
-<p><strong>Note :</strong> Vous pouvez trouver aussi cet <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for.html">exemple de code sur GitHub</a> (et<a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for.html"> le voir tourner en live</a>).</p>
-</div>
+> **Note :** Vous pouvez trouver aussi cet [exemple de code sur GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for.html) (et[ le voir tourner en live](http://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for.html)).
 
-<p>Cela montre une boucle utiliser pour itérer sur les éléments d'un tableau et faire quelque chose avec chacun d'eux — un schéma très commun en JavaScript. Ici :</p>
-
-<ol>
- <li>L'itérateur, <code>i</code>, commence à <code>0</code> (<code>let i = 0</code>).</li>
- <li>On lui a demandé de s'exécuter jusqu'à ce que sa valeur ne soit plus inférieure à la longueur du tableau chats. C'est important  — la condition de sortie montre la condition à laquelle la boucle continue de s'exécuter. C'est à dire dans ce cas, tant que <code>i &lt; chats.length</code> est vrai, la boucle continuera à s'exécuter.</li>
- <li>Au sein de la boucle, on concatène les élèments présents dans cette boucle (<code>cats[i]</code> est <code>cats[quelque soit la valeur de i lors de l'iteration]</code>) avec une virgule et un espace, à la fin de la variable <code>info</code>. Donc :
-  <ol>
-   <li>Pendant le premier lancement, <code>i = 0</code>, donc <code>cats[0] + ', '</code> sera concaténé à ("Bill, ")</li>
-   <li>Au second lancement, <code>i = 1</code>, donc <code>cats[1] + ', '</code> et sera concaténé à  ("Jeff, ")</li>
-   <li>Et ainsi de suite. Aprés chaque tour de boucle, 1 est ajouté à <code>i</code> (<code>i++</code>), et alors le processus recommence encore.</li>
-  </ol>
- </li>
- <li>Quand <code>i</code> devient égal à <code>cats.length</code>, la boucle s'arrête, et le navigateur va bouger au prochain bout de code aprés la boucle.</li>
-</ol>
-
-<div class="note">
-<p><strong>Note :</strong> Nous avons fait sortir la condition <code>i &lt; cats.length</code>, et pas <code>i &lt;= cats.length</code>, parce que les ordinateurs comptent à partir de 0, pas 1 — nous avons démarré <code>i</code> à <code>0</code>, et allons allers jusqu'à <code>i = 4</code> (l'index du dernier item de la table/tableau). <code>cats.length</code> retourne 5, comme il y a 5 items dans la table, nous n'allont pas aller à <code>i = 5</code>, cela retournerai <code>undefined</code> pour le dernier item (il n'y a pas de item de table avec un index de 5). Par conséquent, nous voulons aller de 1 à moins que <code>cats.length</code> (<code>i &lt;</code>), ce n'est pas la même chose que <code>cats.length</code> (<code>i &lt;=</code>).</p>
-</div>
+Cela montre une boucle utiliser pour itérer sur les éléments d'un tableau et faire quelque chose avec chacun d'eux — un schéma très commun en JavaScript. Ici :
 
-<div class="note">
-<p><strong>Note :</strong> Une erreur commune avec les conditions de sortie est de les faire utiliser "égal à" plutôt que de dire "inférieur ou égal à". Si nous voulions faire tourner notre boucle jusqu'à i = 5, la condition de sortie aurait besoin d'être i &lt;= cats.length / Si nous la mettons à i = cats.length, la boucle ne fonctionnerait pas du tout parce que i n'est pas égal à 5 sur la première itération de la boucle, de sorte que cela s'arrête immédiatement.</p>
-</div>
+1.  L'itérateur, `i`, commence à `0` (`let i = 0`).
+2.  On lui a demandé de s'exécuter jusqu'à ce que sa valeur ne soit plus inférieure à la longueur du tableau chats. C'est important  — la condition de sortie montre la condition à laquelle la boucle continue de s'exécuter. C'est à dire dans ce cas, tant que `i < chats.length` est vrai, la boucle continuera à s'exécuter.
+3.  Au sein de la boucle, on concatène les élèments présents dans cette boucle (`cats[i]` est `cats[quelque soit la valeur de i lors de l'iteration]`) avec une virgule et un espace, à la fin de la variable `info`. Donc :
+
+    1.  Pendant le premier lancement, `i = 0`, donc `cats[0] + ', '` sera concaténé à ("Bill, ")
+    2.  Au second lancement, `i = 1`, donc `cats[1] + ', '` et sera concaténé à  ("Jeff, ")
+    3.  Et ainsi de suite. Aprés chaque tour de boucle, 1 est ajouté à `i` (`i++`), et alors le processus recommence encore.
+
+4.  Quand `i` devient égal à `cats.length`, la boucle s'arrête, et le navigateur va bouger au prochain bout de code aprés la boucle.
 
-<p>Un petit problème est que nous avons laissé la phrase de sortie mal formée :</p>
+> **Note :** Nous avons fait sortir la condition `i < cats.length`, et pas `i <= cats.length`, parce que les ordinateurs comptent à partir de 0, pas 1 — nous avons démarré `i` à `0`, et allons allers jusqu'à `i = 4` (l'index du dernier item de la table/tableau). `cats.length` retourne 5, comme il y a 5 items dans la table, nous n'allont pas aller à `i = 5`, cela retournerai `undefined` pour le dernier item (il n'y a pas de item de table avec un index de 5). Par conséquent, nous voulons aller de 1 à moins que `cats.length` (`i <`), ce n'est pas la même chose que `cats.length` (`i <=`).
 
-<blockquote>
-<p>Mes chats s'appellent Bill, Jeff, Pete, Biggles, Jasmin,</p>
-</blockquote>
+> **Note :** Une erreur commune avec les conditions de sortie est de les faire utiliser "égal à" plutôt que de dire "inférieur ou égal à". Si nous voulions faire tourner notre boucle jusqu'à i = 5, la condition de sortie aurait besoin d'être i <= cats.length / Si nous la mettons à i = cats.length, la boucle ne fonctionnerait pas du tout parce que i n'est pas égal à 5 sur la première itération de la boucle, de sorte que cela s'arrête immédiatement.
 
-<p>Idéalement, nous voulons changer la concaténation sur l'itération de la boucle finale de sorte que nous n'ayons pas de virgule à la fin de la phrase. Bien, pas de problème – nous pouvons heureusement insérer une structure conditionnelle dans notre boucle for pour gérer ce cas particulier :</p>
+Un petit problème est que nous avons laissé la phrase de sortie mal formée :
 
-<pre class="brush: js">for (let i = 0; i &lt; cats.length; i++) {
+> Mes chats s'appellent Bill, Jeff, Pete, Biggles, Jasmin,
+
+Idéalement, nous voulons changer la concaténation sur l'itération de la boucle finale de sorte que nous n'ayons pas de virgule à la fin de la phrase. Bien, pas de problème – nous pouvons heureusement insérer une structure conditionnelle dans notre boucle for pour gérer ce cas particulier :
+
+```js
+for (let i = 0; i < cats.length; i++) {
   if (i === cats.length - 1) {
     info += 'and ' + cats[i] + '.';
   } else {
     info += cats[i] + ', ';
   }
-}</pre>
+}
+```
 
-<div class="note">
-<p><strong>Note :</strong> Vous pouvez trouver cet exemple de code sur <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for-improved.html">GitHub</a> (et aussi le <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for-improved.html">voir en ligne</a>).</p>
-</div>
+> **Note :** Vous pouvez trouver cet exemple de code sur [GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for-improved.html) (et aussi le [voir en ligne](http://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for-improved.html)).
 
-<div class="warning">
-<p><strong>Attention :</strong> Avec for — comme avec toutes les boucles  — vous devez vous assurer que l'initialiseur est itéré de sorte qu'il finisse par atteindre la condition de sortie. Si ce n'est pas le cas, la boucle continuera indéfiniment, et soit le navigateur l'arrêtera, soit il se bloquera. C'est ce qu'on appelle une <strong>boucle infinie.</strong></p>
-</div>
+> **Attention :** Avec for — comme avec toutes les boucles  — vous devez vous assurer que l'initialiseur est itéré de sorte qu'il finisse par atteindre la condition de sortie. Si ce n'est pas le cas, la boucle continuera indéfiniment, et soit le navigateur l'arrêtera, soit il se bloquera. C'est ce qu'on appelle une **boucle infinie.**
 
-<h2 id="Quitter_une_boucle_avec_break">Quitter une boucle avec break</h2>
+## Quitter une boucle avec break
 
-<p>Si vous voulez quitter une boucle avant que toutes les itérations aient été terminées, vous pouvez utiliser l'instruction <a href="/fr/docs/Web/JavaScript/Reference/Instructions/break">break</a>. Nous l'avons déjà rencontré dans l'article précédent lorsque nous examinions les <a href="/fr/Apprendre/JavaScript/Building_blocks/conditionals#Instruction_switch">instructions switch </a>: lorsqu'un argument est rencontré dans une instruction switch qui correspond à l'expression d'entrée, l'instruction break quitte immédiatement l'instruction switch et passe au code après elle.</p>
+Si vous voulez quitter une boucle avant que toutes les itérations aient été terminées, vous pouvez utiliser l'instruction [break](/fr/docs/Web/JavaScript/Reference/Instructions/break). Nous l'avons déjà rencontré dans l'article précédent lorsque nous examinions les [instructions switch ](/fr/Apprendre/JavaScript/Building_blocks/conditionals#Instruction_switch): lorsqu'un argument est rencontré dans une instruction switch qui correspond à l'expression d'entrée, l'instruction break quitte immédiatement l'instruction switch et passe au code après elle.
 
-<p>C'est la même chose avec les boucles – un <code>break</code> quittera immédiatement la boucle et fera passer le navigateur sur n'importe quel code qui le suit.</p>
+C'est la même chose avec les boucles – un `break` quittera immédiatement la boucle et fera passer le navigateur sur n'importe quel code qui le suit.
 
-<p>Supposons que nous voulions effectuer une recherche parmi une liste de contacts et de numéros de téléphone et que nous ne renvoyions que le nombre que nous voulions trouver. Tout d'abord, du HTML simple - un texte {{htmlelement ("input")}} nous permettant d'entrer un nom à rechercher, un élément {{htmlelement ("button")}} pour soumettre une recherche, et un {{htmlelement ("p")}} élément pour afficher les résultats dans :</p>
+Supposons que nous voulions effectuer une recherche parmi une liste de contacts et de numéros de téléphone et que nous ne renvoyions que le nombre que nous voulions trouver. Tout d'abord, du HTML simple - un texte {{htmlelement ("input")}} nous permettant d'entrer un nom à rechercher, un élément {{htmlelement ("button")}} pour soumettre une recherche, et un {{htmlelement ("p")}} élément pour afficher les résultats dans :
 
-<pre class="brush: html">&lt;label for="search"&gt;Search by contact name: &lt;/label&gt;
-&lt;input id="search" type="text"&gt;
-&lt;button&gt;Search&lt;/button&gt;
+```html
+<label for="search">Search by contact name: </label>
+<input id="search" type="text">
+<button>Search</button>
 
-&lt;p&gt;&lt;/p&gt;</pre>
+<p></p>
+```
 
-<p>Maintenant sur le JavaScript :</p>
+Maintenant sur le JavaScript :
 
-<pre class="brush: js">const contacts = ['Chris:2232322', 'Sarah:3453456', 'Bill:7654322', 'Mary:9998769', 'Dianne:9384975'];
+```js
+const contacts = ['Chris:2232322', 'Sarah:3453456', 'Bill:7654322', 'Mary:9998769', 'Dianne:9384975'];
 const paragraphe = document.querySelector('p');
 const input = document.querySelector('input');
 const bouton = document.querySelector('button');
@@ -309,7 +306,7 @@ bouton.addEventListener('click', function() {
   let searchName = input.value;
   input.value = '';
   input.focus();
-  for (let i = 0; i &lt; contacts.length; i++) {
+  for (let i = 0; i < contacts.length; i++) {
     let splitContact = contacts[i].split(':');
     if (splitContact[0] === searchName) {
       paragraphe.textContent = splitContact[0] + '\'s number is ' + splitContact[1] + '.';
@@ -318,25 +315,27 @@ bouton.addEventListener('click', function() {
       paragraphe.textContent = 'Contact not found.';
     }
   }
-});</pre>
+});
+```
 
-<h3>Résultat</h3>
+### Résultat
 
-<pre class="brush: html hidden">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-  &lt;head&gt;
-    &lt;meta charset="utf-8"&gt;
-    &lt;title&gt;Simple contact search example&lt;/title&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
+```html hidden
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Simple contact search example</title>
+  </head>
+  <body>
 
-  &lt;label for="search"&gt;Search by contact name: &lt;/label&gt;
-  &lt;input id="search" type="text"&gt;
-  &lt;button&gt;Search&lt;/button&gt;
+  <label for="search">Search by contact name: </label>
+  <input id="search" type="text">
+  <button>Search</button>
 
-  &lt;p&gt;&lt;/p&gt;
+  <p></p>
 
-    &lt;script&gt;
+    <script>
     const contacts = ['Chris:2232322', 'Sarah:3453456', 'Bill:7654322', 'Mary:9998769', 'Dianne:9384975'];
     const paragraphe = document.querySelector('p');
     const input = document.querySelector('input');
@@ -346,7 +345,7 @@ bouton.addEventListener('click', function() {
       let searchName = input.value;
       input.value = '';
       input.focus();
-      for (let i = 0; i &lt; contacts.length; i++) {
+      for (let i = 0; i < contacts.length; i++) {
         let splitContact = contacts[i].split(':');
         if (splitContact[0] === searchName) {
           paragraphe.textContent = splitContact[0] + '\'s number is ' + splitContact[1] + '.';
@@ -356,64 +355,64 @@ bouton.addEventListener('click', function() {
         }
       }
     });
-    &lt;/script&gt;
-
-  &lt;/body&gt;
-&lt;/html&gt;</pre>
-<p>{{ EmbedLiveSample('Résultat', '100%', 100) }}</p>
-
-<ol>
- <li>Tout d'abord, nous avons quelques définitions de variables — nous avons un tableau d'informations de contact, avec chaque élément étant une chaîne contenant un nom et un numéro de téléphone séparés par deux points.</li>
- <li>Ensuite, nous attachons un écouteur d'événement au bouton (<code>bouton</code>), de sorte que quand il est pressé, du code est exécuté pour effectuer la recherche et renvoyer les résultats.</li>
- <li>Nous stockons la valeur saisie dans l'input dans une variable appelée <code>searchName</code>, , avant de vider l'input et le recentrer, prêt pour la recherche suivante.</li>
- <li>Maintenant sur la partie intéressante, la boucle for :
-  <ol>
-   <li>Nous commençons le compteur à <code>0</code>, exécutons la boucle jusqu'à ce que le compteur ne soit plus inférieur à <code>contacts.length</code>, et incrémentons <code>i</code> par 1 après chaque itération de la boucle.</li>
-   <li>À l'intérieur de la boucle, nous divisons d'abord le contact actuel (<code>contacts[i]</code>) au caractère deux-points et stockons les deux valeurs résultantes dans un tableau appelé <code>splitContact</code>.</li>
-   <li>Nous utilisons ensuite une instruction conditionnelle pour tester si <code>splitContact[0] </code>(le nom du contact) est égal au <code>searchName</code> entré. Si c'est le cas, nous introduisons une <code>string / chaîne de caractère</code><strong> </strong>dans le paragraphe pour indiquer quel est le numéro du contact et utiliser <code>break</code> pour terminer la boucle.</li>
-  </ol>
- </li>
- <li>Si le nom du contact ne correspond pas à la recherche entrée, le texte du paragraphe est défini sur "Contact not found." et la boucle continue son itération.</li>
-</ol>
-
-<div class="note">
-<p><strong>Note :</strong> Vous pouvez trouver cet exemple de code sur <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/contact-search.html">GitHub</a> (aussi <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/contact-search.html">voir en ligne</a>).</p>
-</div>
+    </script>
 
-<h2 id="Passer_des_itérations_avec_continue">Passer des itérations avec continue</h2>
+  </body>
+</html>
+```
 
-<p>L'instruction <a href="/fr/docs/Web/JavaScript/Reference/Instructions/continue">continue</a> fonctionne d'une manière similaire à <code>break</code>, mais au lieu de sortir complètement de la boucle, elle passe à l'itération suivante de la boucle. Regardons un autre exemple qui prend un nombre comme une entrée, et retourne seulement les nombres qui sont des carrés d'entiers (nombres entiers).</p>
+{{ EmbedLiveSample('Résultat', '100%', 100) }}
 
-<p>Le HTML est fondamentalement le même que le dernier exemple — une entrée de texte simple, et un paragraphe pour la sortie. Le JavaScript est la plupart du temps identique, même si la boucle elle-même est un peu différente :</p>
+1.  Tout d'abord, nous avons quelques définitions de variables — nous avons un tableau d'informations de contact, avec chaque élément étant une chaîne contenant un nom et un numéro de téléphone séparés par deux points.
+2.  Ensuite, nous attachons un écouteur d'événement au bouton (`bouton`), de sorte que quand il est pressé, du code est exécuté pour effectuer la recherche et renvoyer les résultats.
+3.  Nous stockons la valeur saisie dans l'input dans une variable appelée `searchName`, , avant de vider l'input et le recentrer, prêt pour la recherche suivante.
+4.  Maintenant sur la partie intéressante, la boucle for :
 
-<pre class="brush: js">let num = input.value;
+    1.  Nous commençons le compteur à `0`, exécutons la boucle jusqu'à ce que le compteur ne soit plus inférieur à `contacts.length`, et incrémentons `i` par 1 après chaque itération de la boucle.
+    2.  À l'intérieur de la boucle, nous divisons d'abord le contact actuel (`contacts[i]`) au caractère deux-points et stockons les deux valeurs résultantes dans un tableau appelé `splitContact`.
+    3.  Nous utilisons ensuite une instruction conditionnelle pour tester si `splitContact[0] `(le nom du contact) est égal au `searchName` entré. Si c'est le cas, nous introduisons une `string / chaîne de caractère`\*\* \*\*dans le paragraphe pour indiquer quel est le numéro du contact et utiliser `break` pour terminer la boucle.
 
-for (let i = 1; i &lt;= num; i++) {
+5.  Si le nom du contact ne correspond pas à la recherche entrée, le texte du paragraphe est défini sur "Contact not found." et la boucle continue son itération.
+
+> **Note :** Vous pouvez trouver cet exemple de code sur [GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/contact-search.html) (aussi [voir en ligne](http://mdn.github.io/learning-area/javascript/building-blocks/loops/contact-search.html)).
+
+## Passer des itérations avec continue
+
+L'instruction [continue](/fr/docs/Web/JavaScript/Reference/Instructions/continue) fonctionne d'une manière similaire à `break`, mais au lieu de sortir complètement de la boucle, elle passe à l'itération suivante de la boucle. Regardons un autre exemple qui prend un nombre comme une entrée, et retourne seulement les nombres qui sont des carrés d'entiers (nombres entiers).
+
+Le HTML est fondamentalement le même que le dernier exemple — une entrée de texte simple, et un paragraphe pour la sortie. Le JavaScript est la plupart du temps identique, même si la boucle elle-même est un peu différente :
+
+```js
+let num = input.value;
+
+for (let i = 1; i <= num; i++) {
   let sqRoot = Math.sqrt(i);
   if (Math.floor(sqRoot) !== sqRoot) {
     continue;
   }
 
   paragraphe.textContent += i + ' ';
-}</pre>
+}
+```
 
-<p>Ici la sortie :</p>
+Ici la sortie :
 
-<pre class="brush: html hidden">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-  &lt;head&gt;
-    &lt;meta charset="utf-8"&gt;
-    &lt;title&gt;Integer squares generator&lt;/title&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
+```html hidden
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Integer squares generator</title>
+  </head>
+  <body>
 
-  &lt;label for="number"&gt;Enter number: &lt;/label&gt;
-  &lt;input id="number" type="text"&gt;
-  &lt;button&gt;Generate integer squares&lt;/button&gt;
+  <label for="number">Enter number: </label>
+  <input id="number" type="text">
+  <button>Generate integer squares</button>
 
-  &lt;p&gt;Output: &lt;/p&gt;
+  <p>Output: </p>
 
-    &lt;script&gt;
+    <script>
     const paragraphe = document.querySelector('p');
     const input = document.querySelector('input');
     const bouton = document.querySelector('button');
@@ -423,7 +422,7 @@ for (let i = 1; i &lt;= num; i++) {
       let num = input.value;
       input.value = '';
       input.focus();
-      for (let i = 1; i &lt;= num; i++) {
+      for (let i = 1; i <= num; i++) {
         let sqRoot = Math.sqrt(i);
         if (Math.floor(sqRoot) !== sqRoot) {
           continue;
@@ -432,46 +431,44 @@ for (let i = 1; i &lt;= num; i++) {
         paragraphe.textContent += i + ' ';
       }
     });
-    &lt;/script&gt;
+    </script>
 
-  &lt;/body&gt;
-&lt;/html&gt;</pre>
+  </body>
+</html>
+```
 
-<p>{{ EmbedLiveSample('Passer_des_itérations_avec_continue', '100%', 100) }}</p>
+{{ EmbedLiveSample('Passer_des_itérations_avec_continue', '100%', 100) }}
 
-<ol>
- <li>Dans ce cas, l'entrée doit être un nombre (<code>num</code>). La boucle <code>for</code> est dotée d'un compteur commençant à 1 (car nous ne sommes pas intéressés par 0 dans ce cas), une condition de sortie indiquant que la boucle s'arrêtera lorsque le compteur deviendra plus grand que l'entrée <code>num</code>, et un itérateur ajoutera 1 au compteur à chaque fois.</li>
- <li>À l'intérieur de la boucle, nous trouvons la racine carrée de chaque nombre en utilisant <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/sqrt">Math.sqrt(i), </a><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Math/sqrt">, </a>puis vérifions si la racine carrée est un entier en vérifiant si elle est identique à elle-même lorsqu'elle a été arrondie à l'entier le plus proche (ceci est ce que <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Math/floor">Math.floor() </a>fait au nombre auquel il est passé).</li>
- <li>Si la racine carrée et la racine carrée arrondie ne sont pas égales les unes aux autres (<code>! ==</code>), cela signifie que la racine carrée n'est pas un entier, donc cela ne nous intéresse pas. Dans un tel cas, nous utilisons l'instruction <code>continue</code> pour passer à l'itération de la boucle suivante sans enregistrer le numéro n'importe où.</li>
- <li>Si la racine carrée est un entier, nous passons complètement le bloc if pour que l'instruction <code>continue</code> ne soit pas exécutée; à la place, nous concaténons la valeur <code>i </code>actuelle plus un espace sur la fin du contenu du paragraphe.</li>
-</ol>
+1.  Dans ce cas, l'entrée doit être un nombre (`num`). La boucle `for` est dotée d'un compteur commençant à 1 (car nous ne sommes pas intéressés par 0 dans ce cas), une condition de sortie indiquant que la boucle s'arrêtera lorsque le compteur deviendra plus grand que l'entrée `num`, et un itérateur ajoutera 1 au compteur à chaque fois.
+2.  À l'intérieur de la boucle, nous trouvons la racine carrée de chaque nombre en utilisant [Math.sqrt(i), ](/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/sqrt)[, ](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Math/sqrt)puis vérifions si la racine carrée est un entier en vérifiant si elle est identique à elle-même lorsqu'elle a été arrondie à l'entier le plus proche (ceci est ce que [Math.floor() ](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Math/floor)fait au nombre auquel il est passé).
+3.  Si la racine carrée et la racine carrée arrondie ne sont pas égales les unes aux autres (`! ==`), cela signifie que la racine carrée n'est pas un entier, donc cela ne nous intéresse pas. Dans un tel cas, nous utilisons l'instruction `continue` pour passer à l'itération de la boucle suivante sans enregistrer le numéro n'importe où.
+4.  Si la racine carrée est un entier, nous passons complètement le bloc if pour que l'instruction `continue` ne soit pas exécutée; à la place, nous concaténons la valeur `i `actuelle plus un espace sur la fin du contenu du paragraphe.
 
-<div class="note">
-<p><strong>Note :</strong> Vous pouvez trouver cet exemple de code sur <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/integer-squares.html">GitHub</a> (aussi <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/integer-squares.html">voir en ligne</a>).</p>
-</div>
+> **Note :** Vous pouvez trouver cet exemple de code sur [GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/integer-squares.html) (aussi [voir en ligne](http://mdn.github.io/learning-area/javascript/building-blocks/loops/integer-squares.html)).
 
-<h2 id="while_et_do_..._while">while et do ... while</h2>
+## while et do ... while
 
-<p><code>for</code> n'est pas le seul type de boucle disponible en JavaScript. Il y en a beaucoup d'autres et, même si vous n'avez pas besoin de comprendre tout cela maintenant, il vaut mieux jeter un coup d'œil à la structure de quelques autres pour pouvoir reconnaître les mêmes caractéristiques au travail d'une manière légèrement différente.</p>
+`for` n'est pas le seul type de boucle disponible en JavaScript. Il y en a beaucoup d'autres et, même si vous n'avez pas besoin de comprendre tout cela maintenant, il vaut mieux jeter un coup d'œil à la structure de quelques autres pour pouvoir reconnaître les mêmes caractéristiques au travail d'une manière légèrement différente.
 
-<p>D'abord, regardons la boucle <a href="/fr/docs/Web/JavaScript/Reference/Instructions/while">while</a>. La syntaxe de cette boucle ressemble à ceci:</p>
+D'abord, regardons la boucle [while](/fr/docs/Web/JavaScript/Reference/Instructions/while). La syntaxe de cette boucle ressemble à ceci:
 
-<pre>initializer
-while (exit-condition) {
-  // code to run
+    initializer
+    while (exit-condition) {
+      // code to run
 
-  final-expression
-}</pre>
+      final-expression
+    }
 
-<p>Cela fonctionne de manière très similaire à la boucle for, sauf que la variable de départ est définie avant la boucle, et l'expression finale est incluse dans la boucle après le code à exécuter — plutôt que ces deux éléments soient inclus dans les parenthèses. La condition de sortie est incluse dans les parenthèses, précédées du mot-clé <code>while </code>au lieu de <code>for</code>.</p>
+Cela fonctionne de manière très similaire à la boucle for, sauf que la variable de départ est définie avant la boucle, et l'expression finale est incluse dans la boucle après le code à exécuter — plutôt que ces deux éléments soient inclus dans les parenthèses. La condition de sortie est incluse dans les parenthèses, précédées du mot-clé `while `au lieu de `for`.
 
-<p>Les mêmes trois éléments sont toujours présents, et ils sont toujours définis dans le même ordre que dans la boucle for - cela est logique, car vous devez toujours définir un initialiseur avant de pouvoir vérifier s'il a atteint la condition de sortie ; la condition finale est ensuite exécutée après l'exécution du code à l'intérieur de la boucle (une itération a été effectuée), ce qui ne se produira que si la condition de sortie n'a pas encore été atteinte.</p>
+Les mêmes trois éléments sont toujours présents, et ils sont toujours définis dans le même ordre que dans la boucle for - cela est logique, car vous devez toujours définir un initialiseur avant de pouvoir vérifier s'il a atteint la condition de sortie ; la condition finale est ensuite exécutée après l'exécution du code à l'intérieur de la boucle (une itération a été effectuée), ce qui ne se produira que si la condition de sortie n'a pas encore été atteinte.
 
-<p>Jetons un coup d'oeil à notre exemple de liste de chats, mais réécrit pour utiliser une boucle while:</p>
+Jetons un coup d'oeil à notre exemple de liste de chats, mais réécrit pour utiliser une boucle while:
 
-<pre class="brush: js">let i = 0;
+```js
+let i = 0;
 
-while (i &lt; cats.length) {
+while (i < cats.length) {
   if (i === cats.length - 1) {
     info += 'and ' + cats[i] + '.';
   } else {
@@ -479,28 +476,28 @@ while (i &lt; cats.length) {
   }
 
   i++;
-}</pre>
+}
+```
 
-<div class="note">
-<p><strong>Note :</strong> Cela fonctionne toujours comme prévu regardez le ici <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/while.html">GitHub</a> (<a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/while.html">Voir en ligne</a> le code complet).</p>
-</div>
+> **Note :** Cela fonctionne toujours comme prévu regardez le ici [GitHub](http://mdn.github.io/learning-area/javascript/building-blocks/loops/while.html) ([Voir en ligne](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/while.html) le code complet).
 
-<p>La boucle<a href="/fr/docs/Web/JavaScript/Reference/Instructions/do...while"> do...while</a> est très similaire, mais dénote une variation par rapport à la structure de la boucle while :</p>
+La boucle[ do...while](/fr/docs/Web/JavaScript/Reference/Instructions/do...while) est très similaire, mais dénote une variation par rapport à la structure de la boucle while :
 
-<pre>initializer
-do {
-  // code to run
+    initializer
+    do {
+      // code to run
 
-  final-expression
-} while (exit-condition)</pre>
+      final-expression
+    } while (exit-condition)
 
-<p>Dans ce cas, l'initialiseur vient en premier, avant que la boucle ne commence. Le mot-clé <code>do </code>précède directement les accolades contenant le code à exécuter et l'expression finale.</p>
+Dans ce cas, l'initialiseur vient en premier, avant que la boucle ne commence. Le mot-clé `do `précède directement les accolades contenant le code à exécuter et l'expression finale.
 
-<p>Le différentiateur ici est que la condition de sortie vient après tout, enveloppée entre parenthèses et précédée d'un mot-clé <code>while</code>. Dans une boucle <code>do ... while</code>, le code à l'intérieur des accolades est toujours exécuté une fois avant que la vérification ne soit effectuée pour voir si elle doit être exécutée à nouveau (dans while et for, la vérification arrive en premier, donc le code pourrait ne jamais être exécuté ).</p>
+Le différentiateur ici est que la condition de sortie vient après tout, enveloppée entre parenthèses et précédée d'un mot-clé `while`. Dans une boucle `do ... while`, le code à l'intérieur des accolades est toujours exécuté une fois avant que la vérification ne soit effectuée pour voir si elle doit être exécutée à nouveau (dans while et for, la vérification arrive en premier, donc le code pourrait ne jamais être exécuté ).
 
-<p>Réécrivons notre exemple de listing de chat pour utiliser une boucle <code>do ... while </code>:</p>
+Réécrivons notre exemple de listing de chat pour utiliser une boucle `do ... while `:
 
-<pre class="brush: js">let i = 0;
+```js
+let i = 0;
 
 do {
   if (i === cats.length - 1) {
@@ -510,48 +507,42 @@ do {
   }
 
   i++;
-} while (i &lt; cats.length);</pre>
+} while (i < cats.length);
+```
 
-<div class="note">
-<p><strong>Note :</strong> Encore, cela fonctionne toujours comme prévu — regardez le ici <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/do-while.html">GitHub</a> (<a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/do-while.html">Voir en ligne</a> le code complet).</p>
-</div>
+> **Note :** Encore, cela fonctionne toujours comme prévu — regardez le ici [GitHub](http://mdn.github.io/learning-area/javascript/building-blocks/loops/do-while.html) ([Voir en ligne](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/do-while.html) le code complet).
 
-<div class="warning">
-<p><strong>Attention :</strong> Avec while et do ... while – comme avec toutes les boucles – vous devez vous assurer que l'initialiseur est itéré pour qu'il atteigne finalement la condition de sortie. Si ce n'est pas le cas, la boucle continuera indéfiniment, et soit le navigateur l'arrêtera, soit il se bloquera. C'est ce qu'on appelle une <strong>boucle infinie.</strong></p>
-</div>
+> **Attention :** Avec while et do ... while – comme avec toutes les boucles – vous devez vous assurer que l'initialiseur est itéré pour qu'il atteigne finalement la condition de sortie. Si ce n'est pas le cas, la boucle continuera indéfiniment, et soit le navigateur l'arrêtera, soit il se bloquera. C'est ce qu'on appelle une **boucle infinie.**
+
+## Apprentissage actif : Lancer le compte à rebours
+
+Dans cet exercice, nous vous proposons d'écrire un compte à rebours de lancement dans la boîte de sortie, de 10 jusqu'à "Blast Off." Plus précisément, il s'agit de :
+
+- Créer une boucle de 10 jusqu'à 0. Nous vous avons fourni un initialiseur — `let i = 10;`
+- Pour chaque itération, créer un nouveau paragraphe à ajouter dans la balise de sortie `<div>` que nous avons selectionnée en utilisant : `const output = document.querySelector('.output');` En commentaire, nous vous avons fourni trois lignes de code qui doivent être utilisées quelque part à l'intérieur de la boucle :
+
+  - `const paragraphe = document.createElement('p');` — crée un nouveau paragraphe.
+  - `output.appendChild(para);` — ajoute le paragraphe à la sortie `<div>`.
+  - `paragraphe.textContent =` — Rend le texte à l'intérieur du paragraphe identique à ce que vous avez entré du côté droit du signe égal.
+
+- Chaque nombre de l'itération nécessite un texte différent dans le paragraphe de cette itération (vous aurez besoin d'une expression conditionnelle et plusieurs lignes du type : `paragraphe.textContent = )`
+
+  - Si le nombre est 10, écrire "Countdown 10" dans le paragraphe.
+  - Si le nombre est 0, écrire "Blast off!" dans le paragraphe.
+  - Pour tout autre nombre, écrire simplement le nombre dans le paragraphe.
+
+- Noubliez pas d'inclure un itérateur ! Quoi qu'il en soit, dans cet exemple nous comptons à rebours après chaque itération, pas de manière croissante, alors vous ne voudrez pas `i++` — Comment allez vous créer l'itération décroissante ?
 
-<h2 id="Apprentissage_actif_Lancer_le_compte_à_rebours">Apprentissage actif : Lancer le compte à rebours</h2>
-
-<p>Dans cet exercice, nous vous proposons d'écrire un compte à rebours de lancement dans la boîte de sortie, de 10 jusqu'à "Blast Off." Plus précisément, il s'agit de :</p>
-
-<ul>
- <li>Créer une boucle de 10 jusqu'à 0. Nous vous avons fourni un initialiseur — <code>let i = 10; </code></li>
- <li>Pour chaque itération, créer un nouveau paragraphe à ajouter dans la balise de sortie <code>&lt;div&gt;</code> que nous avons selectionnée en utilisant : <code>const output = document.querySelector('.output');</code> En commentaire, nous vous avons fourni trois lignes de code qui doivent être utilisées quelque part à l'intérieur de la boucle :
-  <ul>
-   <li><code>const paragraphe = document.createElement('p');</code> — crée un nouveau paragraphe.</li>
-   <li><code>output.appendChild(para);</code> — ajoute le paragraphe à la sortie <code>&lt;div&gt;</code>.</li>
-   <li><code>paragraphe.textContent =</code> — Rend le texte à l'intérieur du paragraphe identique à ce que vous avez entré du côté droit du signe égal.</li>
-  </ul>
- </li>
- <li>Chaque nombre de l'itération nécessite un texte différent dans le paragraphe de cette itération (vous aurez besoin d'une expression conditionnelle et plusieurs lignes du type : <code>paragraphe.textContent = )</code>
-  <ul>
-   <li>Si le nombre est 10, écrire "Countdown 10" dans le paragraphe.</li>
-   <li>Si le nombre est 0, écrire "Blast off!" dans le paragraphe.</li>
-   <li>Pour tout autre nombre, écrire simplement le nombre dans le paragraphe.</li>
-  </ul>
- </li>
- <li>Noubliez pas d'inclure un itérateur ! Quoi qu'il en soit, dans cet exemple nous comptons à rebours après chaque itération, pas de manière croissante, alors vous ne voudrez pas <code>i++</code> — Comment allez vous créer l'itération décroissante ?</li>
-</ul>
-
-<p>Si vous faites une erreur, vous pourrez toujours réinitialiser l'exemple avec le bouton "Reset". Si vous êtes vraiment bloqué, appuyez sur le bouton "Show solution" pour voir une solution.</p>
-
-<pre class="brush: html hidden">&lt;h2&gt;Sortie en direct&lt;/h2&gt;
-&lt;div class="output" style="height: 410px;overflow: auto;"&gt;
-
-&lt;/div&gt;
-&lt;h2&gt;Code modifiable&lt;/h2&gt;
-&lt;p class="a11y-label"&gt;Appuyer sur Échap pour décibler le code&lt;/p&gt;
-&lt;textarea id="code" class="playable-code" style="height: 300px;"&gt;
+Si vous faites une erreur, vous pourrez toujours réinitialiser l'exemple avec le bouton "Reset". Si vous êtes vraiment bloqué, appuyez sur le bouton "Show solution" pour voir une solution.
+
+```html hidden
+<h2>Sortie en direct</h2>
+<div class="output" style="height: 410px;overflow: auto;">
+
+</div>
+<h2>Code modifiable</h2>
+<p class="a11y-label">Appuyer sur Échap pour décibler le code</p>
+<textarea id="code" class="playable-code" style="height: 300px;">
 const output = document.querySelector('.output');
 output.innerHTML = '';
 
@@ -560,15 +551,16 @@ output.innerHTML = '';
 // const paragraphe = document.createElement('p');
 // paragraphe.textContent = ;
 // output.appendChild(para);
-&lt;/textarea&gt;
+</textarea>
 
-&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>
+<div class="playable-buttons">
+  <input id="reset" type="button" value="Reset">
+  <input id="solution" type="button" value="Show solution">
+</div>
+```
 
-<pre class="brush: js hidden">const textarea = document.getElementById('code');
+```js hidden
+const textarea = document.getElementById('code');
 const reset = document.getElementById('reset');
 const solution = document.getElementById('solution');
 const code = textarea.value;
@@ -596,7 +588,7 @@ solution.addEventListener('click', function() {
   updateCode();
 });
 
-let jsSolution = 'let output = document.querySelector(\'.output\');\noutput.innerHTML = \'\';\n\nlet i = 10;\n\nwhile(i &gt;= 0) {\n let para = document.createElement(\'p\');\n if(i === 10) {\n para.textContent = \'Countdown \' + i;\n } else if(i === 0) {\n  para.textContent = \'Blast off!\';\n } else {\n para.textContent = i;\n }\n\n output.appendChild(para);\n\n i--;\n}';
+let jsSolution = 'let output = document.querySelector(\'.output\');\noutput.innerHTML = \'\';\n\nlet i = 10;\n\nwhile(i >= 0) {\n let para = document.createElement(\'p\');\n if(i === 10) {\n para.textContent = \'Countdown \' + i;\n } else if(i === 0) {\n  para.textContent = \'Blast off!\';\n } else {\n para.textContent = i;\n }\n\n output.appendChild(para);\n\n i--;\n}';
 let solutionEntry = jsSolution;
 
 textarea.addEventListener('input', updateCode);
@@ -643,47 +635,42 @@ textarea.onkeyup = function(){
 
   updateCode();
 };
-</pre>
+```
 
-<p>{{ EmbedLiveSample('Apprentissage_actif_Lancer_le_compte_à_rebours', '100%', 780) }}</p>
+{{ EmbedLiveSample('Apprentissage_actif_Lancer_le_compte_à_rebours', '100%', 780) }}
 
-<h2 id="Apprentissage_actif_remplir_une_liste_d'invités.">Apprentissage actif : remplir une liste d'invités.</h2>
+## Apprentissage actif : remplir une liste d'invités.
 
-<p>Dans cet exercice, nous vous proposons de prendre une liste d'invités stockée dans un tableau et de la mettre sur une liste d'invités. Mais cela n'est pas si simple — nous ne voulons pas laisser entrer Phil et Lola parce que ce sont des goinfres et qu'ils sont mal élevés, et ils mangent toujours toute la nourriture ! Nous avons deux listes, une pour les invités admis, une pour ceux que l'on refuse.</p>
+Dans cet exercice, nous vous proposons de prendre une liste d'invités stockée dans un tableau et de la mettre sur une liste d'invités. Mais cela n'est pas si simple — nous ne voulons pas laisser entrer Phil et Lola parce que ce sont des goinfres et qu'ils sont mal élevés, et ils mangent toujours toute la nourriture ! Nous avons deux listes, une pour les invités admis, une pour ceux que l'on refuse.
 
-<p>Plus précisément, nous attendons de vous :</p>
+Plus précisément, nous attendons de vous :
 
-<ul>
- <li>Que vous écriviez une boucle qui créé une itération de 0 jusqu'à la fin du tableau <code>people</code>. Vous aurez besoin de commencer avec un initialiseur type <code>let i = 0;</code> , mais quelle sera la condition de sortie</li>
- <li>Au cours de chaque itération, vérifiez si l'élément actuel du tableau est "Phil" ou "Lola" en utilisant une déclaration conditionnelle.
-  <ul>
-   <li>Si tel est le cas, concaténez l'élément à la fin du paragraphe <code>refused</code> du <code>textContent</code>, suivi d'une virgule et d'un espace.</li>
-   <li>Dans le cas contraire, concaténez l'élément à la fin du paragraphe <code>admitted</code>  du <code>textContent</code> suivi d'une virgule et d'un espace.</li>
-  </ul>
- </li>
-</ul>
+- Que vous écriviez une boucle qui créé une itération de 0 jusqu'à la fin du tableau `people`. Vous aurez besoin de commencer avec un initialiseur type `let i = 0;` , mais quelle sera la condition de sortie
+- Au cours de chaque itération, vérifiez si l'élément actuel du tableau est "Phil" ou "Lola" en utilisant une déclaration conditionnelle.
 
-<p>Nous vous avons déjà fourni les éléments suivants :</p>
+  - Si tel est le cas, concaténez l'élément à la fin du paragraphe `refused` du `textContent`, suivi d'une virgule et d'un espace.
+  - Dans le cas contraire, concaténez l'élément à la fin du paragraphe `admitted`  du `textContent` suivi d'une virgule et d'un espace.
 
-<ul>
- <li><code>let i = 0;</code> — Votre initialiseur.</li>
- <li><code>refused.textContent +=</code> — le début de la ligne qui va concaténer un élément à la fin du <code>refused.textContent</code>.</li>
- <li><code>admitted.textContent +=</code> — le début de la ligne qui va concaténer un élément à la fin du <code>admitted.textContent</code>.</li>
-</ul>
+Nous vous avons déjà fourni les éléments suivants :
 
-<p>Question bonus — après avoir accompli les tâches ci-dessus, il vous restera deux listes de noms séparées par des virgules, mais elles seront mal présentées— il y aura des virgules à la fin de chacune d'elles. Pouvez-vous faire en sorte d'écrire des lignes de code qui coupent les dernières virgules dans chacune d'elles, et ajoute un arrêt total à la fin ? Jetez un oeil à l'article <a href="/fr/docs/Learn/JavaScript/First_steps/methode_chaine_utile">Méthodes utiles pour les chaînes de caractères </a>pour obtenir de l'aide.</p>
+- `let i = 0;` — Votre initialiseur.
+- `refused.textContent +=` — le début de la ligne qui va concaténer un élément à la fin du `refused.textContent`.
+- `admitted.textContent +=` — le début de la ligne qui va concaténer un élément à la fin du `admitted.textContent`.
 
-<p>Si vous faites une erreur, vous pourrez toujours ré-initialiser l'exemple avec le bouton "Reset". Si vous êtes vraiment bloqué, appuyez sur le bouton "Show solution" pour voir une solution.</p>
+Question bonus — après avoir accompli les tâches ci-dessus, il vous restera deux listes de noms séparées par des virgules, mais elles seront mal présentées— il y aura des virgules à la fin de chacune d'elles. Pouvez-vous faire en sorte d'écrire des lignes de code qui coupent les dernières virgules dans chacune d'elles, et ajoute un arrêt total à la fin ? Jetez un oeil à l'article [Méthodes utiles pour les chaînes de caractères ](/fr/docs/Learn/JavaScript/First_steps/methode_chaine_utile)pour obtenir de l'aide.
 
-<pre class="brush: html hidden">&lt;h2&gt;Live output&lt;/h2&gt;
-&lt;div class="output" style="height: 100px;overflow: auto;"&gt;
-  &lt;p class="admitted"&gt;Admettre : &lt;/p&gt;
-  &lt;p class="refused"&gt;Refuser : &lt;/p&gt;
-&lt;/div&gt;
+Si vous faites une erreur, vous pourrez toujours ré-initialiser l'exemple avec le bouton "Reset". Si vous êtes vraiment bloqué, appuyez sur le bouton "Show solution" pour voir une solution.
 
-&lt;h2&gt;Editable code&lt;/h2&gt;
-&lt;p class="a11y-label"&gt;Appuyer sur Échap pour décibler le code&lt;/p&gt;
-&lt;textarea id="code" class="playable-code" style="height: 400px;width: 95%"&gt;
+```html hidden
+<h2>Live output</h2>
+<div class="output" style="height: 100px;overflow: auto;">
+  <p class="admitted">Admettre : </p>
+  <p class="refused">Refuser : </p>
+</div>
+
+<h2>Editable code</h2>
+<p class="a11y-label">Appuyer sur Échap pour décibler le code</p>
+<textarea id="code" class="playable-code" style="height: 400px;width: 95%">
 const people = ['Chris', 'Anne', 'Colin', 'Terri', 'Phil', 'Lola', 'Sam', 'Kay', 'Bruce'];
 
 const admitted = document.querySelector('.admitted');
@@ -696,14 +683,16 @@ refused.textContent = 'Refuse: '
 // refused.textContent += ;
 // admitted.textContent += ;
 
-&lt;/textarea&gt;
+</textarea>
 
-&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>
+<div class="playable-buttons">
+  <input id="reset" type="button" value="Reset">
+  <input id="solution" type="button" value="Show solution">
+</div>
+```
 
-<pre class="brush: css hidden">html {
+```css hidden
+html {
   font-family: sans-serif;
 }
 
@@ -721,9 +710,11 @@ h2 {
 body {
   margin: 10px;
   background: #f5f9fa;
-}</pre>
+}
+```
 
-<pre class="brush: js hidden">const textarea = document.getElementById('code');
+```js hidden
+const textarea = document.getElementById('code');
 const reset = document.getElementById('reset');
 const solution = document.getElementById('solution');
 let code = textarea.value;
@@ -752,7 +743,7 @@ solution.addEventListener('click', function() {
   updateCode();
 });
 
-let jsSolution = 'const people = [\'Chris\', \'Anne\', \'Colin\', \'Terri\', \'Phil\', \'Lola\', \'Sam\', \'Kay\', \'Bruce\'];\n\nconst admitted = document.querySelector(\'.admitted\');\nconst refused = document.querySelector(\'.refused\');\n\nadmitted.textContent = \'Admit: \';\nrefused.textContent = \'Refuse: \'\nlet i = 0;\n\ndo {\n if(people[i] === \'Phil\' || people[i] === \'Lola\') {\n refused.textContent += people[i] + \', \';\n } else {\n admitted.textContent += people[i] + \', \';\n }\n i++;\n} while(i &lt; people.length);\n\nrefused.textContent = refused.textContent.slice(0,refused.textContent.length-2) + \'.\';\nadmitted.textContent = admitted.textContent.slice(0,admitted.textContent.length-2) + \'.\';';
+let jsSolution = 'const people = [\'Chris\', \'Anne\', \'Colin\', \'Terri\', \'Phil\', \'Lola\', \'Sam\', \'Kay\', \'Bruce\'];\n\nconst admitted = document.querySelector(\'.admitted\');\nconst refused = document.querySelector(\'.refused\');\n\nadmitted.textContent = \'Admit: \';\nrefused.textContent = \'Refuse: \'\nlet i = 0;\n\ndo {\n if(people[i] === \'Phil\' || people[i] === \'Lola\') {\n refused.textContent += people[i] + \', \';\n } else {\n admitted.textContent += people[i] + \', \';\n }\n i++;\n} while(i < people.length);\n\nrefused.textContent = refused.textContent.slice(0,refused.textContent.length-2) + \'.\';\nadmitted.textContent = admitted.textContent.slice(0,admitted.textContent.length-2) + \'.\';';
 let solutionEntry = jsSolution;
 
 textarea.addEventListener('input', updateCode);
@@ -798,59 +789,55 @@ textarea.onkeyup = function(){
   }
 
   updateCode();
-};</pre>
+};
+```
 
-<p>{{ EmbedLiveSample("Apprentissage_actif_remplir_une_liste_d'invités.", '100%', 580) }}</p>
+{{ EmbedLiveSample("Apprentissage_actif_remplir_une_liste_d'invités.", '100%', 580) }}
 
-<h2 id="Quel_type_de_boucle_utiliser">Quel type de boucle utiliser ?</h2>
+## Quel type de boucle utiliser ?
 
-<p>Pour des usages basiques les boucles <code>for</code>, <code>while</code>, et <code>do...while</code> sont largement interchangeables. Elles résolvent toutes le même problème et celle que vous utiliserez dépendra de vos préférences personnelles — celle que vous trouverez le plus facile à mémoriser ou la plus intuitive. Jetons-y un coup d'oeil à nouveau.</p>
+Pour des usages basiques les boucles `for`, `while`, et `do...while` sont largement interchangeables. Elles résolvent toutes le même problème et celle que vous utiliserez dépendra de vos préférences personnelles — celle que vous trouverez le plus facile à mémoriser ou la plus intuitive. Jetons-y un coup d'oeil à nouveau.
 
-<p>Premièrement <code>for</code>:</p>
+Premièrement `for`:
 
-<pre>for (initialisation; condition de sortie; expression finale) {
-  // code à exécuter
-}</pre>
+    for (initialisation; condition de sortie; expression finale) {
+      // code à exécuter
+    }
 
-<p><code>while</code>:</p>
+`while`:
 
-<pre>initialisation
-while (condition de sortie) {
-  // code à exécuter
+    initialisation
+    while (condition de sortie) {
+      // code à exécuter
 
-  expression finale
-}</pre>
+      expression finale
+    }
 
-<p>et enfin <code>do...while</code>:</p>
+et enfin `do...while`:
 
-<pre>initialisation
-do {
-  // code à exécuter
+    initialisation
+    do {
+      // code à exécuter
 
-  expression finale
-} while (condition de sortie)</pre>
+      expression finale
+    } while (condition de sortie)
 
-<p>Nous recommandons <code>for</code>, au moins pour commencer, car elle est probablement la plus facile pour tout se remémorer — l'initialisation, la condition de sortie, l'expression finale, le tout soigneusement placé entre des parenthèses. De cette façon, il est facile de voir où elles se trouvent et de vérifier qu'on ne les a pas oubliées.</p>
+Nous recommandons `for`, au moins pour commencer, car elle est probablement la plus facile pour tout se remémorer — l'initialisation, la condition de sortie, l'expression finale, le tout soigneusement placé entre des parenthèses. De cette façon, il est facile de voir où elles se trouvent et de vérifier qu'on ne les a pas oubliées.
 
-<div class="note">
-<p><strong>Note :</strong> Il y a d'autres types de boucles et de particularités, qui sont très utiles pour des situations spéciales et qui ne sont pas décrites dans cet article. Si vous voulez aller plus loin dans l'apprentissage des boucles, lisez le guide <a href="/fr/docs/Web/JavaScript/Guide/Boucles_et_it%C3%A9ration">Boucles et itérations</a>.</p>
-</div>
+> **Note :** Il y a d'autres types de boucles et de particularités, qui sont très utiles pour des situations spéciales et qui ne sont pas décrites dans cet article. Si vous voulez aller plus loin dans l'apprentissage des boucles, lisez le guide [Boucles et itérations](/fr/docs/Web/JavaScript/Guide/Boucles_et_it%C3%A9ration).
 
-<h2 id="Conclusion">Conclusion</h2>
+## Conclusion
 
-<p>Cet article vous a révélé les concepts basiques et les différentes options disponibles pour créer des boucles en JavaScript. Vous devriez à présent être en mesure de comprendre en quoi les boucles constituent un bon mécanisme lorsqu'il s'agit de répéter une action dans le code, et vous devez être impatient de les utiliser dans vos propres exemples !</p>
+Cet article vous a révélé les concepts basiques et les différentes options disponibles pour créer des boucles en JavaScript. Vous devriez à présent être en mesure de comprendre en quoi les boucles constituent un bon mécanisme lorsqu'il s'agit de répéter une action dans le code, et vous devez être impatient de les utiliser dans vos propres exemples !
 
-<p>S'il y a quelque chose que vous n'avez pas compris, n'hésitez pas à relire l'article ou à <a href="/fr/Apprendre#Nous_contacter">nous contacter </a>pour demander de l'aide.</p>
+S'il y a quelque chose que vous n'avez pas compris, n'hésitez pas à relire l'article ou à [nous contacter ](/fr/Apprendre#Nous_contacter)pour demander de l'aide.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Guide/Boucles_et_it%C3%A9ration">Boucles et itération</a></li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Instructions/for">L'instruction for</a></li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Instructions/while">while</a> et <a href="/fr/docs/Web/JavaScript/Reference/Instructions/do...while">do...while</a></li>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Instructions/break">break</a> et <a href="/fr/docs/Web/JavaScript/Reference/Instructions/continue">continue</a></li>
- <li><p><a href="https://www.impressivewebs.com/javascript-for-loop/">What’s the Best Way to Write a JavaScript For Loop?</a> — quelques bonnes pratiques en matière de boucles</p>
- </li>
-</ul>
+- [Boucles et itération](/fr/docs/Web/JavaScript/Guide/Boucles_et_it%C3%A9ration)
+- [L'instruction for](/fr/docs/Web/JavaScript/Reference/Instructions/for)
+- [while](/fr/docs/Web/JavaScript/Reference/Instructions/while) et [do...while](/fr/docs/Web/JavaScript/Reference/Instructions/do...while)
+- [break](/fr/docs/Web/JavaScript/Reference/Instructions/break) et [continue](/fr/docs/Web/JavaScript/Reference/Instructions/continue)
+- [What’s the Best Way to Write a JavaScript For Loop?](https://www.impressivewebs.com/javascript-for-loop/) — quelques bonnes pratiques en matière de boucles
 
-<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}</p>
+{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}
diff --git a/files/fr/learn/javascript/building_blocks/return_values/index.md b/files/fr/learn/javascript/building_blocks/return_values/index.md
index 2d2b9f628e..c93c4c94a6 100644
--- a/files/fr/learn/javascript/building_blocks/return_values/index.md
+++ b/files/fr/learn/javascript/building_blocks/return_values/index.md
@@ -14,170 +14,184 @@ tags:
 translation_of: Learn/JavaScript/Building_blocks/Return_values
 original_slug: Apprendre/JavaScript/Building_blocks/Return_values
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Build_your_own_function","Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}
 
-<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Build_your_own_function","Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}</div>
-
-<p>Il y a un concept essentiel que nous devons aborder dans ce cours, pour être complet sur les fonctions: les valeurs de retour. Certaines fonctions ne retournent pas de valeur significative après avoir été exécutées, mais d'autres oui, il est important de comprendre ces valeurs, comment les utiliser dans votre code et comment faire pour que vos propres fonctions retournent des valeurs utiles. Nous aborderons tout cela dans cet article.</p>
+Il y a un concept essentiel que nous devons aborder dans ce cours, pour être complet sur les fonctions: les valeurs de retour. Certaines fonctions ne retournent pas de valeur significative après avoir été exécutées, mais d'autres oui, il est important de comprendre ces valeurs, comment les utiliser dans votre code et comment faire pour que vos propres fonctions retournent des valeurs utiles. Nous aborderons tout cela dans cet article.
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Prérequis:</th>
-   <td>
-    <p>Base en langage informatique, une compréhension basic de HTML et CSS, <a href="/fr/docs/Learn/JavaScript/First_steps">Premiers pas en JavaScript</a>, <a href="/fr/docs/Learn/JavaScript/Building_blocks/Functions">Fonctions — blocks de code réutilisable</a>.</p>
-   </td>
-  </tr>
-  <tr>
-   <th scope="row">Objectif:</th>
-   <td>Comprendre les valeurs de retour, et comment les utiliser.</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Prérequis:</th>
+      <td>
+        <p>
+          Base en langage informatique, une compréhension basic de HTML et CSS,
+          <a href="/fr/docs/Learn/JavaScript/First_steps"
+            >Premiers pas en JavaScript</a
+          >,
+          <a href="/fr/docs/Learn/JavaScript/Building_blocks/Functions"
+            >Fonctions — blocks de code réutilisable</a
+          >.
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Objectif:</th>
+      <td>Comprendre les valeurs de retour, et comment les utiliser.</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Qu'est-ce_que_les_valeurs_de_retour">Qu'est-ce que les valeurs de retour?</h2>
+## Qu'est-ce que les valeurs de retour?
 
-<p><strong>Les valeurs de retour </strong>sont, comme leur nom l'indique, les valeurs retournées par une fonction après son exécution. Vous en avez déjà rencontré plusieurs fois sans y avoir pensé explicitement. Revenons à notre code:</p>
+**Les valeurs de retour** sont, comme leur nom l'indique, les valeurs retournées par une fonction après son exécution. Vous en avez déjà rencontré plusieurs fois sans y avoir pensé explicitement. Revenons à notre code:
 
-<pre class="brush: js">var myText = 'I am a string';
+```js
+var myText = 'I am a string';
 var newString = myText.replace('string', 'sausage');
 console.log(newString);
 // the replace() string function takes a string,
 // replaces one substring with another, and returns
-// a new string with the replacement made</pre>
+// a new string with the replacement made
+```
 
-<p>Nous avons vu ce bloc de code dans notre premier article sur les fonctions. Nous appelons la fonction <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/replace">replace()</a> sur la chaîne de caractères <code>myText</code> , et lui passons deux paramètres: la chaîne à trouver ('string'), et la chaîne de remplacement ('sausage'). Lorsque cette fonction a fini de s'exécuter, elle retourne une valeur qui est une chaîne avec le remplacement effectué. Dans le code ci-dessus, nous sauvegardons cette valeur avec la variable newString.</p>
+Nous avons vu ce bloc de code dans notre premier article sur les fonctions. Nous appelons la fonction [replace()](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/replace) sur la chaîne de caractères `myText` , et lui passons deux paramètres: la chaîne à trouver ('string'), et la chaîne de remplacement ('sausage'). Lorsque cette fonction a fini de s'exécuter, elle retourne une valeur qui est une chaîne avec le remplacement effectué. Dans le code ci-dessus, nous sauvegardons cette valeur avec la variable newString.
 
-<p>Si vous regardez la page de référence MDN sur le remplacement de fonction, vous verrez une section intitulée <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/String/replace#Return_value">Valeur retournée</a>. Il est utile de savoir et de comprendre quelles sont les valeurs retournées par les fonctions, nous avons donc essayé d'inclure cette information partout où cela était possible.</p>
+Si vous regardez la page de référence MDN sur le remplacement de fonction, vous verrez une section intitulée [Valeur retournée](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/replace#Return_value). Il est utile de savoir et de comprendre quelles sont les valeurs retournées par les fonctions, nous avons donc essayé d'inclure cette information partout où cela était possible.
 
-<p>Certaines fonctions ne retournent pas de valeur comme telle (dans nos pages de référence, la valeur de retour est définie comme <code>void</code> ou <code>undefined</code> dans de tels cas). Par exemple, dans la fonction <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-stage-4.html#L50">displayMessage() </a> construite dans l'article précédent, aucune valeur spécifique n'est retournée comme résultat de la fonction appelée. Il y a seulement une boîte qui apparaît, c'est tout !</p>
+Certaines fonctions ne retournent pas de valeur comme telle (dans nos pages de référence, la valeur de retour est définie comme `void` ou `undefined` dans de tels cas). Par exemple, dans la fonction [displayMessage() ](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-stage-4.html#L50) construite dans l'article précédent, aucune valeur spécifique n'est retournée comme résultat de la fonction appelée. Il y a seulement une boîte qui apparaît, c'est tout !
 
-<p>Généralement, une valeur de retour est utilisée lorsque la fonction est une étape intermédiaire dans un programme. Ces valeurs intermédiaires doivent être d'abord évaluées par une fonction, le résultat renvoyé pourra être ensuite utilisé dans l'étape suivante du programme.</p>
+Généralement, une valeur de retour est utilisée lorsque la fonction est une étape intermédiaire dans un programme. Ces valeurs intermédiaires doivent être d'abord évaluées par une fonction, le résultat renvoyé pourra être ensuite utilisé dans l'étape suivante du programme.
 
-<h3 id="Utiliser_des_valeurs_de_retour_dans_vos_fonctions">Utiliser des valeurs de retour dans vos fonctions</h3>
+### Utiliser des valeurs de retour dans vos fonctions
 
-<p>Pour retourner une valeur d'une fonction que vous avez créée, vous devez utiliser... suspense... le mot-clef <a href="/fr/docs/Web/JavaScript/Reference/Statements/return">return</a> . Nous avons vu son utilisation dans l'exemple <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html">random-canvas-circles.html</a>. Notre fonction <code>draw()</code> dessine 100 cercles aléatoires en HTML. {{htmlelement("canvas")}}:</p>
+Pour retourner une valeur d'une fonction que vous avez créée, vous devez utiliser... suspense... le mot-clef [return](/fr/docs/Web/JavaScript/Reference/Statements/return) . Nous avons vu son utilisation dans l'exemple [random-canvas-circles.html](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html). Notre fonction `draw()` dessine 100 cercles aléatoires en HTML. {{htmlelement("canvas")}}:
 
-<pre class="brush: js">function draw() {
+```js
+function draw() {
   ctx.clearRect(0,0,WIDTH,HEIGHT);
-  for (var i = 0; i &lt; 100; i++) {
+  for (var i = 0; i < 100; i++) {
     ctx.beginPath();
     ctx.fillStyle = 'rgba(255,0,0,0.5)';
     ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
     ctx.fill();
   }
-}</pre>
+}
+```
 
-<p>À chaque itération de la boucle, on fait trois fois appel à la fonction <code>random()</code> pour générer respectivement une valeur aléatoire pour les coordonnées x et y du cercle, ainsi que pour son rayon. La fonction <code>random()</code> prend un seul paramètre — un nombre entier — et elle retourne un nombre entier aléatoire compris entre 0 et ce nombre. Voici à quoi cela ressemble:</p>
+À chaque itération de la boucle, on fait trois fois appel à la fonction `random()` pour générer respectivement une valeur aléatoire pour les coordonnées x et y du cercle, ainsi que pour son rayon. La fonction `random()` prend un seul paramètre — un nombre entier — et elle retourne un nombre entier aléatoire compris entre 0 et ce nombre. Voici à quoi cela ressemble:
 
-<pre class="brush: js">function random(number) {
+```js
+function random(number) {
   return Math.floor(Math.random()*number);
-}</pre>
+}
+```
 
-<p>Cela peut aussi s'écrire ainsi:</p>
+Cela peut aussi s'écrire ainsi:
 
-<pre class="brush: js">function random(number) {
+```js
+function random(number) {
   var result = Math.floor(Math.random()*number);
   return result;
-}</pre>
+}
+```
 
-<p>Mais la première version est plus rapide à écrire, et plus compacte.</p>
+Mais la première version est plus rapide à écrire, et plus compacte.
 
-<p>La fonction retourne le résultat de <code>Math.floor(Math.random()*number)</code> chaque fois qu'elle est appelée. Cette valeur de retour apparaît à l'endroit où la fonction a été appelée, puis le code continue. Si, par exemple, nous exécutons la ligne suivante:</p>
+La fonction retourne le résultat de `Math.floor(Math.random()*number)` chaque fois qu'elle est appelée. Cette valeur de retour apparaît à l'endroit où la fonction a été appelée, puis le code continue. Si, par exemple, nous exécutons la ligne suivante:
 
-<pre class="brush: js">ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);</pre>
+```js
+ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
+```
 
-<p>et que les trois appels <code>random()</code> retournent respectivement les valeurs 500, 200 et 35, la ligne pourrait être écrite de cette façon:</p>
+et que les trois appels `random()` retournent respectivement les valeurs 500, 200 et 35, la ligne pourrait être écrite de cette façon:
 
-<pre class="brush: js">ctx.arc(500, 200, 35, 0, 2 * Math.PI);</pre>
+```js
+ctx.arc(500, 200, 35, 0, 2 * Math.PI);
+```
 
-<p>Les fonctions de la ligne sont évaluées en premières, et leurs valeurs de retour viennent remplacer les appels de fonctions avant que la ligne elle-même ne soit exécutée.</p>
+Les fonctions de la ligne sont évaluées en premières, et leurs valeurs de retour viennent remplacer les appels de fonctions avant que la ligne elle-même ne soit exécutée.
 
-<h2 id="Apprentissage_actif_notre_propre_fonction_avec_valeur_de_retour">Apprentissage actif: notre propre fonction avec valeur de retour</h2>
+## Apprentissage actif: notre propre fonction avec valeur de retour
 
-<p>Allons-y, écrivons nos propres fonctions avec des valeurs de retour.</p>
+Allons-y, écrivons nos propres fonctions avec des valeurs de retour.
 
-<ol>
- <li>Pour commencer, faites une copie locale du fichier <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-library.html">function-library.html</a> à partir de GitHub. Il s'agit d'une simple page HTML contenant un champ texte  {{htmlelement("input")}} et un paragraphe. Il y a également un élément {{htmlelement("script")}} qui référence ces éléments HTML dans deux variables. Cette page vous permettra d'entrer un nombre dans le champ texte, et affichera, dans le paragraphe au-dessous, différents nombres en lien avec celui entré.</li>
- <li>Ajoutons quelques fonctions dans <code>&lt;script&gt;</code> . Sous les deux lignes existantes de JavaScript, ajoutez les définitions des fonctions suivantes:
-  <pre class="brush: js">function squared(num) {
-  return num * num;
-}
+1.  Pour commencer, faites une copie locale du fichier [function-library.html](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-library.html) à partir de GitHub. Il s'agit d'une simple page HTML contenant un champ texte  {{htmlelement("input")}} et un paragraphe. Il y a également un élément {{htmlelement("script")}} qui référence ces éléments HTML dans deux variables. Cette page vous permettra d'entrer un nombre dans le champ texte, et affichera, dans le paragraphe au-dessous, différents nombres en lien avec celui entré.
+2.  Ajoutons quelques fonctions dans `<script>` . Sous les deux lignes existantes de JavaScript, ajoutez les définitions des fonctions suivantes:
 
-function cubed(num) {
-  return num * num * num;
-}
+    ```js
+    function squared(num) {
+      return num * num;
+    }
 
-function factorial(num) {
-  var x = num;
-  while (x &gt; 1) {
-    num *= x-1;
-    x--;
-  }
-  return num;
-}</pre>
-  Les fonctions <code>squared()</code> et <code>cubed()</code> sont plutôt évidentes, elle retournent le carré et le cube du nombre donné en paramètre. La fonction <code>factorial()</code> retourne la <a href="https://en.wikipedia.org/wiki/Factorial">factorielle</a> du nombre donné.</li>
- <li>Ensuite, nous allons ajouter un moyen d'afficher des informations sur le nombre entré dans le champ texte. Ajoutez le gestionnaire d'événement suivant à la suite des fonctions:
-  <pre class="brush: js">input.onchange = function() {
-  var num = input.value;
-  if (isNaN(num)) {
-    para.textContent = 'You need to enter a number!';
-  } else {
-    para.textContent = num + ' squared is ' + squared(num) + '. ' +
-                       num + ' cubed is ' + cubed(num) + '. ' +
-                       num + ' factorial is ' + factorial(num) + '.';
-  }
-}</pre>
+    function cubed(num) {
+      return num * num * num;
+    }
+
+    function factorial(num) {
+      var x = num;
+      while (x > 1) {
+        num *= x-1;
+        x--;
+      }
+      return num;
+    }
+    ```
+
+    Les fonctions `squared()` et `cubed()` sont plutôt évidentes, elle retournent le carré et le cube du nombre donné en paramètre. La fonction `factorial()` retourne la [factorielle](https://en.wikipedia.org/wiki/Factorial) du nombre donné.
+
+3.  Ensuite, nous allons ajouter un moyen d'afficher des informations sur le nombre entré dans le champ texte. Ajoutez le gestionnaire d'événement suivant à la suite des fonctions:
+
+    ```js
+    input.onchange = function() {
+      var num = input.value;
+      if (isNaN(num)) {
+        para.textContent = 'You need to enter a number!';
+      } else {
+        para.textContent = num + ' squared is ' + squared(num) + '. ' +
+                           num + ' cubed is ' + cubed(num) + '. ' +
+                           num + ' factorial is ' + factorial(num) + '.';
+      }
+    }
+    ```
+
+    Ici nous créons un gestionnaire d'événement `onchange` qui s'exécute chaque fois que l'événement `change` se déclenche sur le champ de saisie de texte, c'est-à-dire lorsqu'une nouvelle valeur est entrée dans le champ de saisie de texte, puis qu'elle est soumise (par exemple lorsqu'on entre une valeur puis qu'on appuie sur Tab). Quand cette fonction anonyme s'exécute, la valeur entrée dans le champ de saisie est stockée dans la variable `num`.
 
-  <p>Ici nous créons un gestionnaire d'événement <code>onchange</code> qui s'exécute chaque fois que l'événement <code>change</code> se déclenche sur le champ de saisie de texte, c'est-à-dire lorsqu'une nouvelle valeur est entrée dans le champ de saisie de texte, puis qu'elle est soumise (par exemple lorsqu'on entre une valeur puis qu'on appuie sur Tab). Quand cette fonction anonyme s'exécute, la valeur entrée dans le champ de saisie est stockée dans la variable <code>num</code>.</p>
+    Ensuite, nous faisons un test: Si la valeur entrée n'est pas un nombre, un message d'erreur s'affiche dans le paragraphe. Le test vérifie si l'expression `isNaN(num)` retourne `true`. Nous utilisons la fonction [isNaN()](/fr/docs/Web/JavaScript/Reference/Global_Objects/isNaN) pour vérifier si la valeur `num` est un nombre — si c'est le cas, elle retourne `false`, sinon `true`.
 
-  <p>Ensuite, nous faisons un test: Si la valeur entrée n'est pas un nombre, un message d'erreur s'affiche dans le paragraphe. Le test vérifie si l'expression <code>isNaN(num)</code> retourne <code>true</code>. Nous utilisons la fonction <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/isNaN">isNaN()</a> pour vérifier si la valeur <code>num</code> est un nombre — si c'est le cas, elle retourne <code>false</code>, sinon <code>true</code>.</p>
+    Si le test retourne `false`, la valeur `num` est un nombre, alors une phrase s'affiche dans le paragraphe indiquant le carré, le cube et la factorielle du nombre. La phrase appelle les fonctions `squared()`, `cubed()` et `factorial()` pour obtenir les valeurs désirées.
 
-  <p>Si le test retourne <code>false</code>, la valeur <code>num</code> est un nombre, alors une phrase s'affiche dans le paragraphe indiquant le carré, le cube et la factorielle du nombre. La phrase appelle les fonctions <code>squared()</code>, <code>cubed()</code> et <code>factorial()</code> pour obtenir les valeurs désirées.</p>
- </li>
- <li>Sauvegardez votre code, chargez-le dans votre navigateur et testez-le.</li>
-</ol>
+4.  Sauvegardez votre code, chargez-le dans votre navigateur et testez-le.
 
-<div class="note">
-<p><strong>Note :</strong> Si vous rencontrez des difficultés pour faire fonctionner cet exemple, vous pouvez vérifier le code en le comparant à la <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-library-finished.html">Version final sur GitHub</a> (également <a href="http://mdn.github.io/learning-area/javascript/building-blocks/functions/function-library-finished.html">Démonstration en direct</a>), ou demandez-nous de l'aide.</p>
-</div>
+> **Note :** Si vous rencontrez des difficultés pour faire fonctionner cet exemple, vous pouvez vérifier le code en le comparant à la [Version final sur GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-library-finished.html) (également [Démonstration en direct](http://mdn.github.io/learning-area/javascript/building-blocks/functions/function-library-finished.html)), ou demandez-nous de l'aide.
 
-<p>À ce stade, nous aimerions que vous essayiez d'écrire quelque fonctions de votre choix et que vous les ajoutiez à la bibliothèque. Que diriez-vous des racines carré et cubique du nombre, ou de la circonférence d'un cercle de rayon <code>num</code>?</p>
+À ce stade, nous aimerions que vous essayiez d'écrire quelque fonctions de votre choix et que vous les ajoutiez à la bibliothèque. Que diriez-vous des racines carré et cubique du nombre, ou de la circonférence d'un cercle de rayon `num`?
 
-<p>Cet exercice a soulevé quelques points importants en plus de nous avoir permis d'étudier l'utilisation de la déclaration <code>return</code>. De plus, nous avons:</p>
+Cet exercice a soulevé quelques points importants en plus de nous avoir permis d'étudier l'utilisation de la déclaration `return`. De plus, nous avons:
 
-<ul>
- <li>Examiné un autre exemple d'écriture de gestion d'erreurs dans nos fonctions. C'est une bonne idée de vérifier que tous les paramètres nécessaires ont été fournis, avec les bons types de données, et, s'ils sont facultatifs, qu'une valeur par défaut est fournie. De cette façon, votre programme sera moins susceptible de lever des erreurs.</li>
- <li>Pensé à créer une bibliothèque de fonctions. À mesure que vous avancerez dans votre carrière de développeur, vous recommencerez les mêmes choses encore et encore. C'est une bonne idée de commencer à créer votre propre bibliothèque de fonctions utilitaires que vous utilisez très souvent — vous pouvez ensuite copier ces fonctions dans votre nouveau code, ou même utiliser la bibliothèque dans les pages HTML où vous en avez besoin.</li>
-</ul>
+- Examiné un autre exemple d'écriture de gestion d'erreurs dans nos fonctions. C'est une bonne idée de vérifier que tous les paramètres nécessaires ont été fournis, avec les bons types de données, et, s'ils sont facultatifs, qu'une valeur par défaut est fournie. De cette façon, votre programme sera moins susceptible de lever des erreurs.
+- Pensé à créer une bibliothèque de fonctions. À mesure que vous avancerez dans votre carrière de développeur, vous recommencerez les mêmes choses encore et encore. C'est une bonne idée de commencer à créer votre propre bibliothèque de fonctions utilitaires que vous utilisez très souvent — vous pouvez ensuite copier ces fonctions dans votre nouveau code, ou même utiliser la bibliothèque dans les pages HTML où vous en avez besoin.
 
-<h2 id="Conclusion">Conclusion</h2>
+## Conclusion
 
-<p>Nous l'avons vu, les fonctions sont amusantes, très utiles et, bien qu'il y ait beaucoup à dire en termes de syntaxe et de fonctionnalités, elles sont assez compréhensibles si elles sont étudiés correctement.</p>
+Nous l'avons vu, les fonctions sont amusantes, très utiles et, bien qu'il y ait beaucoup à dire en termes de syntaxe et de fonctionnalités, elles sont assez compréhensibles si elles sont étudiés correctement.
 
-<p>Si vous n'avez pas compris quelque chose, n'hésitez pas à relire l'article, ou <a href="/fr/Learn#Contact_us">contactez-nous</a> pour obtenir de l'aide.</p>
+Si vous n'avez pas compris quelque chose, n'hésitez pas à relire l'article, ou [contactez-nous](/fr/Learn#Contact_us) pour obtenir de l'aide.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/JavaScript/Reference/Functions">Fonctions  en profondeur</a> — Un guide détaillé couvrant des information plus avancées sur les fonctions.</li>
- <li><a href="https://www.impressivewebs.com/callback-functions-javascript/">Fonction Callback en JavaScript</a> — Une façon courante en JavaScript consiste à passer une fonction à une autre en tant qu'argument, qui est alors appelée à l'intérieur de la première fonction.  Cela va au delà de la portée de ce cours, mais mériterait d'être étudier rapidement.</li>
-</ul>
+- [Fonctions  en profondeur](/fr/docs/Web/JavaScript/Reference/Functions) — Un guide détaillé couvrant des information plus avancées sur les fonctions.
+- [Fonction Callback en JavaScript](https://www.impressivewebs.com/callback-functions-javascript/) — Une façon courante en JavaScript consiste à passer une fonction à une autre en tant qu'argument, qui est alors appelée à l'intérieur de la première fonction.  Cela va au delà de la portée de ce cours, mais mériterait d'être étudier rapidement.
 
-<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Build_your_own_function","Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}</p>
+{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Build_your_own_function","Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}
 
-<p> </p>
 
-<h2 id="Dans_ce_module">Dans ce module</h2>
 
-<ul>
- <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/conditionals">Prendre des décisions dans le code — conditions</a></li>
- <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Looping_code">Les boucles dans le code</a></li>
- <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Fonctions">Fonctions — Des blocs de code réutilisables</a></li>
- <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Build_your_own_function">Construire vos propres fonctions</a></li>
- <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Return_values">Valeurs de retour des fonctions</a></li>
- <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Ev%C3%A8nements">Introduction aux événements</a></li>
- <li><a href="/fr/docs/Apprendre/JavaScript/Building_blocks/Image_gallery">Galerie d'images</a></li>
-</ul>
+## Dans ce module
 
-<p> </p>
+- [Prendre des décisions dans le code — conditions](/fr/docs/Apprendre/JavaScript/Building_blocks/conditionals)
+- [Les boucles dans le code](/fr/docs/Apprendre/JavaScript/Building_blocks/Looping_code)
+- [Fonctions — Des blocs de code réutilisables](/fr/docs/Apprendre/JavaScript/Building_blocks/Fonctions)
+- [Construire vos propres fonctions](/fr/docs/Apprendre/JavaScript/Building_blocks/Build_your_own_function)
+- [Valeurs de retour des fonctions](/fr/docs/Apprendre/JavaScript/Building_blocks/Return_values)
+- [Introduction aux événements](/fr/docs/Apprendre/JavaScript/Building_blocks/Ev%C3%A8nements)
+- [Galerie d'images](/fr/docs/Apprendre/JavaScript/Building_blocks/Image_gallery)
-- 
cgit v1.2.3-54-g00ecf