Sebagaimanadiketahui, HTML merupakan model dokumen yang statis— begituditampilkantidakakanberubahsampaiadaaktivitasnavigasi. Adapununtukmenjadikan HTML sebagaihalamandinamisatauaktif, kitabisamemanfaatkanbahasa scripting.
2. DHTML dan JavaScript
Scripting merupakanjenislaindaripemrograman, yang umumnyalebihmudahdipahami. Script dapatdisisipkankedalamdokumen HTML denganmenggunakan tag <script>. Tidakseperti style sheet, script bisaterlihat di dalam <head> ataupun <body>.
DHTML (Dynamic HTML) merupakansuatuteknikuntukmenciptakan
halaman web yang interaktifdengancaramengombinasikanelemen-elemen
seperti HTML, style sheet, dan scripting. Jadi, DHTML bukanlahsuatujenis
bahasapemrogramanmelainkanhanyasekadaristilahsaja.Padabagianini,
pembuatan DHTML akandilakukandenganmemanfaatkan JavaScript.
1. ElemenDasar JavaScript
• Kotak Dialog
JavaScript memungkinkankitauntukmenampilkankotak dialog melaluifungsialert(). Kotak dialog inidapatdimanfaatkanuntukmenyampaikaninformasiataukonfirmasi.
• Dukungan Scripting
Melalui tag <noscript>, denganmudahkitabisamengidentifikasiapakah
browser mendukung scripting atautidak. Padadasarnya, tag initidak
dimaksudkanuntukmenghentikaninterpretasiterhadapkode program.
Dengan kata lain, browser akantetapmenerjemahkanbariskodekecuali tag
<script>.
• MerujukElemen
Salah satukemampuanutama JavaScript adalahmengontrolobjek-objek di halaman web.Sehubungandenganhalini, adaberagampendekatan yang bisadigunakanuntukmengacuataumengakseselemen-elemenobjek.
• Event
Setiapobjek HTML mendefinisikanproperti-properti, method-method, danevent-event.Salah satu event yang sangatpopulerdanfrekuensipenggunaannyacukuptinggiadalahonclick. Event iniakandipicumanakalaobjek—misalnya button atauteks—diklik.
• Linked Scripting
Sepertihalnya CSS, penulisankode JavaScript jugabisadilakukan di file terpisah. Langkahinisebaiknyadigunakanketikamelakukanimplementasinyata, dengantujuanmembuatkode yang bersih. Contohberikutmemperlihatkanpemisahankode JavaScript dan HTML.
2. Me-retrieve Nilai
Saatbekerjadenganelemen-elemenmasukan—seperti text field, select, dancheck box—HTML, kitabisamemanfaatkan JavaScript untukoperasivalidasi. Adapunlangkahpentingterkaitdenganelemen-elemeniniadalahpengambilannilai.
• Text Field
Elemen text field menyediakanproperti value yang bisadigunakanuntukmenetapkanataumendapatkannilaielemen.
• Select (Combo Box)
Secaraumum, properti value tersedia di semuaelemen HTML.Dengandemikian, kitajugabisamemanfaatkannyauntukmendapatkannilai select atau combo box.
• Check Box
Khususuntukpengambilannilai check box, terlebihdahulukitaperlumengidentifikasi item yang dipilih.
3. Memilih Item Check
Agar pemilihan item check box bisalebihefisien, kitadapatmenggunakanpendekatan check/uncheck all.
4. Window
• Menciptakan Window
Di dalam window aktif, kitajugabisamenciptakan window barumelaluimethod window.open().
• Komunikasi Window
Apabiladiperlukan, window induk—yang menciptakansubwindow—jugadapatberkomunikasidengan window buatannya.
Kita sudahseringmenggunakanalatmenghitungyaitukalkulator.Tapiapakahpernahberpikiruntukmembuatsebuah program kalkulatorsecara online di sebuah web atau blog….?????Dalampembahasan DHTML dan Java Script ini, sayaakanmencobamembuatsebuah program kalkulatormenggunakan Java Script. Cobatuliskan source code berikutini :
<html>
<title>Membuat program kalkulatorsederhanamenggunakan textbox </title>
<SCRIPT LANGUAGE="JavaScript">
functiontambah()
{
a=eval(form.a.value)
b=eval(form.b.value)
c=a+b
form.hasil.value = c
}
functionkurang()
{
a=eval(form.a.value)
b=eval(form.b.value)
c=a-b
form.hasil.value=c
}
function kali()
{
a=eval(form.a.value)
b=eval(form.b.value)
c=a*b
form.hasil.value=c
}
functionbagi()
{
a=eval(form.a.value)
b=eval(form.b.value)
c=a/b
form.hasil.value = c
}
functionpangkat()
{
a=eval(form.a.value)
b=eval(form.b.value)
c=Math.pow(a, b)
form.hasil.value = c
}
functionkosong()
{
form.a.focus()
form.a.value=""
form.b.value=""
form.hasil.value=""
}
</SCRIPT>
<bodyonload=kosong()>
<LEFT>
<font size="20">ProgramKalkulatorSederhana</font>
<FORM name="form">
<pre>
<br>
<font color="red"><input type="button" value="ON/C" onClick="kosong()"> </font> <input type="text" name="a"> <select name="operator" onchange="getSelectedValue();">
<option value="+" onClick="tambah()">+</option>
<option value="-" onClick="kurang()">-</option>
<option value="*" onClick="kali()">*</option>
<option value="/" onClick="bagi()">/</option>
<option value="^" onClick="pangkat()">^</option>
<input type="text" name="b"> = <input type "text" name="hasil" disabled="true">
</pre>
</LEFT>
<pre>
<br>
<marquee><font color="purple" face="monotypecorsiva" size="3">by : Amanda RehanaAyudhaTirtani</marquee></font> </pre><br>
</FORM>
</body>
</html>
Makaakantampilsepertiini :
Nah….Sekarangkitaakanmencobamembuatsebuahaplikasi form pemesananmakanan / minuman yang akandigunakanuntukpengoperasian di sebuah cafe. Denganketentuan :
• Field Harga, Jumlah Total, Diskon, danJumlahDIbayarbersifat read-only
• Jikapesandiisi, maka field jumlah total secaraotomatisakanmenghitungtotalnya, termasukjuga field jumlahdibayar.
Rumus :
Jumlah Total = ∑ (Harga * pesan)
Jumlah Bayar = Jumlah Total – Diskon
• JikaPembelianlebihdari 50000, maka field diskonsecaraotomatisakanberisinilaidiskonsebesar 10000 (tidakberlakukelipatannya) danotomatis pula field jumlahbayarakanberkurang
• JikatombolCnceldiklik, makasemua field Pesanakandibersihkan
Source codenyasepertiini :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<title>Are Cafe</title>
<script language="JavaScript" type="text/javascript">
<!--
function hitungPesan(){
var nota = document.form2;
var hargaBakso = 10000 * eval(nota.qBakso.value);
var hargaSoto = 7000 * eval(nota.qSoto.value);
var hargaMie = 12500 * 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>
<body>
<!--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 Kotak</td>
<td width="85px" >@ <input type="text" name="bakso" value="10000" 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>@ <input type="text" name="soto" value="7000" size="6" disabled="true"/></td>
<td><input type="text" name="qSoto" value="0" onChange="hitungPesan()"/></td>
</tr>
<tr>
<td>3</td>
<td>Mie Ayam Jumbo</td>
<td>@ <input type="text" name="mie" value="12500" 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>@ <input type="text" name="degan" value="5000" 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>@ <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="CANCEL" onClick="resetForm()" />
<input type="button" value="SAVE" onClick="saveForm()" />
</form>
</body>
</html>
Makatampilannyaakansepertiini :
