Percabangan Pada Javascript – Pada artikel sebelumnya kita telah belajar Struktur dasar algoritma, dimana kita sudah membahas mengenai percabangan. Di dalam pemrograman pasti ada struktur percabangan pada program berfungsi untuk menjalankan suatu instruksi berdasarkan logika/kondisi yang yang ditetapkan.
Pada pembahasan kali ini kita akan belajar bentuk-bentuk percabangan di javascript beserta dengan contohnya.
Bentuk Bentuk percabangan didalam javascript
Terdapat 6 Bentuk percabangan didalam javascript yaitu sebagai berikut :
- If
- If Else
- Else IF
- Switch
- Operator Ternary
- Bersarang
Mari kita bahas satu persatu ..
Percabangan if
Percabangan didalam javascript yang pertama adalah Percabangan if. Bentuk percabangan ini merupakan bentuk percabangan yang paling sederhana karena hanya memiliki satu blok atau kondisi yang ditetapkan bernilai benar (true).
Percabangan if hanya akan mengerjakan ketika kondisi terpenuhi, jika tidak terpenuhi maka program tidak akan menjalankan perintah apapun yang di definisikan dalam blok if.
Silahkan perhatikan flowchart berikut ini:
Penjelasan :
Flowchart tersebut dapat kita baca sebagai berikut :
Jika total belanja lebih besar dari Rp 5.000, Maka tampilkan pesan
”Selamat Anda mendapat diskon 30%”
Kalau total belanja kurang dari Rp 5.000 pesannya tidak ditampilkan dan langsung menuju ke pesan
” Selamat belanja di praktekotodidak.com !”
Sekarang kita coba membuat percabangan if dalam program Javascript :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Percabangan if</title>
</head>
<body>
<script>
var totalBelanja = prompt("Masukkan total belanjaan anda ?", 0);
if(totalBelanja > 5000){
document.write("<h2>Selamat Anda mendapat diskon 30% </h2>");
}
document.write("<p>Selamat belanja di praktekotodidak.com !</p>");
</script>
</body>
</html>
Berdasarkan contoh perogram diatas, maka hasilnya adalah sebagai berikut :
Adapun ”blok” pada program diatas adalah bagian ini:
if(totalBelanja > 5000){
document.write("<h2>Selamat Anda mendapat diskon 30% </h2>");
}
Blok program pada Javascript, selalu diawali dengan tanda buka kurung { dan diakhiri dengan tutup kurung kurawal }. Namun, jika di dalam blok hanya terdapat satu baris ekspresi atau statement, maka boleh tidak menggunakan tanda kurungnya.
Percabangan if/else pada javascript
Percabangan if/else merupakan percabangan yang memiliki pernyataan alternatif atau dua blok pilihan. Pilihan pertama untuk kondisi benar, dan pilihan kedua untuk kondisi salah (else).
Silahkan lihat flowchart dibawah ini:
Penjelasan :
Perhatikan arah panah setiap blok if/else !
Jika total belanja lebih besar dari Rp 5.000, Maka pesan akan menampilkan :
”Selamat Anda mendapat diskon 30%”
Namun, jika total belanja kurang dari Rp 5.000, maka pesannya adalah :
” Total belanjaan anda kurang dari Rp.5000. Silahkan tambah belanjaanya ! ”
Sedangkan Pesan ” Selamat belanja di praktekotodidak.com” akan tetap ditampilkan, karena bukan bagian dari blok percabangan if/else.
Untuk lebih jelasnya, kita buat percabangan if/else dalam program javascript :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Percabangan if/else</title>
</head>
<body>
<script>
var totalBelanja = prompt("Masukkan total belanjaan anda ?", 0);
if(totalBelanja > 5000){
document.write("<h2>Selamat Anda mendapat diskon 30% </h2>");
}
else {
document.write("<p>Total belanjaan anda kurang dari Rp.5000. Silahkan tambah belanjaanya !</p>");
}
document.write("<p>Selamat belanja di praktekotodidak.com !</p>");
</script>
</body>
</html>
Berdasarkan contoh perogram diatas, maka hasilnya adalah sebagai berikut :
Percabangan if/else/if pada javascript
Jika pada bentuk Percabangan if/else memiliki dua blok pilihan, maka untuk percabangan if/else/if memiliki lebih dari dua blok pilihan.
Contoh programnya percabangan if/else/if di dalam program javascript adalah sebagai berikut :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Percabangan if/else/if</title>
</head>
<body>
<script>
var totalBelanja = prompt("Masukkan total belanjaan anda ?", 0);
var diskon = "";
if(totalBelanja >= 15000) diskon = "50%"
else if(totalBelanja >= 10000) diskon = "40%"
else if(totalBelanja >= 5000) diskon = "30%"
else {
document.write("<p>Total belanjaan anda kurang dari Rp.5000. Silahkan tambah belanjaanya !</p>");
document.write(`<p>Tidak ada diskon : ${diskon}</p>`);}
document.write(`<p>Diskon anda : ${diskon}</p>`);
document.write("<p>Selamat belanja di praktekotodidak.com !</p>");
</script>
</body>
</html>
Berdasarkan contoh perogram diatas, maka hasilnya adalah sebagai berikut :
Percabangan switch/case pada javascript
Percabangan Switch case merupakan struktur pemilihan yang bekerja dengan cara membandingkan suatu nilai pada setiap case yang ada. Dengan kata lain, Percabangan switch/case bisa diartikan sebagai bentuk lain dari percabangan if/else/if. Pada Percabangan Switch case, kita bisa mermbuat blok kode (case) sebanyak yang diinginkan di dalam blok switch.
Pada <value>, kita bisa isi dengan nilai yang nanti akan dibandingkan dengan varabel. Setiap case harus diakhiri dengan break, hal ini bertujuan agar program berhenti mengecek case berikutnya saat sebuah case terpenuhi. Lain halnya jika untuk default, kita tidak perlu mengakhiri dengan ”break” karena sudah terletak di bagian akhir.
Contoh program Percabangan Switch case di dalam program javascript adalah sebagai berikut :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Percabangan switch/case</title>
</head>
<body>
<script>
var jawab = prompt("Masukan angka 1 sampai 3");
var hadiah = "";
switch(jawab){
case "1":
hadiah = "Uang Rp.50.000";
break;
case "2":
hadiah = "rokok 1 bungkus";
break;
case "3":
hadiah = "1 unit laptop";
break;
default:
document.write("<p>anda salah pilih</p>");
}
if(hadiah === ""){
document.write("<p>silahkan coba lagi</p>");
} else {
document.write("<h2>Selamat anda mendapatkan " + hadiah + "</h2>");
}
</script>
</body>
</html>
Berdasarkan contoh perogram diatas, maka hasilnya adalah sebagai berikut :
Percabangan Operator Ternary pada javascript
Percabangan menggunakan operator ternary merupakan bentuk lain dari percabangan if/else. Javascript lebih memudahkan kita jika ingin melakukan pemberian nilai pada variabel berdasakan suatu kondisi.
Contoh programnya adalah sebagai berikut :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Percabangan Ternary</title>
</head>
<body>
<script>
var jwb = prompt("Apakah indonesia itu bagian dari eropa ? jika benar ketik (1) ");
var jawaban = (jwb.toUpperCase() == "1") ? "Benar": "Salah";
document.write(`Jawaban anda: <b>${jawaban}</b>`);
</script>
</body>
</html>
Penjelasan :
var jawaban = (jwb.toUpperCase() == “1”) ? “Benar”: “Salah”;
Apabila kondisi yang ada di dalam kurung—(jwb.toUpperCase() == “1”)—bernilai true, maka nanti isi dari variabel jawaban akan sama dengan “Benar”.
Tapi jikabernilai false, maka variabel jawaban akan berisi “Salah”.
Berdasarkan contoh perogram diatas, maka hasilnya adalah sebagai berikut :
Percabangan Bersarang (Nested)
Bentuk percabangan pada javascript yang terakhir adalah nested if atau biasa disebut dengan percabangan bersarang. Percabangan ini merupakan bentuk yang lebih kompleks dimana terdapat percabangan di dalam percabangan lain. Dengan kata lain, kita juga bisa membuat blok percabangan di dalam percabangan.
Contoh programnya adalah sebagai berikut :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Percabangan Nested</title>
</head>
<body>
<script>
var username = prompt("Username:");
var password = prompt("Password:");
if(username == "praktekotodidak"){
if(password == "1234"){
document.write("<h2>Selamat datang di praktekotodidak.com</h2>");
} else {
document.write("<p>anda belum memasukkan password dengan benar!</p>");
}
} else {
document.write("<p>Anda belum terdaftar!</p>");
}
</script>
</body>
</html>
Berdasarkan contoh perogram diatas, maka hasilnya adalah sebagai berikut :
Begitulah bentuk-bentuk percabangan yang ada di javascript beserta dengan contohnya. dengan menggunakan percabangan, kita bisa menjalankan suatu instruksi berdasarkan logika/kondisi yang yang ditetapkan. Baca juga artikel selanjutnya yaitu Belajar Javascript #7 perulangan dalam javascript
