contoh onclick kalkulator
5
Click here to load reader
description
comsmacc.blogspot.com
Transcript of contoh onclick kalkulator
Aplikasi JavaScript
JavaScript merupakan bahasa pemrograman script (scripting language) guna mendukung tampilan halaman web yang lebih interaktif dibandingkan program CGI. Dengan JavaScript sebuah halaman web bersifat lebih “mandiri” terhadap servernya karena dapat memproses masukan user, tanpa harus berkomunikasi lagi dengan server, sehingga dapat mempercepat keluaran yang diinginkan user, dan menghemat bandwidth saluran komunikasi.
Tulisan ini mencoba mengemukakan sebuah contoh aplikasi JavaScript berupa kalkulator yang menjumlahkan total harga beberapa produk yang dipilih user
Tulisan ini ditujukan untuk pembaca yang ingin mempelajari JavaScript, terutama untuk webmaster penyedia jasa internet yang memeperhatikan kepuasan pelanggannya.
KalkulatorAplikasi ini mengambil contoh sebuah perusahaan yang menjual produknya di internet. Produk-produk itu terdiri dari beberapa kategori seperti: sepatu, celana panjang, dan pakaian. Setiap kategori produk terdiri dari beberapa merk yang masing-masing memiliki harga tertentu. User dapat memilih salah satu merk pada setiap kategori, dan dapat mengetahui total harga produk yang telah ia pilih dengan menekan tombol total.
Bentuk tampilan halaman webnya kira-kira seperti gambar di bawah ini:
Source code halaman web di atas beserta JavaScriptnya (tercetak dalam huruf bold) adalah sebagai berikut:
Hal : 1 dari 4
Langkah-langkah pengembangan aplikasi
Pertama-tama kita buat tiga buah pilihan kategori yang masing-masing terdiri dari tiga buah pilihan merek yang diwakili oleh masing-masing sebuah radio buttons. Jika user men-click salah satu dari ketiga radio buttons itu, kita harus menampilkan harganya pada text box di sebelahnya. Karena kita gunakan event handler "onClick" dari setiap radio button. Lihat pada baris 21, 25, 29, 41, 46, 51, 68, dan 73.
Kemudian kita buat sebuah button dengan label “ Total Harga ” dan sebuah textbox yang menampung harga total. Lihat baris 83.
Jika button itu di-click, jumlah total dari ketiga textbox dari ketiga kategori akan ditampilkan di textbox terakhir ini. Kita gunakan event handler "onClick" pada button, dan sebuah proses penjumlahan sederhana pada baris 84 - 86. Function "pareseInt()" kita gunakan agar jumlah total berupa angka integer dan bukan string. Jika kita tifak gunakan function ini maka hasil dari "1+2” akan sama dengan “12". Function "eval()", mengevaluasi string menjadi angka integer.
Terakhir, untuk menampilkan harga total dengan awalan tanda "Rp ", kita gunakan perintah sebagai berikut:
form.total_value.value="Rp " + totalLihat baris 87.
PenutupDemikian sebuah contoh aplikasi JavaScript yang memungkinkan interaksi antara server Web dengan penguna Internet.
Kode Program diatas :
<html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Pilihan Produk</title></head><h1>Pilihan Produk</h1><table border="0" cellpadding="2"> <tr> <td align="center" colspan="2" width="15%" bgcolor="#808080">
<font color="#FFFFFF"><strong>Kategori</strong></font></td> <td align="center" colspan="3" bgcolor="#808080">
<font color="#FFFFFF"><strong>Merek</strong></font></td> <td align="center" bgcolor="#808080">
<font color="#FFFFFF"><strong>Total</strong></font></td></font>
</tr><tr><form>
<td colspan="2" width="15%" bgcolor="#C0C0C0">Sepatu: </td> <td width="25%" bgcolor="#FFFF80">
<input type="radio" name="Nike" value="nike" onclick="form.sepatu_value.value= 90000">
<strong>Nike</strong> <br><font size="2">Rp 90,000</font></td>
Hal : 2 dari 4
<td width="25%" bgcolor="#FFFF80"><input type="radio" name="Nike" value="aldo"
onclick="form.sepatu_value.value= 80000"><strong>Aldo</strong> <br><font size="2">Rp 80,000 </font></td>
<td width="25%" bgcolor="#FFFF80"><input type="radio" name="Nike" value="addidas"
onclick="form.sepatu_value.value= 60000"><strong>Addidas</strong> <font size="2"><br>Rp 60,000 </font></td><td width="15%" bgcolor="#FFFF80">
<input type="text" size="13" name="sepatu_value" value="0"> </td></form>
</tr><tr><form>
<td colspan="2" width="15%" bgcolor="#DEDEDE">Celana Panjang: </td> <td width="15%" bgcolor="#FFFFD5"> <p><input type="radio" name="Nike" value="Executive99" onclick="form.celana_value.value= 40000">
<strong>Executive 99</strong><font size="2">Rp 40,000</font></p></td> <td width="15%" bgcolor="#FFFFD5"><p><input type="radio" name="Nike" value="Marido" onclick="form.celana_value.value= 50000">
<strong>Marido</strong> <br><font size="2">Rp 50,000</font></p> </td> <td width="15%" bgcolor="#FFFFD5"><p><input type="radio" name="Nike" value="Alabamas" onclick="form.celana_value.value= 35000">
<strong>Alabamas</strong> <font size="2"><br>Rp 35,000 </font></p> </td><td width="15%" bgcolor="#FFFFD5"><input type="text" size="13" name="celana_value" value="0"></td> </form> </tr><tr>
<form> <td colspan="2" width="15%" bgcolor="#C0C0C0"> Pakaian: </td> <td width="15%" bgcolor="#FFFF80"><input type="radio" name="Nike" value="Van Heusen" onclick="form.pakaian_value.value= 45900">
<strong>Van Heusen</strong> <br><font size="2">Rp 45,900</font></td>
<td width="15%" bgcolor="#FFFF80"><input type="radio" name="Nike" value="Arrow" onclick="form.pakaian_value.value= 60000">
<strong>Arrow</strong> <br><font size="2">Rp 60,000</font></td> <td width="15%" bgcolor="#FFFF80"><font color="#000000"><input type="radio" name="Nike" value="Watch out" onclick="form.pakaian_value.value= 55950">
<strong>Wacth out </strong></font>
Hal : 3 dari 4
<br><font size="2">Rp 55,950</font></td> <td width="15%" bgcolor="#FFFF80"><font color="#000000"><input type="text" size="13" name="pakaian_value" value="0">
</font></td></form> </tr><tr>
<td colspan="4"></td><td colspan="1" valign="top" align="center" bgcolor="#F2F2F2">
<form><input type=button value="Total Harga" name="total"
onClick='var total=eval(parseInt(document.forms[0].sepatu_value.value) +
parseInt(document.forms[1].celana_value.value) + parseInt(document.forms[2].pakaian_value.value));form.total_value.value="Rp " + total;'></td><td bgcolor="#F2F2F2"><input type="text" size=13
name="total_value"></form></td></tr></table></body></html>
Hal : 4 dari 4
