Menggunakan Percabangan If Else dan Switch Case di JavaScript

Pembahasan mengenai percabangan ini adalah lanjutan dari seri tutorial belajar JavaScript.

Semoga pembaca sekalian masih semangat untuk menguasai JavaScript. yuk langsung saja mari kita lanjut dengan contoh penerapan percabangan di dalam pemrograman.

Sebuah program identik dengan logika, membuat program berarti menyelesaikan blok logika sesuai dengan kondisi yang ada. Sebagai contoh Jika nilai >= 70 munculkan pemberitahuan “Selamat anda Lulus”. Selanjutnya jika nilai < 70 maka program akan menampilkan pemberitahuan lainnya seperti “Mohon maaf anda belum lulus”.

Dalam pemrograman ini disebut dengan percabangan. Sebuah program bisa saja dibuat tanpa percabangan “Lurus-lurus saja” kita bisa mengenalnya dengan program sekuensial. Bisa juga dibuat bercabang seperti yang akan bahas pada tutorial javascript ini.

Gambaran contoh alur program sekuensial dan percabangan :

Contoh alur program sekuensial dan percabangan
Contoh alur program sekuensial dan percabangan

Sekuensial program alurnya input proses dan output. Sedangkan percabangan alur programnya memiliki kondisi true atau false seperti simbol diatas ditulis dengan simbol “T” dan “F”.

Pengertian Percabangan

Percabangan adalah suatu pernyataan yang dihadapakan pada kondisi blok program lebih dari satu. sebagai contoh kondisi A dan B.

Jika kondisi A terpenuhi maka program akan mengeksekusi blok perintah yang disediakan pada blok tersebut. Jika kondisi A tidak terpenuhi maka program akan mengeksekusi perintah lainnnya. Dalam hal ini jika kondisi B disediakan dan terpenuhi maka blok program yang berada dalam kondisi B akan di eksekusi.

 if(A = true){
        //ini adalah blok program yang akan di eksekusi
    } else{
        //ini adalah blok program yang akan di eksekusi 
        jika A != true
    }

kondisi percabangan jika nilai A dan B ditetapkan

    //contoh assignment untuk nilai A dan B
    A = false
    B = true
    if(A = true){
    //blok program ini tidak akan dieksekusi
    }else if (B = true){
    //ini adalah blok program yang akan di eksekusi
    }else{
    //ini adalah blok program yang akan di eksekusi jika A atau B ditetapkan !=true
    }

Contoh Percabangan Javascript

1. Percabangan IF

Percabangan if memiliki hanya satu blok kode yang dieksekusi berdarka 1 kondisi yang telah terpenuhi. Contoh di bawah ini adalah program mengecek suhu tubuh apakah melebihi dari batasan 37o celcius.

Jika melebihi maka akan muncul alert suhu tubuh anda tinggi:

percabangan-if.html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Percabangan IF</title>
</head>

<body>
    <h2>Program Percabangan JavaScript IF</h2>
    <p><b>Keterangan Suhu Tubuh</b></p>
    <p>Masukkan Suhu Tubuh Anda !.. Program JavaScript ini akan menampilkan kategori suhu tubuh anda</p>
    
    Suhu Tubuh : <input type="text" id="suhu">
    <button onclick="keterangan()">Submit</button>
    <script>

        function keterangan() {
            var suhu = document.getElementById("suhu").value;
            if (suhu > 37) {
                alert("Suhu Tubuh Anda Tinggi");
            }
        }   
    </script>

</body>

</html>

output :

contoh percabangan if di javascript
Contoh percabangan if JavaScript

2. Percabangan IF Else

If Else merupakan percabangan yang lebih lengkap dari if. Meskipun penerapannya sedikit berbeda namun bentuk percabangan if else dapat juga memenuhi output yang diinginkan dari if.

Contoh di bawah ini adalah program percabangan if else untuk mengetahui status kelulusan berdasarka nilai yang diinputkan

percabangan-if-else.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Percabangan IF Else</title>
</head>
<body>
    <h2>Program Percabangan JavaScript IF Else</h2>
    <p><b>Status Kelulusan</b></p>
    <p>Masukkan Nilai Anda !.. Program JavaScript ini akan menampilkan status kelulusan anda</p>
    Nilai : <input type="text" id="nilai">          
        <button onclick="keterangan()">Submit</button>
    <script>
        
        function keterangan() {
            var nilai = document.getElementById("nilai").value;
            if (nilai  >= 70) {
                alert("Selamat Anda Lulus");
            }else{
                alert("Mohon Maaf Anda Belum Lulus");
            }         
            }   
    </script>
    
</body>
</html>

output :

contoh percabangan if else
Contoh percabangan if else JavaScript

3. Percabangan if , else if , else

Percabangan ini merupakan bentuk percabanga yang memungkinkan terjadinya 2 kondisi atau lebih yang akan dieksekusi jika terpenuhi. Jika dari kondisi tersebut tidak terpenuhi maka akan dieksekusi kondisi terakhir “else”.

Contoh percabangan if, else if dan else ini bisa seperti pengelompokkan usia di bawah ini:

percabangan-if-else_if-else.html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Percabangan IF - Else if - else</title>
</head>

<body>
    <h2>Program Percabangan JavaScript If - Else if - Else</h2>
    <p><b>Pengelompokan Usia</b></p>
    <p>Masukkan Usia Anda !.. Program JavaScript ini akan mengelompokkan usia anda</p>

    Usia : <input type="text" id="usia">
    <button onclick="keterangan()">Submit</button>
    <script>

        function keterangan() {
            var usia = document.getElementById("usia").value;
            if (usia <= 5) {
                alert("Usia ini adalah Kelompok Balita");
            } else if (usia >= 5 & usia <= 13) {
                alert("Usia ini adalah Kelompok Anak-anak");
            } else {
                alert("Asia Anda Bukan Kelompok Balita atau Anak-anak")
            }
        }   
    </script>

</body>

</html>

output :

Contoh if, else if dan else
Contoh Percabangan if, else if dan else di JavaScript

4. Percabangan Case Break JavaScript

Case Break memugkinkan kita membuat lebih banyak opsi berdasarkan input yang ada.

Sebagai contoh kita ingin mengelompokkan tingkat keseriusan belajar bahasa pemrogrman JavaScript berdasarkan durasi belajar dalam satu hari.

percabangan-case-break.html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Percabangan Case Break</title>
</head>

<body>
    <h2>Program Percabangan JavaScript Case Break</h2>
    <p><b>Kategori Durasi Belajar JavaScript</b></p>
    <p>Masukkan Durasi Anda !..</p>
    Usia : <input type="text" id="durasi">
    <button onclick="keterangan()">Submit</button>
    <script>

        function keterangan() {
            var durasi = document.getElementById("durasi").value;
            var keterangan;

            switch (durasi) {
                case "30":
                    keterangan = "Santai";
                    break;
                case "60":
                    keterangan = "Biasa";
                    break;
                case "120":
                    keterangan = "Serius";
                    break;

                default:
                    keterangan = "Tidak Ada";
            }
            alert("Durasi belajar JavaScript 1 hari " + durasi + " Menit Kategori - " + keterangan + " -")
        }

    </script>

</body>

</html>

output:

contoh percabangan case break javaScript
Contoh Percabangan Case Break JavaScript

Keterangan yang diperoleh jika durasi belajar JavaScript = 120 Menit adalah “Serius” .

Demikian pembahasan tentang percabangan dan contoh yang bisa dijadikan acuan dalam menyelesaikan operasi logika percabangan di javascirpt.

Tutorial Lanjutan

Macam – macam dan Contoh Perulangan pada JavaScript

Fungsi JavaScript : Pengertian dan Contoh Penggunaan

Leave a comment