Istilah IF digunakan untuk menggambarkan alur program yang bercabang, oleh karena itu statemen if biasa disebut percabangan. Pada flow chart, logika if dapat diartikan “jika…maka“,
Selain percabangan, statemen if juga disebut: control flow, decision, struktur kondisi, Struktur if, dsb.
Dalam JavaScript terdapat 6 jenis percabangan
- Percabangan if
- Percabangan if/else
- Percabangan if/else/if
- Percabangan switch/case
- Percabangan dengan Operator Ternary
- Percabangan Bersarang (Nested)
A. Percabangan if
Percabangan if merupakan percabangan yang hanya memiliki satu blok pilihan saat kondisi bernilai benar, percabangan if digunakan untuk menjalankan program jika kondisi terpenuhi (true), jika kondisi tidak terpenuhi (false) tidak ada alternatif lain untuk dijalankan.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Percabangan if</title>
</head>
<body>
<script>
var totalBelanja = prompt("Total belanja?", 0);
if(totalBelanja > 100000){
document.write("<h2>Selamat Anda dapat hadiah</h2>");
}
document.write("<p>Terima kasih sudah berbelanja di toko kami</p>");
</script>
</body>
</html> - Demo Percabangan if
- Download JavaScript – Percabangan if.html
B. Percabangan if/else
Percabangan if/else merupakan percabangan yang memiliki dua blok pilihan. Pilihan pertama untuk kondisi benar, dan pilihan kedua untuk kondisi salah (else).
<!DOCTYPE html>
<html lang="en">
<head>
<title>Percabangan if/else</title>
</head>
<body>
<script>
var password = prompt("Password:");
if(password == "kopi"){
document.write("<h2>Selamat datang bos!</h2>");
} else {
document.write("<p>Password salah, coba lagi!</p>");
}
document.write("<p>Terima kasih sudah menggunakan aplikasi ini!</p>");
</script>
</body>
</html>- Demo Percabangan if/else
- Download JavaScript – Percabangan if/else.htm
C. Percabangan if/else/if
Percabangan if/else/if merupakan percabangan yang memiliki lebih dari dua blok pilihan. Pada percabangan if/else/if , untuk membuat blok kode untuk if/else/if dapat menggunakan kurung kurawal , maupun tidak menggunakan
<!DOCTYPE html>
<html lang="en">
<head>
<title>Percabangan if/else/if</title>
</head>
<body>
<script>
var nilai = prompt("Inputkan nilai akhir:");
var grade = "";
if(nilai >= 90) grade = "A"
else if(nilai >= 80) grade = "B+"
else if(nilai >= 70) grade = "B"
else if(nilai >= 60) grade = "C+"
else if(nilai >= 50) grade = "C"
else if(nilai >= 40) grade = "D"
else if(nilai >= 30) grade = "E"
else grade = "F";
document.write(`<p>Grade anda: ${grade}</p>`);
</script>
</body>
</html>jika ditulis dengan kurung kurawal
<script>
var nilai = prompt("Inputkan nilai akhir:");
var grade = "";
if (nilai >= 90){
grade = "A"
} else if(nilai >= 80) {
grade = "B+"
} else if(nilai >= 70) {
grade = "B"
} else if(nilai >= 60) {
grade = "C+"
} else if(nilai >= 50) {
grade = "C"
} else if(nilai >= 40) {
grade = "D"
} else if(nilai >= 30) {
grade = "E"
} else {
grade = "F";
}
document.write(`<p>Grade anda: ${grade}</p>`);
</script>- Demo Percabangan if/else/if
- Download JavaScript – Percabangan if/else/if.htm
D. Percabangan switch/case
Percabangan switch/case adalah bentuk lain dari percabangan if/else/if.
Blok kode (case) dapat dibuat sebanyak yang diinginkan di dalam blok switch. Pada <value>, dapat diisi dengan nilai yang nanti akan dibandingkan dengan variabel.
Setiap case harus diakhiri dengan break. Khusus untuk default, tidak perlu diakhiri dengan break karena dia terletak di bagian akhir. Pemberian break bertujuan agar program berhenti mengecek case berikutnya saat sebuah case terpenuhi.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Percabangan switch/case</title>
</head>
<body>
<script>
var jawab = prompt("Kamu beruntung! Silakan pilih hadiahmu dengan memasukkan angka 1 sampai 5");
var hadiah = "";
switch(jawab){
case "1":
hadiah = "Tisu";
break;
case "2":
hadiah = "1 Kotak Kopi";
break;
case "3":
hadiah = "Sticker";
break;
case "4":
hadiah = "Minyak Goreng";
break;
case "5":
hadiah = "Uang Rp 50.000";
break;
default:
document.write("<p>Opps! anda salah pilih</p>");
}
if(hadiah === ""){
document.write("<p>Kamu gagal mendapat hadiah</p>");
} else {
document.write("<h2>Selamat kamu mendapatkan " + hadiah + "</h2>");
}
</script>
</body>
</html>Percabangan switch/case juga dapat dibuat seperti ini
var nilai = prompt("input nilai");
var grade = "";
switch(true){
case nilai < 90:
grade = "A";
break;
case nilai < 80:
grade = "B+";
break;
case nilai < 70:
grade = "B";
break;
case nilai < 60:
grade = "C+";
break;
case nilai < 50:
grade = "C";
break;
case nilai < 40:
grade = "D";
break;
case nilai < 30:
grade = "E";
break;
default:
grade = "F";
}- Demo Percabangan switch/case
- Download JavaScript – Percabangan switch/case.htm
E. Percabangan dengan Operator Ternary
Percabangan menggunakan operator ternary merupakan bentuk lain dari percabangan if/else.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Percabangan Ternary</title>
</head>
<body>
<script>
var jwb = prompt("Apakah Jakarta ibu kota indonesia?");
var jawaban = (jwb.toUpperCase() == "IYA") ? "Benar": "Salah";
document.write(`Jawaban anda: <b>${jawaban}</b>`);
</script>
</body>
</html>Fungsi dari method toUpperCase() untuk mengubah teks yang diinputkan menjadi huruf kapital semua.
- Demo Percabangan Operator Ternary
- Download JavaScript – Percabangan Operator Ternary.htm
Percabangan Bersarang (Nested)
blok percabangan di dalam percabangan. percabangan di dalam percabangan disebut percabangan bersarang atau nested if.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Percabangan Ternary</title>
</head>
<body>
<script>
var username = prompt("Username:");
var password = prompt("Password:");
if(username == "petanikode"){
if(password == "kopi"){
document.write("<h2>Selamat datang pak bos!</h2>");
} else {
document.write("<p>Password salah, coba lagi!</p>");
}
} else {
document.write("<p>Anda tidak terdaftar!</p>");
}
</script>
</body>
</html>- Demo Percabangan Bersarang (Nested)
- Download JavaScript – Percabangan Bersarang (Nested).htm
Leave a Reply