Interaksi User

Interaksi User

Adanya interaktifitas dalam aplikasi akan membantu menarik minat pengguna untuk menggunakan aplikasi yang dikembangkan. Di banyak bahasa pemrograman pengolahan interaksi ini dikenal sebagai teknik penanganan event. Event dalam Javascript adalah sebuah kejadian interaksi antara user dengan halaman web. Bentuk interaksi ini dapat digambarkan seperti pada saat user melakukan klik pada tombol ataupun link, mengetik username dan password dan sebagainya.

Event ini pada HTML ditambahkan dalam bentuk atribut dari elemen yang ada. Program javascript yang ditempatkan pada atribut tersebut akan dijalankan pada saat interaksi yang bersesuaian terjadi. Berikut ini merupakan daftar atribut yang dapat digunakan untuk mengolah interaksi user.

Tabel 1. Daftar atribut event yang sering ditemui dalam dokumen HTML

Atribut Event	Penjelasan
onclick ondblclick	Event ini terjadi saat user melakukan klik sekali atau dua kali pada satu elemen HTML Elemen HTML yang umum memiliki atribut ini: button, document, checkbox, link, radio, select, submit, reset.
onmousedown	Event ini terjadi saat user melakukan klik pada satu elemen HTML Elemen terkait: button, document, link, layer
onmousemove	Event ini terjadi saat user menggerakan mouse diatas elemen HTML Elemen terkait: button, document, link, layer
onmouseover	Event ini terjadi saat user menggerakan mouse ke atas elemen HTML Elemen terkait: button, document, link, layer
onmouseout	Event ini terjadi saat user menggerakan mouse keluar elemen HTML Elemen terkait: button, document, link, layer
onmouseup	Event ini terjadi saat user melepaskan klik pada elemen HTML Elemen terkait: button, document, link, layer
onkeydown	Event ini terjadi saat user sedang menekan tombol keyboard pada elemen HTML Elemen terkait: document, image, link, input, textarea
onkeypress	Event ini terjadi saat user menekan tombol keyboard pada elemen HTML Elemen terkait: document, image, link, input, textarea
onkeyup	Event ini terjadi saat user melepas penekanan tombol keyboard pada elemen HTML Elemen terkait: document, image, link, input, textarea
onload	Event ini terjadi dokumen atau frame telah ditampilkan oleh browser. Elemen terkait: document, image, layer, window
onresize	Event ini terjadi saat ukuran dari dokumen berubah Elemen terkait: document, image, layer, window
onscroll	Event ini terjadi saat user melakukan scrolling pada dokumen Elemen terkait: document, window
onunload	Event ini terjadi saat user menutup dokumen Elemen terkait: document, window
onblur	Event ini terjadi saat fokus pada elemen tersebut dipindahkan ke elemen lainnya Elemen terkait: button, checkbox, file upload, layer, password, radio, reset, select, submit, text, textarea, window
onchange	Event ini terjadi saat nilai elemen form berubah Elemen terkait: file upload, select, submit, text, textarea
onfocus	Event ini terjadi saat elemen tersebut difokuskan oleh user Elemen terkait: button, checkbox, file upload, layer, password, radio, reset, select, submit, text, textarea, window
onreset	Event ini terjadi saat form di reset ke kondisi sebelum diisi Elemen terkait: form
onselect	Event ini terjadi saat user memiliki sebagian teks pada elemen Elemen terkait: text, textarea
onsubmit	Event ini terjadi saat form akan dikirim ke aplikasi server Elemen terkait: form

Format penerapan kode Javascript pada atribut event diatas sebagai berikut :

<tag atribut-event=”kode javascript;” … > … </tag>

atau untuk tag tanpa penutup.

<tag atribut-event=”kode javascript;” … />

Contoh program penerapan event pada halaman web.

<a href=”http://kompas.com” onclick=”alert(‘Link ini akan

membuka halaman Kompas.com’);”>Link 1</a>

Pada contoh diatas, apabila user melakukan klik pada Link 1, maka akan ditampilkan alert(). Selanjutnya pada contoh berikut ini sudah melibatkan fungsi di Javascript. Dimana apabila nilai dari input text berubah, maka alert() akan tampil dengan mengambil nilai yang diketikkan oleh user.

<script>

function sayHalo(){

    var nm = document.getElementById('nama').value;

    alert("Halo, " + nm);

}

</script>

<input type="text" id="nama" onchange="sayHalo();" />

Pernyataan document.getElementById(‘id elemen’).value adalah perintah javascript untuk mengambil nilai input dari elemen form.