Percabangan Pada Javascript



Assalamualaikum, pada kesempatan kali ini saya akan menjelaskan materi Percabangan Pada Javascript. Sistem Percabangan terbagi menjadi 4 yaitu : IF, ELSE, ELSE IF, SWITCH.

1. IF

    Percabangan ini digunakan jika hanya memilki  satu pernyataan atau kondisi yang akan dijalankan  dengan syarat tertentu. Contoh :

if ( kondisi ) {
    program ini akan dijalankan jika kondisi terpenuhi 
}

Jika kondisi terpenuhi, maka pernyataan  akan dijalankan.

2. ELSE

    Percabangan ini digunakan untuk mengeksekusi beberapa kode jika kondisi benar dan kode lain jika kondisi salah. Contoh :

if ( kondisi ) {
    kode program
}
else {
     kode program jika kondisi di atas tidak terpenuhi
}

 3. ELSE IF

    Percabangan ini digunakan saat kita memilki banyak kondisi (lebih dari 2) dan banyak pernyataan  (lebih dari 2) . Contoh :

if ( kondisi 1 ) {
    kode program jika kondisi  1 terpenuhi
}
else if ( kondisi 2 ) {
    kode program jika kondisi 2 terpenuhi
}
else if ( kondisi 3 ) {
    kode program jika kondisi 3 terpenuhi
}
else {
     kode program jika kondisi di atas tidak terpenuhi
}

 4. 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 :

 switch ( variable ) {
           case nilai1 : Kode program akan dijalankan jika nilai variable sama dengan nilai1;
           break;
           case nilaiN : Kode program akan dijalankan jika nilai variable sama dengan nilaiN;
           break;
           default : Kode program jika nilai variable tidak sesuai;
           break;
}

 Di dalam Javascript sama dengan bahasa pemograman lainnya dimana operator itu digunakan untuk mendeskripsikan kondisi. 

 Untuk Operator Pembading terdiri dari :
> (lebih dari)
< (kurang dari)
= (sama dengan)

 Untuk Operator Logika terdiri dari :
&& (AND)
| | (OR)
! (NOT)

 Untuk Operator Aritmatika terdiri dari :
+ (tambah)
- (kurang)
* (kali)
/ (bagi)
% (modulus)

 Dalam Javascript untuk menginput menggunakan PROMPT.

 Implementasi

 1. if1Umur.html 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Muhammad Fahru Rozi XI RPL 2</title>
</head>
<body>
<script language "javascript" type="text/javascript">
var umur ;
umur = prompt ("masukkan umur anda");
umur = parseInt (umur) ;
if (umur< 17) {
alert ("Kamu belum dapat mengikuti pemilu");
}
alert ("Kamu dapat mengikuti pemilu")
</script>
</body>
</html>

Hasilnya :
Mengisi kurang dari 17 akan menghasilkan



Mengisi lebih dari atau sama dengan 17 akan menghasilakan



Karena ada if maka ada dua kemungkinan dalam program seperti di atas. Untuk Menginput di dalam javascript menggunakan "prompt".

2. if2Olahraga.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Muhammad Fahru XI RPL 2</title>
</head>
<body>
<script>
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>
</body>
</html>

Hasilnya :



Jika mengisi terjun payung atau sepeda gunung hasilnya akan seperti di atas, namun jika mengisi selain yang dutentukanm program akan berhenti.

3. if3Jam.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Muhammad Fahru XI RPL 2</title>
</head>
<body>
<p>Akan Muncul tulisan "Good Day!" jika waktu kurang dari 18:00</p>
<p id="demo">Good Evening !</p>
<script>
if(new Date(). getHours() < 18){
document.getElementById("demo").innerHTML = "Good Day !";
}
</script>
</body>
</html>

Hasilnya

4. IF + ELSE.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Muhammad Fahru Rozi XI RPL 2</title>
</head>
<body>
<p><b>IF</b> akan muncul tulisan "Selamat Pagi ! jika waktu kurang dari jam 9"</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>
var d = new Date();
var time = d.getHours();

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

Hasilnya


5. IF + ELSE IF + ELSE.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Muhammad Fahru Rozi XI RPL 2</title>
</head>
<body>
<p id="coba">Penggunaan <b>ELSE IF</b> bertujuan untuk mengganti <b>IF</b> dalam jumlah banyak</p>
<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>
</body>
</html>

Hasilnya

6. SwitchCase1-Pulsa.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Muhammad Fahru XI RPL 2</title>
</head>
<body>
<script>
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 adlah sembilan belas ribu rupiah");
break;

case 2: alert("Masa Aktif Kartu Anda hingga 7 Desember 2019");
break;

default: alert("Pilihlah Sesuai Nomor Yang Ada");
break;
}
</script>
</body>
</html>

Hasilnya


Jika Menginput 1 menghasilkan :



Jika Menginput 2 menghasilkan :


7.  SwitchCase2-RMPadang.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Muhammad Fahru Rozi XI RPL 2</title>
</head>
<body>
<script>
alert("Menu Masukan Padang\n Silahkan Pilih Menu Yang Diinginkann\n\n\nKlik 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\n 4. Soto Padang................Rp.15.000\n 5. Gulai..........................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................Rp.20.000");
break;
default : alert("Menu yang anda pilih : Tidak ada / Silahkan Pilih Menu yang Lain Terima Kasih");
break;
}
</script>
</body>
</html>

Hasilnya


Disini Saya menginput salah satu opsi dan  hasilnya :



8. Quiz.html

Setelah Mempelajari materi di atas seperti biasa kita akan melakukan quiz atau menerapkan materi yang kita pelajari di atas . Disini saya membuat Operasi Aritmatika menggunakan Javascript yang terdiri dari tambah, kurang, kali, bagi, modulus. Saya menggunakan SWITCH , IF, ELSE IF, ELSE Contoh Programnya ( saya hanya menampilkan satu opsi yaitu perkalian , agar tidak terlalu panjang untuk penjelasan blog kali ini ) seperti di bawah. Sengaja saya tidak memberikan kodingannya agar kalian bisa mengasah diri kalian untuk membuat program seperti di bawah.








Disini ada 2 opsi jika ingin menjawab tekan 1 , jika tidak tekan 0. Kita coba input 1 untuk menjawab maka hasilnya seperti di bawah 



Jika Jawaban Benar akan tampil alert "Jawaban Benar", Jika salah akan tampil seperti di bawah



Disini ada 2 opsi jika ingin menjawab tekan 1 , jika tidak tekan 0. Kita coba input 0 untuk tidak menjawab maka program akan langsung memberikan hasilnya, seperti di bawah 


Sekian ilmu yang dapat saya bagikan semoga bermanfaat dan untuk dipelajari dengan baik , wassalamualaikum