Membuat Kalkulator Sederhana dengan Javascript


Ada teman yang bertanya : “bagaimana cara membuat kalkulator sederhana menggunakan javascript?”. Maka pada artikel kali ini saya akan menjelaskan cara membuat aplikasi kalender dengan menggunakan javascript.

Inti dari program ini adalah file “calculate.js” yang digunakan untuk memproses inputan angka dari user dan menampilkan kembali hasilnya. untuk lebih jelasnya teman-teman bisa mendownload contoh programnya.

Potongan Script

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Kalkulator Ri32</title>
http://calculate.js
</head>
<body>
<form name=”calculator”>
<table border=”0″ cellpadding=”2″ cellspacing=”0″ background=”/images/background.jpg” width=”233″ height=”259″>
<tr><td align=”center” style=”padding-bottom:0px;padding-top:15px”><input type=”text” name=”win” value=”0″ style=”height:30px;width:190px;text-align:right;font-size:20px;font-weight:bold;border:1px solid #666666;padding-right:2px;” maxlength=’15’></td></tr>
<tr><td>
<table border=”0″ cellpadding=”5″ cellspacing=”1″ align=”center”>
<tr><td style=”padding-top:0px”><input type=”button” value=”CE” style=”width:40px” onClick=”calc(‘CE’)”></td>
<td style=”padding-top:0px”><input type=”button” value=”C” style=”width:40px” onClick=”calc(‘C’)”></td>
<td style=”padding-top:0px”><input type=”button” value=”+/-” style=”width:40px” onClick=”calc(‘+/-‘)”></td>
<td style=”padding-top:0px”><input type=”button” value=”%” style=”width:40px” onClick=”calc(‘%’)”></td></tr>

<tr><td><input type=”button” value=”7″ style=”width:40px” onClick=”calc(‘7’)”></td>
<td><input type=”button” value=”8″ style=”width:40px” onClick=”calc(‘8’)”></td>
<td><input type=”button” value=”9″ style=”width:40px” onClick=”calc(‘9’)”></td>
<td><input type=”button” value=”/” style=”width:40px” onClick=”calc(‘/’)”></td></tr>

<tr><td><input type=”button” value=”4″ style=”width:40px” onClick=”calc(‘4’)”></td>
<td><input type=”button” value=”5″ style=”width:40px” onClick=”calc(‘5’)”></td>
<td><input type=”button” value=”6″ style=”width:40px” onClick=”calc(‘6’)”></td>
<td><input type=”button” value=”x” style=”width:40px” onClick=”calc(‘*’)”></td></tr>

<tr><td><input type=”button” value=”1″ style=”width:40px” onClick=”calc(‘1’)”></td>
<td><input type=”button” value=”2″ style=”width:40px” onClick=”calc(‘2’)”></td>

<td><input type=”button” value=”3″ style=”width:40px” onClick=”calc(‘3’)”></td>
<td><input type=”button” value=”-” style=”width:40px” onClick=”calc(‘-‘)”></td></tr>

<tr><td><input type=”button” value=”0″ style=”width:40px” onClick=”calc(‘0’)”></td>
<td><input type=”button” value=”.” style=”width:40px” onClick=”calc(‘.’)”></td>
<td><input type=”button” value=”=” style=”width:40px” onClick=”calc(‘=’)”></td>
<td><input type=”button” value=”+” style=”width:40px” onClick=”calc(‘+’)”></td></tr>
</table>
</td></tr>
</table>
</form>
</body>
</html>

Download

http://www.4shared.com/file/qdGHYkIL/kalkulator.html

Sekian tutorial dari saya, semoga bermanfaat untuk teman-teman dan anda semua..aamin

Depok, 10-01-2011

noname

Advertisements

One Response

  1. wah,,, ny0ba ach,,

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: