Pemanfaatan Bahasa Pemrograman JQUERY Untuk Membuat Website

Bahasa Pemrograman JQUERY dirilis pada tahun 2006 oleh John Resig, pemanfaatan JQUERY untuk program Website semakin pesat, sebut saja Google, BBC, Facebook, Amazon, Youtube, Detikcom dan masih banyak lagi. Jadi penggunaan Bahasa Pemrograman JQUERY sudah sangat familiar bagi developer web.

Pengertian dari Bahasa Pemrograman JQUERY

Bahasa Pemrograman JQUERY adalah kumpulan fungsi yang terdapat pada javascript library yang siap dipakai sehingga mempermudah dan mempercepat kita dalam membuat kode javascript. Jika kita membuat fungsi javascript untuk membuat stripe (warna selang seling) pada baris sebuah tabel, akan membutuhkan kode yang rumit dan panjang sebagai berikut :

function stripe(id) {

     var even = false;

     var evenColor = arguments[1] ? arguments[1] : “#fff”;

     var oddColor = arguments[2] ? arguments[2] : “#eee”;

     var table = document.getElementById(id);

     if(! table) { return; }

     var tbodies = table.getElementByTagName(“tbody”);

     for (var h = 0; h < tbodies.length; h++) {

         var trs = tbodies[h].getElementByTagName(“tr”);

         for (var i = 0; i < trs.length; i++) {

              if(! hasClass(trs[i]) && ! trs[i].style.backgroundColor) {

                   var tds = trs[i].getElementByTagName(“td”);

                   for(var j = 0; j<tds.length; j++) {

                        var mytd = tds[j];

                        if(! hasClass(mytd) && ! mytd.style.backgroundColor) {

                            mytd.style.backgroundColor = even ? evenColor : oddColor;

                        }

                   }

              }

         }

     }

}

Bahasa Pemrograman JQUERY sebagai javascript library dapat langsung memanggil fungsi sesuai yang dibutuhkan oleh developer. Menariknya kita hanya memerlukan satu/dua baris untuk membuat warna selang seling (stripe) pada suatu tabel yaitu :

Bahasa Pemrograman JQUERY (‘table tr:nth-child(odd)’).addClass(‘odd’);

Dapat ditarik kesimpulan bahwa Bahasa Pemrograman JQUERY menyederhanakan penggunaan script pada javascript. Sesuai slogan jQuery “Write less, do more”, cukup tulis sedikit tetapi dapat melakukan banyak hal.

Sebelum mempelajari Bahasa Pemrograman JQUERY sebaiknya kita sudah mengenal :

  1. Javascript, karena jQuery merupakan library dari javascript. Jadi bahasa dasarnya mengacu pada javascript.
  2. CSS, karena hampir secara keseluruhan jQuery akan mengontrol/memanipulasi DOM (Document Object Model) dari CSS.
  3. PHP dan MySQL, karena dalam membuat sebuah web dinamis sangat membutuhkan bahasa PHP dan MySQL.
  4. Ajax, karena jQuery mampu menyederhanakan perintah-perintah pada Ajax yang cukup rumit untuk dipahami.

Fakultas Teknik dan Ilmu Komputer

Selengkapnya Klik Disini

Bahasa Pemrograman JQUERY digunakan untuk pembuatan program Website

Dalam menggunakan Bahasa Pemrograman JQUERY, berikut beberapa alasan yang membuktikan Bahasa Pemrograman JQUERY layak dijadikan pilihan dalam membuat website interaktif

  1. JQUERY lebih banyak digunakan oleh website-website terkemuka didunia.
  2. Kompatibel atau cocok dengan semua browser yang populer, seperti Mozilla, Chrome, Internet Explorer dan Opera.
  3. Kompatibel dengan semua versi CSS.
  4. Dokumentasi, tutorial dan contoh-contohnya lengkap. Silahkan kunjungi website resminya http://jquery.com
  5. Didukung oleh komunitas yang besar dan aktif seperti forum, milis, blog.
  6. Ketersediaan plugin yang sangat banyak jumlahnya. Plugin merupakan kemampuan tambahan yang bisa disertakan pada jQuery.
  7. Filenya hanya satu dan ukurannya kecil hanya sekitar 20 KB sehingga aksesnya cepat.
  8. Open source/free (gratis) dengan lisensi dari GNU General Public License dan MIT License.
  9. jQuery lebih banyak digunakan oleh para developer web dibandingkan library javascript lainnya.

Kemampuan yang dimiliki Bahasa Pemrograman JQUERY

Bahasa Pemrograman JQUERY akan dijabarkan mengenai kemampuan yang dimiliki oleh jQuery diantaranya :

  1. Mempermudah akses dan manipulasi elemen tertentu pada dokumen.

Biasanya membutuhkan baris program yang cukup panjang untuk mengakses suatu elemen dokumen. Namun jQuery dapat melakukannya hanya dalam beberapa baris program saja, karena jQuery memiliki selector yang sangat efisien untuk mengakses suatu elemen tertentu pada dokumen yang selanjutnya bisa dimanipulasi sesuai dengan keinginan kita.

  • Mempermudah modifikasi atau perubahan tampilan halaman web.

Biasanya untuk memodifikasi tampilan halaman web digunakan CSS, permasalahannya CSS sangat dipengaruhi oleh web browser yang digunakan sehingga sering terjadi halaman web yang dibuat sudah rapih dan bagus tampilannya pada browser Mozilla namun ketika ditampilkan di browser Opera menjadi berantakan, namun jQuery dapat menyesuaikan style CSS pada semua browser, sehingga permasalahan tersebut dapat dihindari.

  • Mempersingkat Ajax (Asynchronous Javascript And XML).

Kemampuan Ajax adalah mampu mengambil informasi dari server tanpa harus melakukan refresh pada halaman web, artinya halaman web terlihat dapat berganti secara otomatis. Apabila kita menggunakan Ajax membutuhkan baris script yang panjang, namun jQuery dapat mempersingkat dengan menggunakan Ajax call.

  • Memiliki API (Application Programming Interface).
  • Mampu merespon interaksi antara user dengan halaman web dengan lebih cepat.
  • Menyediakan fasilitas untuk membuat animasi sekelas flash dengan mudah.

Cara kerja Bahasa Pemrograman JQUERY

Bahasa Pemrograman JQUERY memerlukan Tiga langkah pokok

  1. Panggil/load library JQUERY.

<html>

<head>

<script type=”text/javascript” src=”jquery-1.8.0.min.js”>

</script>

  • Buat script Bahasa Pemrograman JQUERY dibagian head untuk mengontrol objek berdasarkan elemennya.

<script type=”text/javascript”>

  $(document).ready(function(){

    $(“.sembunyi”).click(function(){

      $(“#foto”).hide(“slow”);

    });

    $(“.tampil”).click(function(){

      $(“#foto”).show(“normal”);

    });

  });

</script>

</head>

  • Buat objek beserta elemennya berupa id atau class dibagian body.

<body>

<button class=”sembunyi”>Sembunyikan</button>

<button class=”tampil”>Tampilkan</button>

<p><img id=”foto” src=”Masjid.jpg”></p>

</body>

</html>

Dari script diatas dapat dijabarkan cara kerja dari Bahasa Pemrograman JQUERY sebagai berikut

  1. Tiga langkah pokok akan memastikan bahwa semua elemen-elemen yang diinginkan sudah ditampilkan semua dihalaman web, fungsi yang digunakan adalah :

$(document).ready(function(){

   // baris kode jQuery akan dijalankan

   // apabila semua elemen sudah ditampilkan semua

});

  • Setelah semua elemen ditampilkan, tahap berikutnya adalah memilih elemen berdasarkan class atau id yang telah didefinisikan. Dalam hal ini, jQuery menggunakan fungsi selector. Contoh scriptnya :

$(“#foto”)

$(“.sembunyi”)

$(“.tampil”)

  • Setelah elemen dipilih, tahap berikutnya memberikan aksi/operasi terhadap elemen yang sudah dipilih. Misalnya operasi klik dan hide, dimana apabila tombol diklik maka akan menyembunyikan elemen foto. Contoh scriptnya :

$(“.sembunyi”).click(function(){

    $(“#foto”).hide(“slow”);

});

Translate »