JQUERY Makalah ini disusun untuk memenuhi tugas mata kuliah Teknologi Informasi dan Komunikasi

Oleh : Lola Muntri Oktafiyani NIM : 1102412082

URI ULUM !"N #E NOLO$I %EN!I!I "N &" UL#"' ILMU %EN!I!I "N UNI(ER'I#"' NE$ERI 'EM"R"N$ 201)
1

!"&#"R I'I

Halaman judul................................................................................................ Daftar isi ........................................................................................................ PE D!H"#"! ........................................................................................ !. #atar %elakang&&&&&&&&&&&&&&&&&&&&& '. (umusan masalah&&&&&&&&&&&&&&&&&&&... *. Tujuan +enulisan&&&&&&&&&&&&&&&&&&&& PEM'!H!,! ............................................................................................ !. ,ejarah dan +engenalan j.uer/&&&&&&&&&&&&&&. '. Kekurangan dan kele%ihan j.uer/&&&&&&&&&&&&& *. Manfaat dalam +erkem%angan a+likasi 1e%&&&&&&&&&. D. *ara menggunakan j.uer/&&&&&&&&&&&&&&&& E. Im+lementasi j.uer/&&&&&&&&&&&&&&&&&&. 3. 3itur4fitur j.uer/&&&&&&&&&&&&&&&&&&&.. 5. *ara mengginakan j.uer/ mo%ile&&&&&&&&&&&&&. PE "T"P...................................................................................................... ........................................................................................................................ Kesim+ulan.............................................................................................. D!3T!( P",T!K!....................................................................................

1 2 $ $ ) ) 0 2 12 10 21 $$ $) $) $-

*"* I %EN!"+ULU"N

", Latar *-lakan. "ntuk mengo+timalisasi dan men/ingkat +enulisan li%rar/ 6a7a,8ri+t9 j.uer/ meru+akan solusi /ang te+at dalam hal terse%ut. j.uer/ meru+akan se%uah frame1ork dan 8ara %aru dalam menuliskan kode 6a7a,8ri+t. Dengan menggunakan j.uer/9 kita da+at

mem+er8e+at +er+indahan dokumen HTM#9 +enanganan e7ent:e7ent4handling;9 dan +em%uatan animasi didalam 1e% untuk mem+erindah 1e%site /ang kita %uat. !gar +engguna:user; da+at %erinteraksi dengan 1e%site dan da+at mengatur tam+ilan +ada +enggunaan j.uer/9 di+erlukan se%uah +enanganan e7ent dengan menam%ahkan +erintah4+erintah se+erti 8li8k untuk menangani e7ent saat terjadi 8li8k9 fo8us9 ho7er9 mouseout9 mouselea7e9 dan lain4lainn/a. Perkem%angan dunia informasi dan teknologi sangat 8e+at +ada dasa1arsa terakhir sejak dimulain/a era millennium. Perkem%angan itu salah satun/a ditandai dengan ke%eradaan a+likasi ja7a /ang men/ediakan %er%agai la/anan. 'entuk la/anan /ang dihadirkan a+likasi ja7a sejatin/a sangat %erguna dan mem%antu %agi kehidu+an manusia. Mulai dari akses data9 informasi aktual9 iklan9 komunikasi9 game se%again/a. dan

,elain keuntungan terse%ut9 keistime1aan lain a+likasi ja7a adalah kemudahan akses atau +engo+erasiann/a /ang da+at dilakukan sia+a+un mulai dari anak4anak sam+ai orang de1asa. Maka tidak mengherankan jika a+likasi ja7a telah menjadi konsumsi +u%lik se%agaian %esar mas/arakat Indonesia. Ke%eradaan a+likasi ja7a telah menghadirkan nuansa tersendiri di tengah mas/arakat karena selalu mengikuti kemajuan teknologi. Peningkatan fasilitas demi menam%ah ke+uasan +elanggan menjadi sisi /ang +aling ditonjolkan. Hal ini tentu saja semakin memanta+kan +osisin/a se%agai %agian ke%utuhan mas/arakat. Ia telah menjadi %agian hidu+ mas/arakat masa kini. ,alah satu a+likasi /ang dita1arkan oleh ja7a /ang sekarang digemari adalah o+era mini9 5ame h+ dan a+likasi lainn/a /ang difungsikan se%agai media komunikasi dunia ma/a dan hi%uran. 6utaan +enggunan/a dari %er%agai +enjuru dunia. Hal ini menjadikan a+likasi ja7a se%agai alat komunikasi modern tan+a %atas karena menga%aikan jarak9 1aktu9 dan tem+at.,ehingga a+likasi ja7a sering di gunakan untuk kehidu+an sehari dan orang tergantung dengan adann/a a+likasi ja7a. !+likasi ja7a meru+akan a+likasi jaman modern /ang %an/ak orang mengenal dengan adan/a game dan a+likasi. Ta+i %an/ak orang /ang tidak mengenal ja7a sehingga %an/ak orang /ang mengalami kesulitan saat a+likasi terse%ut mengalami +ro%lem. Kendala /ang sering mun8ul ke+ada seseorang /ang tidak tau a+likasi ja7a adalah %ekerja komunikasi9hi%uran9informasi semakin lama di selesaikan dan terhalang dengan +eralatan /ang ada9+adahal era milenium ini suatu +ekerjaan di hara+akan %isa diselesaikan dengan 8e+at akurat9te+at serta mudah dalam +enggunaan/a.

Dari uraian latar %elakang /ang telah disam+ikan maka +enulis mem%eri sejumlah masalah +ada makalah se%agai %erikut : 1. 2. $. Pengenalan j.uer/ Manfaat menggunakan a+likasi j.uer/ Tidak mem%ahas +em%uatan a+likasi j.uer/

*, Ru/u0an Ma0ala1 Dengan masalah4masalah /ang disam+aikan maka da+at disim+ulkan: a. %. 8. d. e. 'agaimana orang mengenal j.uer/< !+a keuntungan mengenal j.uer/< Menga+a orang mengenal j.uer/< 'agaimana sejarah j.uer/< !+a saja karakteristik j.uer/<

2, #u3uan %-nuli0an !da+un tujuan dari +enulisan masalah ini9 antara lain : 1. 2. "ntuk memenuhi tugas mata kuliah Teknologi Informasi dan Komunikasi. "ntuk mengetahui sejarah +em%uatan j.uer/.
5

$. =. ).

"ntuk mengetahui kekurangan dan kele%ihan j.uer/. "ntuk mengetahui karakteristik j.uer/. "ntuk mengetahui kegunaan j.uer/

*"* II %EM*"+"'"N
", '-3ara1 4an %-n.-nalan 3Qu-ry ,ejak a1al rilis +ada tahun 2>>- oleh john (esig9 j.uer/ telah menda+at +erhatian +ara de7elo+er 1e%. Hal terse%ut ter%ukti +ada tahun4tahun %erikutn/a j.uer/ telah %an/ak digunakan oleh 1e%site 4 1e%site terkemuka di dunia se+erti 5oogle9 Mi8rosoft9 intel 9 okia9 Ora8le 9 I'M9 DE##9 ''*9 '*9 E,P 9 E!P 9 E! ,+ort9 etfliB 9

T1itter9 3a8e%ook9 !ma?on9 Te8horati9 @outo%e !++le9 Aord+ress9 Mo?ila9

Digg9 Time9 dan masih %an/ak lagi. 'ahkan 1e%site lokal+un tidak mau ketinggalan9 #ihat saja Detik9 ,tudio 21 :218ine+leB.8om;. Indosiar9 Ci7ane1s9 Kom+as9 termasuk Ilmu5rafis tentun/a dan lain4lain. amun9 j.uer/ se%enarn/a %ukanlah hal /ang %aru jika melihat DjeroanE4n/a9 karena %erisi fungsi4fungsi /ang ditulis dengan 6a7a,8ri+t9 dan 6a7a,8ri+t itu sendiri telah di+erkenalkan oleh ets8a+e sejak tahun 122).

Teta+i9 tentu j.uer/ mena1arkan %an/ak fitur modern /ang sudah sia+ digunakan9 1alau+un iden/a sederhana9 /aitu mem%uat se%uah li%rar/ 6a7a,8ri+t9 tern/ata j.uer/ mam+u mem+eroleh sim+ati +erusahaan4+erusahaan %esar /ang mem4 %undling j.uer/ kedalam +rodukn/a. okia akan mengintegrasikan j.uer/ kedalam

+latform 1e% (un4Time9 sedangkan Mi8rosoft mengado+si j.uer/ kedalam Cisual ,tudio. Menggunakan j.uer/ sangatlah mudah9 /ang anda +erlukan adalah men4 do1nload file j.uer/ +ada htt+:FFjGuer/.8om9 7ersi terakhir sam+ai saat ini adalah 7ersi 1.$.2 dengan nama file j.uer/41.$.2.min.js. "kurann/a juga 8uku+ ke8il untuk s%uah li%rar/ /ang +o1erfull9 han/a sekitar -> kilo%/te9 dan han/a inilah /ang di+erlukan. 3ile 6a7a,8ri+t ini memiliki fungsi4fungsi !jaB9 DOM :Do8ument O%je8t Model;9 E7ent9 serta %er%agai efek /ang sia+ di+ergunakan oleh 1e% de7elo+er. "ntuk memudahkan dalam +emakaian9 kita da+at mengu%ah file jGuer/4 1.$.2.min.js menjadi jGuer/.js saja9 dan men/isi+kann/a +ada kode +rogram :HTM#FPHPF!,P dan seterusn/a; se%agai %erikut : Path li%Fj.uer/.js menunjukkan lokasi file j.uer/.js. karena j.uer/ meru+akan li%rar/ 6a7a,8ri+t9 maka 1e% de7elo+er terutama han/a +erlu menam%ah +engetahuan 6a7a,8ri+tn/a9 %ahkan j.uer/ juga da+at dimanfaatkan oleh 1e% desainer /ang mendalami *,, :*as8ading ,t/le ,heets;9 tidak ada %ahasa +emrograman /ang %aru9 teta+i %an/ak hal %aru /ang da+at di8i+takan +ada 1e%site. 'agi 1e% de7elo+er /ang %aru akan menggunakan j.uer/9 akan le%ih mudah memahami +rinsi+ dasarn/a terle%ih dahulu dengan melihat 8ontoh kasus dengan
7

menggunakan HTM#F*,, /ang stati89 dengan demikian tidak +erlu di+usingkan dengan ser7er side s8ri+ting se+erti PHP dan seterusn/a9 juga tidak +erlu melakukan o+erasi data%ase. ,etelah memahami %agaimana j.uer/ %ekerja9 maka dengan mudah akan da+at mengim+lementasikann/a kedalam 1e%site /ang dinamis. *ek di ta% Menu "tama 1e%site ilmugrafis.8om se%elah atas9 disitu jika di klik %agian +anah ke8il maka akan ada dro+ do1n menu9 dan juga smooth H%a8k to to+H /ang ada di se%elah kanan %a1ah juga +akai j.uer/. tenang saja9 anti akan sa/a %agikan 8ara F trik +em%uatann/a di tutorial %erikutn/a. Dan sam+ai saat ini sudah ter8atat ada jutaan 1e%site /ang telah menggunakan j.uer/. "ntuk le%ih lengka+n/a9 silahkan lihat di

htt+:FFdo8s.jGuer/.8omF,itesI"singIj.uer/. 6adi jika kita /ang ngaku4ngaku se%agai seorang de7elo+er 1e% namun %elum mengenal j.uer/ maka kita termasuk orang /ang ketinggalan dan rugi9 mari kita jelajahi dunia j.uer/ /ang +enuh dengan keindahan. *, k-kuran.an 4an k-l-5i1an 3Qu-ry, a. kekurangan j.uer/ Aalau+un klaim %ah1a loading menjadi semakin ringan9 1e%F%log /ang tidak menggunakan j.uer/ alias HTM# murni teta+ le%ih ringan untuk diload terutama dimata *P" dan (!M. Dari sisi ser7er hosting +un9 *P" dan (!M harus mengalokasikan resour8e /ang mereka miliki untuk menangani reGuest terhada+ j.uer/. Pada le7el tertentu reGuest /ang sangat %an/ak mele%ihi standar akan mem%e%ani ser7er terse%ut.

,olusi: host jGuer/ +ada situs lain9 se+erti 5oogle /ang men/ediakan reGuest j.uer/ dari ser7ern/a :!PI;. Hal ini tidak akan terasa jika anda memiliki kom+uter /ang +o1erful dan koneksi /ang ken8ang9 namun %ila +engunjung situs anda tidak memiliki itu semua9 alias koneksi lelet dan kom+uter /ang lemot9 maka mereka le%ih memilih untuk tidak han/a menutu+ situs 1e% anda9 ta+i juga situs lainn/a /ang dirasa %erat ke8uali %eranda %ro1ser

5,

-l-5i1an : Arite #ess9 Do More. Dengan menggunakan j.uer/ tentu kita telah men/ederhanakan +enggunaan ja7as8ri+t9 karena kita 8uku+ menggunakan fungsi dari li5rary 3a6a07ri8t /ang ada. 6uga mem+er8e+at 8oding ja7as8ri+t dalam se%uah 1e%site. Di%andingkan %ila kita harus mulai se%uah s8ri+t ja7as8ri+t satu +er satu dari nol. Dengan menggunakan j.uer/ %erarti kita telah meringkasn/a dan mem%iarkan j.uer/ mengolahn/a. 3ungsi +emakaian %eserta 8ontohn/a %isa anda lihat di htt+:FFjGuer/.8om untuk mem+ermudah dalam +em%elajaran j.uer/. ,u++ort terhada+ *,,14$ sele8tor9 untuk fleksi%ilitas desain antar muka halaman 1e%site dan interaksin/a. Halaman 1e%siteF%log /ang di%angun dengan j.uer/ akan le%ih interaktif dan menarik9 mem%uat +ara +engunjung le%ih terkesan.
9

2, Manfaat 3Qu-ry !ala/ %-rk-/5an.an "8lika0i 9-50itj.uer/ %an/ak digunakan dalam +eran8angan a+likasi %er%asis 1e% terutama untuk mem+er8antik tam+ilan dan juga mem%uat 1e%site menjadi le%ih atraktif. 'erikut akan dijelaskan %e%era+a kegunaan dari j.uer/ :

1,

M-n.ak0-0 5a.ian 1ala/an :-50it- 4-n.an /u4a1 6a7as8ri+t mem%erikan 8ara +engaksesan %agian tertentu dari halaman 1e% dengan menggunakan aturan Do8ument O%jek8t Model :DOM; dan +engaksesan harus se8ara s+esifik men/esuaikan struktur aturan HTM#. Dengan adan/a frame1ork ini +engaksesan dokumen HTM# menjadi le%ih mudah dan tidak terlalu %ergantung +ada aturan struktur HTM#.

2,

M-r-08on int-rak0i u0-r 4ala/ 1ala/an Dengan adan/a j.uer/ tam+ilan 1e% tidak han/a menarik namun juga le%ih atraktif. Interaksi dengan user akan semakin meningkat. ,e%agai 8ontoh %ila di ja7a8ri+t sudah ada e7ent handling se+erti on*hange atau on*li8k untuk menangani e7ent saat terjadi +eru%ahan atau 8li8k +ada o%jek4o%jek /ang ter%atas. Maka di j.uer/ jenis e7ent handling /ang di%erikan le%ih %an/ak dari+ada /ang di%erikan oleh ja7as8ri+t dengan tam%ahan +enanganan e7ent handling menjadi semakin mudah.

10

),

M-na/5a1kan ani/a0i k- 1ala/an 'e%era+a 1e%site se%enarn/a juga sudah menggunakan animasi se%elum adan/a j.uer/9 /aitu dengan menggunakan flash9 gam%ar %ergerak :.gif; atau+un dengan 7ideo. amun di sini j.uer/ mena1arkan fitur4fitur /ang tidak kalah menarik dan

/ang menjadi kele%ihan adalah animasi ini akan mengurangi %and1idth atau %isa dikatakan animasi /ang di%erikan oleh j.uer/ ringan untuk diakses. *ontoh animasi /ang %isa di%uat dengan j.uer/ adalah fading jika terda+at suatu %agian dari halaman ditam%ahkan atau dihilangkan9 dan juga image slider untuk mem%uat efek foto /ang %ergerak.

4,

M-n.u5a1 i0i 4ari 1ala/an 6aman dulu :%a8a:se%elum 6.uer/ lahir; 8uku+ sulit jika kita akan mengu%ah se%agian isi dari halaman. Mengu%ah disini da+at %erarti mengganti teks9 menam%ahkan teks atau gam%ar9 mengurutkan suatu daftar :list;9 mengha+us %aris ta%el dan se%again/a. Dengan 6.uer/9 hal terse%ut da+at dilakukan dengan han/a %e%era+a %aris +erintah.

;,

M-n.a/5il infor/a0i 4i 0-r6-r tan8a 1aru0 /-r-fr-01 1ala/an :-5 Konse+ ini se%enarn/a sudah ada di teknologi 1e% %er%asis !6!J. amun

+engim+lementasian !6!J tern/ata sulit9 dan j.uer/ memiliki %an/ak li%rar/ khusus /ang mem+ermudahn/a sesuai dengan sem%o/ann/a /aitu D Write less, do moreE. *ontoh dari +enera+an +engam%ilan informasi tan+a merefresh seluruh

11

halaman adalah se+erti saat kita menuliskan 8omment di fa8e%ook9 atau saat kita u+date status di fa8e%ook.

<,

M-n.u5a1 5a.ian 1ala/an t-rt-ntu *,, :*as8ading ,t/le ,heet; mena1arkan metode /ang 8uku+ handal dalam mengatur dan mem+er8antik halaman 1e%. amun terkadang *,, +un/a

kelemahan /ang 8uku+ mengganggu9 /aitu %e%era+a +erintah *,, tidak didukung oleh semua %ro1ser. *uku+ mere+otkan jika kita harus mendesign halaman 1e% dengan %e%era+a *,, sekaligus. ,ekali lagi 6.uer/ mena1arkan solusi untuk mengatasi hal terse%ut. Dengan 6.uer/9 DkesenjanganE /ang terjadi antara %ro1ser dalam urusan *,, akan tertutu+ dengan %aik.

=,

M-ny-4-r1anakan 8-nuli0an Ja6a07ri8t 5ia0a Dengan menggunakna j.uer/ +enulisan 8ode 6a7as8ri+t /ang terlalu %an/ak da+at dihindari. Do1nload 6.uer/9 situs resmi 6.uer/ da+at diakses di htt+:FFjGuer/.8omF. Dan li%rar/ 6.uer/ da+at dido1nload di alamat

htt+:FFdo8s.jGuer/.8omFDo1nloadingIj.uer/. Tersedia li%rar/ j.uer/ dalam 2 :dua; jenis /aitu minified dan un8om+ressed. Minified jika kita ingin menggunakann/a saja dalam 1e%site kita :ukuran 10 K';9 sedangkan un8om+ressed jika kita %erkeinginan turut serta mengem%angkan 8ode j.uer/. !, 2ara M-n..unakan JQu-ry

12

,e+erti +ada tutorial se%elumn/a /aitu &un.0i 4ari 3Qu-ry maka +ada tutorial kali ini kita akan mem%ahas*a.ai/ana 7ara /-n..unakan 3Qu-ry> langkah K langkahn/a adalah :

1. Ok +ertama 4 tama adalah kita harus mendo1nload terle%ih dahulu j.uer/ #i%rar/ :inti dari j.uer/;. Dimana do1nload j.uer/ #i%rar/< mau tau aja atau mau tau %anget< hehehe... Do1nloadn/a di :::,3?u-ry,7o/ 9 silahkan klik Do1nload j.uer/. ,aat +enulisan tutorial ini li%rar/ j.uer/ telah sam+ai 7ersi 1.2.1

2. Pada halaman selanjutn/a +ilih 7ersi jGuer/9 ada 7ersi Produ8tion dan 7ersi De7elo+er. "ntuk saat ini +ilih 7ersi %ro4u7tion 3Qu-ry karena 7ersi De7elo+er ditujukan ke+ada +ara master +emrograman dan +engem%ang jGuer/.

13

2atatan : j.uer/ selalu merilis dua 7ersi #i%rar/ /aitu 7ersi Produ8tion dan De7elo+ment. Per%edaann/a adalah 7ersi Produ8tion ukuran filen/a le%ih ke8il karena telah Ldimam+atkanL atau istilahn/a di *om+ress. Di+eruntukkan %agi +engguna a1am /ang ingin langsung menggunakan j.uer/. ,edangkan 7ersi De7elo+ment isi filen/a mudah di%a8a karena %elum di *om+ress dan ditujukan unruk +ara De7elo+er /ang tertarik mem+elajari 4 memani+ulasi 4 %ahkan mengem%angkan fungsi 4 fungsi /ang dimiliki oleh j.uer/.

$. !kan mun8ul 8ode dari li%rar/ 6.uer/

14

gam%ar : jGuer/ 8ode li%rar/

Klik *T(# M , di ke/%oard untuk men/im+an kode terse%ut ke direktori 1e%site anda

15

gam%ar : sa7e jGuer/ li% +ada direktori 1e%site

=. Ok sekarang adalah kode untuk memanggil j.uer/ li%rar/ su+a/a da+at ter#O!D di 1e%site /ang anda %uat. 'uka 4r-a/:-a6-r dan masukkan koden/a.

,8ri+tn/a /ang sa/a 8etak te%al merah :

16

gam%ar : s8ri+t +emanggil j.uer/ ). Ok sekarang 8ara Penggunaann/a9 inti 4ari 3Qu-ry adalah : !; Panggil F #oad li%rar/ j.uer/ :sta%ilo merah; '; %uat s8ri+t jGuer/ di %agian head untuk mengontrol o%je8t %erdasarkan elementn/a :sta%ilo %iru; *; 'uat O%je8t %eserta elemenn/a %eru+a id dan 8lass di %agian %od/ :sta%ilo a%u 4 a%u;

17

se%agai 8ontoh sa/a akan mem%uat 8ontrol sem%un/ikan dan tam+ilkan gam%ar :

gam%ar : inti dari j.uer/

-. ok sekarang kita lihat hasiln/a

LI

!I'INI

18

gam%ar : s8reenshot hasil. E, I/8l-/-nta0i 3Qu-ry Kemudahan atau kena+a orang %an/ak menggunakan frame1ork ja7as8ri+t ini adalah karena %an/akn/a +lugin a+likasi /ang sia+ jadi atau sia+ digunakan. Plugin

19

adalah sema8am fungsi atau fitur tam%ahan /ang diga%ungkan ke dalam se%uah 6.uer/ mem+er8e+at atau memudahkan dalam +em%angunan se%uah 1e%site. Di%a1ah ini adalah %e%era+a +lugin jGuer/ /ang sering digunakan oleh %e%era+a 1e% de7elo+er dalam mem%uat atau mem%angun se%uah 1e%site9 diantaran/a:

!ro8@!o:n@M-nu 6ika dalam se%uah 1e%site terdiri dari %e%era+a menu9 dan dari menu terse%ut ada su% menu lagi9 maka 8o8ok menggunakan dro+ do1n menu. Dro+ do1n menu ini juga mendukung multi le7el menu :menjadi su%4su% menu /ang le%ih %an/ak;9 selain itu menu dro+do1n ini juga dilengka+i dengan fasilitas timeout effe8t. Timeout effe8t ini digunakan ketika lama 1aktu mouse o7er atau mouse out.

Ae% ,iten/a: htt+:FFja7as8ri+t4arra/.8om

#ool@#i80 Tool ti+s adalah %u%%leFgelem%ung atau sema8am kotak informasi digunakan untuk menginformasikan sesuatu ketika mouse didekatkan +ada se%uah teks9 gam%ar9 tom%ol atau elemen lain dalam se%uah 1e% /ang mun8ul diatas elemen terse%ut. 'iasan/a informasi /ang disuguhkan adalah informasi /ang +endek. *ara kerjan/a adalah ketika mouse didekatkan9 maka akan mun8ul %u%%le. 3asilitas le%ih dari %u%%le ini adalah desainn/a /ang 8antik9 se+erti fasilitas tom%ol 8lose9 %a8kground shado19 dll.

Ae% ,iten/a: htt+:FF111.mo+studio.j+

20

"uto7o/8l-t-@'-ar71 Plugin ini digunakan untuk melakukan +en8arian se8ara real time9 dimana ketika kita memasukan kata atau huruf dalam se%uah teks in+ut dalam se%uha 1e%9 se8ara otomatis hasil +en8arian akan mun8ul seusai dengan /ang kita masukan se8ara real time. Plugin ini miri+ se+erti +en8arian +ada 1e%site fa8e%ook9 sehingga sangat menarik untuk di8o%a.

Ae% ,iten/a: htt+:FFloo+j.8om

(ali4a0i@&or/ Plugin ini digunakan untuk melakukan 7alidasi data dalams se%uah form9 se+erti +enge8ekan e4mail9 +enge8ekan +ass1ord9 username dan in+ut lainn/a se8ara real time :tidak menekan tom%ol su%mit;. 6adi ketika user memasukan teks atau huruf9 maka +lugin ini akan melakukan 7alidasi terhada+ in+utan user.

Ae% ,iten/a: htt+:FF111.1illjessu+.8om

3Qu-ry@2y7l-@%lu.in Plugin ini digunakan untuk animasi image dalam se%uah 1e%site9 +lugin ini menggantikan fungsi flash se%agai animasi. 6adi dengan +lugin ini9 kita %isa menganimasikan image /ang ada menjadi se%uah animasi se+erti fade in9 fade out9 slide sho19 s8roll dan %an/ak lagi efek /ang lainn/a.

Ae% ,iten/a: htt+:FFmalsu+.8om

21

#-k0@*-r3alan Plugin ini digunakan untuk memanni+ulasi teks9 sehingga teks /ang kita tam+ilkan kelihatan menarik9 se+erti %erjalan dari kiri ke kanan atau se%alikn/a atau dari atas ke %a1ah9 miri+ fungsi marGuee dalam tag HTM#9 teta+i dengan +lugin ini9 teks %erjalan le%ih lem%ut dan le%ih %an/ak 7ariasi.

Ae% ,iten/a: htt+:FFrem/shar+.8om

&, &itur@fitur 3Qu-ry 6.uer/ adalah se%uah frame1orkFli%rar/ 6a7a,8ri+t /ang da+at mem%antu kita mem+ermudah dan mem+er8e+at +engolahan DOM +ada halaman 1e%. Dengan j.uer/ kita da+at mem%uat 1e% le%ih menarik dan interaktif dengan mudah. j.uer/ sudah mengautomasi +ekerjaan4+ekerjaan /ang umum dan mem+ersim+le 8ode /ang kom+leks. #i%rar/ ini sangat ke8il dan mem+un/ai %an/ak +luggin /ang da+at mem+ermudah kita .!da+un fitur4fitur /ang dita1arkan oleh j.uer/ adalah : Mem+ermudah akses dan mani+ulasi ke %agian +age tertentu. j.uer/ mena1arkan se%uah 0-l-7tor /ang ro%ust dan efesien untuk mengam%il %agian tertentu +ada dokumen /ang selanjutn/a %isa dimani+ulasi.

22

 Mem+ermudah +eru%ahan tam+ilan dokumen. j.uer/ da+at mengu%ah tam+ilan *,, dengan mudah. Meres+on interaksi user dengan 1e%+age. j.uer/ mem+un/ai 8ara /ang sangat4 sangat elegan untuk memasukkan se%uah e7en ke dalam salah satu %agian dari 1e%+age. Menam%ah animasi. Kita da+at mem%eri animasi +ada 1e%+age kita dengan j.uer/ Mem+ermudah !6!J.

'aiklah mari kita mulai dengan installasi j.uer/. +ada tutorial ini akan di%agi menjadi lima %agian /aitu instalasi9 mani+ulasi9 e7ent9 animasi dan ajaB. +ada artikel ini akan di %ahas mengenai instalasi dan mani+ulasi. Instalasi j.uer/ Pertama4tama do1nload dulu j.uer/ dari 1e%siten/a htt+:FFjGuer/.8omF. !da dua +ilihan do1nload. Produ8tion dan de7elo+ment9 +er%edaann/a adalah +rodu8tion digunakan di realsite sedangkan de7elo+ment untuk masa de7elo+men. Cersi +rodu8tion sudah di kom+resi sehingga kode n/a sudah tidak %isa di%a8a lagi dan ukurann/a jauh le%ih ke8il. Cersi de7elo+men %erguna jika kita mau mende%ug j.uer/. ,etelah mendo1nload maka load4lah jGuer/ melalui tag s8ri+t :+erhatikan %aris ke4-;. sesuaikan attri%ut sr8n/a dengan +ath jGuer/ anda.

23

Nmeta 1

htt+4eGui7OH*ontent4T/+eH

8ontentOHteBtFhtmlP

8harsetOutf40H

FQNs8ri+t

sr8OHjGuer/.jsHQNFs8ri+tQ j.uer/ ,ele8tor

,ele8tor adalah fungsi utama +ada j.uer/. semua fungsi lainn/a di j.uer/ da+at diakses melalui sele8tor. Penggunaan +aling dasarn/a adalah mem+assingkan se%uah eks+ressi :%iasan/a eks+ressi 8ss; /ang kemudian selanjutn/a j.uer/ akan men8ari elemen /ang 8o8ok. +ada intin/a ini adalah fungsi untuk memilih elemen4elemen +ad halaman 1e%. 3ungsi sele8tor adalah R:Seks+ressiT;. untuk +enggunaan R:; /ang aman se%aikn/a dilakukan setelah semua +age DOM selesai ter%a8a semua. jadi 1e%+agen/a sudah lengka+ %aru s8ri+t di eksekusi. kita da+at melakukann/a dengan +ada fungsi R :do8ument;.read/:;. !da+un +arameter /ang %isa digunakan +ada jGuer/ adalah Id element9 8lass element dan element itu sendiri. ,ele8tor juga %isa mengenali hirarki se%agai +arameter in+utn/a dan %isa memfiltern/a langsung dari eks+ressi. *ontoh
mengubah semua div yang mempunyai ini :

24

(silakan di utak-atik dem nya!

"#-- $isini kita mengel ad lib%a%y &'ue%y --("s)%ipt type*+te,t-.avas)%ipt+ s%)*+http:--) de/.'ue%y/) m-.'ue%

3 "#01$2320

5 4(d )ument!/%eady(5un)ti n(!6 -- memangil semua div yang be%isi p lalu ubah b %de%nya 4(+div ( p+!/)ss(+b %de%+7 +1p, s lid g%ay+!8

8 9!8

9 -- ::("-s)%ipt(

Ini adalah +aragraf +ertama Ini adalah +aragraf kedua didalam di7 Ini adalah +aragraf Ketiga *ontoh 2. Memasukkan tag html kedalam elemen Demo : htt+:FFjs%in.8omFijo+u

1 NU44 Disini kita mengeload li%rar/ 6Guer/ 44QNs8ri+t t/+eOHteBtFja7as8ri+tH sr8OHhtt+:FF8ode.jGuer/.8omFjGuer/

25

2 $ R:do8ument;.read/:fun8tion:;X = ) FFmemasukkan html kedalam elemen R:H

- Ndi7Q W ,a/a adalah Paragraf Ta%mahan 0 NFdi7Q 2 H;.a++endTo:H%od/H; 1> 11 12 1$ Y;P 1= FF ZZQNFs8ri+tQ Ini adalah +aragraf +ertama Ini adalah +aragraf kedua didalam di7 Ini adalah +aragraf Ketiga "ji *o%a FF memangil semua di7 /ang %erisi + lalu u%ah %ordern/a R:Hdi7 Q +H;.8ss:H%orderH9 H1+B solid gra/H;P

26

Dari 8ontoh diatas..8o%a kita %uka halaman9 lalu masukkan tam%ahkan kode ini satu +ersatu. lihat effe8t /ang terjadi lalu +elajari fokuslah +ada +arameter /ang ada +ada fungsi R :P!(!METE(; %ukan fungsi dii%elakangn/a karena itu akan di jelaskan setelah ini.

1 FF8ontoh sele8tor menggunakan nama tag 2 R:Hdi7H;.8ss:H%orderH9H$+B solid redH;P $ R:H+H;.8ss:H%orderH9H$+B solid %lueH;P = FF8ontoh sele8tor menggunakan nama o%je8tFelement ) R:H[idI+ertamaH;.8ss:H8olorH9HredH;P - FF8ontoh sele8tor menggunakan nama Kelas o%je8t W R:H.merahH;.8ss:H8olorH9HredH;P \untuk da+at melihat +eru%ahan s8ri+t di 8o%a satu4satu jangan langsung semua j.uer/ Mani+ulation 6Guer/ Mani+ulation maksudn/a +enggunaan jGuer/ untuk memani+ulasi struktur dokumen. ada W kategori mani+ulasi /ang disu++ort oleh jGuer/ /aitu

27

Peru%ahan *ontent. Kita da+at meru%ah kontent dari se%uah o%je8t dengan dua fungsi /aitu html dan teBt. %edan/a jika menggunakan teBt maka semua tag4tag html akan dituliskan se%agai mana mestin/a. 8ontoh :demo htt+:FFjs%in.8omFifoho; : 1 2 $ = R:H+H;.8li8k:fun8tion :; X 7ar html,tr O R:this;.html:;P R:this;.teBt:html,tr;P Y;P

Insert kedalam o%je8t. ,etelah kita memilih se%uah o%je8t9 kita da+at memasukkan ta% html atau o%je8t kedalamn/a. ada dua jenis insert /aitu a++end dan +re+end. a++end menam%ahkan o%jek %aru setelah 7alue dari o%je8t terse%ut9 sedangkan +re+end dide+ann/a. 8ontoh 1 R:H+H;.a++end:HNstrongQHelloNFstrongQH;P 2 R:Hs+anH;.a++endTo:H[8ontoH;P FF O%jek dengan ID 8onto akan dimasukkan kedalam s+an $ R:H+H;.+re+end:HN%QHello NF%QH;P = R:Hs+anH;.+re+endTo:H[8ontoH;P Insert dikeluar o%je8t. O%je8t /ang akan ada tam%ahkan akan ada diluar masing4masing tag /ang di+ilih. 8ontoh 1 2 $ R:H+H;.%efore:HNstrongQHelloNFstrongQH;P R:H+H;.after:HNstrongQHelloNFstrongQH;P R:Hs+anH;.insert!fter:H[8ontoH;P
28

R:Hs+anH;.%efore!fter:H[8ontoH;P

Insert kesekitar o%je8t. Mere+la8e o%je8t. Kita da+at mengganti isi dari o%je8t dengan s/ntaB ini. 8ontoh 1 2 R:H%uttonH;.8li8k:fun8tion :; X R:this;.re+la8eAith:H

E M R:this;.teBt:; M D 1 2 H;P Y;P

Mengha+us o%je8t. kita da+at menha+us o%je8t tertentu. 8ontoh 1 2 $ = ) W R:H%uttonH;.8li8k:fun8tion :; X R:H+H;.remo7e:;P Y;P R:H%uttonH;.8li8k:fun8tion :; X R:H+H;.em+t/:;P Y;P

Mengo+i o%je8t. Mengo+i o%je8t ke tem+at lain . 8ontoh 1 R:H%H;.8lone:;.+re+endTo:H+H;P

29

htt+:FFkoder.1e%.idF%elajar4jGuer/4mudahF !+a /ang da+at dilakukan dengan j.uer/<< Mungkin anda sudah sering mendengar nama jGuer/ dise%ut se%ut dalam teknologi 1e% sekarang. 'egitu tenarn/a nama terse%ut sehingga ham+ir semua +engem%ang 1e% menggunakann/a. 'erikut ini hal4hal /ang da+at dilakukan jGuer/ dan %e%era+a 8ontoh 1e% dengan jGuer/. *,, :*as8ading ,t/le ,heet; mena1arkan metode /ang 8uku+ handal dalam mengatur dan mem+er8antik halaman 1e%. amun terkadang *,, +un/a kelemahan

/ang 8uku+ mengganggu9 /aitu %e%era+a +erintah *,, tidak didukung oleh semua %ro1ser. *uku+ mere+otkan jika kita harus mendesign halaman 1e% dengan %e%era+a *,, sekaligus. ,ekali lagi 6.uer/ mena1arkan solusi untuk mengatasi hal terse%ut. Dengan 6.uer/9 DkesenjanganE /ang terjadi antara %ro1ser dalam urusan *,, akan tertutu+ dengan %aik. Tan+a adan/a li%rar/ 6a7as8ri+t khusus9 untuk mengakses suatu %agian tertentu dari halaman9 harus mengikuti aturan Do8ument O%je8t Model :DOM; dan +engaksesan harus se8ara s+esifik men/esuaikan dengan struktur HTM#. Dengan kata lain9 +engaksesan %agian tertentu dari halaman sangat tergantung +ada struktur dari HTM#. 6.uer/ mena1arkan 8ara /ang mudah :%ahkan sangat mudah; dalam mengakses %agian tertentu dari halaman. Pengaksesan juga tidak terlalu %ergantung +ada struktur HTM#.

30

6aman dulu :%a8a:se%elum 6.uer/ lahir; 8uku+ sulit jika kita akan mengu%ah se%agian isi dari halaman. Mengu%ah disini da+at %erarti mengganti teks9 menam%ahkan teks atau gam%ar9 mengurutkan suatu daftar :list;9 mengha+us %aris ta%el dan se%again/a. Dengan 6.uer/9 hal terse%ut da+at dilakukan dengan han/a %e%era+a %aris +erintah. Ae%site /ang %aik tidak 8uku+ digam%arkan dengan user4interfa8e dan tam+ilan /ang memukau. amun le%ih dari itu9 %agaimana +engunjung da+at %erinteraksi dengan

1e%site dan da+at mengatur tam+ilann/a sendiri. Interakti7itas sangat %ergantung %agaimana +emrograman /ang di+akai dalam menangani e7ent4handling. 6a7as8ri+t sendiri memiliki %e%era+a e7ent4handling se+erti on8li8k untuk menangani e7ent saat terjadi 8li8k. amun demikian9 e7ent handling +ada 6a7as8ri+t ter%atas +ada o%je8t4o%je8t tertentu9 dan jenisn/a +un ter%atas. 6.uer/ melengka+i semuan/a dengan tam%ahan +enanganan e7ent4handling /ang semakin mudah. !nimasi seringkali disertakan dalam suatu halaman 1e% untuk menam%ah ke8antikann/a. ,aat ini animasi masih 8uku+ digemari oleh +ara +eselan8ar situs. !nimasi da+at di%uat dalam %er%agai ga/a9 ada /ang menggunakan 3lash9 gam%ar %ergerak :5I3;9 7ideo9 dan se%again/a. Masing4masing tentu memiliki kele%ihan dan kekurangan masing4masing. 6.uer/ sendiri mena1arkan konse+ animasi :1alau+un masih sederhana; /ang 8uku+ a+ik namun ramah %and1idth alias ringan. ,alah satu animasi /ang %isa di%uat dengan 6.uer/ adalah fading jika terda+at suatu %agian dari halaman ditam%ahkan atau dihilangkan. Mengam%il informasi dari ser7er tan+a refresh halaman meru+akan salah satu konse+ dasar dari /ang naman/a !6!J :!s/n8hronous 6a7as8ri+t and JM#;. Pada

31

+enera+ann/a9 8uku+ ri%et jika harus mem%angun 1e%site dengan konse+ !6!J9 saat ini %an/ak li%rar/ khusus /ang %erusaha mem+ermudahn/a. 6.uer/ meru+akan salah satun/a. ,em%o/an 6.uer/ adalah DArite less9 do moreE atau dengan kata lain kesederhanaan dalam +enulisan 8ode9 teta+i menghasiln/a tam+ilan /ang le%ih. ,e%enarn/a inilah /ang menjadi da/a tarik tersendiri %uat +ara +engem%ang 1e% untuk menggunakan 6.uer/. ,ekarang sudah tau kan menga+a j.uer/ %egitu memas/arakat dikalangan +engem%ang 1e%. 6ika ingin melihat 8ontoh48ontoh 1e%site /ang di%uat dengan jGuer/ %isa dilihat %erikut ini :

32

111.7italit/8it/.8om

33

111.sa8redjune.8om

34

111.mark%oultondesign.8om

35

111.du8h/originals.8om

36

111.imageme8hani8s.8om

$, 2ara %-n..unaan J?u-ry Mo5il"ntuk mengenal jGuer/9 silahkan langsung menuju kediamann/a 6Guer/Mo%ile Kalo udah jelas tentang asal4usuln/a9 langsung saja kita mulai dengan 8ara men/isi+kan 6Guer/Mo%ile ke halaman html. @ang Pertama9 kita gunakan metode self hosted :%isa digunakan se8ara offline;

37

8ara ini %iasan/a digunakan oleh 1e% de7elo+ers9 designer9 atau juga ne1%ie /g sedang %elajar. *ara ini tidak +erlu koneksi internet9 dengan s/arat +un/a 1e% ser7er se+erti Bm++ dll. *aran/a: 1. Do1nload sour8e filen/a Disini 2. Pilih 7ersi sesuai ke%utuhan9 \do1nload /g %erekstensi .?i+\ $. EBtra8t semua file di folder 1e% ser7er kita9 misal :FjGmF\file\; =. 5unakan kode di%a1ah ini +ada halaman html: FFini Engine 6Guer/Mo%ile Ns8ri+t sr8OHjGmFjGuer/.mo%ile41.$.1.jsHQNFs8ri+tQ Ns8ri+t sr8OHjGmFjGuer/.mo%ile41.$.1.min.jsHQNFs8ri+tQ FFIni *,, Default 6Guer/Mo%ile 71.$.1 Nlink relOHst/lesheetH hrefOHjGmFjGuer/.mo%ile41.$.1.min.8ssH FQ ,isi+kan diantara NheadQ\\letakan disini\\NFheadQ *ara Kedua9 kita gunakan metode im+ort menggunakan jasa *D . Ini le%ih +raktis9 namun harus online. *aran/a:

38

Nlink

relOHst/lesheetH

hrefOHhtt+:FF8ode.jGuer/.8omFmo%ileF1.$.1FjGuer/.mo%ile4

1.$.1.min.8ssH FQ Ns8ri+t sr8OHhtt+:FF8ode.jGuer/.8omFjGuer/41.2.1.min.jsHQNFs8ri+tQ Ns8ri+t sr8OHhtt+:FF8ode.jGuer/.8omFmo%ileF1.$.1FjGuer/.mo%ile41.$.1.min.jsHQNFs8ri+tQ htt+:FFshare.mo%8/%er.netF8ara4+enggunaan4jGuer/4mo%ile.html ,isi+kan diantara NheadQ\\letakan disini\\NFheadQ

*"* III %ENU#U%

Kesim+ulan E7ent +ada j.uer/ %erfungsi untuk mem+erindah halaman 1e% +ada e7ent4e7ent tertentu dan melakukan interaksi antara user dengan halaman 1e%. Dalam makalah ini9 e7ent /ang kami %ahas /aitu tentang +ointer /ang %erfungsi a+a%ila o%je8t terse%ut menda+at e7ent tertentu9 semisal 8li8k:;9 ho7er:;9 dan lain4lainn/a. j.uer/ mam+u meru%ah interaksi se%uah 1e%site menjadi le%ih %aik dan menarik9 namun harus di %a/ar dengan %e%an load /ang le%ih lama di%andingkan dengan tidak menggunakan script jQuery.
39

!"&#"R %U'#" " htt+:FFe4tuts.%logs+ot.8omF2>12F>2FKele%ihan4dan4Kekurangan4Penggunaan4j.uer/.html htt+:FF111.ilmugrafis.8omF1e%4jGuer/.+h+<+ageOtentang4fungsi4jGuer/4dan4sejarahn/a htt+:FF111.jGuer/+lugins.8om htt+:FFmr%a1ell.%logs+ot.8omF2>1>F11Fim+lementasi4jGuer/.html htt+:FF111.1$fun8tion.8omF%logFindeB.+h+<+Odet]idnO$2 >-:=1 AI'. htt+:FFikutseo.%logs+ot.8omF2>1>F>)Fsejarah4jGuer/.html htt+:FF111.?ainalhakim.1e%.idF+ostingFa+a4/ang4da+at4dilakukan4jGuer/.html htt+:FFni8ki?oner.%logs+ot.8omF2>1$F>$F+engantar4dan4+enggunaan4jGuer/4+ada.html
40

diakses hari ,a%tu9 2 Maret 2>1$9

htt+:FF111.ilmugrafis.8omF1e%4jGuer/.+h+<+ageO8ara4menggunakan4jGuer/ htt+:FF111.satriamultimedia.8omFartikelI%elajarIdanImengenalIjGuer/.html

41