JavaScript - Tastaturereignisse

Hallo da, zukünftige JavaScript-Zauberer! Heute tauchen wir in die aufregende Welt der Tastaturereignisse ein. Als dein freundlicher Nachbarschafts-Computerlehrer bin ich hier, um dich auf diesem Abenteuer Schritt für Schritt zu führen. Also hole dir dein Lieblingsgetränk, setze dich zurück und lassen wir gemeinsam auf diese Tastaturreise gehen!

Häufige Tastaturereignisse

Bevor wir mit dem Coden beginnen, lassen wir uns mit den häufigsten Tastaturereignissen in JavaScript vertraut machen. Stell dir diese Ereignisse als verschiedene Weisen vor, wie dein Computer auf deine Tastatur hört:

Ereignisname	Beschreibung
keydown	Ausgelöst, wenn eine Taste gedrückt wird
keypress	Ausgelöst, wenn eine Taste gedrückt wird (nur Zeichen-tasten)
keyup	Ausgelöst, wenn eine Taste losgelassen wird

Diese Ereignisse sind wie die Ohren deines Computers, die immer auf deine Tastenanschläge lauschen. Cool, oder?

Eigenschaften von Tastaturereignissen

Nun sprechen wir über die Eigenschaften, die diese Ereignisse mit sich tragen. Wenn ein Tastaturereignis auftritt, bringt es einige nützliche Informationen mit:

Eigenschaft	Beschreibung
key	Der Wert der gedrückten Taste
keyCode	Der Unicode-Wert der gedrückten Taste (veraltet)
which	Der Unicode-Wert der gedrückten Taste (veraltet)
code	Die physische Taste auf der Tastatur

Diese Eigenschaften sind wie kleine Boten, die wichtige Details über die gedrückte Taste überbringen.

Beispiel: Keydown-Ereignis

Lassen wir mit unserem ersten Beispiel beginnen. Wir erstellen ein einfaches Programm, das auf das 'keydown'-Ereignis hört und die gedrückte Taste anzeigt.

<h1>Drücke eine Taste</h1>
<p id="output"></p>

<script>
document.addEventListener('keydown', function(event) {
document.getElementById('output').innerHTML = 'Du hast gedrückt: ' + event.key;
});
</script>

In diesem Beispiel sagen wir dem Computer: "Hallo, horche auf jede gedrückte Taste, und wenn das passiert, zeige uns, welche Taste es war." Die Methode addEventListener ist wie das Aufstellen eines Spions, der auf Tastendrücke aufpasst.

Beispiel: Keypress-Ereignis

Nun probieren wir das 'keypress'-Ereignis aus. Denke daran, dass dieses nur für Zeichen-tasten funktioniert!

<h1>Tippe etwas</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>

Dieses Skript ist ein bisschen wie eine Schreibmaschine. Jedes Mal, wenn du eine Zeichen-taste drückst, fügt es diesen Zeichen zu dem hinzu, was bereits da ist. Es baut Text auf, während du tippst!

Beispiel: Keyup-Ereignis

Gestatten wir einen Blick auf das 'keyup'-Ereignis. Diesmal erstellen wir ein kleines Spiel, bei dem du die richtige Taste drücken musst, um zu gewinnen.

<h1>Drücke die 's'-Taste, um zu gewinnen!</h1>
<p id="output"></p>

<script>
document.addEventListener('keyup', function(event) {
if (event.key === 's') {
document.getElementById('output').innerHTML = 'Du hast gewonnen! ?';
} else {
document.getElementById('output').innerHTML = 'Versuche es nochmal!';
}
});
</script>

In diesem Spiel warten wir darauf, dass der Spieler die 's'-Taste loslässt. Es ist wie ein einfaches "Simon Says"-Spiel, aber mit Tastaturtasten!

Beispiel: Ohne Verwendung der addEventListener-Methode

Nun schauen wir uns eine ältere Methode der Ereignisbehandlung an. Während addEventListener der moderne Ansatz ist, könntest du diese Methode in älterem Code finden:

<h1>Drücke eine Taste</h1>
<p id="output"></p>

<script>
document.onkeydown = function(event) {
document.getElementById('output').innerHTML = 'Gedrückte Taste: ' + event.key;
};
</script>

Diese Methode weist direkt eine Funktion dem onkeydown-Eigenschaft des Dokuments zu. Es ist wie ein Schild an deiner Tür, das sagt: "Wenn jemand klopft, tu das."

Alles zusammenfügen

Nun, da wir diese Ereignisse einzeln untersucht haben, erstellen wir ein komplexeres Beispiel, das alle drei Ereignisse verwendet:

<h1>Tastaturereignis-Tester</h1>
<p>Drücke eine Taste, um die Ereignisse auslösen zu sehen!</p>
<table id="eventTable">
<tr>
<th>Ereignistyp</th>
<th>Taste</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>

Dieses Beispiel erstellt eine Tabelle, die sich füllt, während du Tasten drückst. Es ist wie ein Tagebuch der Tastaturereignisse, das jeden Tastenanschlag aufzeichnet!

Und da hast du es, Leute! Wir haben die Welt der JavaScript-Tastaturereignisse bereist. Denke daran, Übung macht den Meister, also habe keine Angst, diese Beispiele zu verändern, kaputt zu machen und zu beheben – das ist, wie du wirklich lernst.

Bevor wir uns verabschieden, hier ist ein kleiner spaßiger Fakt: Wusstest du, dass die Anordnung der Tastaturen, mit der QWERTY-Anordnung, ursprünglich entwickelt wurde, um Schreibmaschinisten zu verlangsamen? Es wurde für Schreibmaschinen entwickelt, um zu verhindern, dass die Metallarme verklemmen. Und dennoch verwenden wir diese gleiche Anordnung, um blitzschnelle Interaktionen in unseren Webanwendungen zu erstellen!

Weiter codieren, weiter lernen und vor allem weiter Spaß haben! Bis zum nächsten Mal, das ist dein freundlicher Nachbarschafts-Computerlehrer, der sich verabschiedet. Frohes Coden!

Credits: Image by storyset