1. MAKALAH MENGENAI JQUERY
Tugas
Disusun guna melengkapi tugas Mata Kuliah Teknologi Komunikasi dan
Informasi
Oleh
Utia Fauziah Yahya (1102412021)
Rombel : 01
TEKNOLOGI PENDIDIKAN
FAKULTAS ILMU PENDIDIKAN
UNIVERSITAS NEGERI SEMARANG
TAHUN 2013-2014
2. BAB I
PENDAHULUAN
A. LATAR BELAKANG MASALAH
Perkembangan teknologi yang semakin maju dan pesat mengharuskan
kinerja teknologi dapat dimanfaatkan dan diimplementasikan pada berbagai
aspek kehidupan manusia. Tak dapat diragukan lagi perkembangan ilmu
komunikasi dan teknologi informasi mengalami kemajuan yang sangat pesat.
Bahkan dalam perkembangannya tak dapat dihitung dengan rentang waktu
bertahun-tahun, namun cukup dengan bulan saja sudah mengalami kemajuan
yang sidnifikan.
Hal ini ditandai dengan berkembangnya teknologi internet yang dapat
memudahkan
kebutuhan
manusia
dalam
meringankan
pekerjaan
dan
mempermudah dalam berkomunikasi dan saling bertukar informasi.
Internet telah menyediakan berbagai fasilitas 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 dan pengembangan web atau blog para web
developer memerlukan pengetahuan yang cukup mendalam tentang Java Script,
JQUERY, AJAX dan CSS. Dan kali ini dalam makalah yang saya tulis akan
membahas mengenai JQuery. Oleh sebab itu besar harapan penulis agar
makalah ini dapat digunakan para pemula dalam membangun sebuah web.
B. RUMUSAN MASALAH
1. Apa pengertian Jquery?
2. Bagaimana sejarah perkembangan Jquery?
3. Apa saja fitur-fitur yang tersedia di JQuery?
4. Bagaimana Implementasi JQuery?
3. 5. Seperti Apa contoh dari JQuery?
6. Apa fungsi JQuery?
7. Apa Saja manfaat JQuery?
8. Mengapa menggunakan JQuery?
9. Apa perbedaan Javascript dan Jquery?
10. Apa kemampuan yang dimilki JQuery?
11. Apa kekurangan yang dimiliki JQuery?
12. Seperti apa sintaks JQuery?
13. Seperti apa JQuery Selector ?
14. Seperti apa Jquery atribut selector ?
15. Bagaimana efek-efek dengan JQuery?
16. Apan saja kemudah yang ditawarkan oleh JQuery?
4. BAB II
ISI
A. Sejarah jquery
Pertama kali dibuat oleh John Resig pada tahun 2005, JQuery sendiri
pertama kali dirilis tanggal 14 Januari 2006. Dan versi terbaru dari JQuery udah
sampe versi 1.3.2. Dia terinspirasi dari Behavior code. Saat itu, Dia ngerasa
hasil dari Behavior Code tidak elegan dan masih jelek, maka dikembangkannya
JQuery. Dimana dengan penulisan code JQuery jadi lebih simple, gampang dan
tentunya dengan hasil yang memuaskan. JQuery adalah library JavaScript
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)
5. 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.
B. Pengertian Jquery
OpenSource yang menekankan pada interaksi antara JavaScript dan
HTML.
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.
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.
6. ·
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.
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.
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.
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. Sebelum anda
7. memulai mempelajari jQuery, anda harus mempunyai pengetahuan dasar
mengenai
HTML,
CSS
dan
Javascript.
Library jQuery mempunyai
kemampuan:
Kemudahan mengakses elemen-elemen HTML
Memanipulasi elemen HTML
Memanipulasi CSS
Penanganan event HTML
Efek-efek javascript dan animasi
Modifikasi HTML DOM
AJAX
Menyederhanakan kode javascript lainnya
Kemudian untuk memulai mempelajari jQuery, anda harus mendownload
jquery.js dari situs http://www.jquery.com. Setiap anda menulis kode javascript
dengan menggunakan jquery, jangan lupa untuk memasukan file jquery.js
kedalam kode javascript anda.
<script type="text/javascript" src="jquery.js"></script>
sekarang mari kita lihat contoh sederhana pemograman dengan
menggunakan jquery. Kode 12. hello world jquery
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".tombol1").click(function(){
$("p").hide(1000);
});
$(".tombol2").click(function(){
$("p").show(1000);
});
});
8. </script>
</head>
<body>
<p>Hello World!</p>
<button class="tombol1">Sembunyikan</button>
<button class="tombol2">Tampilkan</button>
</body>
</html>
C. Sintaks, Selector, Attribute Selector,dan Efek-efek JQuery
1. Sintaks jQuery
Sintaks Dalam Jqueri
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”
9. Karena hampir segala sesuatu yang kita lakukan bila menggunakan jQuery
membaca ataumemanipulasi 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:
$(".tombol1").click(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);
function(){
$("p").hide(1000);
});
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.
10. 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‟>
11. <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
12. 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 "#".
13. $("[href$='.jpg']") memilih semua elemen dengan atribut href yang
mengandung ".jpg".
3. JQUERY SELECTOR
Selector memungkinkan kita 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".
4. 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".
5. Efek-Efek dengan jQuery
Salah satu kemampuan jQuery adalah adanya fungsi-fungsi efek yang siap
pakai. biasanya untuk membuat efek memudar di javascript. Dengan
14. 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()
15. Mengubah suatu elemen dari satu keadaan ke keadaan lainnya
D. 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:
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.
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.
Autocomplete-Search
16. 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.
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.
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
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. Dan masih
banyak yang lainnya yang bisa dikunjungi di http://www.jqueryplugins.com
E. Contoh dari JQUERY
Ini adalah bentuk bagian dari efek dengan jquery dan untuk JS-nya
masih sama dengan posting yang sebelumnya dan source kodenya sebagai
berikut :
18. </html>
dan di tambahkan untuk mengatur kecepatan gerak anda berikut bentuk source
codenya :
<!DOCTYPE html>
<html>
<head>
<style>
div { margin:3px; width:40px; height:40px;
position:absolute; left:0px; top:30px;
background:green; display:none; }
div.newcolor { background:blue; }
</style>
<script src="delJsMick.js"></script>
</head>
<body>
Click here...
<div></div>
<script>
$(document.body).click(function () {
$("div").show("slow");
$("div").animate({left:'+=200'},2000);
jQuery.queue( $("div")[0], "fx", function () {
$(this).addClass("newcolor");
jQuery.dequeue( this );
});
$("div").animate({left:'-=200'},500);
jQuery.queue( $("div")[0], "fx", function () {
$(this).removeClass("newcolor");
jQuery.dequeue( this );
19. });
$("div").slideUp();
});</script>
</body>
</html>
memberi fungsi kontrol mulai dan berhenti source codenya sebagai berikut
<!DOCTYPE html>
<html>
<head>
<style>
div { margin:3px; width:40px; height:40px;
position:absolute; left:0px; top:30px;
background:green; display:none; }
div.newcolor { background:blue; }
</style>
<script src="delJsMick.js"></script>
</head>
<body>
<button id="start">Start</button>
<button id="stop">Stop</button>
<div></div>
<script>
$("#start").click(function () {
$("div").show("slow");
$("div").animate({left:'+=200'},5000);
jQuery.queue( $("div")[0], "fx", function () {
$(this).addClass("newcolor");
jQuery.dequeue( this );
});
$("div").animate({left:'-=200'},1500);
20. jQuery.queue( $("div")[0], "fx", function () {
$(this).removeClass("newcolor");
jQuery.dequeue( this );
});
$("div").slideUp();
});
$("#stop").click(function () {
jQuery.queue( $("div")[0], "fx", [] );
$("div").stop();
});
</script>
</body>
</html>
catatan untuk jsnya masih sama dengan yang dipostingansebelumnya dan
simpan dengan satu direktori dimana js-nya tersimpan dalam satu folder yang
sama.
F. KEMAMPUAN YANG DIMILIKI JQUERY
jQuery memiliki beberapa kemampuan atau kelebihan yang tidak
dimiliki dengan Javascript Library lainnya.
a. Mempermudah akses dan manipulasi elemen tertentu pada dokumen.
Jika biasanya diperlukan baris program yang cukup panjang untuk
mengakses suatu elemen dokumen. Namun, jQuery dapat melakukannya
hanya dalam beberapa baris program saja. Karena jQuery mempunyai
Selector yang sangat efisien untuk mengakses suatu elemen tertentu pada
dokumen yang selanjutnya bisa dimanipulasi sesuai dengan keinginan kita.
b. Mempermudah modifikasi/perubahan tampilan halaman web.
Biasanya untuk memodifikasi tampilan halaman web digunakan
CSS. Permasalahannya, CSS sangat dipengaruhi oleh web browser yang
21. digunakan sehingga Sering terjadi halaman web yang dibuat sudah rapi dan
bagus tampilannyadi browser Mozilla, namun ketika ditampilkan di Opera
menjadi berantakan. Namun, jQuery dapat menyesuaikan style CSS pada
semua browser, sehingga permasalahann tersebut dapat dihindari.
c. Mempersingkat Ajax (Asynchronous Javascript and XML)
Kemampuan favorit dari Ajex adalah mampu mengambil informasi
dari server tanpa melakukan refresh pada halaman web, artinya halaman web
terlihat berganti secara otomatis. Apabila kita menuliskan kode Ajax secara
manual, biasanya diperlukan baris yang cukup panjang, namun jQuery dapat
mempersingkatnya menggunakan Ajax cell, perbandingan 25 baris kode
Ajax dapat disingkat menjadi 5 baris kode saja jika kita menggunakan
jQuery.
d. Memiliki API (Application Programming Interface)
Dengan API, jQuery dapat memanipulasi content pada suatu
halaman
web,
seperti
pengubahan
teks,
manipulasi
gambar
(resize,rotate,crop), penyusunan daftar (list), pengurutan list, paging, dan
lain-lain.
e. Mampu merespon interaksi antara user dengan halaman web dengan lebih
cepat.
f. Menyediakan fasilitas untuk membuat animasi sekelas Flash dengan mudah.
G. Kekurangan dan kelebihan dari JQUERY
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)
22.
Dokumentasi dan tutorialnya lengkap
Didukung oleh banyak komunitas
Disupport oleh plugin yang lengkap
Filenya hanya satu dan ukurannya relatif kecil, sekitar 20kb
Open source atau Free
jQuery lebih diminati oleh para developer web saat ini
KELEBIHAN :
Menyederhanakan penggunaan javascript, karena kita cukup menggunakan
fungsi dari library javascript yang telah ada. Termasuk mempercepat
coding javascript dalam sebuah website. Dibandingkan kita harus mulai
sebuah script javascript dari nol.
Fungsi-fungsi yang disediakan didokumentasikan dengan baik beserta
contoh penggunaannya,
Support terhadap CSS1-3 selector, untuk fleksibilitas desain antar muka
halaman website dan interaksinya.
Website yang dibangun dengan jquery akan lebih interaktif dan menarik.
KEKURANGAN :
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.
Yang dapat dilakukan oleh jquery adalah:
23.
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.
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.
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.
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
24. 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.
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. Masingmasing 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.
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.
Menyederhanakan penulisan Javascript biasa
25. 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.
H. Manfaat jQuery Dalam Perkembangan Aplikasi Website
JQuery banyak digunakan dalam perancangan aplikasi berbasis web
terutama untuk mempercantik tampilan dan juga membuat website menjadi
lebih atraktif. Berikut akan dijelaskan beberapa kegunaan dari jQuery :
1. Mengakses bagian halaman website dengan mudah
Javascript memberikan cara pengaksesan bagian tertentu dari halaman
web dengan menggunakan aturan Document Objekct Model (DOM) dan
pengaksesan harus secara spesifik menyesuaikan struktur aturan HTML.
Dengan adanya framework ini pengaksesan dokumen HTML menjadi lebih
mudah dan tidak terlalu bergantung pada aturan struktur HTML.
2. Merespon interaksi user dalam halaman
Dengan adanya jQuery tampilan web tidak hanya menarik namun juga
lebih atraktif. Interaksi dengan user akan semakin meningkat. Sebagai
contoh bila di javacript sudah ada event handling seperti onChange atau
onClick untuk menangani event saat terjadi perubahan atau click pada
objek-objek yang terbatas. Maka di jQuery jenis event handling yang
diberikan lebih banyak daripada yang diberikan oleh javascript dengan
tambahan penanganan event handling menjadi semakin mudah.
3. Menambahkan animasi ke halaman
Beberapa website sebenarnya juga sudah menggunakan animasi
sebelum adanya jQuery, yaitu dengan menggunakan flash, gambar bergerak
26. (.gif) ataupun dengan video. Namun di sini jQuery menawarkan fitur-fitur
yang tidak kalah menarik dan yang menjadi kelebihan adalah animasi ini
akan mengurangi bandwidth atau bisa dikatakan animasi yang diberikan
oleh jQuery ringan untuk diakses. Contoh animasi yang bisa dibuat dengan
jQuery adalah fading jika terdapat suatu bagian dari halaman ditambahkan
atau dihilangkan, dan juga image slider untuk membuat efek foto yang
bergerak.
4.
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.
5. Mengambil informasi di server tanpa harus merefresh halaman web
Konsep ini sebenarnya sudah ada di teknologi web berbasis AJAX.
Namun pengimplementasian AJAX ternyata sulit, dan jQuery memiliki
banyak library khusus yang mempermudahnya sesuai dengan semboyannya
yaitu “Write less, do more”. Contoh dari penerapan pengambilan informasi
tanpa merefresh seluruh halaman adalah seperti saat kita menuliskan
comment di facebook, atau saat kita update status di facebook.
6.
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,
27. “kesenjangan” yang terjadi antara browser dalam urusan CSS akan tertutup
dengan baik.
7.
Menyederhanakan penulisan Javascript biasa
Dengan menggunakna jQuery penulisan code Javascript yang terlalu
banyak dapat dihindari.
I. FUNGSI JQUERY
Beberapa fungsi yang ada pada jQuery, diantaranya sebagai berikut :
1. .add()
fungsi add() digunakan untuk menambahklan elmen berupa text, tag
html ke dalam sebuah content (tag html = input, textarea, div dll).
2. .append()
fungsi.append()digunakan untuk menambahkan suatu elment berupa
text, html dll hampir sama dengan fungsi .add().
3. .attr()
fungsi.attr() digunakan untuk mengubah suatu nilai pada attribut html
seperti attribut dalam tag html seperti nilai value, class, id, title ini bisa diubah
nilainya mengunakan fungsi ini.
4. .addClass()
fungsi.addClass() digunakan untuk menambahkan nilai class pada
attribut html.
5. .find()
fungsi.find() digunakan untuk mencari suatu attribut dalam html
seperti elmen html (div, form, input dll), attribut html (title, class, id dll)
28. 6. .each()
fungsi.each() digunakan untuk mencari / memangil suatu elemen html
, attribut html yang sudah di tentukan secara rekursif dalam artian secara
mudah, berulang secata terus menerus sampi element tau attribut html di
temukan. fungsi ini hampir sama dengan fungsi find(). akan tetapi penempatan
pengunaanya berbeda.
29. BAB III
PENUTUP
A. SIMPULAN
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.
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.
JQuery, merupakan librari yang sangat ramping, core dari librari ini dalam
keadaan terkompres hanya berukuran sekitar 20KB. Lisensi JQuery adalah
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.
Walaupun jQuery mampu merubah interaksi sebuah website
menjadi lebih menarik, namun harus di bayar dengan beban loading blog yang
lebih lama dibandingkan dengan tidak menggunakan script. (hal ini tidak akan
terasa jika anda memiliki komputer yang powerful dan koneksi yang kencang).
30. Namun dengan kelebihan jQuery yang belum dimilki oleh javascript
pendahulunya setidaknya dapat lebih mengefektifkan kebutuhan website
dengan kemudahan-kemudahan yang ditawarkan oleh JQuery.
Seperti yang telah diuraikan diatas, bahwasanna kemudahankemudahan yang ditawarkan oleh JQuery belum banyak ditawarkan oleh
Javascript yang lain. JQuery memang banyak digunakan oleh website-website
terkemuka di dunia. Serta cocok dengan semua browser yang popular, seperti
Mozila, Internet Explorer, Safari, Chrome, Opera dan lain sebagainya. Serta
dapat kompatibel dengan semua versi CSS(CSS 1 sampai dengan CSS 3).
Sehingga kelahiran JQuery memberi banyak kemudahan dalam memenuhi
kebutuhan kita.
B. SARAN
Kemajuan teknologi semakin banyak mengahdirkan inovasi baru dengan
menawarkan berbagai kemudahan-kemudahan yang dapat mempermudah
kebutuhan kita. Namun hal tersebut tentunya memiliki kelebihan dan
kekurangannya masing-masing. Oleh sebab itu dalam memenuhi kebutuhan kita
dalam dunia teknologi perlu kita mengetahui apa kelebihan serta kekurangan
yang ditawarkan, sehingga kita dapat meminimalisir akan kekurangannya
dengan mengantisipasi hal tersebut.
