kel13-javascriptevents-100316072918-phpapp02

5/14/2018 kel13-javascriptevents-100316072918-phpapp02 - slidepdf.com

http://slidepdf.com/reader/full/kel13-javascriptevents-100316072918-phpapp02 1/46

Nama Anggota Kelompok 13 :

1). Ahmad Harfie 5107100018

2). Arya Dwi P. 5107100045

3). Rizkie Denny P.5107100146

Java Script Events



Java Script Events Event adalah sebuah actions yang bisa dideteksi di

dalam Java script. Fungsi yang menangani eventdisebut event handler. Dengan menggunakanJavascript, user dapat membuat suatu website yang

lebih dinamis.

Contoh Event, seperti misalnya :

- Me-load gambar.

- Menggerakkan kursor melewati elemen tertentu

(misalnya gambar)

- memilih input field pada suatu webpage

- melakukan submit pada suatu form.

- user menekan tombol keyboard.

- user melakukan klik mouse.



Java Script Events Macam-macam events antara lain:

Form Events : blur, change, focus, reset,select, submit.

Image Events : abort, error, load.

Image Map Events : mouseOver, mouseOut.

Link Events : click, mouseOver,mouseOut.

Window Events : load, unload, error,

focus, blur.



Registering Event Handler Untuk mendeklarasikan sebuah even pada suatu

halaman web, kita tidak perlu menuliskannya dalamtag <script>. Kita bisa mendefinisikannya langsung

pada tag HTML. Cara ini disebut inline model.

Contoh:- event handler dalam tag <a></a>

<a href="onclick.htm" onclick="return confirm('Apa

anda ingin pindah halaman?');">Klik di sini</a>

Cara kedua adalah traditional model, yaitu denganmemasukkan handler ke dalam event property padaelemen object.



Registering Event Handler Contoh traditional model:



onLoad dan onUnload

Event “onLoad “ dan “onUnload ” ditrigger ketikasuatu user masuk atau keluar suatu halamanwebsite.

Event “onLoad ” itu sering digunakan untukmengecek tipe browser suatu pengunjung danversi browsernya, dan untuk mengload versiwebpage yang cocok dengan browser

pengunjung.



onLoad dan onUnload (cont.)

Contoh: aplikasi onLoad dan onUnload eventhandler untuk menyapa pengunjung.



onLoad dan onUnload (result)



onLoad dan onUnload (result)

onUnload event handler bekerja saat usermeninggalkan halaman



onMouseMove, event object & this

onmousemove event terjadi saat pointer mousedigerakkan.

Event object memberi informasi tentang eventyang terjadi, mialnya tentang lokasi pointermouse, tombol keyboard yang ditekan dan

sebagainya.

PadaJavaScript this selalu mengacu pada

“pemilik” fungsi yang dieksekusi. Contoh:function doSomething() { this.style.color = '#cc0000'; }

Jika kita definisikan fungsi doSomething() di ataspada sebuah page, maka pemiliknya adalah pageitu sendiri.



Contoh aplikasi onMouseMove yang menangani

event object berupa letak pointer mouse



Aplikasi ini memungkinkan user menggerakkan

gambar di page.



onMouseOver dan onMouseOut

onMouseOver event handler berjalan ketika kursorbergerak melewati elemen pada html (misalnyagambar).

Sedangkan onMouseOut berjalan saat kursor

meninggalkan elemen tersebut.



onMouseOver dan onMouseOut (source)

Contoh Program: onMouseOver event handler akan mengubah warna

background menjadi merah atau biru.

onMouseOut event handler akan mengubah warnabackground kembali putih.



onMouseOver dan onMouseOut (result)



onFocus, onBlur

Event “onFocus”, “onBlur” seringdigunakan untuk sebagai kombinasiuntuk proses validasi pada sebuah

field form. “onFocus” berjalan apabila frame set,

document, atau form object seperti textfield mendapat fokus untuk input.

Sedangkan “onBlur” berjalan jika frameset, document, atau form object sepertitext field kehilangan fokus untuk input.



onFocus, onBlur (source)

Contoh: Aplikasi pengisian nama dan e-mail.

Pesan akan dimunculkan jika user memasukkanalamat e-mail yang tidak valid.



onFocus, onBlur (result)

Saat user klik pada textbox pertama, sebuahpesan dimunculkan oleh onFocus event handler.



onFocus, onBlur (result)

onBlur event handler berfungsi untukmenampilkan pesan jika alamat e-mail tidak valid.



Event Bubbling

Event Bubbling adalah proses di mana event yangberada pada child element “naik” ke parent element.Saat child event berjalan, event ditangani oleh childevent handler terlebih dahulu, lalu oleh parent eventhandler.

Event Bubbling bisa dibatalkan, sehingga eventhandler pada parent element tidak dikerjakan.



Event Bubbling

Contoh : di dalam tag <p> (parent) terdapat event

handler, dan tag<b>

(child) yang berada di dalamparagraf juga memiliki event handler. Jika eventhandler dalam tag <b> dijalankan maka eventhandler dalam tag <p> juga dijalankan.



Event Bubbling



Membatalkan Event Bubbling

Event bubbling bisa ditiadakan dengan mengesetcancelBubble menjadi true seperti ini:event.cancelBubble = true;



onClick

onClick event handler biasanya dipakai pada link menujuhalaman lain, meskipun bisa juga dipakai pada teks biasa.Fungsi onclick akan menyala jika pengunjung klik pada

elemen HTML yang dipasangi event handler tersebut.

Contoh: onClick event handler akan menanyakan apakah

pengunjung ingin pindah halaman sebelum melanjutkan kewww.google.co.id.



onClick (result)



onChange

onChange event handler berjalan ketika elemenform dipilih dan diubah (contohnya ketika radiobutton dicentang atau ketika teks dalam textboxdiubah).

onChange dapat digunakan pada textbox, maupunradio button.



onChange (source)

Contoh: aplikasi pemesanan barang sederhana.



onChange (result)

Biaya total akan

dihitung secaraotomatis

Input yang tidakvalid (angka ≤

0, bukanangka) akanmenyebabkantextfielddikosongkan



onSelect

onSelect event handler mengeksekusi kodeJavaScript ketika user menyeleksi teks dalamtextbox atau textarea.

Contoh:



onSelect (result)



onReset

onReset event handler mengeksekusi kodeJavaScript ketika user menekan tombol reset.

Contoh:

onReset (result)



onReset (result)



onError

onError Event Handler bekerja saat terjadi errorsaat me-load document atau image.

Dengan onError kita bisa menggantikan pesanerror standar dengan fungsi kita sendiri.

Fungsi onError mengambil 3 argument: messagetext, URL, line number



onError (source)



onError (result)



onAbort

onError Event Handler bekerja saat userberhenti me-load gambar. User bisa berhenti me-load gambar dengan cara menekan tombol stoppada browser atau pergi ke halaman lain.

onError hanya bekerja pada Internet Explorer. Contoh:



onAbort (result)



onSubmit

onSubmit event handler digunakan untukmengeksekusi kode javascript saat usermelakukan submit form. Karena itu, onSubmit

digunakan dalam tag <FORM>.

onSubmit event handler menggunakan propertievent object:

type - mengindikasikan tipe event.

target – mengindikasikan target object.



onSubmit (source)



onSubmit (result)

kel13-javascriptevents-100316072918-phpapp02

Documents