Selamat siang para pengunjung, maaf kalo yang membaca artikel ini pada malam, sore, atau pagi hari. Kali ini saya akan membagi sedikit cerita yaa yah bisa dibilang begitu karna ini bukan tutorial
if (x == 38) {
alert ("Up!");
}
if (x == 39) {
alert ("Right!");
}
Simpan dengan extensi ".html" dan uji coba dengan meletakkan kursor pada textbox dan menekan tombol left, right, up, down lihat hasilnya akan ada alert seperti gambar dibawah ketika saya menekan tombol down.
Awal kisah client saya minta buat program untuk kontrol robot dengan menggunakan tombol up, down, left, right yang ada di keyboard, dikarenakan robot yang akan dibuat menggunakan ip camera dan untuk lebih mudah mengakses ip camera maka digunakan lah web browser. Terpikir dibenak saya bagaimana controler dan ip camera dapat diakses dengan cara diletkkan dalam satu program dengan bahasa pemrograman berbasis web.
Kemudian saya pilih bahasa pemrograman web menggunakan javascript. Kenapa javascript ? nyesuain dengan kebutuhan aja sih, jadi ketika saya mau control robot maju atau mundur tanpa harus pindah ke halaman web program lain dengan perintah yang berbeda tiap halamannya seperti PHP. Dan kabar baiknya javascript memiliki fungsi menangkap keystroke (cari di google soal keystroke) dari keyboard secara real time dan ini yang saya butuhkan.
Udah lupain aja ocehan saya yang diatas itu hanya curhatan saya. Fokus ke judul aja kita gak bakal buat robot di sini. Saya mengambil kutipan program dari sumber W3c dan saya akan memberi contoh program kecil yang akan mengkondisikan sebuah aksi dari program apabila tombol pada keyboard ditekan. Namun sebelumnya pahami dulu kode yang akan dikeluarkan oleh program javascript ketika tombol keyboard ditekan, hal ini sama saja dengan melakukan interfacing menggunakan keyboard, berikut kode yang akan dikeluarkan oleh program dapat diakses disini.
atau anda dapat mencoba program berikut ini untuk mengetahui kode dari tiap tombol keyboard, simpan program dibawah dengan extensi ".html"
<!DOCTYPE html>
<html>
<body>
<p>Press a key on the keyboard in the input field to get the Unicode character code of the pressed key.</p>
<input type="text" size="40" onkeypress="myFunction(event)">
<p id="demo"></p>
<script>
/* In this example, we use a cross-browser solution, because the keyCode property does not work on the onkeypress event in Firefox. However, the which property does.
Explanation of the first line in the function below: if the browser supports event.which, then use event.which, otherwise use event.keyCode */
function myFunction(event) {
var x = event.which || event.keyCode;
document.getElementById("demo").innerHTML = "The Unicode value is: " + x;
}
</script>
</body>
</html>
<html>
<body>
<p>Press a key on the keyboard in the input field to get the Unicode character code of the pressed key.</p>
<input type="text" size="40" onkeypress="myFunction(event)">
<p id="demo"></p>
<script>
/* In this example, we use a cross-browser solution, because the keyCode property does not work on the onkeypress event in Firefox. However, the which property does.
Explanation of the first line in the function below: if the browser supports event.which, then use event.which, otherwise use event.keyCode */
function myFunction(event) {
var x = event.which || event.keyCode;
document.getElementById("demo").innerHTML = "The Unicode value is: " + x;
}
</script>
</body>
</html>
Untuk mendapatkan key code yang diinginkan maka arahkan kursor pada text box dan tekan tombol yang ingin dicari key codenya pada keyboard dan saya mendapatkan kode seperti berikut :
left button = 37
up button = 38
right button = 39
down button = 40
Untuk bukti nya saya kasih liat ss deh satu aja itu saya tekan tombol left keluarnya kode itu.
Sekarang kita buat program yang akan memberi aksi dari kodisi tombol yang ditekan pada keyboard. Programnya kayak dibawah ya
<!DOCTYPE html>
<html>
<body>
<p>Press the Escape/Esc key on the keyboard (usually in the top left corner) in the input field, to alert some text.</p>
<input type="text" size="50" onkeydown="keyCode(event)">
<script>
function keyCode(event) {
var x = event.keyCode;
if (x == 37) {
alert ("Left!");
}
<html>
<body>
<p>Press the Escape/Esc key on the keyboard (usually in the top left corner) in the input field, to alert some text.</p>
<input type="text" size="50" onkeydown="keyCode(event)">
<script>
function keyCode(event) {
var x = event.keyCode;
if (x == 37) {
alert ("Left!");
}
if (x == 38) {
alert ("Up!");
}
if (x == 39) {
alert ("Right!");
}
if (x == 40) {
alert ("Down!");
}
}
alert ("Down!");
}
}
</script>
</body>
</html>
</body>
</html>
Simpan dengan extensi ".html" dan uji coba dengan meletakkan kursor pada textbox dan menekan tombol left, right, up, down lihat hasilnya akan ada alert seperti gambar dibawah ketika saya menekan tombol down.
Catatan :
Aksi dari setiap kondisi saat penekanan tombol dapat diubah seperti memanggil halaman website atau menulis ke file (echo) seperti yang saya lakukan untuk mengontrol robot.
Oke sekian semoga membantu
0 Komentar