Aplikasi Java Script

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.
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:
Baris Code




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 " + total
Lihat baris 87.

Referensi:
Magister Teknologi Informasi UGM