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”.
Catatan:
- Pada pernyataan switch, setiap blok case diakhiri dengan break untuk keluar dari switch setelah blok terpilih dieksekusi.
- Blok default akan dijalankan jika tidak ada blok case yang cocok.
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> |
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.
