HTML adalah suatu bahasa yang dipergunakan untuk mendeskripsikan halaman web. HTML merupakan singkatan dari Hyper Text Markup Language. Sedangkan JavaScript sendiri merupakan bahasa pemrograman berbasis prototipe yang berjalan disisi klien. Secara fungsional, JavaScript digunakan untuk menyediakan akses script pada objek yang dibenamkan ( embedded ). Contoh sederhana dari penggunaan JavaScript adalah membuka halaman pop up, fungsi validasi pada form sebelum data dikirimkan ke server, merubah image kursor ketika melewati objek tertentu, dan lain lain.
Pada kesempatan ini kita akan belajar cara membuat kalkulator sederhana dan form pemesanan makanan dan minuman dengan menerapkan DHTML dan JavaScript......
berikut ini merupakan tampilan dari kalkulator sederhana dengan 2 input dan 4 operator (+, -, /, *)
Buat yang mau coba buat sendiri, di bawah ini merupakan sintaknya.
<!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" xml:lang="en" lang="en">
<head>
<title>Kalkulator Sederhana</title>
</head>
<body>
<script language="JavaScript" type="text/javascript">
function getSelectedValue() {
var myForm = document.form1;
}
function operand() {
var myForm = document.form1;
var a1=eval(myForm.angka1.value);
var a2=eval(myForm.angka2.value);
var operasi = myForm.simbol.value;
if (operasi == "+"){
var total = a1+a2;}
else if (operasi == "-"){
var total = a1-a2; }
else if (operasi == "/") {
var total = a1/a2;}
else if (operasi == "*") {
var total = a1*a2;}
myForm.hasil.value = total;
}
function resetForm(){
document.form1.reset();
}
</script>
<br/>
<br/>
<form name=form1 action="#">
<input type="text" name="angka1" />
<select name="simbol" onchange="getSelectedValue();">
<option value="+">+</option>
<option value="-">-</option>
<option value="/">/</option>
<option value="*">*</option> </select>
<input type="text" name="angka2" />
<input type="button" value="=" onClick="operand()"/>
<input type="text" name="hasil" disabled="true"/>
<input type="button" value="Reset" onClick="resetForm()" />
</form>
</body>
</html>
Selain kalkulator sederhana ini ada juga form pemesanan. Pada form pemesanan ini bisa memasukkan jumlah pemesanan makanan sesuai pilihan yang ada di menu. Harga makan telah tercantum sehingga jika kita mengisikan jumlah pesanan secara otomatis jumlah harga akan muncul. Di bawah ini merupakan gambar hasil...
Untuk sintaknya sebagai berikut...:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/frameset.dtd">
<html lang="en">
<head>
<title>FormPesanan</title>
</head>
<body bgcolor="white">
<script language="JavaScript" type="text/javascript">
function hitung() {
var myForm = document.form1;
var bakso = 12000 * eval(myForm.pesan1.value);
var soto = 10000 * eval(myForm.pesan2.value);
var mie = 15000 * eval(myForm.pesan3.value);
var degan = 5000 * eval(myForm.pesan4.value);
var campur = 7000 * eval(myForm.pesan5.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);
}
myForm.hb1.value = bakso;
myForm.hb2.value = soto;
myForm.hb3.value = mie;
myForm.hb4.value = degan;
myForm.hb5.value = campur;
}
</script>
<form name="form1" action="#">
<font size="6" face="comic sans ms">Form Pemesanan Berbasis JavaScript</font>
<table border="2" cellspacing=0 cellpadding=5 summary="Tabel Menu" bgcolor="pink">
<colgroup align="center">
<colgroup align="center">
<colgroup align="center">
<colgroup align="center">
<colgroup align="center">
<thead valign="middle">
<tr bgcolor="gray">
<th width="35"><font color="white" size="4">No</font>
<th width="200"><font color="white" size="4">Makanan/Minuman</font>
<th width="180"><font color="white" size="4">Harga Satuan</font>
<th width="100"><font color="white" size="4">Pesan</font>
<th width="150"><font color="white" size="4">Harga Barang</font>
</tr>
<tbody>
<tr>
<td>1<td>Bakso Istimewa<td>@<input type="text" name="hs1" value="12000"><td>
<input type="text" name="pesan1" value="0" onChange="hitung()"/><td><input type="text" name="hb1" />
</tr>
<tr>
<td>2<td>Soto Spesial<td>@<input type="text" name="hs2" value="10000" /><td>
<input type="text" name="pesan2" value="0" onChange="hitung()" /> <td><input type="text" name="hb2" />
</tr>
<tr>
<td>3<td>Mie Ayam Super<td>@<input type="text" name="hs3" value="15000" /> <td>
<input type="text" name="pesan3" value="0" onChange="hitung()"/> <td><input type="text" name="hb3" />
</tr>
<tr>
<td>4<td>Es Degan<td>@<input type="text" name="hs4" value="5000"/>
<td><input type="text" name="pesan4" value="0" onChange="hitung()" /> <td><input type="text" name="hb4" />
</tr>
<tr>
<td>5<td>Es Campur<td>@<input type="text" name="hs5" value="7000"/> <td>
<input type="text" name="pesan5" value="0" onChange="hitung()"/> <td><input type="text" name="hb5" />
</tr>
<tr>
<td colspan=4 align="right">Jumlah Total<td><input type="text" name="total" />
</tr>
<tr>
<td colspan=4 align="right">Diskon<td><input type="text" name="diskon" />
</tr>
<tr>
<td colspan=4 align="right">Jumlah Bayar<td><input type="text" name="bayar"/>
</tr>
</table>
<br/>
<br/>
<br/>
<input type="reset" value="BATAL" />
</form>
</body>
</html>
Demikian sharing-sharing ilmu dari saya...klo teman-teman punya yang lebih bagus 'n lebih interaktif mohon bagi ilmunya....
Pingin dengar pendapat mas Romi yang kabarnya waktu kuliah IPKnya 4.0 terus. Sebenarnya di kampus itu apa yang kita dapat sih mas?” (Novi - Tembalang, Semarang).