16.10 | 0 Comments


<!DOCTYPE html>
<html lang="en">
<head>
<title>Form Pemesanan Makanan</title>
<script language="JavaScript" type="text/javascript" src="skrip pesan.js"></script>
</head>
<body>
<font face="calibri">
<div class="title"><h3>Form Pemesanan Berbasis JavaScript</h3></div>
<form name="pemesanan" action="#">
<table border="2">
<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="hargabakso" value="12000" onchange="proses()" readonly/></td>
<td><input type="text" name="jmlpesanbakso" onchange="proses()"/></td>
</tr>
<tr>
<td>2.</td>
<td>Soto Spesial</td>
<td>@<input type="text" name="hargasoto" value="10000" onchange="proses()"readonly/></td>
<td><input type="text" name="jmlpesansoto" onchange="proses()"/></td>
</tr>
<tr>
<td>3.</td>
<td>Mie Ayam Super</td>
<td>@<input type="text" name="hargami" value="15000" onchange="proses()" readonly/></td>
<td><input type="text" name="jmlpesanmi" onchange="proses()"/></td>
</tr>
<tr>
<td>4.</td>
<td>Es Degan</td>
<td>@<input type="text" name="hargadegan" value="5000" onchange="proses()" readonly/></td>
<td><input type="text" name="jmlpesandegan" onchange="proses()"/></td>
</tr>
<tr>
<td>5.</td>
<td>Es Campur</td>
<td>@<input type="text" name="hargacampur" value="7000" onchange="proses()"readonly/></td>
<td><input type="text" name="jmlpesancampur" onchange="proses()"/></td>
</tr>
<tr>
<td colspan="3" align="right">Jumlah Total</td>
<td><input type="text" name="total" readonly /></td>
</tr>
<tr>
<td colspan="3" align="right">Diskon</td>
<td><input type="text" name="diskon" readonly /></td>
</tr>
<tr>
<td colspan="3" align="right">Jumlah Dibayar</td>
<td><input type="text" name="bayar" readonly /></td>
</tr>
</table>
<br>
<input type="button" name="batal" value="Batal" onclick="reset()"/>
</form>
</font>
</body>
</html>






function totalHarga(){
var harga;
var pesanan;
var total = 0;

for(i = 0; i < 10; i += 2){
harga = parseInt(document.pemesanan[i].value);
pesanan = parseInt(document.pemesanan[i + 1].value);

if(pesanan > 0){
total = total + (harga * pesanan);
}

document.pemesanan.total.value = total;
}
}

function diskon(){
var total = parseInt(document.pemesanan.total.value);
var diskon = 0;

if(total >= 50000){
diskon = 10000;
}

document.pemesanan.diskon.value = diskon;
}

function jumlahBayar(){
var total = parseInt(document.pemesanan.total.value);
var diskon = parseInt(document.pemesanan.diskon.value);
var bayar = total - diskon;

document.pemesanan.bayar.value = bayar;
}

function proses(){
totalHarga();
diskon();
jumlahBayar();
}

function reset(){
var elemen = document.pemesanan;

elemen.jmlpesanbakso.value = "";
elemen.pesan2.value = "";
elemen.pesan3.value = "";
elemen.pesan4.value = "";
elemen.pesan5.value = "";
elemen.total.value = "";
elemen.diskon.value = "";
elemen.bayar.value = "";
}

Modul 5. Praktikum pemrograman berbasis web.

07.08 | 0 Comments

<!DOCTYPE html>
<html lang="en">
<head>
<title>Simple Calculator</title>
<script language="JavaScript" type="text/javascript" src="kalkulator.js"></script>
</head>
<body>
<b>Kalkulator Javascript</b>
<form name="calc" action="#">
<input type="text" size="5" name="bil1">

<select name="op">
<option value="tambah">+</option>
<option value="kurang">-</option>
<option value="kali">*</option>
<option value="bagi">:</option>
</select>
<input type="text" size="5" name="bil2">
<input type="button" value="=" onclick="hitung()"/>
<input type="text" size="10" name="hasil" readonly>
</form>
</body>
</html>



function hitung(){
var komponen = document.calc;
var bil1 = parseInt(komponen.bil1.value);
var bil2 = parseInt(komponen.bil2.value);
var op = komponen.op.value;
var hasil;

if(op == "tambah"){
hasil = bil1 + bil2;
}
else if(op == "kurang"){
hasil = bil1 - bil2;
}
else if(op == "kali"){
hasil = bil1 * bil2;
}
else if(op == "bagi"){
hasil = bil1 / bil2;
}

komponen.hasil.value = hasil;
}

About