DHTML dan JavaScript : Kalkulator Sederhana
Gambar. Desain Kalkulator Sederhana
DHTML (Dynamic HTML) merupakan suatu teknik untuk menciptakan halaman web yang interaktif dengan cara mengombinasikan elemen-elemen seperti HTML, style sheet, dan scripting. Jadi, DHTML bukanlah suatu jenis bahasa pemrograman melainkan hanya sekadar istilah saja. Pembuatan DHTML dapat memanfaatkan JavaScript. JavaScript terbentuk atas
elemen-elemen fundamental. Dengan menggunakan JavaSript memungkinkan Anda untuk menampilkan Kotak Dialog, Dukungan Scripting, Merujuk Elemen, Event, Linked Scripting, dan lain sebagainya. Berikut pemanfaatan JavaScript didalam penggunaan kalkulator.
Berikut source code HTML-nya: (Kalkulator.html)
<script language="JavaScript" type="text/javascript">
<!--
function hitung(){
var myForm = document.form1;
var x=eval(myForm.x.value);
var y=eval(myForm.y.value);
var pil= myForm.opt.value;
if (pil == "tambah") {
var z = x + y;
}else if (pil == "kurang") {
var z = x - y;
} else if (pil == "kali") {
var z = x * y;
} else if (pil == "bagi") {
var z = x / y;
} else if (pil == "pangkat") {
var z = Math.pow(x, y);
}
myForm.hasil.value = z;
myForm.x.value = "";
myForm.y.value = "";
}
function resetForm(){
document.form1.reset();
}
//-->
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Kalkulator</title>
</head>
<body>
<!--Letakkan listing code Javascript disini-->
<h3>Kalkulator Berbasis Javascript</h3>
<form name="form1" action="#">
<input type="text" name="x" />
<select name="opt">
<option value="tambah"> + </option>
<option value="kurang"> - </option>
<option value="kali"> * </option>
<option value="bagi"> / </option>
<option value="pangkat"> ^ </option>
</select>
<input type="text" name="y" />
<input type="button" value="=" onClick="hitung()" />
<input type="text" name="hasil" disabled="true" /><br/>
<input type="button" value="Refresh" onClick="resetForm()" />
</form>
</body>
</html>
download selengkapnya DISINI
DHTML dan JavaScript : Kalkulator Sederhana
Subscribe to:
Post Comments (Atom)
0 komentar:
Post a Comment