Asalamualaikum Wr Wb.
Udah lama banget gak bikin tutorial, sebenernya setiap kali nongkrong di wc selalu kepikiran bikin tutorial, karena gue percaya dengan cara membuat tutorial / berbagi ilmu kepada orang lain, kelak gue juga bakal dapet ilmu baru dari orang lain. Oke cukup basa basinya !
Untuk membuat kalkulator dengan javascript, kita menggunakan bahasa dasar HTML. Silahkan buka editor apapun yang kalian suka, gue pakai sublime text.
Langkah awal adalah membuat desain, ini code nya.
<input type="text" id="bilangan1"/>
<input type="text" id="bilangan2"/>
<button>Tambah</button>
<button>Kurang</button>
<button>Kali</button>
<button>Bagi</button>
<h2 id="hasil">0</h2>
</body>
Dan setelah itu kita membuat Script di bagian head
dan kemudian tambahkan event pada setiap button
hingga semua code terlihat seperti ini
<!DOCTYPE HTML>Simpan dengan nama apapun dengan ektensi .html, contoh “kalkulator.html” tanpa tanda kutip. dan tampilan ketika di jalankan akan menjadi seperti gambar dibawah ini.
<html>
<head>
<title>Membuat Kalkulator Dengan Javascript</title>
<script type="text/javascript">
function tambah(val1, val2){
var hasil;
hasil=parseInt(val1)+parseInt(val2);
document.getElementById("hasil").innerHTML=hasil;}
function kurang(val1, val2){
var hasil;
hasil=parseInt(val1)-parseInt(val2);
document.getElementById("hasil").innerHTML=hasil;
}
function kali(val1, val2){
var hasil;
hasil=parseInt(val1)*parseInt(val2);
document.getElementById("hasil").innerHTML=hasil;
}
function bagi(val1, val2){
var hasil;
hasil=parseInt(val1)/parseInt(val2);
document.getElementById("hasil").innerHTML=hasil;
}
</script>
</head>
<body>
<input type="text" id="bilangan1"/>
<br>
<input type="text" id="bilangan2"/>
<br>
<button onclick=tambah(bilangan1.value,bilangan2.value)>Tambah</button>
<button onclick=kurang(bilangan1.value,bilangan2.value)>Kurang</button>
<button onclick=kali(bilangan1.value,bilangan2.value)>Kali</button>
<button onclick=bagi(bilangan1.value,bilangan2.value)>Bagi</button>
<br>
<h2 id="hasil">0</h2>
</body>
</html>
Download Source Code Disini Kalkulator Dengan Javascript.rar
Selamat mencoba dan semoga berhasil
Wasalam.