Notre premier code 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 (et d'autres langages de programmation) fonctionne. Dans les articles suivants, vous reviendrez plus en détails sur toutes ces fonctionnalités !

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 :

La première chose à faire en regardant ce résumé, c'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 code et votre navigateur web. Pour l'instant, vous ne verrez qu'un titre, un paragraphe d'instructions et un formulaire pour entrer une estimation, mais le formulaire est pour l'instant inactif.

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

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> :

JS

let randomNumber = Math.floor(Math.random() * 100) + 1;
      const guesses = document.querySelector('.guesses');
      const lastResult = document.querySelector('.lastResult');
      const lowOrHi = document.querySelector('.lowOrHi');
      const guessSubmit = document.querySelector('.guessSubmit');
      const guessField = document.querySelector('.guessField');
      let guessCount = 1;
      let resetButton;

      function checkGuess() {
        const userGuess = Number(guessField.value);
        if (guessCount === 1) {
          guesses.textContent = 'Nombres précédents: ';
        }

        guesses.textContent += userGuess + ' ';

        if (userGuess === randomNumber) {
          lastResult.textContent = 'Toutes nos félicitations! Vous avez bien compris!';
          lastResult.style.backgroundColor = 'green';
		  lastResult.style.color = 'white';
          lowOrHi.textContent = '';
          setGameOver();
        } else if (guessCount === 10) {
          lastResult.textContent = '!!!GAME OVER!!!';
          lowOrHi.textContent = '';
          setGameOver();
        } else {
          lastResult.textContent = 'Faux!';
          lastResult.style.backgroundColor = 'red';
		  lastResult.style.color = 'white';
          if(userGuess < randomNumber) {
            lowOrHi.textContent = 'La dernière estimation était trop petite!' ;
          } else if(userGuess > randomNumber) {
            lowOrHi.textContent = 'La dernière estimation était trop grande!';
          }
        }

        guessCount++;
        guessField.value = '';
        guessField.focus();
      }

      guessSubmit.addEventListener('click', checkGuess);

      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);
      }

      function resetGame() {
        guessCount = 1;
        const resetParas = document.querySelectorAll('.resultParas p');
        for (const resetPara of resetParas) {
          resetPara.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;
      }

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 égal (=) 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 faite 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 au champ de saisie du formulaire et au bouton de soumission ; elles sont utilisées pour écouter 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" />
  

Auto-évaluation

L'auto-évaluation suivante teste votre compréhension des bases de JavaScript abordées dans le guide ci-dessus.

Génerateur d'histoires absurdes

Dans le cadre de cette évaluation, votre tâche sera d'utiliser les connaissances que vous avez apprises dans les articles de ce module et de les appliquer pour créer une appli ludique qui génère aléatoirement des histoires absurdes. Amusez-vous bien !