Makalah ini membahas tentang pengertian, sejarah, kelebihan, kekurangan, dan cara penggunaan jQuery. jQuery adalah perpustakaan JavaScript yang dirilis pada tahun 2006 untuk mempermudah pengolahan DOM dan membuat antarmuka pengguna lebih interaktif dengan menyederhanakan penulisan kode JavaScript. Makalah ini juga menjelaskan fitur, keunggulan, dan contoh penerapan jQuery dalam membangun website.
1. “ Pengertian JQuery dan Berbagai Kekurangan dan Kelebihanya”
Makalah ini disusun untuk memenuhi tugas mata kuliah Teknologi Informasi dan Komunikasi
Semester III
Oleh :
Nama : Wawan suryanto
NIM
: 1102412101
Prodi : Kurikulum dan Teknlogi Pendidikan
Makul : Teknologi Informasi dan Komunikasi
Rombel
: 01
FAKULTAS ILMU PENDIDIKAN
UNIVERSITAS NEGERI SEMARANG
2013
2. BAB I
PENDAHULUAN
A.
Latar Belakang Masalah
Zaman terus berjalan begitupun mengenai teknologi yang berlakuk saat ini, semua pekerjaan
manusia sekarang mulai terbantu berkat teknlogi yang berkembang pada zaman sekarang,
teknologi pun tak akan macet ditengah jalan karena teknologi selalu berkembang bahkan
percepatannya sangat cepat sekali bisa dibilang cepat seperti angin. Perubahan ini pun akan
mempengarui kegiatan manusia kedepan pastinya akan ada dampak positif dan negatif dalam
menggunakan sebuah teknologi, salah satu dampak positifnya yaitu dengan teknologi manusia
dalam melakukan hal kegiatan sehari hari dapat terbantu misal dengan smartphone nya dalam hal
interaksi jarak jauh, sosmed, atau sms dan masih banyak kegunaan lainnya atupun menggunakan
tablet dan komputer maupun laptop.
Dengan hadirnya teknologi pun membawa dampak negatif pula seperti dengan begitu bisa
menimbulkan rasa malas dan akan lupa dengan cara manual yang biasa dilakukan saat belum
menggunakan teknologi. Sama artinya dengan makalah yang satu ini mengenai pengenalan leih
lanjut tentang JQuery, JQuery pun memiliki kelebihan dan kekurangan dalam pengoperasiannya
dan JQuery juga andil dalam mempermudah manusia dalam melakukan kegiatan sehari-hari
khusus nya dalam bidan lingkup JQuery tersebut
Kedepannya diharapkan dapat seiring berkembang nya zaman dapat memperbaiki
kekurangan yang ada pada saat ini sehingga penggunaannya dipermudah agar manusia
menggunakannya tanpa ada repot sedikitpun walaupun untuk saat ini katanya penggunaannya
lebih mudah dari yang dulu-dulu.
3. B.
Rumusan Masalah
Rumusan Masalah dalam Makalah ini secara garis besarnya adalah sebagai berikut :
Apakah yang dimaksud dengan JQuery (Pengertian), dan apa saja kemampuan yang
dimiliki JQuery ini?
Bagaimana sejarah JQuery?
Apa saja kelebihan dan Kekurangan yang dimiliki oleh Jquery?
Apa saja manfaat menggunakan JQuery?
Apa Keunggulan menggunakan JQuery?
Apa saja fitur yang ditawarkan JQuery?
Bagaimana cara instalasi JQuery dan langkah langkah mengenaiJQuery selector, dan
Jquery Manipulation?
Apa yang dapat dilakukan JQuery?
Apa saja syntax dalam JQUERY?
Bagaimana cara implementasi JQuery
Contoh JQuery?
C.
Tujuan Pembuatan Makalah
Berdasarkan Rumusan masalah diatas, maka pembuatan Makalah ini bertujuan untuk :
Mengetahui penjelasan mengenai apa itu JQuery, serta memahami kemampuan yang
dimiliki JQuery.
Mengerti sejarah awal JQuery sampai sekarang
Mengerti apa saja kelebihan serta kekurangan yang dimiliki JQuery
Mengetahui apa saja manfaat penggunaan dengan menggunakan JQuery
Mengetahui keunggulan menggunakan JQuery
Dapat mengerti fitur yang di tawarkan jquery kepada penggunanya.
Mengetahui cara instalasi JQuery dan langkah langkah JQuery selector, dan Jquery
Manipulation.
4. Mengetahui apa saja yang dapat dilakukan JQuery.
Mengetahui Apa saja syntax dalam JQUERY?
Mengerti cara implementasi JQuer?
BAB II
PEMBAHASAN
A.
Pengertian JQuery
JQuery pertama dirilis pada tahun 2006 oleh John Resig. Dan kini jQuery telah digunakan oleh
beberapa situs yang canggih serta terkenal diantaranya seperti nama besar Google, Facebook,
Twitter, Youtube, Nokia dan masih banyak lagi yang menggunakannya. Tidak hanya situs
interlokal, melainkan situs lokal pun juga ada yang telah memakai jQuery, contohnya seperti
VivaNews, Studio 21, Kompas dan lain-lain.
JQuery sendiri adalah Javascript Library atau kumpulan kode/fungsi Javascript siap pakai,
sehingga mempermudah kita untuk membuat kode Javascript. Atau dalam kesimpulannya jQuery
menyederhanakan kode Javascript. Hal ini sesuai dengan slogannya “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.
Beberapa kemampuan yang dimiliki oleh JQuery sebagai berikut:
Kemudahan mengakses elemen-elemen HTML
Memanipulasi Elemen HTML
Memanipulasi CSS
Penanganan event HTML
Efek-Efek Javascript dan Animasi
Modifikasi HTML DOM
AJAX
5. MenyederhanakanKode javascript lainnya
B.
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.
C.
Kelebihan dan Kekurangan JQuery
1. JQuery memiliki beberapa kelebihan diantaranya adalah :
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.
6. Fungsi-fungsi yang disediakan didokumentasikan dengan baik beserta contoh
penggunaannya, hal ini mempermudah dalam pembelajaran jquery.
Support terhadap CSS1-3 selector, untuk fleksibilitas desain antar muka halaman website
dan interaksinya.
Website yang dibangun dengan jquery akan lebih interaktif dan menarik.
2. Selain mempunyai kelebihan JQuery pun memiliki beberapa kekurangan diantaranya
adalah
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.
Sehingga dapat disimpulkan jquery mampu merubah interaksi sebuah website menjadi
lebih menarik, namun harus di bayar dengan beban load yang lebih lama dibandingkan
dengan tidak menggunakan script. (hal ini tidak akan terasa jika anda memiliki komputer
yang powerful dan koneksi yang kencang)
D.
Manfaat menggunakan JQuery
Ada beberapa manfaat yang dapat kita ambil ketika menggunakan jQuery, diantaranya adalah :
Kompatibel dengan hampir seluruh browser
7. jQuery telah digunakan oleh website raksasa
Kompatibel dengan seluruh versi CSS
Didukung oleh banyak komunitas
Disuport oleh plugin yang sangat lengkap
Filenya hanya satu ukurannya pun relatif keci
Open source atau free
jQuery lebih diminati oleh para developer web pada saat ini
E.
Keunggulan menggunakan JQuery
Dibandingkan menggunakan lainnya ada beberapa keunggulan penggunaan jquery dari pada
lainnya diantaranya:
JQuery merupakan library JavaScript terhandal saat ini. Faktanya, banyak perusahaan
besar tingkat dunia menggunakan jQuery dengan teknologi Website mereka. Bahkan
website-website lokal pun tidak mau ketinggalan.
JQuery berhasil menyederhanakan fungsi-fungsi JavaScript dan Ajax yang rumit,
sehingga hanya dengan beberapa baris kode, kita bisa membuat website dengan tingkat
interaktivitas yang tinggi (responsif), bahkan membuat animasi yang canggih tanpa
memerlukan instalisasi plugin flash pada browser.
Sebenarnya penggunaan JQuery sangatlah mudah, karena tanpa harus dibekali
penguasaan pemograman JavaScript sekalipun, karena semuanya sudah dibungkus dalam
bentuk library dan plugin, Intinya kita hanya perlu tahu cara menerapkan dalam website
kita.
Kompatibel/cocok dengan semua browser yang populer, seperti Mozzila, Internet
Explorer, safari, Chrome, dan Opera.
Kompetible dengan semua versi CSS (CSS 1 sampai dengan CSS 3)
Dokumentasi, tutorial dan contoh-contohnya lengkap , silahkan kunjungi website
resminya di http://jquery.com/
Didukung oleh komunitas yang besar dan aktif, seperti forum, milis, Bliog, social
engering (twitter dan facebook), website dan tutorial.
8. Ketersediaan plugin yang sangat banyak jumlahnya. Plugin merupakan kemampuan
tambahan yang bisa disertakan pada jQuery.
File nya hanya satu dan ukuran nya pun kecil, hanya sekitar 20 KB, sehingga cepat
aksesnya.
Open source/free (gratis) dengan lisensi dari GNU General Public License dan MTT
License.
JQuery lebih banyak di gunakan oleh para developer web dibandingkan Javascript
Library Lainnya.
F.
Fitur yang ditawarkan JQuery terhadap Penggunanya
Seperti yang kita ketahui bahwa JQuery adalah sebuah framework/library JavaScript
yang dapat membantu kita mempermudah dan mempercepat pengolahan DOM pada
halaman web.
Dengan jQuery kita dapat membuat web lebih menarik dan interaktif dengan mudah.
jQuery sudah mengautomasi pekerjaan-pekerjaan yang umum dan mempersimple code
yang kompleks. Library ini sangat kecil dan mempunyai banyak pluggin yang dapat
mempermudah kita.
Adapun fitur-fitur yang ditawarkan oleh jQuery antara lain :
Mempermudah akses dan manipulasi ke bagian page tertentu. jQuery menawarkan
sebuah selector yang robust dan efesien untuk mengambil bagian tertentu pada dokumen
yang selanjutnya bisa dimanipulasi.
9. Mempermudah perubahan tampilan dokumen. jQuery dapat mengubah tampilan CSS
dengan mudah. Sehingga pengguna tanpa susah mengubahnya karena dengan kemudahan
tersebut diharapkan pengguna jquery tanpa repot-repot jika menginginkan perubahan
karena bisa terlaksana dengan mudah sekali.
Merespon interaksi user dengan webpage. jQuery mempunyai cara yang sangat-sangat
elegan untuk memasukkan sebuah even ke dalam salah satu bagian dari webpage.
Sehingga dapat membedakan dari lainnya.
Menambah animasi. Kita dapat memberi animasi pada webpage kita dengan jQuery,
dengan tersebut diharapkan pengguna tidak bosan dengan tampilannya karena bisa
dimasukan dengan animasi animasi yang diinginkan pengguna semisal animasi atau
tokoh kartun kesayangan sehinga dengan hal tersebut pengguna tidak cepat bosan dalam
menggunakan nya.
G.
Cara Instalasi JQuery, JQuery selector, dan Jquery Manipulation
Untuk dapat menginstalasi JQuery dapat di ikuti langkah langkah sebagai berikut :
Pertama-tama download dulu jQuery dari websitenyahttp://jquery.com/.
Ada dua pilihan download. Production dan development, perbedaannya adalah production
digunakan di realsite sedangkan development untuk masa developmen. Versi production sudah
di kompresi sehingga kode nya sudah tidak bisa dibaca lagi dan ukurannya jauh lebih kecil. Versi
developmen berguna jika kita mau mendebug jQuery.
10. Setelah mendownload maka load-lah jquery melalui tag script (perhatikan baris ke-6). sesuaikan
attribut srcnya dengan path jquery anda.
<meta
http-equiv="Content-Type"
content="text/html;
charset=utf-8"
/><script
type="text/javascript" src="jquery.js"></script>
Untuk JQuery Selector langkah langkahnya sebagai berikut :
Selector adalah fungsi utama pada jQuery. semua fungsi lainnya di jQuery dapat diakses melalui
selector. Penggunaan paling dasarnya adalah mempassingkan sebuah ekspressi (biasanya
ekspressi css) yang kemudian selanjutnya jQuery akan mencari elemen yang cocok. pada intinya
ini adalah fungsi untuk memilih elemen-elemen pad halaman web.
fungsi selector adalah $(„ekspressi‟). untuk penggunaan $() yang aman sebaiknya dilakukan
setelah semua page DOM selesai terbaca semua. jadi webpagenya sudah lengkap baru script di
eksekusi. kita dapat melakukannya dengan pada fungsi $(document).ready().
Adapun parameter yang bisa digunakan pada jquery adalah Id element, class element dan
element itu sendiri. Selector juga bisa mengenali hirarki sebagai parameter inputnya dan bisa
memfilternya langsung dari ekspressi.
*CATATAN : demo menggunakan layanan jsbin. anda bisa mengubah script html dan
javascriptnya langsung, dengan mendouble click. pilih tab output untuk melihat hasilnya
contoh 1. mengubah semua div yang mempunyai p
(silakan di utak-atik demonya)
<!--
Disini
kita
mengeload
library
Jquery
src="http://code.jquery.com/jquery-1.3.js"></script><script
<![CDATA[
--><script
type="text/javascript"
type="text/javascript">//
11. $(document).ready(function(){
// memangil semua div yang berisi p lalu ubah bordernya
$("div > p").css("border", "1px solid gray");
});
// ]]></script>
Ini adalah paragraf pertama
Ini adalah paragraf kedua didalam div
Ini adalah paragraf Ketiga
contoh 2. Memasukkan tag html kedalam elemen
<!--
Disini
kita
mengeload
library
Jquery
src="http://code.jquery.com/jquery-1.3.js"></script><script
<![CDATA[
$(document).ready(function(){
//memasukkan html kedalam elemen
$("
<div>
Saya adalah Paragraf Tabmahan
</div>
").appendTo("body")
// memangil semua div yang berisi p lalu ubah bordernya
$("div > p").css("border", "1px solid gray");
--><script
type="text/javascript"
type="text/javascript">//
12. });
// ]]></script>
Ini adalah paragraf pertama
Ini adalah paragraf kedua didalam div
Ini adalah paragraf Ketiga
Uji Coba
dari contoh diatas. coba kita buka halaman
lalu masukkan tambahkan kode ini satu persatu. lihat effect yang terjadi lalu pelajari fokuslah
pada parameter yang ada pada fungsi $(PARAMETER) bukan fungsi diibelakangnya karena itu
akan di jelaskan setelah ini.
//contoh selector menggunakan nama tag
$("div").css("border","3px solid red");
$("p").css("border","3px solid blue");
//contoh selector menggunakan nama object/element
$("#id_pertama").css("color","red");
//contoh selector menggunakan nama Kelas object
$(".merah").css("color","red");
*untuk dapat melihat perubahan script di coba satu-satu jangan langsung semua
Selanjutnya mengenai JQuery manipulation antara lain langkah langkahnya sebagai berikut :
Jquery Manipulation maksudnya penggunaan jquery untuk memanipulasi struktur dokumen. ada
7 kategori manipulasi yang disupport oleh jquery yaitu :
13. Perubahan Content. Kita dapat merubah kontent dari sebuah object dengan dua fungsi yaitu html
dan text. bedanya jika menggunakan text maka semua tag-tag html akan dituliskan sebagai mana
mestinya.
$("p").click(function () {
var htmlStr = $(this).html();
$(this).text(htmlStr);
});
Insert kedalam object. Setelah kita memilih sebuah object, kita dapat memasukkan tab html atau
object kedalamnya. ada dua jenis insert yaitu append dan prepend. append menambahkan objek
baru setelah value dari object tersebut, sedangkan prepend didepannya. Contoh
$("p").append("<strong>Hello</strong>");
$("span").appendTo("#conto"); // Objek dengan ID conto akan dimasukkan kedalam span
$("p").prepend("<b>Hello </b>");
$("span").prependTo("#conto");
Insert dikeluar object. Object yang akan ada tambahkan akan ada diluar masing-masing tag yang
dipilih.
$("p").before("<strong>Hello</strong>");
$("p").after("<strong>Hello</strong>");
14. $("span").insertAfter("#conto");
$("span").beforeAfter("#conto");
Insert kesekitar object
Mereplace object. Kita dapat mengganti isi dari object dengan syntax ini
$("button").click(function () {
$(this).replaceWith("
” + $(this).text() + “
");
});
Menghapus object. kita dapat menhapus object tertentu.
$("button").click(function () {
$("p").empty();
});
$("button").click(function () {
$("p").remove();
15. });
Mengopi object. Mengopi object ke tempat lain
$("b").clone().prependTo("p");
H.
Hal yang dapat dilakukan JQuery
Apa yang dapat dilakukan dengan jQuery?? mungkin anda sudah sering mendengar nama jquery
disebut sebut dalam teknologi web sekarang. Begitu tenarnya nama tersebut sehingga hampir
semua pengembang web menggunakannya. Berikut ini hal-hal yang dapat dilakukan jquery dan
beberapa contoh web dengan jquery.
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 halaman tertentu dengan mudah
16. 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.
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.
Menambahkan animasi ke dalam 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
17. 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 merefresh 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 penulis java script 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.
I.
Apa saja syntax dalam 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.
18. 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
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
19. 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);
});
J. 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
20. 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
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 email, 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.
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
21. marquee dalam tag HTML, tetapi dengan plugin ini, teks berjalan lebih lembut dan lebih banyak
variasi
K.
Contoh JQuery
Ini adalah bentuk bagian dari efect dengan jquery dan untuk JS-nya masih sama dengan posting
yang sebelumnya dan 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; }
span { color:red; } </style>
<script src="delJsMick.js"></script>
</head>
<body>
<button id="show">Show Length of Queue</button>
<span></span>
<div></div>
<script>$("#show").click(function () {
var n = jQuery.queue( $("div")[0], "fx" );
$("span").text("Queue length is: " + n.length);
26. BAB III
PENUTUP
A.
Kesimpulan
JQuery sendiri adalah Javascript Library atau kumpulan kode/fungsi Javascript siap pakai,
sehingga mempermudah kita untuk membuat kode Javascript. Atau dalam kesimpulannya jQuery
menyederhanakan kode Javascript. Hal ini sesuai dengan slogannya “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.
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.
JQuery memiliki beberapa kelebihan diantaranya
o Menyederhanakan penggunaan javascript
o Fungsi-fungsi yang disediakan didokumentasikan dengan baik
27. o Support terhadap CSS1-3 selector
o Website yang dibangun dengan jquery akan lebih interaktif dan menarik.
JQuery pun memiliki kekurangan diantaranya :
o 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.
o 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.
Manfaat menggunakan JQuery
o Kompatibel dengan hampir seluruh browser
o jQuery telah digunakan oleh website-website raksasa
o Kompatibel dengan seluruh versi CSS (dari CSS 1 sampai CSS 3)
o Didukung oleh banyak komunitas
o Disupport oleh plugin yang lengkap
o Filenya hanya satu dan ukurannya relatif kecil, sekitar 20kb
o Open source atau Free
o jQuery lebih diminati oleh para developer web saat ini
B.
Saran
Untuk setiap teknologi yang diciptakan pasti memiliki kegunaannya sendiri sendiri, seperti
JQuery diciptakan. JQuery pun tak luput dari kekurangan disamping sudah pasti mempunyai
kelebihan. Untuk kedepannya sepertinya JQuery akan menguasai karena fitur yang diberikannya
begitu menarik mungkin ini masanya JQuery.
28. DAFTAR PUSTAKA
http://koder.web.id/belajar-jquery-mudah/ (Diakses pada Sabtu 16november 2013 pukul 10:28
wib) http://radeninformatika.blogspot.com/2012/12/makalah-web-statis.html (Diakses
pada
Sabtu, 16 november 2013 pukul 11:08 wib),
http://ahmadsoffa.wordpress.com/2012/06/20/jquery-kelebihan-kekurangan-dan-fakta-lainnya/
(Diakses pada Selasa 12 november 2013 pukul 20:55 wib)
http://dhany86.blogspot.com/2010/07/kelebihan-kelebihan-menggunakan-jquery.html
(Diakses
pada Selasa, 12 november 2013 pukul 21:06 wib)
http://fitriafebrianti.wordpress.com/2013/02/27/manfaat-menggunakan-jquery/(Diakses
pada
Selasa, 12 november 2013 pukul 20:58 wib)
http://valentinofebrian.blogspot.com/2013/05/pengertian-jquery-dan-cara-kerjanya.html (Diakses
pada Selasa, 12 november 2013 pukul 21:01 wib)
http://bisnisajidwi.blogspot.com/2012/04/pengertian-jquery-javascript-library.html (Diakses
pada Selasa 12 november 2013 pukul 21:00 wib)
http://pincuran.com/index.php/love-indonesia/80-web-programming/104-sejarah-jquery (Diakses
pada Selasa, 12 november 2013 pukul 20:54 wib)
