Struktur kontrol dalam JavaScript adalah konsep yang memungkinkan kita mengendalikan alur eksekusi program berdasarkan kondisi atau iterasi tertentu. Dengan menggunakan struktur kontrol, kita dapat membuat keputusan, menjalankan blok kode berulang kali, atau melakukan perubahan alur eksekusi berdasarkan berbagai situasi.
Dalam tutorial ini, kita akan membahas struktur kontrol dalam JavaScript yang meliputi penggunaan pernyataan kondisional if
, else
, dan juga penggunaan pernyataan switch
. Struktur kontrol ini memungkinkan kita untuk mengambil keputusan berdasarkan kondisi tertentu dan menjalankan blok kode yang sesuai.
Pernyataan Kondisional if
:
Pernyataan if
dalam JavaScript digunakan untuk membuat keputusan atau mengendalikan alur eksekusi program berdasarkan kondisi tertentu. Jika kondisi yang diberikan bernilai true
, maka blok kode di dalam pernyataan if
akan dieksekusi; jika kondisi false
, blok kode tersebut akan dilewati.
Contoh Penggunaan Pernyataan if
:
1 2 3 4 5 | var usia = 18; if (usia >= 18) { console.log("Anda sudah cukup umur untuk memilih."); } |
Dalam contoh di atas, jika nilai variabel usia
lebih besar atau sama dengan 18, maka pernyataan if
akan dieksekusi dan mencetak “Anda sudah cukup umur untuk memilih.” ke konsol.
Pernyataan Kondisional if
dan else
Pernyataan kondisional if
dan else
digunakan untuk mengendalikan alur eksekusi program berdasarkan kondisi yang ditentukan. Dengan pernyataan kondisi else
maka jika kondisi tidak terpenuhi kita dapat menentukan aksi apa yang akan dilakukan pada blok else
.
Contoh Penggunaan if
dan else
:
1 2 3 4 5 6 7 | var usia = 18; if (usia >= 18) { console.log("Anda sudah cukup umur."); } else { console.log("Anda belum cukup umur."); } |
Pernyataan else if
Pernyataan else if
memungkinkan Anda menambahkan kondisi tambahan untuk dinilai jika kondisi sebelumnya tidak terpenuhi.
Contoh Penggunaan else if
:
1 2 3 4 5 6 7 8 9 | var usia = 15; if (usia < 12) { console.log("Anda masih anak-anak."); } else if (usia < 18) { console.log("Anda remaja."); } else { console.log("Anda sudah dewasa."); } |
Pernyataan switch
Pernyataan switch
dalam JavaScript digunakan untuk mengambil keputusan berdasarkan nilai ekspresi tertentu. Ini adalah alternatif yang lebih efisien daripada menggunakan serangkaian pernyataan if
dan else if
untuk mengelola banyak kondisi yang mungkin.
Pernyataan switch
terdiri dari beberapa blok case
yang mewakili nilai-nilai yang mungkin dihasilkan oleh ekspresi yang dievaluasi. Ketika ekspresi sesuai dengan salah satu blok case
, blok kode dalam case
tersebut akan dieksekusi. Jika tidak ada blok case
yang cocok, kita dapat menambahkan blok default
yang akan dieksekusi jika tidak ada yang cocok.
Contoh Penggunaan switch
:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | var hari = "Senin"; switch (hari) { case "Senin": console.log("Hari kerja"); break; case "Sabtu": case "Minggu": console.log("Hari libur"); break; default: console.log("Hari tidak valid"); break; } |
Pada contoh di atas, jika hari
sama dengan “Senin”, maka akan mencetak “Hari kerja”. Jika hari
sama dengan “Sabtu” atau “Minggu”, maka akan mencetak “Hari libur”. Jika tidak ada kondisi yang cocok, maka akan mencetak “Hari tidak valid”.
Penerapan Struktur Kontrol (if, else, switch) Pada Halaman Web
Untuk latihan menerapkan struktur kontrol if, else dan switch pada halaman web, silahkan anda membuat file dengan nama latihan_js_002.html, kemudian masukkan kode html dan javascript berikut ini:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | <!DOCTYPE html> <html> <head> <title>Contoh Penerapan Struktur Kontril IF, ELSE dan SWITCH</title> </head> <body> <h1>Selamat Datang di Contoh Web dengan JS Struktur Kontril IF, ELSE dan SWITCH</h1> <hr> <h3>Contoh Penerapan Pernyataan if dan else</h3> <p>Masukkan usia Anda untuk melanjutkan:</p> <input type="number" id="usiaInput"> <button onclick="cekUsia()">Cek Usia</button> <p id="hasil"></p> <script> function cekUsia() { var usia = parseInt(document.getElementById("usiaInput").value); if (usia >= 18) { document.getElementById("hasil").textContent = "Anda diperbolehkan masuk."; } else { document.getElementById("hasil").textContent = "Maaf, Anda belum cukup umur."; } } </script> <h3>Contoh Penerapan Pernyataan switch</h3> <select id="hariSelect" onchange="cekHari()"> <option value="Senin">Senin</option> <option value="Selasa">Selasa</option> <option value="Rabu">Rabu</option> <option value="Kamis">Kamis</option> <option value="Jumat">Jumat</option> <option value="Sabtu">Sabtu</option> <option value="Minggu">Minggu</option> </select> <p id="hasil_switch"></p> <script> function cekHari() { var hari = document.getElementById("hariSelect").value; switch (hari) { case "Sabtu": case "Minggu": document.getElementById("hasil_switch").textContent = "Hari libur!"; break; default: document.getElementById("hasil_switch").textContent = "Hari kerja."; } } </script> </body> </html> |
Jika dijalankan pada web browser, maka akan terlihat hasilnya seperti pada gambar berikut ini:
Dengan memahami dan menguasai struktur kontrol seperti if
, else
, dan switch
, mudah-mudahan kita dapat mengendalikan alur eksekusi program dengan lebih fleksibel dan adaptif sesuai dengan kondisi yang ada. Pernyataan kondisional dan switch
adalah alat penting dalam pemrograman untuk membuat aplikasi yang responsif dan interaktif.
Tutorial Lengkap Javascript Dari Dasar dapat dilihat pada Index Tutorial Javascript: Belajar Javascript dari Dasar.