Teks tersebut membahas perbedaan antara jQuery dan JavaScript. jQuery adalah library JavaScript yang dirancang untuk memudahkan manipulasi dokumen HTML dan interaksi antara JavaScript dengan HTML, sedangkan JavaScript adalah bahasa pemrograman untuk berjalan di browser. jQuery menyederhanakan penulisan kode JavaScript dengan menggunakan objek dan selector CSS.

1. Dosen Pengampu : Septia Lutfi, S.Kom, M.Kom
Nama : Randian Rizki Pradana
NIM : 2114R0880

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 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.  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.
Cara menggunakan jQuery

13. 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)
Cara membuat website sederhana dengan
jquery

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 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.
PERBEDAAN JQUERY DENGAN JAVASCRIPT

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