Black Shadow

jQuery Tutorial

(Write Less Do More

Javascript Library yang membuat webiste lebih hidup

muning

mini

1/1/2011

Modul Kuliah Pemrograman Web I

2011

BAB I

PENGANTAR JQUERY

JQuery pertama dirilis pada tahun 2006 oleh John Resig. Dan kini jQuery telah digunakan

oleh beberapa situs yang canggih nan terkenal seperti: Google, Facebook, Twitter, Youtube,

Nokia dan masih banyak lagi. Tidak hanya situs interlokal, lokal juga ada kok

yang telah

memakai jQuery, contohnya:VivaNews, Studio 21, Kompas dan lain

lain. Selengkapnya bisa

dilihat di

http://docs.jquery.com/Sites_Using_jQuery

Apa itu jQuery?

jQuery sendiri adalah Javascr

ipt Library atau kumpulan kode/fungsi Javascript siap pakai,

sehingga mempermudah kita untuk membuat kode Javascript. Atau dalam kesimpulannya

jQuery menyederhanakan kode Javascript. Hal ini sesuai dengan slogannya

“

Write less, do

”

Mengapa memilih jQ

uery?

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, bisa langsung dilihat di

http://jquery.com



Didukung oleh banyak komunitas



Disupport oleh plugin yang lengkap



Filenya han

ya satu dan ukurannya relatif kecil, sekitar 20kb



Open source atau Free



jQuery lebih diminati oleh para developer web saat ini

Modul Kuliah Pemrograman Web I

2011

Apa kemampuan yang dimiliki jQuery?

Berikut beberapa kemampuan yang dimiliki yang dapat membuat kita berdecak kagum:

Memperm

udah 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 deng

an halaman web dengan lebih cepat.

Menyediakan fasilitas untuk membuat animasi sekelas Flash dengan mudah.

Bagaimana cara kerja jQuery?

Cara kerja jQuery dapat dijabarkan sebagai berikut, masih menggunakan contoh diatas

sebagai penjelasannya.

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

});

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")

Modul Kuliah Pemrograman Web I

2011

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");

)};

Dengan memahami cara kerja

jQuery, semoga lebih mempermudah

untuk mempelajari

Modul Kuliah Pemrograman Web I

2011

BAB II

MEMAHAMI SELECTOR

Selector berfungsi untuk memilih/mengambil elemen

elemen tertentu yang ingin dilakukan

operasi terhadap elemen tersebut atau manipulas terhadap elemen

elemn tersebut.

Adapun

elemen

elemen dasar yang dapat dipilih oleh selector adalah sebagai berikut :

Nama Tag

Class

Untuk mengetahui bagaimana cara selector dalam memilih elemen

elemen tersebut, akan

disajika beberapa contoh sederhana pada bagian berikutnya.

Selector Tag

ara menggunakan selector tag adalah dengan

langsung menyebut nama tag elemennya.

Selector Id

Cara

menggunakan Selector id adalah dengan

menyertakan tanda kres (#) sebelum nama

elemennya.

Selector Class

Cara menggunakan Selector class ini adalah dengan men

yertakan tanda tit

ik (.) sebelum

nama elemennya.

Latihan

latihan berikut untuk menjelaskan teori diatas.

Latihan1

1.

<html>

2.

<head>

3.

<script type="text/javascript" src="jquery

-

1.4.3.js"></script>

4.

<script type="text/javascript">

5.

$("document").ready(function(){

6.

alert ("Selamat datang");

7.

});

8.

</script>

9.

</head>

10.

<body>

Modul Kuliah Pemrograman Web I

2011

11.

</body>

12.

</html>

Latihan2

1.

<html>

2.

<head>

3.

<Script language="javascript" src="jquery

-

1.4.3

.js" ></script>

4.

<Script language="javascript">

5.

$(document).ready(function(){

6.

$("input").click(function(){

7.

alert("hello jquery!");

8.

});

9.

});

10.

</script>

11.

</head>

12.

<body>

13.

<input t

ype="submit

" value="click me"/>

14.

</body>

15.

</html>

Modul Kuliah Pemrograman Web I

2011

Latihan3

1.

<html>

2.

<head>

3.

<script type="text/javascript" src="jquery

-

1.4.3.js">

4.

</script>

5.

<script type="text/javascript">

6.

$("document").ready(function(){

7.

$("#p1").css("color","red");

8.

});

9.

</script>

10.

<title>

latihan 3

</title>

11.

</head>

12.

<body>

13.

<p id="p1">

Ini isi paragraf 1 </p>

14.

<p id="p2">Ini isi paragraf 2 </p>

15.

</body>

16.

</html>

Latihan4

1.

<html>

2.

<head>

3.

<script type="text/javascript"

src="jquery

-

1.4.3.js"></script>

4.

<script type="text/javascript">

Modul Kuliah Pemrograman Web I

2011

5.

$("document").ready(function(){

6.

$("#judul").addClass("merahkuning");

7.

$(".sub1").addClass("kuninghitam");

8.

});

9.

</script>

10.

<style type="text/css">

11.

.merahkuning {

12.

color: red;

13.

font

-

weight: bold;

14.

ba

ckground

-

color:yellow;

15.

padding:3px;

16.

}

17.

18.

.kuninghitam {

19.

color:yellow;

20.

background

-

color:black;

21.

}

22.

</style>

23.

</head>

24.

<body>

25.

<h1>Judul Buku Kuliah Pemrograman Web </h1>

26.

<ol id="judul">

27.

<li class="sub1">Pemrograman PHP</li>

28.

<li>Database mysql</li>

29.

<li class="sub1"

>Mempercantik web dengan jquery</li>

30.

</ol>

31.

</body>

32.

</html>

Modul Kuliah Pemrograman Web I

2011

BAB III

EVENTS

Sebelumnya kita telah belajar

Selector yang mencari elemen

elemen apa saja yang akan

dilakukan operasi terhadapnya,

maka

Event memutuskan kapan dilakukan operasi

tersebut,

misalnya elemen yang telah dipilih (Selectors) akan dilakukan operasi terhadapnya

setelah diklik (

click)

atau setelah klik 2x (

dblclik),

setelah mouse berada diatas objek

(

hover),

dan sebagainya.

Event Click()

Event click dijalankan setelah terjadi klik

pada suatu elemen yang telah ditentukan.

Untuk lebih jelasnya, perhatikan skrip sederhana berikut ini :

1.

<html>

2.

<head>

3.

<script type="text/javascript" src="jquery

-

1.4.3.js"></script>

4.

<script type="text/javascript">

5.

$("document").ready(function(){

6.

$('a').click(function(){

7.

alert("Selamat datang di website STMIK Cikarang")

8.

});

9.

});

10.

</script>

11.

</head>

12.

<body>

13.

<a href="www.stmik

-

cikarang.ac.id">Klik disini untuk 

menuju halaman web STMIK Cikarang</a>

14.

</body>

15.

</html>

Event dblclick()

Event dblclick akan dij

alankan setelah terjadi klik 2x pada suatu elemen yang telah

ditentukan. Untuk lebih jelasnya, perhatikan skrip sederhana berikut ini :

Modul Kuliah Pemrograman Web I

2011

1.

<html>

2.

<head>

3.

<script type="text/javascript" src="jquery

-

1.4.3.js"></script>

4.

<script type="text/javascript">

5.

$("documen

t").ready(function(){

6.

$("div").dblclick(function(){

7.

$(this).css({background:"red"});

8.

});

9.

});

10.

</script>

11.

<style type="text/css">

12.

div {

13.

background:yellow;

14.

width: 60px;

15.

height:60px;

16.

float:left;

17.

margin:10px;

18.

cursor:pointer;

19.

}

20.

21.

</style>

22.

<title>Latihan double 

klik</title>

23.

</head>

24.

<body>

25.

<p>klik dua kali pada setiap kotak untuk mengubah 

warnya</p>

26.

<div></div>

27.

<div></div>

28.

<div></div>

29.

<div></div>

30.

31.

</body>

32.

</html>

Modul Kuliah Pemrograman Web I

2011

Event mouseover()

Event mouseover akan dijalankan ketika kursor mouse melewati elemen yang

ditentukan.

Event mouseleave()

Event

mouseleave

akan dijalankan ketika kursor mouse

meninggalkan

elemen yang

ditentukan.

Untuk lebih jelasnya penggunaan event

mouseover

dan

mouseleave,

perhatikan skrip

berikut ini :

1.

<html>

2.

<head>

3.

<script type="text/java

script" src="jquery

-

1.4.3.js"></script>

4.

<script type="text/javascript">

5.

$("document").ready(function(){

6.

$("div").mouseover(function(){

7.

$(this).css({background:"red"});

8.

});

9.

10.

$("div").mouseleave(function(){

11.

$(this).css({background:"yellow"});

12.

});

13.

});

14.

<

/script>

15.

<style type="text/css">

16.

div {

17.

background:yellow;

18.

width: 60px;

19.

height:60px;

20.

float:left;

21.

margin:10px;

22.

cursor:pointer;

23.

}

24.

</style>

Modul Kuliah Pemrograman Web I

2011

25.

<title>Latihan double klik</title>

26.

</head>

27.

<body>

28.

<p>klik dua kali pada setiap kotak untuk mengubah 

warnya</p>

29.

<div></di

v>

30.

<div></div>

31.

<div></div>

32.

<div></div>

33.

</body>

34.

</html>

Modul Kuliah Pemrograman Web I

2011

BAB IV

EFFECT

Effects

adalah sesuatu

mengenai menampilkan dan menyembunyikan suatu

elemen,menggerakan elemen, dan menganimasikan elemen tersebut.

Efek Fade()

Efek fade digunakan untuk menghilangkan atau menampilkan elemen secara perlahan

lahan, biasanya digunakan untuk transisi/pergantian suatu objek dengan

objek yang

lain, sehingga transisinya terlihat lebih halus. Ada 3jenis

efek fade, yaitu

fadeln,fadeO

ut,

dan

fade

. Untuk lebih jelasnya, lihat contoh sederhana pada skrip

berikut;

1.

<html>

2.

<head>

3.

<script type="text/javascript" src="jquery

-

1.4.3.js"></script>

4.

<script type="text/javascript">

5.

$("document").ready(function(){

6.

$(".fa

deout").click(function(){

7.

$("#kotak").fadeOut("slow");

8.

});

9.

10.

$(".fadein").click(function(){

11.

$("#kotak").fadeIn("slow");

12.

});

13.

14.

$(".fadeto3").click(function(){

15.

$("#kotak").fadeTo("slow",0.3);

16.

});

17.

18.

});

19.

</script>

20.

21.

<style type="text/css">

22.

#kotak{

Modul Kuliah Pemrograman Web I

2011

23.

width:250px;

24.

height:180px;

25.

background:yellow;

26.

border:2px solid black;

27.

}

28.

</style>

29.

<title>Efek FadeIn, FadeOut dan FadeTo</title>

30.

</head>

31.

<body>

32.

<div id="kotak"></div><br/>

33.

<button class="fadeout">Fade Out</button>

34.

<button class="fadein">Fade In</button>

35.

<button class="f

adeto3">Fade To 0.3</button>

36.

</body>

37.

</html>

Sekarang coba jalankan skrip diatas, maka akan tampil sebuah kotak berwarna kuning

dan tiga buah tombol. Coba klik tombol

fade out,

maka kotak akan menghilang,

kemudian coba klik tombol

fade in

untuk menampilkan kotak kembali. Dan terakhir

coba klik tombol

fade to 0.3,

maka kotak akan terlihat pudar warnanya

Kita juga bisa mengatur waktu untuk efek fade dengan menggunakan fungsi

set time

Out,

misalny

dalam waktu3detik, maka elemen teksnyaakan menghilang dari

pandangan. Untuk lebi

h jelasnya, simak skrip berikut:

Sekarang coba jalankan

skrip diatas maka akan tampil sebuah kotak berwarna kuning

terang dengan teks berwarna hitam dan pada waktu 3detik ko

tak dan teks akan

menghilang secara perlahan

lahan.

Modul Kuliah Pemrograman Web I

2011

16.

<style type="text/css">

17.

#kotak {

18.

position:relative;

19.

width:100px;

20.

height:100px;

21.

background:red;

22.

}

23.

</style>

24.

</head>

25.

<body>

26.

<br/><

br/><br/><br/><br/>

27.

<button class="mulai">Jalankan</button>

28.

<br/><br/><br/><br/><br/><br/><br/>

29.

<div id="kotak"></div>

30.

</body>

31.

</html>

Sekarang coba jalankan skrip animasi.html, maka akan tampil sebuah kota berwarna

merah dengan tombol

Jalankan

diatasnya. Coba klik tombol

Jalankan,

maka kota

akan bergerak dari ke kanan, kemudian membesar dan bergerak atas lalu ke kanan,

lalu mengecil lagi ke ukuran semula dan terakhir bergerak ke bawah menuju posisi

semula sambil melakukan efek slide.

Modul Kuliah Pemrograman Web I

2011

BAB

BERKREASI DENGAN PLUGIN JQUERY UI

Logo jQuery

jQuery UI (user interface merupakan plugin yang paling populer di kalangan programmer

jQuery

Karena sampai

sampai dijadikan satu manual dengan manual jQuery di website

resminya. jQuery UI dibuat

oelh Paul Bakaus yang bekerja sama dengan stefan Petre untuk

menciptakan efek

efek yang canggih dan komponen librari pelengkap jQuery, diantaranya :

Accordion

Datepicker

Tabs

Dialog

Progressbar

Slider

Effect/animasi

Drag and Drop

Dan lain

lain

Selanjutnya,

bagian berikut akan membahas cara penggunaan beberapa komponen library

dari jQuery UI.

Instalasi jQuery UI

Download jQuery UI di

http://jquery.com/

maka akan tampil halaman downloadnya,

klik aja langsung link

current (

stable),

maka file jQuery UI (jquery

1.7.2.custom.rar) akan tersimpan di komputer anda.

Modul Kuliah Pemrograman Web I

2011

Filenya masih berbentuk kompresi (jquery

1.7.2.custom.rar), oleh karena itu

gunakan program winzip/winrar untuk mengekstraknya, nanti semua fule jquery

akan ditemukan pada folder

jquery

1.7.2.custom

Untuk mencobanya, silahkan klik versi demonya yang ada di folder

jquery

1.7.2.custom/development

bundle/demis,

nanti klik 2x file index.html pada folder

tersebut, maka akan tampil halaman demo dari jQue

ry UI, misalnya coba library

Tabs

pada bagian

widget,

maka demonya akan tampil dibagian tengah.

Silahkan dicoba beberapa demo library jQuery UI lainnya, seperti draggable,

accordion, progressbar, Dialog, Effect, dan lain

lain. Keren kan???

Sekarang pertany

aannya, bagaimana menerapkan library jQuery UI pada website

kita? Ikuti aja pembahasan berikutnya.

Modul Kuliah Pemrograman Web I

2011

BAB

DATEPICKER

Datepicker berfungsi untuk

mengambil tanggl dari sistem kelender yang ada di komputer,

sehingga memudahkan kita dalam memilih tanggal,

karena ditampilkan secara keseluruhan

dan menarik. Oke langsung saja kita jelajahi fiturnya.

Datepicker.html

1.

<html>

2.

<head>

3.

<title>Menggunakan Datepicker</title>

4.

<link type="text/css" 

href="develop/themes/base/jquery.ui.all.css" 

rel="stylesheet"/>

5.

<script t

ype="text/javascript" src="develop/jquery

-

1.4.3.js"></script>

6.

<script type="text/javascript" 

src="develop/ui/jquery.ui.core.js"></script>

7.

<script type="text/javascript" 

src="develop/ui/jquery.ui.datepicker.js"></script>

8.

9.

<script type="text/javascript">

10.

$("

document").ready(function(){

11.

$("#tanggal").datepicker();

12.

13.

});

14.

</script>

15.

</head>

16.

<body>

17.

Masukkan tanggal :<input id="tanggal" type="text">

18.

</body>

19.

</html>

Modul Kuliah Pemrograman Web I

2011

Datepicker Format Bahasa Indonesia

Pada contoh kedua, kita akan mengubah format tanggal standar datepicker

(bulan/tanggal/tahun) menjadi format tanggal berbahasa indonesia

(tanggal/bulan/tahun).

Caranya cukup mudah, kita tinggal panggil library penanggalan bahasa indonesia yang sudah

dised

iakan oleh jquery UI, yaitu ui.datepicker

id.js yang terdapat pada folder jQueryUI.

Untuk lebih jelasnya, lihat skrip berikut (perhatikan teks yang ditebalkan):

Datepicker2.html

1.

<html>

2.

<head>

3.

<title>Menggunakan Datepicker</title>

4.

<link type="text/css" 

hre

f="develop/themes/base/jquery.ui.all.css" 

rel="stylesheet"/>

5.

<script type="text/javascript" src="develop/jquery

-

1.4.3.js"></script>

6.

<script type="text/javascript" 

src="develop/ui/jquery.ui.core.js"></script>

7.

<script type="text/javascript" 

src="develop/ui/j

query.ui.datepicker.js"></script>

8.

<script type="text/javascript" 

src="develop/ui/i18n/jquery.ui.datepicker

-

id.js"></script>

9.

<script type="text/javascript">

10.

$("document").ready(function(){

Modul Kuliah Pemrograman Web I

2011

11.

$("#tanggal").datepicker();

12.

13.

});

14.

</script>

15.

</head>

16.

<body>

17.

Masukkan t

anggal :<input id="tanggal" type="text">

18.

</body>

19.

</html>

Sekarang coba jalankan skrip

datepicker2.html

di browser, kemudian klik pada input text di

sebelah kanan teks

Masukkan tanggal,

maka akan tampil pilihan tanggal yang sudah

berbahasa indonesia

dan berformat indonesia (tanggal.bulan/tahun).

Mengubah

Format Penanggalan Datepicker

Pada contoh ketiga, kita masih akan mengubah format tanggal standar

dari datepicker

(mm/dd/yyy)



contohnya tanggal 7 Februari 2010 ditulis (02/07/2010 menjadi format

tanggal yang kita inginkan (lebih familiar), misalnya kita akan menampilkannya menjadi (07

Februari 2010)

Caranya, gunakan fungsi

dateformat

dari datepicker. Untuk lebih jelasnya, lihat skrip berikut

(perhatikan teks yang ditebalkan):

1.

<html>

2.

<head>

3.

<title

>Menggunakan Datepicker</title>

4.

<link type="text/css" 

href="develop/themes/base/jquery.ui.all.css" 

rel="stylesheet"/>

Created : Black-Shadow 

Add Comment

FB Comments

Wellcome

Auto Like Facebook 2013

Download Thema BlackBerry

Auto Readmore no image

Cara Update Status Lewat Apa Saja

Mengenal jQueri

Berkenan

About Me

Followers