• jquery, Tutorial, _other

    Posted on December 10th, 2009

    Written by Cheyuz

    12 Comments

    Related Posts

    Tags

    , ,

    Other Links



    Mengenal JQuery – Tutorial JQuery Dasar

    Level: BABY

    OK, karena postinganku kemaren yang bertema Web Developing yang berjudul “Menggunakan AJAX yang Baik” ternyata mendapat respon yang baik juga dari temen2ku, khususnya temen2ku yang minat untuk belajar Web Developing… maka nanti Cheyuz bakal ngebahas tentang teknik AJAX itu sendiri, dan kita akan memakai Framework Jquery untuk Javascriptnya…

    Tetapi, alangkah baiknya kita memulai untuk mengenal JQuery dasar dulu, soalnya lebih baik kita tau dasarnya dulu, sebelum lanjut ke AJAX dengan Jquery…

    Sebelumnya ada yang tahu Jquery itu apa?

    Yup, Jquery adalah sebuah Library Javascript yang cepat dan ringkas yang mana dapat menyederhakan document traversing, event handling, animating, dan Ajax interactions untuk pengembangan web secara cepat.

    Nah, kali ini, Cheyuz bakal ngebahas tentang Jquery dari sangat sangat sangat dasar hingga mahir….. :)

    Untuk Memulai JQuery

    Supaya temen2 bisa menggunakan Jquery, silakan download Jquery (saat ini versi terakhir adalah v.1.3.2).

    Download JQuery 1.3.2

    Lalu simpan file jquery-1.3.2.min.js yang udah didownload ke folder javascript web punya temen2.. misalnya di folder javascripts, maka nanti temen2 tinggal tambahkan script ini di dalam tag header:

    <head>
...
<script src="javascripts/jquery-1.3.2.min.js"></script>
...
</head>

    Contoh penggunaan JQuery

    1
2
3
4
5

    <script>
$().ready(function(){
    $("#gambarku").hide();
});
</script>

    Apa arti script di atas? :)
    Mungkin buat temen2 yang belum tau JQuery bakal terasa asing dan berkata “WEW, BAHASA ANEH APA ITU?”… tapi setidaknya pasti tau maksud script di atas. Ya, script di atas memerintahkan sebuah fungsi hide() untuk menyembunyikan sebuah elemen yang mempunyai ID = “gambar”..

    Nah, itulah JQuery..
    Menurutku, enaknya memakai Jquery adalah perintah Javascript untuk berbagai elemen HTML bisa dideklarasikan terlebih dahulu, ID atau class apa yang ingin ‘dimainkan’… jadi nantinya script ga kayak gini,,,

    1
2

    <button class="tombol" onclick="hide('gambarku')">Sembunyikan Gambar</button>
<img id="gambarku" src="foto.jpg" />

    Klo scriptnya seperti itu, gimana kalo si buttonnya ada 1000? tentu capek kan temen2 ngasi atribut onclick=”hide()” di setiap button? PASTI! Selain itu, klo ga menggunakan Jquery, kita harus membuat fungsi hide() terlebih dahulu, untuk menyembunyikan element…

    Nah, dengan menggunakan Jquery, temen2 cuman bikin suatu deklarasi yang mana “memerintahkan” bahwa semua elemen yang mempunyai class “tombol” jika diklik akan memanggil fungsi hide(). Selain itu, temen2 ga usah bikin fungsi hide() lagi, karena semua fungsi untuk manipulasi elemen html sudah ada dalam JQuery, jadi temen2 tinggal pake… maka script Jquery-nya kayak gini:

    1
2
3
4
5
6
7

    <script>
$().ready(function(){
    $(".tombol").click(function(){
        $("#gambarku").hide();
    });
});
</script>

    Lalu diikuti html yang sederhana seperti berikut:

    8
9

    <button class="tombol">Sembunyikan</button>
<img id="gambarku" src="foto.jpg" />

    Jika tadi elemen dinyatakan dengan tanda “#”, script untuk class dinyatakan dengan tanda “.”. Jadi, .tombol berarti class=”tombol”, sedangkan #gambar berarti id=”gambar”

    Huuuaaahh.. Cheyuz-nya udah ngantuk nih, mau tidur dulu…. malem bsok kita sambung tutorial Jquery berikutnya… kali ini kita perkenalan aja dulu… nanti “coming soon” kita langsung praktik ke materi ttg fade in dan fade out elemen… (masih dasar).. ok, selamat malam… hwaaah :ngantuk:

    This entry was posted on Thursday, December 10th, 2009 at 00:21 and is filed under jquery, Tutorial, _other. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

  • 12 Comments

    Take a look at some of the responses we have had to this article.

    1. L
      Dec 10th

      Nuhun pisan kang…

    2. Cheyuz
      Dec 10th

      OK sip L, kalem lah mun rek belajar mah hehe…

    3. Rashid failan
      May 30th

      Makasi pisan kang, mana kelanjutanya..abdi antosan hahaha…di antos nya kang..

    4. Cheyuz
      Jun 1st

      siip nanti diupdate

    5. Fade In dan Fade Out dengan JQuery | Harian Cheyuz
      Sep 1st

      [...] Hal pertama yang perlu kita lakukan adalah menambahkan script buat nge-load JQuery, silakan liat postingan sebelumnya untuk meliat gimana caranya ngeload JQuery, klik di sini [...]

    6. rangkep
      Dec 7th

      tutorial yang luar biasa mas, sukses trus

    7. andi hakim
      Dec 10th

      $().ready(function(){
      $(“.tombol”).click(function(){
      $(“#gambarku”).hide();
      });
      });

      Ditaro dimana ya, apa di header view??
      aku coba ko gambar yang ada ga ke hide.. :Yb

    8. andi hakim
      Dec 10th

      udah bisa kang..
      nuhun..

    9. Cheyuz
      Dec 14th

      @rangkep: sip, thankz ya.. :)

    10. Cheyuz
      Dec 14th

      @andi: sip kalo udah bisa, hehehe… :)

    11. qatz
      Mar 23rd

      hatur nuhun pisan kang, keren nih tutorial nya, singkat dan jelas..

      :)

    12. Cheyuz
      Apr 21st

      @qatz: sip, makasih ya.. :)

  • Leave a Reply

    Let us know what you thought.

  • Name(required):

    Email(required):

    Website:

    Message:

    Spam Protection by WP-SpamFree

With Picasa plugin by Wott