SAY HI TO JQUERY

Makalah ini disusun sebagai tugas mata kuliah Teknologi Informasi dan Komunikasi Dosen pengampu : Septia Lutfi,S.Kom, M.Kom

Oleh Dyah Ayu Wulandari 1102412106

KURIKULUM DAN TEKNOLOGI PENDIDIKAN FAKULTAS ILMU PENDIDIKAN UNIVERSITAS NEGERI SEMARANG 2013

BAB I PRNDAHULUAN A. Latar Belakang Dalam dunia pengembangan aplikasi berbasis web, maka bahasa scripting merupakan bahasa pemrograman yang menjadi pilihan utama, karena kemudahan dan kecepatan untuk bisa melihat hasil dari yang dikerjakannya. Jika kita menggunakan bahasa scripting PHP, maka kita dapat menggunakan software yang open source dan bebas digunakan (free) eaccelerator, Turk MMCache, atau pun phpobfuscator. Jika kita menggunakan JavaScript, maka kita dapat menggunakan software untuk mengkompresi dengan menggunakan packer. Salah satunya adalah packer yang dibuat oleh Dean Edward. Software-software yang digunakan untuk membuat program script yang kita miliki menjadi sulit dibaca, karena menggunakan teknik dan algoritma yang sudah terbukti kehandalannya. Umumnya softwaresoftware tersebut membuat hasil kerjanya tidak bisa dikembalikan ke dalam bentuk semula secara persis sama. JQuery adalah librari JavaScript yang memungkinkan kita untuk membuat program web pada suatu halaman web, tanpa harus secara eksplisit kita menambahkan event atau pun properti pada halaman web tersebut. 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. B. Tujuan Makalah ini disusun agar kita dapat mengenal lebih dalam tentang jQuery, yang mana dapat membantu para developer web dalam proses pembuatan webnya. Terlebih jQuery memiliki lisensi open source yang bisa diperoleh secara cuma-cuma, dan dapat digunakan untuk kepentingan komersial, tanpa ada tuntutan untuk membayar kepada pembuat jQuery. Lisensi opensource dari jQuery adalah MIT dan LGPL. Dengan bengitu bagi para developer web perlu mengenal lebih jauh tentang jQuery.

BAB II PEMBAHASAN

A. Tentang JQuery Semenjak dirilis pertama kali pada tahun 2006 oleh john Resig, jQuery telah mencuri perhatian para developer web. Buktinya, pada tahun-tahun berikutnya jQuery telah banyak digunakan oleh website - website terkemuka di dunia seperti Google, Microsoft, intel , Nokia, Oracle , IBM, DELL, BBC, NBC, ESPN, EAPN, EA Sport, Twitter, Facebook, Amazon, Techorati, Youtobe Apple, Wordpress, Mozila, Netflix , Digg, Time, dan masih banyak lagi. Bahkan website lokalpun tidak mau ketinggalan, Lihat saja Detik, Studio 21 (21cineplex.com). Indosiar, Vivanews, Kompas, termasuk IlmuGrafis tentunya dan lain-lain. Dan sampai saat ini sudah tercatat ada jutaan website yang telah menggunakan jQuery.

JQuery merupakan suatu framework (library) javascript yang menekankan interaksi antara javascript dan HTML, atau bisa disebut juga sebagai cara baru dalam menuliskan kode javascript. JQuery akan mempercepat dan meringkaskan library javascript sehingga dengan menggunakan jQuery kita dapat mempercepat perpindahan dokumen HTML, penanganan event (event handling), pembuatan animasi didalam web sehingga web kita tampak seperti flash, dan juga interaksi AJAX untuk pengembangan web yang modern dan cepat. Jquery memiliki slogan write less, do more yang kurang lebih maksudnya adalah kesederhanaan dalam penulisan code, tapi dengan hasil yang lebih banyak. JQuery adalah javascript Library -> kumpulan kode / fungsi Javascript siap pakai, sehingga mempermudah dan mempercepat kita dalam membuat kode Javascript. Secara standar. Apabila kita membuat kode Javascript, maka diperlukan kode yang cukup panjang, bahkan terkadang sangat sulit dipahami. Nah, disinilah peran jQuery sebagai Javascript Library, dimana kita bisa langsung memanggil fungsi yang terdapat di dalam

Library tersebut, menariknya kita hanya memerlukan satu/dua baris untuk membuat warna selang-seling pada suatu tabel, yaitu: jQuery(table trinth-child(odd)) .addClass (odd) ; Kesimpulannya, jQuery menyederhanakan kode Javascript. Hal ini sesuai dengan slogannya Write less, do more cukup tulis sedikit, tapi bisa melakukan banyak hal. Berikut adalah contoh sederhana dari jQuery

Penjelasan: 1. Pertama, kita harus menyertakan (include) file library JQuery. Pastikan letak dari file library sudah benar. 2. Perintah-perintah JQuery.
o

Baris 8 merupakan perintah inisialisasi dimana saat halaman (dokumen) siap ditampilkan maka jalankan juga perintah yang ada di dalamnya. Hal ini mirip dengan event onLoad yang biasanya diletakkan di tag .

Baris 9-11 maksudnya adalah mendefinisikan action yang terjadi saat link dengan class=show ( $(a.show) ) diklik (lihat link baris ke-22). Jadi jika link di-klik maka paragraf dengan nama class=jquery ( $(p.jquery) ) akan tampil dengan durasi tampil slow. Paragraf yang akan ditampilkan adalah paragraf baris ke-24 sampai 27.

Baris 13-15 sebaliknya, akan menyembunyikan isi dari paragraf yang mengandung nama class=jquery.

3. Isi dari halaman. Perhatikan nama class dari masing-masing object. B. Versi JQuery Mengenai perkembangan versi dari JQuery sendiri saat ini (November 2011) telah ada jQuery versi 1.7 (Release Notes). Perkembangan versi jQuery: 1. JQuery versi 1.0 (1.0.1, 1.0.2, 1.0.3, 1.0.4) 2. JQuery versi 1.1 (1.1.1, 1.1.2, 1.1.3, 1.1.3.1, 1.1.4) 3. JQuery versi 1.2 (1.2, 1.2.1, 1.2.2, 1.2.3, 1.2.4, 1.2.5, 1.2.6) 4. JQuery versi 1.3 (1.3.1, 1.3.2) 5. JQuery versi 1.4 (1.4.1, 1.4.2, 1.4.3, 1.4.4) 6. JQuery versi 1.5 (1.5.1, 1.5.2) 7. JQuery versi 1.6 (1.6.1, 1.6.2, 1.6.3, 1.6.4) Perbedaan versi pada Jquery. Versi baru biasanya terdapat penambahan fungsi baru dari fungsi jquery yang sebelumnya. Tetapi pasti memiliki besar kapasitas yang lebih besar dari versi yang sebelumnya sehingga dengan versi yang baru dapat memperberat beban dan loading pada aplikasi website yang dibuat. Maka dari itu kita harus mempertimbangkan ketika kita memakai versi jquery yang kita akan gunakan. Perbedaan Jquery.js (tanpa min) dengan jquery.min.js(menggunkan min). Dari keduanya mempunyai kegunaan dan fungsi sama. Penggunaan min menandakan bahwa jquery tersebut telah dikompres (compress) sehingga muatan atau bebanya telah terkurangi dengan tujuan untuk mempercepat waktu loading. Compress jquery dilakukan dengan menghilangkan beerapa keterangan dan spasi yang sebenarnya berfungsi untuk memudahkan pengguna saat membuat desain baru dengan memanfaatkan jquery. Maka dari itu jika sekedar pengguna lebih baik menggunakan jquery.min.js agar loading lebih cepat. Struktur penggunaan jquery

Jquery merupakan library yang berupa file javascript. Jquery dapat mempermudah kita dalam memanfaatkan dan menggunakan javascript. Sebelum dapat digunakan, jquery harus di include-kan terlebih dahulu. Letak dari script includenya pun berada pada tag <head></head>.
<head> <script type=text/javascipt" src=jquery-1.4.4.min.js> </script>

</head>

Salah satu keuntungan menggunakan jquery adalah kemudahan dalam mengakses DOM(Document Object Model). Untuk dapat mengakses DOM denga sempurna tentu semua DOM harus sudah siap untuk diakses. Untuk memastikan semua DOM telah siap diakses, Jquery menyediakan event.
$(document) .ready()

Event ini hampir sama dengan onLoad yang dimiliki oleh native javascript. Bedanya fungsi di dalam $(document).ready() akan tertrigger saat semua DOM telah siap, sedangkan pada onLoad, semua elemen yang ada dalam halaman harus telah selesai terdownload terlebih dahulu, termasuk file gambar. C. Penggunaan JQuery Pada penggunaan jQuery ini tidak terlepas dengan javascript karena library atau framework jquery ini ditulis menggunakan bahasa javascript. Sebenarnya ada beberapa cara teknik penulisan. Tata cara penulisan yang biasa digunakan adalah seperti ini. 1. Pendefinisia jQuery sendiri, kode yang digunakan bisa berupa jQuery() atau $(). 2. Selector, selector biasanya disisipkan pada pendefinisian diatas misalkan seperti ini jQuery(#kotak) . selector merupakan perintah yang digunakan untuk membuat manipulasi pada selector HTML yang didefinisikan diatas. Selector yang umum digunakan biasanya adalah tag HTML itu sendiri, nama ID, nama CLASS, dan atribut-atribut yang ada pada HTML. Selector disini bisa kita sebut juga sebagai target. Target dari manipulasi jQuery pada tampilan HTML. 3. Method, pada method disini diletakan setelah selector. Pada method ini merupakan fungsi untuk memanipulasi selector yang menjadi target jQuery tersebut. Method disini bisa berupa event, manipulasi data, memberikan effect tampilan atau

mendapatkan informasi dari suatu object. Kebanyakan didalam function method ini terdapat beberapa macam properties atau function lagi untuk pemilihan dari karakter dari method tersebut. Membuat Fuction jQuery Jquery adalah satu framewok javascript yang mendukung pluggin dengan sangat mudah. Sehingga banyak kita dapat dengan mudah men jumpai plugin-plugin yang berada diinternet. Contoh plugin yang terkenal adalah plugin yang dikembangan oleh jQuery UI. Sebenarnya kita juga bias mendevelop suatu plugin sendiri. Disini akan dijelaskan sedikit mengenai pembuatan plugin dan fungsi didalam jQuery. Untuk penulisan jQuery secara sederhana adalah sebagai berikut:
jQuery.fn.myPlugin = function() { // Do your awesome plugin stuff here };

Jika kita menggunakan script diatas, kelemahanya adalah function jQuery tersebut dapat terjadi bentrok dengan plugin jQuery yang lain. Karena didalam perintah function tersebut, harus dituliskan menggunakan jQuery juga untuk pendefinisian jQuery-nya. Untuk masalah diatas dapat ditanggulangi dengan menggunakan perintah berikut:
(function( $ ) { $.fn.myPlugin = function() { // Do your awesome plugin stuff here }; })( jQuery );

Dengan pemformatan penulisan function diatas, kita dapat menggunakan symbol dollar $ untuk dapat meloloskan dari function jQuery lain. Untuk lebih jelasnya mengenai penggunaan function jQuery yang sederhana bias menggunakan contoh berikut ini,
(function( $ ){ $.fn.maxHeight = function() { var max = 0; this.each(function() { max = Math.max( max, $(this).height() ); }); return max; }; })( jQuery ); jQuery(document).ready(function(){ var tallest=$('div').maxHeight(); alert(tallest); });

Hasil keluaran dari script diatas akan menujukan nilai tinggi dari tag HTML div melalui notifikasi perintah alert. Dari fungsi yang kita buat, yang perlu kita soroti adalah fungsi this dan $(this). Untuk fungsi this.each sendiri, memang harus ditulis this seperti itu bukan dengan $(this). Jika kita tuliskan $(this) disitu maka javascript akan mengeluarkan perintah error atau tidak jalan. Karena jQuery sendiri akan mendefinisikan perintah berikut sebagai $($(this)). Jadi kita tidak perlu menuliskan perintah $(this).each akan tetapi this saja. Kemudian setelah this didalam fungsi each(). Kita akan menjumpai dengan $(this). Kalo pada bagian ini, kita tuliskan secara default atau seperti biasa. Karena perintah $(this) menerangkan target yang sedang diseleksi oleh fungsi each(). Selain itu, didalam penulisan function ini kita bisa membuat fungsi yang dapat kita berikan options dan default dalam membuat framework fungsi buatan kita sendiri. Contoh scriptnya adalah seperti ini.
(function( $ ){ $.fn.tooltip = function( options ) { //Create some defaults, extending them with any options that were provided var settings = $.extend( { 'location' : 'top', 'background-color' : 'blue' }, options); return this.each(function() { // Tooltip plugin code here }); }; })( jQuery );

Jika kita function tersebut dengan perintah berikut ini.

$('div').tooltip({ 'location' : 'left' });

Maka isi kandungan informasi fungsi tooltip tersebut adalah.

{ 'location' : 'left', 'background-color' : 'blue' }

Hal tersebut terjadi karena, funsi yang kita set adalah location left dan default yang ada adalah background-color:blue dan location:top. Kedua nilai tersebut, default dan nilai function yang kita set kita lakukan fungsi extends di jQuery maka, menampilkan isi darifungsi diatas. Dimana nilai default akan tereplace dengan nilai yang kita set. jika yang

kita set hanya sebagian argument dari fungsi tersebut, maka nilai yang lainya akan terset secara default. Berikut merupakan contoh jadi dari program yang telah dibuat.
<html> <head> <title>Untitled Document</title> <script src="jquery-1.4.js" type="text/javascript"></script> <script> (function( $ ){ $.fn.tooltip = function( options ) { var settings = $.extend( { 'position': 'absolute', 'backg' : 'blue', 'data':'Nilai Default', 'top':'2px', 'right':'10px', 'width':'200px' }, options); $('.tip').show(); $('.tip').css({'position':settings.position,'backgroundcolor':settings.backg,'top':settings.top,'right':settings.right,'width':set tings.width}); $('.tip').text(settings.data); }; })( jQuery ); jQuery(document).ready(function(){ $('div').hover( function(){ jQuery('.tip').tooltip({'top':'1px','right':'2px','backg':'red','widt h':'100px'}); },function(){ jQuery('.tip').hide(); }); }); </script> <style> #tool{ width:260px; position:relative; } #tool img{ height:40px; width:260px; height:200px; } </style> </head> <body> <div id="tool"> <img src="Copy of DSC_0133.jpg" /> <span class="tip" style="display:none">INI ADALAH TOOLTIP SEDERHANA</span> </div> </body> </html>

Event yang ada pada Javascript 1. Keypress Merupakan Event pemicu untuk mengikat fungsi dari perintah tombol dari element yang dipilih. $( selector ).keypress() //memicu keypress untuk pemilihan item $( selector ).keypress( function ) // Optional. Menjalankan fungsi yang spesifik ketika ada pemicu berupa penekanan tombol keyboard.Dari sekian tombol yang ada pada keyboard,akan memiliki devinisi kode yang berbeda-beda. Devinisi kode dapat dilihat dalam table berikut: 2. Click Digunakan untuk memicu event pada element HTML saat user mengklik elemen yang mempunyai fungsi click() ini. Event click dikirim ke elemen saat pointer mouse diatas elemen dan tombol mouse ditekan lalu dilepaskan. 3. Fandeln Digunakan untuk menampilkan elemen dengan efek pudar. $(selector).fadeIn(durasi,callback) Keterangan: Selector digunakan untuk memilih elemen yang akan dikenakan efek fadeIn. durasi adalah waktu yang menunjukkan berapa lama efek fade ini akan berlangsung. 4. Css jQuery juga mempunyai kemampuan dalam hal memanipulasi CSS. Ada 3 fungsi utama dalam jQuery untuk melakukan manipulasi. $(selector).css(name,value) $(selector).css({properties}) $(selector).css(name) Fungsi css() berguna untuk mendapatkan atau set sebuah properti CSS atau lebih untuk elemen yang dipilih. Jika parameter name dan value diisi, artinya kita me-set nilai dari properti CSS. Untuk me-set nilai-nilai untuk properti CSS lebih dari satu, bisa gunakan {properties}. Jika hanya untuk mendapat nilai dari properti CSS yang diinginkan dari elemen yang dipilih cukup isi parameter name saja.

D. Kemampuan JQuery

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 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, 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. Merespon 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 Harus 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, saat ini banyak library khusus yang berusaha mempermudahnya. JQuery merupakan salah satunya. 7. Menyederhanakan Penulisan Javascipt 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.

E. Alasan Menggunakan JQuery Ada beberapa keunggulan jQuery dibandingkan Javascript Library pendahulunya seperti Phototype, Mootools , YUI (Yahoo User Interface). Berikut beberapa alasan yang membuktikan jQuery sangat powerfull dan layak dijadikan pilihan, yaitu: 1. jQuery telah banyak digunakan oleh website-website terkemuka di dunia. 2. Kompatibel/cocok dengan semua browser yang popular, seperti Mozila, Internet Explorer, Safari, Chrome, Opera. 3. Kompatibel dengan semua versi CSS (CSS 1 sampai dengan CSS 3) 4. Dokumentasi, tutorial dan contoh-contohnya lengkap, silahkan kunjungi website resminya di http://jquery/com 5. Didukung oleh komunitas yang besar dan aktif, seperti forum,milis, blog, social engineering (twitter dan facebook), website, dan tutorial.

6. Ketersediaan plugin yang sangat banyak jumlahnya. Plugin merupakan kemampuan tambahan yang bisa disertakan pada jQuery. 7. Filenya hanya satu dan ukurannya pun kecil, hanya sekitar 20 KB, sehingga cepat diakses 8. Open source/free (gratis) dengan lisensi dari GNU General Public Lisence dan MIT License. 9. jQuery lebih banyak digunakan oleh para developer web dibandingkan Javascript Libary lainnya

F. Sintaks jQuery Sintaks jquery biasanya dibuat untuk memilih elemen-elemen HTML dan melakukan aksi terhadap elemen yang dipilih. Sintaks : $(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 atau memanipulasi 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 di-load semuanya. Atau dengan kode javascript biasanya seperti ini : window.onload = function(){ //kode anda di sini } Sekarang mari kita lihat pada contoh Kode 12. $(".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, nanti akan kit a lihat lebih lanjut fungsi-fungsi built in dari jQuery. G. Efek-efek yang dihasilkan jQuery Salah satu kemampuan jquery adalah, adanya fungsi-fungsi efek yang siap pakai. Biasanya untuk membuat efek memudar di javascript, kita harus membuat kode yang lumayan panjang. Tapi dengan menggunakan jquery cukup menggunakan fungsi $(selector).fadeIn() Berikut adalah efek-efek siap pakai yang disediakanoleh jquery. 1. jQuery show() Effect Berguna untuk menampilkan elemen yang tersembunyi. Untuk mengatur elemen yang

tersembunyi melalui CSS adalah display:none(bukan visibility:hidden). Sintaks : Parameter Deskripsi

speed Opsional. Menentukan kecepatan elemen muncul dari hidden ke visible. Defaultnya adalah 0. Nilainya bisa berupa: milliseconds (contoh : 1500) "slow" "normal" "fast" callback dijalankan. $(selector).show(speed,callback) Contoh : Kode 13. Contoh show() <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".tombol1").click(function(){ $("p").show(1000,tampilkanAlert); }); }); function tampilkanAlert(){ Opsional. Suatu fungsi yang akan dijalankann apabila efek show selesai

alert("Paragraf sekarang muncul"); } </script> </head> <body> <p style=display:none>Ini adalah paragraph tersembunyi.</p> <button class="tombol1">Show</button> </body> </html> 2. jQuery hide() Effect Berfungsi untuk menyembunyikan elemen yang dipilih. Sintaks : $(selector).hide(speed,callback) Untuk parameter speed dan callback adalah sama dengan show() effect. Contoh : $(".tombol1").click(function(){ $("p").hide(); });

3. jQuery toggle() Effect Adalah gabungan fungsi hide dan show. Jadi toggle() berfungsi menampilkan yang tersembunyi, menyembunyikan yang tampak. Sintaks :

$(selector).toggle(speed,callback,switch) Parameter speed Opsional.Menentukan kecepatan elemen muncul dari hidden ke visible. Defaultnya adalah 0. Nilainya bisa berupa: milliseconds (contoh : 1500) "slow" "normal" "fast" Deskripsi

callback Opsional. Suatu fungsi yang akan dijalankann apabila efek show selesai dijalankan.

Switch Opsional. Bernilai Boolean True, hanya untuk menampilkan semua elemen False, hanya menyembunyikan semua elemen Jika parameter ini diset, parameter speed dan callback parameters tidak bisa digunakan.

Contoh : Kode 14. Contoh toggle() <html>

<head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".tombol1").click(function(){ $("p").toggle(true); }); }); </script> </head> <body> <p>Ini adalah paragraf</p> <p style="display:none">Ini adalah paragraf lainnyayang belum muncul</p> <p>Jika bernilai true hanya berfungsi menampilkan, kalau false hanya menyembunyikan</p> <button class="tombol1">Tampilkan semua elemen</button> </body> </html> 4. jQuery slideDown() Effect Menampilkan elemen yang tersembunyi, secara efek sliding. Sintaks : $(selector).slideDown(speed,callback) Untuk parameter speed dan callback adalah sama dengan fungsi show(). Contoh:

$(".tombol1").click(function(){ $("p").slideDown(); }); 5. jQuery slideUp() Effect Menyembunyikan elemen secara efek sliding. Sintaks : $(selector).slideUp(speed,callback) Untuk parameter speed dan callback adalah sama dengan fungsi show(). Contoh: $(".tombol1").click(function(){ $("p").slideUp(); }); 6. jQuery slideToggle() Effect Gabungan antara slideDown() dan slideUp(). Menyembunyikan elemen jika dalam keadaan visible, menampilkan elemen jika dalam kedaan hidden. Sintaks : $(selector).slideToggle(speed,callback) Untuk parameter speed dan callback adalah sama dengan fungsi show(). Contoh: Kode 15. Contoh slideToggle() <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript">

$(document).ready(function(){ $("#contact").click(function(){ $("#contact-box").slideToggle("slow"); }); }); </script> </head> <body> <p><span id="contact" style="cursor:hand;backgroundcolor:#ababab; padding:3 ;font-family:Verdana">Contact</span></p> <div id="contact-box" style="background:#98bf21;height:200px;width:300px;position:relative;disp lay:none;padding:10"> <form> Nama : <input type=text><p> Email : <input type=text><p> Komentar :<textarea rows=5></textarea><p> <input type=submit value=kirim> </div> <p> jQuery adalah 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. <p>Sebelum anda memulai mempelajari jQuery, anda harus mempunyai

pengetahuan dasar mengenai HTML, CSS dan Javascript. </body> </html>

7. jQuery fadeIn() Effect Menampilkan elemen yang dipilih jika tersembunyi, secara efek memudar. Sintaks : $(selector).fadeIn(speed,callback) Untuk parameter speed dan callback adalah sama dengan fungsi show(). Contoh: $(".tombol1").click(function(){ $("p").fadeIn(); }); 8. jQuery fadeOut() Effect Menyembunyikan elemen yang dipilih, secara efek memudar. Sintaks : $(selector).fadeOut(speed,callback) Untuk parameter speed dan callback adalah sama dengan fungsi show(). Contoh: Kode 16. Contoh fadeOut() <html> <head> <style> #box

{ background-color:#96BC43; border:solid 3px #333333; height:160px; margin-top:30px; } </style> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(function(){ $('.fadeOut_box').click(function(){ $('#box').fadeOut("slow"); }); $('.fadeIn_box').click(function(){ $('#box').fadeIn("slow"); }); }); </script> <body> <a href="#" class="fadeOut_box">fadeOut()</a> <a href="#" class="fadeIn_box">fadeIn()</a> <div id="box"></div> </body> </html>

9. jQuery fadeTo() Effect Mengatur tingkat kepudaran elemen terpilih menuju tingkat opacity yang ditentukan. Sintaks : $(selector).fadeTo(speed,opacity,callback) Untuk parameter speed dan callback adalah sama dengan fungsi show(). Untuk parameter opacity bisa bernilai 0 sampai 1. Contoh : $(".tombol1").click(function(){ $("p").fadeTo(1000,0.6); }); 10. jQuery animate() Effect Mengubah suatu elemen dari satu keadaan ke keadaan yang lainnya. Keadaan yang diubah ini berdasarkan CSS. Nilai properti CSS yang berubah secara berangsur-angsur, hal ini untuk menciptakan efek animasi. Nilai properti CSS yang bisa diubah adalah nilai bertipe angka, baik satuannya pixel atau persen %. Untuk tipe string tidak bisa dianimasikan. Sintaks : $(selector).animate(styles,speed,easing,callback) Parameter Deskripsi

styles Wajib. Menentukan properti CSS dan nilainya yang akan di-animasi. Properti CSS yang bisa di-animasi : backgroundPosition borderWidth borderBottomWidth

 borderLeftWidth borderRightWidth borderTopWidth borderSpacing margin marginBottom marginLeft marginRight marginTop outlineWidth padding paddingBottom paddingLeft paddingRight paddingTop height width maxHeight maxWidth minHeight maxWidth font fontSize bottom left

 right top letterSpacing wordSpacing lineHeight textIndent speed Opsional. Menentukan kecepatan elemen muncul dari hidden ke visible. Defaultnya adalah 0. Nilainya bisa berupa: milliseconds (contoh : 1500) "slow" "normal" "fast" easing Opsional. Menentukan fungsi easing yang diset pada speed animasi. Built in fungsi easing adalah: swing linear callback dijalankan. Opsional. Suatu fungsi yang akan dijalankann apabila efek show selesai

Contoh : Kode 17. Contoh animate() <html> <head>

<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $(".tombol1").click(function(){ $("#box").animate({height:"300px"}); }); $(".tombol2").click(function(){ $("#box").animate({height:"100px"}); }); }); </script> </head> <body> <div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;"> </div> <button class="tombol1">Animasi</button> <button class="tombol2">Reset</button> </body> </html> 11. jQuery stop() Effect Menghentikan animasi yang sedang berjalan. Sintaks :

$(selector).stop(stopAll,goToEnd) Parameter Deskripsi

stopAll Opsional. Bernilai boolean, menentukan apakah menghentikan semua animasi, termasuk yang ngantri untuk dijalankan pada elemen yang dipilih atau tidak.

goToEnd

Opsional. Bernilai Boolean, menentukan apakah animasi yang sedang jalan

dikompletkan atau tidak. Parameter ini hanya bisa digunakan jika parameter stopAll di-set.

Contoh : Kode 18. Contoh stop() <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#start").click(function(){ $("#box").animate({height:300},"slow"); $("#box").animate({width:300},"slow"); $("#box").animate({height:100},"slow"); $("#box").animate({width:100},"slow"); }); $("#stop").click(function(){

$("#box").stop(false,true); }); }); </script> </head> <body> <p><button id="start">Start Animasi</button><buttonid="stop">Stop Animasi</button></p> <div id="box" style="background:#ababab;height:100px;width:100px;position:relative"> </div> </body> </html> $(selector).delay() Berguna untuk men-set delay untuk semua fungsi yangmasih ngantri untuk elemen yang dipilih. Sintaks : $(selector).delay() $(selector).dequeue() Menjalankan fungsi berikutnya yang lagi ngantri untuk elemen yang dipilih. Sintaks : $(selector).dequeue() $(selector).queue() Menampilkan fungsi yang ngantri untuk elemen terpilih. Sintaks :

$(selector).queue() 12. jQuery clearQueue() Effect Menghentikan semua fungsi yang lagi ngantri dan belum dijalankan. Sintaks : $(selector).stop(queueName) Parameter queueName adalah nama antrian yang akan dihentikan. Contoh : $("#stop").click(function(){ $("#box").clearQueue(); }); H. 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. Dibawah ini adalah beberapa plugin jquery yang sering digunakan oleh beberapa web developer dalam membuat atau membangun sebuah website, diantaranya: 1. 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. Web Sitenya: http://javascript-array.com 2. 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. Web Sitenya: http://www.mopstudio.jp 3. 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. Web Sitenya: http://loopj.com 4. 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. Web Sitenya: http://www.willjessup.com 5. 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. Web Sitenya: http://malsup.com 6. 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. Web Sitenya: http://remysharp.com. Dan masih banyak yang lainnya yang bisa dikunjungi di http://www.jqueryplugins.com

BAB III PENUTUP KESIMPULAN JQuery pertama kali dirilis pada tahun 2006 oleh John Resig yang dibuat lebih ramping dari librari Prototype yang menjadi inspirasi dari librari JQuery. JQuery adalah Javascript Library atau kumpulan kode/fungsi Javascript siap pakai, sehingga mempermudah kita untuk membuat kode Javascript. Dengan kata lain JQuery menyederhanakan JavaScrip, oleh sebab itu JQuery mempunyai semboyan Write les, do more. jQuery mempunyai lisensi dibawah GNU General Public License dan MIT License, artinya jQuery merupakan aplikasi Open Source. Ukuran jQuery terbilang kecil, hanya 56 KB sehingga dengan menggunakan jQuery lebih cepat dan mudah daripada menggunakan framework yang lain atau menggunakan Javascript konvensional. Ada beberapa alasan mengapa lebih baik menggunakan JQuery daripada library lainnya, antara lain: Kompatibel dengan hampir seluruh browser, jQuery telah digunakan oleh website-website raksasa, Kompatibel dengan seluruh versi CSS (dari CSS 1 sampai CSS 3), dan sebagainya. Kelebihan jQuery antara lain Write Less, Do More, jQuery menyederhanakan penggunaan JavaScript, Mempercepat proses cooding JavaScript dalam sebuah website, dan masih banyak kelebihan lainnya. Sedangkan kekurangan jQuery antara lain Website yang menggunakan jQuery akan lebih lama di-load dibanding website yang tidak menggunakan jQuery,dari sisi server hosting pun, CPU dan RAM harus mengalokasikan resource yang mereka miliki untuk menangani request terhadap jquery. Penggunaan jQuery dalam web sangat banyak, berikut plugin jQuery yang sering digunakan dalam web, plugin Drop-doen menu,Datepicker, validasi form, teks berjalan, dan banyak plugin lainnya. Plugin-plugin ini nantinya akan membantu dalam membangun web.

DAFTAR PUSTAKA Desrizal . ____. Panduan Lengkap PHP Ajax jQuery. Jurnal.Muningmini. 2011. jQuery Tutorial Write Less Do More. Jurnal. Hasanudin . 2005 . Ajax dan jQuery dalam Web Framework. Slide share. http://zenhadi@eepis-its.edu. http://mrbawell.blogspot.com/2010/11/implementasi-jquery.html http://e-tuts.blogspot.com/2012/09/Kelebihan-dan-Kekurangan-Penggunaan-jQuery.html http://ahmadsoffa.wordpress.com/2012/06/20/jquery-kelebihan-kekurangan-dan-faktalainnya/ http://www.tipspengetahuan.com/contoh-penerapan-jquery-masonry-plugin-web-609.html http://www.tipstrikblogging.com/2010/02/membuat-sebuah-simple-featured-content.html