Prepare Learning Area section for Markdown conversion (#2738)

* Remove summary, spans and fonts

* Remove notranslate class

* Remove ids other than headings

* Remove hidden blocks

* fix livesample call with exclamation mark

* fix livesample call with exclamation mark

* fix livesample call with exclamation mark

* fix livesample call with exclamation mark

* Fix notes

* Remove code in pre, sub/sup and some styles

* fix dls

* fix absolute / english links

* fix figures and others

* fix other issues from report

* Fix other one-off issues excl. imgs

* Fix images

* Fixes #2842 for Learning area

1 files changed, 35 insertions, 51 deletions

diff --git a/files/fr/learn/javascript/first_steps/variables/index.html b/files/fr/learn/javascript/first_steps/variables/index.html
index 35104fcaeb..dacd075396 100644
--- a/files/fr/learn/javascript/first_steps/variables/index.html
+++ b/files/fr/learn/javascript/first_steps/variables/index.html
@@ -1,34 +1,22 @@
 ---
 title: Stocker les informations nécessaires — les variables
 slug: Learn/JavaScript/First_steps/Variables
-tags:
-  - Booléens
-  - Declaration
-  - Initialisation
-  - JavaScript
-  - Mise à jour
-  - Nombres
-  - Objets
-  - Tableaux
-  - Typage faible
-  - Variables
-  - chaînes
 translation_of: Learn/JavaScript/First_steps/Variables
 ---
 <div>{{LearnSidebar}}</div>
 
 <div>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps")}}</div>
 
-<p class="summary">Après lecture des deux articles précédents, vous savez maintenant ce qu'est JavaScript, ce qu'il peut vous apporter, comment l'utiliser aux côtés d'autres technologies web et l'aspect de ses principales fonctionnalités vues de haut. Dans cet article, nous revenons aux fondements réels en examinant comment travailler avec le bloc de construction le plus basique du JavaScript — les variables.</p>
+<p>Après lecture des deux articles précédents, vous savez maintenant ce qu'est JavaScript, ce qu'il peut vous apporter, comment l'utiliser aux côtés d'autres technologies web et l'aspect de ses principales fonctionnalités vues de haut. Dans cet article, nous revenons aux fondements réels en examinant comment travailler avec le bloc de construction le plus basique du JavaScript — les variables.</p>
 
-<table class="learn-box">
+<table class="standard-table">
  <tbody>
   <tr>
-   <th scope="row">Prérequis :</th>
+   <th scope="row">Prérequis&nbsp;:</th>
    <td>Vocabulaire courant de l'informatique, bases de HTML et CSS, compréhension de ce que fait JavaScript.</td>
   </tr>
   <tr>
-   <th scope="row">Objectif :</th>
+   <th scope="row">Objectif&nbsp;:</th>
    <td>Se familiariser avec l'usage élémentaire des variables en JavaScript.</td>
   </tr>
  </tbody>
@@ -36,13 +24,13 @@ translation_of: Learn/JavaScript/First_steps/Variables
 
 <h2 id="Outils_nécessaires">Outils nécessaires</h2>
 
-<p>Tout au long de cet article, on vous demandera de saisir des lignes de code pour tester votre compréhension. Si vous vous servez du navigateur avec un ordinateur de bureau, l'endroit le plus approprié pour saisir les exemples de code est la console JavaScript du navigateur (voyez <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">Les outils de développement du navigateur</a> pour plus d'informations sur la manière d'accéder à ces outils).</p>
+<p>Tout au long de cet article, on vous demandera de saisir des lignes de code pour tester votre compréhension. Si vous vous servez du navigateur avec un ordinateur de bureau, l'endroit le plus approprié pour saisir les exemples de code est la console JavaScript du navigateur (voyez <a href="/fr/docs/Learn/Common_questions/What_are_browser_developer_tools">Les outils de développement du navigateur</a> pour plus d'informations sur la manière d'accéder à ces outils).</p>
 
 <p>Toutefois, nous avons aussi incorporé une console JavaScript dans cette page pour vous permettre d'y écrire le code au cas où vous n'utiliseriez pas un navigateur avec une console JavaScript facilement accessible, ou si vous estimez qu'une console incorporée est plus confortable.</p>
 
 <h2 id="Quest_ce_quune_variable">Qu'est ce qu'une variable ?</h2>
 
-<p>Une variable est un conteneur pour une valeur, tel un nombre à utiliser pour une addition, ou une chaîne devant faire partie d'une phrase. Mais un aspect spécial des variables est que les valeurs contenues peuvent changer. Voyons un exemple simple :</p>
+<p>Une variable est un conteneur pour une valeur, tel un nombre à utiliser pour une addition, ou une chaîne devant faire partie d'une phrase. Mais un aspect spécial des variables est que les valeurs contenues peuvent changer. Voyons un exemple simple&nbsp;:</p>
 
 <pre class="brush: html">&lt;button&gt;Pressez moi&lt;/button&gt;</pre>
 
@@ -53,7 +41,7 @@ button.onclick = function() {
   alert('Salut ' + name + ', sympa de vous voir !');
 }</pre>
 
-<p>{{ EmbedLiveSample('What_is_a_variable', '100%', 50) }}</p>
+<p>{{ EmbedLiveSample('Quest_ce_quune_variable', '100%', 50) }}</p>
 
 <p>Dans cet exemple, presser le bouton déclenche l'exécution de quelques lignes de code. La première ligne affiche à l'écran une boîte priant l'utilisateur de saisir son nom et stocke la valeur entrée dans une variable. La deuxième affiche un message de bienvenue avec la valeur de la variable.</p>
 
@@ -79,27 +67,24 @@ if (name === 'Adam') {
 
 <p>Les variables sont essentielles et à mesure que vous en apprendrez plus sur JavaScript, elles deviendront une seconde nature pour vous.</p>
 
-<p>Une autre particularité des variables : elle peuvent contenir pratiquement de tout — pas uniquement des chaînes ou des nombres. Elles peuvent aussi contenir des données complexes et même des fonctions, ce qui permet de réaliser des choses étonnantes. Vous en apprendrez plus à ce propos au long de ce parcours.</p>
+<p>Une autre particularité des variables&nbsp;: elle peuvent contenir pratiquement de tout — pas uniquement des chaînes ou des nombres. Elles peuvent aussi contenir des données complexes et même des fonctions, ce qui permet de réaliser des choses étonnantes. Vous en apprendrez plus à ce propos au long de ce parcours.</p>
 
-<div class="blockIndicator note">
+<div class="note">
 <p><strong>Note :</strong> Nous disons que les variables contiennent des valeurs. C'est un distingo important. Les variables ne sont pas les valeurs elles‑mêmes : ce sont des conteneurs pour ces valeurs. Vous pouvez vous les représenter comme une boîte en carton dans laquelle il est possible de ranger des choses.</p>
 </div>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/13506/boxes.png" style="display: block; height: 436px; margin: 0px auto; width: 1052px;"></p>
+<p><img alt="" src="boxes.png"></p>
 
 <h2 id="Déclarer_une_variable">Déclarer une variable</h2>
 
-<p>Avant de se servir d'une variable, il faut d'abord la créer — plus précisément, nous disons <em>déclarer la variable</em>. Pour ce faire, nous saisissons le mot‑clé <code>var</code> ou <code>let</code> suivi du nom que vous voulez donner à la variable :</p>
+<p>Avant de se servir d'une variable, il faut d'abord la créer — plus précisément, nous disons <em>déclarer la variable</em>. Pour ce faire, nous saisissons le mot‑clé <code>var</code> ou <code>let</code> suivi du nom que vous voulez donner à la variable&nbsp;:</p>
 
 <pre class="brush: js">let myName;
 let myAge;</pre>
 
 <p>Dans ces lignes, nous venons de créer deux variables nommées respectivement <code>myName</code> et <code>myAge</code>. Saisissez les maintenant dans la console de votre navigateur, ou dans la console au bas de la page (Vous <a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html">ouvrez cette console</a> soit dans un onglet séparé, soit dans une fenêtre selon votre préférence). Après cela, essayez de créer une variable (ou deux) en choisissant vous même le nom.</p>
 
-<div class="hidden">
-<h6 id="Hidden_code">Hidden code</h6>
-
-<pre class="brush: html">&lt;!DOCTYPE html&gt;
+<pre class="brush: html hidden">&lt;!DOCTYPE html&gt;
 &lt;html&gt;
   &lt;head&gt;
     &lt;meta charset="utf-8"&gt;
@@ -204,12 +189,11 @@ let myAge;</pre>
 
   &lt;/script&gt;
 &lt;/html&gt;</pre>
-</div>
 
-<p>{{ EmbedLiveSample('Hidden_code', '100%', 300) }}</p>
+<p>{{ EmbedLiveSample('Déclarer_une_variable', '100%', 300) }}</p>
 
 <div class="note">
-<p><strong>Note </strong>: En JavaScript, le code de toute instruction doit se terminer par un point‑virgule (<code>;</code>) — il peut fonctionner correctement sans ce point‑virgule pour des lignes isolées, mais ce ne sera probablement pas le cas si vous écrivez plusieurs lignes de code ensemble. Prenez l'habitude de mettre ce point‑virgule.</p>
+<p><strong>Note :</strong> En JavaScript, le code de toute instruction doit se terminer par un point‑virgule (<code>;</code>) — il peut fonctionner correctement sans ce point‑virgule pour des lignes isolées, mais ce ne sera probablement pas le cas si vous écrivez plusieurs lignes de code ensemble. Prenez l'habitude de mettre ce point‑virgule.</p>
 </div>
 
 <p>Vous pouvez maintenant tester si ces valeurs existent dans l'environnement d'exécution en saisissant simplement le nom de ces variables, par exemple</p>
@@ -222,22 +206,22 @@ myAge;</pre>
 <pre class="brush: js">scoobyDoo;</pre>
 
 <div class="note">
-<p><strong>Note </strong>: Ne confondez pas une variable qui existe mais sans valeur définie avec une variable qui n'existe pas du tout — ce sont deux choses tout à fait différentes. Dans l'analogie des boîtes, <em>ne pas exister</em> correspond à l'absence de boîte ; <em>valeur indéfinie</em> correspond à une boîte vide.</p>
+<p><strong>Note :</strong> Ne confondez pas une variable qui existe mais sans valeur définie avec une variable qui n'existe pas du tout — ce sont deux choses tout à fait différentes. Dans l'analogie des boîtes, <em>ne pas exister</em> correspond à l'absence de boîte ; <em>valeur indéfinie</em> correspond à une boîte vide.</p>
 </div>
 
 <h2 id="Initialisation_dune_variable">Initialisation d'une variable</h2>
 
-<p>Une fois la variable déclarée, vous pouvez l'initialiser avec une valeur. On réalise cela en saisissant le nom de la variable, suivi d'un signe égale (<code>=</code>), lui-même suivi de la valeur souhaitée pour la variable. Par exemple :</p>
+<p>Une fois la variable déclarée, vous pouvez l'initialiser avec une valeur. On réalise cela en saisissant le nom de la variable, suivi d'un signe égale (<code>=</code>), lui-même suivi de la valeur souhaitée pour la variable. Par exemple&nbsp;:</p>
 
 <pre class="brush: js">myName = 'Chris';
 myAge = 37;</pre>
 
-<p>Revenez à la console maintenant et saisissez‑y ces deux lignes. Constatez que la console renvoie en confirmation la  valeur assignée à la variable dans chaque cas. Vous pouvez, à nouveau, faire renvoyer par la console les valeurs de variable en saisissant simplement son nom dans la console — essayez encore :</p>
+<p>Revenez à la console maintenant et saisissez‑y ces deux lignes. Constatez que la console renvoie en confirmation la  valeur assignée à la variable dans chaque cas. Vous pouvez, à nouveau, faire renvoyer par la console les valeurs de variable en saisissant simplement son nom dans la console — essayez encore&nbsp;:</p>
 
 <pre class="brush: js">myName;
 myAge;</pre>
 
-<p>Il est possible de déclarer et initialiser une variable en même temps, comme ceci :</p>
+<p>Il est possible de déclarer et initialiser une variable en même temps, comme ceci&nbsp;:</p>
 
 <pre class="brush: js">let myDog = 'Rover';</pre>
 
@@ -264,11 +248,11 @@ logName();
 var myName;
 </pre>
 
-<div class="blockIndicator note">
-<p>Note : l'exemple ci-dessus ne fonctionnera pas si on tape des lignes une à une dans la console, mais seulement quand on exécute un script JavaScript multi-lignes dans un document web.</p>
+<div class="note">
+<p><strong>Note :</strong> l'exemple ci-dessus ne fonctionnera pas si on tape des lignes une à une dans la console, mais seulement quand on exécute un script JavaScript multi-lignes dans un document web.</p>
 </div>
 
-<p>Ce processus se nomme <strong>«</strong> <strong>hoisting »</strong> <span class="st">(en français, "hissage") </span>— lisez <a href="/en-US/docs/Web/JavaScript/Reference/Statements/var#var_hoisting">var hoisting</a> pour plus de précisions sur ce sujet.</p>
+<p>Ce processus se nomme <strong>«</strong> <strong>hoisting »</strong> (en français, "hissage") — lisez <a href="/fr/docs/Web/JavaScript/Reference/Statements/var#var_hoisting">var hoisting</a> pour plus de précisions sur ce sujet.</p>
 
 <p>Le hissage ne fonctionne plus avec <code>let</code>. Si on remplaçait var par let dans l'exemple ci-dessus, l'exécution du script planterait sur une erreur. C'est une bonne chose — déclarer une variable après l'avoir initialisé produit un code obscur, difficile à lire.</p>
 
@@ -296,7 +280,7 @@ myName = 'Bob' ;</pre>
 
 <h2 id="Mise_à_jour_dune_variable">Mise à jour d'une variable</h2>
 
-<p>Une fois la variable initialisée avec une valeur, vous pouvez simplement modifier (ou mettre à jour) cette valeur en lui assignant une nouvelle valeur. Entrez ces deux lignes dans la console :</p>
+<p>Une fois la variable initialisée avec une valeur, vous pouvez simplement modifier (ou mettre à jour) cette valeur en lui assignant une nouvelle valeur. Entrez ces deux lignes dans la console&nbsp;:</p>
 
 <pre class="brush: js">myName = 'Bob';
 myAge = 40;</pre>
@@ -316,10 +300,10 @@ myAge = 40;</pre>
 </ul>
 
 <div class="note">
-<p><strong>Note </strong>: Une liste exhaustive des mots réservés est proposée dans la page <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords">Lexical grammar — keywords</a>.</p>
+<p><strong>Note :</strong> Une liste exhaustive des mots réservés est proposée dans la page <a href="/fr/docs/Web/JavaScript/Reference/Lexical_grammar#keywords">Lexical grammar — keywords</a>.</p>
 </div>
 
-<p>Exemples de noms corrects :</p>
+<p>Exemples de noms corrects&nbsp;:</p>
 
 <pre class="example-good">age
 myAge
@@ -341,9 +325,9 @@ document
 skjfndskjfnbdskjfb
 thisisareallylongstupidvariablenameman </pre>
 
-<p>Parmi ces noms, les suivants déclenchent une <code>SyntaxError</code>  :</p>
+<p>Parmi ces noms, les suivants déclenchent une <code>SyntaxError</code> &nbsp;:</p>
 
-<pre class="example-invalid">1 //la variable commence par un chiffre
+<pre class="brush: js example-bad">1 //la variable commence par un chiffre
 var //mot réservé
 document //mot réservé
 </pre>
@@ -370,11 +354,11 @@ document //mot réservé
 
 <h3 id="Booléens">Booléens</h3>
 
-<p>Les booléens sont des valeurs true/false (vrai/faux) — elles ne peuvent prendre que deux valeurs: <code>true</code> ou <code>false</code>. Elles sont généralement utilisées pour tester une condition, à la suite de laquelle le code est exécuté de manière appropriée. Ainsi, par exemple, un cas simple pourrait être :</p>
+<p>Les booléens sont des valeurs true/false (vrai/faux) — elles ne peuvent prendre que deux valeurs: <code>true</code> ou <code>false</code>. Elles sont généralement utilisées pour tester une condition, à la suite de laquelle le code est exécuté de manière appropriée. Ainsi, par exemple, un cas simple pourrait être&nbsp;:</p>
 
 <pre class="brush: js">var iAmAlive = true;</pre>
 
-<p>Toutefois, en réalité, un booléen sera plutôt utilisé ainsi :</p>
+<p>Toutefois, en réalité, un booléen sera plutôt utilisé ainsi&nbsp;:</p>
 
 <pre class="brush: js">var test = 6 &lt; 3;</pre>
 
@@ -382,17 +366,17 @@ document //mot réservé
 
 <h3 id="Tableaux">Tableaux</h3>
 
-<p>Une tableau est un objet unique contenant plusieurs valeurs entre crochets séparées par des virgules. Saisissez les lignes suivantes dans la console :</p>
+<p>Une tableau est un objet unique contenant plusieurs valeurs entre crochets séparées par des virgules. Saisissez les lignes suivantes dans la console&nbsp;:</p>
 
 <pre class="brush: js">var myNameArray = ['Chris', 'Bob', 'Jim'];
 var myNumberArray = [10,15,40];</pre>
 
-<p>Un fois ces tableaux définis, vous pouvez avoir accès à chaque valeur en fonction de leur emplacement dans le tableau. Voyez ces lignes :</p>
+<p>Un fois ces tableaux définis, vous pouvez avoir accès à chaque valeur en fonction de leur emplacement dans le tableau. Voyez ces lignes&nbsp;:</p>
 
 <pre class="brush: js">myNameArray[0]; // renverra 'Chris'
 myNumberArray[2]; // renverra 40</pre>
 
-<p>La valeur entre crochets précise l'index correspondant à la position de la valeur que vous souhaitez voir renvoyée. Vous remarquerez que les tableaux en JavaScript sont indexés à partir de zéro : le premier élément a l'index 0.</p>
+<p>La valeur entre crochets précise l'index correspondant à la position de la valeur que vous souhaitez voir renvoyée. Vous remarquerez que les tableaux en JavaScript sont indexés à partir de zéro&nbsp;: le premier élément a l'index 0.</p>
 
 <p>Vous en apprendrez beaucoup plus au sujet des tableaux dans un article suivant.</p>
 
@@ -400,11 +384,11 @@ myNumberArray[2]; // renverra 40</pre>
 
 <p>En programmation, un objet est une structure de code qui modélise un objet du réel. Vous pouvez avoir un objet simple représentant une place de parking avec sa largeur et sa profondeur ou bien un objet représentant une personne avec comme données son nom, sa taille, son poids, son vernaculaire, comment le contacter, et plus encore.</p>
 
-<p>Entrez la ligne suivant dans la console de votre explorateur :</p>
+<p>Entrez la ligne suivant dans la console de votre explorateur&nbsp;:</p>
 
 <pre class="brush: js">var dog = { name : 'Spot', breed : 'Dalmatian' };</pre>
 
-<p>Pour récupérer une information stockée dans un objet, vous pouvez utiliser la syntaxe suivante :</p>
+<p>Pour récupérer une information stockée dans un objet, vous pouvez utiliser la syntaxe suivante&nbsp;:</p>
 
 <pre class="brush: js">dog.name</pre>
 
@@ -414,11 +398,11 @@ myNumberArray[2]; // renverra 40</pre>
 
 <p>JavaScript est un « langage faiblement typé », ce qui veut dire que, contrairement à d'autres langages, vous n'êtes pas obligé de préciser quel est le type de donnée que doit contenir une variable (par ex. nombres, chaînes, tableaux, etc).</p>
 
-<p>Par exemple, si vous déclarez une variable et si vous y placez une valeur entre guillemets, le navigateur la traitera comme étant une chaîne :</p>
+<p>Par exemple, si vous déclarez une variable et si vous y placez une valeur entre guillemets, le navigateur la traitera comme étant une chaîne&nbsp;:</p>
 
 <pre class="brush: js">var myString = 'Hello';</pre>
 
-<p>Ce sera toujours une chaîne, même si ce sont des nombres, donc soyez prudents :</p>
+<p>Ce sera toujours une chaîne, même si ce sont des nombres, donc soyez prudents&nbsp;:</p>
 
 <pre class="brush: js">var myNumber = '500'; // oops, c'est toujours une chaîne
 typeof(myNumber);