Rabu, 19 Desember 2012

Membuat Aplikasi Kalkulator Sederhana menggunakan Javascript

Untuk kali ini kita akan belajar membuat aplikasi kalkulator menggunakan html dan java script, sebelumnya kita akan bahas tentang java script terlebih dahulu....

Java merupakan sebuah bahasa pemrograman yang mirip dengan bahasa C. Tetapi dengan Java kita bisa membuat tampilan halaman sebuah web menjadi lebih menarik. Contoh penggunaan Java scrolling marquees, tampilan tanggal dan waktu, kalkulator, dan lain-lain. Terdapat dua tupe Java yaitu Java applet dan Java Script. 
JAVA APPLETS

Java merupakan bahasa pemrograman yang dikembangkan oleh Sun Microsystems dan merupakan bahasa pemrograman yang berorientasi obyek. Java bisa digunakan untuk membuat suatu aplikasi yang berdiri sendiri atau pun sebuah aplikasi mini yang biasa disebut applet. Applet biasa digunakan pada halaman web supaya terlihat lebih dinamis. Terdapat banyak sekali aplikasi/applet yang ada.


JAVA SCRIPT

JavaScript dikembangkan oleh Netscape, yang merupakan bahasa pemrograman yang "sederhana" karena tidak bisa digunakan untuk membuat suatu aplikasi atau pun applet. Java Script merupakan sebuah bahasa scripting yang dikembangkan oleh Netscape.Dengan Java Script kita bisa dengan mudah membuat sebuah halaman web yang interaktif. Program Java Script dituliskan pada file HTML (*.htm atau *.html) dengan menggunakan tag kontainer . Dengan kata lain, Anda tidak perlu menuliskan program JavaScript pada file terpisah (walaupun Anda juga bisa melakukannya).

Berikut script dari aplikasi kalkulator:

<html>
<head>
<title>Kalkulator sederhana</title>
<script LANGUAGE="JavaScript" type="text/javascript">
alert("Welcome to Calculator Application Javascript. Developper : ndraetsu@gmail.com")
</script>
<SCRIPT LANGUAGE="JavaScript" type="text/javascript">
function tambah()
{
a=eval(form.a.value)
b=eval(form.b.value)
c=a+b
form.hasil.value = c
}

function kurang()
{
a=eval(form.a.value)
b=eval(form.b.value)
c=a-b
form.hasil.value=c
}

function kali()
{
a=eval(form.a.value)
b=eval(form.b.value)
c=a*b
form.hasil.value=c
}

function bagi()
{
a=eval(form.a.value)
b=eval(form.b.value)
c=a/b
form.hasil.value = c
}
<head />
</SCRIPT>

<body onload=kosong()>
<CENTER>
<h1><font color="blue" face="Broadway">Kalkulator Sederhana</font></h1>
<hr width="600" size="3" color="#000066">
<FORM name="form">
<table width="150" border="0">
  <tr>
    <td width="167"><input type="text" name="a" value="Nilai A"></td>
  </tr>
  <tr>
    <td><input type="text" name="b" value="Nilai B"></td>
  </tr>
  <tr>
    <td> <select name="operator" onchange="getSelectedValue();">
<option value="+" onClick="tambah()">Tambah</option>
<option value="-" onClick="kurang()">Kurang</option>
<option value="*" onClick="kali()">Kali</option>
<option value="/" onClick="bagi()">Bagi</option>
</select></td>
  </tr>
  <tr>
    <td><input type "text" name="hasil" disabled="true" value="Hasil"></td>
  </tr>
</table>
<br>
<a href="http://gunawan-ndra.blogspot.com/" target="_blank"><font color="red" face="Snap ITC" >gunawan-ndra.blogspot.com</font></a>
</FORM>
</CENTER>

</body>
</html>

save dengan nama kalkulator.html dan hasilnya seperti gambar di bawah......


~ ~ ~ Sikian dulu semoga bermanfaat...... ~ ~ ~
 _  ..........TerimaKasih........  _