Tutorial Jquery : Mencar Ilmu Dasar Jquery Untuk Orang Awam
JQuery adalah suatu framework (library) Javascript yang menggambarkan 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 mempunyai kehandalan dan keunggulan yang cukup banyak. Hal tersebut banyak menimbulkan para developer web menggunakannya dalam pembuatan sebuah website. JQuery mempunyai slogan “Write less, do more” yang kurang lebih maksudnya yaitu kesederhanaan dalam penulisan code, tapi dengan hasil yang lebih banyak. Degan istilah kata lain sanggup disebutkan, kecil-kecil cabai rawit.
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 sanggup diperoleh secara gratis di internet.
Apa yang sanggup Anda Lakukan dengan JQuery?
1. Mengakses bab halaman tertentu dengan mudah.
Tanpa adanya library Javascript khusus, untuk mengakses suatu bab tertentu dari halaman, harus mengikuti aturan Document Object Model (DOM) dan pengaksesan harus secara spesifik menyesuaikan dengan struktur HTML. Dengan kata lain, pengaksesan bab tertentu dari halaman sangat tergantung pada struktur dari HTML. JQuery memperlihatkan cara yang gampang (bahkan sangat mudah) dalam mengakses bab tertentu dari halaman. Pengaksesan juga tidak terlalu bergantung pada struktur HTML.
2. Mengubah tampilan bab halaman tertentu.
CSS (Cascading Style Sheet) memperlihatkan 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 jikalau kita harus mendesign halaman web dengan beberapa CSS sekaligus. Sekali lagi JQuery memperlihatkan 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 jikalau kita akan mengubah sebagian isi dari halaman. Mengubah disini sanggup berarti mengganti teks, menambahkan teks atau gambar, mengurutkan suatu daftar (list), menghapus baris tabel dan sebagainya. Dengan JQuery, hal tersebut sanggup 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 sanggup berinteraksi dengan website dan sanggup mengatur tampilannya sendiri. Interaktivitas sangat bergantung bagaimana pemrograman yang digunakan dalam menangani event-handling. Javascript sendiri mempunyai beberapa event-handling menyerupai onclick untuk menangani event ketika terjadi click. Namun demikian, event handling pada Javascript terbatas pada object-object tertentu, dan jenisnya pun terbatas. JQuery melengkapi semuanya dengan komplemen 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 sanggup dibentuk dalam banyak sekali gaya, ada yang memakai Flash, gambar bergerak (GIF), video, dan sebagainya. Masing-masing tentu mempunyai kelebihan dan kekurangan masing-masing. JQuery sendiri memperlihatkan konsep animasi (walaupun masih sederhana) yang cukup apik namun ramah bandwidth alias ringan. Salah satu animasi yang sanggup dibentuk dengan JQuery yaitu fading jikalau terdapat suatu bab dari halaman ditambahkan atau dihilangkan.
6. Mengambil isu dari server tanpa me-refresh seluruh halaman.
Mengambil isu dari server tanpa refresh halaman merupakan salah satu konsep dasar dari yang namanya AJAX (Asynchronous Javascript and XML). Pada penerapannya, cukup ribet jikalau harus membangun website dengan konsep AJAX, ketika ini banyak library khusus yang berusaha mempermudahnya. JQuery merupakan salah satunya.
7. Menyederhanakan penulisan Javascript biasa.
Semboyan JQuery yaitu “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 memakai JQuery.
Download JQuery
Situs resmi JQuery sanggup diakses di http://jquery.com/. Dan library JQuery sanggup didownload di alamat http://docs.jquery.com/Downloading_jQuery. Tersedia library jQuery dalam 2 (dua) jenis yaitu minifieddan uncompressed. Minified jikalau kita ingin menggunakannya saja dalam website kita (ukuran 18 KB), sedangkan uncompressed jikalau kita berkeinginan turut serta berbagi code jQuery.
Contoh Sederhana JQuery
Contoh sederhana penggunaan JQuery
Penjelasan Program
1. Pertama, kita harus menyertakan (include) file library JQuery. Pastikan letak dari file library sudah benar.
2. Perintah-perintah JQuery.
2. Perintah-perintah JQuery.
- Baris 8 merupakan perintah inisialisasi dimana ketika halaman (dokumen) siap ditampilkan maka jalankan juga perintah yang ada di dalamnya. Hal ini menyerupai dengan event onLoad yang biasanya diletakkan di tag <body>.
- Baris 9-11 maksudnya yaitu mendefinisikan action yang terjadi ketika link dengan class=show ( $(‘a.show’) ) diklik (lihat link baris ke-22). Kaprikornus jikalau link di-klik maka paragraf dengan nama class=jquery ( $(‘p.jquery’) ) akan tampil dengan durasi tampil “slow”. Paragraf yang akan ditampilkan yaitu paragraf baris ke-24 hingga 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.
Sekian Tutorial Dasar Jquery nya, saya harap sanggup mempunyai kegunaan bagi setiap yang membacanya.
Demikian yang dapat kami share kepada sobat source code aplikasi pada kesempatan ini, semoga dapat bermanfaat dan bisa menjadi referensi pemrograman bagi anda. Jangan lupa like Fan Page kami, dan SUBSCRIBE Channel Youtube kami untuk dapatkan update source code aplikasi terbaru.
