.jpg)
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.
Sejarah Perkembangan JQuery
John Resig merupakan otak dibalik jQuery, karyanya ini pertama kali diumumkan di NYC BarCamp pada awal tahun 2006. Di situs webnya dia mencatat, ia menciptakan jQuery karena ia tidak puas dengan library yang saat itu tersedia dan merasa bahwa seharusnya framework-framework tersebut bisa jauh lebih baik dengan mengurangi “syntactic fluff” dan menambahkan control khusus untuk tindakan-tindakan yang bersifat umum.
Kemudian para pengembang datang untuk membantu menyempurnakan librari ini, dan akhirnya menghasilkan rilis stabil pertama dari jQuery versi 1.0 pada tanggal 2006. Sejak itu, jQuery telah berkembang ke versi 1.7.1 dan telah mempunyai plug-in yang banyak. Sebuah plug-in adalah ekstensi dari jQuery yang bukan bagian dari library inti.
Perkembangan versi jQuery:
1. JQuery versi 1.0 (1.0.1, 1.0.2, 1.0.3, 1.0.4)
2. JQuery versi 1.1 (1.1.1, 1.1.2, 1.1.3, 1.1.3.1, 1.1.4)
3. JQuery versi 1.2 (1.2, 1.2.1, 1.2.2, 1.2.3, 1.2.4, 1.2.5, 1.2.6)
4. JQuery versi 1.3 (1.3.1, 1.3.2)
5. JQuery versi 1.4 (1.4.1, 1.4.2, 1.4.3, 1.4.4)
6. JQuery versi 1.5 (1.5.1, 1.5.2)
7. JQuery versi 1.6 (1.6.1, 1.6.2, 1.6.3, 1.6.4)
Sekarang JQuery dikembangkan oleh team developer yang dipimpin oleh Dave Metvin. Dipakai oleh lebih dari 55% dari 10.000 website yang paling sering dikunjungi. JQuery menjadi Library Javascript yang paling popular Sekarang.
Script JQuery dibuat untuk memudahkan pengaturan document seperti menyeleksi object dengan element DOM dan membuat aplikasi dengan AJAX. Jquery juga menyediakan layanan atau support para developers untuk membuat plug-ins di dalam bahasa Javascript tentunya. Sehingga memungkinkan para developer website membuat website lebih interaktif dengan animasi, efek – efek, tema dan widget. Dengan menggunakan JQuery kita bisa meluapkan kreatifitas untuk membuat website dinamis.
Microsoft dan Nokia telah mengumumkan akan mengemas JQuery di platform mereka. Microsoft awalnya mengadopsinya dalam Visual Studio untuk digunakan dalam ASP.NET AJAX dan ASP.NET MVC Framework, sedangkan Nokia akan mengintegrasikannya dalam kerangka Web Run-Time mereka.
Perbedaan versi pada Jquery
Versi baru biasanya terdapat penambahan fungsi baru dari fungsi jquery yang sebelumnya. Tetapi pasti memiliki besar kapasitas yang lebih besar dari versi yang sebelumnya sehingga dengan versi yang baru dapat memperberat beban dan loading pada aplikasi website yang dibuat. Maka dari itu kita harus mempertimbangkan ketika kita memakai versi jquery yang kita akan gunakan.
Perbedaan Jquery.js (tanpa min) dengan jquery.min.js(menggunkan min).
Dari keduanya mempunyai kegunaan dan fungsi sama. Penggunaan “min” menandakan bahwa jquery tersebut telah dikompres (compress) sehingga muatan atau bebanya telah terkurangi dengan tujuan untuk mempercepat waktu loading. Compress jquery dilakukan dengan menghilangkan beerapa keterangan dan spasi yang sebenarnya berfungsi untuk memudahkan pengguna saat membuat desain baru dengan memanfaatkan jquery. Maka dari itu jika sekedar pengguna lebih baik menggunakan jquery.min.js agar loading lebih cepat.
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.
Cara menggunakan JQuery
Download file jQuery terbaru dari
http://docs.jquery.com/Downloading_jQuery
Import file jquery.js yang sudah didownload ke halaman web yang ingin menggunakan jQuery.
<script src="jquery.js" type="text/javascript">
Notasi penggunaan jQuery yang lazim digunakan adalah dengan menambahkan tanda $.
Letak penulisan coding jQuery sebaiknya berada di dalam
$(document).ready(), untuk memastikan semua script jQuery dijalankan setelah semua objek DOM selesai diload untuk halaman web tersebut,
$(document).ready(function(){
// coding jQuery
});
Contoh jQuery sederhana:
$(document).ready(function(){
$("a").click(function(event){
alert("Thanks for visiting!");
});
});
Untuk mempermudah penggunaan dan aplikasi jQuery, maka diharapkan
pengguna sudah memiliki basic:
- HTML dan pengetahuan tentang DOM (Document Object Modelling)
- CSS (Cascading Style Sheet)
- Sedikit pengetahuan tentang Javascript dasar.
a. HTML dan DOM
HTML merupakan suatu bahasa yang digunakan untuk membuat halaman web. Bahasa ini menggunakan tag-tag khusus untuk menandai elemen-elemen yang terdapat dalam web.
Contoh:
<html>
<head>
<title>Halaman Websiteku</title>
</head>
<body>
<div id=”Div1”>
<a href=www.google.com> Link ke Google </a>
</div>
<p>
Halaman yang menyediakan link ke Google
</p>
</body>
DOM (Document Object Modeling) adalah suatu cara untuk memodelkan objek-objek dalam halaman web (dianggap sebagai suatu dokumen). Hal ini dilakukan untuk mempermudah manipulasi dan pengaksesan elemen-elemen dari halaman tersebut.
b. CSS (Cascading Style Sheet)
CSS merupakan kumpulan style yang bertujuan untuk mengatur penampilan dari
objek/elemen suatu halaman web.
Contoh
#div1{
background-color: red;
text-align: center;
margin-left: 20px;
}
Kelebihan dan Kekurangan JQuery
Library jQuery mempunyai kemampuan :
1. Kemudahan mengakses elemen-elemen HTML
2. Memanipulasi elemen HTML
3. Memanipulasi CSS
4. Penanganan event HTML
5. Efek-efek javascript dan animasi
Kelemahan JQuery :
Meskipun diklaim jquery memiliki beban kerja yang ringan (load CPU dan RAM) untuk browser, tetap saja lebih ringan (cepat di-load) website yang tidak menggunakan jquery, alias HTML murni.
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. Solusi: host jquery pada situs lain, seperti Google yang menyediakan request jquery dari servernya.
Sintaks, Selector, Attribute Selector,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:
Element: untuk memilih element dengan tag tertentu.
Syntax: $(“E”).
Contoh: $(“a”) akan menyelect semua elemen tag <a> di halaman web.
ID: untuk memilih element dengan ID tertentu.
Syntax: $(“#id”).
Contoh: $(“#content”) akan menyelect semua elemen dengan id=”content”
tanpa melihat tag elementnya.
Class: untuk memilih element dengan class tertentu.
Syntax: $(“.class”).
Contoh: $(“.myClass”) akan menyelect semua elemen dengan
class=”myClass” tanpa melihat tag elementnya.
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’.
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>.
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>.
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
: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.
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).
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.
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.
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".
3. 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
Event yang Ada pada JQuery
1. Keypress()
Merupakan Event pemicu untuk mengikat fungsi dari perintah tombol dari element yang dipilih.
$( selector ).keypress() //memicu keypress untuk pemilihan item
$( selector ).keypress( function ) // Optional. Menjalankan fungsi yang spesifik ketika ada pemicu berupa penekanan tombol keyboard. Dari sekian tombol yang ada pada keyboard,akan memiliki devinisi kode yang berbeda-beda.
Contoh : Perintah ketika kita memberian fungsi ketika ada pemicu pada penekanan kode 27 = Esc.
2. Click()
Digunakan untuk memicu event pada element HTML saat user mengklik elemen yang mempunyai fungsi click() ini. Event click dikirim ke elemen saat pointer mouse diatas elemen dan tombol mouse ditekan lalu dilepaskan.
$(“p”).click() kode ini berarti bahwa JQuery mencari tag <p> HTML dan menunggu diklik oleh user. $(this).hide() kode ini berarti bahwa isi dari paragraph dihide.
3. fadeIn()
Digunakan untuk menampilkan elemen dengan efek pudar. $(‘selector’).fadeIn(‘durasi’,’callback’)
Keterangan:
Selector digunakan untuk memilih elemen yang akan dikenakan efek fadeIn. ‘durasi’ adalah waktu yang menunjukkan berapa lama efek fade ini akan berlangsung
4. Css();
jQuery juga mempunyai kemampuan dalam hal memanipulasi CSS. Ada 3 fungsi utama dalam jQuery untuk melakukan manipulasi.
$(selector).css(name,value)
$(selector).css({properties})
$(selector).css(name)
Fungsi css() berguna untuk mendapatkan atau set sebuah properti CSS atau lebih untuk elemen yang dipilih. Jika parameter name dan value diisi, artinya kita me-set nilai dari properti CSS. Untuk me-set nilai-nilai untuk properti CSS lebih dari satu, bisa gunakan {properties} Jika hanya untuk mendapat nilai dari properti CSS yang diinginkan dari elemen yang dipilih cukup isi parameter name saja.
Implementasi JQuery
Kemudahan atau kenapa orang banyak menggunakan framework javascript ini adalah karena banyaknya plugin aplikasi yang siap jadi atau siap digunakan. Plugin adalah semacam fungsi atau fitur tambahan yang digabungkan ke dalam sebuah JQuery mempercepat atau memudahkan dalam pembangunan sebuah website.
Dibawah ini adalah beberapa plugin jquery yang sering digunakan oleh beberapa web developer dalam membuat atau membangun sebuah website, diantaranya:
1. Drop-Down-Menu
Jika dalam sebuah website terdiri dari beberapa menu, dan dari menu tersebut ada sub menu lagi, maka cocok menggunakan drop down menu. Drop down menu ini juga mendukung multi level menu (menjadi sub-sub menu yang lebih banyak), selain itu menu dropdown ini juga dilengkapi dengan fasilitas timeout effect. Timeout effect ini digunakan ketika lama waktu mouse over atau mouseout.
2. Tool-Tips
Tool tips adalah bubble/gelembung atau semacam kotak informasi digunakan untuk menginformasikan sesuatu ketika mouse didekatkan pada sebuah teks, gambar, tombol atau elemen lain dalam sebuah web yang muncul diatas elemen tersebut. Biasanya informasi yang disuguhkan adalah informasi yang pendek. Cara kerjanya adalah ketika mouse didekatkan, maka akan muncul bubble. Fasilitas lebih dari bubble ini adalah desainnya yang cantik, seperti fasilitas tombol close, background shadow, dll.
3. Autocomplete-Search
Plugin ini digunakan untuk melakukan pencarian secara real time, dimana ketika kita memasukan kata atau huruf dalam sebuah teks input dalam sebuha web, secara otomatis hasil pencarian akan muncul seusai dengan yang kita masukan secara real time. Plugin ini mirip seperti pencarian pada website facebook, sehingga sangat menarik untuk dicoba.
4. Validasi-Form
Plugin ini digunakan untuk melakukan validasi data dalams sebuah form, seperti pengecekan e-mail, pengecekan password, username dan input lainnya secara real time (tidak menekan tombol submit). Jadi ketika user memasukan teks atau huruf, maka plugin ini akan melakukan validasi terhadap inputan user.
Langkah Pembuatan:
Plugin ini digunakan untuk animasi image dalam sebuah website, plugin ini menggantikan fungsi flash sebagai animasi. Jadi dengan plugin ini, kita bisa menganimasikan image yang ada menjadi sebuah animasi seperti fade in, fade out, slide show, scroll.
6. Teks-Berjalan
Plugin ini digunakan untuk memannipulasi teks, sehingga teks yang kita tampilkan kelihatan menarik, seperti berjalan dari kiri ke kanan atau sebaliknya atau dari atas ke bawah, mirip fungsi marquee dalam tag HTML, tetapi dengan plugin ini, teks berjalan lebih lembut.
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.
Sejarah Perkembangan JQuery
John Resig merupakan otak dibalik jQuery, karyanya ini pertama kali diumumkan di NYC BarCamp pada awal tahun 2006. Di situs webnya dia mencatat, ia menciptakan jQuery karena ia tidak puas dengan library yang saat itu tersedia dan merasa bahwa seharusnya framework-framework tersebut bisa jauh lebih baik dengan mengurangi “syntactic fluff” dan menambahkan control khusus untuk tindakan-tindakan yang bersifat umum.
Kemudian para pengembang datang untuk membantu menyempurnakan librari ini, dan akhirnya menghasilkan rilis stabil pertama dari jQuery versi 1.0 pada tanggal 2006. Sejak itu, jQuery telah berkembang ke versi 1.7.1 dan telah mempunyai plug-in yang banyak. Sebuah plug-in adalah ekstensi dari jQuery yang bukan bagian dari library inti.
Perkembangan versi jQuery:
1. JQuery versi 1.0 (1.0.1, 1.0.2, 1.0.3, 1.0.4)
2. JQuery versi 1.1 (1.1.1, 1.1.2, 1.1.3, 1.1.3.1, 1.1.4)
3. JQuery versi 1.2 (1.2, 1.2.1, 1.2.2, 1.2.3, 1.2.4, 1.2.5, 1.2.6)
4. JQuery versi 1.3 (1.3.1, 1.3.2)
5. JQuery versi 1.4 (1.4.1, 1.4.2, 1.4.3, 1.4.4)
6. JQuery versi 1.5 (1.5.1, 1.5.2)
7. JQuery versi 1.6 (1.6.1, 1.6.2, 1.6.3, 1.6.4)
Sekarang JQuery dikembangkan oleh team developer yang dipimpin oleh Dave Metvin. Dipakai oleh lebih dari 55% dari 10.000 website yang paling sering dikunjungi. JQuery menjadi Library Javascript yang paling popular Sekarang.
Script JQuery dibuat untuk memudahkan pengaturan document seperti menyeleksi object dengan element DOM dan membuat aplikasi dengan AJAX. Jquery juga menyediakan layanan atau support para developers untuk membuat plug-ins di dalam bahasa Javascript tentunya. Sehingga memungkinkan para developer website membuat website lebih interaktif dengan animasi, efek – efek, tema dan widget. Dengan menggunakan JQuery kita bisa meluapkan kreatifitas untuk membuat website dinamis.
Microsoft dan Nokia telah mengumumkan akan mengemas JQuery di platform mereka. Microsoft awalnya mengadopsinya dalam Visual Studio untuk digunakan dalam ASP.NET AJAX dan ASP.NET MVC Framework, sedangkan Nokia akan mengintegrasikannya dalam kerangka Web Run-Time mereka.
Perbedaan versi pada Jquery
Versi baru biasanya terdapat penambahan fungsi baru dari fungsi jquery yang sebelumnya. Tetapi pasti memiliki besar kapasitas yang lebih besar dari versi yang sebelumnya sehingga dengan versi yang baru dapat memperberat beban dan loading pada aplikasi website yang dibuat. Maka dari itu kita harus mempertimbangkan ketika kita memakai versi jquery yang kita akan gunakan.
Perbedaan Jquery.js (tanpa min) dengan jquery.min.js(menggunkan min).
Dari keduanya mempunyai kegunaan dan fungsi sama. Penggunaan “min” menandakan bahwa jquery tersebut telah dikompres (compress) sehingga muatan atau bebanya telah terkurangi dengan tujuan untuk mempercepat waktu loading. Compress jquery dilakukan dengan menghilangkan beerapa keterangan dan spasi yang sebenarnya berfungsi untuk memudahkan pengguna saat membuat desain baru dengan memanfaatkan jquery. Maka dari itu jika sekedar pengguna lebih baik menggunakan jquery.min.js agar loading lebih cepat.
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.
Cara menggunakan JQuery
Download file jQuery terbaru dari
http://docs.jquery.com/Downloading_jQuery
Import file jquery.js yang sudah didownload ke halaman web yang ingin menggunakan jQuery.
<script src="jquery.js" type="text/javascript">
Notasi penggunaan jQuery yang lazim digunakan adalah dengan menambahkan tanda $.
Letak penulisan coding jQuery sebaiknya berada di dalam
$(document).ready(), untuk memastikan semua script jQuery dijalankan setelah semua objek DOM selesai diload untuk halaman web tersebut,
$(document).ready(function(){
// coding jQuery
});
Contoh jQuery sederhana:
$(document).ready(function(){
$("a").click(function(event){
alert("Thanks for visiting!");
});
});
Untuk mempermudah penggunaan dan aplikasi jQuery, maka diharapkan
pengguna sudah memiliki basic:
- HTML dan pengetahuan tentang DOM (Document Object Modelling)
- CSS (Cascading Style Sheet)
- Sedikit pengetahuan tentang Javascript dasar.
a. HTML dan DOM
HTML merupakan suatu bahasa yang digunakan untuk membuat halaman web. Bahasa ini menggunakan tag-tag khusus untuk menandai elemen-elemen yang terdapat dalam web.
Contoh:
<html>
<head>
<title>Halaman Websiteku</title>
</head>
<body>
<div id=”Div1”>
<a href=www.google.com> Link ke Google </a>
</div>
<p>
Halaman yang menyediakan link ke Google
</p>
</body>
DOM (Document Object Modeling) adalah suatu cara untuk memodelkan objek-objek dalam halaman web (dianggap sebagai suatu dokumen). Hal ini dilakukan untuk mempermudah manipulasi dan pengaksesan elemen-elemen dari halaman tersebut.
b. CSS (Cascading Style Sheet)
CSS merupakan kumpulan style yang bertujuan untuk mengatur penampilan dari
objek/elemen suatu halaman web.
Contoh
#div1{
background-color: red;
text-align: center;
margin-left: 20px;
}
Kelebihan dan Kekurangan JQuery
Library jQuery mempunyai kemampuan :
1. Kemudahan mengakses elemen-elemen HTML
2. Memanipulasi elemen HTML
3. Memanipulasi CSS
4. Penanganan event HTML
5. Efek-efek javascript dan animasi
Kelemahan JQuery :
Meskipun diklaim jquery memiliki beban kerja yang ringan (load CPU dan RAM) untuk browser, tetap saja lebih ringan (cepat di-load) website yang tidak menggunakan jquery, alias HTML murni.
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. Solusi: host jquery pada situs lain, seperti Google yang menyediakan request jquery dari servernya.
Sintaks, Selector, Attribute Selector,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:
Element: untuk memilih element dengan tag tertentu.
Syntax: $(“E”).
Contoh: $(“a”) akan menyelect semua elemen tag <a> di halaman web.
ID: untuk memilih element dengan ID tertentu.
Syntax: $(“#id”).
Contoh: $(“#content”) akan menyelect semua elemen dengan id=”content”
tanpa melihat tag elementnya.
Class: untuk memilih element dengan class tertentu.
Syntax: $(“.class”).
Contoh: $(“.myClass”) akan menyelect semua elemen dengan
class=”myClass” tanpa melihat tag elementnya.
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’.
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>.
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>.
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
: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.
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).
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.
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.
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".
3. 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
Event yang Ada pada JQuery
1. Keypress()
Merupakan Event pemicu untuk mengikat fungsi dari perintah tombol dari element yang dipilih.
$( selector ).keypress() //memicu keypress untuk pemilihan item
$( selector ).keypress( function ) // Optional. Menjalankan fungsi yang spesifik ketika ada pemicu berupa penekanan tombol keyboard. Dari sekian tombol yang ada pada keyboard,akan memiliki devinisi kode yang berbeda-beda.
Contoh : Perintah ketika kita memberian fungsi ketika ada pemicu pada penekanan kode 27 = Esc.
2. Click()
Digunakan untuk memicu event pada element HTML saat user mengklik elemen yang mempunyai fungsi click() ini. Event click dikirim ke elemen saat pointer mouse diatas elemen dan tombol mouse ditekan lalu dilepaskan.
$(“p”).click() kode ini berarti bahwa JQuery mencari tag <p> HTML dan menunggu diklik oleh user. $(this).hide() kode ini berarti bahwa isi dari paragraph dihide.
3. fadeIn()
Digunakan untuk menampilkan elemen dengan efek pudar. $(‘selector’).fadeIn(‘durasi’,’callback’)
Keterangan:
Selector digunakan untuk memilih elemen yang akan dikenakan efek fadeIn. ‘durasi’ adalah waktu yang menunjukkan berapa lama efek fade ini akan berlangsung
4. Css();
jQuery juga mempunyai kemampuan dalam hal memanipulasi CSS. Ada 3 fungsi utama dalam jQuery untuk melakukan manipulasi.
$(selector).css(name,value)
$(selector).css({properties})
$(selector).css(name)
Fungsi css() berguna untuk mendapatkan atau set sebuah properti CSS atau lebih untuk elemen yang dipilih. Jika parameter name dan value diisi, artinya kita me-set nilai dari properti CSS. Untuk me-set nilai-nilai untuk properti CSS lebih dari satu, bisa gunakan {properties} Jika hanya untuk mendapat nilai dari properti CSS yang diinginkan dari elemen yang dipilih cukup isi parameter name saja.
Implementasi JQuery
Kemudahan atau kenapa orang banyak menggunakan framework javascript ini adalah karena banyaknya plugin aplikasi yang siap jadi atau siap digunakan. Plugin adalah semacam fungsi atau fitur tambahan yang digabungkan ke dalam sebuah JQuery mempercepat atau memudahkan dalam pembangunan sebuah website.
Dibawah ini adalah beberapa plugin jquery yang sering digunakan oleh beberapa web developer dalam membuat atau membangun sebuah website, diantaranya:
1. Drop-Down-Menu
Jika dalam sebuah website terdiri dari beberapa menu, dan dari menu tersebut ada sub menu lagi, maka cocok menggunakan drop down menu. Drop down menu ini juga mendukung multi level menu (menjadi sub-sub menu yang lebih banyak), selain itu menu dropdown ini juga dilengkapi dengan fasilitas timeout effect. Timeout effect ini digunakan ketika lama waktu mouse over atau mouseout.
2. Tool-Tips
Tool tips adalah bubble/gelembung atau semacam kotak informasi digunakan untuk menginformasikan sesuatu ketika mouse didekatkan pada sebuah teks, gambar, tombol atau elemen lain dalam sebuah web yang muncul diatas elemen tersebut. Biasanya informasi yang disuguhkan adalah informasi yang pendek. Cara kerjanya adalah ketika mouse didekatkan, maka akan muncul bubble. Fasilitas lebih dari bubble ini adalah desainnya yang cantik, seperti fasilitas tombol close, background shadow, dll.
3. Autocomplete-Search
Plugin ini digunakan untuk melakukan pencarian secara real time, dimana ketika kita memasukan kata atau huruf dalam sebuah teks input dalam sebuha web, secara otomatis hasil pencarian akan muncul seusai dengan yang kita masukan secara real time. Plugin ini mirip seperti pencarian pada website facebook, sehingga sangat menarik untuk dicoba.
4. Validasi-Form
Plugin ini digunakan untuk melakukan validasi data dalams sebuah form, seperti pengecekan e-mail, pengecekan password, username dan input lainnya secara real time (tidak menekan tombol submit). Jadi ketika user memasukan teks atau huruf, maka plugin ini akan melakukan validasi terhadap inputan user.
Langkah Pembuatan:
- Pertama, buatlah form ( form.html ):
- Setelah itu kita menyisipkan script dibawah ini untuk menghubungkan file library JQuery dengan file form.html. Hal ini agar kita dapat menggunakan Jquery tersebut. misalkan kita memakai jquery-1.4.js. Sisipkan diantara tag <head> </head>.
- Mengatur validasi
- Masih pengetikan di <head></head>, ketik scipt di bawah ini.
- Mengaktifkan validasi
- Pengetikan di antara <script></script>, ketik script di bawah ini.
- Mengecek ada tidaknya text di dalam suatu form
- Pengetikan di antara $("#form1").validate, ketik scipt di bawah ini.
- Mengatur password
- Buat form password dan ulang password. Letakkan scipt di bawah form Nama.
- Memvalidasi panjang form password dan form ulang password yang harus sama dengan password. Tambahkan scipt di bawah ini di dalam rules, message.
Plugin ini digunakan untuk animasi image dalam sebuah website, plugin ini menggantikan fungsi flash sebagai animasi. Jadi dengan plugin ini, kita bisa menganimasikan image yang ada menjadi sebuah animasi seperti fade in, fade out, slide show, scroll.
6. Teks-Berjalan
Plugin ini digunakan untuk memannipulasi teks, sehingga teks yang kita tampilkan kelihatan menarik, seperti berjalan dari kiri ke kanan atau sebaliknya atau dari atas ke bawah, mirip fungsi marquee dalam tag HTML, tetapi dengan plugin ini, teks berjalan lebih lembut.
0 komentar:
Posting Komentar