Tuesday, July 17, 2012

Membuat Kalkulator Web dengan JavaScript

Dengan menggunakan bahasa pemrograman web JavaScript, kita tidak hanya dapat menampilkan sebuah dokumen HTML seperti pada umumnya yaitu baik berupa teks, tabel atau gambar yang sifatnya statis, lebih dari itu kita juga dapat melakukan proses input dari keyboard serta melakukan perhitungan aritmatika seperti penjumlahan, pengurangan, perkalian, pembagian dan sebagainya dalam sebuah halaman web.

Dengan menambahkan beberapa fungsi pada script, user atau pengguna dapat melakukan perhitungan aritmatika dalam sebuah halaman web. Berikut ini merupakan sintaks untuk membuat "Kalkulator Web" menggunakan JavaScript :
<html>
<head><title>Kalkulator JavaScript</title></head>
<body>
<script language="JavaScript">;

function jumlah()
{
var bil1= parseFloat(document.luxury.bilangan1.value);
  if (isNaN(bil1))
        bil1=0.0;
var bil2= parseFloat(document.luxury.bilangan2.value);
    if (isNaN(bil2))
        bil2=0.0;
var hasil = bil1+ bil2;
alert("Hasil Penjumlahan = "+ hasil);
}

function kurang()
{
var bil1= parseFloat(document.luxury.bilangan1.value);
  if (isNaN(bil1))
        bil1=0.0;
var bil2= parseFloat(document.luxury.bilangan2.value);
    if (isNaN(bil2))
        bil2=0.0;
var hasil = bil1- bil2;
alert("Hasil Pengurangan = "+ hasil);
}

function kali()
{
var bil1= parseFloat(document.luxury.bilangan1.value);
  if (isNaN(bil1))
        bil1=0.0;
var bil2= parseFloat(document.luxury.bilangan2.value);
    if (isNaN(bil2))
        bil2=0.0;
var hasil = bil1* bil2;
alert("Hasil Perkalian = "+ hasil);
}

function bagi()
{
var bil1= parseFloat(document.luxury.bilangan1.value);
  if (isNaN(bil1))
        bil1=0.0;
var bil2= parseFloat(document.luxury.bilangan2.value);
    if (isNaN(bil2))
        bil2=0.0;
var hasil = bil1/ bil2;
alert("Hasil Pembagian = "+ hasil);
}
</script>

<form name="luxury">
<center>
    <h3> Perhitungan Aritmatika dengan JavaScript</h3>
   
    <table>
        <tr>
            <td width=150>Bilangan Pertama</td>
            <td width=100>:<input type="text" size="12" name="bilangan1"></td>
            </tr>
        <tr>
            <td width=150>Bilangan Kedua</td>
            <td width=100>:<input type="text" size="12" name="bilangan2"></td>
        </tr>
    </table>
    <p>
    <table>
        <tr>
            <td width=5><input type="button" value="+" onclick="jumlah()"></td>
            <td width=5><input type="button" value="-" onclick="kurang()"></td>
            <td width=5><input type="button" value="x" onclick="kali()"></td>
            <td width=5><input type="button" value=":" onclick="bagi()"></td>
            <td width=10><input type="reset" value="Reset"></td>
        </tr>
    </table>
</center>
</form>

</body>
</html>

Keterangan :
Teks berwana merah merupakan fungsi untuk melakukan penjumlahan
Teks berwarna hijau merupakan fungsi untuk melakukan pengurangan
Teks berwana biru merupakan fungsi untuk melakukan perkalian
Teks berwarna ungu merupakan fungsi untuk melakukan pembagian
Teks berwarna coklat merupakan form untuk menampilkan pada halaman web

Hasilnya seperti berikut :


Perhitungan Aritmatika dengan JavaScript


Bilangan Pertama :
Bilangan Kedua :

Selamat Mencoba !

7 comments:

  1. mantab infonya,,
    mau tanya kalau mau dimodifikasi hanya perkalian saja tapi memakai 3 tabel bagaimana ya caranya?
    Terimakasih

    kitabfotografer.blogspot.com

    ReplyDelete
    Replies
    1. maksudnya pake 3 bilangan?
      kita pake function kali() aja, variabelnya di tambah 1 misal bil3. Terus di formnya tambahin input text buat bilangan yg ketiga. Kalo belum jelas ke email rlh_258@yahoo.co.id aja mas. Terimakasih.

      Delete
  2. thank you info nya ...
    dan scriptnya udah saya coba dan saya modifikasi ..

    ReplyDelete
  3. trimaksih atas informasinya,,ini menambah pengetahuan saya tentang JS.

    ReplyDelete
  4. Makasih sob, kebetulan saya lagi belajar javascript

    ReplyDelete

Write comment below or mention me at @rilutham on Twitter!