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 :
<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 :
Selamat Mencoba !
0 komentar:
Posting Komentar