Senin, 08 Maret 2010

Kalkulator Sederhana Menggunakan Javascript

Kalkulator merupakan alat bantu hitung seperti penjumlahan, pengurangan, perkalian, dan pembagian. Kalkulator yang digunakan untuk melakukan perhitungan standar seperti diatas biasanya disebut jenis kalkulator sederhana. Sedangkan untuk melakukan perhitungan yang lebih rumit, seperti rumus matematika digunakan jenis kalkulator yang sering disebut scientific calculator.
Semakin canggihnya teknologi jaman sekarang memungkinkan kalkulator dibuat secara online. Aplikasi kalkulator online dapat dibuat menggunakan HTML. Untuk menampilkan kalkulator di halaman web, maka dapat digunakan Javascript. Skrip JavaScript yang dimasukkan di dalam berkas HTML ataupun XHTML harus dimasukkan di antara tag <script>...</script>.
Berikut ini contoh aplikasi kalkulator sederhana, yakni perhitungan yang terbatas hanya untuk operasi penjumlahan, pengurangan, perkalian, dan pembagian. Source code aplikasi kalkulator sederhana:

<!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>Demo Simpel Calculator</title>

</head>


<body>

<h3 align="left" style="font:berlin sans fb demi; color:hotpink">Lets try to count with this simple calculator</h3>


<script language="Javascript" type="text/javascript">

<!--

function nilai()

{

if(operator.value=='*')

{c.value=eval(a.value)*eval(b.value);}

else if (operator.value=='/')

{c.value=eval(a.value)/eval(b.value);}

else if (operator.value=='+')

{c.value=eval(a.value)+eval(b.value);}

else if (operator.value=='-')

{c.value=eval(a.value)-eval(b.value);}

}

function kosong()

{

form.a.value=""

form.b.value=""

form.c.value=""

form.operator.value="--choose--"

form.a.focus()

}

//-->

</script>

<form name="form" action="#">

<input type="text" id="a" height="20px" width="80px"/>

<select id="operator">

<option>--choose--</option>

<option value="*">x</option>

<option value="/">:</option>

<option value="+">+</option>

<option value="-">-</option>

</select>

<input type="text" id="b" height="20px" width="80px"/>

<input type="button" value="=" onClick="nilai()"/>

<input type="text" id="c" height="20px" width="80px"/>

<input type="button" value="clear" name="clear" onClick="kosong()"/>

</form>

</body>

</html>


Tampilan dari script di atas adalah:



Berikut ini code program kalkulator online sederhana dengan tampilan yang lebih banyak dijumpai dipasaran:
<html>

<head>

<title>4 operator perhitungan</title>

</head>



<body>

<form name="calculator">





<!-- form the display to match the keypad -->



<table border="4" cellpadding="1" bordercolor="hotpink" bgcolor="hotpink" cellspacing="2" width="222">



<tr>



<td>



<input type="text" size="25" length="25" value="" name="ans" style="background:lightpink;color:black;">



</td>



</tr>



</table>







<!-- form the keypad with buttons in a table -->



<table border="5" cellpadding="2" bordercolor="hotpink" cellspacing="2" width="150" bgcolor="hotpink">



<tr>



<td align="center">



<input type="button" value=" 7 " name="seven" onClick="document.calculator.ans.value+='7'">



</td>



<td align="center">



<input type="button" value=" 8 " name="eight" onClick="document.calculator.ans.value+='8'">



</td>



<td align="center">



<input type="button" value=" 9 " name="nine" onClick="document.calculator.ans.value+='9'">



</td>



<td align="center">



<input type="button" value=" / " name="divide" onClick="document.calculator.ans.value+='/'">



</td>



</tr>



<tr>



<td align="center">



<input type="button" value=" 4 " name="four" onClick="document.calculator.ans.value+='4'">



</td>



<td align="center">



<input type="button" value=" 5 " name="five" onClick="document.calculator.ans.value+='5'">



</td>



<td align="center">



<input type="button" value=" 6 " name="six" onClick="document.calculator.ans.value+='6'">



</td>



<td align="center">



<input type="button" value=" * " name="multiply" onClick="document.calculator.ans.value+='*'">



</td>



</tr>



<tr>



<td align="center">



<input type="button" value=" 1 " name="one" onClick="document.calculator.ans.value+='1'">



</td>



<td align="center">



<input type="button" value=" 2 " name="two" onClick="document.calculator.ans.value+='2'">



</td>



<td align="center">



<input type="button" value=" 3 " name="three" onClick="document.calculator.ans.value+='3'">



</td>



<td align="center">



<input type="button" value=" - " name="subtract" onClick="document.calculator.ans.value+='-'">



</td>



</tr>



<tr>



<td align="center">



<input type="button" value=" C " name="clear" onClick="document.calculator.ans.value=''">



</td>



<td align="center">



<input type="button" value=" 0 " name="zero" onClick="document.calculator.ans.value+='0'">



</td>



<td align="center">



<input type="button" value=" = " name="equal"



onClick="document.calculator.ans.value=eval(document.calculator.ans.value)">

</td>

<td align="center">

<input type="button" value=" + " name="add" onClick="document.calculator.ans.value+='+'">

</td>

</tr>

</table>

</form>

</body>

</html>
Jika dieksekusi, maka tampilan programnya adalah:

Tidak ada komentar:

Posting Komentar