Javascript & JQuery - hermantolle.com · disusun dengan sintaks HTML. Penambahan script ini...

of 133/133
Javascript & JQuery Client Side Scripting Herman Tolle – Sistem Informasi PTIIK UB
  • date post

    21-Mar-2019
  • Category

    Documents

  • view

    223
  • download

    0

Embed Size (px)

Transcript of Javascript & JQuery - hermantolle.com · disusun dengan sintaks HTML. Penambahan script ini...

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.htmjavascript/jam2.htmjavascript/jam2.htmjavascript/jam2.htmjavascript/jam2.htmjavascript/jam2.htmjavascript/jam2.htmjavascript/tesmenu.htmjavascript/lat_jscript11.htmjavascript/lat_jscript11.htmjavascript/animasi.htmjavascript/mouse1.htmjavascript/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

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

JavaScript Page

document.write("Hello world!");

document.write("

How are " +

"you?

");

Here is some static text as well.

14

Bentuk skrip dan Komentar

Skrip dari JavaScript terletak di dalam dokumen HTML.

letakkan script anda disini

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.

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 Tag diletakkan diantara bagian kepala dari dokumen HTML, yaitu bagian antara

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

Contoh :

Contoh Program Javascript

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

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.

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 :

Properti defaultStatus

Tes defaultStatus

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 :

Skrip Javascript

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 :

Kejadian

Tes Kejadian

Cobalah meletakkan penunjuk mouse ke link berikut

dan perhatikan isi baris status.

Kemudian pindahkan penunjuk mouse dari

link berikut dan perhatikan isi baris status

Fujitsu

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 :

Pemasukan Data

21

Jendela Peringatan dan Jendela Konfirmasi Jendela Peringatan

Jendela Konfirmasi

Alert Box

Konfirmasi

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

// -->

24

Operasi Matematika

Operator Matematika

25

Operator Pembanding dan Logika

Operator Keterangan Kategori

== Kesamaan Pembanding

!= Ketidaksamaan Pembanding

< Kurang dari Pembanding

Lebih dari Pembanding

>= Lebih dari atau sama dengan Pembanding

! Bukan Logika

&& Dan Logika

|| Atau Logika

? Kondisi ? Nilai Benar : Nilai Salah Pembanding

26

Operator ?

Operator Pembanding dan Logika

27

Pernyataan IF Pernyataan IF tanpa else

if (kondisi) {

// blok pernyataan yang dijalankan

// kalau kondisi bernilai benar

}

Contoh if

Pernyataan IF dengan ELSE

if (kondisi) {

// blok pernyataan yang dijalankan

// kalau kondisi bernilai benar

} else {

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

}

Contoh if-else

28

Pernyataan IF Bersarang

Contoh if Berkalang

29

Pernyataan Switch

Bentuknya :

switch (variabel) {

case nilai1 :

perintah1;

break;

case nilai2 :

perintah2;

break;

default

perintahN;

break;

}

30

Pernyataan Switch

Contoh switch

31

Proses Berulang : Pernyataan While

Bentuk pernyataan :

while (kondisi) {

pernyataan

}

Contoh :

Contoh while

32

Proses Berulang : Pernyataan Do.While

Bentuk pernyataan :

do {

blok pernyataan

} while (kondisi) ;

Contoh :

Contoh do while

33

Perulangan : Pernyataan For.

Bentuk pernyataan :

for (inisialisasi; kondisi; penaikan_penurunan) {

pernyataan_pernyataan

}

Contoh :

Contoh for

34

Proses Pengulangan dalam Pengulangan

Contoh for Berkalang

35

Fungsi Mendefinisikan Fungsi

function nama(daftar_parameter) {

Pernyataan_1;

pernyataan_n;

}

c = jumlah ( 2 , 3 );

Nama fungsi

argumen Nilai balik

HTML>

Contoh Fungsi

36

Fungsi yang Dibuat Sendiri Memvalidasi Masukan pada Formulir

Validasi Masukan

Nama :

37

Fungsi yang Dibuat Sendiri

Menampilkan Jam

Jam

Waktu Sekarang :

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 :

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 :

Properti prototype

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

Mengakses Objek password

Password Pengganti :

Password Sekali Lagi:

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

A Document

A web page

A simple paragraph

document

A document

A web page

A

simple

paragraph

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

$().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=1736http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.aspx?ReleaseId=1736http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.aspx?ReleaseId=1736http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.aspx?ReleaseId=1736http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.aspx?ReleaseId=1736http://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

Reference it in your markup

or just drag it into the file

///

Reference it in your JS files:

You can also reference it from Google

jQuery Core Concepts

Create HTML elements on the fly

var el = $()

The Magic $() function

Manipulate existing DOM elements

$(window).width()

The Magic $() function

Selects document elements

(more in a moment)

$(div).hide();

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

The Magic $() function

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

Fired when the document is ready for

programming.

Better use the full syntax:

$(function(){});

The Magic $() 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()

$().appendTo(body)

$(:button).click()

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

// Hello jQuery

Basic Selectors

Yes, jQuery implements CSS Selectors!

$(#usr)

// John

$(.menu)

// Home

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

Tel-Aviv

Yavne

Raanana

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

.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(Hello $!);

// 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(Hello $!);

// select > append to the beginning

$(ul).prepend(Hello $!);

Inserting new Elements

// create > append/prepend to selector

$().html(9).appendTo(ul);

$().html(1).prependTo(ul);

// select > replace

$(h1).replaceWith(Hello);

Replacing Elements

// create > replace selection

$(Hello).replaceAll(h1);

$(h3).each(function(){

$(this).replaceWith(

+

$(this).html()

+ );

});

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

//

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 browsers 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

function clickHandler(e) {

e.stopPropagation();

}

Preventing Bubbling

// stop bubbling and other handlers

function clickHandler(e) {

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