MENGENAL
JQUERY
Makalah Ini
Dibuat untuk Memenuhi Tugas Matakuliah Pemrograman Web dan Internet
Disusun
oleh :
Fahrur Raji
11.11.5249
Teknik Informatika
STIMIK Amikom Yogyakarta
2015
BAB
I
PENDAHULUAN
PENDAHULUAN
A.
Latar
Belakang
Seiring
dengan perkembangan jaman, teknologi juga semakin berkembang.Dengan hadirnya
teknologi pun membawa dampak negatif dan positif. Tinggal bagaimana kita bias
memanfaatkannya dengan baik. Bukan kita yang dimanfaatkan oleh teknologi sekarang.
Dampak
negatif yang dapat ditimbulkan 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.
Ada
banyak kerangka kerja JavaScript lain di luar sana, tapi jQuery tampaknya
menjadi yang paling populer, dan juga yang paling diperpanjang.
Banyak
perusahaan terbesar di jQuery penggunaan Web, seperti:
·
Google
·
Microsoft
·
IBM
·
Netfli
B.
Rumusan
Masalah
1.
Mengetahui apa itu Jquery?
2.
Bagaimana sejarah Jquery?
3.
Bagaimana versi Jquery?
4.
Apa saja keunggulan Jquery?
5.
Apa saja fitur Jquery?
6.
Apakemampuan Jquery?
7.
Apakah kelebihan dan kelemahan Jquery?
8.
Apa event-event dasar Jquery?
9.
Apa fungsi jquery?
10.
Bagaimana cara menginstal
Jquery?
11.
Bagaimana
pengimplementasian Jquery?
12.
Bagaiaman contoh dari
jquery?
C.
Tujuan
Penulisan
Adapun tujuan dari
penulisan makalah ini antara lain:
1. Untuk
memenuhi tugas dari dosen mata kuliah Teknologi Informasi dan Komunikasi
2. Untuk
mengetahui pengertian Jquery
3. Untuk
mengetahui sejarah Jquiery
4. Untuk
mengetahui keunggulan Jquery?
5. Untuk
mengetahui saja fitur Jquery?
6. Untuk
mengetahui kemampuan Jquery?
7. Untuk
mengetahui kelebihan dan kelemahan Jquery?
8. Untuk
mengetahui event-event dasar Jquery?
9. Untuk
Mengetahui fungsi jquery?
10. Untuk
Mengetahui cara menginstal Jquery?
11. Untuk
Mengetahui pengimplementasian Jquery?
12. Untuk
Mengetahui contoh dari jquery?
BAB
II
PEMBAHASAN
PEMBAHASAN
A.
Pengertian
Jquery
jQuery
adalah javascript library, jQuery mempunyai semboyan “write less, do more”.
jQuery dirancang untuk memperingkas kode-kode javascript. JQuery adalah
javascript library yang cepat dan ringan untuk menangani dokumen HTML,
menangani event, membuat animasi dan interakasi ajax. JQuery dirancang untuk
mengubah cara anda menulis javascript.
JQuery
adalah library Javascript yang dibuat untuk memudahkan pembuatan website dengan
HTML yang berjalan di sisi Client. Script JQuery dibuat untuk memudahkan pengaturan document
seperti menyeleksi object dengan element DOM dan membuat aplikasi dengan AJAX. Jquery juga menyediakan layanan atau
support para developers untuk membuat
plug-ins di dalam bahasa Javascript tentunya. Sehingga memungkinkan para developer website membuat
website lebih interaktif dengan animasi, efek – efek, tema dan widget. Dengan menggunakan
JQuery kita bisa meluapkan kreatifitas untuk membuat website dinamis atau
website aplikasi menjadi Powerfull.
JQuery
adalah sebuah framework berbasiskan Javascript. JQuery sama dengan Javascript
Library yaitu kumpulan kode atau fungsi Javascript siap pakai, sehingga
mempermudah dan mempercepat kita dalam membuat kode Javascript.
Nah, disinilah peran
JQuery sebagai Javascript Library, dimana kita bisa langsung memanggil fungsi
yang terdapat di dalam library tersebut.
B.
Sejarah Jquery
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.
Semenjak
dirilis pertama kali 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.
Sekarang
JQuery dikembangkan oleh team developer yang dipimpin oleh Dave Metvin.Dipakai
oleh lebih dari 55% dari 10.000 website yang paling sering dikunjungi.JQuery
menjadi Library Javascript yang paling popular Sekarang.
Script
JQuery dibuat untuk memudahkan
pengaturan document seperti menyeleksi object dengan element DOM dan membuat
aplikasi dengan AJAX. Jquery juga
menyediakan layanan atau support para
developers untuk membuat plug-ins di dalam bahasa Javascript tentunya.
Sehingga memungkinkan para developer
website membuat website lebih interaktif dengan animasi, efek – efek, tema dan
widget. Dengan menggunakan JQuery kita bisa meluapkan kreatifitas untuk membuat
website dinamis atau website aplikasi menjadi keren.
Microsoft
dan Nokia telah mengumumkan akan mengemas JQuery di platform mereka. Microsoft
awalnya mengadopsinya dalam Visual Studio
untuk digunakan dalam ASP.NET AJAX dan ASP.NET MVC Framework, sedangkan
Nokia akan mengintegrasikannya dalam kerangka Web Run-Time mereka.
C. Versi
Jquery
Beberapa
versi dari Jquery antara lain :
1.
October
16, 2010 yaitu 1.0a1
2.
November
12, 2010 yaitu 1.0a2
3.
February
4, 2011 yaitu 1.0a3
4.
March
31, 2011 yaitu 1.0a4
5.
April
7, 2011 yaitu 1.0a4.1
6.
June
20, 2011 yaitu 1.0b1
7.
August
3, 2011 yaitu 1.0b2
8.
September
29, 2011 yaitu 1.0 RC1
9.
October
19, 2011 yaitu 1.0 RC2
10.
November
13, 2011 yaitu 1.0 RC3
11.
November
16, 2011 yaitu 1.0
12.
January
26, 2012 yaitu 1.0.1
13.
February
28, 2012 yaitu 1.1.0 RC1
14.
April
6, 2012 yaitu 1.1.0 RC2
15.
April
13, 2012 yaitu 1.1.0
16.
June
28, 2012 yaitu1.1.1 RC1
17.
July
12, 2012 yaitu .1.1
18.
August
1, 2012 yaitu 1.2 Alpha
19.
September
5, 2012 yaitu 1.2 Beta
20.
September
14, 2012 yaitu 1.2.0 RC1
21.
September
21, 2012 yaitu 1.2.0 RC2
22.
October
2, 2012 yaitu 1.2.0 Final
23.
February
20, 2013 yaitu 1.3.0 Final
Dari
Berbagai macam versi diatas, mulai dari awal kepopuleran jQuery pada tahun
2010, jQuery Melakukan peningkatan performa, serta penambahan variasi dukungan
di sisi scripting jQueryMobile semakin dioptimasi sesuai dengan perkembangan
masif performa gadget terkini. Selain itu jQuery juga menambahkan berbagai
widget yang tidak ada di versi sebelumnya. Jadi tunggu apa lagi? mari mencoba
membuat web kalian sendiri dengan jQuery mobile framework.
D.
Keunggulan Jquery
Beberapa
keunggulan yang dimiliki oleh Jquery antara lain :
·
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.
·
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.
E. Fitur
Jquery
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.
·
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.
·
Mempermudah
AJAX.
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
·
Menyederhanakan kode
javascript lainnya
Kemudian untuk memulai mempelajari jQuery, anda
harus mendownload jquery.js dari situs http://www.jquery.com.Setiap anda
menulis kode javascript dengan menggunakan jquery, jangan lupa untuk memasukan
file jquery.js kedalam kode javascript anda.
<script
type="text/javascript" src="jquery.js"></script>
sekarang mari kita lihat
contoh sederhana pemograman dengan menggunakan jquery. Kode 12.hello world
jquery
<html>
<head>
<script
type="text/javascript" src="jquery.js"></script>
<script
type="text/javascript">
$(document).ready(function(){
$(".tombol1").click(function(){
$("p").hide(1000);
});
$(".tombol2").click(function(){
$("p").show(1000);
});
});
</script>
</head>
<body>
<p>Hello
World!</p>
<button
class="tombol1">Sembunyikan</button>
<button
class="tombol2">Tampilkan</button>
</body>
</html>
G. Kelebihan Dan Kelemahan
Jquery
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)
·
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
1.
KELEBIHAN :
·
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.
·
Fungsi-fungsi yang disediakan
didokumentasikan dengan baik beserta contoh penggunaannya, baca di situs
http://jquery.com 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.
KEKURANGAN :
·
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.
H.
Event-event dasar dalam Jquery
Syntax dalam JQuery ada bebagai macam dan dibuat untuk
menyeleksi elemen - elemen HTML dan menciptakan aksi / event pada satu atau
beberapa halaman website agar membuat sebuah tampilan site menjadi interaktif
dan dinamis. disini kita akan mempelajari macam - macam dari syantax JQuery.
1. Penulisan Sintaks
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.
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 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);
});
2. Event - Event Dasar yang sering
digunakan pada JQuery
·
click()
Sebuah event atau animasi akan terjadi jika suatu
objek yang di pilih atau selec di klik
$('.subjek').click(function() {
$('#area').fadeOut();
});
·
dblclick()
Sebuah event atau animasi akan terjadi jika suatu
objek yang di pilih atau selec di klik ganda / klik dua kali.
$('.subjek').dblclick(function() {
$('#area').fadeOut();
});
·
focus()
untuk membuat suatu anmasi atau peristiwa pada
subjek/pemicu (digunakan pada elemen-elemen seperti <input> dan
<textarea>.
$('.subjek').focus(function() {
$('#area').fadeOut();
});
·
mouseover()
Menimbulkan kejadian atau peristiwa ketika pointer
mouse berada di atas suatu subjek yang dituju.
$('.subjek').mouseover(function() {
$('#area').fadeOut();
});
·
mouseout()
Menimbulkan peristiwa jika pointer mouse meninggalkan
sebuah sbjek yang di tuju.
$('.subjek').mouseout(function() {
$('#area').fadeOut();
});
});
·
mouseenter()
Sama dengan MouseOver(), menimbulkan peristiwa apabila
pointer mouse berada di atas subjek/pemicu. Namun saat pointer mouse memasuki
elemen induk (MouseOver()) dan pointer mendatangi anak-anak elemen di dalamnya,
itu tidak masuk hitungan Mouseenter().
$('.subjek').mouseenter(function() {
$('#area').fadeOut();
});
·
mouseleave()
Sama seperti Mouseout(),menimbulkan peristiwa apabila
pointer mouse pergi dari subjek/pemicu. Namun saat pointer mouse meninggalkan
sebuah anak elemen (dan masih dalam elemen induk), itu tidak sudah tidak bisa
dei sebut Mouseleaf(), hingga ketika pointer benar-benar telah keluar dari
elemen induk baru bisa disebut mouseleve().
$('.subjek').mouseleave(function() {
$('#area').fadeOut();
});
·
hover()
adalah gabungan antara Mouseenter dan Mouseleave.
·
scroll()
Untuk menimbulkan suatu peristiwa ketika scroll di
tarik(ini berlaku untuk semua yang memiliki scroll).
$('.subjek').scroll(function() {
$('#area').fadeOut();
});
·
select()
Untuk menimbulkan suatu peritiwa jika ada yang di
select / blok biasa di gunakan pada <input> dan <textarea>.
$('.subjek').select(function() {
$('#area').fadeOut();
});
I.
Fungsi Jquery
·
Mengakses bagian halaman
tertentu dengan mudah
·
Mengubah tampilan bagian
halaman tertentu
·
Mengubah isi dari halaman
·
Menambah animasi tanpa
harus memakai flash yang berat
·
Melakukan load
data/halaman tanpa merefresh seluruh halaman
·
Menyederhanakan/mempersingkat
penulis sintaks javascript biasa
J. Cara Menginstal Jquery
Untuk dapat menginstalasi JQuery dapat di ikuti langkah
langkah sebagai berikut :
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.
·
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>
K. Pengimplementasian Jquery
Implementasi
jQueryyaitu :
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
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
e-mail, 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 marquee dalam tag HTML, tetapi dengan plugin ini, teks
berjalan lebih lembut dan lebih banyak variasi.
L. 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);
});
function runIt() {
$("div").show("slow");
$("div").animate({left:'+=200'},2000);
$("div").slideToggle(1000);
$("div").slideToggle("fast");
$("div").animate({left:'-=200'},1500);
$("div").hide("slow");
$("div").show(1200);
$("div").slideUp("normal", runIt);
}
runIt();</script>
</body>
</html>
dan di tambahakan untuk mengatur kecepatan gerak anda
berikut bentuk source codenya :
<!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; }
</style>
<script
src="delJsMick.js"></script>
</head>
<body>
Click here...
<div></div>
<script>
$(document.body).click(function () {
$("div").show("slow");
$("div").animate({left:'+=200'},2000);
jQuery.queue( $("div")[0], "fx",
function () {
$(this).addClass("newcolor");
jQuery.dequeue( this );
});
$("div").animate({left:'-=200'},500);
jQuery.queue( $("div")[0], "fx",
function () {
$(this).removeClass("newcolor");
jQuery.dequeue( this );
});
$("div").slideUp();
});</script>
</body>
</html>
memberi fungsi kontrol mulai dan berhenti 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; }
</style>
<script
src="delJsMick.js"></script>
</head>
<body>
<button
id="start">Start</button>
<button id="stop">Stop</button>
<div></div>
<script>
$("#start").click(function () {
$("div").show("slow");
$("div").animate({left:'+=200'},5000);
jQuery.queue( $("div")[0], "fx",
function () {
$(this).addClass("newcolor");
jQuery.dequeue( this );
});
$("div").animate({left:'-=200'},1500);
jQuery.queue( $("div")[0], "fx",
function () {
$(this).removeClass("newcolor");
jQuery.dequeue( this );
});
$("div").slideUp();
});
$("#stop").click(function () {
jQuery.queue( $("div")[0], "fx",
[] );
$("div").stop();
});
</script>
</body>
</html>
catatan untuk jenisya masih sama dengan yang
dipostingan sebelumnya dan simpan dengan satu direktory dimana js-nya tersimpan
dalam satu folder yang sama.
Contoh sederhana lain :
1.
Pertama, kita harus menyertakan
(include) file library JQuery.Pastikan letak dari file library sudah benar.
2. Perintah-perintah JQuery.
Baris 8 merupakan perintah inisialisasi dimana saat halaman (dokumen) siap
ditampilkan maka jalankan juga perintah yang ada di dalamnya. Hal ini mirip
dengan event onLoad yang biasanya diletakkan di tag <body>.
Baris 9-11 maksudnya adalah mendefinisikan action yang terjadi saat link
dengan class=show ( $(‘a.show’) ) diklik (lihat link baris ke-22). Jadi jika
link di-klik maka paragraf dengan nama class=jquery ( $(‘p.jquery’) ) akan
tampil dengan durasi tampil “slow”. Paragraf yang akan ditampilkan adalah
paragraf baris ke-24 sampai 27.
Baris 13-15 sebaliknya, akan menyembunyikan isi dari paragraf yang
mengandung nama class=jquery.
3. Isi dari halaman. Perhatikan
nama class dari masing-masing object.
BAB III
PENUTUP
1.
Kesimpulan
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).
Manfaat dari
menggunakan Jquery antara lain :
·
ini Kompatibel dengan hampir seluruh
browser
·
jQuery telah digunakan oleh website-website
raksasa
·
Kompatibel dengan seluruh versi CSS (dari CSS
1 sampai CSS 3)
·
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
Jadi jangan
sampai website anda indah dengan animasi yang memukau dan juga interaktif,
namun fungsi utama/pesan anda tidak tersampaikan kepada pengunjung.
2.
Saran
Saran
saya mulailah untuk belajar menggunakan Jquery.Walaupun untuk setiap teknologi
yang diciptakan pasti memiliki kegunaannya sendiri sendiri, seperti JQuery
diciptakan.JQuery pun tak luput dari kekurangan disamping sudah pasti mempunyai
kelebihan.
Ada
banyak kerangka kerja JavaScript lain di luar sana, tapi jQuery tampaknya
menjadi yang paling populer, dan juga yang paling diperpanjang.
Mulai
dari awal kepopuleran jQuery pada tahun 2010, jQuery Melakukan peningkatan
performa, serta penambahan variasi dukungan di sisi scripting jQueryMobile
semakin dioptimasi sesuai dengan perkembangan masif performa gadget
terkini.Selain itu jQuery juga menambahkan berbagai widget yang tidak ada di
versi sebelumnya. Jadi tunggu apa lagi? mari mencoba membuat web kalian sendiri
dengan jQuery mobile framework.mulai dari awal kepopuleran jQuery pada tahun
2010, jQuery Melakukan peningkatan performa, serta penambahan variasi dukungan
di sisi scripting jQueryMobile semakin dioptimasi sesuai dengan perkembangan
masif performa gadget terkini. Selain itu jQuery juga menambahkan berbagai
widget yang tidak ada di versi sebelumnya. Jadi tunggu apa lagi? mari mencoba
membuat web kalian sendiri dengan jQuery mobile framework.
DAFTAR PUSTAKA
Fafa.
2013. Perkembangan Web, science, jquery mobile. http://fafabilowo.blogspot.com.
16 November 2013
0 komentar:
Post a Comment
Berkomentarlah dengan baik dan dengan cara yang benar.