Pages

4/01/2014

Pengenalan JQuery

Dengan revolusi Web Design saat ini, konten pada Website semakin terlihat dinamis. Semakin banyak developer baru juga menuntut pengembangan web yang semakin ringkas dan efisien syntax. Sulitnya pengembangan dengan bahasa JavaScript membuat kita untuk menggunakan framework seperti JQuery.

JQuery merupakan cross-platform framework atau pustaka yang menekankan bagaimana interaksi antara JavaScript dan HTML. JQuery memungkinkan kita dengan mudah untuk menavigasikan elemen HTML, mengakses DOM, menciptakan efek pada elemen HTML, menangani kejadian, dan mengembangkan aplikasi AJAX dengan mudah. Semua fiktur tadi sebenarnya memiliki source code yang sangat panjang jika diketikkan dengan JavaScript murni namun dapat tereduksi hingga kita hanya mengetikkan satu perintah dasar saja saat kita menggunakan JQuery.

"Write less, do more" - Slogan JQuery

Fiktur-fiktur yang terdapat pada JQuery lebih lengkapnya adalah sebagai berikut:
  • Pemilihan elemen HTML berdasarkan selektor seperti id, class, nama element, atribut elemen (DOM Element Selector).
  • Modifikasi struktur HTML.
  • Manipulasi elemen HTML berdasarkan selector.
  • Penanganan kejadian (seagai contoh, ketika tombol 'A' diklik, maka penanganannya adalah menampilkan pesan pemberitahuan).
  • Efek dan animasi.
  • AJAX.
  • JSON parsing (digunakan untuk menguraikan dokumen JSON).
  • Fiktur utilitas seperti User Agent Information, Feature detection.
  • Multi-platform atau dukungan pada banyak browser.


Instalasi JQuery

Library JQuery adalah file javascript yang dapat diunduh langsung pada website JQuery. File yang disimpan lalu kita sertakan pada dokumen HTML kita:

including JQuery library
<script src="jquery.js"></script>

File library juga disertakan dengan mengetikkan alamat pada server JQuery langsung:

including JQuery library
<script src="http://code.jquery.com/jquery-1.11.min.js"></script>


Penulisan code JQuery dimulai dari pengetikan $(document).ready

<script>
   $(document).ready(function() {
      ...
      ...
   });
</script>


Contoh penggunaan JQuery


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

   $(document).ready(function() {
      $(".tombol_hapus").click(function() {
   $("p").fadeOut("slow");
      });
   });

   </script>
</head>

<body>
   <a href="#" class="tombol_hapus">hilangkan</a>
   <p>ini adalah isi artikel</p>
</body>
</html>

  • kode $(".tombol_hapus") menandakan DOM selector pada elemen HTML dengan class tombol_hapus (elemen < ... class="tombol_hapus"> ... </ ... >)
  • .click() menandakan kejadian saat selector di-klik 
  • .fadeOut() akan menimbulkan efek elemen akan menghilang dengan pergerakan yang lambat
5 le Journal de MVA: Pengenalan JQuery Dengan revolusi Web Design saat ini, konten pada Website semakin terlihat dinamis. Semakin banyak developer baru juga menuntut pengembangan...

1 comment:

  1. Lucky 88 Casino - Mapyro
    Find the 울산광역 출장마사지 best 광주 출장마사지 Lucky 88 Casino in Las Vegas, NV and other Casino locations with Mapyro. Lucky 88 Casino is 부산광역 출장샵 located on Southside Blvd, a 5-minute drive 구리 출장안마 from Las Vegas. Rating: 경주 출장안마 3.7 · ‎18 votes

    ReplyDelete

< >