msb-public
/
Web-Dev-For-Beginners
mirror of https://github.com/microsoft/Web-Dev-For-Beginners.git
1
0
Code Issues Projects Releases Wiki Activity

translate 4-typing-game-readme in french

Browse Source
pull/541/head
manusquall 4 years ago
parent 8eccc93bd7
commit acd5c49a48
1 changed files with 70 additions and 70 deletions
Show Stats Download Patch File Download Diff File

140
4-typing-game/typing-game/translations/README.fr.md
Unescape View File

@ -14,7 +14,7 @@ La façon dont nous marquons une section de code que nous voulons exécuter cons
Pour gérer les événements (clic sur un bouton, saisie, etc.), nous enregistrons des **écouteurs d'événements**("event listeners" en anglais). Un écouteur d'événement est une fonction qui attend qu'un événement se produise et s'exécute en réponse. Les écouteurs d'événement peuvent mettre à jour l'interface utilisateur, passer des appels au serveur ou faire tout ce qui doit être fait en réponse à l'action de l'utilisateur. Nous ajoutons un écouteur d'événement en utilisant [addEventListener](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener), et en fournissant une fonction à exécuter. Pour gérer les événements (clic sur un bouton, saisie, etc.), nous enregistrons des **écouteurs d'événements**("event listeners" en anglais). Un écouteur d'événement est une fonction qui attend qu'un événement se produise et s'exécute en réponse. Les écouteurs d'événement peuvent mettre à jour l'interface utilisateur, passer des appels au serveur ou faire tout ce qui doit être fait en réponse à l'action de l'utilisateur. Nous ajoutons un écouteur d'événement en utilisant [addEventListener](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener), et en fournissant une fonction à exécuter.
> **NOTE:** Il convient de souligner qu'il existe de nombreuses façons de créer des écouteurs d'événement. Vous pouvez utiliser des fonctions anonymes ou en créer des nommées. Vous pouvez utiliser divers raccourcis, comme définir la propriété `click` ou utiliser `addEventListener`. Dans notre exercice, nous allons nous concentrer sur `addEventLister` et les fonctions anonymes, car c'est probablement la technique la plus couramment utilisée par les développeurs Web. C'est aussi le plus flexible, car `addEventListener` fonctionne pour tous les événements et le nom de l'événement peut être fourni en tant que paramètre. > **REMARQUE:** Il convient de souligner qu'il existe de nombreuses façons de créer des écouteurs d'événement. Vous pouvez utiliser des fonctions anonymes ou en créer des nommées. Vous pouvez utiliser divers raccourcis, comme définir la propriété `click` ou utiliser `addEventListener`. Dans notre exercice, nous allons nous concentrer sur `addEventLister` et les fonctions anonymes, car c'est probablement la technique la plus couramment utilisée par les développeurs Web. C'est aussi le plus flexible, car `addEventListener` fonctionne pour tous les événements et le nom de l'événement peut être fourni en tant que paramètre.
### Les événements courants ### Les événements courants
@ -45,7 +45,7 @@ Nous aurons besoin de trois fichiers au total : **index.html**, **script.js** et
- Créez un nouveau dossier pour votre travail en ouvrant une console ou une fenêtre de terminal et en exécutant la commande suivante : - Créez un nouveau dossier pour votre travail en ouvrant une console ou une fenêtre de terminal et en exécutant la commande suivante :
```bash ```bash
# Linux or macOS # Linux ou macOS
mkdir typing-game && cd typing-game mkdir typing-game && cd typing-game
# Windows # Windows
@ -74,10 +74,10 @@ Si nous explorons les exigences, nous savons que nous aurons besoin d'une poign
Chacun de ceux-ci aura besoin d'identifiants afin que nous puissions travailler avec eux dans notre JavaScript. Nous ajouterons également des références aux fichiers CSS et JavaScript que nous allons créer. Chacun de ceux-ci aura besoin d'identifiants afin que nous puissions travailler avec eux dans notre JavaScript. Nous ajouterons également des références aux fichiers CSS et JavaScript que nous allons créer.
Créez un nouveau fichier nommé **index.html**. Ajoutez le code HTML suivant : Créez un nouveau fichier nommé **index.html**. Ajoutez le code HTML suivant:
```html ```html
<!-- dans index.html --> <!-- A l'intrieur de index.html -->
<html> <html>
<head> <head>
<title>Typing game</title> <title>Typing game</title>
@ -86,7 +86,7 @@ Créez un nouveau fichier nommé **index.html**. Ajoutez le code HTML suivant :
<body> <body>
<h1>Typing game!</h1> <h1>Typing game!</h1>
<p>Practice your typing skills with a quote from Sherlock Holmes. Click **start** to begin!</p> <p>Practice your typing skills with a quote from Sherlock Holmes. Click **start** to begin!</p>
<p id="quote"></p> <!-- Ceci affichera nos citations --> <p id="quote"></p> <!-- Ceci affichera notre citation -->
<p id="message"></p> <!-- Ceci affichera chaque messages d'état --> <p id="message"></p> <!-- Ceci affichera chaque messages d'état -->
<div> <div>
<input type="text" aria-label="current word" id="typed-value" /> <!-- La zone de texte pour la saisie --> <input type="text" aria-label="current word" id="typed-value" /> <!-- La zone de texte pour la saisie -->
@ -138,11 +138,11 @@ Créez un nouveau fichier nommé **style.css** et ajoutez la syntaxe suivante.
## JavaScript ## JavaScript
Avec notre interface utilisateur créée, il est temps de concentrer notre attention sur le JavaScript qui fournira la logique. Nous allons décomposer cela en une poignée d'étapes : Avec notre interface utilisateur créée, il est temps de concentrer notre attention sur le JavaScript qui fournira la logique. Nous allons décomposer cela en une poignée d'étapes:
- [Créer les constantes](#add-the-constants) - [Créer les constantes](#ajouter-les-constantes)
- [Écouteur d'événement pour démarrer le jeu](#add-start-logic) - [Écouteur d'événement pour démarrer le jeu](#ajouter-une-logique-de-démarrage)
- [Écouteur d'événement de saisie](#add-typing-logic) - [Écouteur d'événement de saisie](#ajouter-une-logique-de-frappe)
Mais d'abord, créez un nouveau fichier nommé **script.js**. Mais d'abord, créez un nouveau fichier nommé **script.js**.
@ -157,8 +157,8 @@ Nous allons avoir besoin de quelques éléments pour nous faciliter la programma
Nous allons également vouloir des références aux éléments de l'interface utilisateur : Nous allons également vouloir des références aux éléments de l'interface utilisateur :
- La zone de texte (**typée-valeur**) - La zone de texte (**typed-value**)
- L'affichage du devis (**devis**) - L'affichage de la citation (**quote**)
- Le message (**message**) - Le message (**message**)
```javascript ```javascript
@ -201,112 +201,112 @@ Pour commencer le jeu, le joueur cliquera sur démarrer. Bien sûr, nous ne savo
Lorsque l'utilisateur clique sur **démarrer**, nous devons sélectionner un devis, configurer l'interface utilisateur et configurer le suivi pour le mot et la synchronisation actuels. Vous trouverez ci-dessous le JavaScript que vous devrez ajouter ; nous en discutons juste après le bloc de script. Lorsque l'utilisateur clique sur **démarrer**, nous devons sélectionner un devis, configurer l'interface utilisateur et configurer le suivi pour le mot et la synchronisation actuels. Vous trouverez ci-dessous le JavaScript que vous devrez ajouter ; nous en discutons juste après le bloc de script.
```javascript ```javascript
// at the end of script.js // à la fin de script.js
document.getElementById('start').addEventListener('click', () => { document.getElementById('start').addEventListener('click', () => {
// get a quote // obtenir une citation
const quoteIndex = Math.floor(Math.random() * quotes.length); const quoteIndex = Math.floor(Math.random() * quotes.length);
const quote = quotes[quoteIndex]; const quote = quotes[quoteIndex];
// Put the quote into an array of words // Mettre la citation dans un tableau de mots
words = quote.split(' '); words = quote.split(' ');
// reset the word index for tracking // réinitialiser l'index des mots pour le suivi
wordIndex = 0; wordIndex = 0;
// UI updates // Mises à jour de l'interface utilisateur
// Create an array of span elements so we can set a class // Crée un tableau d'éléments "span" afin que nous puissions définir une classe
const spanWords = words.map(function(word) { return `<span>${word} </span>`}); const spanWords = words.map(function(word) { return `<span>${word} </span>`});
// Convert into string and set as innerHTML on quote display // Convertir en chaîne et définir comme innerHTML sur l'affichage de la citation
quoteElement.innerHTML = spanWords.join(''); quoteElement.innerHTML = spanWords.join('');
// Highlight the first word // Met en surbrillance le premier mot
quoteElement.childNodes[0].className = 'highlight'; quoteElement.childNodes[0].className = 'highlight';
// Clear any prior messages // Effacer tous les messages précédents
messageElement.innerText = ''; messageElement.innerText = '';
// Setup the textbox // Configurer la zone de texte
// Clear the textbox // Efface la zone de texte
typedValueElement.value = ''; typedValueElement.value = '';
// set focus // définie le focus
typedValueElement.focus(); typedValueElement.focus();
// set the event handler // définir le gestionnaire d'événements
// Start the timer // Lancer le chronomètre
startTime = new Date().getTime(); startTime = new Date().getTime();
}); });
``` ```
Let's break down the code! Décomposons le code !
- Setup the word tracking - Configurer le suivi des mots
- Using [Math.floor](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/floor) and [Math.random](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/random) allows us to randomly select a quote from the `quotes` array - L'utilisation de [Math.floor](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/floor) et [Math.random](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/random) nous permet de sélectionner au hasard une citation dans le tableau `quotes`
- We convert the `quote` into an array of `words` so we can track the word the player is currently typing - Nous convertissons la `quote` en un tableau de `words` afin que nous puissions suivre le mot que le joueur est en train de taper
- `wordIndex` is set to 0, since the player will start on the first word - `wordIndex` est mis à 0, puisque le lecteur commencera sur le premier mot
- Setup the UI - Configurer l'interface utilisateur
- Create an array of `spanWords`, which contains each word inside a `span` element - Créez un tableau de `spanWords`, qui contient chaque mot à l'intérieur d'un élément `span`
- This will allow us to highlight the word on the display - Cela nous permettra de mettre en évidence le mot sur l'écran
- `join` the array to create a string which we can use to update the `innerHTML` on `quoteElement` - Il `join` (rejoins) le tableau pour créer une chaîne que nous pouvons utiliser pour mettre à jour le `innerHTML` sur `quoteElement`
- This will display the quote to the player - Cela affichera la citation au joueur
- Set the `className` of the first `span` element to `highlight` to highlight it as yellow - Définissez le `className` du premier élément `span` sur `highlight` pour le mettre en surbrillance en jaune
- Clean the `messageElement` by setting `innerText` to `''` - Vider le `messageElement` en définissant `innerText` sur `''`
- Setup the textbox - Configurer la zone de texte
- Clear the current `value` on `typedValueElement` - Effacer la `value` actuelle sur `typedValueElement`
- Set the `focus` to `typedValueElement` - Définir `focus` sur `typedValueElement`
- Start the timer by calling `getTime` - Démarrez le chronomètre en appelant `getTime`
### Add typing logic ### Ajouter une logique de saisie
As the player types, an `input` event will be raised. This event listener will check to ensure the player is typing the word correctly, and handle the current status of the game. Returning to **script.js**, add the following code to the end. We will break it down afterwards. Au fur et à mesure que le joueur tape, un événement d'`input` sera déclenché. Cet écouteur d'événement vérifiera que le joueur tape correctement le mot et gérera l'état actuel du jeu. De retour à **script.js**, ajoutez le code suivant à la fin. Nous le décomposerons par la suite.
```javascript ```javascript
// at the end of script.js // at the end of script.js
typedValueElement.addEventListener('input', () => { typedValueElement.addEventListener('input', () => {
// Get the current word // Obtenir le mot actuel
const currentWord = words[wordIndex]; const currentWord = words[wordIndex];
// get the current value // obtenir la valeur actuelle
const typedValue = typedValueElement.value; const typedValue = typedValueElement.value;
if (typedValue === currentWord && wordIndex === words.length - 1) { if (typedValue === currentWord && wordIndex === words.length - 1) {
// end of sentence // fin de phrase
// Display success // Afficher le succès
const elapsedTime = new Date().getTime() - startTime; const elapsedTime = new Date().getTime() - startTime;
const message = `CONGRATULATIONS! You finished in ${elapsedTime / 1000} seconds.`; const message = `CONGRATULATIONS! You finished in ${elapsedTime / 1000} seconds.`;
messageElement.innerText = message; messageElement.innerText = message;
} else if (typedValue.endsWith(' ') && typedValue.trim() === currentWord) { } else if (typedValue.endsWith(' ') && typedValue.trim() === currentWord) {
// end of word // fin de mot
// clear the typedValueElement for the new word // efface le typedValueElement pour le nouveau mot
typedValueElement.value = ''; typedValueElement.value = '';
// move to the next word // passer au mot suivant
wordIndex++; wordIndex++;
// reset the class name for all elements in quote // réinitialiser le nom de classe pour tous les éléments entre guillemets
for (const wordElement of quoteElement.childNodes) { for (const wordElement of quoteElement.childNodes) {
wordElement.className = ''; wordElement.className = '';
} }
// highlight the new word // mettre en évidence le nouveau mot
quoteElement.childNodes[wordIndex].className = 'highlight'; quoteElement.childNodes[wordIndex].className = 'highlight';
} else if (currentWord.startsWith(typedValue)) { } else if (currentWord.startsWith(typedValue)) {
// currently correct // actuellement correct
// highlight the next word // surligner le mot suivant
typedValueElement.className = ''; typedValueElement.className = '';
} else { } else {
// error state // état d'erreur
typedValueElement.className = 'error'; typedValueElement.className = 'error';
} }
}); });
``` ```
Let's break down the code! We start by grabbing the current word and the value the player has typed thus far. Then we have waterfall logic, where we check if the quote is complete, the word is complete, the word is correct, or (finally), if there is an error. Décomposons le code ! Nous commençons par saisir le mot actuel et la valeur que le joueur a tapée jusqu'à présent. Ensuite, nous avons une logique en cascade, où nous vérifions si la citation est complète, le mot est complet, le mot est correct ou (enfin) s'il y a une erreur.
- Quote is complete, indicated by `typedValue` being equal to `currentWord`, and `wordIndex` being equal to one less than the `length` of `words` - La citation est complète, indiquée par `typedValue` étant égal à `currentWord`, et `wordIndex` étant égal à un de moins que la `length` de `words`
- Calculate `elapsedTime` by subtracting `startTime` from the current time - Calculez `elapsedTime` en soustrayant `startTime` de l'heure actuelle
- Divide `elapsedTime` by 1,000 to convert from milliseconds to seconds - Divisez `elapsedTime` par 1 000 pour convertir des millisecondes en secondes
- Display a success message - Afficher un message de succès
- Word is complete, indicated by `typedValue` ending with a space (the end of a word) and `typedValue` being equal to `currentWord` - Le mot est complet, indiqué par `typedValue` se terminant par un espace (la fin d'un mot) et `typedValue` étant égal à `currentWord`
- Set `value` on `typedElement` to be `''` to allow for the next word to be typed - Définissez `value` de `typedElement` sur `''` pour permettre la saisie du mot suivant
- Increment `wordIndex` to move to the next word - Incrémentez `wordIndex` pour passer au mot suivant
- Loop through all `childNodes` of `quoteElement` to set `className` to `''` to revert to default display - Parcourez tous les `childNodes` de `quoteElement` pour définir `className` à `''` pour revenir à l'affichage par défaut
- Set `className` of the current word to `highlight` to flag it as the next word to type - Définissez le `className` du mot actuel sur `highlight` pour le marquer comme le prochain mot à taper
- Word is currently typed correctly (but not complete), indicated by `currentWord` started with `typedValue` - Le mot est actuellement tapé correctement (mais pas complet), indiqué par `currentWord` commencé par `typedValue`
- Ensure `typedValueElement` is displayed as default by clearing `className` - Assurez-vous que `typedValueElement` est affiché par défaut en effaçant `className`
- If we made it this far, we have an error - Si nous sommes arrivés jusqu'ici, nous avons une erreur
- Set `className` on `typedValueElement` to `error` - Définissez `className` de `typedValueElement` à `error`
## Testez votre application ## Testez votre application

Write Preview
Loading…
Cancel
Save