JQuery untuk Orang Bodoh-Seri 1

Sekapur sirih……..

Sejak lama saya berkeinginan menulis tutorial berseri, maka dari itu saya sekarang  merealisasikannya. Tutorial ini saya berikan judul ”JQuery untuk Orang Bodoh”. Tutorial ini sebenarnya merupakan rangkuman dari tutorial video yang berjudul “JQuery for Absolutely Beginners” yang dirilis Theme Forest. Video tutorial tersebut berbayar dan saya tidak akan memberikan videonya ke Anda, karena saya harus menghormati karya orang lain. Maka dari itu, alangkah baiknya saya mengkonversinya dalam bentuk tulisan. Rencananya saya akan membagi artikel ini dalam 16 seri.

Apa itu JQuery?

jQuery adalah javascript library, jQuery mempunyai semboyan “write less, do more”. jQuery dirancang untuk memperingkas kode-kode javascript. JQuery adalah javascript library yang cepat dan ringan untuk menangani dokumen HTML, menangani event, membuat animasi dan interakasi ajax. JQuery dirancang untuk mengubah cara anda menulis javascript. Sebelum anda memulai mempelajari jQuery, anda harus mempunyai pengetahuan dasar mengenai HTML, CSS dan Javascript. Library jQuery mempunyai kemampuan:

  • Kemudahan mengakses elemen-elemen HTML
  • Memanipulasi elemen HTML
  • Memanipulasi CSS
  • Penanganan event HTML
  • Efek-efek javascript dan animasi
  • Modifikasi HTML DOM
  • AJAX
  • Menyederhanakan kode javascript lainnya

Kemudian untuk memulai mempelajari jQuery, anda harus mendownload jquery.js dari situs http://www.jquery.com. Pada website tersebut abda pilih checkbox PRODUCTION, karena kita hanya akan menggunakan hasil library yang sudah dibuat oleh beberapa pengembang.

Menggunakan JQuery

 

Saya sarankan anda menggunkan IDE (tool untuk programing)misalkan, DreamWeaver,  Aptana, atau mungkin Notepad++ untuk memulai pemrograman. Setiap anda menulis kode javascript dengan menggunakan jquery, jangan lupa untuk memasukan file jquery.js ke dalam kode javascript anda.

<script type="text/javascript" src="jquery.js"></script>

Script diatas diletakkan di dalam tag HTML “<head></head>” dan sesuaikan dengan path dimana anda letakkan file jquery.js. misalkan anda meletakkannya di

  • root
    • js
      • jquery.js

Maka anda menuliskannya seperti ini:  “js/jquery.js” (tanpa tanda petik).

Untuk menuliskan script jquery, harus ada di dalam tag berikut ini:

<script type="text/javascript">
<!—tulis  script disini -->
</script>

Tutorial ini, memfokuskan pada contoh aplikatif. Berikut ini contoh untuk seri pertama.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".tombol1").click(function(){
$("p").hide(1000);
});
$(".tombol2").click(function(){
$("p").show(1000);
});
});
</script>
</head>
<body>
<p>Hello World!</p>
<button class="tombol1">Sembunyikan</button>
<button class="tombol2">Tampilkan</button>
</body>
</html>

Ketika script diatas dijalankan di browser, anda akan melihat tulisan Hello World, namun jika anda mengklik tombol Sembunyikan maka tulisan tersebut akan tersembunyi dan juga sebaliknya jika anda mengklik tombol Tampilkan maka akan muncul kembali.

Keterangan Script

Karena hampir segala sesuatu yang kita lakukan bila menggunakan jQuery membaca atau memanipulasi document object model (DOM), kita perlu memastikan bahwa kita mulai menambahkan event segera setelah DOM siap. Untuk melakukan hal ini, kita menambahkan kode ready event untuk dokumen.

$(document).ready(function(){
<!-- some script  -->
});

Sintaks jquery biasanya dibuat untuk memilih elemen-elemen HTML dan melakukan aksi terhadap
elemen yang dipilih. Berikut ini cara penulisannya secara umum

$(selector).action()
  • Tanda dollar, untuk mendefinisikan jQuery
  • (selector), untuk menunjukkan elemen yang dipilih atau dituju
  • action(), adalah jQuery action yang akan dilakukan terhadap elemen yang dipilih.

Dalam kasus contoh diatas

$(".tombol1").click()

, script ini memanggil selector tombol1 (didefinisikan sebagai suatu class pada tag HTML) yang ada di

<button class="tombol1">

. Saat selector tersebut diklik (karena action-nya berupa click) maka akan mengeksekusi fungsi di dalam fungsi

$(document).ready(function(){……..}

yaitu fungsi

$("p").hide(1000)

, dimana fungsi ini akan menyembunyikan segala hal yang ada di tag “<p></p>” , yaitu

<p>Hello World!</p>

Selasai sudah seri pertama dari tutorial JQuery untuk Orang Bodoh. Terima kasih

About irul

Kadang bisa serius amat. Tapi kebanyakan sih sukanya bercanda.

Posted on 01/04/2012, in programming, Seri JQuery and tagged . Bookmark the permalink. 2 Komentar.

  1. aseeeek… ane orang bodo……..

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: