Sebenarnya artikel tentang perpustakaan jQuery pernah dibahas lengkap pada beberapa artikel Blogger Tune-Up, namun entah karena arsipnya sudah lama atau karena malas menjelajah Blogger Tune-Up sehingga masih ditemukan beberapa kesalahan-kesalahan dan kekurang telitian para blogger dalam menggunakan perpustakaan jQuery. Perpustakaan jQuery di sebut juga jQuery Library, jQuery Framework atau sering di sebut jQuery saja.
Apa sebenarnya jQuery?
jQuery adalah sebuah perpustakaan JavaScript lintas-browser (cross-browser JavaScript library) yang dirancang untuk menyederhanakan client-side scripting dari HTML. jQuery Versi 1.0 dirilis pada bulan Januari 2006 di BarCamp NYC oleh John Resig. Perpustakaan jQuery telah digunakan oleh lebih dari 43% dari 10.000 website yang paling sering dikunjungi, jQuery adalah pustaka JavaScript yang paling populer dan paling banyak digunakan saat ini.
jQuery dapat digunakan secara bebas karena merupakan bagian dari perangkat lunak sumber terbuka (open source software), memiliki dual-lisensi yaitu di bawah MIT License dan GNU General Public License. Sintak-sintak jQuery Versi 2 dirancang lebih mudah untuk menangani navigasi dokumen, memilih elemen DOM, membuat animasi, menangani event, dan pengembangan aplikasi Ajax. jQuery juga menyediakan kemampuan bagi pengembang untuk membuat plugin di atas perpustakaan JavaScript. Dengan disediakannya fasilitas ini, pengembang dapat menciptakan abstraksi interaksi untuk tingkat rendah (low-level interaction) dan animasi, efek canggih dan tingkat tinggi (high-level), tema-widget. Hal ini memberikan kontribusi untuk penciptaan halaman web yang hebat dan dinamis.
Microsoft dan Nokia telah mengumumkan rencananya untuk membundel jQuery di dalam platform mereka, Microsoft mengadopsinya lebih awal dalam bahasa pemrograman Visual Studio untuk digunakan dalam kerangka kerja Microsoft AJAX ASP.NET dan ASP.NET MVC Framework sementara Nokia telah mengintegrasikannya ke dalam platform pengembangan widget Web Run -Time mereka. jQuery juga telah digunakan pada MediaWiki sejak versi 1.16.
jQuery dapat digunakan secara bebas karena merupakan bagian dari perangkat lunak sumber terbuka (open source software), memiliki dual-lisensi yaitu di bawah MIT License dan GNU General Public License. Sintak-sintak jQuery Versi 2 dirancang lebih mudah untuk menangani navigasi dokumen, memilih elemen DOM, membuat animasi, menangani event, dan pengembangan aplikasi Ajax. jQuery juga menyediakan kemampuan bagi pengembang untuk membuat plugin di atas perpustakaan JavaScript. Dengan disediakannya fasilitas ini, pengembang dapat menciptakan abstraksi interaksi untuk tingkat rendah (low-level interaction) dan animasi, efek canggih dan tingkat tinggi (high-level), tema-widget. Hal ini memberikan kontribusi untuk penciptaan halaman web yang hebat dan dinamis.
Microsoft dan Nokia telah mengumumkan rencananya untuk membundel jQuery di dalam platform mereka, Microsoft mengadopsinya lebih awal dalam bahasa pemrograman Visual Studio untuk digunakan dalam kerangka kerja Microsoft AJAX ASP.NET dan ASP.NET MVC Framework sementara Nokia telah mengintegrasikannya ke dalam platform pengembangan widget Web Run -Time mereka. jQuery juga telah digunakan pada MediaWiki sejak versi 1.16.
Artikel Perpustakaan jQuery
Blogger Tune-Up pernah membahas jQuery ini dalam beberapa artikel terdahulu. Dibawah ini arsip artikel yang berhubungan dengan Perpustakaan jQuery dan lebih baik anda membaca artikel-artikel dibawah ini dengan seksama supaya lebih mudah untuk memahami jQuery.
- Mempercepat Pemuatan Perpustakaan JavaScript
- Memahami dan Mengatasi Konflik Script jQuery
- Manajemen Script jQuery
- Percepat Script jQuery
Pemasangan Perpustakaan jQuery pada Blogger
Dibawah ini akan dijelaskan kembali beberapa cara untuk melengkapi Blogger dengan perpustakaan jQuery dan silahkan gunakan salah satu cara yang dianggap paling mudah untuk diterapkan.
Cara I - Memanfaatkan Perpustakaan jQuery pada CDN
Karena kehebatan jQuery yang mampu mengubah suatu website menjadi lebih dinamis dan canggih ini membuat beberapa perusahaan terkenal rela menjadi CDN Perpustakaan jQuery. CDN adalah kepanjangan dari content delivery network atau content distribution network yaitu sebuah sistem komputer yang memiliki salinan data yang sama dengan aslinya. Data salinan ini ditempatkan di berbagai titik tempat pada suatu jaringan untuk memaksimalkan bandwidth dalam mengakses keseluruhan data jaringan klien. Dibawah ini beberapa perustakaan jQuery pada CDN yang dapat kita gunakan untuk kita gunakan pada blog kita:
CDN - Google Ajax API
Perpustakaan jQuery dibawah ini terdapat pada server Google dan sangat direkomendasikan menggunakan CDN ini.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js' type='text/javascript'/>
CDN - Microsoft
Perpustakaan jQuery dibawah ini terdapat pada server Microsoft, CDN ini dapat digunakan sebagai alternatif.
<script src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.2.min.js' type='text/javascript'/>
CDN - jQuery
Perpustakaan jQuery dibawah ini terdapat pada server jQuery itu sendiri, CDN ini sangat tidak direkomendasikan.
<script src='http://code.jquery.com/jquery-1.5.2.min.js.' type='text/javascript'/>
Cara II - Memanfaatkan Google API Load
Selain menggunakan Cara I, dibawah ini merupakan cara lain yang merupakan teknik cara cepat untuk memanggil perpustakaan jQuery. Cara ini dibagi menjadi 2 bagian yaitu tanpa menggunakan API Key dan yang menggunakan API key.
(1) Tanpa API Key
Cara dibawah ini tanpa menggunakan API Key:
<script src='https://www.google.com/jsapi' type='text/javascript'/>
<script language='Javascript' type='text/javascript'>//<![CDATA[
google.load("jquery", "1.5.2");
//]]></script>
(2) Menggunakan API Key
Cara dibawah ini menggunakan API Key, dan cara ini direkomendasikan untuk digunakan. Karena API Key merukapan identitas unik dari suatu website sehingga Google API akan dengan mudah untuk mengidentifikasi perpustakaan apa saja yang digunakan dan akan memilihkan cara tercepat untuk mengidentifikasi perpustakaan-perpustakaan yang digunakan. Untuk mendapatkan API Key blog anda silahkan klik link ini. Setelah mendapatkan API Key, ganti XXXX pada script dibawah ini.
<script src='https://www.google.com/jsapi?key=XXXX' type='text/javascript'/>
<script language='Javascript' type='text/javascript'>//<![CDATA[
google.load("jquery", "1.5.2");
//]]></script>
Cara III - Memanfaatkan Google API AutoLoad
Cara III ini diklaim sebagai cara yang paling cepat untuk memanggil perpustakaan jQuery. Cara III ini dibagi lagi menjadi 3 teknik, silahkan pilih salah satunya saja.
(1) Tanpa API Key
Cara dibawah ini tanpa menggunakan API Key namun lebih cepat dibanding cara II (1)
<script src="http://www.google.com/jsapi?autoload={"modules" : [{"name" : "jquery","version" : "1.5.2"}]}" type="text/javascript"/>
(2) Menggunakan API Key
Cara dibawah ini mengguankan API Key dan pemanggilan perpustakaan jQuery lebih cepat dari cara diatas. Klik link ini untuk mendapatkan API Key blog anda dan ubah XXXX sesuai dengan API Key yang anda dapatkan sesuai dengan blog yang anda daftarkan.
<script src="http://www.google.com/jsapi?autoload={"modules" : [{"name" : "jquery","version" : "1.5.2"}]}&key=XXXX" type="text/javascript"/>
(3) Menggunakan URL Encoder
Cara yang terakhir ini adalah cara yang paling rumit namun merupakan cara yang paling cepat untuk memanggil perpustakaan jQuery dibanding semua cara diatas.
Kode dibawah ini adalah kode asli yang digunakan untuk memanggil perpustakaan jQuery (perhatikan Cara III - 2 diatas)
Kode dibawah ini adalah kode asli yang digunakan untuk memanggil perpustakaan jQuery (perhatikan Cara III - 2 diatas)
{"modules" : [{"name" : "jquery","version" : "1.5.2"}]}
Kemudian kode tersebut di Encode untuk memudahkan dan mempercepat browser dalam membaca dan memanggil perpustakaan jQuery. Gunakan URL DEncoder buatan Blogger Tune-Up untuk meng-encode kode diatas, sehingga akan dihasilkan kode hasil encode seperti dibawah ini:
%7B%22modules%22%20%3A%20%5B%7B%22name%22%20%3A%20%22jquery%22%2C%22version%22%20%3A%20%221.5.2%22%7D%5D%7D
Setelah dilakukan encode pada kode diatas, gabungkan kode sehingga menjadi seperti dibawah ini:
<script src="https://www.google.com/jsapi?autoload=%7B%22modules%22%20%3A%20%5B%7B%22name%22%20%3A%20%22jquery%22%2C%22version%22%20%3A%20%221.5.2%22%7D%5D%7D&key=XXXX"/>
Klik link ini untuk mendapatkan API Key yang sesuai dengan blog anda dan ubah XXXX pada kode diatas.
Ketentuan Memasang Perpustakaan jQuery
Dibawah ini beberapa ketentuan yang harus diperhatikan oleh para blogger agar kesalahan-kesalahan menggunakan jQuery tidak menjadi beban blog anda.
- Pilihlah salah satu cara pemasangan perpustakaan jQuery pada blogger
- Sebaiknya perpustakaan jQuery diletakan pada template blog diantara tag <head> dan tag </body>
- Setiap blog atau web sebaiknya hanya memasang satu perpustakaan jQuery, jadi jika kita pernah memasang perpustakan jQuery maka tidak perlu lagi memasang perpustakaan jQuery lagi walau dalam suatu tips trik di sertakan perpustakaan jQuery, sebaiknya anda membuang perpustakaan jQuery tersebut tanpa mengikut sertakannya jika anda pernah memasang sebelumnya.
- Hindarilah memasang perpustakaan jQuery berulang-ulang karena hal tersebut akan membuat ukuran blog menjadi lebih besar dan load halaman menjadi lebih lambat.
