Remove {{page}} from Web/API - Fixes #3882 (#4480)

* update audiobuffersourcenode.buffer

* update audiolistener

* fix svg compression

* biquadfilternode

* customevent

* DataTransfer.clearData

* DeviceOrientationEvent/absolute

* Document

* animate

* error element

* mousedown

* mouseup

* gainnode

* Gamepad API

* Geolocation API

* MediaStreamAudioSourceNode

* navigator.getusermedia

* periodicwave

* webglrenderingcontext

* Various fixes/nitpicking

Co-authored-by: cw118 <87150472+cw118@users.noreply.github.com>

1 files changed, 165 insertions, 140 deletions

diff --git a/files/fr/web/api/gamepad_api/using_the_gamepad_api/index.md b/files/fr/web/api/gamepad_api/using_the_gamepad_api/index.md
index 4004757091..ed328d8982 100644
--- a/files/fr/web/api/gamepad_api/using_the_gamepad_api/index.md
+++ b/files/fr/web/api/gamepad_api/using_the_gamepad_api/index.md
@@ -4,58 +4,54 @@ slug: Web/API/Gamepad_API/Using_the_Gamepad_API
 translation_of: Web/API/Gamepad_API/Using_the_Gamepad_API
 original_slug: Web/Guide/API/Gamepad
 ---
-{{ SeeCompatTable() }}
+{{DefaultAPISidebar("Gamepad API")}}
 
-HTML5 a introduit plusieurs des composants nécessaires pour le développement de jeux vidéos riches et interactifs. Des technologies comme `<canvas>`, WebGL, `<audio>`, et `<video>`, ainsi que les implémentations JavaScript, ont mûri au point de supporter plusieurs fonctions autrefois réservées aux applications natives. L'API Gamepad est une manière pour les développeurs et _`designers`_ d'accéder aux contrôleurs de jeux.
+HTML5 a introduit de nombreuses briques technologiques qui permettent le développement de jeux interactifs. Les fonctionnalités offertes par `<canvas>`, WebGL, `<audio>`, et `<video>`, ainsi que les API JavaScript correspondantes, ont suffisamment gagné en maturité pour réaliser des tâches qui nécessitaient auparavant du code natif. L'API <i lang="en">Gamepad</i> est un outil qui permet d'accéder et d'utiliser les manettes et autres contrôleurs de jeux.
 
-> **Note :** Dans Firefox 29 et plus, l'API Gamepad est activée par défaut, tout comme pour les versions Nightly et Aurora. Depuis Firefox 24, l'API Gamepad était déjà disponible derrière une option dans les préférences. Il est possible de l'activer dans ces versions en ouvrant `about:config` et en activant `dom.gamepad.enabled`.
+L'API [<i lang="en">Gamepad</i>](/fr/docs/Web/API/Gamepad_API) introduit de nouveaux évènements sur l'objet [`Window`](/fr/docs/Web/API/Window) qui permettent de lire l'état de la manette. En plus de ces évènements, l'API ajoute également un objet [`Gamepad`](/fr/docs/Web/API/Gamepad), qui permet de connaître l'état d'une manette connectée et une méthode [`navigator.getGamepads()`](/fr/docs/Web/API/Navigator/getGamepads) qu'on peut utiliser pour obtenir la liste des manettes connues sur la page.
 
-L'API Gamepad introduit de nouveaux évènements à l'objet {{ domxref("Window") }} pour lire l'état des contrôleurs. En plus de ces événements, l'API ajoute aussi un objet {{ domxref("Gamepad") }} que vous pouvez utiliser pour récupérer l'état d'un contrôleur connecté, et une méthode {{ domxref("navigator.getGamepads") }} que vous pouvez utiliser pour obtenir la liste des contrôleurs connus par la page.
+## Connecter une manette
 
-## Connexion au contrôleur
+Lorsqu'une nouvelle manette est connectée à l'ordinateur, la page qui a le focus reçoit d'abord un évènement [`gamepadconnected`](/fr/docs/Web/API/Window/gamepadconnected_event). Si une manette est déjà connectée lorsque la page est chargée, l'évènement [`gamepadconnected`](/fr/docs/Web/API/Window/gamepadconnected_event) est émis sur la page lorsque la personne appuie sur un bouton ou déplace un axe.
 
-Lorsqu'un nouveau contrôleur est connecté à l'ordinateur, la page active reçoit tout d'abord un événement {{ domxref("Window.gamepadconnected") }}. Si un contrôleur est déjà connecté lorsque la page termine de charger, l'événement {{ domxref("Window.gamepadconnected") }} est envoyé à la page active lorsque l'utilisateur appuie sur un bouton ou bouge un axe.
+> **Note :** Dans Firefox, les manettes sont uniquement exposées à la page après qu'il y a eu une interaction de la personne avec la page. Cela permet d'éviter à ce que les manettes soient utilisées pour créer une empreinte, de faciliter le pistage. Une fois qu'une manette a interagi avec la page, les autres manettes connectées seront automatiquement visibles.
 
-Dans Firefox, les contrôleurs ne sont rendus visibles à une page que lorsque l'utilisateur s'en sert alors que cette page est active. Cela permet d'éviter que les contrôleurs soient utilisés pour identifier l'utilisateur. Dès lors qu'un contrôleur a été utilisé, les autres contrôleurs connectés seront rendus visibles automatiquement.
-
-Vous pouvez utiliser {{ domxref("Window.gamepadconnected") }} ainsi :
+On peut utiliser [`gamepadconnected`](/fr/docs/Web/API/Window/gamepadconnected_event) comme ceci&nbsp;:
 
 ```js
 window.addEventListener("gamepadconnected", function(e) {
-  console.log("Contrôleur n°%d connecté : %s. %d boutons, %d axes.",
-  e.gamepad.index, e.gamepad.id,
-  e.gamepad.buttons.length, e.gamepad.axes.length);
+  console.log("Manette connectée à l'indice %d : %s. %d boutons, %d axes.",
+    e.gamepad.index, e.gamepad.id,
+    e.gamepad.buttons.length, e.gamepad.axes.length);
 });
 ```
 
-Chaque contrôleur est associé à un identifiant unique, qui est disponible dans la propriété `gamepad` de l'événement.
-
-> **Note :** À l'écriture de ces lignes, Chrome n'implémente pas les événements {{ domxref("Window.gamepadconnected") }} et {{ domxref("Window.gamepaddisconnected") }}. Vous devez utiliser {{ domxref("navigator.getGamepads") }} pour récupérer la liste des contrôleurs disponibles.
+Chaque manette dispose d'un identifiant unique qui lui est associé et qui est disponible via la propriété [`gamepad`](/fr/docs/Web/API/GamepadEvent/gamepad) de l'évènement.
 
-## Déconnexion du contrôleur
+## Déconnecter une manette
 
-Lorsqu'un contrôleur est déconnecté, et si la page avait déjà reçu des données de ce contrôleur auparavant (par exemple par l'événement {{ domxref("Window.gamepadconnected") }}), un second événement est envoyé à la fenêtre active : {{ domxref("Window.gamepaddisconnected") }}.
+Lorsqu'une manette est déconnectée et si la page avait déjà reçu des données pour cette manette (par exemple avec [`gamepadconnected`](/fr/docs/Web/API/Window/gamepadconnected_event)), un deuxième évènement est envoyé sur la fenêtre, [`gamepaddisconnected`](/fr/docs/Web/API/Window/gamepaddisconnected_event)&nbsp;:
 
 ```js
 window.addEventListener("gamepaddisconnected", function(e) {
-  console.log("Contrôleur n°%d déconnecté : %s",
-  e.gamepad.index, e.gamepad.id);
+  console.log("Manette déconnectée à l'indice %d : %s",
+    e.gamepad.index, e.gamepad.id);
 });
 ```
 
-La propriété `index` sera unique à chaque périphérique connecté au système, même si plusieurs contrôleurs du même type sont utilisés. La propriété correspond également à l'indice du tableau retourné par {{ domxref("navigator.getGamepads") }}.
+La propriété [`index`](/fr/docs/Web/API/Gamepad/index) de l'objet porté par `gamepad` sera unique pour chaque appareil connecté au système, même si plusieurs manettes du même type sont utilisées. La propriété `index` fonctionne également comme l'indice qui peut être utilisé pour parcourir le tableau ([`Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array)) renvoyé par la méthode [`Navigator.getGamepads()`](/fr/docs/Web/API/Navigator/getGamepads).
 
 ```js
-var gamepads = {};
+let gamepads = {};
 
 function gamepadHandler(event, connecting) {
-  var gamepad = event.gamepad;
+  let gamepad = event.gamepad;
   // Note :
   // gamepad === navigator.getGamepads()[gamepad.index]
 
   if (connecting) {
     gamepads[gamepad.index] = gamepad;
-     } else {
+  } else {
     delete gamepads[gamepad.index];
   }
 }
@@ -64,100 +60,108 @@ window.addEventListener("gamepadconnected", function(e) { gamepadHandler(e, true
 window.addEventListener("gamepaddisconnected", function(e) { gamepadHandler(e, false); }, false);
 ```
 
-Cet exemple montre également comment la propriété `gamepad` peut être conservée après que l'événement se soit terminé. Cette technique sera utilisée plus tard pour obtenir l'état du périphérique.
+L'exemple qui précède illustre également comment la propriété `gamepad` peut être retenue après la fin de l'évènement. Nous utiliserons cette technique plus tard pour faire des requêtes sur l'état de l'appareil.
 
-\[PAGE NON TRADUITE DEPUIS ICI...]
+## Utiliser l'objet `Gamepad`
 
-## Querying the Gamepad object
+Comme vous pouvez le voir, les évènements `gamepad` présentés ci-avant incluent une propriété `gamepad` rattachée à l'objet de l'évènement. Cette propriété fournit un objet [`Gamepad`](/fr/docs/Web/API/Gamepad). On peut utiliser cet objet afin de déterminer la manette qui a causé l'évènement (avec son identifiant), car plusieurs manettes pourraient être connectées simultanément. On peut faire bien plus avec cet objet [`Gamepad`](/fr/docs/Web/API/Gamepad), y compris garder une référence vers celui-ci et l'utiliser pour déterminer les boutons et axes utilisés à tout moment. Une telle utilisation est souvent nécessaire pour les jeux ou les pages interactives lorsqu'il faut connaître l'état de la manette à l'instant T et l'état dans lequel elle sera au moment du prochain évènement.
 
-As you can see, the **gamepad** events discussed above include a `gamepad` property on the event object, which returns a {{ domxref("Gamepad") }} object. We can use this in order to determine which gamepad (i.e., its ID) had caused the event, since multiple gamepads might be connected at once. We can do much more with the {{ domxref("Gamepad") }} object, including holding a reference to it and querying it to find out which buttons and axes are being pressed at any one time. Doing so is often desirable for games or other interactive web pages that need to know the state of a gamepad now vs. the next time an event fires.
+Généralement, ces opérations sont effectuées en utilisant un objet [`Gamepad`](/fr/docs/Web/API/Gamepad) avec une boucle d'animation (par exemple avec [`requestAnimationFrame`](/fr/docs/Web/API/Window/requestAnimationFrame)), où on peut développer la logique du jeu afin de choisir quoi faire pour la <i lang="en">frame</i> courante selon l'état de la (ou des) manette(s).
 
-Performing such checks tends to involve using the {{ domxref("Gamepad") }} object in conjunction with an animation loop (e.g., {{ domxref("requestAnimationFrame") }}), where developers want to make decisions for the current frame based on the state of the gamepad or gamepads.
-
-> **Note :** The Gamepad API also provides a function -- {{ domxref("Navigator.getGamepads") }}-- that returns a list of all devices currently visible to the webpage, an array of {{ domxref("Gamepad") }} objects. This can then be used to get the same information. For example, the first code example above you be rewritten as shown below:
+La méthode [`Navigator.getGamepads()`](/fr/docs/Web/API/Navigator/getGamepads) renvoie un tableau de l'ensemble des appareils qui sont actuellement visibles de la page web sous la forme d'objets [`Gamepad`](/fr/docs/Web/API/Gamepad) (la première valeur vaut toujours `null`, et c'est `null` qui est renvoyé s'il n'y a pas de manettes connectées). On peut l'utiliser pour obtenir les mêmes informations. Ainsi, le premier exemple de code ci-avant pourrait être réécrit de la façon suivante&nbsp;:
 
 ```js
 window.addEventListener("gamepadconnected", function(e) {
   var gp = navigator.getGamepads()[e.gamepad.index];
-  console.log("Gamepad connected at index %d: %s. %d buttons, %d axes.",
-  gp.index, gp.id,
-  gp.buttons.length, gp.axes.length);
+  console.log("Manette connectée à l'indice %d : %s. %d boutons, %d axes.",
+    gp.index, gp.id,
+    gp.buttons.length, gp.axes.length);
 });
 ```
 
-The {{ domxref("Gamepad") }} object's properties are as follows:
+Les propriétés d'un objet [`Gamepad`](/fr/docs/Web/API/Gamepad) sont&nbsp;:
 
-- `id`: A string containing some information about the controller. This is not strictly specified, but in Firefox it will contain three pieces of information separated by dashes (`-`): two 4-digit hexadecimal strings containing the USB vendor and product id of the controller, and the name of the controller as provided by the driver. This information is intended to allow you to find a mapping for the controls on the device as well as display useful feedback to the user.
-- `index`: An integer that is unique for each gamepad currently connected to the system. This can be used to distinguish multiple controllers. Note that disconnecting a device and then connecting a new device may reuse the previous index.
-- `mapping`: A string indicating whether the browser has remapped the controls on the device to a known layout. Currently there is only one supported known layout–the [standard gamepad](https://dvcs.w3.org/hg/gamepad/raw-file/default/gamepad.html#remapping). If the browser is able to map controls on the device to that layout the `mapping` property will be set to the string `standard`.
-- `connected`: A boolean indicating whether the gamepad is still connected to the system. If this is so the value is `True`; if not, it is `False`.
-- `buttons`: An array of {{ domxref("GamepadButton") }} objects representing the buttons present on the device. Each {{ domxref("GamepadButton") }} has a `pressed` and a `value` property:
+- `id`
+  - : Une chaîne de caractères contenant des informations sur la manette. Le format n'est pas spécifié de façon stricte. Pour Firefox, ce sera trois informations séparées par des tirets (`-`)&nbsp;: deux chaînes de caractères avec 4 chiffres hexadécimaux indiquant l'éditeur du pilote USB et l'identifiant produit de la manette puis le nom de la manette fourni par le pilote. Ces informations doivent permettre de trouver la correspondance des touches de l'appareil et de fournir des retours pertinents à la personne qui utilise la manette.
+- `index`
+  - : Un entier, unique pour chaque manette actuellement connectée au système. Elle peut être utilisée afin de distinguer une manette parmi plusieurs. On notera que déconnecter un appareil puis en reconnecter un nouveau pourra réutiliser un des indices précédemment utilisé.
+- `mapping`
+  - : Une chaîne de caractères qui indique si le navigateur a adapté les contrôles de l'appareil sur une disposition connue. Il existe actuellement une seule disposition prise en charge, [la manette standard](https://dvcs.w3.org/hg/gamepad/raw-file/default/gamepad.html#remapping). Si le navigateur est capable de faire correspondre les contrôles de l'appareil avec cette disposition, la propriété `mapping` vaudra la chaîne de caractères `standard`.
+- `connected`
+  - : Un booléen qui indique si la manette est toujours connectée au système (`true` si c'est le cas, `false` sinon).
+- `buttons`
+  - : Un tableau d'objets [`GamepadButton`](/fr/docs/Web/API/GamepadButton) représentant les boutons présents sur l'appareil. Chaque objet [`GamepadButton`](/fr/docs/Web/API/GamepadButton) aura deux propriétés, `pressed` et `value`&nbsp;:
+    - `pressed`
+      - : Un booléen qui indique si le bouton est actuellement enfoncé/appuyé (`true`) ou relâché (`false`).
+    - `value`
+      - : Un nombre flottant utilisée pour représenter la valeur des boutons analogiques comme les gâchettes. Les valeurs sont normalisées sur l'intervalle `[0.0, 1.0]`, avec `0.0` qui représente un bouton sur lequel il n'y a aucune pression et `1.0` qui représente un bouton complètement appuyé/enfoncé.
+- `axes`
+  - : Un tableau qui représente les contrôles où des axes sont présents sur l'appareil (par exemple les joysticks analogiques). Chaque élément du tableau est une valeur flottante sur l'intervalle `[-1.0, 1.0]` qui représente la position sur un axe, de la valeur la plus faible (`-1.0`), à la valeur la plus haute (`1.0`).
+- `timestamp`
+  - : : Un objet [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) indiquant le dernier instant auquel les données des manettes ont été mises à jour. Cela permet de déterminer si les données fournies par `axes` et `button` ont été mises à jour par le matériel. Cette valeur doit être relative à l'attribut `navigationStart` de l'interface [`PerformanceTiming`](/fr/docs/Web/API/PerformanceTiming). Les valeurs augmentent de façon monotone, ce qui signifie qu'on peut les comparer pour déterminer l'ordre des mises à jour (les valeurs les plus récentes seront toujours supérieures aux valeurs antérieures). Cette propriété n'est actuellement pas prise en charge par Firefox.
 
-  - The `pressed` property is a boolean indicating whether the button is currently pressed (`true`) or unpressed (`false`).
-  - The `value` property is a floating point value used to enable representing analog buttons, such as the triggers on many modern gamepads. The values are normalized to the range 0.0..1.0, with 0.0 representing a button that is not pressed, and 1.0 representing a button that is fully pressed.
+> **Note :** L'objet `Gamepad` est disponible sur l'évènement [`gamepadconnected`](/fr/docs/Web/API/Window/gamepadconnected_event) plutôt que sur l'objet [`Window`](/fr/docs/Web/API/Window) pour des raisons de sécurité. Une fois qu'une référence est obtenue, on peut consulter ses propriétés pour obtenir des informations à propos de la manette. Sous le capot, cet objet est mis à jour à chaque fois que l'état de la manette change.
 
-- `axes`: An array representing the controls with axes present on the device (e.g. analog thumb sticks). Each entry in the array is a floating point value in the range -1.0 - 1.0, representing the axis position from the lowest value (-1.0) to the highest value (1.0).
-- `timestamp`: This returns a {{ domxref("DOMHighResTimeStamp") }} representing the last time the data for this gamepad was updated, allowing developers to determine if the `axes` and `button` data have been updated from the hardware. The value must be relative to the `navigationStart` attribute of the {{ domxref("PerformanceTiming") }} interface. Values are monotonically increasing, meaning that they can be compared to determine the ordering of updates, as newer values will always be greater than or equal to older values. Note that this property is not currently supported in Firefox.
+### Utiliser les informations des boutons
 
-> **Note :** The Gamepad object is available on the {{ domxref("Window.gamepadconnected") }} event rather than the {{ domxref("Window") }} object itself, for security reasons. Once we have a reference to it, we can query its properties for information about the current state of the gamepad. Behind the scenes, this object will be updated every time the gamepad's state changes.
+Prenons un exemple simple, qui affiche les informations de connexion d'une seule manette (on ignore ici les connexions des manettes qui auraient lieu après) et qui permet de déplacer une balle sur l'écran à l'aide des quatre boutons situés sur le côté droit de la manette. Vous pouvez [voir la démonstration en direct](https://chrisdavidmills.github.io/gamepad-buttons/), ainsi que [le code source correspondant](https://github.com/chrisdavidmills/gamepad-buttons/tree/master) sur GitHub.
 
-### Using button information
+Pour commencer, on déclare quelques variables&nbsp;:
 
-Let's look at a simple example that displays connection information for one gamepad (it ignores subsequent gamepad connections) and allows you to move a ball around the screen using the four gamepad buttons on the right hand side of the gamepad. You can [view the demo live](http://chrisdavidmills.github.io/gamepad-buttons/), and [find the source code](https://github.com/chrisdavidmills/gamepad-buttons/tree/master) on Github.
+- `gamepadInfo` qui correspond au paragraphe dans lequel on écrit les informations de connexion
+- `ball` qui est la balle qu'on souhaite déplacer
+- `start` qui est la variable utilisée comme identifiant pour `requestAnimationFrame()`
+- `a` et `b` qui serviront de modificateurs de position pour la balle
 
-To start with, we declare some variables: The `gamepadInfo` paragraph that the connection info is written into, the `ball` that we want to move, the `start` variable that acts as the ID for `requestAnimation Frame`, the `a` and `b` variables that act as position modifiers for moving the ball, and the shorthand variables that will be used for the {{ domxref("requestAnimationFrame") }} and {{ domxref("cancelRequestAnimationFrame") }} cross browser forks.
+On a également (dans le code, mais pas ici par souci de concision), des variables pour faciliter l'accès à [`requestAnimationFrame()`](/fr/docs/Web/API/Window/requestAnimationFrame) et [`cancelAnimationFrame()`](/fr/docs/Web/API/Window/cancelAnimationFrame) dans les différents navigateurs.
 
 ```js
-var gamepadInfo = document.getElementById("gamepad-info");
-var ball = document.getElementById("ball");
-var start;
-var a = 0;
-var b = 0;
-
-var rAF = window.mozRequestAnimationFrame ||
-  window.webkitRequestAnimationFrame ||
-  window.requestAnimationFrame;
-
-var rAFStop = window.mozCancelRequestAnimationFrame ||
-  window.webkitCancelRequestAnimationFrame ||
-  window.cancelRequestAnimationFrame;
+let gamepadInfo = document.getElementById("gamepad-info");
+let ball = document.getElementById("ball");
+let start;
+let a = 0;
+let b = 0;
 ```
 
-Next we use the {{ domxref("Window.gamepadconnected") }} event to check for a gamepad being connected. When one is connected, we grab the gamepad using {{ domxref("Navigator.getGamepads") }}`[0]`, print information about the gamepad into our gamepad info `div`, and fire the `gameLoop()` function that starts the whole ball movement process up.
+Ensuite, on utilise l'évènement [`gamepadconnected`](/fr/docs/Web/API/Window/gamepadconnected_event) pour vérifier si une manette est connectée. Lorsqu'une manette est connectée, on récupère l'objet correspondant avec [`Navigator.getGamepads()[0]`](/fr/docs/Web/API/Navigator/getGamepads) et on affiche les informations dans l'élément `div` correspondant puis on déclenche la fonction `gameLoop()` qui démarre la procédure pour le mouvement de la balle.
 
 ```js
 window.addEventListener("gamepadconnected", function(e) {
-  var gp = navigator.getGamepads()[e.gamepad.index];
-  gamepadInfo.innerHTML = "Gamepad connected at index " + gp.index + ": " + gp.id + ". It has " + gp.buttons.length + " buttons and " + gp.axes.length + " axes.";
+  let gp = navigator.getGamepads()[e.gamepad.index];
+  gamepadInfo.innerHTML = "Manette connectée à l'indice" + gp.index + " : " + gp.id + ". Elle a " + gp.buttons.length + " boutons et " + gp.axes.length + " axes.";
 
   gameLoop();
 });
 ```
 
-Now we use the {{ domxref("Window.gamepaddisconnected") }} event to check if the gamepad is disconnected again. If so, we stop the {{ domxref("requestAnimationFrame") }} loop (see below) and revert the gamepad information back to what it was originally.
+On gère également l'évènement [`gamepaddisconnected`](/fr/docs/Web/API/Window/gamepaddisconnected_event) pour vérifier si la manette a été déconnectée. Si c'est le cas, on arrête la boucle [`requestAnimationFrame()`](/fr/docs/Web/API/Window/requestAnimationFrame) (voir après) et on réinitialise les informations affichées sur la manette.
 
 ```js
 window.addEventListener("gamepaddisconnected", function(e) {
-  gamepadInfo.innerHTML = "Waiting for gamepad.";
+  gamepadInfo.innerHTML = "En attente d'une manette.";
 
-  rAFStop(start);
+  cancelRequestAnimationFrame(start);
 });
 ```
 
-Chrome does things differently here. Instead of constantly storing the gamepad's latest state in a variable it only stores a snapshot, so to do the same thing in Chrome you have to keep polling it and then only use the {{ domxref("Gamepad") }} object in code when it is available. We have done this below using {{ domxref("Window.setInterval") }}; once the object is available the gamepad info is outputted, the game loop is started, and the interval is cleared using {{ domxref("Window.clearInterval") }}. Note that in older versions of Chrome {{ domxref("Navigator.getGamepads") }} is implemented with a `webkit` prefix. We attempt to detect and handle both the prefixed version and the standard version of the function for backwards-compatibility.
+Pour Chrome, les choses sont différentes. Le navigateur ne stocke qu'un instantané de l'état de la manette et il faut donc continuellement rafraîchir l'état connu avant d'utiliser l'objet [`Gamepad`](/fr/docs/Web/API/Gamepad) lorsque celui-ci devient disponible. Dans le code qui suit, on fait cela avec [`setInterval()`](/fr/docs/Web/API/setInterval). Une fois que l'objet est disponible, les informations sont affichées, la boucle de jeu commence et l'intervalle de répétition pour l'état de la manette est arrêté avec [`clearInterval`](/fr/docs/Web/API/clearInterval). Pour les versions les plus anciennes de Chrome, [`Navigator.getGamepads()`](/fr/docs/Web/API/Navigator/getGamepads) est implémentée avec un préfixe `webkit`. Pour une rétro-compatibilité, on essaie ici de détecter et de gérer les deux cas (avec et sans préfixe).
 
 ```js
-if(!('GamepadEvent' in window)) {
-  // No gamepad events available, poll instead.
-  var interval = setInterval(pollGamepads, 500);
+let interval;
+
+if (!('ongamepadconnected' in window)) {
+  // Les évènements gamepad ne sont pas disponibles
+  // On boucle pour connaître l'état à la place
+  interval = setInterval(pollGamepads, 500);
 }
 
 function pollGamepads() {
-  var gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads : []);
-  for (var i = 0; i < gamepads.length; i++) {
-    var gp = gamepads[i];
-    if(gp) {
-      gamepadInfo.innerHTML = "Gamepad connected at index " + gp.index + ": " + gp.id + ". It has " + gp.buttons.length + " buttons and " + gp.axes.length + " axes.";
+  let gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads : []);
+  for (let i = 0; i < gamepads.length; i++) {
+    let gp = gamepads[i];
+    if (gp) {
+      gamepadInfo.innerHTML = "Manette connectée à l'indice " + gp.index + " : " + gp.id +
+        ". Elle a " + gp.buttons.length + " boutons et " + gp.axes.length + " axes.";
       gameLoop();
       clearInterval(interval);
     }
@@ -165,9 +169,9 @@ function pollGamepads() {
 }
 ```
 
-Now on to the main game loop. In each execution of the loop we check if one of four buttons is being pressed; if so, we update the values of the `a` and `b` movement variables appropriately, then update the {{ cssxref("left") }} and {{ cssxref("top") }} properties, changing their values to the current values of `a` and `b` respectively. This has the effect of moving the ball around the screen.  In current versions of Chrome (version 34 as of this writing) the button values are stored as an array of double values, instead of {{ domxref("GamepadButton") }} objects. This is fixed in development versions.
+Voyons maintenant la boucle de jeu principale. Pour chaque exécution de la boucle, on regarde si un des quatre boutons est pressé. Si c'est le cas, on met à jour les variables de mouvement `a` et `b` de façon correspondante. Ensuite, on met à jour les propriétés CSS [`left`](/fr/docs/Web/CSS/left) et [`top`](/fr/docs/Web/CSS/top) avec les valeurs respectives de `a` et `b`. En pratique, cela aura pour effet de déplacer la balle sur l'écran.
 
-After all this is done, we use our `rAF` variable to request the next animation frame, running `gameLoop()` again.
+Une fois que tout ça est fait, on utilise `requestAnimationFrame()` pour passer à la <i lang="en">frame</i> suivante, où on exécute à nouveau `gameLoop()`.
 
 ```js
 function buttonPressed(b) {
@@ -178,78 +182,88 @@ function buttonPressed(b) {
 }
 
 function gameLoop() {
-  var gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads : []);
-  if (!gamepads)
+  let gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads() : []);
+  if (!gamepads) {
     return;
+  }
 
-  var gp = gamepads[0];
+  let gp = gamepads[0];
   if (buttonPressed(gp.buttons[0])) {
     b--;
   } else if (buttonPressed(gp.buttons[2])) {
     b++;
   }
-  if(buttonPressed(gp.buttons[1])) {
+  if (buttonPressed(gp.buttons[1])) {
     a++;
-  } else if(buttonPressed(gp.buttons[3])) {
+  } else if (buttonPressed(gp.buttons[3])) {
     a--;
   }
 
-  ball.style.left = a*2 + "px";
-  ball.style.top = b*2 + "px";
+  ball.style.left = a * 2 + "px";
+  ball.style.top = b * 2 + "px";
 
-  var start = rAF(gameLoop);
-};
+  start = requestAnimationFrame(gameLoop);
+}
 ```
 
-### Using axes information
-
-**TBD (basically the same, except using axes\[i] rather than button\[i].value for both Firefox and Chrome.)**
+## Exemple complet&nbsp;: afficher l'état de la manette
 
-## Complete example: Displaying gamepad state
-
-This example shows how to use the {{ domxref("Gamepad") }} object, as well as the {{ domxref("Window.gamepadconnected") }} and {{ domxref("Window.gamepaddisconnected") }} events in order to display the state of all gamepads connected to the system. You can find a [working demo](http://luser.github.io/gamepadtest/) and look at the [full source code](https://github.com/luser/gamepadtest) on Github.
+Cet exemple illustre comment utiliser l'objet [`Gamepad`](/fr/docs/Web/API/Gamepad) ainsi que les évènements [`gamepadconnected`](/fr/docs/Web/API/Window/gamepadconnected_event) et [`gamepaddisconnected`](/fr/docs/Web/API/Window/gamepaddisconnected_event) afin d'afficher l'état de l'ensemble des manettes connectées au système. Vous pouvez [voir la démonstration fonctionner](https://luser.github.io/gamepadtest/) et consulter [le code source complet sur GitHub](https://github.com/luser/gamepadtest).
 
 ```js
-var haveEvents = 'GamepadEvent' in window;
-var controllers = {};
-var rAF = window.mozRequestAnimationFrame ||
-  window.webkitRequestAnimationFrame ||
-  window.requestAnimationFrame;
+let haveEvents = 'ongamepadconnected' in window;
+let controllers = {};
+
 
 function connecthandler(e) {
   addgamepad(e.gamepad);
 }
+
 function addgamepad(gamepad) {
-  controllers[gamepad.index] = gamepad; var d = document.createElement("div");
+  controllers[gamepad.index] = gamepad;
+
+  let d = document.createElement("div");
   d.setAttribute("id", "controller" + gamepad.index);
-  var t = document.createElement("h1");
+
+  let t = document.createElement("h1");
   t.appendChild(document.createTextNode("gamepad: " + gamepad.id));
   d.appendChild(t);
-  var b = document.createElement("div");
+
+  let b = document.createElement("div");
   b.className = "buttons";
-  for (var i=0; i<gamepad.buttons.length; i++) {
-    var e = document.createElement("span");
+  for (let i = 0; i < gamepad.buttons.length; i++) {
+    let e = document.createElement("span");
     e.className = "button";
     //e.id = "b" + i;
     e.innerHTML = i;
     b.appendChild(e);
   }
+
   d.appendChild(b);
-  var a = document.createElement("div");
+
+  let a = document.createElement("div");
   a.className = "axes";
-  for (var i=0; i<gamepad.axes.length; i++) {
-    var e = document.createElement("progress");
-    e.className = "axis";
-    //e.id = "a" + i;
-    e.setAttribute("max", "2");
-    e.setAttribute("value", "1");
-    e.innerHTML = i;
-    a.appendChild(e);
+
+  for (let i = 0; i < gamepad.axes.length; i++) {
+    let p = document.createElement("progress");
+    p.className = "axis";
+    //p.id = "a" + i;
+    p.setAttribute("max", "2");
+    p.setAttribute("value", "1");
+    p.innerHTML = i;
+    a.appendChild(p);
   }
+
   d.appendChild(a);
-  document.getElementById("start").style.display = "none";
+
+  // Voir https://github.com/luser/gamepadtest/blob/master/index.html
+  let start = document.getElementById("start");
+  if (start) {
+    start.style.display = "none";
+  }
+
   document.body.appendChild(d);
-  rAF(updateStatus);
+  requestAnimationFrame(updateStatus);
 }
 
 function disconnecthandler(e) {
@@ -257,7 +271,7 @@ function disconnecthandler(e) {
 }
 
 function removegamepad(gamepad) {
-  var d = document.getElementById("controller" + gamepad.index);
+  let d = document.getElementById("controller" + gamepad.index);
   document.body.removeChild(d);
   delete controllers[gamepad.index];
 }
@@ -266,45 +280,53 @@ function updateStatus() {
   if (!haveEvents) {
     scangamepads();
   }
+
+  let i = 0;
+  let j;
+
   for (j in controllers) {
-    var controller = controllers[j];
-    var d = document.getElementById("controller" + j);
-    var buttons = d.getElementsByClassName("button");
-    for (var i=0; i<controller.buttons.length; i++) {
-      var b = buttons[i];
-      var val = controller.buttons[i];
-      var pressed = val == 1.0;
+    let controller = controllers[j];
+    let d = document.getElementById("controller" + j);
+    let buttons = d.getElementsByClassName("button");
+
+    for (i = 0; i < controller.buttons.length; i++) {
+      let b = buttons[i];
+      let val = controller.buttons[i];
+      let pressed = val == 1.0;
       if (typeof(val) == "object") {
         pressed = val.pressed;
         val = val.value;
       }
-      var pct = Math.round(val * 100) + "%"
+
+      let pct = Math.round(val * 100) + "%";
       b.style.backgroundSize = pct + " " + pct;
+
       if (pressed) {
         b.className = "button pressed";
-         } else {
+      } else {
         b.className = "button";
       }
     }
-    
-    var axes = d.getEl
-    for (var i=0; i<co
-      var a = axes[i];
-      a.innerHTML = i + ": " + controller.axes[i].toFi
-         a.setAttribute("value", controller.axes[i] + 1);
+
+    let axes = d.getElementsByClassName("axis");
+    for (i = 0; i < controller.axes.length; i++) {
+      let a = axes[i];
+      a.innerHTML = i + ": " + controller.axes[i].toFixed(4);
+      a.setAttribute("value", controller.axes[i] + 1);
     }
   }
-  rAF(updateStatus);
+
+  requestAnimationFrame(updateStatus);
 }
 
 function scangamepads() {
-  var gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads() : []);
-  for (var i = 0; i < gamepads.length; i++) {
+  let gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads() : []);
+  for (let i = 0; i < gamepads.length; i++) {
     if (gamepads[i]) {
-      if (!(gamepads[i].index in controllers)) {
-        addgamepad(gamepads[i]);
-         } else {
+      if (gamepads[i].index in controllers) {
         controllers[gamepads[i].index] = gamepads[i];
+      } else {
+        addgamepad(gamepads[i]);
       }
     }
   }
@@ -312,15 +334,18 @@ function scangamepads() {
 
 window.addEventListener("gamepadconnected", connecthandler);
 window.addEventListener("gamepaddisconnected", disconnecthandler);
+
 if (!haveEvents) {
-  setInterval(scangamepads, 500);
+ setInterval(scangamepads, 500);
 }
 ```
 
-## Specifications
+## Spécifications
 
-{{page("/en-US/docs/Gamepad","Specifications")}}
+| Spécification                                            | État                 | Commentaires        |
+| -------------------------------------------------------- | -------------------- | ------------------- |
+| {{SpecName("Gamepad", "#gamepad-interface", "Gamepad")}} | {{Spec2("Gamepad")}} | Définition initiale |
 
-## Browser compatibility
+## Compatibilité des navigateurs
 
-{{page("/en-US/docs/Gamepad","Browser_compatibility")}}
+{{Compat("api.Gamepad")}}