WebTech Interaktif XI RPL

JavaScript · Bab 2

Struktur Kontrol Perulangan (Looping)

for, while, do...while, perulangan array dan objek, membuat dropdown otomatis, serta break dan continue.

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.

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.
JavaScript

🧪 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.

JavaScript

🧪 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.

JavaScript

🧪 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.
JavaScript

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

2.5 Studi Kasus: Dropdown <select> Otomatis

Formulir pendaftaran sering membutuhkan pilihan tanggal, bulan, atau tahun. Menulis puluhan tag <option> secara manual tidak efisien dan rawan salah. Dengan perulangan, pilihan tersebut bisa dibuat otomatis.

Kasus 1: Tanggal 1–31 dengan for dan innerHTML

HTML + JavaScript

🧪 Coba ubah: buat dropdown hanya berisi tanggal genap (2, 4, 6, dan seterusnya).

Kasus 2: Tahun Mundur dengan document.createElement()

HTML + JavaScript

🧪 Coba ubah: ganti tahunMulai menjadi 2000.

Kasus 3: Nama Bulan dengan Array dan forEach()

HTML + JavaScript

🧪 Coba ubah: tampilkan hanya nama bulan tanpa nomor di depannya.

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.
JavaScript

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

Lanjut ke Lab Bab 2 →