Download - Javascript & JQuery - hermantolle.com · disusun dengan sintaks HTML. Penambahan script ini mempunyai tujuan ... kontrol terhadap sebuah window, animasi sederhana, animasi mouse maupun

Javascript & JQuery Client Side Scripting

Herman Tolle – Sistem Informasi PTIIK UB

Web Dinamis

Website yang dinamis menyediakan interaksi antara pengguna dengan halaman web

Interaktifitas tidak didapatkan pada dokumen yang murni HTML saja.

Kemampuan pemrograman dapat ditambahkan pada dokumen web untuk interaktifitas

Why JavaScript?

Web application round-trip expensive

no way to do computation on the client side

example: form validation

Web pages static

no way to allow users to interact with the page

example: popup link menus

What is needed

client-side code

Pemrograman Web

Client Side Script :

Script yang ditambahkan dalam dokumen html, dieksekusi oleh browser client.

Javascript, Jscript, VBScript

Server Side Script:

Script yang ditambahkan dalam dokumen html, dieksekusi oleh server, hasilnya dalam bentuk html yang dikirim ke client.

ASP/ASP.Net, PHP, CGI, JSP, dll

Pemrosesan Script

Web Browser

(Client side processing)

HTML JavaScript

Java Applets

Web

Server

CGI SSI

Servlet PHP JSP

ASP

Databases

HTTP

Server Side Processing

Client Side Script

Script yang ditambahkan (embedded) pada halaman web yang sebelumnya hanya disusun dengan sintaks HTML.

Penambahan script ini mempunyai tujuan tertentu. Misalnya:

menampilkan jam dan tanggal yang up- to-date,

menu yang dinamis (mis: pull down menu),

kontrol terhadap sebuah window, animasi sederhana, animasi mouse maupun untuk validasi form, dll

javascript/jam1.htm

javascript/jam2.htm

javascript/jam2.htm

javascript/jam2.htm

javascript/jam2.htm

javascript/jam2.htm

javascript/jam2.htm

javascript/tesmenu.htm

javascript/lat_jscript11.htm

javascript/lat_jscript11.htm

javascript/animasi.htm

javascript/mouse1.htm

javascript/validasi.htm

Client Side Script

Advantage:

Waktu proses relatif cepat karena langsung dieksekusi oleh browser client

Tidak memerlukan web server untuk hosting

Dapat dieksekusi langsung oleh berbagai browser

Disadvantage:

Script bisa dilihat oleh pengguna

Script dapat di copy-paste

Tidak cocok untuk akses data atau database

Server Side Script

Digunakan untuk membuat aplikasi web atau konten-konten dinamis: news, buku tamu, dll

PHP: open source dan banyak digunakan luas Active Server Pages (ASP) dan ASP.Net,

teknologi yang dikembangkan oleh Microsoft ColdFusion (CFM), dikembangkan oleh

Macromedia Java Server Pages dan Servlet dikembangkan

oleh Sun Microsystem Common Gateway Interface (CGI), yang

dibuat dengan bahasa pemrograman C++ atau Perl

Server Side Include (SSI), seperti misalnya Frontpage Server Extension

Server Side Script

Advantage:

Script tidak bisa dilihat oleh pengguna, sehingga tidak dapat di-copy-paste

Cocok untuk akses data atau aplikasi database

Untuk membuat fitur-fitur tertentu yang berguna, misalnya: hit counter, user manajemen, disain yang dinamis, CMS, dll

Disdvantage:

Waktu proses relatif lebih lambat karena dieksekusi oleh server

Memerlukan web server untuk hosting

JavaScript

Dikembangkan oleh Netscape tahun 1995 JavaScript is

a scripting language

for web clients

interpreted

Un-typed: tidak memiliki tipe data spesifik

Dynamic HTML

combination of JavaScript, CSS and DOM

to create very flexible web page presentation

11

Pengenalan JavaScript

• Asal mula nama JavaScript adalah LiveScript, dikembangkan pertama kali pada tahun 1995 di Netscape Communications.

• Hasil kolaborasi antara Netscape dan Sun (pengembang

bahasa pemrograman “Java” ) memberikan nama baru “JavaScript” pada tanggal 4 desember 1995.

• JavaScript adalah bahasa skrip yang ditempelkan pada

kode HTML dan diproses pada sisi klien, sehingga kemampuan dokumen HTML menjadi lebih luas. – JavaScript memungkinkan untuk memvalidasi masukan-masukan

pada formulir sebelum dikirim ke server

– JavaScript dapat mengimplementasi interaktiftifitas

• Javascript bergantung kepada browser(navigator) yang memanggil halaman web yang berisi skrip skrip dari Javascript yang terselip di dalam dokumen HTML.

12

Perbedaan JavaScript dan Pemrograman Java

• JavaScript adalah bahasa yang “case sensitive” artinya membedakan penamaan variabel dan fungsi yang menggunakan huruf besar dan huruf kecil.

• Seperti bahasa Java ataupun C, setiap instruksi dalam JavaScript diakhiri dengan karakter titik koma (;).

JavaScript code can be embedded in a Web page using SCRIPT tags <SCRIPT> </SCRIPT>

the output of JavaScript code is displayed as if directly entered in HTML

<html>

<head>

<title>JavaScript Page</title>

</head>

<body>

<script type="text/javascript">

document.write("Hello world!");

document.write("<p>How are <br />" +

"<i>you</i>?</p>");

</script>

<p>Here is some static text as well. </p>

</body>

</html>

14

Bentuk skrip dan Komentar

• Skrip dari JavaScript terletak di dalam dokumen HTML.

<SCRIPT language="Javascript">

letakkan script anda disini

</SCRIPT>

• Pada navigator versi lama, sebelum adanya JavaScript, tidak mengenal tag tersebut dan akan melewatkannya untuk di baca. Untuk itu perlu ditambahkan tag komentar agar skripnya tidak dibaca sebagai skrip, tetapi di baca sebagai komentar dan tidak akan dieksekusi sebagai program.




</SCRIPT>

• Untuk menulis komentar dalam satu baris kita gunakan karakter dobel slash.

// semua karakter di belakang // tidak akan di eksekusi

• Untuk menulis komentar yang terdiri dari beberapa baris kita gunakan karakter /* dan */

/* Semua baris antara 2 tanda tersebut tidak akan di eksekusi oleh kompilator */

15

Meletakkan Script dalam HTML

• Menggunakan tag <SCRIPT> – Tag <SCRIPT> diletakkan diantara bagian kepala dari dokumen HTML, yaitu bagian antara

tag <HEAD> dan </HEAD>. Pemanggilan fungsi JavaScript (atau disebut juga event) diletakkan di bagian badan dokumen HTML atau bisa kita sebut diantara tag <BODY> dan </BODY>.

– Contoh :

<HTML> <HEAD>

<TITLE>Contoh Program Javascript</TITLE>

</HEAD>

<BODY>




</SCRIPT>

</BODY>

</HTML>

16

Meletakkan Script dalam HTML

• Menggunakan file ekstern – Menuliskan kode program JavaScript dalam suatu file teks dan kemudian file teks

yang berisi kode JavaScript di panggil dari dalam dokumen HTML (khusus Netscape mulai versi 3 keatas).

<SCRIPT LANGUAGE="Javascript" SRC="url/file.js"> </SCRIPT>

dimana url/file.js adalah adalah lokasi dan nama file yang berisi kode JavaScript,

jika perintah tambahan SRC tidak disertakan maka tag Script akan mencari kode yang terletak di dalam tag Script.

• Melalui event tertentu – Event adalah sebutan dari satu action yang dilakukan oleh user, contohnya

seperti klik tombol mouse.

<tag eventHandler="kode Javascript yang akan dimasukkan">

dimana eventHandler adalah nama dari event tersebut.

17

Properti

• Properti adalah atribut dari sebuah objek.

• Penulisannya (dipisahkan dengan tanda “.”) :

nama_objek . nama_properti

• Properti dapat diberi nilai, penulisannya :

objek . properti = nilai

• Contoh : <HTML>

<HEAD>

<TITLE>Properti defaultStatus</TITLE>

</HEAD>

<BODY>

<H1>Tes defaultStatus</H1>

<SCRIPT LANGUAGE = "JavaScript">



</SCRIPT>

</BODY>

</HTML>

Nama Objek

Nama Properti Nilai

18

Metode

• Properti adalah suatu kumpulan kode yang digunakan untuk

melakukan sesuatu tindakan terhadap objek.

• Penulisannya (dipisahkan dengan tanda “.”) :

nama_objek . nama_metode(“parameter”) – Contoh :

<HTML> <HEAD>

<TITLE>Skrip Javascript</TITLE>

</HEAD>

<BODY>




</SCRIPT>

</BODY>

</HTML>

Nama Objek

Nama Metode

Parameter

19

Penanganan Kejadian (Event Handler) • Penanganan Kejadian adalah sekumpulan kode yang akan dijalankan manakala

pemakai melakukan suatu tindakan/kejadian, misalnya mengklik tombol mouse

atau ketika menutup jendela browser. • Penulisannya :nama_kejadian = “kumpulan kode” • Kumpulan kode dapat berisi sejumlah pernyataan. Antar pernyataan dipisahkan

titik-koma.

• Contoh : <HTML>

<HEAD>

<TITLE>Kejadian</TITLE>

</HEAD>

<BODY>

<H1>Tes Kejadian</H1>

<P>Cobalah meletakkan penunjuk mouse ke link berikut

dan perhatikan isi baris status.

Kemudian pindahkan penunjuk mouse dari

link berikut dan perhatikan isi baris status

</P>

<A HREF = "www.fujitsu.com"

onMouseOver = "window.status =

'Anda menyorot link, lho';

return true"

onMouseOut = "window.status = '';

return true">Fujitsu</A>

</BODY>

</HTML>

20

Pemasukan Data

• JavaScript memiliki mekanisme yang memungkinkan pemakai disuguhi jendela

untuk memasukkan sederetan masukan setelah pemakai mengklik tombol OK,

maka kode dalam JavaScript akan melakukan serangkaian proses.

• Contoh :

<HTML>

<HEAD>

<TITLE>Pemasukan Data</TITLE>

</HEAD>

<BODY>




</SCRIPT>

</BODY>

</HTML>

21

Jendela Peringatan dan Jendela Konfirmasi • Jendela Peringatan

• Jendela Konfirmasi

<HTML>

<HEAD>

<TITLE>Alert Box</TITLE>

</HEAD>

<BODY>

<SCRIPT LANGUAGE =

"JavaScript">



</SCRIPT>

</BODY>

</HTML>

<HTML>

<HEAD>

<TITLE>Konfirmasi</TITLE>

</HEAD>

<BODY>




</SCRIPT>

</BODY>

</HTML>

22

Variabel

• Variable adalah suatu obyek yang berisi data data, yang

mana dapat di modifikasi selama pengeksekusian program.

• Aturan pemberian nama variabel :

– Nama variabel harus dimulai oleh satu huruf (huruf besar maupun

huruf kecil) atau satu karakter ''_''.

– Nama variabel bisa terdiri dari huruf huruf, angka angka atau

karakter _ dan & (spasi kosong tidak diperbolehkan).

– Nama variabel tidak boleh memakai nama yang digunakan dalam

reserved program, seperti : abstract, boolean, break, byte, if,

implements, import, in, infinity, instanceof, int, interface, dll

23

Mendeklarasikan Variabel

• eksplisit : dengan menuliskan kata kunci var kemudian diikuti dengan

nama variabel dan nilai dari variabel : var test = “halo”

• implisit : dengan menuliskan secara langsung nama dari variabel dan

diikuti nilai dari variabel : test = “halo”


<!–

var VariabelKu;

var VariabelKu2 = 3;

VariabelKu = 2;

document.write(VariabelKu*VariabelKu2);

// -->

</SCRIPT>

24

<HTML>

<HEAD>

<TITLE>Operasi Matematika</TITLE>

</HEAD>

<BODY>




</SCRIPT>

</BODY>

</HTML>

Operator Matematika

25

Operator Pembanding dan Logika

Operator Keterangan Kategori

== Kesamaan Pembanding

!= Ketidaksamaan Pembanding

< Kurang dari Pembanding

<= Kurang dari atau sama dengan Pembanding

> Lebih dari Pembanding

>= Lebih dari atau sama dengan Pembanding

! Bukan Logika

&& Dan Logika

|| Atau Logika

? Kondisi ? Nilai Benar : Nilai Salah Pembanding

26

<HTML>

<HEAD>

<TITLE>Operator ?</TITLE>

</HEAD>

<BODY>




</SCRIPT>

</BODY>

</HTML>

Operator Pembanding dan Logika

27

Pernyataan IF • Pernyataan IF tanpa else

if (kondisi) {

// blok pernyataan yang dijalankan

// kalau kondisi bernilai benar

}

<HTML>

<HEAD>

<TITLE>Contoh if</TITLE>

</HEAD>

<BODY>




</SCRIPT>

</BODY>

</HTML>

• Pernyataan IF dengan ELSE

if (kondisi) {

// blok pernyataan yang dijalankan

// kalau kondisi bernilai benar

} else {

// blok pernyataan yang dijalankan // kalau kondisi bernilai salah

}

<HTML>

<HEAD>

<TITLE>Contoh if-else</TITLE>

</HEAD>

<BODY>




</SCRIPT>

</BODY>

</HTML>

28

Pernyataan IF Bersarang

<HTML>

<HEAD>

<TITLE>Contoh if Berkalang</TITLE>

</HEAD>

<BODY>




</SCRIPT>

</BODY>

</HTML>

29

Pernyataan Switch

• Bentuknya :

switch (variabel) {

case nilai1 :

perintah1;

break;

case nilai2 :

perintah2;

break;

default

perintahN;

break;

}

30

Pernyataan Switch <HTML>

<HEAD>

<TITLE>Contoh switch</TITLE>

</HEAD>

<BODY>




</SCRIPT>

</BODY>

</HTML>

31

Proses Berulang : Pernyataan While

• Bentuk pernyataan :

while (kondisi) {

pernyataan

}

• Contoh : <HTML>

<HEAD>

<TITLE>Contoh while</TITLE>

</HEAD>

<BODY>




</SCRIPT>

</BODY>

</HTML>

32

Proses Berulang : Pernyataan Do….While


do {

blok pernyataan

} while (kondisi) ;

• Contoh : <HTML>

<HEAD>

<TITLE>Contoh do while</TITLE>

</HEAD>

<BODY>




</SCRIPT>

</BODY>

</HTML>

33

Perulangan : Pernyataan For….


for (inisialisasi; kondisi; penaikan_penurunan) {

pernyataan_pernyataan

}

• Contoh : <HTML>

<HEAD>

<TITLE>Contoh for</TITLE>

</HEAD>

<BODY>




</SCRIPT>

</BODY>

</HTML>

34

Proses Pengulangan dalam Pengulangan <HTML>

<HEAD>

<TITLE>Contoh for Berkalang</TITLE>

</HEAD>

<BODY>

<PRE>




</SCRIPT>

</PRE>

</BODY>

</HTML>

35

Fungsi • Mendefinisikan Fungsi

function nama(daftar_parameter) {

Pernyataan_1;

pernyataan_n;

}

c = jumlah ( 2 , 3 );

Nama fungsi

argumen Nilai balik

HTML>

<HEAD>

<TITLE>Contoh Fungsi</TITLE>

</HEAD>

<BODY>




</SCRIPT>

</BODY>

</HTML>

36

Fungsi yang Dibuat Sendiri • Memvalidasi Masukan pada Formulir

<HTML>

<HEAD>

<TITLE>Validasi Masukan</TITLE>

</HEAD>

<BODY>




</SCRIPT>

<FORM NAME = "formku">

<PRE>

Nama : <INPUT TYPE = "TEXT"

NAME = "nama"><BR>

<INPUT TYPE = "BUTTON"

VALUE = "Kirim"

onClick =

"cekNama(this.form)"><BR>

</PRE>

</FORM>

</BODY>

</HTML>

37

Fungsi yang Dibuat Sendiri

• Menampilkan Jam

<HTML>

<HEAD>

<TITLE>Jam</TITLE>

</HEAD>

<BODY>

<FORM NAME = "formWaktu">

Waktu Sekarang :

<INPUT TYPE = "TEXT"

NAME = "teksWaktu"

VALUE = ""

SIZE = "22">

</FORM>




</SCRIPT>

</BODY>

</HTML>

38

OBJEK • Objek dari Navigator (Browser)

– JavaScript membagi satu halaman Navigator dalam berbagai obyek obyek, dengan tujuan untuk memudahkan akses salah satu dari mereka dan memanipulasinya dengan cara merubah sifat/kondisi (properti) mereka.

– Dimulai dari obyek yang paling besar diantara semuanya, kemudian turun berdasarkan tingkatan sampai kepada obyek yang diinginkan.

• Obyek paling besar adalah obyek jendela (window) dari navigator.

• Di dalam obyek jendela, ada satu obyek yang ditampilkan dalam bentuk sebuah halaman, kita sebut obyek dokumen atau document

• Halaman itu berisi banyak obyek seperti, formula, text, image dan lain lainya..

– Untuk mengakses satu obyek, kita harus mengakses terlebih dahulu obyek yang paling besar( dalam hal ini obyek window )

• Contoh :

<script language="Javascript">

 </script>

JavaScript Object Reference

• JavaScript has a wide variety of objects you can use

when programming, and each of them have different

properties you can control or display through the use of

methods. This list should make your programming jobs

in JavaScript a little easier.

• Client-side JavaScript objects

• Anchor, Applet, Array, Boolean, Button, Checkbox, Date, document,

event, FileUpload, form, Frame, Function, Hidden, History, Image,

Java, JavaArray, JavaClass, JavaObject, JavaPackage, Layer Link,

Location, Math, MimeType, Navigator, netscape, Number, Object,

Option, Packages, Password, Plugin, Radio, RegExp, Reset,

screen, Select, String, Style, Submit, Sun, Text, Textarea, window.

40

Objek Standard JavaScript

41

Objek Array • Obyek array adalah satu obyek yang memungkinkan kita untuk membuat

dan memanipulasi tabel, berikut ini adalah sintaks untuk membuat tabel :

var x = new Array(elemen1[, elemen2, ...]); jika tidak ada elemen yang disebutkan dalam parameter, tabel itu akan menjadi

tabel kosong pada saat pembuatannya, sebaliknya jika elemen diisi, maka isi tabel

akan di inisialisasi oleh nilai dari elemen tersebut.

• Metode standard Objek Array :

42

Objek Array • Contoh :

<HTML>

<HEAD>

<TITLE>Properti prototype</TITLE>

</HEAD>

<BODY>




</SCRIPT>

</BODY>

</HTML>

43

Objek Date (Waktu) • Obyek date memungkinkan kita untuk bekerja dengan semua variabel yang

berhubungan dengan penanggalan dan juga durasi waktu.

• Sintaks sintaks untuk membuat obyek date adalah berikut ini :

• Nama_dari_obyek = new Date()

sintaks ini memungkinkan kita untuk menyimpan tanggal dan jam saat ini.

• Nama_dari_obyek = new Date(“hari, bulan tanggal tahun jam:menit:detik”)

parameter berbentuk string dengan batas batas pemisah sepeti format diatas.

• Nama_dari_obyek = new Date(tahun, bulan, hari)

parameter adalah 3 integer yang dipisahkan oleh tanda koma

• Objek Waktu Standard

getMonth(), getSecond(),

getTime(),toLocalString()

,setDate(X),setDay(X),

setHours(X),setMonth(X)

, setTime(X) , dll……

Contoh : lihat

Pembahasan SWITCH

44

Objek Password

<HTML>

<HEAD>

<TITLE>Mengakses Objek password</TITLE>

</HEAD>

<BODY>

<FORM NAME = "formTes"

ACTION = "tesform.htm"

METHOD = "POST">

<PRE>

Password Pengganti : <INPUT TYPE = "PASSWORD"

NAME = "password_1">

Password Sekali Lagi: <INPUT TYPE = "PASSWORD"

NAME = "password_2">

</PRE>

<INPUT TYPE = "BUTTON"

NAME = "tombolProses"

VALUE = "Proses"

onClick = "cekPassword()">

</FORM>




</SCRIPT>

</BODY>

</HTML>

Kapabilitas Javascript

• Implementasi pemrograman dalam

dokumen HTML

• Fungsi-fungsi sisi client: validasi form (cek

input), menampilkan Jam,

• Interaktifitas: Menu interaktif, pop up

window

• Animasi: animasi mouse, background

• Kontrol setiap elemen dokumen HTML

45

Document Object Model

Describes how the document object from JavaScript can be traversed and modified

Represented as tree structure

Can add new elements to the page

Can change attributes of existing elements

DOM has levels 0-3 and many sub-standards

The DOM interface used in other contexts with other languages (C++, Java, python, etc.)

The document as a tree

<html>

<head>

<title>A Document</title>

</head>

<body>

<h1>A web page</h1>

<p>A <i>simple</i> paragraph</p>

</body>

</html>

document

<html>

<head> <body>

<title>

“A document”

<h1>

<p>

“A web page”

“A ”

“simple”

“ paragraph” <i>

Client-side JavaScript objects

Tips Client Side Script:

Gunakan untuk proses-proses sisi client

Script Javascript mudah untuk “dibajak”

Pelajari bagaimana cara “menambahkan” ke website kita

Source:

http://www.dynamicdrive.com

http://www.javascriptsource.com

http://www.dynamicdrive.com/

http://www.javascriptsource.com/

Referensi

JavaScript Guide from Netscape (Complete Reference):

http://developer.netscape.com/docs/manuals/communicator/jsguide4/index.htm

Quick Reference from Shelly Cahsman:

http://www.scsite.com/js/qr.htm

JavaScript Object Reference:

http://www.htmlstuff.com/programmer/jsobjects/index.html

Task

Tambahkan pada website Anda:

Show the time and date to a Web page.

Add a greeting to a Web page based on the time of day.

Using mouse event handlers create rollover effect.

JQUERY

Javascript Framework

JQuery

Powerful JavaScript library

Access parts of a page using CSS or XPath-like expressions

Modify the appearance of a page

Alter the content of a page

Change the user’s interaction with a page

Rich library of methods for AJAX development (AJAX = Asynchronous JavaScript and XML)

With jQuery and AJAX, you can request text, HTML, XML, or JSON from a remote server using both HTTP Get and HTTP Post.

$(“#firstName”).text(“Joe Black”);

$(“button”).click(function() {alert “Clicked”;});

$(“.content”).hide();

$(“#main”).load(“content.htm”);

$(“<div/>”).html(“Loading…”).appendTo(“#content”);

A Quality of Life by jQuery:

Very compact and fluent programming model

jQuery is a lightweight, open-source

JavaScript library that simplifies

interaction between HTML and

JavaScript

It was and still being

developed

by John Resig from

Mozilla and was first

announced in January

2006

It has a great community, great

documentation, tons of plugins,

and it was recently adopted by

Microsoft

(how about intellisense in VS?)

The current version is 1.3.2

(as of July 2009)

Download the latest version from

http://jquery.com

http://jquery.com/

http://jquery.com/

To enable itellisense in VS 2008 SP1

install the –vsdoc hotfix:

VS90SP1-KB958502-x86.exe

http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.aspx?ReleaseId=1736






Copy the

jquery.js

and the

jquery-vsdoc.js

into your application

folder

No need to reference the –vsdoc.js

<script src=“jquery.js”/>

Reference it in your markup

… or just drag it into the file

///<reference path=“jquery.js”/>

Reference it in your JS files:

jQuery Core Concepts

Create HTML elements on the fly

var el = $(“<div/>”)

The Magic $() function

Manipulate existing DOM elements

$(window).width()


Selects document elements

(more in a moment…)

$(“div”).hide();

$(“div”, $(“p”)).hide();


$(document).ready(function(){…});

Fired when the document is ready for

programming.

Better use the full syntax:

$(function(){…});


It may be used in case of conflict with other

frameworks.

jQuery(“div”);

The full name of $() function is

jQuery uses closures for isolation

(function(){

var

jQuery=window.jQuery=window.$=function(){

// …

};

})();

The library is designed to be isolated

var foo = jQuery.noConflict();

// now foo() is the jQuery main function

foo(“div”).hide();

Avoid $() conflict with other

frameworks

// remove the conflicting $ and jQuery

var foo = jQuery.noConflict(true);

$(“div”).hide()

$(“<span/>”).appendTo(“body”)

$(“:button”).click()

jQuery’s programming philosophy is:

GET >> ACT

$(“div”).show()

.addClass(“main”)

.html(“Hello jQuery”);

Almost every function returns jQuery,

which provides a fluent programming

interface and chainability:

Get > Act

Chainability

The $() function

Three Major Concepts of jQuery

jQuery Selectors

$(“*”) // find everything

All Selector

Selectors return a pseudo-array of jQuery

elements

$(“div”)

// <div>Hello jQuery</div>

Basic Selectors

Yes, jQuery implements CSS Selectors!

$(“#usr”)

// <span id=“usr”>John</span>

$(“.menu”)

// <ul class=“menu”>Home</ul>

By Tag:

By ID:

By Class:

$(“div.main”) // tag and class

$(“table#data”) // tag and id

More Precise Selectors

// find by id + by class

$(“#content, .menu”)

// multiple combination

$(“h1, h2, h3, div.content”)

Combination of Selectors

$(“table td”) // descendants

$(“tr > td”) // children

$(“label + input”) // next

$(“#content ~ div”) // siblings

Hierarchy Selectors

$(“tr:first”) // first element

$(“tr:last”) // last element

$(“tr:lt(2)”) // index less than

$(“tr:gt(2)”) // index gr. than

$(“tr:eq(2)”) // index equals

Selection Index Filters

$(“div:visible”) // if visible

$(“div:hidden”) // if not

Visibility Filters

$(“div[id]”) // has attribute

$(“div[dir=‘rtl’]”) // equals to

$(“div[id^=‘main’]”) // starts with

$(“div[id$=‘name’]”) // ends with

$(“a[href*=‘msdn’]”) // contains

Attribute Filters

$(“input:checkbox”) // checkboxes

$(“input:radio”) // radio buttons

$(“:button”) // buttons

$(“:text”) // text inputs

Forms Selectors

$(“input:checked”) // checked

$(“input:selected”) // selected

$(“input:enabled”) // enabled

$(“input:disabled”) // disabled

Forms Filters

$(“select[name=‘ddl’] option:selected”).val()

Find Dropdown Selected Item

<select name=“cities”>

<option value=“1”>Tel-Aviv</option>

<option value=“2” selected=“selected”>Yavne</option>

<option value=“3”>Raanana</option>

</select>

SELECTORS DEMO

Document Traversal

$(“div”).length

Returns number of selected elements.

It is the best way to check selector.

A Selector returns a pseudo array of

jQuery objects

$(“div”).get(2) or $(“div”)[2]

Returns a 2nd DOM element of the

selection

Getting a specific DOM element

$(“div”).eq(2)

Returns a 2nd jQuery element of the

selection

Getting a specific jQuery element

var sum = 0;

$(“div.number”).each(

function(){

sum += (+this.innerHTML);

});

this – is a current DOM element

each(fn) traverses every selected

element calling fn()

$(“table tr”).each(

function(i){

if (i % 2)

$(this).addClass(“odd”);

});

$(this) – convert DOM to jQuery

i - index of the current element

each(fn) also passes an indexer

.next(expr) // next sibling

.prev(expr) // previous sibling

.siblings(expr) // siblings

.children(expr) // children

.parent(expr) // parent

Traversing HTML

$(“table td”).each(function() {

if ($(this).is(“:first-child”)) {

$(this).addClass(“firstCol”);

}

});

Check for expression

// select paragraph and then find

// elements with class ‘header’ inside

$(“p”).find(“.header”).show();

// equivalent to:

$(“.header”, $(“p”)).show();

Find in selected

$(“<li><span></span></li>”) // li

.find(“span”) // span

.html(“About Us”) // span

.andSelf() // span, li

.addClass(“menu”) // span,li

.end() // span

.end() // li

.appendTo(“ul.main-menu”);

Advanced Chaining

$(“div”)

.slice(2, 5)

.not(“.green”)

.addClass(“middle”);

Get Part of Selected Result

HTML Manipulation

$(“p”).html(“<div>Hello $!</div>”);

// escape the content of div.b

$(“div.a”).text($(“div.b”).html());

Getting and Setting Inner Content

// get the value of the checked checkbox

$(“input:checkbox:checked”).val();

Getting and Setting Values

// set the value of the textbox

$(“:text[name=‘txt’]”).val(“Hello”);

// select or check lists or checkboxes

$(“#lst”).val([“NY”,”IL”,”NS”]);

Handling CSS Classes

// add and remove class

$(“p”).removeClass(“blue”).addClass(“red”);

// add if absent, remove otherwise

$(“div”).toggleClass(“main”);

// test for class existance

if ($(“div”).hasClass(“main”)) { //… }

// select > append to the end

$(“h1”).append(“<li>Hello $!</li>”);

// select > append to the beginning

$(“ul”).prepend(“<li>Hello $!</li>”);

Inserting new Elements

// create > append/prepend to selector

$(“<li/>”).html(“9”).appendTo(“ul”);

$(“<li/>”).html(“1”).prependTo(“ul”);

// select > replace

$(“h1”).replaceWith(“<div>Hello</div>”);

Replacing Elements

// create > replace selection

$(“<div>Hello</div>”).replaceAll(“h1”);

$(“h3”).each(function(){

$(this).replaceWith(“<div>”

+

$(this).html()

+ ”</div>”);

});

Replacing Elements while keeping

the content

// remove all children

$(“#mainContent”).empty();

Deleting Elements

// remove selection

$(“span.names”).remove();

// change position

$(“p”).remove(“:not(.red)”)

.appendTo(“#main”);

$(“a”).attr(“href”,”home.htm”);

// <a href=“home.htm”>…</a>

Handling attributes

// set the same as the first one

$(“button:gt(0)”).attr(“disabled”,

$(“button:eq(0)”).attr(“disabled));

// remove attribute - enable

$(“button”).removeAttr(“disabled”)

$(“img”).attr({

“src” : “/images/smile.jpg”,

“alt” : “Smile”,

“width” : 10,

“height” : 10

});

Setting multiple attributes

// get style

$(“div”).css(“background-color”);

CSS Manipulations

// set style

$(“div”).css(“float”, “left”);

// set multiple style properties

$(“div”).css({“color”:”blue”,

“padding”: “1em”

“margin-right”: “0”,

marginLeft: “10px”});

// get window height

var winHeight = $(window).height();

// set element height

$(“#main”).height(winHeight);

//.width() – element

//.innerWidth() – .width() + padding

//.outerWidth() – .innerWidth() + border

//.outerWidth(true) – including margin

Dimensions

The default unit is Pixel (px)

// from the document

$(“div”).offset().top;

// from the parent element

$(“div”).position().left;

// scrolling position

$(window).scrollTop();

Positioning

Events

$(document).ready(function(){

//…

});

When the DOM is ready…

Fires when the document is ready for

programming.

Uses advanced listeners for detecting.

window.onload() is a fallback.

// execute always

$(“div”).bind(“click”, fn);

// execute only once

$(“div”).one(“click”, fn);

Attach Event

Possible event values:

blur, focus, load, resize, scroll, unload, beforeunload, click,

dblclick, mousedown, mouseup, mousemove, mouseover,

mouseout, mouseenter, mouseleave, change, select, submit,

keydown, keypress, keyup, error

(or any custom event)

jQuery.Event object

$(“div”).unbind(“click”, fn);

Detaching Events

(Unique ID added to every attached function)

$(“div”).trigger(“click”);

Events Triggering

Triggers browser’s event action as well.

Can trigger custom events.

Triggered events bubble up.

// attach / trigger

elem.blur(fn) / elem.blur()

elem.focus(fn) / elem.focus()

elem.click(fn) / elem.click()

elem.change(fn) / elem.change()

Events Helpers

And many others…

// use different triggering function

$(“div”).triggerHandler(“click”);

Preventing Browser Default Action

// prevent default action in handler

function clickHandler(e) {

e.preventDefault();

}

// or just return false

function clickHandler(e) {return false;}

// stop bubbling, keep other handler


e.stopPropagation();

}

Preventing Bubbling

// stop bubbling and other handlers


e.stopImmediatePropagation();

}

// or just return false

function clickHandler(e) {return false;}

// attach live event

(“div”).live(“click”, fn);

// detach live event

(“div”).die(“click”, fn);

Live Events

Currently supported events: click, dblclick, mousedown, mouseup, mousemove, mouseover,

mouseout, keydown, keypress, keyup

EVENTS DEMO

Effects

// just show

$(“div”).show();

// reveal slowly, slow=600ms

$(“div”).show(“slow”);

// hide fast, fast=200ms

$(“div”).hide(“fast”);

// hide or show in 100ms

$(“div”).toggle(100);

Showing or Hiding Element

$(“div”).slideUp();

$(“div”).slideDown(“fast”);

$(“div”).slideToggle(1000);

Sliding Elements

$(“div”).fadeIn(“fast”);

$(“div”).fadeOut(“normal”);

// fade to a custom opacity

$(“div”).fadeTo (“fast”, 0.5);

Fading Elements

Fading === changing opacity

$(“div”).hide(“slow”, function() {

alert(“The DIV is hidden”);

});

$(“div”).show(“fast”, function() {

$(this).html(“Hello jQuery”);

}); // this is a current DOM element

Detecting animation completion

Every effect function has a (speed, callback)

overload

// .animate(options, duration)

$(“div”).animate({

width: “90%”,

opacity: 0.5,

borderWidth: “5px”

}, 1000);

Custom Animation

$(“div”).animate({width: “90%”},100)

.animate({opacity: 0.5},200)

.animate({borderWidth: “5px”});

Chaining Animation

By default animations are queued and than

performed one by one

$(“div”)

.animate({width: “90%”},

{queue:false, duration:1000})

.animate({opacity : 0.5});

Controlling Animations Sync

The first animation will be performed

immediately without queuing

Referensi

Jquery.com

W3CShools.com