9 Modul-Looping New

MODUL AJAR
Pengulangan (Looping) dan Penangan Event
A. Tujuan
1) Dapat menjelaskan tentang pengulangan (looping)
2) Dapat menjelaskan tentang penanganan event
3) Dapat menerapkan struktur penulisan pengulangan (looping) pada halaman
web
4) Dapat menerapkan struktur penulisan penanganan event pada halaman web
B. Materi
for
Berguna untuk pengulangan yang sudah ditentukan terlebih dahulu awalnya
berapa, dijalankan sampai kondisi yang telah ditentukan.
Sintaks / Kode Program :
for(awal; kondisi; penambahan){
kode untuk dijalankan
}
Contoh :
<script>
for (i = 1; i <= 10; i++) {
document.write(i);
}
</script>
while
Berguna untuk menjalankan suatu kode terus menerus selama kondisi bernilai
TRUE.
Sintaks / Kode Program :
while(kondisi){
kode untuk dijalankan;
}
Contoh :
<script>
var i=1;
1|PWPB by Aman Maathoba, S.Pd

while(i<=5)
{
document.write(“Nomor : "+i +"<br />");
i++;
}
</script>
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.
Sintaks / Kode Programnya :
nama_event = “kode javascript”
Contoh :
<html>
<body>
<a href=”http://www.google.com” onclick=”alert(‘hello’)”>google</a>
</body>
</html>
Pada contoh di atas ada sebuah link google, yang jika diklik (onclick) maka akan
dieksekusi kode javascript alert (‘hello’).
Ada macam-macam event yang bisa terjadi pada halaman web atau objek
HTML, yaitu sebagai berikut :
Mouse Events
Event Deskripsi
onclick Muncul ketika user mengklik elemen / komponen
ondblclick Muncul ketika user mengklik ganda pada elemen / komponen
onmousedown Muncul ketika user menekan pada mouse
onmousemove Muncul ketika user menggerakkan pointer mouse
onmouseout Muncul ketika user menggerakkan pointer mouse keluar dari
elemen / komponen control
onmouseover Muncul ketika user menggerakkan pointer mouse melalui /
melewati elemen

onmouseup Muncul ketika user melepas tombol mouse
Keyboard Event
Event Deskripsi
onkeydown Muncul ketika user menekan suatu tombol pada keyboard
onkeypress Muncul ketika user menekan suatu tombol keyboard dan
akan terus muncul sampai user melepas tombol
onkeyup Muncul ketika user melepas tombol yang telah ditekan
HTML Control Events

Event Deskripsi
onblur Muncul ketika HTML control kehilangan fokus
onchange Muncul ketika HTML control kehilangan fokus dan nilai
berubah
onfocus Muncul ketika HTML control sedang focus
onreset Muncul ketika user menekan tombol reset dalam form
onselect Muncul ketika user memilih teks pada HTML control
onsubmit Muncul ketika user melakukan submit form
Window Event
Event Deskripsi
onload Muncul ketika window telah selesai loading
onresize Muncul ketika user mengubah ukuran window
onunload Muncul ketika user keluar dari halaman / dokumen web
Contoh-contoh Penanganan Event

1. onclick
Pada contoh di bawah kita membuat tombol, yang kalau diklik akan muncul
window alert.
<script>
function inform(){
alert("Hai anda mengklik saya")
}
</script>

<form>
<input type="button" name="test" value="Click me" onclick="inform()">
</form>
2. onload
Event onload akan dieksekusi jika suatu objek telah diload, pada contoh
berikut kita menaruh event onload di tag <body>, artinya jika halaman web
sudah diload semua, maka dieksekusi kode javascriptnya.
<html>
<head><title>Body onload example</title>
</head>
<body onload="alert('Halaman ini telah selesai di loading')">
Welcome to my page
</body>
</html>
3. onmouseover dan onmouseout

Onmouseover berguna untuk mendeteksi apakah pointer mouse berada di
atas suatu objek HTML, sedangkan onmouseout berguna untuk mendeteksi
apakah pointer mouse keluar dari objek HTML. Sebagai contoh :
<html>
<body>
<table>
<tr onmouseover="this.bgColor='lightblue'"
onmouseout="this.bgColor='#efefef'" bgcolor="#efefef">
<td>Baris pertama</td>
</tr>
<tr>
<td>Baris kedua</td>
</tr>
</body>
</html>
4. onunload
Biasanya digunakan untuk mendeteksi jika user meninggalkan atau menutup
suatu halaman web.
<html>
<body onunload="alert('Thank you. Please come back to this site and visit us
soon, ok?')">
<h1>Welcome</h1>

</body>
</html>
C. Latihan
for
while
onclick

onload
onmouseover dan onmouseout
onunload
D. Tugas Individu
1) Buatlah sebuah kode program untuk menampilkan bilangan genap dari
bilangan 1 – 50 di halaman web menggunakan perulangan for !
2) Buatlah sebuah kode program untuk menampilkan bilangan terbesar sampai
terkecil dari bilangan 20 sampai 0 di halaman web menggunakan perulangan
while !

3) Buatlah sebuah kode program untuk menampilkan latar belakang dengan
pilihan berbagai warna (merah, jingga, kuning, hijau, biru, nila, ungu) dan
juga foto kalian masing-masing !
Contoh :
Pilihlah warna background :
o Merah
o Jingga
o Kuning
o Hijau
o Biru
o Nila
o Ungu
o Foto (jpg / png)
4) Buatlah sebuah kode program untuk menampilkan jumlah dari angka

tersebut (angka 1 jumlahnya satu, angka 2 jumlahnya dua, dan seterusnya),
seperti tampilan di bawah ini !
Tampilan :

5) Buatlah sebuah kode program untuk menampilkan bilangan genap dan
bilangan ganjil dari nilai masukkan oleh user seperti tampilan di bawah ini !

9 Modul-Looping New

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

9 Modul-Looping New

Diunggah oleh

Hak Cipta:

Format Tersedia

MODUL AJAR

Pengulangan (Looping) dan Penangan Event

1|PWPB by Aman Maathoba, S.Pd

2|PWPB by Aman Maathoba, S.Pd

HTML Control Events

Contoh-contoh Penanganan Event

3|PWPB by Aman Maathoba, S.Pd

3. onmouseover dan onmouseout

4|PWPB by Aman Maathoba, S.Pd

5|PWPB by Aman Maathoba, S.Pd

onmouseover dan onmouseout

6|PWPB by Aman Maathoba, S.Pd

4) Buatlah sebuah kode program untuk menampilkan jumlah dari angka

7|PWPB by Aman Maathoba, S.Pd

8|PWPB by Aman Maathoba, S.Pd

Anda mungkin juga menyukai