Membuat Kalkulator Sederhana dengan Java Script

Pada postingan ini saya akan menginformasikan pembuatan sebuah program kalkulator sederhana yang berisi perhitungan-perhitungan sederhana, seperti pertambahan, pengurangan, perkalian dan pembagian. Program ini menggunakan javascript yang dikoneksikan dengan html. Pertama terdapat perintah-perintah dibawah ini.

<html>
<head>
<title>Membuat program kalkulator sederhana javascript dengan prompt</title>
</head>
       Perintah diatas digunakan untuk membuat judul yaitu ‘Membuat program kalkulator sederhana javascript dengan prompt’.

<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);
alert("Hasil dari "+a1+"+"+a2+"="+c);
}
      Dalam memulai penggunaan suatu blok javascript menggunakan perintah <SCRIPT LANGUAGE ="JavaScript">. Semua coding yang akan ditulis atau digunakan dimasukkan kedalam tag tersebut. Disini kita akan membuat beberapa fungsi perhitungan pada program kalkulator sederhana. Fungsi yang pertama adalah penjumlahan. Pada fungsi penjumlahan ini terdapat perintah var a1=prompt("Masukkan angka pertama :",0); yang berfungsi untuk memunculkan kotak dialog yang akan mencetak kalimat ‘Masukkan angka pertama :’, dimana didalam kotak dialog tersebut terdapat perintah untuk melakukan penginputan nilai pertama atau variable kesatu yang akan dijumlahkan dan disimpan sebagai variable a1. Selanjutnya pada variable a2 digunakan sebagai variable kedua yang akan dijumlahkan dengan variable kesatu. Sebelum memasukkan nilai kedua akan tercetak kalimat ‘mau ditambahkan dengan angka berapa?’ yang kemudian akan diikuti dengan penginputan nilai keduanya. Kemudian dideklarasikan variable c untuk menghasilkan jumlah nilai dari proses pertambahan ini. Variable c akan menyimpan hasil dari variable a1 + a2 dan akan tecetak kalimat ‘Hasil dari’ yang diikuti dengan hasil dari proses "+a1+"+"+a2+"="+c);. Perintah alert digunakan untuk memunculkan kembali kotak dialog yang menampilkan hasil dari perhitungan. 

function pengurangan() {
var a1=prompt("Masukkan angka pertama :",0);
var a2=prompt("angka "+a1+ " mau dikurangkan dengan angka berapa?",0);
c=eval(a1)-eval(a2);
alert("Hasil dari "+a1+"-"+a2+"="+c);
}
        Disini kita akan membuat fungsi pengurangan pada program kalkulator sederhana. Pada fungsi pengurangan ini terdapat perintah var a1=prompt("Masukkan angka pertama :",0); yang berfungsi untuk memunculkan kotak dialog yang akan mencetak kalimat ‘Masukkan angka pertama :’, dimana didalam kotak dialog tersebut terdapat perintah untuk melakukan penginputan nilai pertama atau variable kesatu yang akan dikurangi dan disimpan sebagai variable a1. Selanjutnya pada variable a2 digunakan sebagai variable kedua yang akan dikurangkan dengan variable kesatu. Sebelum memasukkan nilai kedua akan tercetak kalimat ‘mau dikurangkan dengan angka berapa?’ yang kemudian akan diikuti dengan penginputan nilai keduanya. Kemudian dideklarasikan variable c untuk menghasilkan jumlah nilai dari proses pengurangan ini. Variable c akan menyimpan hasil dari variable a1 - a2 dan akan tecetak kalimat ‘Hasil dari’ yang diikuti dengan hasil dari proses "+a1+"-"+a2+"="+c);. Perintah alert digunakan untuk memunculkan kembali kotak dialog yang menampilkan hasil dari perhitungan.

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);
alert("Hasil dari "+a1+"x"+a2+"="+c);
}
Disini kita akan membuat fungsi perkalian pada program kalkulator sederhana. Pada fungsi perkalian ini terdapat perintah var a1=prompt("Masukkan angka pertama :",0); yang berfungsi untuk memunculkan kotak dialog yang akan mencetak kalimat ‘Masukkan angka pertama :’, dimana didalam kotak dialog tersebut terdapat perintah untuk melakukan penginputan nilai pertama atau variable kesatu yang akan dikalikan dan disimpan sebagai variable a1. Selanjutnya pada variable a2 digunakan sebagai variable kedua yang akan dikalikan dengan variable kesatu. Sebelum memasukkan nilai kedua akan tercetak kalimat ‘mau dikalikan dengan angka berapa?’ yang kemudian akan diikuti dengan penginputan nilai keduanya. Kemudian dideklarasikan variable c untuk menghasilkan jumlah nilai dari proses perkalian ini. Variable c akan menyimpan hasil dari variable a1*a2 dan akan tecetak kalimat ‘Hasil dari’ yang diikuti dengan hasil dari proses "+a1+"x"+a2+"="+c);. Perintah alert digunakan untuk memunculkan kembali kotak dialog yang menampilkan hasil dari perhitungan.

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);
alert("Hasil dari "+a1+"/"+a2+"="+c);
}
       Disini kita akan membuat fungsi pembagian pada program kalkulator sederhana. Pada fungsi pembagian ini terdapat perintah var a1=prompt("Masukkan angka pertama :",0); yang berfungsi untuk memunculkan kotak dialog yang akan mencetak kalimat ‘Masukkan angka pertama :’, dimana didalam kotak dialog tersebut terdapat perintah untuk melakukan penginputan nilai pertama atau variable kesatu yang akan dibagi dan disimpan sebagai variable a1. Selanjutnya pada variable a2 digunakan sebagai variable kedua yang akan dibagikan dengan variable kesatu. Sebelum memasukkan nilai kedua akan tercetak kalimat ‘mau dibagi dengan angka berapa?’ yang kemudian akan diikuti dengan penginputan nilai keduanya. Kemudian dideklarasikan variable c untuk menghasilkan jumlah nilai dari proses pembagian ini. Variable c akan menyimpan hasil dari variable a1/a2 dan akan tecetak kalimat ‘Hasil dari’ yang diikuti dengan hasil dari proses "+a1+"/"+a2+"="+c);. Perintah alert digunakan untuk memunculkan kembali kotak dialog yang menampilkan hasil dari perhitungan. 

</SCRIPT>
<center><font color='gray' size=6><u>Kalkulator Sederhana</u></font></a>
<br><br>
<input type="button" value="pertambahan" onClick="penjumlahan()">
<br><br>
<input type="button" value="pengurangan" onClick="pengurangan()">
<br><br>
<input type="button" value="perkalian" onClick="perkalian()">
<br><br>
<input type="button" value="pembagian" onClick="pembagian()"></center>
</body>
Untuk menutup blok javascript digunakan perintah </script>. Terakhir adalah pembuatan tombol untuk menjalankan fungsi-fungsi yang telah dibuat sebelumnya.
Perintah <input type="button" value="pertambahan" onClick="penjumlahan()"> digunakan untuk menampilkan tombol dengan nama pertambahan dan perintah onClick digunakan untuk memanggil fungsi penjumlahan.
Perintah <input type="button" value="pengurangan" onClick="pengurangan()"> digunakan untuk menampilkan tombol dengan nama pengurangan dan perintah onClick digunakan untuk memanggil fungsi pengurangan.
Perintah <input type="button" value="perkalian" onClick="perkalian()"> digunakan untuk menampilkan tombol dengan nama perkalian dan perintah onClick digunakan untuk memanggil fungsi perkalian.
Perintah <input type="button" value="pembagian" onClick="pembagian()"> digunakan untuk menampilkan tombol dengan nama pembagian dan perintah onClick digunakan untuk memanggil fungsi pembagian.

Dibawah ini adalah tampilan menu pada kalkulator sederhana :


 Dibawah ini adalah tampilan pada proses perhitungan.


  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS

2 komentar:

Ramlah Basyir-081 mengatakan...

kalau untuk menampilkan proses mengalikannya gimana? misalnya.

***
**
----- x
****
***
------ +
****

InDrI Paramita Agitya mengatakan...

bila untuk menampilkan tabel perkaliannya bagaimana???
1 2 3
1 1 2 3
2 2 4 6
3 3 6 9

Posting Komentar