SAY ‘HI’ TO JQUERY
Makalah
ini disusun sebagai tugas mata kuliah Teknologi Informasi dan Komunikasi
Dosen pengampu : Septia Lutfi,S.Kom, M.Kom
Oleh
Dyah Ayu Wulandari
1102412106
KURIKULUM
DAN TEKNOLOGI PENDIDIKAN
FAKULTAS
ILMU PENDIDIKAN
UNIVERSITAS
NEGERI SEMARANG
2013
BAB I
PRNDAHULUAN
A.
Latar
Belakang
Dalam dunia pengembangan aplikasi berbasis web, maka
bahasa scripting merupakan bahasa pemrograman yang menjadi pilihan utama,
karena kemudahan dan kecepatan untuk bisa melihat hasil dari yang
dikerjakannya. Jika kita menggunakan bahasa scripting PHP, maka kita dapat
menggunakan software yang open source dan bebas digunakan (free)
e-accelerator, Turk MMCache, atau pun phpobfuscator. Jika kita
menggunakan JavaScript, maka kita dapat menggunakan software untuk mengkompresi
dengan menggunakan packer. Salah satunya adalah packer yang dibuat oleh Dean
Edward. Software-software yang digunakan untuk membuat program script yang kita
miliki menjadi sulit dibaca, karena menggunakan teknik dan algoritma yang sudah
terbukti kehandalannya. Umumnya software-software tersebut membuat hasil
kerjanya tidak bisa dikembalikan ke dalam bentuk semula secara persis sama.
JQuery adalah librari JavaScript yang memungkinkan
kita untuk membuat program web pada suatu halaman web, tanpa harus secara
eksplisit kita menambahkan event atau pun properti pada halaman web tersebut. 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.
Tujuan
Makalah ini disusun agar kita dapat mengenal lebih
dalam tentang jQuery, yang mana dapat membantu para developer web dalam proses
pembuatan webnya. Terlebih jQuery memiliki lisensi open source yang bisa
diperoleh secara cuma-cuma, dan dapat digunakan untuk kepentingan komersial,
tanpa ada tuntutan untuk membayar kepada pembuat jQuery. Lisensi opensource
dari jQuery adalah MIT dan LGPL. Dengan bengitu bagi para developer web perlu
mengenal lebih jauh tentang jQuery.
BAB
II
PEMBAHASAN
A.
Tentang
JQuery
Semenjak dirilis pertama kali pada tahun 2006 oleh
john Resig, jQuery telah mencuri perhatian para developer web. Buktinya, pada
tahun-tahun berikutnya jQuery telah banyak digunakan oleh website -
website terkemuka di dunia seperti Google, Microsoft, intel , Nokia,
Oracle , IBM, DELL, BBC, NBC, ESPN, EAPN, EA Sport, Twitter, Facebook, Amazon,
Techorati, Youtobe Apple, Wordpress, Mozila, Netflix , Digg, Time, dan masih
banyak lagi. Bahkan website lokalpun tidak mau ketinggalan, Lihat saja Detik,
Studio 21 (21cineplex.com). Indosiar, Vivanews, Kompas, termasuk IlmuGrafis
tentunya dan lain-lain. Dan sampai saat ini sudah tercatat ada jutaan website
yang telah menggunakan jQuery.
JQuery
merupakan suatu framework (library) javascript yang menekankan interaksi antara
javascript dan HTML, atau bisa disebut juga sebagai cara baru dalam menuliskan
kode javascript. JQuery akan mempercepat dan meringkaskan library javascript
sehingga dengan menggunakan jQuery kita dapat mempercepat perpindahan dokumen
HTML, penanganan event (event handling), pembuatan animasi didalam web sehingga
web kita tampak seperti flash, dan juga interaksi AJAX untuk pengembangan web
yang modern dan cepat. Jquery memiliki slogan “write less, do more” yang kurang
lebih maksudnya adalah kesederhanaan dalam penulisan code, tapi dengan hasil
yang lebih banyak.
JQuery adalah javascript Library ->
kumpulan kode / fungsi Javascript siap pakai, sehingga mempermudah dan
mempercepat kita dalam membuat kode Javascript. Secara standar. Apabila kita
membuat kode Javascript, maka diperlukan kode yang cukup panjang, bahkan
terkadang sangat sulit dipahami. Nah, disinilah peran jQuery sebagai Javascript
Library, dimana kita bisa langsung memanggil fungsi yang terdapat di dalam
Library tersebut, menariknya kita hanya memerlukan satu/dua baris untuk membuat
warna selang-seling pada suatu tabel, yaitu:
jQuery(‘table
trinth-child(odd)’) .addClass (‘odd’) ;
Kesimpulannya, jQuery menyederhanakan kode
Javascript. Hal ini sesuai dengan slogannya ‘Write less, do
more ‘ cukup tulis sedikit, tapi bisa melakukan banyak hal.
Berikut
adalah contoh sederhana dari jQuery
Penjelasan:
1. Pertama, kita harus menyertakan
(include) file library JQuery. Pastikan letak dari file library sudah benar.
- Perintah-perintah
JQuery.
- Baris 8 merupakan perintah inisialisasi dimana saat
halaman (dokumen) siap ditampilkan maka jalankan juga perintah yang ada
di dalamnya. Hal ini mirip dengan event onLoad yang biasanya diletakkan
di tag .
- Baris 9-11 maksudnya adalah mendefinisikan action yang
terjadi saat link dengan class=show ( $(‘a.show’) ) diklik (lihat link
baris ke-22). Jadi jika link di-klik maka paragraf dengan nama
class=jquery ( $(‘p.jquery’) ) akan tampil dengan durasi tampil “slow”.
Paragraf yang akan ditampilkan adalah paragraf baris ke-24 sampai 27.
- Baris 13-15 sebaliknya, akan menyembunyikan isi dari
paragraf yang mengandung nama class=jquery.
- Isi
dari halaman. Perhatikan nama class dari masing-masing object.
B.
Versi JQuery
Mengenai perkembangan versi dari JQuery sendiri saat ini (November
2011) telah ada jQuery versi 1.7 (Release Notes). 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)
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.
Struktur
penggunaan jquery
Jquery merupakan library yang berupa file javascript. Jquery dapat
mempermudah kita dalam memanfaatkan dan menggunakan javascript. Sebelum dapat
digunakan, jquery harus di include-kan terlebih dahulu. Letak dari
script includenya pun berada pada tag <head></head>.
<head>
<script type=”text/javascipt"
src=”jquery-1.4.4.min.js”> </script> </head>
Salah
satu keuntungan menggunakan jquery adalah kemudahan dalam mengakses
DOM(Document Object Model). Untuk dapat mengakses DOM denga sempurna tentu
semua DOM harus sudah siap untuk diakses. Untuk memastikan semua DOM telah siap
diakses, Jquery menyediakan event.
$(document)
.ready()
Event
ini hampir sama dengan onLoad yang dimiliki oleh native javascript. Bedanya
fungsi di dalam $(document).ready() akan tertrigger saat semua DOM telah siap,
sedangkan pada onLoad, semua elemen yang ada dalam halaman harus telah selesai
terdownload terlebih dahulu, termasuk file gambar.
C.
Penggunaan JQuery
Pada
penggunaan jQuery ini tidak terlepas dengan javascript karena library atau
framework jquery ini ditulis menggunakan bahasa javascript. Sebenarnya ada
beberapa cara teknik penulisan. Tata cara penulisan yang biasa digunakan adalah
seperti ini.
1.
Pendefinisia
jQuery sendiri, kode yang digunakan bisa berupa jQuery() atau $().
2.
Selector,
selector biasanya disisipkan pada pendefinisian diatas misalkan seperti ini jQuery(‘#kotak’)
. selector merupakan perintah yang digunakan untuk membuat manipulasi pada
selector HTML yang didefinisikan diatas. Selector yang umum digunakan biasanya
adalah tag HTML itu sendiri, nama ID, nama CLASS, dan atribut-atribut
yang ada pada HTML. Selector disini bisa kita sebut juga sebagai target.
Target dari manipulasi jQuery pada tampilan HTML.
3.
Method,
pada method disini diletakan setelah selector. Pada method ini merupakan fungsi
untuk memanipulasi selector yang menjadi target jQuery tersebut. Method disini
bisa berupa event, manipulasi data, memberikan effect tampilan atau mendapatkan
informasi dari suatu object. Kebanyakan didalam function method ini terdapat
beberapa macam properties atau function lagi untuk pemilihan dari karakter dari
method tersebut.
Membuat Fuction jQuery
Jquery adalah satu framewok javascript yang mendukung pluggin
dengan sangat mudah. Sehingga banyak kita dapat dengan mudah men jumpai
plugin-plugin yang berada diinternet. Contoh plugin yang terkenal adalah plugin
yang dikembangan oleh jQuery UI. Sebenarnya kita juga bias mendevelop suatu
plugin sendiri. Disini akan dijelaskan sedikit mengenai pembuatan plugin dan
fungsi didalam jQuery. Untuk penulisan jQuery secara sederhana adalah sebagai
berikut:
jQuery.fn.myPlugin
= function() {
// Do your awesome plugin stuff here
};
Jika kita menggunakan
script diatas, kelemahanya adalah function jQuery tersebut dapat terjadi
bentrok dengan plugin jQuery yang lain. Karena didalam perintah function
tersebut, harus dituliskan menggunakan jQuery juga untuk pendefinisian
jQuery-nya. Untuk masalah diatas dapat ditanggulangi dengan menggunakan
perintah berikut:
(function(
$ ) {
$.fn.myPlugin = function() {
// Do your awesome plugin stuff here
};
})(
jQuery );
Dengan pemformatan
penulisan function diatas, kita dapat menggunakan symbol dollar ‘$’ untuk dapat
meloloskan dari function jQuery lain. Untuk lebih jelasnya mengenai penggunaan
function jQuery yang sederhana bias menggunakan contoh berikut ini,
(function(
$ ){
$.fn.maxHeight = function() {
var max = 0;
this.each(function() {
max = Math.max( max, $(this).height() );
});
return max;
};
})(
jQuery );
jQuery(document).ready(function(){
var tallest=$('div').maxHeight();
alert(tallest);
});
Hasil keluaran dari script diatas akan menujukan nilai tinggi dari
tag HTML div melalui notifikasi perintah alert. Dari fungsi yang kita buat,
yang perlu kita soroti adalah fungsi this dan $(this). Untuk fungsi this.each
sendiri, memang harus ditulis this seperti itu bukan dengan $(this). Jika kita
tuliskan $(this) disitu maka javascript akan mengeluarkan perintah error atau
tidak jalan. Karena jQuery sendiri akan mendefinisikan perintah berikut sebagai
$($(this)). Jadi kita tidak perlu menuliskan perintah $(this).each akan tetapi
this saja. Kemudian setelah this didalam fungsi each(). Kita akan menjumpai
dengan $(this). Kalo pada bagian ini, kita tuliskan secara default atau seperti
biasa. Karena perintah $(this) menerangkan target yang sedang diseleksi oleh
fungsi each().
Selain itu,
didalam penulisan function ini kita bisa membuat fungsi yang dapat kita berikan
options dan default dalam membuat framework fungsi buatan kita sendiri. Contoh
scriptnya adalah seperti ini.
(function(
$ ){
$.fn.tooltip = function( options ) {
//Create
some defaults, extending them with any options that were provided
var settings = $.extend( {
'location' : 'top',
'background-color' : 'blue'
}, options);
return this.each(function() {
// Tooltip plugin code here
});
};
})(
jQuery );
Jika kita function
tersebut dengan perintah berikut ini.
$('div').tooltip({
'location' : 'left'
});
Maka isi kandungan
informasi fungsi tooltip tersebut adalah.
{
'location' : 'left',
'background-color' : 'blue'
}
Hal tersebut terjadi
karena, funsi yang kita set adalah location left dan default yang ada adalah
background-color:blue dan location:top. Kedua nilai tersebut, default dan nilai
function yang kita set kita lakukan fungsi extends di jQuery maka, menampilkan
isi darifungsi diatas. Dimana nilai default akan tereplace dengan nilai yang
kita set. jika yang kita set hanya sebagian argument dari fungsi tersebut, maka
nilai yang lainya akan terset secara default.
Berikut merupakan
contoh jadi dari program yang telah dibuat.
<html>
<head>
<title>Untitled
Document</title>
<script
src="jquery-1.4.js"
type="text/javascript"></script>
<script>
(function(
$ ){
$.fn.tooltip = function( options ) {
var settings = $.extend( {
'position': 'absolute',
'backg' : 'blue',
'data':'Nilai Default',
'top':'2px',
'right':'10px',
'width':'200px'
}, options);
$('.tip').show();
$('.tip').css({'position':settings.position,'background-color':settings.backg,'top':settings.top,'right':settings.right,'width':settings.width});
$('.tip').text(settings.data);
};
})(
jQuery );
jQuery(document).ready(function(){
$('div').hover(
function(){
jQuery('.tip').tooltip({'top':'1px','right':'2px','backg':'red','width':'100px'});
},function(){
jQuery('.tip').hide();
});
});
</script>
<style>
#tool{
width:260px;
position:relative;
}
#tool
img{
height:40px;
width:260px;
height:200px;
}
</style>
</head>
<body>
<div
id="tool">
<img src="Copy of DSC_0133.jpg" />
<span class="tip"
style="display:none">INI ADALAH TOOLTIP SEDERHANA</span>
</div>
</body>
</html>
Event yang ada pada Javascript
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. Devinisi kode dapat dilihat dalam
table berikut:
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.
3.
Fandeln
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.
D.
Kemampuan 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 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. Merespon 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 Harus 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 Javascipt
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.
E.
Alasan Menggunakan JQuery
Ada beberapa keunggulan jQuery dibandingkan Javascript
Library pendahulunya seperti Phototype, Mootools , YUI (Yahoo User Interface).
Berikut beberapa alasan yang membuktikan jQuery sangat powerfull dan layak
dijadikan pilihan, yaitu:
1. jQuery telah banyak digunakan oleh website-website terkemuka di dunia.
2. Kompatibel/cocok
dengan semua browser yang popular, seperti Mozila, Internet Explorer, Safari, Chrome, Opera.
3. Kompatibel
dengan semua versi CSS (CSS 1 sampai dengan CSS 3)
4. Dokumentasi,
tutorial dan contoh-contohnya lengkap, silahkan kunjungi website resminya
di http://jquery/com
5. Didukung
oleh komunitas yang besar dan aktif, seperti forum,milis, blog, social engineering (twitter dan
facebook), website, dan tutorial.
6. Ketersediaan
plugin yang sangat banyak jumlahnya. Plugin merupakan kemampuan tambahan yang bisa disertakan
pada jQuery.
7. Filenya
hanya satu dan ukurannya pun kecil, hanya sekitar 20 KB, sehingga cepat diakses
8. Open
source/free (gratis) dengan lisensi dari GNU General Public Lisence dan MIT
License.
9. jQuery lebih banyak digunakan oleh para developer web dibandingkan Javascript
Libary lainnya
F.
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.
Contoh
:
$(this).hide()– menyembunyikan elemen saat ini
$("p").hide()– menyembunyikan semua
paragraf atau konten dari tag <p>
$(".test").hide()– menyembunyikan elemen
yang mempunya class="test"
$("#test").show()– menampilkan elemen yang
mempunyai id="test"
Karena hampir
segala sesuatu yang
kita lakukan bila menggunakan jQuery membaca atau memanipulasi document
object model (DOM),
kita perlu memastikan bahwa
kita mulai menambahkan event
segera setelah DOM siap.
Untuk
melakukan hal ini, kita menambahkan kode ready event untuk dokumen.
$(document).ready(function(){
//kode
anda di sini
});
Kode di
atas berarti kita
ingin kode dijalankan
apabila halaman HTML
telah di-load semuanya.
Atau
dengan kode javascript biasanya seperti ini :
window.onload
= function(){ //kode anda di sini }
Sekarang
mari kita lihat pada contoh Kode 12.
$(".tombol1").click(function(){
$("p").hide(1000);
});
Kode $(".tombol1") adalah
jQuery selektor. Di
mana kita memilih
elemen yang mempunyai
class=”tombol1” untuk kita
lakukan sesuatu. $ sendiri
adalah alias untuk
jQuery class. Oleh karena $()untuk membuat objek jQuery.
Kemudian kita tambahkan fungsi click(). Ini berguna untuk memberikan event
onclick untuk elemen yang kita pilih tadi (dalam hal ini adalah elemen
yang mempunya class=’tombol1’). Dan
kemudian melaksanakan fungsi
yang diberikan apabila event
onclick terjadi. Jadi
artinya apabila elemen
dengan class=”tombol1” diklik
maka lakukan fungsi
$("p").hide(1000);
Fungsi hide() dan
show() adalah fungsi built
in dari jQuery,
nanti akan kit a
lihat lebih lanjut fungsi-fungsi built in dari jQuery.
G.
Efek-efek
yang dihasilkan jQuery
Salah
satu kemampuan jquery adalah, adanya fungsi-fungsi efek yang siap pakai.
Biasanya untuk membuat efek memudar
di javascript, kita
harus membuat kode
yang lumayan panjang.
Tapi dengan menggunakan jquery cukup menggunakan fungsi
$(selector).fadeIn()
Berikut
adalah efek-efek siap pakai yang disediakanoleh jquery.
1.
jQuery
show() Effect
Berguna untuk
menampilkan elemen yang
tersembunyi. Untuk mengatur
elemen yang
tersembunyi
melalui CSS adalah display:none(bukan visibility:hidden).
Sintaks
:
Parameter
Deskripsi
speed Opsional. Menentukan kecepatan elemen muncul
dari hidden ke visible. Defaultnya
adalah
0.
Nilainya bisa berupa:
•
milliseconds (contoh : 1500)
•
"slow"
•
"normal"
•
"fast"
callback Opsional. Suatu fungsi yang akan
dijalankann apabila efek show selesai dijalankan.
$(selector).show(speed,callback)
Contoh
:
Kode
13. Contoh show()
<html>
<head>
<script
type="text/javascript" src="jquery.js"></script>
<script
type="text/javascript">
$(document).ready(function(){
$(".tombol1").click(function(){
$("p").show(1000,tampilkanAlert);
});
});
function
tampilkanAlert(){
alert("Paragraf sekarang
muncul");
}
</script>
</head>
<body>
<p
style=”display:none”>Ini adalah paragraph tersembunyi.</p>
<button
class="tombol1">Show</button>
</body>
</html>
2.
jQuery
hide() Effect
Berfungsi
untuk menyembunyikan elemen yang dipilih.
Sintaks
:
$(selector).hide(speed,callback)
Untuk
parameter speed dan callback adalah sama dengan show() effect.
Contoh
:
$(".tombol1").click(function(){
$("p").hide();
});
3.
jQuery
toggle() Effect
Adalah gabungan
fungsi hide dan
show. Jadi toggle() berfungsi menampilkan
yang tersembunyi,
menyembunyikan
yang tampak.
Sintaks
:
$(selector).toggle(speed,callback,switch)
Parameter Deskripsi
speed
Opsional.Menentukan kecepatan elemen
muncul dari hidden ke visible.
Defaultnya
adalah 0.
Nilainya
bisa berupa:
• milliseconds (contoh : 1500)
• "slow"
• "normal"
• "fast"
callback
Opsional. Suatu fungsi yang akan
dijalankann apabila efek show selesai
dijalankan.
Switch Opsional. Bernilai Boolean
• True, hanya untuk menampilkan semua elemen
• False, hanya menyembunyikan semua elemen
Jika
parameter ini diset, parameter speed dan callback parameters tidak bisa
digunakan.
Contoh
:
Kode
14. Contoh toggle()
<html>
<head>
<script
type="text/javascript" src="jquery.js"></script>
<script
type="text/javascript">
$(document).ready(function(){
$(".tombol1").click(function(){
$("p").toggle(true);
});
});
</script>
</head>
<body>
<p>Ini
adalah paragraf</p>
<p
style="display:none">Ini adalah paragraf lainnyayang belum
muncul</p>
<p>Jika bernilai
true hanya berfungsi
menampilkan, kalau false
hanya
menyembunyikan</p>
<button
class="tombol1">Tampilkan semua elemen</button>
</body>
</html>
4.
jQuery
slideDown() Effect
Menampilkan
elemen yang tersembunyi, secara efek sliding.
Sintaks
:
$(selector).slideDown(speed,callback)
Untuk
parameter speed dan callback adalah sama dengan fungsi show().
Contoh:
$(".tombol1").click(function(){
$("p").slideDown();
});
5.
jQuery
slideUp() Effect
Menyembunyikan
elemen secara efek sliding.
Sintaks
:
$(selector).slideUp(speed,callback)
Untuk
parameter speed dan callback adalah sama dengan fungsi show().
Contoh:
$(".tombol1").click(function(){
$("p").slideUp();
});
6.
jQuery
slideToggle() Effect
Gabungan
antara slideDown() dan slideUp(). Menyembunyikan elemen jika dalam keadaan
visible, menampilkan elemen jika dalam kedaan hidden.
Sintaks
:
$(selector).slideToggle(speed,callback)
Untuk
parameter speed dan callback adalah sama dengan fungsi show().
Contoh:
Kode
15. Contoh slideToggle()
<html>
<head>
<script
type="text/javascript" src="jquery.js"></script>
<script
type="text/javascript">
$(document).ready(function(){
$("#contact").click(function(){
$("#contact-box").slideToggle("slow");
});
});
</script>
</head>
<body>
<p><span
id="contact" style="cursor:hand;background-
color:#ababab;
padding:3 ;font-family:Verdana">Contact</span></p>
<div
id="contact-box"
style="background:#98bf21;height:200px;width:300px;position:relative;disp
lay:none;padding:10">
<form>
Nama
: <input type=text><p>
Email
: <input type=text><p>
Komentar
:<textarea rows=5></textarea><p>
<input
type=submit value=kirim>
</div>
<p>
jQuery
adalah 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.
<p>Sebelum
anda memulai mempelajari jQuery, anda harus mempunyai
pengetahuan
dasar mengenai HTML, CSS dan Javascript.
</body>
</html>
7.
jQuery
fadeIn() Effect
Menampilkan
elemen yang dipilih jika tersembunyi, secara efek memudar.
Sintaks
:
$(selector).fadeIn(speed,callback)
Untuk
parameter speed dan callback adalah sama dengan fungsi show().
Contoh:
$(".tombol1").click(function(){
$("p").fadeIn();
});
8.
jQuery
fadeOut() Effect
Menyembunyikan
elemen yang dipilih, secara efek memudar.
Sintaks
:
$(selector).fadeOut(speed,callback)
Untuk
parameter speed dan callback adalah sama dengan fungsi show().
Contoh:
Kode
16. Contoh fadeOut()
<html>
<head>
<style>
#box
{
background-color:#96BC43;
border:solid
3px #333333;
height:160px;
margin-top:30px;
}
</style>
<script
type="text/javascript" src="jquery.js"></script>
<script
type="text/javascript">
$(function(){
$('.fadeOut_box').click(function(){
$('#box').fadeOut("slow");
});
$('.fadeIn_box').click(function(){
$('#box').fadeIn("slow");
});
});
</script>
<body>
<a
href="#" class="fadeOut_box">fadeOut()</a>
<a
href="#" class="fadeIn_box">fadeIn()</a>
<div
id="box"></div>
</body>
</html>
9.
jQuery
fadeTo() Effect
Mengatur
tingkat kepudaran elemen terpilih menuju tingkat opacity yang ditentukan.
Sintaks
:
$(selector).fadeTo(speed,opacity,callback)
Untuk
parameter speed dan callback adalah sama dengan fungsi show().
Untuk
parameter opacity bisa bernilai 0 sampai 1.
Contoh
:
$(".tombol1").click(function(){
$("p").fadeTo(1000,0.6);
});
10.
jQuery
animate() Effect
Mengubah suatu
elemen dari satu
keadaan ke keadaan
yang lainnya. Keadaan
yang diubah ini berdasarkan CSS.
Nilai
properti CSS yang berubah secara berangsur-angsur, hal ini untuk menciptakan
efek animasi.
Nilai properti
CSS yang bisa
diubah adalah nilai
bertipe angka, baik
satuannya pixel atau
persen %. Untuk tipe string tidak bisa dianimasikan.
Sintaks
:
$(selector).animate(styles,speed,easing,callback)
Parameter Deskripsi
styles Wajib. Menentukan properti CSS dan nilainya
yang akan di-animasi.
Properti
CSS yang bisa di-animasi :
• backgroundPosition
• borderWidth
• borderBottomWidth
• borderLeftWidth
• borderRightWidth
• borderTopWidth
• borderSpacing
• margin
• marginBottom
• marginLeft
• marginRight
• marginTop
• outlineWidth
• padding
• paddingBottom
• paddingLeft
• paddingRight
• paddingTop
• height
• width •
maxHeight
• maxWidth
• minHeight
• maxWidth
• font
• fontSize
• bottom
• left
• right
• top
• letterSpacing
• wordSpacing
• lineHeight
• textIndent
speed Opsional. Menentukan kecepatan elemen muncul
dari hidden ke visible.
Defaultnya
adalah 0.
Nilainya
bisa berupa:
• milliseconds (contoh : 1500)
• "slow"
• "normal"
• "fast"
easing Opsional. Menentukan fungsi easing yang diset
pada speed animasi.
Built
in fungsi easing adalah:
• swing
• linear
callback Opsional. Suatu fungsi yang akan
dijalankann apabila efek show selesai
dijalankan.
Contoh
:
Kode
17. Contoh animate()
<html>
<head>
<script
type="text/javascript" src="jquery.js"></script>
<script
type="text/javascript">
$(document).ready(function()
{
$(".tombol1").click(function(){
$("#box").animate({height:"300px"});
});
$(".tombol2").click(function(){
$("#box").animate({height:"100px"});
});
});
</script>
</head>
<body>
<div
id="box"
style="background:#98bf21;height:100px;width:100px;margin:6px;">
</div>
<button
class="tombol1">Animasi</button>
<button
class="tombol2">Reset</button>
</body>
</html>
11.
jQuery
stop() Effect
Menghentikan
animasi yang sedang berjalan.
Sintaks
:
$(selector).stop(stopAll,goToEnd)
Parameter Deskripsi
stopAll Opsional. Bernilai boolean,
menentukan apakah menghentikan semua
animasi,
termasuk yang ngantri untuk dijalankan pada elemen yang dipilih
atau
tidak.
goToEnd Opsional. Bernilai Boolean, menentukan
apakah animasi yang sedang jalan
dikompletkan
atau tidak.
Parameter
ini hanya bisa digunakan jika parameter stopAll di-set.
Contoh
:
Kode
18. Contoh stop()
<html>
<head>
<script
type="text/javascript" src="jquery.js"></script>
<script
type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({height:300},"slow");
$("#box").animate({width:300},"slow");
$("#box").animate({height:100},"slow");
$("#box").animate({width:100},"slow");
});
$("#stop").click(function(){
$("#box").stop(false,true);
});
});
</script>
</head>
<body>
<p><button
id="start">Start
Animasi</button><buttonid="stop">Stop
Animasi</button></p>
<div
id="box"
style="background:#ababab;height:100px;width:100px;position:relative">
</div>
</body>
</html>
$(selector).delay()
Berguna
untuk men-set delay untuk semua fungsi yangmasih ngantri untuk elemen yang
dipilih.
Sintaks
:
$(selector).delay()
$(selector).dequeue()
Menjalankan
fungsi berikutnya yang lagi ngantri untuk elemen yang dipilih.
Sintaks
:
$(selector).dequeue()
$(selector).queue()
Menampilkan
fungsi yang ngantri untuk elemen terpilih.
Sintaks
:
$(selector).queue()
12.
jQuery
clearQueue() Effect
Menghentikan
semua fungsi yang lagi ngantri dan belum dijalankan.
Sintaks
:
$(selector).stop(queueName)
Parameter
queueName adalah nama antrian yang akan dihentikan.
Contoh
:
$("#stop").click(function(){
$("#box").clearQueue();
});
H.
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 mouse out.
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.
5. jQuery-Cycle-Plugin
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 dan banyak lagi efek yang lainnya. Web Sitenya: http://malsup.com
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 dan lebih banyak variasi. Web Sitenya:
http://remysharp.com. Dan masih banyak yang lainnya yang bisa dikunjungi di http://www.jqueryplugins.com
BAB III
PENUTUP
KESIMPULAN
JQuery
pertama kali dirilis pada tahun 2006 oleh John Resig yang dibuat lebih ramping
dari librari Prototype yang menjadi inspirasi dari librari JQuery. JQuery
adalah Javascript Library atau kumpulan kode/fungsi Javascript siap pakai,
sehingga mempermudah kita untuk membuat kode Javascript. Dengan kata lain
JQuery menyederhanakan JavaScrip, oleh sebab itu JQuery mempunyai semboyan “Write
les, do more”. jQuery mempunyai lisensi dibawah GNU General Public License
dan MIT License, artinya jQuery merupakan aplikasi Open Source. Ukuran jQuery
terbilang kecil, hanya 56 KB sehingga dengan menggunakan jQuery lebih cepat dan
mudah daripada menggunakan framework yang lain atau menggunakan Javascript
konvensional.
Ada beberapa alasan mengapa lebih
baik menggunakan JQuery daripada library lainnya, antara lain: Kompatibel
dengan hampir seluruh browser, jQuery telah digunakan oleh website-website
raksasa, Kompatibel dengan seluruh versi CSS (dari CSS 1 sampai CSS 3), dan
sebagainya. Kelebihan jQuery antara lain Write Less, Do More, jQuery menyederhanakan
penggunaan JavaScript, Mempercepat proses cooding JavaScript dalam sebuah
website, dan masih banyak kelebihan lainnya. Sedangkan kekurangan jQuery antara
lain Website yang menggunakan jQuery akan lebih lama di-load dibanding website
yang tidak menggunakan jQuery,dari sisi server hosting pun, CPU dan RAM harus
mengalokasikan resource yang mereka miliki untuk menangani request terhadap
jquery.
Penggunaan jQuery dalam web sangat
banyak, berikut plugin jQuery yang sering digunakan dalam web, plugin Drop-doen
menu,Datepicker, validasi form, teks berjalan, dan banyak plugin lainnya.
Plugin-plugin ini nantinya akan membantu dalam membangun web.
DAFTAR PUSTAKA
Desrizal . ____. Panduan
Lengkap PHP Ajax jQuery.
Jurnal.Muningmini. 2011. jQuery
Tutorial Write Less Do More. Jurnal.
Hasanudin . 2005 . Ajax dan jQuery
dalam Web Framework. Slide share.
Tidak ada komentar:
Posting Komentar