MAKALAH JQUERY
Disusun Guna Memenuhi Tugas Mata Kuliah Teknologi Informasi dan
Teknologi (TIK)
Oleh :
Nama : Ulfa
Nur Aryanti
NIM : 1102412069
Rombel : 03
FAKULTAS ILMU PENDIDIKAN
UNIVERSITAS NEGERI SEMARANG
2013
BAB 1 PENDAHULUAN
1.
Latar Belakang
Dalam dasawarsa ini perkembangan
ilmu komunikasi dan teknologi informasi sangat pesat, hal ini ditandai dengan
berkembangnya teknologi internet yang memudahkan manuisa dalam meringankan
pekerjaan dan mempermudah dalam berkomunikasii dan saling tukar menukar
informasi.
Internet telah menyediakan berbagai faslitas seperti,
e-mail, www( world wide web), dan blog. Perkembangan blog pun semakin cepat
terbukti dengan semakin banyaknya orang yang menggunakan blog sebagai media
informasi dunia maya. Sekarang telah terdapat jutaan blog dengan pertumbuhan
yang sangat signifikan.
Dalam pembuatan dan pengembangan web atau blog para web
developer memerlukan pengetahuan tentang yang cukup mendalam tentang JQUERY oleh
sebab itu besar harapan penulis agar makalah ini dapat digunakan para pemula
dalam membangun sebuah web.
2.
Rumusan Masalah
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?
3.
Tujuan Penelitian
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
BAB II
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.
Ketika jQuery adalah
menggunakan referensi skrip file jquery.js. Perpustakaan ini adalah open
source, yang berarti bahwa hal itu dapat dimodifikasi oleh pengembang untuk
memenuhi kebutuhan spesifik untuk situs Web tertentu. File ini berisi semua
model objek dokumen (DOM), dan ini menyederhanakan fungsi untuk cross-browser
dan lintas-bahasa kompatibilitas.
Waktu pengembangan yang lebih cepat juga
merupakan salah satu hal yang dikaitkan dengan pengembangan halaman web jQuery.
Ini adalah sisi klien Ajax kerangka yang mendukung semua teknologi sisi server
pengembangan aplikasi web. Hal ini memungkinkan pengembang untuk menulis kode
kurang untuk melakukan fungsi yang sama lebih cepat. Hal ini bahkan dapat lebih
baik ketika digunakan untuk mengedit kode yang sudah ada.
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.
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
gambar : screenshot website jquery.com
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
gambar : jquery code library
Klik CTRL + S di keyboard untuk menyimpan kode tersebut ke direktori website
anda
gambar : save jquery lib pada direktori website
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)
gambar : inti dari jQuery
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
<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>
|
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>
|
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.
<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();
alert(text);
$("body").css("background-color","black");
$("body").css("color","white");
});
</script>
|
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.
<html>
<head>
<script type="text/javascript"
src="jquery-1.4.2.js"></script>
<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();
alert(text);
$("body").css("background-color","black");
$("body").css("color","white");
$("#idButton").click(
function()
{
alert("button
dengan id di click");
}
);
$(".clsButton").click(
function()
{
alert("button
dengan calss di click");
}
);
});
</script>
</head>
<body>
hello world
<button
id="idButton"> coba klik saya</button>
<button
class="clsButton"> coba klik saya</button>
</body>
</html>
|
Screen shotnya
Hasilnya.
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.
<html>
<head>
<script
type="text/javascript"
src="jquery-1.4.2.js"></script>
<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();
alert(text);
//mengubah
css
$("body").css("background-color","black");
$("body").css("color","white");
//event
handler
$("#idButton").click(
function()
{
//event
jika button di klik
alert("button
dengan id di click");
}
);
//event
handler
$(".clsButton").click(
function()
{
//event
jika button di klik
alert("button
dengan calss di click");
}
);
//event
handler
$("#hide").click(
function()
{
//hilangkan
div id animated secara perlahan2
$("#animated").fadeOut('slow',
function() {
alert("udh
selesai animasinya");
});
//atau
(tanpa ada pesan selesainya <img src
" alt=":)"
class="wp-smiley"> )
//$("#animated").fadeOut('slow');
}
);
});
</script>
</head>
<body>
hello world
<button
id="idButton"> coba klik saya</button>
<button
class="clsButton"> coba klik saya</button>
<div
id="animated">
lorem
ipsum lorem ipsum
lorem
ipsum lorem ipsum
lorem
ipsum lorem ipsum
lorem
ipsum lorem ipsum
</div>
<button id="hide">
sembunyikan saya</button>
</body>
</html>
|
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 :
1
2
3
4
5
6
7
|
<script
language="javascript">
function changeBackground(color)
{
document.body.style.background
= color;
}
onload="changeBackground('red');"
</script>
|
1
2
3
|
<script>
$('body').css('background',
'#ccc');
</script>
|
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
BAB III
PENUTUP
1.
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.
2.
Saran
Makalah ini diharapkan mampu dijadikan referensi
dan sarana pembelajaran mengenai jaringan komputer serta mampu diaplikasikan
dan dikembangkan di kehidupan sehari-hari tepatnya dunia komputerisasi.
DAFTAR PUSTAKA
1.
Pradita, viyan. 2013. Pengertian jquery dan ragam kreasinya. Kode blogger.htm. diakses
pada 18 desember 2013
2.
Sisvanto, gregah. 2012. Mari membahas tentang
jquery. http://tecnoismylife.blogspot.com
diakses pada 12 november 2013
3.
Johan. 2013. Tentang
fungsi jquery dan sejarahnya. www.ilmugrafis.com.
Diakses pada tanggal 12 november 2013
4.
Sofa, ahmad. 2012. Jquery kelebihan kekurangan dan fakta lainnya. http://ahmadsoffa.blogspot.com
. diakses pada tanggal 12 november 2013
5.
Zulfikar. 2011.
Pengertian jquery dan ragam
kreasinya. http://kode-blogger.blogspot.com/. Diakses
pada 12 november2013
6.
Kakaeriel. 2012. Pengenalan dasar jquery. http://kakaeriel.com . diakses pada 20
november 2013
7.
Hakim, zainal. 2013. Kumpulan artikel pemrograman jquery. www.zainalhakim.web.id .
diakses pada 20 november 2013
8.
Johan. 2013. Cara
menggunakan Jquery. www.ilmugrafis.com.
Diakses pada 18 desember 2013
nice information min
BalasHapusisolasi double tape hp