A. 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
B. 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 Program JavaScript
|
<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>
|
C. Contoh Kasus
Perusahaan Travel ”Bintang Abadi”
mempunyai armada dengan tujuan :
Tujuan
|
Harga Tiket
|
Jakarta
|
100000
|
Cirebon
|
150000
|
Tasikmalaya
|
200000
|
Apabila seorang pemesan sudah
menjadi anggota/member Travel Bintang Abadi 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
|
<HTML>
<HEAD><TITLE>Percabangan IF-ELSE 2</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=="Jakarta")
{
ht =100000;
}
else if (tujuan=="Cirebon")
{
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
Abadi</H2></td>
</tr>
<tr>
<td width="50%"><PRE>
Nama :<input
type="text" size="20" name="inama">
Tujuan :<select
name="itujuan" size=1>
<option value="Jakarta">Jakarta</option>
<option
value="Cirebon">Cirebon</option>
<option
value="Tasikmalaya">Tasikmalaya</option>
</select>
Jumlah Tiket :<input type="text" size="11"
name="ijumlah">
Member :<input
type="checkbox"
name="imember">Ya</td></pre>
<td width="50%"><pre>
Harga Tiket :<input type="text"
size="10" name="otiket">
Sub Total :<input type="text"
size="10" name="osub">
Diskon :<input
type="text" size="10" name="odiskon">
Total Bayar :<input type="text"
size="10" name="ototal"></td><pre>
</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>
|
D. Percabangan
Majemuk
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
|
<HTML>
<HEAD><TITLE>Percabangan IF-ELSE 3</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="100%"
ALIGN="center" >
<tr>
<td width="100%"
colspan="4"><H2 ALIGN="center">Menghitung Indeks
Prestasi</H2></td>
</tr>
<tr>
<td width="25%">Quis (10%)
:<input type="text" size="10"
name="iquis"> </td>
<td width="25%">Tugas
(20%):<input type="text" size="10"
name="itugas"> </td>
<td
width="25%">UTS (30%):<input
type="text" size="10" name="iuts">
</td>
<td width="25%">UAS
(40%) :<input type="text" size="10"
name="iuas"> </td>
</tr>
<tr>
<td width="100%"
colspan="4"><P Align="center">
<INPUT TYPE="button" value="Hitung"
onclick="hitungip()">
<INPUT TYPE="reset" value="Ulang">
</p></td>
</tr>
<tr>
<td width="100%"
colspan="4" align="center">
Indeks Prestasi :<input
type="text" size="5" name="oip">
Keterangan :<input type="text"
size="25" name="oket"></td>
</tr>
</table>
</FORM>
</BODY>
</HTML>
|
E. 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
|
<HTML>
<HEAD><TITLE>Percabangan Switch</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>
|
Tidak ada komentar:
Posting Komentar