6 Mar 2011

Studi Kasus Modul 5 - Aplikasi Kalkulator Sederhana


Pada pertemuan praktikum Pemrograman Berbasis Web kelima ini kita akan belajar tentang halaman web aktif, Dinamic HTML, dan Java Script.
Berikut adalah contoh aplikasi kalkulator sederhana dengan memanfaatkan Java Script.


<!DOCTYPE html>
<html lang="en">

<head>
<title>Kalkulator sederhana</title>
</head>
<body bgcolor="#AFEEEE">
<script language="JavaScript" type="text/javascript">
<!--
function hitung(){
var x=eval(document.form1.x.value);
var y=eval(document.form1.y.value);
var pil= document.form1.pilih.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;
}
document.form1.hasil.value = z;
}
function resetForm(){
document.form1.reset();
}
//-->
</script>

<h3>::: KALKULATOR SEDERHANA :::</h3>

<form name="form1" action="#">
masukkan bilangan 1 : <br/>
<input type="text" name="x"/><br/>

<br/>pilih operasi : <br/>
<select name="pilih">
<option value="tambah"> + </option>
<option value="kurang"> - </option>
<option value="kali"> * </option>
<option value="bagi"> / </option>
</select><br/>

<br/>masukkan bilangan 2 : <br/>
<input type="text" name="y"/>
<br/><br/>
<input type="button" value="=" onClick="hitung()" />
<br/><br/>
hasil : <br/>
<input type="text" name="hasil" disabled="true" /><br/>
<br/>
<input type="button" value="RESET" onClick="resetForm()" />
</form>
</body>
</html>




Dan inilah hasil tampilannya :

dan ketika button RESET diklik, maka tampilannya sebagai berikut :

0 komentar:

Posting Komentar

silakan komen......