Tutorial JS

JS RUMAH Pengenalan JS JS Dimana Keluaran JS Pernyataan JS Sintaks JS Komentar JS Variabel JS JS Let JS Const Operator JS JS Aritmatika Tugas JS Tipe Data JS Fungsi JS Objek JS Acara JS String JS Metode String JS Pencarian String JS Template String JS Nomor JS Metode Nomor JS JS Array Metode Array JS Sortir Array JS Iterasi Array JS JS Array Const Tanggal JS Format Tanggal JS Metode Dapatkan Tanggal JS Metode Penetapan Tanggal JS JS Matematika JS Acak JS Boolean Perbandingan JS Ketentuan JS Beralih JS JS Loop Untuk JS Loop Untuk Masuk JS Loop Untuk Of JS Loop Sementara Istirahat JS JS Iterable JS Set Peta JS Tipe JS Konversi Tipe JS JS Bitwise JS RegExp Kesalahan JS Lingkup JS Pengangkatan JS Mode Ketat JS JS Kata Kunci ini Fungsi Panah JS Kelas JS JS JSON Debug JS Panduan Gaya JS Praktik Terbaik JS Kesalahan JS Kinerja JS Kata-kata Cadangan JS

Versi JS

Versi JS JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / Tepi Sejarah JS

Objek JS

Definisi Objek Properti Objek Metode Objek Tampilan Objek Aksesor Objek Konstruktor Objek Prototipe Objek Obyek Iterable Set Objek Peta Objek Referensi Objek

Fungsi JS

Definisi Fungsi Parameter Fungsi Panggilan Fungsi Panggilan Fungsi Fungsi Terapkan Penutupan Fungsi

Kelas JS

Perkenalan Kelas Warisan Kelas Kelas Statis

JS Asinkron

Panggilan Balik JS JS Asinkron JS Janji JS Async/Menunggu

JS HTML DOM

Pengenalan DOM Metode DOM Dokumen DOM Elemen DOM HTML DOM Formulir DOM CSS DOM Animasi DOM Acara DOM Pendengar Acara DOM Navigasi DOM Node DOM Koleksi DOM Daftar Node DOM

JS Browser BOM

Jendela JS Layar JS Lokasi JS Sejarah JS JS Navigator Peringatan Munculan JS Waktu JS JS Cookies

JS Web API

Pengantar API Web API Formulir Web API Riwayat Web API Penyimpanan Web API Pekerja Web API Pengambilan Web API Geolokasi Web

JS AJAX

Pengenalan AJAX AJAX XMLHttp Permintaan AJAX Tanggapan AJAX File XML AJAX AJAX PHP AJAX ASP Basis Data AJAX Aplikasi AJAX Contoh AJAX

JS JSON

Perkenalan JSON Sintaks JSON JSON vs XML Tipe Data JSON Penguraian JSON Stringify JSON Objek JSON Array JSON Server JSON JSON PHP JSON HTML JSON JSONP

JS vs jQuery

Pemilih jQuery jQuery HTML jQuery CSS jQuery DOM

Grafik JS

Grafik JS JS Kanvas JS Plotly JS Chart.js Bagan Google JS JS D3.js

Contoh JS

Contoh JS JS HTML DOM Masukan HTML JS Objek HTML JS Acara HTML JS JS Browser Editor JS Latihan JS kuis JS Sertifikat JS

Referensi JS

Objek JavaScript Objek DOM HTML


JavaScript Untuk Loop


Loop dapat mengeksekusi blok kode beberapa kali.


Loop JavaScript

Loop berguna, jika Anda ingin menjalankan kode yang sama berulang-ulang, setiap kali dengan nilai yang berbeda.

Seringkali ini terjadi ketika bekerja dengan array:

Alih-alih menulis:

text += cars[0] + "<br>";
text += cars[1] + "<br>";
text += cars[2] + "<br>";
text += cars[3] + "<br>";
text += cars[4] + "<br>";
text += cars[5] + "<br>";

Kamu bisa menulis:

for (let i = 0; i < cars.length; i++) {
  text += cars[i] + "<br>";
}

Berbagai Jenis Loop

JavaScript mendukung berbagai jenis loop:

  • for- loop melalui blok kode beberapa kali
  • for/in- loop melalui properti suatu objek
  • for/of- loop melalui nilai-nilai objek yang dapat diubah
  • while- loop melalui blok kode saat kondisi yang ditentukan benar
  • do/while- juga mengulang melalui blok kode saat kondisi yang ditentukan benar

Untuk Loop

Loop formemiliki sintaks berikut:

for (statement 1; statement 2; statement 3) {
  // code block to be executed
}

Pernyataan 1 dieksekusi (satu kali) sebelum eksekusi blok kode.

Pernyataan 2 mendefinisikan kondisi untuk mengeksekusi blok kode.

Pernyataan 3 dieksekusi (setiap kali) setelah blok kode dieksekusi.

Contoh

for (let i = 0; i < 5; i++) {
  text += "The number is " + i + "<br>";
}

Dari contoh di atas, Anda dapat membaca:

Pernyataan 1 menetapkan variabel sebelum loop dimulai (misalkan i = 0).

Pernyataan 2 mendefinisikan kondisi agar loop berjalan (i harus kurang dari 5).

Pernyataan 3 meningkatkan nilai (i++) setiap kali blok kode dalam loop telah dieksekusi.



Pernyataan 1

Biasanya Anda akan menggunakan pernyataan 1 untuk menginisialisasi variabel yang digunakan dalam loop (misalkan i = 0).

Ini tidak selalu terjadi, JavaScript tidak peduli. Pernyataan 1 adalah opsional.

Anda dapat memulai banyak nilai dalam pernyataan 1 (dipisahkan dengan koma):

Contoh

for (let i = 0, len = cars.length, text = ""; i < len; i++) {
  text += cars[i] + "<br>";
}

Dan Anda dapat menghilangkan pernyataan 1 (seperti ketika nilai Anda ditetapkan sebelum loop dimulai):

Contoh

let i = 2;
let len = cars.length;
let text = "";
for (; i < len; i++) {
  text += cars[i] + "<br>";
}

Pernyataan 2

Seringkali pernyataan 2 digunakan untuk mengevaluasi kondisi variabel awal.

Ini tidak selalu terjadi, JavaScript tidak peduli. Pernyataan 2 juga opsional.

Jika pernyataan 2 mengembalikan true, loop akan dimulai lagi, jika mengembalikan false, loop akan berakhir.

Jika Anda menghilangkan pernyataan 2, Anda harus memberikan jeda di dalam loop. Jika tidak, loop tidak akan pernah berakhir. Ini akan membuat browser Anda crash. Baca tentang jeda di bab selanjutnya dari tutorial ini.


Pernyataan 3

Seringkali pernyataan 3 menaikkan nilai variabel awal.

Ini tidak selalu terjadi, JavaScript tidak peduli, dan pernyataan 3 adalah opsional.

Pernyataan 3 dapat melakukan apa saja seperti kenaikan negatif (i--), kenaikan positif (i = i + 15), atau apa pun.

Pernyataan 3 juga dapat dihilangkan (seperti saat Anda menaikkan nilai di dalam loop):

Contoh

let i = 0;
let len = cars.length;
let text = "";
for (; i < len; ) {
  text += cars[i] + "<br>";
  i++;
}

Lingkup Lingkaran

Menggunakan vardalam satu lingkaran:

Contoh

var i = 5;

for (var i = 0; i < 10; i++) {
  // some code
}

// Here i is 10

Menggunakan letdalam satu lingkaran:

Contoh

let i = 5;

for (let i = 0; i < 10; i++) {
  // some code
}

// Here i is 5

Pada contoh pertama, menggunakan var, variabel yang dideklarasikan dalam loop mendeklarasikan ulang variabel di luar loop.

Dalam contoh kedua, menggunakan let, variabel yang dideklarasikan dalam loop tidak mendeklarasikan ulang variabel di luar loop.

Ketika letdigunakan untuk mendeklarasikan variabel i dalam sebuah loop, variabel i hanya akan terlihat di dalam loop.


Untuk/Dari dan Untuk/Dalam Perulangan

Loop for/indan for/ofloop dijelaskan di bab berikutnya.


Sementara Loop

Loop whiledan do/whiledijelaskan dalam bab-bab berikutnya.


Uji Diri Anda Dengan Latihan

Olahraga:

Buat loop yang berjalan dari 0 hingga 9.

let i;
 ( = ;  < ; ) {
  console.log(i);
}