Kalkulator merupakan alat bantu hitung yang biasa kita temukan di berbagai tempat, seperti warung, pasar dan tempat lainnya. Kalau pengertian kalkulator menurut Wikipedia adalah alat untuk menghitung dari perhitungan sederhana seperti penjumlahan, pengurangan, perkalian dan pembagian sampai kepada kalkulator sains yang dapat menghitung rumus matematika tertentu(1).
Saat ini mari kita coba membuat sendiri kalkulator sederhana yang dapat menghitung perhitungan dasar (penjumlahan, pengurangan, perkalian dan pembagian) yang dapat kita terapkan di web. Javascript merupakan bahasa scripting yang populer di internet dan bekerja di semua browser, seperti firefox, internet explorer, chrome, Opera dan Safari(2).
Oke, langsung saja kita mulai merancang desain bentuk kalkulator. Anda dapat merancang sendiri bentuk kalkulator yang Anda inginkan. Saya tidak perlu menjelaskannya di sini, karena saya yakin Anda lebih jago bagaimana melakukannya (maklum kurang jago kalau masalah desain-mendesain….hehheheh J). Tapi, tetap desain bentuk kalkulator, karena tujuan awal kita untuk membuat kalkulator, jangan desain mobil looh (hehehee siapa tau Anda terlalu mahir dalam desain-mendesain). Inilah desain simpel yang saya buat menggunakan Adobe Dreamweaver CS5.
Heheh…. Cukup simpel kan? Nah di bawah ini saya sertakan script html nya:
Form Kalkulator :
Kalkulator Web
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Kalkulator Web</title>
</head>
<body bgcolor="#C6EB94">
<form id="form1" name="form1" method="post" action="">
<table width="120" border="0" align="center" cellpadding="1" cellspacing="1">
<tr>
<td colspan="4" align="center" valign="top"><input type="text" name="layar" id="layar" align="right" /></td>
</tr>
<tr>
<td align="center" valign="middle"><input type="button" name="1" value="1" onclick="return InputData(1)" /></td>
<td align="center" valign="middle"><input type="button" name="2" value="2" onclick="return InputData(2)" /></td>
<td align="center" valign="middle"><input type="button" name="3" value="3" onclick="return InputData(3)" /></td>
<td align="center" valign="middle"><input type="button" name="tambah" value="+" onclick="return pilTambah()" /></td>
</tr>
<tr>
<td align="center" valign="middle"><input type="button" name="4" value="4" onclick="return InputData(4)" /></td>
<td align="center" valign="middle"><input type="button" name="5" value="5" onclick="return InputData(5)" /></td>
<td align="center" valign="middle"><input type="button" name="6" value="6" onclick="return InputData(6)" /></td>
<td align="center" valign="middle"><input type="button" name="kurang" value="-" onclick="return pilKurang()" /></td>
</tr>
<tr>
<td align="center" valign="middle"><input type="button" name="7" value="7" onclick="return InputData(7)" /></td>
<td align="center" valign="middle"><input type="button" name="8" value="8" onclick="return InputData(8)" /></td>
<td align="center" valign="middle"><input type="button" name="9" value="9" onclick="return InputData(9)" /></td>
<td align="center" valign="middle"><input type="button" name="kali" value="x" onclick="return pilKali()" /></td>
</tr>
<tr>
<td align="center" valign="middle"><input type="button" name="pm" value="±" onclick="return plusMinus()" /></td>
<td align="center" valign="middle"><input type="button" name="0" value="0" onclick="return InputData(0)" /></td>
<td align="center" valign="middle"><input type="button" name="." value="." onclick="return InputData('.')" /></td>
<td align="center" valign="middle"><input type="button" name="bagi" value="/" onclick="return pilBagi()" /></td>
</tr>
<tr>
<td align="center" valign="middle"> </td>
<td align="center" valign="middle"> </td>
<td colspan="2" align="center" valign="middle"><input type="button" name="hasil" value="=" onclick="return Hasil()" /></td>
</tr>
</table>
</form>
</body>
</html>
Script di atas hanya merupakan script untuk membuat form kalkulator sederhana seperti gambar di atas, tidak termasuk fungsi perhitungan javascriptnya. Nah, sekaranglah kita bahas tentang fungsi perhitungan menggunakan javascript. Dimulai dengan bagaimana menginputkan angka kedalam textbox layar. Konsepnya bila kita menekan tombol angka, maka angkanya masuk ke textbox layar. Nah berikut script fungsi untuk memasukkan angka ke textbox layar.
function InputData(x){
var nil = x;
document.form1.layar.value=document.form1.layar.value+nil;
}
Sebelumnya, deklarasikan nilai pertama, nilai kedua dan operator yang akan dipilih oleh user. Di sini saya mendeklarasikan nilai pertama adalah nil1, nilai kedua adalah nil2 dan operator adalah op. di bawah ini contoh pendeklarasiannya.
var nil1;
var nil2;
var op;
Selanjutnya langkah untuk memberikan nilai, konsepnya ketika user sudah memasukkan nilai pertama maka, user akan memilih operator yang akan digunakan untuk operasi perhitungan sederhana (penjumlahan, pengurangan, perkalian atau pembagian) dan selanjutnya user akan memasukkan nilai kedua hingga ada aksi penekanan tombol hasil (=). Berikut ini script fungsi memberikan nilai pertama dan pemilihan operator
Script operator penjumlahan :
function pilTambah(){
op = 'add';
nil1 = parseFloat(document.form1.layar.value);
document.form1.layar.value="";
}
Script operator pengurangan :
function pilKurang(){
op = 'min';
nil1 = parseFloat(document.form1.layar.value);
document.form1.layar.value="";
}
Script operator perkalian :
function pilKali(){
op = 'kali';
nil1 = parseFloat(document.form1.layar.value);
document.form1.layar.value="";
}
Script operator pembagian :
function pilBagi(){
op = 'bagi';
nil1 = parseFloat(document.form1.layar.value);
document.form1.layar.value="";
}
Nah sekarang nilai pertama dan operator telah diberikan nilai. Selanjutnya bagaimana memberikan nilai kedua dan menghitung kedua nilai tersebut dengan perhitungan dasar. Nilai operator yang telah kita berikan nilai berfungsi untuk menyeleksi operasi perhitungan yang akan dijalankan. Berikut ini script fungsi perhitungannya.
function Hasil(){
nil2 = parseFloat(document.form1.layar.value);
if(op=='add'){
document.form1.layar.value = nil1 + nil2;
}else if(op=='min'){
document.form1.layar.value = nil1 - nil2;
}else if(op=='kali'){
document.form1.layar.value = nil1 * nil2;
}else if(op=='bagi'){
document.form1.layar.value = nil1 / nil2;
}
}
Sekarang kalkulator sederhana yang kita buat sudah selesai, dan dapat berfungsi sebagaimana mestinya fungsi kalkulator. Namun satu tombol yang belum dapat berfungsi yaitu tombol ± yang mestinya berfungsi untuk memberikan nilai minus jika inputan yang user inginkan nilainya kurang dari nol(0). Konsepnya sederhana, jika menekan tombol ± maka nilai di textbox layar akan memberikan nilai minus kalau nilai sebelumnya lebih besar dari 0. Caranya hanya dengan mengalikan nilai sebelumnya dengan -1. Berikut ini script fungsi plus-minus.
function plusMinus(){
var cek = parseFloat(document.form1.layar.value);
if(cek<0){
document.form1.layar.value = cek * (-1);
}else{
document.form1.layar.value = cek * (-1);
}
}
Nah sekarang sudah lengkap, kalkularor sederhana yang kita buat. Silakan anda tambahkan fungsi-fungsi lain, agar lebih baik lagi. Seperti fungsi kuadrat (x2), akarkuadrat (√x) dan lain-lain. Oke selamat mencoba.
Sumber : http://id.wikipedia.org/wiki/Kalkulator(1)
http://www.w3schools.com/js/js_intro.asp(2)
mas Yitno, salam kenal,
BalasHapussaya mau pake scrip nya kok nggak bisa jalan, di klik nggak muncul nomornya? itu kode scrip yang di bawahnya ditaroh dimana? bingung ni
maaf mas baru balas, kode yang mana ya?
BalasHapusapa maksudnya mas kode fungsi plusMinus nya? atau semuanya? kalau function2 tu buat tag javascript di bagian tag head htmlnya, atau buat file dan kemudian dipanggil dari file form itu....
terima kasih gan
BalasHapusmembantu banget lah
okeee.. syukurlah kalau begitu
Hapushttps://sites.google.com/site/zulnasibu/mathparser
BalasHapusit's cool
Hapusmas scrip yg ini
BalasHapusfunction InputData(x){
var nil = x;
document.form1.layar.value=document.form1.layar.value+nil;
}
di gmnain, naronya dmna ??? bkin folder lg apa di gmnain ??? dan yg lainnya jga d gmnain , maaf mas tolong penjelasannyaa ???
terimakasih :)
script ini ditempatkan di file yg sama mas, karena tinggal dipanggil saja function nya
HapusKak itu function InputDatanya diletak dimana ya ?
BalasHapusMantap gan, yg coding fungsi", pake coding javascript jangan lupa pake <>
BalasHapusscript
function InputData(x){
var nil = x;
document.form1.layar.value=document.form1.layar.value+nil;
}
script
semua yg ada fungsinya masukin ke codingan di atas
Kak, untuk html sama css di atas bisa di pakai untuk bahasa PHP nggak?
BalasHapusmaksudnya bagaimana?
Hapuskalau ngubah ekstensi file dari .html ke .php bisa aja
coba aja copy html dan dibuat dengan file php