Belajar JQUERY
Pada artikel kali ini saya akan membahas tentang Jquery, Point yang akan saya bahas sebagai berikut:
1.Apa
pengertian dari jquery?
2.Bagaimana
sejarah adanya jquery?
3.Apa
saja yang menjadi kelebihan dan kekurangan dari jquery?
4.Apakah
manfaat dari jquery?
5.Jelaskan
ragam kreasi dari jquery itu?
6.Apa
saja kegunaan dari jquery?
7.Bagaimana
cara menggunakan jquery?
8.Bagaimana
cara membuat website menggunakan jquery?
9.Apakah
perbedaan antara jquery dan javascript?
Tujuan Membuat Artikel Ini :
1.Untuk
mengetahui tentang pengertian jquery
2.Mengetahui
sejarah adanya jquery
3.Menyebutkan
dan menjelaskan kelebihan dan kekurangan dari jquery
4.Mengetahui
manfaat dari jquery itu sendiri
5.Dapat
menjelaskan ragam kreasi dari jquery
6.Mengetahui
kegunaan jquery
7.Mengetahui
cara menggnakan jquery
8.Mengetahui
cara membuat website di Indonesia
9.Mengetahui
perbedaan antara jquery dan javascript
PEMBAHASAN
1.Sejarah jquery
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.
2.Apa
itu jquery
Jquery
adalah kumpulan beberapa kode yang siap dipakai untuk mempermudah dan
mempercepat dalam pembuatan kode Javascript. Yang awalnya menggunakan kode yang
sangat panjang namun dengan mengggunakan jquery kita bisa langsung memanggil
fungsi yang terdapat dalam Library tersebut. Jadi intinya jquery itu
menyederhanakan kode Javascript sesuai dengan slogannya yaitu ”Write
less, do more”. Pengertian lain dari jquery adalah pustaka
JavaScript kecil bersumber terbuka yang menekankan pada interaksi antara
JavaScript dan HTML. 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.
Dengan
semakin berkembangnya JQuery, semakin memudahkan pula untuk para web programmer
membuat website yang cantik dan dinamis. Nah, kenapa JQuery banyak digunakan,
salah satunya adalah JQuery mampu menampilkan animasi-animasi semisal
slideshow, datepicker, autocomplete, dan masih banyak lagi tapi tanpa membuat
suatu website itu terlihat berat atau memakan waktu lama untuk diload.
File
jQuery adalah library Javascript dasarnya. Ini perubahan cara pengembang
menulis Javascript karena menangani banyak fitur utama yang digunakan oleh
pengembang Javascript. Coding untuk hal-hal seperti event handler dan animasi
menjadi jauh lebih mudah melalui penggunaan jQuery karena memerlukan sedikit
coding.
Perpustakaan
Jquery dapat
dimuat dengan cepat dan diimplementasikan langsung untuk script website yang
dapat digunakan waktu dan waktu lagi. Ini adalah batu loncatan yang besar di
bidang efisiensi pemrograman yang agak mudah dipelajari. Sebagian besar proses
belajar didasarkan pada tutorial yang menunjukkan bagaimana memanipulasi
pengembang HMTL, CSS, dan kode Ajax.
Plugin untuk jQuery telah menjadi cukup menjadi di antara para pengembang karena banyak dari mereka menawarkan kesempatan untuk menambahkan dimensi yang berbeda untuk halaman web. Setelah sumber file jQuery telah dimuat, salah satu perintah yang paling berguna adalah fungsi dokumen yang register acara siap. Hal ini pada titik ini bahwa pengguna dapat mulai menambahkan acara.
Bahasa adalah salah satu sederhana karena banyak peristiwa yang digunakan diberi nama dengan cara deskriptif yang bertepatan dengan perintah. Pengembang yang ingin menggunakan fungsi keluar memudar, misalnya, dapat menggunakan fadeOut jQuery () perintah untuk memulai dengan ini. Sama bekerja untuk menyembunyikan dan perintah menghidupkan yang digunakan oleh pengembang jQuery.
Ada banyak fungsi lainnya banyak digunakan untuk Cascading style sheet juga. Sintaks untuk CSS adalah sebagai berikut: css (). Ini memberi Anda berbagai pilihan karena memiliki tiga opsi sintaks yang berbeda yang dapat digunakan untuk melakukan fungsi yang berbeda. Ada css (nama) fungsi yang mengembalikan nilai properti CSS, ada juga css (nama, nilai) fungsi yang menetapkan properti dan nilai. Terakhir, ada CSS ({properti}) yang menetapkan beberapa properti dan nilai-nilai. Fungsi-fungsi ini ideal karena mereka mengijinkan pengguna untuk menambahkan tingkat tertentu dari kode untuk proyek-proyek mereka.
Ini adalah salah satu alat scripting terpanas untuk pengembangan web yang mengikuti pola dari komunitas kode open source. JQuery dipecah dalam istilah yang sangat sederhana dengan fungsi kata kunci sebagai identifier objek yang namanya $. Pengembang yang mampu mengikuti dan mengedit array tutorial seharusnya tidak memiliki masalah menggunakan kode berorientasi obyek. Ini jelas membuat pengembangan lebih mudah bagi mereka yang mengetahui JavaScript
3. Keunggulan
jquery
1.Mempunyai daya akses yang sangat cepat Karena hanya terdiri dari satu file saja dan ukurannya pun sangat kecil berkisar 20Kb
2.Bersifat kompatibel/ cocok dengan banyak browser popular di dunia
3.Mempunyai banyak komunitas yang besar dan selalu aktif serta dokumentasi yang lengkap
4.Banyaknya plugin yang disediakan secara cuma-Cuma (gratis ). Plugin adalah kemampuan tambahan yang bisa disertakan pada Jquery
5.Terdapat Jquery yang berlisensi GNU atau yang dikenal dengan free. Maka kita menggunakannya dengan tanpa dikenakan biaya apapun
6.Terdapat API( Application Programming Interface) di dalamnya
7.Mendukung Ajax ( Asynchronous Javasctip and XML)
8.Telah banyak digunakan oleh website-website dunia sebut saja Google, twitter, facebook dan lain-lain.
9.Bersifat kompatibel dengan semua versi CSS dari yang versi 1 sampai versi 3
10.Mempunyai tutorial, dokumentasi dan contoh-contoh yang lengkap yang bisa kita ketahui dengan membuka halaman website nya jquery.com.
11.Lebih banyak digunakan oleh para developer web dibandingkan dengan Javascript lainnya
12. “write
less, do more” sedikit menulis tapi banyak bekerja
13.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.
14.Support terhadap CSS1-3 selector, untuk fleksibilitas desain antar muka halaman website dan interaksinya
15.Halaman website/blog yang dibangun dengan jQuery akan lebih interaktif dan menarik, membuat para pengunjung lebih terkesan.
Kekurangan 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.
4.Kemampuan
yang dimiliki jQuery
1. Mempermudah
akses dan manipulasi elemen tertentu pada dokumen.
Biasanya
diperlukan baris program yang cukup panjang untuk mengakses suatu elemen
dokumen . Namun , jQuery dapat melakukannya hanya dalam beberapa
baris program saja. Karena jQuery menpunyai Selector yang sangat
efisien untuk mengakses suatu elemen tertentu pada dokumen yang selanjutnya
bisa dimanipulasi sesuai dengan keinginan kita.
2. Mempermudah
modifikasi/perubahan tampilan halaman web.
Biasanya
untuk memodifikasi tampilan halaman web digunakan CSS. Permasalahannya, CSS
sangat dipengaruhi oleh web browser yang digunakan sehingga Sering terjadi
halaman web yang dibuat sudah rapi dan bagus tampilannyadi browser Mozilla,
namun ketika ditampilkan di Opera menjadi berantakan. Namun, jQuery
dapat menyesuaikan style CSS pada semua browser, sehingga permasalahann
tersebut dapat dihindari.
3. Mempersingkat
Ajax (Asynchronous Javascript and XML)
Kemampuan
favorit dari Ajex adalah mampu mengambil informasi dari server tanpa
melakukan refresh pada halaman web, artinya halaman web terlihat berganti
secara otomatis. Apabila kita menuliskan kode Ajax secara manual, biasanya
diperlukan baris yang cukup panjang, namun jQuery dapat mempersingkatnya
menggunakan Ajax cell,perbandingan 25 baris kode Ajax dapat disingkat menjadi 5
baris kode aja kita menggunakan jQuery.
4. Memiliki
API (Application Programming Interface)
Dengan
API, jQuery dapat memanipulasi content pada suatu halaman web, seperti
pengubahan teks, manipulasi gambar (resize,rotate,crop), penyusunan
daftar (list), pengurutan list, paging, dan lain-lain.
- Mampu merespon
interaksi antara user dengan halaman web dengan lebih cepat.
- Menyediakan fasilitas
untuk membuat animasi sekelas Flash dengan mudah.
5. Ragam
Kreasi jQuery
1. Use
jquery to “turn off the lights” while watching videos
2. 3D
sphere using jquery
3. Animate
curtains opening with jquery
4. Quick
tip – resizing images on browser window size
5. Sliding
boxes and captains with jquery
6. Creating
a fading header
7. Jcaption
jquery image captains with customizable mark up, style, and animation
6. Kegunaan
dari jQuery
1.
Dokumentasi yang baik
Dokumentasi
yang disediakan pada web jQueryMobile sangatlah mudah dipahami. Di bagian awal
akan dijelaskan bagaimana langkah-langkah untuk memulai menggunakan
jQueryMobile. Dengan pengetahuan dasar HTML saja, seseorang akan cepat memahami
tutorial yang ada didalamnya. Selain itu, dokumentasi juga dikemas dalam bentuk
yang menyenangkan, yaitu dengan melampirkan contoh tampilan yang dihasilkan.
Pada
halaman resources web jQueryMobile, banyak sekali informasi yang didapatkan
seputar tutorial, plugins, extension, tools pengambangan, ebook, dsb. yang bisa
digunakan sebagai panduan.
2.
Mendesain Template dengan ThemeRoller
Pengguna
jQueryMobile akan dimanjakan dengan fasilitas Themeroller. Themeroller
merupakan fasilitas yang disediakan oleh jQueryMobile untuk mengganti warna
dasar desain tampilan sesuai kebutuhan dengan cara drag & drop. Script
hasil modifikasi yang dihasilkan pun dapat diunduh untuk dapat dikembangkan
lebih lanjut.
Uniknya,
themes untuk tampilan jQueryMobile dapat terdiri dari beberapa kombinasi,
sehingga untuk menggunakan jenis themes yang dipilih cukup dipanggil nama class
dalam HTML yang bersesuaian.
3.
Fitur-fitur terbaik
jQueryMobile
dikembangkan dengan core jQuery yang terkenal dengan desain UI nya yang ringan
dan lembut, sehingga bisa menggantikan teknologi flash. Kemampuan yang baik
untuk layar sentuh seperti pada perangkat-perangkat dengan browser iOS,
Android, Blackberry, Palm WebOS, Nokia/Symbian, Windows Phone 7, MeeGo, Opera
Mobile/Mini, Firefox Mobile, Kindle, Nook, dan lainnya menambah daya tarik
jQueryMobile. JQueryMobile juga telah menggunakan markup dasar HTML5 dan
CSS3. Desain tampilan yang responsive sangat membantu ketika ditampilkan pada
smartphone yang mendukung fitur accelorometer (tampilan otomatis
vertikal/horizontal)
4.
jQueryMobile Maps
Penggunaan
peta (maps) dalam perangkat bergerak sangatlah penting. Para pengembang
jQueryMobile juga telah menyiasati hal tersebut dengan mulai membuat
dokumentasi cara menampilkan maps untuk tujuan tertentu. Tutorial dan contoh
aplikasi jQueryMobile Maps dapat dipelajari pada halaman ini:http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-mobile.html. Sebagai tambahan, jenis maps yang
digunakan pada tutorial tersebut telah menggunakan Google Maps v3, yang
merupakan versi Google Maps terbaru.
7. Cara
menggunakan jQuery
1. 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
2. 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.
gambar
:
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.
8.3.
Akan muncul code dari library JQuery
Klik
CTRL + S di keyboard untuk menyimpan kode tersebut ke direktori website anda
4. 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 :
gambar :
script pemanggil jQuery
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)
8.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).
Selanjutnya kita harus meload javascript yang akan kita gunakan. Dalam hal ini yaitu jquery-1.4.2.js. Tambahkan di dalam tag headnya
Tahap persiapan telah selesai, sekarang saatnya kita masuk tahap main2 dengan jquery Selanjutnya tambahkan script di bagian head seperti dibawah ini :
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 sebuah kalimat apa saja. Contoh :
Kemudian
tambahkan di tag scriptnya sehingga menjadi seperti ini :
Cukup mudah bukan :). 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.
Sekarang
kita akan mencoba mengubah css dari body dengan jquery. Referensi, silakan baca http://api.jquery.com/css/. Ubah code menjadi seperti
berikut.
Tambahkan yang di bold ya. Sebetulnya sama konsepnya seperti yang awal. Hanya saja kali ini kita mengubah cssnya. Dalam contoh kali ini saya mengubah warna background belakang dari body dan warna tulisan yang ada di body. Maka sourcenya akan seperti yang ditunjukkan seperti yang diatas. Source code lengkapnya sebagai berikut.Maka akan muncul perubahan ketika anda meload htmlnya. Silakan dicoba Maksud dari $(“body”).css(“background-color”,”black”); adalah mengubah background-color dari tag body dengan warna “black”.
Pengertian yang sama dengan $(“body”).css(“color”,”white”);
Sekarang kita akan latihan event handler di jquery. Kalau di javascript itu contohnya seperti .onclick, onload, onblur, dll. Referensi : http://docs.jquery.com/Events Source codenya.
Hal yang perlu diperhatikan :
selectors untuk class dan id. Untuk class –> $(“.[classname])….., ada ‘titik’ di depan nama kelasnya, untuk id –> $(“#……”)…. Ada ‘pagar’ didepan nama idnya. Sebetulnya konsepnya sama seperti css bukan –>. Untuk event di jquery anda dapat melihatnya di http://docs.jquery.com/Events
Salah satu yang menarik dari jquery adalah fungsi animasi yang disediakan. Anda dapat melihatnya di http://docs.jquery.com/Effects untuk panduan dokumentasinya.
Berikut contoh source codenya.
hello
world
lorem
ipsum lorem ipsum
lorem
ipsum lorem ipsum
lorem
ipsum lorem ipsum
lorem
ipsum lorem ipsum
Perhatikan source code yang saya tambahkan (di bold). Saya menambahkan suatu div dan suatu button yang jika di klik maka div akan perlahan-lahan hilang (fadeout).
Untuk itu saya menambahkan event handler pada button dengan id “hide” yaitu $(“#hide”).click(function () { …. dan menghilangkannya dengan fungsi fadeOut(‘slow’, function() { ….. atau fadeOut(‘slow’) saja.
Keterangan lebih rinci mengenai fadeout, dan animasi-animasi lainnya anda dapat liat di dokumentasi.
9.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.
Mari kita lihat bagaimana penulisan javascript dan javascript untuk melakukan sebuah manipulasi background dokumen html berikut :
Dari script diatas bisa anda lihat, bahwa jquery lebih bepusat pada objek sehingga cara melakukan perubahannya akan lebih sederhana.
Kesimpulan
Jquery adalah kumpulan beberapa kode yang siap dipakai untuk mempermudah dan mempercepat dalam pembuatan kode Javascript
Jadi
intinya jquery itu menyederhanakan kode Javascript sesuai dengan slogannya yaitu”Write less, do more”. Pengertian lain dari jquery
adalah pustaka JavaScript kecil bersumber terbuka yang menekankan pada
interaksi antara JavaScript dan HTML. Jquery terdapat banyak eklebihan dan
kekurangan di dalamnya. Jquery juga mempunyai beragam jenis kreasi yaitu
terdapat 7 ragam. Jika dilihat cara kerja dari jquery pun kelihatannya tidak
terlalu sulit.
Saran
Artikel ini diharapkan mampu dijadikan referensi dan sarana pembelajaran mengenai jaringan komputer serta mampu diaplikasikan dan dikembangkan di kehidupan sehari-hari tepatnya dunia komputerisasi.
Jika anda mau menyimpan artikel ini,silakan download file nya berikut ini :
Demikian,Semoga Bermanfaat.
0 Komentar