Penggunakan Onkeydown pada javascript

Penggunakan Onkeydown pada javascript
Di Posting Oleh : wandi
Kategori : javascript

Kali ini saya akan bahas mengenai penggunakan event Onkeydown pada javascript. Jadi ceritanya ketika kita menekan tombol di keyboard misalnya tombol a maka akan melakukan fungsi sesuatu. Untuk menggunakan event onkeydown itu kita perlu tau dulu apa itu kode ascii, kalian bisa cari di sih bhah google. karena kita akan menggunakan kode ascii tersebut untuk validasi .


Baik kalo kalian sudah tau apa itu kode ascii, kodenya gak perlu di hapal karena cape dan banyak . Kita langsung saja, kali ini merupakan lanjutan dari artikel yang membuat galeri gambar dengan javascript, kalo belum mengikuti ikuti dulu karena ini ngambung .

Baca juga membuat geleri gambar dengan javascript

Kalo gak mau baca download saja script yang setelah saya buat . Download script

Baik kalo sudah, sekarang kita praktekan. Baik kalo kalian sudah download atau udah baca kita akan coba penggunakan onkeydown ini pada javascript . Sebelumnnya ada event event yang agak sama dengan onkeydown ini yaitu onkeyup dan onkeypress ( kalo gak salah ) ketiganya sama yaitu event keyboard, perbedaanya adalah onkeydown ketika kita menekan terus maka event tersebut terus berlangsung, onkeyup ketika kita menekan lalu melepaskan maka event tersebut berlangsung, onkeypress ketika kita menekan maka akan berlangsung . Baik kali ini kita akan gunakan onkeydown.

Penulisanya adalah document.onkeydown . contoh penggunaan

var z = document.onkeydown = function(qwerty){
 if(qwerty.keyCode==78){//menekan N maka akan next gambar
next();
}
}

ketika kita menekan N maka akan melakukan fungsi next . Baik kita coba sisipkan ini pada bagian javascript kita.

var z = document.onkeydown = function(qwerty){
 if(qwerty.keyCode==78){//menekan N maka akan next gambar
next();
}else if(qwerty.keyCode==80){//menekan P maka akan prev gambar
prev();
 }

Baik jika sudah kita coba menekan N dan P. Maka akan menext gambar dan mengprev gambar . Kode lengkapnya

<script language="javascript">
<!-- Galeri gambar
//penomoran
var nomor=0;
// penamaan gambar
var namagambar = ['Asia Afrika','Ciater','Danau Situ Patenggang',
'Museum Geologi','Kampung Gajah','Kawah Putih Ciwidey','Kebun Binatang',
'Kebun Strawberry','Saung Angklung Udjo','air terjun dago pakar','Trans studio'];
function next(){
if(nomor==10){
nomor=10;
}else{
nomor=nomor+1;
}
view();
}
function prev(){
if(nomor<=1){
nomor=1;
}else{
nomor=nomor-1;
}
view();
}
function nextN(N) {
nomor=N;
view();
}
function view() {
var nomorgambar="img/"+nomor+".jpg";
var gambar=document.getElementById('photo').src=nomorgambar;
document.getElementById('nama').innerHTML = namagambar[nomor-1];
}
var z = document.onkeydown = function(qwerty){
 if(qwerty.keyCode==78){//menekan N maka akan next gambar
next();
}else if(qwerty.keyCode==80){//menekan P maka akan prev gambar
prev();
 }
}
//Galeri gambar beres -->
</script>
<img src="img/1.jpg"width="300px"height="300px"id="photo"/>
<p onclick="next();">Next</p>
<a onclick="nextN(1);">1</a>
<a onclick="nextN(2);">2</a>
<a onclick="nextN(3);">3</a>
<a onclick="nextN(4);">4</a>
<a onclick="nextN(5);">5</a>
<a onclick="nextN(6);">6</a>
<a onclick="nextN(7);">7</a>
<a onclick="nextN(8);">8</a>
<a onclick="nextN(9);">9</a>
<a onclick="nextN(10);">10</a>
<a onclick="nextN(11);">11</a>
<p onclick="prev();">previous</p>
<p id="nama">Asia Afrika</p>

Baik itu dia cara penggunakan onkeydown pada javascript. Semoga bermanfaat dan sampai jumpa . Jika ada yang di tanyakan bisa di comment. Jangan malu bertanya nanti sesat di jalan .



Mau liat atau download source code aplikasi premium bisa disini.

Tweet