Malam minggu ini saya mencoba sebuah framework di lingkungan client scripting yaitu jQuery. Tadinya saya menebak jQuery adalah framework atau tool di lingkungan Java karena ada embel-embel huruf J di depannya (walaupun bukan huruf J kapital), seperti JUnit, JPedal, JRoller, dan sebagainya. Ternyata jQuery adalah framework yang dapat digunakan di JavaScript. Dilihat dari fungsi teknisnya, jQuery mirip dengan ASP.NET AJAX Client Library yang dapat digunakan bukan hanya untuk membangun aplikasi dengan ASP.NET, yaitu memperluas fungsionalitas JavaScript sehingga developer dapat membangun code JavaScript dengan relatif lebih cepat karena code JavaScript yang perlu dituliskan lebih sedikit dan lebih memfokuskan pada fungsi apa yang ingin dilakukan oleh code JavaScript tersebut.
jQuery didistribusikan secara gratis dengan lisensi MIT dan GPL dan dapat di download di http://www.jquery.com
Sebenarnya jQuery hanyalah sebuah file JavaScript yang harus disertakan dalam sebuah halaman HTML (atau XHTML) melalui tag script seperti berikut :
<script language="JavaScript" type="text/javascript" src="path/to/jquery.js"></script>
Setelah itu kemudian saya bisa menggunakan semua kekuatan dari jQuery.
Misalkan saya ingin membuat alert yang bertuliskan "Hello jQuery" menggunakan HTML button:
Code HTML:
<input type="button" id="btnHello" value="Hello jQuery" />
Code jQuery:
$(function() {
$("input#btnHello").click( function() { alert('Hello jQuery'); });
});
Penggunaan tanda $ di sini sangat mengingatkan saya dengan ASP.NET AJAX Client Library, walaupun dengan jQuery saya bisa mengganti $ dengan token lain, misalnya dengan $jquery.
Contoh yang lebih rumit: Saya ingin membuat sebuah efek tulisan fade in dan fade out secara bergantian.
Misalnya untuk code HTML berikut ini:
<h5>YOU'LL NEVER WALK ALONE</h5>
<p id="verse">
When you walk through a storm,<br/>
Hold your head up high,<br/>
And don't be afraid of the dark.<br/>
At the end of a storm,<br/>
There's a golden sky,<br/>
And the sweet silver song of a lark.<br/>
Walk on through the wind, Walk on through the rain,<br/>
Though your dreams be tossed and blown..
</p>
<a href="#" id="linkChorus">Hide Chorus</a>
<p id="chorus">
Walk on, walk on, with hope in your heart,<br/>
And you'll never walk alone.......<br/>
You'll never walk alone. <br/><br/>
Walk on, walk on, with hope in your heart,<br/>
And you'll never walk alone.......<br/>
You'll never walk alone.
</p>
Code jQuery:
$(function() {
$("a#linkChorus").click( function() {
if($("a#linkChorus").get(0).innerText == "Hide Chorus")
{
$("#chorus").hide("slow");
$("a#linkChorus")[0].innerText = "Show Chorus";
}
else if($("a#linkChorus")[0].innerText == "Show Chorus")
{
$("#chorus").show("slow");
$("a#linkChorus")[0].innerText = "Hide Chorus";
}
} );
});
Di sinilah kelebihan jQuery. Saya tidak perlu mendeteksi browser apa yang digunakan, karena framework jQuery yang nantinya akan berusaha mengenali browser dan menyesuaikan code JavaScript yang digunakan sesuai dengan fungsi yang saya inginkan. Code yang saya tulispun jauh lebih singkat daripada saya harus menuliskan code JavaScript secara keseluruhan.
Dan yang terpenting: jQuery menyediakan akses ke DOM yang lebih baik yaitu memungkinkan developer memfokuskan diri pada fungsionalitas yang ingin dibangun, persis seperti kalimat yang dituliskan di website jQuery: jQuery is designed to change the way that you write JavaScript.
jQuery: The Write Less, Do More, JavaScript Library