Saturday, March 6, 2010

DHTML & JAVASCRIPT

DHTML atau Dynamic HTML, bukanlah suatu bahasa pemrograman melainkan merupkan suatu istilah untuk membuat halaman web yang dinamis dan interaktif dengan mengkombinasikan bahasa pemrograman HTML, Javascript, Document Object Model, dan CSS.

DHTML mengijinkan skrip bahasa pemrograman untuk diubah menjadi variabel-variabel pada setiap pendefenisian bahasa pemrograman halaman web, yang menghasilkan efek perubahan tampilan beserta dengan fungsi-fungsinya setelah halaman web ditampilkan. Berbeda dengan HTML, yang memiliki kemampuan menghasilkan dan mengolah halaman web sebelum ditampilkan.

DHTML biasanya digunakan untuk membuat tombol rollover ataupun menu drop-down dan halaman web yang interaktif. Beberapa teknologi aplikasi penjelajah web memiliki tingkat dukungan terhadap DHTML yang berbeda-beda sehingga sangat sulit dikembangkan. Seperti misalnya variasi dan kombinasi ukuran layar bisa menampilkan dengan baik pada beberapa aplikasi penjelajah web sedangkan yang lainnya tidak. Pengembangan terbaru yang relatif setiap aplikasi penjelajah web seperti Internet Explorer 5.0+, Mozilla Firefox 2.0+, dan Opera 7.0+ sudah manambahkan Document Object Model.


Struktur pada halaman web

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DHTML example</title>
<script type="text/javascript">
function init() {
myObj = document.getElementById("navigation");
// .... more code]]
}
window.onload=init;
</script>
</head>
<body>
<div id="navigation"></div>
<pre>

Walaupun kode tersebut disimpan pada file eksternal; ini bisa diselesaikan dengan membuat pranala file yang mengandung JavaScript.
Hal ini berguna jika menggunakan skrip pemrograman yang sama pada beberapa [[halaman web]]:

</pre>
<script type="text/javascript" src="myjavascript.js"></script>
</body>
</html>


JavaScript adalah nama implementasi Netscape Communnication Corporation untukyang didasarkan pada konsep pemrograman berbasis prototipe.Bahasa ini terutama terkenal karena penggunaannya di situs web (sebagai JavaScript sisi klien) dan juga digunakan untuk menyediakan akses skrip untuk objek yang dibenamkan (embedded) di aplikasi lain. ECMA Script standar, suatu bahasa skrip. Walaupun memiliki nama serupa, JavaScript hanya sedikit berhubungan dengan bahasa pemrograman java, dengan kesamaan utamanya adalah penggunaan sintaks C. Secara semantik, JavaScript memiliki lebih banyak kesamaan dengan bahasa pemrograman Self.

Skrip JavaScript yang dimasukkan di dalam berkas HTML ataupun XHTML harus dimasukkan di antara tag . Berikut ini adalah contohnya (yang akan menampilkan sebuah dialog box berisi Halo Dunia! ketika sebuah tombol diklik oleh pengguna):

<input type="button" value="Tekan di sini" onclick="halo();">
<script type="text/javascript">
function halo() {
alert( "Halo Dunia!" );
}
</script>


salah satu aplikasi yang sederhana dapat kita lihat pada aplikasi perhitungan sederhana pada source kode program berikut:

<html>
<head>
<title>Calc-Easy</title>
<script language="javascript" type="text/javascript">
<!--
var flag = false;
function isi(num) {
if (flag) calc.j.value += num;
else calc.i.value += num;
}
function tambah()
{
calc.operator.value = ' + '
flag = true;
calc.j.focus()
}
function kurang()
{
calc.operator.value = ' - '
flag = true;
calc.j.focus()
}
function kali()
{
calc.operator.value = ' * '
flag = true;
calc.j.focus()
}
function bagi()
{
calc.operator.value = ' / '
flag = true;
calc.j.focus()
}
//-->
</script>
</style>
</head>
Perhitungan Sederhana
<form name="calc">
<tr>
<td>
<input type="text" name="i" size="2" />
<select name="operator" onchange="setSelected(this);">
<option>-Operator-</option>
<option value="*">*</option>
<option value="/">/</option>
<option value="+">+</option>
<option value="-">-</option>
</select>
<input type="text" name="j" size="2" />
<input type="button" name="hasil" value="=" onclick="calc.k.value=eval(calc.i.value+calc.operator.value+calc.j.value)" />
<input type="text" name="k" size="2" disabled="true" />
<br/>
</td>
</tr>
</table>
</form>
</body>
</html>

contoh diatas merupakan sedikit cara untuk membuat sebuah perhitungan nilai berdasarkan pemilihan tanda operator mulai dari perkalian (*), pembagian (/), penjumlahan (+) dan pengurangan (-) dan hasilnya terlihat sebagai berikut:


selamat mencoba....!

No comments:

Post a Comment