jquery master full

t vn

1. Bn c bit ht tt cc th HTMLhay khng?

2. Bn c th iu khin c ttcc th HTML hay khng?

Cc th HTML thng dng (p1)

STT Th HTML Miu t Kiu Tag

1 Th m u ca trang HTML none

2 Th cha cc th trong phn u ca trang HTML none

3 Tiu trang web none

4 M t tng qut v ni dung trang web none

5 Dng nhng mt tp tin no vo trang web. none

6 Dng nhng cc tp tin javascript none

7 Dng bao bc mt ni dung v css none

8

Th cha ni dung chnh ca website block level

9 Th th hin tiu ca mt vn no block level

10 Th ny l th thng dng cha ni dung block level



11

Th cha ni dung inline

12 Th cha ni dung (on vn) block level

13

Th canh gia cc i tng nm bn trong block level

14 Th to link inline

15 Kt hp vi th m t lit k theo dng danh sch block level

16 Th dng hin th mt hnh nh no inline

17 Th hin th nhng phn t trong form nhp liu block level

18 Th xung hng block level

19 Th to ng k ngang block level

20 To bng block level



21 To frame block level

22 To ch m inline

23 To ch nghing inline

24 To ch gch di inline

25 To ch gch ct ngang inline

26

To kiu ch inline

27

M t mt phn ca trch dn block level

28

To kiu ch cho phn m t m ngun block level

29 nh dng ni dung block level

Phn loi th HTML

None: Khi ny khng hin th ni dung bn trong

Block level: Khi ny hin th ni dung bn trong v chiu ngang trn ht trnh duyt

Inline: Khi ny hin th ni dung bn trong v chiu ngang ty thuc di ca cc i tng bn trong khi. V n s nm trn mt dng

Cc th HTML trong cp th thng l kiu block vinline.

Phn nhm nh dng

1. Type group: nh dng cho vn bn

2. Background group: nh dng hnh nh nn cho mt i tng no

3. Block group: nh dng cho vn bn

4. Border group: nh dng ng vin cho mt i tng no

5. Box group: nh dng kch thc, v tr cho khi

6. List group: nh dng cho cc danh sch

7. Position group: nh ta ca mt phn t HTML no

01 Type group

STT Nhm thuc tnh Miu t

1 font-family Nhm font c s dng cho mt i tng HTML

2 font-size Kch thc ca vn bn

3 font-style nh kiu cho font ch nghing hay thng

4 font-variant nh kiu cho font ch thng hoc ch hoa

5 font-weight Kiu ca ch

6 line-height Chiu cao gia cc dng ca vn bn

7 text-transform Kiu hin th ca font ch trong vn bn

8 text-decoration Kiu hin th ca font ch trong vn bn

9 color Mu sc ca vn bn

02 Background group


1 background-color Mu nn ca i tng HTML

2 background-image S dng nn l mt hnh nh

3 background-repeat Kiu hin th hnh nn nu s dng nh lm nn cho i tng

4 background-position V tr bt u hin th ca hnh nn

5 background-attachment Ch c nh hnh nn

03 Block group


1 letter-spacing Khong cch gi cc k t

2 word-spacing Khong cch gia cc t trong on vn bn

3 text-align V tr ca ca on vn bn

4 text-indent Khong cch tht vo u dng ca mt on vn bn

5 white-space nh dng cho khong trng trong on vn bn

6 vertical-align V tr ca mt phn t

7 display Cc kiu hin th theo kiu block, inline

04 Border group


1

border-width

border-top-width, border-right-width

border-bottom-width, border-left-width

rng ca ng vin

2

border-style

border-top-style, border-right-style

border-bottom-style, border-left-style

Kiu ca ng vin

3

border-color

border-top-color, border-right-color

border-bottom-color, border-left-color

Mu sc ca ng vin

05 Box groupSTT Nhm thuc tnh Miu t

1width

min-width, max-widthChiu rng ca i tng

2height

min-height, max-heightChiu cao ca i tng

3

margin

margin-top, margin-right, margin-

bottom, margin-left

Khong cch i vi phn t bn ngoi

4

padding

padding-top, padding-right,

padding-bottom, padding-left

Khong cch i vi phn t bn trong

5 float Lch khi v bn tri hoc phi

6 clear Xa cc thuc tnh float cc phn t pha trn

06 List group


1 list-style-positionV tr ca icon . Gi tr mc nh l

outsite

2 list-style-type Kiu icon ca

3 list-style-image Hnh nh icon ca ca

07 Position group


1 position Kiu hin th ca mt i tng

2 top Khong cch t i tng n v tr top

3 right Khong cch t i tng n v tr right

4 bottom Khong cch t i tng n v tr bottom

5 left Khong cch t i tng n v tr left

6 z-index V tr ca i tng

7overflow

overflow-x, overflow-yCh hin th thanh cun

V d 1: S dng gi tr relative, absolute ca thuc tnh position

V d 2: S dng gi tr relative, fix ca thuc tnh position

V d 3: S dng gi tr fix ca thuc tnh position to menu dc trnh duyt

V d 4: S dng gi tr relative, absolute ca thuc tnh position v gi tr ca z-index

V d 5: LightBox is easy

V d 6: Slide

V d 6: Slide nh (c bn)

S phc tp ca cc gi tr position

Trong hnh nh trn, c mt phn t HTML (tm gi l khi HTML) cha mt hnh vung c tn box.

By gi chng ta s tm hiu s tng tc gia gi tr ca khi HTML v vung c tn box.

TH1: Khi HTML c gi tr position = static

static relative absolute fixed

top None Active Active (b) Active (b)

right None Active (r1) Active (b) Active (b)

bottom None Active (r2) Active (b) Active (b)

left None Active Active (b) Active (b)

r1: Lch v bn phi so vi v tr gc

r2: Lch ln pha trn so vi v tr gc

b: so vi trnh duyt (browser)

TH2: Khi HTML c gi tr position = relative


top None Active Active (o) Active (b)

right None Active (r1) Active (o) Active (b)

bottom None Active (r2) Active (o) Active (b)

left None Active Active (o) Active (b)




o: so vi khi HTML

TH3: Khi HTML c gi tr position = absolute









o: so vi khi HTML

TH4: Khi HTML c gi tr position = fixed









o: so vi khi HTML

1. Khi HTML c gi tr position = static


top None Active Active (b) Active (b)

right None Active (r1) Active (b) Active (b)

bottom None Active (r2) Active (b) Active (b)

left None Active Active (b) Active (b)

2. Khi HTML c gi tr position = fixed, relative, absolute






Cc khi nim v Selector

Gii thiu

Ti liu HTML l mt dng ti liu bao gm nhiu th v n c sp xp theo dng cy

Ancestor (t tin nt gc)

Trong ti liu HTML th c gi l Ancestor.

Descendant (con chu)

Cc th HTML nm trong th c gi l cc th con chu

Cc th , , c gi l c descendats ca th

Cc th , c gi l cc descendats ca th

Parent (Cha)

Th c gi l th cha ca th Th c gi l th cha ca th

Child (Con)

Th c gi l th con ca th Th c gi l th con ca th

Sibling (anh em)

Cc th c cng cha c gi l anh em Cc th l th anh em ca nhau,

V tr ca mt phn t HTML

V tr ca th div: con ca phn t ; cha ca phn t ; ancestor ca , ; anh em ca phn t bn tay tri

Kt hp Selector trong CSS

Type selectors

nh dng cho cc phn t (th)

bt k ca HTML

em {color: blue;}

Class selectors

nh dng cho cc phn t (th)

bt k bng thuc tnh class ca

selector

.big { font-size: 110%; font-weight: bold; }

Kt hp class v type

C php: .

.big { color: red;} // affects and

p.big { color: blue;} // affects only

Kt hp nhiu class

HTML

.big { font-weight: bold; }

.indent { padding-left: 2em; }

CSS

Ch th t khai bo cc lp trong file ?

ID selectors

khai bo cho ID chng ta s dng k hiu # trong phn css.

Tn ca ID ch c s dng mt ln trn mi webpage. Tn class c th

s dng nhiu ln trn mt webpage

#big { font-size: 110%; font-weight: bold; }

Descendant selectors (selector pha trong)

em {color: blue; }

p em {color: blue; }ul em {color: blue; }

Child selectors (Selector con)

div > em { color: blue; }

div>em { color: blue; }

Universal selectors (Ton b selector)

* {color: blue; }

Adjacent sibling selectors (Nhng selector cng cp k bn)

h2 + h3 {color: blue;} em + strong {color: blue;}

Attribute selectors

[title] { border: 3px solid red; }

img[width] { border: 3px solid red; }

Dng 1: theo tn thuc tnh

img[src="small.gif"] { border: 3px solid red; }

img[title~="small"] { border: 3px solid red; }

img[title|="small"] { border: 3px solid red; }

img[title*="small"] { border: 3px solid red; }

img[title^="small"] { border: 3px solid red; }

img[title$="small"] { border: 3px solid red; }

img[src="small.gif"][title~="small"] { border: 3px solid red; }

Dng 2: theo tn thuc tnh v gi tr ca thuc tnh

Pseudo Classes/Element

STT Selector Miu t

1 :link, :visited, :active, :hover Thao tc vi cc lin kt

2 :focus Thao tc vi cc i tng khi n focus

3 :lang(language) Tt c cc i tng vi thuc tnh lang

4 :first-letter K t u tin ca mt i tng no

5 :first-line Dng u tin ca mt i tng no

6 :first-child Con u tin ca mt i tng no

7 :before Chn ni dung vo trc i tng no

8 :after Chn ni dung vo sau i tng no

Xy dng giao din mu cho button Dng 1

Xy dng giao din mu cho box

Box cha ni dung Dng 01


Box cha ni dung (c tiu ) Dng 01


Box bo trn cha ni dung Dng 1


Box bo trn cha ni dung Dng 2


Box bo trn cha ni dung v tiu Dng 1

Xy dng giao din mu cho tab

Dng 1


Dng 2


Dng 3


Dng 4

Xy dng giao din mu cho menu

Dng 1


Dng 2


Dng 3

Javascript l g ?

Ngn ng thng dch, m ngun ca n c nhng hoc tch hp trc

tip vo tp tin HTML. Khi trang web c ti xong, trnh duyt s thng

dch v thc hin cc m lnh ny.

c cung cp hon ton min ph

Javascript c th lm g?

Lm cho trang HTML tr nn sinh ng hn.

Phn ng li vi mt s kin no t pha ngi dng.

c hoc thay i ni dung ca cc phn t trong trang HTML

Kim tra d liu

Pht hin cc loi trnh duyt khc nhau

To cc tp tin cookie lu tr v truy xut thng tin trn my tnh ca

ngi truy cp website

S dng Javascript nh th no ?

s dng Javascript rt n gin, chng ta ch cn a cc cu lnh ca n

vo trong th ca HTML

Javascript thc thi lnh khi no ?

TH1: Thc hin lnh ngay khi trang web c ti v trnh duyt ca ngi

s dng.

TH2: Thc hin lnh khi nhn c mt tc ng no nh nhn nt, di

chuyn chut,

V tr Javascript trong trang HTML

t trong cp th ca trang web

t trong cp th ca trang web

t trong tp tin .js sau nhng tp tin ny vo trang web

M lnh Javascript

M lnh javascript l mt chui cc cu lnh.

Cc cu lnh ny kt thc bng du chm phy ;

Phn bit ch hoa v ch thng

K t khong trng khng nh hng n kt qu thc thi ca m lnh.

Bin trong Javascript

Bin dng lu tr mt gi tr no c th l mt chui, mt i tng,

mt con s, mt mng, mt php ton ...

Khai bo mt bin trong JavaScript: var ;

x = 5y = 6z = x + y = 5 + 6 =11

Quy tc t tn bin

Tn bin phi bt u bng k t hoc du gch di ( _ ) v khng c

khong trng.

Tn bin phn bit ch hoa v ch thng

Kiu d liu trong JavaScript

Kiu V d

Stringvar answer = "It's alright";

var answer = "He is called 'Johnny'";

Numbervar x1 = 34.00;

var x2 = 34;

Booleanvar x = true;

var y = false;

Array

var cars=new Array();

cars[0]="Saab";

cars[1]="Volvo";

cars[2]="BMW";

Object var person={firstname:"John", lastname:"Doe", id:5566};

Kim tra kiu d liu trong JavaScript

Javascript l ngn ng khng rng buc v kiu d liu: khng cn khai bo

kiu d liu khi khai bo bin, mt bin ang thuc kiu d liu ny c th

b gn bi mt gi tr thuc kiu d liu khc.

Xc nh kiu d liu ca mt bin ta s dng cu lnh: typeof ;

Lu v kiu d liu ca bin khi khai bo

Gi tr ca mt bin l mt chui khi v ch khi n nm trong cp du ngoc

kp () hoc cp du ngoc n ()

Gi tr ca mt bin l mt s khi v ch khi n khng nm trong cp du

ngoc kp () v khng nm trong cp du ngoc n ()

S dng hm trong JavaScript

Xut ra trnh duyt li cho i vi mi thnh vin trong din n ?

Ti sao cn s dng hm

S dng hm trong JavaScript

function function_name (var1, var2, , varN){

// code goes here

}

var1, var2 varN c gi l cc tham s ca hm. Hm c th c nhiu tham s hoc

khng c tham sao no c

Cch t tn hm tng t nh cch t tn bin. Hoc chng ta dng du gch di ( _ )

nu tn hm l mt cm t.

Khai bo hm

Phn bit bin cc b v bin ton cc

Phm vi nh hng ch trong hm m

n c khai bo

Vng i bt u khi bin c khi to

Vng i kt thc khi hm thc hin

xong.

Bin cc b (Local Variables) Bin ton cc (Global Variables)

Phm vi nh hng n ton trang

Vng i bt u khi bin c khi to

Vng i kt thc khi trang c ng

li.

Ton t trong JavaScript

Ton t s hc

Ton t Miu t V d Kt qu

+ Cng x = y + 2 x = 11

- Tr x = y - 2 x = 7

* Nhn x = y * 2 x = 18

/ Chia x = y / 2 x = 4.5

% Ly gi tr l x = y % 2 x = 1

++ Tng x = ++y = y + 1 x = 10

-- Gim x = --y = y - 1 x = 8

Cho y = 9


Ton t gn

Ton t V d Hnh thc khc Kt qu

= x = y x = 5

+= x += y x = x + y x = 15

-= x -= y x = x - y x = 5

*= x *= y x = x * y x = 50

/= x /= y x = x / y x = 2

%= x %= y x = x % y x = 0

Cho x = 10 v y = 5


Ton t so snh

Ton t M t V d Kt qu

== So snh bng x == 8 false

=== So snh tuyt ix === 5

x === 5

false

true

!= So snh khng bng x != 8 true

> So snh ln hn x > 8 false

< So snh nh hn x < 8 true

>= So snh ln hn hoc bng x >= 8 false


Ton t logic

Ton t M t V d Kt qu

&& And(x < 10 && y > 1)

(x < 10 && y > 4)

true

false

|| Or(x < 10 || y > 1)

(x < 10 || y > 4)

true

true

! Not!(x==y)

!(x!=y)

true

false

Cho x = 6 v y = 3


Ton t iu kin

C php: variablename = (condition) ? value1 : value2;

Cu iu kin trong Javascript

Cu iu kin l cu lnh m chng ta thng xuyn s dng khi vit m cho bt kz ngn

ng lp trnh no. thc hin nhng hnh ng khc nhau trong nhng iu kin khc

nhau.

Hai cu lnh iu kin thng c s dng trong JavaScript:

o Cu iu kin IF ELSE

o Cu iu kin SWITCH

Cu iu kin IF ELSE

S dng cu lnh ny thc hin mt s m lnh nu ng iu kin nh ra.

Cu lnh IF

Cu iu kin IF ELSE

S dng cu lnh iu kin ny thc hin mt s m lnh nu ng iu kin nh v

nu khng ng iu kin nh th thc hin m lnh khc

Cu lnh IF ELSE

Cu iu kin IF ELSE

S dng cu lnh iu kin ny trong trng hp c nhiu iu kin t ra v khi tha mi

iu kin s thc hin mt s m lnh khc nhau.

Cu lnh IF ELSE IF ELSE

Cu iu kin SWITCH

Cu iu kin Switch c mt iu kin mc nh, ngha l khi gi tr a vo khng tha

mt iu kin no th n s ly cc cu lnh trong phn iu kin mc nh thc hin.

Vng lp trong JavaScript

Vng lp c dng thc thi mt s vic no cho n khi ng iu kin th thot

khi vng lp v thi hnh lnh tip theo

Cc vng lp thng c s dng trong JavaScript:

o Vng lp FOR

o Vng lp WHILE

o Vng lp DO WHILE

o Vng lp FOR IN

Vng lp FOR

Vng lp WHILE

Vng lp while thc hin mt khi lnh khi iu kin tha v dng li ngay khi iu kin

khng tha

Vng lp DO WHILE

Vng lp ny s thc hin khi lnh t nht mt ln, ri sau mi kim tra iu kin. Khi

lnh vn s c thc hin khi biu thc iu kin vn cn ng.

S dng break v continue trong vng lp

Cu lnh break c chc nng thot khi mt vng lnh. N c th c s dng nhy ra

khi mt vng lp.

Cu lnh continue c chc nng dng vng lp ti gi tr v nhy sang gi tr khc trong

vng lp

n tp

01 0 1

2 1 0 1 23 2 1 0 1 2 3

4 3 2 1 0 1 2 3 45 4 3 2 1 0 1 2 3 4 5

6 5 4 3 2 1 0 1 2 3 4 5 67 6 5 4 3 2 1 0 1 2 3 4 5 6 7

8 7 6 5 4 3 2 1 0 1 2 3 4 5 6 7 89 8 7 6 5 4 3 2 1 0 1 2 3 4 5 6 7 8 9

0 1 2 3 4 5 6 7 8 91 2 3 4 5 6 7 8 9 2 3 4 5 6 7 8 9 3 4 5 6 7 8 9 4 5 6 7 8 9 5 6 7 8 9 6 7 8 9 7 8 98 9 9

JavaScript Errors - Throw and Try to Catch

Cc nguyn nhn gy ra li khi thc thi JavaScript: li c php, li u vo b sai v cc

nguyn nhn kh xc nh khc

Trong lp trnh c nhng ngoi l m chng ta t ti:

o Php chia gia 2 s a v b, khi b bng 0

o c v ghi file nhng file cha c to hay khng c sn

o Cha in d liu vo text box nhng vn a ra x l

JavaScript Errors - Throw and Try to Catch

C php:

JavaScript Object

i tng l mt khi nim bao gm hai thnh phn: thuc tnh (c im) v

phng thc (hnh ng)

V d i vi i tng chic xe, chng ta c:

o Thuc tnh: mu sn, cn nng, loi xe,

o Phng thc: chy thng, chy li, dng, ,

Cc i tng c sn trong JavaScript: number, string, boolean, array, date,

math, screen, location,

JavaScript Object

Khi to i tng

Truy cp thuc tnh ca i tng

Truy cp phng thc ca i tng

var objectName = new Object();

objectName.propertyName

objectName.methodName()

JavaScript Number Object

JavaScript Number Object bao gm tt c cc s nguyn, s thp phn,

Tt c cc s trong JavaScript c lu tr di dng 64-bit (8-byte)

Number Object Properties

Thuc tnh Miu t

constructor Tr v hm khi to i tng

MAX_VALUE (*) Tr v s ln nht c th c trong JavaScript

MIN_VALUE (*) Tr v s nh nht c th c trong JavaScript

NEGATIVE_INFINITY (*) Tr v gi tr nh hn MIN_VALUE (m v cng trong ton hc)

NaN (*) Kt qu c tr v khi cc php tnh s hc khng hp l

POSITIVE_INFINITY (*) Tr v gi tr ln hn MAX_VALUE (dng v cng trong ton hc)

prototype (*) Thm cc thuc tnh hoc cc phng thc mi cho i tng

Number Object Methods

Phng thc Miu t

toExponential(x) Chuyn mt s v dng s e, vi x l s m

toFixed(x) Lm trn s vi x ch s thp phn

toPrecision(x) Chuyn mt s thnh mt chui vi chiu di l x

toString() Chuyn mt s thnh mt chui

valueOf() Tr v gi tr ban u ca mt i tng Number.

Number Object n tp

Vit cc phng thc m rng cho Number Object thc hin cc yu cu sau:

1. Tm ch s ln nht ca s t nhin n bt kz

2. o ngc cc ch s ca s t nhin n bt kz

3. Tm c chung ln nht v bi chung nh nht ca hai s

JavaScript Array Object

Mng l mt i tng c s dng lu tr nhiu gi tr trong mt

bin duy nht

Array Object Properties

Thuc tnh Miu t


length Tr v hoc thit lp s phn t ca chui

prototype Thm cc thuc tnh hoc cc phng thc mi cho i tng

Array Object Methods (1)

Phng thc Miu t

concat() Ni cc mng li vi nhau v tr v mng mi

indexOf() Tr v v tr u tin ca phn t c tm kim trong mng

lastIndexOf() Tr v v tr cui cng ca phn t c tm kim trong mng

join() Ni cc phn t trong mng thnh mt chui duy nht

pop() Xa phn t cui cng trong mng v tr v phn t b xa

shift() Xa phn t u tin trong mng v tr v phn t b xa

push() Thm mi phn t vo cui mng v tr v chiu di mi ca mng

unshift() Thm mi phn t vo u mng v tr v chiu di mi ca mng

Array Object Methods (2)

Phng thc Miu t

slice(start, end)To mt mng mi bng cch trch xut cc phn t ca mng ban u, t v tr s n v tr e (khng tnh phn t e)

sort() Sp xp mt mng theo gi tr ca cc phn t trong mng

splice()Thm hoc xa phn t trong mng (thm tng t push(), xa tng t slice())

reverse() o ngc cc phn t trong mng

toString() Chuyn mt mng thnh mt chui

valueOf() Tr v gi tr ban u ca mt i tng Array.

JavaScript String Object

JavaScript String Object c s dng thao tc vi tt c cc nh dng

chui.

Khai bo i tng String

String Object Properties

Thuc tnh Miu t


length Tr v chiu di ca chui


String Object Methods (1)

Phng thc Miu t

charAt(n) Tr v gi tr ca phn t nm v tr th n trong mt chui no

charCodeAt(n) Tr v m Unicode ca phn t nm v tr th n trong mt chui no

fromCharCode(n) (*) Chuyn i m Unicode ca gi tr n thnh gi tr chui

concat() Ni cc chui li vi nhau thnh mt chui duy nht

indexOf()Tr v v tr xut hin u tin (ch s nh nht) ca mt gi tr no trong mtchui bt kz

lastIndexOf()Tr v v tr xut hin cui cng (ch s ln nht) ca mt gi tr no trong mtchui bt kz


Phng thc Miu t

search()Tm kim v tr v v tr xut hin u tin ca mt gi tr no c tm kimtrong chui

math() Tm kim v tr v gi tr no c tm kim trong mt chui.

replace(old, new) Tm kim v thay th gi tr old bng gi tr new ca mt chui no .

slice(start,end) Trch xut chui t v tr th s n v tr th e (khng bao gm k{ t e)

substring(start,end) Trch xut chui t v tr th s n v tr th e (khng bao gm k{ t e)

substr(start, length) Trch xut chui t v tr th s n v tr th s+l (khng bao gm k{ t th s+l)


Phng thc Miu t

split() Tch mt chui thnh mt mng cc chui con ty theo iu kin a vo

toLowerCase() Chuyn mt chui thnh ch thng

toUpperCase() Chuyn mt chui thnh ch in hoa

valueOf() Tr v gi tr ban u ca mt i tng String.

HTML Wrapper Methods (1)

Phng thc Miu t

anchor() To ra th a ca ti liu HTML (khng c thuc tnh href)

link() To ra th a ca ti liu HTML (c thuc tnh href)

big() Hin th chui vi kch thc font ch ln hn bnh thng

small() Hin th chui vi kch thc font ch nh hn bnh thng

bold() Hin th chui vi font ch m

italics() Hin th chui vi font ch nghing

fontsize() Hin th chui vi kch thc quy nh (gi tr truyn vo t 1 n 7)

fontcolor() nh dng mu sc cho chui vn bn (red; #FFF; 255,0,0)

HTML Wrapper Methods (2)

Phng thc Miu t

blink() Hin th chui vi nh dng blink (nhp nhy)

strike() Hin th chui vi ng gch ngang

sub() Hin th vn bn nm v tr di cng ca dng

sup() Hin th vn bn nm v tr trn cng ca dng

fixed() Hin th chui vi font ch monospace (font-family: monospace)

Bi tp n tp

Vit 1 phng thc m rng ca i tng String tch h tn ca mt

ngi thnh 3 phn: h, h lt v tn.

JavaScript Math Object

JavaScript Math Object c th thc hin cc cng vic lin quan n tnh

ton trong s hc.

JavaScript Math Object khng c thuc tnh constructor. Do tt c cc

thuc tnh v phng thc u c gi trc tip bi Math.

Math Object Properties

Thuc tnh Miu t Cch gi Kt qu

E Tr v hng s Euler Math.E 2,718

LN2 Tr li logarit ca 2 Math.LN2 0,693

LN10 Tr li logarit ca 10 Math. LN10 2,302

LOG2E Tr li logarit c s 2 ca E Math. LOG2E 1,442

LOG10E Tr li logarit c s 10 ca E Math. LOG10E 0,434

PI Tr v s pi Math. PI 3,14

SQRT1_2 Tr v cn bc 2 ca 1/2 Math.SQRT1_2 0,707

SQRT2 Tr v cn bc 2 ca 2 Math.SQRT2 1,141

Math Object Methods (1)

Phng thc Miu t Gi hm Kt qu

cos(x) Tr v gi tr cosine ca x (radian) Math.cos(x) 0.5

sin(x) Tr v gi tr sine ca x Math.sin(x) 0.866

tan(x) Tr v gi tr tangent ca x Math.tan(x) 1.732

acos(x) Tr v gi tr arccosine ca mt s Math.acos(0.8) 0.644

asin(x) Tr v gi tr arcsine ca mt s Math.asin(0.8) 0.927

atan(x) Tr v gi tr arctangent ca mt s Math.atan(0.8) 0.675

atan2(x) Tr v gi tr s nm gia pi/2 v pi/2 Math.atan2(0.8) 1.1071

1 radian = (180/pi) , t x = (pi/180) * 60



max(x,y,z,...,n) Tr v gi tr ln nht ca dy s Math.max(3, 3.12, -3.13, 1, 7) 7

min(x,y,z,...,n) Tr v gi tr nh nht ca dy s Math.min(3, 3.12, -3.13, 1, 7) -3.13

random() Tr v s ngu nhin nm gia 0 v 1 Math.random() 0,5

round(x) Lm trn 1 s n s nguyn gn x nht Math.round(3.2) 3

ceil(x)Lm trn 1 s n s nguyn ln nht vgn x nht

Math.ceil(3.2) 4

floor(x)Lm trn 1 s n s nguyn nh nht vgn x nht

Math.floor(3.8) 3



abs(x) Tr v gi tr tuyt i ca x Math.abs(-7.12) 7.12

pow(x,y) Tr v x m y Math.pow(2,3) 8

exp(x) Tr v gi tr E m x Math.exp (2) 2.71

log(x) Tr v logarit t nhin (c s E) ca x Math.log(2) 0.693

sqrt(x) Tr v gi tr cn bc 2 ca x Math.sqrt(9) 3

Bi tp: Hnh nh ngu nhin

JavaScript Boolean Object

JavaScript Boolean Object c s dng chuyn mt gi tr no

(khng phi gi tr Boolean) thnh cc gi tr Boolean

Cc i tng Boolean i din cho hai gi tr: true hoc false.

Boolean Object Properties

Thuc tnh Miu t



Boolean Object Methods

Phng thc Miu t

toString() Chuyn mt gi tr boolean thnh mt chui

valueOf() Tr v gi tr ban u ca mt i tng Array.

Cc gi tr c chuyn i sang Boolean Object

Gi tr Gi tr ca Boolean Object

Gi tr s khc 0 True

0 False

Chui rng () False

null False

NaN False

Chui khc rng True

JavaScript Date Object

JavaScript Date Object c s dng x l v thao tc vi cc d liu

thi gian: ngy, thng, nm, gi, pht, giy,

Date Object Properties

Thuc tnh Miu t



Date Object Methods (1)

Phng thc Miu t

getDate() Tr v s th t ca ngy ti thi im hin ti trong thng (1 31)

getDay() Tr v s th t ca ngy ti thi im hin ti trong tun (0 6)

getFullYear() Tr v gi tr nm ti thi im hin ti (4 ch s: 2013, )

getHours() Tr v gi tr gi ti thi im hin ti (0 23)

getMilliseconds() Tr v gi tr milli second ti thi im hin ti (0 999)

getMinutes() Tr v gi tr pht ti thi im hin ti (0 59)

getMonth() Tr v gi tr thng ti thi im hin ti (0 11)

getSeconds() Tr v gi tr giy ti thi im hin ti (0 59)

getTime() Tr v s mili giy k t thi im 01/01/1970


Phng thc Miu t

getTimezoneOffset() Tr v s pht chnh lch gia thi gian quc t v thi gian ti my ngi dng

getUTCDate() Tr v s th t ca ngy trong thng theo UTC (1 31)

getUTCDay() Tr v s th t ca ngy trong tun theo UTC (0 6)

getUTCFullYear() Tr v gi tr nm theo UTC (4 ch s: 2013, )

getUTCHours() Tr v gi tr gi theo UTC (0 23)

getUTCMilliseconds() Tr v gi tr milli second theo UTC (0 999)

getUTCMinutes() Tr v gi tr pht theo UTC (0 999)

getUTCMonth() Tr v gi tr thng theo UTC (0 11)

getUTCSeconds() Tr v gi tr giy theo UTC (0 59)


Phng thc Miu t

setDate() Thit lp gi tr ngy, gi, pht, giy, mili giy cho i tng kiu Date

setFullYear()Thit lp gi tr nm, thng, ngy, gi, pht, giy, mili giy cho i tng kiu Date

setHours() Thit lp gi tr gi, pht, giy, mili giy cho i tng kiu Date

setMilliseconds() Thit lp gi tr mili giy cho i tng kiu Date

setMinutes() Thit lp gi tr pht, giy, mili giy cho i tng kiu Date

setMonth() Thit lp gi tr thng, ngy, gi, pht, giy, mili giy cho i tng kiu Date

setSeconds() Thit lp gi tr giy, mili giy cho i tng kiu Date

setTime() Thit lp thi gian cho i tng kiu Date bi s mili giy truyn vo


Phng thc Miu t

setUTCDate() Thit lp gi tr ngy, gi, pht, giy, mili giy cho i tng kiu Date (UTC)

setUTCFullYear()Thit lp gi tr nm, thng, ngy, gi, pht, giy, mili giy cho i tng kiu Date (UTC)

setUTCHours() Thit lp gi tr gi, pht, giy, mili giy cho i tng kiu Date (UTC)

setUTCMilliseconds() Thit lp gi tr mili giy cho i tng kiu Date (UTC)

setUTCMinutes() Thit lp gi tr pht, giy, mili giy cho i tng kiu Date (UTC)

setUTCMonth()Thit lp gi tr thng, ngy, gi, pht, giy, mili giy cho i tng kiu Date(UTC)

setUTCSeconds() Thit lp gi tr giy, mili giy cho i tng kiu Date (UTC)


Phng thc Miu t

toDateString()Chuyn i gi tr ca mt i tng Date thnh gi tr chui d hiu hn i vi ngi s

dng

toISOString()Chuyn i gi tr ca mt i tng Date thnh gi tr chui theo chun ISO

(YYYY-MM-DDTHH:mm:ss.sssZ)

toJSON()Chuyn i gi tr ca mt i tng Date thnh gi tr chui theo nh dng JSON

(YYYY-MM-DDTHH:mm:ss.sssZ)

toLocaleDateString()Chuyn i gi tr ca mt i tng Date thnh gi tr chui (ngy, thng, nm), gi tr sau

khi chuyn i d hiu hn i vi ngi s dng (theo nh dng ti my tnh c nhn)

toLocaleTimeString()Chuyn i gi tr ca mt i tng Date thnh gi tr chui (gi, pht, giy), gi tr sau

khi chuyn i d hiu hn i vi ngi s dng (theo nh dng ti my tnh c nhn)


Phng thc Miu t

toLocaleString()

Chuyn i gi tr ca mt i tng Date thnh gi tr chui, gi tr sau khi

chuyn i d hiu hn i vi ngi s dng (theo nh dng ti my tnh c

nhn)

toString() Chuyn i gi tr ca mt i tng Date thnh gi tr chui

toTimeString() Chuyn i gi tr ca mt i tng Date thnh gi tr chui (gi, pht, giy)

toUTCString()Chuyn i gi tr thi gian UTC thnh gi tr chui, gi tr sau khi chuyn i d

hiu hn i vi ngi s dng

valueOf() Tr v gi tr ca i tng Date

parse() Tr v chui s mili giy k t thi im 01/01/1970 cho n thi gian truyn vo

JavaScript RegExp Object

JavaScript RegExp Object dng m t mu ca cc chui vn bn.

s dng thnh tho JavaScript RegExp i hi phi c kin thc tt v

biu thc chnh quy (Regular Expression)

Modifiers

Modifier Miu t

i Khng phn bit ch hoa v ch thng

g Tr v tt c cc gi tr ph hp

m Thc hin trn tt c cc dng

RegExp Object Properties

Thuc tnh Miu t

global Tr v kt qu true nu g modifier c thit lp, ngc li tr v false

ignoreCase Tr v kt qu true nu i modifier c thit lp, ngc li tr v false

lastIndex Tr v ch s tip theo ca kt qu so snh khi g modifier c thit lp

multiline Tr v kt qu true nu m modifier c thit lp, ngc li tr v false

source Tr v ni dung ca pattern

RegExp Object Methods

Phng thc Miu t

compile() Bin dch mt biu thc chnh quy

exec()Kim tra mu chui c tm kim c tn ti trong chui ngun haykhng? Nu c tr v gi tr ca mu chui c tm kim, ngc litr v gi tr null

test()Kim tra mu chui c tm kim c tn ti trong chui ngun haykhng? Nu c tr v gi tr true, ngc li tr v gi tr false

Bi tp

1. S dng RegExp Obj loi b cc khong trng d tha trong mt chui

2. S dng RegExp Obj thay i gi tr ca thuc tnh href trong th a

3. S dng RegExp Obj kim tra s hp l ca cc gi tr

Email

Tn ng nhp

JavaScript Global Object

Cc phng thc v thuc tnh ca JavaScript Global c th c s dng

bi tt c cc JavaScript Objects khc.

Global Object Properties

Thuc tnh Miu t

Infinity i din gi tr m v cng v dng v cng trong ton hc

NaNGi tr ny xut hin khi biu thc ton hc khng thc hin c ("Not-a-Number)

undefined Gi tr ny c tr v khi mt bin cha c gn gi tr mc nh

Global Object Methods (1)

Phng thc Miu t

decodeURI() Gii m chui URI

decodeURIComponent() Gii m chui URI c m ha bi encodeURIComponent()

encodeURI() M ha cc k{ t c bit trong chui URI (ngoi tr , / ? : @ & = + $ # )

encodeURIComponent() M ha cc k{ t c bit trong chui URI

escape() M ha cc k{ t c bit c trong chui

unescape() Gii m cc k{ t c bit c trong chui

eval() Thc hin biu thc hoc cc cu lnh c truyn vo

Global Object Methods (2)

Phng thc Miu t

isFinite() Kim tra gi tr truyn vo c phi l mt s hu hn hay khng.

isNaN() Kim tra gi tr truyn vo c phi l mt NaN hay khng.

Number() Chuyn i gi tr ca cc i tng khc thnh gi tr ca i tng Number

parseFloat() Chuyn i gi tr chui thnh gi tr s

parseInt() Chuyn i gi tr chui thnh gi tr s

String() Chuyn i gi tr ca cc i tng khc thnh gi tr ca i tng String

Hng dn to i tng trong JavaScript

Thuc tnh v truy cp thuc tnh

Phng thc v truy cp phng thc

Public - Private

Truyn gi tr vo i tng

Truyn gi tr vo phng thc

n tp

To ra i tng box v cc box bn di ( bit rng v c 1 box cn cc tham s

nh sau *"100px","100px","yellow","red"+, "Box 01")

Browser Object Model

Browser Object Model (BOM) cho php JavaScript thao tc vi trnh duyt

Bao gm cc i tng: Window, Screeen, Location, History, Navigator,

PopupAlert, Timing, Cookies

JavaScript Window

JavaScript Window Object i in cho ca s ang m trn trnh duyt

Cung cp cc thuc tnh v phng thc thao tc vi cc ca s ang

lm vic

Window Object Properties

i tng con

document Tr v i tng Document ca ca s

history Tr v i tng History ca ca s

location Tr v i tng Location ca ca s

navigator Tr v i tng Navigator ca ca s

screen Tr v i tng Screen ca ca s

Window Object Methods

Hp thoi

alert Hin th hp thoi thng bo v nt nhn OK

confirm

Hin th hp thoi thng bo xc nhn cng nt nhn OK v Cancel

Nhn OK tr v true

Nhn Cancel tr v false

promptHin th hp thoi thng bo v cho ngi dng nhp vo mt gi tr no


open: M mt ca s mi

window.open(URL,name,specs,replace)

URL URL ca trang mun m (gi tr mc nh about:blank)

name Ch xut hin ca ca s mi ( _blank, _parent, _self, _top, name )

specs Thit lp cc thuc tnh ca ca s mun m: width, height, top, left,

replace Tr v mt mng cc frame hin c ti ca s ang m

Thuc tnh Miu t

innerHeight Thit lp hoc tr v chiu cao phn cha ni dung ca mt ca s

innerWidth Thit lp hoc tr v chiu rng phn cha ni dung ca mt ca s

outerHeight Thit lp hoc tr v chiu cao ca ca s (k c phn toolbar v scrollbars)

outerWidth Thit lp hoc tr v chiu rng ca ca s (k c phn toolbar v scrollbars)

Kch thc ca s


Cc thuc tnh ca JS Window

defaultStatusThit lp hoc tr v gi tr ni dung mc nh trn thanh trng thi camt ca s (Opera only)

frames Tr v mt mng cc frames trong ca s hin ti

length Tr v s lng frames trong ca s hin ti

name Thit lp hoc tr v gi tr name ca ca s

statusThit lp hoc tr v gi tr ni dung mc nh trn thanh trng thi camt ca s (Opera only)

Ta

screenLeft Tr v ta x ca ca s so vi mn hnh (khng hot ng trn Firefox)

screenTop Tr v ta y ca ca s so vi mn hnh (khng hot ng trn Firefox)

screenX Tr v ta x ca ca s so vi mn hnh (Firefox)

screenY Tr v ta y ca ca s so vi mn hnh (Firefox)

JavaScript Timing

setInterval() Thc hin m lnh sau mt khong thi gian quy nh

clearInterval() Ngng cc m lnh c gi bi setInterval()

setTimeout() Thc hin m lnh ti mt khong thi gian quy nh

clearTimeout() Ngng cc m lnh c gi bi setTimeout()

Trong JavaScript chng ta c th thit lp thi gian gi mt s on code no . iu

ny cn c gi l Timing events

Bi tp JavaScript Timing

1. Xy dng chng trnh ng h in t


2. n hin mt bc tranh kt hp setInterval() v thuc tnh opacity ca CSS


3. Xy dng chng trnh ng h bm gi

Thuc tnh Miu t

focus() Thit lp ca s trng thi focus (lm ni bt)

blur() Hy b trng thi focus ca mt ca s no

focus & blur

Window Methods Properties


Di chuyn ca s

moveBy()Di chuyn ca s n mt ta no so vi v tr hin ti ca cas

moveTo() Di chuyn ca s n mt ta no so vi mn hnh


resizeBy()Thay i kch thc ca s theo chiu cao v chiu rng c truynvo

resizeTo()Thay i kch thc ca s n chiu cao v chiu rng c truynvo

Thay i kch thc ca s

Thao tc vi thanh trc

scrollBy(xnum, ynum)Cun ni dung trong ca s theo chiu ngang l xnum (pixel), theochiu dc l ynum (pixel)

scrollTo(xpos, ypos) Cun ni dung trong ca s n v tr xpos v ypos

pageXOffset Tr v gi tr pixel khi di chuyn thanh cun (theo chiu ngang)

pageYOffset Tr v gi tr pixel khi di chuyn thanh cun (theo chiu dc)

Thuc tnh Miu t

opener Tr v ca s m ra ca s hin ti

parent Tr v ca s cha ca ca s hin ti

self Tr v ca s ang thao tc hin ti

top Tr v ca s trn cng ca trnh duyt

Mi quan h gia cc ca s


JavaScript Navigator

JavaScript Navigator Object cung cp cc thng tin v trnh duyt web

(browser): tn, phin bn ca trnh duyt, cc plugin c ci t trong

trnh duyt,

a s cc phng thc v thuc tnh ca Navigator u c h tr bi

cc trnh duyt ph bin hin nay

Navigator Object Properties (P1)

appCodeName Tr v code name (m tn) ca trnh duyt

appName Tr v tn ca trnh duyt

appVersion Tr v thng tin phin bn ca trnh duyt

cookieEnabledKim tra cc tp tin cookie c bc hay cha ? Kt qu tr v l gi tr

thuc i tng Boolean (true/false, 1/0)

Navigator Object Properties (P2)

online Kim tra trnh duyt c c thit lp trng thi online khng?

platform Tr v phin bn (platform) m trnh duyt ang c thc thi

userAgent Tr v gi tr user-agent c gi n server bi trnh duyt

language

systemLanguageTr v ngn ng m trnh duyt ang c thit lp

plugins Tr v danh sch cc plugins c tch hp trong trnh duyt

Navigator Object Methods

javaEnabled()Kim tra trnh duyt c h tr Java hay khng? Kt qu tr v l gi tr thuc

i tng Boolean (true/false, 1/0)

taintEnabled()Kim tra trnh duyt c h tr data tainting hay khng? Phng thc ny

ch h tr trn trnh duyt IE v Opera

Bi tp

1. Xc nh tn ca trnh duyt ang truy cp vo website?

2. Xc nh ngn ng c thit lp bi trnh duyt ?

3. Kim tra trnh duyt ci t plugin Shockwave Flash hay cha?

Lu khi s dng JS Navigator

Cc thng tin nhn c t JS Navigator khng nn s dng xc nh cc phin bn ca

trnh duyt

1. Cc thng tin nhn c t JS Navigator c th c thay i bi ngi dng

2. Trnh duyt khng xc nhn c phin bn h iu hnh c pht trin trc n

3. Mt s trnh duyt t ng nhn vt qua 1 s trang web

JavaScript Screen

JavaScript Screen Object cung cp cc thng tin v mn hnh ca ngi

dng truy cp website

Cc thuc tnh ca Screen u c h tr bi cc trnh duyt ph bin

hin nay

Screen Object Properties

availHeight Tr v chiu cao ca mn hnh (khng bao gm phn taskbar)

availWidth Tr v chiu rng ca mn hnh (khng bao gm phn taskbar)

colorDepthTr v s bits c s dng ch ra mu sc ca mt pixel trong mt hnh

nh

height Tr v chiu cao ca mn hnh (bao gm phn taskbar)

pixelDepth Tr v phn gii mu (s bit trn mt im nh) ca mn hnh

width Tr v chiu rng ca mn hnh (bao gm phn taskbar)

JavaScript History

JavaScript History Object bao gm cc phng thc v thuc tnh gip

chng ta thao tc vi history ca trnh duyt web

History Object Properties

length

Tr v s lng URL c lu trong danh sch history ca trnh duyt

IE v Opera bt u bng gi tr 0

Firefox, Chrome, v Safari bt u bng gi tr 1

History Object Methods

back()Ti li URL trc c trong danh sch history ca trnh duyt

Tng dng history.go(-1)

forward()Ti li URL sau c trong danh sch history ca trnh duyt

Tng dng history.go(1)

go() Ti li mt trang no c trong danh sch history ca trnh duyt

JavaScript Location

JavaScript Location Object bao gm cc thng tin v URL ca ca s hin

ti v chuyn hng ca ca s n cc URL khc

Location Object Properties

hash Thit lp hoc tr v gi tr hash (bt u bi du #) ca mt URL

host Thit lp hoc tr v gi tr host v port ca mt URL

hostname Thit lp hoc tr v gi tr hostname ca mt URL

href Thit lp hoc tr v gi tr href ca mt URL

pathname Thit lp hoc tr v gi tr pathname ca mt URL

port Thit lp hoc tr v gi tr port ca mt URL

protocol Thit lp hoc tr v gi tr protocol ca mt URL

search Thit lp hoc tr v gi tr search (bt u bi du ?) ca mt URL

Cc thnh phn ca URL

http://www.zend.vn:8080/public/tin-cong-nghe/cd-o-viet-nam.html#title

Xc nh cc thnh phn ca URL

Href: http://www.zend.vn:8080/public/tin-cong-nghe/cd-o-viet-nam.html#title

Protocol: http

Host: www.zend.vn:8080

Hostname: www.zend.vn

Port: 8080

Pathname: public/tin-cong-nghe/cd-o-viet-nam.html#title

Hash: #title

Location Object Methods

assign() Ti mt URL mi

reload (forceGet)

Ti li trang hin ti. Tham s forceGet nhn 2 gi tr

True: Ti li trang t server

False: Ti li trang t cache (mc nh)

replace() Thay th URL hin ti bi mt URL mi

JavaScript Cookies

Cookie l mt dng bn ghi c to ra v lu li trn trnh duyt khi

ngi dng truy cp vo mt website no

i vi ngi dng, cookie lm cho website tr nn tin li hn, h c th

truy cp vo website nhanh hn khng m phi nhp li cc thng tin

nhiu ln.

i vi cc trang web thng mi in t, s dng cookie ghi nh cc

thng tin khch hng h khng cn nhp li thng tin nhiu ln khi tin

hnh t hng.

Lu thng tin ngy gn y nht m ngi dng truy cp vo website

Thng k s ngi truy cp trn website

Mt s trng hp s dng cookie

Expires: Xc nh thi im cookie s b ht hiu lc trn trnh duyt.

Domain: Xc nh tn min s c s dng gi cookie i

Path: ng dn hoc th mc trn trang web thit lp cookie

Secure: Nu gi tr ny c thit lp bn trong cookie, thng tin s c m ho

trong qu trnh truyn gia server v browser

Name: tn phn bit gia cc cookie.

Cc thnh phn ca cookie

1. S dng JS Cookie lu tn ca mt khch ving thm. Sau ny, mi khi

v khch truy cp vo trang web s nhn c mt li cho.

2. Thng k s ln truy cp vo trang web ca ngi dng

3. Lu tr cc thng tin cc input c nhp bi ngi dng

n tp

Gio trnh: Lp trnh jQuery (jQuery Master) Tc gi: Phm V Khnh & ZendVN group

Email: [email protected] 1 website: www.zend.vn

Cc i tng trong DOM

Node Object NodeList Object

Properties: .attributes .childNodes .firstChild .lastChild .nextSibling .nodeName .nodeType .nodeValue .parentElement .parentNode .previousSibling

Methods: .appendChild(newChild) .cloneNode(deep) .hasChildNodes() .insertBefore(newChild,refChild) .removeChild(oldChild) .removeNode(removeChildren) .replaceChild(newChild,refChild)

Properties: .length

Methods: .item(index)

NamedNodeMap Object CharacterData Object

Properties: .length

Methods: .getNamedItem(attr-name) .item(index)(IE8+) .value|.textContent(IE9+) .removeAttribute(attr-name)(IE8+) . setNamedItem(arg)

Properties: .length .data

Methods: .appendData(str) .deleteData(offset,count) .insertData(offset,str) .replaceData(offset,count,arg) .substringData(offset,count)



Text Object Element Object

Properties: .length .data

Methods: . splitText(offset)

Properties: . tagName .data

Methods: .getAttribute(name) .getElementsByTagName(name) .removeAttribute(name) .setAttribute(name,value)

Document Object CSSStyleDeclaration Object

Properties: .documentElement

Methods: .createElement(tagName) .createTextNode(data) .getElementById(elementId) .getElementsByTagName(tagname)

Properties: .cssText .fontSize .fontWeight .(thuc tnh CSS ca i tng HTML)

Methods: .removeProperty(name) .removeAttribute(name)

HTMLElement Object HTMLDocument Object

Properties: .childNodes .children .className .currentStyle .dir .document .id .innerHTML .innerText .lang .offsetHeight .offsetLeft

Properties: .childNodes .all [IE] .anchors .applets .body .cookie .domain .embeds .forms .images .links



.offsetParent .offsetTop .offsetWidth .style .title

Methods: .attachEvent(event,func) .addEventListener(event,func,false) .detachEvent(event,func) .removeEventListener(event,func, false); .insertAdjacentHTML(where,HTMLText)

.location .parentWindow .plugins .referrer .scripts .styleSheets [IE] .title .uniqueID [IE] .URL

Methods: .attachEvent(event, func) [IE] .captureEvents(eventTypeList) .close() .createStyleSheet(url, index) [IE] .getElementById(elementId) .getElementsByName(elementName) .open() .tags() .write(text) .writeln(text)



jQuery library

jQuery library o Selectors

Basics Hierarchy Basic Filters Content Filters Visibility Filters Attribute Child Filters Forms

o Attributes / CSS (Nhm thuc tnh v CSS) Attributes CSS Dimensions Offset Data

o Manipulation (Nhm thao tc) Copying DOM Insertion, Around DOM Insertion, Inside DOM Insertion, Outside DOM Removal DOM Replacement

o Traversing Filtering Miscellaneous Traversing Tree Traversal

o Events (Nhm s kin) Browser Events Document Loading Event Handler Attachment Form Events Mouse Events Event Object

o Effects (Nhm hiu ng) Basics Custom Fading



Sliding o Ajax (Nhm Ajax)

Global Ajax Event Handlers Helper Functions Low-Level Interface Shorthand Methods

o Core (Nhm Li) jQuery Object Utilities DOM Element Methods Internals Deferred Object Callbacks Object

Need to Research

jQuery basic jQuery() .ready() .css()

.addClass()

.appendTo()

.click()

.html()

.text() jQuery.noConflict()



Core

jQuery Object jQuery() jQuery.noConflict() jQuery.when()

Utilities jQuery.contains() jQuery.each() jQuery.extend() jQuery.globalEval() jQuery.grep() jQuery.inArray() jQuery.isArray() jQuery.isEmptyObject() jQuery.isFunction() jQuery.isNumeric() jQuery.isPlainObject() jQuery.isWindow() jQuery.isXMLDoc() jQuery.makeArray() jQuery.map() jQuery.merge() jQuery.noop() jQuery.now() jQuery.parseHTML() jQuery.parseJSON() jQuery.parseXML() jQuery.proxy() jQuery.support jQuery.trim() jQuery.type() jQuery.unique()

DOM Element Methods .get() .index() .toArray()

Internals .jquery .context

jQuery.error() .length .pushStack() .selector

Deferred Object deferred.always() deferred.done() deferred.fail() deferred.notify() deferred.notifyWith() deferred.progress() deferred.promise() deferred.reject() deferred.rejectWith() deferred.resolve() deferred.resolveWith() deferred.state() deferred.then() .promise()

Callbacks Object jQuery.Callbacks() callbacks.add() callbacks.disable() callbacks.empty() callbacks.fire() callbacks.fired() callbacks.fireWith() callbacks.has() callbacks.lock() callbacks.locked() callbacks.remove()



Selectors

Basics *

.class element #id selector1, selectorN, ...

Hierarchy parent > child ancestor descendant prev + next prev ~ siblings

Basic Filters :animated :eq() :even

:first :gt() :header :lang() :last :lt() :not() :odd :root :target

Content Filters :contains() :empty :has() :parent

Visibility Filters :hidden :visible

Attribute [name|="value"] [name*="value"] [name~="value"] [name$="value"] [name="value"] [name!="value" [name^="value"] [name] [name="value"][name2="value2"]

Child Filters :first-child :first-of-type :last-child :last-of-type :nth-child() :nth-last-child() :nth-last-of-type() :nth-of-type() :only-child :only-of-type()

Forms :button :checkbox :checked :disabled :enabled :focus :file :image :input :password :radio :reset :selected :submit :text



Traversing

Filtering .eq() .filter() .first() .has() .is() .last() .map() .not() .slice()

Miscellaneous Traversing .add() .andSelf() .contents() .each() .end()

Tree Traversal .addBack() .children() .closest() .find() .next() .nextAll() .nextUntil() .parent() .parents() .parentsUntil() .prev() .prevAll() .prevUntil() .siblings()



Attributes / CSS

Attributes .attr() .prop() .removeAttr() .removeProp() .val()

CSS .addClass() .css() .hasClass() .removeClass() .toggleClass()

Dimensions .height() .innerHeight() .innerWidth() .outerHeight() .outerWidth() .width()

Offset .offset() .offsetParent() .position() .scrollLeft() .scrollTop()

Data jQuery.data() .data() jQuery.hasData() jQuery.removeData() .removeData()



Manipulation

Copying .clone()

DOM Insertion, Around .wrap() .wrapAll() .wrapInner()

DOM Insertion, Outside .after() .before() .insertAfter() .insertBefore()

DOM Insertion, Inside .append() .appendTo() .html() .prepend() .prependTo() .text()

DOM Removal .detach() .empty() .remove() .unwrap()

DOM Replacement .replaceAll() .replaceWith()



Effects

Basics .hide() .show() .toggle()

Fading .fadeIn() .fadeOut() .fadeTo() .fadeToggle()

Custom .animate() .clearQueue() .delay() .dequeue() jQuery.dequeue() .finish() jQuery.fx.interval jQuery.fx.off .queue() jQuery.queue() .stop()

Sliding .slideDown() .slideToggle() .slideUp()



Ajax

Shorthand Methods .load() jQuery.get() jQuery.post() jQuery.getJSON() jQuery.getScript()

Helper Functions jQuery.param() .serialize() .serializeArray()

Low-Level Interface jQuery.ajax() jQuery.ajaxSetup()

Global Ajax Event Handlers .ajaxComplete() .ajaxError() .ajaxSend() .ajaxStart() .ajaxStop() .ajaxSuccess()

Ajax settings

Accepts{} async beforeSend() cache complete() contents{} contentType context{} converters{} crossDomain data

dataFilter() dataType error() global headers{} ifModified isLocal jsonp jsonpCallback mimeType password

processData scriptCharset statusCode{} success() timeout traditional type url username

xhr() xhrFields{}

Bin son: ZendVN Group

Hng dn: Lu Trng Hi Ln

Responsive Web Design

Vn truy cp website t pha ngi dng

Gii php cho vic hin th giao din website

X l m ngun nhn din thit b ngi dng ang s dng chuyn

hng ngi dng n trang web c thit k dnh ring cho thit b

Responsive design

Responsive design

Responsive architect: cc h thng ca t ng, h thng bo chy,

Responsive design yu cu mt thit k phi c kh nng t ng iu

chnh thch nghi vi nhiu nhm ngi s dng khc nhau.

Tham kho cc mu responsive design

Responsive design

u im: thn thin vi ngi dng, tit kim thi gian bo tr & nng cp

Nhc im: mt nhiu thi gian xy dng

Son tho m ngun HTML CSS vi Emmet Plugin

Download v ci t vo Editor (Zend Studio 9.0.3)

Thao tc nhanh vi m ngun HTML

Thao tc nhanh vi m ngun CSS

Mt s th thut khc

S dng CSS media xy dng RWD

Type: aural, braille, handheld, print, projection, screen, tty, and tv

Dimensions

Browser: min-width, max-width, min-height, max-height

Device: min-device-width, max-device-width, min-device-height, and max-device-height

Orientation: portrait, landscape

Getting started with Bootstrap 3

Gii thiu Bootstrap

Download

Cu trc th mc

S thch ng ca trnh duyt v h iu hnh

Demo u tin

H thng li (Grid system)

Tp trung ni dung ca trang trong th div.container

S nh hng ca cc class n kch thc ca mn hnh: extra small (.col-

xs-), small (.col-sm-), medium (.col-md-), large (.col-lg-)

Quy tc tng 12

Offsetting columns

Nesting columns

Column ordering: push & pull

Less CSS

Cch s dng LESS

Khai Bo Bin

Mixins

Nested Rules

Operation

Scope

NODE.JS

Bin son: ZendVN Group

Hng dn: L Tn Ti

Kha Hc: Lp trnh Jquery

S bng n web thi gian thc

NODE.JS

Hy Chn Node.js

NODE.JS

NODE.JS

Tng lai Node.js

Ni dung

I. Node.js

II. Node Package Modules ( NPM)

III. Socket.io Package

IV.Mysql Package

V. Xy dng ng dng Chat.

Gii thiu Node.js

L mt nn tng phn mm cho kh nng m rng my ch v cc ng dng mng.

c vit bng JavaScript.

S dng k thut iu hng theo s kin.

M hnh Non-Blocking I/O.

Nhiu th vin h tr thng qua Node Packaged Modules (NPM).

I. Gii thiu NODE.js

Node.js dng lm g ?

Xy dng websocket Server.

ng dng upload file rt nhanh trn client.

Xy dng Ad Server.

Hoc bt k ng dng d liu thi gian thc no.

I. Gii thiu NODE.js

Ci t & Ti liu

Ci t

Ti liu

I. Gii thiu NODE.js

http://nodejs.org

http://nodejs.org/api

INSTALL

Run Hello World.

I. Gii thiu NODE.js

var http = require(http); require modules http.createServer(function(request,reponse){ response.writeHead(200); status code in header response.write(Hello World.); response body response.end(); close the connection }).listen(8080); listen for connection on this port console.log(Listening on port 8080);

node hello.js Run the server Go url http://localhost:8080

listening on port 8080 Hello World.

hello.js

Gii thiu NPM

Dng qun l cc gi ca Node.js

i km v c ci t t ng vi mi trng my tnh khi ci Node.js

Cho php ci t cc gi Node.js c sn trn Registry Npm hoc g b cc gi ci t.

Npm c vit hon ton bng Javascript , v chy trn nn tng Node.js


S dng https://www.npmjs.org

npm uninstall package_name

npm install packpage_name


Ci t

npm install socket.io

G b

npm uninstall socket.io

Gii thiu Socket.io http://socket.io

L mt m hnh websocket c ng gi chy vi Node.js

Gi cho Client v Server trng thi lun kt ni.

Kh nng phn hi nhanh vi cc yu cu.

H tr cc ng dng chy thi gian thc.


clients

Server

Ci t & G b

npm uninstall socket.io

npm install socket.io

Ci t

G b


Kt ni Server & Client


Server clients

server.js index.html

var io = require(socket.io).listen(8080); io.set('transports',['xhr-polling']); io.sockets.on(connection,function(socket){ console.log(Client connected ); });


server.js

var socket = io.connect(http://localhost:8080);

index.html

Run:

Cancel:

node server.js

Ctrl+C

Kt ni Server & Client

socket.emit(name,data)


clients

Client gi d liu n Server

Server

Gi:

Nhn: socket.on(name,function(data){

}); // server

index.html server.js

Client gi d liu n Server


server.js

var socket = io.connect(http://localhost:8080); emit the 'messages' event on the server socket.emit(messages,{hello:world});

index.html

io.sockets.on(connection,function(socket){ console.log(Client connected ); socket.on(messages,function(data){ console.log(data); }); listen for messages events });

server.js

Server gi d liu n clients


clients Server

client Server

clients Server

1. Server gi n client ang to

ra kt ni.

2. Server gi n tt c cc

clients ngoi tr client to ra

kt ni bt u n.

3. Server gi n tt c cc

clients.

socket.broadcast.emit(name,data);

io.sockets. emit(name,data)

socket. emit(name,data);

1

1

2

2

3

3

Server gi d liu n Client


var socket = io.connect(http://localhost:8080); socket.on(messages,function(data){ console.log(data); }); listen for messages events

index.html

io.sockets.on(connection,function(socket){ console.log(Client connected ); emit the 'messages' event on the client socket.emit(messages,{hello:world}); });

server.js

1. Server gi n client ang to ra kt ni.

Gii thiu Mysql package

Dng kt ni v x l mysql.

c vit bng JavaScript

Khng yu cu bin dch

IV. Mysql Package

Ci t https://www.npmjs.org/package/mysql

npm uninstall mysql

npm install mysql

Ci t

G b

IV. Mysql Package

var connection = require(mysql).createConnection({

host : localhost, user : root, password : 123, database : database_name

}); connection.connect();

Kt ni vi Mysql

IV. Mysql Package

server.js

connection.query('SELECT * FROM users ORDER BY id ASC', function(err, results) { if (err) throw err; else { console.log(results); }

});

Truy vn database c 3 cch

IV. Mysql Package

connection.query( sql, function(err,results){ });

Cch 1:

Sql : Cu truy vn sql

connection.query('SELECT * FROM users WHERE id = ?', [1],function(err, results) { if (err) throw err; else { console.log(results); }

});


IV. Mysql Package

connection.query(sql, selectionArgs, function(err,results){ });

Cch 2:

Sql : Cu truy vn sql. selectionArgs: Mng cc tham s ph cho cu iu kin.


IV. Mysql Package

connection.query(sql) .on('error', function(err) { handle error }) .on('result', function(row) { receive data }).on('end', function() { all rows have been received });

Cch 3:

connection.query('SELECT * FROM users') .on('error', function(err) { throw err; })

.on('result', function(row) { console.log(row); }) .on('end', function() { console.log('end'); });

var data = [nodejs,2]; connection.query(UPDATE users SET name = ? WHERE id = ?,data, function(err, result) {


});

UPDATE

IV. Mysql Package



connection.query(DELETE FROM users WHERE id = ?,[2], function(err, result) {


});

DELETE

IV. Mysql Package



Xy dng ng dng chat

Chc nng ? Nhiu ngi chat vi nhau

2 ngi chat vi nhau

V. Xy dng ng dng Chat

Kin thc

Cn g ? Html

Css

Jquery

Mysql

Php

Node.js


Ci t

Install ? o xampp.

o node.js

socket.io package

mysql package

date-format package


C s d liu


Xy dng ng dng

3 nhm chc nng o ng nhp ng xut

o Chat gia nhiu ngi ( chat room)

o Chat gia 2 ngi


Chat gia 2 ngi

clients

Server


1

2

3

jquery master full

Documents