Pemrograman Web - JavaScript Percabangan

-

Yasfa Zamzami 
XI RPL 1
Assalamualaikum wr.wb
Pada kesempatan kali ini kita akan belajar mengenai Percabangan pada JavaScript.

Apa itu percabangan? Percabangan itu keadaan ketika Program yang kita buat memilih pilihan tertentu sehingga hasilnya bisa bercabang.

Lieur?
Intinya mah percabangan itu  Kode dalam { } yang bakal dijalanin kalau Syarat tertentu dipenuhi.

 Misalnya gini:

Kalau Hujan -- {Bawa Payung}

Kalau Sakit  -- {Minum Obat}


Kalau Gender Pria -- {Jadi Suami}
Selain itu jika, Gender Wanita -- {Jadi Istri}
Selainya -- {Jadi Waria}


Dalam Percabangan di JavaScript kita bisa menggunakan If, Else if, Else, dan Switch Case.


IF
If cocok digunakan ketika kita punya 1 kondisi yang harus dipenuhi. 

Untuk penulisanya:
If (kondisi){
tindakan
}

 misal

 if (hujan == true){
alert("Bawa Payung atuh!");
}
Contoh Kodingan

 

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>Buat Kondisi If</title>
 <link rel="stylesheet" href="">
</head>
<body>
 <p id="cobaan"></p>

<script type="text/javascript">
var umur;
umur = prompt("Masukan Umur anda");
umur = parseInt(umur);

if (umur < 17){
alert("Kamu belum bisa mengikuti Pemilu");
} 
else {
alert("Kamu bisa ikut Pemilu");
}
</script>
 
</body>
</html>



Hasilnya





Bisa dilihat, dengan If, maka Jika umur diatas 17 tahun akan muncul Pesan "Kamu bisa ikut Pemilu"

atau contoh lainya:


<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>Buat Kondisi If3</title>
 <link rel="stylesheet" href="">
</head>
<body>
 <p id="cobaan"></p>

<script type="text/javascript">
var olahraga;
olahraga = prompt("Suka Olahraga Apa?");
if (olahraga == "Terjun Payung" || olahraga == "Sepeda Gunung")
{alert("Kamu pecinta Olahraga Ekstrim");}
else {alert("Okesip");}
</script>
 
</body>
</html>


berikut hasilnya




Jika kita memasukan Input "Terjun Payung" atau "Sepeda Gunung" maka akan muncul pesan "Kamu Pecinta Olahraga Ekstrim" selain itu akan muncul pesan "Okesip"


Lalu ada juga contoh seperti ini:


<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>Demo If</title>
 <link rel="stylesheet" href="">
</head>
<body>
 <p>Bakal muncul Teks "Semangat KK" kalau Jam < 18:00</p>
 <p id="demo">Udah Malem</p>

<script type="text/javascript">
if (new Date().getHours() < 18){
 document.getElementById("demo").innerHTML = "Semangat KK"; 
}
</script>
 
</body>
</html>

Dan beginilah hasilnya:



Dari Kodingan itu Normalnya akan muncul teks "Udah Malem".
Tetapi jika Jam dibawah 18:00 (Jam 6) maka akan muncul Teks "Semangat KK"

Else

Kodingan dalam Else akan dijalankan ketika Syarat dari semua If dan Else If tidak terpenuhi.


Contoh Kodingan: 


<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>Demo If</title>
 <link rel="stylesheet" href="">
</head>
<body>
 <p><b>IF</b> Bakal memunculkan tulisan "Sarekeun weh lur jam sakieu mah" jika kondisi pertama tidak dijalankan maka lanjut ke Kondisi ke 2 (Else)</p>
 

<script type="text/javascript">
var d = new Date();
var time = d.getHours();

if (time < 10){
 document.write("Sarekeun weh lur jam sakieu mah")
}

else {
 document.write("Belajar Gan")
}
</script>
 
</body>
</html>

Dan Hasilnya adalah:


Normalnya bakal muncul teks "Sarekeun weh Lur jam sakieu mah" jika waktu kurang dari Jam 10 Pagi (Hadeeuh.. Jangan dicontoh...). Tapi karena tidak terpenuhi maka akan dijalankan Kondisi Else yang menampilkan "Belajar Gan"

Else If

Kodingan dalam Else If akan dijalankan jika Syarat / Kondisi dalam If tidak terpenuhi. 
Contoh Kodinganya:



<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>IF + ELSE IF + ELSE</title>
 <link rel="stylesheet" href="">
</head>
<body>
 <p>Pengunaan <b>ELSE IF</b> digunakan untuk menggantikan pengunaan <b>IF</b> dalam jumlah banyak</p>
 

<script type="text/javascript">
var d = new Date();
var time = d.getHours();

if (time < 9){
 document.write("Sarekeun weh lur jam sakieu mah");
}

else if(time >= 12 && time <15) {
 document.write("Makan Es mantep nih");
}
else {
 document.write("Hai");
}
</script>
 
</body>
</html>



Dalam Kodingan diatas Jika Jam dibawah 9 maka muncul teks "Sarekeun". Selain itu Jika Jam diatas 12 Siang dan dibawah 15 (3 Sore) maka muncul Teks "Makan Es mantep nih". Selainya maka Else akan dijalankan dan menampilkan "Hai"


Switch Case

Agak berbeda dengan If dan Saudara - saudaranya, Switch Case ini Konsepnya sama, bedanya sifat kondisinya harus lebih pasti. Dan dalam Switch Case default yang fungsinya sama saja seperti Else dalam If dan Saudara - saudaranya

Misal

Switch (variabel){
case 1: Aksi 1;
            break;
case 2: Aksi 2;
            break;
case 3: Aksi 3;
            break;
default: Aksi default;
            break;
}

Contoh Kodingan:



<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>Switch Case</title>
 <link rel="stylesheet" href="">
</head>
<body>
<script type="text/javascript">
var pilihan = prompt("Pilihan untuk Cek Pulsa\n 1. Informasi Pulsa anda\n 2. Informasi masa Aktif dan masa tenggang anda");
pilihan = parseInt(pilihan);
switch(pilihan){
 case 1: alert("Jumlah Pulsa anda adalah Rp.69.3333");
         break;
 case 2: alert("Masa Aktif Kartu anda sampai akhir hayat");
         break;
 default: alert("Sepertinya anda tidak bisa baca");
          break;
}
</script>
 
</body>
</html>





Contohnya seperti diatas Jika pilih 1 maka akan menunjunkan Jumlah Pulsa (Ceritanya), Jika pilih 2 maka menunjukan Masa Aktif Kartu (Ceritanya), Dan Jika pilih opsi lain maka muncul teks yang disimpan di default

ada juga Contoh lain seperti ini:



<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>Latihan Switch Case</title>
 <link rel="stylesheet" href="">
</head>
<body>
<script type="text/javascript">
alert("MENU MASAKAN PADANG \n Silahkan pilih menu yang diinginkan \n\n Klik OK untuk melanjutkan");
var pilihan = prompt("1.Rendang.....................Rp.14.000\n 2.Ikan Balado.....................Rp.13.000\n 3.Dendeng Balado.....................Rp.17.000\n4. Soto Padang.....................Rp.15.000\n5.Gulai Paku.....................Rp.20.000");

pilihan = parseInt(pilihan);
switch(pilihan){
 case 1: alert("Menu yang anda pilih: Rendang.....................Rp.14.000 ");
         break;
 case 2: alert("Menu yang anda pilih: Ikan Balado.....................Rp.13.000");
         break;
 case 3: alert("Menu yang anda pilih: Dendeng Balado.....................Rp.17.000");
          break;
 case 4: alert("Menu yang anda pilih: Soto Padang.....................Rp.15.000");
          break;
 case 5: alert("Menu yang anda pilih: Gulai Paku.....................Rp.20.000");
          break;
 default: alert('Sayangnya "Otak" telah berhenti bekerja');
          break;
}
</script>
 
</body>
</html>






Di Kodingan tersebut kita bisa memilih 1 piliha Lalu Harga yang sesuai akan diproses

Selanjutnya kita bisa coba membuat Kodingan Sendiri

Disini saya membuat Kodingan Kalkulator Sendiri, Misal:







Terimakasih sudah membaca
Wassalamualaikum wr.wb

Komentar

Posting Komentar

Postingan populer dari blog ini

Analisis Web - Code Wars

-
Gambar
Yasfa Zamzami - XI RPL 1 Assalamualaikum Wr.wb Pada Artikel kali ini kita akan melakukan sesuatu yang sedikit berbeda dengan Artikel yang lain. Dalam Artikel lain, Biasanya kita belajar Ngoding . Namun pada Artikel kali ini kita akan Menganalisis Salah Satu Situs E - Learning yang ada di Internet disini kita akan Menganalisis Situs Code Wars Apa itu Code Wars? Jadi, Code Wars adalah Website E Learning (Pembelajaran Online) yang memberikan beberapa Latihan atau Tantangan yang bisa kita ikuti untuk menguji Skill kita. Code Wars adalah situs Pembelajaran Koding yang menggunakan tema "Bela Diri" Dalam Code Wars Codewarrior (User) memiliki Level dari 7 kyu sampai 2 Dam (Urutan : 7 kyu, 6 kyu, 5 kyu, 4 kyu, ..... , 1 dam, 2 dam) Untuk meningkatkan Peringkat  Codewarrior  harus mendapatkan Honor dengan cara menyelesaikan Kata.  Kata? apa itu? susunan Huruf yang menyusun Kalimat? Bukan, bukan itu, Kata disini diambil dari Istilah Bela Diri yang bera
Baca selengkapnya

Pemrograman Web - PBO dalam JavaScript

-
Assalamualaikum Pada Artikel kali ini kita akan belajar tentang PBO sederhana dalam JavaScript Dalam PBO kita akan banyak menggunakan Fungsi jadi saya sarankan untuk membaca Artikel sebelumnya tentang Fungsi pada JavaScript Definisi PBO Apa itu PBO? PBO (Pemrograman berbasis Objek) atau bahasa keren nya OOP (Object Oriented Programming) adalah cara ngoding yang berfokus pada Objek. Terus kalau Objek apa? Objek itu sendiri adalah sekumpulan Variabel , Fungsi , dan Prosedur, yang disatukan dalam 1 Class lalu diperlakukan layaknya Objek di dunia Nyata. Misalnya kita mau buat Objek Nyamuk. Kita tentuin Sifat dari Nyamuk itu apa aja terus jadiin jadi Variabel. Lalu setelahnya, kita tentuin Tindakan yang bisa dilakukan nyamuk itu apa aja terus jadiin Fungsi atau Prosedur. Misalnya gini nih: Objek : Nyamuk  Variabel: - Usia - Kecepatan Terbang - Darah yang dihisap Fungsi / Prosedur: - Terbang -  Menghisap Darah PBO dalam JavaScript Barusan itu sedikit gambara
Baca selengkapnya

Pemrograman Web - JavaScript Loop & Fungsi

-
Assalamualaikum wr.wb Pada Artikel kali ini saya akan membahas tentang Looping atau Pengulangan dalam JavaScript. Apa itu Looping? Yaa...  Looping itu pengulangan. kumpulan Kode dalam tanda {} akan dijalankan terus menerus selama Kondisi / Syarat terpenuhi. Misal : (Selama belum sampai tujuan) { Jalan } (Selama belum berhasil) {Usaha } Untuk melakukan Looping dalam JavaScript digunakan While, Do While, dan, For. While While digunakan untuk melakukan perintah tertentu secara berulang selama Kondisi / Syarat terpenuhi. Penulisanya: while (kondisi) { //Kode yang ingin dijalankan }  Contohnya: Loop Teks See the Pen WhileLoop by Yasfa Zamzami ( @Yasfa ) on CodePen . Bisa kita lihat dari Kodingan diatas bahwa perintah yang berada didalam { } diulangi terus selama Syarat x < 5 terpenuhi  Do While Do While nggak terlalu beda sama While. Cuma ada 2 perbedaan. Pertama, untuk Do While perintah di dalem { } dijalanin dulu baru Syaratnya di Cek (Kalau While s
Baca selengkapnya