JQUERY

JQUERY  

BAB I

PENDAHULUAN

A.    LatarBelakang

Saat ini perkembangan ilmu komunikasi dan teknologi informasi sangatlah pesat, ditandai dengan berkembangnya teknologi internet yang memudahkan manusia dalam meringankan pekerjaan dan mempermudah dalam berkomunikasi dan saling tukar menukar informasi.

Internet telah menyediakan berbagai faslitas seperti, e-mail, www( world wide web), dan blog. Perkembangan blog pun semakin cepat terbukti dengan semakin banyaknya orang yang menggunakan blog sebagai media informasi dunia maya. Sekarang telah terdapat jutaan blog dengan pertumbuhan yang sangat signifikan.

Dalam pembuatan web atau blog, agaknya para pecinta-pecinta blog ini memerlukan pengetahuan yang cukup, dan mendalam tentang bahasa pemrograman khususnya JQuery, oleh sebab itu besar harapan penulis agar makalah ini dapat digunakan para pemula dalam membangun sebuah web yang menarik.Perkembangan ilmu pengetahuan dan teknologi para programer memerlukan sebuah program dimana program tersebut dapat memfasilitasi mereka dalam melancarkan pembuatan sebuah software, selain dapat memfasilitasi, diperlukan sebuah program yang dapatdigunakan untuk mempermudah pekerjaan mereka yaitu salah satunya adalah menggunakan jQuery.

B.    RumusanMasalah

1. Apa yang dimaksud dengan JQuery ?  

2.  Bagaimana sejarah perkembangan munculnyaJquery?

3.   Apa kegunaan Jquery?

4.   Apa saja sintaks Jquery ?

5.  Bagaimana efek dengan  Jquery?

6.   Bagaimana implemeentasi Jquery?

7.   Apaitu Jquery  Events?

8.   Bagaimana kinerja Jquery?

9.  Apa saja fitur-fitur yang terdapat pada Jquery?

      10. Apa saja kelebihan dan kekurangan JQuery?

C.    Tujuan

1.   Mengetahui pengertian jQuery

2.   Mengetahui sejarah perkembangan jQuery

3.   Mengetahui kegunaan jQuery

4.   Mengetahui cara penggunaan jQuery

5.   Mengetahui kelebihan dan kelemahan jQuery

6.   Mengetahui event yang ada pada jQuery

7.   Mengetahui implementasi jQuery untuk kehidupan sehari-hari

D.   Manfaat

Penulisber harap makalah ini dapat bermanfaat bagi para pemula-pemula developer blog/website, yang tadinya kurang begitu paham mengenai JQuery menjadi lebih memahami bahasa pemrograman JQuery,  sehingga blog/webite  yang sedangdi kembangkan menjadi lebih menarik dan dinamis berkat bantuan JQuery.

BAB II

PEMBAHASAN

A.    Pengertian JQuery

JQuery adalah library javascript yang menyediakan berbagai fasilitas yang dulunya  harus dibuat manual oleh user, namun sekarang cukup dipanggil/dijalankan dengan mudah. Misalkan, animasi Fade In, Fade Out, Slide In, Slide Show, dll.  Keunggulan lain jQuery terletak pada fasilitas selectornya, yaitu fasilitas jQuery untuk memilih objek DOM untuk diproses selanjutnya.

JQuery adalah sebuah 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.

Dengan JQuery, suatu halaman web yang menjadi aplikasi web, jika dilihat sourcenya, akan terlihat seperti dokumen HTML biasa; tidak ada kode JavaScript yang terlihat langsung. Teknik pemrograman web seperti ini disebut sebagai unobstrusive JavaScript programming.

JQuery merupakan salah satu librari yang membuat program web di sisi klien, tidak terlihat sebagai program JavaScript biasa, yang harus secara eksplisit disisipkan pada dokumen web. Pada teknik pemrograman sisi klien dengan menggunakan JavaScript biasa, setiap elemen yang akan memiliki event, akan secara eksplisit terlihat ada event yang dilekatkan pada elemen tersebut.

B. Sejarah

JQUERY pertama kali dibuatoleh John Resigpadatahun 2005, JQuerysendiripertama kali dirilistanggal 14 Januari 2006.Dan versiterbarudariJQueryudahsampeversi 1.3.2.Diaterinspirasidari Behavior code.Saatitu, Diangerasahasildari Behavior Code tidakelegandanmasihjelek, makadikembangkannyaJQuery.Dimanadenganpenulisan code JQueryjadilebih simple, gampangdantentunyadenganhasil yang memuaskan. jQueryadalah library JavaScript OpenSource yang menekankanpadainteraksiantara JavaScript dan HTML.

Apabedanyadengansitus-situs yang tidakmenggunakanJQuery? banyakbedanya, misalnya browser seakantidakmerefreshsebuah page ketikakita men-submit sebuah data kedalam server mereka. Dan lebihhebatnyalagiJQuerymempunyaianimasitanpamenggunakanflash(.swf), jadilebihcepeatdiloaddidalam browser dantanpaharus install plugins.

JQueryadalahsebuahpustaka JavaScript kecilbersumberterbuka yang menekankanpadainteraksiantara JavaScript dan HTML. PustakainidirilispadaJanuari 2006 di BarCamp NYC oleh John Resigdanberlisensiganda di bawahLisensi MIT dan GPL. Microsoft dan Nokia telahmengumumkanakanmengemasJQuery di platform mereka. Microsoft awalnyamengadopsinyadalam Visual Studio untukdigunakandalam ASP.NET AJAX dan ASP.NET MVC Framework.

JQuerymerupakan library Javascript yang gratis dan open source.OlehkarenanyaJQuery  dapatdigunakandenganbebasuntukkeperluanpengembangan website. Tanpa library sepertijQuery, menerapkanJavascriptmungkinakanlebihsulit, terutamauntukpemula yang barubelajarJavascript. Plugin tambahansepertiJQuery UI (user interface) semakinmemudahkanpenggunauntukmengembangkan website yang cantikdaninteraktif.Selainitutersedia plugin-plugin lain yang makinmemperkayakemampuanjQuery.

C. Kegunaan JQuery

1. Mengakses bagian halaman tertentu dengan mudah.

Tanpa adanya library Javascript khusus, untuk mengakses suatu bagian tertentu dari halaman, harus mengikuti aturan Document Object Model (DOM) dan pengaksesan harus secara spesifik menyesuaikan dengan struktur HTML. Dengan kata lain, pengaksesan bagian tertentu dari halaman sangat tergantung  pada struktur dari HTML. JQuery menawarkan cara yang mudah (bahkan sangat mudah) dalam mengakses bagian tertentu dari halaman. Pengaksesan juga tidak terlalu bergantung pada struktur HTML.

2. Mengubah tampilan bagian halaman tertentu.

CSS (Cascading Style  Sheet) menawarkan metode yang cukup handal dalam mengatur dan mempercantik halaman web. Namun terkadang CSS punya kelemahan yang cukup mengganggu, yaitu beberapa perintah CSS tidak didukung oleh semua browser. Cukup merepotkan jika kita harus mendesign halaman web dengan beberapa CSS sekaligus. Sekali lagi JQuery menawarkan solusi untuk mengatasi hal  tersebut. Dengan JQuery, “kesenjangan” yang  terjadi antara browser dalam urusan CSS akan tertutup dengan baik.

3. Mengubah isi dari halaman.    

Jaman dulu (baca:sebelum JQuery lahir) cukup sulit jika kita akan mengubah sebagian isi dari halaman. Mengubah disini dapat berarti mengganti teks, menambahkan teks atau gambar, mengurutkan suatu daftar (list), menghapus baris tabel dan sebagainya. Dengan JQuery, hal tersebut dapat dilakukan dengan hanya beberapa baris perintah.

4. Merespond interaksi user dalam halaman

Website yang baik tidak cukup digambarkan dengan user-interface dan tampilan yang memukau. Namun lebih dari itu, bagaimana pengunjung dapat berinteraksi dengan website dan dapat mengatur tampilannya sendiri. Interaktivitas sangat bergantung bagaimana pemrograman yang dipakai dalam menangani event-handling. Javascript sendiri memiliki beberapa event-handling seperti onclick untuk menangani event saat terjadi click. Namun demikian, event handling pada Javascript terbatas pada object-object tertentu, dan jenisnya pun terbatas. JQuery melengkapi semuanya dengan tambahan penanganan event-handling yang semakin mudah.

5. Menambahkan animasi ke halaman.

Animasi seringkali disertakan dalam suatu halaman web untuk menambah kecantikannya. Saat ini animasi masih cukup digemari oleh para peselancar situs. Animasi dapat dibuat dalam berbagai gaya, ada yang menggunakan Flash, gambar bergerak (GIF), video, dan sebagainya.  Masing-masing tentu memiliki kelebihan dan kekurangan masing-masing. JQuery sendiri menawarkan konsep animasi (walaupun masih sederhana) yang cukup apik namun ramah bandwidth alias ringan. Salah satu animasi yang bisa dibuat dengan JQuery adalah fading jika terdapat suatu bagian dari halaman ditambahkan atau dihilangkan.

6. Mengambil informasi dari server tanpa me-refresh seluruh halaman.

Mengambil informasi dari server tanpa refresh halaman merupakan salah satu konsep dasar dari yang namanya AJAX (Asynchronous Javascript and XML). Pada penerapannya, cukup ribet jika harus membangun website dengan konsep AJAX, saat ini banyak library khusus yang berusaha mempermudahnya. JQuery merupakan salah satunya.

7. Menyederhanakan penulisan Javascript biasa.

Semboyan JQuery  adalah “Write less, do more”  atau  dengan  kata  lain  kesederhanaan  dalam penulisan code, tetapi menghasilnya tampilan yang lebih. Sebenarnya inilah yang menjadi daya tarik tersendiri buat para pengembang web untuk menggunakan JQuery. 

D.  Sintaks Jquery dan Efek-efek Jquery

1.    Sintaks jQuery

Sintaks jquery biasanya dibuat untuk memilih elemen-elemen HTML dan melakukan aksi terhadap elemen yang dipilih.

Sintaks :

$(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.

2.     jQuery Selector

Selector memungkinkan anda untuk memanipulasi elemen HTML sebagai kelompok atau sebagai elemen tunggal. jquery elemen selectors dan attribute selectors memungkinkan anda untuk memilih elemen HTML dengan nama tag, nama atribut, atau konten.

contoh :

$("p") memilih semua elemen <p>.

$("p.intro") memilih semua elemen <p>  yang mempunyai class = "intro".

$("p#demo") memilih semua elemen <p> yang mempunyai id="demo".

Selector  merupakan salah satu keunggulan utama dari jQuery, di mana fungsi utamanya adalah memilih objek DOM yang diinginkan oleh user untuk dimanipulasi dengan mudah. 

Syntax dasar selector:

$(“#divContent”).click(function()….

Bagian yang dihighlight adalah selector yang akan memilih objek DOM (dalam kasus di atas, yang di-select adalah objek/element dengan id=’divContent’).

 Beberapa jenis selector:

v  Element: untuk memilih element dengan tag tertentu.

Syntax:  $(“E”). 

Contoh: $(“a”) akan menyelect semua elemen tag <a> di halaman web.

v  ID: untuk memilih element dengan ID tertentu.

Syntax:  $(“#id”). 

Contoh: $(“#content”) akan menyelect semua elemen dengan id=”content”

tanpa melihat tag elementnya.

v  Class: untuk memilih element dengan class tertentu.

Syntax:  $(“.class”). 

Contoh:  $(“.myClass”)  akan menyelect semua elemen dengan

class=”myClass” tanpa melihat tag elementnya.

v  Descendant: untuk memilih element F yang merupakan bagian/descendant dari element E. Descendant adalah semua elemen yang menjadi bagian dari elemen lainnya.

Syntax : $(“E F”)

 Contoh :

<div id=’container’>

<p>

    <span>

      <img src=’a.jpg’/>

    </span>

  </p>

  </div>

<img src..> merupakan descendant dari <span>, <p>, dan <div>. Kode $(‘#container p’)  dapat digunakan untuk memilih elemen <p> yang merupakan descendant dari elemen dengan id=’container’.

v  Child: untuk memilih elemen F yang merupakan child dari elemen E.

Syntax: $(“E>F”)

Contoh: $(‘li > ul’) digunakan untuk memilih semua elemen tag <ul> yang merupakan children dari elemen tag <li>.

v  Multiple Element:  untuk memilih beberapa elemen sekaligus, dipisahkan dengan koma.

Syntax: $(“E, F, G”)

Contoh: $(‘div, p, a’): digunakan untuk memilih semua elemen dengan tag <div>, <p>, dan <a>.

v  Semua Element: untuk memilih semua elemen, menggunakan tanda *.

Syntax: $(“*”)

Contoh: 

$(‘*’): digunakan untuk memilih semua elemen dalam dokumen/halaman HTML.

$(‘p>*’): digunakan untuk memilih semua elemen yang merupakan child dari tag <p>. 

Selector-selector lainnya

v  :odd  dan  :even  : digunakan untuk memilih elemen yang memiliki index genap maupun ganjil.

Syntax: :odd dan :even

Contoh:  $(“tr:odd”)  digunakan untuk memilih elemen <tr> yang nilai indexnya ganjil. 8

Contoh pemakaian praktis dari selector ini adalah untuk membuat alternating row suatu table, di mana warna dari baris ganjil dan genap suatu table berbeda.

v  Elemen ke-n  : digunakan untuk memilih elemen sesuai dengan index yang diinginkan

Syntax: :eq(n) atau :nth(n)

Contoh:  $(“li:eq(2)”)  digunakan untuk memilih elemen <li> ke-3 (karena index elemen ke-1 dihitung sebagai index ke-0).

v  Elemen pertama/terakhir: hampir sama dengan elemen ke-n, namun dapat dipanggil dengan notasi khusus.

Syntax: :first atau :last

Contoh: $(‘li:last’) digunakan untuk memilih elemen <li> yang terakhir.

v  Elemen yang terlihat  atau  hidden: untuk memilih semua elemen berdasarkan visibilitynya, yaitu yang terlihat ataupun yang hidden.

Syntax: :visible atau :hidden

Contoh:

$(‘li:visible’)  digunakan untuk memilih semua elemen <li>  yang bersifat visible.

$(‘input:hidden’)  digunakan untuk memilih semua elemen <input> yang hidden.

v  jQuery Attribute Selectors

jQuery mirip XPath dalam hal memilih elemen berdasarkan atribut yang ada :

$("[href]") memilih semua elemen dengan atribut href.

$("[href='#']") memilih semua elemen dengan atribut href bernilai = "#".

$("[href!='#']") memilih semua elemen dengan atribut href dengan nilai bukan sama dengan "#".

$("[href$='.jpg']") memilih semua elemen dengan atribut href yang mengandung ".jpg".

E.  Efek-Efek dengan jQuery

Salah satu kemampuan jQuery adalah adanya fungsi-fungsi efek yang siap pakai. biasanya untuk membuat efek memudar di javascript. Dengan menggunakan jQuery kita cukup menggunakan fungsi $(selector).fadeIn(). berikut adalah efek-efek siap pakai yang disediakan jQuery :

a.        jQuery show()

Digunakan untuk menampilkan elemen sesuai selector, dari yang semula hidden/invisible menjadi visible. Parameter speed dapat diisi dengan kecepatan animasi dalam milisecond (misalkan diisi 100,200 dsb). Namun, jQuery juga menyediakan 3 jenis speed, yaitu fast (200 ms), normal (400 ms), dan slow (600ms). Jika parameter speed ini tidak diisi, maka kecepatan normal yang digunakan. Callback function adalah fungsi yang akan dijalankan setelah suatu method (dalam hal ini adalah .show() ) selesai dijalankan.

b.       jQuery hide()

Berguna untuk menyembunyikan elemen yang dipilih.

c.        jQuery toggle()

Digunakan untuk men-toggle status visible/hidden dari elemen sesuai selector. Jika elemen visible, maka akan menjadi hidden. Sebaliknya, jika elemen hidden, maka akan dimunculkan/visible.

d.      jQuery slideDown()

Menampilkan elemen yang tersembunyi , secara efek sliding.

e.        jQuery slideUp()

Menyembunyikan elemen secara efek sliding.

f.        jQuery slideToggle()

Gabungan antara slideDown() dan slideUp().

g.       jQuery fadeIn()

Menampilkan elemen yang dipilih jika tersembunyi.

h.       jQuery fadeOut()

Menyembunyikan elemen yang dipilih secara efek memudar.

i.         jQuery fadeTo()

Mengatur tingkat kepudaran elemen terpilih menuju tingkat opacity yang ditentukan.

j.        jQuery animate()

Mengubah suatu elemen dari satu keadaan ke keadaan lainnya

F.   Implementasi jQuery

Dalam implementasi jQuery tidak ketinggalan peran plugin, plugin adalah semacam fungsi atau fitur tambahan yang digabungkan ke dalam sebuah JQuery mempercepat atau memudahkan dalam pembangunan sebuah website. Dibawah ini beberapa plugin jQuery yang sering digunakan dalam membuat sebuah website:

1. Drop-Down Menu

Drop Down menu mendukung multi level menu (menjadi sub-sub menu yang lebih banyak), selain itu menu drop down dilengkapi dengan fasilitas timeout effect. Fungsi dari timeout effect ini digunakan ketika lama waktu mouse over atau mouse out.

2. Tool Tips

Tool tips adalah kotak informasi yang digunakan untuk menginformasikan suatu ketika mouse didekatkan pada sebuah teks, gambar, tombol, atau elemen lain dalam dalam sebuah web yang muncul diatas elemen tersebut. Cara kerja dari tool tips ini adalah ketika mouse diletakkan, maka akan muncul bubble. Bubble ini bisa digunakan untuk desain yang cantik, seperti fasilitas tombol lose, background, dan lain-lain.

3. Autocomplete Search

Fungsi dari Autocomplete Search adalah melakukan pencarian secara real time, dimana ketika kita memasukan kata atau huruf dalam sebuah teks input dalam sebuah web, secara otomatis hasil pencarian akan muncul sesuai dengan yang kita masukan secara real time. Plugin inimirip pencarian pada website facebook.

4. Validasi Form

Fungsi dari plugin ini adalah melakukan validasi data dalam sebuah form, seperti mengecek e-mail, password, dan input lainnya. Saat pengguna memasukan teks atau huruf maka plugin ini akan melakukan validasi terhadap inputan user.

5. jQuery Cycle Plugin

plugin ini digunakan untuk animasi image dalam sebuah website, plugin menggantikan fungsi flash sebagai animasi. Dengan menggunakan plugin ini pengguna dapat menganimasikan image yang ada menjadi sebuah animasi seperti fade in, fade out, slide show, scroll dan efek lainnya.

6. Teks berjalan

Plugin ini berfungsi untuk memanipulasi teks, sehingga teks yang kita tampilkan kelihatan menarik, missal teks berjalan kekanan kekiri atau atas bawah. Plugin ini mirip fungsi marquee dalam tag HTML, tetapi plugin ini lebih bervariasi.

7. Datepicker

Datepicker berfungsi untuk mengambil tanggal ari system kalender yang ada di computer, sehingga memudahkan dalam memilih tanggal. Contoh saat kita akan mengubah format tanggal srandat datepicker (bulan/tanggal/tahun) menjadi format tanggal berbahasa Indonesia (tanggal/bulan/tahun). Cara yang digunakan cukup mudah hanya dengan memanggil library penanggalan bahsa Indonesia yang sudah disediakan oleh jQuery UI, yaitu ui.datepicker-id.js yang terdapat pada folder UI. Selain itu kita juga bisa menampilkan pilihan bulan dan tahun dalam bentuk combobox, yang membuat pengguna dapat lebih bebas dan mudah dalam memilih bulan dan tahun yang diinginkan. Caranya dengan menggunakan fungsi changeMonth dan changeYear dari datepicker.

Implementasi jQuery pada Blog.

a)      Penerapan Fancybox

Fancybox adalah efek jendela munculan (pop up) dengan menggunakan jQuery yang dikembangkan Janis  Skarnelis. Fancybox mempunyai desain elegan yang menyerupai pup op pada Mac OS serta efek transisi yang menarik. 

b)      Penerapan jQuery Masonry Plugin

jQuery Masonry Plugin merupakan layout dinamis yang dibuat oleh David DeSandro pada tahun 2011 dengan tujuan membuat layout dengan desain flat. 

G.      JQuery Events

Salah  satu  kemampuanutama  jquery  adalah  menanganievent.  Dalam  pemograman  jquery, biasanyakode-kodepemogramandiletakkandidalam  penangananeventyangterjadipada  suatu ataukelompok  elemenyangdipilih.

Hampir-hampirmirip  dengan   Visual  Basic,  biasanyasuatu  kode  dijalankanapabilaada  sesuatu yang  terjadi(event)  pada  suatu  elemen.  Misalnya,  kalau  ada  tombol  di  klik,  maka  action  atau kode  apa  yang  dijalankan,apabilaada  combox  dipilih,kode  apa  yang  dijalankan,pada  contoh jquerysebelumnya:

$(".tombol1").click(function(){

$("p").hide(1000);

});

Kode di  atasberartiapabilaterjadi  eventmengklik  elemenyang  mempunyaiclass=’tombol1’, maka  lakukan  fungsihide()  terhadapsemua  element<p>.

.                  H.  Kinerja Jquery

Cara kerja yang dilakukan Jquery yaitu:

1.         JQuery akan memastikan bahwa semua elemen atau elemen yang diinginkan sudah ditampilkan semua di halaman web, fungsi yang digunakan adalah:
$(document).ready(function(){// baris kode jQuery akan dijalankan// apabila semua elemen sudah ditampilkan semua});

2.       Setelah semua elemen ditampilkan, tahap berikutnya adalah memilih elemen berdasarkan class atau id yang telah didefinisikan. Dalam hal ini, jQuery menggunakan fungsi Selector.
$("#foto")
$(".sembunyi")
$(".tampil")
3. Setelah elemen dipilih, tahap berikutnya adalah memberikan aksi/operasi terhadap elemen yang sudah dipilih. Misalnya tombol yang akan menyembunyikan dan memunculkan kembali gambar.
$(".sembunyi").click(function(){
$("#foto").hide("slow");
)};

I.    Fitur-Fitur yang Terdapat Pada Jquery

Beberapa fitur yang tersedia di Jquery:

1.   Dalam Pemakaian menggunakan seleksi element DOM, sehingga website lebih dinamis  dan interaktif.

2.   JQuery bisa memanipulasi Class pada CSS dan Support CSS 3

3.   Event

4.   AJAX

5.   Efek-efek dan animasi

6.   Ekstensi dan Plug-ins

7.   Kompatibilitas dengan hampir semua Browser modern

8.   Keperluan lain seperti : User Agent, Feature detection dan lainnya.

Berikut adalah kemudahan-kemudahan yang ditawarkan Jquery bagi para penggunanya:

a.   Dapat mengubah tampilan bagian halaman tertentu

       CSS (Cascading Style Sheet) menawarkan metode yang cukup handal dalam mengatur dan mempercantik halaman web. Namun CSS masih memilki kelemahan yang cukup mengganggu, dimana beberapa perintah CSS tidak didukung oelh semua browser. Dengan demikian cukup merepotkan jika kita harus mendesign halaman web dengan beberapa CSS sekaligus. Dan kini JQuery menawarkan solusi untuk mengatasi masalah tersebut. Karena dengan JQuery, kesenjangan yang terjadi antara browser dalam urusan CSS akan tertutup dengan baik.

b.   Dapat mengakses bagian halaman tertentu dengan mudah

       Bayangkan saja tanpa adanya library Javascipt khusus, untuk mengakses suatu bagian tertentu dari halaman saja harus mengikuti aturan Document Object Model (DOM) dan pengaksesan harus secara spesifik menyesuaikan dengan struktur HTML. Dengan kata lain, pengaksesan bagian tertentu dari halaman sangat tergantung pada struktur dari HTML. Dan kali ini Jquery menwarkan cara yang sangat mudah dalam mengakses bagian tertentu dari halaman. Pengaksesan juga tidak terlalu bergantung pada struktur HTML.

c.   Dapat mengubah isi halaman

       Pada jaman dahulu, jauh sebelum JQuery lahir, mengubah sebagian isi dari halaman metrupakan hal yang cukup sulit. Dalam arti mengubah disini yaitu mengganti teks, menambahkan teks, menambahkan teks atau gambar, dapat mengurutkan suatu daftar (list), menghapus baris tabel dan sebagainya. Dengan JQuery hal tersebut dapat dilakukan hanya dengan beberapa baris perintah.

d.   Dapat menambahkan animasi ke halaman

       Dalam animasi sering kali disertakan dalam suatu halaman web untuk menambah tampilan yang cantik. Pada saat ini animasi masih sangat digemari oleh para paselancar situs. Animasi dapat dibuat dalam berbagai gaya, ada yang menggunakan flash, gambar bergerak (GIF), video dan sebagainya. Dalam hal tersebut masing-masing tentunya memiliki kelebihan dan kekurangannya. JQuery sendiri menawarkan konsep animasi (walaupun masih sederhana) yang cukup baik dan menarik, namun tetap ramah bandwidth alias ringan. Salah satu animasi yang bisa dibuat dengan JQuery adalah fading jika terdapat suatu bagian dari halaman ditambahkan atau dihilangkan.

e.   Dapat merespond interaksi user dalam halaman

      Website yang baik tidak cukup digambarkan dengan user-interface dan tampilan yang memukau. Namun lebih dari itu, bagaimana pengunjung dapat berinteraksi dengan website dan dapat mengatur tampilannya sendiri. Interaktivitas sangat bergantung bagaimana pemrograman yang dipakai dalam menangani event-handling. Javascript sendiri memiliki beberapa event-handling seperti onclick untuk menangani event saat terjadi click. Namun demikian, event handling pada Javascript terbatas pada object-object tertentu, dan jenisnya pun terbatas. Kemudian JQuery melengkapi semuanya dengan tambahan penanganan event-handling yang semakin mudah.

f.    Dapat mengambil informasi dari server tanpa melakukan refresh ke seluruh halaman

      Mengambil informasi dari server tanpa me-refresh halaman merupakan salah satu konsep dasar dari yang namanya AJAX (Asynchronous Javascript and XML). Namun ternyata dilihat pada penerapannya, cukup ribet jika harus membangun website dengan konsep AJAX, dan saat ini banyak library khusus yang berusaha mempermudahnya. JQuery merupakan salah satunya.

g.  Dapat menyederhanakan penulisan avascript biasa

     Dimana semboyanJQuery adalah “Write less, do more” atau dengan kata lain kesederhanaan dalam penulisan code, tetapi menghasilnya tampilan yang lebih. Sebenarnya inilah yang menjadi daya tarik tersendiri buat para pengembang web untuk menggunakan JQuery.

                                                 

J.       Kelebihan dan Kekurangan Jquery

•  Kelebihan Jquery

1.    Write Less, Do More.

2.        Artinya jQuery menyederhanakan penggunaan JavaScript, karena menggunakan fungsi dari library JavaScript yang telah ada. Hal ini selaras dengan semboyan dengan jQuery Write Less, Do More.

3.        Mempercepat proses cooding JavaScript dalam sebuah website.

4.        Pembelajaran jQuery yang mudah.

Fungsi-fungsi yang disediakan didokumentasikan dengan baik beserta contoh penggunaannya.

5.        jQuery bisa memanipulasi Class pada CSS dan support CSS 3.

6.        Tampilan web menggunakan jQuery terlihat lebih interakrif dan menarik, membuat para pengunjung lebih terkesan.

7.        Banyak terdapat efek-efek dan animasi yang membuat desain menjadi lebih menarik.

8.        Kompatibilitas dengan hampir semua browser modern.

9.         Disupport oleh plugin yang lengkap

10.     Filenya hanya satu dan ukurannya relatif kecil, sekitar 20kb

11.     Open source atau Free  

•    Kekurangan jquery:

1.        Website yang menggunakan jQuery akan lebih lama di-load dibanding website yang tidak menggunakan jQuery.

2.        Dari sisi server hosting pun, CPU dan RAM harus mengalokasikan resource yang mereka miliki untuk menangani request terhadap jquery. Pada level tertentu request yang sangat banyak (sangat-sangat banyak) akan membebani server.

Fakta:

1.        JQuery merupakan library JavaScript terhkital saat ini. Faktanya, banyak perusahaan besar tingkat dunia menggunakan JQuery dengan teknologi Website mereka. Bahkan website-website  lokal pun tidak mau ketinggalan.

2.        JQuery berhasil menyederhanakan fungsi-fungsi JavaScript dan Ajax yang rumit, sehingga hanya dengan beberapa baris kode, kita bisa membuat website dengan tingkat

3.       Interaktivitas yang tinggi (responsif), bahkan membuat animasi yang canggih tanpa memerlukan instalisasi plugin flash pada browser.

4.        Sebenarnya penggunaan JQuery sangatlah mudah, karena tanpa harus dibekali penguasaan pemograman JavaScript sekalipun, karena semuanya sudah dibungkus dalam bentuk library dan plugin, Intinya kita hanya perlu tahu cara menerapkan dalam website kita.

5.        Kompatibel/cocok dengan semua browser yang populer, seperti Mozzila, Internet Explorer, safari,Chrome, dan Opera.

6.        Kompetible dengan semua versi CSS (CSS 1 sampai dengan CSS  

7.        Dokumentasi, tutorial dan contoh-contohnya lengkap , silahkan kunjungi website resminya di http://JQuery.com/

8.        Didukung oleh komunitas yang besar dan aktif, seperti forum, milis, Bliog, social engering (twitter dan facebook), website dan tutorial.

9. Ketersediaan plugin yang sangat banyak jumlahnya. Plugin merupakan kemampuan tambahan yang bisa disertakan pada JQuery.

10.  File nya hanya satu dan ukuran nya pun kecil, hanya sekitar 20 KB, sehingga cepat aksesnya.

11.   Open source/free (gratis) dengan lisensi dari GNU General Public License dan MTT License.

12.  JQuery lebih banyak di gunakan oleh para developer web dibandingkan Javascript Library Lainnya.

BAB III

PENUTUP

A.   Kesimpulan

JQuery merupakan sebuah framework dan merupakan cara baru dalam menuliskan kode javascript. jQuery mempunyai semboyan “write less, do more”. jQuery dirancang untuk mempercepat dan meringkaskan kode-kode javascript serta kaya akan fitur.

Dengan demikian, menggunakan jQuery dapat dengan cepat dan ringan untuk menangani perpindahan dokumen HTML, penanganan event (event handling), pembuatan animasi didalam web. Dengan JQuery, suatu halaman web akan tampak seperti flash, dan juga interaksi AJAX untuk pengembangan web yang modern dan cepat.

JQuery dikembangkan pertama kali oleh John Resig, yang dibuat lebih ramping dari librari Prototype yang menjadi inspirasi dari libarari JQuery ini. Secara pemrograman, JQuery memiliki kemiripan seperti Prototype.

Banyak sekali kemudahan-kemudahan yang ditawarkan oleh JQuery yang belum banyak ditawarkan oleh Javascript yang lain. Dengan kecanggihannya, jQuery dipakai oleh perusahaan besar website-website terkemuka di dunia, salah satunya adalah google.  Dengan hadirnya JQuery, memberi banyak kemudahan dalam pengaksesan data ataupun pencarian informasi dan lain sebagainya.

B.  SARAN

       JQuery sangat membantu kita dalam mengembangkan sebuah web karena seperti slogannya “Write Less, Do More”, atau dengan kata lain kesederhanaan dalam penulisan code, tetapi menghasilnya tampilan yang lebih. Namun meskipun begitu jangan terbuai dengan kemudahan yang ditawarkan JQuery. Pelajari apa yang sebenarnya terjadi di belakang layar JQuery.

DAFTAR PUSTAKA

http://id.wikipedia.org/wiki/JQuery

 http://mrbawell.blogspot.com/2010/11/implementasi-jquery.html

Solichin, Achmad. 2009. JQuery Untuk Orang Awam. http://achmatim.net/2009/01/20/jquery-untuk-orang-awam/

Soffa, Ahmad. 212. JQUERY, Kelebihan, Kekurangan dan Fakta Lainnya. http://ahmadsoffa.wordpress.com/2012/06/20/jquery-kelebihan-kekurangan-dan-fakta-lainnya/

Yonandri, Yonand. 20111. Pengenalan dan Cara Penggunaan JQuery. http://yonand.my-php.net/berita-128-pengenalan-dan-cara-penggunaan-jquery.html

Ridwin, Budi. 2012. Flash vs JQuery. http://budiridwin.web.id/home/flash-vs-jquery.html

2013. Tutorial dasar - dasar jQuery. http://sarerea.com/category/article/tutorial-dasar-dasar-jquery.html