Membuat Kalkulator Javascript Sederhana (Bagian 1)
2013-10-14 03:51:41Kategori: Javascript
Kalkulator atau mesin hitung adalah sebuah perangkat komputer kecil dengan fungsi untuk membantu dalam melakukan perhitungan-perhitungan matematika, mulai dari perhitungan sederhana seperti penjumlahan, pengurangan, perkalian dan pembagian sampai kepada kalkulator sains yang dapat menghitung rumus matematika tertentu. Dalam perkembangannya sekarang, kalkulator sering dimasukkan sebagai fungsi tambahan dari komputer, handphone, atau peralatan lainnya.
Tutorial ini akan menjelaskan cara membuat kalkulator sederhana menggunakan perintah javascript untuk kebutuhan perhitungan sederhana seperti penjumlahan, pengurangan, perkalian, pembagian, pangkat dan modulus. Kotak isian dibagi dalam 2 bagian agar fungsi matematika dengan javascript-nya dapat lebih mudah dipahami, 1 kotak untuk menampung hasil operasi matematika, 1 tombol untuk memanggil fungsi javascript berisi operasi matematika yang akan dilakukan dan 1 tombol lagi untuk mengosongkan seluruh isian.
Source code dipisahkan dalam 2 bagian, untuk lebih menjelaskan kode javascript sebagai bagian algoritma untuk membuat fungsi dan rumus hitungan, serta form untuk bagian implementasi atau tampilan kepada pengguna.
Berikut kode HTML berisi tag <form> untuk membuat kotak isian dan tombol yang diperlukan dalam memanggil fungsi javascript:
Kode 1:
Pada kode diatas, nama formulir adalah kalkulator (name="kalkulator"), Isian 1 dengan (name="satu"), Isian 2 dengan (name="dua"), hasil dengan (name="hasil"), tombol dengan simbol (+) dengan nama tambah (name="tambah") dan tombol Kosong dengan nama kosong (name="kosong"). Khusus untuk kotak isian hasil ditambah dengan perintah disable, karena bagian tersebut tidak boleh diisi oleh user, namun mendapatkan nilai berdasarkan operasi matematika yang dilakukan pada kotak isian 1 dan kotak isian 2.
Name dari form dan input akan digunakan kode javascript untuk memanggil fungsi dan nilai dari formulir. Name tersebut dapat diganti sesuai dengan keinginan kita. Jika name tersebut diganti, maka pada bagian perintah javascript juga harus diganti sesuai dengan perubahan yang dilakukan.
Selanjutnya, fungsi javascript tambah() akan dipanggil ketika tombol dengan simbol (+) kita klik (onClick="tambah()"). Sementara, fungsi (onClick="kosong") akan bekerja ketika tombol kosong kita klik. onClick merupakan salah satu event javascript, yaitu suatu hal yang akan dilakukan ketika ada aksi dari user.
Berikut kode javascript yang diperlukan:
Kode 2:
Pada kode javascript di atas, terdapat 2 fungsi, function tambah() dan function kosong(). Fungsi tersebut akan bekerja ketika tombol yang sesuai pada bagian formulir diklik. Contohnya fungsi tambah akan bekerja ketika tombol dengan simbol (+) diklik atau fungsi kosong akan bekerja ketika tombol Kosong diklik.
Pada dasarnya, fungsi (ditulis dengan function) merupakan cara untuk menyatukan beberapa perintah yang dapat dijalankan secara bersamaan ketika fungsi tersebut dipanggil. Pada kode javascript di atas, fungsi tambah dan fungsi kosong dimulai dengan tanda kurung kurawal ({) dan diakhiri kembali dengan kurung kurawal (}). Seluruh perintah yang berada di antara kurung kurawal akan diproses ketika fungsi bersangkutan dipanggil.
Pada fungsi tambah, variabel a akan mendapatkan nilai dari form kalkulator bagian input dengan nama satu, variabel b akan mendapatkan nilai dari form kalkulator bagian input dengan nama dua. Untuk variabel c, akan mendapatkan nilai berdasarkan operasi matematika penjumlahan antara variabel a dan b. Sementara pada baris ke-4, nilai variabel c akan dituliskan kembali ke form dibagian input dengan name=hasil.
Fungsi eval pada variabel a dan variabel b digunakan untuk mengevaluasi apa saja yang direpresentasikan di dalam parameter expression, dimana expression adalah ekspresi valid yang akan diperlakukan sebagai kode JavaScript oleh interpreter. Jika nilai parameter expression bukan string, maka nilai tersebut yang akan dikembalikan. Sebagai contoh, eval(7) akan mengembalikan nilai 7. Apabila pada variabel a dan variabel b tidak digunakan perintah eval, maka nilai variabel c bukanlah operasi penjumlahan seperti yang diinginkan, namun nilai variabel a dan nilai variabel b. Contohnya, jika nilai variabel a=2 dan nilai variabel b=7, maka nilai variabel c=27, sementara kalau kita tambahkan fungsi eval, maka nilai variabel c=9.
Fungsi kosong berguna untuk mengosongkan seluruh kotak isian input dalam satu klik. Khusus untuk perintah kalkulator.satu.focus() berguna untuk menempatkan posisi kursor dalam kotak isian input dengan name=satu.
Nama variabel a, b dan c tersebut dapat diganti sesuai keinginan. Yang perlu diingat, ketentuan nama variabel adalah:
Langkah selanjutnya adalah menyatukan kedua kode tersebut. Kedua kode di atas dapat digabungkan dengan susunan sebagai berikut:
Kalkulator di atas baru memiliki 1 tombol untuk operasi penjumlahan. Jika ingin menambahkan dengan operasi matematika baru seperti pengurangan, langkah-langkah yang harus dilakukan adalah:
Kode 1 (HTML):
Kode 2 (Javascript):
Khusus untuk operasi matematika pangkat, perintah yang digunakan pada bagian variabel c adalah:
Kode 2 (Javascript):
Tutorial ini akan menjelaskan cara membuat kalkulator sederhana menggunakan perintah javascript untuk kebutuhan perhitungan sederhana seperti penjumlahan, pengurangan, perkalian, pembagian, pangkat dan modulus. Kotak isian dibagi dalam 2 bagian agar fungsi matematika dengan javascript-nya dapat lebih mudah dipahami, 1 kotak untuk menampung hasil operasi matematika, 1 tombol untuk memanggil fungsi javascript berisi operasi matematika yang akan dilakukan dan 1 tombol lagi untuk mengosongkan seluruh isian.
Source code dipisahkan dalam 2 bagian, untuk lebih menjelaskan kode javascript sebagai bagian algoritma untuk membuat fungsi dan rumus hitungan, serta form untuk bagian implementasi atau tampilan kepada pengguna.
Berikut kode HTML berisi tag <form> untuk membuat kotak isian dan tombol yang diperlukan dalam memanggil fungsi javascript:
Kode 1:
<form name="kalkulator">
Isian 1 <input type="text" name="satu"><br />
Isian 2 <input type="text" name="dua"><br />
Hasil <input type "text" name="hasil" disabled="true">
<input type="button" value=" + " onClick="tambah()">
<input type="button" value="Kosongkan" onClick="kosong()">
</form>
Pada kode diatas, nama formulir adalah kalkulator (name="kalkulator"), Isian 1 dengan (name="satu"), Isian 2 dengan (name="dua"), hasil dengan (name="hasil"), tombol dengan simbol (+) dengan nama tambah (name="tambah") dan tombol Kosong dengan nama kosong (name="kosong"). Khusus untuk kotak isian hasil ditambah dengan perintah disable, karena bagian tersebut tidak boleh diisi oleh user, namun mendapatkan nilai berdasarkan operasi matematika yang dilakukan pada kotak isian 1 dan kotak isian 2.
Name dari form dan input akan digunakan kode javascript untuk memanggil fungsi dan nilai dari formulir. Name tersebut dapat diganti sesuai dengan keinginan kita. Jika name tersebut diganti, maka pada bagian perintah javascript juga harus diganti sesuai dengan perubahan yang dilakukan.
Selanjutnya, fungsi javascript tambah() akan dipanggil ketika tombol dengan simbol (+) kita klik (onClick="tambah()"). Sementara, fungsi (onClick="kosong") akan bekerja ketika tombol kosong kita klik. onClick merupakan salah satu event javascript, yaitu suatu hal yang akan dilakukan ketika ada aksi dari user.
Berikut kode javascript yang diperlukan:
Kode 2:
<script type="text/JavaScript">
function tambah()
{
a=eval(kalkulator.satu.value);
b=eval(kalkulator.dua.value);
c=a+b;
kalkulator.hasil.value = c;
}
function kosong()
{
kalkulator.satu.focus();
kalkulator.satu.value="";
kalkulator.dua.value="";
kalkulator.hasil.value="";
}
</script>
Pada kode javascript di atas, terdapat 2 fungsi, function tambah() dan function kosong(). Fungsi tersebut akan bekerja ketika tombol yang sesuai pada bagian formulir diklik. Contohnya fungsi tambah akan bekerja ketika tombol dengan simbol (+) diklik atau fungsi kosong akan bekerja ketika tombol Kosong diklik.
Pada dasarnya, fungsi (ditulis dengan function) merupakan cara untuk menyatukan beberapa perintah yang dapat dijalankan secara bersamaan ketika fungsi tersebut dipanggil. Pada kode javascript di atas, fungsi tambah dan fungsi kosong dimulai dengan tanda kurung kurawal ({) dan diakhiri kembali dengan kurung kurawal (}). Seluruh perintah yang berada di antara kurung kurawal akan diproses ketika fungsi bersangkutan dipanggil.
Pada fungsi tambah, variabel a akan mendapatkan nilai dari form kalkulator bagian input dengan nama satu, variabel b akan mendapatkan nilai dari form kalkulator bagian input dengan nama dua. Untuk variabel c, akan mendapatkan nilai berdasarkan operasi matematika penjumlahan antara variabel a dan b. Sementara pada baris ke-4, nilai variabel c akan dituliskan kembali ke form dibagian input dengan name=hasil.
Fungsi eval pada variabel a dan variabel b digunakan untuk mengevaluasi apa saja yang direpresentasikan di dalam parameter expression, dimana expression adalah ekspresi valid yang akan diperlakukan sebagai kode JavaScript oleh interpreter. Jika nilai parameter expression bukan string, maka nilai tersebut yang akan dikembalikan. Sebagai contoh, eval(7) akan mengembalikan nilai 7. Apabila pada variabel a dan variabel b tidak digunakan perintah eval, maka nilai variabel c bukanlah operasi penjumlahan seperti yang diinginkan, namun nilai variabel a dan nilai variabel b. Contohnya, jika nilai variabel a=2 dan nilai variabel b=7, maka nilai variabel c=27, sementara kalau kita tambahkan fungsi eval, maka nilai variabel c=9.
Fungsi kosong berguna untuk mengosongkan seluruh kotak isian input dalam satu klik. Khusus untuk perintah kalkulator.satu.focus() berguna untuk menempatkan posisi kursor dalam kotak isian input dengan name=satu.
Nama variabel a, b dan c tersebut dapat diganti sesuai keinginan. Yang perlu diingat, ketentuan nama variabel adalah:
- Nama variabel terdiri dari huruf, angka dan underscores: diawali dengan huruf
- Nama variabel adalah case-sensitive (membedakan huruf besar dan kecil)
Langkah selanjutnya adalah menyatukan kedua kode tersebut. Kedua kode di atas dapat digabungkan dengan susunan sebagai berikut:
<html>
<head>
<title>Kalkulator Javascript Sederhana</title>
<!-- Tempatkan kode javascript dibagian ini -->
</head>
<body>
<!-- Tempatkan perintah form dibagian ini -->
</body>
</html>
Kalkulator di atas baru memiliki 1 tombol untuk operasi penjumlahan. Jika ingin menambahkan dengan operasi matematika baru seperti pengurangan, langkah-langkah yang harus dilakukan adalah:
- Menambahkan tombol baru pada bagian formulir untuk memanggil fungsi pengurangan (Kode 1).
- Tambahkan fungsi baru pada bagian Javascript untuk operasi matematika pengurangan (Kode 2).
Kode 1 (HTML):
<input type="button" value=" - " onClick="kurang()">
Kode 2 (Javascript):
function kurang()
{
a=eval(kalkulator.satu.value);
b=eval(kalkulator.dua.value);
c=a-b;
kalkulator.hasil.value = c;
}
Khusus untuk operasi matematika pangkat, perintah yang digunakan pada bagian variabel c adalah:
Kode 2 (Javascript):
function pangkat()
{
a=eval(kalkulator.satu.value);
b=eval(kalkulator.dua.value);
c=Math.pow(a, b); // khusus huruf M pada Math dengan huruf besar
kalkulator.hasil.value = c;
}
Tutorial ini dicetak dari: Gufron Rajo Kaciak
http://dosen.gufron.com/tutorial/membuat-kalkulator-javascript-sederhana-bagian-1/1/
http://dosen.gufron.com/tutorial/membuat-kalkulator-javascript-sederhana-bagian-1/1/