Wednesday 2 May 2018

Pengetahuan Event (Kejadian) pada JavaScript

Assalamu'alaikum warohmatullobh wabarokaatuh sobat sekarang kita belajar javascript tentang penanganan Event langsung saja

Apa itu Penanganan Event

Penanganan Event atau Event Handler adalah kemampuan javascript untuk mendeteksi event atau kejadian-kejadian yang terjadi di halaman web, kemudian menangani atau melakukan suatu proses jika terdeteksi suatu event. Event di web bisa macam-macam, seperti klik, double klik, menggerakkan mouse, bila pointer mouse berada di atas suatu objek HTML, dan sebagainya.

Sintaknya:
nama_event=”kode javascript”

Event adalah sesuatu yang terjadi pada halaman HTML. Berikut ini terdapat beberapa bentuk kejadian yaitu jika pengguna memuat dokumen, pengguna memasukkan data, pengguna mengklik tombol dan sebagainya.
Hal-hal tersebut diatur oleh even.Semua kejadian pada Javascript dapat anda tangani dengan menentukan kejadiannya.
Biasanya kejadian(even) adalah sebuah fungsi, tetapi pada beberapa kasus, kita dapat menuliskan pernyataan-pernyataannya secara langsung

Berikut ini adalah daftar kejadian (event) pada JavaScript


Kejadian
Keterangan
onClick
Kejadian yang dibangkitkan bila pengguna 
mengklik sebuah elemen form atau link.
onChange
Dibangkitkan bila informasi masukan 
pada sebuah elemen form (text, textarea, select) 
 diubah oleh pengguna.
onBlur
Dibangkitkan ketika suatu 
elemen kehilangan focus masukan, yaitu ketika
 pengguna menekan tombol <tab> atau mengklik 
elemen lain form lainnya.
onFocus
Dibangkitkan bila sebuah elemen form 
menerima focus masukan; yaitu bila 
pengguna mengklik elemen form tersebut 
atau menekan tombol <tab> sehingga 
 focus masukan berpindah ke elemen ini.
onAbort
Dibangkitkan bila pengguna menghentikan 
pemuatan citra (tag<img>) yaitu bila 
pengguna menekan tombol stop atau mengklik link.
onError
Dibangkitkan bila terjadi kesalahan saat 
browser memuat dokumen atau citra.
onLoad
Dibangkitkan bila browser selesai memuat 
document
onUnload
Dibangkitkan bila pengguna keluar dari dokumen
onMouseOver
Dibangkitkan bila kursor mouse berada di atas 
sebuah link.
onMouseOut
Dibangkitkan bila kursor mouse keluar 
dari daerah link atau peta citra.
onReset
Dibangkitkan bila pengguna menekan tombol reset
onSelect
Kejadian yang dibangkitkan bila pengguna 
memilih sebagian atau seluruh teks 
pada elemen form yang berupa kotak teks.
onSubmit
Dibangkitkan ketika pengguna menekan 
tombol submit.

Contoh oncklik (Kejadian yang dibangkitkan bila pengguna mengklik sebuah elemen form atau link.) berikut jika kita mengklik radio button akan mengubah warna latar halaman web
berikut code nya


Contoh Event OnClick
<HTML>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
function warna(pilihan)
{
alert("Anda Memilih Warna " + pilihan);
document.bgColor=pilihan;
}
</SCRIPT>
<h1 align="center">Latihan Event OnClick</h1>
<hr width="500" color="black" noshade>
<h3 align="center">Pilih warna favorit anda.</h3>
<CENTER>
<FORM>
<INPUT TYPE="button" VALUE="Biru" onClick="warna('lightblue')">
<INPUT TYPE="button" VALUE="Pink" onClick="warna('pink')">
<INPUT TYPE="button" VALUE="Coklat" onClick="warna('burlywood')">
<INPUT TYPE="button" VALUE="Kelabu" onClick="warna('darkgray')">
<INPUT TYPE="button" VALUE="Oranye" onClick="warna('peachpuff')">
<INPUT TYPE="button" VALUE="Putih" onClick="warna('white')">
</FORM>
</CENTER>
<hr width="500" color="black" noshade>
</BODY>
</HTML>


Contoh Event OnClick
<HTML>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
function warna(pilihan)
{
alert("Anda Memilih Warna " + pilihan);
document.bgColor=pilihan;
}
</SCRIPT>
<h1 align="center">Latihan Event OnClick</h1>
<hr width="500" color="black" noshade>
<h3 align="center">Pilih warna favorit anda.</h3>
<CENTER>
<form name="go">
<input type="radio" name="C1" onclick="document.bgColor='lightblue'">
<input type="radio" name="C1" onclick="document.bgColor='lightyellow'">
<input type="radio" name="C1" onclick="document.bgColor='lightgreen'">
</form>
</FORM>
</CENTER>
<hr width="500" color="black" noshade>
</BODY>
</HTML>
Refrensi
Master Desrizal
the-xp.blogspot.com

Alhamdulillah Catatan sederhana mengenai Pengetahuan Event (Kejadian) pada JavaScript telah selesai mohon maaf jika da kesalahan Wasalamu'alaikum warohmatulloh wabarokaatuh

No comments:

Post a Comment