Cara Membuat Kalkulator Di Blog

Kampungku: Setelah kemarin saya share tentang lingkungan. Nah kali ini saya akan membahas tentang belajar cara membuat kalkulator sederhana dengan JavaScript, cara buatnya cukup mudah dansobat tidak usah repot-repot memutar otak untuk membuatnya karena membuat sebuah kalkulator sangatlah sederhana sekali. Untuk membuatnya anda hanya perlu membuka notepad dan sobat copas kode di bawah ini pada notepad anda.
Demo:1

Kalau mau yg agak agak canggih dan komplit silahkan pki yg gambar 2.
Demo:2.

Bagi yang berminat membuatnya silahkan copas saja javascrift di bawah,dan pastekan saja,digadget atau di postingan.
                                                           
Kode kalkulator 1.

JavaCcrift:

<style>
.atur {
       text-align:right;
    font-size:8pt;
      }
</style>
<script language=javascript>
function tom1()
        {document.kal.hasil.value=document.kal.hasil.value+1;}
function tom2()
        {document.kal.hasil.value=document.kal.hasil.value+2;}
function tom3()
        {document.kal.hasil.value=document.kal.hasil.value+3;}
function tom4()
        {document.kal.hasil.value=document.kal.hasil.value+4;}
function tom5()
        {document.kal.hasil.value=document.kal.hasil.value+5;}
function tom6()
        {document.kal.hasil.value=document.kal.hasil.value+6;}
function tom7()
        {document.kal.hasil.value=document.kal.hasil.value+7;}
function tom8()
        {document.kal.hasil.value=document.kal.hasil.value+8;}
function tom9()
        {document.kal.hasil.value=document.kal.hasil.value+9;}
function tom0()
        {document.kal.hasil.value=document.kal.hasil.value+0;}
function plus()
        {document.kal.simp.value=document.kal.hasil.value;
        document.kal.opr.value="+";
        document.kal.hasil.value="";}
function kalii()
        {document.kal.simp.value=document.kal.hasil.value;
        document.kal.opr.value="*";
        document.kal.hasil.value="";}
function bagii()
        {document.kal.simp.value=document.kal.hasil.value;
        document.kal.opr.value="/";
        document.kal.hasil.value="";}
function mini()
        {document.kal.simp.value=document.kal.hasil.value;
        document.kal.opr.value="-";
        document.kal.hasil.value="";}
function samadg()
{
              if(document.kal.opr.value=="+")
        {document.kal.hasil.value=eval(document.kal.simp.value)+eval(document.kal.hasil.value);}
        if(document.kal.opr.value=="-")
        {document.kal.hasil.value=eval(document.kal.simp.value)-eval(document.kal.hasil.value);}
        if(document.kal.opr.value=="*")
        {document.kal.hasil.value=eval(document.kal.simp.value)*eval(document.kal.hasil.value);}
        if(document.kal.opr.value=="/")
        {document.kal.hasil.value=eval(document.kal.simp.value)/eval(document.kal.hasil.value);}
}
     </script>
<form name=kal>
<table border=1 bgcolor=black>
<tr>    <td colspan=4><center><input type=text name=hasil class=atur>
<tr>    <td><input type=button name=satu value=1 onclick=tom1()>
    <td><input type=button name=dua value=2 onclick=tom2()>
    <td><input type=button name=tiga value=3 onclick=tom3()>
    <td><input type=button name=empat value=4 onclick=tom4()>
<tr>    <td><input type=button name=lima value=5 onclick=tom5()>
    <td><input type=button name=enam value=6 onclick=tom6()>
    <td><input type=button name=tujuh value=7 onclick=tom7()>
    <td><input type=button name=delapan value=8 onclick=tom8()>
<tr>    <td><input type=button name=sembilan value=9 onclick=tom9()>
    <td><input type=button name=nol value=0 onclick=tom0()>
    <td><input type=button name=tambah value=+ onclick=plus()>
    <td><input type=button name=adalah value="=" onclick=samadg()>
<tr>    <td><input type=button name=min value=- onclick=mini()>
    <td><input type=button name=kali value=* onclick=kalii()>
    <td><input type=button name=bagi value=/ onclick=bagii()>
    <td><input type=button name=back value="<<">
<tr>    <td><input type=hidden name=simp>
    <td><input type=hidden name=opr>
</table>
</form>

Kode Kalkulator 2.

JavaCcrift:

<form action="" name="Keypad">
<table bgcolor="#838383" border="1">
<tbody>
<tr> 
<td bgcolor="#DFDFDF" colspan="5"><input name="ReadOut" size="30" type="Text" value="0" />
</td>
</tr>
<tr> 
<td bgcolor="#DFDFDF"><input name="btnSeven" onclick="NumPressed(7)" type="Button" value="  7  " />
</td>
<td bgcolor="#DFDFDF"><input name="btnEight" onclick="NumPressed(8)" type="Button" value="  8  " />
</td>
<td bgcolor="#DFDFDF"><input name="btnNine" onclick="NumPressed(9)" type="Button" value="  9  " />
</td>
<td bgcolor="#DFDFDF"><input name="btnNeg" onclick="Neg()" type="Button" value=" +/- " /></td>
<td bgcolor="#DFDFDF"><input name="btnPercent" onclick="Percent()" type="Button" value=" % " /></td>


</tr>
<tr> 
<td bgcolor="#DFDFDF"><input name="btnFour" onclick="NumPressed(4)" type="Button" value="  4  " />
</td>
<td bgcolor="#DFDFDF"><input name="btnFive" onclick="NumPressed(5)" type="Button" value="  5  " />
</td>
<td bgcolor="#DFDFDF"><input name="btnSix" onclick="NumPressed(6)" type="Button" value="  6  " />
</td>
<td bgcolor="#DFDFDF"><input name="btnPlus" onclick="Operation('+')" type="Button" value="  +  " /></td>
<td bgcolor="#DFDFDF"><input name="btnMultiply" onclick="Operation('*')" type="Button" value="  *  " /></td>


</tr>
<tr> 
<td bgcolor="#DFDFDF"><input name="btnOne" onclick="NumPressed(1)" type="Button" value="  1  " />
</td>
<td bgcolor="#DFDFDF"><input name="btnTwo" onclick="NumPressed(2)" type="Button" value="  2  " />
</td>
<td bgcolor="#DFDFDF"><input name="btnThree" onclick="NumPressed(3)" type="Button" value="  3  " />
</td>
<td bgcolor="#DFDFDF"><input name="btnMinus" onclick="Operation('-')" type="Button" value="  -  " /></td>
<td bgcolor="#DFDFDF"><input name="btnDivide" onclick="Operation('/')" type="Button" value="  /  " /></td>


</tr>
<tr> 
<td bgcolor="#DFDFDF"><input name="btnZero" onclick="NumPressed(0)" type="Button" value="  0  " />
</td>
<td bgcolor="#DFDFDF"><input name="btnDecimal" onclick="Decimal()" type="Button" value="  .  " />
</td>
<td bgcolor="#797979" colspan="3"><input name="btnClear" onclick="Clear()" type="Button" value="  C  " />
<input name="btnClearEntry" onclick="ClearEntry()" type="Button" value=" CE " />
<input name="btnEquals" onclick="Operation('=')" type="Button" value="  =  " /></td>
</tr>
</tbody></table>
</form>
<script language="JavaScript">
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);
}
</script>

Setelah sobat paste, seperti biasanya segera save kode di atas dan simpan dengan extensi *.html, seperti kalkulatorjava.html, mudah dan sederhana bukan, jangan lupa kalo berhasil Belajar JavaScript inget komentarnya. Selamat mencoba dan semoga bermanfaat.
Sumber ada di google,cari ya,saya sudah lupa.