1 Page 1882 15. Kegiatan Belajar 15 : Mengolah Interaksi User a. Tujuan Pembelajaran. Setelah mengikuti kegiatan belajar 15 ini siswa diharapkan dapat...
15. Kegiatan Belajar 15 : Mengolah Interaksi User a. Tujuan Pembelajaran. Setelah mengikuti kegiatan belajar 15 ini siswa diharapkan dapat : 1) Mengetahui bentuk penanganan interaksi user pada aplikasi 2) Memahami penerapan teknik pengolahan interaksi user pada aplikasi b.
Uraian Materi.
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
Event ini terjadi saat user melakukan klik sekali atau dua kali
ondblclick
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 Page | 189
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 Page | 190
Pemrograman Web
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 : …
atau untuk tag tanpa penutup.
Contoh program penerapan event pada halaman web. Link 1
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.
Page | 191
Pemrograman Web
<script> function sayHalo(){ var nm = document.getElementById('nama').value; alert("Halo, " + nm); } Pernyataan
document.getElementById(‘id
elemen’).value
adalah
perintah
javascript untuk mengambil nilai input dari elemen form.
Pengaksesan Obyek Pada Halaman Web Setiap elemen HTML yang ada dalam suatu dokumen web oleh Javascript diterjemahkan sebagai obyek HTML. Pada obyek HTML ini terdapat sejumlah fungsi, konstanta ataupun variabel yang dapat diakses untuk mengubah elemen HTML tersebut. Akses terhadap obyek HTML tersebut dapat dilakukan dengan menggunakan fungsi-fungsi berikut.
Tabel 2. Fungsi untuk mengakses obyek HTML
Fungsi
Penjelasan
getElementById(“id-elemen”)
id-elemen
disini
digunakan
untuk
menunjuk nilai dari atribut id dari elemen yang mau diakses obyeknya. getElementsByTagName(“nama-tag”)
nama-tag
disini
digunakan
untuk
mengambil obyek berdasarkan nama tag HTML-nya getElementsByName(“nama”)
nama disini adalah nilai dari atribut name dari
elemen
yang
akan
diakses.
Umumnya diterapkan pada komponen dari form, seperti input, select, checkbox, dan komponen lainnya.
