Pengkodisian Dalam Javascript (Pertemuan 14)

Assalamu'alaikum Wr. Wb.

Hello Guys, bertemu lagi dengan saya Salman Fauzan di postingan terbaru ini. Pembahasan kita kali ini masih seputar Javascript. Sekarang, kita akan membahas mengenai pengkondisian didalam Javascript. Langsung saja kita mulai pembahasan kali ini.

1.Kondisi If
Struktur umum yang biasa digunakan dalam kondisi if, yaitu :
if(Kondisi){
Kode program yang akan dijalankan jika kondisi benar
}
Kita dapat memasukan inputan dengan menggunakan prompt.
Untuk lebih jelasnya kalian dapat melihat Contoh - Contoh dibawah ini :

Contoh 1

<html>
 <head>
  <title> Salman Fauzan Fahri Aulia - XI-RPL 3 - Buat Kondisi If</title>
   <link href = "Kondisi.css" rel = "stylesheet" 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>

Dari gambar diatas, ketika kita mengisi didalam kolom tersebut, ketika kita menekan Enter / tombol OK, maka akan otomatis memicu perintah IF untuk dijalankan. Kondisi diatas menunjukan bahwa, ketika umur kita > 17. maka akan memunculkan alert Kamu dapat mengikuti pemilu

Contoh 2

<html>
 <head>
  <title> Salman Fauzan Fahri Aulia - XI-RPL 3 - Buat Kondisi If 2</title>
   <link href = "Kondisi.css" rel = "stylesheet" type = "text/css">
 </head>
  <body>
   <p id = "cobaan">
<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>

Dari gambar diatas, ketika kita mengisi didalam kolom tersebut, ketika kita menekan Enter / tombol OK, maka akan otomatis memicu perintah IF untuk dijalankan. Kondisi diatas menunjukan bahwa, ketika kita mengisi terjun payung / sepeda gunung, maka akan memunculkan alert Kamu menyukai olahraga ekstrim

Contoh 3

<html>
 <head>
  <title> Salman Fauzan Fahri Aulia - XI-RPL 3 - Demo If </title>
   <link href = "Kondisi.css" rel = "stylesheet" type = "text/css">
 </head>
  <body>
   <p>
Akan muncul tulisan "Good Days!" jika waktu kurang dari 18.00 </p>
<p id = "cobaan">
Good Evening ! </p>
<script>
     if (new Date().getHours() < 18)
     { 
      document.getElementById("cobaan").innerHTML = "Good Days!" ;
     }
    </script>
  </body>
</html>

Kondisi diatas menunjukan bahwa, ketika waktu kurang dari 18.00 maka akan muncul tulisan Good Days!

2. Kondisi If Else
Struktur umum yang biasa digunakan dalam kondisi If Else, yaitu :
if(Kondisi){
Kode program yang akan dijalankan jika kondisi benar
}
else{
Kode program yang akan dijalankan jika kondisi salah
}

<html>
 <head>
  <title> Salman Fauzan Fahri Aulia - XI-RPL 3 - If + Else </title>
   <link href = "Kondisi.css" rel = "stylesheet" type = "text/css">
 </head>
  <body>
   <p id = "cobaan">
<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 < 0)
     {
      document.write("Selamat Pagi !");
     }
    else
     {
      document.write("Hello World");
     }
   </script>
  </body>
</html>

Kondisi diatas menunjukan bahwa, ketika waktu kurang dari jam 9, maka akan muncul tulisan Selamat Pagi, jika tidak maka akan muncul tulisan Hello World

3. Kondisi If + Else If + Else
Struktur umum yang biasa digunakan dalam kondisi If + Else if + Else, yaitu :
if(Kondisi){
Kode program yang akan dijalankan jika kondisi benar
}
else if(Kondisi){
Kode program yang akan dijalankan jika kondisi pertama salah dan kondisi selanjutnya benar.
}
else{
Kode program yang akan dijalankan jika kondisi salah
}

<html>
 <head>
  <title> Salman Fauzan Fahri Aulia - XI-RPL 3 - If + Else if + Else</title>
   <link href = "Kondisi.css" rel = "stylesheet" 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>

Kondisi diatas menunjukan bahwa, ketika waktu kurang dari jam 9, maka akan muncul tulisan Selamat Pagi, jika lebih dari jam 12 dan kurang dari jam 3, maka akan muncul tulisan Hari yang Panas, jika tidak maka akan muncul tulisan Hello World

4. Switch Case
Struktur umum yang biasa digunakan dalam kondisi Switch Case, yaiitu :
switch(namavar){
case 1 : kode program jika isi variabel yang diinputkan adalah 1
case 2 : kode program jika isi variabel yang diinputkan adalah 2
...
default : kode program untuk kondisi default/tidak diatur
}

Contoh 1

<html>
 <head>
  <title> Salman Fauzan Fahri Aulia - XI-RPL 3 - Switch Case </title>
 </head>
  <body>
   <script language = "javascript" type = "text/javascript">
    var pilihan = prompt("Pilihan untuk cek pulsa \n1. Informasi pulsa pada \n2. Informasi masa aktif dan masa tenggang anda");
     pilihan = parseInt(pilihan);
    switch(pilihan) {
       case 1 : alert("Jumlah pulsa anda adalah sembilan belas 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>

Dari gambar diatas, ketika kita memilih pilihan yang pertama, maka akan muncul alert Jumlah pulsa anda adalah sembilan belas ribu rupiah, jika kita memilih pilihan kedua, maka akan muncul alert "Masa aktif kartu anda hingga 7 Agustus 2019, jika kita tidak memilih pilihan diatas, maka akan muncul alert Pilihlah sesuai nomor yang ada.

Contoh 2

<html>
 <head>
  <title> Salman Fauzan Fahri Aulia - XI-RPL 3 - Latihan Switch </title>
 <body>
  <script language = "javascript">
   alert("MENU MASAKAN PADANG\N SILAHKAN PILIH MENU YANG DIINGINKAN\n\n\nKlik ok ,untuk melanjutkan")
   var pilihan = prompt("1. Rendang...................Rp 14.000\n 2. Ikan...................Rp 11.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 14.000"); break;
      case 3 : alert("Menu yang anda pilih Dendeng Balado............Rp 14.000"); break;
      case 4 : alert("Menu yang anda pilih Soto Padang...............Rp 14.000"); break;
      case 5 : alert("Menu yang anda pilih Gulai Paku................Rp 14.000"); break;
      default : alert("Menu yang anda piliha : Tidak ada / Silahkan pilih menu yang lain Terima Kasih"); break;
     }
  </script>
 </body>
</html>

Dari gambar diatas jika kita memilih pilihan akan muncul alert :

Pertama : Menu yang anda pilih Rendang...................Rp 14.000

Kedua : Menu yang anda pilih Ikan Balado...............Rp 11.000

Ketiga : Menu yang anda pilih Dendeng Balado............Rp 17.000

Keempat : Menu yang anda pilih Soto Padang...............Rp 15.000

Kelima : Menu yang anda pilih Gulai Paku................Rp 20.000

Jika piliha salah maka akan muncul alert : Menu yang anda piliha : Tidak ada / Silahkan pilih menu yang lain Terima Kasih

Berikut ini adalah program perhitungan yang saya buat menggunakan kondisi if nested (bersarang). Maksud dari If Nested yaitu terdapat kondisi if didalam kondisi if.

Dari gambar diatas, saya mencontohkan ketika memilih pilihan yang pertama maka kita akan disuruh untuk menginput gaji pokok yang didapatkan, kemudian akan muncul alert Tunjangan dan alert Pajak, setelah itu akan dimunculkan alert Gaji Bersih kemudian akan diarahkan ke Web yang akan menampilkan hasil dari pilihan anda selama Simulasi tersebut.

Cukup sampai disini dulu ya Guys pembahasan kita kali ini. Mohon maaf bila ada kesalah dalam pengetikan maupun penjelasan. See you next Guys!.

Wassalamu'alaikum Wr. Wb.

Cyber Information Cafe

Cari Blog Ini

Pengkodisian Dalam Javascript (Pertemuan 14)

Komentar

Posting Komentar