For dapat menjalankan blok kode beberapa kali.
JavaScript Loops
Loop berguna, jika Anda ingin menjalankan kode yang sama lagi dan lagi, setiap kali dengan nilai yang berbeda.
Seringkali hal ini terjadi ketika bekerja dengan array:
contoh, tidak menggunakan For:
<!DOCTYPE html>
<html>
<head>
<title>Belajar JavaScript</title>
</head>
<body>
<p id="demo"></p>
<script>
var buah = ["Anggur","Mangga","Pisang","Apel"];
var teks;
document.getElementById("demo").innerHTML =
buah[0] + "<br>"
+ buah[1] + "<br>"
+ buah[2] + "<br>"
+ buah[3];
</script>
</body>
</html>
menggunakan For :
<!DOCTYPE html>
<html>
<head>
<title>Belajar JavaScript</title>
</head>
<body>
<p id="demo"></p>
<script>
var buah = ["Anggur","Mangga","Pisang","Apel"];
var teks = "";
var i;
for (i = 0; i < buah.length; i++) {
teks += buah[i] + "<br>";
}
document.getElementById("demo").innerHTML = teks;
</script>
</body>
</html>
Jenis Loops
JavaScript mendukung berbagai jenis loop:
- for - loop melalui blok kode beberapa kali
- for/in - loop melalui sifat-sifat suatu obyek
- while - loop melalui blok kode sementara kondisi yang ditentukan benar
- do / while - juga loop melalui blok kode sementara kondisi yang ditentukan benar
Untuk Loop
For loop akan sering Anda gunakan ketika Anda ingin membuat satu lingkaran.
For loop memiliki sintaks berikut:
for ( statement 1 ; statement 2 ; statement 3 ) {
code block to be executed
}
Statement 1 dijalankan sebelum loop (blok kode) dimulai.
Statement 2 mendefinisikan kondisi untuk menjalankan loop (blok kode).
Statement 3 dijalankan setiap kali setelah loop (blok kode) telah dieksekusi.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Belajar JavaScript</title>
</head>
<body>
<p id="demo"></p>
<button onclick="fungsiku()">klik</button>
<script>
var teks = "";
var i;
function fungsiku() {
for (i = 0; i < 5; i++) {
teks += "Nomor " + i + "<br>";
}
document.getElementById("demo").innerHTML = teks;
}
</script>
</body>
</html>
Dari contoh di atas, Anda dapat membaca:
Pernyataan 1 set variabel sebelum loop dimulai (var i = 0).
Pernyataan 2 mendefinisikan kondisi untuk loop untuk menjalankan (i kurang dari 5).
Pernyataan 3 meningkatkan nilai (i ++)
Pernyataan 1
Biasanya Anda akan menggunakan pernyataan 1 untuk memulai variabel yang digunakan dalam loop (i = 0).
Hal ini tidak selalu terjadi. Pernyataan 1 adalah opsional.
Anda dapat melakukan banyak nilai dalam pernyataan 1 (dipisahkan dengan tanda koma):
<!DOCTYPE html>
<html>
<head>
<title>Belajar JavaScript</title>
</head>
<body>
<p id="demo"></p>
<script>
var buah = ["Anggur","Mangga","Pisang","Apel"];
var teks = "";
var i;
for (i = 0; i < buah.length; i++) {
teks += buah[i] + "<br>";
}
document.getElementById("demo").innerHTML = teks;
</script>
</body>
</html>
Pernyataan 2
Pernyataan 2 sering digunakan untuk mengevaluasi kondisi variabel awal.
Hal ini tidak selalu terjadi. Pernyataan 2 juga opsional.
Jika pernyataan 2 kembali benar, loop akan mulai lagi, jika ia mengembalikan salah, loop akan berakhir.
Jika Anda menghilangkan pernyataan 2, Anda harus memberikan break di dalam lingkaran. Jika tidak loop tidak akan pernah berakhir. Ini akan crash browser Anda. Baca tentang break dalam bab selanjutnya dari tutorial ini.
Pernyataan 3
Seringkali pernyataan 3 meningkatkan variabel awal.
Hal ini tidak selalu terjadi, dan pernyataan 3 adalah opsional.
Pernyataan 3 dapat melakukan hal seperti kenaikan negatif (i--), selisih positif (i = i + 15), atau apa pun.
Pernyataan 3 juga dapat dihilangkan.
<!DOCTYPE html>
<html>
<head>
<title>Belajar JavaScript</title>
</head>
<body>
<p id="demo"></p>
<script>
var buah = ["Mangga","Pisang","Apel","Anggur"];
var teks = "";
var i = 0;
var len = buah.length;
for (; i < len;) {
teks += buah[i]+ "<br>";
i++;
}
document.getElementById("demo").innerHTML = teks;
</script>
</body>
</html>
For / In loop
JavaScript For / In pernyataan loop melalui sifat-sifat suatu objek:
<!DOCTYPE html>
<html>
<head>
<title>Belajar JavaScript</title>
</head>
<body>
<p id="demo"></p>
<script>
var buah = ["Mangga","Pisang","Apel","Anggur"];
var teks = "";
var i;
for ( i in buah) {
teks += buah[i]+ " ";
}
document.getElementById("demo").innerHTML = teks;
</script>
</body>
</html>
While loop
While dan do / while akan dijelaskan dalam bab berikutnya.
0 komentar:
Posting Komentar