Jin Toples Programming

Penggunaan Event Sederhana Javascript

Penggunaan Event Sederhana Javascript - Pada artikel sebelumnya saya sudah menjelaskan pengertian event tersebut, sekarang kita akan belajar menggunaknnya dengan program yang sederhana.

1. Onclick

Kita akan membuat sebuah tombol pada halaman website yang jika di tekan akan memunculka pesan windows alert. tulis script ini kedalam notepad lalu simpan dengan ekstensi .HTML.

<script>
function inform(){
alert("Hello anda klik saya")
}
</script>
<form>
<input type="button" name="test" value="Click Saya" onclick="inform()">
</form>

Maka hasilnya seperti ini :

Pada contoh berikutnya jika tombol raidio buton di klik maka warna backgroud akan berubah warna :

<html>
<body>
<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>
</body>
</html>

Maka hasil dari dua script di atas adalah seperti gambar di bawah :

2. Onload

Onload 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. lakukan seperti di atas tulis script ini dan simpan dengan ekstensi .HTML.

<html>
<head><title>Body onload example</title>
</head>
<body onload="alert('Selamat Datang')">
Halaman sudah di load
</body>
</html>

Maka hasilnya akan seperti ini :

3. Onmouseover and Onmouseout

Onmouseover mendeteksi apakah pointer berada di atas suatu objek HTML sedangakan Onmouseout adalah sebaliknya yaitu mendeteksi apakah mouse keluar dari objek HTML. seperti biasa ketikan script berikut dan simpan dengan ekstensi .HTML.

<html>
<body>
<table>
<tr onmouseover="this.bgColor='red'"onmouseout="this.bgColor='#efefef'" bgcolor="#efefef">
<td>Letakan Pointer Di sini</td>
</tr>
<tr onmouseover="this.bgColor='blue'"onmouseout="this.bgColor='#efefef'" bgcolor="#efefef">
<td>Disini Juga</td>
</tr>
</body>
</html>

Maka tamplanya akan seperti ini :

Sekarang anda dapat mencobanya sendiri.

Penggunaan Event Sederhana Javascript anda sekarang sudah selesai, baca juga tutorial program javascript lainnya.