Senin, 07 Maret 2011
STUDI KASUS
Screen shoot :
kalkulator.js
function hitung(){
var komponen = document.kalkulator;
var inputan1 = parseInt(komponen.inputan1.value);
var inputan2 = parseInt(komponen.inputan2.value);
var operator = komponen.operator.value;
var result;
if(operator == "tambah"){
result = inputan1 + inputan2;
}
else if(operator == "kurang"){
result = inputan1 - inputan2;
}
else if(operator == "kali"){
result = inputan1 * inputan2;
}
else{
result = inputan1 / inputan2;
}
komponen.result.value = result;
}
function resetForm(){
document.kalkulator.reset();
}
kalkulator sederhana.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Kalkulator Sederhana</title>
<script language="JavaScript" type="text/javascript" src="kalkulator.js"></script>
</head>
<center>
<body bgcolor="purple">
<h2>Kalkulator sederhana</h2>
<form name="kalkulator" action="#">
<input type="text" size="7" name="inputan1">
<select name="operator">
<option value="tambah">+</option>
<option value="kurang">-</option>
<option value="kali">*</option>
<option value="bagi">:</option>
</select>
<input type="text" size="7" name="inputan2">
<input type="button" value="=" onclick="hitung()"/>
<input type="text" size="10" name="result" readonly>
<input type="button" value="clear" onclick="resetForm()"/>
</form>
</body>
</html>
TUGAS PRAKTIKUM
Screen Shoot :
Hitungorder.js
function HargaTotal(){
var harga;
var pesanan;
var total = 0;
for(i = 0; i < 10; i += 2){
harga = parseInt(document.HitungPesan[i].value);
pesanan = parseInt(document.HitungPesan[i + 1].value);
if(pesanan > 0){
total = total + (harga * pesanan);
}
document.HitungPesan.total.value = total;
}
}
function diskon(){
var total = parseInt(document.HitungPesan.total.value);
var diskon = 0;
if(total > 50000){
diskon = 10000;
}
else if(total <= 50000){
diskon = 0;
}
document.HitungPesan.diskon.value = diskon;
}
function Bayar(){
var total = parseInt(document.HitungPesan.total.value);
var diskon = parseInt(document.HitungPesan.diskon.value);
var bayar = total - diskon;
document.HitungPesan.bayar.value = bayar;
}
function hitung(){
diskon();
HargaTotal();
Bayar();
}
function reset(){
var elemen = document.HitungPesan;
elemen.order1.value = "";
elemen.order2.value = "";
elemen.order3.value = "";
elemen.order4.value = "";
elemen.order5.value = "";
elemen.total.value = "0";
elemen.diskon.value = "0";
elemen.bayar.value = "0";
}
form pemesanan.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Tugas Praktikum Modul 5</title>
<script language="JavaScript" type="text/javascript" src="Hitungorder.js"></script>
</head>
<center>
<body bgcolor="purple">
<h1>Form Pemesanan Berbasis JavaScript</h1>
<form name="HitungPesan" action="#">
<table border="1">
<tr>
<th>No</th>
<th>Makanan / Minuman</th>
<th>Harga</th>
<th>Pesan</th>
</tr>
<tr>
<td>1</td>
<td>Bakso Istimewa</td>
<td>@<input type="text" name="harga1" value="12000" onchange="hitung()"/></td>
<td><input type="text" name="order1" onchange="hitung()"/></td>
</tr>
<tr>
<td>2</td>
<td>Soto Spesial</td>
<td>@<input type="text" name="harga2" value="10000" onchange="hitung()"/></td>
<td><input type="text" name="order2" onchange="hitung()"/></td>
</tr>
<tr>
<td>3</td>
<td>Mie Ayam Super</td>
<td>@<input type="text" name="harga3" value="15000" onchange="hitung()"/></td>
<td><input type="text" name="order3" onchange="hitung()"/></td>
</tr>
<tr>
<td>4</td>
<td>Es Degan</td>
<td>@<input type="text" name="harga4" value="5000" onchange="hitung()"/></td>
<td><input type="text" name="order4" onchange="hitung()"/></td>
</tr>
<tr>
<td>5</td>
<td>Es Campur</td>
<td>@<input type="text" name="harga5" value="7000" onchange="hitung()"/></td>
<td><input type="text" name="pesan5" onchange="hitung()"/></td>
</tr>
<tr>
<td colspan="3" align="right">Jumlah Total</td>
<td><input type="text" name="total" Value="0" readonly /></td>
</tr>
<tr>
<td colspan="3" align="right">Diskon</td>
<td><input type="text" name="diskon" value="0" readonly /></td>
</tr>
<tr>
<td colspan="3" align="right">Jumlah Dibayar</td>
<td><input type="text" name="bayar" value="0" readonly /></td>
</tr>
</table>
<br>
<input type="button" name="batal" value="Batal" onclick="reset()"/>
</form>
</body>
</html>