Assalamualaikum temen temen...
Hello gengs balik lagi di blog mimin yak, gak ada tamatnya kali ini mimin akan bahas tentang JS lagi yaitu tentang percabangan, oke tak perlu basa basi lagi, inilah yang akan dibahas kali ini gengs cekidoot:
> If
> Else
> Else If
> Switch
> Part bonus
Oke ini dia yang pertama
1. Penggunaan IF
Struktur IF adalah stuktur kode pemograman ‘conditional’ yang akan membuat percabangan di dalam program. Dengan menggunakan struktur IF, kita bisa membuat 2 percabangan program yang akan dieksekusi jika ‘kondisi’ terpenuhi, dan akan menjalankan kode program lain jika ‘kondisi’ tidak terpenuhi.
Percabangan if ini digunakan jika kita hanya memiliki satu pernyaatan yang akan dijalankan dengan syarat tertentu. Contoh IF sebagai berikut :
if (kondisi) {//kode program jika kondisi true}else {//kode program jika kondisi false}Contoh program pertama menggunakan if:
<!DOCTYPE html>
<html>
<head>
<title>Umur</title>
<link rel="stylesheet" href="cssnya.css">
</head>
<body>
<input type="button" onclick="klik()" value="Penasaran yaa!">
<p id="cobaan">
<script>
function klik(){
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>
<html>
<head>
<title>Umur</title>
<link rel="stylesheet" href="cssnya.css">
</head>
<body>
<input type="button" onclick="klik()" value="Penasaran yaa!">
<p id="cobaan">
<script>
function klik(){
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>
Hasilnya:
Nah jadi mimin menganalogikan jika umur lebih dari 17 tahun maka kamu bisa mengikuti pemilu, dan jika kurang dari 17 tahun maka kamu tidak bisa mengikuti pemilu.
Contoh program kedua menggunakan if:
<!DOCTYPE html>
<html>
<head>
<title>Olahraga</title>
<link rel="stylesheet" href="cssnya.css">
</head>
<body>
<input type="button" onclick="klik()" value="Penasaran yaa!">
<p id="cobaan">
<script>
function klik(){
var olahraga;
olaraga = prompt("Masukan olahraga yang kamu sukai? Climbing atau Downhill");
if (olahraga == "Climbing" || olahraga == "Downhill");
{
alert("Kamu menyukai olahraga ekstream");
}
}
</script>
</p>
</body>
</html>
<html>
<head>
<title>Olahraga</title>
<link rel="stylesheet" href="cssnya.css">
</head>
<body>
<input type="button" onclick="klik()" value="Penasaran yaa!">
<p id="cobaan">
<script>
function klik(){
var olahraga;
olaraga = prompt("Masukan olahraga yang kamu sukai? Climbing atau Downhill");
if (olahraga == "Climbing" || olahraga == "Downhill");
{
alert("Kamu menyukai olahraga ekstream");
}
}
</script>
</p>
</body>
</html>
Hasilnya akan menjadi:
Contoh program ketiga menggunakan if:
<!DOCTYPE html>
<html>
<head>
<title>Jam</title>
<link rel="stylesheet" href="cssnya.css">
</head>
<body>
<p id="coba">Akan muncul tulisan "Good day !"<br> Jika waktu kurang dari 18.00</p>
<p id="sore">Good Evening!</p>
<script>
if (new Date().getHours() < 18)
{
document.getElementById("demo").innerHTML = "Good day !";
}
document.getElementById("demo").style.color = "blue";
</script>
</body>
</html>
<html>
<head>
<title>Jam</title>
<link rel="stylesheet" href="cssnya.css">
</head>
<body>
<p id="coba">Akan muncul tulisan "Good day !"<br> Jika waktu kurang dari 18.00</p>
<p id="sore">Good Evening!</p>
<script>
if (new Date().getHours() < 18)
{
document.getElementById("demo").innerHTML = "Good day !";
}
document.getElementById("demo").style.color = "blue";
</script>
</body>
</html>
Hasilnya nih gengs:
Karena mimin nge run program nya sekitar jam 8 malem jadi akan muncul tulisan good evening
2. Penggunaan Else
Struktur IF memiliki percabangan lain yang akan dijalankan jika kondisi IF tidak terpenuhi, yakni dengan menambahkan perintah ELSE. Digunakan untuk mengeksekusi beberapa kode jika kondisi benar dan kode lain jika kondisi salah. Ini dia contoh programnya:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan if else</title>
<link rel="stylesheet" href="cssnya.css">
</head>
<body>
<p id="demo">
<b>IF</b>
Akan muncul 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>
<fieldset>
<script>
var d = new Date()
var time = d.getHours()
if (time < 9)
{
document.write("Selamat pagi !");
}
else
{
document.write("Hello world !");
}
</script>
</fieldset>
</body>
</html>
<html>
<head>
<title>Penggunaan if else</title>
<link rel="stylesheet" href="cssnya.css">
</head>
<body>
<p id="demo">
<b>IF</b>
Akan muncul 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>
<fieldset>
<script>
var d = new Date()
var time = d.getHours()
if (time < 9)
{
document.write("Selamat pagi !");
}
else
{
document.write("Hello world !");
}
</script>
</fieldset>
</body>
</html>
Hasilnya akan jadi :
Nah disini mimin membuat kondisi jika si waktu kurang dari jam 9 maka akan keluar output selamat pagi, jika lebih dari itu maka akan menghasilkan output Hello world.
Contoh program ke 2:
<!DOCTYPE html>
<html>
<head>
<title>If else if</title>
<link rel="stylesheet" href="cssnya.css">
</head>
<body>
<p id="cobaan">Kurang dari jam <b>9.00</b> muncul <b>"Selamat pagi"</b> <br>Jam <b>12-3</b> muncul <b>"Hari yang panas"</b> <br>Selebihnya akan muncul <b>"Hai dunia"</b> </p>
<fieldset>
<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("Hai dunia !");
}
</script>
</fieldset>
</body>
</html>
<html>
<head>
<title>If else if</title>
<link rel="stylesheet" href="cssnya.css">
</head>
<body>
<p id="cobaan">Kurang dari jam <b>9.00</b> muncul <b>"Selamat pagi"</b> <br>Jam <b>12-3</b> muncul <b>"Hari yang panas"</b> <br>Selebihnya akan muncul <b>"Hai dunia"</b> </p>
<fieldset>
<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("Hai dunia !");
}
</script>
</fieldset>
</body>
</html>
Hasilnya akan menjadi:
3. Switch case
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 programnya:
<!DOCTYPE html>
<html>
<head>
<title>Switch case</title>
<link rel="stylesheet" href="cssnya.css">
</head>
<body>
<input type="button" onclick="klik()" value="Penasaran yaa!">
<p id="cobaan">
<script>
function klik(){
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 Rp 5000,00;");
break;
case 2 : alert("Masa aktif kartu anda hingga 20 September 2019");
break;
default:
alert("Pilihlah sesuai nomer yang ada");
break;
}
}
</script>
</p>
</body>
</html>
<html>
<head>
<title>Switch case</title>
<link rel="stylesheet" href="cssnya.css">
</head>
<body>
<input type="button" onclick="klik()" value="Penasaran yaa!">
<p id="cobaan">
<script>
function klik(){
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 Rp 5000,00;");
break;
case 2 : alert("Masa aktif kartu anda hingga 20 September 2019");
break;
default:
alert("Pilihlah sesuai nomer yang ada");
break;
}
}
</script>
</p>
</body>
</html>
Hasilnya:
Nah fungsi dari switch case, yaitu untuk memilih jika mimin memilih satu maka akan tampil info jumlah pulsa mimin
Contoh program ke 2:
<!DOCTYPE html>
<html>
<head>
<title>Latihan switch</title>
<link rel="stylesheet" href="cssnya.css">
</head>
<body>
<input type="button" onclick="klik()" value="Penasaran yaa!">
<p id="cobaan">
<script>
function klik(){
alert("MADANG KUY\nSILAHKAN PILIH MENU YANG DIINGINKAN\n\nKlik ok untuk melanjutkan")
var pilihan = prompt("1. Rendang................Rp10.000\n2. Ikan Gurame............Rp15.000\n3. Dendeng Crispi.........RP12.000\n4. Soto Padang............Rp15.000\n5. Gulai Sapi.............Rp17.000");
pilihan = parseInt(pilihan);
switch(pilihan) {
case 1 : alert("Menu yang anda pilih : Rendang Rp10.000");
break;
case 2 : alert("Menu yang anda pilih : Ikan Gurame Rp15.000");
break;
case 3 : alert("Menu yang anda pilih : Dendeng Crispi RP12.000");
break;
case 4 : alert("Menu yang anda pilih : Soto Padang Rp15.000");
break;
case 5 : alert("Menu yang anda pilih : Gulai Sapi Rp17.000");
break;
default:
alert("Menu yang anda pilih : Tidak ada/Silahkan pilih menu yang lain Terimakasih");
break;
}
}
</script>
</p>
</body>
</html>
<html>
<head>
<title>Latihan switch</title>
<link rel="stylesheet" href="cssnya.css">
</head>
<body>
<input type="button" onclick="klik()" value="Penasaran yaa!">
<p id="cobaan">
<script>
function klik(){
alert("MADANG KUY\nSILAHKAN PILIH MENU YANG DIINGINKAN\n\nKlik ok untuk melanjutkan")
var pilihan = prompt("1. Rendang................Rp10.000\n2. Ikan Gurame............Rp15.000\n3. Dendeng Crispi.........RP12.000\n4. Soto Padang............Rp15.000\n5. Gulai Sapi.............Rp17.000");
pilihan = parseInt(pilihan);
switch(pilihan) {
case 1 : alert("Menu yang anda pilih : Rendang Rp10.000");
break;
case 2 : alert("Menu yang anda pilih : Ikan Gurame Rp15.000");
break;
case 3 : alert("Menu yang anda pilih : Dendeng Crispi RP12.000");
break;
case 4 : alert("Menu yang anda pilih : Soto Padang Rp15.000");
break;
case 5 : alert("Menu yang anda pilih : Gulai Sapi Rp17.000");
break;
default:
alert("Menu yang anda pilih : Tidak ada/Silahkan pilih menu yang lain Terimakasih");
break;
}
}
</script>
</p>
</body>
</html>
Hasilnya gengs:
Ouh iya hampir saja lupa,mimin menambahkan css dalam setiap hasil hasil sebelumnya gengs, tapi dalam satu file ini dia:
body{
color: white;
background-color:#2C2424;
font-family: tw cen mt;
font-size: 30px;
text-align: center;
}
input{
width: 300px;
height: 60px;
font-family: tw cen mt;
font-size: 30px;
border-radius: 10px;
border:solid;
border-color: gray;
color: black;
background-color: #2CB3DF;
}
input:hover {
opacity: 0.8;
font-weight: bold;
background-color: #2CB3DF;
}
#sore,fieldset{
font-size: 40px;
border-radius: 10px;
border:solid;
border-color: gray;
color: black;
background-color: #2CB3DF;
}
color: white;
background-color:#2C2424;
font-family: tw cen mt;
font-size: 30px;
text-align: center;
}
input{
width: 300px;
height: 60px;
font-family: tw cen mt;
font-size: 30px;
border-radius: 10px;
border:solid;
border-color: gray;
color: black;
background-color: #2CB3DF;
}
input:hover {
opacity: 0.8;
font-weight: bold;
background-color: #2CB3DF;
}
#sore,fieldset{
font-size: 40px;
border-radius: 10px;
border:solid;
border-color: gray;
color: black;
background-color: #2CB3DF;
}
4. Part bonus
Nah ini dia hasil karya mimin tentang kalkulator aritmatika menggunakan inputan
Nah mugkin cukup sekian pertemuan kali ini maaf bila banyak typo typo karena mimin hanya manusia biasa
0 Komentar