Activités JavaScript

Les évènements focus & blur

L'événement focus se déclenche lorsqu'un élément a reçu le focus.

L'événement blur se déclenche lorsqu'un élément a perdu le focus.

Exemple

Copier/coller le code suivant :

<div><input type="text" id="txt" name="txt"></div>
<div id="msg"></div>
<script>
  const inpTxt = document.getElementById("txt");
  const divMsg = document.getElementById("msg");

  function getFocus() {
    divMsg.textContent = "J'ai reçu le focus!";
  }

  function lostFocus () {
    divMsg.textContent = "J'ai perdu le focus!";
  }

  inpTxt.addEventListener("focus", getFocus);
  inpTxt.addEventListener("blur", lostFocus);
</script>

Lorsque on clique sur le champ de texte #txt pour éditer son contenu, un curseur clignotant s'affiche.

Ali  

On dit que le champ a reçu le focus.

Lorsqu'on clique hors du champ, le curseur clignotant n'est plus affiché dans le champ. On dit que le champ a perdu le focus.

Travail demandé

Evènement blur

Modifier le script pour que :

• Il transforme la chaîne tapée en majuscules,
• Il supprime les espaces et les voyelles.

Evènement focus

Modifier le script pour qu'il ajoute une lettre miniscule au hasard au champ.

Number Guess

Nous souhaitons réaliser le jeu très populaire :

• L'ordinateur choisit un nombre au hazard dans l'intervalle [1, 99].
• L'utilisateur doit le deviner en moins de 7 essais.

La figure suivante présente un exemple de l'interface du jeu.

On donne le code HTML de l'interface :

<div class="container">
  <h1>Number Guess</h1>
  <p>The computer selected a number between 1 and 99. You have 7 attempts to guess it.</p>
  <p><input type="number" name="guess" id="guess" min="1" max="99"></p>
  <div class="row">
    <div class="box">
      <div class="title"># attempts</div>
      <div class="body" id="num-guess">0</div>
    </div>
    <div class="box">
      <div class="title">3 # guesses</div>
      <div class="body" id="last-guess">-</div>
    </div>
  </div>
  <p id="msg"></p>
</div>

Et le code JavaScript incomplet :

const inpGuess = document.getElementById("guess");
const divMsg = document.getElementById("msg");
const divNumGuess = document.getElementById("num-guess");
const divLastGuess = document.getElementById("last-guess");

const secret = ...;     // -- TODO -- choisir un nombre au hasard entre 1 et 99
let lastGuesses = [];   // Tableau des 3 derniers essais
let guessCount = 0;     // Nombre d'essais
let guessed = false;    // Indique si l'utilisateur a deviné
let gameEnded = false;  // Indique si le jeu est terminé

function getFocus() {
  /* 
    -- TODO --
    Si le jeu n'est pas encore terminé 
      Afficher le message "Guess my number between 1 - 99"
    Si le jeu est terminé
      Afficher le message "Game ended!"
  */
}

function lostFocus() {
  /*
    -- TODO --
  */
}

/* -- TODO -- Attacher les événements focus et blur aux fonctions */

/* Initialiser le champ de texte */
inpGuess.value = "";

Travail demandé

1. Copier / Coller le code ci-dessus dans deux fichiers : guesser.html et guesser.js.
2. Ajouter la mise en forme du jeu dans un fichier nommé guesser.css.
3. Compléter le code JavaScript.