Selasa, 01 Maret 2011

studi kasus modul 5 DHTML dan JavaScript

hehehehe. dalam kesempatan kali ini, saya mencoba untuk posting bagaimana cara kita membuat aplikasi kalkulator sederhana menggunakan javascript. apabila sebelumnya kita telah mengerti bagaimana pemrograman menggunakan bahasa java, dalam membuat program ini tidak terlalu rumit. karena hanya menggabungkan antara bahasa HTML dengan bahasa javascript.
mudahnya, di bawah ini akan saya posting source code-nya. mungkin bisa dibuat sedikit belajar atau hanya baca-baca saja. hehe. semoga bermanfaat. yey ..
========================================================================
========================================================================
>> pertama kita buat source code yang di dalamnya berisi tentang rumus untuk perhitungan inputan bilangan pada kalkulator. dan seperti biasa, save. tapi kali ini save dengan ekstensi javascript #awas jangan sampai lupa :) berikut source-nya ..

function hitung(){
var komponen = document.calc;
var bilangan1 = parseInt(komponen.bilangan1.value);
var bilangan2 = parseInt(komponen.bilangan2.value);
var operator = komponen.operator.value;
var hasil;

if(operator == "add"){
hasil = bilangan1 + bilangan2;
}
else if(operator == "sub"){
hasil = bilangan1 - bilangan2;
}
else if(operator == "mpy"){
hasil = bilangan1 * bilangan2;
}
else{
hasil = bilangan1 / bilangan2;
}
komponen.hasil.value = hasil;
}
==========================================================================
>> langkah kedua, kita membuat source code lagi. di dalamnya berisi tentang pemanggilan rumus yang telah kita buat dengan ekstensi javascript tadi. selain itu, kita di sini juga membuat tampilan kalkulatornya. untuk lebih mudahnya, berikut source code nya .. heehe ..


<!DOCTYPE html>
<html lang="en">
<head>
<title>Simple Calculator</title>
<script language="JavaScript" type="text/javascript" src="rumus.js"></script>
</head>
<body bgcolor="#d87cec">
<center>
<font face="cambria" color="#531061">
<h3>>> Kalkulator Sederhana Berbasis Java <<</h3>
<form name="calc" action="#">
<input type="text" size="5" name="bilangan1">
<select name="operator">
<option value="sub">dikurangi</option>
<option value="add">ditambah</option>
<option value="mpy">dikali</option>
<option value="div">dibagi</option>
</select>
<input type="text" size="5" name="bilangan2">
<input type="button" value="==" onclick="hitung()"/>
<input type="text" size="10" name="hasil" readonly>
</form>
</center>
</body>
</html>
==========================================================================
>> dan apabila berhasil , berikut adalah tampilannya # via leptop saya tapi :D


==========================================================================
==========================================================================
 

1 komentar:

  1. assalamualaikum
    ini kunjungan kesekian kali ke blog sahabat :)
    dan menyimak terus update postingan yang semakin menarik
    sekaligus memberi info bahwa kangmusa telah membuat ebook baru
    "Blog Monetization Options" yang bisa diunduh disini
    terima kasih, saya tunggu kunjungan Anda di kangmusa.com
    salam hangat
    kangmusa

    BalasHapus