Berikut beberapa penjelasan dan contoh event pada javascript,
.OnClick
Event ini terjadi jika pemakai mengklik tombol mouse pada link atau elemen yang terdapat pada form HTML. Pada contoh berikut kita akan membuat sebuah tombol pada halaman website yang jika di tekan akan memunculka pesan windows alert.
Lakukanlah penulisan script dibawah ini kedalam notepad lalu simpan dengan ekstensi .HTML dan kemudian jalankan di browser.
<html>
<head>
<title> Contoh event OnClick Javascript</title>
<script type="text/javascript">
function klik(){
alert("Ini adalah contoh event klik");
}
</script>
</head>
<body>
<form>
<input type="button" name="test" value="Silahkan Klik" onClick="klik()" />
</form>
</body>
</html>
Setelah dijalankan di browser, hasilnya seperti berikut
.OnLoad
Event ini akan di jalankan apabila suatu objek diload, dalam kasus ini kita akan menaruh event onload di bagian tag <body> sehinga ketika suatu halaman web diload maka akan muncul sebuah pesan seperti contoh diatas.
Lakukan seperti di atas tulis script dibawah ini kedalam notepad, simpan dengan ekstensi .HTML dan jalankan di browser.
<html>
<head>
<title> Contoh event OnLoad Javascript</title>
<script type="text/javascript">
function load(){
alert("Ini adalah contoh event load");
}
</script>
</head>
<body onLoad="load()">
Contoh menjalankan event onload pada tag <body>
</body>
</html>
Berikut hasil dari script diatas,
.OnMouseOver dan .OnMouseOut
Event .onMouseOver berjalan jika pemakai meletakkan mouse di atas sebuah link atau suatu objek HTML.
Event .onMouseOut berjalan bila kursor mouse keluar dari daerah link atau suatu objek HTML.
Berikut ini kita akan membuat contoh penggunaan event onMouseOver dan onMouseOut pada kolom tabel, ketika kursor berada d atas kolom tersebut makan backgroundnya akan berganti warna.
Lakukan seperti di atas tulis script dibawah ini kedalam notepad, simpan dengan ekstensi .HTML dan jalankan di browser.
<html>
<body>
<table>
<tr onmouseover="this.bgColor='red'" onmouseout="this.bgColor='#fff'" bgcolor="#fff">
<td>Letakan Mouse Di sini untuk menjalankan event OnMouseOver</td>
</tr>
<tr onmouseover="this.bgColor='blue'" onmouseout="this.bgColor='#fff'" bgcolor="#fff">
<td>Letakan Mouse Di sini juga untuk menjalankan event OnMouseOver</td>
</tr>
</table>
</body>
</html>
Berikut hasil script diatas,
Selamat mencoba dan semoga bermanfaat.
0 Komentar