Cette traduction est incomplète. Aidez à traduire cet article depuis l'anglais.

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 une compréhension basique de HTML et CSS.
Objectif : Avoir une première expérience dans l'écriture de JavaScript, et obtenir une compréhension basique de ce qu'implique l'écriture d'un programme 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 !

Remarque : 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 programmer - 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 ça 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 un jeu simple que vous pouvez voir ci-dessous:

Essayez de jouer et familiarisez-vous avec ce jeu avant de vous mettre à le coder.

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

Je veux que vous créiez un jeu simple qui génère un nombre aléatoire entre 1 et 100, puis qui mettra le joueur au défit de le deviner en 10 tours maximum. Après chaque tour, le joueur devra être informé s'il a deviné ou non le bon nombre, s'il a tort, le jeu lui indiquera si son estimation est trop basse ou trop élevée. Le jeu devrait également indiquer au joueur quels nombres il a déjà essayé précédemment. Le jeu se terminera une fois que le joueur aura deviné le nombre mystère, ou une fois qu'il aura épuisé ses 10 chances. A la fin du jeu, le joueur devrait avoir la possibilité de recommencer une partie.

La première chose à faire en regardant ce brief, 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éliciations.
    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é, assurez-vous que la logique du jeu et l'interface utilisateur sont complètement réinitialisées, puis revenez à 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 tutoriel, nous aimerions que vous fassiez une copie locale de ce fichier number-guessing-game-start.html  (en direct ici). Ouvrez-le dans votre éditeur de texte et votre navigateur Web. En ce moment, vous verrez un en-tête simple, 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> en bas du code HTML:

<script>

  // Your JavaScript goes here

</script>

Ajouter des variables pour stocker vos données

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

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

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

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

var guessCount = 1;
var resetButton;

Cette section du code définit les variables dont nous avons besoin pour stocker les données que notre programme utilisera. Les variables sont essentiellement des conteneurs de valeurs (tels que des nombres ou des chaînes de texte). Vous créez une variable avec le mot-clé varsuivi d'un nom pour votre variable. Vous pouvez ensuite attribuer une valeur à votre variable avec un signe égal (=) suii par la valeur que vous voulez lui donner.

Dans notre exemple

  • La première variable — randomNumber — est attribué un 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 notre HTML, et 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 conjectures de 1 (utilisé pour garder une trace du nombre de suppositions que le joueur a eu), 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('I am a placeholder');
}

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, suivi d'un nom, avec des parenthèses placées après. Après cela, nous avons mis deux accolades ({ }).

A l'intérieur des accolades va tout le code que nous voulons exécuter à chaque fois que nous appelons la fonction.

Le code est exécuté en tapant le nom de la fonction suivi par les parenthèses.

Maintenant, enregistrez votre code et rafraichissez le navigateur.

Allez dans les dans la console javascript qui fait partit des outils de développement,et entre la ligne suivante

checkGuess();

Vous devriez voir apparaître une alerte disant "Je suis un espace réservé"; nous avons défini une fonction dans notre code qui crée 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 maths, de joindre des chaînes ensemble, et d'autres choses de ce genre.
Sauvegardons notre code et rafraîchissons la page affichée dans votre navigateur. Ouvrez les outils de développement et la console Javascript si vous ne l'avez pas encore ouvert, vous pouvez essayer de taper les exemples illustrés ci-dessous -
saisissez chacun dans les colonnes "Exemple" exactement comme indiqué, en appuyant sur la touche Entrée du clavier après chacun d'eux et regardez les résultats qu'ils renvoient. 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 vue 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

Vous pouvez aussi utiliser l'opérateur + afin de joindre du texte/chaînes de caractères entres elles. (nommée concatenation en programmation).
Entrez les lignes suivantes :

var name = 'Bingo';
name;
var hello = ' says hello!';
hello;
var greeting = name + hello;
greeting;

Il existe également des opérateurs de raccourci, appelés opérateurs d'assignation augmentée. 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 += ' says hello!';

C'est l'équivalent de :

name = name + ' says hello!';

Lorsque nous exécutons des tests vrai / faux (par exemple, à l'intérieur de conditions - voir ci-dessous, nous utilisons des opérateurs de comparaison, par exemple:

Operator Name Example
=== Egalité stricte ( est ce exactement le même?) 5 === 2 + 4
!== Non égalité (Est ce que ce n'est pas le même?) 'Chris' !== 'Ch' + 'ris'
< Inférieur à 10 < 6
> Plus grand que 10 > 20

Structure conditionnelle

En retournant à notre fonction checkGuess() , je pense qu'il est sûr de dire que nous ne voulons pas qu'il crache un message d'espace réservé. Nous voulons qu'il vérifie si la supposition d'un joueur est correcte ou non, et répondre de manière appropriée.À ce stade, remplacez votre fonction checkGuess() actuelle par cette version à la place:

function checkGuess() {
  var userGuess = Number(guessField.value);
  if (guessCount === 1) {
    guesses.textContent = 'Previous guesses: ';
  }
  guesses.textContent += userGuess + ' ';
 
  if (userGuess === randomNumber) {
    lastResult.textContent = 'Congratulations! You got it right!';
    lastResult.style.backgroundColor = 'green';
    lowOrHi.textContent = '';
    setGameOver();
  } else if (guessCount === 10) {
    lastResult.textContent = '!!!GAME OVER!!!';
    setGameOver();
  } else {
    lastResult.textContent = 'Wrong!';
    lastResult.style.backgroundColor = 'red';
    if(userGuess < randomNumber) {
      lowOrHi.textContent = 'Last guess was too low!';
    } else if(userGuess > randomNumber) {
      lowOrHi.textContent = 'Last guess was too high!';
    }
  }
 
  guessCount++;
  guessField.value = '';
  guessField.focus();
}

C'est beaucoup 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 à la valeur courante suivant le nombre entré dans le champ de texte. Nous exécutons également cette valeur via la méthode  Number() , juste pour nous assurer que la valeur est définitivement un nombre.
  • Ensuite, nous rencontrons notre premier bloc de code conditionnel (lignes 3-5 ci-dessus). Un bloc de code conditionnel vous 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 incluons un test. Si le test retourne true , nous exécutons le code à l'intérieur des accolades. Sinon, nous ne le faisons pas, et passons au code suivant. Dans ce cas, le test teste si la variable guessCount est égale à 1 (c'est-à-dire s'il s'agit de la première action du joueur):
    guessCount === 1
    Si c'est le cas, nous faisons en sorte que le contenu du texte affiché soit égal au contenu précédent. 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 conjecture montrée.
  • 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 le jeu est gagné, ainsi nous montrons au joueur un message de félicitations avec une belle couleur verte, efface le contenu de la boîte d'information de basse / haute estimation, et exécute une fonction appelée setGameOver(), dont nous allons en reparler plus tard.
    • Maintenant, nous avons enchaîné un autre test sur la fin de la dernière en utilisant une structure else if else if(){ } .Cette structure vérifie si ce tour est le dernier tour de l'utilisateur. Si c'est le cas, le programme fait la même chose que dans le bloc précédent, sauf avec un message de fin de partie au lieu d'un message de félicitations.
    • Le dernier bloc enchaîné à la fin de ce code est le alors : else { }) contient du code qui n'est exécuté que si aucun des deux autres tests ne retourne vrai (c'est-à-dire que le joueur n'a pas deviné juste, mais qu'il reste plus de suppositions).
      Dans ce cas, nous leur disons qu'ils ont tort, puis nous effectuons un autre test conditionnel pour vérifier si la supposition était supérieure ou inférieure à la réponse, en affichant un autre message approprié pour les indiquer plus haut ou plus bas.
  • Les trois dernières lignes de la fonction (ligne 26-28 ci-dessus) nous préparent à la soumission suivante. Nous ajoutons 1 à la variable guessCount  donc le joueur utilise son tour (++ est une opération d'incrémentation - Cela signifie rajouter 1),puis cela vide la valeur du champ de texte du formulaire et le recentre, 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) acomme 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;

  var resetParas = document.querySelectorAll('.resultParas p');
  for (var 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 :

Remet le guessCount à 1..lastResult.

 

  • Remet le compteur guessCount à 1.
  • Efface tous les paragraphes d'information.
  • Supprime le bouton de réinitialisation de notre code.
  • Active les éléments de formulaire et vide et met au point le champ de texte, prêt à entrer une nouvelle estimation.
  • Supprime 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 (var 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++ 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() :

var resetParas = document.querySelectorAll('.resultParas p');
for (var 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, supprimer 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 var resetButton; ligne près du haut de votre JavaScript, puis enregistrez votre fichier:

guessField.focus();

This line uses the focus() method to automatically put the text cursor into the <input> text field as soon as the page loads, meaning that the user can start typing their first guess right away, and doesn't have to click the form field first. It's only a small addition, but it improves usability — giving the user a good visual clue as to what they've got to do to play the game.

Let's analyze what's going on here in a bit more detail. In JavaScript, everything is an object. An object is a collection of related functionality stored in a single grouping. You can create your own objects, but that is quite advanced and we won't be covering it until much later in the course. For now, we'll just briefly discuss the built-in objects that your browser contains, which allow you to do lots of useful things.

In this particular case, we first created a guessField variable that stores a reference to the text input form field in our HTML — the following line can be found amongst our variable declarations near the top:

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

To get this reference, we used the querySelector() method of the document object. querySelector() takes one piece of information — a CSS selector that selects the element you want a reference to.

Because guessField now contains a reference to an <input> element, it will now have access to a number of properties (basically variables stored inside objects, some of which can't have their values changed) and methods (basically functions stored inside objects). One method available to input elements is focus(), so we can now use this line to focus the text input:

guessField.focus();

Variables that don't contain references to form elements won't have focus() available to them. For example, the guesses variable contains a reference to a <p> element, and guessCount contains a number.

Playing with browser objects

Let's play with some browser objects a bit.

  1. First of all open your program up in a browser.
  2. Next, open your browser developer tools, and make sure the JavaScript console tab is open.
  3. Type in guessField and the console will show you that the variable contains an <input> element. You'll also notice that the console autocompletes object names that exist inside the execution environment, including your variables!
  4. Now type in the following:
    guessField.value = 'Hello';
    The value property represents the current value entered into the text field. You'll see that by entering this command, we've changed what that is!
  5. Now try typing in guesses and pressing return. The console will show you that the variable contains a <p> element.
  6. Now try entering the following line:
    guesses.value
    The browser will return undefined, because value doesn't exist on paragraphs.
  7. To change the text inside a paragraph, you need the textContent property instead. Try this:
    guesses.textContent = 'Where is my paragraph?';
  8. Now for some fun stuff. Try entering the below lines, one by one:
    guesses.style.backgroundColor = 'yellow';
    guesses.style.fontSize = '200%';
    guesses.style.padding = '10px';
    guesses.style.boxShadow = '3px 3px 6px black';
    Every element on a page has a style property, which itself contains an object whose properties contain all the inline CSS styles applied to that element. This allows us to dynamically set new CSS styles on elements using JavaScript.

Finished for now...

So that's it for building the example — you got to the end, well done! Try your final code out, or play with our finished version here. If you can't get the example to work, check it against the source code.

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : tonybengue, jumperparis, Merkrynis, withedouard, moziyin76
 Dernière mise à jour par : tonybengue,