Perulangan (looping) adalah struktur kontrol yang membuat sebuah blok kode dijalankan berulang kali selama kondisi yang ditentukan terpenuhi. Perulangan membuat kode lebih efisien, menghindari pengulangan manual, dan memudahkan pengolahan data dalam jumlah besar.

2.1 Perulangan Standar: for

Perulangan for dipakai ketika jumlah pengulangan sudah diketahui sebelum perulangan dimulai. Sintaksnya terdiri dari tiga bagian: inisialisasi counter, kondisi, dan pembaruan counter.

Berkas: perulangan.js

for (inisialisasi; kondisi; pembaruan_counter) {
    // Blok kode yang dijalankan setiap iterasi
}

Contoh variasi perulangan for:

• Hitung naik: dimulai dari i = 1 selama i <= 5, dan i bertambah 1 setiap langkah.
• Hitung mundur: counter dikurangi setiap langkah, misalnya hitung--.
• Akumulasi total: menjumlahkan nilai dari setiap iterasi ke sebuah variabel.

▶ JalankanResetJavaScript

🧪 Coba ubah: ganti i <= 5 menjadi i <= 10, lalu ubah perulangan akumulasi agar menjumlahkan 1 sampai 100.

2.2 Perulangan Kondisional: while

Perulangan while dipakai ketika jumlah pengulangan tidak bisa dipastikan dan bergantung pada suatu kondisi. Kondisi diperiksa sebelum blok kode dijalankan.

▶ JalankanResetJavaScript

🧪 Coba ubah: ganti energi -= 25 menjadi energi -= 30. Berapa kali karakter berjalan sekarang?

2.3 Perulangan do...while

Pada do...while, blok do dijalankan minimal satu kali sebelum kondisi pada while diperiksa.

▶ JalankanResetJavaScript

🧪 Coba ubah: ganti let angka = 10 menjadi let angka = 1, lalu bandingkan hasilnya.

2.4 Perulangan Array dan Objek: forEach, for...of, for...in

JavaScript menyediakan cara khusus untuk mengulang data yang lebih kompleks:

1. Array.prototype.forEach(): metode bawaan array yang menjalankan callback function untuk setiap elemen array.
2. for...of: sintaks modern (ES6) untuk mengambil nilai elemen dari array, string, atau NodeList DOM.
3. for...in: dipakai untuk mengulang properti (kunci) sebuah objek.

▶ JalankanResetJavaScript

🧪 Coba ubah: tambahkan "Durian" ke daftarBuah dan properti warna: "Hitam" ke objek laptop.

2.5 Studi Kasus: Dropdown <select> Otomatis

Pilihan jam, ukuran, atau jumlah barang bisa dibuat dengan perulangan. Contoh ini memakai innerHTML untuk mengisi HTML, createElement untuk membuat elemen, dan appendChild untuk menambahkannya. Cara kerja DOM dibahas di bab 3; respons pengguna di bab 4. Di lab, new Date().getFullYear() membaca tahun saat ini dari tanggal komputer.

Di lab tanggal lahir, jangan salin deklarasi const; selectTanggal, selectBulan, daftarBulan, dan selectTahun sudah ada. Sesuaikan teknik berikut dengan kebutuhan tiap zona.

Kasus 1: Pilihan Jam dengan for dan innerHTML

▶ JalankanResetHTML + JavaScript

🧪 Coba ubah: tampilkan hanya jam genap.

Kasus 2: Jumlah Paket Mundur dengan createElement

▶ JalankanResetHTML + JavaScript

🧪 Coba ubah: mulai dari 15 paket.

Kasus 3: Ukuran dengan Array dan forEach

▶ JalankanResetHTML + JavaScript

🧪 Coba ubah: tambahkan ukuran XXL.

2.6 Kontrol Perulangan: break dan continue

• break menghentikan perulangan sepenuhnya dan langsung keluar dari blok loop.
• continue melompati sisa kode pada iterasi saat ini dan langsung lanjut ke iterasi berikutnya.

▶ JalankanResetJavaScript

🧪 Coba ubah: pakai continue untuk melompati semua angka ganjil sehingga hanya angka genap yang tercetak.

Berikutnya: DOM di bab 3 untuk membaca dan mengubah elemen halaman.

Kondisi awal

Dari Bab 1, kamu sudah menjalankan variabel, fungsi, dan percabangan serta membaca hasil di Console. Sekarang buka Lab Bab 2: Form Tanggal Lahir. Ini latihan baru: form dengan tiga dropdown sudah tersedia, tetapi pilihan tanggal, bulan, dan tahunnya belum diisi.

Dropdown adalah daftar pilihan HTML bernama <select>; setiap pilihannya berupa <option>. Editor JavaScript mewakili script.js. Isi hanya zona bernomor dan pertahankan kode di luarnya. Semua deklarasi seperti selectTanggal, opsiTanggal, daftarBulan, tahunSekarang, dan siswa sudah disediakan. Jangan menyalinnya lagi ke zona.

Perulangan atau looping menjalankan perintah berulang. Setiap satu putaran disebut iterasi. Kita akan membuat pilihan otomatis, kemudian mencetak tahun kabisat dan data peserta. Tidak perlu memasang alat atau menjalankan server sendiri.

Panduan mengisi form

Langkah 1: Buat pilihan tanggal 1 sampai 31

for mempunyai tiga bagian: nilai awal counter, kondisi untuk melanjutkan, dan perubahan counter sesudah satu putaran. Counter adalah variabel penghitung. tgl dimulai dari 1; tgl <= 31 membatasi nilai terakhir; tgl++ menambah satu.

Tempel di Lab 2, Zona 1. Berkas: script.js

for (let tgl = 1; tgl <= 31; tgl++) {
    opsiTanggal += '<option value="' + tgl + '">' + tgl + '</option>';
}

opsiTanggal sudah berisi teks kosong. Operator += menambahkan teks option pada setiap putaran. Tanda kutip pada potongan harus ikut disalin karena membentuk atribut value. Baris selectTanggal.innerHTML = opsiTanggal; sudah ada di bawah zona: innerHTML membaca teks tersebut sebagai HTML. Di sini seluruh nilainya berasal dari angka yang dibuat kode.

Tekan Jalankan, lalu buka pilihan Tanggal pada Preview. Tekan Cek untuk langkah tanggal.

Hasil: dropdown Tanggal mempunyai tepat 31 pilihan, dari 1 hingga 31, tanpa pilihan kosong di awal.

Langkah 2: Buat pilihan bulan dari array

Array adalah daftar berurutan; daftarBulan sudah berisi Januari sampai Desember. forEach memanggil callback, yaitu fungsi yang menerima satu isi daftar pada setiap putaran. Parameter bulan menerima nama bulan dan indeks menerima posisinya mulai dari nol.

Tempel di Lab 2, Zona 2. Berkas: script.js

daftarBulan.forEach(function (bulan, indeks) {
    const opsi = document.createElement('option');
    opsi.value = indeks + 1;
    opsi.textContent = (indeks + 1) + ' - ' + bulan;
    selectBulan.appendChild(opsi);
});

document.createElement('option') membuat elemen pilihan baru. value adalah nilai pilihan, sedangkan textContent adalah tulisan yang terlihat. Kita menambah 1 pada indeks agar Januari bernomor 1. appendChild memasukkan elemen itu ke dropdown Bulan. Elemen adalah bagian halaman; cara mencarinya dengan getElementById dibahas lagi pada bab DOM.

Hasil: setelah Jalankan, dropdown Bulan mempunyai 12 pilihan, mulai 1 - Januari sampai 12 - Desember, dengan value 1 sampai 12.

Langkah 3: Buat pilihan tahun secara mundur

Lab sudah membaca tahun perangkat dengan new Date().getFullYear(). getFullYear mengambil angka tahun. Kita memakai angka itu sebagai awal, lalu mengurangi counter dengan thn-- selama nilainya masih minimal 1990.

Tempel di Lab 2, Zona 3. Berkas: script.js

for (let thn = tahunSekarang; thn >= 1990; thn--) {
    const opsi = document.createElement('option');
    opsi.value = thn;
    opsi.textContent = thn;
    selectTahun.appendChild(opsi);
}

Tekan Jalankan dan buka dropdown Tahun. Jumlah pilihan adalah tahun sekarang dikurangi 1990 lalu ditambah 1. Misalnya jika perangkat menunjukkan 2026, ada 37 pilihan. Tahun awal mengikuti perangkat, bukan angka tetap yang diketik pada kode.

Hasil: pilihan Tahun berurutan turun dari tahun sekarang sampai 1990, termasuk kedua batasnya.

Langkah 4: Lewati tahun yang bukan kabisat

Operator % mengambil sisa pembagian. Dalam rentang 2000–2026 ini, tahun yang habis dibagi 4 adalah tahun kabisat. !== 0 berarti sisanya tidak sama dengan nol. continue melewati sisa perintah pada putaran itu dan melanjutkan ke tahun berikutnya. Aturan ini cukup untuk rentang latihan; aturan kalender umum juga mempertimbangkan kelipatan 100 dan 400.

Tempel di Lab 2, Zona 4. Berkas: script.js

for (let tahun = 2000; tahun <= 2026; tahun++) {
    if (tahun % 4 !== 0) {
        continue;
    }
    console.log(tahun);
}

Tekan Jalankan dan baca Console, bukan dropdown Tahun. Perulangan ini hanya mencetak angka dan tidak menyaring pilihan tahun pada form.

Hasil: Console memuat tujuh baris tahun berurutan: 2000, 2004, 2008, 2012, 2016, 2020, dan 2024.

Langkah 5: Baca pasangan data peserta

Objek menyimpan pasangan nama properti dan nilai. Lab menyediakan objek siswa dengan properti nama, kota, dan minat. Perulangan for dengan in mengambil nama propertinya satu per satu. siswa[kunci] membaca nilai berdasarkan nama properti yang sedang diproses.

Tempel di Lab 2, Zona 5. Berkas: script.js

for (const kunci in siswa) {
    console.log(kunci + ": " + siswa[kunci]);
}

Setelah semua zona lengkap, tekan Jalankan lalu Cek pada lab. Pesan peserta muncul sesudah tujuh tahun kabisat. Penilai mencari urutan pesan yang diharapkan, jadi pesan tahun dan peserta dapat berada bersama dalam Console.

Hasil: Console menambahkan nama: Andi, kota: Bandung, dan minat: Web dalam tiga baris; pemeriksaan kelima langkah lulus.

Langkah 6: Jalankan form lengkap di playground

Contoh utuh ini memakai pola HTML playground: halaman diikuti <script> yang dijalankan setelah elemen form tersedia. Tekan Jalankan, lalu buka setiap dropdown. Kode ini untuk playground; saat menempel ke lab tetap gunakan potongan per zona.

Berkas: index.html

▶ JalankanResetHTML + JavaScript

Ini baru pembuat pilihan: tanggal selalu 1–31, termasuk saat Februari dipilih. Belum ada pemeriksaan kecocokan tanggal dengan bulan atau penyimpanan tanggal lahir.

Hasil: ketiga dropdown terisi seperti lab lengkap; Console memuat tujuh tahun kabisat diikuti tiga baris data peserta.

Kenali bentuk perulangan lain

while memeriksa kondisi sebelum putaran sehingga dapat berjalan nol kali. Bentuk do diikuti while memeriksa kondisi setelah putaran sehingga selalu berjalan minimal sekali. Perulangan for dengan of membaca nilai dari daftar, sedangkan bentuk dengan in membaca nama properti objek. break menghentikan seluruh perulangan; continue hanya melewati sisa satu putaran. Lab ini memakai for karena batas tanggal dan tahun sudah diketahui, serta forEach karena daftar bulan sudah tersedia.

Kalau ada galat

Nama sudah dideklarasikan. Hapus salinan deklarasi tambahan di dalam zona. Tempel ulang hanya potongan zona terkait, bukan contoh HTML lengkap dari Langkah 6.

Jumlah tanggal salah atau pilihan pertama kosong. Ganti seluruh Zona 1 dengan Langkah 1. Mulai dari 1, pertahankan batas 31, dan jangan menambah option pembuka. Baris innerHTML di luar zona harus tetap ada.

Bulan dimulai dari nol atau tidak muncul. Salin ulang Zona 2, termasuk indeks + 1 dan appendChild. Tanpa appendChild, elemen baru belum masuk ke halaman.

Tahun tidak sesuai. Pastikan jam perangkat benar. Tempel ulang Zona 3 yang memakai tahunSekarang, batas 1990, dan pengurangan thn--. Jangan menggantinya dengan tahun tetap.

Preview berhenti atau muncul galat perulangan. Ganti isi zona yang sedang dikerjakan dengan potongan langkah terkait. Counter harus berubah menuju batas akhir; tanpa perubahan itu perulangan dapat terus berjalan sampai dihentikan pengaman.

Keadaan akhir

Form berisi pilihan tanggal, bulan, dan tahun. Console memperlihatkan tahun kabisat pada rentang latihan serta pasangan data peserta. Bab 3 melanjutkan penggunaan DOM untuk memilih dan mengubah elemen halaman secara langsung.