Belajar Javascript (Part9): Loop Javascript (For Loop, For In Loop, While Loop Dan Do While Loop Javascript)
- Loop JavaScript yaitu kumpulan instruksi perintah yang dihukum 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 terang antara dari mana hingga mana looping itu akan dijalankan. Pada kasus pengolahan Array, loop jenis ini termasuk paling mudah untuk digunakan.
Struktur kodenya:
for (statement 1; statement 2; statement 3) {Misalnya saja kita punya sebuah array berjulukan "arrKota" yang berisi nama abreviasi kota di Indonesia. Jika tidak memakai jenis For loop ini maka dapat dituliskan dengan instruksi script menyerupai dibawah ini:
.. baris instruksi agresi ..
}
<!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 kalau kita menuliskannya dengan instruksi 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 instruksi pertama, tapi untuk kecepatan akan direkomendasikan instruksi yang kedua:
Penjelasan:
- 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, kalau kita mau lebih dinamis, var i<=3 dapat diganti memakai cara ini i < arrKota.length; (length yaitu menghitung jumlah array).
- Statement 3 yaitu var i++; ini yaitu operator javascript loop tambah 1.
Belajar JavaScript, For In Loop JavaScript
Loop For In jenis ini dipakai 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 memakai kurung kurawal, bukan kurung biasa.
Belajar JavaScript, While Loop JavaScript
Loop While ini akan berjalan sepanjang kondisi tertentu terpenuhi. Jangan lupa untuk menunjukkan batas pemberentian looping, alasannya yaitu kalau tidak siap-siap browser kalian akan crash.
Struktur sintaknya:
while (kondisi) {Contoh penggunaan While Loop:
.. agresi 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 meniru hingga batas tamat yaitu 99 kali, alasannya yaitu nilai variabel "i < 100".
Belajar JavaScript, Do While Loop JavaScript
Do While Loop ini, menyerupai dengan While loop, perbedaannya hanya pengecekan datanya dilakukan di tamat dari looping. Makara prinsipnya, jalankan dulu gres periksa. Itu artinya loop ini minimal akan dilakukan sekali.
Struktur sintaknya:
do {Contoh penggunaan kodenya:
.. agresi 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 instruksi dengan While loop hanya dibalik saja, pada while(kondisi) dipindah ke akhir, dan di awal instruksi diberi awalan "do".
Hasil browser sama dengan perulangan While loop, hanya penempatan kodenya saja yang sedikit berbeda.
Untuk saya langsung lebih suka memakai perulangan While Loop nya. Mungin alasannya yaitu lebih mudah diingat kalau "kondisi" diletakkan diawal.
Sampai disini Tutorial Belajar JavaScript (Part9): Loop JavaScript (For Loop, For In Loop, While Loop, Do While Loop JavaScript), agar bermanfaat.
Ada pertanyaan perihal Belajar JAVASCRIPT ?
- Salam -