• 12 hours
  • Easy

Free online content available in this course.

course.header.alt.is_certifying

Got it!

Last updated on 4/22/24

Interagissez avec un élément d’une page web grâce aux événements

Nous savons désormais comment récupérer un élément HTML, le modifier et en créer de nouveaux. Dans ce chapitre, nous apporterons une nouvelle dimension à notre page grâce à la programmation événementielle. Concrètement, nous allons découvrir comment réagir à des événements comme le clic ou l’utilisation du clavier, pour rendre notre projet interactif ! C’est parti !  🚀

Découvrez la programmation événementielle

Jusqu’à présent, notre code s’est toujours exécuté de manière séquentielle : d’abord la première instruction, puis la seconde, et ainsi de suite jusqu’à ce que toutes les instructions aient été exécutées. Dans ce chapitre, nous allons aborder une nouvelle manière d’envisager la programmation, avec la programmation événementielle.

Pour implémenter cela, nous devons d’abord dire à JavaScript de les écouter grâce à un eventListener, littéralement un “écouteur d’évènement”, en français. Puis, nous devons lier l’événement à un bloc de code. C’est parti ! 🚀

Écoutez un événement avec addEventListener

AddEventListener est une méthode fournie par JavaScript, qui peut être appelée directement depuis les éléments HTML. Cette méthode prend deux paramètres : 

  • le nom de l’événement, comme click, par exemple ;

  • une fonction. 

La fonction peut s’écrire de deux manières différentes que nous allons voir :

  • les fonctions classiques avec le mot-clé function ;

  • les fonctions fléchées. 

Utilisez addEventListener avec le mot-clé function

Prenons un exemple très simple pour illustrer ceci. Créons un bouton dans un fichier HTML :

<button id="monBouton">Cliquez-moi !</button>

Dans le fichier JavaScript, nous allons récupérer ce bouton et ajouter un écouteur :

    let monBouton = document.getElementById("monBouton");
    monBouton.addEventListener("click", function () {
        console.log("Vous avez cliqué sur le bouton")
    });

D’abord nous récupérons monBouton, jusqu’ici, pas de souci. Ensuite, nous définissons une fonction avec le mot-clé function.

Heuu…. Mais la fonction n’a pas de nom ? C’est normal… ?

Si nous exécutons ce code, le console.log ne s’affichera pas, car nous avons simplement ajouté un écouteur d’événement. Nous avons dit à ce dernier : “Lorsque l’événement click se produit sur monBouton, alors tu vas exécuter la fonction que je te donne”. Par conséquent, tant qu’on ne clique pas sur le bouton, il ne se passe rien. En revanche, le console.log apparaîtra à l’instant où on cliquera dessus.

Utilisez addEventListener avec une fonction fléchée

Voyons un exemple d’addEventListener où le second argument, qui est la fonction qui sera exécutée lorsque l’événement se produit, est écrit avec une fonction fléchée :

monBouton.addEventListener("click", () => {
    console.log("Vous avez cliqué sur le bouton")
});

Dans le code ci-dessus :

  • le mot function est remplacé par des parenthèses vides ; 

  • une flèche apparaît entre les parenthèses et les accolades (d’où le nom de fonction fléchée !)

En dépit de ces modifications, le fonctionnement reste le même. La fonction fléchée sera appelée à chaque fois que l’utilisateur va cliquer sur monBouton.

Récapitulons en vidéo

Je vous propose de revoir ces démonstrations dans la vidéo ci-dessous :

Pour aller plus loin : récupérez les informations sur un événement avec la variable “event”

Il arrive régulièrement que l’on souhaite avoir des informations sur l’événement qui vient de se dérouler. Par exemple :

  • Sur quel élément l’utilisateur a-t-il cliqué ?

  • Quelles étaient les coordonnées de la souris ?

  • Sur quelle touche du clavier l’utilisateur a-t-il appuyé ?

Un exemple classique est la gestion du clavier. Lorsque l’on appuie sur une touche, l’événement appelé keydown (anciennement keypress) se déclenche. Nous pourrions d’ailleurs l’utiliser dans notre application, par exemple, pour valider un mot lorsque l’on appuie sur la touche Entrée.

Nous pouvons écouter cet événement grâce à addEventListener, mais comment savoir quelle touche a été pressée ?

document.addEventListener('keydown', (event) => {
    console.log(event.key);
});

Entre les parenthèses est apparue une nouvelle variable appelée event. Cette variable est fournie directement par JavaScript. C’est un objet qui contient toutes les informations liées à l’événement. Ici, ce code affiche dans la console toutes les touches sur lesquelles nous pressons.

Je vous propose de revoir cette opération dans la vidéo ci-dessous :

À vous de jouer !

Dans cet exercice, je vous propose de revenir sur plusieurs notions abordées tout au long de cette troisième partie du cours, en modifiant notre projet. Pour le réaliser, je vous conseille de partir du résultat que nous avons obtenu à l’issue de l’exercice précédent.

Étape 1 : nettoyez le projet

Votre première étape consiste à supprimer les éléments qui seront modifiés dans notre projet :

  • mettez en commentaire toutes les méthodes qui utilisent prompt ;

  • mettez à jour la fonction lancerJeu pour qu’elle ne fasse plus appel à ces fonctions. 

Vous devez également désactiver temporairement le choix entre la liste des phrases et la liste des mots, de manière à utiliser systématiquement la liste des mots  :

  • mettez à jour la fonction lancerJeu, et commentez ce qui concerne la variable listePhrases

Corrigé

Vous pouvez vérifier votre travail en consultant la vidéo ci-dessous :

Étape 2 : gérez le clic sur le bouton “Valider”

À ce stade, le projet n’est plus fonctionnel, il n’est plus possible de jouer. Vous devez donc reconstruire ce que vous avez commenté à la première étape, en interagissant directement avec la page HTML.

Votre première étape est de pouvoir réagir au clic sur le bouton “Envoyer” :

  • Dans la fonction lancerJeu, récupérez le bouton de validation et écoutez l’événement click en utilisant la méthode addEventListener.

  • Testez que cela fonctionne avec un console.log(“j’ai cliqué !”).

  • Récupérez la balise inputEcriture et placez-la dans une variable. 

  • Dans l’addEventListener, faites un console.log avec la valeur contenue dans cette balise.

Pour accéder à la valeur contenue dans la balise inputEcriture, utilisez la propriété value

  • Testez en écrivant quelque chose dans le champ, et en vérifiant que la valeur apparaît bien lorsque vous cliquez sur Envoyer

Corrigé

Vous pouvez vérifier votre travail en consultant la vidéo ci-dessous :

Étape 3 : affichez les mots que l’utilisateur doit recopier

À ce stade, vous savez comment récupérer le mot que l’utilisateur a écrit, mais vous n’affichez pas encore le mot qu’il devra recopier. Pour réaliser cette mise à jour du code HTML :

  • à l’extérieur du addEventListener, créez une variable i qui servira de compteur. Dans l’addEventListener, ajoutez 1 à i à chaque fois que l’utilisateur clique sur le bouton Envoyer ; 

  • ajoutez un console.log qui va afficher le mot numéro i du tableau listeMots ;

  • créez une fonction afficherProposition, qui va prendre en paramètre le mot à afficher, et afficher ce mot dans la div zoneProposition ;  

  • utilisez cette fonction pour afficher les mots à proposer. 

Après ces opérations, vous devriez voir apparaître les mots un par un après avoir réalisé ces opérations. Cependant, vous remarquerez peut-être que le mot “undefined” s’affiche lorsqu’il n’y a plus de mots disponibles dans le tableau. Pour régler ce problème :

  • ajoutez un test dans l’addEventListener. Si le mot numéro i du tableau vaut undefined, écrivez le message “Le jeu est fini” à la place du mot, et désactivez le bouton de validation. Pour désactiver ce bouton, mettez la propriété disabled de ce bouton à true ; 

  • à chaque fois que l’utilisateur clique sur Valider, videz le champ inputEcriture

Corrigé

Vous pouvez vérifier votre travail en consultant la vidéo ci-dessous :

Étape 4 : gérez le score

Il nous reste une dernière étape : gérer le score de l’utilisateur.

  • Dans l’addEventListener, comparez ce qu’a écrit l’utilisateur et le mot proposé. Si ces deux mots sont identiques, augmentez le score. 

  • Dans tous les cas, mettez à jour le score en appelant la fonction de mise à jour du score avec les bons paramètres. 

Corrigé

Vous pouvez vérifier votre travail en consultant la vidéo ci-dessous :

Je vous invite également à vérifier l’intégralité du projet en consultant ce corrigé sur GitHub. Toutes mes félicitations pour votre travail ! 🥳

En résumé

  • La programmation événementielle consiste à écrire du code qui réagit à des événements.

  • Un événement est un signal envoyé par l’élément HTML lorsque l’utilisateur effectue une action (clic, frappe au clavier…).

  • Pour savoir quand un événement est envoyé, vous devez attacher un écouteur à l’élément HTML.

  • Pour gérer un événement, vous devez l’écouter en utilisant la méthode AddEventListener.

  • Vous pouvez récupérer des informations sur un événement en utilisant la variable event.

Vous savez désormais comment faire interagir une page web avec JavaScript et la rendre interactive. Que de chemin parcouru depuis vos premiers pas en JavaScript ! Pour maîtriser les bases de ce langage, je vous propose une dernière étape dans la 4e partie de ce cours : créer un formulaire de saisie sur une page web. Mais avant de découvrir comment faire, je vous propose de réaliser le quiz. 🙂

Example of certificate of achievement
Example of certificate of achievement