JavaScript - Événements Clavier

Bonjour à tous, futurs magiciens JavaScript ! Aujourd'hui, nous allons plonger dans le monde passionnant des événements clavier. En tant que votre enseignant informatique de quartier, je suis là pour vous guider à travers cette aventure étape par étape. Alors, prenez votre boisson favorite, asseyez-vous confortablement, et embarquons ensemble dans cette aventure clavier !

Événements Clavier Communs

Avant de commencer à coder, familiarisons-nous avec les événements clavier les plus courants en JavaScript. Pensez à ces événements comme les différentes manières dont votre ordinateur écoute votre clavier :

Nom de l'Événement	Description
keydown	Déclenché lorsque une touche est pressée
keypress	Déclenché lorsque une touche est pressée (Touches de caractères uniquement)
keyup	Déclenché lorsque une touche est relâchée

Ces événements sont comme les oreilles de votre ordinateur, toujours en écoute de vos frappes. Génial, non ?

Propriétés des Événements Clavier

Maintenant, parlons des propriétés que ces événements transportent. Lorsqu'un événement clavier se produit, il apporte avec lui des informations utiles :

Propriété	Description
key	La valeur de la touche pressée
keyCode	La valeur Unicode de la touche pressée (obsolète)
which	La valeur Unicode de la touche pressée (obsolète)
code	La touche physique sur le clavier

Ces propriétés sont comme de petits messagers, transportant des détails importants sur la touche que vous avez pressée.

Exemple : Événement Keydown

Commençons par notre premier exemple. Nous allons créer un programme simple qui écoute l'événement 'keydown' et affiche la touche pressée.

<h1>Appuyez sur une touche</h1>
<p id="output"></p>

<script>
document.addEventListener('keydown', function(event) {
document.getElementById('output').innerHTML = 'Vous avez pressé : ' + event.key;
});
</script>

Dans cet exemple, nous disons à l'ordinateur : "Écoutez n'importe quelle touche pressée, et lorsque cela se produit, montrez-nous quelle touche l'était." La méthode addEventListener est comme installer un espion pour surveiller les frappes de touches.

Exemple : Événement Keypress

Maintenant, essayons l'événement 'keypress'. Souvenez-vous, celui-ci ne fonctionne que pour les touches de caractères !

<h1>Tapez quelque chose</h1>
<p id="output"></p>

<script>
document.addEventListener('keypress', function(event) {
var current = document.getElementById('output').innerHTML;
document.getElementById('output').innerHTML = current + event.key;
});
</script>

Ce script est un peu comme une machine à écrire. Chaque fois que vous pressez une touche de caractère, il ajoute ce caractère à ce qui est déjà là. Il construit du texte au fur et à mesure que vous tapez !

Exemple : Événement Keyup

Passons à l'événement 'keyup'. Cette fois, nous allons créer un petit jeu où vous devez presser la bonne touche pour gagner.

<h1>Appuyez sur la touche 's' pour gagner !</h1>
<p id="output"></p>

<script>
document.addEventListener('keyup', function(event) {
if (event.key === 's') {
document.getElementById('output').innerHTML = 'Vous avez gagné ! ?';
} else {
document.getElementById('output').innerHTML = 'Essayez encore !';
}
});
</script>

Dans ce jeu, nous attendons que le joueur relâche la touche 's'. C'est comme un simple jeu "Simon Dit", mais avec des touches de clavier !

Exemple : Sans utiliser la méthode addEventListener

Maintenant, regardons une vieille manière de gérer les événements. Bien que addEventListener soit la méthode moderne, vous pourriez rencontrer cette méthode dans du code plus ancien :

<h1>Appuyez sur une touche</h1>
<p id="output"></p>

<script>
document.onkeydown = function(event) {
document.getElementById('output').innerHTML = 'Touche pressée : ' + event.key;
};
</script>

Cette méthode affecte directement une fonction à la propriété onkeydown du document. C'est comme mettre un panneau sur votre porte qui dit : "Lorsqu'on frappe à la porte, faites cela."

Mettre Tout Ensemble

Maintenant que nous avons exploré ces événements individuellement, créons un exemple plus complexe qui utilise les trois événements :

<h1>Testeur d'Événements Clavier</h1>
<p>Appuyez sur une touche pour voir les événements se déclencher !</p>
<table id="eventTable">
<tr>
<th>Type d'Événement</th>
<th>Touche</th>
<th>Code</th>
</tr>
</table>

<script>
function addEventToTable(eventType, event) {
var table = document.getElementById('eventTable');
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = eventType;
cell2.innerHTML = event.key;
cell3.innerHTML = event.code;
}

document.addEventListener('keydown', function(event) {
addEventToTable('keydown', event);
});

document.addEventListener('keypress', function(event) {
addEventToTable('keypress', event);
});

document.addEventListener('keyup', function(event) {
addEventToTable('keyup', event);
});
</script>

Cet exemple crée un tableau qui se remplit lorsque vous pressez des touches. C'est comme un journal des événements clavier, enregistrant chaque événement de touche qui se produit !

Et voilà, les amis ! Nous avons traversé le pays des événements clavier JavaScript. Souvenez-vous, la pratique rend parfait, donc n'ayez pas peur d'expérimenter avec ces exemples. Changez-les, cassez-les, réparez-les - c'est ainsi que vous apprendrez vraiment.

Avant de conclure, voici un petit fait amusant : Saviez-vous que la disposition des claviers, avec l'arrangement QWERTY, a été initialement conçue pour ralentir les dactylographes ? Elle a été créée pour les machines à écrire pour éviter que les bras en métal ne se bloquent. Et pourtant, nous utilisons cette même disposition pour créer des interactions fulgurantes dans nos applications web !

Continuez à coder, continuez à apprendre, et surtout, continuez à vous amuser ! À bientôt, votre enseignant informatique de quartier, en signant. Bonne programmation !

Credits: Image by storyset