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.
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
Kotak Dialog
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.
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.
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 :
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>
HASIL PADA LOCALHOST :
No comments:
Post a Comment