JQUERY

Pengenalan dan Implementasi JQuery

Untuk Memenuhi Tugas Mata Kuliah Teknologi Informasi Dan Komunikasi Dosen Pengampu : Septia Luthfi, S.Kom, M.Kom Disusun Oleh : Kartin Yuliyanti 1102412091 Rombel : 01

JURUSAN KURIKULUM DAN TEKNOLOGI PENDIDIKAN FAKULTAS ILMU PENDIDIKAN UNIVERSITAS NEGERI SEMARANG 2013

Kata Pengantar Puji syukur kami panjatkan ke hadirat Allah SWT, berkat rahmat dan karunianya kami dapat menyelesaikan makalah mata kuliah Teknologi Informasi dan Komunikasi yang berjudul pemrograman Web 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.

Semarang, November 2013

Penulis

DAFTAR ISI KATA PENGANTAR ..... 1 DAFTAR ISI .... 2 BAB I PENDAHULUAN ... 3 1.1 LATAR BELAKANG ... 3 1.2 RUMUSAN MASALAH .... 3 1.3 TUJUAN .... 4 1.4 MANFAAT .. .. 4 BAB 11 PEMBAHASAN ... 5 2.1 Sejarah Perkembangan jQuery ... 5 2.2 Pengenalan jQuery ... 5 2.3 Kelebihan jQuery . 7 2.4 Kekurangan jQuery .. 7 2.5 Sintaks jQuery .. 8 2.6 JQuery Selector 9 2.7 JQuery Atribut Selector .. 10 2.8 Efek-Efek JQuery ... 10 2.9 Implementasi jQuery .. 14 2.9.1 Event Method pada jQuery . 17 2.9.2 Event-Event Dasar yang sering digunakan pada jQuery . 21 2.10 Cara Menggunakan JQuery .. 26 BAB III PENUTUP .... 30 3.1 KESIMPULAN .. 30 DAFTAR PUSTAKA 31

BAB I PENDAHULUAN 1.1 LATAR BELAKANG JQuery adalah sebuah javascript library, jQuery mempunyai semboyan write less, do more. jQuery dirancang untuk memperingkas kode-kode javascript. JQuery adalah javascript library yang cepat dan ringan untuk menangani dokumen HTML, menangani event, membuat animasi dan interakasi ajax. jQuery dirancang untuk mengubah cara anda menulis javascript. Sebelum anda memulai mempelajari jQuery, anda harus mempunyai pengetahuan dasar mengenai HTML, CSS dan Javascript. 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 RUMUSAN MASALAH a. Bagaimana sejarah dan perkembangan jQuery? b. Apa saja sntaks dalam Jquery? c. Apa kelebihan yang dimiliki jQuery? d. Apa kekurangan yang dimiliki jQuery? e. Bagaimana penggunaan jQuery? f. Bagaimana implementasi Jquery? g. Bagaimana cara menggunakan jquery? 3

1.3 TUJUAN a. Mengetahui sejarah dan perkembangan jQuery b. Mengetahui sintaks yag dimiliki Jquery c. Mengetahui kelebihan pada jQuery d. Mengetahui kekurangan yang dimiliki jQuery e. Mengetahui cara penggunaan jQuery f. Mengetahui implementasi dari Jquery g. Cara menggunakan jquery

1.4 MANFAAT Penyusunan makalah ini diharapkan dapat bermanfaat bagi siapa saja yang membacanya. Sebagai pengetahuan tentang penggunaan jQuery, dari pengertian, sejarah dan perkembangan, kelebihan, kekurangan dan implementasinya.

BAB II PEMBAHASAN

2.1 Sejarah Perkembangan jQuery Pengertian JQuery adalah sebuah framework berbasiskan Javascript. JQuery sama dengan Javascript Library yaitu kumpulan kode atau fungsi Javascript siap pakai, sehingga mempermudah dan mempercepat kita dalam membuat kode Javascript. Hal yang menarik dari JQuery adalah penekanan interaksi antara Javascript dan HTML. JQuery pertama kali dirilis pada tahun 2006 oleh John Resig. JQuery memiliki slogan Write less, do more yang artinya kesederhanaan dalam penulisan code, tapi dengan hasil yang lebih banyak. JQuery sendiri berlisensikan GNU General Public License dan MIT License. John Resig merupakan otak dibalik jQuery, karyanya ini pertama kali diumumkan di NYC BarCamp pada awal tahun 2006. Di situs webnya dia mencatat, ia menciptakan jQuery karena ia tidak puas dengan library yang saat itu tersedia dan merasa bahwa seharusnya framework-framework tersebut bisa jauh lebih baik dengan mengurangi syntactic fluff dan menambahkan control khusus untuk tindakan-tindakan yang bersifat umum. Kemudian para pengembang datang untuk membantu menyempurnakan librari ini, dan akhirnya menghasilkan rilis stabil pertama dari jQuery versi 1.0 pada tanggal 2006. Sejak itu, jQuery telah berkembang ke versi 1.7.1 dan telah mempunyai plugin yang banyak. Sebuah plug-in adalah ekstensi dari jQuery yang bukan bagian dari library inti. 2.2 Pengenalan jQuery JQuery merupakan suatu framework (library) Javascript yang menekankan bagaimana interaksi antara Javascript dan HTML. JQuery pertama kali dirilis pada tahun 2006 oleh John Resig. Pada perkembangannya JQuery tidak sekedar sebagai framework Javascript, namun memiliki kehandalan dan kelebihan yang cukup banyak. Hal tersebut menyebabkan banyak developer web menggunakannya.

JQuery memiliki slogan Write less, do more yang kurang lebih maksudnya adalah kesederhanaan dalam penulisan code, tapi dengan hasil yang lebih banyak. jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript. JQuery merupakan library open source dengan lisensi GNU (General Public License) dan MIT License. Dari sisi ukurannya, framework JQuery sungguh ramping, hanya sekitar 20 KB dan hanya terdiri dari satu file. Namun demikian, bagi yang menginginkan fungsi lebih, JQuery memungkinkan penambahan fungsionalitas dalam bentuk plugin. Saat ini tersedia ribuan plugin yang dapat diperoleh secara gratis di internet. Dengan JQuery, suatu halaman web yang menjadi aplikasi web, jika dilihat sourcenya, akan terlihat seperti dokumen HTML biasa; tidak ada kode JavaScript yang terlihat langsung. Teknik pemrograman web seperti ini disebut sebagai unobstrusive JavaScript programming. JQuery merupakan salah satu librari yang membuat program web di sisi klien, tidak terlihat sebagai program JavaScript biasa, yang harus secara eksplisit disisipkan pada dokumen web. Pada teknik pemrograman sisi klien dengan menggunakan JavaScript biasa, setiap elemen yang akan memiliki event, akan secara eksplisit terlihat ada event yang dilekatkan pada elemen tersebut. JQuery dikembangkan pertama kali oleh John Resig, yang dibuat lebih ramping dari librari Prototype yang menjadi inspirasi dari libarari JQuery ini. Secara pemrograman, JQuery memiliki kemiripan seperti Prototype. JQuery, merupakan librari yang sangat ramping, core dari librari ini dalam keadaan terkompres hanya berukuran sekitar 19KB. Beberapa kemampuan yang dimiliki oleh JQuery sebagai berikut: 1. Kemudahan mengakses elemen-elemen HTML 2. Memanipulasi elemen HTML 6

3. Memanipulasi CSS 4. Penanganan event HTML 5. Efek-efek javascript dan animasi 6. Modifikasi HTML DOM 7. AJAX 8. Menyederhanakan kode javascript lainnya 2.3 Kelebihan jQuery Library jQuery mempunyai kemampuan : 1. Kemudahan mengakses elemen-elemen HTML 2. Memanipulasi elemen HTML 3. Memanipulasi CSS 4. Penanganan event HTML 5. Efek-efek javascript dan animasi 6. Menyederhanakan penggunaan javascript, karena kita cukup menggunakan fungsi dari library javascript yang telah ada. Termasuk mempercepat coding javascript dalam sebuah website. Dibandingkan kita harus mulai sebuah script javascript dari nol. 7. Fungsi-fungsi yang disediakan didokumentasikan dengan baik beserta contoh penggunaannya, baca di situs http://jquery.com hal ini mempermudah dalam pembelajaran jquery. 8. Support terhadap CSS1-3 selector, untuk fleksibilitas desain antar muka halaman website dan interaksinya. 9. Website yang dibangun dengan jquery akan lebih interaktif dan menarik. 2.4 Kekurangan jQuery 1. Meskipun diklaim jquery memiliki beban kerja yang ringan (load CPU dan RAM) untuk browser, tetap saja lebih ringan (cepat di-load) website yang tidak menggunakan jquery, alias HTML murni. 2. Dari sisi server hosting pun, CPU dan RAM harus mengalokasikan resource yang mereka miliki untuk menangani request terhadap jquery. Pada level

tertentu request yang sangat banyak (sangat-sangat banyak) akan membebani server. Solusi: host jquery pada situs lain, seperti Google yang menyediakan request jquery dari servernya.

2.5 Sintaks jQuery Sintaks jquery biasanya dibuat untuk memilih elemen-elemen HTML dan melakukan aksi terhadap elemen yang dipilih. Berikut adalah sintaks jQuery: $(selector).action() Tanda dollar, untuk mendefinisikan jQuery (selector), untuk menunjukkan elemen yang dipilih atau dituju action(), adalah jQuery action yang akan dilakukan terhadap elemen yang dipilih. Contoh : $(this).hide() menyembunyikan elemen saat ini $("p").hide() menyembunyikan semua paragraf atau konten dari tag <p> $(".test").hide() menyembunyikan elemen yang mempunya class=test $("#test").show() menampilkan elemen yang mempunyai id=test

Karena hampir segala sesuatu yang kita lakukan bila menggunakan jQuery membaca ataumemanipulasi document object model (DOM), kita perlu memastikan bahwa kita mulai menambahkan event segera setelah DOM siap. Untuk melakukan hal ini, kita menambahkan kode ready event untuk dokumen. $(document).ready(function(){ //kode anda di sini }); Kode di atas berarti kita ingin kode dijalankan apabila halaman HTML telah diload semuanya. Atau dengan kode javascript biasanya seperti ini : window.onload = function(){ //kode anda di sini } Sekarang mari kita lihat pada contoh $(".tombol1").click(function(){ $("p").hide(1000);}); Kode $(.tombol1) adalah jQuery selektor. Di mana kita memilih elemen yang mempunyai class=tombol1 untuk kita lakukan sesuatu. $ sendiri adalah alias untuk jQuery class. Oleh karena $() untuk membuat objek jQuery. Kemudian kita tambahkan fungsi click(). Ini berguna untuk memberikan event onclick untuk elemen yang kita pilih tadi (dalam hal ini adalah elemen yang mempunya class=tombol1). Dan kemudian melaksanakan fungsi yang diberikan apabila event onclick terjadi. Jadi artinya apabila elemen dengan class=tombol1 diklik maka lakukan fungsi $(p).hide(1000); Fungsi hide() dan show() adalah fungsi built in dari jQuery. 2.6 JQuery Selector Selector memungkinkan anda untuk memanipulasi elemen HTML sebagai kelompok atau sebagai elemen tunggal. jquery elemen selectors dan attribute

selectors memungkinkan anda untuk memilih elemen HTML dengan nama tag, nama atribut, atau konten. contoh : $("p") memilih semua elemen <p>. $("p.intro") memilih semua elemen <p> yang mempunyai class = "intro". $("p#demo") memilih semua elemen <p> yang mempunyai id="demo".

2.7 JQuery Attribute Selectors JQuery mirip XPath dalam hal memilih elemen berdasarkan atribut yang ada: 1. $("[href]") memilih semua elemen dengan atribut href. 2. $("[href='#']") memilih semua elemen dengan atribut href bernilai = "#". 3. $("[href!='#']") memilih semua elemen dengan atribut href dengan nilai bukan sama dengan "#". 4. $("[href$='.jpg']") memilih semua elemen dengan atribut href yang mengandung ".jpg". 2.8 Efek-Efek dengan jQuery Salah satu kemampuan jQuery adalah adanya fungsi-fungsi efek yang siap pakai. biasanya untuk membuat efek memudar di javascript. Dengan menggunakan jQuery kita cukup menggunakan fungsi $(selector).fadeIn(). berikut adalah efekefek siap pakai yang disediakan jQuery : 1. jQuery show() : berguna untuk menampilkan elemen yang tersembunyi. 2. jQuery hide() : berguna untuk menyembunyikan elemen yang dipilih. 3. jQuery toggle() : gabungan fungsi hide dan show. 4. jQuery slideDown() : menampilkan elemen yang tersembunyi , secara efek sliding. 5. jQuery slideUp() : menyembunyikan elemen secara efek sliding. 6. jQuery slideToggle() : gabungan antara slideDown() dan slideUp(). 7. jQuery fadeIn() : menampilkan elemen yang dipilih jika tersembunyi.

10

8. jQuery fadeOut() : menyembunyikan elemen yang dipilih secara efek memudar. 9. jQuery fadeTo() : mengatur tingkat kepudaran elemen terpilih menuju tingkat opacity yang ditentukan. 10. jQuery animate() : mengubah suatu elemen dari satu keadaan ke keadaan lainnya. Hal-hal yang bisa dilakukan dengan Jquery diantaranya : 1. Mengakses bagian halaman tertentu dengan mudah. Tanpa adanya library Javascript khusus, untuk mengakses suatu bagian tertentu dari halaman, harus mengikuti aturan Document Object Model (DOM) dan pengaksesan harus secara spesifik menyesuaikan dengan struktur HTML. Dengan kata lain, pengaksesan bagian tertentu dari halaman sangat tergantung pada struktur dari HTML. JQuery menawarkan cara yang mudah (bahkan sangat mudah) dalam mengakses bagian tertentu dari halaman. Pengaksesan juga tidak terlalu bergantung pada struktur HTML. 2. Mengubah tampilan bagian halaman tertentu CSS (Cascading Style Sheet) menawarkan metode yang cukup handal dalam mengatur dan mempercantik halaman web. Namun terkadang CSS punya kelemahan yang cukup mengganggu, yaitu beberapa perintah CSS tidak didukung oleh semua browser. Cukup merepotkan jika kita harus mendesign halaman web dengan beberapa CSS sekaligus. Sekali lagi JQuery menawarkan solusi untuk mengatasi hal tersebut. Dengan JQuery, kesenjangan yang terjadi antara browser dalam urusan CSS akan tertutup dengan baik. 3. Mengubah isi dari halaman. Jaman dulu (baca:sebelum JQuery lahir) cukup sulit jika kita akan mengubah sebagian isi dari halaman. Mengubah disini dapat berarti mengganti teks,

11

menambahkan teks atau gambar, mengurutkan suatu daftar (list), menghapus baris tabel dan sebagainya. Dengan JQuery, hal tersebut dapat dilakukan dengan hanya beberapa baris perintah. 4. Merespond interaksi user dalam halaman. Website yang baik tidak cukup digambarkan dengan user-interface dan tampilan yang memukau. Namun lebih dari itu, bagaimana pengunjung dapat berinteraksi dengan website dan dapat mengatur tampilannya sendiri. Interaktivitas sangat bergantung bagaimana pemrograman yang dipakai dalam menangani eventhandling. Javascript sendiri memiliki beberapa event-handling seperti onclick untuk menangani event saat terjadi click. Namun demikian, event handling pada Javascript terbatas pada object-object tertentu, dan jenisnya pun terbatas. JQuery melengkapi semuanya dengan tambahan penanganan event-handling yang semakin mudah. 5. Menambahkan animasi ke halaman. Animasi seringkali disertakan dalam suatu halaman web untuk menambah kecantikannya. Saat ini animasi masih cukup digemari oleh para peselancar situs. Animasi dapat dibuat dalam berbagai gaya, ada yang menggunakan Flash, gambar bergerak (GIF), video, dan sebagainya. Masing-masing tentu memiliki kelebihan dan kekurangan masing-masing. JQuery sendiri menawarkan konsep animasi (walaupun masih sederhana) yang cukup apik namun ramah bandwidth alias ringan. Salah satu animasi yang bisa dibuat dengan JQuery adalah fading jika terdapat suatu bagian dari halaman ditambahkan atau dihilangkan. 6. Mengambil informasi dari server tanpa me-refresh seluruh halaman. Mengambil informasi dari server tanpa refresh halaman merupakan salah satu konsep dasar dari yang namanya AJAX (Asynchronous Javascript and XML). Pada penerapannya, cukup ribet jika harus membangun website dengan konsep AJAX,

12

saat ini banyak library khusus yang berusaha mempermudahnya. JQuery merupakan salah satunya. 7. Menyederhanakan penulisan Javascript biasa. Semboyan JQuery adalah Write less, do more atau dengan kata lain kesederhanaan dalam penulisan code, tetapi menghasilnya tampilan yang lebih. Sebenarnya inilah yang menjadi daya tarik tersendiri buat para pengembang web untuk menggunakan JQuery. Untuk memudahkan dalam memahami JQuery, sangat dianjurkan terlebih dahulu paham dan menguasai pengkodean HTML, CSS dan Javascript. Secara standar, apabila kita membuat kode javascript, maka diperlukan kode yang sangat panjang. Bahkan terkadang sangat sulit untuk di pahami. Misalnya, fungsi javascript untuk membuat stripe (warna selang-seling) pada baris suatu tabel adalah sebagai berikut : function stripe (id) { var even = false; var evenColor = arguments [1] ? arguments [1] : "#fff"; var oddColor = arguments [2] ? arguments [2] : "#eee"; var table = document.getElementById (id); if ( ! table) {return;} var tbodies = table.getElementsByTagName ("tbody"); for (var h = 0; h < tbodies.lenght; h++) { var trs = tbodies[h].getElementsByTagName("tr"); for (var i = 0; i < trs.lenght; i++) { if ( ! hasClass(trs[i])) && ! trs[i] . style.backgroundColor) {

13

var tds = trs[i].getElementsByTagName("td"); for (var j = 0; j < tds.lenght; j++) { var mytd = tds[j]; if ( ! hasClass(mytd) && ! mytd.style.backgroundColor) { mytd.style.backgroundColor = even ? evenColor : oddColor;

} } } } } } Nah, disinilah peran JQuery sebagai Javascript Library, dimana kita bisa langsung memanggil fungsi yang terdapat di dalam library tersebut, dan hal yang menarik disini adalah kita hanya membutuhkan satu baris untuk membuat warna selang-seling pada suatu tabel. JQuery ( ' table tr:nth-child(odd) ' ) .addClass ( ' odd' );

2.9 Implementasi jQuery Kemudahan atau kenapa orang banyak menggunakan framework javascript ini adalah karena banyaknya plugin aplikasi yang siap jadi atau siap digunakan. Plugin adalah semacam fungsi atau fitur tambahan yang digabungkan ke dalam sebuah JQuery mempercepat atau memudahkan dalam pembangunan sebuah website.

14

Dibawah ini adalah beberapa plugin jquery yang sering digunakan oleh beberapa web developer dalam membuat atau membangun sebuah website, diantaranya: a. Drop-Down-Menu Jika dalam sebuah website terdiri dari beberapa menu, dan dari menu tersebut ada sub menu lagi, maka cocok menggunakan drop down menu. Drop down menu ini juga mendukung multi level menu (menjadi sub-sub menu yang lebih banyak), selain itu menu dropdown ini juga dilengkapi dengan fasilitas timeout effect. Timeout effect ini digunakan ketika lama waktu mouse over atau mouse out. Screenshot dapat dilihat di Web Site : http://javascript-array.com b. Tool-Tips Tool tips adalah bubble/gelembung atau semacam kotak informasi digunakan untuk menginformasikan sesuatu ketika mouse didekatkan pada sebuah teks, gambar, tombol atau elemen lain dalam sebuah web yang muncul diatas elemen tersebut. Biasanya informasi yang disuguhkan adalah informasi yang pendek. Cara kerjanya adalah ketika mouse didekatkan, maka akan muncul bubble. Fasilitas lebih dari bubble ini adalah desainnya yang cantik, seperti fasilitas tombol close, background shadow, dll. Screenshot dapat dilihat di Web Site : http://www.mopstudio.jp c. Autocomplete-Search Plugin ini digunakan untuk melakukan pencarian secara real time, dimana ketika kita memasukan kata atau huruf dalam sebuah teks input dalam sebuha web, secara otomatis hasil pencarian akan muncul seusai dengan yang kita masukan secara real time. Plugin ini mirip seperti pencarian pada website facebook, sehingga sangat menarik untuk dicoba. Screenshot dapat dilihat di Web Site : http://loopj.com d. Validasi-Form Plugin ini digunakan untuk melakukan validasi data dalams sebuah form, seperti pengecekan e-mail, pengecekan password, username dan input lainnya secara real time (tidak menekan tombol submit). Jadi ketika user memasukan teks atau huruf, maka plugin ini akan melakukan validasi terhadap inputan user. Screenshot dapat dilihat di Web Site : http://www.willjessup.com

15

e. JQuery-Cycle-Plugin Plugin ini digunakan untuk animasi image dalam sebuah website, plugin ini menggantikan fungsi flash sebagai animasi. Jadi dengan plugin ini, kita bisa menganimasikan image yang ada menjadi sebuah animasi seperti fade in, fade out, slide show, scroll dan banyak lagi efek yang lainnya. Screenshot dapat dilihat di Web Site : http://malsup.com f. Teks-Berjalan Plugin ini digunakan untuk memannipulasi teks, sehingga teks yang kita tampilkan kelihatan menarik, seperti berjalan dari kiri ke kanan atau sebaliknya atau dari atas ke bawah, mirip fungsi marquee dalam tag HTML, tetapi dengan plugin ini, teks berjalan lebih lembut dan lebih banyak variasi. Screenshot dapat dilihat di Web Site : http://remysharp.com Contoh Sederhana jQuery Hello word jQuery: <html> <head> <script src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".tombol1").click(function(){ $("p").hide(1000); }); $(".tombol2").click(function(){ $("p").show(1000); }); }); </script> </head> type="text/javascript"

16

<body> <p>Hello World!</p> <button class="tombol1">Sembunyikan</button> <button class="tombol2">Tampilkan</button> </body> </html>

2.9.1 Event Method pada JQuery Penggunaan event yang diimplementasikan yaitu pada saat pointer menuju kearah objek dan memanggil event yang telah diberikan didalam objek tersebut. Eventevent yang dibahas yaitu: 1. 2. 3. 4. 5. 6. 7. 8. 9. click() dbclick() focus() hover() mouseleave() mousemove() mouseout() mouseover() mouseenter()

10. scroll() 11. select()

17

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

die() error() event.currentTarget event.data

Removes all event handlers added with the live() method Attaches/Triggers the error event The current DOM element within the event bubbling phase 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.isDefaultPreven Returns whether event.preventDefault() was called for the event ted() event.isImmediatePro pagationStopped() event.isPropagationSt opped() object Returns whether event.stopImmediatePropagation() was called for the event object Returns whether event.stopPropagation() was called for the event object

18

event.namespace event.pageX event.pageY

Returns the namespace specified when the event was triggered 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.preventDefault() Prevents the default action of the event event.relatedTarget event.result Returns which element being entered or exited on mouse movement. Contains the last/previous value returned by an event handler triggered by the specified event event.stopImmediateP Prevents other event handlers from being called ropagation() event.stopPropagation Prevents the event from bubbling up the DOM tree, preventing any () event.target event.timeStamp 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 event.type event.which Returns which event type was triggered Returns which keyboard key or mouse button was pressed for the event focus() focusin() focusout() hover() keydown() 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 19

keypress() keyup() live()

Attaches/Triggers the keypress event Attaches/Triggers the keyup event Adds one or more event handlers to current, or future, selected elements

load() mousedown() mouseenter() mouseleave() mousemove() mouseout() mouseover() mouseup() off() on() one()

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

$.proxy()

Takes an existing function and returns a new one with a particular context

ready() resize() scroll()

Specifies a function to execute when the DOM is fully loaded Attaches/Triggers the resize event Attaches/Triggers the scroll event

20

select() submit() toggle() trigger() triggerHandler()

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

unbind() undelegate() unload()

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

Sebenarnya ada begitu banyak jenis event dalam JQuery, namun di sini hanya ingin memperkenalkan event-event yang paling umum dan paling banyak digunakan untuk memicu efek animasi saja. 2.9.2 Event - Event Dasar yang sering digunakan pada Jquer

a. click() Sebuah event atau animasi akan terjadi jika suatu objek yang di pilih atau select di klik. Penerapan event click()

21

b. dblclick() Sebuah event atau animasi akan terjadi jika suatu objek yang di pilih atau select di klik ganda / klik dua kali. Penerapan event . dblclick()

c. focus() Untuk membuat suatu animasi atau peristiwa pada subjek/pemicu (digunakan pada elemen-elemen seperti <input> . Penerapan event . focus() 22

d.

mouseover()

Menimbulkan kejadian atau peristiwa ketika pointer mouse berada di atas suatu subjek yang dituju. e. mouseout()

Menimbulkan peristiwa jika pointer mouse meninggalkan sebuah subjek yang di tuju. Penerapan event .mouseover() dan .mouseout()

23

f.

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

h.

hover()

Adalah gabungan antara Mouseenter dan Mouseleave.Susunannya juga merupakan gabungan dari keduanya.

24

i. scroll() Untuk menimbulkan suatu peristiwa ketika scroll di tarik(ini berlaku untuk semua yang memiliki scroll). Penerapan event .scroll()

25

j. select() Untuk menimbulkan suatu peritiwa jika ada yang di select / blok biasa di gunakan pada <input> dan <textarea>. Penerapan event .select()

2.10 Cara Menggunakan JQuery Untuk dapat menggunakan JQuery tentunya yang pertama adalah kita harus mendownload terlebih dahulu jQuery Library (inti dari jQuery). Download jQuery Library di www.jquery.com , silahkan klik Download jQuery. Missal jQuery versi 1.9.1

gambar : screenshot website jquery.com

26

Pada halaman selanjutnya pilih versi jquery, ada versi Production dan versi Developer. Untuk saat ini pilih versi Production jQuery karena versi Developer ditujukan kepada para master pemrograman dan pengembang jquery.

jQuery selalu merilis dua versi Library yaitu versi Production dan Development. Perbedaannya adalah versi Production ukuran filenya lebih kecil karena telah 'dimampatkan' atau istilahnya di Compress. Diperuntukkan bagi pengguna awam yang ingin langsung menggunakan jQuery. Sedangkan versi Development isi filenya mudah dibaca karena belum di Compress dan ditujukan unruk para Developer yang tertarik mempelajari - memanipulasi - bahkan mengembangkan fungsi - fungsi yang dimiliki oleh jQuery. Kemudian akan muncul code dari library JQuery

gambar : jquery code library

27

Klik CTRL + S di keyboard untuk menyimpan kode tersebut ke direktori website anda

gambar : save jquery lib pada direktori website Selanjutnya adalah kode untuk memanggil jQuery library supaya dapat terLOAD di website yang anda buat. Buka Dreamwaver dan masukkan kodenya. Scriptnya yang saya cetak tebal merah :

gambar : script pemanggil jQuery

28

Kemudian untuk cara Penggunaannya, inti dari jQuery adalah : 1. Panggil / Load library jQuery (merah) 2. buat script jquery di bagian head untuk mengontrol object berdasarkan elementnya (biru) 3. Buat Object beserta elemennya berupa id dan class di bagian body (abu-abu) Sebagai contoh saya akan membuat control sembunyikan dan tampilkan gambar :

gambar : inti dari jQuery

29

BAB III PENUTUP 3.1 KESIMPULAN 1. JQuery merupakan suatu framework (library) Javascript yang menekankan bagaimana interaksi antara Javascript dan HTML. 2. 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 3. Beberapa kemampuan yang dimiliki oleh JQuery sebagai berikut: Kemudahan mengakses elemen-elemen HTML, Memanipulasi elemen HTML,

Memanipulasi CSS, Penanganan event HTML, Efek-efek javascript dan animasi, Modifikasi HTML DOM, AJAX, Menyederhanakan kode javascript lainnya 4. John Resig merupakan otak dibalik jQuery, karyanya ini pertama kali diumumkan di NYC BarCamp pada awal tahun 2006. Di situs webnya dia mencatat, ia menciptakan jQuery karena ia tidak puas dengan library yang saat itu tersedia dan merasa bahwa seharusnya framework-framework tersebut bisa jauh lebih baik dengan mengurangi syntactic fluff dan menambahkan control khusus untuk tindakan-tindakan yang bersifat umum. 5. Library jQuery mempunyai kelebihan :Kemudahan mengakses elemen-elemen HTML, Memanipulasi elemen HTML, Memanipulasi CSS, Penanganan event HTML, Efek-efek javascript dan animasi 3 jQuery juga memiliki kekurangan yaitu pertama, meskipun diklaim jquery memiliki beban kerja yang ringan (load CPU dan RAM) untuk browser, tetap saja lebih ringan (cepat di-load) website yang tidak menggunakan jquery, alias HTML murni. Kedua, Dari sisi server hosting pun, CPU dan RAM harus mengalokasikan resource yang mereka miliki untuk menangani request terhadap jquery. Pada level tertentu request yang sangat banyak (sangat-sangat banyak) 30

akan membebani server. Solusi: host jquery pada situs lain, seperti Google yang menyediakan request jquery dari servernya.

DAFTAR PUSTAKA Desrizal, 2010, Panduan Lengkap PHP AJAX & JQuery, www.blog.codingwear.com Desrizal, Pengenalan jQuery, http://www.desrizal.com www.scribd.com diakses 23 November 2013

31