Tuesday, May 11, 2010

Mari Mengenal JQuery

Penggunaan JQuery sebagai javascript library akan secara signifikan mengurangi baris kode yang kita butuhkan untuk menghasilkan sebuah fungsi javascript dibandingkan dengan jika kita menggunakan javascript biasa pada halaman web yang kita buat. Untuk yang belum mengenal apa itu JQuery, JQuery merupakan sekumpulan javascript library yang dapat menyederhanakan cara penulisan kode javascript untuk menghasilkan sebuah fungsi yang dapat kita gunakan dalam halaman web yang kita buat. Dari pada pusing bahas teori, mari kita langsung saja saksikan kehebatan JQuery in action... :D Sebelum mulai, kita tentunya harus mengunduh JQuery terlebih dahulu, JQuery yang terbaru dapat diunduh dari situs berikut: http://docs.jquery.com/Downloading_jQuery Sebagai permulaan, mari kita coba membuat sebuah script javascript yang dapat mengubah isi html secara langsung jika sebuah tombol ditekan. contohnya adalah seperti di bawah ini:

Hello World

Berikut ini script yang dapat digunakan untuk menghasilan fungsi tombol seperti gambar di atas jika menggunakan javascript biasa:
<html>
<head>
<title>JQuery Dasar</title>
<script type="text/javascript">
function clickMe() {
var text = document.getElementById("hello_text");
text.firstChild.nodeValue="Halo Dunia..."
}
</script>
</head>
<body>
<p id="hello_text">Hello World</p>
<button onclick="clickMe()">Click Me!</button>
</body>
</html>
cukup mudah bukan? Sekarang, mari kita lihat bagaimana script di atas jika dikodekan "secara" JQuery.
<html>
<head>
<title>JQuery Dasar</title>
<script type="text/javascript" src="lib/jquery-1.4.2.min.js"></script>
</head>
<body>
<p id="hello_text">Hello World</p>
<button id="hello_button" type="button">Click Me!</button>
<script type="text/javascript">
$("#hello_button").click(function() {
  $("#hello_text").html("Halo Dunia...");
});
</script>
</body>
</html>
Penggunaan JQuery sederhana pada contoh di atas memperlihatkan bagaimana JQuery dapat menyederhanakan penulisan kode pada javascript. Selain itu kode yang dituliskan juga cukup dimengerti. Pada kode JQuery di atas, kode $("#hello_button") equivalent dengan document.getElementById("hello_button"), sedangkan $("#hello_text").html("Halo Dunia...") equivalen dengan document.getElementById("hello_text").firstChild.nodeValue="Halo Dunia...". Cukup sederhana bukan? Tanda "#" digunakan sebagai selector elemen dengan id tertentu, dalam contoh di atas id elemen yang dimaksud adalah "hello_button" dan "hello_text". Beberapa selector yang sering digunakan antara lain:
  • ID selector: $("#id"). Contohnya seperti pada contoh di atas.
  • All selector: $("*"). Selector ini akan mengambil semua elemen pada halaman html.
  • Attribute equal selector: $("[attribute:value]"). Selector ini akan mengambil semua elemen yang memiliki attribut dengan value yang dispesifikasikan.Misalkan kita mempunyai beberapa input dengan nama yang sama.
<input type="text" name="hello_text" value="Hello"/>
<input type="text" name="hello_text" value="World"/>
<input type="text" name="hello_text" value="Hello"/>
<input type="text" name="hello_text" value="World"/>
<input type="text" name="hello_text" value="Hello"/>
<input type="text" name="hello_text" value="World"/>
Maka dengan menuliskan $("[name:hello_text]"), kita akan mendapatkan sebuah array dari elemen-elemen yang memiliki nilai atribut nama "hello_text".
Masih banyak lagi selector JQuery yang lain yang dapat digunakan untuk mempermudah penulisan javascript pada halaman html yang akan kita bangun. Untuk penjelasan lebih lengkapnya tentang selector JQuery dapat dilihat pada http://api.jquery.com/category/selectors/. Untuk memanipulasi elemen segera ketika halaman HTML selesai di-load, kita dapat meggunakan kode seperti berikut:
$(document).ready(function() {
});
Perhatikan script berikut ini:
<html>
<head>
<title>JQuery Dasar</title>
<script type="text/javascript" src="lib/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".hello1").css("color", "red");
$(".hello2").css("color", "blue");
});
</script>
</head>
<body>
<p class="hello1">Hello World</p>
<p class="hello2">Halo Dunia</p>
<p class="hello1">This will be red.</p>
<p class="hello2">Ini menjadi biru</p>
</script>
</body>
</html>
Script di atas akan menghasilkan tampilan seperti berikut:

Hello World

Halo Dunia

This will be red.

Ini menjadi biru

Cukup menarik bukan?! Tulisan ini hanya sebagian kecil dari bagaimana cara penggunaan JQuery. Nanti pada tulisan saya berikutnya akan saya coba bahas lebih jauh lagi bagaimana memanfaatkan JQuery sehingga dapat meningkatkan kinerja kita dalam membangun halaman web yang dinamis. Sebagai bahan referensi, silahkan kunjungi situs JQuery di http://docs.jquery.com/

No comments:

Post a Comment