Anda di halaman 1dari 22

RUMUSAN MASALAH

Berdasarkan latar belakang di atas, rumusan masalah yang akan dibahas pada makalah
ini adalah mengenai :

1. Bagaimana sejarah perkembngan Jquery?


2. BagaimanaPengertian Jqyery?
3. Apa fitur pada jquery?
4. Bagaimana Implementasi Jquery?
5. Apa kelebihan Jquery?
6. Apa kekurangan Jquery?
TUJUAN

Tujuan dari penyusunan makalah ini adalah:


1. Untuk memahami sejarah Jquery.
2. Mengerti tentang pengertian jquery.
3. Mengetahui fitur-fitur Jquery.
4. Memahamii tentang implementasi Jquery.
5. Untuk mengetahui kelebihan dan kekurangan Jquery.

MANFAAT

Manfaat dari pembuatan Java adalah :


1. Sebagai syarat untuk menyelesaikan mata kuliah Java.
2. Sebagai bahan pembelajaran mengenai perkembangan ilmu pengetahuan dan
teknologi.
3. Dapat memahami, mengerti dan mendalami tentang teknologi Java.
PEMBAHASAN

A. Sejarah Perkembangan jQuery

John Resig merupakan otak dibalik jQuery, karyanya ini pertama kali
diumumkan di NYC BarCamp pada awal tahun 2006. Di situs webnya dia mencatat, ia
menciptakan jQuery karena ia tidak puas dengan library yang saat itu tersedia dan
merasa bahwa seharusnya framework-framework tersebut bisa jauh lebih baik dengan
mengurangi “syntactic fluff” dan menambahkan control khusus untuk tindakan-
tindakan yang bersifat umum.
Kemudian para pengembang datang untuk membantu menyempurnakan librari ini,
dan akhirnya menghasilkan rilis stabil pertama dari jQuery versi 1.0 pada tanggal 2006.
Sejak itu, jQuery telah berkembang ke versi 1.7.1 dan telah mempunyai plug-in yang
banyak. Sebuah plug-in adalah ekstensi dari jQuery yang bukan bagian dari library inti.

B. Pengenalan jQuery

jQuery adalah sebuah javascript library, jQuery mempunyai semboyan “write


less, do more”. jQuery dirancang untuk memperingkas kode-kode javascript. JQuery
adalah javascript library yang cepat dan ringan untuk menangani dokumen HTML,
menangani event, membuat animasi dan interakasi ajax. jQuery dirancang untuk
mengubah cara anda menulis javascript. Sebelum anda memulai mempelajari jQuery,
anda harus mempunyai pengetahuan dasar mengenai HTML, CSS dan Javascript.
Dengan JQuery, suatu halaman web yang menjadi aplikasi web, jika dilihat
sourcenya, akan terlihat seperti dokumen HTML biasa; tidak ada kode JavaScript yang
terlihat langsung. Teknik pemrograman web seperti ini disebut sebagai unobstrusive
JavaScript programming.
jQuery merupakan salah satu librari yang membuat program web di sisi klien, tidak
terlihat sebagai program JavaScript biasa, yang harus secara eksplisit disisipkan pada
dokumen web. Pada teknik pemrograman sisi klien dengan menggunakan JavaScript
biasa, setiap elemen yang akan memiliki event, akan secara eksplisit terlihat ada event
yang dilekatkan pada elemen tersebut.

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 19KB.
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 memulai mempelajari jQuery, anda harus
mempunyai pengetahuan dasar mengenai
HTML, CSS dan Javascript.

JQuery merupakan suatu framework (library) Javascript yang menekankan


bagaimana interaksi antara Javascript dan HTML. JQuery pertama kali dirilis pada
tahun 2006 oleh John Resig. Pada perkembangannya JQuery tidak sekedar sebagai
framework Javascript, namun memiliki kehandalan dan kelebihan yang cukup banyak.
Hal tersebut menyebabkan banyak developer web menggunakannya.

“jQuery is a fast and concise JavaScript Library that simplifies HTML


document traversing, event handling, animating, and Ajax interactions for rapid web
development. jQuery is designed to change the way that you write JavaScript.”
JQuery merupakan library open source dengan lisensi GNU General Public
License dan MIT License. Dari sisi ukurannya, framework JQuery sungguh ramping,
hanya sekitar 20 KB dan hanya terdiri dari satu file. Namun demikian, bagi yang
menginginkan fungsi lebih, JQuery memungkinkan penambahan fungsionalitas dalam
bentukplugin. Saat ini tersedia ribuan plugin yang dapat diperoleh secara gratis di
internet.
Gambaran Mudah Jquery

JQuery bisa digambarkan sebagai sebuah mesin mobil yang belum bisa
berjalan karena sang sopir belum menyalakan mesinnya. Sedangkan deklarasi-deklarasi
yang ada di luar JQuery bisa Saya gambarkan sebagai kemudi, persneling, rem, dan hal-
hal lain yang ada di ruang kemudi. Mobil tersebut (JQuery) hanya bisa berjalan jika
Anda (sang sopir) menjalankan mesin mobil tersebut (mendeklarasikan fungsinya):

JQuery adalah sekumpulan fungsi JavaScript. Saat Anda telah memasangnya,


tugas selanjutnya hanyalah tinggal menjalankan fungsi-fungsi yang sudah dibangun di
dalam JQuery.
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
Kesalahan yang umum terjadi pada para pengguna JQuery pemula adalah
memasang lebih dari satu JQuery dalam satu dokumen. JQuery adalah sebuah paket.
Jadi, sekali saja Anda telah memasang JQuery, maka sisanya tinggal menuliskan
deklarasi-deklarasinya saja. Versi-versi JQuery seperti 1.3.2, 1.4.2, 1.6.2 dan yang terbaru
1.7.0 itu semua hanyalah perbaikan dari versi-versi sebelumnya. Ada dua alasan utama
yang umum digunakan untuk mengembangkan JQuery:

Pertama, karena bug pada peramban (semacam kegagalan/tidak berjalannya


sebuah fungsi JQuery pada peramban-peramban tertentu), sehingga JQuery harus
menjalani perbaikan. Jika Anda pernah menemukan ketidaknormalan seperti:
"Harusnya efek/fungsi ini bekerja pada peramban ini, tapi efek/fungsi ini tidak bekerja
pada peramban itu" dalam pekerjaan Anda dan Anda merasa bahwa semuanya sudah
benar, Anda bisa melaporkan bug tersebut ke
http://bugs.jquery.com/newticket?redirectedfrom=.

Kedua, untuk membuat/menambahkan fungsi baru. Misalnya, efek


.fadeToggle() yang hanya ada pada versi JQuery di atas 1.4.3 (Lebih tepatnya dimulai
pada versi 1.4.4 » baca di sini). Juga pada fungsi .on(), .off() dan yang lainnya yang telah
ditambahkan pada versi 1.7 (selengkapnya di sini).
Cara Mengimplementasi 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.
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
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
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.

jQuery Selector

Selector memungkinkan anda untuk memanipulasi elemen HTML sebagai


kelompok atau sebagai elemen tunggal. jquery elemen selectors dan attribute selectors
memungkinkan anda untuk memilih elemen HTML dengan nama tag, nama atribut,
atau konten.
contoh :
$("p") memilih semua elemen <p>.
$("p.intro") memilih semua elemen <p> yang mempunyai class = "intro".
$("p#demo") memilih semua elemen <p> yang mempunyai id="demo".
jQuery Attribute Selectors

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

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


2. $("[href='#']") memilih semua elemen dengan atribut href bernilai = "#".
3. $("[href!='#']") memilih semua elemen dengan atribut href dengan nilai bukan sama
dengan "#".
4. $("[href$='.jpg']") memilih semua elemen dengan atribut href yang mengandung
".jpg".

Efek-Efek dengan jQuery

Salah satu kemampuan jQuery adalah adanya fungsi-fungsi efek yang siap
pakai. biasanya untuk membuat efek memudar di javascript. Dengan menggunakan
jQuery kita cukup menggunakan fungsi $(selector).fadeIn(). berikut adalah efek-efek
siap pakai yang disediakan jQuery :
1. jQuery show() : berguna untuk menampilkan elemen yang tersembunyi.
2. jQuery hide() : berguna untuk menyembunyikan elemen yang dipilih.
3. jQuery toggle() : gabungan fungsi hide dan show.
4. jQuery slideDown() : menampilkan elemen yang tersembunyi , secara efek sliding.
5. jQuery slideUp() : menyembunyikan elemen secara efek sliding.
6. jQuery slideToggle() : gabungan antara slideDown() dan slideUp().
7. jQuery fadeIn() : menampilkan elemen yang dipilih jika tersembunyi.
8. jQuery fadeOut() : menyembunyikan elemen yang dipilih secara efek memudar.
9. jQuery fadeTo() : mengatur tingkat kepudaran elemen terpilih menuju tingkat
opacity yang ditentukan.
10. jQuery animate() : mengubah suatu elemen dari satu keadaan ke keadaan lainnya.
Pengertian JQuery adalah sebuah framework berbasiskan Javascript. JQuery
sama dengan Javascript Library yaitu kumpulan kode atau fungsi Javascript siap pakai,
sehingga mempermudah dan mempercepat kita dalam membuat kode Javascript.

Hal yang menarik dari JQuery adalah penekanan interaksi


antara Javascript dan HTML. JQuery pertama kali dirilis pada tahun 2006 oleh John
Resig
JQuery memiliki slogan “Write less, do more” yang artinya kesederhanaan dalam
penulisan code, tapi dengan hasil yang lebih banyak.

JQuery sendiri berlisensikan GNU General Public License dan MIT License.
Untuk memudahkan dalam memahami JQuery, sangat dianjurkan terlebih dahulu
paham dan menguasai pengkodean HTML, CSS dan Javascript. Secara standar, apabila
kita membuat kode javascript, maka diperlukan kode yang sangat panjang.
Bahkan terkadang sangat sulit untuk di pahami. Misalnya, fungsi javascript untuk
membuat stripe (warna selang-seling) pada baris suatu tabel adalah sebagai berikut :

function stripe (id) {


var even = false;
var evenColor = arguments [1] ? arguments [1] : "#fff";
var oddColor = arguments [2] ? arguments [2] : "#eee";
var table = document.getElementById (id);
if ( ! table) {return;}
var tbodies = table.getElementsByTagName ("tbody");
for (var h = 0; h < tbodies.lenght; h++) {
var trs = tbodies[h].getElementsByTagName("tr");
for (var i = 0; i < trs.lenght; i++) {
if ( ! hasClass(trs[i])) && ! trs[i] . style.backgroundColor) {
var tds = trs[i].getElementsByTagName("td");
for (var j = 0; j < tds.lenght; j++) {
var mytd = tds[j];
if ( ! hasClass(mytd) && ! mytd.style.backgroundColor) {
mytd.style.backgroundColor = even ? evenColor : oddColor;

}
}
}
}
}
}

Nah, disinilah peran JQuery sebagai Javascript Library, dimana kita bisa
langsung memanggil fungsi yang terdapat di dalam library tersebut, dan hal yang
menarik disini adalah kita hanya membutuhkan satu baris untuk membuat warna
selang-seling pada suatu tabel.
JQuery ( ' table tr:nth-child(odd) ' ) .addClass ( ' odd' );
Kelebihan jQuery

Library jQuery mempunyai kemampuan :

1. Kompatibel dengan hamper seluruh browser


2. jQuery telah digunakan oleh website-website raksasa
3. Kompatibel dengan seluruh versi CSS (dari CSS 1 sampai CSS 3)
4. Dokumentasi dan tutorialnya lengkap, bisa langsung dilihat di http://jquery.com
5. Didukung oleh banyak komunitas
6. Disupport oleh plugin yang lengkap
7. Filenya hanya satu dan ukurannya relatif kecil, sekitar 20kb
8. Open source atau Free
9. jQuery lebih diminati oleh para developer web saat ini
10. 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.
11. Fungsi-fungsi yang disediakan didokumentasikan dengan baik beserta contoh
penggunaannya, baca di situs http://jquery.com hal ini mempermudah dalam
pembelajaran jquery.
12. Support terhadap CSS1-3 selector, untuk fleksibilitas desain antar muka halaman
website dan interaksinya.
13. Website yang dibangun dengan jquery akan lebih interaktif dan menarik.
14. Kemudahan mengakses elemen-elemen HTML
15. Memanipulasi elemen HTML
16. Memanipulasi CSS
17. Penanganan event HTML
18. Efek-efek javascript dan animasi
Kekurangan jQuery

Meskipun diklaim jquery memiliki beban kerja yang ringan (load CPU dan
RAM) untuk browser, tetap saja lebih ringan (cepat di-load) website yang tidak
menggunakan jquery, alias HTML murni.

Berikut ada beberapa kekurangan dari jquery :

1. 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.

2. Dari sisi server hosting pun, CPU dan RAM harus mengalokasikan resource yang
mereka miliki untuk menangani request terhadap jquery. Pada level tertentu request
yang sangat banyak (sangat-sangat banyak) akan membebani server. Solusi: host jquery
pada situs lain, seperti Google yang menyediakan request jquery dari servernya.
BAB III
PENUTUP

A. KESIMPULAN

jQuery adalah sebuah javascript library, jQuery mempunyai semboyan “write


less, do more”. jQuery dirancang untuk memperingkas kode-kode javascript. JQuery
adalah javascript library yang cepat dan ringan untuk menangani dokumen HTML,
menangani event, membuat animasi dan interakasi ajax. jQuery dirancang untuk
mengubah cara anda menulis javascript. Sebelum anda memulai mempelajari jQuery,
anda harus mempunyai pengetahuan dasar mengenai HTML, CSS dan Javascript.

Dengan JQuery, suatu halaman web yang menjadi aplikasi web, jika dilihat
sourcenya, akan terlihat seperti dokumen HTML biasa; tidak ada kode JavaScript yang
terlihat langsung. Teknik pemrograman web seperti ini disebut sebagai unobstrusive
JavaScript programming.
Jquery memiliki peran penting dalam kinerja sebuah web. Oleh karena itu Jquery
memiliki berbagai kelebihan dan kekurangan sehingga dapat dijadikan sebagai bahan
untuk pencarian informasi penting tentang penggunaannya.
DAFTAR PUSTAKA

1. http://www.w3function.com/blog/index.php?p=det&idn=82
2. http://jquery.com/
3. http://en.wikipedia.org/wiki/Jquery
4. http://didats.net/page/belajar-javascript-lebih-lanjut-dengan-jquery-1/
5. http://bagindokemas.com/2008/12/21/berkenalan-dengan-jquery/
6. http://achmatim.net/2009/01/20/jquery-untuk-orang-awam/
7. Pramono, Andy. 2005. Pengertian Jquery (http://aka
philtyphil.blogspot.com/2010/11/pengertian-jquery.html )
8. El, Seto Kahfi. 2006. Jquery Itu Apa-Memperkenalkan Jquery, A JavaScript Library. (
http://setoelkahfi.web.id/jquery-itu-apa-memperkenalkan-jquery-a-javascript-library/ )
9. Edison, Daud Tarigan. 2012. Membuat Aplikasi Word Count dengan JQuery.
(http://aplikasiphp.com/index.php/artikel/part/38/Membuat_Aplikasi_Word_Count_Sedehana_d
engan_jQuery )

Anda mungkin juga menyukai