Penerapan DHTML pada kalkulator sederhana

Penerapan DHTML pada kalkulator sederhana

Pemahaman konsep dasar active web page dapat diimplementasikan dalam sebuah project kalkulator sederhana dengan teknik dinamis html (DHTML) yang menggunakan  Text Field untuk mengisi nilai dan Select (Combo Box) untuk memilih icon perhitungan, berikut tampilan sederhana dari kalkulator (dapat dikembangkan sendiri).

Adapun kode html yang digunakan pada layout diatas adalah seperti dibawah:

&lt !DOCTYPE html
PUBLIC &quot-//W3C//DTD XHTML 1.0 Transitional//EN&quot
&quothttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot&gt
&lt html xmlns=&quothttp://www.w3.org/1999/xhtml&quot lang=&quoten&quot&gt

&lt head&gt
&lt title&gtKalkulator&lt /title&gt
&lt /head&gt
&lt body&gt
&lt script language=&quotJavaScript&quot type=&quottext/javascript&quot&gt
&lt !--
function hitung(){
var x=eval(document.form1.x.value);
var y=eval(document.form1.y.value);
var pil= document.form1.opt.value;
if (pil == &quotplus&quot) {
var z = x + y;
}else if (pil == &quotmin&quot) {
var z = x - y;
} else if (pil == &quotcross&quot) {
var z = x * y;
} else if (pil == &quotdiv&quot) {
var z = x / y;
}
document.form1.hasil.value = z;
}
function resetForm(){
document.form1.reset();
}
//--&gt
&lt /script&gt

&lt form name=&quotform1&quot action=&quot#&quot&gt
&lt input type=&quottext&quot name=&quotx&quot /&gt
&lt select name=&quotopt&quot&gt
&lt option value=&quotplus&quot&gt + &lt /option&gt
&lt option value=&quotmin&quot&gt - &lt /option&gt
&lt option value=&quotcross&quot&gt * &lt /option&gt
&lt option value=&quotdiv&quot&gt / &lt /option&gt
&lt /select&gt
&lt input type=&quottext&quot name=&quoty&quot /&gt&lt br/&gt
&lt input type=&quotbutton&quot value=&quot=&quot onClick=&quothitung()&quot /&gt
&lt input type=&quottext&quot name=&quothasil&quot disabled=&quottrue&quot /&gt&lt br/&gt

&lt /form&gt
&lt /body&gt
&lt /html&gt

SELAMAT MENCOBA ^_^