Scribd
Unggah
23 tayangan6 halaman

Modul Looping

Modul ini membahas tentang pengulangan (looping) dan penanganan event dalam pemrograman web menggunakan JavaScript. Terdapat penjelasan tentang struktur sintaks for, while, dan berbagai jenis event seperti onclick, onload, onmouseover beserta contoh kode-kodenya. Modul ini bertujuan agar peserta dapat memahami dan menerapkan looping serta penanganan event dalam membuat halaman web interaktif.

Diunggah oleh

Ewalde Nai Buti
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
23 tayangan6 halaman

Modul Looping

Modul ini membahas tentang pengulangan (looping) dan penanganan event dalam pemrograman web menggunakan JavaScript. Terdapat penjelasan tentang struktur sintaks for, while, dan berbagai jenis event seperti onclick, onload, onmouseover beserta contoh kode-kodenya. Modul ini bertujuan agar peserta dapat memahami dan menerapkan looping serta penanganan event dalam membuat halaman web interaktif.

Diunggah oleh

Ewalde Nai Buti
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 6

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|SMKN 1 SUKOREJO
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 :
 onblur  onmousedown
 onchange  onmousemove
 onclick  onmouseout
 ondblclick  onmouseover
 onerror  onmouseup
 onfocus  onreset
 onkeydown  onresize
 onkeypress  onselect
 onkeyup  onsubmit
 onload  onunload

2|SMKN 1 SUKOREJO
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>

3|SMKN 1 SUKOREJO
</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

4|SMKN 1 SUKOREJO
onclick

onload

onmouseover dan onmouseout

onunload

5|SMKN 1 SUKOREJO
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)

6|SMKN 1 SUKOREJO

Anda mungkin juga menyukai