Loading...
Beranda
Java

Belajar Percabangan Pada Javascript

 


Untuk mempelajari percabangan pada javascript kita bisa menggunakan kata kunci if dan else atau switch case yang akan kita bahas pada halaman ini.

Dengan menggunakan percabangan memungkinkan kamu untuk menentukan yang mana yang akan di ekseskusi. Percabangan akan mampu membuat program menentukan tindakan sesuai dengan logika/kondisi yang kamu berikan.

Dalam mempelajari javascript terdapat 6 percabangan, berikut pembahasan percabangan yang terdapat di dalam javascript.

1. Percabangan if/else

Percabangan ini memiliki dua blok pilihan, blok pertama ialah kondisi benar dan kedua yaitu else (salah). Untuk lebih jelasnya kamu bisa melihat contoh di bawah ini dan copy kedalam code editor.
<!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>

2. Percabangan if/else/if

Untuk contoh percabangan if/else/if bisa kamu lihat di bawah ini.
<!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>
Save dan kemudian buka di browser untuk melihat hasilnya.

3. Percabangan switch case 

Percabangan ini merupakan bentuk lain dari if/else/if. Untuk strukturnya seperti di bawah ini.
switch(variabel){
    case <value>:
        // blok kode
        break;
    case <value>:
        // blok kode
        break;
    default:
        // blok kode
}
Kamu bisa membuat blok kode case sebanyak yang kamu inginkan di dalam blok switch. Setiap case selalu di akhiri dengan break, khusus untuk defaultnya tidak perlu di akhiri dengan menggunakan break karena terletak di bagian akhir.

Contohnya seperti di bawah ini.
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Percabangan switch/case</title>
</head>
<body>
    <script>

        var jawab = prompt("Kamu beruntung! Silahkan pilih hadiahmu dengan memasukan 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>
Selai cara di atas bisa juga di buat seperti di bawah 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";
}
Pertama kita akan memberikan nilai true kepada switch agar bisa masuk ke dalam blok switch Lalu di dalamnya kita buat kondisi dengan menggunkaan case.  

4. Percabangan Operator Tonery

Percabangan operator tonery merupakan betuk lain dari percabangan if/else, contohnya seperti di bawah ini.
<!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. Operator ternary dapat berperan sebagai if/else contohnya di bawan ini.
var jawaban = (jwb.toUpperCase() == "IYA") ? "Benar": "Salah";
Apabila kondisi (jwb.toUpperCase() == "IYA")—bernilai true, maka nanti isi dari variabel jawaban akan sama dengan "Benar",namun jika bernilai false, maka variabel jawaban akan berisi "Salah".

4. Percabangan Bersarang (nested)

Kamu juga dapat membuat blok percabangan di dalam percabangan. Ini disebut percabangan bersarng 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>

5. Percabangan if

Percabangan if merupakan percabangan satu blok pilihan saat kondisi bernilai benar. Contohnya seperti di bawah ini.
<!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>Terimakasih sudah berbelanja di toko kami</p>");
    </script>
</body>
</html>
Perhatikan pada bagian di bawah ini.
if(totalBelanja > 100000){
    document.write("<h2>Selamat Anda dapat hadiah</h2>");
}
Blok pada program di atas diawali dengan tanda buka kurung kurawal { dan diakhiri dengan tutup kurung kurawal }.

6. Operator Logika

Terakhir ialah percabangan operartor logika atau sering di sebut operator bercabang contohnya seperti di bawah ini.
var username = prompt("Username:");
var password = prompt("Password:");

if(username == "hidayatcoode"){
    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>");
}
Kamu bisa membuatnya lebih sederhana lagi dengan menggunkaan rumus logika AND (&&).
var username = prompt("Username:");
var password = prompt("Password:");

if(username == "petanikode" && password == "kopi"){
    document.write("<h2>Selamat datang pak bos!</h2>");
} else {
    document.write("<p>Password salah, coba lagi!</p>");
}
Namun ini bukan cara terbaik yang kamu lakukan karena tidak dapat melakukan tindakan penngecekan apakah user sudah terdaftar atau belum.
IT Enthusiast

Posting Komentar