Kumpulan Tutorial Kito: Membuat Kalkulator

Membuat Kalkulator Dari Javascript

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⁽¹⁾.

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 :

<!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 (x²), akarkuadrat (√x) dan lain-lain. Oke selamat mencoba.

Sumber : http://id.wikipedia.org/wiki/Kalkulator⁽¹⁾

http://www.w3schools.com/js/js_intro.asp(2)

Kumpulan Tutorial Kito

Senin, 19 Januari 2015

Membuat Kalkulator

Membuat Kalkulator Dari Javascript

Tidak ada komentar:

Posting Komentar