JQuery adalah framework Javascript yang memudahkan interaksi antara Javascript dan HTML. Ia dirilis pada tahun 2006 oleh John Resig dan menjadi populer karena kesederhanaan penulisan kode namun hasil yang luas. JQuery merupakan library open source yang hanya berukuran kecil namun fleksibel dengan banyak plugin.
1. PENGERTIAN JQUERY
Dosen Pengampu : Septia Lutfi, S.Kom, M.Kom
Nama : Siti Rusmiatun
NIM : 2114R0811
2. 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 memiliki slogan “Write
less, do more” yang kurang lebih maksudnya adalah
kesederhanaan dalam penulisan code, tapi dengan hasil yang
lebih banyak.
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 bentuk plugin. Saat ini
tersedia ribuan plugin yang dapat diperoleh secara gratis di
internet.
3. Petama 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 OpenSource yang
menekankan pada interaksi antara JavaScript dan HTML.
Apa bedanya dengan situs-situs yang tidak menggunakan
JQuery? banyak bedanya, misalnya browser seakan tidak merefresh
sebuah page ketika kita men-submit sebuah data kedalam server
mereka. Dan lebih hebatnya lagi JQuery mempunyai animasi tanpa
menggunakan flash(.swf), jadi lebih cepeat diload didalam browser dan
tanpa harus install plugins.
4. Mempunyai daya akses yang sangat cepat Karena hanya terdiri dari
satu file saja dan ukurannya pun sangat kecil berkisar 20Kb
Bersifat kompatibel/ cocok dengan banyak browser popular di dunia
Mempunyai banyak komunitas yang besar dan selalu aktif serta
dokumentasi yang lengkap
Banyaknya plugin yang disediakan secara cuma-Cuma (gratis ).
Plugin adalah kemampuan tambahan yang bisa disertakan pada
Jquery
Terdapat Jquery yang berlisensi GNU atau yang dikenal dengan
free. Maka kita menggunakannya dengan tanpa dikenakan biaya
apapun
Terdapat API( Application Programming Interface) di dalamnya
Mendukung Ajax ( Asynchronous Javasctip and XML)
Telah banyak digunakan oleh website-website dunia sebut saja
Google, twitter, facebook dan lain-lain.
Bersifat kompatibel dengan semua versi CSS dari yang versi 1
sampai versi 3
5. Mempunyai tutorial, dokumentasi dan contoh-contoh yang lengkap
yang bisa kita ketahui dengan membuka halaman website nya
jquery.
Lebih banyak digunakan oleh para developer web dibandingkan
dengan Javascript lainnya
“write less, do more” sedikit menulis tapi banyak bekerja
Menyederhanakan penggunaan javascript, karena kita cukup
menggunakan fungsi dari library javascropt yang ada. Juga
mempercepat coding javascript dalam sebuah website.
Dibandingkan bila kita harus mulai sebuah script javascript satu per
satu dari nol.
Support terhadap CSS1-3 selector, untuk fleksibilitas desain antar
muka halaman website dan interaksinya
Halaman website/blog yang dibangun dengan jQuery akan lebih
interaktif dan menarik, membuat para pengunjung lebih terkesan.
6. a. 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.
b. 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.
7. 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)
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
8. Berikut beberapa kemampuan yang dimiliki yang dapat membuat kita
berdecak kagum:
Mempermudah akses dan manipulasi elemen tertentu pada dokumen.
Mempermudah modifikasi/perubahan tampilan halaman web.
Mempersingkat Ajax (Asynchronous Javacsript and XML).
Memiliki API (Application Programming Interface).
Mampu merespon interaksi antara user dengan halaman web dengan
lebih cepat.
Menyediakan fasilitas untuk membuat animasi sekelas Flash dengan
mudah.
9. CARA KERJA JQUERY
Cara kerja jQuery dapat dijabarkan sebagai berikut :
JQuery akan memastikan bahwa semua elemen atau elemen yang
diinginkan sudah ditampilkan semua di halaman web, fungsi yang
digunakan adalah:
$(document).ready(function(){
// baris kode jQuery akan dijalankan
// apabila semua elemen sudah ditampilkan semua
});
10. Setelah semua elemen ditampilkan, tahap berikutnya adalah memilih
elemen berdasarkan class atau id yang telah didefinisikan. Dalam hal
ini, jQuery menggunakan fungsi Selector.
$("#foto")
$(".sembunyi")
$(".tampil")
Setelah elemen dipilih, tahap berikutnya adalah memberikan
aksi/operasi terhadap elemen yang sudah dipilih. Misalnya tombol yang
akan menyembunyikan dan memunculkan kembali gambar.
$(".sembunyi").click(function(){
$("#foto").hide("slow");
11. // apabila semua elemen sudah ditampilkan semua
)};
Setelah semua elemen ditampilkan, tahap berikutnya adalah memilih
elemen berdasarkan class atau id yang telah didefinisikan. Dalam hal
ini, jQuery menggunakan fungsi Selector.
$("#foto")
$(".sembunyi")
$(".tampil")
12. Cara menggunakan jQuery
Ok pertama - tama adalah kita harus mendownload terlebih dahulu
jQuery Library (inti dari jQuery). Dimana download jQuery Library?
Downloadnya di www.jquery.com , silahkan klik Download jQuery. Saat
penulisan tutorial ini library jQuery telah sampai versi 1.9.1
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.
13. Cara membuat website sederhana dengan
jquery
Langkah-langkahnya sebagai berikut :
Download terlebih dahulu jquery.js yang ada di http://jquery.com/ di link
inihttp://code.jquery.com/jquery-
1.4.2.min.js atau http://code.jquery.com/jquery-1.4.2.js. Perbedaan
antara link pertama dan kedua adalah link pertama “yang jquery-
1.4.2.min.js” merupakan versi compress dari yang versi development
“jquery-1.4.2.js”. Jadi pada dasarnya Anda hanya membutuhkan satu
jenis saja untuk digunakan. Saran saya, gunakanlah yang versi
development (yang kedua) supaya lebih mudah untuk dibaca Setelah itu
persiapkan editor yang sering anda gunakan, seperti notepad,
notepad++, scite, netbeans, ataupun eclipse. Kali ini saya akan
menggunakan notepad++ saja.
Buatlah file baru berekstensi .html dan jangan lupa file jquery-
1.4.2.js ada pada kali ini, saya memberi nama filenya jquery-latihan.
html. kemudian buka jquery-latihan.html tersebut dengan editor
anda dan buat template code html biasa (tag html, head, body)
14. Selanjutnya kita harus meload javascript yang akan kita gunakan. Dalam hal ini
yaitu jquery-1.4.2.js. Tambahkan di dalam tag headnya
<head>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
</head>
Tahap persiapan telah selesai, sekarang saatnya kita masuk tahap main2
dengan jquery. Selanjutnya tambahkan script di bagian head seperti dibawah
ini :
<head>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script>
//code ini akan dieksekusi ketika halaman ini di load pertama kali
$(document).ready(function(){
//kode-kode lainnya
});
</script>
</head>
15. Source code “$(document).ready(function(){});” pada jquery sama halnya
seperti code window.onload pada javascript biasa. Fungsi ini akan dipanggil
ketika halaman html ini di load oleh browser. Nah, nantinya kode-kode jquery
kita akan diletakan di dalam situ deh.
$(document).ready(function(){ //disini});. “disini” –> tempat dimana anda dapat
menambahkan script-script lainnya. Sekarang saya akan coba mengambil text
dari body. Sebelumnya, tambahkan di dalam tag <body> sebuah kalimat apa
saja. Contoh
<body>
Hello World!
</body>
Kemudian tambahkan di tag scriptnya sehingga menjadi seperti ini :
<script type="text/javascript">
//code ini akan dieksekusi ketika halaman ini di load pertama kali
$(document).ready(function(){
//kode-kode lainnya
var text = $("body").text(); //deklarasi dan inisialisasi variable text
alert(text); //menampilkan windows alert
});
</script>
16. Sekarang coba anda save dan jalankan jquery-latihan di browser anda.
Ketika di load pertama kali, maka akan muncul windows alert”.
Yang menampilkan “Hello World!
Perhatikan baris $(“body”).text(), $(“body”) merupakan salah satu contoh
“Selector” terhadap suatu tag html (body). Keterangan lebih lengkap
mengenai selectors di jquery ada disini : http://docs.jquery.com/Selectors.
Kemudian .text() bermakna mengambil semua text dalam suatu “selectors”
tertentu, dalam hal ini adalah body. Kemudian hasilnya (bertipe string)
disimpan dalam variable bernama text dan ditampilkan kelayar dengan
fungsi alert bawaan javascript. “alert” bukan fungsi jquery tapi fungsi
“native” javascript. Cobalah anda load halaman html anda, maka akan
muncul alert yang isinya text dalam tag body anda.
17. PERBEDAAN JQUERY DENGAN JAVASCRIPT
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.
18. Mari kita lihat bagaimana penulisan javascript dan javascript untuk
melakukan sebuah manipulasi background dokumen html berikut :
?
1<script language="javascript">
2function changeBackground(color)
3{
4document.body.style.background = color;
5}
6onload="changeBackground('red');“
7</script>
?
1</script>
2$('body').css('background', '#ccc');
3</script>
19. Dari script diatas bisa anda lihat, bahwa jquery lebih bepusat pada objek
sehingga cara melakukan perubahannya akan lebih sederhana.
See more at: http://www.zainalhakim.web.id/posting/perbedaan-javascript-dan-
jquery.html#sthash.JL5MyJG0.dpuf
