Ticker

6/recent/ticker-posts

Header Ads Widget

Percabangan if & Switch Pada Javascript

Asslmualaikum Warahmatullahi Wabarakatu
Bismillahirrahmanirrahiim

Untuk memberikan kemampuan tambahan terhadap bahasa html dengan mengijinkan pengeksekusian perintah perintah di sisi user, yang artinya di sisi browser bukan di sisi server web kita memerlukan yang namanya javascript. Disini saya akan membahas beberapa component yang digunakan di javascript. Oke langsung saja ....



Percabangan
Untuk membuat suatu halaman yang dinamis dan interaktif, perancang halaman Web membutuhkan perintah-perintah yang dapat mengatur aliran dari informasi. Berdasarkan hasil komputasi yang telah dilakukan, JavaScript akan membuat keputusan jalur mana yang akan dieksekusi.
Pada dasarnya dalam JavaScript terdapat dua macam pernyataan percabangan yaitu if..else dan switch

If..Else
Pernyataan ini digunakan untuk menguji sebuah kondisi dan kemudian mengeksekusi pernyataan tertentu bila kondisi tersebut terpenuhi, dan mengeksekusi pernyataan lain bila kondisi tersebut tidak terpenuhi.

if (kondisi) 
{
   //pernyataan1 dieksekusi 
   //bila kondisi terpenuhi  
}
else
{
   //pernyataan2 dieksekusi
   //bila kodisi tidak terpenuhi
}

kondisi adalah ekspresi JavaScript yang mana hasil evaluasinya memiliki nilai Boolean true atau false
Untuk kasus yang melibatkan lebih banyak kondisi, maka kita dapat meletakkan pernyataan if lain setelah else

if (kondisi1) 
{
   //pernyataan1 dieksekusi 
   //bila kondisi1 terpenuhi  
}
else if (kondisi2)
{
   //pernyataan2 dieksekusi
   //bila kodisi1 tidak terpenuhi
}
else
{
   //pernyataan3 dieksekusi
   //bila kodisi2 tidak terpenuhi
}

Contoh code program dari percabangan if untuk pengecekan bilangan
<!doctype html>
<html>
<head>
<title>Percabangan IF-ELSE</title>
</head>
<body>
<script language="JavaScript">
function tanyabilangan()
{
 var bil = parseFloat(document.fform.bilangan.value);
 var jenis = " ";
 if(isNaN(bil))
  {
   alert("Anda Belum memasukkan Bilangan");
  }
 else
 {  
   if (bil > 0)
    {
      jenis = " Adalah bilangan Positif";
    }
   else if (bil < 0)
    {
      jenis = " Adalah bilangan Negatif";
    }
   else
   {
      jenis = " Adalah Nol";
   }   
   alert (bil+" "+jenis);
 }  
}
</script>
<form name ="fform">
<H2><BR>Bilangan Negatif, Nol, Atau Positif ???</H2>
Masukkan Bilangan  :<input type="text" size="11" name="bilangan">
<P>
<input type="button" value="Tanya" onclick="tanyabilangan()">
<input type="reset" value="Ulang"> </p>
</form>   
</body>
</html>

Hasilnya akan terlihat seperti gambar dibawah ini


Contoh kasus dari percabangan if
Perusahaan Travel ”Bintang Bersinar” mempunyai armada dengan tujuan :
Tujuan Harga Tiket
Kampung Lalang 100000
Binjai 150000
Medan 200000

Apabila seorang pemesan sudah menjadi anggota/member Travel Bintang Bersinar maka akan mendapatkan diskon 10 %.
Subtotal : Harga tiket X Jumlah tiket
Diskon : 0.10 X Subtotal
Total : Subtotal - Diskon
Buat Program dengan menggunakan Javascript untuk menyelesaikan masalah tersebut. Dengan ketentuan sebagai berikut :

input : Nama pemesan, Tujuan, Jumlah Tiket
Member: Output : Harga Tiket, Sub Total, Diskon, total Bayar

Contoh Program JavaScript Dengan If....Else
<!doctype html>
<html>
<head>
<title>Percabangan IF-ELSE Dengan Kasus</title>
</head>
<body>
<script language="Javascript">
function hitungtotal()
{
 var nama = (document.fform.inama.value);
 var tujuan = (document.fform.itujuan.value);
 var jumlahtiket = parseFloat(document.fform.ijumlah.value);
 var ht = 0.0;
 var sub = 0.0;
 var diskon =0.0;
 var total =0.0;
 
 if (tujuan=="Kampung Lalang")
 {
   ht =100000;
 }
 else if (tujuan=="Binjai")
 {
   ht =150000;
 }
 else 
 {
   ht =200000;
 }
 sub = jumlahtiket*ht;

 if (document.fform.imember.checked==true)
 {
  diskon =0.10*sub;
 }
 else
 {
  diskon=0.0;  
 }
 total = sub-diskon; 
 document.fform.otiket.value=eval(ht);
 document.fform.osub.value=eval(sub);
 document.fform.odiskon.value=eval(diskon);
 document.fform.ototal.value=eval(total);  
 // gunakan untuk mengecek !!! alert (total);
}
</script>
<form name ="fform">
<table border="1" align="center" width="70%">
  <tr>
    <td width="100%" colspan="2"><H2 align="center">Travel Bintang Bersinar</H2></td>
  </tr>
  <tr>
    <td width="50%">Nama :</td>
    <td><input type="text" size="20" name="inama"></td>
  </tr>
  <tr>
    <td> Tujuan :</td>
    <td>
      <select name="itujuan" size=1>
          <option value="Kampung Lalang">Kampung Lalang</option>
          <option value="Binjai">Binjai</option>
          <option value="Medan">Medan</option>
        </select>  
    </td>
  </tr>
  <tr>
    <td>Jumlah Tiket :</td>
    <td><input type="text" size="11" name="ijumlah"></td>
  </tr>
  <tr>
    <td>Member :</td>
    <td><input type="checkbox" name="imember">Ya</td>
  </tr>
  <tr>
    <td>Harga Tiket  :</td>
    <td><input type="text" size="10" name="otiket"></td>
  </tr>
  <tr>
    <td>Sub Total    :</td>
    <td><input type="text" size="10" name="osub"></td>
  </tr>
  <tr>
    <td>   Diskon       :</td>
    <td><input type="text" size="10" name="odiskon"></td>
  </tr>
  <tr>
    <td>Total Bayar  :</td>
    <td><input type="text" size="10" name="ototal"></td>
  </tr>

  <tr>
    <td width="100%" colspan="2">
    <center>
     <input type="button" value="Hitung" onclick="hitungtotal()">
     <input type="reset" value="Ulang"> 
    </center>
    </td>
  </tr>
</table>
</form>   
</body>
</html>

Hasilnya akan terlihat seperti gambar dibawah ini


Percabangan Majemuk Javascript
Percabangan majemuk adalah suatu percabangan yang dapat melibatkan lebih dari 1 kondisi di dalam percabangannya. Biasanya percabangan sepert ini menggunakan operator tambahan seperti AND, OR dan sebagainya.

Contoh Program JavaScript Percabangan Majemuk
<!doctype html>
<html>
<head>
<title>Percabangan IF-ELSE Majemuk</title>
</head>
<body>
<script language="Javascript">
function hitungip()
{
 var quis = parseFloat(document.fform.iquis.value);
 var tugas = parseFloat(document.fform.itugas.value);
 var uts = parseFloat(document.fform.iuts.value);
 var uas = parseFloat(document.fform.iuas.value);
 var ip =" ";
 var ket=" ";
 
 var na = (0.10*quis)+(0.20*tugas)+(0.30*uts)+(0.40*uas);
 
 if ((na > 80) && (na <=100))
 {
   ip ="A";
   ket="Lulus dengan Sangat Baik";
 }
 else if ((na > 68) && (na <=80))
 {
   ip ="B";
   ket="Lulus dengan Baik";
 }
 else if ((na > 55) && (na <=68)) 
 {
  ip ="C";
  ket="Lulus dengan Cukup";
 }
 else if ((na > 38) && (na <=55)) 
 {
  ip ="D";
  ket="Lulus dengan Kurang";
 }
 else 
 {
  ip ="E";
  ket="Tidak Lulus";
 }

 document.fform.oip.value=ip;
 document.fform.oket.value=ket;
// gunakan untuk mengecek alert (ip+""+na);
}
</script>
<form name ="fform">
<table border="1"  width="50%" ALIGN="center" >
  <tr>
    <td width="100%" colspan="4">
      <H2 ALIGN="center">Menghitung Indeks Prestasi</H2>
    </td>
  </tr>
  <tr>
    <td width="25%">Quis (10%) :</td>
    <td><input type="text" size="10" name="iquis"> </td>
  </tr>
  <tr>
    <td width="25%">Tugas (20%):</td>
    <td><input type="text" size="10" name="itugas"> </td>
  </tr>
  <tr>
    <td width="25%">UTS   (30%):</td>
    <td><input type="text" size="10" name="iuts"> </td>
  </tr>
  <tr>
    <td width="25%">UAS (40%)  :</td>
    <td><input type="text" size="10" name="iuas"> </td>
  </tr>
  <tr>
    <td  width="25%"></td>
    <td colspan=""><P Align="left">
      <input type="button" value="Hitung" onclick="hitungip()">
      <input type="reset" value="Ulang"> </p>
    </td>
  </tr>
  <tr>
    <td width="25%" colspan="" align="left">Indeks Prestasi  :</td>
    <td><input type="text" size="5" name="oip"></td>
  </tr>
  <tr>
    <td>Keterangan  :</td>
    <td><input type="text" size="25" name="oket"></td>
  </tr>
</table>
</form>   
</body>
</html>

Hasilnya akan terlihat seperti gambar dibawah ini



Switch
Selain menggunakan if..else, percabangan juga dapat ditangani dengan perintah switch. Dengn kata lain pernyataan switch digunakan untuk menyederhanakan pernyataan if..else yang terlalu banyak.

Contoh Program JavaScript Menggunakan Switch
<!doctype html>
<html>
<head>
<title>Percabangan Switch Javascript</title>
</head>
<body>
<script language="Javascript">
function tanyabulan()
{
 var bulan = parseFloat(document.fform.ibulan.value);
 var namabulan=" ";
 switch (bulan)
  {
    case 1 : namabulan="Bulan ke 1 adalah = Januari";break;
    case 2 : namabulan="Bulan ke 2 adalah = Februari";break;
    case 3 : namabulan="Bulan ke 3 adalah = Maret";break;
    case 4 : namabulan="Bulan ke 4 adalah = April";break;
    case 5 : namabulan="Bulan ke 5 adalah = Mei";break;
    case 6 : namabulan="Bulan ke 6 adalah = Juni";break;
    case 7 : namabulan="Bulan ke 7 adalah = Juli";break;
    case 8 : namabulan="Bulan ke 8 adalah = Agustus";break;
    case 9 : namabulan="Bulan ke 9 adalah = September";break;
    case 10 : namabulan="Bulan ke 10 adalah = Oktober";break;
    case 11 : namabulan="Bulan ke 11 adalah = November";break;
    case 12 : namabulan="Bulan ke 12 adalah = Desember";break;
    default : namabulan="Anda salah mengisi"; 
   }
alert(namabulan);
}
</script>
<form name ="fform">
<H2>Penggunaan Percabangan Switch</H2><HR>
<pre>
Masukkan Nomor Bulan [1-12] :<input type="text" size="2" name="ibulan"> 
<input type="button" value="Hitung" onclick="tanyabulan()"><input type="reset" value="Ulang">
</pre>
</form>   
</body>
</html>

Hasilnya akan terlihat seperti gambar dibawah ini

Sampai disini dulu tutorial dari saya , Semoga tutorial ini bermanfaat bagi sobat, sampai berjumpa lagi pada postingan selanjutnya.

Post a Comment

0 Comments

Rekomendasi Untuk Anda × +