java script events
DESCRIPTION
TRANSCRIPT
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)