Nama Anggota Kelompok 13 : 1). Ahmad Harfie  5107100018 2). Arya Dwi P.  5107100045 3). Rizkie Denny P.  5107100146 4). M....
Java Script Events <ul><li>Event  adalah sebuah actions yang bisa dideteksi di dalam Java script. Fungsi yang menangani ev...
Java Script Events <ul><li>Macam-macam events antara lain: </li></ul><ul><ul><li>Form Events :  blur, change, focus, reset...
Registering Event Handler <ul><li>Untuk mendeklarasikan sebuah even pada suatu halaman web, kita tidak perlu menuliskannya...
Registering Event Handler <ul><li>Contoh traditional model: </li></ul>
onLoad  dan  onUnload <ul><li>Event “ onLoad  “ dan “ onUnload ” ditrigger ketika suatu user masuk atau keluar suatu halam...
onLoad  dan  onUnload (cont.) <ul><li>Contoh: aplikasi  onLoad  dan  onUnload  event handler untuk menyapa pengunjung. </l...
onLoad  dan  onUnload (result)
onLoad  dan  onUnload (result) <ul><li>onUnload  event handler bekerja saat user meninggalkan halaman </li></ul>
onMouseMove, event object & this <ul><li>onmousemove  event terjadi saat pointer mouse digerakkan. </li></ul><ul><li>Event...
<ul><li>Contoh aplikasi onMouseMove yang menangani event object berupa letak pointer mouse </li></ul>
<ul><li>Aplikasi ini memungkinkan user menggerakkan gambar di page. </li></ul>
 
 
onMouseOver dan onMouseOut <ul><li>onMouseOver  event handler berjalan ketika kursor bergerak melewati elemen pada html (m...
onMouseOver dan onMouseOut (source) <ul><li>Contoh Program: </li></ul><ul><li>onMouseOver  event handler akan mengubah war...
onMouseOver dan onMouseOut (result)
onMouseOver dan onMouseOut (result)
onFocus, onBlur <ul><li>Event “ onFocus ”, “ onBlur ” sering digunakan untuk sebagai kombinasi untuk proses validasi pada ...
onFocus, onBlur (source) <ul><li>Contoh: Aplikasi pengisian nama dan e-mail. </li></ul><ul><li>Pesan akan dimunculkan jika...
onFocus, onBlur (result) <ul><li>Saat user klik pada textbox pertama, sebuah pesan dimunculkan oleh  onFocus  event handle...
onFocus, onBlur (result) <ul><li>onBlur  event handler berfungsi untuk menampilkan pesan jika alamat e-mail tidak valid. <...
Event Bubbling <ul><li>Event Bubbling adalah proses di mana event yang berada pada child element “naik” ke parent element....
Event Bubbling <ul><li>Contoh : di dalam tag  <p>  (parent) terdapat event handler, dan tag  <b>  (child) yang berada di d...
Event Bubbling
Membatalkan Event Bubbling <ul><li>Event bubbling bisa ditiadakan dengan mengeset cancelBubble menjadi true seperti ini: <...
onClick <ul><li>onClick  event handler biasanya dipakai pada link menuju halaman lain, meskipun bisa juga dipakai pada tek...
onClick (result)
onChange <ul><li>onChange  event handler berjalan ketika elemen form dipilih dan diubah (contohnya ketika radio button dic...
onChange (source) <ul><li>Contoh: aplikasi pemesanan barang sederhana. </li></ul>
 
 
onChange (result) <ul><li>Biaya total akan dihitung secara otomatis </li></ul><ul><li>Input yang tidak valid (angka ≤ 0, b...
onSelect <ul><li>onSelect  event handler mengeksekusi kode JavaScript ketika user menyeleksi teks dalam textbox atau texta...
onSelect (result)
onReset <ul><li>onReset  event handler mengeksekusi kode JavaScript ketika user menekan tombol reset. </li></ul><ul><li>Co...
onReset (result)
onError <ul><li>onError  Event Handler bekerja saat terjadi error saat me-load document atau image. </li></ul><ul><li>Deng...
onError (source)
onError (result)
onAbort <ul><li>onError  Event Handler bekerja saat user berhenti me-load gambar. User bisa berhenti me-load gambar dengan...
onAbort (result)
onSubmit <ul><li>onSubmit  event handler digunakan untuk mengeksekusi kode javascript saat user melakukan submit form. Kar...
onSubmit (source)
onSubmit (result)
SEKIAN
Upcoming SlideShare
Loading in …5
×

Java Script Events

10,736 views
10,581 views

Published on

Published in: Technology
2 Comments
4 Likes
Statistics
Notes
No Downloads
Views
Total views
10,736
On SlideShare
0
From Embeds
0
Number of Embeds
444
Actions
Shares
0
Downloads
307
Comments
2
Likes
4
Embeds 0
No embeds

No notes for slide

Java Script Events

  1. 1. 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
  2. 2. Java Script Events <ul><li>Event 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. </li></ul><ul><li>Contoh Event, seperti misalnya : </li></ul><ul><li>- Me-load gambar. </li></ul><ul><li>- Menggerakkan kursor melewati elemen tertentu </li></ul><ul><li> (misalnya gambar) </li></ul><ul><li>- memilih input field pada suatu webpage </li></ul><ul><li>- melakukan submit pada suatu form. </li></ul><ul><li>- user menekan tombol keyboard. </li></ul><ul><li>- user melakukan klik mouse. </li></ul>
  3. 3. Java Script Events <ul><li>Macam-macam events antara lain: </li></ul><ul><ul><li>Form Events : blur, change, focus, reset, select, submit. </li></ul></ul><ul><ul><li>Image Events : abort, error, load. </li></ul></ul><ul><ul><li>Image Map Events : mouseOver, mouseOut. </li></ul></ul><ul><ul><li>Link Events : click, mouseOver, mouseOut. </li></ul></ul><ul><ul><li>Window Events : load, unload, error, focus, blur. </li></ul></ul>
  4. 4. Registering Event Handler <ul><li>Untuk 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 . </li></ul><ul><li>Contoh: </li></ul><ul><li>- event handler dalam tag <a></a> </li></ul><ul><li><a href=&quot;onclick.htm&quot; onclick =&quot;return confirm('Apa anda ingin pindah halaman?');&quot;>Klik di sini</a> </li></ul><ul><li>Cara kedua adalah traditional model , yaitu dengan memasukkan handler ke dalam event property pada elemen object. </li></ul>
  5. 5. Registering Event Handler <ul><li>Contoh traditional model: </li></ul>
  6. 6. onLoad dan onUnload <ul><li>Event “ onLoad “ dan “ onUnload ” ditrigger ketika suatu user masuk atau keluar suatu halaman website. </li></ul><ul><li>Event “ onLoad ” itu sering digunakan untuk mengecek tipe browser suatu pengunjung dan versi browsernya, dan untuk mengload versi webpage yang cocok dengan browser pengunjung. </li></ul>
  7. 7. onLoad dan onUnload (cont.) <ul><li>Contoh: aplikasi onLoad dan onUnload event handler untuk menyapa pengunjung. </li></ul>
  8. 8. onLoad dan onUnload (result)
  9. 9. onLoad dan onUnload (result) <ul><li>onUnload event handler bekerja saat user meninggalkan halaman </li></ul>
  10. 10. onMouseMove, event object & this <ul><li>onmousemove event terjadi saat pointer mouse digerakkan. </li></ul><ul><li>Event object memberi informasi tentang event yang terjadi, mialnya tentang lokasi pointer mouse, tombol keyboard yang ditekan dan sebagainya. </li></ul><ul><li>PadaJavaScript this selalu mengacu pada “pemilik” fungsi yang dieksekusi. Contoh: </li></ul><ul><ul><li>function doSomething() { this.style.color = '#cc0000'; } </li></ul></ul><ul><li>Jika kita definisikan fungsi doSomething() di atas pada sebuah page, maka pemiliknya adalah page itu sendiri. </li></ul>
  11. 11. <ul><li>Contoh aplikasi onMouseMove yang menangani event object berupa letak pointer mouse </li></ul>
  12. 12. <ul><li>Aplikasi ini memungkinkan user menggerakkan gambar di page. </li></ul>
  13. 15. onMouseOver dan onMouseOut <ul><li>onMouseOver event handler berjalan ketika kursor bergerak melewati elemen pada html (misalnya gambar). </li></ul><ul><li>Sedangkan onMouseOut berjalan saat kursor meninggalkan elemen tersebut. </li></ul>
  14. 16. onMouseOver dan onMouseOut (source) <ul><li>Contoh Program: </li></ul><ul><li>onMouseOver event handler akan mengubah warna background menjadi merah atau biru. </li></ul><ul><li>onMouseOut event handler akan mengubah warna background kembali putih. </li></ul>
  15. 17. onMouseOver dan onMouseOut (result)
  16. 18. onMouseOver dan onMouseOut (result)
  17. 19. onFocus, onBlur <ul><li>Event “ onFocus ”, “ onBlur ” sering digunakan untuk sebagai kombinasi untuk proses validasi pada sebuah field form. </li></ul><ul><li>“ onFocus ” berjalan apabila frame set, document, atau form object seperti text field mendapat fokus untuk input. </li></ul><ul><li>Sedangkan “ onBlur ” berjalan jika frame set, document, atau form object seperti text field kehilangan fokus untuk input. </li></ul>
  18. 20. onFocus, onBlur (source) <ul><li>Contoh: Aplikasi pengisian nama dan e-mail. </li></ul><ul><li>Pesan akan dimunculkan jika user memasukkan alamat e-mail yang tidak valid. </li></ul>
  19. 21. onFocus, onBlur (result) <ul><li>Saat user klik pada textbox pertama, sebuah pesan dimunculkan oleh onFocus event handler. </li></ul>
  20. 22. onFocus, onBlur (result) <ul><li>onBlur event handler berfungsi untuk menampilkan pesan jika alamat e-mail tidak valid. </li></ul>
  21. 23. Event Bubbling <ul><li>Event 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. </li></ul><ul><li>Event Bubbling bisa dibatalkan, sehingga event handler pada parent element tidak dikerjakan. </li></ul>
  22. 24. Event Bubbling <ul><li>Contoh : 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. </li></ul>
  23. 25. Event Bubbling
  24. 26. Membatalkan Event Bubbling <ul><li>Event bubbling bisa ditiadakan dengan mengeset cancelBubble menjadi true seperti ini: </li></ul><ul><ul><li>event.cancelBubble = true; </li></ul></ul>
  25. 27. onClick <ul><li>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. </li></ul><ul><li>Contoh: onClick event handler akan menanyakan apakah pengunjung ingin pindah halaman sebelum melanjutkan ke www.google.co.id. </li></ul>
  26. 28. onClick (result)
  27. 29. onChange <ul><li>onChange event handler berjalan ketika elemen form dipilih dan diubah (contohnya ketika radio button dicentang atau ketika teks dalam textbox diubah). </li></ul><ul><li>onChange dapat digunakan pada textbox, maupun radio button. </li></ul>
  28. 30. onChange (source) <ul><li>Contoh: aplikasi pemesanan barang sederhana. </li></ul>
  29. 33. onChange (result) <ul><li>Biaya total akan dihitung secara otomatis </li></ul><ul><li>Input yang tidak valid (angka ≤ 0, bukan angka) akan menyebabkan textfield dikosongkan </li></ul>
  30. 34. onSelect <ul><li>onSelect event handler mengeksekusi kode JavaScript ketika user menyeleksi teks dalam textbox atau textarea. </li></ul><ul><li>Contoh: </li></ul>
  31. 35. onSelect (result)
  32. 36. onReset <ul><li>onReset event handler mengeksekusi kode JavaScript ketika user menekan tombol reset. </li></ul><ul><li>Contoh: </li></ul>
  33. 37. onReset (result)
  34. 38. onError <ul><li>onError Event Handler bekerja saat terjadi error saat me-load document atau image. </li></ul><ul><li>Dengan onError kita bisa menggantikan pesan error standar dengan fungsi kita sendiri. </li></ul><ul><li>Fungsi onError mengambil 3 argument: message text, URL, line number </li></ul>
  35. 39. onError (source)
  36. 40. onError (result)
  37. 41. onAbort <ul><li>onError 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. </li></ul><ul><li>onError hanya bekerja pada Internet Explorer. </li></ul><ul><li>Contoh: </li></ul>
  38. 42. onAbort (result)
  39. 43. onSubmit <ul><li>onSubmit event handler digunakan untuk mengeksekusi kode javascript saat user melakukan submit form. Karena itu, onSubmit digunakan dalam tag <FORM>. </li></ul><ul><li>onSubmit event handler menggunakan properti event object: </li></ul><ul><ul><li>type - mengindikasikan tipe event. </li></ul></ul><ul><ul><li>target – mengindikasikan target object. </li></ul></ul>
  40. 44. onSubmit (source)
  41. 45. onSubmit (result)
  42. 46. SEKIAN

×