JQuery adalah framework javascript yang saat ini paling populer di kalangan webdeveloper, fungsinya adalah mempermudah dan mempercepaat proses pembangunan aplikasi web dengan menggunakan code javascript.
Dengan jQuery, kita tidak perlu lagi menulis code javascript dengan panjang-panjang untuk membuat sebuah proses yang sederhana. Selain itu dengan jquery kita bisa menggunakan banyak plugins yang tersedia guna mempercantik halaman web kita.
Timbul pertanyaan, apakah perlu mempelajari javascript dahulu sebelum mempelajari jQuery ?. Jawabannya adalah lebih baik iya, karena bagaimanapun juga jQuery dibuat dengan javascript, memahami javascript akan mempermudah kita untuk mempelajari jQuery. Adapun hal-hal yang perlu kita pahami terlebih dahulu dari javascript sebelum memulai jQuery adalah tentang tipe data, operator, fungsi, prosedur dan modularisasi. Karena semua hal yang berhubungan dengan proses belajar jQuery akan bersinggungan dengan hal-hal tersebut.
Berikut ini adalah keunggulan-keunggulan yang di miliki oleh jQuery
- Akses cepat karena hanya terdiri dari 1 file dan ukurannya sangat kecil.
- Kompatibel dengan berbagai browser propuler di dunia.
- Dokumentasi lengkap dan banyak memiliki komunitas yang aktif.
- Banyak plugin tersedia secara gratis.
- jQuery berlisensi GNU (General Public License) / free / gratis, kita dapat menggunakannya tanpa di kenakan biaya apapun.
- Memiliki API (Application Programming Interface).
- Mendukung Ajax (Asynchronous Javasctip and XML).
Sebenarnya ada beberapa lagi keunggulan jQuery lainnya, tapi saya hanya memberikan garis besarnya saja, sebagai modal awal anda untuk mengetahui tentang jQuery itu.
Baiklah, mari kita memulai mencoba seperti apa itu jQuery.
Pertama-tama anda harus mendownload terlebih dahulu file jQuery yang tersedia di situsnya www.jquery.com atau kalian bisa menggunakan CDN (Content Delivery Network) yang telah di sediakan secara public tanpa harus menyimpan file jquery tersebut di hardisk anda.
Pertama-tama anda harus mendownload terlebih dahulu file jQuery yang tersedia di situsnya www.jquery.com atau kalian bisa menggunakan CDN (Content Delivery Network) yang telah di sediakan secara public tanpa harus menyimpan file jquery tersebut di hardisk anda.
http://code.google.com/apis/libraries/devguide.html#jquery http://www.asp.net/ajaxlibrary/cdn.ashx
jQuery menyediakan 2 versi file yang bisa anda gunakan, yaitu versiproduction yang berukuran kecil (31kb), dan versidevelopment yang berukuran cukup besar (229 kb). Perbedaannya terletak dari bentuk code, yang pertama sudah mengecil karena sudah compress dan code sangat sulit di baca. Sedangkan yang kedua uncompressed, code masih murni, anda bisa melihat bagaimana code jQuery itu bekerja.
Memulai jQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery demo</title>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("a").click(function(event){
alert("Welcome to jQuery, ini adalah fungsi alert yang dijalankan ketika anda mengklik link jquery diatas 
");
});
});
</script>
</body>
</html>
Mari kita bahas satu persatu code diatas.
Baris 8 : kita membuat sebuah link menggunakan tag html biasa
Baris 9 : kita memanggil library jQuery yang terdapat di CDN google. Kalau anda tidak memiliki akses internet saat belajar, anda bisa download terlebih dahulu jquery di situsnya, lalu mengganti seperti berikut :
<script src="jquery.min.js"></script>
Baris 11 : Membuat sebuah function, dimana function tersebut baru bisa di gunakan setelah document yang anda buka telahsiap.
Baris 12-14 :$(“a”) mengartikan bahwa semua tag html <a> jika di .click() akan menjalankan semua perintah yang ada di dalam function setelahclick().
Kalau anda sudah merasa pusing dan ingin muntah-muntah 
Tidak apa-apa, itu wajar karena anda belum di beritahu tentang apa itu selector, event dan sebagainya.
Tidak apa-apa, itu wajar karena anda belum di beritahu tentang apa itu selector, event dan sebagainya.
Semoga bermanfaat..
0 comments:
Post a Comment