Penggunaan Events Pada JQuery

IT 2A

Penggunaan Events pada JQUERY

Nama Kelompok : Heksa Tri Juliantara Hidayati Nuzula Juliany Hasanah Mega Puspita Sari Muhamad Armansyah (4312010012) (4312010028) (4312010031) (4312010033) (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 kekurangankekurangan, 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

Daftar Isi

KATA PENGANTAR ......................................................................................................i Daftar Isi .................................................................................................................... ii BAB I PENDAHULUAN .................................................................................................1 1.1. 1.2. Latar Belakang .................................................................................................. 1 Pembatasan Masalah ........................................................................................ 1

BAB II ISI ....................................................................................................................2 2. 1 2. 2 1. 2. Event Method pada JQuery ............................................................................. 2 Penjelasan Event Dasar pada JQuery ............................................................. 4 Penulisan Syntax ............................................................................................... 5 Event - Event Dasar yang sering digunakan pada JQuer ............................. 5

BAB III PENUTUP ..................................................................................................... 11 3.1. Kesimpulan ............................................................................................................ 11 DAFTAR PUSTAKA .............................................................................................. 12

ii

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()

Penggunaan Events Pada JQuery

IT 2A

BAB II Isi

2. 1 Event Method pada JQuery

Method bind() blur() change() click() dblclick() delegate()

Description Attaches event handlers to elements Attaches/Triggers the blur event Attaches/Triggers the change event Attaches/Triggers the click event Attaches/Triggers the double click event Attaches a handler to current, or future, specified child elements of the matching elements Removes all event handlers added with the live() method Attaches/Triggers the error event The current DOM element within the event bubbling phase

die() error() event.currentTa rget event.data

Contains the optional data passed to an event method when the current executing handler is bound Returns the element where the currently-called jQuery event handler was attached Returns whether event.preventDefault() was called for the event object

event.delegateT arget event.isDefaultP revented()

event.isImmedia Returns whether event.stopImmediatePropagation() was called for the event tePropagationSt object opped() event.isPropaga tionStopped() event.namespac e Returns whether event.stopPropagation() was called for the event object

Returns the namespace specified when the event was triggered

Penggunaan Events Pada JQuery

IT 2A

event.pageX event.pageY

Returns the mouse position relative to the left edge of the document Returns the mouse position relative to the top edge of the document

event.preventDe Prevents the default action of the event fault() event.relatedTar Returns which element being entered or exited on mouse movement. get event.result Contains the last/previous value returned by an event handler triggered by the specified event

event.stopImme Prevents other event handlers from being called diatePropagatio n() event.stopPropa gation() event.target event.timeStam p event.type event.which focus() focusin() focusout() hover() keydown() keypress() keyup() live() load() mousedown() mouseenter() mouseleave() mousemove() Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event Returns which DOM element triggered the event Returns the number of milliseconds since January 1, 1970, when the event is triggered Returns which event type was triggered Returns which keyboard key or mouse button was pressed for the event Attaches/Triggers the focus event Attaches an event handler to the focusin event Attaches an event handler to the focusout event Attaches two event handlers to the hover event Attaches/Triggers the keydown event Attaches/Triggers the keypress event Attaches/Triggers the keyup event Adds one or more event handlers to current, or future, selected elements Attaches an event handler to the load event Attaches/Triggers the mousedown event Attaches/Triggers the mouseenter event Attaches/Triggers the mouseleave event Attaches/Triggers the mousemove event

Penggunaan Events Pada JQuery

IT 2A

mouseout() mouseover() mouseup() off() on() one()

Attaches/Triggers the mouseout event Attaches/Triggers the mouseover event Attaches/Triggers the mouseup event Removes event handlers attached with the on() method Attaches event handlers to elements Adds one or more event handlers to selected elements. This handler can only be triggered once per element Takes an existing function and returns a new one with a particular context Specifies a function to execute when the DOM is fully loaded Attaches/Triggers the resize event Attaches/Triggers the scroll event Attaches/Triggers the select event Attaches/Triggers the submit event Attaches two or more functions to toggle between for the click event Triggers all events bound to the selected elements Triggers all functions bound to a specified event for the selected elements Removes an added event handler from selected elements Removes an event handler to selected elements, now or in the future Attaches an event handler to the unload event

$.proxy() ready() resize() scroll() select() submit() toggle() trigger() triggerHandler() unbind() undelegate() unload()

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()

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()

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 anakanak elemen di dalamnya, itu tidak masuk hitungan Mouseenter().

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()

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()

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. Kesimpulan Event 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 lainlainnya

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-padajquery.html#axzz2TyuF5mw3

12