Halo semua, pada posting kali ini penulis akan mencoba membuat suatu halaman web dengan memanfaatkan javascript. Apa itu JavaScript?
JavaScript adalah nama implementasi Netscape Communications Corporation untuk ECMAScript standar, suatu bahasa skrip yang didasarkan pada konsep pemrograman berbasis prototipe. Bahasa ini terutama terkenal karena penggunaannya di situs web(sebagai JavaScript sisi klien) dan juga digunakan untuk menyediakan akses skrip untuk objek yang dibenamkan (embedded) di aplikasi lain. Walaupun memiliki nama serupa, JavaScript hanya sedikit berhubungan dengan bahasa pemrograman Java, dengan kesamaan utamanya adalah penggunaan sintaks C. Secara semantik, JavaScript memiliki lebih banyak kesamaan dengan bahasa pemrograman Self. (sumber:Wikipedia) Skrip JavaScript yang dimasukkan di dalam berkas HTML ataupun XHTML harus dimasukkan di antara tag
<code><script>...</script></code>
Penggunaan javascript pada posting ini ditujukan pada proses perhitungan. ok, kita lanjut aj melihat kode nya
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/frameset.dtd">
<html lang="en">
<head>
<title>Form Pemesanan</title>
</head>
<body>
<h1><font color="purple">FORM PEMESANAN BERBASIS JAVASCRIPT</font></h1>
<script language="JavaScript" type="text/javascript">
function jumlah() {
var myForm = document.form1;
var bakso = 12000 * eval(myForm.order1.value);
var soto = 10000 * eval(myForm.order2.value);
var mie = 15000 * eval(myForm.order3.value);
var degan = 5000 * eval(myForm.order4.value);
var campur = 7000 * eval(myForm.order5.value);
var hasil = bakso+soto+mie+degan+campur;
if (hasil > 50000) {
myForm.total.value = hasil;
myForm.diskon.value = 10000;
myForm.bayar.value = hasil - eval(myForm.diskon.value);
} else {
myForm.total.value = hasil;
myForm.diskon.value = 0;
myForm.bayar.value = hasil - eval(myForm.diskon.value);
}
}
function resetForm(){
document.form1.reset();
}
</script>
<form name="form1" action="#">
<table border="3" cellspacing=2 cellpadding=10>
<tr>
<th width="25"><b>No</b>
<th width="200"><b>Makanan/Minuman</b>
<th width="150"><b>Harga Satuan</b>
<th width="100"><b>Pesan</b>
</tr>
<tbody>
<tr>
<td align="center">1<td>Bakso Istimewa<td>@ <input type="text" size="10%" value="12000" disabled="true"/><td>
<input type="text" name="order1" value="0" onChange="jumlah()"/>
</tr>
<tr>
<td align="center">2<td>Soto Spesial<td>@ <input type="text" size="10%" value="10000" disabled="true"/><td>
<input type="text" name="order2" value="0" onChange="jumlah()" />
</tr>
<tr>
<td align="center">3<td>Mie Ayam Super<td>@ <input type="text" size="10%" value="15000" disabled="true"/> <td>
<input type="text" name="order3" value="0" onChange="jumlah()"/>
</tr>
<tr>
<td align="center">4<td>Es Degan<td>@ <input type="text" size="10%" value="5000" disabled="true"/>
<td><input type="text" name="order4" value="0" onChange="jumlah()" />
</tr>
<tr>
<td align="center">5<td>Es Campur<td>@ <input type="text" size="10%" value="7000" disabled="true"/> <td>
<input type="text" name="order5" value="0" onChange="jumlah()"/>
</tr>
<tr>
<td colspan=3 align="right"><b>Jumlah Total</b><td><input type="text" name="total" disabled="true"/>
</tr>
<tr>
<td colspan=3 align="right"><b>Diskon</b><td><input type="text" name="diskon" disabled="true" />
</tr>
<tr>
<td colspan=3 align="right"><b>Jumlah Bayar</b><td><input type="text" name="bayar" disabled="true"/>
</tr>
</table>
<br/>
<input type="button" value="CANCEL" onClick="resetForm()" />
</form>
</body>
</html>
kalau kode di atas sudah benar, maka tampilannya akan menjadi seperti berikut :
