View
46
Download
10
Category
Preview:
DESCRIPTION
Jquery Full
Citation preview
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
Cc th HTML thng dng (p2)
STT Th HTML Miu t Kiu Tag
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
Cc th HTML thng dng (p3)
STT Th HTML Miu t Kiu Tag
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
STT Nhm thuc tnh Miu t
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
STT Nhm thuc tnh Miu t
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
STT Nhm thuc tnh Miu t
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
STT Nhm thuc tnh Miu t
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
STT Nhm thuc tnh Miu t
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
static relative absolute fixed
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)
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)
o: so vi khi HTML
TH3: Khi HTML c gi tr position = absolute
static relative absolute fixed
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)
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)
o: so vi khi HTML
TH4: Khi HTML c gi tr position = fixed
static relative absolute fixed
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)
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)
o: so vi khi HTML
1. 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)
2. Khi HTML c gi tr position = fixed, relative, absolute
static relative absolute fixed
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)
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 button Dng 2
Xy dng giao din mu cho button Dng 3
Xy dng giao din mu cho box
Box cha ni dung Dng 01
Xy dng giao din mu cho box
Box cha ni dung Dng 02
Xy dng giao din mu cho box
Box cha ni dung Dng 03
Xy dng giao din mu cho box
Box cha ni dung (c tiu ) Dng 01
Xy dng giao din mu cho box
Box cha ni dung (c tiu ) Dng 2
Xy dng giao din mu cho box
Box cha ni dung (c tiu ) Dng 3
Xy dng giao din mu cho box
Box cha ni dung (c tiu ) Dng 4
Xy dng giao din mu cho box
Box cha ni dung (c tiu ) Dng 5
Xy dng giao din mu cho box
Box cha ni dung (c tiu ) Dng 6
Xy dng giao din mu cho box
Box bo trn cha ni dung Dng 1
Xy dng giao din mu cho box
Box bo trn cha ni dung Dng 2
Xy dng giao din mu cho box
Box bo trn cha ni dung v tiu Dng 1
Xy dng giao din mu cho box
Box bo trn cha ni dung v tiu Dng 2
Xy dng giao din mu cho box
Box bo trn cha ni dung v tiu Dng 3
Xy dng giao din mu cho tab
Dng 1
Xy dng giao din mu cho tab
Dng 2
Xy dng giao din mu cho tab
Dng 3
Xy dng giao din mu cho tab
Dng 4
Xy dng giao din mu cho menu
Dng 1
Xy dng giao din mu cho menu
Dng 2
Xy dng giao din mu cho menu
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 trong JavaScript
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 trong JavaScript
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 trong JavaScript
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 trong JavaScript
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
constructor Tr v hm khi to i tng
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
constructor Tr v hm khi to i tng
length Tr v chiu di ca chui
prototype Thm cc thuc tnh hoc cc phng thc mi cho i tng
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
String Object Methods (2)
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)
String Object Methods (3)
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
Math Object Methods (2)
Phng thc Miu t Gi hm Kt qu
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
Math Object Methods (3)
Phng thc Miu t Gi hm Kt qu
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
constructor Tr v hm khi to i tng
prototype Thm cc thuc tnh hoc cc phng thc mi cho i tng
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
constructor Tr v hm khi to i tng
prototype Thm cc thuc tnh hoc cc phng thc mi cho i tng
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
Date Object Methods (2)
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)
Date Object Methods (3)
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
Date Object Methods (4)
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)
Date Object Methods (5)
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)
Date Object Methods (6)
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
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
K tha
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
Window Object Methods
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
Window Object Properties
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
Bi tp JavaScript Timing
2. n hin mt bc tranh kt hp setInterval() v thuc tnh opacity ca CSS
Bi tp JavaScript Timing
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
Window Object Methods
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
Window Object Methods
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
Window Object Properties
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: info@zend.vn 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)
Gio trnh: Lp trnh jQuery (jQuery Master) Tc gi: Phm V Khnh & ZendVN group
Email: info@zend.vn 2 website: www.zend.vn
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
Gio trnh: Lp trnh jQuery (jQuery Master) Tc gi: Phm V Khnh & ZendVN group
Email: info@zend.vn 3 website: www.zend.vn
.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)
Gio trnh: Lp trnh jQuery (jQuery Master) Tc gi: Phm V Khnh & ZendVN group
Email: info@zend.vn 1 website: www.zend.vn
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
Gio trnh: Lp trnh jQuery (jQuery Master) Tc gi: Phm V Khnh & ZendVN group
Email: info@zend.vn 2 website: www.zend.vn
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()
Gio trnh: Lp trnh jQuery (jQuery Master) Tc gi: Phm V Khnh & ZendVN group
Email: info@zend.vn 3 website: www.zend.vn
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()
Gio trnh: Lp trnh jQuery (jQuery Master) Tc gi: Phm V Khnh & ZendVN group
Email: info@zend.vn 4 website: www.zend.vn
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
Gio trnh: Lp trnh jQuery (jQuery Master) Tc gi: Phm V Khnh & ZendVN group
Email: info@zend.vn 5 website: www.zend.vn
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()
Gio trnh: Lp trnh jQuery (jQuery Master) Tc gi: Phm V Khnh & ZendVN group
Email: info@zend.vn 6 website: www.zend.vn
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()
Gio trnh: Lp trnh jQuery (jQuery Master) Tc gi: Phm V Khnh & ZendVN group
Email: info@zend.vn 7 website: www.zend.vn
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()
Gio trnh: Lp trnh jQuery (jQuery Master) Tc gi: Phm V Khnh & ZendVN group
Email: info@zend.vn 8 website: www.zend.vn
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()
Gio trnh: Lp trnh jQuery (jQuery Master) Tc gi: Phm V Khnh & ZendVN group
Email: info@zend.vn 9 website: www.zend.vn
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
II. Node Package Modules ( NPM)
S dng https://www.npmjs.org
npm uninstall package_name
npm install packpage_name
II. Node Package Modules ( NPM)
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.
III. Socket.io Package
clients
Server
Ci t & G b
npm uninstall socket.io
npm install socket.io
Ci t
G b
III. Socket.io Package
Kt ni Server & Client
III. Socket.io Package
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 ); });
III. Socket.io Package
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)
III. Socket.io Package
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
III. Socket.io Package
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
III. Socket.io Package
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
III. Socket.io Package
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.
III. Socket.io Package
var socket = io.connect(http://localhost:8080); socket.on(messages,function(data){ console.log(data); });
index.html
io.sockets.on(connection,function(socket){ socket.broadcast.emit (messages ,{hello:world}); bradcase message to all other clients connected });
server.js
Server pht d liu n clients
2. Server gi n tt c cc clients ngoi tr client to ra kt ni
bt u n.
III. Socket.io Package
var socket = io.connect(http://localhost:8080); socket.on(messages,function(data){ console.log(data); });
index.html
io.sockets.on(connection,function(socket){ io.sockets.emit (messages ,{hello:world}); bradcase message to all other clients connected });
server.js
Server pht d liu n clients
3. Server gi n tt c cc clients.
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); }
});
Truy vn database c 3 cch
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.
Truy vn database c 3 cch
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 = {name:zendvn}; connection.query(INSERT INTO users SET ?',data, function(err, result) {
if (err) throw err; else { console.log(result); }
});
INSERT
IV. Mysql Package
connection.query(sql,data, function(err,results){ });
Sql : Cu truy vn sql data: d liu cn thm
var data = [nodejs,2]; connection.query(UPDATE users SET name = ? WHERE id = ?,data, function(err, result) {
if (err) throw err; else { console.log(result); }
});
UPDATE
IV. Mysql Package
connection.query(sql, selectionArgs, function(err,results){ });
Sql : Cu truy vn sql. selectionArgs: Mng cc tham s ph cho cu iu kin.
connection.query(DELETE FROM users WHERE id = ?,[2], function(err, result) {
if (err) throw err; else { console.log(result); }
});
DELETE
IV. Mysql Package
connection.query(sql, selectionArgs, function(err,results){ });
Sql : Cu truy vn sql. selectionArgs: Mng cc tham s ph cho cu iu kin.
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
V. Xy dng ng dng Chat
Ci t
Install ? o xampp.
o node.js
socket.io package
mysql package
date-format package
V. Xy dng ng dng Chat
C s d liu
V. Xy dng ng dng Chat
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
V. Xy dng ng dng Chat
Chat gia 2 ngi
clients
Server
V. Xy dng ng dng Chat
1
2
3
Recommended