Maintenant que vous avez appris des éléments théoriques sur le JavaScript, et ce que vous pouvez faire avec, nous allons vous donner un cours intensif sur les fonctionnalités basiques du JavaScript avec un tutoriel entièrement pratique. Vous allez construire un simple jeu, étape par étape, consistant à deviner un nombre, nommé « Guess the number ».

Prérequis : Une culture informatique basique, et des notions de HTML et CSS.
Objectif : Avoir une première expérience d'écriture de JavaScript et comprendre les implications de l'écriture d'un programme en JavaScript.

Ne vous attendez pas à comprendre tout le code en détail immédiatement — nous voulons simplement vous présenter les grands concepts pour le moment, et vous donner une idée de la façon dont JavaScript fonctionne  (et d'autres langages de programmation). Dans les articles suivants, vous reviendrez sur toutes ces fonctionnatés de manière plus détaillée !

Note : De nombreuses fonctionnalités que vous allez voir en JavaScript sont identiques à celles d'autres langages de programmation — fonctions, boucles, etc. La syntaxe du code est différente mais les concepts sont globalement identiques.

Penser comme un programmeur

Une des choses les plus difficiles à apprendre en programmation n'est pas la syntaxe, mais comment l'appliquer afin de résoudre un problème réel. Vous devez commencer à penser comme un programmeur — ce qui implique généralement d'examiner les tâches que votre programme doit effectuer, de déterminer les fonctionnalités du code nécessaires à leurs réalisations et comment les faire fonctionner ensemble.

Cela requiert un mélange de travail acharné, d'expérience avec la syntaxe de programmation (de manière générale) et surtout de la pratique — ainsi qu'un peu de créativité. Plus vous allez coder, plus vous aller vous améliorer. On ne peut pas garantir que vous aurez un « cerveau de développeur » en 5 minutes, mais nous allons vous donner plein d'occasions pour pratiquer cette façon de penser, tout au long du cours.

Maintenant que vous avez cela en tête, regardons l'exemple que nous allons construire dans cet article et comment le découper en plusieurs tâches qui ont du sens.

Exemple — Jeu : Devinez le nombre

Dans cet article, nous allons vous montrer comment construire le jeu simple que vous pouvez voir ci-dessous:

Essayez de jouer et familiarisez-vous avec ce jeu avant de continuer.

Imaginons que votre patron vous ait donné le résumé suivant pour créer ce jeu :

Je vous demande de créer un jeu simple de devinette de nombre. Le jeu choisit aléatoirement un nombre entre 1 et 100, puis il met le joueur au défi de le deviner en 10 tentatives maxi. À chaque tour, le joueur doit être informé s'il a deviné ou non le bon nombre — si ce n'est pas le cas, le jeu lui indique si son estimation est trop basse ou trop élevée. Le jeu doit également rappeler au joueur les nombres déjà proposés. Le jeu se termine quand le joueur a deviné le nombre mystère, ou s'il a épuisé ses 10 chances. A la fin du jeu, le joueur a la possibilité de débuter une nouvelle partie.

La première chose à faire en regardant ce résumé, est de le décomposer en tâches simples et codables comme le ferait un programmeur :

  1. Générer un nombre aléatoire entre 1 et 100.
  2. Stocker le nombre de tours déjà joués. Commencer par 1.
  3. Fournir au joueur le moyen de saisir un nombre.
  4. Stocker l'ensemble des propositions de nombres pour que le joueur puisse les consulter.
  5. Vérifier si le nombre saisi par le joueur est correct.
  6. S'il est correct :
    1. Afficher un message de félicitations.
    2. Empêcher que le joueur saisisse de nouveau un nombre.
    3. Afficher un contrôle pour que le joueur puisse rejouer.
  7. S'il est faux et que le joueur a encore des tours à jouer :
    1. Informer le joueur que sa proposition de nombre est fausse.
    2. Lui permettre d'entrer une nouvelle proposition de nombre.
    3. Incrémenter le nombre de tours de 1.
  8. S'il est faux et que le joueur n'a plus de tours à jouer :
    1. Informer le joueur qu'il a perdu et que la partie est finie.
    2. Empêcher que le joueur saisisse de nouveau un nombre.
    3. Afficher un contrôle pour que le joueur puisse rejouer.
  9. Une fois le jeu redémarré, s'assurer que la logique du jeu et l'interface utilisateur sont complètement réinitialisées, puis revenir à l'étape 1.

Voyons maintenant comment nous pouvons transformer ces étapes en code. Nous allons développer cet exemple et explorer les fonctionnalités JavaScript au fur et à mesure.

Configuration initiale

Pour commencer ce didacticiel, faites une copie locale du fichier number-guessing-game-start.html  (à voir directement ici). Ouvrez-le dans votre éditeur de texte et votre navigateur web. À ce moment, vous verrez un simple en-tête, un paragraphe d'instructions et un formulaire pour entrer une estimation, mais le formulaire ne fera actuellement rien.

L'endroit où nous allons ajouter tout notre code se trouve dans l'élément <script> au bas du code HTML :

<script>

  // Votre code JavaScript se place ici

</script>

Ajouter des variables pour stocker les données

Commençons. Tout d'abord, ajoutez les lignes suivantes dans l'élément <script> :

let randomNumber = Math.floor(Math.random() * 100) + 1;

let guesses = document.querySelector('.guesses');
let lastResult = document.querySelector('.lastResult');
let lowOrHi = document.querySelector('.lowOrHi');

let guessSubmit = document.querySelector('.guessSubmit');
let guessField = document.querySelector('.guessField');

let guessCount = 1;
let resetButton;

Cette partie de code définit les variables nécessaires au stockage des données que notre programme utilisera. Les variables sont essentiellement des conteneurs de valeurs (tels que des nombres ou des chaînes de texte). Une variable se crée avec le mot-clé let suivi du nom de la variable. Vous pouvez ensuite attribuer une valeur à la variable avec le signe égale (=) suivi de la valeur que vous voulez lui donner.

Dans notre exemple :

  • La première variable — randomNumber — reçoit le nombre aléatoire entre 1 et 100, calculé en utilisant un algorithme mathématique.
  • Les trois variables suivantes sont chacune faites pour stocker une référence aux paragraphes de résultats dans le HTML ; elles sont utilisées pour insérer des valeurs dans les paragraphes plus tard dans le code:
    <p class="guesses"></p>
    <p class="lastResult"></p>
    <p class="lowOrHi"></p>
  • Les deux variables suivantes stockent des références à l'entrée de texte de formulaire et au bouton de soumission et sont utilisées pour contrôler l'envoi de la supposition (guess)  plus tard.
    <label for="guessField">Enter a guess: </label><input type="text" id="guessField" class="guessField">
    <input type="submit" value="Submit guess" class="guessSubmit">
  • Nos deux dernières variables stockent un nombre de suppositions qui vaut 1 (utilisé pour garder une trace du nombre de suppositions que le joueur a faites) et une référence à un bouton de réinitialisation qui n'existe pas encore (mais plus tard).

Note: Vous en apprendrez beaucoup plus sur les variables plus tard dans le cours, en commençant par le prochain article.

Fonctions

Ensuite, ajoutez ce qui suit ci-dessous votre code JavaScript précédent :

function checkGuess() {
  alert('Je suis un espace réservé');
}

Les fonctions sont des blocs de code réutilisables que vous pouvez écrire une fois et exécuter encore et encore, ce qui évite d'avoir à répéter le code tout le temps. C'est vraiment utile. Il y a plusieurs façons de définir les fonctions, mais pour l'instant nous allons nous concentrer sur un type simple. Ici nous avons défini une fonction en utilisant le mot-clé function accompagné de son nom suivi de parenthèses. Ensuite, nous avons mis deux accolades ({ }). Dans ces accolades est placé tout le code à exécuter à chaque appel de la fonction.

Quanf 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 dans la console javascript des outils de développement et entrez la ligne suivante

checkGuess();

Après avoir pressé Entrée ou Retour, vous devriez voir apparaître une alerte disant « Je suis un espace réservé » ; nous avons défini une fonction dans notre code créant une alerte chaque fois que nous l'appelons.

Note : Vous allez en apprendre beaucoup plus sur les fonctions plus tard dans ce cours.

Opérateurs

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. Ensuite, vous pouvez saisir les exemples ci‑dessous — saisissez chacun dans les colonnes « Exemple » exactement comme indiqué, en appuyant sur la touche Entrée 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 simple ci-dessous :

Regardons d'abord les opérateurs arithmétiques, par exemple :

Operator Name Example
+ Addition 6 + 9
- Soustraction 20 - 15
* Multiplication 3 * 7
/ Division 10 / 5

L'opérateur + peut aussi s'utiliser pour unir des chaînes de caractères (cela se nomme concaténer en programmation). Entrez les lignes suivantes, une par une :

let name = 'Bingo';
name;
let hello = ' dit bonjour !';
hello;
let greeting = name + hello;
greeting;

Des raccourcis d'opérateurs sont également disponibles, appelés opérateurs d'assignation augmentés. Par exemple, si vous voulez simplement ajouter une nouvelle chaîne de texte à une chaîne existante et renvoyer le résultat, vous pouvez faire :

name += ' dit bonjour !';

Cela équivaut à :

name = name + ' dit bonjour !';

Lorsque nous exécutons des tests vrai/faux (par exemple, dans des conditions — voir ci-dessous, nous utilisons des opérateurs de comparaison, par exemple:

Operator Name Example
=== Égalité stricte (est-ce exactement identique ?) 5 === 2 + 4
!== Non égalité (est-ce différent ?) 'Chris' !== 'Ch' + 'ris'
< Inférieur à 10 < 6
> Supérieur à 10 > 20

Structures conditionnelles

Revenons à la fonction checkGuess(). Nous pouvons assurément dire que nous ne souhaitons pas qu'elle renvoie un message d'emplacement réservé. Nous voulons qu'elle vérifie si la supposition du joueur est correcte ou pas et qu'elle fasse une réponse appropriée.

Donc, remplacez l'actuelle  fonction checkGuess() par cette version :

function checkGuess(){
  let userGuess = Number(guessField.value);
  if (guessCount === 1) {
    guesses.textContent ='Propositions précédentes : ';
    }
  guesses.textContent += userGuess + ' ';
 
  if (userGuess === randomNumber) {
    lastResult.textContent ='Bravo, vous avez trouvé le nombre !';
    lastResult.style.backgroundColor ='green';
    lowOrHi.textContent ='';
    setGameOver();
  } else if (guessCount === 10) {
    lastResult.textContent = '!!! PERDU !!!';
    setGameOver();
  } else {
    lastResult.textContent ='Faux !';
    lastResult.style.backgroundColor = 'red';
    if (userGuess < randomNumber) {
      lowOrHi.textContent = 'Le nombre saisi est trop petit !';
    } else if (userGuess > randomNumber) {
      lowOrHi.textContent = 'Le nombre saisi est trop grand !';
    }
}
 
  guessCount++;
  guessField.value = '';
  guessField.focus();
}

Pas mal de code — ouf ! Passons en revue chaque section et expliquons ce qu'elle fait.

  • La première ligne de la fonction (ligne 2) déclare une variable nommée userGuess et définit sa valeur à celle qui vient d'être saisie dans le champ de texte. Nous faisons passer aussi cette valeur par la méthode  Number() , juste pour nous assurer que la valeur est bien un nombre.
  • Ensuite, nous rencontrons notre premier bloc de code conditionnel (lignes 3-5 ci‑dessus). Un bloc de code conditionnel permet d'exécuter du code de manière sélective, selon que certaines conditions sont vraies ou non. Cela ressemble un peu à une fonction, mais ce n'est pas le cas. La forme la plus simple du bloc conditionnel commence par le mot clé if, puis quelques parenthèses, puis des accolades { }.
    A l'intérieur des parenthèses, nous mettons le test. S'il renvoie true , nous exécutons le code à l'intérieur des accolades. Sinon, nous ne le faisons pas, et passons au morceau de code suivant. Dans ce cas, le test vérifie si la variable guessCount est égale à 1 (c'est-à-dire s'il s'agit de la première supposition du joueur) :
    guessCount === 1
    Si c'est le cas, nous faisons en sorte que le texte affiché soit « Propositions précédentes : ». Sinon, nous ne le faisons pas.
  • La ligne 6 ajoute la valeur courante userGuess à la fin du paragraphe guesses , plus un espace vide de sorte qu'il y aura un espace entre chaque supposition faite.
  • Le bloc suivant (lignes 8-24 ci-dessus) effectue quelques vérifications:
    • Le premier if(){ } vérifie si la supposition de l'utilisateur est égale au nombre aléaotire randomNumber situé en haut de notre JavaScript. Si c'est le cas, le joueur a deviné correctement et a gagné le jeu, nous affichons donc un message de félicitations de belle couleur verte à l'adresse du joueur, effaçons le contenu de la boîte d'information sur la position de l'estimation et exécutons une fonction appelée setGameOver(), dont nous reparlerons plus tard.
    • Ensuite, nous chaînons un autre test à la fin du précédent avec une structure else if(){ }. Cette structure vérifie si l'utilisateur a épuisé toutes ses tentatives possibles. Si c'est le cas, le programme fait la même chose que dans le bloc précédent, mais avec un message de fin de partie au lieu d'un message de félicitations.
    • Le dernier bloc chaîné à la fin de ce code (else { }) contient du code qui n'est exécuté que si aucun des deux autres tests n'a renvoyé vrai (c'est-à-dire que le joueur n'a pas deviné juste, mais qu'il lui reste des possibilité de supposition). Dans ce cas, nous lui disons que sa supposition est mauvaise, puis nous effectuons un autre test conditionnel pour vérifier si elle est supérieure ou inférieure à la valeur exacte et affichons un autre message approprié pour indiquer si sa supposition est trop forte ou trop faible.
  • Les trois dernières lignes de la fonction (ligne 26-28 ci-dessus) préparent à une nouvelle proposition. Nous ajoutons 1 à la variable guessCount qui décompte les tours (++ est une opération d'incrémentation — ajout de 1), puis purgeons le champ texte du formulaire et lui redonnons le focus, prêt pour la saisie suivante.

Evénements

À ce stade, nous avons un bien mis en œuvre la fonctioncheckGuess() , mais ça ne fera rien parce que nous ne l'avons pas encore appelé.
Idéalement, nous voulons l'appeler lorsque le bouton "Soumettre" est appuyé, et pour ce faire, nous devons utiliser un événement. Les événements sont des actions qui se produisent dans le navigateur, comme le clic sur un bouton, le chargement d'une page ou la lecture d'une vidéo, en réponse à quoi nous pouvons exécuter des blocs de code. Les constructions qui écoutent l'événement en cours s'appellent écouteurs d'événements, et les blocs de code exécutés en réponse à l'événement déclencheur sont appelés gestionnaires d'évenements.

Ajoutez la ligne suivante sous l'accolade de fermeture de votre fonction checkGuess() :

guessSubmit.addEventListener('click', checkGuess);

Ici, nous ajoutons un écouteur d'événement au bouton guessSubmit . C'est une méthode qui prend deux valeurs d'entrée (appelées arguments) - le type d'événement que nous écoutons (dans ce cas, click) qui est une chaîne, et le code que nous voulons exécuter quand l'événement se produit (dans ce cas, la fonction checkGuess()  — notez que nous n'avons pas besoin de spécifier les parenthèses lors de l'écriture dans addEventListener()).

Essayez d'enregistrer et d'actualiser votre code maintenant, votre exemple devrait maintenant fonctionner, jusqu'à un certain point. Le seul problème est maintenant que si vous devinez la bonne réponse ou si vous n'avez plus de suppositions, le jeu va se casser parce que nous n'avons pas encore défini la fonction setGameOver() qui est supposée être exécuté une fois le jeu terminé. Ajoutons maintenant notre code manquant et complétez l'exemple de fonctionnalité.

Finir les fonctionnalités du jeu

Ajoutons la fonction setGameOver() au fond de notre code en descendant. Ajoutez ceci maintenant, ci-dessous le reste de votre JavaScript:

function setGameOver() {
  guessField.disabled = true;
  guessSubmit.disabled = true;
  resetButton = document.createElement('button');
  resetButton.textContent = 'Start new game';
  document.body.appendChild(resetButton);
  resetButton.addEventListener('click', resetGame);
}
  • Les deux premières lignes désactivent l'entrée de texte et le bouton en définissant leurs propriétés désactivées sur true.  Ceci est nécessaire, car si nous ne le faisons pas, l'utilisateur pourrait soumettre plus de suppositions après la fin du jeu, ce qui gâcherait les choses.
  • Les trois lignes suivantes génèrent une nouvelle <button> élément, définissez son libellé de texte sur "Démarrer une nouvelle partie" et ajoutez-le au bas de notre code HTML existant.
  • 102 / 5000La dernière ligne définit un écouteur d'événement sur notre nouveau bouton de sorte que quand il est cliqué, une fonction  resetGame() est appellée.

Maintenant, nous devons définir cette fonction aussi! Ajoutez le code suivant, à nouveau au bas de votre JavaScript:

function resetGame() {
  guessCount = 1;

  let resetParas = document.querySelectorAll('.resultParas p');
  for (let i = 0 ; i < resetParas.length ; i++) {
    resetParas[i].textContent = '';
  }

  resetButton.parentNode.removeChild(resetButton);

  guessField.disabled = false;
  guessSubmit.disabled = false;
  guessField.value = '';
  guessField.focus();

  lastResult.style.backgroundColor = 'white';

  randomNumber = Math.floor(Math.random() * 100) + 1;
}

Ce bloc de code assez long réinitialise complètement tout ce qu'il était au début du jeu, de sorte que le joueur peut faire un autre tour. Il peut :

  • Remettre le compteur guessCount à 1.
  • Effacer tous les paragraphes d'information.
  • Supprimer le bouton de réinitialisation de notre code.
  • Activer les éléments de formulaire et vide et met au point le champ de texte, prêt à entrer une nouvelle estimation.
  • Supprimer la couleur d'arrière-plan du paragraphe lastResult.
  • Génère un nouveau nombre aléatoire afin que vous ne deviniez plus le même nombre!

À ce stade, vous devriez avoir un jeu (simple) entièrement fonctionnel - félicitations!

Tout ce qu'il nous reste à faire dans cet article est de parler de quelques autres caractéristiques importantes du code que vous avez déjà vues, bien que vous ne l'ayez pas réalisé.

Boucles

Une partie du code ci-dessus que nous devons examiner de plus près est la boucle for. Les boucles sont un concept très important dans la programmation, qui vous permet de continuer à exécuter un morceau de code encore et encore, jusqu'à ce qu'une certaine condition soit remplie.

Pour commencer, allez sur votre console developpeur Javascript encore une fois, et entrez ce qui suit:

for (let i = 1 ; i < 21 ; i++) { console.log(i) }

Qu'est-il arrivé? Les numéros 1 à 20 ont été imprimés dans votre console. C'est à cause de la boucle. Une boucle : for  prend trois valeurs d'entrée (arguments)

  1. Une valeur de départ : Dans ce cas, nous commençons un compte à 1, mais cela pourrait être n'importe quel nombre que vous aimez. Vous pouvez remplacer iavec n'importe quel nom que vous aimez aussi, mais je suis utilisé comme une convention parce qu'il est court et facile à retenir.
  2. Une condition de fin : Ici, nous avons spécifié  i < 21 la boucle continuera jusqu'à ce que  i  ne soit plus inférieur à 21. Quand i atteindra 21, la boucle ne fonctionnera plus.
  3. Un incrémenteur :  Nous avons spécifié i++, ce qui signifie "ajouter 1 à i". La boucle sera exécutée une fois pour chaque valeur de i, jusqu'a ce que i jusqu'à ce que j'atteigne une valeur de 21 (comme indiqué ci-dessus). Dans ce cas, nous imprimons simplement la valeur de i  sur la console à chaque itération en utilisant console.log().

Maintenant, regardons la boucle dans notre jeu de devinettes de nombres - ce qui suit peut être trouvé dans la fonction resetGame() :

let resetParas = document.querySelectorAll('.resultParas p');
for (let i = 0 ; i < resetParas.length ; i++) {
  resetParas[i].textContent = '';
}

Ce code crée une variable contenant une liste de tous les paragraphes à l'intérieur de <div class="resultParas">en utilisant la méthode querySelectorAll (), puis il passe en boucle dans chacun d'entre eux et supprime le contenu du texte de chacun.

Une petite discussion sur les objets

Ajoutons une dernière amélioration avant d'aborder cette discussion. Ajoutez la ligne suivante juste en dessous de let resetButton; ligne près du haut de votre JavaScript, puis enregistrez votre fichier:

guessField.focus();

Cette ligne utilise la méthodefocus() pour placer automatiquement le curseur de texte dans le champ de texte <input> dès le chargement de la page, ce qui signifie que l'utilisateur peut commencer à taper sa première estimation tout de suite, et ne doit pas d'abord cliquer sur le champ de formulaire. Ce n'est qu'un petit ajout, mais cela améliore la convivialité - en donnant à l'utilisateur une bonne idée visuelle de ce qu'il doit faire pour jouer.

Analysons ce qui se passe ici un peu plus en détail. En JavaScript, tout est un objet. Un objet est une collection de fonctionnalités connexes stockées dans un seul groupe. Vous pouvez créer vos propres objets, mais cela est une notion assez avancée, nous ne la couvrirons que beaucoup plus tard dans le cours. Pour l'instant, nous allons discuter brièvement des objets intégrés que contient votre navigateur, ce qui vous permet de faire beaucoup de choses utiles.

Dans ce cas particulier, nous avons d'abord créé une variable guessField qui stocke une référence au champ de formulaire de saisie de texte dans notre HTML - la ligne suivante se trouve parmi nos déclarations de variables près du sommet:

let guessField = document.querySelector('.guessField');

Pour obtenir cette référence, nous avons utilisé la méthode querySelector() de l'objet document. querySelector() prend une information - un sélecteur CSS 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 <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 estfocus(), donc nous pouvons maintenant utiliser cette ligne pour focaliser l'entrée de texte:

guessField.focus();

Les variables qui ne contiennent pas de références aux éléments de formulaire n'auront pas de focus() à leur disposition. Par exemple, la variable guesses contient une référence à un élément <p> et guessCount contient un nombre.

Jouer avec les objets du navigateur

Jouons un peu avec certains objets du navigateur.

  1.  Tout d'abord, ouvrez votre programme dans un navigateur.
  2.  Ensuite, ouvrez les outils de développement de votre navigateur et assurez-vous que l'onglet de la console JavaScript est ouvert.
  3.  Tapez guessField et la console vous montrera que la variable contient un élément <input>. Vous remarquerez également que la console complète automatiquement les noms d'objets existant dans l'environnement d'exécution, y compris vos variables!
  4.  Maintenant, tapez ce qui suit :

    guessField.value = 'Hello';
    

    La propriété value représente la valeur courante entrée dans un champs de texte. Vous verrez qu'en entrant cette commande nous avons changé ce que c'est.

  5. Tapez maintenant guesses and appuyez sur entrée. La console vous montrera que la variable contient un élément <p>.
  6. Maintenant, essayez d'entrer la ligne suivante:

    guesses.value
    

    Le navigateur va retourner undefined, parce que value n'existe pas dans le paragraphe.

  7. Pour changer le texte dans le paragraphe vous aurez besoin de  la propriété textContent à la place.
    Essayez ceci :

    guesses.textContent = 'Where is my paragraph?';
    
  8. Maintenant, pour des trucs amusants. Essayez d'entrer les lignes ci-dessous, une par une :
guesses.style.backgroundColor = 'yellow';
guesses.style.fontSize = '200%';
guesses.style.padding = '10px';
guesses.style.boxShadow = '3px 3px 6px black';

Chaque élément d'une page possède une propriété de style , qui contient elle-même un objet dont les propriétés contiennent tous les styles CSS en ligne appliqués à cet élément. Cela nous permet de définir dynamiquement de nouveaux styles CSS sur des éléments en utilisant JavaScript.

C'est fini pour maintenant...

Voilà donc pour construire l'exemple — vous avez atteint la fin, bravo! Essayez votre code final ou jouez avec notre version finale ici. Si vous ne parvenez pas à faire fonctionner l'exemple, vérifiez-le par rapport au code source.

Étiquettes et contributeurs liés au document

Dernière mise à jour par : Eric-ciccotti,