Index Of /: Kalkulator Dengan JavaScript dan HTML

Penulisan JavaScript

Script pada bagian head

Script ini akan dieksekusi ketika dipanggil (biasanya berbentuk function) atau dipanggil berdasarkan trigger pada event tertentu. Peletakkan script di head akan menjamin skript di-load terlebih dahulu sebelum digunakan (dipanggil).

Script pada Body

Script ini dieksekusi ketika halaman di-load sampai di bagian <body>. Ketika menempatkan script pada bagian <body> berarti antara isi dan JavaScript dijadikan satu bagian

External JavaScript

Terkadang ada yang menginginkan menjalankan JavaScript yang sama dalam beberapa kali pada halaman yang berbeda, tetapi tidak mau disibukkan jika harus menulis ulang script yang diinginkan di setiap halaman. Maka JavaScript dapat ditulis di file secara eksternal. Jadi, antara dokumen HTML dan JavaScript dipisahkan, kemudian berkas tersebut dipanggil dari dokument HTML. Berkas JavaScript tersebut disimpan dengan ekstensi .js. JavaScript : js/namafile.js. Untuk menggunakan eksternal JavaScript (.js) dipakai atribut "src" pada tag <script> pada halaman HTML-nya.

Script HTML dan JavaScript

<html>
<head>
<title>Kalkulator</title>
<script language="javascript">
function tambah(){
 x=eval(document.kalk.value1.value);
 y=eval(document.kalk.value2.value);
 alert("Hasil dari "+ x + " + " + y + " = " + (x+y));
}

function kurang(){
 x=eval(document.kalk.value1.value);
 y=eval(document.kalk.value2.value);
 alert("Hasil dari "+ x + " - " + y + " = " + (x-y));
}

function bagi(){
 x=eval(document.kalk.value1.value);
 y=eval(document.kalk.value2.value);
 alert("Hasil dari "+ x + " : " + y + " = " + (x/y));
}

function kali(){
 x=eval(document.kalk.value1.value);
 y=eval(document.kalk.value2.value);
 alert("Hasil dari "+ x + " x " + y + " = " + (x*y));
}
</script>
</head>
<body>
<form name="kalk" method="post">

<input type="inputbox" value="" name="value1"><br />
<input type="inputbox" value="" name="value2"><br />

<input type="button" value="+" onClick="tambah();">
<input type="button" value="-" onClick="kurang();">
<input type="button" value=":" onClick="bagi();">
<input type="button" value="x" onClick="kali();">

</form>
</body>
</html>

Penjelasan Logika Program

<html>
<head>
<title>CSS</title>

<!-- Coding javascript -->

</head>
<body>

<!-- Tampilan Halaman WEB -->

</body>
</html>

Potongan script di atas adalah struktur dasar suatu file html, kode yang dimulai dengan tanda "<" dan diakhiri dengan tanda ">" merupakan tag-tag HTML. Tag-tag diatas merupakan struktur utama dalam html. Tag <head> dan </head> digunakan untuk meletakan informasi-informasi penting yang tidak ditampilkan oleh browser sehingga ketika kita tidak akan melihatnya pada halaman situs. Tag <head> ini umumnya berisi judul dari halaman situs dengan menggunakan tag <title> </title> yang akan ditampilkan pada browser sebagai judul halaman, selain itu pada contoh kali ini digunakan untuk meletakan script JavaScript yang nantinya akan kita gunakan untuk melakukan perhitungan aritmatiaka berupa penjumlahan,, pengurangan, perkalian dan pembagian.

<script language="javascript">

Tag berikut merupakan tag awal untuk menuliskan embedded JavaScript pada halaman html.

function tambah(){
 x=eval(document.kalk.value1.value);
 y=eval(document.kalk.value2.value);
 alert("Hasil dari "+ x + " + " + y + " = " + (x+y));
}

Potongan script berikut merupakan sebuah fungsi pada javascript dengan nama tambah() yang nantinya akan dipanggil dalam sebuah attribut onClick="" pada halaman HTML. Fungsi berikut ini memiliki algoritma untuk melakukan penjumlahan dua buah nilai. Nilai pertama diambil dari value sebuah object (inputbox) dengan nama object name="value1" pada tag HTML kemudian disimpan ke dalam variable x, sama seperti pada nilai peratma, untuk nilai kedua juga diambil dari value sebuah object (inputbox) dengan nama object name="value2" pada tag HTML kemudian disimpan ke dalam variable y. Hasil penjumlahan antara variable x dan variable y akan ditampilkan dalam bentuk alert.

function kurang(){
 x=eval(document.kalk.value1.value);
 y=eval(document.kalk.value2.value);
 alert("Hasil dari "+ x + " - " + y + " = " + (x-y));
}

function bagi(){
 x=eval(document.kalk.value1.value);
 y=eval(document.kalk.value2.value);
 alert("Hasil dari "+ x + " : " + y + " = " + (x/y));
}

function kali(){
 x=eval(document.kalk.value1.value);
 y=eval(document.kalk.value2.value);
 alert("Hasil dari "+ x + " x " + y + " = " + (x*y));
}

Pada potongan script berikut masih sama dengan penjelasan sebelumnya hanya saja setiap fungsi memiliki algoritma perhitungan yang berbeda fungsi kurang(){} akan melakukan pengurangan antara nilai pertama dengan nilai kedua (x-y). Fungsi bagi(){} untuk melakukan pembagian nilai variable (x/y)dan fungsi kali(){} untuk melakukan perkalian nilai variable (x*y).

</script>

Script diatas digunakan untuk mengakhiri penulisan Java Script.

Langkah berikutnya kita akan memanggil fungsi-fungsi pada JavaScript yang telah kita buat sebelumnya dalam sebuah form HTML.

<form name="kalk" method="post">
<input type="inputbox" value="" name="value1"><br />
<input type="inputbox" value="" name="value2"><br />
<input type="button" value="+" onClick="tambah();">
<input type="button" value="-" onClick="kurang();">
<input type="button" value=":" onClick="bagi();">
<input type="button" value="x" onClick="kali();">
</form>

Setelah kita sebelumnya membuat beberapa fungsi pada JavaScript kemudia kita akan mengimplementasikannya pada script HTML seperti pada potongan program diatas. Pertama kita buat sebuah form dengan menggunakan tag <form> </form> dengan attribut name="kalk" method="post",selanjutnya kita buat dua buah inputbox untuk memasukan nilai pertama dan nilai kedua yang nantinya value atau inputan dari inputbox tersebuat akan dijadikan variable yang akan dilakukan operasi aritmatika berupa penjumlahan, pengurangan, perkalian dan pembagian. Berikutnya kita buat empat buah button dengan menggunakan tag <input dengan beberapa attribut diantaranya type="button" value="+" dan attribut onClick="tambah();" yang akan digunakan untuk memanggil fungsi tambah() javascript yang tadi kita telah buat. Langkah yang sama untuk membuat button-button berikutnya yang membedakan hanya pada attribut onClick="" disi dengan nama fungsi javascript yang ingin dipanggil.

Output Script HTML

Output dari script secara keseluruhan yang ditampilkan pada browser dapat dilihat pada gambar dibawah.