Memahami Penerapan Kontrol Percabangan Menggunakan Javascript di HTML

Assalamu'alaikum Wr.Wb
Hay teman - teman, apa kabar nih? Alhamdulillah ya^-^ . aku jarang upload - upload lagi karena emang aku lagi males wkwk, nah dan sekarang alhamdulillah udah dapet materi baru nih tentang JS Kondisi.

Nah disini aku bakalan kasih sedikit materi tentang JS Kondisi ya, disimak dulu materi nya agar nanti pas liat kodingan nya gak terlalu rumit ya hehe.

Sistem percabangan

Sistem Percabangan terbagi menjadi 4

•IF

•ELSE

•ELSE IF

•SWITCH

IF : Percabangan if ini digunakan jika kita hanya memiliki satu pernyaatan yang akan dijalankan dengan syarat tertentu. Contoh IF sebagai berikut :

Jika kondisi benar, maka pernyataan akan dijalankan.

else

ELSE : Digunakan untuk mengeksekusi beberapa kode jika kondisi benar dan kode lain jika kondisi salah.

else - if

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.

Nah sekarang saya akan sedikit share ya inshaallah bermanfaat tentang JS Kondisi, kurang lebih nya silahkan di perbaiki.

A. IF

- HTML

<html>
<head>
<title>Buat Kondisi If Elfara</title>
</head>
<body>
<p id="percobaan">
<script type="text/javascript">
var umur;
umur = prompt("Masukan Umur Anda");
umur = parseInt (umur);
if (umur < 17){
alert("Kamu belum dapat mengikuti pemilu")
}
alert("Kamu dapat mengikuti pemilu");
</script>
</p>
</body>
</html>

Ini hasilnya.

Contoh Lain

- HTML

<!DOCTYPE html>
<html>
<head>
<title>Buat Kondisi If 3 Elfara</title>
</head>
<body>
<p id="cobacoba">
<script type="text/javascript">
var olahraga;
olahraga = prompt ("Masukan 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>

Ini hasilnya.

Contoh Lain

- HTML

<!DOCTYPE html>
<html>
<head>
<title>Demo IF Elfara</title>
<link href="BuaatIfel.css" rel="stylesheet" type="text/css">
</head>
<body>
<p id="waktu"> Akan muncul tulisan "Good Day!" jika waktu kurang dari 18:00</p>
<p id="demo">Good Evening </p>
<script type="text/javascript">
if (new Date().getHours() < 18)
{
Document.getElementById("demo").innerHtml = "Good Day!";
}
</script>
</body>
</html>

- CSS

#waktu{
font-family: arial;
color: pink;
}

#demo{
font-family: sans-serif;
color: orange;
}

Ini hasilnya.

B. IF ELSE

- HTML

<!DOCTYPE html>
<html>
<head>
<title>IF + ELSE</title>
<link href="Buatiflagi.css" rel="stylesheet" type="text/css">
</head>
<body>
<p id="demoaja">
<b>IF</b> akan memunculkan tulisan "Selamat Pagi!"</p>
<p id="kata">Jika pada opsi IF tidak ada maka akan pindah ke <b>ELSE</b> memuculkan "Hello World"<br>
kata yang akan muncul adalah : </p>

<script 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>

- CSS

#demoaja{
color: coral;
font-family: sans-serif;
}
#kata{
color: lavender;
font-family: sans-serif;
}

Ini hasilnya.

Contoh lain.

- HTML

<!DOCTYPE html>
<html>
<head>
<title>IF + ELSE IF + ELSE</title>
</head>
<body>
<p id="cobaan"> Pengguna <b>ELSE IF</b> bertujuan untuk mengganti <b>IF</b> dalam jumlah banyak </p>
<script 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>

Dan ini hasilnya.

C. Switch

- HTML

<!DOCTYPE html>
<html>
<head>
<title>SWITCH CASE</title>
</head>
<body>
<script type="text/javascript">
var pilihan = prompt("Pilihan untuk cek pulsa\n1. Informasi pulsa Anda \n2. Informasi masa aktif dan masa teganggang Anda");
pilihan = parseInt(pilihan);
switch (pilihan) {
case 1 : alert ("Jumlah pulsa anda adalah seratus ribu rupiah");
break;
case 2 : alert("Masa aktif kartu Abda hingga 9 September 2019");
break;

default : alert ("Pilihlah sesuai nomor yang ada");
}
</script>
</body>
</html>

Dan ini hasilnya.

Contoh lain.

- HTML

<!DOCTYPE html>
<html>
<head>
<title>Latihan Switch</title>
</head>
<body>
<script type="text/javascript">
alert("MENU MASAKAN PADANG\n SILAHKAN PILIH MENU YANG DIINGINKAN\n\n\nKLIK ok untuk melanjutkan")
var pilihan = prompt (" 1. Rendang............... Rp14.000\n 2. Ikan Balado............... Rp13.000\n 3. Dendeng Balado...............Rp17.000\n 4. Soto Padang...............Rp15.000\n 5. Gulai Paku...............Rp20.000");

pilihan = parseInt(pilihan);

switch(pilihan) {
case 1 : alert ("Menu yang Anda pilih : Rendang...............Rp15.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 Paku...............Rp20.000");

default:
alert("Menu yang anda pilih : Tidak Ada/Silahkan pilih menu yang lain Terimakasih^-^");

}
</script>
</body>
</html>

Dan in hasilnya.

Nah itu salah satu contoh nya, saya ada quiz untuk menggunakan antara type else, if else, dan switch. Nah tapi saya membuat kurang lebih hanya menampilkan gambar saja, seperti ini...

Penasarn ga? hehe mungkin iya agak jelek sih karena saya juga masih belajar, tapi setidaknya kita sama- sama belajar, saling mengoreksi. Sekian saja dari saya, semoga ilmunya bermanfaat dan bisa dikembangkan lagi,

Wassalamu'alaikum Wr.Wb