JavaScript - Keyboard Events

Hai那里，未来的JavaScript巫师们！今天，我们将要深入到一个激动人心的键盘事件世界。作为你友好邻邦的计算机老师，我在这里一步步地引导你进行这次冒险。所以，拿起你最喜欢的饮料，坐下来，让我们一起开始这段键盘之旅吧！

Umum Keyboard Events

Sebelum kita mulai mengoding, mari familiarisasi diri kita dengan keyboard events paling umum dalam JavaScript. Pemandangan events ini seperti berbagai macam cara komputer Anda mendengarkan keyboard Anda:

Nama Event	Deskripsi
keydown	Diperankan saat tombol ditekan
keypress	Diperankan saat tombol ditekan (hanya tombol karakter)
keyup	Diperankan saat tombol dilepaskan

Events ini seperti telinga komputer Anda, selalu mendengarkan keystrokes Anda. Keren, kan?

Properti Keyboard Event

Sekarang, mari bicarakan properti yang dipegang oleh events ini. Saat terjadi event keyboard, ia membawa beberapa informasi yang berguna:

Properti	Deskripsi
key	Nilai tombol yang ditekan
keyCode	Nilai Unicode tombol yang ditekan (usang)
which	Nilai Unicode tombol yang ditekan (usang)
code	Tombol fisik pada keyboard

Properti ini seperti para utusan kecil, membawa informasi penting tentang tombol yang Anda tekan.

Contoh: Event Keydown

Mari mulai dengan contoh pertama kita. Kita akan membuat program sederhana yang mendengarkan event 'keydown' dan menampilkan tombol yang ditekan.

<h1>Teекан tombol mana saja</h1>
<p id="output"></p>

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

Dalam contoh ini, kita mengatakan ke komputer, "Hey, dengarkan jika ada tombol yang ditekan, dan saat itu terjadi, perlihatkan kita tombol mana yang ditekan." Metode addEventListener seperti menempatkan seorang mata-mata untuk memantau tekanan tombol.

Contoh: Event Keypress

Sekarang, mari coba event 'keypress'. Ingat, ini hanya berkerja untuk tombol karakter!

<h1>Ketik sesuatu</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>

Skrip ini seperti mesin ketik. Setiap kali Anda menekan tombol karakter, ia menambahkan karakter itu ke apa yang sudah ada. Ia membentuk teks saat Anda mengetik!

Contoh: Event Keyup

Marilah kita pindah ke event 'keyup'. Kali ini, kita akan membuat permainan kecil di mana Anda harus menekan tombol yang benar untuk menang.

<h1>Teukkan tombol 's' untuk menang!</h1>
<p id="output"></p>

<script>
document.addEventListener('keyup', function(event) {
if (event.key === 's') {
document.getElementById('output').innerHTML = 'Anda menang! ?';
} else {
document.getElementById('output').innerHTML = 'Coba lagi!';
}
});
</script>

Dalam permainan ini, kita menunggu pemain untuk melepaskan tombol 's'. Ia seperti permainan "Simon Says", tetapi dengan tombol keyboard!

Contoh: Tanpa menggunakan metode addEventListener

Sekarang, mari lihat cara yang lebih tua untuk menghandle events. Meskipun addEventListener adalah pendekatan modern, Anda mungkin akan menemukan metode ini di kode yang lebih tua:

<h1>Teukkan tombol mana saja</h1>
<p id="output"></p>

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

Metode ini secara langsung menetapkan fungsi ke properti onkeydown dokumen. Ia seperti menaruh tanda di atas pintu Anda yang mengatakan, "Saat seseorang mengetuk, lakukan ini."

Menggabungkan Semua

Sekarang kita telah menjelajahi events ini secara individual, mari buat contoh yang lebih kompleks yang menggunakan semua tiga events:

<h1>PenTes Event Keyboard</h1>
<p>Teukkan tombol mana saja untuk melihat events terjadi!</p>
<table id="eventTable">
<tr>
<th>Tipe Event</th>
<th>Tombol</th>
<th>Kode</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>

Contoh ini membuat tabel yang terisi saat Anda menekan tombol. Ia seperti catatan harian event keyboard, merekam setiap event keyboard yang terjadi!

Dan itu dia, teman-teman! Kita telah menjelajahi negeri events keyboard JavaScript. Ingat, latihan membuat sempurna, jadi jangan takut untuk mencoba, memecahkan, dan memperbaiki contoh-contoh ini – itu adalah cara Anda akan benar-benar belajar.

Sebelum kita selesaikan, ini adalah fakta yang menyenangkan: Anda tahu bahwa susunan keyboard, dengan susunan QWERTY, awalnya dirancang untuk memperlambat pengetikan? Itu benar, itu diciptakan untuk mesin ketik untuk mencegah peralatan logam dari penjepit. Dan sekarang kita menggunakan susunan ini untuk membuat interaksi yang cepat seperti kilat dalam aplikasi web kita!

Terus mengoding, terus belajar, dan yang paling penting, terus bersenang-senang! Sampai jumpa lagi, ini adalah guru komputer tetangga Anda, menutup. Selamat coding!

Credits: Image by storyset