JavaScript - Gestionnaires

Introduction aux Gestionnaires JavaScript

Bonjour, futurs programmeurs ! Aujourd'hui, nous allons plonger dans le monde passionnant des gestionnaires JavaScript. En tant que votre professeur d'informatique bien-aimé du quartier, je suis là pour vous guider à travers ce périple avec pleins d'exemples et d'explications. Alors, prenez votre boisson favorite, asseyez-vous confortablement, et c'est parti !

Qu'est-ce qu'un Gestionnaire en JavaScript ?

En JavaScript, un gestionnaire est une fonction qui est appelée lorsqu'un événement spécifique se produit. Imaginez-le comme un assistant spécial toujours en attente, prêt à intervenir. Quand cet événement se produit, notre gestionnaire passe à l'action !

Commençons par un exemple simple :

let button = document.querySelector('button');
button.onclick = function() {
alert('Bonjour, le Monde !');
};

Dans ce code, nous disons à JavaScript : "Quand quelqu'un clique sur ce bouton, affiche une alerte disant 'Bonjour, le Monde !'". La fonction que nous avons affectée à button.onclick est notre gestionnaire.

Types de Gestionnaires Communs

JavaScript a beaucoup de types de gestionnaires. Jetons un coup d'œil à certains des plus communs :

Type de Gestionnaire	Description	Exemple
onclick	Déclenché lorsque un élément est cliqué	element.onclick = function() { ... }
onmouseover	Déclenché lorsque la souris se déplace sur un élément	element.onmouseover = function() { ... }
onkeydown	Déclenché lorsque une touche est enfoncée	document.onkeydown = function(event) { ... }
onload	Déclenché lorsque une page ou une image finit de charger	window.onload = function() { ... }
onsubmit	Déclenché lorsque un formulaire est soumis	form.onsubmit = function(event) { ... }

Créer et Utiliser des Gestionnaires

Méthode 1 : Attribut HTML

Une façon de créer un gestionnaire est d'ajouter directement à un élément HTML en tant qu'attribut. Voici un exemple :

<button onclick="alert('Cliqué !')">Cliquez-moi</button>

Lorsque vous cliquez sur ce bouton, une alerte affichera "Cliqué !". Simple, n'est-ce pas ?

Méthode 2 : Propriété DOM

Une méthode plus flexible consiste à utiliser JavaScript pour affecter un gestionnaire à la propriété d'un élément :

let button = document.querySelector('button');
button.onclick = function() {
console.log('Le bouton a été cliqué !');
};

Cette méthode nous permet de changer le gestionnaire dynamiquement et d'accéder à l'élément à l'intérieur de la fonction.

Méthode 3 : addEventListener

La méthode la plus puissante est d'utiliser addEventListener. Elle nous permet d'ajouter plusieurs gestionnaires au même événement :

let button = document.querySelector('button');
button.addEventListener('click', function() {
console.log('Premier gestionnaire');
});
button.addEventListener('click', function() {
console.log('Deuxième gestionnaire');
});

Maintenant, lorsque vous cliquez sur le bouton, les deux messages seront enregistrés dans la console !

L'Objet Événement

Lorsqu'un événement se produit, JavaScript crée un objet 'événement' avec des détails sur ce qui s'est passé. Nous pouvons accéder à cet objet dans notre gestionnaire :

document.onmousemove = function(event) {
console.log('Position de la souris:', event.clientX, event.clientY);
};

Ce code enregistre la position de la souris chaque fois qu'elle se déplace. L'objet event nous donne accès à toutes sortes d'informations utiles !

Supprimer des Gestionnaires

Parfois, nous avons besoin de supprimer un gestionnaire. Voici comment nous pouvons le faire :

let button = document.querySelector('button');
function handler() {
console.log('Cliqué !');
button.removeEventListener('click', handler);
}
button.addEventListener('click', handler);

Ce gestionnaire ne s'exécutera qu'une seule fois car il se supprime après le premier clic !

Exemple Pratique : Un Jeu Simple

Mettons tout cela ensemble dans un petit jeu amusant. Nous allons créer un bouton qui se déplace lorsque vous essayez de le cliquer :

<button id="catch-me">Attrape-moi si tu peux !</button>

<script>
let button = document.getElementById('catch-me');
button.addEventListener('mouseover', function() {
let top = Math.random() * (window.innerHeight - this.offsetHeight);
let left = Math.random() * (window.innerWidth - this.offsetWidth);
this.style.top = top + 'px';
this.style.left = left + 'px';
});

button.addEventListener('click', function() {
alert('Félicitations ! Tu m'as attrapé !');
});
</script>

Dans ce jeu, le bouton se déplace à une position aléatoire chaque fois que vous essayez de le survoler. Si vous parvenez à cliquer dessus, vous gagnez !

Conclusion

Et voilà, les amis ! Nous avons couvert les bases des gestionnaires JavaScript, de ce qu'ils sont à comment les utiliser dans des situations pratiques. Souvenez-vous, la pratique rend parfait, donc n'ayez pas peur d'expérimenter avec ces concepts.

Comme je le dis toujours à mes élèves, coder c'est comme apprendre à faire du vélo. Ça peut sembler不稳定 au début, mais avec de la pratique, vous serez bientôt en train de rouler sans problème ! Continuez à coder, continuez à apprendre, et surtout, amusez-vous !

Credits: Image by storyset