Cara membuat aplikasi kalkulator sderhana

Langsung saja tanpa basa – basi lagi, begini langkah – langkah pembuatannya.

1. Yang pertama buatlah sebuah form dengan nama Kalkulator.

1	"Kalkulator">

2. Selanjutnya buat sebuah input text dengan nama Layar untuk menampilkan hasil operasi dari kalkulator.

1	"text" style="width:142px" name="Layar" />

3. Kemudian buat sebuah tombol close disamping input text. Fungsinya sebagai pembersih nilai yang muncul pada input text. Artinya jika setelah melakukan perhitungan pada kalkulator, tentunya kita juga ingin membersihkan layar tersebut tanpa harus menghapusnya satu per satu. Maka dari itu dibutuhkan tombol ini.

1 2 3

"javascript:void(0)">"close.png" width="12" />

Penjelasan :
Tombol diatas diberi fungsi onclick=”Kalkulator.Layar.value=’’”,
Kalkulator : Nama Form
Layar : Nama Input Text
Value : Nilai yang ingin ditampilkan.
Artinya tombol diatas menampilkan nilai empty (kosong) pada input text dengan nama Layar.

4. Selanjutnya buat tombol – tombol angka dan pengoperasiannya dibawah input text. 

• Baris pertama menampilkan tombol dengan angka 7,8,9 dan (/).

1 2 3 4

"button" value="7" onclick="Kalkulator.Layar.value += '7'" /> "button" value="8" onclick="Kalkulator.Layar.value += '8'" /> "button" value="9" onclick="Kalkulator.Layar.value += '9'" /> "button" value="/" onclick="Kalkulator.Layar.value += ' / '">

• Baris kedua menampilkan tombol dengan angka 4, 5, 6, dan (x).

1 2 3 4

"button value="4" onclick="Kalkulator.Layar.value += '4'" /> "button" value="5" onclick="Kalkulator.Layar.value += '5'" /> "button" value="6" onclick="Kalkulator.Layar.value += '6'" /> "button" value="x" onclick="Kalkulator.Layar.value += ' * '" />

• Baris ketiga menampilkan tombol dengan angka 1, 2, 3, dan (-).

1 2 3 4

"button" value="1" onclick="Kalkulator.Layar.value += '1'" /> "button" value="2" onclick="Kalkulator.Layar.value += '2'" /> "button" value="3" onclick="Kalkulator.Layar.value += '3'" /> "button" value="-" onclick="Kalkulator.Layar.value += ' - '" />

• Baris yang terakhir yaitu menampilkan angka (.), 0, (=), dan (+).

1 2 3 4

"button" value="." onclick="Kalkulator.Layar.value += '.'" /> "button" value="0" onclick="Kalkulator.Layar.value += '0'" /> "button" value="=" onclick="Kalkulator.Layar.value = Math.round( eval(Kalkulator.Layar.value) * 1000)/1000" /> "button" value="+" onclick="Kalkulator.Layar.value += ' + '" />

Penjelasan :

Pada Baris terakhir pada tombol (=), ada sebuah fungsi tambahan yaituMath.round(). Fungsinya yaitu menghitung angka pecahan menjadi desimal dengan membulatkannya ke atas. Misal, pada fungsi Math.round() kita isi dengan inputan5.5, maka nilai 5.5 akan dibulatkan keatas yaitu 6. Maka pada tombol (=) ditambahkan fungsi eval() yang berada didalam fungsi Math.round(), dan dikalikan1000 kemudian hasil dari Math.round() tersebut dibagi 1000. Artinya jika ada inputan pecahan seperti 5.5, maka akan dikalikan 1000 menjadi 5500, kemudian dibagi 1000 menjadi 5.5 kembali. Kenapa saya lakukan ini? Jawabannya yaitu agar kalkulator mendapatkan hasil pecahan tersebut. Karena jika tidak di kalikan dan dibagi 1000, maka hasil yang didapat adalah angka desimal, yaitu 6.

5. Masih bingung dengan penjelasan saya? Silahkan coba untuk menghilangkan fungsi kali dan bagi 1000 tersebut menjadi : 

1	"button" value="=" onclick="Kalkulator.Layar.value = Math.round( eval(Kalkulator.Layar.value) )" />

Read more ...