diff options
Diffstat (limited to 'files/fr/web/api/keyboardevent/code/index.md')
| -rw-r--r-- | files/fr/web/api/keyboardevent/code/index.md | 154 |
1 files changed, 78 insertions, 76 deletions
diff --git a/files/fr/web/api/keyboardevent/code/index.md b/files/fr/web/api/keyboardevent/code/index.md index d9d70d3e19..a0a0e9c050 100644 --- a/files/fr/web/api/keyboardevent/code/index.md +++ b/files/fr/web/api/keyboardevent/code/index.md @@ -10,76 +10,83 @@ tags: - Reference translation_of: Web/API/KeyboardEvent/code --- -<div>{{APIRef("DOM Events")}}</div> +{{APIRef("DOM Events")}} -<p>La propriété <strong><code>KeyboardEvent.code</code></strong> représente une touche physique du clavier (contrairement au caractère généré par celle-ci). En d'autres termes, cette propriété retourne une valeur qui n'est pas modifiée par la disposition du clavier ou l'état des touches de modification.</p> +La propriété **`KeyboardEvent.code`** représente une touche physique du clavier (contrairement au caractère généré par celle-ci). En d'autres termes, cette propriété retourne une valeur qui n'est pas modifiée par la disposition du clavier ou l'état des touches de modification. -<p>Si le clavier n'est pas physique, la valeur retournée sera définie par le navigateur pour être le plus proche possible des valeurs retournées par un clavier physique afin de maximiser la compatibilité entre un clavier physique et virtuel.</p> +Si le clavier n'est pas physique, la valeur retournée sera définie par le navigateur pour être le plus proche possible des valeurs retournées par un clavier physique afin de maximiser la compatibilité entre un clavier physique et virtuel. -<p>Cette propriété est utile quand vous souhaitez manipuler les clés en fonction de leur position physique sur le clavier et non les caractères associés au clés (par exemple pour les touches de déplacement d'un jeu vidéo). Attention toutefois, on ne pourra pas utiliser la valeur fournie par <code>KeyboardEvent.code</code> afin de déterminer le caractère utilisé sur le clavier.</p> +Cette propriété est utile quand vous souhaitez manipuler les clés en fonction de leur position physique sur le clavier et non les caractères associés au clés (par exemple pour les touches de déplacement d'un jeu vidéo). Attention toutefois, on ne pourra pas utiliser la valeur fournie par `KeyboardEvent.code` afin de déterminer le caractère utilisé sur le clavier. -<p>Par exemple, le <code>code</code> retourné est <code>"KeyQ"</code> pour le caractère "<kbd>q</kbd>" sur un clavier QWERTY, mais le même <code>code</code> représente le caractère "<kbd>'</kbd>" sur un clavier Dvorak, et le caractère "<kbd>a</kbd>" sur un clavier AZERTY. Cela rend impossible l'utilisation du <code>code</code> pour déterminer le code d'une clé destiné aux utilisateurs s'ils n'utilisent pas une disposition de clavier anticipé.</p> +Par exemple, le `code` retourné est `"KeyQ"` pour le caractère "<kbd>q</kbd>" sur un clavier QWERTY, mais le même `code` représente le caractère "<kbd>'</kbd>" sur un clavier Dvorak, et le caractère "<kbd>a</kbd>" sur un clavier AZERTY. Cela rend impossible l'utilisation du `code` pour déterminer le code d'une clé destiné aux utilisateurs s'ils n'utilisent pas une disposition de clavier anticipé. -<p>Pour déterminer quel caractère correspond à un <code>key event</code>, utilisez plutôt la propriété {{domxref("KeyboardEvent.key")}}.</p> +Pour déterminer quel caractère correspond à un `key event`, utilisez plutôt la propriété {{domxref("KeyboardEvent.key")}}. -<h2 id="Valeurs_des_codes">Valeurs des codes</h2> +## Valeurs des codes -<p>Les valeurs de code pour Windows, Linux et macOS figurent dans la liste de la <a href="/fr/docs/Web/API/KeyboardEvent/code/code_values">KeyboardEvent: code values</a>.</p> +Les valeurs de code pour Windows, Linux et macOS figurent dans la liste de la [KeyboardEvent: code values](/fr/docs/Web/API/KeyboardEvent/code/code_values). -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Pratiquer_KeyboardEvent">Pratiquer <code>KeyboardEvent</code></h3> +### Pratiquer `KeyboardEvent` -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><p> +```html +<p> Appuyez sur une touche du clavier pour voir quelle valeur clé de KeyboardEvent correspond à chaque événement -</p> -<div id="output"> -</div> -</pre> +</p> +<div id="output"> +</div> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css">#output { +```css +#output { font-family: Arial, Helvetica, sans-serif; border: 1px solid black; -}</pre> +} +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js">window.addEventListener("keydown", function(event) { +```js +window.addEventListener("keydown", function(event) { let str = "KeyboardEvent: key='" + event.key + "' | code='" + event.code + "'"; let el = document.createElement("span"); - el.innerHTML = str + "<br/>"; + el.innerHTML = str + "<br/>"; document.getElementById("output").appendChild(el); -}, true);</pre> +}, true); +``` -<h4 id="Résultat">Résultat</h4> +#### Résultat -<p>Pour essayer ce code, cliquez sur le lien ci-dessous:</p> +Pour essayer ce code, cliquez sur le lien ci-dessous: -<p>{{EmbedLiveSample('Pratiquer_KeyboardEvent', 600, 300) }}</p> +{{EmbedLiveSample('Pratiquer_KeyboardEvent', 600, 300) }} -<h3 id="Gérer_les_événements_de_clavier_dans_un_jeu">Gérer les événements de clavier dans un jeu</h3> +### Gérer les événements de clavier dans un jeu -<p>Cet exemple établit un écouteur d'événements pour l'événement {{event("keydown")}} qui gère la saisie au clavier pour un jeu qui utilise la disposition de clavier typique "ZQSD" pour se déplacer en avant, à gauche, en arrière et à droite. Cela utilisera les quatre mêmes touches physiquement, quels que soient les caractères correspondants, par exemple si l'utilisateur utilise un clavier QWERTY.</p> +Cet exemple établit un écouteur d'événements pour l'événement {{event("keydown")}} qui gère la saisie au clavier pour un jeu qui utilise la disposition de clavier typique "ZQSD" pour se déplacer en avant, à gauche, en arrière et à droite. Cela utilisera les quatre mêmes touches physiquement, quels que soient les caractères correspondants, par exemple si l'utilisateur utilise un clavier QWERTY. -<h4 id="HTML_2">HTML</h4> +#### HTML -<pre class="brush: html"><p>Appuyez sur les touches ZQSD (WASP sur QWERTY) pour bouger et pour vous diriger</p> -<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="world"> - <polygon id="spaceship" points="15,0 0,30 30,30"/> -</svg> -<script>refresh();</script> -</pre> +```html +<p>Appuyez sur les touches ZQSD (WASP sur QWERTY) pour bouger et pour vous diriger</p> +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="world"> + <polygon id="spaceship" points="15,0 0,30 30,30"/> +</svg> +<script>refresh();</script> +``` -<h4 id="CSS_2">CSS</h4> +#### CSS -<pre class="brush: css">.world { +```css +.world { margin: 0px; padding: 0px; background-color: black; @@ -91,13 +98,15 @@ translation_of: Web/API/KeyboardEvent/code fill: orange; stroke: red; stroke-width: 2px; -}</pre> +} +``` -<h4 id="JavaScript_2">JavaScript</h4> +#### JavaScript -<p>La première section du code JavaScript établit certaines variables que nous allons utiliser. <code>shipSize</code> contient la taille du vaisseau dans lequel le joueur se déplace, pour plus de commodité. <code>position</code> est utilisé pour suivre la position du vaisseau sur le terrain de jeu. <code>moveRate</code> et <code>turnRate</code> sont le nombre de pixels en avant et en arrière chaque fois que vous appuyez sur une touche pour déplacer le vaisseau et le nombre de degrés de rotation que les commandes de direction gauche et droite appliquent à chaque frappe. <code>angle</code> est la quantité actuelle de rotation appliquée au vaisseau, en degrés; il commence à 0 ° (pointant tout droit). Enfin, <code>spaceship</code> est défini pour faire référence à l'élément portant l'ID "spaceship", qui est le polygone SVG représentant le vaisseau que le joueur contrôle.</p> +La première section du code JavaScript établit certaines variables que nous allons utiliser. `shipSize` contient la taille du vaisseau dans lequel le joueur se déplace, pour plus de commodité. `position` est utilisé pour suivre la position du vaisseau sur le terrain de jeu. `moveRate` et `turnRate` sont le nombre de pixels en avant et en arrière chaque fois que vous appuyez sur une touche pour déplacer le vaisseau et le nombre de degrés de rotation que les commandes de direction gauche et droite appliquent à chaque frappe. `angle` est la quantité actuelle de rotation appliquée au vaisseau, en degrés; il commence à 0 ° (pointant tout droit). Enfin, `spaceship` est défini pour faire référence à l'élément portant l'ID "spaceship", qui est le polygone SVG représentant le vaisseau que le joueur contrôle. -<pre class="brush: js">let shipSize = { +```js +let shipSize = { width: 30, height: 30 }; @@ -113,43 +122,46 @@ let turnRate = 5; let angle = 0; let spaceship = document.getElementById("spaceship"); -</pre> +``` -<p>Vient ensuite la fonction <code>updatePosition()</code>. Cette fonction prend en entrée la distance à laquelle le vaisseau doit être déplacé, où positif est un mouvement en avant et négatif est un mouvement en arrière. Cette fonction calcule la nouvelle position du vaisseau en fonction de la distance parcourue et de la direction actuelle du vaisseau. Il veille également à ce que le vaisseau franchisse les limites du terrain de jeu au lieu de disparaître.</p> +Vient ensuite la fonction `updatePosition()`. Cette fonction prend en entrée la distance à laquelle le vaisseau doit être déplacé, où positif est un mouvement en avant et négatif est un mouvement en arrière. Cette fonction calcule la nouvelle position du vaisseau en fonction de la distance parcourue et de la direction actuelle du vaisseau. Il veille également à ce que le vaisseau franchisse les limites du terrain de jeu au lieu de disparaître. -<pre class="brush: js">function updatePosition(offset) { +```js +function updatePosition(offset) { let rad = angle * (Math.PI/180); position.x += (Math.sin(rad) * offset); position.y -= (Math.cos(rad) * offset); - if (position.x < 0) { + if (position.x < 0) { position.x = 399; - } else if (position.x > 399) { + } else if (position.x > 399) { position.x = 0; } - if (position.y < 0) { + if (position.y < 0) { position.y = 399; - } else if (position.y > 399) { + } else if (position.y > 399) { position.y = 0; } } -</pre> +``` -<p>La fonction <code>refresh()</code> gère l'application de la rotation et de la position à l'aide d'un <a href="/en-US/docs/Web/SVG/Attribute/transform">SVG transform</a>.</p> +La fonction `refresh()` gère l'application de la rotation et de la position à l'aide d'un [SVG transform](/en-US/docs/Web/SVG/Attribute/transform). -<pre class="brush: js">function refresh() { +```js +function refresh() { let x = position.x - (shipSize.width/2); let y = position.y - (shipSize.height/2); let transform = "translate(" + x + " " + y + ") rotate(" + angle + " 15 15) "; spaceship.setAttribute("transform", transform); } -</pre> +``` -<p>Enfin, la méthode <code>addEventListener()</code> est utilisée pour commencer à écouter les événements {{event ("keydown")}}, en mettant à jour chaque touche en mettant à jour la position et l’angle de rotation du vaisseau, puis en appelant la méthode <code>refresh()</code> pour tracer le navire dans sa nouvelle position et son nouvel angle.</p> +Enfin, la méthode `addEventListener()` est utilisée pour commencer à écouter les événements {{event ("keydown")}}, en mettant à jour chaque touche en mettant à jour la position et l’angle de rotation du vaisseau, puis en appelant la méthode `refresh()` pour tracer le navire dans sa nouvelle position et son nouvel angle. -<pre class="brush: js">window.addEventListener("keydown", function(event) { +```js +window.addEventListener("keydown", function(event) { if (event.preventDefaulted) { return; // Do nothing if event already handled } @@ -181,33 +193,23 @@ let spaceship = document.getElementById("spaceship"); // Consume the event so it doesn't get handled twice event.preventDefault(); -}, true);</pre> +}, true); +``` -<h4 id="Résultat_2">Résultat</h4> +#### Résultat -<p>Pour essayer le code ci-dessus, cliquez sur le bouton ci-dessous:</p> +Pour essayer le code ci-dessus, cliquez sur le bouton ci-dessous: -<p>{{EmbedLiveSample("Handle_keyboard_events_in_a_game", 420, 460)}}</p> +{{EmbedLiveSample("Handle_keyboard_events_in_a_game", 420, 460)}} -<p>Ce code peut être amélioré de plusieurs manières. La plupart des jeux réels surveillent les événements {{event("keydown")}}, démarrent le mouvement lorsque cela se produit et stoppent le mouvement lorsque l'événement {{event("keyup")}} se produit, au lieu de compter sur des répétitions de touches. Cela permettrait des mouvements plus fluides et plus rapides, mais permettrait également au joueur de bouger et de diriger en même temps. Des transitions ou des animations peuvent également être utilisées pour rendre le mouvement du navire plus fluide. Pour permettre cela, il ne faudrait pas utiliser de <code>switch</code>, ni de <code>else if</code>.ff</p> +Ce code peut être amélioré de plusieurs manières. La plupart des jeux réels surveillent les événements {{event("keydown")}}, démarrent le mouvement lorsque cela se produit et stoppent le mouvement lorsque l'événement {{event("keyup")}} se produit, au lieu de compter sur des répétitions de touches. Cela permettrait des mouvements plus fluides et plus rapides, mais permettrait également au joueur de bouger et de diriger en même temps. Des transitions ou des animations peuvent également être utilisées pour rendre le mouvement du navire plus fluide. Pour permettre cela, il ne faudrait pas utiliser de `switch`, ni de `else if`.ff -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('UI Events', '#dom-keyboardevent-code', 'KeyboardEvent.code')}}</td> - <td>{{Spec2('UI Events')}}</td> - <td>Définition initiale, inclut les <a href="https://w3c.github.io/uievents-code/">valeurs de code</a>.</td> - </tr> - </tbody> -</table> +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------------------- | ---------------------------- | ---------------------------------------------------------------------------------------- | +| {{SpecName('UI Events', '#dom-keyboardevent-code', 'KeyboardEvent.code')}} | {{Spec2('UI Events')}} | Définition initiale, inclut les [valeurs de code](https://w3c.github.io/uievents-code/). | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.KeyboardEvent.code")}}</p> +{{Compat("api.KeyboardEvent.code")}} |