STUDI KASUS
javascript
function kalkulator(){
var awal = document.kalkulator;
var bilangan1 = parseInt(awal.bilangan1.value);
var bilangan2 = parseInt(awal.bilangan2.value);
var operator = awal.operator.value;
var hasil;
if(operator == "tambah"){
hasil = bilangan1 + bilangan2;
}
else if(operator == "kurang"){
hasil = bilangan1 - bilangan2;
}
else if(operator == "kali"){
hasil = bilangan1 * bilangan2;
}
else{
hasil = bilangan1 / bilangan2;
}
awal.hasil.value = hasil;
}
function resetForm(){
document.kalkulator.reset();
}
Script 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="hitung.js"></script>
</head>
<center>
<body bgcolor="white">
<h2>Kalkulator sederhana</h2>
<form name="kalkulator" action="#">
<input type="text" size="7" name="bilangan1">
<select name="operator">
<option value="tambah">+</option>
<option value="kurang">-</option>
<option value="kali">*</option>
<option value="bagi">:</option>
</select>
<input type="text" size="9" name="bilangan2">
<input type="button" value="=" onclick="hitung()"/>
<input type="text" size="10" name="hasil" readonly>
<input type="button" value="Hapus" onclick="resetForm()"/>
</form>
</body>
</html>
TUGAS PRAKTIKUM
Javascript
function pembelian(){
var harga;
var pesanan;
var total = 0;
for(x = 0; x < 10; x += 2){
harga = parseInt(document.HitungPesan[x].value);
pesanan = parseInt(document.HitungPesan[x + 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 pay(){
var total = parseInt(document.HitungPesan.total.value);
var diskon = parseInt(document.HitungPesan.diskon.value);
var pay = total - diskon;
document.HitungPesan.pay.value = pay;
}
function hitung(){
diskon();
HargaTotal();
pay();
}
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.pay.value = "0";
}
Script 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="pembelian.js"></script>
</head>
<center>
<body bgcolor="white">
<h1>Form Pembelian</h1>
<form name="HitungPesan" action="#">
<table bpesanan="1">
<tr>
<th>No</th>
<th>Makanan / Minuman</th>
<th>Harga</th>
<th>Pesan</th>
</tr>
<tr>
<td>1</td>
<td>Soto Ayam</td>
<td>@<input type="text" name="harga1" value="8000" onchange="hitung()"/></td>
<td><input type="text" name="pesanan1" onchange="hitung()"/></td>
</tr>
<tr>
<td>2</td>
<td>Nasi Goreng</td>
<td>@<input type="text" name="harga2" value="6000" onchange="hitung()"/></td>
<td><input type="text" name="pesanan2" onchange="hitung()"/></td>
</tr>
<tr>
<td>3</td>
<td>lalapan</td>
<td>@<input type="text" name="harga3" value="5000" onchange="hitung()"/></td>
<td><input type="text" name="pesanan3" onchange="hitung()"/></td>
</tr>
<tr>
<td>4</td>
<td>Es Teh</td>
<td>@<input type="text" name="harga4" value="1000" onchange="hitung()"/></td>
<td><input type="text" name="pesanan4" onchange="hitung()"/></td>
</tr>
<tr>
<td>5</td>
<td>Juice 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="Hitung" value="Hitung" onclick="reset()"/>
<br>
<input type="button" name="batal" value="Batal" onclick="reset()"/>
</form>
</body>
</html>
