Kalian mungkin sudah mempelajari cara menggunakan style CSS. CSS bisa kalian gunakan untuk mengubah tampilan teks. Tapi, tampilan yang dinamis di halaman tidak semuanya bisa didapat hanya dengan CSS, walaupun CSS menyediakan animasi dan transisi. Untuk membuat tampilan halaman yang lebih beragam berdasarkan tindakan pengguna, kalian bisa menggunakan script. Selain mengubah tampilan, script bisa juga digunakan untuk melakukan perhitungan dengan rumus tertentu.
Klik tulisannya kalau hasilnya cuma menampilkan satu paragraf. Karena event yang jadi pemicu adalah onclick, maka function akan dieksekusi saat tombol mouse ditekan. Kalian harus meletakkan pointer mouse tepat di atas elemen HTML yang memiliki atribut onclick sebelum menekan tombol kiri mouse.
Script dalam HTML diapit dengan menggunakan tag <script>. Bahasa scripting yang umum digunakan adalah javascript. Kalian sebenarnya bisa menggunakan scripting language yang lain seperti vbscript yang dulu pernah diperkenalkan microsoft. Tapi secara default scripting language yang digunakan dalam HTML adalah javascript.
Pembahasan tentang javascript tidak akan cukup ditulis dalam satu artikel. Saat ini, yang bisa saya berikan contohnya hanya cara menambahkan script di halaman HTML.
<HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
</HEAD>
<BODY>
<script>
alert("ini script sederhana");
</script>
</BODY>
</HTML>Contoh di atas menampilkan pesan dengan menggunakan alert yang merupakan salah satu function dalam javascript. Selain alert, javascript menyediakan banyak function lainnya.
Atribut src
Script bisa dipisahkan ke dalam file yang berbeda. Kalian bisa menunjuk file tersebut dengan menggunakan atribut src.
<HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
</HEAD>
<BODY>
<script src="nama_file.js">
</script>
</BODY>
</HTML>Event Handler
Selain menampilkan sesuatu secara langsung saat halaman dibuka, isi script juga bisa aktif berdasarkan tindakan dari pengguna. Untuk menentukan tindakan yang jadi pemicu, kalian memerlukan atribut-atribut yang termasuk "event handler". Nilai dari event handler adalah nama function dalam javascript.
- onabort
- onblur
- oncanplay
- oncanplaythrough
- onchange
- onclick
- oncontextmenu
- ondblclick
- ondrag
- ondragend
- ondragenter
- ondragleave
- ondragover
- ondragstart
- ondrop
- ondurationchange
- onemptied
- onended
- onerror
- onfocus
- onformchange
- onforminput
- oninput
- oninvalid
- onkeydown
- onkeypress
- onkeyup
- onload
- onloadeddata
- onloadedmetadata
- onloadstart
- onmousedown
- onmousemove
- onmouseout
- onmouseover
- onmouseup
- onmousewheel
- onpause
- onplay
- onplaying
- onprogress
- onratechange
- onreadystatechange
- onscroll
- onseeked
- onseeking
- onselect
- onshow
- onstalled
- onsubmit
- onsuspend
- ontimeupdate
- onvolumechange
- onwaiting
Btw, kalian bisa melihat dengan cukup jelas kalau semua atribut event handler diawali dengan "on". Kalian bisa meletakkan atribut event handler di hampir semua tag yang isinya terlihat.
<HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
</HEAD>
<BODY>
<p onclick="alert('onclick di tag p')">Klik tulisan ini</p>
</BODY>
</HTML>Klik tulisannya kalau hasilnya cuma menampilkan satu paragraf. Karena event yang jadi pemicu adalah onclick, maka function akan dieksekusi saat tombol mouse ditekan. Kalian harus meletakkan pointer mouse tepat di atas elemen HTML yang memiliki atribut onclick sebelum menekan tombol kiri mouse.
Ini cuma contoh cara menggunakan javascript. Javascript memiliki cukup banyak materi yang perlu dipelajari seperti variabel, operator, loop, function, percabangan, event handler, dll. Karena itu, satu artikel pendek tidak akan cukup untuk membahas javascript. Jika kalian berminat, kalian bisa mempelajari javascript setelah kalian cukup menguasai dasar-dasar dari HTML.