Scripting merupakan jenis lain dari pemrograman, yang umumnya lebih mudah dipahami. Script dapat disisipkan ke dalam dokumen HTML dengan menggunakan tag <script>. Tidak seperti style sheet, script bisa terlihat 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. Pada bagian ini, pembuatan DHTML akan dilakukan dengan memanfaatkan JavaScript.
Sebagaimana bahasa pemrograman umumnya, JavaScript terbentuk atas elemen-elemen fundamental. Elemen-elemen tersebut yaitu:
1. Kotak Dialog
JavaScript memungkinkan kita untuk menampilkan kotak dialog melalui fungsi alert(). Kotak dialog ini dapat dimanfaatkan untuk menyampaikan informasi atau konfirmasi.
2. 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.
3. Merujuk Elemen
Salah satu kemampuan utama JavaScript adalah mengontrol objek-objek di halaman web. Sehubungan dengan hal ini, ada beragam pendekatan yang bisa digunakan untuk mengacu atau mengakses elemen-elemen objek.
4. Event
Setiap objek HTML mendefinisikan properti-properti, method-method, dan event-event. Salah satu event yang sangat populer dan frekuensi penggunaannya cukup tinggi adalah onclick. Event ini akan dipicu manakala objek diklik.
Salah satu contoh aplikasi dari javascript yaitu pembuatan aplikasi kalkulator yang sangat sederhana. Source kode dari aplikasi ini yaitu:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>APLIKASI KALKULATOR JAVASCRIPT</title>
<title>Oleh:</title>
<title>Uswatun Hasanah</title>
<title>PTI INPUT 2008</title>
</head>
<body>
<script language ="JavaScript" type="text/javascript">
<!--
var flag=false;
function getTextValue() {
if (flag) kal.j.value +=num;
else kal.i.value =+num;
}
function tambah()
kal.pilih.value= ' + '
flag=true;
kal.j.focus()
}
function kurang()
kal.pilih.value= ' - '
flag=true;
kal.j.focus()
}
function kali()
kal.pilih.value= ' * '
flag=true;
kal.j.focus()
}
function bagi()
kal.pilih.value= ' / '
flag=true;
kal.j.focus()
}
//-->
</script>
</style>
<head>
APLIKASI KALKULATOR JAVASCRIPT
<p>
<form name="kal">
<tr>
<td>
<input type="text" name="i" size="3" />
<select name="pilihan" onchange="setSelected(this);">
<option>-Pilihan-</option>
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" name="j" size="3" />
<input type="button" name="hasil" value="=" onclick="kal.k.value=eval(kal.i.value+kal.pilihan.value+kal.j.value)" />
<input type="text" name="k" size="8" disabled="true" />
<br/>
</td>
</tr>
</table>
</form>
<p align="left">© Copyright <a href = "mailto: mbauus@gmail.com">mba-uus.blogspot.com</a>
</body>
</html>
Hasilnya terlihat pada gambar di bawah ini:
keren..
BalasHapus