DHTML dan JavaScript
Scripting merupakan jenis lain dari pemrograman, yang umumnya lebih
mudah dipahami. Script dapat disisipkan kedalam dokumen HTML dengan
menggunakan tag <script>. Tidak seperti style sheet, script
bisaterlihat di dalam <head> ataupun <body>. DHTML
(Dynamic HTML) merupakan suatu teknik untuk menciptakan halaman web
yang interaktif dengan cara mengombinasikan elemen-elemen seperti
HTML, style sheet, dan scripting. Jadi, DHTML bukanlah suatu jenis
bahasa pemrograman melainkan hanya sekadar istilah saja. Pembuatan
DHTML dapat memanfaatkan JavaScript. JavaScript terbentuk atas
elemen-elemen fundamental. Dengan menggunakan JavaSript
memungkinkan Anda untuk menampilkan Kotak Dialog, Dukungan Scripting,
Merujuk Elemen, Event, Linked Scripting, dan lain sebagainya. Berikut
pemanfaatan JavaScript didalam penggunaan kalkulator.
ACTIVE
WEB PAGE
Sebagaimana
diketahui, HTML merupakan model dokumen yang statis begitu
ditampilkan tidak akan berubah sampai ada aktivitas navigasi. Ada pun
untuk menjadikan HTML sebagai halaman dinamis atau aktif, kita bisa
memanfaatkan bahasa scripting.
ELEMEN
DASAR JAVASCRIPT
JavaScript
memungkinkan kita untuk menampilkan kotak dialog melalui fungsi alert
(). Kotak dialog ini dapat dimanfaatkan untuk menyampaikan
informasi atau konfirmasi.
Dukungan
Scripting
Melalui
tag <noscript>, dengan mudah kita bisa mengidentifikasi apakah
browser
mendukung scripting atau tidak. Pada dasarnya, tag ini tidak
dimaksudkan
untuk menghentikan interpretasi terhadap kode program. Dengan kata
lain, browser akantetapmenerjemahkanbariskodekecuali tag <script>.
MerujukElemen
Salah
satukemampuanutama JavaScript adalahmengontrolobjek-objek di halaman
web.Sehubungan dengan hal ini, ada beragam pendekatan yang bisa
digunakan untuk mengacu atau mengakses elemen-elemen objek.
Event
Setiap
objek HTML mendefinisikan properti-properti, method-method, dan
event-event.Salah satu event yang sangat popular dan frekuensi
penggunaannya cukup tinggi adalah onclick. Event ini akan dipicu
manakalaobjek, misalnya button atau teks diklik.
Linked
Scripting
Seperti
halnya CSS, penulisan kode JavaScript juga bisa dilakukan di file
terpisah. Langkah ini sebaiknya digunakan ketika melakukan
implementasi nyata, dengan tujuan membuat kode yang bersih.
ME-RETRIEVE
NILAI
Saat
bekerja dengan elemen-elemen masukan seperti text field, select, dan
check box HTML, kita bisa memanfaatkan JavaScript untuk operasi
validasi. Adapun langkah penting terkait dengan elemen-elemen ini
adalah pengambilan nilai.
Text
Field
Elemen
text field menyediakanproperti value yang bisa digunakan untuk
menetapkan atau mendapatkan nilai elemen.
Select
(Combo Box)
Secara
umum, properti value tersedia di semua elemen HTML. Dengan demikian,
kita juga bisa memanfaatkannya untuk mendapatkan nilai select atau
combo box.
Check
Box
Khusus
untuk pengambilan nilai check box, terlebih dahulu
kitaperlumengidentifikasi item yang dipilih.
MEMILIH
ITEM CHECK
Agar
pemilihan item check box bisa lebih efisien, kita dapat menggunakan
pendekatan check/uncheck all.
WINDOW
Di
dalam window aktif, kita juga bisa menciptakan window baru melalui
method window.open().
Komunikasi
Window :
Apabila
diperlukan, window induk yang menciptakan subwindow juga dapat
berkomunikasi dengan window buatannya.
CONTOH
:
Dalam
pembahasan DHTML dan Java Script ini, kita akan mencoba membuat
sebuah program pemesanan makan/minuman menggunakan Java Script.
KODE
HTML
:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>warung wenak tenan</title>
</head>
<body>
<script language="JavaScript"
type="text/javascript">
<!--
function hitungPesan(){
var nota = document.form2;
var hargaBakso = 12000 * eval(nota.qBakso.value);
var hargaSoto = 10000 * eval(nota.qSoto.value);
var hargaMie = 15000 * eval(nota.qMie.value);
var hargaDegan = 5000 * eval(nota.qDegan.value);
var hargaCampur = 7000 * eval(nota.qCampur.value);
var jumlahTotal = hargaBakso + hargaSoto + hargaMie +
hargaDegan + hargaCampur;
if (jumlahTotal > 50000){
nota.Total.value = jumlahTotal;
nota.Diskon.value = 10000;
nota.Bayar.value = jumlahTotal -
eval(nota.Diskon.value);
} else {
nota.Total.value = jumlahTotal;
nota.Diskon.value = 0;
nota.Bayar.value = jumlahTotal -
eval(nota.Diskon.value);
}
}
function resetForm(){
document.form2.reset();
}
//-->
</script>
<!--Letakkan Listing Code JavaScript disini-->
<h3>Form Pemesanan Berbasis JavaScript</h3>
<form name="form2" action="#">
<table border="1px">
<tr>
<th>No</th>
<th>Makanan/Minuman</th>
<th>Harga</th>
<th>Pesan</th>
</tr>
<tr>
<td width="15px">1</td>
<td width="200px">Bakso Istimewa</td>
<td width="85px" bgcolor="#0000000">@
<input type="text" name="bakso" value="12000"
size="6"disabled="true"/></td>
<td width="150px"><input type="text"
name="qBakso" value="0"
onChange="hitungPesan()"/></td>
</tr>
<tr>
<td>2</td>
<td>Soto Spesial</td>
<td bgcolor="#0000000">@ <input
type="text" name="soto" value="10000"
size="6" disabled="true"/></td>
<td><input type="text" name="qSoto"
value="0" onChange="hitungPesan()"/></td>
</tr>
<tr>
<td>3</td>
<td>Mie Ayam Super</td>
<td bgcolor="#0000000">@ <input
type="text" name="mie" value="15000"
size="6" disabled="true"/></td>
<td><input type="text" name="qMie"
value="0" onChange="hitungPesan()"/></td>
</tr>
<tr>
<td>4</td>
<td>Es Degan</td>
<td bgcolor="#0000000">@ <input
type="text" name="degan" value="7000"
size="6" disabled="true"/></td>
<td><input type="text" name="qDegan"
value="0" onChange="hitungPesan()"/></td>
</tr>
<tr>
<td>5</td>
<td>Es Campur</td>
<td bgcolor="#0000000">@ <input
type="text" name="campur" value="7000"
size="6" disabled="true"/></td>
<td><input type="text" name="qCampur"
value="0" onChange="hitungPesan()"/></td>
</tr>
<tr >
<td colspan="3" align="right">Jumlah
Total</td>
<td><input type="text" name="Total"
disabled="true" /></td>
</tr>
<tr >
<td colspan="3" align="right">Diskon</td>
<td><input type="text" name="Diskon"
disabled="true" /></td>
</tr>
<tr>
<td colspan="3" align="right">Jumlah
Dibayar</td>
<td><input type="text" name="Bayar"
disabled="true" align="right"/></td>
</tr>
</table><br/>
<input type="button" value="BATAL"
onClick="resetForm()" />
</form>
</body>
</html>
