makalah event pada jquery
DESCRIPTION
Makalah Event Pada JQuery - contoh-contoh event pada JQuerydan pengunaan event yang umum digunakanTRANSCRIPT
Penggunaan Events Pada JQuery IT 2A
Penggunaan Events pada JQUERY
Nama Kelompok :
Heksa Tri Juliantara (4312010012) Hidayati Nuzula (4312010028) Juliany Hasanah (4312010031) Mega Puspita Sari (4312010033) Muhamad Armansyah (4312010007)
KELOMPOK 5
IT 2A
Politeknik Negeri Jakarta
KATA PENGANTAR
Puji syukur kami panjatkan ke hadirat Allah SWT, berkat rahmat dan karunianya
kami dapat menyelesaikan makalah mata kuliah Client Side Web Programming
yang berjudul ‘Penggunaan Events pada JQUERY’.
Kami sadar, makalah ini tidaklah sempurna dan masih banyak kekurangan-
kekurangan, karena Tak Ada Gading Yang Tak Retak. Maka dari itu, kami
sebagai penyusun, mengharapakan kritik dan saran yang membangun dari
pembaca agar dapat lebih baik dalam makalah selanjutnya.
Semoga makalah ini dapat bermanfaat bagi para pembaca. Terima Kasih.
Depok, Mei 2013
i
Daftar Isi
KATA PENGANTAR........................................................................................................i
Daftar Isi......................................................................................................................ii
BAB I PENDAHULUAN..................................................................................................1
1.1. Latar Belakang.................................................................................................1
1.2. Pembatasan Masalah.......................................................................................1
BAB II ISI......................................................................................................................2
2. 1 Event Method pada JQuery.............................................................................2
2. 2 Penjelasan Event Dasar pada JQuery............................................................4
1. Penulisan Syntax..............................................................................................5
2. Event - Event Dasar yang sering digunakan pada JQuer.............................5
BAB III PENUTUP .......................................................................................................11
3.1. Kesimpulan...........................................................................................................11
DAFTAR PUSTAKA................................................................................................12
ii
iii
Penggunaan Events Pada JQuery IT 2A
BAB I
Pendahuluan
1.1. Latar Belakang
Untuk mengoptimisasi dan meringkas penulisan library JavaScript, jQuery
merupakan jawaban yang tepat dalam hal tersebut. jQuery merupakan sebuah
framework dan cara baru dalam menuliskan kode JavaScript. Dengan
menggunakan jQuery, kita dapat mempercepat perpindahan dokumen HTML,
penanganan event(event-handling), dan pembuatan animasi didalam web untuk
memperindah website yang kita buat.
Agar pengguna(user) dapat berinteraksi dengan website dan dapat
mengatur tampilan pada penggunaan jQuery, diperlukan sebuah penanganan event
dengan menambahkan perintah-perintah seperti click() untuk menangani event
saat terjadi click, focus(), hover(), mouseout(), mouseleave(), dan lain-lainnya.
1.2. Pembatasan Masalah
Dalam makalah ini, penggunaan event yang diimplementasikan yaitu pada
saat pointer menuju kearah objek dan memanggil event yang telah diberikan
didalam objek tersebut. Event-event yang dibahas yaitu:
1. click()
2. dbclick()
3. focus()
4. hover()
5. mouseleave()
6. mousemove()
7. mouseout()
8. mouseover()
9. mouseenter()
10. scroll()
11. select()
1
Penggunaan Events Pada JQuery IT 2A
BAB II
Isi
2. 1 Event Method pada JQuery
Method Description
bind() Attaches event handlers to elements
blur() Attaches/Triggers the blur event
change() Attaches/Triggers the change event
click() Attaches/Triggers the click event
dblclick() Attaches/Triggers the double click event
delegate() Attaches a handler to current, or future, specified child elements of the matching elements
die() Removes all event handlers added with the live() method
error() Attaches/Triggers the error event
event.currentTarget
The current DOM element within the event bubbling phase
event.data Contains the optional data passed to an event method when the current executing handler is bound
event.delegateTarget
Returns the element where the currently-called jQuery event handler was attached
event.isDefaultPrevented()
Returns whether event.preventDefault() was called for the event object
event.isImmediatePropagationStopped()
Returns whether event.stopImmediatePropagation() was called for the event object
event.isPropagationStopped()
Returns whether event.stopPropagation() was called for the event object
event.namespace
Returns the namespace specified when the event was triggered
2
Penggunaan Events Pada JQuery IT 2A
event.pageX Returns the mouse position relative to the left edge of the document
event.pageY Returns the mouse position relative to the top edge of the document
event.preventDefault()
Prevents the default action of the event
event.relatedTarget
Returns which element being entered or exited on mouse movement.
event.result Contains the last/previous value returned by an event handler triggered by the specified event
event.stopImmediatePropagation()
Prevents other event handlers from being called
event.stopPropagation()
Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event
event.target Returns which DOM element triggered the event
event.timeStamp
Returns the number of milliseconds since January 1, 1970, when the event is triggered
event.type Returns which event type was triggered
event.which Returns which keyboard key or mouse button was pressed for the event
focus() Attaches/Triggers the focus event
focusin() Attaches an event handler to the focusin event
focusout() Attaches an event handler to the focusout event
hover() Attaches two event handlers to the hover event
keydown() Attaches/Triggers the keydown event
keypress() Attaches/Triggers the keypress event
keyup() Attaches/Triggers the keyup event
live() Adds one or more event handlers to current, or future, selected elements
load() Attaches an event handler to the load event
mousedown() Attaches/Triggers the mousedown event
mouseenter() Attaches/Triggers the mouseenter event
mouseleave() Attaches/Triggers the mouseleave event
mousemove() Attaches/Triggers the mousemove event
3
Penggunaan Events Pada JQuery IT 2A
mouseout() Attaches/Triggers the mouseout event
mouseover() Attaches/Triggers the mouseover event
mouseup() Attaches/Triggers the mouseup event
off() Removes event handlers attached with the on() method
on() Attaches event handlers to elements
one() Adds one or more event handlers to selected elements. This handler can only be triggered once per element
$.proxy() Takes an existing function and returns a new one with a particular context
ready() Specifies a function to execute when the DOM is fully loaded
resize() Attaches/Triggers the resize event
scroll() Attaches/Triggers the scroll event
select() Attaches/Triggers the select event
submit() Attaches/Triggers the submit event
toggle() Attaches two or more functions to toggle between for the click event
trigger() Triggers all events bound to the selected elements
triggerHandler() Triggers all functions bound to a specified event for the selected elements
unbind() Removes an added event handler from selected elements
undelegate() Removes an event handler to selected elements, now or in the future
unload() Attaches an event handler to the unload event
2. 2 Penjelasan Event Dasar pada JQuery
Sebenarnya ada begitu banyak jenis event dalam JQuery, namun di sini
Saya hanya ingin memperkenalkan event-event yang paling umum dan paling
banyak digunakan untuk memicu efek animasi saja. Sedangkan untuk event-event
yang lainnya suatu saat akan Saya jelaskan secara terpisah apabila Saya telah
mendapatkan contoh penerapan yang tepat.
Syntax dalam JQuery ada berbagai macam dan dibuat untuk menyeleksi
elemen - elemen HTML dan menciptakan aksi / event pada satu atau beberapa
4
Penggunaan Events Pada JQuery IT 2A
halaman website agar membuat sebuah tampilan site menjadi interaktif dan
dinamis. disini kita akan mempelajari macam - macam dari syantax JQuery.
1. Penulisan Syntax
Syantax dasar : $(Selector).action()
Tanda dolar (" $ ") untuk merumuskan JQuery
Sebuah " ( ) " Selector untuk query atau menemukan / memilih elemen
- elemen HTML yang akan di beri JQuery
JQuery action() untuk di tamplikan di atas elmen – elemen
Contoh penggunaan :
$(this).hide() -> Untuk Menyembunyikan elemen
$("p").hide() -> Untuk Menyembunyikan paragraf
$(".test").hide() -> Untuk menyembunyikan semua elemen dengan class test
2. Event - Event Dasar yang sering digunakan pada JQuer
click()
Sebuah event atau animasi akan terjadi jika suatu objek yang di
pilih atau select di klik.
Penerapan event click()
5
Penggunaan Events Pada JQuery IT 2A
.dblclick()
Sebuah event atau animasi akan terjadi jika suatu objek yang di
pilih atau select di klik ganda / klik dua kali.
Penerapan event . dblclick()
.focus()
Untuk membuat suatu animasi atau peristiwa pada subjek/pemicu
(digunakan pada elemen-elemen seperti <input> .
Penerapan event . focus()
6
Penggunaan Events Pada JQuery IT 2A
.mouseover()
Menimbulkan kejadian atau peristiwa ketika pointer mouse berada
di atas suatu subjek yang dituju.
.mouseout()
Menimbulkan peristiwa jika pointer mouse meninggalkan sebuah
subjek yang di tuju.
Penerapan event .mouseover() dan .mouseout()
.mouseenter()
Sama dengan MouseOver(), menimbulkan peristiwa apabila
pointer mouse berada di atas subjek/pemicu. Namun saat pointer mouse
memasuki elemen induk (MouseOver()) dan pointer mendatangi anak-
anak elemen di dalamnya, itu tidak masuk hitungan Mouseenter().
7
Penggunaan Events Pada JQuery IT 2A
.mouseleave()
Sama seperti Mouseout(),menimbulkan peristiwa apabila pointer
mouse pergi dari subjek/pemicu. Namun saat pointer mouse meninggalkan
sebuah anak elemen (dan masih dalam elemen induk), itu tidak sudah tidak
bisa dei sebut Mouseleaf(), hingga ketika pointer benar-benar telah keluar dari
elemen induk baru bisa disebut mouseleve().
Penerapan event .mouseenter() dan .mouseleave()
8
Penggunaan Events Pada JQuery IT 2A
.hover()
Adalah gabungan antara Mouseenter dan Mouseleave.Susunannya juga
merupakan gabungan dari keduanya.
.scroll()
Untuk menimbulkan suatu peristiwa ketika scroll di tarik(ini
berlaku untuk semua yang memiliki scroll).
Penerapan event .scroll()
9
Penggunaan Events Pada JQuery IT 2A
.select()
Untuk menimbulkan suatu peritiwa jika ada yang di select / blok
biasa di gunakan pada <input> dan <textarea>.
Penerapan event .select()
10
Penggunaan Events Pada JQuery IT 2A
BAB III
Penutup
3.1. KesimpulanEvent pada jQuery berfungsi untuk memperindah halaman web pada
event-event tertentu dan melakukan interaksi antara user dengan halaman web.
Dalam makalah ini, event yang kami bahas yaitu tentang pointer yang berfungsi
apabila object tersebut mendapat event tertentu, semisal click(), hover(), dan lain-
lainnya
11
Penggunaan Events Pada JQuery IT 2A
DAFTAR PUSTAKA
http://www.w3schools.com/jquery/event_click.asp
http://www.w3schools.com/jquery/event_dblclick.asp
http://www.w3schools.com/jquery/event_focus.asp
http://www.w3schools.com/jquery/event_hover.asp
http://www.w3schools.com/jquery/event_mouseleave.asp
http://www.w3schools.com/jquery/event_mousemove.asp
http://www.w3schools.com/jquery/event_mouseout.asp
http://www.w3schools.com/jquery/event_mouseover.asp
http://www.w3schools.com/jquery/event_scroll.asp
http://www.w3schools.com/jquery/event_select.asp
http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
http://www.w3schools.com/jquery/jquery_ref_events.asp
http://jintoples.blogspot.com/2012/12/event-event-dasar-pada-
jquery.html#axzz2TyuF5mw3
12