Kejadian (Event)
Even 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(even) 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. |
Penanganan Kejadian (Event)
Berikut ini akan diberikan beberapa contoh program-program yang menggunakan kejadian-kejadian dalam aplikasinya.
Contoh program yang menggunakan even OnClick :
| Contoh Program JavaScript |
<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> <FORM> <IMG NAME="coolfan" SRC="fanoff.gif" width=61 height=72><BR><BR> <INPUT TYPE=BUTTON VALUE=" Off " onClick="coolfan.src = 'fanoff.gif'"><INPUT TYPE=BUTTON VALUE=" On " onClick="coolfan.src = 'fanon.gif'"> </FORM> </CENTER> <hr width="500" color="black" noshade> </BODY> </HTML> |
Contoh program yang menggunakan even OnBlur dan onFocus :
| Contoh Program JavaScript |
<HTML> <BODY> <SCRIPT LANGUAGE="JavaScript"> function masukannim() {if (document.f.inim.value=="") { alert("anda belum memasukkan nim"); }}function masukannama(){ if (document.f.inama.value=="") { alert("anda belum memasukkan nama"); }}function masukanalamat(){ if (document.f.ialamat.value=="") { alert("anda belum memasukkan alamat"); } } function terimakasih(){if ((document.f.inim.value!="")&&(document.f.inama.value!="")&&(document.f.ialamat.value!="")) { alert("Terima Kasih Telah mengisi Data"); } else alert("Mohon Data Dilengkapi");} </SCRIPT> <h1 align="center">Latihan Event OnFocus dan OnBlur</h1> <hr width="600" color="black" noshade size="10"> <font face="arial"> <h3 align="center">R E G I S T R A S I</h3> <hr width="600" color="black" noshade size="2"> <CENTER> <form name="f" method="get"> <TABLE> <tr> <td width="31%">NIM</td> <td width="7%">:</td> <td width="62%"><input type="text" name="inim" size="9" onFocus="window.status='Silahkan Mengisi NIM Anda';"onBlur="masukannim()"></td> </tr> <tr> <td width="31%">NAMA</td> <td width="7%">:</td> <td width="62%"><input type="text" name="inama" size="23" onFocus="window.status='Silahkan Mengisi Nama Anda';"onBlur="masukannama()"></td> </tr> <tr> <td width="31%">ALAMAT</td> <td width="7%">:</td> <td width="62%"><input type="text" name="ialamat" size="34" onFocus="window.status='Silahkan Mengisi Alamat Anda';" onBlur="masukanalamat()"></td> </tr></table> <hr width="600" color="black" noshade size="2"> <p><input type="BUTTON" value="Kirim" Onclick="terimakasih()"> <input type="reset" value="Reset"></p></form> </center> </BODY> </HTML> |
Contoh program yang menggunakan even onLoad dan onUnload
| Contoh Program JavaScript |
<HTML> <BODY Onload="tanggal()" OnUnload="tutup()"> <SCRIPT LANGUAGE="JavaScript"> <!-- Hide from browsers that do not understand Javascript function tanggal() {var d = new Date(); var y = d.getFullYear(); var m = d.getMonth() + 1; var d = d.getDate(); var t = d + '/' + m + '/' + y + ' '; defaultStatus = "Anda datang pada tanggal " + t + ".";alert("Selamat Datang Teman \n Silahkan Masuk Ke Websiteku");} function timer() {var d = new Date(); var jam = d.getHours();var menit = d.getMinutes();var detik = d.getSeconds();var strwaktu = (jam<10)?"0"+jam:jam;strwaktu +=(menit<10)?"0"+menit:" : "+menit;strwaktu +=(detik<10)?"0"+detik:" : "+detik;document.f.txtwaktu.value=" "+strwaktu;setTimeout("timer()",200);}function tutup(){window.alert("Terimakasih Telah Berkunjung\nJangan lupa Datang kembali Ya..");} // end hiding --> </SCRIPT> <h1 align="center">Latihan Event OnLoad dan OnUnLoad</h1> <hr width="600" color="black" noshade size="10"> <font face="arial"> <h3 align="center">SELAMAT DATANG</h3> <CENTER> <form name="f"> <h4 align="center">Sekarang Menunjukkan Jam</h4> <input type="Text" size="16" name="txtwaktu"> <hr width="600" color="black" noshade size="2"> </form> <SCRIPT LANGUAGE="JavaScript">timer()</SCRIPT> </center> </BODY> </HTML> |
Contoh program yang menggunakan even onMouseOut dan onMouseOver
| Contoh Program JavaScript |
<HTML> <BODY> <SCRIPT LANGUAGE="JavaScript"> function g1() { document.f.imgfan.src="fanon.gif" } function g2() { document.f.imgfan.src="fanoff.gif" } </SCRIPT> </SCRIPT> <h1 align="center">Latihan Event OnMouseOver dan OnMouseOut</h1> <hr width="600" color="black" noshade size="10"> <font face="arial"> <h3 align="center">SELAMAT DATANG</h3> <CENTER> <form name="f"> <Img Name="logo" src="logo1.gif" onmouseover="document.logo.src='logo2.gif';window.status='Motto Jawa Barat'" onmouseout="document.logo.src='logo1.gif';window.status='Gemah Ripah Repeh Rapih'"> <h4 align="center">Kalo Kepanasan Tunjuk Kipas Angin Saja</h4> <A HREF="latevenonclick.html" onMouseOver="g1()" onMouseOut="g2()"> <IMAGE NAME="imgfan" SRC="fanoff.gif" WIDTH=61 HEIGHT=72 BORDER=0> </A> <p> Contoh Link Dengan Even </p> <A HREF="http://www.google.com" onMouseOver="document.bgColor='#ffcc00'; onMouseOver=window.status='Ke Website Google.Com'; return true">Google.Com</A><BR> <A HREF="http://if.unikom.ac.id" onMouseOver="window.status='Oh, jangan deket-deket..'; return true" onMouseOut="alert('Nah gitu dong'); return true">Teknik Informatika UNIKOM </A> <hr width="600" color="black" noshade size="2"> </form> </center> </BODY> </HTML> |
0 comments:
Post a Comment