Merge branch 'main' into fix-typo-client-side-web-apis-intro-ja

23 files changed, 80 insertions, 1927 deletions

diff --git a/files/fr/learn/javascript/asynchronous/async_await/index.md b/files/fr/learn/javascript/asynchronous/async_await/index.md
deleted file mode 100644
index a7578c08e1..0000000000
--- a/files/fr/learn/javascript/asynchronous/async_await/index.md
+++ /dev/null
@@ -1,594 +0,0 @@
----
-title: Faciliter la programmation asynchrone avec async et await
-slug: Learn/JavaScript/Asynchronous/Async_await
-tags:
-  - Beginner
-  - CodingScripting
-  - Guide
-  - JavaScript
-  - Learn
-  - Promises
-  - async
-  - asynchronous
-  - await
-translation_of: Learn/JavaScript/Asynchronous/Async_await
----
-{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}
-
-Plus récemment, les [fonctions async](/fr/docs/Web/JavaScript/Reference/Statements/async_function) et le mot-clé [`await`](/fr/docs/Web/JavaScript/Reference/Operators/await) ont été ajoutés au langage JavaScript avec l'édition intitulée ECMAScript 2017. Ces fonctionnalités agissent essentiellement comme du sucre syntaxique sur les promesses, rendant le code asynchrone plus facile à écrire et à lire par la suite. Elles font en sorte que le code asynchrone ressemble davantage au code synchrone de la vieille école, et elles valent donc la peine d'être apprises. Cet article fournit les informations à connaître.
-
-<table class="standard-table">
-  <tbody>
-    <tr>
-      <th scope="row">Prérequis :</th>
-      <td>
-        Connaissances informatiques de base, compréhension raisonnable des
-        principes fondamentaux de JavaScript, compréhension du code asynchrone
-        en général et des promesses.
-      </td>
-    </tr>
-    <tr>
-      <th scope="row">Objectif :</th>
-      <td>Comprendre <code>async/await</code> et comment les utiliser.</td>
-    </tr>
-  </tbody>
-</table>
-
-## Les bases de async/await
-
-L'utilisation `async/await` dans votre code comporte deux parties.
-
-### Le mot-clé async
-
-Tout d'abord, nous avons le mot-clé `async`, que vous mettez devant une déclaration de fonction pour la transformer en une [fonction asynchrone](/fr/docs/Web/JavaScript/Reference/Statements/async_function). Une fonction asynchrone est une fonction qui saura réagir à une éventuelle utilisation du mot-clé `await` pour invoquer du code asynchrone.
-
-Essayez de taper les lignes suivantes dans la console JS de votre navigateur :
-
-```js
-function hello() { return "Bonjour" };
-hello();
-```
-
-La fonction renvoie « Bonjour » — rien de spécial, n'est-ce pas ?
-
-Mais que se passe-t-il si nous transformons cette fonction en une fonction asynchrone ? Essayez ce qui suit :
-
-```js
-async function hello() { return "Bonjour" };
-hello();
-```
-
-Ah. L'invocation de la fonction renvoie maintenant une promesse. C'est l'une des caractéristiques des fonctions asynchrones - leurs valeurs de retour sont nécessairement converties en promesses.
-
-Vous pouvez également créer une [expression de fonction asynchrone](/fr/docs/Web/JavaScript/Reference/Operators/async_function), comme suit :
-
-```js
-let hello = async function() { return "Bonjour" };
-hello();
-```
-
-Et vous pouvez utiliser les fonctions fléchées :
-
-```js
-let hello = async () => { return "Bonjour" };
-```
-
-Elles font toutes à peu près la même chose.
-
-Pour consommer réellement la valeur renvoyée lorsque la promesse se réalise, puisqu'elle renvoie une promesse, nous pourrions utiliser un bloc `.then()` :
-
-```js
-hello().then((value) => console.log(value));
-```
-
-ou même simplement un raccourci tel que
-
-```js
-hello().then(console.log);
-```
-
-Comme nous l'avons vu dans l'article précédent.
-
-Ainsi, le mot-clé `async` est ajouté aux fonctions pour leur indiquer de retourner une promesse plutôt que de retourner directement la valeur.
-
-### Le mot-clé await
-
-L'avantage d'une fonction asynchrone ne devient apparent que lorsque vous la combinez avec le mot-clé `await`. `await` ne fonctionne qu'à l'intérieur de fonctions asynchrones dans du code JavaScript ordinaire, mais il peut être utilisé seul avec [des modules JavaScript](/fr/docs/Web/JavaScript/Guide/Modules).
-
-`await` peut être placé devant toute fonction asynchrone basée sur une promesse pour mettre en pause votre code sur cette ligne jusqu'à ce que la promesse se réalise, puis retourner la valeur résultante.
-
-Vous pouvez utiliser `await` lors de l'appel de toute fonction qui renvoie une promesse, y compris les fonctions de l'API web.
-
-Voici un exemple trivial :
-
-```js
-async function hello() {
-  return salutation = await Promise.resolve("Bonjour");
-};
-
-hello().then(console.log);
-```
-
-Bien sûr, l'exemple ci-dessus n'est pas très utile, même s'il sert à illustrer la syntaxe. Passons maintenant à un exemple réel.
-
-## Réécriture du code des promesses avec async/await
-
-Reprenons un exemple simple de récupération que nous avons vu dans l'article précédent :
-
-```js
-fetch('coffee.jpg')
-.then(response => {
-  if (!response.ok) {
-    throw new Error(`Erreur HTTP ! statut : ${response.status}`);
-  }
-  return response.blob();
-})
-.then(myBlob => {
-  let objectURL = URL.createObjectURL(myBlob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-})
-.catch(e => {
-  console.log('Il y a eu un problème avec votre opération de récupération : ' + e.message);
-});
-```
-
-À ce stade, vous devriez avoir une compréhension raisonnable des promesses et de leur fonctionnement, mais convertissons le tout en utilisant async/await pour voir à quel point cela simplifie les choses :
-
-```js
-async function myFetch() {
-  let response = await fetch('coffee.jpg');
-
-  if (!response.ok) {
-    throw new Error(`Erreur HTTP ! statut : ${response.status}`);
-  }
-
-  let myBlob = await response.blob();
-
-  let objectURL = URL.createObjectURL(myBlob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-}
-
-myFetch()
-.catch(e => {
-  console.log('Il y a eu un problème avec votre opération de récupération : ' + e.message);
-});
-```
-
-Cela rend le code beaucoup plus simple et plus facile à comprendre — plus de blocs `.then()` partout !
-
-Étant donné qu'un mot-clé `async` transforme une fonction en promesse, vous pourriez remanier votre code pour utiliser une approche hybride de promesses et de `await`, en faisant sortir la seconde moitié de la fonction dans un nouveau bloc pour la rendre plus flexible :
-
-```js
-async function myFetch() {
-  let response = await fetch('coffee.jpg');
-  if (!response.ok) {
-    throw new Error(`Erreur HTTP ! statut : ${response.status}`);
-  }
-  return await response.blob();
-
-}
-
-myFetch().then((blob) => {
-  let objectURL = URL.createObjectURL(blob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-}).catch(e => console.log(e));
-```
-
-Vous pouvez essayer de taper vous-même l'exemple, ou d'exécuter notre [exemple en direct](https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await.html) (voir aussi le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await.html)).
-
-### Mais comment est-ce que cela fonctionne ?
-
-Vous remarquerez que nous avons enveloppé le code à l'intérieur d'une fonction, et que nous avons inclus le mot-clé `async` avant le mot-clé `function`. C'est nécessaire - vous devez créer une fonction async pour définir un bloc de code dans lequel vous exécuterez votre code async ; comme nous l'avons dit précédemment, `await` ne fonctionne qu'à l'intérieur de fonctions async.
-
-À l'intérieur de la définition de la fonction `myFetch()`, vous pouvez voir que le code ressemble beaucoup à la version précédente de la promesse, mais il y a quelques différences. Au lieu de devoir enchaîner un bloc `.then()` à la fin de chaque méthode basée sur une promesse, il suffit d'ajouter un mot-clé `await` avant l'appel de la méthode, puis d'affecter le résultat à une variable. Le mot-clé `await` fait en sorte que le moteur d'exécution JavaScript mette votre code en pause sur cette ligne, ne permettant pas à d'autres codes de s'exécuter entre-temps jusqu'à ce que l'appel de fonction asynchrone ait retourné son résultat - très utile si le code suivant dépend de ce résultat !
-
-Une fois que c'est terminé, votre code continue à s'exécuter à partir de la ligne suivante. Par exemple :
-
-```js
-let response = await fetch('coffee.jpg');
-```
-
-La réponse retournée par la promesse `fetch()` remplie est affectée à la variable `response` lorsque cette réponse devient disponible, et le parseur fait une pause sur cette ligne jusqu'à ce que cela se produise. Une fois que la réponse est disponible, le parseur passe à la ligne suivante, qui crée un [`Blob`](/fr/docs/Web/API/Blob) à partir de celle-ci. Cette ligne invoque également une méthode async basée sur les promesses, nous utilisons donc `await` ici aussi. Lorsque le résultat de l'opération revient, nous le retournons hors de la fonction `myFetch()`.
-
-Cela signifie que lorsque nous appelons la fonction `myFetch()`, elle retourne une promesse, de sorte que nous pouvons enchaîner un `.then()` à la fin de celle-ci à l'intérieur duquel nous gérons l'affichage du blob à l'écran.
-
-Vous vous dites probablement déjà « c'est vraiment cool ! », et vous avez raison — moins de blocs `.then()` pour envelopper le code, et cela ressemble surtout à du code synchrone, donc c'est vraiment intuitif.
-
-### Ajout de la gestion des erreurs
-
-Si vous voulez ajouter la gestion des erreurs, vous avez plusieurs options.
-
-Vous pouvez utiliser une structure synchrone [`try...catch`](/fr/docs/Web/JavaScript/Reference/Statements/try...catch) avec `async`/`await`. Cet exemple développe la première version du code que nous avons montré ci-dessus :
-
-```js
-async function myFetch() {
-  try {
-    let response = await fetch('coffee.jpg');
-
-    if (!response.ok) {
-      throw new Error(`Erreur HTTP ! statut : ${response.status}`);
-    }
-    let myBlob = await response.blob();
-    let objectURL = URL.createObjectURL(myBlob);
-    let image = document.createElement('img');
-    image.src = objectURL;
-    document.body.appendChild(image);
-
-  } catch(e) {
-    console.log(e);
-  }
-}
-
-myFetch();
-```
-
-Le bloc `catch() {}` reçoit un objet d'erreur, que nous avons appelé `e` ; nous pouvons maintenant l'enregistrer dans la console, et il nous donnera un message d'erreur détaillé montrant où dans le code l'erreur a été lancée.
-
-Si vous vouliez utiliser la deuxième version (remaniée) du code que nous avons montré ci-dessus, il serait préférable de continuer l'approche hybride et d'enchaîner un bloc `.catch()` à la fin de l'appel `.then()`, comme ceci :
-
-```js
-async function myFetch() {
-  let response = await fetch('coffee.jpg');
-  if (!response.ok) {
-    throw new Error(`Erreur HTTP ! statut : ${response.status}`);
-  }
-  return await response.blob();
-
-}
-
-myFetch().then((blob) => {
-  let objectURL = URL.createObjectURL(blob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-})
-.catch((e) =>
-  console.log(e)
-);
-```
-
-En effet, le bloc `.catch()` attrapera les erreurs survenant à la fois dans l'appel de fonction asynchrone et dans la chaîne de promesses. Si vous utilisiez le bloc `try`/`catch` ici, vous pourriez toujours obtenir des erreurs non gérées dans la fonction `myFetch()` lorsqu'elle est appelée.
-
-Vous pouvez trouver ces deux exemples sur GitHub :
-
-- [simple-fetch-async-await-try-catch.html](https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html))
-- [simple-fetch-async-await-promise-catch.html](https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html))
-
-## En attente d'un Promise.all()
-
-`async`/`await` est construit au-dessus de [Promises](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise), il est donc compatible avec toutes les fonctionnalités offertes par les promesses. Cela inclut [`Promise.all()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) — vous pouvez tout à fait attendre un appel `Promise.all()` pour obtenir tous les résultats retournés dans une variable d'une manière qui ressemble à du simple code synchrone. Encore une fois, revenons à [un exemple que nous avons vu dans notre article précédent](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html). Gardez-le ouvert dans un onglet séparé afin de pouvoir le comparer avec la nouvelle version présentée ci-dessous.
-
-En convertissant cela en `async`/`await` (voir la [démo live](https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-all-async-await.html) et le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-all-async-await.html)), cela ressemble maintenant à ceci :
-
-```js
-async function fetchAndDecode(url, type) {
-  let response = await fetch(url);
-
-  let content;
-
-  if (!response.ok) {
-    throw new Error(`Erreur HTTP ! statut : ${response.status}`);
-  } else {
-    if(type === 'blob') {
-      content = await response.blob();
-    } else if(type === 'text') {
-      content = await response.text();
-    }
-  }
-
-  return content;
-}
-
-async function displayContent() {
-  let coffee = fetchAndDecode('coffee.jpg', 'blob');
-  let tea = fetchAndDecode('tea.jpg', 'blob');
-  let description = fetchAndDecode('description.txt', 'text');
-
-  let values = await Promise.all([coffee, tea, description]);
-
-  let objectURL1 = URL.createObjectURL(values[0]);
-  let objectURL2 = URL.createObjectURL(values[1]);
-  let descText = values[2];
-
-  let image1 = document.createElement('img');
-  let image2 = document.createElement('img');
-  image1.src = objectURL1;
-  image2.src = objectURL2;
-  document.body.appendChild(image1);
-  document.body.appendChild(image2);
-
-  let para = document.createElement('p');
-  para.textContent = descText;
-  document.body.appendChild(para);
-}
-
-displayContent()
-.catch((e) =>
-  console.log(e)
-);
-```
-
-Vous verrez que la fonction `fetchAndDecode()` a été convertie facilement en fonction asynchrone avec seulement quelques modifications. Voir la ligne `Promise.all()` :
-
-```js
-let values = await Promise.all([coffee, tea, description]);
-```
-
-En utilisant `await` ici, nous sommes en mesure d'obtenir tous les résultats des trois promesses retournées dans le tableau `values`, quand ils sont tous disponibles, d'une manière qui ressemble beaucoup à du code synchrone. Nous avons dû envelopper tout le code dans une nouvelle fonction asynchrone, `displayContent()`, et nous n'avons pas réduit le code de beaucoup de lignes, mais être capable de déplacer la majeure partie du code hors du bloc `.then()` fournit une simplification agréable et utile, nous laissant avec un programme beaucoup plus lisible.
-
-Pour la gestion des erreurs, nous avons inclus un bloc `.catch()` sur notre appel `displayContent()` ; cela permettra de gérer les erreurs survenant dans les deux fonctions.
-
-> **Note :** Il est également possible d'utiliser un bloc [`finally`](/fr/docs/Web/JavaScript/Reference/Statements/try...catch#the_finally_clause) au sein d'une fonction asynchrone, à la place d'un bloc asynchrone [`.finally()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally), pour montrer un état final sur le déroulement de l'opération — vous pouvez voir cela en action dans notre [exemple en direct](https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-finally-async-await.html) (voir aussi le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-finally-async-await.html)).
-
-## Gérer les ralentissements potentiellement causés par async/await
-
-Il est vraiment utile de connaître `async`/`await`, mais il y a quelques inconvénients à prendre en compte.
-
-`async`/`await` donne à votre code une apparence synchrone, et d'une certaine manière, il le fait se comporter de manière plus synchrone. Le mot-clé `await` bloque l'exécution de tout le code qui le suit jusqu'à ce que la promesse se réalise, exactement comme dans le cas d'une opération synchrone. Il permet certes aux autres tâches de continuer à s'exécuter entre-temps, mais le code attendu est bloqué.
-
-```js
-async function makeResult(items) {
-  let newArr = [];
-  for(let i=0; i < items.length; i++) {
-    newArr.push('word_'+i);
-  }
-  return newArr;
-}
-
-async function getResult() {
-  let result = await makeResult(items); // Bloqué sur cette ligne
-  useThatResult(result); // Pas exécuté tant que makeResult() n'a pas fini
-}
-```
-
-Cela signifie que votre code pourrait être ralenti par un nombre important de promesses attendues se produisant directement les unes après les autres. Chaque `await` attendra que la précédente se termine, alors qu'en réalité ce que vous voulez, c'est que les promesses commencent à être traitées simultanément, comme elles le feraient si nous n'utilisions pas `async`/`await`.
-
-Il existe un modèle qui peut atténuer ce problème - déclencher tous les processus de promesse en stockant les objets `Promise` dans des variables, et en les attendant tous ensuite. Jetons un coup d'œil à quelques exemples qui prouvent le concept.
-
-Nous disposons de deux exemples - [slow-async-await.html](https://mdn.github.io/learning-area/javascript/asynchronous/async-await/slow-async-await.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/slow-async-await.html)) et [fast-async-await.html](https://mdn.github.io/learning-area/javascript/asynchronous/async-await/fast-async-await.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/fast-async-await.html)). Les deux commencent par une fonction promise personnalisée qui simule un processus asynchrone avec un appel [`setTimeout()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) :
-
-```js
-function timeoutPromise(interval) {
-  return new Promise((resolve, reject) => {
-    setTimeout(function(){
-      resolve("fait");
-    }, interval);
-  });
-};
-```
-
-Ensuite, chacun comprend une fonction asynchrone `timeTest()` qui attend trois appels `timeoutPromise()` :
-
-```js
-async function timeTest() {
-  ...
-}
-```
-
-Chacune d'entre elles se termine en enregistrant une heure de début, en voyant combien de temps la promesse `timeTest()` met à se réaliser, puis en enregistrant une heure de fin et en indiquant combien de temps l'opération a pris au total :
-
-```js
-let startTime = Date.now();
-timeTest().then(() => {
-  let finishTime = Date.now();
-  let timeTaken = finishTime - startTime;
-  console.log("Temps pris en millisecondes : " + timeTaken);
-})
-```
-
-C'est la fonction `timeTest()` qui diffère dans chaque cas.
-
-Dans l'exemple `slow-async-await.html`, `timeTest()` ressemble à ceci :
-
-```js
-async function timeTest() {
-  await timeoutPromise(3000);
-  await timeoutPromise(3000);
-  await timeoutPromise(3000);
-}
-```
-
-Ici, nous attendons les trois appels `timeoutPromise()` directement, en faisant en sorte que chacun d'eux alerte pendant 3 secondes. Chaque appel suivant est forcé d'attendre jusqu'à ce que le dernier soit terminé - si vous exécutez le premier exemple, vous verrez la boîte d'alerte signaler une durée d'exécution totale d'environ 9 secondes.
-
-Dans l'exemple `fast-async-await.html`, `timeTest()` ressemble à ceci :
-
-```js
-async function timeTest() {
-  const timeoutPromise1 = timeoutPromise(3000);
-  const timeoutPromise2 = timeoutPromise(3000);
-  const timeoutPromise3 = timeoutPromise(3000);
-
-  await timeoutPromise1;
-  await timeoutPromise2;
-  await timeoutPromise3;
-}
-```
-
-Ici, nous stockons les trois objets `Promise` dans des variables, ce qui a pour effet de déclencher leurs processus associés, tous exécutés simultanément.
-
-Ensuite, nous attendons leurs résultats - parce que les promesses ont toutes commencé à être traitées essentiellement au même moment, les promesses se réaliseront toutes en même temps ; lorsque vous exécuterez le deuxième exemple, vous verrez la boîte d'alerte indiquant un temps d'exécution total d'un peu plus de 3 secondes !
-
-### Gestion des erreurs
-
-La stratégie précédente a un défaut : on pourrait avoir des erreurs qui ne seraient pas gérées.
-
-Mettons à jour les exemples précédents en ajoutant une promesse rejetée et une instruction `catch` à la fin :
-
-```js
-function timeoutPromiseResolve(interval) {
-  return new Promise((resolve, reject) => {
-    setTimeout(function(){
-      resolve("Succès");
-    }, interval);
-  });
-};
-
-function timeoutPromiseReject(interval) {
-  return new Promise((resolve, reject) => {
-    setTimeout(function(){
-      reject("Erreur");
-    }, interval);
-  });
-};
-
-async function timeTest() {
-  await timeoutPromiseResolve(5000);
-  await timeoutPromiseReject(2000);
-  await timeoutPromiseResolve(3000);
-}
-
-let startTime = Date.now();
-timeTest().then(() => {})
-.catch(e => {
-  console.log(e);
-  let finishTime = Date.now();
-  let timeTaken = finishTime - startTime;
-  console.log("Temps écoulé en millisecondes : " + timeTaken);
-})
-```
-
-Dans l'exemple qui précède, l'erreur est gérée correctement et le message dans la console apparaît après environ 7 secondes.
-
-Voyons maintenant la deuxième approche :
-
-```js
-function timeoutPromiseResolve(interval) {
-  return new Promise((resolve, reject) => {
-    setTimeout(function(){
-      resolve("Succès");
-    }, interval);
-  });
-};
-
-function timeoutPromiseReject(interval) {
-  return new Promise((resolve, reject) => {
-    setTimeout(function(){
-      reject("Erreur");
-    }, interval);
-  });
-};
-
-async function timeTest() {
-  const timeoutPromiseResolve1 = timeoutPromiseResolve(5000);
-  const timeoutPromiseReject2 = timeoutPromiseReject(2000);
-  const timeoutPromiseResolve3 = timeoutPromiseResolve(3000);
-
-  await timeoutPromiseResolve1;
-  await timeoutPromiseReject2;
-  await timeoutPromiseResolve3;
-}
-
-let startTime = Date.now();
-timeTest().then(() => {
-}).catch(e => {
-  console.log(e);
-  let finishTime = Date.now();
-  let timeTaken = finishTime - startTime;
-  console.log("Temps écoulé en millisecondes : " + timeTaken);
-})
-```
-
-Dans cet exemple, on a une erreur qui n'est pas gérée dans la console (après 2 secondes) et le message apparaît après environ 5 secondes.
-
-Pour démarrer les promesses en parallèles et intercepter les erreurs correctement, on pourrait utiliser `Promise.all()` comme vu auparavant :
-
-```js
-function timeoutPromiseResolve(interval) {
-  return new Promise((resolve, reject) => {
-    setTimeout(function(){
-      resolve("Succès");
-    }, interval);
-  });
-};
-
-function timeoutPromiseReject(interval) {
-  return new Promise((resolve, reject) => {
-    setTimeout(function(){
-      reject("Erreur");
-    }, interval);
-  });
-};
-
-async function timeTest() {
-  const timeoutPromiseResolve1 = timeoutPromiseResolve(5000);
-  const timeoutPromiseReject2 = timeoutPromiseReject(2000);
-  const timeoutPromiseResolve3 = timeoutPromiseResolve(3000);
-
-  const results = await Promise.all([timeoutPromiseResolve1, timeoutPromiseReject2, timeoutPromiseResolve3]);
-  return results;
-}
-
-let startTime = Date.now();
-timeTest().then(() => {
-}).catch(e => {
-  console.log(e);
-  let finishTime = Date.now();
-  let timeTaken = finishTime - startTime;
-  console.log("Temps écoulé en millisecondes : " + timeTaken);
-})
-```
-
-Dans cet exemple, l'erreur est gérée correctement après 2 secondes et on a le message dans la console après environ 2 secondes.
-
-La méthode `Promise.all()` rejète lorsqu'au moins un de ses promesses d'entrée rejète. Si on veut que toutes les promesses soient résolues (correctement ou avec un rejet), on pourra utiliser la méthode [`Promise.allSettled()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled) à la place.
-
-## Méthodes de classe async/await
-
-Une dernière remarque avant de poursuivre, vous pouvez même ajouter `async` devant les méthodes de classe/objet pour qu'elles renvoient des promesses, et `await` des promesses à l'intérieur de celles-ci. Jetez un œil au [code de la classe ES que nous avons vu dans notre article sur le JavaScript orienté objet](/fr/docs/Learn/JavaScript/Objects/Inheritance#ecmascript_2015_classes), puis regardez notre version modifiée avec une méthode `async` :
-
-```js
-class Personne {
-  constructor(prenom, nomFamille, age, genre, interets) {
-    this.nom = {
-      prenom,
-      nomFamille
-    };
-    this.age = age;
-    this.genre = genre;
-    this.interets = interets;
-  }
-
-  async salutation() {
-    return await Promise.resolve(`Bonjour ! Je suis ${this.nom.prenom}`);
-  };
-
-  aurevoir() {
-    console.log(`${this.nom.prenom} a quitté le bâtiment. À une prochaine fois !`);
-  };
-}
-
-let han = new Personne('Han', 'Solo', 25, 'homme', ['Contrebande']);
-```
-
-La méthode de la première classe peut maintenant être utilisée de la manière suivante :
-
-```js
-han.salutation().then(console.log);
-```
-
-## Prise en charge des navigateurs
-
-L'une des considérations à prendre en compte pour décider d'utiliser `async`/`await`est la prise en charge des anciens navigateurs. Ces fonctionnalités sont disponibles dans les versions modernes de la plupart des navigateurs, tout comme les promesses ; les principaux problèmes de prise en charge concernent Internet Explorer et Opera Mini.
-
-Si vous souhaitez utiliser `async`/`await` mais que vous êtes préoccupé par la prise en charge de navigateurs plus anciens, vous pouvez envisager d'utiliser la bibliothèque [BabelJS](https://babeljs.io/). Cela vous permet d'écrire vos applications en utilisant les dernières versions de JavaScript et de laisser Babel déterminer les modifications éventuellement nécessaires pour les navigateurs de vos utilisateurs. Lorsque vous rencontrez un navigateur qui ne supporte pas async/await, le _polyfill_ « prothèse d'émulation » de Babel peut automatiquement fournir des _fallbacks_ « solutions de secours » qui fonctionnent dans les anciens navigateurs.
-
-## Conclusion
-
-Et voilà, `async`/`await` offre un moyen agréable et simplifié d'écrire du code asynchrone, plus facile à lire et à maintenir. Même si la prise en charge par les navigateurs est plus limitée que d'autres mécanismes de code asynchrone à l'heure où nous écrivons ces lignes, cela vaut la peine de l'apprendre et d'envisager de l'utiliser, maintenant et à l'avenir.
-
-{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}
-
-## Dans ce module
-
-- [Concepts généraux de programmation asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Concepts)
-- [Introduction au JavaScript asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Introducing)
-- [JavaScript asynchrone coopératif : Délais et intervalles](/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals)
-- [Gérer les opérations asynchrones avec élégance grâce aux Promesses](/fr/docs/Learn/JavaScript/Asynchronous/Promises)
-- [Faciliter la programmation asynchrone avec async et await](/fr/docs/Learn/JavaScript/Asynchronous/Async_await)
-- [Choisir la bonne approche](/fr/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach)
diff --git a/files/fr/learn/javascript/asynchronous/choosing_the_right_approach/index.md b/files/fr/learn/javascript/asynchronous/choosing_the_right_approach/index.md
deleted file mode 100644
index 679212748d..0000000000
--- a/files/fr/learn/javascript/asynchronous/choosing_the_right_approach/index.md
+++ /dev/null
@@ -1,439 +0,0 @@
----
-title: Choisir la bonne approche
-slug: Learn/JavaScript/Asynchronous/Choosing_the_right_approach
-tags:
-  - Beginner
-  - Intervals
-  - JavaScript
-  - Learn
-  - Optimize
-  - Promises
-  - async
-  - asynchronous
-  - await
-  - requestAnimationFrame
-  - setInterval
-  - setTimeout
-  - timeouts
-translation_of: Learn/JavaScript/Asynchronous/Choosing_the_right_approach
----
-{{LearnSidebar}}{{PreviousMenu("Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}
-
-Pour terminer ce module, nous vous proposons une brève discussion sur les différentes techniques et fonctionnalités asynchrones abordées tout au long de ce module, en examinant laquelle de ces techniques est la plus pertinente en fonction de la situation ainsi que des recommandations et des rappels des pièges courants le cas échéant.
-
-<table class="standard-table">
-  <tbody>
-    <tr>
-      <th scope="row">Prérequis :</th>
-      <td>
-        Connaissances informatiques de base, une compréhension raisonnable des
-        principes fondamentaux de JavaScript.
-      </td>
-    </tr>
-    <tr>
-      <th scope="row">Objectif :</th>
-      <td>
-        Être capable de faire un choix judicieux quant à l'utilisation de
-        différentes techniques de programmation asynchrone.
-      </td>
-    </tr>
-  </tbody>
-</table>
-
-## Fonctions de rappels (callbacks) asynchrones
-
-Généralement trouvé dans les API à l'ancienne, une fonction de rappel (ou _callback_ en anglais) implique qu'une fonction soit passée en paramètre à une autre fonction, qui est ensuite invoquée lorsqu'une opération asynchrone est terminée afin réaliser une opération avec le résultat. C'est la méthode qui précédait l'arrivée des promesses : elle n'est pas aussi efficace ou flexible. Ne l'utilisez que si nécessaire.
-
-| Opération unique retardée | Opération répétée       | Opérations séquentielles multiples | Opérations simultanées multiples |
-| ------------------------- | ----------------------- | ---------------------------------- | -------------------------------- |
-| Non                       | Oui (rappels récursifs) | Oui (rappels imbriqués)            | Non                              |
-
-### Exemple de code
-
-Un exemple qui charge une ressource via l'API [`XMLHttpRequest`](/fr/docs/Web/API/XMLHttpRequest) ([l'exécuter en direct](https://mdn.github.io/learning-area/javascript/asynchronous/introducing/xhr-async-callback.html), et [voir la source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/xhr-async-callback.html)) :
-
-```js
-function loadAsset(url, type, callback) {
-  let xhr = new XMLHttpRequest();
-  xhr.open('GET', url);
-  xhr.responseType = type;
-
-  xhr.onload = function() {
-    callback(xhr.response);
-  };
-
-  xhr.send();
-}
-
-function displayImage(blob) {
-  let objectURL = URL.createObjectURL(blob);
-
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-}
-
-loadAsset('coffee.jpg', 'blob', displayImage);
-```
-
-### Pièges
-
-- Les fonctions de rappels imbriquées peuvent être encombrantes et difficiles à lire (ce qu'on appelle parfois « _callback hell_ » en anglais).
-- Les fonctions de rappel pour les cas d'erreur doivent être appelés une fois pour chaque niveau d'imbrication, alors qu'avec les promesses, vous pouvez simplement utiliser un seul bloc `.catch()` pour gérer les erreurs de toute la chaîne.
-- Les fonctions de rappel asynchrones ne sont pas très élégantes.
-- Les fonctions de rappel passées en argument de promesses sont toujours appelés dans l'ordre strict où ils sont placés dans la file d'attente des événements ; les fonctions de rappel asynchrones ne le sont pas.
-- Les fonctions de rappel asynchrones perdent le contrôle total de la façon dont la fonction sera exécutée lorsqu'elle est transmise à une bibliothèque tierce.
-
-### Compatibilité des navigateurs
-
-Très bonne prise en charge générale, bien que la prise en charge exacte dans les différentes API dépende de l'API en question. Reportez-vous à la documentation de référence de l'API que vous utilisez pour obtenir des informations plus spécifiques.
-
-### Plus d'informations
-
-- [Introduction au JavaScript asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Introducing), en particulier les [Fonctions de rappels asynchrones](/fr/docs/Learn/JavaScript/Asynchronous/Introducing#async_callbacks)
-
-## setTimeout()
-
-[`setTimeout()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) est une méthode qui permet d'exécuter une fonction après l'écoulement d'un délai arbitraire.
-
-| Opération unique retardée | Opération répétée      | Opérations séquentielles multiples | Opérations simultanées multiples |
-| ------------------------- | ---------------------- | ---------------------------------- | -------------------------------- |
-| Oui                       | Oui (délais récursifs) | Oui (délais d'attente imbriqués)   | Non                              |
-
-### Exemple de code
-
-Ici, le navigateur attendra deux secondes avant d'exécuter la fonction anonyme, puis affichera le message dans la console ([voir son exécution en direct](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-settimeout.html), et [voir le code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-settimeout.html)) :
-
-```js
-let myGreeting = setTimeout(function() {
-  console.log('Bonjour, M. Univers !');
-}, 2000)
-```
-
-### Pièges
-
-Vous pouvez utiliser des appels récursifs à `setTimeout()` pour exécuter une fonction de manière répétée de façon similaire à `setInterval()`, en utilisant un code comme celui-ci :
-
-```js
-let i = 1;
-setTimeout(function run() {
-  console.log(i);
-  i++;
-
-  setTimeout(run, 100);
-}, 100);
-```
-
-Il existe une différence entre `setTimeout()` appelé récursivement et `setInterval()` :
-
-- Les récursions avec `setTimeout()` garantissent qu'au moins le temps spécifié (100ms dans cet exemple) s'écoulera entre les exécutions ; le code s'exécutera puis attendra 100 millisecondes avant de s'exécuter à nouveau. L'intervalle sera le même quelle que soit la durée d'exécution du code.
-- Avec `setInterval()`, l'intervalle que nous choisissons _inclut_ le temps d'exécution du code que nous voulons exécuter. Disons que le code prend 40 millisecondes pour s'exécuter — l'intervalle finit alors par n'être que de 60 millisecondes.
-
-Lorsque votre code a le potentiel de prendre plus de temps à s'exécuter que l'intervalle de temps que vous avez assigné, il est préférable d'utiliser `setTimeout()` récursivement - cela maintiendra l'intervalle de temps constant entre les exécutions, quelle que soit la durée d'exécution du code, et vous n'obtiendrez pas d'erreurs.
-
-### Compatibilité des navigateurs
-
-{{Compat("api.WindowOrWorkerGlobalScope.setTimeout")}}
-
-### Plus d'informations
-
-- [JavaScript asynchrone coopératif : Délais et intervalles](/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals), en particulier [`setTimeout()`](</fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals#settimeout()>)
-- Page de référence pour [`setTimeout()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout)
-
-## setInterval()
-
-[`setInterval()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setInterval) est une méthode qui permet d'exécuter une fonction de façon répétée avec des intervalles de temps donnés entre chaque exécution. Cette méthode n'est pas aussi efficace que [`requestAnimationFrame()`](/fr/docs/Web/API/Window/requestAnimationFrame), mais elle permet de choisir le rythme d'exécution.
-
-| Opération unique retardée | Opération répétée | Opérations séquentielles multiples         | Opérations simultanées multiples |
-| ------------------------- | ----------------- | ------------------------------------------ | -------------------------------- |
-| Non                       | Oui               | Non (à moins qu'elles ne soient les mêmes) | Non                              |
-
-### Exemple de code
-
-La fonction suivante crée un nouvel objet [`Date()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Date), en extrait une chaîne de temps à l'aide de [`toLocaleTimeString()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString), puis l'affiche dans l'interface utilisateur. Nous l'exécutons ensuite une fois par seconde à l'aide de `setInterval()`, créant l'effet d'une horloge numérique qui se met à jour une fois par seconde ([voir cela en direct](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-clock.html), et aussi [voir la source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html)) :
-
-```js
-function displayTime() {
-  let date = new Date();
-  let time = date.toLocaleTimeString();
-  document.getElementById('demo').textContent = time;
-}
-
-const createClock = setInterval(displayTime, 1000);
-```
-
-### Pièges
-
-- La fréquence d'exécution et d'affichage n'est pas optimisée pour le système sur lequel l'animation est exécutée, et peut être quelque peu inefficace. À moins que vous n'ayez besoin de choisir un framerate spécifique (plus lent), il est généralement préférable d'utiliser `requestAnimationFrame()`.
-
-### Compatibilité des navigateurs
-
-{{Compat("api.WindowOrWorkerGlobalScope.setInterval")}}
-
-### Plus d'informations
-
-- [JavaScript asynchrone coopératif : Délais et intervalles](/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals), en particulier [setInterval()](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setInterval)
-- Page de référence pour [setInterval()](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setInterval)
-
-## requestAnimationFrame()
-
-[`requestAnimationFrame()`](/fr/docs/Web/API/Window/requestAnimationFrame) est une méthode qui vous permet d'exécuter une fonction de manière répétée, et efficace, à la meilleure fréquence de rafraîchissement disponible compte tenu du navigateur/système actuel. Vous devriez, dans la mesure du possible, utiliser cette méthode au lieu de `setInterval()`/`setTimeout()` récursif, sauf si vous avez besoin d'une fréquence de rafraîchissement spécifique.
-
-| Opération unique retardée | Opération répétée | Opérations séquentielles multiples  | Opérations simultanées multiples |
-| ------------------------- | ----------------- | ----------------------------------- | -------------------------------- |
-| Non                       | Oui               | Non (à moins que ce soit les mêmes) | Non                              |
-
-### Exemple de code
-
-Une toupie animée simple ; vous pouvez trouver cet [exemple en direct sur GitHub](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html)) :
-
-```js
-const spinner = document.querySelector('div');
-let rotateCount = 0;
-let startTime = null;
-let rAF;
-
-function draw(timestamp) {
-  if(!startTime) {
-    startTime = timestamp;
-  }
-
-  rotateCount = (timestamp - startTime) / 3;
-
-  if(rotateCount > 359) {
-    rotateCount %= 360;
-  }
-
-  spinner.style.transform = 'rotate(' + rotateCount + 'deg)';
-
-  rAF = requestAnimationFrame(draw);
-}
-
-draw();
-```
-
-### Pièges
-
-- Vous ne pouvez pas choisir une fréquence d'images spécifique avec `requestAnimationFrame()`. Si vous devez exécuter votre animation à un _framerate_ plus lent, vous devrez utiliser `setInterval()` ou `setTimeout()` récursif.
-
-### Compatibilité des navigateurs
-
-{{Compat("api.Window.requestAnimationFrame")}}
-
-### Plus d'informations
-
-- [JavaScript asynchrone coopératif : Délais et intervalles](/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals), en particulier [`requestAnimationFrame()`](</fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals#requestanimationframe()>)
-- Page de référence pour [`requestAnimationFrame()`](/fr/docs/Web/API/Window/requestAnimationFrame)
-
-## Promises (Promesses)
-
-[Les promesses](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) sont une fonctionnalité JavaScript qui permet d'exécuter des opérations asynchrones et d'attendre qu'elles soient définitivement terminées avant d'exécuter une autre opération en fonction de son résultat. Les promesses sont la colonne vertébrale du JavaScript asynchrone moderne.
-
-| Opération unique retardée | Opération répétée | Opérations séquentielles multiples | Opérations simultanées multiples |
-| ------------------------- | ----------------- | ---------------------------------- | -------------------------------- |
-| Non                       | Non               | Oui                                | Voir `Promise.all()`, en dessous |
-
-### Exemple de code
-
-Le code suivant va chercher une image sur le serveur et l'affiche à l'intérieur d'un élément [`<img>`](/fr/docs/Web/HTML/Element/Img) ; [voyez-le aussi en direct](https://mdn.github.io/learning-area/javascript/asynchronous/promises/simple-fetch-chained.html), et voyez aussi [le code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/simple-fetch-chained.html) :
-
-```js
-fetch('coffee.jpg')
-.then(response => response.blob())
-.then(myBlob => {
-  let objectURL = URL.createObjectURL(myBlob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-})
-.catch(e => {
-  console.log('Il y a eu un problème avec votre opération de récupération : ' + e.message);
-});
-```
-
-### Pièges
-
-Les chaînes de promesses peuvent être complexes et difficiles à analyser. Si vous imbriquez un certain nombre de promesses, vous pouvez vous retrouver avec des problèmes similaires à l'enfer des rappels. Par exemple :
-
-```js
-remotedb.allDocs({
-  include_docs: true,
-  attachments: true
-}).then(function (result) {
-  let docs = result.rows;
-  docs.forEach(function(element) {
-    localdb.put(element.doc).then(function(response) {
-      alert("Un document extrait avec un id " + element.doc._id + " et ajouté à la base de données locale.");
-    }).catch(function (err) {
-      if (err.name == 'conflict') {
-        localdb.get(element.doc._id).then(function (resp) {
-          localdb.remove(resp._id, resp._rev).then(function (resp) {
-// et cetera...
-```
-
-Il est préférable d'utiliser la puissance de chaînage des promesses pour aller avec une structure plus plate et plus facile à analyser :
-
-```js
-remotedb.allDocs(...).then(function (resultOfAllDocs) {
-  return localdb.put(...);
-}).then(function (resultOfPut) {
-  return localdb.get(...);
-}).then(function (resultOfGet) {
-  return localdb.put(...);
-}).catch(function (err) {
-  console.log(err);
-});
-```
-
-ou encore :
-
-```js
-remotedb.allDocs(...)
-.then(resultOfAllDocs => {
-  return localdb.put(...);
-})
-.then(resultOfPut => {
-  return localdb.get(...);
-})
-.then(resultOfGet => {
-  return localdb.put(...);
-})
-.catch(err => console.log(err));
-```
-
-Cela couvre une grande partie des éléments de base. Pour un traitement beaucoup plus complet, voir l'excellent article [Nous avons un problème avec les promesses](https://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html) (en), par Nolan Lawson.
-
-### Compatibilité des navigateurs
-
-{{Compat("javascript.builtins.Promise")}}
-
-### Plus d'informations
-
-- [Gérer les opérations asynchrones avec élégance grâce aux Promesses](/fr/docs/Learn/JavaScript/Asynchronous/Promises)
-- [Utiliser les promesses](/fr/docs/Web/JavaScript/Guide/Using_promises)
-- Page de référence pour [`Promise`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise)
-
-## Promise.all()
-
-Une fonction JavaScript qui vous permet d'attendre que plusieurs promesses se terminent avant d'exécuter une autre opération basée sur les résultats de toutes les autres promesses.
-
-| Opération unique retardée | Opération répétée | Opérations séquentielles multiples | Opérations simultanées multiples |
-| ------------------------- | ----------------- | ---------------------------------- | -------------------------------- |
-| Non                       | Non               | Non                                | Oui                              |
-
-### Exemple de code
-
-L'exemple suivant va chercher plusieurs ressources sur le serveur, et utilise `Promise.all()` pour attendre qu'elles soient toutes disponibles avant de les afficher toutes — [le voir fonctionner](https://mdn.github.io/learning-area/javascript/asynchronous/promises/promise-all.html), et voir son [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html) :
-
-```js
-function fetchAndDecode(url, type) {
-  // Retourner la promesse de niveau supérieur, de sorte que le résultat
-  // de l'ensemble de la chaîne est retourné hors de la fonction
-  return fetch(url).then(response => {
-    // Selon le type de fichier recherché, utilisez la fonction appropriée pour décoder son contenu
-    if(type === 'blob') {
-      return response.blob();
-    } else if(type === 'text') {
-      return response.text();
-    }
-  })
-  .catch(e => {
-    console.log(`Il y a eu un problème avec votre opération de récupération de la ressource "${url}" : ` + e.message);
-  });
-}
-
-// Appeler la méthode fetchAndDecode() pour récupérer les images et le texte
-// et stocker leurs promesses dans des variables
-let coffee = fetchAndDecode('coffee.jpg', 'blob');
-let tea = fetchAndDecode('tea.jpg', 'blob');
-let description = fetchAndDecode('description.txt', 'text');
-
-// Utiliser Promise.all() pour exécuter le code uniquement lorsque
-// les trois appels de fonction ont été résolus
-Promise.all([coffee, tea, description]).then(values => {
-  console.log(values);
-  // Stocker chaque valeur retournée par les promesses dans des variables séparées ;
-  // créer des URL d'objets à partir des blobs.
-  let objectURL1 = URL.createObjectURL(values[0]);
-  let objectURL2 = URL.createObjectURL(values[1]);
-  let descText = values[2];
-
-  // Afficher les images dans les éléments <img>
-  let image1 = document.createElement('img');
-  let image2 = document.createElement('img');
-  image1.src = objectURL1;
-  image2.src = objectURL2;
-  document.body.appendChild(image1);
-  document.body.appendChild(image2);
-
-  // Afficher le texte d'un paragraphe
-  let para = document.createElement('p');
-  para.textContent = descText;
-  document.body.appendChild(para);
-});
-```
-
-### Pièges
-
-- Si `Promesse.all()` est rejeté, alors une ou plusieurs des promesses que vous lui fournissez dans son paramètre de tableau doivent être rejetées, ou pourraient ne pas retourner de promesses du tout. Vous devez vérifier chacune d'entre elles pour voir ce qu'elles ont retourné.
-
-### Compatibilité des navigateurs
-
-{{Compat("javascript.builtins.Promise.all")}}
-
-### Plus d'informations
-
-- [Gérer les opérations asynchrones avec élégance grâce aux Promesses](/fr/docs/Learn/JavaScript/Asynchronous/Promises#running_code_in_response_to_multiple_promises_fulfilling)
-- Page de référence pour [`Promise.all()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/all)
-
-## async/await
-
-Un outil syntaxique construit sur les promesses qui vous permet d'exécuter des opérations asynchrones en utilisant une syntaxe qui ressemble plus à l'écriture de code de rappel synchrone.
-
-| Opération unique retardée | Opération répétée | Opérations séquentielles multiples | Opérations simultanées multiples          |
-| ------------------------- | ----------------- | ---------------------------------- | ----------------------------------------- |
-| Non                       | Non               | Oui                                | Oui (en combinaison avec `Promise.all()`) |
-
-### Exemple de code
-
-L'exemple suivant est un remaniement de l'exemple simple de promesse que nous avons vu précédemment, qui récupère et affiche une image, écrit à l'aide d'async/await ([voir en direct](https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-refactored-fetch.html), et voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-refactored-fetch.html)) :
-
-```js
-async function myFetch() {
-  let response = await fetch('coffee.jpg');
-  let myBlob = await response.blob();
-
-  let objectURL = URL.createObjectURL(myBlob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-}
-
-myFetch();
-```
-
-### Pièges
-
-- Vous ne pouvez pas utiliser l'opérateur `await` à l'intérieur d'une fonction non-`async`, ou dans le contexte de haut niveau de votre code. Cela peut parfois entraîner la création d'une fonction encapsulante supplémentaire, ce qui peut être légèrement frustrant dans certaines circonstances. Mais cela en vaut la peine la plupart du temps.
-- Le support des navigateurs pour `async`/`await` n'est pas aussi bon que celui des promesses. Si vous souhaitez utiliser `async`/`await` mais que vous êtes préoccupé par la prise en charge de navigateurs plus anciens, vous pouvez envisager d'utiliser la bibliothèque [BabelJS](https://babeljs.io/) — cela vous permet d'écrire vos applications en utilisant le JavaScript le plus récent et de laisser Babel déterminer les modifications éventuellement nécessaires pour les navigateurs de vos utilisateurs.
-
-### Compatibilité des navigateurs
-
-{{Compat("javascript.statements.async_function")}}
-
-### Plus d'informations
-
-- [Faciliter la programmation asynchrone avec `async` et `await`](/fr/docs/Learn/JavaScript/Asynchronous/Async_await)
-- Page de référence pour [les fonctions asynchrones](/fr/docs/Web/JavaScript/Reference/Statements/async_function)
-- Page de référence pour l'opérateur [await](/fr/docs/Web/JavaScript/Reference/Operators/await)
-
-{{PreviousMenu("Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}
-
-## Dans ce module
-
-- [Concepts généraux de programmation asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Concepts)
-- [Introduction au JavaScript asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Introducing)
-- [JavaScript asynchrone coopératif : Délais et intervalles](/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals)
-- [Gérer les opérations asynchrones avec élégance grâce aux Promesses](/fr/docs/Learn/JavaScript/Asynchronous/Promises)
-- [Faciliter la programmation asynchrone avec `async` et `await`](/fr/docs/Learn/JavaScript/Asynchronous/Async_await)
-- [Choisir la bonne approche](/fr/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach)
diff --git a/files/fr/learn/javascript/asynchronous/concepts/index.md b/files/fr/learn/javascript/asynchronous/concepts/index.md
deleted file mode 100644
index 03dc27feaf..0000000000
--- a/files/fr/learn/javascript/asynchronous/concepts/index.md
+++ /dev/null
@@ -1,167 +0,0 @@
----
-title: Concepts généraux de programmation asynchrone
-slug: Learn/JavaScript/Asynchronous/Concepts
-tags:
-  - JavaScript
-  - Learn
-  - Promises
-  - Threads
-  - asynchronous
-  - blocking
-translation_of: Learn/JavaScript/Asynchronous/Concepts
----
-{{LearnSidebar}}{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}}
-
-Dans cet article, nous allons passer en revue un certain nombre de concepts importants relatifs à la programmation asynchrone et à la façon dont elle se présente dans les navigateurs web et JavaScript. Vous devriez comprendre ces concepts avant de travailler sur les autres articles du module.
-
-<table class="standard-table">
-  <tbody>
-    <tr>
-      <th scope="row">Prérequis :</th>
-      <td>
-        Connaissances informatiques de base, compréhension raisonnable des
-        principes fondamentaux de JavaScript.
-      </td>
-    </tr>
-    <tr>
-      <th scope="row">Objectif :</th>
-      <td>
-        Comprendre les concepts de base de la programmation asynchrone et la
-        façon dont elles se manifestent dans les navigateurs Web et dans
-        JavaScript.
-      </td>
-    </tr>
-  </tbody>
-</table>
-
-## Asynchrone ?
-
-Normalement, le code d'un programme donné se déroule sans interruption, une seule chose se produisant à la fois. Si une fonction dépend du résultat d'une autre fonction, elle doit attendre que l'autre fonction se termine et retourne sa réponse, et jusqu'à ce que cela se produise, le programme entier est essentiellement bloqué du point de vue de l'utilisateur.
-
-Les utilisatrices et utilisateurs de macOS, par exemple, le voient parfois avec le curseur rotatif de couleur arc-en-ciel (ou « ballon de plage », comme on l'appelle souvent). Ce curseur est la façon dont le système d'exploitation dit "le programme que vous utilisez actuellement a dû s'arrêter et attendre que quelque chose se termine, et cela prend tellement de temps que je craignais que vous vous demandiez ce qui se passe".
-
-![Spinner multicolore pour macOS avec ballon de plage.](beachball.jpg)
-
-C'est une expérience frustrante qui n'est pas une bonne utilisation de la puissance de traitement de l'ordinateur, surtout à une époque où les ordinateurs disposent de plusieurs cœurs de processeur. Il est inutile de rester assis à attendre quelque chose alors que vous pouvez laisser une tâche se dérouler sur un autre cœur de processeur et être averti quand elle a terminé. Cela vous permet d'effectuer d'autres travaux en même temps, ce qui est la base de la **programmation asynchrone**. C'est à l'environnement de programmation que vous utilisez (les navigateurs web, dans le cas du développement web) de vous fournir des API qui vous permettent d'exécuter de telles tâches de manière asynchrone.
-
-## Code bloquant
-
-Les techniques asynchrones sont très utiles, notamment dans la programmation web. Lorsqu'une application web s'exécute dans un navigateur et qu'elle exécute un morceau de code considérable sans rendre le contrôle au navigateur, ce dernier peut sembler figé. C'est ce qu'on appelle du code **bloquant** ; le navigateur est incapable de continuer à traiter les entrées de l'utilisateur et d'effectuer d'autres tâches jusqu'à ce que l'application web rende le contrôle du processeur.
-
-Examinons quelques exemples qui montrent ce que nous entendons par blocage.
-
-Dans notre exemple [simple-sync.html](https://github.com/mdn/learning-area/tree/master/javascript/asynchronous/introducing/simple-sync.html) ([voir le fonctionnement en direct](https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync.html)), nous ajoutons un écouteur d'événement de clic à un bouton de sorte que, lorsqu'il est cliqué, il exécute une opération qui prend du temps (calcule 10 millions de dates puis enregistre la dernière dans la console) et ajoute ensuite un paragraphe au DOM :
-
-```js
-const btn = document.querySelector('button');
-btn.addEventListener('click', () => {
-  let myDate;
-  for(let i = 0; i < 10000000; i++) {
-    let date = new Date();
-    myDate = date;
-  }
-
-  console.log(myDate);
-
-  let pElem = document.createElement('p');
-  pElem.textContent = `Il s'agit d'un paragraphe nouvellement ajouté.`;
-  document.body.appendChild(pElem);
-});
-```
-
-Lorsque vous exécutez l'exemple, ouvrez votre console JavaScript, puis cliquez sur le bouton. Vous remarquerez que le paragraphe n'apparaît qu'une fois que le calcul des dates est terminé et que le message de la console a été enregistré. Le code s'exécute dans l'ordre où il apparaît dans la source, et la dernière opération ne s'exécute pas tant que la première n'est pas terminée.
-
-> **Note :** L'exemple précédent est très peu réaliste. Vous ne calculeriez jamais 10 millions de dates sur une véritable application web ! Il sert cependant à vous donner l'idée de base.
-
-Dans notre deuxième exemple, [simple-sync-ui-blocking.html](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-ui-blocking.html) ([voir en direct](https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-ui-blocking.html)), nous simulons quelque chose de légèrement plus réaliste que vous pourriez rencontrer sur une page réelle. Nous bloquons l'interactivité de l'utilisateur avec le rendu de l'interface utilisateur. Dans cet exemple, nous avons deux boutons :
-
-- Un bouton "Remplir le canevas" qui, lorsqu'il est cliqué, remplit le [`<canvas>`](/fr/docs/Web/HTML/Element/canvas) disponible avec 1 million de cercles bleus.
-- Un bouton "Cliquez sur moi pour l'alerte" qui, lorsqu'il est cliqué, affiche un message d'alerte.
-
-```js
-function expensiveOperation() {
-  for(let i = 0; i < 1000000; i++) {
-    ctx.fillStyle = 'rgba(0,0,255, 0.2)';
-    ctx.beginPath();
-    ctx.arc(random(0, canvas.width), random(0, canvas.height), 10, degToRad(0), degToRad(360), false);
-    ctx.fill();
-  }
-}
-
-fillBtn.addEventListener('click', expensiveOperation);
-
-alertBtn.addEventListener('click', () =>
-  alert('Vous avez cliqué sur moi !');
-);
-```
-
-Si vous cliquez sur le premier bouton, puis rapidement sur le second, vous verrez que l'alerte n'apparaît pas avant que les cercles aient fini d'être rendus. La première opération bloque la seconde jusqu'à ce qu'elle ait fini de s'exécuter.
-
-> **Note :** D'accord, dans notre cas, c'est laid et nous simulons l'effet de blocage, mais il s'agit d'un problème courant contre lequel les développeuses et développeurs d'applications réelles se battent sans cesse pour atténuer les impacts indésirables.
-
-Pourquoi ? La réponse est que JavaScript, de manière générale, ne s'exécute que sur **un seul _thread_**. À ce stade, nous devons introduire le concept de **_threads_**.
-
-## Les threads
-
-Un **_thread_** est fondamentalement un processus unique qu'un programme peut utiliser pour accomplir des tâches. Chaque _thread_ ne peut effectuer qu'une seule tâche à la fois :
-
-    Tâche A --> Tâche B --> Tâche C
-
-Chaque tâche sera exécutée de manière séquentielle ; une tâche doit être terminée avant que la suivante puisse être lancée.
-
-Comme nous l'avons dit précédemment, de nombreux ordinateurs sont désormais dotés de plusieurs cœurs et peuvent donc faire plusieurs choses à la fois. Les langages de programmation qui prennent en charge plusieurs processus peuvent utiliser plusieurs cœurs pour accomplir de multiples tâches simultanément :
-
-    Processus 1: Tâche A --> Tâche B
-    Processus 2: Tâche C --> Tâche D
-
-### JavaScript n'a qu'un thread
-
-JavaScript est traditionnellement « single-threaded ». Même avec plusieurs cœurs, vous ne pouviez le faire exécuter des tâches que sur un seul processus, appelé le **main thread**. Notre exemple ci-dessus est exécuté comme ceci :
-
-    processus principal : Rendre des cercles dans <canvas> --> Afficher alert()
-
-Après un certain temps, JavaScript a gagné quelques outils pour aider à résoudre de tels problèmes. [Les Web workers](/fr/docs/Web/API/Web_Workers_API) vous permettent d'envoyer une partie du traitement JavaScript hors d'un processus distinct, appelé worker, afin que vous puissiez exécuter plusieurs morceaux JavaScript simultanément. Vous utiliserez généralement un worker pour exécuter des processus coûteux hors du processus principal afin de ne pas bloquer l'interaction avec l'utilisateur.
-
-    Processus principal : Tâche A --> Tâche C
-    Processus du Worker : Tâche coûteuse B
-
-Dans cette optique, jetez un coup d'œil à [simple-sync-worker.html](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-worker.html) ([voyez-le fonctionner en direct](https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-worker.html)), toujours avec la console JavaScript de votre navigateur ouverte. Il s'agit d'une réécriture de notre exemple précédent qui calcule les 10 millions de dates dans un fil de travail (_worker_) séparé. Vous pouvez voir le code du _worker_ ici : [worker.js](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/worker.js). Désormais, lorsque vous cliquez sur le bouton, le navigateur est capable d'afficher le paragraphe avant que les dates n'aient fini d'être calculées. La première opération ne bloque plus la seconde et une fois que le _worker_ a fini ses calculs, la date est affichée dans la console.
-
-## Code asynchrone
-
-Les web workers sont très utiles, mais ils ont leurs limites. L'une des principales est qu'ils ne peuvent pas accéder au [DOM](/fr/docs/Glossary/DOM). Vous ne pouvez pas demander à un worker de faire directement quelque chose pour mettre à jour l'interface utilisateur. Nous n'avons pas pu rendre nos 1 million de cercles bleus à l'intérieur de notre worker ; il ne peut faire que le calcul des chiffres.
-
-Le deuxième problème est que, bien que le code exécuté dans un worker ne soit pas bloquant, il reste fondamentalement synchrone. Cela devient un problème lorsqu'une fonction s'appuie sur les résultats de plusieurs processus précédents pour fonctionner. Considérons les diagrammes de processus suivants :
-
-    Processus principal : Tâche A --> Tâche B
-
-Dans ce cas, disons que la tâche A fait quelque chose comme récupérer une image du serveur et que la tâche B fait ensuite quelque chose à l'image comme lui appliquer un filtre. Si vous lancez la tâche A et essayez immédiatement d'exécuter la tâche B, vous obtiendrez une erreur, car l'image ne sera pas encore disponible.
-
-    Processus principal : Tâche A --> Tâche B --> |Tâche D|
-    Processus du Worker : Tâche C --------------> |       |
-
-Dans ce cas, disons que la tâche D utilise les résultats de la tâche B et de la tâche C. Si nous pouvons garantir que ces résultats seront tous deux disponibles au même moment, alors nous pourrions être OK, mais c'est peu probable. Si la tâche D tente de s'exécuter alors que l'une de ses entrées n'est pas encore disponible, elle déclenchera une erreur.
-
-Pour résoudre ces problèmes, les navigateurs nous permettent d'exécuter certaines opérations de manière asynchrone. Des fonctionnalités telles que [`Promise`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) permettent de lancer une opération (par exemple, la récupération d'une image sur le serveur), puis d'attendre le retour du résultat avant de lancer une autre opération :
-
-    Processus principal : Tâche A                   Tâche B
-    Promesse :               |__opération asynchrone__|
-
-Comme l'opération se déroule ailleurs, le processus principal n'est pas bloqué pendant le traitement de l'opération asynchrone.
-
-Nous allons commencer à examiner comment écrire du code asynchrone dans le prochain article. C'est passionnant, non ? Bonne lecture !
-
-## Conclusion
-
-La conception de logiciels modernes s'articule de plus en plus autour de l'utilisation de la programmation asynchrone, afin de permettre aux programmes de faire plusieurs choses à la fois. À mesure que vous utilisez des API plus récentes et plus puissantes, vous trouverez de plus en plus de cas où la seule façon de faire les choses est asynchrone. Il était autrefois difficile d'écrire du code asynchrone. Il faut encore s'y habituer, mais c'est devenu beaucoup plus facile. Dans la suite de ce module, nous étudierons plus en détail pourquoi le code asynchrone est important et comment concevoir un code qui évite certains des problèmes décrits ci-dessus.
-
-{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}}
-
-## Dans ce module
-
-- [Concepts généraux de programmation asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Concepts)
-- [Introduction au JavaScript asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Introducing)
-- [JavaScript asynchrone coopératif : Délais et intervalles](/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals)
-- [Gérer les opérations asynchrones avec élégance grâce aux Promesses](/fr/docs/Learn/JavaScript/Asynchronous/Promises)
-- [Faciliter la programmation asynchrone avec async et await](/fr/docs/Learn/JavaScript/Asynchronous/Async_await)
-- [Choisir la bonne approche](/fr/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach)
diff --git a/files/fr/learn/javascript/asynchronous/timeouts_and_intervals/index.md b/files/fr/learn/javascript/asynchronous/timeouts_and_intervals/index.md
deleted file mode 100644
index c179da9e18..0000000000
--- a/files/fr/learn/javascript/asynchronous/timeouts_and_intervals/index.md
+++ /dev/null
@@ -1,647 +0,0 @@
----
-title: 'JavaScript asynchrone coopératif : délais et intervalles'
-slug: Learn/JavaScript/Asynchronous/Timeouts_and_intervals
-tags:
-  - Animation
-  - Beginner
-  - CodingScripting
-  - Guide
-  - Intervals
-  - JavaScript
-  - Loops
-  - asynchronous
-  - requestAnimationFrame
-  - setInterval
-  - setTimeout
-  - timeouts
-translation_of: Learn/JavaScript/Asynchronous/Timeouts_and_intervals
----
-{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}
-
-Ce tutoriel présente les méthodes traditionnelles dont dispose JavaScript pour exécuter du code de manière asynchrone après l'écoulement d'une période de temps déterminée ou à un intervalle régulier (par exemple, un nombre déterminé de fois par seconde), discute de leur utilité et examine leurs problèmes inhérents.
-
-<table class="standard-table">
-  <tbody>
-    <tr>
-      <th scope="row">Prérequis :</th>
-      <td>
-        Connaissances informatiques de base, compréhension raisonnable des
-        principes fondamentaux de JavaScript.
-      </td>
-    </tr>
-    <tr>
-      <th scope="row">Objectif :</th>
-      <td>
-        Comprendre les boucles et les intervalles asynchrones et leur utilité.
-      </td>
-    </tr>
-  </tbody>
-</table>
-
-## Introduction
-
-Depuis longtemps, la plate-forme Web offre aux programmeurs JavaScript un certain nombre de fonctions qui leur permettent d'exécuter du code de manière asynchrone après un certain intervalle de temps, et d'exécuter un bloc de code de manière asynchrone jusqu'à ce que vous lui demandiez de s'arrêter.
-
-Ces fonctions sont :
-
-- [`setTimeout()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout)
-  - : Exécuter un bloc de code spécifié une fois, après qu'un temps spécifié se soit écoulé.
-- [`setInterval()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setInterval)
-  - : Exécuter un bloc de code spécifique de manière répétée, avec un délai fixe entre chaque appel.
-- [`requestAnimationFrame()`](/fr/docs/Web/API/Window/requestAnimationFrame)
-  - : La version moderne de `setInterval()`. Exécute un bloc de code spécifié avant que le navigateur ne repeigne ensuite l'affichage, ce qui permet à une animation d'être exécutée à une fréquence d'images appropriée, quel que soit l'environnement dans lequel elle est exécutée.
-
-Le code asynchrone mis en place par ces fonctions s'exécute sur le processus principal (après l'écoulement de leur minuterie spécifiée).
-
-Il est important de savoir que vous pouvez (et allez souvent) exécuter un autre code avant qu'un appel `setTimeout()` ne s'exécute, ou entre les itérations de `setInterval()`. Selon l'intensité du processeur de ces opérations, elles peuvent retarder encore plus votre code asynchrone, car tout code asynchrone ne s'exécutera qu'_après_ la disponibilité du processus principal. (En d'autres termes, lorsque la pile est vide.) Vous en apprendrez davantage à ce sujet au fur et à mesure que vous progresserez dans cet article.
-
-Dans tous les cas, ces fonctions sont utilisées pour exécuter des animations constantes et d'autres traitements en arrière-plan sur un site Web ou une application. Dans les sections suivantes, nous allons vous montrer comment les utiliser.
-
-## setTimeout()
-
-Comme nous l'avons dit précédemment, [`setTimeout()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) exécute un bloc de code particulier une fois qu'un temps spécifié s'est écoulé. Il prend les paramètres suivants :
-
-- Une fonction à exécuter, ou une référence à une fonction définie ailleurs.
-- Un nombre représentant l'intervalle de temps en millisecondes (1000 millisecondes équivalent à 1 seconde) à attendre avant d'exécuter le code. Si vous spécifiez une valeur de `0` (ou omettez la valeur), la fonction sera exécutée dès que possible. (Voir la note ci-dessous sur la raison pour laquelle elle s'exécute "dès que possible" et non "immédiatement"). Plus d'informations sur les raisons pour lesquelles vous pourriez vouloir faire cela plus tard.
-- Zéro ou plusieurs valeurs représentant les paramètres que vous souhaitez transmettre à la fonction lors de son exécution.
-
-> **Note :** La quantité de temps spécifiée (ou le délai) n'est **pas** le _temps garanti_ à l'exécution, mais plutôt le _temps minimum_ à l'exécution. Les rappels que vous passez à ces fonctions ne peuvent pas s'exécuter tant que la pile du processus principal n'est pas vide.
->
-> En conséquence, un code comme `setTimeout(fn, 0)` s'exécutera dès que la pile sera vide, **pas** immédiatement. Si vous exécutez un code comme `setTimeout(fn, 0)` mais qu'immédiatement après vous exécutez une boucle qui compte de 1 à 10 milliards, votre rappel sera exécuté après quelques secondes.
-
-Dans l'exemple suivant, le navigateur attendra deux secondes avant d'exécuter la fonction anonyme, puis affichera le message d'alerte ([voir son exécution en direct](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-settimeout.html), et [voir le code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-settimeout.html)) :
-
-```js
-let maSalutation = setTimeout(() => {
-  console.log('Bonjour, M. Univers !');
-}, 2000);
-```
-
-Les fonctions que vous spécifiez n'ont pas besoin d'être anonymes. Vous pouvez donner un nom à votre fonction, et même la définir ailleurs et passer une référence de fonction à `setTimeout()`. Les deux versions suivantes de l'extrait de code sont équivalentes à la première :
-
-```js
-// Avec une fonction nommée
-let maSalutation = setTimeout(function direBonjour() {
-  console.log('Bonjour, M. Univers !');
-}, 2000);
-
-// Avec une fonction définie séparément
-function direBonjour() {
-  console.log('Bonjour, M. Univers !');
-}
-
-let maSalutation = setTimeout(direBonjour, 2000);
-```
-
-Cela peut être utile si vous avez une fonction qui doit être appelée à la fois à partir d'un délai d'attente et en réponse à un événement, par exemple. Mais cela peut aussi vous aider à garder votre code en ordre, surtout si le rappel du délai d'attente représente plus de quelques lignes de code.
-
-`setTimeout()` renvoie une valeur d'identifiant qui peut être utilisée pour faire référence au délai d'attente ultérieurement, par exemple lorsque vous souhaitez l'arrêter. Voir [Effacement des délais d'attente](#clearing_timeouts) (ci-dessous) pour apprendre comment faire cela.
-
-### Passage de paramètres à une fonction setTimeout()
-
-Tous les paramètres que vous voulez passer à la fonction en cours d'exécution à l'intérieur du `setTimeout()` doivent lui être passés comme paramètres supplémentaires à la fin de la liste.
-
-Par exemple, vous pouvez remanier la fonction précédente pour qu'elle dise bonjour à la personne dont le nom lui est transmis :
-
-```js
-function direBonjour(who) {
-  console.log(`Bonjour ${who} !`);
-}
-```
-
-Maintenant, vous pouvez passer le nom de la personne dans l'appel `setTimeout()` comme troisième paramètre :
-
-```js
-let maSalutation = setTimeout(direBonjour, 2000, 'M. Univers');
-```
-
-### Effacement des délais d'attente
-
-Enfin, si un timeout a été créé, vous pouvez l'annuler avant que le temps spécifié ne se soit écoulé en appelant [`clearTimeout()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout), en lui passant en paramètre l'identifiant de l'appel `setTimeout()`. Donc pour annuler notre timeout ci-dessus, vous feriez ceci :
-
-```js
-clearTimeout(maSalutation);
-```
-
-> **Note :** Voir [`greeter-app.html`](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/greeter-app.html) pour une démo un peu plus élaborée qui permet de définir le nom de la personne à saluer dans un formulaire, et d'annuler la salutation à l'aide d'un bouton séparé ([voir aussi le code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/greeter-app.html)).
-
-## setInterval()
-
-`setTimeout()` fonctionne parfaitement lorsque vous devez exécuter du code une fois après une période de temps définie. Mais que se passe-t-il lorsque vous avez besoin d'exécuter le code encore et encore - par exemple, dans le cas d'une animation ?
-
-C'est là qu'intervient le [`setInterval()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setInterval). Cela fonctionne de manière très similaire à `setTimeout()`, sauf que la fonction que vous passez comme premier paramètre est exécutée de manière répétée à une fréquence égale au nombre de millisecondes donné par le deuxième paramètre distinct, plutôt qu'une seule fois. Vous pouvez également passer tous les paramètres requis par la fonction en cours d'exécution comme paramètres ultérieurs de l'appel `setInterval()`.
-
-Prenons un exemple. La fonction suivante crée un nouvel objet [`Date()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Date), en extrait une chaîne de temps en utilisant [`toLocaleTimeString()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString), puis l'affiche dans l'interface utilisateur. Elle exécute ensuite la fonction une fois par seconde à l'aide de `setInterval()`, créant l'effet d'une horloge numérique qui se met à jour une fois par seconde ([voir cela en direct](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-clock.html), et aussi [voir la source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html)) :
-
-```js
-function displayTime() {
-   let date = new Date();
-   let time = date.toLocaleTimeString();
-   document.getElementById('demo').textContent = time;
-}
-
-const createClock = setInterval(displayTime, 1000);
-```
-
-Tout comme `setTimeout()`, `setInterval()` renvoie une valeur d'identification que vous pouvez utiliser plus tard lorsque vous devez effacer l'intervalle.
-
-### Effacement des intervalles
-
-`setInterval()` continue à exécuter une tâche pour toujours, à moins que vous ne fassiez quelque chose à ce sujet. Vous voudrez probablement un moyen d'arrêter de telles tâches, sinon vous pouvez finir par obtenir des erreurs lorsque le navigateur ne peut pas compléter d'autres versions de la tâche, ou si l'animation gérée par la tâche est terminée. Vous pouvez le faire de la même manière que vous arrêtez les temporisations - en passant l'identifiant renvoyé par l'appel `setInterval()` à la fonction [`clearInterval()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval) :
-
-```js
-const myInterval = setInterval(myFunction, 2000);
-
-clearInterval(myInterval);
-```
-
-#### Apprentissage actif : Créez votre propre chronomètre !
-
-Tout ceci étant dit, nous avons un défi à vous proposer. Prenez une copie de notre exemple [`setInterval-clock.html`](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html), et modifiez-le pour créer votre propre chronomètre simple.
-
-Vous devez afficher une heure comme précédemment, mais dans cet exemple, vous avez besoin :
-
-- Un bouton "Start" pour lancer le chronomètre.
-- Un bouton "Stop" pour le mettre en pause/arrêter.
-- Un bouton "Reset" pour réinitialiser le temps à `0`.
-- L'affichage du temps pour indiquer le nombre de secondes écoulées, plutôt que le temps réel.
-
-Voici quelques conseils pour vous :
-
-- Vous pouvez structurer et styliser le balisage du bouton comme vous le souhaitez ; veillez simplement à utiliser du HTML sémantique, avec des crochets vous permettant de saisir les références du bouton à l'aide de JavaScript.
-- Vous voulez probablement créer une variable qui commence à `0`, puis s'incrémente d'une unité toutes les secondes en utilisant une boucle constante.
-- Il est plus facile de créer cet exemple sans utiliser un objet `Date()`, comme nous l'avons fait dans notre version, mais moins précis - vous ne pouvez pas garantir que le rappel se déclenchera après exactement `1000`ms. Une façon plus précise serait d'exécuter `startTime = Date.now()` pour obtenir un horodatage du moment exact où l'utilisateur a cliqué sur le bouton de démarrage, puis de faire `Date.now() - startTime` pour obtenir le nombre de millisecondes après le clic sur le bouton de démarrage.
-- Vous souhaitez également calculer le nombre d'heures, de minutes et de secondes sous forme de valeurs distinctes, puis les afficher ensemble dans une chaîne de caractères après chaque itération de la boucle. À partir du deuxième compteur, vous pouvez calculer chacune de ces valeurs.
-- Comment les calculeriez-vous ? Réfléchissez-y :
-
-  - Le nombre de secondes dans une heure est de `3600`.
-  - Le nombre de minutes sera le nombre de secondes restantes lorsque toutes les heures auront été retirées, divisé par `60`.
-  - Le nombre de secondes sera le nombre de secondes restantes lorsque toutes les minutes auront été retirées.
-
-- Vous devrez inclure un zéro de tête sur vos valeurs d'affichage si le montant est inférieur à `10`, afin que cela ressemble davantage à une horloge/chronomètre traditionnel.
-- Pour mettre le chronomètre en pause, il faut effacer l'intervalle. Pour le réinitialiser, vous devrez remettre le compteur à `0`, effacer l'intervalle, puis mettre immédiatement à jour l'affichage.
-- Vous devriez probablement désactiver le bouton de démarrage après l'avoir pressé une fois, et le réactiver après l'avoir arrêté/réinitialisé. Sinon, les pressions multiples sur le bouton de démarrage appliqueront plusieurs `setInterval()` à l'horloge, ce qui entraînera un comportement erroné.
-
-> **Note :** Si vous êtes bloqué, vous pouvez [trouver notre version ici](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html)).
-
-## Choses à garder à l'esprit concernant setTimeout() et setInterval()
-
-Il y a quelques éléments à garder à l'esprit lorsque vous travaillez avec `setTimeout()` et `setInterval()`. Passons-les en revue maintenant.
-
-### Délais récursifs
-
-Il existe une autre façon d'utiliser `setTimeout()` : vous pouvez l'appeler de manière récursive pour exécuter le même code de manière répétée, au lieu d'utiliser `setInterval()`.
-
-L'exemple ci-dessous utilise un `setTimeout()` récursif pour exécuter la fonction passée toutes les `100` millisecondes :
-
-```js
-let i = 1;
-
-setTimeout(function run() {
-  console.log(i);
-  i++;
-  setTimeout(run, 100);
-}, 100);
-```
-
-Comparez l'exemple ci-dessus à celui qui suit - celui-ci utilise `setInterval()` pour accomplir le même effet :
-
-```js
-let i = 1;
-
-setInterval(function run() {
-  console.log(i);
-  i++;
-}, 100);
-```
-
-#### Quelle est la différence entre le `setTimeout()` récursif et le `setInterval()` ?
-
-La différence entre les deux versions du code ci-dessus est subtile.
-
-- Le `setTimeout()` récursif garantit le délai indiqué entre les exécutions. L'attente de la prochaine exécution commencera uniquement après que le code ait fini de s'exécuter. Dans cet exemple, le code s'exécutera, puis attendra `100` millisecondes avant de s'exécuter à nouveau - l'intervalle sera donc le même, quelle que soit la durée d'exécution du code.
-- L'exemple utilisant `setInterval()` fait les choses un peu différemment. L'intervalle que vous avez choisi _inclut_ le temps d'exécution du code que vous voulez exécuter. Disons que le code prend `40` millisecondes pour s'exécuter - l'intervalle finit alors par être seulement de `60` millisecondes.
-- Lorsque vous utilisez `setTimeout()` de manière récursive, chaque itération peut calculer un délai différent avant d'exécuter l'itération suivante. En d'autres termes, la valeur du deuxième paramètre peut spécifier un temps différent en millisecondes à attendre avant d'exécuter à nouveau le code.
-
-Lorsque votre code a le potentiel de prendre plus de temps à s'exécuter que l'intervalle de temps que vous avez assigné, il est préférable d'utiliser le `setTimeout()` récursif - cela maintiendra l'intervalle de temps constant entre les exécutions, quelle que soit la durée d'exécution du code, et vous n'obtiendrez pas d'erreurs.
-
-### Délais immédiats
-
-En utilisant `0` comme valeur pour `setTimeout()`, on planifie l'exécution de la fonction de rappel spécifiée dès que possible, mais seulement après l'exécution du processus de code principal.
-
-Par exemple, le code ci-dessous ([voir en direct](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/zero-settimeout.html)) produit une alerte contenant `"Hello"`, puis une alerte contenant `"World"` dès que vous cliquez sur OK sur la première alerte.
-
-```js
-setTimeout(() => {
-  alert('World');
-}, 0);
-
-alert('Hello');
-```
-
-Cela peut être utile dans les cas où vous souhaitez définir un bloc de code à exécuter dès que l'ensemble du thread principal a terminé son exécution - placez-le dans la boucle d'événement asynchrone, de sorte qu'il s'exécutera immédiatement après.
-
-### Effacement avec clearTimeout() ou clearInterval()
-
-`clearTimeout()` et `clearInterval()` utilisent toutes deux la même liste d'entrées pour effacer. Il est intéressant de noter que cela signifie que vous pouvez utiliser l'une comme l'autre méthode pour effacer un `setTimeout()` ou `setInterval()`.
-
-Par souci de cohérence, vous devriez utiliser `clearTimeout()` pour effacer les entrées `setTimeout()` et `clearInterval()` pour effacer les entrées `setInterval()`. Cela permettra d'éviter toute confusion.
-
-## requestAnimationFrame()
-
-[`requestAnimationFrame()`](/fr/docs/Web/API/Window/requestAnimationFrame) est une fonction de bouclage spécialisée, créée pour exécuter des animations de manière efficace dans le navigateur. Elle exécute un bloc de code spécifié avant que le navigateur ne repeigne ensuite l'affichage, ce qui permet d'exécuter une animation à une fréquence de rafraîchissement appropriée, quel que soit l'environnement dans lequel elle est exécutée.
-
-Elle a été créée en réponse aux problèmes perçus avec les fonctions asynchrones antérieures comme `setInterval()`, qui, par exemple, ne s'exécute pas à une fréquence d'images optimisée pour le matériel et continue à s'exécuter alors qu'elle pourrait s'arrêter lorsque l'onglet n'est plus actif ou si l'animation se déroule hors de la page, etc.
-
-([Plus d'informations à ce sujet sur CreativeJS](http://creativejs.com/resources/requestanimationframe/index.html) (en).)
-
-> **Note :** Vous trouverez des exemples d'utilisation de `requestAnimationFrame()` ailleurs dans le cours - voir par exemple [Dessiner des éléments graphiques](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics), et [La construction d'objet en pratique](/fr/docs/Learn/JavaScript/Objects/Object_building_practice).
-
-La méthode prend comme argument un rappel à invoquer avant le repeignage. C'est le modèle général dans lequel vous le verrez utilisé :
-
-```js
-function draw() {
-   // Le code du dessin va ici
-   requestAnimationFrame(draw);
-}
-
-draw();
-```
-
-L'idée est de définir une fonction dans laquelle votre animation est mise à jour (par exemple, vos sprites sont déplacés, le score est mis à jour, les données sont rafraîchies, ou autre). Ensuite, vous l'appelez pour lancer le processus. À la fin du bloc de fonctions, vous appelez `requestAnimationFrame()` avec la référence de la fonction passée en paramètre, et cela indique au navigateur de rappeler la fonction lors du prochain rafraîchissement de l'affichage. Ceci est ensuite exécuté en continu, car le code appelle `requestAnimationFrame()` de manière récursive.
-
-> **Note :** Si vous souhaitez réaliser une sorte d'animation DOM simple et constante, [les animations CSS](/fr/docs/Web/CSS/CSS_Animations) sont probablement plus rapides. Elles sont calculées directement par le code interne du navigateur, plutôt que par JavaScript.
->
-> Si, toutefois, vous faites quelque chose de plus complexe et impliquant des objets qui ne sont pas directement accessibles à l'intérieur du DOM (comme les objets [2D Canvas API](/fr/docs/Web/API/Canvas_API) ou [WebGL](/fr/docs/Web/API/WebGL_API)), `requestAnimationFrame()` est la meilleure option dans la plupart des cas.
-
-### Quelle est la vitesse de votre animation ?
-
-La fluidité de votre animation dépend directement de la fréquence d'images de votre animation, qui est mesurée en images par seconde (ips). Plus ce nombre est élevé, plus votre animation sera fluide, jusqu'à un certain point.
-
-Comme la plupart des écrans ont une fréquence de rafraîchissement de 60 Hz, la fréquence d'images la plus rapide que vous pouvez viser est de 60 images par seconde (IPS) lorsque vous travaillez avec des navigateurs Web. Cependant, plus d'images signifie plus de traitement, ce qui peut souvent provoquer des saccades et des sauts - également connus sous le nom de _dégradation des images_, ou _saccades_.
-
-Si vous disposez d'un moniteur avec une fréquence de rafraîchissement de 60 Hz et que vous souhaitez obtenir 60 IPS, vous disposez d'environ 16,7 millisecondes (`1000 / 60`) pour exécuter votre code d'animation et rendre chaque image. Ceci est un rappel que vous devrez être attentif à la quantité de code que vous essayez d'exécuter pendant chaque passage dans la boucle d'animation.
-
-`requestAnimationFrame()` essaie toujours de se rapprocher le plus possible de cette valeur magique de 60 IPS. Parfois, ce n'est pas possible - si vous avez une animation vraiment complexe et que vous l'exécutez sur un ordinateur lent, votre fréquence d'images sera inférieure. Dans tous les cas, `requestAnimationFrame()` fera toujours du mieux qu'il peut avec ce dont il dispose.
-
-### En quoi requestAnimationFrame() diffère-t-il de setInterval() et setTimeout() ?
-
-Parlons un peu plus de la façon dont la méthode `requestAnimationFrame()` diffère des autres méthodes utilisées précédemment. En regardant notre code d'en haut :
-
-```js
-function draw() {
-   // Le code du dessin va ici
-   requestAnimationFrame(draw);
-}
-
-draw();
-```
-
-Voyons maintenant comment faire la même chose en utilisant `setInterval()` :
-
-```js
-function draw() {
-   // Le code du dessin va ici
-}
-
-setInterval(draw, 17);
-```
-
-Comme nous l'avons couvert précédemment, vous ne spécifiez pas d'intervalle de temps pour `requestAnimationFrame()`. Il l'exécute simplement aussi vite et aussi bien que possible dans les conditions actuelles. Le navigateur ne perd pas non plus de temps à l'exécuter si l'animation est hors écran pour une raison quelconque, etc.
-
-`setInterval()`, d'autre part _exige_ qu'un intervalle soit spécifié. Nous sommes arrivés à notre valeur finale de 17 via la formule _1000 millisecondes / 60Hz_, puis nous l'avons arrondie. Arrondir vers le haut est une bonne idée ; si vous arrondissez vers le bas, le navigateur pourrait essayer d'exécuter l'animation à une vitesse supérieure à 60 FPS, et cela ne ferait de toute façon aucune différence pour la fluidité de l'animation. Comme nous l'avons déjà dit, 60 Hz est la fréquence de rafraîchissement standard.
-
-### Inclure un horodatage
-
-Le rappel réel passé à la fonction `requestAnimationFrame()` peut également recevoir un paramètre : une valeur _timestamp_, qui représente le temps depuis que le `requestAnimationFrame()` a commencé à s'exécuter.
-
-C'est utile car cela vous permet d'exécuter des choses à des moments précis et à un rythme constant, quelle que soit la vitesse ou la lenteur de votre appareil. Le modèle général que vous utiliserez ressemble à quelque chose comme ceci :
-
-```js
-let startTime = null;
-
-function draw(timestamp) {
-    if (!startTime) {
-      startTime = timestamp;
-    }
-
-   currentTime = timestamp - startTime;
-
-   // Faire quelque chose en fonction du temps actuel
-
-   requestAnimationFrame(draw);
-}
-
-draw();
-```
-
-### Prise en charge des navigateurs
-
-`requestAnimationFrame()` est supporté par des navigateurs plus récents que pour `setInterval()`/`setTimeout()`. Il est intéressant de noter qu'elle est disponible dans Internet Explorer 10 et plus.
-
-Ainsi, à moins que vous ne deviez prendre en charge d'anciennes versions d'IE, il y a peu de raisons de ne pas utiliser `requestAnimationFrame()`.
-
-### Un exemple simple
-
-Assez avec la théorie ! Construisons votre propre exemple personnel de `requestAnimationFrame()`. Vous allez créer une simple "animation de toupie" - le genre que vous pourriez voir affiché dans une application lorsqu'elle est occupée à se connecter au serveur, etc.
-
-> **Note :** Dans un exemple du monde réel, vous devriez probablement utiliser des animations CSS pour exécuter ce type d'animation simple. Cependant, ce genre d'exemple est très utile pour démontrer l'utilisation de `requestAnimationFrame()`, et vous seriez plus susceptible d'utiliser ce genre de technique lorsque vous faites quelque chose de plus complexe comme la mise à jour de l'affichage d'un jeu à chaque image.
-
-1.  Prenez un modèle HTML de base ([comme celui-ci](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html)).
-2.  Placez un élément [`<div>`](/fr/docs/Web/HTML/Element/div) vide à l'intérieur de l'élément [`<body>`](/fr/docs/Web/HTML/Element/body), puis ajoutez un caractère ↻ à l'intérieur. Ce caractère de flèche circulaire fera office de notre toupie pour cet exemple.
-3.  Appliquez le CSS suivant au modèle HTML (de la manière que vous préférez). Cela définit un fond rouge sur la page, définit la hauteur du `<body>` à `100%` de la hauteur de [`<html>`](/fr/docs/Web/HTML/Element/html), et centre le `<div>` à l'intérieur du `<body>`, horizontalement et verticalement.
-
-    ```css
-    html {
-      background-color: white;
-      height: 100%;
-    }
-
-    body {
-      height: inherit;
-      background-color: red;
-      margin: 0;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-
-    div {
-      display: inline-block;
-      font-size: 10rem;
-    }
-    ```
-
-4.  Insérez un élément [`<script>`](/fr/docs/Web/HTML/Element/script) juste au-dessus de la balise de fermeture `</body>`.
-5.  Insérez le JavaScript suivant dans votre élément `<script>`. Ici, vous stockez une référence à l'élément `<div> ; `à l'intérieur d'une constante, définissez une variable `rotateCount` à `0`, définissez une variable non initialisée qui sera utilisée plus tard pour contenir une référence à l'appel `requestAnimationFrame()`, et en définissant une variable `startTime` à `null`, qui sera plus tard utilisée pour stocker l'heure de début de l'appel `requestAnimationFrame()`.
-
-    ```js
-    const spinner = document.querySelector('div');
-    let rotateCount = 0;
-    let startTime = null;
-    let rAF;
-    ```
-
-6.  Sous le code précédent, insérez une fonction `draw()` qui sera utilisée pour contenir notre code d'animation, qui inclut le paramètre `timestamp` :
-
-    ```js
-    function draw(timestamp) {
-
-    }
-    ```
-
-7.  À l'intérieur de `draw()`, ajoutez les lignes suivantes. Elles définiront l'heure de départ si elle n'est pas déjà définie (cela ne se produira que lors de la première itération de la boucle), et définiront le `rotateCount` à une valeur pour faire tourner le spinner par (l'horodatage actuel, prendre l'horodatage de départ, divisé par trois pour que cela n'aille pas trop vite) :
-
-    ```js
-      if(!startTime) {
-       startTime = timestamp;
-      }
-
-      rotateCount = (timestamp - startTime) / 3;
-    ```
-
-8.  Sous la ligne précédente à l'intérieur de `draw()`, ajoutez le bloc suivant - il s'assure que la valeur de `rotateCount` est comprise entre `0` et `360` en utilisant le modulo à 360 (c'est-à-dire le reste restant lorsque la valeur est divisée par `360`) afin que l'animation du cercle puisse continuer sans interruption, à une valeur basse et raisonnable. Notez que ce n'est pas strictement nécessaire, mais il est plus facile de travailler avec des valeurs de 0-359 degrés que des valeurs comme `"128000 degrés"`.
-
-    ```js
-    rotateCount %= 360;
-    ```
-
-9.  Ensuite, sous le bloc précédent, ajoutez la ligne suivante pour faire tourner le spinner :
-
-    ```js
-    spinner.style.transform = `rotate(${rotateCount}deg)`;
-    ```
-
-10. Tout en bas, à l'intérieur de la fonction `draw()`, insérez la ligne suivante. C'est la clé de toute l'opération - vous définissez la variable définie précédemment à un appel actif `requestAnimation()`, qui prend la fonction `draw()` comme paramètre. Cela fait démarrer l'animation, en exécutant constamment la fonction `draw()` à un taux aussi proche que possible de 60 IPS.
-
-    ```js
-    rAF = requestAnimationFrame(draw);
-    ```
-
-11. Sous la définition de la fonction `draw()`, ajoutez un appel à la fonction `draw()` pour lancer l'animation.
-
-    ```js
-    draw();
-    ```
-
-> **Note :** Vous pouvez trouver l'[exemple terminé en direct sur GitHub](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html). (Vous pouvez également voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html)).
-
-### Effacer un appel de requestAnimationFrame()
-
-Effacer un appel de `requestAnimationFrame()` peut être fait en appelant la méthode `cancelAnimationFrame()` correspondante. (Notez que le nom de la fonction commence par "cancel", et non par "clear" comme pour les méthodes "set...").
-
-Il suffit de lui passer la valeur renvoyée par l'appel `requestAnimationFrame()` à annuler, que vous avez stockée dans la variable `rAF` :
-
-```js
-cancelAnimationFrame(rAF);
-```
-
-### Apprentissage actif : Démarrer et arrêter la toupie
-
-Dans cet exercice, nous aimerions que vous testiez la méthode `cancelAnimationFrame()` en prenant notre exemple précédent et en le mettant à jour, en ajoutant un écouteur d'événements pour démarrer et arrêter le spinner lorsque la souris est cliquée n'importe où sur la page.
-
-Quelques conseils :
-
-- Un écouteur d'événements `click` peut être ajouté à la plupart des éléments, y compris le document `<body>`. Il est plus logique de le placer sur l'élément `<body>` si vous voulez maximiser la zone cliquable - l'événement remonte jusqu'à ses éléments enfants.
-- Vous voudrez ajouter une variable de suivi pour vérifier si la toupie tourne ou non, effacer le cadre d'animation si c'est le cas, et le rappeler si ce n'est pas le cas.
-
-> **Note :** Essayez d'abord vous-même ; si vous êtes vraiment bloqué, consultez nos pages [exemple en direct](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/start-and-stop-spinner.html) et [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/start-and-stop-spinner.html).
-
-### Ralentissement d'une animation requestAnimationFrame()
-
-Une limitation de `requestAnimationFrame()` est que vous ne pouvez pas choisir votre fréquence d'images. Ce n'est pas un problème la plupart du temps, car en général, vous voulez que votre animation se déroule de la manière la plus fluide possible. Mais qu'en est-il lorsque vous souhaitez créer une animation old school, de style 8 bits ?
-
-C'était un problème, par exemple, dans l'animation de marche inspirée de Monkey Island de notre article [Dessiner des éléments graphiques](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics) :
-
-{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html", '100%', 260)}}
-
-Dans cet exemple, vous devez animer à la fois la position du personnage à l'écran et le sprite affiché. Il n'y a que 6 images dans l'animation du sprite. Si vous montriez une image différente du sprite pour chaque image affichée à l'écran par `requestAnimationFrame()`, Guybrush bougerait ses membres trop vite et l'animation aurait l'air ridicule. Cet exemple étrangle la vitesse à laquelle le sprite cycle ses images en utilisant le code suivant :
-
-```js
-if (posX % 13 === 0) {
-  if (sprite === 5) {
-    sprite = 0;
-  } else {
-    sprite++;
-  }
-}
-```
-
-Ainsi, le code ne cycle le sprite qu'une fois toutes les 13 images d'animation.
-
-...En fait, c'est environ toutes les 6,5 images, car nous mettons à jour `posX` (position du personnage sur l'écran) par deux à chaque image :
-
-```js
-if (posX > width/2) {
-  newStartPos = -( (width/2) + 102 );
-  posX = Math.ceil(newStartPos / 13) * 13;
-  console.log(posX);
-} else {
-  posX += 2;
-}
-```
-
-C'est le code qui calcule comment mettre à jour la position dans chaque image d'animation.
-
-La méthode que vous utilisez pour accélérer votre animation dépendra de votre code particulier. Par exemple, dans l'exemple précédent de la toupie, vous pourriez faire en sorte qu'elle semble se déplacer plus lentement en n'augmentant le `rotateCount` que de un à chaque image, au lieu de deux.
-
-## Apprentissage actif : un jeu de réaction
-
-Pour la dernière section de cet article, vous allez créer un jeu de réaction à 2 joueurs. Le jeu aura deux joueurs, dont l'un contrôlera le jeu à l'aide de la touche <kbd>A</kbd>, et l'autre avec la touche <kbd>L</kbd>.
-
-Lorsque l'on appuie sur le bouton _Start_, une toupie comme celle que nous avons vue précédemment s'affiche pendant un temps aléatoire compris entre 5 et 10 secondes. Après ce temps, un message apparaîtra disant `"PLAYERS GO !!"` - une fois que cela se produit, le premier joueur à appuyer sur son bouton de contrôle gagnera la partie.
-
-{{EmbedGHLiveSample("learning-area/javascript/asynchronous/loops-and-intervals/reaction-game.html", '100%', 500)}}
-
-Travaillons ensemble :
-
-1.  Tout d'abord, téléchargez le [fichier de démarrage de l'application](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/reaction-game-starter.html). Celui-ci contient la structure HTML et le style CSS finis, ce qui nous donne un plateau de jeu qui affiche les informations des deux joueurs (comme vu ci-dessus), mais avec le spinner et le paragraphe des résultats affichés l'un au-dessus de l'autre. Il ne vous reste plus qu'à écrire le code JavaScript.
-2.  À l'intérieur de l'élément vide [`<script>`](/fr/docs/Web/HTML/Element/script) de votre page, commencez par ajouter les lignes de code suivantes qui définissent certaines constantes et variables dont vous aurez besoin dans le reste du code :
-
-    ```js
-    const spinner = document.querySelector('.spinner p');
-    const spinnerContainer = document.querySelector('.spinner');
-    let rotateCount = 0;
-    let startTime = null;
-    let rAF;
-    const btn = document.querySelector('button');
-    const result = document.querySelector('.result');
-    ```
-
-    Dans l'ordre, ce sont :
-
-    1.  Une référence à la toupie, afin que vous puissiez l'animer.
-    2.  Une référence à l'élément [`<div>`](/fr/docs/Web/HTML/Element/div) qui contient la toupie, utilisée pour l'afficher et la masquer.
-    3.  Un nombre de rotations. Ce paramètre détermine le nombre de rotations de la toupie que vous souhaitez afficher à chaque image de l'animation.
-    4.  Un temps de démarrage nul. Il sera rempli avec une heure de début lorsque la toupie commencera à tourner.
-    5.  Une variable non initialisée pour stocker ultérieurement l'appel [`requestAnimationFrame()`](/fr/docs/Web/API/Window/requestAnimationFrame) qui anime la toupie.
-    6.  Une référence au bouton de démarrage.
-    7.  Une référence au paragraphe des résultats.
-
-3.  Ensuite, sous les lignes de code précédentes, ajoutez la fonction suivante. Elle prend deux nombres et retourne un nombre aléatoire entre les deux. Vous en aurez besoin pour générer un intervalle de temps aléatoire plus tard.
-
-    ```js
-    function random(min,max) {
-      var num = Math.floor(Math.random()*(max-min)) + min;
-      return num;
-    }
-    ```
-
-4.  Ajoutez ensuite la fonction `draw()`, qui anime la toupie. Cette version est très similaire à celle de l'exemple simple de la toupie, plus haut :
-
-    ```js
-    function draw(timestamp) {
-      if(!startTime) {
-       startTime = timestamp;
-      }
-
-      rotateCount = (timestamp - startTime) / 3;
-
-      rotateCount %= 360;
-
-      spinner.style.transform = 'rotate(' + rotateCount + 'deg)';
-      rAF = requestAnimationFrame(draw);
-    }
-    ```
-
-5.  Il est maintenant temps de mettre en place l'état initial de l'application lors du premier chargement de la page. Ajoutez les deux lignes suivantes, qui masquent le paragraphe des résultats et le conteneur de la toupie en utilisant `display : none;`.
-
-    ```js
-    result.style.display = 'none';
-    spinnerContainer.style.display = 'none';
-    ```
-
-6.  Ensuite, définissez une fonction `reset()`, qui remet l'application dans l'état initial nécessaire pour relancer le jeu après qu'il a été joué. Ajoutez ce qui suit au bas de votre code :
-
-    ```js
-    function reset() {
-      btn.style.display = 'block';
-      result.textContent = '';
-      result.style.display = 'none';
-    }
-    ```
-
-7.  Bon, assez de préparation ! Il est temps de rendre le jeu jouable ! Ajoutez le bloc suivant à votre code. La fonction `start()` appelle `draw()` pour commencer à faire tourner la toupie et l'afficher dans l'interface utilisateur, cache le bouton _Start_ pour que vous ne puissiez pas perturber le jeu en le démarrant plusieurs fois simultanément, et exécute un appel `setTimeout()` qui exécute une fonction `setEndgame()` après qu'un intervalle aléatoire entre 5 et 10 secondes se soit écoulé. Le bloc suivant ajoute également un écouteur d'événements à votre bouton pour exécuter la fonction `start()` lorsqu'il est cliqué.
-
-    ```js
-    btn.addEventListener('click', start);
-
-    function start() {
-      draw();
-      spinnerContainer.style.display = 'block';
-      btn.style.display = 'none';
-      setTimeout(setEndgame, random(5000,10000));
-    }
-    ```
-
-    > **Note :** Vous verrez que cet exemple appelle `setTimeout()` sans stocker la valeur de retour. (Donc, pas `let myTimeout = setTimeout(functionName, interval)`.)
-    >
-    > Cela fonctionne très bien, tant que vous n'avez pas besoin d'effacer votre intervalle/temps d'attente à un moment donné. Si vous le faites, vous devrez sauvegarder l'identifiant renvoyé !
-
-    Le résultat net du code précédent est que lorsque le bouton _Start_ est pressé, la toupie est affichée et les joueurs sont amenés à attendre un temps aléatoire avant d'être invités à appuyer sur leur bouton. Cette dernière partie est gérée par la fonction `setEndgame()`, que vous allez définir ensuite.
-
-8.  Ajoutez ensuite la fonction suivante à votre code :
-
-    ```js
-    function setEndgame() {
-      cancelAnimationFrame(rAF);
-      spinnerContainer.style.display = 'none';
-      result.style.display = 'block';
-      result.textContent = 'JOUEURS : ALLEZ-Y !!';
-
-      document.addEventListener('keydown', keyHandler);
-
-      function keyHandler(e) {
-        let isOver = false;
-        console.log(e.key);
-
-        if (e.key === "a") {
-          result.textContent = 'Le joueur 1 a gagné !!';
-          isOver = true;
-        } else if (e.key === "l") {
-          result.textContent = 'Le joueur 2 a gagné !!';
-          isOver = true;
-        }
-
-        if (isOver) {
-          document.removeEventListener('keydown', keyHandler);
-          setTimeout(reset, 5000);
-        }
-      };
-    }
-    ```
-
-    Son fonctionnement :
-
-    1.  Tout d'abord, annule l'animation de la toupie avec [`cancelAnimationFrame()`](/fr/docs/Web/API/Window/cancelAnimationFrame) (il est toujours bon de nettoyer les processus inutiles), et cache le conteneur de la toupie.
-    2.  Ensuite, affiche le paragraphe des résultats et définissez son contenu textuel sur "JOUEURS : ALLEZ-Y !!" pour signaler aux joueurs qu'ils peuvent maintenant appuyer sur leur bouton pour gagner.
-    3.  Attache un écouteur d'événements [`keydown`](/fr/docs/Web/API/Document/keydown_event) au document. Lorsqu'un bouton quelconque est enfoncé, la fonction `keyHandler()` est exécutée.
-    4.  À l'intérieur de `keyHandler()`, le code inclut l'objet événement en tant que paramètre (représenté par `e`) - sa propriété [`key`](/fr/docs/Web/API/KeyboardEvent/key) contient la touche qui vient d'être pressée, et vous pouvez l'utiliser pour répondre à des pressions de touche spécifiques par des actions spécifiques.
-    5.  Définit la variable `isOver` à false, afin que nous puissions suivre si les bonnes touches ont été pressées pour que le joueur 1 ou 2 gagne. Nous ne voulons pas que le jeu se termine lorsqu'une mauvaise touche a été pressée.
-    6.  Enregistre `e.key` dans la console, ce qui est un moyen utile de connaître la valeur `key` des différentes touches sur lesquelles vous appuyez.
-    7.  Lorsque `e.key` est "a", affiche un message pour dire que le joueur 1 a gagné, et lorsque `e.key` est "l", affiche un message pour dire que le joueur 2 a gagné. (**Note:** Cela ne fonctionnera qu'avec les minuscules a et l - si un A ou un L majuscule est soumis (la touche plus
-
-        <kbd>Shift</kbd>
-
-        ), il est compté comme une touche différente !). Si une de ces touches a été pressée, mettez `isOver` à `true`.
-
-    8.  Seulement si `isOver` est `true`, supprime l'écouteur d'événements `keydown` en utilisant [`removeEventListener()`](/fr/docs/Web/API/EventTarget/removeEventListener) de sorte qu'une fois que l'appui gagnant s'est produit, plus aucune entrée clavier n'est possible pour perturber le résultat final du jeu. Vous utilisez également `setTimeout()` pour appeler `reset()` après 5 secondes - comme expliqué précédemment, cette fonction réinitialise le jeu à son état initial afin qu'une nouvelle partie puisse être lancée.
-
-Voilà, c'est fait !
-
-> **Note :** Si vous êtes bloqué, consultez [notre version du jeu en live](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/reaction-game.html) (voir également le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/reaction-game.html)).
-
-## Conclusion
-
-Voilà, tous les éléments essentiels des boucles et des intervalles asynchrones sont couverts dans un seul article. Vous trouverez ces méthodes utiles dans de nombreuses situations, mais veillez à ne pas en abuser ! Parce qu'ils s'exécutent toujours sur le processus principal, les rappels lourds et intensifs (en particulier ceux qui manipulent le DOM) peuvent vraiment ralentir une page si vous ne faites pas attention.
-
-{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}
-
-## Dans ce module
-
-- [Concepts généraux de programmation asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Concepts)
-- [Introduction au JavaScript asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Introducing)
-- [JavaScript asynchrone coopératif : Délais et intervalles](/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals)
-- [Gérer les opérations asynchrones avec élégance grâce aux Promesses](/fr/docs/Learn/JavaScript/Asynchronous/Promises)
-- [Faciliter la programmation asynchrone avec async et await](/fr/docs/Learn/JavaScript/Asynchronous/Async_await)
-- [Choisir la bonne approche](/fr/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach)
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 96c62c5ff3..3fdd18cb03 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
@@ -64,7 +64,7 @@ Pour commencer, mettons en place une fonction de base.
 > **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> `:
+2.  Ensuite, ajoutez le code ci-dessous à l'intérieur de l'élément `<script>`&nbsp;:
 
     ```js
     function displayMessage() {
diff --git a/files/fr/learn/javascript/building_blocks/conditionals/index.md b/files/fr/learn/javascript/building_blocks/conditionals/index.md
index cfa97937f9..433c2c816b 100644
--- a/files/fr/learn/javascript/building_blocks/conditionals/index.md
+++ b/files/fr/learn/javascript/building_blocks/conditionals/index.md
@@ -269,7 +269,7 @@ if (x === 5 || 7 || 10 || 20) {
 }
 ```
 
-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 :
+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 :
 
 ```js
 if (x === 5 || x === 7 || x === 10 ||x === 20) {
@@ -360,7 +360,7 @@ function setWeather() {
 
 {{ EmbedLiveSample('Un_exemple_de_switch', '100%', 100) }}
 
-> **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.)
+> **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.)
 
 ## Opérateur ternaire
 
@@ -411,7 +411,7 @@ Nous mettons un élément {{htmlelement('select')}} pour choisir un thème (noir
 
 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.
 
-> **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.)
+> **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.)
 
 ## Apprentissage actif : un calendrier simple
 
diff --git a/files/fr/learn/javascript/building_blocks/events/index.md b/files/fr/learn/javascript/building_blocks/events/index.md
index 1853289307..c2037818c7 100644
--- a/files/fr/learn/javascript/building_blocks/events/index.md
+++ b/files/fr/learn/javascript/building_blocks/events/index.md
@@ -156,7 +156,7 @@ function bgChange() {
 }
 ```
 
-> **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](https://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventhandlerattributes.html)).
+> **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](https://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 :
 
@@ -195,7 +195,7 @@ function bgChange() {
 btn.addEventListener('click', bgChange);
 ```
 
-> **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](https://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-addeventlistener.html)).
+> **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](https://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-addeventlistener.html)).
 
 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:
 
@@ -271,7 +271,7 @@ function bgChange(e) {
 btn.addEventListener('click', bgChange);
 ```
 
-> **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](https://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventobject.html)).
+> **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](https://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventobject.html)).
 
 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.
 
@@ -396,7 +396,7 @@ form.onsubmit = function(e) {
 
 ### Le bouillonnement et la capture
 
-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](https://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.
+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](https://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.
 
 ```html hidden
 <!DOCTYPE html>
@@ -543,7 +543,7 @@ video.onclick = function(e) {
 };
 ```
 
-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](https://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)).
+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](https://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)).
 
 > **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.
 
diff --git a/files/fr/learn/javascript/building_blocks/functions/index.md b/files/fr/learn/javascript/building_blocks/functions/index.md
index afd792fac3..9b0e1d4e50 100644
--- a/files/fr/learn/javascript/building_blocks/functions/index.md
+++ b/files/fr/learn/javascript/building_blocks/functions/index.md
@@ -30,7 +30,7 @@ Les **fonctions** sont un autre concept essentiel de la programmation, qui perme
 
 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.
 
-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.
+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.
 
 ## Les fonctions intégrées du navigateur
 
@@ -69,7 +69,7 @@ var myNumber = Math.random();
 
 > **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.
 
-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.
+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 vous **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.
 
 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.
 
@@ -83,7 +83,7 @@ Vous n'aurez pas besoin d'apprendre les rouages des objets structurés du JavaSc
 
 ## Fonctions personnalisées
 
-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 :
+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 :
 
 ```js
 function draw() {
@@ -103,7 +103,7 @@ Cette fonction dessine 100 cercles aléatoires dans un élément {{htmlelement("
 draw();
 ```
 
-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 :
+au lieu de devoir ré-écrire tout le code à chaque fois que nous voulons la répéter. De plus, les fonctions peuvent contenir tout le code 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 :
 
 ```js
 function random(number) {
@@ -115,7 +115,7 @@ Nous avions besoin de cette fonction car la fonction intégrée du navigateur [
 
 ## Invoquer des fonctions
 
-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.
+Vous êtes probablement au clair avec cela maintenant, mais juste au cas où… pour utiliser une fonction après qu'elle a é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&nbsp;:
 
 ```js
 function myFunction() {
@@ -236,11 +236,11 @@ var madeAString = myArray.join();
 
 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.
 
-## La portée des fonctions et les conflits.
+## La portée des fonctions et les conflits
 
 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.
 
-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.
+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 quelle partie du code.
 
 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.
 
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 78d6530000..e95ecbc4a2 100644
--- a/files/fr/learn/javascript/building_blocks/image_gallery/index.md
+++ b/files/fr/learn/javascript/building_blocks/image_gallery/index.md
@@ -40,7 +40,7 @@ Maintenant que nous avons examiné les blocs fondamentaux de construction de Jav
 
 ## Point de départ
 
-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.
+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.
 
 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.
 
diff --git a/files/fr/learn/javascript/building_blocks/index.md b/files/fr/learn/javascript/building_blocks/index.md
index bb9e1f50da..ddf8519680 100644
--- a/files/fr/learn/javascript/building_blocks/index.md
+++ b/files/fr/learn/javascript/building_blocks/index.md
@@ -19,7 +19,7 @@ Dans ce module nous allons continuer à voir l'ensemble des fonctionnalités cle
 
 ## Prérequis
 
-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)
+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)
 
 > **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/) .
 
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 9a367672be..db4470f17c 100644
--- a/files/fr/learn/javascript/building_blocks/looping_code/index.md
+++ b/files/fr/learn/javascript/building_blocks/looping_code/index.md
@@ -145,7 +145,7 @@ Regardons maintenant un exemple qui illustre parfaitement en quoi les boucles so
 </html>
 ```
 
-{{ EmbedLiveSample('Exemple', '100%', 400) }}
+{{EmbedLiveSample('', '100%', 400)}}
 
 #### Principe de boucle
 
@@ -197,13 +197,13 @@ Regardons maintenant un vrai exemple, afin de visualiser leurs actions plus clai
 ```js
 const chats = ['Bill', 'Jeff', 'Pete', 'Biggles', 'Jasmin'];
 let info = "Mes chat s'appellent ";
-const paragraphe = document.querySelector('p');
+const para = document.querySelector('p');
 
 for (let i = 0; i < chats.length; i++) {
   info += chats[i] + ', ';
 }
 
-paragraphe.textContent = info;
+para.textContent = info;
 ```
 
 ### Sortie
@@ -224,13 +224,13 @@ Cela nous donne la sortie suivante :
     <script>
     const chats = ['Bill', 'Jeff', 'Pete', 'Biggles', 'Jasmin'];
     let info = "Mes chats s'appellent ";
-    const paragraphe = document.querySelector('p');
+    const para = document.querySelector('p');
 
     for (let i = 0; i < chats.length; i++) {
       info += chats[i] + ', ';
     }
 
-    paragraphe.textContent = info;
+    para.textContent = info;
 
     </script>
 
@@ -238,11 +238,11 @@ Cela nous donne la sortie suivante :
 </html>
 ```
 
-{{ EmbedLiveSample('Sortie', '100%', 60) }}
+{{EmbedLiveSample('', '100%', 60)}}
 
-> **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)).
+> **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)).
 
-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 :
+Cela montre une boucle utilisée 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 :
 
 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.
@@ -280,7 +280,7 @@ for (let i = 0; i < cats.length; i++) {
 
 ## Quitter une boucle avec break
 
-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.
+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)&nbsp;: 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.
 
 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.
 
@@ -298,7 +298,7 @@ Maintenant sur le JavaScript :
 
 ```js
 const contacts = ['Chris:2232322', 'Sarah:3453456', 'Bill:7654322', 'Mary:9998769', 'Dianne:9384975'];
-const paragraphe = document.querySelector('p');
+const para = document.querySelector('p');
 const input = document.querySelector('input');
 const bouton = document.querySelector('button');
 
@@ -309,10 +309,10 @@ bouton.addEventListener('click', function() {
   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] + '.';
+      para.textContent = splitContact[0] + '\'s number is ' + splitContact[1] + '.';
       break;
     } else {
-      paragraphe.textContent = 'Contact not found.';
+      para.textContent = 'Contact not found.';
     }
   }
 });
@@ -337,7 +337,7 @@ bouton.addEventListener('click', function() {
 
     <script>
     const contacts = ['Chris:2232322', 'Sarah:3453456', 'Bill:7654322', 'Mary:9998769', 'Dianne:9384975'];
-    const paragraphe = document.querySelector('p');
+    const para = document.querySelector('p');
     const input = document.querySelector('input');
     const bouton = document.querySelector('button');
 
@@ -348,10 +348,10 @@ bouton.addEventListener('click', function() {
       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] + '.';
+          para.textContent = splitContact[0] + '\'s number is ' + splitContact[1] + '.';
           break;
         } else {
-          paragraphe.textContent = 'Contact not found.';
+          para.textContent = 'Contact not found.';
         }
       }
     });
@@ -361,7 +361,7 @@ bouton.addEventListener('click', function() {
 </html>
 ```
 
-{{ EmbedLiveSample('Résultat', '100%', 100) }}
+{{EmbedLiveSample('', '100%', 100)}}
 
 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.
@@ -370,7 +370,7 @@ bouton.addEventListener('click', function() {
 
     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.
+    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.
 
 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.
 
@@ -391,7 +391,7 @@ for (let i = 1; i <= num; i++) {
     continue;
   }
 
-  paragraphe.textContent += i + ' ';
+  para.textContent += i + ' ';
 }
 ```
 
@@ -413,12 +413,12 @@ Ici la sortie :
   <p>Output: </p>
 
     <script>
-    const paragraphe = document.querySelector('p');
+    const para = document.querySelector('p');
     const input = document.querySelector('input');
     const bouton = document.querySelector('button');
 
     bouton.addEventListener('click', function() {
-      paragraphe.textContent = 'Output: ';
+      para.textContent = 'Output: ';
       let num = input.value;
       input.value = '';
       input.focus();
@@ -428,7 +428,7 @@ Ici la sortie :
           continue;
         }
 
-        paragraphe.textContent += i + ' ';
+        para.textContent += i + ' ';
       }
     });
     </script>
@@ -437,12 +437,12 @@ Ici la sortie :
 </html>
 ```
 
-{{ EmbedLiveSample('Passer_des_itérations_avec_continue', '100%', 100) }}
+{{EmbedLiveSample('', '100%', 100)}}
 
 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é).
+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/sqrt0, 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.
+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.
 
 > **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)).
 
@@ -459,7 +459,7 @@ D'abord, regardons la boucle [while](/fr/docs/Web/JavaScript/Reference/Instructi
       final-expression
     }
 
-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`.
+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`.
 
 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.
 
@@ -481,7 +481,7 @@ while (i < cats.length) {
 
 > **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).
 
-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 :
+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 :
 
     initializer
     do {
@@ -490,11 +490,11 @@ La boucle[ do...while](/fr/docs/Web/JavaScript/Reference/Instructions/do...while
       final-expression
     } while (exit-condition)
 
-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.
+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.
 
 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é ).
 
-Réécrivons notre exemple de listing de chat pour utiliser une boucle `do ... while `:
+Réécrivons notre exemple de listing de chat pour utiliser une boucle `do ... while`&nbsp;:
 
 ```js
 let i = 0;
@@ -521,11 +521,11 @@ Dans cet exercice, nous vous proposons d'écrire un compte à rebours de lanceme
 - 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.
+  - `const para = 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.
+  - `para.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 = )`
+- 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 : `para.textContent = )`
 
   - Si le nombre est 10, écrire "Countdown 10" dans le paragraphe.
   - Si le nombre est 0, écrire "Blast off!" dans le paragraphe.
@@ -548,8 +548,8 @@ output.innerHTML = '';
 
 // let i = 10;
 
-// const paragraphe = document.createElement('p');
-// paragraphe.textContent = ;
+// const para = document.createElement('p');
+// para.textContent = ;
 // output.appendChild(para);
 </textarea>
 
@@ -637,9 +637,9 @@ textarea.onkeyup = function(){
 };
 ```
 
-{{ EmbedLiveSample('Apprentissage_actif_Lancer_le_compte_à_rebours', '100%', 780) }}
+{{EmbedLiveSample('', '100%', 780)}}
 
-## Apprentissage actif : remplir une liste d'invités.
+## Apprentissage actif : remplir une liste d'invités
 
 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.
 
@@ -657,7 +657,7 @@ Nous vous avons déjà fourni les éléments suivants :
 - `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`.
 
-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.
+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.
 
 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.
 
@@ -792,7 +792,7 @@ textarea.onkeyup = function(){
 };
 ```
 
-{{ EmbedLiveSample("Apprentissage_actif_remplir_une_liste_d'invités.", '100%', 580) }}
+{{EmbedLiveSample("", '100%', 580)}}
 
 ## Quel type de boucle utiliser ?
 
@@ -830,7 +830,7 @@ Nous recommandons `for`, au moins pour commencer, car elle est probablement la 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 !
 
-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.
+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.
 
 ## Voir aussi
 
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 c93c4c94a6..f801f4c918 100644
--- a/files/fr/learn/javascript/building_blocks/return_values/index.md
+++ b/files/fr/learn/javascript/building_blocks/return_values/index.md
@@ -58,7 +58,7 @@ Nous avons vu ce bloc de code dans notre premier article sur les fonctions. Nous
 
 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.
 
-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 !
+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 !
 
 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.
 
diff --git a/files/fr/learn/javascript/client-side_web_apis/introduction/index.md b/files/fr/learn/javascript/client-side_web_apis/introduction/index.md
index b547ca5265..9dd6990199 100644
--- a/files/fr/learn/javascript/client-side_web_apis/introduction/index.md
+++ b/files/fr/learn/javascript/client-side_web_apis/introduction/index.md
@@ -87,8 +87,8 @@ Il y a un beaucoup d'API disponibles dans les navigateurs modernes. Elles permet
 En particulier, voici les catégories d'API de navigateur les plus courantes que vous utiliserez (et que nous allons voir dans ce module plus en détail) :
 
 - **Les API pour manipuler des documents** chargés dans le navigateur. L'exemple le plus évident est l'[API DOM (_Document Object Model_)](/fr/docs/Web/API/Document_Object_Model). Elle permet de manipuler le HTML et CSS — créer, supprimer et modifier du code HTML, appliquer de nouveaux styles à votre page dynamiquement, etc. Par exemple, chaque fois que vous voyez une fenêtre pop-up apparaître sur une page, ou qu'un nouveau contenu affiché, c'est que le DOM est en action. Découvrez-en plus sur ces types d'API dans la rubrique [Manipuler des documents](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents).
-- **Les API pour récupérer des données du serveur**, afin de mettre à jour des sections d'une page Web, sont couramment utilisées. Ce détail apparemment anodin a eu un impact énorme sur les performances et le comportement des sites — si vous avez juste besoin de mettre à jour une liste de produits ou afficher de nouveaux articles disponibles, le faire instantanément sans avoir à recharger toute la page du serveur peut rendre le site ou l'application beaucoup plus réactif et « accrocheur ». [XMLHttpRequest ](/fr/docs/Web/API/XMLHttpRequest)et l'[API Fetch](/fr/docs/Web/API/Fetch_API) sont les API qui rendent ça possible. Vous verrez aussi peut-être le terme **Ajax** pour qualifier cette technique. Pour en savoir plus sur ces API, voir [Récupérer des données du serveur.](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data)
-- **Les API pour dessiner et manipuler des graphiques** sont maintenant couramment prises en charge dans les navigateurs — les plus populaires sont [Canvas ](/fr/docs/Web/API/Canvas_API)et [WebGL](/fr/docs/Web/API/WebGL_API). Elles permettent la mise à jour, par programmation, des pixels contenus dans un élément HTML [`<canvas>`](/fr/docs/Web/HTML/Element/canvas) pour créer des scènes 2D et 3D. Par exemple, vous pouvez dessiner des formes comme des rectangles ou des cercles, importer une image sur le canevas, et lui appliquer un filtre sépia ou niveau de gris à l'aide de l'API Canvas ou encore créer une scène 3D complexe avec éclairage et textures en utilisant WebGL. De telles API sont souvent combinées avec d'autres API, par exemple [`window.requestAnimationFrame()`](/fr/docs/Web/API/Window/requestAnimationFrame), pour créer des boucles d'animation (faire des mises à jour continues de scènes) et ainsi créer des dessins animés et des jeux. Pour en savoir plus sur ces API, voir [Dessiner des éléments graphiques](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics).
+- **Les API pour récupérer des données du serveur**, afin de mettre à jour des sections d'une page Web, sont couramment utilisées. Ce détail apparemment anodin a eu un impact énorme sur les performances et le comportement des sites — si vous avez juste besoin de mettre à jour une liste de produits ou afficher de nouveaux articles disponibles, le faire instantanément sans avoir à recharger toute la page du serveur peut rendre le site ou l'application beaucoup plus réactif et « accrocheur ». [XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest) et l'[API Fetch](/fr/docs/Web/API/Fetch_API) sont les API qui rendent ça possible. Vous verrez aussi peut-être le terme **Ajax** pour qualifier cette technique. Pour en savoir plus sur ces API, voir [Récupérer des données du serveur.](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data)
+- **Les API pour dessiner et manipuler des graphiques** sont maintenant couramment prises en charge dans les navigateurs — les plus populaires sont [Canvas](/fr/docs/Web/API/Canvas_API) et [WebGL](/fr/docs/Web/API/WebGL_API). Elles permettent la mise à jour, par programmation, des pixels contenus dans un élément HTML [`<canvas>`](/fr/docs/Web/HTML/Element/canvas) pour créer des scènes 2D et 3D. Par exemple, vous pouvez dessiner des formes comme des rectangles ou des cercles, importer une image sur le canevas, et lui appliquer un filtre sépia ou niveau de gris à l'aide de l'API Canvas ou encore créer une scène 3D complexe avec éclairage et textures en utilisant WebGL. De telles API sont souvent combinées avec d'autres API, par exemple [`window.requestAnimationFrame()`](/fr/docs/Web/API/Window/requestAnimationFrame), pour créer des boucles d'animation (faire des mises à jour continues de scènes) et ainsi créer des dessins animés et des jeux. Pour en savoir plus sur ces API, voir [Dessiner des éléments graphiques](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics).
 - **Les API audio et vidéo** comme [`HTMLMediaElement`](/fr/docs/Web/API/HTMLMediaElement), [Web Audio API](/fr/docs/Web/API/Web_Audio_API) ou [WebRTC](/fr/docs/Web/API/WebRTC_API), permettent de faire des choses vraiment intéressantes avec du multimédia, telles que la création de contrôles UI personnalisées pour jouer de l'audio et vidéo, l'affichage de textes comme des légendes et des sous-titres, la récupération de vidéos depuis votre webcam pour l'afficher sur l'ordinateur d'une autre personne dans une visio‑conférence ou encore l'ajout d'effets sur des pistes audio (tels que le gain, la distorsion, la balance, etc.). Pour en savoir plus sur ces API, voir [API audio et vidéo](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs).
 - **Les API de périphérique** permettent essentiellement de manier et récupérer des données à partir de périphériques modernes, de manière utile pour les applications Web. Nous avons déjà parlé de l'API de géolocalisation accédant aux données d'emplacement de l'appareil afin que vous puissiez repérer votre position sur une carte. Autres exemples : indiquer à l'utilisateur qu'une mise à jour est disponible pour une application Web via des notifications système (voir l'[API Notifications](/fr/docs/Web/API/Notifications_API)) ou des vibrations (voir l'[API Vibration](/fr/docs/Web/API/Vibration_API)).
 - **Les API de stockage côté client** deviennent de plus en plus répandues dans les navigateurs Web — la possibilité de stocker des données côté client est très utile si vous souhaitez créer une application qui enregistre son état entre les chargements de page, et peut-être même fonctionner lorsque le périphérique est hors ligne. Il existe un certain nombre d'options disponibles, par exemple le simple stockage nom/valeur avec l'[API Web Storage](/fr/docs/Web/API/Web_Storage_API), et le stockage plus complexe de données tabulaires avec l'[API IndexedDB](/fr/docs/Web/API/IndexedDB_API). Pour en savoir plus sur ces API, voir [Stockage côté client](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage).
diff --git a/files/fr/learn/javascript/first_steps/a_first_splash/index.md b/files/fr/learn/javascript/first_steps/a_first_splash/index.md
index 4964b628aa..8d609a1857 100644
--- a/files/fr/learn/javascript/first_steps/a_first_splash/index.md
+++ b/files/fr/learn/javascript/first_steps/a_first_splash/index.md
@@ -266,7 +266,7 @@ Les fonctions sont des blocs de code réutilisables que vous pouvez écrire une
 
 Quand nous voulons exécuter le code, nous saisissons le nom de la fonction suivi des parenthèses.
 
-Essayez. Enregistrez le code et actualisez la page du navigateur. Puis, allez dans les[ outils de développement et la console JavaScript ](/fr/Apprendre/D%C3%A9couvrir_outils_d%C3%A9veloppement_navigateurs)et entrez la ligne suivante :
+Essayez. Enregistrez le code et actualisez la page du navigateur. Puis, allez dans les [outils de développement et la console JavaScript](/fr/Apprendre/D%C3%A9couvrir_outils_d%C3%A9veloppement_navigateurs) et entrez la ligne suivante :
 
 ```js
 checkGuess();
@@ -280,7 +280,7 @@ Après avoir pressé <kbd>Entrée</kbd> ou <kbd>Retour</kbd>, vous devriez voir
 
 Les opérateurs en JavaScript nous permettent d'effectuer des tests, de faire des calculs, de joindre des chaînes ensemble et d'autres choses de ce genre.
 
-Si vous ne l'avez pas déjà fait, sauvegardez ce code, actualisez la page affichée dans le navigateur et ouvrez les[ outils de développement et la console Javascript](/fr/Apprendre/D%C3%A9couvrir_outils_d%C3%A9veloppement_navigateurs). Ensuite, vous pouvez saisir les exemples ci‑dessous — saisissez chacun dans les colonnes « Exemple » exactement comme indiqué, en appuyant sur la touche <kbd>Entrée</kbd> du clavier après chacun et regardez le résultat renvoyé. Si vous n'avez pas facilement accès aux outils de développement du navigateur, vous pouvez toujours utiliser la console intégrée ci-dessous :
+Si vous ne l'avez pas déjà fait, sauvegardez ce code, actualisez la page affichée dans le navigateur et ouvrez les [outils de développement et la console Javascript](/fr/Apprendre/D%C3%A9couvrir_outils_d%C3%A9veloppement_navigateurs). Ensuite, vous pouvez saisir les exemples ci‑dessous — saisissez chacun dans les colonnes « Exemple » exactement comme indiqué, en appuyant sur la touche <kbd>Entrée</kbd> du clavier après chacun et regardez le résultat renvoyé. Si vous n'avez pas facilement accès aux outils de développement du navigateur, vous pouvez toujours utiliser la console intégrée ci-dessous :
 
 ```html hidden
 <!DOCTYPE html>
@@ -612,7 +612,7 @@ Dans ce cas particulier, nous avons d'abord créé une variable `guessField` qui
 let guessField = document.querySelector('.guessField');
 ```
 
-Pour obtenir cette référence, nous avons utilisé la méthode {{domxref("document.querySelector", "querySelector()")}} de l'objet {{domxref ("document")}}. `querySelector()` prend une information - un [sélecteur CSS ](/fr/docs/Apprendre/CSS/Introduction_à_CSS/Les_sélecteurs)qui sélectionne l'élément auquel vous voulez faire référence.
+Pour obtenir cette référence, nous avons utilisé la méthode {{domxref("document.querySelector", "querySelector()")}} de l'objet {{domxref ("document")}}. `querySelector()` prend une information - un [sélecteur CSS](/fr/docs/Apprendre/CSS/Introduction_à_CSS/Les_sélecteurs) qui sélectionne l'élément auquel vous voulez faire référence.
 
 Parce que `guessField` contient maintenant une référence à un élément {{htmlelement ("input")}}, il aura maintenant accès à un certain nombre de propriétés (essentiellement des variables stockées dans des objets, dont certaines ne peuvent pas être modifiées) et des méthodes (essentiellement des fonctions stockées dans des objets). Une méthode disponible pour entrer des éléments est `focus()`, donc nous pouvons maintenant utiliser cette ligne pour focaliser l'entrée de texte :
 
@@ -666,6 +666,6 @@ Chaque élément d'une page possède une propriété de `style` , qui contient e
 
 ## C'est fini pour le moment...
 
-Vous voilà parvenu au bout de cet exemple, bravo ! Essayez votre code enfin complété ou[ jouez avec notre version finale ici](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game.html). Si vous ne parvenez pas à faire fonctionner l'exemple, vérifiez-le par rapport [au code source.](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game.html)
+Vous voilà parvenu au bout de cet exemple, bravo ! Essayez votre code enfin complété ou [jouez avec notre version finale ici](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game.html). Si vous ne parvenez pas à faire fonctionner l'exemple, vérifiez-le par rapport [au code source.](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game.html)
 
 {{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}
diff --git a/files/fr/learn/javascript/first_steps/arrays/index.md b/files/fr/learn/javascript/first_steps/arrays/index.md
index e92f6f357f..38cb54ddef 100644
--- a/files/fr/learn/javascript/first_steps/arrays/index.md
+++ b/files/fr/learn/javascript/first_steps/arrays/index.md
@@ -226,7 +226,7 @@ Vous en apprendrez plus sur les boucles dans un prochain article, mais, en résu
 
 1.  Commencer la boucle à l'élément 0 du tableau.
 2.  Arrêter de tourner quand le dernier élément du tableau sera atteint. Cela fonctionne pour n'importe quelle dimension de tableau ; dans notre cas, on sortira de la boucle à l'élément  7 (c'est bon, car le dernier élément — que nous souhaitons que la boucle traite — est le 6).
-3.  Afficher chaque élément sur la console de l'explorateur avec` console.log()`.
+3.  Afficher chaque élément sur la console de l'explorateur avec `console.log()`.
 
 ## Quelques méthodes utiles pour les tableaux
 
@@ -337,7 +337,7 @@ Premièrement, pour ajouter ou supprimer un élément à la fin du tableau, vous
 Revenons à l'exemple que nous avons décrit plus haut — afficher les noms des produits et leurs prix pour un envoi, puis faire le total des prix et l'afficher à la fin de la liste. Dans l'exemple modifiable ci‑dessous, il y a des commentaires numérotés — chacun d'entre eux marque l'emplacement où vous devez ajouter quelque chose au code. Voici :
 
 1.  Sous le commentaire `// number 1` il y a un certain nombre de chaînes de caractères, chacune précise le nom d'un produit et son prix séparé par deux‑points. Placez‑les dans un tableau ; enregistrez‑le sous le nom `products`.
-2.  Sur la même ligne que le commentaire `// number 2` se trouve le début d'une boucle. Dans cette ligne nous avons actuellement `i <= 0`, test conditionnel qui fait que la [ boucle](/fr/docs/Learn/JavaScript/First_steps/A_first_splash#loops) stoppe immédiatement, car ce test dit « stopper dès que `i` est inférieur ou égal à 0 » et `i` part de 0. Remplacez ce test par un qui  n'arrêtera pas la boucle tant que `i` sera inférieur à la taille du tableau `products`.
+2.  Sur la même ligne que le commentaire `// number 2` se trouve le début d'une boucle. Dans cette ligne nous avons actuellement `i <= 0`, test conditionnel qui fait que la [boucle](/fr/docs/Learn/JavaScript/First_steps/A_first_splash#loops) stoppe immédiatement, car ce test dit « stopper dès que `i` est inférieur ou égal à 0 » et `i` part de 0. Remplacez ce test par un qui  n'arrêtera pas la boucle tant que `i` sera inférieur à la taille du tableau `products`.
 3.  Au dessous du commentaire `// number 3` nous voudrions que vous écriviez une ligne de code qui scinde l'élément courant du tableau (`nom:prix`) en deux éléments distincts, un contenant uniquement le nom, l'autre uniquement le prix. Si vous nous ne savez pas trop comment faire, revoyez l'article relatif aux [Méthodes utiles pour les chaînes de caractères](/fr/docs/Learn/JavaScript/First_steps/Useful_string_methods) pour vous aider, ou même mieux, regardez la section {{anch("Converting between strings and arrays")}} de cet article.
 4.  En plus des lignes de code ci‑dessus, vous aurez aussi à convertir les prix de chaîne de caractères en chiffres. Si vous ne vous souvenez pas comment faire, revoyez le [premier article à propos des chaînes](/fr/docs/Learn/JavaScript/First_steps/Strings#numbers_versus_strings).
 5.  Il y a une variable nommée `total` créée et initialisée à la valeur de 0 en tête du code. Dans la boucle (sous `// number 4`) ajoutez une ligne qui ajoute à ce total le prix de l'article courant  à chaque itération de la boucle, de sorte que à la fin du code le prix total soit correctement inscrit sur l'envoi. Vous pourriez avoir besoin d'un [opérateur d'assignation](/fr/docs/Learn/JavaScript/First_steps/Math#assignment_operators) pour faire cela ;-).
diff --git a/files/fr/learn/javascript/first_steps/math/index.md b/files/fr/learn/javascript/first_steps/math/index.md
index 33e7c0acda..c7f77d2fe1 100644
--- a/files/fr/learn/javascript/first_steps/math/index.md
+++ b/files/fr/learn/javascript/first_steps/math/index.md
@@ -373,7 +373,7 @@ function updateBtn() {
 
 Vous pouvez voir l'utilisation de l'opérateur d'égalité stricte dans la fonction `updateBtn()`. Dans ce cas, nous ne testons pas si deux expressions mathématiques ont la même valeur — nous testons si le contenu textuel d'un bouton contient une certaine chaîne — mais c'est toujours le même principe. Si le bouton affiche « Démarrer la machine » quand on le presse, nous changeons son étiquette en « Arrêter la machine » et mettons à jour l'étiquette comme il convient. Si le bouton indique « Arrêter la machine » au moment de le presser, nous basculons l'étiquette à nouveau.
 
-> **Note :** Un contrôle qui alterne entre deux états porte généralement le nom de **toggle** (bascule). Il bascule d'un état l'autre — allumé, éteint, etc.
+> **Note :** Un contrôle qui alterne entre deux états porte généralement le nom de **toggle** (bascule). Il bascule d'un état à l'autre — allumé, éteint, etc.
 
 ## Résumé
 
diff --git a/files/fr/learn/javascript/first_steps/silly_story_generator/index.md b/files/fr/learn/javascript/first_steps/silly_story_generator/index.md
index e8d8789c62..c24a27df3d 100644
--- a/files/fr/learn/javascript/first_steps/silly_story_generator/index.md
+++ b/files/fr/learn/javascript/first_steps/silly_story_generator/index.md
@@ -66,7 +66,7 @@ Installation basique :
 
 Variables initiales et fonctions :
 
-1.  Dans le fichier de texte brut, copiez tout le code présent sous le titre "1. COMPLETE VARIABLE AND FUNCTION DEFINITIONS" et collez-le en haut du fichier `main`. Cela vous donne trois variables qui stockent les références respectivement vers le champ "Enter custom name", vers le bouton "Generate random story" (`randomize`), et vers la balise {{htmlelement("p")}} en bas du corps HTML dans lequel l'histoire sera copiée (`story`). Par ailleurs, vous avez une fonction appelée `randomValueFromArray() `qui prend une table, et qui renvoie au hasard l'un des éléments qu'elle contient.
+1.  Dans le fichier de texte brut, copiez tout le code présent sous le titre "1. COMPLETE VARIABLE AND FUNCTION DEFINITIONS" et collez-le en haut du fichier `main`. Cela vous donne trois variables qui stockent les références respectivement vers le champ "Enter custom name", vers le bouton "Generate random story" (`randomize`), et vers la balise {{htmlelement("p")}} en bas du corps HTML dans lequel l'histoire sera copiée (`story`). Par ailleurs, vous avez une fonction appelée `randomValueFromArray()` qui prend une table, et qui renvoie au hasard l'un des éléments qu'elle contient.
 2.  Maintenant regardons la deuxième section du fichier de texte brut : "2. RAW TEXT STRINGS". Cette section contient des chaînes de caractères qui vont se comporter comme des entrées (_input_) dans notre program. L'idée est que vous intégriez ces variables internes dans `main.js`:
 
     1.  Stockez la première longue chaîne de caractères (string) dans la variable `storyText`.
@@ -92,7 +92,7 @@ Compléter la fonction `result()` :
 
     1.  Cherchez la formule pour convertir les pounds en stones et les fareinheit en centigrades.
     2.  Dans la ligne qui définit la variable `weight` (poids), remplacez 300 par un calcul qui convertit 300 pounds en stones. Le tout englobé dans un `Math.round()` à la fin duquel vous concatenez `'stone'`.
-    3.  Dans la ligne qui définit la variable `temperature`, remplacez 94 par un calcul qui convertit 94 fahrenheit en centigrades. Le tout englobé dans un `Math.round()` à la fin duquel vous concatenez` 'centigrade'`.
+    3.  Dans la ligne qui définit la variable `temperature`, remplacez 94 par un calcul qui convertit 94 fahrenheit en centigrades. Le tout englobé dans un `Math.round()` à la fin duquel vous concatenez `'centigrade'`.
     4.  Juste sous la définition des deux variables, ajoutez deux lignes de remplacement de chaînes supplémentaires qui remplacent '94 farhenheit' par les contenus de la variable `temperature`, et '300 pounds' par les contenus de la variable `weight`.
 
 6.  Enfin, dans l'antépénultième ligne de la fonction, faites en sorte que la propriété `textContent` de la variable `story` (qui référence le paragraphe) soit égale à `newStory`.
diff --git a/files/fr/learn/javascript/first_steps/strings/index.md b/files/fr/learn/javascript/first_steps/strings/index.md
index beaac08ec1..7ee4808221 100644
--- a/files/fr/learn/javascript/first_steps/strings/index.md
+++ b/files/fr/learn/javascript/first_steps/strings/index.md
@@ -34,7 +34,7 @@ Les mots ont beaucoup d'importance pour les humains — ils occupent une large p
 
 ## Chaînes de caractères — les bases
 
-À première vue, les chaînes se traitent de la même manière que les nombres ; mais si vous approfondissez la chose, vous commencerez à percevoir des différences notables. Entrons sur la console quelques lignes simples pour nous familiariser avec la chose. À propos de la console, nous en avons placé une ci‑dessous (vous pouvez  [l'ouvrir](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html) dans un onglet ou une fenêtre séparée, ou bien utiliser celle de [l'explorateur, ](/fr/docs/Learn/Common_questions/What_are_browser_developer_tools)comme vous préférez).
+À première vue, les chaînes se traitent de la même manière que les nombres ; mais si vous approfondissez la chose, vous commencerez à percevoir des différences notables. Entrons sur la console quelques lignes simples pour nous familiariser avec la chose. À propos de la console, nous en avons placé une ci‑dessous (vous pouvez  [l'ouvrir](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html) dans un onglet ou une fenêtre séparée, ou bien utiliser celle de [l'explorateur](/fr/docs/Learn/Common_questions/What_are_browser_developer_tools); comme vous préférez).
 
 ```html hidden
 <!DOCTYPE html>
diff --git a/files/fr/learn/javascript/first_steps/useful_string_methods/index.md b/files/fr/learn/javascript/first_steps/useful_string_methods/index.md
index 0ff7cd44d7..6ee07beb5c 100644
--- a/files/fr/learn/javascript/first_steps/useful_string_methods/index.md
+++ b/files/fr/learn/javascript/first_steps/useful_string_methods/index.md
@@ -51,7 +51,7 @@ let string = 'Ceci est une chaîne';
 
 votre variable devient une instance de l'objet `String`, et par conséquent possède un grand nombre de propriétés et de méthodes associées. Allez sur la page de l'objet {{jsxref("String")}} et regardez la liste sur le côté de la page !
 
-**Avant que votre cervelle ne commence à bouillir, pas de panique !** Vous n'avez vraiment pas besoin de connaître la plupart des méthodes de cette liste au début de cet apprentissage. Mais il est probable que vous utiliserez  certaines assez souvent. Nous allons les voir maintenant.
+**Avant que votre cervelle ne commence à bouillir, pas de panique !** Vous n'avez vraiment pas besoin de connaître la plupart des méthodes de cette liste au début de cet apprentissage. Mais il est probable que vous en utiliserez certaines assez souvent. Nous allons les voir maintenant.
 
 Entrez quelques exemples dans une console vierge. En voici une ci-dessous (vous pouvez aussi [ouvrir cette console](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html) dans un onglet ou une fenêtre séparés, ou utiliser la [console de développement du navigateur](/fr/docs/Learn/Common_questions/What_are_browser_developer_tools) si vous préférez).
 
@@ -254,7 +254,7 @@ La méthode prend deux paramètres — la chaîne que vous voulez remplacer et l
 browserType.replace('moz','van');
 ```
 
-À noter : pour que, dans un programme réel, la variable `browserType` reflète effectivement la valeur actualisée, il faut assigner à la valeur de la variable le résultat de l'opération ; cette dernière ne met pas à jour automatiquement la valeur de la sous-chaîne. Pour ce faire, il faut écrire :` browserType = browserType.replace('moz','van');`
+À noter : pour que, dans un programme réel, la variable `browserType` reflète effectivement la valeur actualisée, il faut assigner à la valeur de la variable le résultat de l'opération ; cette dernière ne met pas à jour automatiquement la valeur de la sous-chaîne. Pour ce faire, il faut écrire : `browserType = browserType.replace('moz','van');`.
 
 ## Apprendre en pratiquant
 
diff --git a/files/fr/learn/javascript/first_steps/what_is_javascript/index.md b/files/fr/learn/javascript/first_steps/what_is_javascript/index.md
index 072084dc21..a57bb397aa 100644
--- a/files/fr/learn/javascript/first_steps/what_is_javascript/index.md
+++ b/files/fr/learn/javascript/first_steps/what_is_javascript/index.md
@@ -108,7 +108,7 @@ Elles se divisent généralement en deux catégories :
 - l'[API DOM (Document Object Model)](/fr/docs/Web/API/Document_Object_Model) permet de manipuler du HTML et du CSS (créer, supprimer et modifier du HTML, appliquer de nouveaux styles à la page de façon dynamique, etc.). Chaque fois que vous voyez une fenêtre popup sur une page ou du nouveau contenu apparaître (comme dans notre démonstration plus haut), il s'agit d'une action du DOM.
 - l'[API de géolocalisation](/fr/docs/Web/API/Geolocation) récupère des informations géographiques. C'est ainsi que [Google Maps](https://www.google.com/maps) peut trouver votre position et la situer sur une carte.
 - les API [Canvas](/fr/docs/Web/API/Canvas_API) et [WebGL](/fr/docs/Web/API/WebGL_API) permettent de créer des animations 2D et 3D. On fait des choses incroyables avec ces technologies, voyez [Chrome Experiments](https://www.chromeexperiments.com/webgl) et [webglsamples](https://webglsamples.org/).
-- [les API Audio et Video](/fr/docs/Web/Apps/Fundamentals/Audio_and_video_delivery), comme {{domxref("HTMLMediaElement")}} et [WebRTC](/fr/docs/Web/API/WebRTC_API) permettent des actions intéressantes sur le multimédia, telles que jouer de l'audio ou de la vidéo directement dans une page web, ou récupérer le flux vidéo de votre webcam et l'afficher sur l'ordinateur de quelqu'un d'autre (essayez la [Snapshot demo ](http://chrisdavidmills.github.io/snapshot/)pour vous faire une idée).
+- [les API Audio et Video](/fr/docs/Web/Apps/Fundamentals/Audio_and_video_delivery), comme {{domxref("HTMLMediaElement")}} et [WebRTC](/fr/docs/Web/API/WebRTC_API) permettent des actions intéressantes sur le multimédia, telles que jouer de l'audio ou de la vidéo directement dans une page web, ou récupérer le flux vidéo de votre webcam et l'afficher sur l'ordinateur de quelqu'un d'autre (essayez la [Snapshot demo](http://chrisdavidmills.github.io/snapshot/) pour vous faire une idée).
 
 > **Note :** Beaucoup des exemples ci-dessus ne fonctionneront pas dans un ancien navigateur. Il vaut mieux utiliser un navigateur moderne comme Firefox, Chrome, Edge ou Opera pour exécuter votre code et faire vos tests. Si vous êtes amené à écrire du code de production (c'est-à-dire destiné à de véritables utilisateurs), il vous faudra prendre en compte la compatibilité pour différents navigateurs.
 
@@ -172,7 +172,7 @@ Chaque approche a ses avantages, ce que nous ne développerons pas pour l'instan
 
 Vous pouvez aussi rencontrer les termes de code **côté serveur** et **côté client**, notamment dans le contexte du développement web. Le code **côté client** est du code exécuté sur l'ordinateur de l'utilisateur : quand une page web est vue, le code côté client de la page est téléchargé, puis exécuté et affiché par le navigateur. Dans ce module JavaScript, nous parlons explicitement de **JavaScript côté client**.
 
-Le code **côté serveur** quant à lui est exécuté sur le serveur, puis ses résultats sont téléchargés et affichés par le navigateur. Citons comme langages web côté serveur populaires le PHP, Python, Ruby, et ASP.NET. Et JavaScript ! JavaScript peut aussi s'utiliser comme un langage **côté serveur**, par exemple dans le populaire environnement Node.js — vous pouvez en apprendre plus sur le JavaScript côté serveur dans notre article[ Programmation de Sites Web côté serveur](/fr/docs/Learn/Server-side).
+Le code **côté serveur** quant à lui est exécuté sur le serveur, puis ses résultats sont téléchargés et affichés par le navigateur. Citons comme langages web côté serveur populaires le PHP, Python, Ruby, et ASP.NET. Et JavaScript ! JavaScript peut aussi s'utiliser comme un langage **côté serveur**, par exemple dans le populaire environnement Node.js — vous pouvez en apprendre plus sur le JavaScript côté serveur dans notre article [Programmation de Sites Web côté serveur](/fr/docs/Learn/Server-side).
 
 ### Code dynamique contre code statique
 
diff --git a/files/fr/learn/javascript/objects/json/index.md b/files/fr/learn/javascript/objects/json/index.md
index 3204451a86..78b6610785 100644
--- a/files/fr/learn/javascript/objects/json/index.md
+++ b/files/fr/learn/javascript/objects/json/index.md
@@ -356,7 +356,7 @@ Dans cet article, nous vous donnons un manuel simple pour utiliser le JSON da
 - [La page de référence sur l'objet JSON](/fr/docs/Web/JavaScript/Reference/Global_Objects/JSON)
 - [La page de référence sur l'objet XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest)
 - [Utiliser XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest)
-- [Les méthodes de requêtes HTTP ](/fr/docs/Web/HTTP/Methods)
+- [Les méthodes de requêtes HTTP](/fr/docs/Web/HTTP/Methods)
 - [Le site web officiel  avec un lien vers les normes de l' ECMA](http://json.org)
 
 {{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}
diff --git a/files/fr/learn/javascript/objects/object_building_practice/index.md b/files/fr/learn/javascript/objects/object_building_practice/index.md
index 858880b11b..423894d001 100644
--- a/files/fr/learn/javascript/objects/object_building_practice/index.md
+++ b/files/fr/learn/javascript/objects/object_building_practice/index.md
@@ -53,7 +53,7 @@ Dans cet article, nous écrirons une démo classique de "balles bondissantes", p
 
 ![](bouncing-balls.png)
 
-Cet exemple utilise l'[API Canvas ](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics) pour dessiner les balles sur l'écran, et l'API [requestAnimationFrame](/fr/docs/Web/API/window/requestAnimationFrame)  pour animer l'ensemble de l'affichage — Nul besoin d'avoir une connaissance préalable de ces APIs, nous expérons qu'une fois cet article terminé, vous aurez envie d'en faire une exploration approfondie. Tout le long du parcours nous utiliserons certains objets formidables et vous montrerons nombre de techniques sympathiques comme des balles bondissantes sur les murs et la vérification de balles qui s'entrechoquent (encore connue sous l'appelation **détection de collision**).
+Cet exemple utilise l'[API Canvas](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics) pour dessiner les balles sur l'écran, et l'API [requestAnimationFrame](/fr/docs/Web/API/window/requestAnimationFrame)  pour animer l'ensemble de l'affichage — Nul besoin d'avoir une connaissance préalable de ces APIs, nous expérons qu'une fois cet article terminé, vous aurez envie d'en faire une exploration approfondie. Tout le long du parcours nous utiliserons certains objets formidables et vous montrerons nombre de techniques sympathiques comme des balles bondissantes sur les murs et la vérification de balles qui s'entrechoquent (encore connue sous l'appelation **détection de collision**).
 
 Pour commencer, faites des copies locales de nos fichiers [`index.html`](https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/index.html), [`style.css`](https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/style.css), et [`main.js`](https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/main.js). Ces fichiers contiennent respectivement :
 
@@ -132,9 +132,9 @@ En utilisant cette fonction, nous pouvons dire à notre balle de se dessiner sur
 - Ensuite, nous utilisons [`fillStyle`](/fr/docs/Web/API/CanvasRenderingContext2D/fillStyle) pour définir de quelle couleur nous voulons que la forme soit — nous lui attribuons la valeur de la propriété `color` de notre balle.
 - Après, nous utilisons la méthode [`arc()`](/fr/docs/Web/API/CanvasRenderingContext2D/arc) pour tracer une forme en arc sur le papier. Ses paramètres sont :
 
-  - Les positions `x` et `y` du centre de l'arc — nous specifions donc les propriétés `x` et `y `de notre balle.
+  - Les positions `x` et `y` du centre de l'arc — nous specifions donc les propriétés `x` et `y` de notre balle.
   - Le rayon de l'arc — nous specifions la propriété `size` de notre balle.
-  - Les deux derniers paramètres spécifient l'intervalle de début et de fin en degrés pour dessiner l'arc. Ici nous avons spécifié 0 degrés et `2 * PI `qui est l'équivalent de 360 degrés en radians (malheureusement  vous êtes obligés  de spécifier ces valeurs en radians et non en degrés). Cela nous donne un cercle complet. Si vous aviez spécifié seulement  `1 * PI`, vous auriez eu un demi-cercle (180 degrés).
+  - Les deux derniers paramètres spécifient l'intervalle de début et de fin en degrés pour dessiner l'arc. Ici nous avons spécifié 0 degrés et `2 * PI` qui est l'équivalent de 360 degrés en radians (malheureusement  vous êtes obligés  de spécifier ces valeurs en radians et non en degrés). Cela nous donne un cercle complet. Si vous aviez spécifié seulement  `1 * PI`, vous auriez eu un demi-cercle (180 degrés).
 
 - En dernière position nous utilisons la méthode [`fill()`](/fr/docs/Web/API/CanvasRenderingContext2D/fill) qui est habituellement utilisée pour spécifier que nous souhaitons mettre fin au dessin que nous avons commencé avec `beginPath()`, et remplir la surface délimitée avec la couleur que nous avions spécifiée plus tôt avec `fillStyle`.
 
diff --git a/files/fr/learn/javascript/objects/object_prototypes/index.md b/files/fr/learn/javascript/objects/object_prototypes/index.md
index 0db0e6d420..5b8080de3c 100644
--- a/files/fr/learn/javascript/objects/object_prototypes/index.md
+++ b/files/fr/learn/javascript/objects/object_prototypes/index.md
@@ -107,15 +107,15 @@ Ainsi [`Object.prototype.toString()`](/fr/docs/Web/JavaScript/Reference/Global_O
 
 On observe que plusieurs méthodes sont définies au niveau de l'attribut `prototype` d'`Object`, qui seront alors disponibles pour les objets qui héritent d'`Object`, comme nous l'avons vu plus haut.
 
-Vous verrez qu'il existe plein d'exemples de chaine de prototypage dans JavaScript. Vous pouvez essayer de trouver les méthodes et les attributs définis dans les attributs `prototype` des objets globaux comme [`String`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String), [`Date`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Date), [`Number`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number), et ` Array`. Chacun de ces objets possède des éléments au sein de leur attribut prototype. Dès lors que l'on crée une chaine de caractères, comme celle-ci&nbsp;:
+Vous verrez qu'il existe plein d'exemples de chaine de prototypage dans JavaScript. Vous pouvez essayer de trouver les méthodes et les attributs définis dans les attributs `prototype` des objets globaux comme [`String`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String), [`Date`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Date), [`Number`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number), et `Array`. Chacun de ces objets possède des éléments au sein de leur attribut prototype. Dès lors que l'on crée une chaine de caractères, comme celle-ci&nbsp;:
 
 ```js
 let maChaine = 'Ceci est ma chaine de caractères.';
 ```
 
-`maChaine `possède aussitôt plusieurs méthodes utiles pour manipuler les chaines de caractères telles que [`split()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/split), [`indexOf()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf), [`replace()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/replace)…
+`maChaine ` possède aussitôt plusieurs méthodes utiles pour manipuler les chaines de caractères telles que [`split()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/split), [`indexOf()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf), [`replace()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/replace)…
 
-> **Attention :** L'attribut `prototype` est un des éléments JavaScript qui peut le plus prêter à confusion. On pourrait penser qu'il s'agit du prototype objet de l'objet courant mais ça ne l'est pas (on peut y accéder via `__proto__`). L'attribut `prototype `est un attribut qui contient un objet où l'on définit les éléments dont on va pouvoir hériter.
+> **Attention :** L'attribut `prototype` est un des éléments JavaScript qui peut le plus prêter à confusion. On pourrait penser qu'il s'agit du prototype objet de l'objet courant mais ça ne l'est pas (on peut y accéder via `__proto__`). L'attribut `prototype` est un attribut qui contient un objet où l'on définit les éléments dont on va pouvoir hériter.
 
 ## Revenons sur create()