Cara Membuat Kalkulator Dengan Javascript

Buat pembaca yang lagi belajar bahasa pemrograman javascript sama seperti saya yang lagi belajar dikampus juga ,mungkin postingan yang satu ini bisa membantu pembaca untuk mengetahui lebih dalam tentang java script...seperti judul diatas,pada postingan ini saya akan mencoba menuliskan sedikit coding yang berfungsi untuk membuat kalkulator sederhana.

Langsung saja ya, Silahkan copy coding berikut ke dalam html anda yaitu dibagian badan program yang telah anda buat. kodenya adalah :
<body> <center> <form name="Keypad" action=""> <table> <b><table border=2 width=50 height=60 cellpadding=1 cellspacing=5> <tr> <td colspan=3 align=middle> <input name="ReadOut"type="Text" size=24 value="0" width=100%> </TD><TD </TD> <td> <input name="btnClear" type="Button" value=" C " onclick="Clear()"> </TD> <td> <input name="btnClearEntry" type="Button" value=" CE " onclick="ClearEntry()"> </TD> </TR> <tr> <td> <input name="btnSeven" type="Button" value=" 7 " onclick="NumPressed(7)"> </TD> <td> <input name="btnEight" type="Button" value=" 8 " onclick="NumPressed(8)"> </TD> <td> <input name="btnNine" type="Button" value=" 9 " onclick="NumPressed(9)"> </TD> <td> </TD> <td> <input name="btnNeg" type="Button" value=" +/- " onclick="Neg()"> </TD> <td> <input name="btnPercent" type="Button" value=" % " onclick="Percent()"> </TD> </TR> <tr> <td> <input name="btnFour" type="Button" value=" 4 " onclick="NumPressed(4)"> </TD> <td> <input name="btnFive" type="Button" value=" 5 " onclick="NumPressed(5)"> </TD> <td> <input name="btnSix" type="Button" value=" 6 " onclick="NumPressed(6)"> </TD> <td> </TD> <td align=middle> <input name="btnPlus" type="Button"" value=" + " onclick="Operation('+')"> </TD> <td align=middle> <input name="btnMinus" type="Button"value=" - " onclick="Operation('-')"> </TD> </TR> <tr> <td> <input name="btnOne" type="Button" value=" 1 "onclick="NumPressed(1)"> </TD> <td> <input name="btnTwo" type="Button" value=" 2 " onclick="NumPressed(2)"> <</TD> td> <input name="btnThree" type="Button" value=" 3 " onclick="NumPressed(3)"> </TD> <td> </TD> <td align=middle> <input name="btnMultiply" type="Button" value=" * " onclick="Operation('*')"> </TD> <td align=middle> <input name=""btnDivide" type="Button" value=" / " onclick="Operation('/')"> </TD> </TR> <tr> <td> <input name="btnZero" type="Button" value=" 0 " onclick="NumPressed(0)"> </TD> <td> <input name="btnDecimal" type="Button" value=" . " onclick="Decimal()"> </TD> <td colspan=3> </TD> <td> <input name="btnEquals" type="Button" value=" = " onclick="Operation('=')"> </TD> </TR> </TABLE> </TABLE></B> </FORM> </CENTER> <font face="Verdana, Arial, Helvetica" size=2> <script LANGUAGE="JavaScript"> <!-- Begin var FKeyPad = document.Keypad; var Accum = 0; var FlagNewNum = false; var PendingOp = ""; function NumPressed (Num) { if (FlagNewNum) { FKeyPad.ReadOut.value = Num; FlagNewNum = false; } else { if (FKeyPad.ReadOut.value == "0") FKeyPad.ReadOut.value = Num; else FKeyPad.ReadOut.value += Num; } } function Operation (Op) { var Readout = FKeyPad.ReadOut.value; if (FlagNewNum && PendingOp != "="); else { FlagNewNum = true; if ( '+' == PendingOp ) Accum += parseFloat(Readout); else if ( '-' == PendingOp ) Accum -= parseFloat(Readout); else if ( '/' == PendingOp ) Accum /= parseFloat(Readout); else if ( '*' == PendingOp ) Accum *= parseFloat(Readout); else Accum = parseFloat(Readout); FKeyPad.ReadOut.value = Accum; PendingOp = Op; } } function Decimal () { var curReadOut = FKeyPad.ReadOut.value; if (FlagNewNum) { curReadOut = "0."; FlagNewNum = false; } else { if (curReadOut.indexOf(".") == -1) curReadOut += "."; } FKeyPad.ReadOut.value = curReadOut; } function ClearEntry () { FKeyPad.ReadOut.value = "0"; FlagNewNum = true; } function Clear () { Accum = 0; PendingOp = ""; ClearEntry(); } function Neg () { FKeyPad.ReadOut.value = parseFloat(FKeyPad.ReadOut.value) * -1; } function Percent () { FKeyPad.ReadOut.value = (parseFloat(FKeyPad.ReadOut.value) / 100) * parseFloat(Accum); } // End --> </SCRIPT>---> <!-- Script Size: 4.05 KB -->

Jika pengcopyan dan peletakannya benar,maka pada saat dijalankan, tampilannya akan seperti gambar berikut 



Terima kasih, Semoga membantu.


Baca Misteri

Baca Misteri