Cara Membuat Javascript Kalkulator

Membuat JavaScript Kalkulator

by Randy Septian on Nov.25, 2009, under Pemrograman Web

Hi friends.. seperti yg udah pernah gw janjiin nih gw kasih lg program unik yg bisa dipake buat belajar dan iseng-iseng. Program ini adalah sebuah kalkulator yang menggunakan JavaScript dan HTML.

Kalkulator yg dibuat nantinya akan memiliki kondisi seperti ini:

Kalkulator simple ( a + b = c) dimana a, +, b, c adalah input box
yang keempatnya diisi dengan menekan button/link
contoh button
0 1 2 3 4 5 6 7 8 9 + – =
bila dalam keadaan kosong menekan angka, maka ‘a’ akan terisi angka
menekan tanda +/- akan mengisi operator dan memindahkan kursor ke teks box B
menekan angka saat kursor di teks box B akan mengisinya
ketika menekan tanda =
maka pada teks box C akan muncul hasil

So, begini deh script kalkulatornya :

<html>
<head>
<title>JAVASCRIPT CALCULATOR</title>
<meta name="Programmer" content="Randy Septian D. Putra" />
<script language="javascript" type="text/javascript">
<!--
  var flag = false;
  function isi(num) {
    if (flag) calc.b.value += num;
    else calc.a.value += num;
  }
  function tambah()
  {
    calc.opr.value = ' + '
    flag = true;
    calc.b.focus()
  }
  function kurang()
  {
    calc.opr.value = ' - '
    flag = true;
    calc.b.focus()
  }
  function kosong()
  {
    calc.a.focus()
    calc.a.value=""
    calc.opr.value=""
    calc.b.value=""
    calc.c.value=""
    flag = false;
  }
//-->
</script>
<style type="text/css">
p {
  font-family:verdana;
  font-size:10px;
  line-height:1.6em;
  font-weight:bold;
  color:#727272
}
</style>
</head>
<body onload=kosong()>
<center>
<p style="padding:20px 0px 30px 0px"><font size="6">JavaScript Calculator</font></p>
<form name="calc">
  <table border="4" bordercolor="#3333ff">
    <tr>
      <td>
      <input type="text" name="a" size="2" />
      <input type="text" name="opr" size="1" />
      <input type="text" name="b" size="2" /> =
      <input type="text" name="c" size="2" />
      <br/>
      </td>
    </tr>
    <tr>
      <td>
      <input type="button" name="one"   value="  1  " onclick="isi(1)" />
      <input type="button" name="two"   value="  2  " onclick="isi(2)" />
      <input type="button" name="three" value="  3  " onclick="isi(3)" />
      <input type="button" name="plus"  value="  +  " onclick="tambah()" />
      <br/>
      <input type="button" name="four"  value="  4  " onclick="isi(4)" />
      <input type="button" name="five"  value="  5  " onclick="isi(5)" />
      <input type="button" name="six"   value="  6  " onclick="isi(6)" />
      <input type="button" name="minus" value="  -  " onclick="kurang()" />
      <br/>
      <input type="button" name="seven" value="  7  " onclick="isi(7)" />
      <input type="button" name="eight" value="  8  " onclick="isi(8)" />
      <input type="button" name="nine"  value="  9  " onclick="isi(9)" />
      <br/>
      <input type="button" name="clear" value="  c  " onclick="kosong()" />
      <input type="button" name="zero"  value="  0  " onclick="isi(0)" />
      <input type="button" name="DoIt"  value="  =  " onclick="calc.c.value=eval(calc.a.value+calc.opr.value+calc.b.value)" />
      <br/>
      </td>
    </tr>
  </table>
</form>
<p>Created by : <br/>Randy Septian Dewa Putra</p><hr/>
<p>2009 &copy; RanTech Inc. All Rights Reserved.</p>
</center>
</body>
</html>

Untuk melihat hasilnya coba aja klik disini. Semoga bermanfaat ya..

15 Comments for this entry

sip
December 20th, 2011 on 8:41 PM
:nyembah:
mantap

Reply
okayy
January 9th, 2012 on 8:24 AM
hmphhh ka’ka yang fungsi flag tuhh buatt apaa yaa??

Reply

2 Trackbacks / Pingbacks for this entry

H4c-k3r « Ridwan the HACKER
September 19th, 2011 on 9:50 PM
[...] Membuat JavaScript Kalkulator [...]
Membuat Javascript Kalkulator | amaliarachma
December 17th, 2011 on 4:17 PM
[...] Klik Di Sini ya… [...]

Hii.. Welcome to Randy's Blog of Life!
Thanks for dropping by! Feel free to join the discussion by leaving comments, and stay updated by subscribing to the RSS feed. See ya around!
Masukkan alamat email Anda untuk selalu mendapatkan kiriman artikel terbaru :

Ayo berlangganan RSS!!