Mengolah 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.

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.

Ketiga fungsi diatas merupakan bagian dari obyek document. Sehingga obyek document perlu disertakan pada saat memanggil fungsi diatas.

Contoh : penggunaan fungsi getElementById()

<input type="text" id="nilai" />

<input type="button" id="btnAmbilNilai" value="Ambil nilai"

onclick="ambilNilai();" />

<script>

function ambilNilai(){

    var objNilai = document.getElementById('nilai');

    var n = objNilai.value;

    alert("nilainya adalah " + n);

}

</script>

Pada contoh diatas ini apabila tombol Ambil nilai diklik, maka obyek input nilai akan diambil menggunakan fungsi document.getElementById() dan selanjutnya, variabel value dari obyek nilai digunakan untuk mengambil data masukkan dari user agar dapat ditampilkan.

Gambar  14.1 Contoh hasil penggunaan fungsi getElementById()

Contoh : penggunaan fungsi getElementsByName().

<input type="text" name="nilai" />

<input type="button" id="btnAmbilNilai" value="Ambil nilai"

onclick="ambilNilai();" />

<script>

function ambilNilai(){

    var objNilai = document.getElementsByName('nilai')[0];

    var n = objNilai.value;

    alert("nilainya adalah " + n);

}

</script>

Fungsi getElementsByName() sedikit berbeda dengan metode getElementById(), dimana hasil dari metode ini adalah array obyek bukan obyek tunggal. Dengan hasil berupa array ini berarti untuk mengakses elemen pertama digunakan index 0. Disisi lain, dengan hasil array ini dimungkinkan untuk menuliskan elemen HTML dengan nilai atribut name yang sama. Berikut ini merupakan contoh penggunaan fungsi getElementsByName() dengan elemen yang memiliki nama sama lebih dari satu.

<input type="text" name="nilai" />

<input type="text" name="nilai" />

<input type="button" id="btnAmbilNilai" value="Ambil nilai"  

onclick="ambilNilai();" />

<script>

function ambilNilai(){

var obj1 = document.getElementsByName('nilai')[0];

var obj2 = document.getElementsByName('nilai')[1];

var n1 = obj1.value;

var n2 = obj2.value;

alert("nilai pertama adalah " + n1);

    alert("nilai kedua adalah " + n2);

}

</script>

Hasilnya:

Gambar  14.2  Contoh hasil penggunaan fungsi getElementsByName()

Selanjutnya untuk fungsi getElementsByTagName(), berikut ini diberikan contoh skripnya.

<input type="text" name="nilai" />

<input type="button" id="btnAmbilNilai" value="Ambil nilai"

onclick="ambilNilai();" />

<input type="text" name="hasil" />

<script>

function ambilNilai(){

    // mengambil obyek input text pertama

    var obj1 = document.getElementsByTagName('input')[0];

   

    // mengambil obyek input button

    var obj2 = document.getElementsByTagName('input')[1];

   

    // mengambil obyek input text kedua

    var obj3 = document.getElementsByTagName('input')[2];

   

    // mengambil nilai input text pertama dan button

    var s1 = obj1.value;

    var s2 = obj2.value;

   

    // menampilkan nilai pada input text kedua

    obj3.value = s1 + s2;

}

</script>

Hasil akhir dari skrip ini mirip dengan contoh sebelumnya, hanya cara mengambil nilainya yang berbeda. Oleh karena tombol juga dibuat menggunakan tag <input> maka nilainya dapat diakses menggunakan fungsi ini. Berikutnya untuk obyek input text yang kedua digunakan untuk menampilkan isi dari input text pertama dan input button.