Akhmad Daniel Sembiring & Onno W. Purbo Computer Network Research Group ITB 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 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39. 40. 41. 42. 43. 44. 45. 46. 47. 48. 49. 50. 51. 52. 53. 54. 55. 56. 57. 58. 59. 60. 61. 62. 63. 64. 65. 66. 67. 68. Code <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> <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" checked 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>
69. 70. 71. 72. 73. 74. 75. 76. 77. 78. 79. 80. 81. 82. 83. 84. 85. 86. 87. 88. 89. 90. 91. 92.
<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> <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>
Penutup
Demikian sebuah contoh aplikasi JavaScript yang memungkinkan interaksi antara server Web dengan penguna Internet.