Membuat Program Kalkulator Sederhana

Artikel kali ini akan membahas tentang belajar pemograman sederhana, yakni bagaimana cara membuat kalkulator sederhana dengan JavaScript. Cara membuatnya cukup mudah dan anda tidak usah repot-repot memutar otak untuk merangkai kode demi kode.

Selain sederhana program kalkulator ini dapat Anda edit sesuai dengan keinginan Anda. Untuk membuatnya anda hanya perlu membuka program notepad di komputer Anda dan mengcopy paste kode di bawah ini pada notepad. Kemudian Simpan file dalam format html, caranya dibagian save as type diganti ke allfiles kemudian tambahkan .html pada nama file contohnya kalkulator.html, lalu buka file tersebut melalui browser.

Penasaran? Berikut Kodenya :

Kalkulator I

<html>
    <head>
    <title>Kalkulator | BLOG ANAK BANGSA</title>
    </head>
    <SCRIPT LANGUAGE="JavaScript">
    function penjumlahan() {
    var a1=prompt("Masukkan angka pertama :",0);
    var a2=prompt("angka "+a1+ " mau ditambahkan dengan angka berapa?",0);
    c=eval(a1)+eval(a2);
    document.write("Hasil dari "+a1+"+"+a2+"="+c);
    }

    function pengurangan() {
    var a1=prompt("Masukkan angka pertama :",0);
    var a2=prompt("angka "+a1+ " mau dikurangi dengan angka berapa?",0);
    c=eval(a1)-eval(a2)
    document.write("Hasil dari "+a1+"-"+a2+"="+c);
    }

    function perkalian() {
    var a1=prompt("Masukkan angka pertama :",0);
    var a2=prompt("angka "+a1+ " mau dikalikan dengan angka berapa?",0);
    c=eval(a1)*eval(a2)
    document.write("Hasil dari "+a1+"x"+a2+"="+c);
    }

    function pembagian() {
    var a1=prompt("Masukkan angka pertama :",0);
    var a2=prompt("angka "+a1+ " mau dibagi dengan angka berapa?",0);
    c=eval(a1)/eval(a2)
    document.write("Hasil dari"+a1+"/"+a2+"="+c);
    }
    </SCRIPT>

    <body onload="alert('Silahkan klik tombol untuk memulai perhitungan')">
    <a href="" onMouseOver="alert('Copyright @ BLOG ANAK BANGSA | www.ifoell.blogspot.com')">
    <font color='blue' size=6><u> Kalkulator by www.ifoell.blogspot.com</u></font></a><br><br>
    <input type="button" value="Penjumlahan" onClick="penjumlahan()">
    <input type="button" value="Pengurangan" onClick="pengurangan()">
    <input type="button" value="Perkalian" onClick="perkalian()">
    <input type="button" value="Pembagian" onClick="pembagian()">

    </body>
 </html>

Copy kode di atas, paste pada program Notepad. Simpan file dalam format html, Contoh : kalkulator.html, dibagian save as type diganti ke all files. Selain kode pertama di atas, berikut kode lain cara membuat program kalkulator sederhana dengan menggunakan notepad.

Hasilnya lihat pada tombol demo berikut :

Kalkulator II

<html>
<title>Program Kalkulator Sederhana | BLOG ANAK BANGSA</title>
<SCRIPT LANGUAGE="JavaScript">
window.defaultStatus="Support by ifoell.blogspot.com"
function tambah()
{
a=eval(form.a.value)
b=eval(form.b.value)
c=a+b
form.hasil.value = c
}

function kurang()
{
a=eval(form.a.value)
b=eval(form.b.value)
c=a-b
form.hasil.value=c
}

function kali()
{
a=eval(form.a.value)
b=eval(form.b.value)
c=a*b
form.hasil.value=c
}

function bagi()
{
a=eval(form.a.value)
b=eval(form.b.value)
c=a/b
form.hasil.value = c
}

function pangkat()
{
a=eval(form.a.value)
b=eval(form.b.value)
c=Math.pow(a, b)
form.hasil.value = c
}

function kosong()
{
form.a.focus()
form.a.value=""
form.b.value=""
form.hasil.value=""

}
</SCRIPT>

<body onload=kosong()>
<CENTER>
<font size="5">Program Kalkulator</font>
<hr size="5" color="red">
<FORM name="form">
<pre>
Angka 1 <input type="text" name="a">
Angka 2 <input type="text" name="b">

Hasil <input type "text" name="hasil" disabled="true">
</pre>
<hr size="2" color="blue">
<input type="button" value=" + " onClick="tambah()">
<input type="button" value=" - " onClick="kurang()">
<input type="button" value=" x " onClick="kali()">
<input type="button" value=" / " onClick="bagi()">
<input type="button" value=" ^ " onClick="pangkat()"><br>
<input type="button" value=" Kosong " onClick="kosong()">

<br>
Oleh: BLOG ANAK BANGSA<br>
Support by: http://ifoell.blogspot.com
</FORM>
</CENTER>

</body>
</html>

Cara membuatnya sama dengan cara pertama. Tinggal Copy kodenya dan simpan di notepad dengan menggunakan ekstention file .html.

Hasilnya lihat pada tombol demo berikut :

Semoga Bermanfaat