Perulangan FOR dan WHILE – Dalam proses pembuatan program kita sering menemui eksekusi kode yang berulang. Jika perulangan hanya dua atau tiga kali mungkin hal ini tidak terlalu berpengaruh, tapi bagaimana jika perulangannya banyak sehingga akan sangat menyulitkan jika harus ditulis satu per satu.
Pada javascript disediakan alat perulangan untuk mempermudah penanganan script yang berulang dengan FOR dan WHILE. Perulangan FOR akan melakukan perulangan dengan awalan dan akhiran tertentu serta proses yang bisa menentukan akhiran perulangan FOR. Sedangkan perulangan WHILE hanya akan mengulang proses sampai syarat yang diminta WHILE terpenuhi.
Perulangan FOR
Ini cara yang banyak dan umum dipakai untuk membuat perulangan proses. Dengan perulangan FOR kita bisa menentukan awal dan akhir syarat perulangan serta membuat proses yang menentukan akhir perulangan FOR.
Cara penulisan perulangan FOR pada javascript :
for (statement 1; statement 2; statement 3) {
...//kode yang akan dijalankan
}
Penjelasan dari script diatas:
- Penulisan for harus dalam huruf kecil semua.
- Setiap kode yang dijalankan dipisahkan dengan titik koma (;).
- Statemen 1, 2 dan 3 dipisahkan dengan titik koma (;).
- Statemen 1 dijalankan sebelum perulangan (awal).
- Statemen 1 bisa dihilangkan dan diganti dengan menuliskannya diatas for.
- Statemen 2 merupakan syarat perulangan berjalan (berhenti jika tidak terpenuhi).
- Statemen 2 bisa dihilangkan dengan menambahkan break didalam program jika sebuah kondisi telah terpenuhi.
- Statemen 3 dijalankan setiap kode program didalam for dijalankan.
- Statemen 3 dapat dihilangkan dengan menuliskannya jadi satu didalam blok program didalam for.
- Menuliskan perulangan FOR secara lengkap lebih memudahkan saat mengamati dan membaca alur program.
Contoh penggunaan perulangan FOR pada javascript :
<!DOCTYPE html> <html> <body>
<p>Silahkan klik untuk demo perulangan angka selama 5 kali</p>
<button onclick=”showAngka()”>Tampilkan</button>
<p id=”view”></p>
<script>
function showAngka() {
var text = “”;
var i;
for (i = 0; i < 5; i++) {
text += “Angka = ” + i + “<br>”;
}
document.getElementById(“view”).innerHTML = text;
}
</script>
</body>
</html>
Perulangan WHILE
Dengan logika WHILE maka perulangan akan berjalan selama kondisi dalam WHILE bernilai benar (true). Jadi agar perulangan berhenti dan tidak mengacaukan browser maka didalam statemen kode yang diulang harus ditulis juga perintah yang akan menghentikan perulangan atau membuat kondisi menjadi salah.
Cara penulisan perulangan WHILE pada javascript :
while (kondisi) {
...//kode yang akan dijalankan jika kondisi bernilai benar
}
Penjelasan dari script diatas:
- Penulisan while harus dengan huruf kecil semua.
- Kode-kode didalam while akan dijalankan selama kondisi bernilai benar.
- Kode-kode didalam while ada kemungkinan tidak dijalankan karena kondisi tidak pernah bernilai benar.
- Didalam while harus ada proses yang membuat kondisi menjadi salah saat kebutuhan perulangan yang dimaksud telah selesai, jika tidak akan menyebabkan crash pada browser.
Contoh penggunaan perulangan WHILE pada javascript :
<!DOCTYPE html> <html> <body>
<p>Silahkan klik tombol untuk mengulang tampilan angka 0-9</p>
<button onclick=”showAngka()”>Tampilkan</button>
<p id=”view”></p>
<script>
function showAngka() {
var text = “”;
var i = 0;
while (i < 10) {
text += “<br>Angka = ” + i;
i++;
}
document.getElementById(“view”).innerHTML = text;
}
</script>
</body>
</html>
Perulangan DO WHILE
Cara penulisan perulangan DO…WHILE pada javascript :
do {
...//kode yang akan dijalankan sekali dan diulang selama kondisi bernilai benar
}while (kondisi)
Penjelasan script diatas :
- Penulisan do while harus dengan huruf kecil semua.
- Kode-kode didalam do while akan dijalankan selama kondisi bernilai benar.
- Kode-kode didalam do while setidaknya dikerjakan sekali meskipun kondisi tidak bernilai benar.
- Didalam do while harus ada proses yang membuat kondisi menjadi salah saat kebutuhan perulangan yang dimaksud telah selesai, jika tidak akan menyebabkan crash pada browser.
Contoh penggunaan perulangan DO…WHILE pada javascript :
<!DOCTYPE html> <html> <body>
<p>Silahkan klik tombol untuk mengulang tampilan angka 0-9</p>
<button onclick=”showAngka()”>Tampilkan</button>
<p id=”view”></p>
<script>
function showAngka() {
var text = “”;
var i = 0;
do {
text += “<br>Angka = ” + i;
i++;
} while (i < 10)
document.getElementById(“view”).innerHTML = text;
}
</script>
</body>
</html>
Perbedaan antara WHILE dan DO WHILE
Sepintas terlihat sama antara WHILE dan DO…WHILE, namun ada perbedaan mendasar yaitu terletak pada penempatan WHILE.
Jika pada perulangan WHILE letak WHILE pada baris pertama perulangan maka pada DO…WHILE terletak pada akhir perulangan.
Pada DO…WHILE sebuah proses pasti dikerjakan setidaknya satu kali, sedang pada WHILE ada kemungkinan tidak dikerjakan.
Lihat indeks artikel Tutorial Javascript Dasar >>
Referensi :
