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

evta
March 21st, 2010 on 5:43 PM

makasih tutorial nya brother…

minta izin mau di modif yakh!!!

Reply
- Randy Septian
  March 25th, 2010 on 1:12 PM
  Oke..
  Semoga bermanfaat ya…
  
  Reply
mm
June 17th, 2010 on 5:12 PM
kok eror

Reply
- Randy Septian
  July 23rd, 2010 on 3:41 PM
  masa sih? error dimana ya? mungkin browser kamu belum enable untuk javascriptnya…
  
  Reply
dini
April 7th, 2011 on 2:16 PM
bagus bagus …

Reply
karim muhtadi
April 11th, 2011 on 10:44 AM

muantab suratab

Reply
fauzi
April 26th, 2011 on 2:28 PM
wah artikelnya bagus..
oya mau nanya nih cara buat tulisan bergerak d artikl gimana ya..

Reply
- Randy Septian
  April 27th, 2011 on 8:15 PM
  Thanks ya..
  Tulisan bergeraknya yang seperti apa? kan banyak macamnya… kalau yang hanya bergerak dari kiri ke kanan bisa menggunakan marquee saja, ini ada referensi untuk marquee mungkin bisa membantu :
  http://www.quackit.com/html/codes/html_marquee_code.cfm
  
  Reply
maswardi
April 29th, 2011 on 4:24 PM
thanks infonya gan, mau neh belajar java

Reply
fina
May 10th, 2011 on 2:12 PM
oce…

Reply
hegina
May 10th, 2011 on 2:14 PM

Reply
Irwanto Musa
June 10th, 2011 on 6:19 PM
mksh bro atas bantuanx….
moga kedepan lbh banyak buat script kalkulator ge.

Reply
uya
July 11th, 2011 on 10:26 PM
Gan cara membuat onclik smile seperti ini gmn y

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!!