Welcome to Scribd, the world's digital library. Read, publish, and share books and documents. See more ➡
Download
Standard view
Full view
of .
Add note
Save to My Library
Sync to mobile
Look up keyword
Like this
7Activity
×
0 of .
Results for:
No results containing your search query
P. 1
contoh onclick kalkulator

contoh onclick kalkulator

Ratings: (0)|Views: 1,686|Likes:
Published by Leonsius
comsmacc.blogspot.com
comsmacc.blogspot.com

More info:

Published by: Leonsius on May 16, 2009
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, DOC, TXT or read online from Scribd
See More
See less

04/05/2013

pdf

text

original

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 \u201cmandiri\u201d 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.
Kalkulator

Aplikasi 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 \u201c Total Harga \u201d 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\u201d akan sama dengan \u201c12". 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 " + total
Lihat baris 87.
Penutup
Demikian 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

Activity (7)

You've already reviewed this. Edit your review.
1 hundred reads
1 thousand reads
Bayu Ajie liked this
Himawan liked this
Reston Hutabarat liked this

You're Reading a Free Preview

Download
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->