If, If/Else, Else, Switch/Case On java script

September 03, 2019

If, If/Else, Else, Switch/Case On java script

PRAKTIKUM 14

Nama : M.Fadlul Hafiizh

Kelas : XI-RPL 2

Assalamualaikum, selamat datang kembali nihhhh. untuk kaliini saya akan menuliskan sebuah materi menegenai struktur kontrol percabangan pada javascript. seperti apasih struktur percabangan ini? jadi struktur percabangan adalah struktur yang kita buat dengan menyisipkan sebuah pilihan kondisi terhadap system dalam menjalankan suatu program. misalnya sebagai contoh adalah IF. If akan diisi sebuah kondisi dan perintah. misal jika kita isi if suatu kondisi maka kita juga harus membuat perintah selanjutnya untuk dioperasikan oleh system apabila si kondisi tersebut terpenuhi. Ada beberapa contoh struktur percabangan ini, antara lain :

IF :

Percabangan if ini digunakan jika kita hanya memiliki satu pernyaatan yang akan dijalankan dengan syarat tertentu.

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/Case :
sebuah stuktur percabangan yang akan memeriksa suatu variabel, lalu menjalankan perintah-perintah yang sesuai dengan kondisi yang mungkin terjadi untuk variabel tersebut.

Sebagai contoh agar lebih jelas, berikut merupakan hasil kodingan yang dapat kalian pelajari :

Penggunaan If dalam program umur

<!DOCTYPE html>
<html>
<head>
 <title>Buat Kondisi If M.Fadlul Hafiizh XI-RPL 2</title>
 <link rel="stylesheet" type="text/css" href="BuatIf.css"></link>
</head>
<body>
 <p id="cobaan">
<script language="javascript" type="text/javascript">
   var umur;
   umur = prompt("Masukan Umur Anda :");
   umur = parseInt(umur);
   if (umur < 17) {
    alert ("Kamu belum dapat mengikuti pemilu!");
   }
    alert("Kamu bisa ikut pemilu:v");
  </script>
 </p>
</body>
</html>

Hasilnya :

Penggunaan If dalam Olahraga

<!DOCTYPE html>
<html>
<head>
 <title>Buat Kondisi If 3 M.Fadlul afiizh XI-RPL 2</title>
 <link rel="stylesheet" type="text/css" href="BuatIf.css">
</head>
<body>
 <p id="coba">
<script type="text/javascript" language="javascript" type="text/javascript">
   var olahraga;
    olahraga = prompt("Masukan olahraga yang kamu sukai?, Terjun Payung atau sepeda gunung?");
    if (olahraga == "terju payung" || olahraga == "sepeda gunung"){
     alert ("kamu menyukai olahraga ekstrim");
    }
  </script>
 </p>
</body>
</html>

Hasilnya :

If Dalam waktu

<!DOCTYPE html>
<html>
<head>
 <title>Demo If M.Fadlul Hafiizh XI-RPL 2</title>
 <link rel="stylesheet" type="text/css" href="BuatIf.css">
</head>
<body>
 <p>
Akan muncul tulisan "Good day!" jika waktu kurang dari 18:00</p>
<p class="variasi" id="demo">
Good Evening</p>
<script>
   if (new Date().getHours()<18){
    document.getElementById("demo").innerHTML = "Good day!";
   }
  </script>

</body>
</html>

Hasilnya :

If Else

<!DOCTYPE html>
<html>
<head>
 <title>IF + ELSE M.Fadlul Hafiizh XI-RPL 2</title>
 <link rel="stylesheet" type="text/css" href="BuatIf.css">
</head>
<body>
 <p id="demo">
<b>IF</b> Akan memunculkan tulisan "Selamat pagi!"</p>
<p>
Jika pada opsi IF tidak ada maka akan pindah ke <b>ELSE</B> Memunculkan Hello Word<br>Kata yang muncul adalah :</p>
<p id="var">
<script>
   var d = new Date();
   var time = d.getHours();

   if (time<9) {
    document.write("Selamat pagi!");
   }
   else{
    document.write("Hello World");
   }
  </script>
 </p>
</body>
</html>

Hasilnya :

If + ElseIf + Else

<!DOCTYPE html>
<html>
<head>
 <title>IF+ELSE IF+ELSE M.Fadlul Hafiizh XI-RPL 2</title>
 <link rel="stylesheet" type="text/css" href="BuatIf.css">
</head>
<body>
 <p id="cobaan">
Penggunaan <b>Else IF</b> Bertujuan untuk mengganti <b>IF</b> dalam jumlah banyak</p>
<p id="demo">
<script>
  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>
</p>
</body>
</html>

Hasilnya :

Switch Case Pada Metode Pulsa

<!DOCTYPE html>
<html>
<head>
 <title>SWITCH Case M.Fadlul Hafiizh XI-RPL 2</title>
 <link rel="stylesheet" type="text/css" href="BuatIf.css">
</head>
<body>
 <script language="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("Pilihlah sesuai nomor yang ada");
    break;
  }
 </script>

</body>
</html>

Hasilnya :

Switch Case Pada Rumah Makan

<!DOCTYPE html>
<html>
<head>
    <title>Latihan Switch M.Fadlul Hafiizh XI RPL 2</title>
    <link rel="stylesheet" type="text/css" href="BuatIf.css">
</head>
<body>
    <script type="text/javascript" language="javascript">
        alert("MENU MASAKAN PADANG\nSILAHKAN PILIH MENU YANG DIINGINKAN\n\n\nKLIK OK UNTUK MELANJUTKAN");
        var pilihan = prompt("1. Rendang....................Rp14.000\n2. Ikan Balado................Rp13.000\n3. Dendeng Balado.............Rp17.000\n4. Soto Padang................Rp15.0000\n5. Gulai Sapi.................Rp.20.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................Rp13.000");
                break;
            case 3: alert("Menu yang anda pilih : Dendeng Balado.............Rp17.000");
                break;
            case 4: alert("Menu yang anda pilih : Soto Padang................Rp15.000");
                break;
            case 5: alert("Menu yang anda pilih : Gulai Sapi.................Rp20.000");
                break;
            default:
                alert("Menu yang anda pilih : Tidak ada/Silahkan pilih menu yang lain Terimakasih");
                break;
        }
    </script>
</body>
</html>

Hasilnya :

Quiz Penerapan Fungsi Percabangan Dalam Aritmatika

<!DOCTYPE html>
<html>
<head>
    <title>Quiz 14 M.Fadlul Hafiizh XI RPL</title>
    <link rel="stylesheet" type="text/css" href="Quiz14.css">
</head>
<body>
    <script type="text/javascript" language="javascript">
        var aritmatika = prompt("1. Penjumlahan\n2. Pengurangan\n3. Perkalian\n4. Pembagian\n5. Modulus")
        aritmatika = parseInt(aritmatika)
        switch (aritmatika) {
            case 1:{
                var a = prompt("Input Bilangan Pertama");
                a = parseInt(a);
                var b = prompt("Input Bilangan Kedua");
                b = parseInt(b)
                var c = a + b;
                alert("Hasilnya " + a + " + " + b + " = " + c);
            }
                break;
            case 2:{
                var a = prompt("Input Bilangan Pertama");
                a = parseInt(a);
                var b = prompt("Input Bilangan Kedua");
                b = parseInt(b)
                var c = a - b;
                alert("Hasilnya " + a + " - " + b + " = " + c);
            }
                break;
            case 3:{
                var a = prompt("Input Bilangan Pertama");
                a = parseInt(a);
                var b = prompt("Input Bilangan Kedua");
                b = parseInt(b)
                var c = a * b;
                alert("Hasilnya " + a + " x " + b + " = " + c);
            }
                break;
            case 4:{
                var a = prompt("Input Bilangan Pertama");
                a = parseInt(a);
                var b = prompt("Input Bilangan Kedua");
                b = parseInt(b)
                var c = a / b;
                alert("Hasilnya " + a + " : " + b + " = " + c);
            }
                break;
            case 5:{
                var a = prompt("Input Bilangan Pertama");
                a = parseInt(a);
                var b = prompt("Input Bilangan Kedua");
                b = parseInt(b)
                var c = a % b;
                alert("Hasilnya " + a + " % " + b + " = " + c);
            }
            default:
                alert("Pilih Metode Yang Ada...")
                break;
        }
    </script>
</body>
</html>

Hasilnya :

Cascading style sheet yang saya gunakan diatas :

p.variasi{
 text-shadow: 2px 2px 2px green;
 color: grey;
 font-size: 28px;
}
p#var{
 color: red;
 text-shadow: 5px 2px 8px orange;
 font-size: 35px;
}
#demo{
 color: blue;
 text-shadow: 5px 2px 8px orange;
 font-size: 35px;
}

Yapss akhirya... gimana pendapat kalian mengenai beberapa contoh diatas? saran dari saya sendiri untuk kalian yang sedang belajar, lebih baik kalian langsung mempraktekan contoh-contoh diatas agar kalian lebih paham dan setelah kalian mempraktekan beberapa contoh diatas cobalah kalian buat sesuatu dengan menggabungkan beberapa metode yang ada diatas hingga menciptkan sesuatu yang unik. Sekian artikel saya kaliini semoga bermanfaat............

Cari Blog Ini

Tutor Gesit

If, If/Else, Else, Switch/Case On java script

Komentar

Posting Komentar

Postingan Populer

CRUD(Create, read, update, delete) data dalam relasi 2 tabel