JavaScript - Eventi della Tastiera

Ciao a tutti, futuri maghi di JavaScript! Oggi esploreremo il mondo emozionante degli eventi della tastiera. Come il tuo amico insegnante di informatica del vicinato, sono qui per guidarti in questa avventura passo per passo. Allora, prenditi la tua bevanda preferita, siediti comodo e insieme intraprendiamo questo viaggio attraverso la tastiera!

Eventi della Tastiera Comuni

Prima di iniziare a programmare, familiarizziamoci con gli eventi della tastiera più comuni in JavaScript. Pensate a questi eventi come i diversi modi in cui il computer ascolta la vostra tastiera:

Nome dell'Evento	Descrizione
keydown	Scatenato quando un tasto è premuto
keypress	Scatenato quando un tasto è premuto (solo tasti character)
keyup	Scatenato quando un tasto è rilasciato

Questi eventi sono come le orecchie del computer, sempre in ascolto per i vostri battiti di tastiera. Cool, vero?

Proprietà degli Eventi della Tastiera

Ora, parliamo delle proprietà che questi eventi portano con sé. Quando si verifica un evento della tastiera, porta con sé alcune informazioni utili:

Proprietà	Descrizione
key	Il valore del tasto premuto
keyCode	Il valore Unicode del tasto premuto (deprecato)
which	Il valore Unicode del tasto premuto (deprecato)
code	Il tasto fisico sulla tastiera

Queste proprietà sono come piccoli messaggeri, portando dettagli importanti sul tasto che avete premuto.

Esempio: Evento Keydown

Iniziamo con il nostro primo esempio. Creeremo un programma semplice che ascolta l'evento 'keydown' e visualizza il tasto premuto.

<h1> Premi un tasto </h1>
<p id="output"></p>

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

In questo esempio, stiamo dicendo al computer, "Ehi, ascolta qualsiasi tasto che viene premuto, e quando succede, dimoci quale tasto era." Il metodo addEventListener è come mettere una spia a guardare per i battiti di tastiera.

Esempio: Evento Keypress

Ora, proviamo l'evento 'keypress'. Ricorda, questo funziona solo per i tasti character!

<h1>Scrivi qualcosa</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>

Questo script è un po' come una macchina da scrivere. Ogni volta che premi un tasto character, aggiunge quel character a ciò che c'è già. Sta costruendo il testo man mano che scrivi!

Esempio: Evento Keyup

Passiamo all'evento 'keyup'. Questa volta, creeremo un piccolo gioco in cui devi premere il tasto giusto per vincere.

<h1> Premi il tasto 's' per vincere! </h1>
<p id="output"></p>

<script>
document.addEventListener('keyup', function(event) {
if (event.key === 's') {
document.getElementById('output').innerHTML = 'Hai vinto! ?';
} else {
document.getElementById('output').innerHTML = 'Prova di nuovo!';
}
});
</script>

In questo gioco, stiamo aspettando che il giocatore rilasci il tasto 's'. È come un semplice gioco "Simon Says", ma con i tasti della tastiera!

Esempio: Senza usare il metodo addEventListener

Ora, diamo un'occhiata a un modo più vecchio di gestire gli eventi. Anche se addEventListener è l'approccio moderno, potresti incontrare questo metodo in codice più vecchio:

<h1> Premi un tasto </h1>
<p id="output"></p>

<script>
document.onkeydown = function(event) {
document.getElementById('output').innerHTML = 'Tasto premuto: ' + event.key;
};
</script>

Questo metodo assegna direttamente una funzione alla proprietà onkeydown del documento. È come mettere un cartello sulla tua porta che dice, "Quando qualcuno bussa, fai questo."

Mettendo Tutto Insieme

Ora che abbiamo esplorato questi eventi singolarmente, creiamo un esempio più complesso che utilizza tutti e tre gli eventi:

<h1>Tester Eventi della Tastiera</h1>
<p> Premi un tasto per vedere gli eventi scatenarsi! </p>
<table id="eventTable">
<tr>
<th>Tipo di Evento</th>
<th>Tasto</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>

Questo esempio crea una tabella che si riempie man mano che premi i tasti. È come un diario degli eventi della tastiera, registrando ogni evento di tasto che si verifica!

E вот вы и здесь, gente! Abbiamo viaggiato attraverso il paese degli eventi della tastiera di JavaScript. Ricorda, la pratica rende perfetti, quindi non aver paura di sperimentare con questi esempi. Cambiali, rompili, riparali - è così che imparerai veramente.

Prima di concludere, ecco un piccolo事实: Sai che la disposizione delle tastiere, con l'ordine QWERTY, è stata originariamente progettata per rallentare i dattilografi? È stata creata per le macchine da scrivere per evitare che le braccia metalliche si inceppassero. Eppure, qui siamo, utilizziamo lo stesso layout per creare interazioni fulminee nelle nostre applicazioni web!

Continua a programmare, continua a imparare, e soprattutto, divertiti! Fino alla prossima volta, questo è il tuo amico insegnante di informatica del vicinato, che si congeda. Buon divertimento con il coding!

Credits: Image by storyset