MAKALAH JQUERY
Disusun untuk memenuhi
tugas mata kuliah Teknologi Informasi
dan Komunikasi
Dosen Pengampu : Bp. Septia Lutfi
Oleh
Epita
Herbudiati
1102411021
Rombel 3
KURIKULUM DAN TEKNOLOGI PENDIDIKAN
FAKULTAS ILMU PENDIDIKAN
UNIVERSITAS NEGERI SEMARANG
2013
BAB
I
PENDAHULUAN
A. Latar
Belakang
jQuery
adalah sebuah library Javascript yang sangat ringkas dan sederhana untuk
memanipulasi komponen di dokumen HTML, menangani event, animasi, efek dan
memproses interaksi ajax. jQuery dirancang sedemikian rupa supaya membuat
program menggunakan Javascript menjadi relatif sangat mudah. Sesuai slogan nya,
write less, do more. Menulis kode lebih sedikit, tetapi melakukan
pekerjaan lebih banyak.
jQuery
ukuran nya cukup kecil, sehingga tidak memperlambat proses loading halaman web
yang kita buat. jQuery juga kompatibel dengan CSS3 dan yang tak kalah penting
adalah jQuery bisa berjalan di semua browser – cross browser.
jQuery
diluncurkan pada Januari 2006 oleh John Resig. jQuery adalah library Javascript
yang paling populer saat ini. Karena kecanggihan nya, jQuery dipakai oleh
perusahaan besar seperti Google. Dell, CBS, digg, Netflix,
Bank of America, Mozilla, Drupal, dsb.
jQuery
adalah library Javascript yang gratis dan open source. Oleh karena nya kita
bisa menggunakan jQuery dengan bebas untuk keperluan pengembangan website kita.
Tanpa library seperti jQuery, menerapkan Javascript mungkin akan lebih sulit,
terutama untuk pemula yang baru belajar Javascript. Plugin tambahan seperti
JQuery UI (user interface) semakin memudahkan kita
mengembangkan website yang cantik dan interaktif. Selain itu tersedia
plugin-plugin lain yang makin memperkaya kemampuan jQuery.
Panduan
dan demo jQuery bisa dilihat dihalaman resmi jQuery yaitu di jQuery.com
dan library untuk user interface bisa di pelajari dan
di download di jQueryUI
B. Rumusan
Masalah
Dari latar belakang diatas dapat
ditarik rumusan masalah sebagai berikut :
1.
Apa definisi jQuery?
2.
Bagaimana sejarah jQuery?
3.
Bagaimana cara menggunakan jQuery?
4.
Apa saja fitur yang ada pada jQuery?
5.
Apa manfaat jQuery?
6.
Bagaimana implementasi jQuery?
7.
Bagaimana perbedaan jQuery dengan ajax?
8.
Bagaimana perbedaan jQuery dengan java
script?
9.
Apa contoh program jQuery?
10.
Bagaimana fungsi penggunaan jQuery?
11.
Apa kelebihan dan kelemahan dari jQuery?
C. Tujuan
Dari rumusan masalah diatas dapat diambil
tujuan sebagai berikut :
1.
Menjelaskan apa definisi dari jQuery.
2.
Menjelaskan sejarah jQuery.
3.
Menjelaskan bagaimana cara menggunakan jQuery.
4.
Menjelaskan apa saja fitur yang ada pada
jQuery.
5.
Menjelaskan manfaat jQuery.
6.
Menjelaskan bagaimana implementasi
jQuery.
7.
Menjelaskan bagaimana perbedaan jQuery
dengan ajax.
8.
Menjelaskan bagaimana perbedaan jQuery
dengan java script.
9.
Menjelaskan apa sajacontoh program
jQuery.
10.
Menjelaskan bagaimana fungsi penggunaan
jQuery.
11.
Menjelaskan apa kelebihan dan kelemahan
dari jQuery.
BAB II
PEMBAHASAN
1. Definisi
JQuery
JQuery merupakan library
Javascript yang akan membuat aplikasi web yang kita buat menjadi lebih
menarik, baik dari sisi user-interface, proses maupun interaktivitas.
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.
Salah satu
buku yang cukup lengkap membahas mengenai jQuery adalah buku yang berjudul "Learning jQuery : Better Interaction
Design and Web Development with Simple JavaScript Techniques". Buku
setebal kurang lebih 350 halaman ini mengulas secara tuntas mengenai jQuery,
dimulai dari kelebihan dan daya tarik jQuery itu sendiri, sampai teknik-teknik
memanfaatkan jQuery yang disertai contoh-contoh sederhana.
Buku ini
ditulis oleh Jonathan Chaffer dan Karl Swedberg yang terbit pertama kalinya
tahun 2007 (setahun setelah jQuery dirilis). Jonathan Chaffer adalah Chief
Technology Officer of Structure Interactive yang berlokasi di Michigan.
Jonathan juga aktif sebagai bagian dari tim pengembang CMS open source yaitu
Drupal. Sementara itu Karl Swedberg adalah seorang web developer di perusahaan
yang sama dengan Jonathan yaitu Structure Interactive. Karl yang sebelum
menjadi web developer adalah seorang guru bahasa Inggris, fokus dalam hal
web-standard, semantic CSS, dan unobtrusive JavaScript.
Buku
Learning jQuery isinya cukup mudah dipahami dan dapat menjadi referensi bagi
para pemula maupun yang sudah mahir di bidang web development. Buku ini cocok
untuk para designer web maupun programmer web.
Garis besar
dari isi dari buku ini antara lain menjelaskan mengenai:
Sekilas tentang jQuery. Termasuk didalamnya dijelaskan mengenai kelebihan jQuery, dimana bisa mendapatkan jQuery dan contoh sederhana penerapan jQuery. Isinya secara singkat saya rangkum dalam artikel saya sebelumnya.
Selectors. Di bagian kedua ini dijelaskan mengenai DOM (Document Object Model) dan CSS, serta bagaimana penggunaan jQuery dalam mengatur tampilan (CSS + jQuery). Bagian ini cocok dibaca bagi para web designer yang sudah terbiasa dengan CSS.
Sekilas tentang jQuery. Termasuk didalamnya dijelaskan mengenai kelebihan jQuery, dimana bisa mendapatkan jQuery dan contoh sederhana penerapan jQuery. Isinya secara singkat saya rangkum dalam artikel saya sebelumnya.
Selectors. Di bagian kedua ini dijelaskan mengenai DOM (Document Object Model) dan CSS, serta bagaimana penggunaan jQuery dalam mengatur tampilan (CSS + jQuery). Bagian ini cocok dibaca bagi para web designer yang sudah terbiasa dengan CSS.
Events.
Selanjutnya buku ini menjelaskan mengenai event-event yang didukung oleh
jQuery. Event-event tersebut akan meningkatkan interaktivitas web dengan
pengunjung. Tersedia juga contoh-contoh menarik di bab ini.
Effects.
Pada bab 4 buku ini, dijelaskan mengenai teknik-teknik jQuery untuk mengatur
efek tampilan halaman web, termasuk didalamnya animasi-animasi yang bisa
dilakukan oleh jQuery. Diantara animasi yang sering digunakan adalah fading dan
sliding. Contoh sederhananya dapat dilihat disini.
DOM
Manipulation. Di bagian ini dipaparkan mengenai bagaimana memanipulasi sebagian
isi halaman web melalui jQuery. Manipulasi dapat berupa penambahan,
penggantian, maupun penghapusan bagian tertentu dari halaman.
AJAX.
Bagaimana jika jQuery digabungkan dengan konsep AJAX? Di bagian keenam ini dijelaskan mengenai hal tersebut.
Secara default, jQuery mendukung dengan baik konsep AJAX, baik format data
teks, XML, maupun JSON.
Table Manipulation. Manipulasi data dalam tabel seperti sorting, seleksi, paging dapat dilakukan dengan cukup mudah dengan jQuery. Penasaran? Silahkan pelajari pada bab ini mengenai manipulasi tabel.
Table Manipulation. Manipulasi data dalam tabel seperti sorting, seleksi, paging dapat dilakukan dengan cukup mudah dengan jQuery. Penasaran? Silahkan pelajari pada bab ini mengenai manipulasi tabel.
Forms with
Function. Bagian ini membahas mengenai manipulasi form inputan termasuk
tampilan dan bagaimana melakukan validasi form ala jQuery. Shufflers and
Rotators. Manipulasi images seperti untuk membuat galery foto dipaparkan di
bagian ini.
Plugins.
Bagian terakhir dari buku ini membahas mengenai plugin, yang merupakan salah
satu kemampuan jQuery yang luar biasa. Disini diberikan beberapa plugin jQuery
yang banyak digunakan serta dijelaskan juga mengenai bagaimana membuat plugin
sendiri.
JQuery dirilis pada Januari 2006 di BarCamp NYC oleh John Resig dan
berlisensi ganda di bawah Lisensi MIT dan GPL. 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.
2. Sejarah
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 Pincuran.com tentunya dan lain-lain.
Jquery
Pertama kali dikembangkan oleh Jhon Resig pertama kali pada tahun 2005, saat
itu dia terinspirasi dari kode Behavior, ketika itu Jhon merasa kode kode
behavior tidak elegan dan bahkan sangat jelek. maka dia mulai memikirkan cara
membuat library yang handal dan ringan untuk javascript , maka lahirlah JQUERY
pada 14 januari 2006, direlease lah versi pertama dari Jquery dan sampai
sekarang masih terus dikembangkan dan disempurnakan.
3. Cara
menggunakan jQuery
Cara
menggunakan jQurey adalah sebagai berikut :
a) Ok
pertama - tama adalah kita harus mendownload terlebih dahulu jQuery Library
(inti dari jQuery). Dimana download jQuery Library? mau tau aja atau mau tau
banget? hehehe... Downloadnya di www.jquery.com
, silahkan klik Download jQuery. Saat penulisan tutorial ini library jQuery
telah sampai versi 1.9.1
b) Pada
halaman selanjutnya pilih versi jquery, ada versi Production dan versi Developer. Untuk saat ini pilih versi Production
jQuery karena versi Developer ditujukan kepada para master pemrograman
dan pengembang jquery.
Catatan
:
jQuery selalu merilis
dua versi Library yaitu versi Production dan Development. Perbedaannya adalah
versi Production ukuran filenya lebih kecil karena telah 'dimampatkan' atau
istilahnya di Compress. Diperuntukkan bagi pengguna awam yang ingin langsung
menggunakan jQuery. Sedangkan versi Development isi filenya mudah dibaca karena
belum di Compress dan ditujukan unruk para Developer yang tertarik mempelajari
- memanipulasi - bahkan mengembangkan fungsi - fungsi yang dimiliki oleh
jQuery.
c) Akan
muncul code dari library Jquery
d) Ok
sekarang adalah kode untuk memanggil jQuery library supaya dapat terLOAD di
website yang anda buat. Buka dreamweaver dan masukkan
kodenya.
Scriptnya yang saya cetak tebal merah :
Scriptnya yang saya cetak tebal merah :
a.
Panggil / Load library jQuery (stabilo merah)
b.
buat script jquery di bagian head untuk mengontrol object
berdasarkan elementnya (stabilo biru)
c.
Buat Object beserta elemennya berupa id dan class di bagian
body (stabilo abu - abu)
Demikian cara download dan pemasangan
hingga penggunaan jQuery.
4. Fitur
yang ada pada jQuery
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 atau website aplikasi menjadi Wauw.
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.
Beberapa
Fitur yang ada di JQuery :
1. Dalam
Pemakaian menggunakan seleksi element DOM, sehingga website lebih dinamis
dan interaktif.
3. Event
4. AJAX
5. Efek-efek
dan animasi
6. Ekstensi
dan Plug-ins
7. Kompatibilitas
dengan hampir semua Browser modern
8. Keperluan
lain seperti : User Agent, Feature detection dan
lainnya
JQuery
hanyalah 1 file yang berisi kode dalam Javascript tetapi bisa berisi banyak
fitur seperti di atas. Sehingga cara menggunakaanya sangat mudah.
Kita
panggil file JQuerynya terlebih dahulu.
<script
type=”text/javascript” src=”jquery.js”></script>
<script
type=”text/javascript”>
$(document).ready(function()
{
//
Kode Jquery anda tuliskan disini
});
</script>
Dan
untuk pembahasan detailnya sabar ya.. bukan di artikel ini tempatnya. Mungkin
seperti itu yang bias saya tulis.. maaf jika ada kesalahan karena ini
terjemahan langsung masih kurang saya dalam B.Inggris.. Semoga pembahasan
mengenai JQuery ini bermanfaat.
5. Manfaat
Jquery
Ada beberapa manfaat yang dapat kita
ambil ketika menggunakan jQuery, diantaranya :
a)
Kompatibel
dengan hampir seluruh browser
b)
jQuery
telah digunakan oleh website-website raksasa
c)
Kompatibel dengan seluruh versi CSS
(dari CSS 1 sampai CSS 3)
d)
Dokumentasi dan tutorialnya lengkap,
bisa langsung dilihat di http://jquery.com
e)
Didukung oleh banyak komunitas
f)
Disupport oleh plugin yang lengkap
g)
Filenya hanya satu dan ukurannya relatif
kecil, sekitar 20kb
h)
Open source atau Free
i)
jQuery lebih diminati oleh para developer web saat ini
6. 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.
Web Sitenya: http://javascript-array.com
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.
Web Sitenya: http://www.mopstudio.jp
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.
Web Sitenya: http://loopj.com
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.
Web Sitenya: http://www.willjessup.com
Web Sitenya: http://www.willjessup.com
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
7. Perbedaan
Jquery dengan Ajax
Tulisan ini
dilatar belakangi dari pertanyaan teman saya tentang jQuery. Awalnya dia bertanya
tentang Ajax, berlanjut ke jQuery. Dia bertanya “Apa Ajax itu?”, “Apakah jQuery
juga Ajax ?”.Hm..mari kita bahas satu-persatu.
Pada
umumnya, halaman web berinteraksi dengan server hanya mengandalkan objek
formulir. User mengisikan sesuatu pada formulir tersebut, kemudian menekan
tombol submit. Apa yang dilakukan user setelah itu ? menunggu tanggapan
dari server. Browser akan me-refresh seluruh halaman ketika menerima
hasil tanggapan dari sever.
Mungkin kita
sudah tidak sudah tidak asing lagi dengan facebook atau twitter. Tetapi,
sadarkah ketika kita sudah menekan tombol update status pada saat update
status, atau ketika sudah menekan tombol comment ketika mengomentari
status teman ? Apa yang terjadi ? Halaman tersebut tidak di-refresh secara
keseluruhan, dan apa yang kita tulis sebelumnya tampil pada halaman tersebut.
Selain itu, user dapat tetap berinteraksi dengan halaman web yang ada tanpa
harus menunggu hasil proses tanggapan dari server.
Ajax adalah
kependekan dari Asynchrounous Javascript and XML. Ia bukanlah suatu teknologi
baru, melainkan suatu teknik yang memungkinkan melakukan request ke
server secara dibelakang layar (asynchroun). Seperti pada kasus sebelumnya
(meng-update atau mengomentari status di facebook atau twitter), setelah
menakan tombol, secara dibelakang layar browser mengirimkan request ke
server. Kemudian server memperoses request tersebut dan mengembalikan
hasil proses tersebut ke browser.Browser meng-update sebagian halaman melalui
DOM (Document Object Model), kemudian hasil proses dari server ditampilkan.
Untuk dapat
mengimplementasikan Ajax menurut saya adalah sulit, karena ia melibatkan banyak
hal, seperti :
1.
Javascript, digunakan untuk membangun lapisan ajax.
2.
HTML/XHTML, standar bahasa markup yang digunakan untuk
membuat halaman web.
3.
CSS (Cascading Style Sheet), digunakan untuk
mendeskripsikan style atau gaya dari suatu halaman web.
4.
XML (eXtensible Markup Language),
5.
DOM (Document Object Model)
jQuery
merupakan salah satu library yang popular saat ini. Ia dapat membantu
mengurangi kompleksitas kode Javascript, misalnya dalam mengimplementasikan
Ajax. jQuery menyediakan cara yang seragam untuk mengakses DOM pada beberapa
browser. Dengan kata lain, jQuery dapat menangani perbedaan interpretasi antar
browser dalam menangani DOM atau pun CSS.
8. Perbedaan
jQuery dengan Java Script
Perbedaan
antara javascript dan jquery sering menimbulkan
pertanyaan, dari segi penulisan maupun penggunaanya. Berikut ini saya akan
berbagi tentang apa Perbedaan javascript dan jquery tersebut.
Perbedaan dari definisi javascript
dan jquery
Javascript
adalah bahasa pemrograman yang dirancang untuk berjalan di lingkungan klien
yang dikombinasikan dengan dokumen HTML. Javascript dijalankan dengan bantuan
browser sehingga dapat melakukan interaksi dengan user, melakukan kontrol
browser dan memanipulasi dokumen web saat
ditampilkan.
Sedangkan
jquery adalah komponen/librari/framework yang dibuat
dari javascript dengan tujuan memudahkan seorang programmer
dalam menggunakan fungsi-fungsi yang lebih rumit. Dengan jquery, seorang
programmer bisa lebih leluasa dan mudah melakukan kontrol/manipulasi halaman
web. Oleh karena kemudahan tersebut jquery memiliki semboyan "write
less, do more" yang bisa kita artikan dengan sedikit menulis kode
tapi dapat melakukan banyak hal.
Jquery
dibangun dengan berorientasi objek sehingga akan lebih optimal dan memiliki
kemampuan yang lebih luas untuk menciptakan serta memanipulasi halaman web yang
dikirimkan ke browser pengguna.
Mari
kita lihat bagaimana penulisan javascript dan javascript untuk melakukan sebuah
manipulasi background dokumen html berikut :
Javascript
<script
language="javascript">
function
changeBackground(color)
{
document.body.style.background
= color;
}
onload="changeBackground('red');"
</script>
jQuery
<script>
$('body').css('background',
'#ccc');
</script>
Dari
script diatas bisa anda lihat, bahwa jquery lebih bepusat pada objek sehingga
cara melakukan perubahannya akan lebih sederhana.
9. Contoh
program jQuery
Inilah contoh program jQuery :
10. Fungsi
jQuery
Sebelum
membahas beberapa fungsi yang ada pada jQuery, ada beberapa hal yang perlu di perhatikan
diantaranya kenapa harus mengunakan jQuery? ini mungkin pertanyaa yang
sederhana yang bisa membuka pikiran bagi pembaca blog ini’ untuk memulai
belajar jQuery.
jQuery
merupakan sebuah library Javascript yang sangat
ringkas dan sederhana untuk memanipulasi komponen pada HTML, menangani event
(click, mouse hover, entry keyboard dll), animasi (slideup, slidedown dll) dan
juga untuk memperoses setiap aksi di belakang layar lebih sederhana ketimbang
mengunakan tehnik yang ada pada standar javascript. Pada jQuery untuk menangani
permintaan suatu halaman atau data di belakang layar pengguna jQuery biasa menyebutnya
dengan nama Ajax. untuk pembahasan Mengenai cara mengunakan Ajax pada jQuery
akan di bahas pada artikel selanjutnya.
Selain
itu jQuery sudah digunakan oleh jutaan penguna dikarnakan sangat ringan dan
ukuran filenya yang sangat kecil dan mempercepat dalam peroses pembangunan
suatu aplikasi website, blog, mobile dll.
Berikut
beberapa fungsi yang ada pada jQuery :
a. .add()
Fungsi add() digunakan
untuk menambahklan elmen berupa text, tag html ke dalam sebuah content (tag
html = input, textarea, div dll).
b. .append()
Fungsi .append()
digunakan untuk menambahkan suatu elment berupa text, html dll hampir sama
dengan fungsi .add().
c. .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.
d. .addClass()
Fungsi .addClass()
digunakan untuk menambahkan nilai class pada attribut html.
e. .find()
Fungsi .find()
digunakan untuk mencari suatu attribut dalam html seperti elmen html (div, form,
input dll), attribut html (title, class, id dll)
f. .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.
11. Kelemahan
dan kelebihan jQuery
Kelebihan :
1.
Write Less, Do More.
2.
Dengan menggunakan jQuery tentu kita telah
menyederhanakan penggunaan javascript, karena kita cukup menggunakan fungsi
dari library javascript yang ada. Juga mempercepat coding javascript
dalam sebuah website. Dibandingkan bila kita harus mulai sebuah script
javascript satu per satu dari nol. Dengan menggunakan
jQuery berarti kita telah meringkasnya dan membiarkan jQuery mengolahnya.
3.
Fungsi pemakaian beserta contohnya bisa anda lihat
di http://jquery.com untuk
mempermudah dalam pembelajaran jQuery.
4.
Support terhadap CSS1-3 selector, untuk fleksibilitas
desain antar muka halaman website dan interaksinya.
5. Halaman
website/blog yang dibangun dengan jQuery akan lebih interaktif dan menarik,
membuat para pengunjung lebih terkesan.
Kekurangan :
1. Walaupun
klaim bahwa loading menjadi semakin ringan, web/blog yang tidak menggunakan
jQuery alias HTML murni tetap lebih ringan untuk diload terutama dimata CPU dan
RAM.
2. Dari sisi
server hosting pun, CPU dan RAM harus mengalokasikan resource yang mereka
miliki untuk menangani request terhadap jQuery. Pada level tertentu request
yang sangat banyak melebihi standar akan membebani server tersebut.
3. Solusi: host
jquery pada situs lain, seperti Google yang menyediakan request jQuery dari
servernya (API).
4. Hal ini
tidak akan terasa jika anda memiliki komputer yang powerful dan koneksi yang
kencang, namun bila pengunjung situt anda tidak memiliki itu semua, alias
koneksi lelet dan komputer yang lemah syahwat...? Maka mereka lebih memilih
untuk tidak hanya menutup situs web anda, tapi juga situs lainnya yang dirasa
berat kecuali beranda browser.
12. Teknik
jQuery
Kemudahan
jQuery dengan Tagline-nya
"write less, do more" telah membuat para web developer untuk menggunakan salah
satu Framework Javascript yang terbaik ini.
Sebelum hadirnya jQuery dalam dunia pemrograman website, pembuatan kode
JavaScript tidak mudah untuk digunakan apalagi untuk mendapatkan kualitas yang
maksimal pada Cross-Browser.
Kali
ini saya akan coba membagikan beberapa Tips dan Tricks
atau juga dapat dikatakan Teknik jQuery yang dapat kita gunakan untuk
meningkatkan kualitas Code yang kita miliki.
Jika
Anda sudah familiar menggunakan jQuery, mungkin ada beberapa hal yang Anda
lewatkan untuk membuat Code Anda diproses secara optimal oleh Client-Side, Apalagi
jika Anda mulai menggunakan jQuery hanya mendownload dan membaca dokumentasi
penggunaannya secara singkat. Tapi tahukah Anda jika ada beberapa teknik yang
dapat digunakan untuk menggunakan jQuery secara maksimal sehingga berdampak
pada performa Code baik dari segi kecepatan, struktur, dan hal yang
menguntungkan lainnya.
Berikut
ini adalah beberapa teknik yang dapat Anda gunakan untuk melakukan hal
tersebut.
1. Load jQuery langsung dari Server
Google atau jQuery.com
Mungkin sebagian dari
Anda telah banyak membaca dari blog-blog atau
sumber yang lain bahwa teknik ini adalah salah satu cara yang optimal untuk
meng-improve jQuery tapi untuk me-refresh Anda, saya tetap akan menuliskannya
disini.
Contoh pertama misalnya
kita ingin me-Load jQuery v1.10.2 dari server google,
mungkin biasanya kita menuliskannya dengan cara berikut :
type="text/javascript"></script>
Sebenarnya, Anda cukup
menuliskan code yang lebih sederhana seperti berikut :
<script
src="http://code.jquery.com/jquery-latest.js"></script>
2. Cara Memastikan Inisialisasi Gambar
Selesai
Memastikan gambar
terinisialisasi merupakan cara yang dapat Anda gunakan untuk meningkatkan
interaktivitas kepada para pengguna.
Jika Anda ingin membuat Loader dengan
menggunakan Indikator gambar, sebaiknya Anda membaca Cara Membuat Loader seperti Youtube Menggunakan Loadie.js.
Untuk melakukan
inisialisasi gambar dapat menggunakan .load() dan gunakan fungsi Callback
untuk melakukan proses lanjut. Contoh dibawah ini, atribut "src" dari
tag Gambar menjadi atribut selector untuk mendeteksi bahwa gambar telah selesai
di load. Hal ini dapat Anda gunakan untuk menggunakan Captcha dengan teknik
DOM.
$('#gambar').attr('src',
'gambar.jpg').load(function(){alert('Gambar telah selesai di load.');
//Gunakan fungsi sesuai dengan yang Anda
inginkan.});
3. Vertical Alignment dengan jQuery
Jika Anda ingin
meletakkan sebuah elemen di tengah-tengah, menggunakan jQuery akan terasa lebih
mudah. Perhatikan contoh berikut ini :
$(document).ready(function(){
//Mengambil angka tinggi window &
elemen var tinggi_window = $(window).height();
var tinggi_elm =
$('.vertical-center').height();
//Implementasi pada selector
$('.vertical-center').css({'position':'relative','top':tinggi_window/2
tinggi_elm/2});})
4. Replace <div> dengan jQuery
$('#target-div').replaceWith('<div>Contoh
pengganti div yang baru.</div>');
5. Manipulate Text menggunakan Regular
Expression dan jQuery
Anda dapat mengganti
atau membuat text baru dengan menggunakan Regular Expression untuk mencari
target yang ingin dirubah tersebut.
Misalnya kita ingin
menghindari spammer mengindex Email kita pada document. Kita dapat menggunakan
sebuah metode ini untuk merubah text atau karakter khusus untuk ditimpa menjadi
email kita (hanya dapat dibaca selain bot / crawler). Contoh yang digunakan
adalah kita menggunakan text "-:email:-" untuk
diganti menjadi "email_anda@domain.com".
$(document).ready(function(){var
document_body = $('body');
document_body.html(document_body.html().replace(/-:email:-/gi,'email_anda@domain.com'));});
6. Membuat Link eksternal membuka window
baru
Sebenarnya, untuk
membuka link baru Anda dapat menggunakan atribut target pada HTML
(target="_blank"), tetapi cara ini membuat script Anda tidak Valid
menggunakan validasi XHTML 1.0 sehingga kita harus menemukan cara lain.
Jika Anda membutuhkan
sebuah alternatif untuk membuka link di eksternal window, Anda dapat
menggunakan jQuery untuk melakukan hal ini. Pada Validator XHTML 1.0, atribut
ini dianggap tidak valid. Beberapa alternatif berikut ini dapat Anda gunakan.
Contoh dibawah ini
dengan menambahkan attribute rel="external" pada link Anda sehingga
jQuery dapat membuka link ke eksternal window dengan script seperti berikut :
$('a[rel="external"]').click(function(){window.open(
$(this).attr('href') );return false;});
//Atau dapat menggunakan bind
$('a[rel="external"]').bind("click",
function(){window.open( $(this).attr('href') );return false;});
Atau jika Anda ingin
membuka link pada sebuah selector misalnya <div
id="eksternal-link">, jadi Anda cukup menunjuk semua tag <a>
yang ada didalam selector tersebut seperti contoh script berikut ini :
$('div#eksternal-link
a').click(function(){window.open( $(this).attr('href') );return false;});
//Menggunakan bind()
$('div#eksternal-link a').bind("click",
function(){window.open( $(this).attr('href') );return false;});
Itulah beberapa Teknik
yang dapat Anda gunakan untuk mengoptimalkan code website Anda. Banyak cara
yang dapat Anda gunakan untuk dapat mengoptimalkan Code Anda, baik server-side
scripting ataupun client-side scripting.
BAB
III
PENUTUP
A. Kesimpulan
JQuery merupakan library Javascript yang akan membuat
aplikasi web yang kita buat menjadi lebih menarik, baik dari sisi user-interface, proses maupun interaktivitas.
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.
Selain
itu jQuery juga memiliki banyak manfaat, fungsi, fitur, serta contoh dan
implementasi yang diterapkan. Dengan menggunakan jQuery tentu kita telah
menyederhanakan penggunaan javascript, karena kita cukup menggunakan fungsi
dari library javascript yang ada. Juga mempercepat coding javascript
dalam sebuah website. Dibandingkan bila kita harus mulai sebuah script
javascript satu per satu dari nol. Dengan menggunakan
jQuery berarti kita telah meringkasnya dan membiarkan jQuery mengolahnya.
DAFTAR PUSATAKA
Posting Komentar