Percabangan dalam Javascript
Dalam Javascript, percabangan ada 6 jenis yang harus kita ketahui. Kali ini kita akan membahas semua percabangan nya. Apa saja 6 jenis percabangan nya ? mari kita bahas bersama dibawah ini.
1. Percabangan If
Percabangan If adalah jenis percabangan yang hanya memiliki satu pilihan saat kondisi menyatakan True ( benar ). Percabangan If dapat kita gunakan dalam program suatu perbelanjaan. Contohnya saya akan membuat suatu program yang dimana ketika seseorang berbelanja diatas Rp 500.000 akan mendapatkan voucher belanja sebesar Rp 150.000. Berikut ini contoh codingan nya.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Percabangan if</title>
</head>
<body>
<script>
var Belanja = prompt("Masukkan Total Belanja");
if(Belanja > 500000){
document.write("<h2>Selamat Anda Mendapatkan Voucher Belanja sebesar Rp 150.000</h2>");
}
document.write("<p>Terimakasih sudah berbelanja di toko kami, silahkan datang kembali di lain waktu</p>");
</script>
</body>
</html>
Tampilan awalnya kita harus menginputkan total belanja, seperti dibawah ini
Jika total belanja lebih dari Rp 500.000, maka akan mendapatkan voucher belanja sebesar Rp 150.000
Jika kita sudah mengetahui hasilnya, sekarang kita akan membahas codingan nya. Coba kita perhatikan codingan dibawah ini.
var Belanja = prompt("Masukkan Total Belanja");
if(Belanja > 500000){
document.write("<h2>Selamat Anda Mendapatkan Voucher Belanja sebesar Rp 150.000</h2>");
}
document.write("<p>Terimakasih sudah berbelanja di toko kami, silahkan datang kembali di lain waktu</p>");
Bagaimana maksud codingan diatas ? Pertama saya membuat sebuah variabel dengan nama Belanja yang berisikan sebuah alert atau dialog untuk memasukkan jumlah total belanja. Kemudian dilanjutkan memasukkan percabangan nya berupa if (jika). Di dalam if tersebut, saya masukkan nama variabel dan simbol yang menyatakan lebih dari. Simple nya adalah ketika kita menginputkan total belanjaan lebih dari Rp 500.000, maka percabangan if tersebut akan memproses nya dan menampilkan output berupa tulisan yang menyatakan mendapatkan Voucher Belanja sebesar Rp 150.000. Dan jika total belanjaan dibawah Rp 500.000, maka output yang dihasilkan hanyalah ucapan terimakasih.
2. Percabangan If/Else
Jika Percabangan If hanya memiliki satu pilihan yang bersifat True, maka Percabangan If/Else memiliki 2 blok pilihan yaitu True dan False (benar dan salah). Pilihan pertama bersifat benar, dan pilihan kedua bersifat salah (Else). Jenis Percabangan If/Else biasanya digunakan dalam autentikasi login, contoh nya pada artikel blog yang pernah saya buat. Contoh codingan nya seperti dibawah ini
<!DOCTYPE html>
<html lang="en">
<head>
<title>Percabangan if/else</title>
</head>
<body>
<script>
var login = prompt("Password:");
if(login == "freeze"){
document.write("<h2>Selamat datang admin!</h2>");
} else {
document.write("<p>Password salah, silahkan coba lagi.</p>");
}
document.write("<p>Terima kasih sudah mengunjungi website ini, silahkan datang di lain waktu</p>");
</script>
</body>
</html>
Tampilan awalnya kita harus memasukkan password yang benar. Jika salah, maka program akan menyatakan password salah.
Sekarang kita akan membahas codingan nya
var login = prompt("Password:");
if(login == "freeze"){
document.write("<h2>Selamat datang admin!</h2>");
} else {
document.write("<p>Password salah, silahkan coba lagi.</p>");
}
document.write("<p>Terima kasih sudah mengunjungi website ini, silahkan datang di lain waktu</p>");
Coba kita perhatikan codingan Javascript diatas. Saya membuat sebuah variabel dengan nama login yang berisikan nilai berupa dialog untuk menginputkan Password. Kemudian di dalam if tersebut, saya deklarasikan password untuk login nya. Jika password nya sesuai, maka tampilan nya seperti ini.
Dan jika password yang diinputkan salah, hasilnya seperti ini
3. Percabangan If/Else/If
Percabangan if/else/if merupakan jenis percabangan yang memiliki lebih dari dua blok pilihan. Percabangan jenis ini bisa kita gunakan dalam program menginputkan nilai. Berikut ini contoh codingan nya
<html>
<head>
<title> Percabangan dalam Javascript </title>
</head>
<body>
<script>
var nilai = prompt("Masukkan 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 grade = "D";
document.write("Grade anda: " + grade);
</script>
</body>
</html>
Pada codingan diatas, saya membuat program input nilai menggunakan percabangan if/else/if. Jika kita menginputkan nilai 90 atau diatas nya, maka Grade yang didapat adalah A.
4. Percabangan Switch/Case
Percabangan Switch/Case merupakan jenis percabangan yang memiliki lebih dari dua pilihan. Berbeda dari jenis jenis percabangan diatas yang hanya memiliki satu pilihan. Salah satu contoh penggunaan Percabangan Switch/Case adalah dalam program input nilai. Contoh codingan nya seperti dibawah ini.
<html>
<head>
<title> Percabangan dalam Javascript </title>
</head>
<body>
<script>
var nilai = prompt("Masukkan Nilai");
var grade = "";
switch(true){
case (nilai >= 90 && nilai <= 100):
grade = "A";
break;
case (nilai >= 80 && nilai < 90):
grade = "B+";
break;
case (nilai >= 70 && nilai < 80):
grade = "B";
break;
case (nilai >= 60 && nilai < 70):
grade = "C+";
break;
case (nilai >= 50 && nilai < 60):
grade = "C";
break;
case (nilai >= 0 && nilai < 50):
grade = "D";
break;
default:
grade = "Tidak diketahui";
}
document.write("Grade kamu adalah " + grade);
</script>
</body>
</html>
Tampilan awalnya kita harus menginputkan nilai nya. Setelah menginputkan nilai nya, maka otomatis nilai tersebut menjadi grade sesuai dengan yang sudah kita program tadi. Sekarang kita akan membahas codingan nya.
- Pertama saya membuat dua buah variabel. Variabel pertama dengan nama nilai yang berisikan sebuah dialog yang mengharuskan kita untuk menginputkan nilai. Dan variabel kedua bernama grade yang nantinya akan terisi ketika kita sudah menginputkan nilai nya.
var nilai = prompt("Masukkan Nilai");
var grade = "";
- Yang kedua saya menambahkan percabangan nya berupa switch. Kemudian saya menambahkan True karena nilai yang akan dicocokkan berupa Boolean ( bersifat True atau False).
switch(true){
}
- Yang ketiga saya menambahkan case yang isinya adalah sebuah variabel. Variabel tersebut menyatakan nilai lebih besar sama dengan ( >= ) 90 sampai nilai yang menyatakan lebih kecil sama dengan ( <= ) 100 menggunakan operator perbandingan. Jadi jika kita menginputkan nilai dari 90 - 100, akan mendapatkan grade A. Begitu juga seterusnya dengan Grade B+ sampai D. Jangan lupa juga untuk menambahkan break; disetiap case yang kita buat. Fungsi dari break; adalah agar codingan nya berhenti sesuai grade yang sudah di tentukan setelah kita menginputkan nilainya.
case (nilai >= 90 && nilai <= 100):
grade = "A";
break;
case (nilai >= 80 && nilai < 90):
grade = "B+";
break;
case (nilai >= 70 && nilai < 80):
grade = "B";
break;
case (nilai >= 60 && nilai < 70):
grade = "C+";
break;
case (nilai >= 50 && nilai < 60):
grade = "C";
break;
case (nilai >= 0 && nilai < 50):
grade = "D";
break;
- Yang keempat saya menambahkan code default; dengan grade "Tidak Diketahui". Fungsi dari default; ini adalah untuk menampilkan output yang tidak sesuai dengan program. Contohnya saya membatasi input nilai nya sampai 100, jika kita inputkan 101 ataupun nilai yang diatas 100 hasilnya "Tidak Diketahui".
default:
grade = "Tidak diketahui";
- Terakhir saya menampilkan output nya menggunakan tipe data berupastring.
document.write("Grade kamu adalah " + grade);
5. Percabangan dengan Operator Ternary
Percabangan dengan Operator Ternary merupakan jenis lain dari percabangan if/else. Meskipun hampir sama jenis nya, tetap saja memiliki perbedaan diantara keduanya. Perbedaan nya adalah dari penulisan nya. Percabangan dengan Operator Ternary lebih simple atau lebih singkat dalam penulisan syntax nya dibandingkan Percabangan if/else. Berikut ini contoh syntax dalam Percabangan Operator Ternary.
Coba perhatikan codingan dibawah ini.
kondisi ? ekspresiJikaTrue : ekspresiJikaFalse
<html>
<head>
<title> Percabangan dalam Javascript </title>
</head>
<body>
<script>
var pertanyaan = prompt("Apakah Indonesia termasuk negara Asia Tenggara ?");
if(pertanyaan == "benar"){
document.write("Selamat! jawaban anda Benar");
} else {
document.write("Maaf, jawaban anda Salah");
}
</script>
</body>
</html>
Diatas merupakan contoh penulisan menggunakan if/else. Sekarang saya akan mencoba menuliskan codingan nya menggunakan Percabangan Operator Ternary.
<html>
<head>
<title> Percabangan dalam Javascript </title>
</head>
<body>
<script>
var pertanyaan = prompt("Apakah Indonesia termasuk negara Asia Tenggara ?");
var jawaban = (pertanyaan.toUpperCase() == "BENAR") ? "Benar": "Salah";
document.write("Jawaban anda : " + jawaban );
</script>
</body>
</html>
Bagaimana perbandingan diantara kedua percabangan diatas ? Tentu saja lebih singkat menggunakan Operator Ternary. Sekarang kita akan membahas maksud dari codingan diatas.
var pertanyaan = prompt("Apakah Indonesia termasuk negara Asia Tenggara ?");
var jawaban = (pertanyaan.toUpperCase() == "BENAR") ? "Benar": "Salah";
document.write("Jawaban anda : " + jawaban );
Apa fungsi dari toUpperCase ? Fungsi dari toUpperCase() adalah untuk mengubah semua huruf menjadi kapital. Jadi, ketika kita memberikan jawaban menggunakan huruf kapital atau huruf kecil semua, hasilnya tetap sama dan program akan menampilkan hasil Jawaban anda Benar. Jika kita tidak menambahkan toUpperCase, maka program akan memberikan nilai True sesuai dengan jawaban yang sudah diberikan di dalam variabel jawaban
6. Percabangan Bersarang
Percabangan bersarang bisa kita sebut juga sebagai nested if. Mengapa bisa disebut Percabangan Bersarang ? Karena terdapat percabangan di dalam percabangan lainnya. Jika kamu bingung, coba perhatikan codingan dibawah ini
<html>
<head>
<title> Percabangan dalam Javascript </title>
</head>
<body>
<script>
var nilai = prompt("Masukkan Nilai :");
if (nilai >= 80 && nilai <= 100){
if (nilai > 85){
document.write("Nilai kamu sangat bagus");
}else{
document.write("Nilai kamu cukup bagus");
}
} else if (nilai < 80){
document.write("Tingkatkan lagi prestasimu");
} else {
document.write("Maaf, nilai yang kamu masukkan diatas 100");
}
</script>
</body>
</html>
Codingan diatas adalah contoh dari Percabangan Bersarang. Karena di dalam percabangan if, terdapat percabangan lainnya yaitu if dan else. Jadi ketika kita menginputkan nilai diantara 80 sampai 100, maka akan menampilkan Nilai Kamu Cukup Bagus. Namun di dalam nya, terdapat percabangan if lagi yang menyatakan jika diatas nilai 85, maka akan menampilkan Nilai kamu sangat bagus. Kemudian diluar percabangan if, terdapat percabangan else if yang menyatakan jika kita menginputkan nilai dibawah 80 maka akan menampilkan Tingkatkan lagi prestasimu. Terakhir diberikan percabangan else yang dimana ketika kita menginputkan nilai lebih dari 100 maka akan menampilkan Maaf, nilai yang kamu masukkan diatas 100.
Itulah 6 jenis percabangan yang bisa digunakan dalam Javascript. Jika kamu masih bingung dengan artikel yang sudah kita bahas diatas, silahkan bertanya dikolom komentar yang sudah tersedia dibawah ini. Semoga artikel ini bermaanfaat untuk kita semua yang sedang mempelajari Javascript. Sekian dan Terimakasih.
Gabung dalam percakapan