Penggunakan Onkeydown pada 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>
Belum ada Komentar untuk "Penggunakan Onkeydown pada javascript"
Posting Komentar