Apprenez à programmer avec JavaScript

12 heures
Facile

Ce cours est visible gratuitement en ligne.

course.header.alt.is_certifying

Mis à jour le 22/04/2024

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.