JavaScript - Keyboard Events

Hai teman-teman, para ahli JavaScript masa depan! Hari ini, kita akan mandar moon ke dalam dunia yang menarik dari event keyboard. Sebagai guru komputer tetangga yang ramah, saya disini untuk mengorbit Anda melalui petualangan ini langkah demi langkah. Jadi, ambil minuman kesukaan Anda, duduk relaxed, dan mari kita mulai petualangan keyboard bersama!

Event Keyboard Umum

Sebelum kita mulai mengoding, mari kenal event keyboard paling umum di JavaScript. Picturkan event ini seperti berbagai cara komputer Anda mendengarkan keyboard Anda:

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

Event ini seperti telinga komputer Anda, selalu mendengarkan tekanan tombol Anda. Keren, kan?

Properti Event Keyboard

Sekarang, mari bicarakan properti yang dibawa oleh event ini. Saat event keyboard terjadi, itu 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 detail penting tentang tombol yang Anda tekan.

Contoh: Event Keydown

Mari kita mulai dengan contoh pertama. 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, "Hai, dengarkan jika ada tombol yang ditekan, dan saat itu terjadi, tunjukkan kepada kita tombol mana yang ditekan." Metode addEventListener seperti menempatkan mata-mata untuk memantau tekanan tombol.

Contoh: Event Keypress

Sekarang, mari coba event 'keypress'. Ingat, event ini hanya bekerja 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 tekan tombol karakter, itu menambahkan karakter itu ke apa yang sudah ada. Itu membuat teks saat Anda mengetik!

Contoh: Event Keyup

Marilah kita pindah ke event 'keyup'. kali ini, kita akan membuat permainan kecil dimana 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 melepaskan tombol 's'. Itu seperti permainan "Simon Says", tapi dengan tombol keyboard!

Contoh: Tanpa menggunakan metode addEventListener

Sekarang, mari lihat cara yang lebih tua untuk menghandle event. Meskipun addEventListener adalah pendekatan modern, Anda mungkin akanjumpai 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. Itu seperti menaruh tanda di pintu Anda yang mengatakan, "Saat seseorang mengetuk, lakukan ini."

Menggabungkan Semua

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

<h1>PenTes Event Keyboard</h1>
<p>Teukkan tombol mana saja untuk melihat event 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. Itu seperti catatan event keyboard, mencatat setiap event tombol yang terjadi!

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

Sebelum kita selesai, ada fakta menarik: Apakah Anda tahu bahwa susunan keyboard, dengan susunan QWERTY, awalnya dirancang untuk memperlambat pengetik? Itu diciptakan untuk mesin ketik untuk mencegah perangkat logam terjepit. Dan sekarang kita menggunakan susunan ini untuk menciptakan interaksi yang cepat seperti kilat dalam aplikasi web kita!

Tetap mengoding, tetap belajar, dan terutama, tetap bersenang-senang! Sampai jumpa lagi, ini adalah guru komputer tetangga Anda, menutup. Happy coding!

Credits: Image by storyset