tutorial JavaScript : Memahami percabangan

Posted by on
Assalamualaikum Semua


      Hallo semua selamat datang kembali. Saya Muhammad Aslam atau panggil saja Mas Lam akan berbagi pengetahuan tentang java script langsung saja tanpa banyak basa basi lagi yu urang belajar java script

Sistem Percabangan terbagi menjadi 4

  1. IF
  2. ELSE
  3. ELSE IF
  4. SWITCH

IF : Percabangan if ini digunakan jika kita hanya memiliki satu pernyaatan yang akan dijalankan dengan syarat tertentu.Jika kondisi benar, maka pernyataan akan dijalankan.
ELSE : Digunakan untuk mengeksekusi beberapa kode jika kondisi benar dan kode lain jika kondisi salah.

ELSE IF: percabangan yang digunakan saat kita memiliki banyak kondisi (lebih dari 2) dan banyak pernyataan (lebih dari 2).
SWITCH: Struktur switch adalah sebuah stuktur percabangan yang akan memeriksa suatu variabel, lalu menjalankan perintah-perintah yang sesuai dengan kondisi yang mungkin terjadi untuk variabel tersebut.

Contoh penggunaan percabangan

contoh 1
<!DOCTYPE html>
<html>
    <head>
        <title>
            M.Aslam.S.R
        </title>
        <link rel="stylesheet" href="BuatIf.css" type="text/css">
    </head>
    <body>
        <p id="demo"><b>IF</b> akan muncul tulisan "selamat pagi!"</p>
        <p>Jika pada opsi IF tidak ada maka akan pindah ke <b>ELSE</b> memunculkan "Hello World"<br>
        kata yang muncul adalah</p>
        <script language="javascript" type="text/javascript">
        var d = new Date()
        var time = d.getHours();
        if(time<9)
        {
            document.write("selamat pagi");
        }
        else
        {
            document.write("Hello World");
        }
        </script>
     
    </body>
</html>

hasilnya


contoh 2
<!DOCTYPE html>
<html>
    <head>
        <title>
            M.Aslam.S.R
        </title>
        <link rel="stylesheet" href="BuatIf.css" type="text/css">
    </head>
    <body>
        <p id="cobaan">Penggunaan <b>ELSE IF</b> bertujuan untuk mengganti <b>IF</b> dalam jumlah banyak</p>
        <script language="javascript" type="text/javascript">
        var d = new Date();
        var time = d.getHours;

        if(time<9)
        {
            document.write("Selamat pagi");
        }
        else if(time >=12 && time<3)
        {
            document.write("Hari yang panas");
        }
        else
        {
            document.write("Hello World");
        }
        </script>
     
    </body>
</html>

hasilnya



contoh 3
<!DOCTYPE html>
<html>
    <head>
        <title>
            M.Aslam.S.R
        </title>
        <link rel="stylesheet" href="BuatIf.css" type="text/css">
    </head>
    <body>
        <p id="cobaan">
            <script language="javascript" type="text/javascript">
                var umur;
                umur = prompt("masukkan umur anda");
                umur = parseInt(umur);
                if(umur<17)
                {
                    alert("Kamu belum dapat ikut pemilu");
                }
                alert("Kamu dapat mengikuti pemilu");
            </script>
        </p>   
    </body>
</html>

hasilnya



contoh 4
<!DOCTYPE html>
<html>
    <head>
        <title>
            M.Aslam.S.R
        </title>
        <link rel="stylesheet" href="BuatIf.css" type="text/css">
    </head>
    <body>
        <p id="cobaan">
            <script language="javascript" type="text/javascript">
            var olahraga;
            olahraga = prompt("masukkan olahraga yang kamu sukai? terjun payung atau sepeda gunung?");
            if(olahraga == "terjun payung" || olahraga == "sepeda gunung");
            {
                alert("Kamu menyukai olahraga ekstrim");
            }
            </script>
        </p>
    </body>
</html>

hasilnya



 contoh 5
<!DOCTYPE html>
<html>
    <head>
        <title>
            M.Aslam.S.R
        </title>
        <link rel="stylesheet" href="BuatIf.css" type="text/css">
    </head>
    <body>
        <p id="demo">Akan muncul tulisan "Good day!" jika waktu kurang dari 18:00</p>
        <script language="javascript" type="text/javascript">
        if(new Date().getHours()<18)
        {
            document.getElementById("demo").innerHTML = "Good day!";
        }
         
        </script>

    </body>
</html>

hasilnya



contoh 6
<!DOCTYPE html>
<html>
    <head>
        <title>
            M.Aslam.S.R
        </title>
        <link rel="stylesheet" href="BuatIf.css" type="text/css">
    </head>
    <body>
        <script language="javascript" type="text/javascript">
        var pilihan = prompt("Pilihan untuk cek pulsa\n1. Informasi pulsa anda\n2. Informasi masa aktif dan masa tenggang anda");
            pilihan= parseInt(pilihan);
            switch(pilihan)
            {
                case 1: alert("Jumlah pulsa anda adalah sembilan belas ribu rupiah");
                break
                case 2: alert("Masa aktif kartu anda hingga 7 Agustus 2019");
                break;
                default:
                alert("Pilihan sesuai nomor yang ada");
                break;
            }
        </script>

    </body>
</html>

hasilnya



contoh 7
<!DOCTYPE html>
<html>
    <head>
        <title>
            M.Aslam.S.R
        </title>
        <link rel="stylesheet" href="BuatIf.css" type="text/css">
    </head>
    <body>
     
        <script language="javascript" type="text/javascript">
        alert("MENU MASAKAN PADANG\n SILAHKAN PILIH MENU YANG DIINGINKAN\n\n\nKlik ok untik melanjutkan")
        var pilihan = prompt("1. Rendang..................Rp14.000\n 2. Ikan Balado......................Rp.13.000\n 3. Dendeng Balado.......................Rp.17.000\n Gulai Paku.............Rp20.000");
            pilihan = parseInt(pilihan);
            switch(pilihan)
            {
                case 1: alert("Menu yang anda pilih : Rendang.................RP14.000");
                break;
                case 2: alert("Menu yang anda pilih : Ikan Balado.......................Rp.13.000");
                break;
                case 3 :alert("Menu yang anda pilih : Dendeng Balado...............Rp17.000");
                break;
                case 4: alert("Menu yang anda pilih : Soto Padang...............Rp.15.000");
                break;
                case 5 : alert("Menu yang anda pilih : Gulai Paku.....................Rp20.000");
                break;
                default:
                alert("Menu yang anda pilih : Tidak ada/Silahkan pilih menu yang lain Terimakasih");
                break;
            }
        </script>

    </body>
</htm>

hasilnya





css BuatIf
p{
    color: burlywood;
    text-shadow: 2px gray;
    text-transform: capitalize;
}


quiz






Comments

Post a Comment