Belajar JavaScript (Part8): Percabangan JavaScript, IF Statement, IF-ELSE, IF-ELSE IF-ELSE dan Switch Statement JavaScript

percabangan javascript

SeniKoding.com - Belajar JavaScript Percabangan JavaScript adalah kondisi percabangan dari baris kode yang digunakan untuk melakukan aksi yang berbeda untuk kondisi yang berbeda pula. Dengan aksi tersebut kita bisa membuat statement dari satu syarat sampai beberapa syarat sekaligus untuk memecahkan suatu hal dari baris kode tersebut.
Ada beberapa tipe percabangan didalam JavaScript, yaitu: Percabangan IF/IF Statement, IF-ELSE Statement, IF-ELSE IF-ELSE Statement dan Switch Statement.

Tutorial Belajar JavaScript Percabangan IF atau IF Statement JavaScript


Kondisi ini digunakan untuk melakukan serangkaian aksi tertentu hanya jika satu kondisi terpenuhi. Jika masih bingung saya berikan contoh kegiatan seperti kehidupan sehari-hari.

Contoh: Jika (IF) saya berumur 18 Tahun, maka saya harus mempunyai KTP.
Struktur kodenya:
if (kondisi) {
    ... Blok kode AKSI jika benar ...
}
Kondisi tersebut merupakan kondisi IF Statement, dengan ada satu syarat yang harus dipenuhi.
Penulisan kode IF Statement JavaScript seperti berikut ini:

<!DOCTYPE html>
<html>
    <head>
        <title>Belajar Percabangan JavaScript</title>
    </head>
    <body>
        <h2>Belajar Kondisi Percabangan JavaScript (IF Statement)</h2>
        <script type="text/javascript">
            var Umur = 18;
            if (Umur > 17) {
                document.write("Saya harus mempunyai KTP");
            }
            document.write(layakSIM);
        </script>
    </body>
</html>

Penjelasan:
Variabel Umur diberi nilai 18 Tahun, kemudian buat kondisi IF dimana jika variabel "Umur" benar lebih besar dari 17, maka syarat diatas terpenuhi dan menampilkan data yang diterapkan.

Hasil browser:

belajar javascript

Tutorial Belajar JavaScript Percabangan IF-ELSE Statement JavaScript


Kondisi ini digunakan untuk melakukan serangkaian aksi tertentu, jika satu kondisi terpenuhi (IF) dan serangkaian aksi yang lain jika kondisinya tidak terpenuhi (Else).

Untuk lebih jelasnya saya contohkan aksi dalam kehidupan sehari-hari ya. Jika (IF) nilai ujian saya lebih besar dari 60, maka saya akan lulus. Dan jika tidak (ELSE), maka saya tidak lulus. Dengan contoh berikut mudah-mudahan bisa membuat semakin lebih paham.
Struktur kodenya:
if (kondisi) {
    ... Blok kode AKSI jika benar ...
}
else {
   ... Blog kode AKSI jika salah ...
}

Dan berikut ini contoh pembuatan kode percabangan IF-Else Statement:

<!DOCTYPE html>
<html>
    <head>
        <title>Belajar Percabangan JavaScript</title>
    </head>
    <body>
        <h2>Belajar Kondisi Percabangan JavaScript (IF-ELSE Statement)</h2>
        <script type="text/javascript">
            var nilai = 70;
            if (nilai > 60) {
                document.write("Selamat Anda lulus");
            }
            else {
                document.write("Maaf Anda tidak lulus")
            }
            document.write(layakSIM);
        </script>
    </body>
</html>

Karena syarat pertama yaitu mempunyai nilai variabel 70 terpenuhi, maka ditampilkan aksi yang pertama.

Hasil browser:

belajar javascript

Tutorial Belajar JavaScript Percabangan IF-ELSE IF-ELSE Statement JavaScript


Statement ini terdiri dari banyak kondisi dengan aksi yang bersesuaian. Jumlah kondisi bisa lebih dari 2 atau bahkan lebih.

Contoh jika diterapkan didalam kehidupan sehari-hari: Jika (IF) nilai saya lebih besar atau sama dengan 80 dan lebih kecil atau sama dengan 100, maka peringkat saya A (aksi), dan jika (ELSE IF) nilai saya lebih besar atau sama dengan 70 dan lebih kecil dari 80, maka peringkat saya B (aksi), dan jika (ELSE IF) nilai saya lebih besar atau sama dengan 60 dan lebih kecil dari 70, maka peringkat saya C (aksi), dan jika semua salah (ELSE), maka peringkat saya D (aksi).
Struktur kodenya:
if (kondisi) {
    ... Blok kode AKSI 1 jika benar ...
}
else if (kondisi) {
   ... Blok kode AKSI 2 benar, jika aksi 1 salah ...
}
else if (kondisi) {
   ... Blok kode AKSI 3 benar, jika aksi 2 salah ...
} else {
   ... Blog kode AKSI ini, jika semua aksi salah ...
}
Dan berikut ini contoh pembuatan kode percabangan IF-Else IF-Else Statement:

<!DOCTYPE html>
<html>
    <head>
        <title>Belajar Percabangan JavaScript</title>
    </head>
    <body>
        <h2>Belajar Kondisi Percabangan JavaScript (IF-ELSE IF-ELSE Statement)</h2>
        <script type="text/javascript">
            var nilai = 60;
            if (nilai >= 80 && nilai <= 100) {
                document.write("Peringkat Anda A");
            }
            else if (nilai >= 70 && nilai < 80) {
                document.write("Peringkat Anda B")
            }
            else if (nilai >= 60 && nilai < 70) {
                document.write("Peringkat Anda C")
            }
            else {
                document.write("Peringkat Anda D")
            }
        </script>
    </body>
</html>

Hasil browser:

belajar javascript
Menghasilkan peringkat C, karena mempunyai variabel nilai 60.

Contoh lain: pada saat pemeriksaan apakah yang mengakses website Anda adalah level Admin atau User biasa.
Kodenya:

<!DOCTYPE html>
<html>
    <head>
        <title>Belajar Percabangan JavaScript</title>
    </head>
    <body>
        <h2>Belajar Kondisi Percabangan JavaScript (IF-ELSE IF-ELSE Statement)</h2>
        <script type="text/javascript">
            var visitor = "User";
            if (visitor == "Admin") {
                document.write("Selamat datang Admin");
            }
            else if (visitor == "User") {
                document.write("Selamat datang User");
            }
            else {
                document.write("Anda dilarang mengakses halaman ini")
            }
        </script>
    </body>
</html>

Hasil browser adalah // Selamat Anda User.

Tutorial Belajar JavaScript Percabangan Switch Statement JavaScript


Percabangan Switch JavaScript mirip dengan percabangan IF-ELSE IF-ELSE Statement, statement ini juga terdiri dari banyak kondisi dengan aksi yang bersesuaian. Jumlah kondisinya bisa 2 atau bahkan lebih, tergantung kondisi yang di inginkan.

Kelebihan dari penggunaan kondisi percabangan Switch dengan "Case" ini adalah eksekusi pemeriksaan kondisi tidak harus satu per satu secara berurutan dari paling atas sampai kebawah seperti kondisi IF - Else If- Else statement. Hal ini akan membuat peforma akan semakin baik dan cepat.
Karena dengan kondisi percabangan Switch, aksi yang sesuai dengan kondisi yang diterapkan akan langsung dipilih walaupun aksi tersebut bukan pada baris pertama kode/aksi. Ini lah spesialnya percabangan Switch.
Struktur kodenya:
switch (kondisi) {
   case x: ..Kode Aksi case1.. break;
   case x: ..Kode Aksi case2.. break;
   case x: ..Kode Aksi case3.. break;
   case x: ..Kode Aksi case4.. break;
}
Sekarang implementasi kode percabangan Switch JavaScript dengan contoh kasus:

<!DOCTYPE html>
<html>
    <head>
        <title>Belajar Percabangan JavaScript</title>
    </head>
    <body>
        <h2>Belajar Kondisi Percabangan SWITCH Statement JavaScript</h2>
        <script type="text/javascript">
            var merkMobil = 3;
            switch (merkMobil) {
                case 1: document.write("Ini mobil Toyota");
                        break;
                case 2: document.write("Ini mobil Daihatsu");
                        break;
                case 3: document.write("Ini mobil Honda");
                        break;
                case 4: document.write("Ini mobil Suzuki");
                        break;
                case 5: document.write("Ini mobil Mitsubishi");
                        break;
            }
        </script>
    </body>
</html>

Dengan contoh kasus percabangan Switch diatas, maka yang akan di eksekusi adalah case 3 yaitu akan berjalan aksi "case 3: document.write("Ini mobil Honda");", karena kondisi yang diterapkan adalah "merkMobil=3". Dan cara eksekusi dari percabangan Switch ini adalah langsung lompat ke case yang sesuai yaitu case 3, dan tidak memperdulikan case lainnya. Sehingga fungsi ini atau cara ini lebih bisa dipakai untuk hal-hal pemrogramman yang sesuai pada kasus Anda.

Penampakan pada browser:
Belajar javascript
Dengan kasus-kasus diatas yang masih sederhana, Anda bisa lebih ber eksperimen dengan latihan sendiri.

Sampai disini Belajar JavaScript (Part8): Percabangan JavaScript, IF Statement, IF-ELSE, IF-ELSE IF-ELSE dan Switch Statement JavaScript, semoga bermanfaat.

- Salam -


Berlangganan Artikel Kami Gratis, masukan Email dan Verifikasi:

0 Response to "Belajar JavaScript (Part8): Percabangan JavaScript, IF Statement, IF-ELSE, IF-ELSE IF-ELSE dan Switch Statement JavaScript"

Post a Comment

* Berkomentar sesuai tema ya gaes..

- Terima Kasih -