Struktur Kontrol Percabangan dalam JavaScript - Praktikum 14

Hallo, Brother and Sister,
Pada kesempatan kali ini saya akan membagikan tutorial(sekaligus tugas sekolah) yang masih berlabel Teknologi. Postingan ini merupakan lanjutan tutorial dari postingan sebelumnya yaitu mengenai JavaScript. Nah, untuk sekarang kita bakal bahas Struktur Kontrol Percabangan dalam JavaScript. Struktur Kontrol Percabangan ini biasanya diesebut dengan pengkondisian yaitu sama seperti bahasa pemrograman lainnya ada 4 yaitu IF, IF ELSE, ELSE, SWITCH CASE. Untuk lebih jelasnya, Langsung saja berikut Codingan dan contohnya :

IF1

<!DOCTYPE html>
<html>
<head>
	<title>Aip Ariyadi - XI RPL 3 - Buat Kondisi If</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 mengikuti pemilu");
			}
			alert("Kamu dapat mengikuti pemilu");
		</script>
	</p>
</body>
</html>

Jika diklik OK

Nah, Codingan ini merupakan contoh pertama dalam Pengkondisian menggunakan IF, struktur umum IF yaitu :
if(Kondisi){
Kode program yang akan dijalankan apabila kondisi benar
}
Disini juga kita menggunakan prompt yang gunanya untuk mengambil inputan dari user dan bisa menambahkan kalimat petunjuknya.

IF2

<!DOCTYPE html>
<html>
<head>
	<title>Aip Ariyadi - XI RPL 3 - Buat Kondisi If 2</title>
	<link rel="stylesheet" href="BuatIf.css" type="text/css">
</head>
<body>
	<p id="coba">
<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>

Jika diklik OK

Nah, ini contoh If yang kedua, dalam menentukan kondisi if maka kita bisa menggunakan lebih dari 1 syarat seperti diatas dengan menggunakan simbol "||" yang artinya atau. bisa juga &&(dan). Disini juga kita menggunakan prompt dan alert.

IF3

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

Nah, ini adalah codingan IF yang ketiga dan menggunakan pengkondisian waktu.(Karena saat saya Screenshoot sebelum jam 18.00 maka yang muncul Good Day!).

IF + ELSE

<!DOCTYPE html>
<html>
<head>
	<title>Aip Ariyadi - XI RPL 3 - IF + ELSE</title>
	<link rel="stylesheet" href="BuatIf.css" type="text/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 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>

Nah, Ini juga sama menggunakan pengkondisian waktu bedanya, ini menggunakan else. Nah struktur umumnya :
if(Kondisi){
Kode program yang akan dijalankan apabila kondisi benar
}
else{
Kode program yang akan dijalankan apabila kondisi tidak benar
}

IF + ELSE IF + ELSE

<!DOCTYPE html>
<html>
<head>
	<title>Aip Ariyadi - XI RPL 3 - IF + ELSE IF + ELSE</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>
		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>

Nah, sama seperti codingan sebelumnya masih dengan pengkondisian waktu dan sekarang kita menggunakan else if maksudnya disini kita dapat menggunakan beberapa kondisi. Struktur umumnya
if(Kondisi){
Kode program yang akan dijalankan apabila kondisi benar
}
else if(Kondisi){
Kode program yang akan dijalankan apabila kondisi pertama tidak benar dan kondisi selanjutnya benar.
}
else{
Kode program yang akan dijalankan apabila kondisi tidak benar
}

Switch Case 1

<!DOCTYPE html>
<html>
<head>
	<title>Aip Ariyadi - XI RPL 3 - SWITCH CASE</title>
	<link rel="stylesheet" href="BuatIf.css" type="text/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 ratus 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>

Jika diklik OK

Nah, Switch case pun sama yaitu untuk pengkondisian. Ini salah satu implementasinya yaitu program yang mirip pengecekan pulsa.

Switch Case 2

<!DOCTYPE html>
<html>
<head>
	<title>Aip Ariyadi - XI RPL 3 - Latihan SWITCH CASE</title>
	<link rel="stylesheet" href="BuatIf.css" type="text/css">
</head>
<body>
	<script language="javascript">
		alert("MENU MASAKAN PADANG\nSILAHKAN PILIH MENU YANG DIINGINKAN\n\n\nKlik ok untuk melanjutkan");
		var	pilihan = prompt("1. Rendang................Rp.14.000\n2. Ikan Balado............Rp.13.000\n3. 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("Menu yang anda pilih : Tidak ada/Silahkan pilih menu yang lain Terimakasih");
						  break; 
			}
	</script>
</body>
</html>

Ini merupakan Program Pemesanan Makanan yang menggunakan Switch Case. Struktur umumya
switch(namavar){
case 1 : kode program apabila value variabel bernilai 1
case 2 : kode program apabila value variabel bernilai 2
...
default : kode program untuk kondisi default/tidak diatur
}
Berikut ini merupakan contoh hasil Program Perhitungan Luas Bangun Datar

Oke segitu saja postingan dari saya untuk kali ini. Mohon maaf bila ada kesalahan, semoga bermanfaat untuk anda. Apabila ada komentar / masukan bisa diisi di kolom komentar. Sampai jumpa di postingan berikutnya dan jika menurut anda Postingan ini bermanfaat bisa diShare ke teman - teman anda.