java script events

Nama Anggota Kelompok 13 :

1). Ahmad Harfie 5107100018

2). Arya Dwi P. 5107100045

3). Rizkie Denny P. 5107100146

4). M. Yusuf Habibie 5107100153

Java Script Events

Java Script EventsEvent adalah sebuah actions yang bisa

dideteksi di dalam Java script. Fungsi yang menangani event disebut event handler. Dengan menggunakan Javascript, 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 EventsMacam-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 HandlerUntuk mendeklarasikan sebuah even pada suatu halaman web, kita

tidak perlu menuliskannya dalam tag <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 dengan memasukkan handler ke dalam event property pada elemen object.

Registering Event HandlerContoh traditional model:

onLoad dan onUnloadEvent “onLoad “ dan “onUnload” ditrigger

ketika suatu user masuk atau keluar suatu halaman website.

Event “onLoad” itu sering digunakan untuk mengecek tipe browser suatu pengunjung dan versi browsernya, dan untuk mengload versi webpage yang cocok dengan browser pengunjung.

onLoad dan onUnload (cont.)Contoh: aplikasi onLoad dan onUnload event

handler untuk menyapa pengunjung.

onLoad dan onUnload (result)

onLoad dan onUnload (result) onUnload event handler bekerja saat user

meninggalkan halaman

onMouseMove, event object & this onmousemove event terjadi saat pointer mouse

digerakkan.Event object memberi informasi tentang

event yang terjadi, mialnya tentang lokasi pointer mouse, 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 atas pada sebuah page, maka pemiliknya adalah page itu 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

kursor bergerak melewati elemen pada html (misalnya gambar).

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 warna

background kembali putih.

onMouseOver dan onMouseOut (result)

onMouseOver dan onMouseOut (result)

onFocus, onBlurEvent “onFocus”, “onBlur” sering

digunakan untuk sebagai kombinasi untuk proses validasi pada sebuah field form.

“onFocus” berjalan apabila frame set, document, atau form object seperti text field mendapat fokus untuk input.

Sedangkan “onBlur” berjalan jika frame set, document, atau form object seperti text field kehilangan fokus untuk input.

onFocus, onBlur (source)Contoh: Aplikasi pengisian nama dan e-mail.Pesan akan dimunculkan jika user

memasukkan alamat e-mail yang tidak valid.

onFocus, onBlur (result)Saat user klik pada textbox pertama,

sebuah pesan dimunculkan oleh onFocus event handler.

onFocus, onBlur (result) onBlur event handler berfungsi untuk

menampilkan pesan jika alamat e-mail tidak valid.

Event BubblingEvent Bubbling adalah proses di mana event

yang berada pada child element “naik” ke parent element. Saat child event berjalan, event ditangani oleh child event handler terlebih dahulu, lalu oleh parent event handler.

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

Event BubblingContoh : di dalam tag <p> (parent) terdapat

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

Event Bubbling

Membatalkan Event BubblingEvent bubbling bisa ditiadakan dengan

mengeset cancelBubble menjadi true seperti ini:event.cancelBubble = true;

onClick onClick event handler biasanya dipakai pada link

menuju halaman 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 ke www.google.co.id.

onClick (result)

onChange onChange event handler berjalan ketika

elemen form dipilih dan diubah (contohnya ketika radio button dicentang atau ketika teks dalam textbox diubah).

onChange dapat digunakan pada textbox, maupun radio button.

onChange (source)Contoh: aplikasi pemesanan barang

sederhana.

onChange (result)

Biaya total akan dihitung secara otomatis

Input yang tidak valid (angka ≤ 0, bukan angka) akan menyebabkan textfield dikosongkan

onSelect onSelect event handler mengeksekusi kode

JavaScript ketika user menyeleksi teks dalam textbox atau textarea.

Contoh:

onSelect (result)

onReset onReset event handler mengeksekusi kode

JavaScript ketika user menekan tombol reset.

Contoh:

onReset (result)

onErroronError Event Handler bekerja saat terjadi

error saat me-load document atau image.Dengan onError kita bisa menggantikan

pesan error standar dengan fungsi kita sendiri.

Fungsi onError mengambil 3 argument: message text, URL, line number

onError (source)

onError (result)

onAbortonError Event Handler bekerja saat user

berhenti me-load gambar. User bisa berhenti me-load gambar dengan cara menekan tombol stop pada browser atau pergi ke halaman lain.

onError hanya bekerja pada Internet Explorer.

Contoh:

onAbort (result)

onSubmit onSubmit event handler digunakan untuk

mengeksekusi kode javascript saat user melakukan submit form. Karena itu, onSubmit digunakan dalam tag <FORM>.

onSubmit event handler menggunakan properti event object:type - mengindikasikan tipe event. target – mengindikasikan target object.

onSubmit (source)

onSubmit (result)