Membedah jquery dan cara menghubungkan file HTML dengan JQuery secara online ( CDN) dan offline.

 

a.      Pengertian JQUERY

   jQuery diluncurkan pada Januari 2006 oleh John Resig. jQuery adalah library Javascript yang paling populer saat ini. Karena kecanggihan nya, jQuery dipakai oleh perusahaan besar seperti Google. Dell, CBS, digg, Netflix, Bank of America, Mozilla, Drupal, dsb. jQuery adalah library Javascript yang gratis dan open source. Oleh karena nya kita bisa menggunakan jQuery dengan bebas untuk keperluan pengembangan website kita. Tanpa library seperti jQuery, menerapkan Javascript mungkin akan lebih sulit, terutama untuk pemula yang baru belajar Javascript. Plugin tambahan seperti JQuery UI (user interface) semakin memudahkan kita mengembangkan website yang cantik dan interaktif. Selain itu tersedia plugin-plugin lain yang makin memperkaya kemampuan jQuery.

Pengertian jQuery sendiri adalah sebuah library Javascript yang sangat ringkas dan sederhana untuk memanipulasi komponen di dokumen HTML, menangani event, animasi, efek dan memproses interaksi ajax. jQuery dirancang sedemikian rupa supaya membuat program menggunakan Javascript menjadi relatif sangat mudah. Sesuai slogan nya, write less, do more. Menulis kode lebih sedikit, tetapi melakukan pekerjaan lebih banyak. jQuery ukuran nya cukup kecil, sehingga tidak memperlambat proses loading halaman web yang kita buat. jQuery juga kompatibel dengan CSS3 dan yang tak kalah penting adalah jQuery bisa berjalan di semua browser – cross browser.

               Beberapa Fitur yang ada di JQuery :

1. Dalam Pemakaian menggunakan seleksi element DOM, sehingga website lebih dinamis  dan interaktif.
2. JQuery bisa memanipulasi Class pada CSS dan Support CSS 3
3. Event
4. AJAX
5. Efek-efek dan animasi
6. Ekstensi dan Plug-ins
7. Kompatibilitas dengan hampir semua Browser modern
8. Keperluan lain seperti : User Agent, Feature detection dan lainnya 

a.      Mengapa Menggunakan jQuery?

         Berikut beberapa alasan yang membuktikan jQuery sangat powerful dan layak dijadikan pilihan, yaitu:

• jQuery telah banyak digunakan oleh website-website terkemuka di dunia.
• Kompatibel/cocok dengan semua browser yang populer, seperti Mozilla, Internet Explorer, Safari, Chrome, dan Opera.
• Kompatibel dengan semua versi CSS (CSS 1 sampai dengan CSS 3).
• Didukung oleh komunitas yang besar dan aktif, seperti forum, milis, blog, social engineering (twitter dan facebook), website, dan tutorial.
• Ketersediaan plugin yang sangat banyak jumlahnya. Plugin merupakan kemampuan tambahan yang bisa disertakan pada jQuery.
• Filenya hanya satu dan ukurannya pun kecil, hanya sekitar 20 KB, sehingga cepat aksesnya.
• Open source (gratis) dengan lisensi dari GNU General Public License dan MIT License.
• jQuery lebih banyak digunakan oleh para developer web dibandingkan Javascript Library lainnya.
• Dalam tren google pun, jQuery paling mendominasi dibandingkan Javascript Library lainnya. Biasanya tren google berhubungan dengan tren skill pekerjaan, khususnya di bidang IT.

a.       Kemampuan yang Dimiliki jQuery

 Berikut ini akan dijabarkan lagi mengenai kemampuan yang dimiliki 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, 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 event-handling. 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, 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. 

a.      Cara menggunakan jQuery

Untuk dapat menggunakan jQuery serta cara belajar jQuery ada 2 cara yang dapat dilakukan yaitu secara online dan offline.

 1.  Menggunakan jQuery secara offline

           Untuk menggunakan jQuery secara offline ini maka caranya adalah dengan mendownload file
           jQuery lalu Anda dapat menghubungkan file html atau php dengan file jQuery, kemudian
           mengaksesnya melalui tag <script>.

           Silahkan buka situs resmi jQuery di jquery.com. Pada bagian kanan tengah, terdapat tombol 

           “Download jQuery”. Seperti gambar dibawah ini :

    
Setelah didownload, dimpan jquery dalam sebuah file, contoh seperti gambar berikut :

 

 Untuk menghubungkan file jquery dengan HTML, cukup menambah script seperti berikut ini :

2.   Menggunakan jQuery secara online / CDN (Content Delivery Network)

Dengan menggunakan jQuery secara online maka Anda menggunakan jQuery dengan cara menghubungkan file HTML atau PHP dengan link online langsung dari jQuery. Untuk bisa mengakses file jQuery yang ditempatkan di CDN (Content Delivery Network). Secara sederhana, CDN adalah sejenis harddisk global yang bisa diakses oleh siapa saja. Terdapat banyak pilihan CDN, kali ini saya akan menggunakan Google CDN, dengan demikian kode HTMLnya menjadi seperti berikut: 

a.      Contoh sederhana menggunakan jQuery

Dengan hasil sebagai berikut :