SeniKoding.com - Loop JavaScript adalah kumpulan kode perintah yang dieksekusi berulang-ulang sesuai dengan kondisi tertentu. Ada beberapa jenis looping didalam JavaScript: For loop, While loop dan Do While loop. Sekarang mari kita pelajari satu-persatu.
Belajar JavaScript, For Loop JavaScript
Loop For jenis ini ditandai dengan batas yang jelas antara dari mana sampai mana looping itu akan dijalankan. Pada kasus pengolahan Array, loop jenis ini termasuk paling praktis untuk digunakan.
Struktur kodenya:
for (statement 1; statement 2; statement 3) {Misalnya saja kita punya sebuah array bernama "arrKota" yang berisi nama singkatan kota di Indonesia. Jika tidak menggunakan jenis For loop ini maka bisa dituliskan dengan kode script seperti dibawah ini:
.. baris kode aksi ..
}
<!DOCTYPE html>
<html>
<head>
<title>Belajar JavaScript</title>
</head>
<body>
<h2>Belajar Loop JavaScript</h2>
<script type="text/javascript">
var arrKota = new Array("JKT", "BDG", "SBY", "MDN");
document.write(arrKota[0] + "<br>");
document.write(arrKota[1] + "<br>");
document.write(arrKota[2] + "<br>");
document.write(arrKota[3] + "<br>");
</script>
</body>
</html>
Tetapi tentunya akan lebih mudah dan cepat jika kita menuliskannya dengan kode For loop berikut ini:
<!DOCTYPE html>
<html>
<head>
<title>Belajar JavaScript</title>
</head>
<body>
<h2>Belajar Loop JavaScript</h2>
<script type="text/javascript">
var arrKota = new Array("JKT", "BDG", "SBY", "MDN");
for (var i=0; i<=3; i++) {
document.write(arrKota[i] + "<br>");
}
</script>
</body>
</html>
Hasil browser sama dengan kode pertama, tapi untuk kecepatan akan direkomendasikan kode yang kedua:
- Statement 1 yaitu var i = 0; bahwa ditetapkan variabel i dari angka 0, yaitu array pertama.
- Statement 2 yaitu var i <= 3; bahwa variabel i nilai arraynya dari 0 - 3. Dan loop akan berhenti.
Pada statement ini nilai var i <=3 masih merujuk ke statis, jika kita mau lebih dinamis, var i<=3 bisa diganti menggunakan cara ini i < arrKota.length; (length adalah menghitung jumlah array).
- Statement 3 yaitu var i++; ini adalah operator javascript loop tambah 1.
Belajar JavaScript, For In Loop JavaScript
Loop For In jenis ini digunakan untuk menelusuri Property dari sebuah Objek.
Langsung saja saya contohkan kodenya:
<!DOCTYPE html>
<html>
<head>
<title>Belajar JavaScript</title>
</head>
<body>
<h2>Belajar Loop JavaScript</h2>
<script type="text/javascript">
var objMobil = {nama:"Suzuki Escudo", warna:" Hijau"};
for (var i in objMobil) {
document.write(objMobil[i]);
}
</script>
</body>
</html>
Penampakannya:
Dengan cara ini, deklarasi objMobil menggunakan kurung kurawal, bukan kurung biasa.
Belajar JavaScript, While Loop JavaScript
Loop While ini akan berjalan sepanjang kondisi tertentu terpenuhi. Jangan lupa untuk memberikan batas pemberentian looping, karena jika tidak siap-siap browser kalian akan crash.
Struktur sintaknya:
while (kondisi) {Contoh penggunaan While Loop:
.. aksi yang akan dilakukan ..
}
<!DOCTYPE html>
<html>
<head>
<title>Belajar JavaScript</title>
</head>
<body>
<h2>Belajar Loop JavaScript</h2>
<script type="text/javascript">
var i = 1;
while (i<100) {
document.write("Belajar menghitung :" + i +"<br>");
i++;
}
</script>
</body>
</html>
Hasil browser:
Loop ini akan menggandakan sampai batas akhir yaitu 99 kali, karena nilai variabel "i < 100".
Belajar JavaScript, Do While Loop JavaScript
Do While Loop ini, mirip dengan While loop, perbedaannya hanya pengecekan datanya dilakukan di akhir dari looping. Jadi prinsipnya, jalankan dulu baru periksa. Itu artinya loop ini minimal akan dilakukan sekali.
Struktur sintaknya:
do {Contoh penggunaan kodenya:
.. aksi yang akan dilakukan ..
}
while (kondisi)
<!DOCTYPE html>
<html>
<head>
<title>Belajar JavaScript</title>
</head>
<body>
<h2>Belajar Do While Loop JavaScript</h2>
<script type="text/javascript">
var i = 1;
do {
document.write("Belajar menghitung :" + i +"<br>");
i++;
}
while (i<100)
</script>
</body>
</html>
Penulisan struktur kode dengan While loop hanya dibalik saja, pada while(kondisi) dipindah ke akhir, dan di awal kode diberi awalan "do".
Hasil browser sama dengan perulangan While loop, hanya penempatan kodenya saja yang sedikit berbeda.
Untuk saya pribadi lebih suka menggunakan perulangan While Loop nya. Mungin karena lebih gampang diingat kalau "kondisi" diletakkan diawal.
Sampai disini Tutorial Belajar JavaScript (Part9): Loop JavaScript (For Loop, For In Loop, While Loop, Do While Loop JavaScript), semoga bermanfaat.
Ada pertanyaan tentang Belajar JAVASCRIPT ?
- Salam -
Tidak ada komentar
Posting Komentar
Dilarang SPAM Komentar!