You are on page 1of 236

VIETHANIT

MC LC
CHNG 1................................................................................................................................1
GII THIU CHUNG................................................................................................................1
Cc ngn ng nh du dng cho thit b in t...................................................................1
Ngn ng nh du thit b cm tay...................................................................................1
Ngn ng nh du v tuyn..............................................................................................1
Ngn ng nh du siu vn bn thu nh...........................................................................1
Cc ngn ng nh du vn bn ng dng Web....................................................................2
Ngn ng nh du siu vn bn........................................................................................2
Ngn ng nh du m rng...............................................................................................2
Ngn ng XHTML.............................................................................................................2
Ngn ng DHTML.............................................................................................................3
Ngn ng nh du siu vn bn (HTML).............................................................................3
Gii thiu HTML................................................................................................................3
c im ca HTML..........................................................................................................4
Cu trc ca mt ti liu HTML.........................................................................................5
Qui trnh to mt ti liu HTML.........................................................................................6
CHNG 2................................................................................................................................8
CC TH C BN TRONG HTML........................................................................................8
Th v cc thuc tnh ca th..................................................................................................8
Cc th c bn trong HTML...................................................................................................9
Th xc nh vn bn HTML..............................................................................................9
Th xc nh phn u cho trang web.................................................................................9
Th xc nh tiu cho vn bn HTML...........................................................................9
Th xc nh cc danh mc trang web.............................................................................10
Th to danh sch..............................................................................................................11
Th to danh sch khng th t....................................................................................12
Th to danh sch c th t..........................................................................................14
Th xc nh vn bn trang web...................................................................................19
Th to ng thng.........................................................................................................19
Th xc nh dng ch thch.............................................................................................21
Cc th vn dng vi vn bn...............................................................................................21
Th vn dng cho kiu ch...............................................................................................21
2.3.1.1 Lm ch m.....................................................................................................21
2.3.1.2 Lm ch in nghing.........................................................................................22
2.3.1.3 Thay i kch thc ch...................................................................................23
2.3.1.4 To dng ch thp.............................................................................................23
2.3.1.5 To dng ch cao..............................................................................................24
2.3.1.6 Gch ngang v gch di ch...........................................................................25
2.3.1.7 To ch dng ring............................................................................................25
2.3.1.8 To dng ch b xo..........................................................................................25
2.3.1.9 To dng ch chn vo.....................................................................................25
Th vn dng cho hiu ng font ch................................................................................25
2.3.2.1 Chn font ch cho vn bn...............................................................................25
2.3.2.2 i c ch vn bn...........................................................................................26
2.3.2.3 Chn c ch mc nh......................................................................................27
2.3.2.4 i mu ch......................................................................................................27
2.3.2.5 Lm ch nhp nhy...........................................................................................27
Th vn dng trnh by trang Web........................................................................................27
La chn mu nn.............................................................................................................27

HTML v JavaScript

Trang i

VIETHANIT
La chn hnh nh lm nn...............................................................................................28
Chnh l cho trang Web....................................................................................................29
To on vn bn..............................................................................................................29
Ngt on..........................................................................................................................30
Mt s th c bit khc.......................................................................................................31
Th lm vic vi siu lin kt...........................................................................................31
Gii thiu siu lin kt v URL....................................................................................31
S dng siu lin kt.....................................................................................................32
Th Meta...........................................................................................................................38
Cc th DIV v SPAN......................................................................................................39
Cc th mc on..............................................................................................................40
2.5.3.1 Th <ADDRESS>.............................................................................................40
2.5.3.2 Th <BLOCKQUOTE>....................................................................................41
2.5.3.3 Th <PRE>........................................................................................................42
S dng k t c bit trong ti liu HTML.........................................................................43
CHNG.................................................................................................................................48
LM VIC VI BNG - BIU MU KHUNG V A PHNG TIN....................48
Lm vic vi bng.................................................................................................................48
Cch to bng....................................................................................................................48
Cc thuc tnh ca bng....................................................................................................50
Thuc tnh ca th <TABLE>......................................................................................50
Thuc tnh ca th <TR>..............................................................................................50
Thuc tnh ca th <TD>..............................................................................................51
Hiu chnh bng................................................................................................................52
To khung vin cho bng..............................................................................................52
Thay i kch thc bng..............................................................................................53
B sung cnh v ng k li.....................................................................................53
Trang tr vn bn chung quanh bng.............................................................................54
Kt hp cc ct v cc dng.........................................................................................55
Canh l ni dung trong ...............................................................................................57
S dng hnh nh lm nn cho bng.............................................................................57
Lm vic vi biu mu..........................................................................................................59
S dng biu mu..............................................................................................................59
Phn t FORM..................................................................................................................59
Cc phn t nhp ca HTML............................................................................................60
Phn t INPUT..............................................................................................................60
Button............................................................................................................................61
Textbox.........................................................................................................................61
Checkbox......................................................................................................................61
Radio.............................................................................................................................62
Submit...........................................................................................................................62
nh................................................................................................................................63
Reset..............................................................................................................................63
Phn t TextArea..........................................................................................................64
Phn t BUTTON.........................................................................................................65
Phn t Select................................................................................................................67
Phn t LABEL.............................................................................................................70
To biu mu.....................................................................................................................71
Thit lp tiu im (Focus)...........................................................................................73
Th t tab......................................................................................................................74
Phm truy cp (Access Keys)........................................................................................74

HTML v JavaScript

Trang ii

VIETHANIT
Phn t v hiu ho.......................................................................................................74
Lm vic vi khung..............................................................................................................74
dng...................................................................................................................................75
Ti sao s dng khung?.....................................................................................................75
Lm vic vi khung.........................................................................................................75
3.3.2.1 S dng khung..................................................................................................75
3.3.2.2 Lin kt cc khung............................................................................................80
3.3.2.3 Phn t NOFRAMES........................................................................................81
3.3.2.4 Phn t IFRAMES (inline frame).....................................................................82
Lm vic vi a phng tin................................................................................................83
S dng hnh nh trong ti liu HTML.............................................................................83
Chn nh tnh................................................................................................................84
Chn nh ng (.GIF) vo ti liu HTML....................................................................86
Chn m thanh vo ti liu HTML...................................................................................87
Chn video vo ti liu HTML.........................................................................................88
CHNG 4..............................................................................................................................89
STYLE SHEET.........................................................................................................................89
DHTML................................................................................................................................89
Gii thiu DHTML...........................................................................................................89
Cc c im ca DHTML...............................................................................................90
Style sheet.............................................................................................................................91
4.2.1 Khi nim, chc nng v cc li ch ca style sheet................................................91
4.2.2 Quy tc stylesheet....................................................................................................94
4.2.3 Cc Selector trong style sheet..................................................................................96
4.2.4 Kt hp v chn mt style sheet vo ti liu HTML.............................................103
4.2.5 Thit lp thuc tnh trong style sheet.....................................................................105
CHNG 5............................................................................................................................106
TNG QUAN V JAVASCRIPT..........................................................................................106
5.1 Gii thiu v Javascript.................................................................................................106
Javascript.........................................................................................................................106
Tm hiu lch s ca JavaScript......................................................................................106
Ngun gc ca JavaScript...........................................................................................107
JavaScript n vi Internet Explorer...........................................................................107
JavaScript tr thnh chun chnh thc........................................................................107
JavaScript hin nay pht trin n u?.................................................................108
Nhng Javascript vo file HTML...................................................................................108
Dng th <SCRIPT>...................................................................................................109
Dng file bn ngoi.....................................................................................................110
Dng JavaScript trong trnh x l s kin..................................................................111
Th <NOSCRIPT> v </NOSCRIPT>...........................................................................112
Bin, hng v cc kiu d liu trong JavaScript.................................................................113
5.2.1 Bin v phn loi bin............................................................................................113
5.2.2 Hng.......................................................................................................................114
5.2.3 Cc kiu d liu trong JavaScript..........................................................................115
5.2.3.1 Kiu s nguyn................................................................................................116
5.2.3.2 Kiu s thc (kiu s du chm ng)............................................................116
5.2.3.3 Kiu Logical (hay Boolean)............................................................................116
5.2.3.5 Kiu null..........................................................................................................117
Cu hi v bi tp................................................................................................................118
CHNG 6............................................................................................................................119
TON T V BIU THC TRONG JAVASCRIPT..........................................................119

HTML v JavaScript

Trang iii

VIETHANIT
6.1 Cc ton t trong JavaScript.........................................................................................119
6.1.1 Cc ton t thng dng..........................................................................................119
6.1.1.1 Ton t gn.....................................................................................................119
6.1.1.2 Ton t s hc.................................................................................................120
6.1.1.3 Ton t so snh...............................................................................................121
6.1.1.4 Ton t logic...................................................................................................122
6.1.1.5 Ton t thao tc trn bit.................................................................................123
6.1.1.6 Ton t chui..................................................................................................125
6.1.2 Mt s ton t khc................................................................................................126
6.1.2.1 Ton t iu kin...........................................................................................126
6.1.2.2 Ton t du phy............................................................................................126
6.1.2.3 Ton t new....................................................................................................126
6.1.2.4 Ton t typeof.................................................................................................126
6.1.2.5 Ton t this.....................................................................................................128
6.1.3 Th t u tin ca cc ton t................................................................................129
6.2 Cc biu thc trong JavaScript.....................................................................................129
6.2.1 Biu thc regular....................................................................................................130
6.2.2 To ra mt biu thc regular..................................................................................132
6.2.2.1 Khi to i tng (Object initializer)............................................................133
6.2.2.2 Gi hm khi to ca i tng RegExp........................................................133
6.2.3 S dng biu thc regular......................................................................................134
6.3 Cu hi v bi tp..........................................................................................................136
CHNG 7............................................................................................................................139
CU LNH IU KIN.......................................................................................................139
7.1 Lnh v khi lnh..........................................................................................................139
7.1.1 Lnh v quy c lnh trong JavaScript..................................................................139
7.1.2 Khi lnh................................................................................................................139
7.2 Cc cu lnh iu kin..................................................................................................139
7.2.1 Cu lnh ifelse....................................................................................................139
7.2.2 Cu lnh switch......................................................................................................143
7.3 Cu hi v bi tp..........................................................................................................146
CHNG 8............................................................................................................................149
CU LNH VNG LP.......................................................................................................149
8.1 Cc lnh vng lp trong JavaScript...............................................................................149
8.1.1 Cu lnh for............................................................................................................149
8.1.2 Cu lnh do..while.................................................................................................151
8.1.3 Cu lnh while.......................................................................................................152
8.2 Cc lnh chuyn iu khin trong vng lp..................................................................153
8.2.1 Cu lnh label.........................................................................................................153
8.2.2 Cu lnh break.......................................................................................................153
8.2.3 Cu lnh continue...................................................................................................154
8.3 Cc lnh thao tc trn i tng...................................................................................156
8.3.1 Cu lnh forin.....................................................................................................156
8.3.2 Cu lnh with.........................................................................................................157
8.4 Cu hi v bi tp..........................................................................................................158
CHNG 9............................................................................................................................160
HM.......................................................................................................................................160
9.1 Khi nim v cc thao tc trn hm..............................................................................160
9.1.1 Khi nim v hm..................................................................................................160
9.1.2 To hm..................................................................................................................160
9.1.3 Gi hm..................................................................................................................162

HTML v JavaScript

Trang iv

VIETHANIT
9.1.4 Cu lnh return.......................................................................................................162
9.2 Mt s hm thng dng c h tr bi JavaScript.....................................................164
9.2.1 Hm eval................................................................................................................164
9.2.2 Hm isFinite...........................................................................................................164
9.2.3 Hm isNaN.............................................................................................................165
9.2.4 Cc hm parseInt v parseFloat.............................................................................165
9.2.5 Cc hm Number v String....................................................................................166
9.3 Cu hi v bi tp..........................................................................................................166
CHNG 10..........................................................................................................................169
MNG....................................................................................................................................169
10.1 Khi nim v mng v cc thao tc trn mng trong JavaScript................................169
10.1.1 Khi nim v mng..............................................................................................169
10.1.2 To mng..............................................................................................................169
10.1.3 Gn gi tr cho cc phn t mng.........................................................................169
10.1.4 Truy cp n cc phn t mng...........................................................................171
10.2 Cc phng thc ca mng.........................................................................................171
10.2.1 Phng thc concat..............................................................................................172
10.2.2 Phng thc join..................................................................................................172
10.2.3 Phng thc pop..................................................................................................174
10.2.4 Phng thc push.................................................................................................174
10.2.5 Phng thc reverse.............................................................................................174
10.2.6 Phng thc sort..................................................................................................175
10.3 Mng hai chiu............................................................................................................176
10.4 Cu hi v bi tp........................................................................................................178
CHNG 11..........................................................................................................................180
CC I TNG C BN CA JAVASCRIPT...............................................................180
11.1 i tng Math..........................................................................................................181
11.1.1 M t....................................................................................................................181
11.1.2 Cc thuc tnh ca i tng Math......................................................................182
11.1.3 Cc phng thc ca i tng Math..................................................................183
11.2 i tng String.........................................................................................................185
11.2.1 M t....................................................................................................................185
11.2.2 Cc thuc tnh ca i tng String.....................................................................186
11.2.3 Cc phng thc ca i tng String................................................................186
11.2.4 Tm kim trong mt chui...................................................................................188
11.2.5 nh v cc k t trong mt chui.......................................................................190
11.3 i tng Date...........................................................................................................192
11.3.1 M t....................................................................................................................192
11.3.2 Cc nhm phng thc ca i tng Date........................................................193
11.3.3 Cc phng thc ca i tng Date...................................................................193
11.3.3.1 Nhm phng thc get.................................................................................193
11.3.3.2 Nhm phng thc set..................................................................................194
11.3.3.3 Nhm phng thc to...................................................................................194
11.3.3.4 Nhm phng thc parse v UTC................................................................194
11.4 Cu hi v bi tp........................................................................................................195
CHNG 12..........................................................................................................................199
X L FORM V CC S KIN CHO CC PHN T TRN FORM..........................199
12.1 Gii thiu v i tng form......................................................................................199
12.1.1 M t i tng....................................................................................................199
12.1.2 Cc thuc tinh v phng thc ca i tng form............................................199
12.2 X l s kin trong JavaScript....................................................................................201

HTML v JavaScript

Trang v

VIETHANIT
12.2.1 Khi nim v s kin v trnh x l s kin........................................................201
12.2.2 Cc s kin JavaScript ph bin..........................................................................202
12.2.3 Lm vic vi trnh x l s kin..........................................................................212
12.2.3.1 Trnh x l s kin cho cc th HTML.........................................................212
12.2.3.2 Trnh x l s kin nh l nhng thuc tnh.................................................213
12.3 S dng s kin cho cc thnh phn trn form...........................................................214
12.3.1 i tng Textfield (Trng vn bn)................................................................214
12.3.2 i tng Command Button................................................................................216
12.3.3 i tng Checkbox............................................................................................217
12.3.4 i tng radio....................................................................................................219
12.3.5 i tng ComboBox (la chn)........................................................................222
12.3.6 Kim tra tnh hp l ca ni dung cc trng trn form......................................222
12.4 Cu hi v bi tp........................................................................................................227

HTML v JavaScript

Trang vi

VIETHANIT

Chng 1. Gii thiu chung

CHNG 1

GII THIU CHUNG


Trong ngnh in n trc y, ch th cho th in sp ch trong vn bn, tc gi
hay ch bt thng v cc vng trn trong bn tho v ch thch bng mt ngn ng,
tng t tc k. Ngn ng c gi l ngn ng nh du (Markup Language).
Do nhng nhu cu pht trin ca khoa hc cng ngh m ngi ta xy dng ra
mt ngn ng c tn: Ngn ng nh du tng qut (SGML - Standard Generalized
Markup Language). SGML c pht trin bi Ed Mosher, Ray Lorie v Charles F.
Goldfarb ca nhm IBM research vo nm 1969. Ban u n c tn l Generalized
Markup Language (GML), v c thit k din t cc ngn ng khc bao gm vn
phm, t vng ca chng. Nm 1986, SGML c t chc ISO (International
Standard Organisation) thu nhn lm tiu chun lu tr v trao i d liu. V sau
ny cc ngn ng nh du thit b in t, thit k Web c pht trin da vo c s
ca ngn ng nh du tng qut SGML.
1.1 Cc ngn ng nh du dng cho thit b in t
Mt s ngn ng nh du c s dng cung cp cc dch v v ni dung
n cc thit b in t nh my nhn tin, in thoi di ng, thit b v tuyn. Cc
ngn ng bao gm: Ngn ng nh du thit b cm tay, ngn ng nh du v
tuyn v ngn ng nh du siu vn bn thu nh.
1.1.1 Ngn ng nh du thit b cm tay
Ngn ng nh du thit b cm tay (HDML - Handheld Device Markup
Language) c thit k cho my nhn tin v tuyn, in thoi, t bo in t v cc
thit b cm tay ly cc thng tin t cc trang Web. HDML l mt tp hp con ca
WAP, c Openwave Systems xy dng trc khi chun WAP ra i. Cng ty
AT&T Wireless m dch v da trn HDML vo nm 1996.
HDML trc tin c to ra xy dng ni dung da trn Web cho my in
thoi di ng v cc thit b cm tay. Vo nm 1997, HDML 2.0 c tung ra cho
php ngi s dng nhn cc thng s chng khon, cc u tin tc, cc cnh bo
th in t trn my in thoi di ng.
1.1.2 Ngn ng nh du v tuyn
Ngn ng nh du v tuyn (WML - Wireless Markup Language) l mt ngn
ng da trn th c s dng trong giao thc ng dng v tuyn. WML l mt loi
vn bn XML cho php cc cng c XML v HTML s dng pht trin cc ng
dng WML. WML c pht trin t HDML ca Openwave nhng n khng phi l
mt siu tp hp ca HDML, cc c trng HDML khng xut hin trong WML.
Tiu chun WML chnh thng c pht trin v c din n WAP duy tr.
WML c bn lnh vc chc nng quan trng: mu v hin th k t; t chc, nh v
th v tp; kt ni v nh v lin th; th hin thng s chui v qun l trnh trng
thi.
1.1.3 Ngn ng nh du siu vn bn thu nh
HTML v JavaScript

Trang 1

VIETHANIT

Chng 1. Gii thiu chung

Ngn ng nh du siu vn bn thu nh (cHTML - Compact HTML) l mt tp


hp con ca HTML cho in thoi t bo v PDA, c cng ty NTT Docomo pht
trin cho h thng v tuyn i-Mode Nht Bn. cHTML c thit k cho vic hin
th mn hnh v h tr mt s chc nng ca cc thit b cm tay.
V d, cHTML h tr cc nt bm di chuyn khi con chut khng c s dng.
1.2 Cc ngn ng nh du vn bn ng dng Web
1.1

Ngn ng nh du siu vn bn

Ngn ng nh du siu vn bn (HTML - Hyper Text Markup Language) l


mt ngn ng nh du c thit k to ra cc trang Web, trong cc thng tin
c trnh by trn World Wide Web. HTML l mt ng dng n gin ca SGML,
c s dng trong cc t chc cng ngh truyn thng. HTML gi y tr thnh
mt chun Internet do t chc World Wide Web Consortium (W3C) duy tr. Phin bn
mi nht ca n hin l HTML 4.01. Tuy nhin, HTML hin khng cn c pht
trin tip, ngi ta thay th n bng XHTML.
HTML tn ti nh l cc tp tin vn bn cha trn cc my tnh ni vo mng
Internet. Cc file ny cha th nh du, l cc ch th cho chng trnh v cch hin
th, x l vn bn dng thun ty. Cc file ny thng c truyn i trn mng
internet thng qua giao thc mng HTTP, sau th phn HTML s c hin th
thng qua mt trnh duyt web, cc trnh duyt m nhim cng vic c vn bn ca
trang cho ngi s dng, phn mm c email, hay mt thit b khng dy nh in
thoi di ng.
1.2

Ngn ng nh du m rng

Ngn ng nh du m rng (XML eXtend Markup Language) kh ging vi


HTML, hai ngn ng ny c cng lut c php. Tuy nhin, tnh linh hot ca XML
cho php bn to v s dng tp th v tp thuc tnh ring nhn bit cc phn t
cu trc v ni dung ti liu.
XML khng ch l ngn ng nh du, n cn c phng php nh ra ni dung
ti liu, tng t nh HTML nh hnh thc ti liu trn Web. Vi HTML, ngi thit
k nh du vn bn, hnh nh cng cc thnh phn khc ca trang Web bng tp th
m khng lin quan ti ngha ti liu, XML khng ch ch nh hnh thc m cn c
ni dung ti liu.
XML c xem l cng c mnh hn HTML do n mang li thng tin y v
d liu. Mt s t chc chuyn mn xy dng ngn ng XML ring, bao gm cc
th nhn din c t cng nghip. V d: Ngnh cng nghip ha hc pht trin
Chemical Markup Language (CML).
XML gip bn to ti liu c lp vi server. Ti liu c nm ngay trn my
khi ti liu c ti v tip tc s dng khng ph thuc vo Server. Mt khc XML
mang tnh cht ch theo tiu chun ca ngn ng nh du vn bn.
1.3

Ngn ng XHTML

XHTML l s kt hp gia HTML 4.0 v XML 1.0 thnh mt nh dng ring


cho Web. XHTML cho php HTML m rng bng cc th s hu. XHTML c m
ha cht ch hn HTML v phi tun th nhiu quy tc cu trc hn.
HTML v JavaScript

Trang 2

VIETHANIT

Chng 1. Gii thiu chung

XHTML 1.0 c thit k nhm mc ch to thi quen tt cho ngi xy dng


trang Web. Bi v c rt nhiu ngi trnh by trang Web theo cch thc ca mt trnh
duyt th hin m khng quan tm ti s dng cc HTML chun, iu ny s gy ra
hai tc hi: Th nht l kt qu hin th s ph thuc vo trnh duyt ca ngi s
dng, th hai l to ra thi quen khng tt khi thit k, l ch quan tm ti trnh
duyt th hin mc ch ca mnh m khng quan tm chun ca n.
S dng XHTML chun l nhng bc u tin sn sng xy dng v trin
khai XML v vic xy dng XML i hi phi cht ch hn HTML v XML khng
chp nhn mt li c php trong ti liu.
C hai l do s dng XHTML cho Website:
- Xy dng cc trang web ng mt cch tin cy, da vo c php cht ch. D
liu cho cc trang Web ng thng c khai thc t c s d liu, cc file
hoc cc ngun khc v c hin th theo nhng template ph thuc vo yu
cu ca ngi s dng. Vic xy dng mt cch cu th s khng ch gy ra
nhng li trong vic chn d liu vo nhng v tr trong trang Web m c th gy
ra nhng li tr v pha ngi dng.
- Vic xy dng trang Web bng XHTML s nhanh hn bi trnh duyt s
khng mt nhiu thi gian dch, v sa li .
1.4

Ngn ng DHTML

Khi Microsoft v Netscape a ra Version 4 ca cc trnh duyt, th nhng nh


pht trin Web c mt la chn mi: Dynamic HTML (DHTML). Trong thc t n l
mt tp hp gm HTML, Cascading Style Sheets (CSS), v JavaScript. Tp hp cc
cng ngh trn cho php cc nh pht trin sa i ni dung v cu trc ca mt trang
Web mt cch nhanh chng.
DHTML yu cu s h tr t cc trnh duyt. Mc d c Internet Explorer v
Netscape u h tr DHTML, nhng cch th hin ca chng l khc nhau, v vy cc
nh pht trin cn phi bit c loi trnh duyt no m pha client dng. DHTML
tht s l mt bc tin mi. Hin nay DHTML vn ang trn con ng pht trin
mnh.
DHTML gip tng cng tnh tng tc ca cc i tng iu khin trong trang
HTML tnh bng cch cho php ngi dng VBscript hoc Javascript iu khin
chng. V d mt th image nhng nh vo trang web c th nhn bit khi ngi
dng di chuyn chut trn n bng cch ci t hm x l s kin OnMouseOver, khi
thng qua nhng x l thch hp s lm i tng hnh nh tr nn sng ng hn.
Nhn chung, bn cnh nhng m rng nh to nhng hiu ng MouseOver,
chui ch di chuyn ng, thay i mu sc,... Cc kha cnh bo mt ca DHTML
tng t nh HTML v n da trn nn tng HTML.
1.3 Ngn ng nh du siu vn bn (HTML)
1.1

Gii thiu HTML

Ngn ng nh du siu vn bn ch r mt trang Web c hin th nh th no


trong mt trnh duyt. S dng cc th v cc phn t HTML, bn c th:

iu khin hnh thc v ni dung ca trang.

HTML v JavaScript

Trang 3

VIETHANIT

Chng 1. Gii thiu chung

Xut bn cc ti liu trc tuyn v truy xut thng tin trc tuyn bng
cch s dng cc lin kt c chn vo ti liu HTML.

To cc biu mu trc tuyn thu thp thng tin v ngi dng, qun l
cc giao dch
Chn cc i tng nh audio clip, video clip, cc thnh phn ActiveX v
cc Java Applet vo ti liu HTML.
Ti liu HTML to thnh m ngun ca trang Web. Khi c xem trn trnh son
tho, ti liu ny l mt chui cc th v cc phn t, m chng xc nh trang Web
hin th nh th no. Trnh duyt c cc file c ui .htm hay .html v hin th trang
Web theo cc lnh c trong . V d, theo c php HTML di y, trnh duyt s
hin th thng ip My first HTML document
V d 1.1:
<HTML>
<HEAD>
<TITLE>Welcome to HTML </TITLE>
</HEAD>
<BODY>
<H3>My first HTML document </H3>
</BODY>
</HTML>

Kt qu:

Hnh 1.1: Kt qu v d 1.1


1.2

c im ca HTML

HTML v JavaScript

Trang 4

VIETHANIT

Chng 1. Gii thiu chung

Ti liu HTML c hin th trn trnh duyt. Vy trnh duyt l g? Trnh duyt
l mt ng dng c ci t trn my khch. Trnh duyt c m ngun HTML v
hin th trang theo cc lnh trong .
Trnh duyt c s dng xem cc trang web v iu hng. Trnh duyt
c bit n sm nht l Mosaie, c pht trin bi trung tm ng dng siu my
tnh quc gia (NCSA).
Ngy nay, c nhiu trnh duyt c s dng trn Internet. Netscape Navigator
v Microsoft Internet Explorer l hai trnh duyt c s dng ph bin. i vi ngi
dng, trnh duyt d s dng bi v n c giao din ho vi vic tr v kch chut.
to mt ti liu ngun, bn phi cn mt trnh son tho HTML. Ngy nay, c
nhiu trnh son tho ang c s dng: Microsoft FrontPage l mt cng c tng
hp c dng to, thit k v hiu chnh cc trang web. Chng ta cng c th thm
vn bn, hnh nh, bng v nhng thnh phn HTML khc vo trang. Thm vo ,
mt biu mu cng c th c to ra bng FrontPage. Mt khi chng ta to ra giao
din cho trang web, FrontPage t ng to m HTML cn thit. Chng ta cng c th
dng Notepad to ti liu HTML. xem c ti liu trn trnh duyt, bn phi
lu n vi ui l .htm hay .html.
Cc lnh HTML c gi l cc th. Cc th ny c dng iu khin ni
dung v hnh thc trnh by ca ti liu HTML. Th m (<>) v th ng (</>),
ch ra s bt u v kt thc ca mt lnh HTML.
V d, th HTML c s dng nh du s bt u v kt thc ca ti liu
HTML.
<HTML>

</HTML>

Ch rng cc th ko phn bit ch hoa v ch thng, v th bn c th sd


<html> thay cho <HTML>
Th HTML bao gm:
<ELEMENT ATTRIBUTE = value>

ELEMENT: nhn dng th


ATTRIBUTE: M t th
value: gi tr c thit lp cho thuc tnh.
V d, <BODY BGCOLOR = lavender>
Trong v d trn, BODY l phn t, BGCOLOR l thuc tnh mu nn v
lavender l gi tr. Khi c php HTML c thc hin, mu nn cho c trang c
thit lp l mu lavender.
1.3

Cu trc ca mt ti liu HTML


Mt ti liu HTML gm 3 phn c bn:

HTML v JavaScript

Trang 5

VIETHANIT

Chng 1. Gii thiu chung

Phn HTML: Mi ti liu HTML phi bt u bng th m <HTML> v


kt thc bng th ng </HTML>. Cp th ny bo cho trnh duyt bit
ni dung gia chng l mt ti liu HTML

Phn u: Phn u bt u bng th <HEAD> v kt thc bi th


</HEAD>. Phn ny cha tiu hin th trn thanh iu hng ca trang
Web. Tiu l phn kh quan trng. Cc mc c dng nh du
mt Website, trnh duyt s dng tiu lu tr cc mc ny. Do ,
khi ngi dng tm kim thng tin, tiu ca trang Web cung cp t
kho chnh yu cho vic tm kim.

Phn thn: Phn ny nm sau phn tiu . Phn thn bao gm vn bn,
hnh nh v cc lin kt m bn mun hin th trn trang Web ca mnh.
Phn thn bt u bng th <BODY> v kt thc bng th </BODY>
V d 1.2:
<HTML>
<HEAD>
<TITLE>Welcome to the world of HTML </TITLE>
</HEAD>
<BODY>
<P> This is going to be real fun </P>
</BODY>
</HTML>

Kt qu:

Hnh 1.2: Kt qu v d 1.2


1.4

Qui trnh to mt ti liu HTML

HTML v JavaScript

Trang 6

VIETHANIT

Chng 1. Gii thiu chung

nh hnh trang Web


thit k mt trang Web, trc tin chng ta cn phn tch v nh hng mc
ch ca trang Web. iu ny gip ta c ci nhn tng qut v trang Web v s thun
li cho vic t chc hay nng cp trang Web sau ny.
Nhng yu cu cn phi nghin cu.
-

Hnh dung ni dung trang Web bn cn to, hng ti mt ch chung


cho trang Web vi nhng chc nng v nhim v g?

t mnh vo v tr ngi xem, khch hng. Lm th no ni dung


trnh by th hin tt nht. V d bn c th thm vo m thanh, hnh nh minh ho
cho sinh ng, b cc ni dung, trnh by sao cho hp l nht.
T chc tp tin
Cc yu t lm nn trang Web l cc tp tin, do vy vic t chc tp tin l rt
quan trng, n gip ta thun li trong vic lu tr tm kim cc on m hay c s d
liu ca trang Web.
Chia cc th mc trung tm theo cu trc ca trang Web, bn c th to mt th
mc ring r cho ti liu HTML: cc hnh nh, c s d liu, cc tp tin bn ngoi,
Trong trng hp trang Web ln vi nhiu trang, bn c th chia thnh nhiu mc hay
chng, chuyn cc hnh nh n th mc c lp.

To trang Web

to mt trang Web HTML chng ta khng cn mt cng c c bit no, ch


cn s dng bt k b son tho vn bn no nh Wordpad hay Notepad, c cung
cp km theo h phn mm Windows.
Da trn qui nh v cu trc ca mt trang Web, kt hp vi cc th cn thit
vit ra trang Web ca mnh.
Lu trang Web
Nu ta s dng mt trnh x l vn bn n gin to trang Web bn s khng
c vn g khi lu trang Web. Nhng khi ta dng mt trnh x l vn bn phc tp
th bn phi lu nhng thng tin bn ngoi m chng trnh s nh km vo tp tin
ca bn. m bo mi trnh duyt s nhn din c tp tin , bn phi t phi
t ui ca tp tin ng.
-

Mi tp tin c lu phn ui ca n c dng .htm hay .html

Chn th mc thch hp lu trang Web.

Xem trang Web qua trnh duyt


Khi to ra trang Web chng ta cn xem n nh th no qua mt trnh duyt
thng thng l Internet Explorer.

HTML v JavaScript

Trang 7

VIETHANIT

Chng 2. Cc th c bn trong HTML

CHNG 2

CC TH C BN TRONG HTML
2.1 Th v cc thuc tnh ca th

Th l nhng cu lnh c vit gia du nh hn (<) v du ln hn (>) hay


cn gi l du mc nhn, quy nh cch hin th vn bn. C 2 loi th: Th m v th
ng, on vn bn hin th nm gia hai th ny, c th m v th ng u c vit
nh nhau nhng th ng c thm mt du / ( du xo ti) pha trc.
Vn bn
ni dung

Th m

Th ng

<B>Trang Web</B>
Mc nhn

Du xo ti

Hnh 2.1: Phn tch mt th HTML


Thuc tnh ca th
Thuc tnh tc ng ln ni dung vn bn. Thuc tnh c nhp vo gia th v
du ln hn cui cng. Thng th chng ta dng nhiu thuc tnh trong mt th. Cc
thuc tnh c vit khng cn th t v cch nhau mt khong trng.
Thuc tnh

<TABLE BORDER>
Th

Hnh 2.2: Th c th thm vo cc thuc tnh theo nh dng ca ngi vit


Thuc tnh thng i km vi cc gi tr. Trong mt s trng hp, c th la
chn gia cc gi tr. V d: thuc tnh CLEAR trong th Br c th nhn c cc gi
tr left (tri), right (phi), hay all (c hai bn). Tt c cc gi tr khc c a vo s
khng c chp nhn.
Gi tr ca
CLEAR

<BR CLEAR= left>


Hnh 2.3 : Th BR ch chp nhn nhng thuc tnh vi mt gi tr nh sn
HTML v JavaScript

Trang 8

VIETHANIT

Chng 2. Cc th c bn trong HTML

Cc thuc tnh khc cn xt n dng gi tr m chng c th chp nhn. V d:


thuc tnh HSPACE trong th IMG ch chp nhn cc s nguyn lm gi tr.

SRC-mt thuc tnh ca IMG

Gi tr ca SRC

<IMG SRC= image.gif HSPACE=6>


HSPACE cng l mt thuc
tnh ca IMG

Gi tr ca HSPACE

Hnh 2.4: Th c th thm nhiu thuc tnh khc nhau


Gi tr c t gia hai du nhy( ). C th b qua du nhy nu gi tr ch
cha ch (A-Z, a-z), s (0-9), du gch ni(_) hoc du chm (.).
Th lng nhau
Th lng nhau dng chnh sa cch trnh by ni dung trang, v d nh dng
ch nghing cho mt vi ch quan trng trong mc.
Lu :.
Trt t cc th lng nhau: Th c m u tin s l th ng cui cng.
V d:

<B> Phn 1:<I> Ni dung</I></B>

Kt qu l: Phn 1: Ni dung
2.2 Cc th c bn trong HTML
2.2.1

Th xc nh vn bn HTML
C php:
<html> Cc ni dung ca vn bn HTML </html>

2.2.2

Th xc nh phn u cho trang HTML


C php:
<head> Phn u vn bn HTML </head>

Th xc nh phn u ca vn bn HTML, thng thng th th to tiu


trang c t lng vo trong th ny.
2.2.3

Th xc nh tiu cho vn bn HTML


C php:
<title> Ni dung tiu ca vn bn HTML</title>

2.2.4

Th xc nh phn thn cho trang HTML


C php:

HTML v JavaScript

Trang 9

VIETHANIT

Chng 2. Cc th c bn trong HTML

<body> Phn thn vn bn HTML </body>

Tt c ni dung ca trang web c nm gia hai th ny.


V d 2.1:
<HTML>
<HEAD>
<TITLE> tieu de </TITLE>
</HEAD>
<BODY>
B cc ni dung ca trang web
</BODY>
</HTML>

Kt qu:

Hnh 2.5: Th Body xc nh phn thn ca trang web


2.2.5

Th xc nh cc danh mc trang web

Cc danh mc thng c hin th to v m hn phn bit chng vi cc


phn cn li ca vn bn. Chng ta c th hin th cc danh mc ny theo mt trong
su kch thc t H1 n H6 nh trong v d sau:
V d 2.2:
<HTML>
<HEAD>
<TITLE> Introduction to HTML </TITLE>
</HEAD>
<H1> Introduction to HTML </H1>
<H2> Introduction to HTML </H2>
<H3> Introduction to HTML </H3>
<H4> Introduction to HTML </H4>

HTML v JavaScript

Trang 10

VIETHANIT

Chng 2. Cc th c bn trong HTML

<H5> Introduction to HTML </H5>


<H6> Introduction to HTML </H6>
</HTML>

Kt qu:

Hnh 2.6: Minh ho th xc nh cc danh mc cho trang web


2.2.6

Th to danh sch

Danh sch dng nhm d liu mt cch logic. Chng ta c th thm cc danh
sch vo ti liu HTML nhm cc thng tin c lin quan li vi nhau.
V d:
Roses
Sunflowers
Oranges
Apples
Orchids
Mangoes
C th c nhm thnh:
HTML v JavaScript

Trang 11

VIETHANIT

Chng 2. Cc th c bn trong HTML

Fruits
Apples
Oranges
Mangoes
Flowers
Roses
Sunflowers
Orchids
Cc loi danh sch m bn c th chn vo ti liu HTML l:
Danh sch khng th t
Danh sch c th t
Danh sch nh ngha
2.2.6.1 Th to danh sch khng th t

y l loi danh sch n gin nht m bn c th thm vo ti liu HTML.


Danh sch khng th t l mt bulleted list. Cc mc c bt u bng du chm
trn bullet. Danh sch khng th t c nm trong cp th <UL> </UL>. Mi
mc trong danh sch c nh du bng th <LI>. LI c vit tt ca t List Item.
Th kt thc </LI> l tu chn (khng bt buc).
V d 2.3:
<HTML>
<HEAD>
<TITLE> Tao danh sach khong thu tu </TITLE>
</HEAD>
<BODY>
<UL>
<LI> Monday
<LI> Tuesday
<LI> Wednesday
<LI> Thursday
<LI> Friday
</UL>
</BODY>
</HTML>

HTML v JavaScript

Trang 12

VIETHANIT

Chng 2. Cc th c bn trong HTML

Kt qu:

Hnh 2.7: Minh ho th to danh sch khng th t trong trang web


Ngoi ra, chng ta c th to ra cc danh sch lng nhau m t nhm con ca
thng tin.
V d 2.4:
<HTML>
<HEAD>
<TITLE> Tao danh sach long nhau </TITLE>
</HEAD>
<BODY>
<UL>
<LI> Monday
<UL>
<LI> Introduction to HTML
<LI> Creating Lists
</UL>
<LI> Tuesday
<UL>
<LI> Creating Tables
<LI> Inserting Images
</UL>

HTML v JavaScript

Trang 13

VIETHANIT

Chng 2. Cc th c bn trong HTML


<LI> Wednesday
<LI> Thursday
<LI> Friday
</UL>

</BODY>
</HTML>

Kt qu:

Hnh 2.8: Minh ho cch to danh sch lng nhau


2.2.6.2 Th to danh sch c th t

Danh sch c th t nm trong cp th <OL> </OL>. Danh sch c th t


cng hin th cc mc danh sch. S khc nhau l cc mc danh sch hin th theo th
t c to ra mt cch t ng.
V d 2.5:
<HTML>
<HEAD>
<TITLE> Tao danh sach co thu tu </TITLE>
</HEAD>
<BODY>
<OL>

HTML v JavaScript

Trang 14

VIETHANIT

Chng 2. Cc th c bn trong HTML


<LI> Monday
<LI> Tuesday
<LI> Wednesday
<LI> Thursday
<LI> Friday
</OL>

</BODY>
</HTML>

Kt qu:

Hnh 2.9: Minh ho cch to danh sch c th t


Chng ta c th t cc thuc tnh nh ngha h thng s m c to ra cho
cc mc danh sch.
Bng 2.1: Cc thuc tnh dng nh ngha h thng s
Thuc tnh

Th

Upper Roman

<LI TYPE = I>

Lower Roman

<LI TYPE = i>

Uppercase

<LI TYPE = A>

Lowercase

<LI TYPE = a>

Bt u vi mt s khc ln hn 1

<OL START = n>

Trong thuc tnh START xc nh s khi to ban u ca danh sch.

HTML v JavaScript

Trang 15

VIETHANIT

Chng 2. Cc th c bn trong HTML

V d 2.6:
<HTML>
<HEAD>
<TITLE> Danh sach co thu tu </TITLE>
</HEAD>
<BODY>
<OL>
<LI> Monday
<OL>
<LI TYPE = i> Introduction to HTML
<LI TYPE = i> Creating Lists
</OL>
<LI> Tuesday
<OL>
<LI TYPE = A> Creating Tables
<LI TYPE = A> Inserting Images
</OL>
<LI> Wednesday
<OL START = 5>
<LI> Creating forms
<LI> Working with Frames
</OL>
<LI> Thursday
<LI> Friday
</UL>
</BODY>
</HTML>

HTML v JavaScript

Trang 16

VIETHANIT

Chng 2. Cc th c bn trong HTML

Kt qu:

Hnh 2.10: Minh ho cch to danh sch c th t


Chng ta c th lng cc loi danh sch li vi nhau. C th lng cc danh sch
c th t vo trong cc danh sch khng th t v ngc li.
V d 2.7:
<HTML>
<HEAD>
<TITLE> Long cac loai danh sach </TITLE>
</HEAD>
<BODY>
<UL>
<LI> Monday
<OL>
<LI TYPE = i> Introduction to HTML
<LI TYPE = i> Creating Lists
</OL>
<LI> Tuesday
<OL>
<LI TYPE = a> Creating Tables
<LI TYPE = a> Inserting Images
</OL>

HTML v JavaScript

Trang 17

VIETHANIT

Chng 2. Cc th c bn trong HTML


<LI> Wednesday
<LI> Thursday
<LI> Friday
</UL>

</BODY>
</HTML>

Kt qu:

Hnh 2.11: Lng cc loi danh sch


2.2.6.3 Th to danh sch nh ngha
Danh sch nh ngha c dng to ra mt danh sch cc iu khon v cc
nh ngha ca chng. Danh sch nh ngha nm trong cp th <DL> </DL>. Th
<DT> c dng ch ra iu khon cn th <DD> c dng ch ra nh ngha
cho iu khon .
V d 2.8:
<HTML>
<HEAD>
<TITLE> Danh sach dinh nghia </TITLE>
</HEAD>
<BODY>
<DL>
<DT> Sunday

HTML v JavaScript

Trang 18

VIETHANIT

Chng 2. Cc th c bn trong HTML


<DD> The first day of the week
<DT> HTML
<DD> Hyper Text Markup Language
<DT> Internet
<DD> A network of networks
<DT> TCP/IP
<DD> Transmission Control Protocol / Internet Protocol
</DL>

</BODY>
</HTML>

Kt qu:

Hnh 2.12: Danh sch nh ngha


2.2.7

Th xc nh vn bn trang web
C php:
<p> Ni dung ca vn bn </p>

Khi cn trnh by mt ni dung vn bn no , chng ta t cc vn bn nm


trong th p.
2.2.8

Th to ng thng

HTML v JavaScript

Trang 19

VIETHANIT

Chng 2. Cc th c bn trong HTML

Th <HR> (horizontal rule) c dng k mt ng thng trn trang. Nhng


thuc tnh sau gip iu khin cc ng thng ny. N ch c th bt u, khng c
th kt thc v khng c ni dung.
Bng 2.2: Cc thuc tnh ca th HR
Thuc tnh

M t

align

Ch nh v tr ca ng thng. Chng ta c th
canh l center (gia) hoc right (phi) hoc left
(tri). V d: align=center

width

Ch di ca ng thng. N c th xc nh
bng cc pixel hoc tnh theo phn trm. Mc
nh l 100%, ngha l ton b b ngang ca ti
liu.

size

Ch dy ca ng thng v c xc nh
bng cc pixel.

noshade

Ch ng c hin th bng mu c thay v c


bng.

V d 2.9:
<HTML>
<HEAD>
<TITLE> Ke duong thang </TITLE>
</HEAD>
<BODY>
<H3> My first HTML document </H3>
<HR noshade size = 5 align = center width = 50%>
<HR size = 15 align = left width = 80%>
<HR>
<P> This is going to be real fun
</BODY>
</HTML>

HTML v JavaScript

Trang 20

VIETHANIT

Chng 2. Cc th c bn trong HTML

Kt qu:

Hnh 2.13: Minh ho th to ng thng


2.2.9

Th xc nh dng ch thch

C php:
<!-->

: Xc nh mt vng ch thch

Khi ch thch cho phn ngun ca trang web, chng ta s dng th ny to ra


vng ch thch m khng cho php hin th trn ni dung ca trang web.
2.3 Cc th vn dng vi vn bn
2.3.1

Th vn dng cho kiu ch

2.3.1.1 Lm ch m
in m mt on vn bn chng ta c cc th sau thc hin.
C php:
<b> Nhp vn bn vo bn mun lm m</b>

hoc
<Strong> Nhp on vn bn bn mun lm m</Strong>

V d 2.10:
<HTML>
<HEAD>
<TITLE> Chu dam </TITLE>

HTML v JavaScript

Trang 21

VIETHANIT

Chng 2. Cc th c bn trong HTML

</HEAD>
<BODY>
<B> This is a bold line text
</BODY>
</HTML>

Kt qu:

Hnh 2.14: Hin th ni dung dng ch m trn trnh duyt


2.3.1.2 Lm ch in nghing
in nghing mt on vn bn ta dng th <i> nh sau
C php:
<i> Nhp vn bn vo bn mun in nghing </i>

V d 2.11:
<HTML>
<HEAD>
<TITLE> Chu nghieng </TITLE>
</HEAD>
<BODY>
<i> This is an italic line text
</BODY>
</HTML>

HTML v JavaScript

Trang 22

VIETHANIT

Chng 2. Cc th c bn trong HTML

Kt qu:

Hnh 2.15: Hin th ni dung dng ch nghing trn trnh duyt


2.3.1.3 Thay i kch thc ch
thay i c ch tng i ca mt t hay mt nhm t so vi cc vn bn
xung quanh, ta dng c php sau:
C php:
<big> Nhp vn bn vo bn mun tng c ch ln hn </big>
<small> Nhp vn bn bn mun gim c ch b hn <small>

2.3.1.4 To dng ch thp


to cc dng ch thp tng ng vi ch s di ta dng th Sub sau y.
C php:
<sub> Nhp ch hay k hiu bn mun chnh thp </sub>

V d 2.12:
<HTML>
<HEAD>
<TITLE> Chu thap </TITLE>
</HEAD>
<BODY>
<B> Day la dong <sub> chu thap </sub>
</BODY>
</HTML>

HTML v JavaScript

Trang 23

VIETHANIT

Chng 2. Cc th c bn trong HTML

Kt qu:

Hnh 2.16: Minh ho th sub to dng ch thp


2.3.1.5 To dng ch cao
to dng ch cao tng ng vi ch s trn ta dng th sup nh sau:
C php:
<sup> Nhp ch hay k hiu bn mun chnh cao </sup>

V d 2.13:
<HTML>
<HEAD>
<TITLE> Chu thap </TITLE>
</HEAD>
<BODY>
<B> Day la dong <sup> chu cao </sup>
</BODY>
</HTML>

HTML v JavaScript

Trang 24

VIETHANIT

Chng 2. Cc th c bn trong HTML

Kt qu:

Hnh 2.17: Minh ho th sup to dng ch cao


2.3.1.6 Gch ngang v gch di ch
C php:
<Strike> Nhp vn bn cn gch b </Strike>
<u> Nhp on vn bn cn gch di </u>

2.3.1.7 To ch dng ring


nhn mnh hay lm ni bt on vn bn ta dng th sau.
C php:
<em> on vn bn cn nhn mnh </em>

2.3.1.8 To dng ch b xo
C php:
<del> Nhp vo on vn bn cn xo </del>
<s> Nhp on vn bn cn xo </s>

2.3.1.9 To dng ch chn vo


C php:
<ins> nh dng ch mi chn thm </ins>
2.3.2

Th vn dng cho hiu ng font ch

2.3.2.1 Chn font ch cho vn bn


chn font ch cho on vn bn cn trnh by ta dng th font nh sau
C php:

HTML v JavaScript

Trang 25

VIETHANIT

Chng 2. Cc th c bn trong HTML

<font face =fontname1, fontname2> nhp vn bn cn hin th vn bn


chn</font>

fontname2 l kiu ch u tin th 2 nu nh ngi truy cp khng ci t kiu


ch th nht. Mi tn kiu ch phi c ngn cch vi tn ng trc bng du
phy. C th thm fontname3, fontname4 cho cc kiu ch u tin tip theo.
V d: <Font face =Times new roman, Arial> Vn bn cn nh dng bi font
ch</font>.
fontname1 l kiu ch c chn u tin. G tn y ca kiu ch m ta
mun.
2.3.2.2 i c ch vn bn
Khi cn thay i c mt s ch, chng ta c th lm theo hai cch: chn c ch
ngay hay iu chnh cho vng ch c to hn hay nh hn cc ch xung quanh.
C php:
<font size= n> nhp vn bn m bn cn iu chnh c ch </font>

Gi tr ca n nhn t 1 n 7.
V d 2.14:
<HTML>
<HEAD>
<TITLE> Chon font chu </TITLE>
</HEAD>
<BODY>
<font face = Arial, size = 3> This is text set by Arial font </font>
<p>
<font face = Times new roman, size = 3> This is text set by Times new
roman font </font>
</BODY>
</HTML>

Kt qu:

HTML v JavaScript

Trang 26

VIETHANIT

Chng 2. Cc th c bn trong HTML


Hnh 2.18: Minh ho th font

2.3.2.3 Chn c ch mc nh.


Khi mun thng nht mt c ch nht nh trn trang Web, ta thng s dng
th sau y.
C php:
<basefont size= n>

n nhn gi tr t 1 n 7, c ch mc nh l 3.
2.3.2.4 i mu ch
Mt trong nhng cch lm ni bt vn bn l i mu chng. Bn c th i mt
phn vn bn thnh thnh mu khc v phn cn li l mu en.
C php:
<font color = #rrggbb> Nhp vn bn bn mun i mu </font>

Trong : rrggbb l s thp lc phn biu hin mu mong mun, rr l gi tr


thp lc phn ginh cho mu , gg cho xanh l cy, bb cho xanh dng.
V d:
<FONT COLOR = 308F9E> Tng ng R l 48 (h 16=30), G l 148 (h
16=8F), v B l 158 (h 16=9E) do gi tr trong h thp lc phn tng ng l
308F9E. Tuy nhin ta c th thay i cc gi tr R, G, B trong bng mu c cc
gi tr mu khc nhau, hoc l:
<font color= color> Nhp vn bn bn mun i mu </font>

color l 1 trong 16 mu nh sn.


V d:
<FONT COLOR= Red> , on vn bn c tc ng bi th s c mu .
2.3.2.5 Lm ch nhp nhy
to ra cc hiu ng v ch nh nhp nhy ta c th dng vi th sau
C php:
<blink> Nhp on vn bn cn nhp nhy </blink>
2.4 Th vn dng trnh by trang Web
2.4.1

La chn mu nn

Chng ta c th thm mu vo trang v vo cc phn t trong trang. COLOR l


thuc tnh c th s dng vi nhiu phn t nh phn t FONT v BODY.
V d 2.15:
<HTML>
<HEAD>
<TITLE> Su dung mau nen </TITLE>
</HEAD>

HTML v JavaScript

Trang 27

VIETHANIT

Chng 2. Cc th c bn trong HTML

<BODY BGCOLOR=lavender>
<H2> <FONT COLOR=LIMEGREEN> Welcome to HTML </FONT>
</H2>
<P> <FONT COLOR=RED> This is good fun </FONT> </P>
</BODY>
</HTML>

Kt qu:

Hnh 2.19: S dng mu nn


C 3 kiu mu chnh: , xanh v xanh da tri. Mi mu chnh c xem nh
mt b hai s ca h 16.
#RRGGBB
S thp lc phn 00 ch 0% ca mu trong khi s thp lc phn FF ch 100%
ca mu. Gi tr cui cng l mt m su ch s ch mu.
Bng 2.3: Bng m mt s mu
M thp lc phn

2.4.2

Mu

#FF0000

Red

#00FF00

Green

#0000FF

Blue

#000000

Black

#FFFFFF

White

La chn hnh nh lm nn

Chng ta c th dng hnh nh lm nn cho ton b trang. Hnh nh phi ph hp


vi ni dung trang v lm cho trang thm hp dn.

HTML v JavaScript

Trang 28

VIETHANIT

Chng 2. Cc th c bn trong HTML

C php:
< body background=bgimagine.jpg bgproperties=fixed >

bgimagine.gif l a ch hnh nh .
bgproperties=fixed chnh hnh nh thnh m bt ng, ch dng trong
Internet Explorer.
V d 2.16:
<HTML>
<HEAD>
<TITLE> nen </TITLE>
</HEAD>
<BODY BGCOLOR = #808080 background = nen.jpg bgpropertie =
fixed>
</BODY>
</HTML>

Kt qu:

Hnh 2.20: S dng hnh nn


2.4.3

Chnh l cho trang Web

cn l cho ni dung trang, ta c th thay i, iu chnh khong cch cho


ph hp vi yu cu thc t bng cch dng cc thuc tnh ca th BODY nh sau:
C php:
<BODY LEFTMARGIN=x TOPMARGIN=y cc thuc tnh khc>

Vi x l rng n v pixel ca l tri, y l khong cch gia u ni dung v


nh ca s.
2.4.4

To on vn bn

HTML v JavaScript

Trang 29

VIETHANIT

Chng 2. Cc th c bn trong HTML

Khi vit mt bi bo hay mt bi lun, bn nhm ni dung thnh mt lot cc


on. Mc ch l nhm cc tng logic li vi nhau v p dng mt s nh dng
cho ni dung. Trong mt ti liu HTML, ni dung c th c nhm thnh cc on.
Th on <P> c s dng nh du s bt u ca mt on mi.
Th ng </P> l khng bt buc. Th <P> k tip s t ng bt u mt on
mi.
V d 2.17:
<HTML>
<HEAD>
<TITLE> Tao doan </TITLE>
</HEAD>
<BODY BGCOLOR = lavender>
<P> This is going to be real fun
<P> Another paragraph element
</BODY>
</HTML>

Kt qu:

Hnh 2.21: To cc on vi th <P>


2.4.5

Ngt on

Khi to mt on mi vi th P, hu ht trnh duyt chn thm mt khong trng


ln gia chng. bt u on mi m khng c khong trng, hy s dng th BR
ngt hng.
C php:
<BR> Xc nh v tr cn xung dng, khng cn th BR ng.

HTML v JavaScript

Trang 30

VIETHANIT

Chng 2. Cc th c bn trong HTML

Tuy nhin bn c th dng nhiu th BR to ra khong cch gia cc dng


hay cc on.
2.5 Mt s th c bit khc

Th lm vic vi siu lin kt

2.5.1

Siu lin kt l mt phn t bn trong ti liu m lin kt n mt v tr khc


trong cng ti liu hoc n mt ti liu hon ton khc. Chng hn, khi ta kch vo
siu lin kt s nhy n lin kt cn n. Cc siu lin kt l thnh phn quan trng
nht ca h thng siu vn bn.
2.5.1.1 Gii thiu siu lin kt v URL

Kh nng chnh ca HTML l h tr siu lin kt. Mt siu lin kt, hay ni ngn
gn l mt lin kt, l s kt ni n ti liu hay file khc ( ho, m thanh, video)
hoc ngay c n mt phn khc trong cng ti liu . Khi kch vo siu lin kt,
ngi dng c a n a ch URL m chng ta ch r trong lin kt.
Nh vy, vi siu lin kt, chng ta c th lin kt n:
Mt phn khc trong cng ti liu.
Mt ti liu khc
Mt phn trong ti liu khc
Cc file khc (hnh nh, m thanh, trch on video)
V tr hoc my ch khc
Cc lin kt c th l lin kt trong hoc lin kt ngoi. Lin kt trong l lin kt
ni n cc phn khc trong cng ti liu hoc cng mt website. Lin kt ngoi l lin
kt kt ni n cc trang trn cc website khc hoc my ch khc.
to siu lin kt, chng ta cn phi xc nh hai thnh phn:
1. a ch y hoc URL ca file c kt ni
2. im nng cung cp cho lin kt. im nng ny c th l mt dng vn bn,
thm ch l mt nh.
Khi ngi dng kch vo im nng, trnh duyt c a ch c ch ra trong
URL v nhy n v tr mi.
Mi ngun ti nguyn trn Web c mt a ch duy nht. V d, 207.46.130.149
l a ch website ca Microsoft. Gi y, nh cc con s ny rt kh v d nhm
ln. V vy, ngi ta s dng cc URL. URL l mt chui cung cp a ch Internet
ca website hay ti nguyn trn World Wide Web.
nh dng c trng l www.nameofsite.typeofsite.contrycode
Trong :
-

Nameofsite: Tn ca site

Typeofsite: Kiu ca site

Contrycode: M nc

V d: 216.239.33.101 c th c biu din bng URL l www.google.com


HTML v JavaScript

Trang 31

VIETHANIT

Chng 2. Cc th c bn trong HTML

URL cng nhn bit c giao thc m site hay ti nguyn c truy nhp. Dng
URL thng thng nht l http, n cung cp a ch Internet ca mt trang web. Mt
vi dng URL khc l gopher, n cung cp a ch Internet ca mt th mc Gopher,
v ftp, cung cp v tr ca mt ti nguyn FTP trn mng.
URL cng c th tham chiu n mt v tr trong mt ti nguyn. V d, bn c
th to lin kt n mt ch trong cng mt ti liu. Trong trng hp , nh
danh on c s dng phn cui ca URL.
C hai dng URL:

URL tuyt i l a ch Internet y ca trang hoc file, bao gm


giao thc, v tr mng, ng dn tu chn v tn file. V d,
http://www.microsoft.com l mt a ch URL tuyt i.

URL tng i l mt URL c mt hoc nhiu phn b thiu. Trnh


duyt ly thng tin b thiu t trang cha URL . V d, nu giao thc b
thiu, trnh duyt s dng giao thc ca trang hin thi.
2.5.1.2 S dng siu lin kt

Th <A> c s dng xc nh vn bn hay nh no s dng lm siu lin


kt trong ti liu HTML. Thuc tnh HREF (tham chiu siu vn bn) c dng
ch a ch hay URL ca ti liu hoc file c lin kt.
C php ca HREF l:
<A HREF = protocol://host.domain:port/path/filename> Hypertext </A>
Trong :
-

Protocol: Giao thc.

Mt s giao thc thng dng l:


o http - giao thc truyn siu vn bn
o telnet - m mt phin telnet
o gopher - tm kim file
o ftp - giao thc truyn file
o mailto - gi th in t
-

Host.domain: a ch Internet ca my ch

Port: Cng phc v ca my ch ch

Hypertext: Vn bn hay hnh nh m ngi dng cn nhp vo kch hot


lin kt.

a. Lin kt n nhng ti liu khc


Gi s c hai ti liu HTML trn a cng cc b, Doc1.html v Doc2.html.
on m sau to ra mt lin kt t Doc1.html n Doc2.html
V d 2.18:
<HTML>

HTML v JavaScript

Trang 32

VIETHANIT

Chng 2. Cc th c bn trong HTML

<HEAD>
<TITLE> Document 1 </TITLE>
</HEAD>
<BODY>
<P> This page is all about creating links to documents.
<A HREF = Doc2.html> Click here to view document 2 </A>
</BODY>
</HTML>

Kt qu:

Hnh 2.22: Lin kt n ti liu khc


Khi ngi dng nhy n mt ti liu khc, bn nn cung cp cch quay tr
li trang ch hoc nh hng n mt file khc.
V d 2.19:
<HTML>
<HEAD>
<TITLE> Lien ket den tai lieu khac </TITLE>
</HEAD>
<BODY>
<P> This is document 2. This page is displayed when you click the
hyperlink in Document 1
<BR><BR>
<A HREF = Doc1.html> Back home </A>
</BODY>
</HTML>

Kt qu:

HTML v JavaScript

Trang 33

VIETHANIT

Chng 2. Cc th c bn trong HTML

Hnh 2.23: Tr li trang trc


Ch l cc lin kt c gch chn. Trnh duyt t ng gch chn cc lin kt.
N cng thay i hnh dng con tr chut khi ngi s dng di chuyn chut vo lin
kt.
v d trn, cc file nm trong cng mt th mc, v vy ch cn ch ra tn file
trong thng s HREF l . Tuy nhin, lin kt n cc file th mc khc, cn
phi cung cp ng dn tuyt i hay ng dn tng i.
ng dn tuyt i ch ra ng dn y t th mc gc n file. V d:
C:\mydirectory\html\Doc2.html
ng dn tng i ch ra v tr lin quan ca file vi v tr file hin ti. V d,
nu th mc hin hnh l mydirectory th ng dn s l:
<A HREF= ..\Doc3.html> Next page </A>
V vy, nu mun lin kt cc ti liu khng lin quan vi nhau th ta nn dng
ng dn tuyt i. Tuy nhin, nu ta c mt nhm ti liu lin quan vi nhau, chng
hn phn tr gip trong HTML, th ta nn s dng ng dn tng i cho cc ti
liu trong nhm v ng dn tuyt i cho cc ti liu khng lin quan trc tip n
ch . Khi , ngi dng c th ci t phn tr gip ny trong th mc mnh chn
v n vn hot ng.
b. Lin kt n cc phn trong cng mt ti liu
Th neo <A> (anchor) c s dng ngi dng c th nhy n nhng
phn khc nhau ca mt ti liu. V d, bn c th hin th ni dung ca trang web nh
mt lot cc lin kt. Khi ngi dng kch vo mt ti no th cc chi tit nm
mt phn khc ca ti liu c hin th.
Kiu lin kt ny c gi l named anchor bi v thuc tnh NAME c s
dng to cc lin kt ny
<A NAME = marker> Topic name </A>
HTML v JavaScript

Trang 34

VIETHANIT

Chng 2. Cc th c bn trong HTML

Bn khng phi s dng bt k vn bn no nh du im neo.


dng, ta s dng vch du (marker) trong thng s HREF nh sau:
<A HREF = #marker> Topic name </A>
Du # trc tn ca siu lin kt bo cho trnh duyt bit rng lin kt ny
lin kt n mt im c t tn trong ti liu. Khi khng c ti liu no c ch ra
trc k t #, trnh duyt hiu rng lin kt ny nm trong cng ti liu.
V d 2.20:
<HTML>
<HEAD>
<TITLE> Lien ket</TITLE>
</HEAD>
<BODY>
<H1><center>DANH MC NHC CCH MNG </center></H1>
<A HREF = "#bh1"> t nc</A> <BR>
<A HREF = "#bh2"> Bi ca khng qun </A> <BR>
<A HREF = "#bh3"> Cho em c gi Lam Hng </A> <BR>
<A HREF = "#bh4"> m trng sn nh Bc </A> <BR>
<A HREF = "#bh5"> C gi m ng </A> <BR>
<A HREF = "#bh6"> Chic Gy Trng Sn </A> <BR>
<A HREF = "#bh7"> Gii Phng Min Nam </A> <BR>
<A HREF = "#bh8"> Tin V Si Gn </A> <BR>
<A HREF = "#bh9"> Bi Ca May o </A> <BR>
<H2> <A name="bh3">Cho em c gi Lam Hng </H2> <BR>
<P>Xe ta bon trn nhng dm ng,<BR>
Gia lng qu ta bng qua bao sui o i nng <BR>
M xe ta bon ra chin trng <BR>
Cho em c gi Lam Hng <BR>
Gia ting bom go n di, vn nghe vang vang cu h trn ng <BR>
Nim vui ln to lan trn qu ta <BR>
i thng ng nhng chuyn xe ta bng bng qua <BR>
Hng Lnh i, nh cao my ngn
// Tng t vi li cc bi ht khc
</BODY>
</HTML>

Kt qu:

HTML v JavaScript

Trang 35

VIETHANIT

Chng 2. Cc th c bn trong HTML

Hnh 2.24.1: Lin kt n cc phn trong cng mt ti liu

Hnh 2.24.2: Lin kt n cc phn trong cng mt ti liu


c. Lin kt n mt im xc nh mt ti liu khc
By gi chng ta bit cch s dng cc vch du trong cng mt ti liu, hy
th nhy n mt v tr trn mt ti liu khc.
nhy n mt im trn ti liu khc, chng ta cn phi ch ra tn ca ti
liu khi chng ta to vch du. Trc tin trnh duyt s c tn ti liu v m ti liu
. Sau n s c vch du v di chuyn n im c nh du.

HTML v JavaScript

Trang 36

VIETHANIT

Chng 2. Cc th c bn trong HTML

V d 2.21:
<HTML>
<HEAD>
<TITLE> Lien ket</TITLE>
</HEAD>
<BODY>
<H1><center>DANH MC NHC CCH MNG </center></H1>
<A HREF = "baihat#bh1"> t nc</A> <BR>
<A HREF = "baihat#bh2">Bi ca khng qun </A> <BR>
<A HREF = "baihat#bh3">Cho em c gi Lam Hng </A> <BR>
<A HREF="baihat#bh4">m trng sn nh Bc</A> <BR>
<A HREF = "baihat#bh5">C gi m ng </A> <BR>
<A HREF="baihat#bh6">Chic Gy Trng Sn </A> <BR>
<A HREF="baihat#bh7">Gii Phng Min Nam </A> <BR>
<A HREF = "baihat#bh8">Tin V Si Gn </A> <BR>
<A HREF = "baihat#bh9">Bi Ca May o </A> <BR>
</BODY>
</HTML>

Kt qu:

Hnh 2.25.1: Lin kt n mt im xc nh mt ti liu khc

HTML v JavaScript

Trang 37

VIETHANIT

Chng 2. Cc th c bn trong HTML

Hnh 2.25.2: Lin kt n mt im xc nh mt ti liu khc


d. S dng email
Nu mun ngi s dng gi c email, chng ta c th a mt c tnh vo
trong trang web v cho php h gi email t trnh duyt. Tt c nhng g chng
ta cn lm l chn gi tr mailto vo trong th lin kt.
<A HREF = mailto: thisperson@mymail.com>
2.5.2

Th Meta

Phn tiu cng c th cha phn t META. Phn t ny cung cp thng tin v
trang web ca bn. N gm tn tc gi, tn phn mm dng vit trang , tn cng
ty, thng tin lin lc, Phn t META s dng kt hp gia thuc tnh v gi tr.
V d, ch Graham Browne l tc gi, ngi ta s dng phn t META nh
sau:
<META name = Author content = Graham Browne>

Tc gi ca ti liu l Graham Browne


Thuc tnh http-equiv c th c s dng thay th thuc tnh name. My ch
HTTP s dng thuc tnh ny to ra mt u p ng HTTP (HTTP response
header).
u p ng c truyn n trnh duyt nhn dng d liu. Nu trnh duyt
hiu c u p ng ny, n s tin hnh cc hnh ng c bit i vi u p
ng .
V d:
<META http-equiv = Expires content = Mon, 15 Sep 2003 14 :25 :27 GMT>

s sinh ra mt u p ng http nh sau :


Expires: Mon, 15 Sep 2003 14 :25 :27 GMT

HTML v JavaScript

Trang 38

VIETHANIT

Chng 2. Cc th c bn trong HTML

Do vy, nu ti liu lu li, HTTP s bit khi no truy xut mt bn sao ca


ti liu tng ng.
2.5.3

Cc th DIV v SPAN

C nhng trng hp chng ta mun chia vn bn trong mt trang web thnh


nhng khi thng tin logic. Chng ta cng c th p dng nhng thuc tnh thng
thng cho ton b khi. Phn t DIV v SPAN c s dng nhm ni dung li
vi nhau. Phn t DIV dng chia ti liu thnh cc phn c lin quan vi nhau.
Phn t SPAN dng ch mt khong cc k t.
Phn t SPAN dng nh ngha ni dung trong dng (in-line) cn phn t
DIV dng nh ngha ni dung mc khi (block-level)
V d 2.22:
<HTML>
<HEAD>
<TITLE> DIV va SPAN </TITLE>
</HEAD>
<BODY>
<DIV>
Division 1
<P> The DIV element is used to group elements
<P> Typically, DIV is used for block level elements
</DIV>
<DIV align = right>
Division 2
<P> This is a second division
<BR>
<H2> Are you having fun? </H2>
</DIV>
<P> The second division is right aligned.
<SPAN STYLE = font-size:25; color: blue> Common formatting
</SPAN> is applied to all the elements in the division
</BODY>
</HTML>

Kt qu:
HTML v JavaScript

Trang 39

VIETHANIT

Chng 2. Cc th c bn trong HTML

Hnh 2.26: Cc th DIV v SPAN


2.5.4

Cc th mc on

2.5.4.1 Th <ADDRESS>
Phn t <ADDRESS> c dng hin th cc thng tin nh tc gi, a ch,
ch k trong ti liu HTML. Phn t ny c hin th cui trang v c th cha mt
hoc mt s phn sau:
Lin kt n trang ch
c tnh chui tm kim
Thng tin bn quyn
V d 2.23:
<HTML>
<HEAD>
<TITLE> The ADDRESS </TITLE>
</HEAD>
<BODY>
<H3> My first HTML document </H3>
<P> This is going to be real fun
<H2> Using another heading </H2>
<P> Another paragraph element
<ADDRESS>
<P><A HREF = http://www.viethanit.edu.vn/> Click here to visit
Viet-Hans homepage </A>

HTML v JavaScript

Trang 40

VIETHANIT

Chng 2. Cc th c bn trong HTML


</ADDRESS>

</BODY>
</HTML>

Kt qu:

Hnh 2.27: Minh ho th ADDRESS


2.5.4.2 Th <BLOCKQUOTE>
Chng ta c th ch nh mt trch dn vn bn bn trong ti liu bng cch s
dng phn t BLOCKQUOTE v Q. BLOCKQUOTE c s dng cho nhng phn
trch dn di v c hin th nh mt on vn bn tht vo u dng. Nu phn trch
dn ngn v khng cn ngt on th s dng phn t Q tt hn. Khi s dng phn t
Q, bn phi xc nh du ngoc kp.
V d 2.24:
<HTML>
<HEAD>
<TITLE> The BLOCKQUOTE</TITLE>
</HEAD>
<BODY>
<P> The blockquote element is used to format the content in blocks of text.
<BLOCKQUOTE>
Humpty Dumpty sat on a wall

HTML v JavaScript

Trang 41

VIETHANIT

Chng 2. Cc th c bn trong HTML


Humpty Dumpty had a great fall
All the Kings horses
And all the Kings men
Could not put Humpty Dumpty together again
</BLOCKQUOTE>
<P> If you notice the content is rendered as a block of text

</BODY>
</HTML>

Kt qu:

Hnh 2.28: Minh ho th BLOCKQUOTE


2.5.4.3 Th <PRE>
Nu chng ta mun vn bn c hin th vi nh dng c xc nh trc,
chng ta s dng phn t PRE. Phn t ny dng xc nh nh dng cho vn bn.
Khi vn bn c hin th trong trnh duyt, n s tun theo tt c cc nh dng
c xc nh trc trong m ngun ti liu HTML.
V d 2.25:
<HTML>
<HEAD>
<TITLE> The PRE </TITLE>
</HEAD>
<BODY>
<PRE>
Humpty Dumpty sat on a wall
Humpty Dumpty had a great fall

HTML v JavaScript

Trang 42

VIETHANIT

Chng 2. Cc th c bn trong HTML

All the Kings horses


And all the Kings men
Could not put Humpty Dumpty together again
</PRE>
</BODY>
</HTML>

Kt qu:

Hnh 2.29: Minh ho th PRE


2.6

S dng k t c bit trong ti liu HTML

Bn c th chn cc k t c bit vo vn bn ca ti liu HTML. m bo


trnh duyt khng nhm chng vi th HTML, bn phi gn m nh dng cho cc k
t c bit ny.
K t c bit

M nh dng

Ln hn (>)

&gt;

Nh hn (<)

&lt;

Trch dn ()

&quot;

K t &

&amp;

V d

BI TP THC HNH
1. Hy vit on m HTML kt hp th font, th ngt, th on v cc thuc
tnh ca chng c kt qu l trang nh sau:
HTML v JavaScript

Trang 43

VIETHANIT

Chng 2. Cc th c bn trong HTML

Trong : on th nht vit bng font ch Times new roman, on th hai vit
bng font ch Arial
2. Vit on m HTML canh l phi mt khi vn bn gm mt tiu v
hai on vn bt k bng cch s dng th DIV
3. Vit on m HTML hin th ni dung nh sau:
*

*********

*********

*********

*********

*********

*********

4. Vit on m HTML trong c chn mt hnh nh lm nn cho trang web


bi 3
5. Hy vit on m HTML minh ho lin kt gia hai trang web nh hnh sau:

HTML v JavaScript

Trang 44

VIETHANIT

Chng 2. Cc th c bn trong HTML

6. Vit on m HTML minh ho vic lin kt n mt phn trong cng ti liu


nh hnh minh ho sau:

HTML v JavaScript

Trang 45

VIETHANIT

HTML v JavaScript

Chng 2. Cc th c bn trong HTML

Trang 46

VIETHANIT

Chng 2. Cc th c bn trong HTML

7. Vit on m HTML to ra mt thi kho biu vi danh sch nh hnh sau:

Danh sch trn l mt thi kho biu. Trong mi mc ca danh sch l mt


lin kt n mt v tr xc nh trong mt ti liu khc. Ti liu ny lit k cc
mn hc ca tng ngy trong tun. Tu trnh by bn trong ti liu bng cch
vn dng cc th hc.

HTML v JavaScript

Trang 47

VIETHANIT

Chng 3. Lm vic vi bng, biu mu, khung v a phng tin

CHNG 3

LM VIC VI BNG - BIU MU KHUNG V


A PHNG TIN
3.1 Lm vic vi bng

Bng l b sung quan trng ca HTML, c bt ngun t phng pht trin


Nescape Communications Corporation. Tuy nhin kt qu khng c nh cc
chng trnh x l vn bn ph bin.
Chng ta c th s dng bng hin th d liu di dng cc hng v cc ct.
Bng gip cho chng ta iu khin, xc nh v sp xp v tr ca vn bn v hnh nh
trn trang web, thay v giao tt c cc vic cho trnh duyt.
Cc ct trong bng

Cc
hng
trong
bng

Hnh 3.1: M hnh ca bng


3.1.1

Cch to bng

to bng chng ta phi phc ho ni dung cho bng: bng c chc nng
nhim v g? C bao nhiu ct? Bao nhiu dng? Chiu di, chiu rng, ni dung ca
mi l g? Trong bng, chiu rng hay chiu di u c tnh bng n v pixel.
Th <TABLE> c dng to bng trong ti liu HTML. Cc thuc tnh ca
phn t <TABLE> c p dng cho bng, nhng khng cho d liu hin th trn
bng. n v c bn ca bng l mt v c nh ngha bng th <TD>.
V d 3.1:
<HTML>
<HEAD>
<TITLE> Tao bang </TITLE>
</HEAD>
<BODY>
<TABLE>

HTML v JavaScript

Trang 48

VIETHANIT

Chng 3. Lm vic vi bng, biu mu, khung v a phng tin


<TD> th 1 </TD>
<TD> th 2 </TD>
<TD> th 3 </TD>

</BODY>
</HTML>

Kt qu:

Hnh 3.2: Minh ho to bng


Mt hng ca bng c nh ngha bng th <TR>
V d 3.2:
<HTML>
<HEAD>
<TITLE> Tao bang </TITLE>
</HEAD>
<BODY>
<TABLE>
<TR>
<TD> th 1 </TD>
<TD> th 2 </TD>
<TD> th 3 </TD>
<TR>
<TD> th 4 </TD>
<TD> th 5 </TD>
<TD> th 6 </TD>
</TABLE>
</BODY>

HTML v JavaScript

Trang 49

VIETHANIT

Chng 3. Lm vic vi bng, biu mu, khung v a phng tin

</HTML>

Kt qu:

Hnh 3.3: Minh ho to hng trong bng


Cc to thnh mt hng. Cc hng to thnh bng. iu ny c ni n trong
c php ca HTML c s dng to bng. Th TD c lng trong th TR. Th
TR c nm trong cp th ng v m TABLE.
3.1.2

Cc thuc tnh ca bng

3.1.2.1 Thuc tnh ca th <TABLE>

Bng 3.1: Cc thuc tnh ca th <TABLE>


Thuc tnh

M t

Bgcolor

nh r mu nn cho bng

Border

nh mu cho ng vin

Bordercolordark

nh mu sm cho phn bng ca ng vin

Bordercolorlight

nh mu nht cho phn sng hn ca ng vin.

Cellpadding

nh r khong cch gia ni dung v ng vin

Frame

Hin th ng vin ngoi

Height

nh r chiu cao bng

Rules

Hin th ng vin trong

Width

nh r chiu rng ca bng

3.1.2.2 Thuc tnh ca th <TR>

Bng 3.2: Cc thuc tnh ca th <TR>


Thuc tnh

M t

Align, Vlign

Canh chnh ni dung hng theo phng ngang, phng dc

Bgcolor

nh r mu nn ca hng

HTML v JavaScript

Trang 50

VIETHANIT

Chng 3. Lm vic vi bng, biu mu, khung v a phng tin

3.1.2.3 Thuc tnh ca th <TD>

Bng 3.3: Cc thuc tnh ca th <TR>


Thuc tnh

M t

Align, vlign

Canh chnh ni dung theo phng ngang, phng dc

Border

M rng qua nhiu ct

Colspan

nh mu sm cho phn bng ca ng vin

Nowrap

Gi cho ni dung nm trn mt dng.

Rowspan

Ko di xung nhiu hng

Width, heigh

nh r kch thc

V d 3.3:
<HTML>
<HEAD>
<TITLE> Tao bang </TITLE>
</HEAD>
<BODY>
<TABLE bgcolor = pink width = "100%" border = "1" cellspacing = 1
cellpadding = "0" >
<TR>
<TD align = "center" valign = "top"> H v tn </TD>
<TD align = "center" valign = "middle" bgcolor = red> Mn 1
</TD>
<TD align = "center" valign = "middle" bgcolor = yellow> Mn
2 </TD>
<TD align="center" valign="bottom" bgcolor = blue> Mn 3
</TD>
</TR>
<TR>
<TD align = "center" valign = "top"> Nguyn Vn Anh </TD>
<TD align = "center" valign = "middle" bgcolor = red> 7 </TD>
<TD align="center" valign="middle" bgcolor = yellow> 8
</TD>
<TD align="center" valign="middle" bgcolor = blue> 9 </TD>
</TR>
</TABLE>
</BODY>

HTML v JavaScript

Trang 51

VIETHANIT

Chng 3. Lm vic vi bng, biu mu, khung v a phng tin

</HTML>

Kt qu:

Hnh 3.4: S dng cc thuc tnh ca bng


3.1.3

Hiu chnh bng

3.1.3.1 To khung vin cho bng

Thuc tnh Border trong th TABLE, vi Border =n, trong n l dy ng


vin tnh bng pixel s gip to khung vin cho bng. HTML mc nh n=2 pixel.
Thuc tnh Border nh hng n ton b khung vin, k c cc ng phn chia
trong bng.
Thc cht l khung vin lun lun tn ti, thuc tnh Border ch quyt nh vic
hin th hay khng hin th khung vin. xo thuc tnh khung vin, ta t gi tr cho
thuc tnh border=0.
V d:
<TABLE BORDER=2>
Ngoi ra chng ta cng c th thay i mu cho khung vin. Thng thng, mu
ca khung vin ca mt bng ging vi mu nn, nhng ta c th thay i mu ca
khung vin lm ra s khc bit .
C php:
BORDERCOLOR = #rrggbb hoc BORDERCOLOR= tn mu

V d: Nu mun t mu cho khung vin vi bng c Border = 2 ta s vit


nh sau:
<TABLE BORDER=2 BORDERCOLOR= Red>.

Bn cnh ta cn c th thit t mt mu nn cho ton bng. Mu nn s gip


lm ni bt bng, to cho ngi duyt phi ch n ni dung ca bng. C th nh
mu nn cho c bng hoc ch mt vi trong bng u c.
Ta s dng thuc tnh BGCOLOR cho ton bng
HTML v JavaScript

Trang 52

VIETHANIT

Chng 3. Lm vic vi bng, biu mu, khung v a phng tin

V d: Nu mun t mu xanh dng cho bng vi Border = 2 ta s vit nh sau:


<TABLE BORDER=2 BGCOLOR= Green>

Chng ta cng c th t mu nn cho mt hay mt nhm no bng cch


thm cc thuc tnh BGCOLOR vo th ca hng hay .
3.1.3.2 Thay i kch thc bng

Trnh duyt s t ng nh dng chiu rng bng bng cch tnh chiu rng ca
vn bn cha bn trong. Tuy nhin ngi thit k vn c th nh dng kch c c
lng c cc khong trng.
C php:
<TABLE WIDTH= x HEIGHT= y>

Tng t nh trn ta c th nh dng kch thc . Vic thay i kch thc ca


dn n thay i kch thc ca c cc khc trong hng.
C php:
<TH WIDTH= x HEIGHT= y>
<TD WIDTH= x HEIGHT= y>

Ngoi ra ta cn c th canh bng trn trang bng thuc tnh quen thuc ALIGN
C php:
<TABLE ALIGN= >
3.1.3.3 B sung cnh v ng k li

C hai c tnh mi ca bng trong c t k thut HTML. C hai u cung cp


kim sot chi tit v ng bin xung quanh bng v gia nhng d liu ring l.
l frame v rules.
C php:
<TABLE FRAME= VALUE RULES= VALUE WIDTH= 50%>

Chng hn:
<table align = center border = 10 frame = vsible cellspacing= 0 rules= rows
width= 50%>

Gi tr ca chng s c nh ngha trong cc bng sau.


Bng 3.4: Bng gi tr ca thc tnh frame
Gi tr

ngha

Void

Loi b ton b ng bin bng bn ngoi

Above

Hin th ng bin pha trn khung bng

Below

Hin th ng bin pha di khung bng

Hsides

Hin th ng bin trn v di khung bng

Lsh

Hin th ng bin pha tri khung bng

Rsh

Hin th ng bin pha phi khung bng

HTML v JavaScript

Trang 53

VIETHANIT

Chng 3. Lm vic vi bng, biu mu, khung v a phng tin

Vside

Hin th ng bin pha tri v phi khung bng

Box

Hin th ng bin tt c cc pha ca khung bng


Bng 3.5: Bng gi tr ca thc tnh Rows
Gi tr

ngha

None

Loi b ton b ng bin bng bn trong

Group

Hin th ng bin ngang gia tt c cc nhm bng.


Nhm c xc nh bng nhng phn t thead, tbody,
tfoot v colgroup.

Rows

Hin th ng bin chiu ngang gia tt c cc hng


ca bng.

Cols

Hin th ng bin ng gia tt c cc ct bng

3.1.3.4 Trang tr vn bn chung quanh bng

K thut chn vn bn chung quanh bng cng tng t nh chn vn bn chung


quanh hnh nh. Vn bn c xp chung quanh bng c nhp vo sau bng.
Nu bng c canh theo l tri th vn bn nm pha bn phi, cn vn bn c
cn theo l phi th bng nm bn tri.
C php:
<TABLE ALIGN = left> </TABLE>
<TABLE ALIGN = right> </TABLE>

V d 3.4 :
<HTML>
<HEAD>
<TITLE> Hieu chinh bang </TITLE>
</HEAD>
<BODY>
<TABLE bodercolor = red width = "50%" border = "1" cellspacing = 1
cellpadding = "0" align = left >
<TR>
<TD align = "center" valign = "top"> H v tn </TD>
<TD align = "center" valign = "middle" bgcolor = red> Mn 1
</TD>
<TD align = "center" valign = "middle" bgcolor = yellow> Mn
2 </TD>
<TD align="center" valign="bottom" bgcolor = blue> Mn 3
</TD>
</TR>

HTML v JavaScript

Trang 54

VIETHANIT

Chng 3. Lm vic vi bng, biu mu, khung v a phng tin


<TR>
<TD align = "center" valign = "top"> Nguyn Vn Anh </TD>
<TD align = "center" valign = "middle" bgcolor = red> 7 </TD>
<TD align="center" valign="middle" bgcolor = yellow> 8
</TD>
<TD align="center" valign="middle" bgcolor = blue> 9 </TD>
</TR>
</TABLE>

y l kt qu ca th sinh Nguyn Vn Anh trong k thi tuyn sinh va


qua. Nh trng gi giy bo nhp hc cho th sinh. Khi i nh mang theo h
s v giy bo ny.
</BODY>
</HTML>

Kt qu:

Hnh 3.5: Trang tr vn bn xung quanh bng


3.1.3.5 Kt hp cc ct v cc dng

i khi chng ta mun ni cc dng v cc ct vo trong mt . Nh vy, chng


ta to mt ct ko rng ra cho hn mt dng, hay to ra mt dng ko rng ra
cho hn mt ct. Thuc tnh COLSPAN v ROWSPAN c s dng to ra nhng
m chng c th ko rng ra cho hn mt dng hay ct. Thuc tnh COLSPAN c
s dng vi th <TH>, trong khi thuc tnh ROWSPAN c s dng vi th
<TD>.
C php:
<TD COLSPAN = n </TD> vi n l s ct m tri qua
<TD ROWSPAN = n </TD> vi n l s hng m tri qua.

HTML v JavaScript

Trang 55

VIETHANIT

Chng 3. Lm vic vi bng, biu mu, khung v a phng tin

V d 3.5:
<HTML>
<HEAD>
<TITLE> Hieu chinh bang </TITLE>
</HEAD>
<BODY>
<TABLE bodercolor = red width = "100%" border = "1" cellspacing = 1
cellpadding = "0" align = left >
<TR>
<TD rowspan = 4 align = center> HC K I </TD>
<TD colspan = 4 align = center> KT QU HC TP </TD>
</TR>
<TR>
<TD align = "center" valign = "top"> H v tn </TD>
<TD align = "center" valign = "middle"> Ton </TD>
<TD align = "center" valign = "middle"> L </TD>
<TD align="center" valign=""middle"> Ho </TD>
</TR>
<TR>
<TD align = "center" valign = "top"> Nguyn Vn Anh </TD>
<TD align = "center" valign = "middle"> 7 </TD>
<TD align="center" valign="middle"> 8 </TD>
<TD align="center" valign="middle"> 9 </TD>
</TR>
<TR>
<TD align = "center" valign = "top"> Trn Thu Linh </TD>
<TD align = "center" valign = "middle"> 6 </TD>
<TD align="center" valign="middle"> 8 </TD>
<TD align="center" valign="middle"> 6 </TD>
</TR>
</TABLE>
</BODY>
</HTML>

Kt qu:

HTML v JavaScript

Trang 56

VIETHANIT

Chng 3. Lm vic vi bng, biu mu, khung v a phng tin

Hnh 3.6: Kt hp cc ct v cc dng


3.1.3.6 Canh l ni dung trong

Thng ni dung bn trong c mc nh canh l bn tri v gia (theo


chiu dc), nhng ta cng c th canh l theo ni dung bn trong theo mnh.
Trong th ca mi , mi hng hay mi section g :
ALIGN=direction, VALIGN=direction

i vi ALIGN th direction nhn cc gi tr l left, center, right


i vi VALIGN th direction nhn cc gi tr l top, middle, bottom .
Chng ta c th canh l cho tt c cc trong mt hoc nhiu ct hay hng bng
cch thm thuc tnh ALIGN hay VALIGN vo cc th nh TR, THEAD, TBODY
to khong cch bn trong v xung quanh .
Khong cch gia cc lm cho bng to ra m vn khng thay i g kch thc
ca c. Khong trng xung quanh ni dung trong s y ng vin ra ngoi.
Trong th TABLE g
CELLSPACING = n (i vi khong cch bn ngoi n)
CELLPADDING = n (i vi khong cch bn trong n)

vi n khong cch tnh bng Pixel.


3.1.3.7 S dng hnh nh lm nn cho bng

s dng hnh nh lm nn bn cn ch tng phn ca hnh nn v ni


dung bng.
C php:
HTML v JavaScript

Trang 57

VIETHANIT

Chng 3. Lm vic vi bng, biu mu, khung v a phng tin

<TABLE Background = image.gif>


<TD Background = image.gif>

V d 3.6 :
<HTML>
<HEAD>
<TITLE> Hieu chinh bang </TITLE>
</HEAD>
<BODY>
<TABLE bodercolor = red width = "100%" border = "1" cellspacing = 1
cellpadding = "0" background = "c711.jpg" >
<TR>
<TD rowspan = 4 align = center> HC K I </TD>
<TD colspan = 4 align = center> KT QU HC TP </TD>
</TR>
<TR>
<TD align = "center" valign = "top"> H v tn </TD>
<TD align = "center" valign = "middle"> Ton </TD>
<TD align = "center" valign = "middle"> L </TD>
<TD align="center" valign=""middle"> Ho </TD>
</TR>
<TR>
<TD align = "center" valign = "top"> Nguyn Vn Anh </TD>
<TD align = "center" valign = "middle"> 7 </TD>
<TD align="center" valign="middle"> 8 </TD>
<TD align="center" valign="middle"> 9 </TD>
</TR>
<TR>
<TD align = "center" valign = "top"> Trn Thu Linh </TD>
<TD align = "center" valign = "middle"> 6 </TD>
<TD align="center" valign="middle"> 8 </TD>
<TD align="center" valign="middle"> 6 </TD>
</TR>
</TABLE>
</BODY>
</HTML>

Kt qu:
HTML v JavaScript

Trang 58

VIETHANIT

Chng 3. Lm vic vi bng, biu mu, khung v a phng tin

Hnh 3.7: S dng hnh nh lm nn cho bng


3.2 Lm vic vi biu mu

Form HTML l mt phn ca ti liu, n cha cc phn t c bit gi l cc


iu khin. Cc iu khin c s dng nhp thng tin t ngi dng v cung cp
mt s tng tc. D liu do ngi dng nhp vo c th c xc nhn hp l nh
cc kch bn pha my khch (client-side scripts) v c chuyn n my ch x
l thm.
3.2.1

S dng biu mu

Vic s dng biu mu trn World Wide Web l kh nhiu v lin tc tng ln.
Sau y l mt s cch s dng thng thng:
Thu thp tn, a ch, s in thoi, a ch email v cc thng tin khc
ngi dng ng k cho mt dch v hay mt s kin no .

Thu thp thng tin dng ng k mua mt mt hng no , v d: Khi


mun mua mt cun sch trn Internet, ta phi in tn, a ch gi th,
phng thc thanh ton v cc thng tin lin quan khc.

Thu thp thng tin phn hi v mt website. Hu ht cc site cung cp mt


dch v no u khuyn khch khch hng gi thng tin phn hi.
Ngoi vic xy dng mi quan h vi khch hng, y cn l mt ngun
thng tin trao i hoc ci tin dch v.
Cung cp cng c tm kim cho website. Cc site cung cp nhiu thng tin
khc nhau thng cung cp cho ngi dng hp tm kim cho php h
tm kim thng tin nhanh hn.
Mt biu mu in hnh trn trang web nh sau:
3.2.2

Phn t FORM

Phn t <FORM> c s dng to mt vng trn trang nh mt biu mu.


N ch ra cch b tr ca biu mu. Cc thuc tnh ca th ny bao gm:

HTML v JavaScript

Trang 59

VIETHANIT

Chng 3. Lm vic vi bng, biu mu, khung v a phng tin


Bng 3.6: Cc thuc tnh ca th <FORM>

Thuc tnh

M t

ACCEPT

Thuc tnh ny xc nh danh sch cc kiu MIME c


my ch nhn ra, trong c cha kch bn (script) x l
biu mu.
C php: ACCEPT = Internet media type
Thuc tnh ny xc nh v tr ca script s x l biu mu
hon chnh v c gi i.

ACTION

C php: ACTION = URL


METHOD

Thuc tnh ny xc nh phng thc d liu c gi n


my ch. N cng xc nh giao thc c s dng khi my
khch gi d liu ln cho my ch. Nu gi tr l GET th
trnh duyt s to mt cu hi c cha a ch URL ca
trang, mt du chm hi v cc gi tr do biu mu to ra.
Trnh duyt s tr li cu hi cho kch bn c xc nh
trong URL x l. Nu gi tr l POST, th d liu trn
biu mu c gi n kch bn x l nh mt khi d liu.
Ngi ta khng s dng chui cu hi.
C php: METHOD = (GET | POST)

V d: a mt biu mu n chng trnh x l biu mu s dng theo


phng thc POST ta vit nh sau:
<FORM action=http://mysite.com/processform method=post>
form contents
</FORM>
3.2.3

Cc phn t nhp ca HTML

Khi to ra mt biu mu, ta c th t cc iu khin ln biu mu nhn d


liu nhp vo t ngi dng. Cc iu khin ny c s dng vi phn t <FORM>.
Tuy nhin, ta cng c th s dng chng bn ngoi biu mu to cc giao din
ngi dng.
3.2.3.1 Phn t INPUT

Phn t <INPUT> xc nh loi v s xut hin ca iu khin trn biu mu.


Cc thuc tnh ca phn t ny l:
Bng 3.7: Cc thuc tnh ca th <INPUT>
Thuc tnh

M t

TYPE

Thuc tnh ny xc nh loi phn t. Ta c th chn mt


trong cc la chn: TEXT, PASSWORD, CHECKBOX,
RADIO, SUBMIT, RESET, FILE, HIDDEN v BUTTON.
Mc nh l TEXT.

NAME

Thuc tnh ny ch tn ca iu khin. V d, nu c nhiu

HTML v JavaScript

Trang 60

VIETHANIT

Chng 3. Lm vic vi bng, biu mu, khung v a phng tin


hp vn bn (text box) trn mt biu mu th bn nn s
dng tn xc nh chng TEXT1, TEXT2 hoc bt k
tn no mnh chn. Phm vi hot ng ca thuc tnh
NAME nm trong phn t FORM.

VALUE

y l thuc tnh tu chn, n xc nh gi tr khi to ca


iu khin. Tuy nhin, i vi kiu (TYPE) l RADIO th ta
phi xc nh cho n mt gt.

SIZE

Thuc tnh ny xc nh rng ban u ca iu khin.


i vi kiu l TEXT hay PASSWORD th kch thc c
xc nh theo k t. i vi cc loi phn t nhp khc,
rng c xc nh bng im (pixels)

MAXLENGTH Thuc tnh ny c s dng xc nh s k t ln nht


c th nhp vo phn t TEXT hoc PASSWORD. Mc
nh l khng gii hn.
CHECKED

y l thuc tnh logic xc nh nt c c chn hay


khng. Thuc tnh ny c s dng khi kiu nhp l
RADIO hay CHECKBOX.

SRC

SRC = URL. Thuc tnh ny c dng khi ta mun s


dng mt nh trong kiu INPUT. N xc nh v tr ca nh.

Phn ny ta s tho lun v cc loi phn t nhp cng vi mt s c tnh v s


kin thng dng.
3.2.3.2 Button

Phn t ny to ra mt iu khin nt (button)


Bng 3.7: Cc thuc tnh ca i tng INPUT cho phn t Button
Thuc tnh

M t

NAME

Thit lp hoc truy xut tn ca iu khin

SIZE

Thit lp hoc truy xut kch thc ca iu khin

TYPE

c biu din bi <INPUT type = button>

VALUE

Thit lp hoc truy xut gi tr ca nt

3.2.3.3 Textbox

Phn t ny to ra mt iu khin nhp vn bn trn mt dng. Thuc tnh SIZE


xc nh s k t c th hin th trong phn t. Thuc tnh MAXLENGTH xc nh s
k t ti a c th nhp vo phn t ny.
Chng hn:
<INPUT TYPE = text VALUE = NAME = textbox SIZE = 20>

Gi tr VALUE y hin th ni dung ban u ca vn bn v truy xut


vn bn khi biu mu c gi i.
3.2.3.4 Checkbox

HTML v JavaScript

Trang 61

VIETHANIT

Chng 3. Lm vic vi bng, biu mu, khung v a phng tin

Phn t ny to ra mt iu khin checkbox. Ngi dng c th chn mt hoc


nhiu checkbox. Khi mt phn t checkbox c chn, th cp tn/gi tr c nhn
cng vi biu mu. Gi tr mc nh ca checkbox l bt (on). Phn t checkbox l
mt phn t trn dng v khng cn th ng.
Bng 3.7: Cc thuc tnh ca i tng INPUT cho phn t Checkbox
Thuc tnh

M t

NAME

Thit lp hoc truy xut tn ca iu khin

SIZE

Thit lp hoc truy xut kch thc ca iu khin

TYPE

c biu din bi <INPUT type = checkbox>

VALUE

Thit lp hoc truy xut gi tr ca checkbox

STATUS

Thit lp hoc truy xut trng thi xem checkbox c c


chn hay khng.

CHECKED

Thit lp hoc truy xut trng thi ca checkbox

3.2.3.5 Radio

Phn t ny to ra iu khin nt radio. Mt iu khin kiu nt radio (radio


button control) c s dng i vi cc tp gi tr loi tr ln nhau. Cc iu khin
radio trong mt nhm phi c cng tn. Vo mt thi im, ngi dng ch c th
chn mt la chn. Ch c nt radio c chn trong nhm mi to nn cp
NAME/VALUE trong d liu c nhn. Cc nt radio nn t thuc tnh VALUE.
Bng 3.8: Cc thuc tnh ca i tng INPUT cho phn t Radio
Thuc tnh

M t

NAME

Thit lp hoc truy xut tn ca iu khin

SIZE

Thit lp hoc truy xut kch thc ca iu khin

TYPE

c biu din bi <INPUT type = radio>

VALUE

Thit lp hoc truy xut gi tr ca radio

STATUS

Thit lp hoc truy xut trng thi xem nt radio c c


chn hay khng.

CHECKED

Thit lp hoc truy xut trng thi ca nt radio.

Chng hn:
<INPUT TYPE = radio NAME = sex VALUE = male> Male
3.2.3.6 Submit

Phn t ny to ra mt nt Submit. Khi ngi dng nhp vo nt ny, biu mu


c chuyn n v tr c xc nh trong thuc tnh ACTION. Cp tn/gi tr ca
nt Submit c nhn cng vi biu mu.
Chng hn:
<INPUT TYPE = submit NAME = b1 VALUE = Click>

HTML v JavaScript

Trang 62

VIETHANIT

Chng 3. Lm vic vi bng, biu mu, khung v a phng tin

3.2.3.7 nh

Phn t ny to ra mt nt submit dng nh. Gi tr ca thuc tnh SRC xc nh


URL ca nh c t trong nt y. Khi ngi dng nhp vo iu khin nh ny,
biu mu c chuyn i x l. To x v y (c o bng im) ti v tr nhp
chut c chuyn n my ch vi nh dng sau:
Name.x = valueofx
Name.y = valueofy
Trong , name l tn ca iu khin.
Ta c th s dng nhiu nt Submit vi cc hnh nh khc nhau thay v mt nt
Submit ch c mt hnh. Nu cn trnh by nhiu nh ta c th s dng bn nh.
Chng hn:
<INPUT TYPE = image NAME = name SRC = usamap.gif>
3.2.3.8 Reset

Phn t ny to ra nt reset. Khi ngi dng nhp vo nt ny, cc gi tr ca tt


c cc iu khin c ti thit lp tr v gi tr ban u, c xc nh trong cc gi
tr thuc tnh ca chng.
Chng hn:
<INPUT TYPE = reset VALUE = Reset NAME = B2>
V d 3.7: Chng trnh sau th hin vic s dng nhiu kiu nhp khc nhau
<HTML>
<HEAD>
<TITLE> Sample form </TITLE>
</HEAD>
<BODY>
<FORM ACTION = http://www.mysite.com/FormSite METHOD =
POST>
<B><H2 align = left> Sample Stock Survey </H2></B>
<P><B> Describe your investment experience </B></P>
<P>
<INPUT TYPE = radio NAME = Radio_example VALUE =
Radio-0> Beginner
<INPUT TYPE = radio NAME = Radio_example VALUE =
Radio-1> Intermediate
<INPUT TYPE = radio NAME = Radio_example VALUE =
Radio-2> Expert
</P>
<P><B> Types of Investments you make </B></P>
<P>

HTML v JavaScript

Trang 63

VIETHANIT

Chng 3. Lm vic vi bng, biu mu, khung v a phng tin


<INPUT TYPE = checkbox NAME = Checkbox_example
VALUE = Checkbox-0> Individual Stocks
<INPUT TYPE = checkbox NAME = Checkbox_example
VALUE = Checkbox-1> Options
<INPUT TYPE = checkbox NAME = Checkbox_example
VALUE = Checkbox-2> Mutual Funds <BR> </P>
<P><B> What is your stock pick for this year? </B></P>
<P><INPUT TYPE = text name = Textfield size = 30
MAXLENGTH = 30></P>
<P>
<INPUT TYPE = submit NAME = Submit VALUE =
Submit>
<INPUT TYPE = reset NAME = Reset VALUE = Reset>
</P>
</FORM>

</BODY>
</HTML>

Kt qu:

Hnh 3.8: Minh ho mt s phn t trong biu mu


3.2.3.9 Phn t TextArea

HTML v JavaScript

Trang 64

VIETHANIT

Chng 3. Lm vic vi bng, biu mu, khung v a phng tin

Phn t ny to ra mt iu khin nhp vn bn trn nhiu dng so vi hp vn


bn nhp mt dng. Ta phi xc nh kch thc ca TextArea. Ta cng phi xc nh
s dng, s ct trong TextArea. Tuy nhin, ta phi kt thc phn t vi th ng
</TEXTAREA>
Bng 3.9: Cc thuc tnh ca phn t TextArea
Thuc tnh

M t

COLS

Truy xut rng ca TextArea

ROWS

Thit lp hoc truy xut s hng ngang trong <TEXTAREA>

SIZE

Thit lp hoc truy xut kch thc ca iu khin

TYPE

Truy xut loi iu khin, s dng gi tr <TEXTAREA>

VALUE

Thit lp hoc truy xut gi tr ca TEXTAREA

Chng hn:
<TEXTAREA NAME = Text1 COLS = 20 ROWS = 5> </TEXTAREA>
3.2.3.10

Phn t BUTTON

Phn t ny to ra iu khin Button. Khi ngi dng nhp vo nt Submit, biu


mu c nhn x l. Cp tn/gi tr ca nt submit c nhn cng vi biu mu.
Bng 3.10: Cc thuc tnh ca phn t Button
Thuc tnh

M t

NAME

Gn tn cho nt

VALUE

Gn gi tr cho nt

TYPE

Xc nh loi nt. Cc gi tr c th l:
Submit - to nt nhn biu mu khi c nhp vo
Button - to nt kch hot mt script khi c kch vo
- Reset - To nt thit lp li (Reset) biu mu v cc gi tr
ca cc iu khin trong biu mu.

Mt nt (BUTTON) c hai loi l submit (type = submit) ging nh mt phn t


INPUT ca loi nt. S khc nhau ch khi phn t BUTTON c nhp vo th cp
tn/gi tr c nhn cng biu mu. Mt nt c loi l submit cng cha mt nh v
ging mt phn t INPUT c loi l nh. S khc nhau ch phn t INPUT c dng
mt nh phng trong khi phn t BUTTON th hin th nh mt nt c hiu ng
ln/xung khi nhp vo.
V d 3.8: Chng trnh sau minh ho cho vic s dng phn t TEXTAREA v
BUTTON
<HTML>

HTML v JavaScript

Trang 65

VIETHANIT

Chng 3. Lm vic vi bng, biu mu, khung v a phng tin

<HEAD>
<TITLE> Sample form </TITLE>
</HEAD>
<BODY>
<FORM ACTION = http://www.mysite.com/FormSite METHOD =
POST>
<B><CENTER><H2 align
</H2></CENTER></B>

left>

Sample

Stock

Survey

<P><B> Any Investment Advice for others? </B></P>


<TEXTAREA NAME = TextArea ROWS = 7 COLS = 20>
</TEXTAREA>
<P>
<BUTTON TYPE = submit NAME = Submit VALUE =
Submit> Send <IMG src = send.jpg> </BUTTON>
<BUTTON TYPE = reset NAME = Reset VALUE = Reset>
Reset <IMG src=reset.jpg> </BUTTON>
</P>
</FORM>
</BODY>
</HTML>

Kt qu:

HTML v JavaScript

Trang 66

VIETHANIT

Chng 3. Lm vic vi bng, biu mu, khung v a phng tin

Hnh 3.9: Minh ho phn t TEXTAREA v BUTTON


3.2.3.11

Phn t Select

Phn t SELECT c s dng hin th mt danh sch cc la chn cho


ngi dng. Mi la chn c biu din bi phn t OPTION. Mt phn t SELECT
phi cha t nht mt phn t OPTION. Thnh phn c chn la s hin th vi mu
khc so vi cc thnh phn cn li.
Bng 3.11: Cc thuc tnh ca phn t SELECT
Thuc tnh
NAME

SIZE
MULTIPLE

M t
Gn tn cho phn t. Khi biu mu c gi i, thuc tnh tn
c gn vi gi tr chn la.
Nu c nhiu s chn la, ngi dng s dng chc nng
cun, thuc tnh ny xc nh s dng trong danh sch c
hin th
L thuc tnh logic cho php ngi dng chn mt hoc nhiu
chn la.

Mi la chn trong hp chn c ly gi tr thng qua vn bn m t ca n,


xem n c c chn hay khng.
Mng OPTION c to ra theo danh sch la chn trong phn t SELECT. Mi
la chn c thuc tnh Text v Selected cho php chng ta kim tra tu chn c
c chn hay khng v truy xut vn bn ca la chn theo th t. By gi ta c th
kim tra mi phn t trong mng v xc nhn n.
HTML v JavaScript

Trang 67

VIETHANIT

Chng 3. Lm vic vi bng, biu mu, khung v a phng tin

V d 3.9:
<HTML>
<HEAD>
<TITLE> Sample form </TITLE>
</HEAD>
<BODY>
<FORM ACTION = http://www.mysite.com/FormSite METHOD =
POST>
<B><CENTER><H2 align
</H2></CENTER></B>

left>

Sample

Stock

Survey

<P><B> How do you buy your stocks? </B>


<SELECT NAME = Select example>
<OPTION></OPTION>
<OPTION>1. Online</OPTION>
<OPTION>2. Touch Tone Trading</OPTION>
<OPTION>3. Broker Assisted</OPTION>
<OPTION>Other</OPTION>
</SELECT>
<BR><BR><BR>
<INPUT TYPE = submit NAME = Submit VALUE = Submit>
<INPUT TYPE = reset NAME = Reset VALUE = Reset>
</P>
</FORM>
</BODY>
</HTML>

Kt qu:

HTML v JavaScript

Trang 68

VIETHANIT

Chng 3. Lm vic vi bng, biu mu, khung v a phng tin

Hnh 3.10: Minh ho phn t SELECT


Phn t OPTGROUP c s dng nhm cc la chn vo mt cy phn cp.
V d, bng ni dung c th c tn cc chng. Cc ch v ch con trong mt
chng c th c nhm vo chng .
Bng 3.12: Cc thuc tnh ca phn t OPTGROUP
Thuc tnh

M t

SELECTED

y l thuc tnh logic s dng chn trc mt tu chn.

VALUE

Xc nh gi tr c nhn vo cho tu chn c chn. Gi


tr ny c gn vi tn ca phn t SELECT. Ni dung ca
phn t OPTION l gi tr mc nh.

LABEL

Xc nh vn bn hin th cho mt tu chn.

V d 3.10:
<HTML>
<HEAD>
<TITLE> Using the Option Group </TITLE>
</HEAD>
<BODY>
<FORM ACTION = http://www.mysite.com/FormSite METHOD =
POST>
<P> <SELECT name = course>
<OPTGROUP>
<OPTION value=InternetIntro> Introduction to HTML

HTML v JavaScript

Trang 69

VIETHANIT

Chng 3. Lm vic vi bng, biu mu, khung v a phng tin


<OPTION value=IntroWeb> Introduction to Web page
designing
</OPTGROUP>
<OPTGROUP>
<OPTION value=VBIntro> Introduction to Visual Basic
<OPTION value=VBDev> Vissual Basic Application
Development
</OPTGROUP>
</SELECT>
</FORM>

</BODY>
</HTML>

Kt qu:

Hnh 3.11: Minh ho phn t OPTGROUP


3.2.3.12

Phn t LABEL

Phn t LABEl c s dng gn thng tin vo cc phn t iu khin. V d,


phn t TEXT khng c nhn xc nh r n. Ta c th gn nhn vo phn t
TEXT khi trang hin th. Ta phi xc nh thuc tnh ID ca iu khin m n c
gn vo.
V d 3.11:
<HTML>
<HEAD>

HTML v JavaScript

Trang 70

VIETHANIT

Chng 3. Lm vic vi bng, biu mu, khung v a phng tin


<TITLE> Using Label </TITLE>

</HEAD>
<BODY>
<H2><CENTER><FONT size = 5 color = hotpink face = arial> Personal
Information </FONT></CENTER></H2>
<HR align = center>
<FORM ACTION = http://www.mysite.com/FormSite METHOD =
POST>
<P>
<LABEL for = firstname> First name: </LABEL>
<INPUT type = text id = firstname> <BR><BR>
<LABEL for = lastname> Last name: </LABEL>
<INPUT type = text id = lastname> <BR><BR>
</P>
</FORM>
</BODY>
</HTML>

Kt qu:

Hnh 3.12: Minh ho phn t LABEL


3.2.4

To biu mu

HTML v JavaScript

Trang 71

VIETHANIT

Chng 3. Lm vic vi bng, biu mu, khung v a phng tin

Chng ta tho lun v phn t <FORM> v cc iu khin c th thm vo


biu mu nhn thng tin ngi dng. Trong phn ny, chng ta s to mt biu mu
nhn thng tin v mt ngi xin vic. Cc nt RESET v SUBMIT thc hin cc
cng vic cn thit.
V d 3.12:
<HTML>
<HEAD>
<TITLE> Job application</TITLE>
</HEAD>
<BODY>
<H1><CENTER><FONT size = 4 color = hotpink> Application Form
</FONT></CENTER></H1>
<HR><BR>
<FORM ACTION = http://www.mysite.com/FormSite METHOD =
POST>
<P>
<LABEL for = name> Name: </LABEL>
<INPUT type = text id = name> <BR>
<P> Area of Interest
<BR><BR>
<INPUT
TYPE=RADIO
CHECKED> Web Designer

NAME=CONTROL1

VALUE=0

<INPUT TYPE=RADIO NAME=CONTROL1 VALUE=1> Web


Administrator
<INPUT TYPE=RADIO NAME=CONTROL1 VALUE=2> Web
Developer
<P> Experience
<SELECT NAME=CONTROL2>
<OPTION> None </OPTION>
<OPTION> 1 year </OPTION>
<OPTION> 2 years </OPTION>
<OPTION> 3 years </OPTION>
</SELECT>
<BR>
<P> Comments
<BR>
<TEXTAREA NAME=CONTROL3 COLS=30 ROWS=5>
Type your comments here </TEXTAREA>

HTML v JavaScript

Trang 72

VIETHANIT

Chng 3. Lm vic vi bng, biu mu, khung v a phng tin


<BR>
<P><INPUT
NAME=CONTROL4
CHECKED> Send acknowledgement

TYPE=CHECKBOX

<BR>
<P><INPUT TYPE=SUBMIT VALUE=OK>
<INPUT TYPE=RESET VALUE=RESET>
</FORM>
</BODY>
</HTML>

Kt qu:

Hnh 3.13: V d mt biu mu n xin vic


Khi c nhiu phn t trong mt form, chng ta cn phi iu khin chng. Sau
y l cc thuc tnh iu khin cc phn t.
3.2.4.1 Thit lp tiu im (Focus)

HTML v JavaScript

Trang 73

VIETHANIT

Chng 3. Lm vic vi bng, biu mu, khung v a phng tin

Mt phn t tr thnh hot ng khi n nhn tiu im. V d, nhp vn bn


vo phn t TEXT, tiu im phi nm trn phn t . Khi phn t mt tiu im, n
s khng hot ng na. Cch n gin nht t tiu im cho phn t l ta kch
vo n bng cch s dng chutm joystick hoc dng bn phm t.
3.2.4.2 Th t tab

Thuc tnh tabindex ca mt phn t xc nh trnh t phn t nhn tiu im


thng qua bn phm. y bao gm cc phn t c lng vo cc phn t khc. Gi
tr c th l bt c s no gia 0 v 32767. Tiu im bt u t phn t c gi tr
tabindex thp nht. Nu ta gn cng mt gi tr tabindex cho hn mt phn t, th cc
phn t nhn tiu im theo th t n xut hin trong ti liu.
Nu phn t no khng h tr thuc tnh tabindex, n s l phn t nhn tiu
im cui cng. Nu ta v hiu ho mt phn t, n s khng c lit k vo th t
tab v n s khng nhn c tiu im.
Chng hn:
<INPUT tabindex=2 TYPE=RADIO NAME=CONTROL1 VALUE=0
CHECKED> Web Designer
<INPUT tabindex=6 TYPE=SUBMIT VALUE=OK>
3.2.4.3 Phm truy cp (Access Keys)

Thuc tnh ny c s dng gn phm truy cp cho phn t. Phm truy cp l


mt k t v thng c s dng cng vi phm ALT. Khi ngi dng nhn phm
truy cp, phn t c xc nh s nhn tiu im v bt u hot ng.
Chng hn:
<LABEL for=name> Name: </LABEL>
<INPUT accesskey=N tabin=1 type=text id=name
<TEXTAREA accesskey=C tabindex=4 NAME=CONTROL3 COLS=30
ROWS=5> Type your comments here </TEXTAREA>
3.2.4.4 Phn t v hiu ho

Nu lm vic vi trnh son tho vn bn, ta s thy rng nu khng m ti


liu no th cc tu chn lu v nh dng s b v hiu ho. i vi trang web, ta c
th v hiu ho cc phn t hoc trng thi ch c (read-only) nu khng mun
ngi dng truy cp chng. V d, khi hin th mt biu mu, ta c th v hiu ho nt
Submit cho n khi ngi dng nhp d liu vo. Thuc tnh v hiu ho c s
dng iu khin vic truy cp mt phn t. Khi mt phn t b v hiu ho, n
khng c lit k trong th t tab. Do vy, iu khin khng nhn c tiu im v
cui cng l cc gi tr ca iu khin b v hiu ho khng c chuyn i cng vi
biu mu. Mt iu khin b v hiu ho c th c kch hot nh cc script lc thc
hin.
Chng hn:
<INPUT TYPE=SUBMIT VALUE=OK DISABELED=True>
3.3 Lm vic vi khung

HTML v JavaScript

Trang 74

VIETHANIT

Chng 3. Lm vic vi bng, biu mu, khung v a phng tin

Khung chia mt ca s trnh duyt thnh nhiu vng ring bit, m mi vng c
th hin th mt trang ring bit c th cun c. Mi khung l mt ca s trong ca
s chnh. V d, ta c th s dng ba khung trong trang web, mt lm biu ng
(banner), mt lm menu iu hng v mt hin th d liu. Mi khung c th c
to, thay i v cun c lp nhau.
Frame 2
Frame 1

Frame 3

Hnh 3.11: M hnh khung trong trang Web


3.3.1

Ti sao s dng khung?

Mt trang c th c mt hoc nhiu khung. Sau y l mt s l do s dng


khung :
Hin th mt biu tng (logo) hoc thng tin tnh trn mt v tr c nh
trn trang Web
i vi bng ni dung trong trang m ngi dng c th kch vo v
di chuyn quanh website m khng cn phi lin tc quay li trang ni
dung.
Nhiu cch hin th cho php ngi thit k gi mt s thng tin tnh no
trong khi cun hay thao tc i vi nhng ni dung khc trn trang
Web.
Tuy nhin, mt hn ch ca vic s dng khung trong trang Web l: khng phi
tt c cc trnh duyt u h tr khung, v d, Internet Explorer phin bn 2.0 hoc
trc v Nescape 1.2 hoc trc . ni dung vn hp l m ngi s dng
khng cn quan tm n trnh duyt c h tr khung hay khng, ngi thit k cn
phi cung cp mt cch khc truy cp vo ni dung.
3.3.2

Lm vic vi khung

3.3.2.1 S dng khung


Mt ti liu HTML chun c phn HEAD v BODY. Mt ti liu HTML s
dng khung th c phn HEAD v phn FRAMESET. Phn FRAMESET xc nh
cch trnh by trong ca s ngi dng. Ta khng th s dng phn t BODY v
FRAMESET cng vi nhau. Trnh duyt ch nhn phn t u tin xut hin trong ti
liu v b qua phn t sau. Ngha l, nu bn s dng phn t BODY, th phn t
FRAMESET sau s b b qua v ngc li.
Khung c to ra bng cch s dng phn t FRAMESET. Cc thuc tnh nh sau:

HTML v JavaScript

Trang 75

VIETHANIT

Chng 3. Lm vic vi bng, biu mu, khung v a phng tin


Bng 3.13: Cc thuc tnh ca phn t FRAMESET

Thuc tnh
ROWS

M t
Xc nh rng ca khung, c tnh theo im (pixels),
phn trm hoc rng tng i. Gi tr mc nh l 100%,
ngha l mt dng.
Xc nh cao ca khung, c tnh theo im (pixels), phn
trm hoc cao tng i. Gi tr mc nh l 100%, n xc
nh ch c mt ct.

COLS

Phn t FRAME xc nh hnh thc v ni dung ca mt khung trong


FRAMESET. V d sau y to hai khung bng nhau, chia i ca s.
V d 3.13:
<HTML>
<HEAD>
<TITLE> Frame example </TITLE>
</HEAD>
<FRAMESET COLS=50%,*>
<FRAME SRC=x.html>
<FRAME SRC=y.html>
</FRAMESET>
</HTML>

Kt qu:

Hnh 3.14: V d FRAME

HTML v JavaScript

Trang 76

VIETHANIT

Chng 3. Lm vic vi bng, biu mu, khung v a phng tin

y ch rng file x.html v y.html c lu cng th mc vi file .html


chnh
Cc thuc tnh ca FRAME bao gm:
Bng 3.14: Cc thuc tnh ca phn t FRAME
Thuc tnh

M t

NAME

Thuc tnh ny gn tn cho khung hin thi

SRC

Thuc tnh ny xc nh v tr ti liu ban u c cha


trong khung.

NORESIZE

y l thuc tnh logic. N qui nh ca s khung khng


c thay i kch thc.
Thuc tnh ny xc nh kiu cun cho ca s khung. Cc gi
tr ny c th l:
Auto: Xut hin thanh cun khi cn thit.
y l gi tr mc nh.

SCROLLING

Yes: Lun lun xut hin thanh cun trong


ca s ca khung.
No: Khng xut hin thanh cun trong ca
s ca khung
Xc nh vin ca khung. Cc gi tr c th l:

FRAMEBORDER

1: l gi tr mc nh. C s phn cch


gia khung hi thi vi cc khung xung quanh.
0: Khng c s phn cch gia khung hin
thi vi cc khung ln cn. Tuy nhin, nu cc khung
ln cnc thit lp th vn xut hin s phn cch ny.

MARGINWIDTH

Xc nh khong cch gia ni dung trong khung vi l tri


v l phi ca khung. Gi tr phi ln hn 1.

MARGINHEIGH
T

Xc nh khong cch gia ni dung trong khung vi l trn


v l di ca khung. Gi tr phi ln hn 1.

Ta khng th ng ca s khung. Khung c ng khi ca s to ra n b ng


li. Khung khng c thanh trng thi v vy ta phi s dng thanh trng thi ca khung
chnh trong ti liu.
V d 3.14:
<HTML>
<HEAD>
<TITLE> Frame example </TITLE>
</HEAD>
<FRAMESET ROWS=50%,*>
<FRAME SRC=x.html SCROLLING=no>

HTML v JavaScript

Trang 77

VIETHANIT

Chng 3. Lm vic vi bng, biu mu, khung v a phng tin


<FRAME SRC=y.html SCROLLING=yes>

</FRAMESET>
</HTML>

Kt qu:

Hnh 3.15: V d FRAME


V d 3.15:
<HTML>
<HEAD>
<TITLE> Frame example </TITLE>
</HEAD>
<FRAMESET COLS=20%,80%>
<FRAMESET ROWS=100,200>
<FRAME SRC=x.html noresize>
<FRAME SRC=y.html>
</FRAMESET>
<FRAME SRC = 9shi.jpg>
</FRAMESET>
</HTML>

HTML v JavaScript

Trang 78

VIETHANIT

Chng 3. Lm vic vi bng, biu mu, khung v a phng tin

Kt qu:

Hnh 3.16: V d FRAME


Trong v d trn, ta s dng phn t FRAMESET lng nhau (Nested framesets).
Ta c th to ra cc frameset lng nhau bt k mc no.
on m sau to 3 ct: Ct 2 c rng l 250 pixel, ct 1 chim 25% khong
cn li v ct 3 chim 75% khong cn li.
V d 3.16:
<HTML>
<HEAD>
<TITLE> Frame example </TITLE>
</HEAD>
<FRAMESET COLS=1*, 250,3*>
<FRAME SRC=x.html >
<FRAME SRC=y.html>
<FRAME SRC = 9shi.jpg>
</FRAMESET>
</HTML>

HTML v JavaScript

Trang 79

VIETHANIT

Chng 3. Lm vic vi bng, biu mu, khung v a phng tin

Kt qu:

Hnh 3.17: V d FRAME


3.3.2.2 Lin kt cc khung
Khi to lin kt trong trang web, ta c th thit lp mt khung nh mt mc tiu
ca lin kt (link). Trnh duyt tun theo cc bc sau:
Nu ta xc nh mt khung trong thuc tnh ch (TARGET) ca phn t,
th ti liu c phn t ch ra s c ti vo khung khi phn t c
kch hot.
Nu thuc tnh TARGET khng c thit lp th thuc tnh TARGET
ca phn t BASE s c s dng xc nh khung.
Nu c phn t v phn t BASE khng cp n TARGET, th ti liu
c ti vo khung cha phn t .
Nu khng tm thy khung th trnh duyt to mt ca s v khung mi
sau ti ti liu vo khung mi ny
Thuc tnh TARGET c s dng xc nh tn khung m ti liu c m
trong . Khi to khung, ta cn phi t thuc tnh tn. Tn ny c dng khi to lin
kt. Sau khi thay i ni dung ca mt khung th nh ngha frameset ban u b mt
i. Nu c nhiu lin kt n cng mt ch, ta c th thit lp mt TARGET mc nh
trong phn t BASE. Sau , vic xc nh thuc tnh TARGET trong mi phn t s
khng cn thit na.
V d 3.17:
<HTML>
<FRAMESET COLS=40%, 60%>

HTML v JavaScript

Trang 80

VIETHANIT

Chng 3. Lm vic vi bng, biu mu, khung v a phng tin


<FRAME SRC=img7.jpg NAME=img7 SCROLLING=yes>
<FRAME SRC=Links.html NAME=Links SCROLLING=no>
</FRAMESET>

</HTML>
File Links.html:
<HTML>
<BODY>
<BASE TARGET = Main>
<P><A HREF = x.html> The file, X </A><P>
<P><A HREF = y.html> The file, Y </A><P>
</BODY>
</HTML>

Kt qu:

Hnh 3.18: Lin kt khung


3.3.2.3 Phn t NOFRAMES
Nu trnh duyt khng h tr khung, vi t cch l ngi pht trin ng dng ta
nn cung cp mt cch khc hin th ni dung. Phn t NOFRAMES c s dng
lm vic . N ch hot ng trong trnh duyt khng h tr khung.
V d 3.18:
<HTML>
<FRAMESET COLS=40%, 60%>
<FRAME SRC=img7.jpg NAME=img7 SCROLLING=yes>
<FRAMESET ROWS = 60,*>

HTML v JavaScript

Trang 81

VIETHANIT

Chng 3. Lm vic vi bng, biu mu, khung v a phng tin


<FRAME SRC=x.html NAME=x SCROLLING=no>
<FRAME SRC=y.html NAME=y>
<NOFRAMES>
Frames are not being displayed. Click
href=main.html> for a non-frames version </A>

here

<A

</NOFRAMES>
</FRAMESET>
</HTML>

3.3.2.4 Phn t IFRAMES (inline frame)


Phn t IFRAME c s dng to khung trn dng (inline frame) hay khung
ni (floating frame). Ta c th to v chn mt khung vo mt khi vn bn. Khi trnh
duyt khng h tr khung th ni dung nm trong th IFRAME b tr li. Inline frame
khng th thay i kch thc.
Bng sau m t cc thuc tnh ca IFRAME:
Bng 3.15: Cc thuc tnh ca phn t IFRAME
Thuc tnh

M t

NAME

Gn tn cho khung hin thi

WIDTH

Xc nh rng ca khung trn dng

HEIGHT

Xc nh chiu cao ca khung trn dng

V d 3.19:
<HTML>
<P> It has been good fun. You have been learning about frames
<BR><BR>
<IFRAME
src="x.html"
frameborder=1>

width="100"

height="150"

scrolling=auto

</IFRAME>
<BR>
<P><FONT color=hotpink> The above is an inline frame
</HTML>

Kt qu:
HTML v JavaScript

Trang 82

VIETHANIT

Chng 3. Lm vic vi bng, biu mu, khung v a phng tin

Hnh 3.19: phn t IFRAME


3.4 Lm vic vi a phng tin

Mt trong nhng nhn t ln nht trong s pht trin ca web l s tch hp


ca cc a phng tin (multimedia) bn trong nhng ti liu HTML. Khi nhng
phin bn u tin ca HTML ra i, n cng bao gm cc i tng lin quan n
hnh nh vo trong mt ti liu cho php nhng hnh nh ni tuyn vo ni dung ti
liu. Sau , HTML c m rng cho php nhng khng ch l nhng hnh nh
tnh m cn l m thanh v video. Hin nay, tt c nhng tnh nng c php s
dng lm phong ph thm cho cc trang web.
3.4.1

S dng hnh nh trong ti liu HTML

Nh gii thiu, ta c th chn hnh nh vo mt trang web. Nhng hnh nh


dng chn vo trang web c gi l hnh nh ni tuyn. nh c th l biu tng,
bullet, nh, logo cng ty hoc nhng hnh mang ngha khc.
Ngy nay, c nhiu nh dng ha ang c s dng. Tuy nhin, trn Web
c khc i cht. Ba nh dng ha thng thng c hin th trn hu ht cc
trnh duyt l:
nh GIF (Graphics Interchange Format)
GIF l nh dng thng thng nht c dng trong nhng ti liu HTML.
Nhng file GIF c nh dng khng ph thuc vo nh dng nn v h tr
256 mu. u im ca cc file GIF l chuyn ti kh d dng, ngay c kt ni
s dng Modem tc chm.
nh JPEG (Joint Photographic Expert Group)

HTML v JavaScript

Trang 83

VIETHANIT

Chng 3. Lm vic vi bng, biu mu, khung v a phng tin

Cch nn JPEG l mt lc nn mt thng tin. iu ny c ngha l nh


sau khi b nn khng ging nh nh gc. Tuy nhin trong qu trnh pht li
th nh tt gn nh nh gc. Khi bn lu mt file vi nh dng JPG, bn c
th nh t l nn. T l cng cao th nh cng t ging nh gc.
JPEG h tr hn 16 triu mu v thng c s dng cho cc nh c mu
thc.
C hai file nh dng JPEG (c ui m rng l .jpg) v cc dng GIF u nn
nh bo m ch chuyn ti qua internet c nhanh hn. nh JPG c th
c nn nhiu hn nhng chm hn trong qu trnh hin th so vi nh GIF. C
l chnh l l do ti sao nh GIF c ph bin trong ti liu HTML.
PNG (Portable Network Graphics)
nh dng cho mt file PNG l lossless (khng mt thng tin). Trong nn
lossless, d liu nh c nn m khng b chi tit. Cc file PNG h tr
nh mu thc v di mu xm. Cc file PNG cng c th c nn v chuyn
qua mng.
3.4.1.1 Chn nh tnh

Th IMG c dng chn nhng hnh nh vo trong ti liu HTML. Chng ta


cng c th t th IMG ti v tr m nh c hin th. Th IMG khng c ni dung,
n hin th ni dung bng cch xc inh thuc tnh SRC. C php l:
<IMG SRC = URL>
Trong SRC l thuc tnh v c gi tr l mt URL, ch nh v tr chnh xc
ca file nh.
i khi, ch hnh nh khng ni ln c tt c. Chng ta cn phi cung cp cho
ngi dng mt vi gii thiu v mc ch ca hnh nh. Bn c th canh l ca nh
vi vn bn xung quanh.
Thuc tnh ALIGN ca th IMG c th c s dng iu chnh canh l ca
nh vi vn bn xung quanh.
<IMG ALIGN = position SRC = PICTURE.GIF>
Trong , v tr ca nh c th l trn (TOP), di (BOTTOM), gia
(MIDDLE), tri (LEFT) hoc phi (RIGHT).
V d 3.20:
<HTML>
<HEAD>
<TITLE> Insert an image </TITLE>
</HEAD>
<BODY>
<P><IMG ALIGN=BOTTOM SRC=image1.jpg> Bottom
<P><IMG ALIGN=MIDDLE SRC=image1.jpg> Middle
<P><IMG ALIGN=TOP SRC=image1.jpg> Top

HTML v JavaScript

Trang 84

VIETHANIT

Chng 3. Lm vic vi bng, biu mu, khung v a phng tin

</BODY>
</HTML>

Kt qu:

Hnh 3.20: Chn nh tnh


Ngoi ra, thuc tnh ALT c dng ch ni dung nh nh trong v d sau:
V d 3.21:
<HTML>
<HEAD>
<TITLE> Insert an image </TITLE>
</HEAD>
<BODY>
<P><IMG ALT=Sad SRC=image1.jpg>
</BODY>
</HTML>

HTML v JavaScript

Trang 85

VIETHANIT

Chng 3. Lm vic vi bng, biu mu, khung v a phng tin

Kt qu:

Hnh 3.21: Chn nh tnh vi li ch thch


Nn ca trang cng quan trng nh vn bn. Ngi ta thng s dng mu cho
trang web, mc ch l lm cho ni dung c ni bt. Chng ta cng c th s dng
nh lm nn. lm iu , ta cn phi dng thuc tnh BACKGROUND trong
th BODY.
<BODY BACKGROUND=bimage.gif>
Nu nh nh hn phm vi hin th ca ti liu th nh c xp k nhau lp
y ton b vng hin th.
nh thng cun theo vn bn khi ngi dng ko thanh cun trong trnh duyt.
Nu khng mun nh vy v thay vo ta mun to hiu ng m, ngha l vn bn
th cun cn nh th ng yn, ta thit lp thuc tnh BGPROPERTIES trong th
BODY c gi tr l FIXED.
<BODY BACKGROUND=bimage.gif BGPROPERTIES=FIXED>
Cc nh c chn vo ti liu HTML cng c th s dng nh siu lin kt.
Nhng nh nh th gi l siu nh. Khi ngi dng kch vo nh, s hin th ti liu
hoc file c ch ra trong URL. lm iu ny, ta cn lng nh vo trong th neo
(anchor)
3.4.1.2 Chn nh ng (.GIF) vo ti liu HTML

Trong phn trn, chng ta va tho lun th no l file GIF, v nh rng th


<IMG> c dng chn mt nh vo trong trang web.
V d 3.22:
<HTML>
<HEAD>
<TITLE> Insert an image </TITLE>

HTML v JavaScript

Trang 86

VIETHANIT

Chng 3. Lm vic vi bng, biu mu, khung v a phng tin

</HEAD>
<BODY>
<IMG ALT="Dancing sweets" SRC="dacing sweets.gif">
</BODY>
</HTML>

Kt qu:

Hnh 3.22: Chn nh ng vo trang web


3.4.2

Chn m thanh vo ti liu HTML

Tnh hp dn ca mt trang web tng tc l thng s dng ting bip khi


ngi dng kch hot n mt trang web khc. Mt cch tu chn, mt trang web s
yu cu kt hp ting nhc bn trong n lm cho trang web c tnh hp dn hn.
MIDI l mt nh dng chun ca cc file nhc c dng trong ti liu HTML. Cc
file MIDI cha nhng nt nhc v cc loi nhc c cho cc bn nhc. Nhc c in t
trong card m thanh m phng ting nhc. Ni cch khc, cc file .wav v .au dng
lu m thanh.
thm m thanh vo cho trang web, chng ta phi s dng cc file m thanh
(.wav hay .midi) trn h thng ca chng ta. Chng hn nh,
<BGSOUND SRC = path\sound filename loop = positive number/infinite>
Nu chng ta khng xc nh c ng dn th trnh duyt s tm file m
trang web ang c nh v. Thuc tnh loop xc nh s ln m m thanh s c bt
ln. Ch rng phn t BGSOUND khng c h tr bi Netscape.
Nhc MIDI nh cp trn, ch l mt ting nhc tng hp. Tuy nhin, nu
mun thm vo file nhc ca mnh, chng hn nh ging ni hay mt bi ht c bit
khi trang web c chuyn n, th chng ta cn phi s dng nhng file m thanh
c s ho.

HTML v JavaScript

Trang 87

VIETHANIT

Chng 3. Lm vic vi bng, biu mu, khung v a phng tin

Mt file m thanh c s ho cha nhng thng tin sao chp li mt bn sao


m thanh ng nh file gc ca n. Tn s ti nhng m thanh c a ra lm v d
chun xc nh c cht lng ca file m thanh , tn sut cao hn, cht lng m
thanh tt hn. im hn ch l n cng s lm gia tng kch thc ca file. Nhng
file m thanh c s ho c th c lu trong hai nh dng, l file .au hay .wav.
V d 3.23:
<HTML>
<HEAD>
<TITLE> Insert sound</TITLE>
</HEAD>
<BODY>
<BGSOUND SRC=jinglebell.wav loop=infinite>
<IMG ALT="Dancing sweets" SRC="dacing sweets.gif">
</BODY>
</HTML>
3.4.3

Chn video vo ti liu HTML

Mt file video c th c phn m rng l: .avi, .asf, .ram hay l .ra. chn mt
file video vo ti liu HTML, th <EMBED> c th c s dng. Xem v d sau:
V d 3.24:
<HTML>
<HEAD>
<TITLE> Insert a video file </TITLE>
</HEAD>
<BODY>
<EMBED SRC="T0000011.avi">
</BODY>
</HTML>

Kt qu:

Hnh 3.23: Chn video vo trang web


HTML v JavaScript

Trang 88

VIETHANIT

Chng 4. Style Sheet

CHNG 4

STYLE SHEET
Trc y, mi khi mt trang web c hin th trong mt trnh duyt, ngi ta
khng th thay i bt c th g trn . C ngi dng ln tc gi ca trang web u
khng th c bt k iu khin no i vi cc phn t ca HTML trn trang web. Sau
ny, vi nhng phin bn mi hn ca nhng trnh duyt h tr mt c tnh c
gi l HTML ng. Trong phn ny, chng ta s tho lun v HTML ng v mt s
nhng im mi l m n mang n cho nhng nh thit k web.
Thm vo , phn ny cng tho lun v nhng Style Sheet. Style Sheet l mt
c tnh quan trng c th c s dng trong HTML ng. Mc d trang web khng
cn c mt Style Sheet, nhng vic s dng Style Sheet s mang li nhng li ch nht
nh. Chng ta s tho lun v Style Sheet nh l mt k thut v bng cch no c
th s dng n trong vic thit k v pht trin web.
4.1 DHTML

DHTML (HTML ng) c th c nh ngha nh l mt phn mm c s


dng cho vic m t s kt hp gia HTML, cc Style Sheet v ngn ng script lm
cho ti liu tr nn sinh ng.
Vo nhng ngy u, HTML c pht trin nh mt nh dng ti liu c
dng trao i thng tin trn Internet, vic truyn ti d liu c lp vi nn tng.
Cng ngy, cc trang web cng tr nn hp dn v nhiu mu sc hn lm thu ht
ngi dng. Tuy nhin, hnh dng c bn v ni dung ca nhng trang web vn c
nh. Ngi pht trin rt t hoc khng c s iu khin no c i vi mt trang web
khi n c hin th. Lc ny, HTML vn cn tnh.
4.1.1

Gii thiu DHTML

S ra i ca lp trnh script thm vo phn ng cho cc trang web. Ngi


dng c th tng tc vi trang web. Tuy nhin, mt s hn ch vn cn tn ti. Bt k
s xc nhn d liu no hoc vic lp trnh script u phi c thc hin trn my
ch. thay i ni dung hoc mt kiu ca trang, th trang phi c vit ln
hon ton. Bt c tng tc no ca ngi dng cng u thng qua my Web server.
Vi mi phin bn trnh duyt mi, li thm vo cc c tnh tt hn cho HTML.
Ngy nay, Internet v Netscape Navigator h tr mt m hnh i tng ti liu
Document Object Model m cc phn t HTML v cc th c coi nh mt
i tng. Cc i tng c phng thc, thuc tnh v s kin c th lp trnh
iu khin cc hot ng ca chng. Chng hn nh c php thm vo thay i
mu ca vn bn trong phn t phn on <p> khi ngi dng kch chut ln n.
Cc script (l mt chng trnh nh) c th thc thi trong trnh duyt. iu ny
c ngha l d liu c th c thao tc, nh dng v thay i mt cch nng ng
my khch (client) m khng cn s h tr qu nhiu t my ch (server). Tng tc
ca ngi dng gi y c th c x l bi chnh my khch.

HTML v JavaScript

Trang 89

VIETHANIT

Chng 4. Style Sheet

Lu : Mt ng dng Client/Server c tch ra hai phn l giao din ngi


dng front-end client v phn back-end server. Client l mt phn ca ng dng,
n trnh by d liu i vi ngi dng. Thng thng Client giao din ngi dng
khng thc thi cc chc nng ca c s d liu, thay vo , Client gi cc yu cu d
liu n mt my ch Server, nh dng v hin th kt qu. Vai tr ca my ch
Server cung cp x l hoc thng tin n cho Client. My ch cung cp d liu n
Client, nhng i khi n cn thc hin mt s cng vic x l em li mt kt qu d
liu yu cu. V d nu mt Client yu cu v d liu bn hng cho mt vng c th,
Server cn thc hin chnh xc mt s x l d liu t tp tt c cc d liu v nh
dng n theo yu cu t pha Client.
Mi cng ty Microsoft hay Netscape u c cch trin khai HTML ng ring
ca h. Microsoft tp trung vo dng cc Cascading Style Sheet (CSS). Chng ta c
th dng script tng tc nhng phn t CSS.
Netscape ngc li, da vo cc phng thc dng cc tng. Th LAYER c
dng cung cp hu ht cc thuc tnh ca HTML ng.
Cc c im ca DHTML

4.1.2

DHTML khng dng li mt s phn m rng ca HTML. Phn ny s trnh


by cc c im ca DHTML v cch thc dng n thm vo nhng tnh nng
ng cho trang web.

Kiu ng (Dynamic Style): Trong cc phin bn trc y ca HTML,


nu chng ta mun thay i kiu hay ni dung ca mt trang web sau khi n
c hin th trong trnh duyt th ton b trang phi c np li. iu
c ngha l yu cu phi c gi n my ch thnh mt trang mi hin
th. i vi ngi dng th y l mt qui trnh r rng. Tuy nhin, nu trang
phi c np li thng xuyn s tn nhiu thi gian v lm cho my ch
tr nn qu ti.
Trong DHTML th cch lm ny khc mt cht. Bng cch dng cc bng
kiu (style sheet), chng ta c th xc nh mu, kiu hoc kch c ca ni
dung trang. Ngoi ra c th thay i kiu ca trang m khng cn gi n
my ch (web server) cho mi ln thm vo cc th v thuc tnh. iu c
ngha l chng ta c th thay i mu, font, kch c hoc ni dung vn bn khi
p li nhng tng tc ca ngi dng. Trong DHTML, kiu lin quan n
cch thc, nh dng xut hin trn trang web hn l ni dung. Style bao gm
mu sc, kiu ch, khong cch, tht u dng, nh v v xut hin ca vn
bn.

Ni dung ng (Dynamic Content): c h tr bi Internet Explorer.


y chng ta c th thay i ch v hnh nh trn trang web sau khi n hin
th. Chng ta cng c th thay i ni dung ca trang khi p li d kin
nho vo hay s kin ngi dng kch chut vo.

nh v (Positioning): Cc phin bn ca HTML trc y khng kim


sot c v tr ca mt phn t trn trang web. Theo , v tr chnh xc ca
trang web xt v mt ta th khng th ch ra c. Vic nh v dnh cho
trnh duyt, HTML ch c th m t ni dung v v tr tng i ca cc phn
t.

HTML v JavaScript

Trang 90

VIETHANIT

Chng 4. Style Sheet

Trong DHTML, chng ta c th ch ra v tr chnh xc (tuyt i hay tng


i), mi quan h gia ta x v y. Mt khi trang web c hin th, chng
ta c th di chuyn cc phn t trn trang lm cho n tr nn ng
o nh v tuyt i: Ch r v tr chnh xc theo cc im (pixel).
o nh v tng i: Ch ra v tr tng i ca cc phn t. Trnh duyt x
l vic nh v hin thi.
c im vic nh v cng cho php chng ta xc nh th t sp xp zorder ca cc phn t. C ngha l cc i tng ny nm chng ln i
tng khc.

Lin kt d liu (Data Binding): Trong DHTML, chng ta c th kt ni


mt c s d liu vo bng ca trang web. N c h tr bi Internet
Explorer. Khi trang c np ln, d liu t c s d liu trn my ch c
hin th trong bng. D liu c th c sp xp, lc v hin th cho ph hp
vi yu cu.

Kh nng ti font ch (Downloadable Fonts): c Netscape h tr. y


l mt c im cho php ta chn cc font m tu chn trn trang web. Chng
ta c th gi font trong trang. iu ny m bo rng vn bn trong trang web
lun lun hin th theo font m ta chn. y l c im quan trng bi v
thng thng nu cc font c ch ra khng c trong my ca ngi dng th
trnh duyt s dng font mc nh c sn. iu ny s lm hu b mc ch
ch ra kiu font ca bn.

Scripting: Chng ta c th vit cc script thay i kiu v ni dung ca


trang web. Script ny c lng vo trong trang web.

Cu trc i tng (Object Structure): DHTML theo mt cu trc trc i


tng, ngha l mi phn t c i x nh mt i tng trong cu trc.
Mi i tng c th c truy cp v lp trnh c lp.

4.2 Style sheet

Style sheet c to nn t cc qui tc kiu cch, bo cho trnh duyt bit cch
trnh by mt ti liu. Style sheet l mt k thut thm vo cc kiu (font, mu, khong
cch) cho trang web.
4.2.1 Khi nim, chc nng v cc li ch ca style sheet
Mt tnh nng quan trng ca DHTML l cc style (kiu) ng, ngha l ta c th
thay i kiu ca nhng phn t HTML trn trang sau khi chng c hin th. S
thay i ny c th p ng i vi s tng tc ngi dng hoc thm ch i vi s
thay i tnh trng nh s kin thay i kch thc.
C hai cch thay i kiu trn trang web nh sau:
Thay i kiu ni tuyn
Vit kch bn thay i kiu
Khi s dng kiu ni tuyn, chng ta c th to ra cc kiu ng m khng cn
thm bt c mt kch bn no vo trang web ca mnh.
HTML v JavaScript

Trang 91

VIETHANIT

Chng 4. Style Sheet

Mt kiu ni tuyn l kiu c gn trc tip cho mt phn t no . Kiu ny


khng p dng cho tt c cc phn t thuc mt loi hay mt lp no. Kiu ni tuyn
c nh ngha bng thuc tnh STYLE i vi phn t ca th . Chng hn, nu
mun t mu cho phn t <H1> l mu , chng ta phi t thuc tnh STYLE bn
trong th <H1> nh sau:
<H1 STYLE = color: red>
Nu mun s dng kch bn thay i kiu vo bt c lc no, th ta phi s
dng n i tng kiu (Style Object). i tng kiu h tr mi tnh cht m CSS
h tr i vi cc kiu. dng thuc tnh trong kch bn, ta thc hin nh sau:
B du gch ni ra khi tn ca kiu CSS.
Thay i ch ci u tin ca t sau du gch ni thnh t vit hoa.
Chng hn, font-weight ca CSS tr thnh fontWeight trong DHTML, hoc textalign thnh textAlign
V d 4.1:
<HTML>
<HEAD>
<TITLE> Setting Properties </TITLE>
</HEAD>
<BODY>
<P style = "color: aqua; font-style:italic; text-align:center;"> This paragraph
has an inline style applied to it
<BR>
<P> This paragraph is displayed in the default style
<BR>
<P> Can you see the <SPAN style=color:red> difference </SPAN> in this
line?
</BODY>
</HTML>

Kt qu:
HTML v JavaScript

Trang 92

VIETHANIT

Chng 4. Style Sheet

Hnh 4.1: Kt qu v d 4.1


Li ch ca style sheet: Cc style sheet c th c dng :
Np chng trnh duyt: Mi trnh duyt u c th hin th cc trang web
theo cch ring ca n. Trc y cc nh pht trin khng kim sot
c cc trang web hin th trn trnh duyt, bi v h khng th bit c
trnh duyt no m ngi dng cch na vng tri t s dng. Nh c
cc style sheet, ta c th np chng cc qui c ca trnh duyt v t theo
cch ring ca chng ta. Chng hn, c th xc nh kiu m trong mt
phn t <H1> cn hin th nh sau:
<H1>
<FONT SIZE = 3 COLOR = aqua>
<B> Overriding the browser </B>
</FONT>
</H1>

B cc trang (Page layout): Nhng style sheet c th dng hin th


font thay i mu m khng lm thay i cu trc ca trang web. iu
ny c ngha l vi t cch l mt nh thit k, by gi bn c th tch
bit nhng yu cu v thit k hnh nh trc quan t cu trc logic ca
trang web v a ch l hai chuyn hon ton khc nhau.
Khi s dng cc bin php lin quan trong Stylesheet ca bn, bn c th
th hin cc ti liu sao cho p mt trn bt k mn hnh no v theo bt
k phn gii no.

S dng li cc Stylesheet: Mt khi nh ngha kiu thng tin, chng ta


c th nhng stylesheet bn trong bt k ti liu HTML. Ln lt thay th,
chng ta c th kt ni tt c c trang trn website n stylesheet. iu
ny chc chn rng cc trang web ca chng ta u c cng din mo khi
thng tin c hin th. V vy, bn c th c c nn chung ca trang v
HTML v JavaScript

Trang 93

VIETHANIT

Chng 4. Style Sheet

d nh logo ca trang v mt s thng tin chun (cho cc trang) trong mt


stylesheet. iu ny s m bo c cch nhn v cm nhn thng dng
v trang website. C th hnh dung xem c vi trm trang web v bn phi
xc nh kiu ca cc trang mt cch c lp.
Ch cn lm mt ln tht tt: Chng ta c th to mt stylesheet v c
lin kt n nhiu ti liu. Tt c nhng ti liu s c din mo ging
nhau. Tuy nhin quan trng nht l khi bn thc hin thay i stylesheet
th tt c cc ti liu c kt nt vo stylesheet s b thay i theo.
4.2.2 Quy tc stylesheet
Stylesheet phn cp ( Cascading Style Sheet) nh ngha cc kiu c th p dng
vo trang hoc cc phn t ca trang.
Quy tc kiu (Style Rule): Stylesheet phn cp l mt tp hp cc quy tc. Quy
tc nh ngha kiu ca ti liu. V d, chng ta c th to ra mt quy tc kiu c
xc nh cho tt c phn tiu t <H1> hin th mu vng xanh. Quy tc kiu c th
c p dng vo cc thnh phn c chn ca trang web. V d, chng ta s c th
xc nh mt on vn bn bt k in m v in nghing trn trang. iu ny c gi
l khai bo kiu c sn m nh cc kiu c p dng vo cc phn t ca HTML
n l trn mt trang web.
Style Sheet: L mt danh mc cc quy tc kiu v c th nhng vo bn trong ti
liu HTML. Trong trng hp , n c gi l stylesheet nhng. Stylesheet cng c
th c to ra bng mt file bn ngoi v c lin kt vi ti liu HTML.
Cc quy tc (Rules): Bng kiu c th c mt hay nhiu quy tc. Phn u ca
quy tc gi l b chn (Selector). Mi b chn c cc thuc tnh v cc gi tr lin
quan n n.
RuleSelector {Declarations property:value; property:value;}
Phn ca quy tc c km theo trong phm vi cc du ngoc mc c gi l
khai bo. Khai bo c hai phn, phn trc du hai chm l thuc tnh v phn nm
sau du hai chm l gi tr ca thuc tnh .
Cc khai bo c phn cch bi du chm phy. Ta nn t du chm phy sau
ln khai bo cui cng.
Chng hn nh:
H1 {color:blue}
y, H1 l b chn, color:blue l khai bo
Trong phm vi khai bo:
{property: Value}
Color l thuc tnh, Blue l gi tr.
Mi quy tc c th tch ri nhau trong phm vi th STYLE.
V d 4.2:
<HTML>
<HEAD>

HTML v JavaScript

Trang 94

VIETHANIT

Chng 4. Style Sheet


<STYLE TYPE="text/css">
H1 {color: limegreen}
H1 {font-family: Arial}
H2 {color:limegreen}
H2 {font-family: Arial}
</STYLE>

</HEAD>
<H1> This is the H1 element </H1>
<H2> This is the H2 element </H2>
<H3> This is the H3 element with its default style as displayed in the browser
</H3>
</HTML>

Kt qu:

Hnh 4.2: Kt qu v d 4.2


Thay vo chng ta c th nhm cc quy tc. Mi khai bo c tch ra bi
du chm phy.
V d 4.3:
<HTML>
<HEAD>
<STYLE TYPE="text/css">
H1, H2 {color: limegreen; font-family:Arial;}
</STYLE>
</HEAD>
<H1> This is the H1 element </H1>

HTML v JavaScript

Trang 95

VIETHANIT

Chng 4. Style Sheet

<H2> This is the H2 element </H2>


<H3> This is the H3 element with its default style as displayed in the browser
</H3>
</HTML>

Kt qu:

Hnh 4.3: Kt qu v d 4.3


4.2.3 Cc Selector trong style sheet
Ta c th dng cc gi lp trong cc selector nhng khng th dng chng trong
HTML. V c bn, chng dng nhng thng tin bn ngoi tc ng n vic nh
dng. Chng hn, vi vic s dng cc lp gi, cc lin kt c gh qua c hin th
khc i so vi cc lin kt cha c gh qua nh sau:
A:link {color:red} /*lin kt cha c gh qua
A:visited {color:blue} /* lin kt gh qua
A:active {color:lime} /* lin kt hin thi
Selector c th nh ngha nh l mt chui k t xc nh ra cc phn t v cc
qui tc tng ng p dng cho cc phn t y.
C hai kiu selector c bn:
Selector n
y l nhng selector d s dng nht. Selector n m t mt phn t bt
chp v tr ca n u trong cu trc ti liu. B nhn dng tiu H1 l
mt in hnh. Sau y l mt s kiu ca selector n:
o Selector HTML

HTML v JavaScript

Trang 96

VIETHANIT

Chng 4. Style Sheet


Nhng selector ny s dng tn ca phn t HTML v b i du mc.
V vy, th <P> trong HTML tr thnh P v khi , n c xem nh
l mt selector. V d sau minh ha iu :

V d 4.4:
<HTML>
<HEAD>
<STYLE TYPE="text/css">
P{font-style:italic;font-weight:bold; color:limegreen}
</STYLE>
</HEAD>
<BODY>
<P> These selectors use the name of HTML elements. The only difference
is that you remove the brackets. </P>
</BODY>
</HTML>

Kt qu:

Hnh 4.4: Kt qu v d 4.4


o Selector lp
Nhng selector ny s dng thuc tnh CLASS ca phn t HTML.
Mi phn t khi hin th c mt thuc tnh CLASS c s dng
gn vo mt nh danh (identifier). Ta c th gn mt tn lp duy nht
cho mi phn t khc. Ngoi ra, ta cng c th gn nh danh lp cho
nhiu phn t cng loi khi ta mun hin th cc trng thi khac nhau
so vi dng chun. Chng hn, ta c th mun th <H2> xut hin vi
nhiu mu khc nhau. Trong trng hp , ta s dng nh danh lp
cho th <H2>.
Selector lp c du chm ng trc gi l k t c, theo sau l tn
lp do chng ta chn. Tt hn ht nn chn tn lp theo mc ch ca
chng ch khng nn chn theo tn m t mu sc hay kiu. Chng
HTML v JavaScript

Trang 97

VIETHANIT

Chng 4. Style Sheet


hn, ta c th mun on A hin th ch nghing, nhng on khc th
hin th kiu khc. Trong trng hp , on A c th c b nhn
dng lp l .slant

V d 4.5:
<HTML>
<HEAD>
<STYLE TYPE="text/css">
.water {color:blue}
.danger {color:red}
</STYLE>
</HEAD>
<BODY>
<P class=water>test water
<P class=danger>test danger
<P> no style
<BR>
<EM class=danger>italic</EM>
</BODY>
</HTML>

Kt qu:

Hnh 4.5: Kt qu v d 4.5


Khi xc nh mt lp kiu, ta c th xc nh c phn t HTML no
c th s dng kiu ny.
V d 4.6:

HTML v JavaScript

Trang 98

VIETHANIT

Chng 4. Style Sheet

<HTML>
<HEAD>
<STYLE TYPE="text/css">
P.BLUE {color:blue; font-weight:bold;}
H5.RED {color:red; font-weight:bold;}
</STYLE>
</HEAD>
<H5 CLASS=RED> This is an H5 element that uses the RED class </H5>
<BODY>
<P class=blue>This paragraph uses the class BLUE </P>
<P>This paragraph dose not use the class BLUE </P>
</BODY>
</HTML>

Kt qu:

Hnh 4.6: Kt qu v d 4.6


o Selector ID
Selector ID s dng thuc tnh ID ca phn t HTML. Selector ID
c dng p dng mt kiu vo ring mt phn t no trn
trang web. Chng hn, ta c th s dng mt selector ID p dng
mt kiu c bit no cho phn t <H2>. iu khng c ngha l
mt kiu tng t c p dng cho mt phn t <H2> khc trn trang
, nu khng c xc nh. Tng t vi vic s dng kiu ni
tuyn m nh c th p dng ring cho mt phn t no .
Selector ID c bt u bng du thng (#).
V d 4.7:
<HTML>

HTML v JavaScript

Trang 99

VIETHANIT

Chng 4. Style Sheet

<HEAD>
<TITLE> ID Selector </TITLE>
<STYLE TYPE="text/css">
#control {color:red}
</STYLE>
</HEAD>
<BODY>
<P id="control"> Fire is of this color
<BR>
<P>This paragraph has no style applied
</BODY>
</HTML>

Kt qu:

Hnh 4.7: Kt qu v d 4.7


V d 4.8:
<HTML>
<HEAD>
<TITLE> Combining ID and Class Selectors </TITLE>
<STYLE TYPE="text/css">
.forest {color:green}
.danger {color:red}
#control {color:blue}
</STYLE>
</HEAD>
<BODY>

HTML v JavaScript

Trang 100

VIETHANIT

Chng 4. Style Sheet


<P class=forest>green things
<P class=danger>fire hazards </P>
<EM class=forest> more green things </EM>
<BR>
<EM class=danger>more fire hazards </EM>
<UL>
<LI class=danger>things that burn
<LI class=forest>things that don't burn
</UL>
<P id=control>water

</BODY>
</HTML>

Kt qu:

Hnh 4.8: Kt qu v d 4.8


Selector ng cnh
Selector ng cnh lin quan n ng cnh ca phn t. Chng hn, thnh
thong ta c hai phn t cng gi tr. Phn t chnh hay phn t cha c mt
phn t con bn trong n. thay i kiu ca phn t con, ta phi s dng
selector theo ng cnh. iu ny da trn khi nim k tha, phn t con k
tha kiu c gn cho th cha.
Mt v d in hnh l phn t <BODY>. Khi thm mt phn t vo th
<BODY>, th mi phn t bn trong s k tha cc kiu ca <BODY>.
By gi lm sao kim sot iu ? Suy cho cng, ta khng mun tt c
cc phn t trn trang web xut hin cng mt kiu. Trong trng hp ,
HTML v JavaScript

Trang 101

VIETHANIT

Chng 4. Style Sheet

chng ta phi c s thay i c bit i vi cc phn t con, ni mt cch


khc l s np chng k tha.
V d 4.9:
<HTML>
<HEAD>
<TITLE> Contextual Selector </TITLE>
<STYLE TYPE="text/css">
BODY {color:blue; background:lavender;
font-family:Arial;}
UL {color:red}
</STYLE>
</HEAD>
<BODY>
<UL>
<LI> mangoes
<LI> oranages
<LI> apples
</UL>
<OL>
<LI> mangoes
<LI> oranages
<LI> apples
</OL>
</BODY>
</HTML>

Kt qu:

HTML v JavaScript

Trang 102

VIETHANIT

Chng 4. Style Sheet

Hnh 4.9: Kt qu v d 4.9


Selector UL trong style sheet xc nh cc mc trong danh sch (list item)
c hin th mu . Chng k tha font ch Arial t khai bo BODY, mu
t khai bo UL. Nu ta xc nh font-family trong khai bo UL, n s np
chng ln khai bo ca selector BODY. Khng c selector OL trong style
sheet, v th cc thuc tnh ca OL k tha t selector BODY.
4.2.4 Kt hp v chn mt style sheet vo ti liu HTML
C mt s cch gip ta c th kt hp style sheet vi HTML, l:
1. Phn t Style
2. Thuc tnh Style
3. Phn t Link
Phn t Style
Phn t STYLE c chn vo phn t <HEAD> ca ti liu, tt c cc qui tc
c nh ngha gia th m v th ng. Khi hin th cc trang, ch ti liu no c
nhng STYLE mi c tc ng. V d sau minh ha cho cch s dng phn t
Style:
<Style Type = text/css>
H1 {color:maroon;}
P {color:hotpink; font-family:Arilal;}
</Style>

Thuc tnh Style

Thuc tnh Style c s dng p dng style sheet cho tng phn t. Mt
style sheet c th nh nh mt lut. Khi s dng thuc tnh Style ta c th b qua phn
t Style v t khai bo trc tip vo thuc tnh Style trong th m ca phn t. V d
sau l cch s dng thuc tnh Style:
HTML v JavaScript

Trang 103

VIETHANIT

Chng 4. Style Sheet

<H2 style = color:green; font-family:Arial>


</H2>
R rng l chng ta ch nn dng kiu ny khi mun thay i kiu cho mt phn
t c bit no . Nu ta c d nh p dng cng kiu trn khp ti liu th lc y
y khng phi l cch hay.
Phn t Link
Nu ta mun s dng phn t Link, th style sheet ca ta phi l mt ti liu
ring. Sau chng ta phi thm a ch web ca style sheet vo. Chng hn:
<LINK REL=stylesheet HREF=stylesmine.css TYPE=text/css >

Thuc tnh <rel=stylesheet> phi c khai bo, nu khng th trnh duyt s


khng ti c style sheet.
V d 4.10:
File sheet1.css:
H2 {color:blue; font-style:italic;}
P {color:limegreen;}

File .html
<HTML>
<HEAD>
<TITLE> Linking extenal style sheet</TITLE>
<LINK REL=STYLESHEET TYPE="text/css" HREF="sheet1.css">
</HEAD>
<H2> This is a H2 element </H2>
<BR>
<BODY>
<P>This is a paragraph
</BODY>
</HTML>

Kt qu:

HTML v JavaScript

Trang 104

VIETHANIT

Chng 4. Style Sheet

Hnh 4.10: Kt qu v d 4.10


4.2.5 Thit lp thuc tnh trong style sheet
Chng ta c th thit lp nhiu thuc tnh trong style sheet. Bng sau cho thy
nhiu thuc tnh c th c s dng trong style sheet:
Bng 4.1: Cc thuc tnh thng c s dng trong style sheet
Thuc tnh
Cc thuc tnh font

Tn CSS
Font
font-size
font-style

Cc thuc tnh vn bn

text-align
text-indent
vertical-align

Cc thuc tnh ng vin

border
border-width
border-bottom
border-color

Cc thuc tnh v v tr

Clip
height
left
top
z-index

HTML v JavaScript

Trang 105

VIETHANIT

Chng 5. Tng quan v Javascript

CHNG 5

TNG QUAN V JAVASCRIPT


5.1 Gii thiu v Javascript
5.1.1 Javascript l g?
Vi HTML chng ta bit cch to ra trang Web tuy nhin ch mi mc
biu din thng tin ch cha phi l cc trang Web ng c kh nng p ng cc s
kin t pha ngi dng. Hng Netscape a ra ngn ng script c tn l LiveScript
thc hin chc nng ny. Sau ngn ng ny c i tn thnh Javascript tn
dng tnh i chng ca ngn ng lp trnh Java. Mc d c nhng im tng ng
gia Java v Javascript, nhng chng vn l hai ngn ng ring bit.
Javascript l ngn ng di dng script c th gn vi cc file HTML. N l
ngn ng da trn i tng, c ngha l bao gm nhiu kiu i tng, v d i
tng Math vi tt c cc chc nng ton hc. Javascript c th p ng cc s kin
nh ti hay loi b cc form. Kh nng ny cho php Javascript tr thnh mt ngn
ng script ng.
Ging vi HTML v Java, Javascript c thit k c lp vi h iu hnh. N
c th chy trn bt k h iu hnh no c trnh duyt h tr Javascript. Cc trnh
duyt web nh Netscape Navigator 2.0 hay Internet Explorer 3 tr i c th hin th
nhng cu lnh Javascript c nhng vo trang HTML. Khi trnh duyt yu cu mt
trang, sever s gi y ni dung ca trang , bao gm c m lnh HTML v cc
cu lnh Javascript qua mng ti client. Client s c trang t u n cui, hin th
cc kt qu ca HTML v x l cc cu lnh Javascript khi no chng xut hin.
Cc cu lnh Javascript c nhng trong mt trang HTML c th tr li cho cc
s kin ca ngi s dng nh kch chut, nhp vo mt form v iu hng trang. V
d bn c th kim tra cc gi tr thng tin m ngi s dng a vo m khng cn
n bt c mt qu trnh truyn trn mng no. Trang HTML vi Javascript c
nhng s kim tra cc gi tr a vo v s thng bo vi ngi s dng khi gi tr a
vo l khng hp l.
JavaScript l mt ngn ng kch bn da trn i tng nhm pht trin cc
ng dng Internet chy trn pha client v pha server.
Cc ng dng client c chy trong mt trnh duyt nh Netscape Navigator
hoc Internet Explorer, v cc ng dng server chy trn mt Web server nh
Microsofts Internet Information Server hoc Netscape Enterprise Server.
5.1.2 Tm hiu lch s ca JavaScript
JavaScript c hnh thnh xut pht t nhu cu kt hp cc trang web HTML
vi ni dung c nhng vo trong , chng hn nh Java applet. Tuy nhin,
JavaScript c s dng cho nhiu mc ch khc na. N thng c dng gip
ngi s dng in vo cc biu mu trc tuyn, cung cp h thng di chuyn trong
website thng qua cc menu ng v cc gi mua hng trc tuyn. Trong thc t, c
khong 25% website s dng JavaScript theo cch ny hoc cch khc.
HTML v JavaScript

Trang 106

VIETHANIT

Chng 5. Tng quan v Javascript

Khi tm hiu tc pht trin nhanh chng b sung nhng c im mi ca


cc cng ngh lin qua n web, chng ta thy rng JavaScript kh n nh. Cn 8
nm JavaScript pht trin t phin bn 1.0 n phin bn k tip l 2.0. Nhiu
ngi cm thy bc pht trin chm chp ny va l mt iu may mn, va l iu
khng may mn ca ngn ng ny.
iu may mn l s h tr JavaScript tng i nht qun qua nhiu trnh duyt
v cc phin bn khc nhau. Cc nh pht trin web c th s dng mt chng trnh
JavaScript m khng phi lo lng nhiu v vn tng thch (ngoi tr mt s k
thut gii quyt vn khng tng thch nht nh). JavaScript dnh c s ng
dng rng ri ch yu l nh cc nh pht trin tin tng rng n s lm c vic.
iu khng may mn l trong khi JavaScript ang ng yn th cc ngn ng
khc pht trin lp y nhng khong trng m ngn ng ny cn khim khuyt.
C rt nhiu website hin nay s dng VBScript hoc Java Server Pages (JSP) nh
l mt ngn ng kch bn pha my ch thay v s dng JavaScript. Trong thc t,
phin bn mi nht ca mt trong nhng phn mm my ch web ph bin (iPlanet
Web Server) khng cn tip tc h tr JavaScript na. Tuy nhin, iu ny c th
thay i khi JavaScript 2.0 n nhn c s ch ca cc nh pht trin.
5.1.2.1 Ngun gc ca JavaScript
JavaScript ln u tin xut hin trong phin bn Netscape 2.0 vo nm 1995.
JavaScript lc ch yu c thit k gip vic tch hp cc trang HTML vi
cc Java Applet - mt dng ng dng ca Java c nhng trong cc trang web. Tuy
nhin, cc nh pht trin nhanh chng nhn ra sc mnh tim tng thc s ca n v
rt nhanh chng, JavaScript c s dng b sung tnh tng tc cho cc website phn ln trng hp u khng cn n s h tr ca Java.
5.1.2.2 JavaScript n vi Internet Explorer
Khng bao lu sau khi Netscape Navigator gii thiu JavaScript trong trnh duyt
Navigator 2.0 ca mnh, Microsoft nhn thy tm quan trng ca vic kt hp ngn
ng ny vo trong trnh duyt Internet Explorer ca h. V Netscape khng gi cho
Microsoft m ngun v thm ch m t k thut ca ngn ng ny cn c bo v k
lng, Microsoft buc phi to ra mt phin bn ca ring mnh. Microsoft t tn cho
sn phm ny l Jscript v Netscape ng k bn quyn cho t JavaScript.
Cc phin bn ban u ca JScript khng thc hin cc chc nng theo ng
cch m JavaScript thc hin v v th tnh khng tng thch JavaScript gia hai trnh
duyt l iu m cc nh pht trin phi tnh ti khi lp trnh cho cc trang web ca
mnh.
5.1.2.3 JavaScript tr thnh chun chnh thc
Trong nhng ngy u ca web, tnh tng thch gia cc trnh duyt l mt vn
ln - ln hn rt nhiu so vi ngy nay. Hai hng cung cp trnh duyt ch yu
thc hin cc thay i v HTML v ngn ng Script c gng dnh c s vt
tri ca mnh so vi i th v iu ny gy ra khng t iu phin toi cho cc nh
pht trin web trong vic c gng to ra cc website c th h tr cho c hai loi trnh
duyt. Tht may mn cho chng ta l c hai hng ny bt gay gt vi nhau.

HTML v JavaScript

Trang 107

VIETHANIT

Chng 5. Tng quan v Javascript

Netscape khn kho chuyn JavaScript thnh chun ECMA (European


Computer Manufactures Association) vo nm 1996. ECMA tp trung ch yu vo
vic chun ho phn li ca ngn ng v li nhng phn khc, chng hn nh
DOM JavaScript Document Object Model, cho cc nh pht trin trnh duyt. Kt
qu l tnh tng thch tip tc tn ti gia hai trnh duyt.
ECMA cng b ngn ng kch bn c chun ho gi l ECMAScript vo nm
1997. Sau , h cp nht chun ny hai nm mt ln vi tn gi Edition 2 v Edition
3. JavaScript 1.5 tun th chun Edition 3.
5.1.2.4 JavaScript hin nay pht trin n u?
Chun ECMAScript Edition 4 ln u tin c cng b sau khong 4 nm.
JavaScript 2.0 tun theo bn Edition 4 ca chun ECMAScript v s khc bit gia hai
loi trnh duyt cn li rt nh.
Ngy nay, JavaScript ca Netscape v JScript ca Microsoft u tun theo chun
ECMAScript, mc d mi ngn ng vn cn h tr mt s c im khng c trong
chun.
Bng 1.1: Lit k danh sch cc phin bn ca JavaScript km theo danh
sch nhng trnh duyt ph bin c h tr cho tng phin bn
Phin
bn

Ngy cng
b

Trnh duyt

Tng thch
chun

1.0

12-1995

Navigator 2,
Khng
Internet Explorer 3

1.1

4-1996

Navigator 4,
Mt phn chun
Internet Explorer 4 ECMAScript 1

1.2

12-1996

Navigator 4.06,
ECMAScript 1,
Internet Explorer 5 ISO - 16262

1.3

8-1998

Khng xut hin


trong bt k trnh
duyt no.

ECMAScript 1,
ISO - 16262

1.5

4-2000

Navigator 6 v 7,
Internet Explorer
5.5 v 6, Mozilla 1

ECMAScript 3

2.0

2003

ECMAScript 4

Bn c t k thut dnh cho JavaScript 2.0 c th c tm thy ti website


Mozilla.org: http://www.mozilla.org/js/language/js20/index.html.
5.1.3 Nhng Javascript vo file HTML
Chng ta c th chn cc lnh Javascript vo trong mt ti liu HTML theo
nhng cch sau y:
Nhng cc cu lnh trc tip vo trong ti liu bng cch s dng th
<SCRIPT>.

HTML v JavaScript

Trang 108

VIETHANIT

Chng 5. Tng quan v Javascript

Lin kt file ngun Javascript vi ti liu HTML


t cc biu thc Javascript lm gi tr cho thuc tnh ca th HTML
Dng nh trnh x l s kin trong cc th HTML
5.1.3.1 Dng th <SCRIPT>
M Javascript c nhng vo trong ti liu HTML bng th <SCRIPT>. Chng
ta c th nhng nhiu script vo trong cng mt ti liu, mi script nm trong mt th
<SCRIPT>. Khi trnh duyt gp phi mt th <SCRIPT> no , n s c tng dng
mt cho n khi gp th ng </SCRIPT>. Tip n n s kim tra li trong cc cu
lnh Javascript. Nu gp phi li, n s cho hin th li trong chui cc hp cnh
bo (alert boxes) ln mn hnh. Nu khng c li, cc cu lnh s c bin dch sao
cho my tnh c th hiu c lnh .
C php nh sau:
<script language = JavaScript>
<!
JavaScript statements;
//-->
</script>

Thuc tnh language trong th script ch ra ngn ng m trnh duyt s dng


bin dch script. Chng ta cng c th ch r phin bn JavaScript no s c trnh
duyt s dng. V d:
<script language = JavaScript1.2>

<!--statements //--> l th ch thch. Nhng th ny c dng bo cho trnh


duyt b qua cc cu lnh cha trong n. <! l th m , //--> l th ng ca th ch
thch. Cc th ny khng bt buc phi c, nhng ta nn a chng vo trong cc on
script, bi v ch c Netscape 2.0 v cc phin bn sau mi h tr JavaScript, cc
th ch thch m bo cc phin bn c hoc cc trnh duyt khng h tr JavaScript
s b qua cc cu lnh c nhng trong ti liu HTML.
V d sau nhng Javascript vo trong trang web. Trong v d ny, ngn ng
script c t l JavaScript. Cc th ch thch c dng cc phin bn c ca
trnh duyt b qua script nm trong cc th ch thch. Cc phin bn trnh duyt mi s
thc thi cc cu lnh JavaScript.
V d 5.1:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Phien ban cu se bo qua cau lenh tiep theo>
document.write("Xin chao cac ban!");
//va bat dau thuc hien tu day -->
</SCRIPT>

HTML v JavaScript

Trang 109

VIETHANIT

Chng 5. Tng quan v Javascript

</HEAD>
<BODY>
<P> Chao mung cac ban den voi the gioi cua JavaScript
</BODY>
</HTML>

Kt qu:

Hnh 5.1: Nhng JavaScript vo trong trang Web


Trn l thuyt cc cu lnh JavaScript c th c t bt k ni no trong ti
liu HTML. Tuy nhin, nn t cc cu lnh script trong phn <head> v </head>.
iu ny m bo tt c cc cu lnh u c c v bin dch trc khi n c gi
t trong phn BODY.
5.1.3.2 Dng file bn ngoi
Thng cc cu lnh JavaScript c nhng trong mt ti liu HTML. Tuy
nhin, chng ta c th to ra mt file ring cha m JavaScript. File ny c th c
lin kt vi mt ti liu HTML. Thuc tnh SRC (source) ca th <SCRIPT> dng
ch ra file cha on m JavaScript m n cn s dng. Khi xc nh file ngun, ta c
th dng tn ng dn tng i hoc tuyt i trong thuc tnh SRC.
<script language = JavaScript src=filename.js>
</script>

Trong , filename l file vn bn cha cc m lnh JavaScript, tn file c phn


m rng l .js. N ch c th cha cc cu lnh v cc hm JavaScript, ta khng th
a cc th HTML vo trong n.
Trong v d sau y, c hai file c to ra. File th nht vidu.html l mt file
ti liu HTML, file th hai vidu.js l file vn bn c cha m JavaScript. File ny
c lin kt vi file th nht.
V d 5.2:
HTML v JavaScript

Trang 110

VIETHANIT

Chng 5. Tng quan v Javascript

File vidu.html:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript" src = vidu.js>
</SCRIPT>
</HEAD>
<BODY>
<P> Chao mung cac ban den voi the gioi cua JavaScript
</BODY>
</HTML>

File vidu.js:
document.write (Xin chao cac ban!)

Kt qu:

Hnh 5.2: Dng file JavaScript lin kt vi file HTML


y l mt v d n gin m t tnh nng lin kt cc file ring cha m lnh
JavaScript. Tuy nhin, vic thc hin chc nng lin kt cc file s rt c li khi ta
mun chia s cc hm cho nhiu ti liu HTML. Trong trng hp ny, chng ta c
th to ra mt file .js vi cc hm thng thng, file ny s c lin kt vi cc ti
liu cn n. Nu ta mun iu chnh hoc thm vo mt vi hm, ta ch cn thc hin
thay i trong mt file m thi, thay v phi thc hin trn nhiu ti liu HTML.
5.1.3.3 Dng JavaScript trong trnh x l s kin
Chng ta c th to mt trnh x l s kin cho mt th HTML dng m
JavaScript. Mt s kin l mt hnh ng c h tr bi mt i tng, mt trnh x
l s kin l on m s c thc thi nhm p tr mt s kin. C php l:
<TAG event handler=JavaScript code>
TAG l mt th HTML. Event handler l tn ca trnh x l s kin, v JavaScript
code l mt lot cc cu lnh JavaScript c thc thi khi s kin c kch hot.

HTML v JavaScript

Trang 111

VIETHANIT

Chng 5. Tng quan v Javascript

Trong v d sau y, s kin c kch hot khi ngi dng nhp chut vo phn
t BUTTON. Trnh x l s kin c gi p tr s kin . Trnh x l s kin
c cha m JavaScript c thc thi bi trnh duyt.
V d 5.4:
<HTML>
<HEAD>
<SCRIPT>
function vidu(){
alert ("Xin chao!");
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" VALUE="Bam vao day"
onClick="vidu()">
</FORM>
</BODY>
</HTML>

Kt qu:

Hnh 5.4: Dng JavaScript trong trnh x l s kin


5.1.4 Th <NOSCRIPT> v </NOSCRIPT>

HTML v JavaScript

Trang 112

VIETHANIT

Chng 5. Tng quan v Javascript

Cp th ny dng nh r ni dung thng bo cho ngi s dng bit trnh


duyt khng h tr JavaScript. Khi trnh duyt s khng hiu th <SCRIPT> v n
b l i, cn on m nm trong cp th ny s c Navigator hin th. Ngc li,
nu trnh duyt c h tr JavaScript th on m trong cp th <NOSCRIPT> s c
b qua. Tuy nhin, iu ny cng c th xy ra nu ngi s dng khng s dng
JavaScript trong trnh duyt ca mnh bng cch tt n i trong hp
Preferences/Advanced.
V d 5.5:
<NOSCRIPT>
<B> Trang ny c s dng JavaScript. Do bn cn s dng trnh duyt
Netscape Navigator t version 2.0 tr i
<BR>
<A HREF="http://home.netscape.com/comprd/mirror/index.html">
Hy kch chut vo y ti v phin bn Netscape mi hn
</A>
</BR>
Nu bn s dng trnh duyt Netscape t 2.0 tr i m vn c c nhng
dng ch ny th hy bt Preferences/Advanced/JavaScript ln
</NOSCRIPT>

Kt qu:

Hnh 5.5: Minh ha th <NOSCRIPT> vi Internet Explorer


5.2

Bin, hng v cc kiu d liu trong JavaScript


5.2.1 Bin v phn loi bin

Bin l mt tham chiu n mt v tr trong b nh. N dng cha cc gi tr


c th thay i khi script ang c thc thi. Chng ta s dng cc bin nh tn tng
HTML v JavaScript

Trang 113

VIETHANIT

Chng 5. Tng quan v Javascript

trng cho cc gi tr trong ng dng. Ti mi thi im thc hin, bin c th cha


mt gi tr mi. Khi mun xem, s dng hay thay i gi tr ca bin, ta ch cn dng
tn ca bin.
Cc bin trong JavaScript phi tun th cc qui c t tn sau:
- Tn bin phi c bt u bng mt ch ci, du gch di (_), hoc mt du
la ($).
- Cc k t tip theo c th l ch s (0-9) hoc ch ci.
y lu rng JavaScript c phn bit ch hoa v ch thng, nn tn bin
cha ch hoa v ch thng s l khc nhau. V d bin tong s khc vi bin
Tong.
Khai bo bin:
Chng ta s dng t kha var khai bo bin, ng thi cng c th khi to
gi tr cho bin ngay khi khai bo:
V d: var A = 5;
Ta cng c th khai bo bin bng cch gn gi tr cho n m khng cn t kha
var
V d: B = 7;
Chng ta c th khai bo nhiu bin trn cng mt dng bng cch tch tn cc
bin bng du phy.
Phm vi ca bin:
Phm vi ca bin c xc nh ti v tr m n c khai bo trong script. Khi
mt bin c khai bo ngay phn u ca script, th n c xem l mt bin ton
cc, bi v n c th c s dng mi ni trong ng dng hin thi. Nu ta khai bo
mt bin bn trong mt hm, bin c gi l bin cc b, bi v n ch c s
dng bn trong hm .
S dng t kha var khai bo mt bin ton cc l ty , tuy nhin, bn phi
s dng t kha var khai bo mt bin cc b.
Bn c th truy xut cc bin ton cc khai bo trong mt ca s hoc mt
khung t mt ca s hoc mt khung khc bng cch ch ra tn ca ca s hoc khung
. V d, nu mt bin c tn l phoneNumber c khai bo trong mt ti liu
FRAMESET, th bn c th tham kho n bin ny t mt khung con di dng:
parent.phoneNumber.
5.2.2 Hng
Hng l nhng gi tr c nh m ta c th dng trong script. Gi tr ca hng
khng b thay i trong qu trnh thc hin script.
Chng ta c th to ra mt hng s ch c cng vi tn ca n bng cch s
dng t kha const. Quy c t tn cho hng ging nh cho tn bin, tc l n phi
c bt u vi mt ch ci hoc du gch di v cc k t cn li c th bao gm
cc k t thuc bng ch ci, cc s hay du gch di.
V d: const prefix = 212;
HTML v JavaScript

Trang 114

VIETHANIT

Chng 5. Tng quan v Javascript

Mt hng s khng th thay i gi tr qua php gn hoc c khai bo li trong


khi script ang thi hnh. Cc quy tc v phm vi cho cc hng s ging nh cho cc
bin, ngoi tr t kha const lun lun c yu cu, ngay c cc hng s ton cc.
Nu t kha ny b b qun th c xem nh l mt bin.
Lu l chng ta khng th khai bo mt hng s c tn trng vi tn hm hoc
bin trong cng mt phm vi.
5.2.3 Cc kiu d liu trong JavaScript
Khc vi C++ hay Java, JavaScript l ngn ng c tnh nh kiu thp. iu ny
c ngha l chng ta khng cn phi ch ra kiu d liu khi khai bo bin. Kiu d liu
c t ng chuyn thnh kiu ph hp khi cn thit.
V d 5.6:
<HTML>
<HEAD>
<TITLE> Datatype Example </TITLE>
<SCRIPT LANGUAGE= "JavaScript">
var fruit='apples';
var numfruit=12;
numfruit = numfruit + 20;
var temp ="There are " + numfruit + " "+ fruit + ".";
document.write(temp);
</SCRIPT>
</HEAD>
</HTML>

Cc trnh duyt h tr JavaScript s x l chnh xc v d trn v a ra kt qu


di y:

HTML v JavaScript

Trang 115

VIETHANIT

Chng 5. Tng quan v Javascript


Hnh 5.6: Kt qu ca x l d liu

Trong v d trn. trnh din dch JavaScript s xem bin numfruit c kiu nguyn
khi cng vi 20 v c kiu chui khi kt hp vi bin temp.
Trong JavaScript c cc kiu d liu nh sau: Number (s nguyn hoc s thc),
Logical (hay Boolean), String, Null.
5.2.3.1 Kiu s nguyn
Cc s nguyn c th c biu din trong h thp phn (c s 10), h thp lc
phn (c s 16) hoc h bt phn (c s 8). Mt ch s nguyn thp phn gm c mt
dy cc s m khng c s 0 ng u. Mt s 0 ng u trong mt ch s nguyn
cho bit n c biu din trong h bt phn, nu ng u mt ch s nguyn l 0x
(hoc 0X) th ch ra rng n c biu din trong h thp lc phn.
Cc s nguyn h thp phn bao gm cc s t 0 n 9. Cc s nguyn h thp
lc phn c th bao gm cc s t 0 n 9 v cc ch ci t a n f v A n F. Cc s
nguyn bt phn ch c th bao gm cc s t 0 n 7.
Cc ch s nguyn bt phn khng c tn thnh v b loi khi chun
ECMA-262 n bn 3. JavaScript vn h tr cc ch s nguyn bt phn tng thch
vi cc phin bn trc.
V d v s nguyn:
42
0xFFF
-345
5.2.3.2 Kiu s thc (kiu s du chm ng)
Kiu s thc c th c cc thnh phn sau:
Phn nguyn thp phn (l mt s nguyn thp phn)
Mt du chm thp phn (.)
Phn d (l mt s thp phn khc)
Phn m
Trong phn s m l mt ch e hay E, theo sau l mt s nguyn, c th
c nh du (c t trc bi du + hoc -). Mt s du chm ng phi c t
nht mt con s v mt du chm thp phn hoc e (hay E).
V d v s thc:
3.114
-3.1E12
.1e12
2E-12
5.2.3.3 Kiu Logical (hay Boolean)
Kiu logic c s dng ch hai iu kin: ng hoc sai.
HTML v JavaScript

Trang 116

VIETHANIT

Chng 5. Tng quan v Javascript

Min gi tr ca kiu ny ch c hai gi tr:


true.
false.
5.2.3.4 Kiu chui (String)
Mt chui ch gm khng hoc nhiu k t c t trong cc du nhy kp ()
hoc nhy n (). Mt chui phi c phn nh bi cc du trch dn cng kiu,
tc l c hai du u phi l du nhy n hoc u l du nhy kp.
V d v cc chui:
Hello
Error!
12345
Chng ta c th gi bt c mt phng thc no ca i tng String trn mt
gi tr chui ch - JavaScript s t ng chuyn i chui ch thnh mt i tng
String tm, gi phng thc c yu cu, ri sau loi b i tng String tm.
Khi dng chui, ngoi cc k t thng thng, ta cng c th chn cc k t c
bit vo chui . Cc k t c bit s thc hin mt cng vic c th no .
V d: one line \n another line
Trong v d trn, du \ kt hp vi k t n s mang ngha l sang dng.
Nh vy khi thc hin cu lnh trn th kt qu s hin th l:
one line
another line
Di y l cc k t c bit v ngha ca chng trong cc chui JavaScript:
K t

ngha

\b

Phm li (Backspace)

\f

Sang trang mi (Form feed)

\n

Sang dng mi (new line)

\r

a con tr v u dng hin ti (Carriage return)

\t

Cch mt khong Tab (Tab)

Ngoi ra, chng ta cng c th chn mt s k t c bit khc trong mt chui


bng cch t trc n du backslash (\). y c xem l k t thot (escaping
character).
Du backslash c dng b qua ngha s dng ca k t ng sau n, v
nhiu k t c bit c thit k sn phc v mt chc nng c th no .
V d nu chng ta mun hin th cc k t , hay \ trong chui th s phi t
du backslash pha trc, l \, \ v \\.
5.2.3.5 Kiu null

HTML v JavaScript

Trang 117

VIETHANIT

Chng 5. Tng quan v Javascript

Kiu null ch c duy nht mt gi tr: null. Null mang ngha l khng c d
liu, n thc hin chc nng l gi ch trong mt bin vi ngha l khng c
hu dng g.
S 0 hay mt xu rng v null l cc gi tr khc nhau.
5.3

Cu hi v bi tp
1. M JavaScript thng c nhng vo ti liu HTML bng cch dng th
____________
2. JavaScript c phn bit gia ch hoa v ch thng hay khng? ______
(c/khng)
3.

Nu trnh duyt c h tr JavaScript th on m trong cp th


<NOSCRIPT> v </NOSCRIPT> c c thc hin hay khng? ________
(c/khng)

4. Bin c th c s dng mi ni trong ng dng hin thi c gi l


_________.
5.

Nu ta khai bo mt bin bn trong mt hm, bin c gi l


_____________, bi v n ch c s dng bn trong hm .

6. JavaScript l mt ngn ng kch bn da trn i tng ch pht trin cc


ng dng Internet trn my client? _________ (ng/Sai)
7. Cu lnh no hin th chui sau: He said Hello!
8. Dng JavaScript hin th mt cu thng bo Xin cho cc bn!
9. Cng thc hin cu 8 vi yu cu nhng file JavaScript vo file HTML
(Gi : Vit hai file, file cau9.js v cau9.html )

HTML v JavaScript

Trang 118

VIETHANIT

Chng 6. Ton t v biu thc trong Javascript

CHNG 6

TON T V BIU THC TRONG JAVASCRIPT


6.1 Cc ton t trong JavaScript
6.1.1 Cc ton t thng dng
Cc ton t c s dng thc hin tnh ton trn d liu. D liu y c
th l mt hoc nhiu bin hoc gi tr (ton hng) v tr v mt gi tr mi. Cc ton
t c dng trong cc biu thc vi cc gi tr lin quan n nhau nhm thc hin cc
php ton hoc so snh cc gi tr. Kt qu tr v c th l mt gi tr kiu s, kiu
chui hay kiu logic. JavaScript cho php s dng cc ton t thng dng sau:
Ton t gn
Ton t s hc
Ton t so snh
Ton t logic
Ton t thao tc trn bit
Ton t chui
6.1.1.1 Ton t gn
Ton t gn (du =) dng thc hin vic gn gi tr ca ton hng bn phi
cho ton hng bn tri. V d x = y ngha l ly gi tr ca y gn cho x.
Bn cnh , JavaScript cn h tr mt s kiu ton t rt gn vi ngha c
trnh by trong bng sau:
Bng 6.1: Cc ton t gn trong JavaScript
Kiu gn thng thng

Kiu gn rt gn

x=x+y

x+=y

x=x-y

x-=y

x=x*y

x*=y

x=x/y

x/=y

x=x%y

x%=y

x = x << y

x << =y

x = x >> y

x >> =y

x=x&y

x & =y

x=x^y

x ^ =y

x=x|y

x | =y

HTML v JavaScript

Trang 119

VIETHANIT

Chng 6. Ton t v biu thc trong Javascript

6.1.1.2 Ton t s hc
Cc ton t s hc i hi cc ton hng l cc gi tr s (cc ch hoc cc bin)
v tr v mt gi tr s duy nht. Cc ton t s hc tiu chun l cng (+), tr (-),
nhn (*) v chia (/). Cc ton t ny lm vic ging nh trong hu ht cc ngn ng
lp trnh khc, ngoi tr ton t chia (/) trong JavaScript tr v php chia du chm
ng, tc l php chia khng ct xn kt qu tr v nh n thc hin trong cc ngn
ng khc (nh C hoc Java).
V d: 1/2 s tr v kt qu l 0.5 trong JavaScript, nhng trong C hoc Java th
s tr v kt 0.
Ngoi ra, JavaScript cn cung cp mt s ton t s hc khc nh ton t %, ++,
-- v -.
Cc ton t s hc trong JavaScript v ngha ca chng c trnh by trong
bng sau:
Bng 6.2: Cc ton t s hc trong JavaScript
Ton t

M t

V d

Php cng

a = 5+6 // a = 11

Php tr

a = 7- 2 // a = 5

Php nhn

a = 5*6 // a = 30

Php chia

a = 10+5 // a = 2

Php chia ly phn d. Kt qu


tr v l s d kiu interger a = 10%3 // a = 1
trong php chia hai ton hng.

++

Ton t ny nhn mt ton hng,


v s tng gi tr ca ton hng
ny ln mt n v. Gi tr c x = 5
tr v s ty thuc vo ton t + a = ++x // a=6, x=6
+ nm trc hay nm sau ton b = x++ // b=5, x=6
hng (xem phn ch pha di
bng).

--

Tng t nh ++, ton t -nhn mt ton hng, v s gim


gi tr ca ton hng ny xung x = 5
mt n v. Gi tr c tr v
a = --x // a=4, x=4
s ty thuc vo ton t -- nm
trc hay nm sau ton hng b = x-- // b=5, x=4
(xem phn ch pha di
bng).

Ton t ny s tr v gi tr i
a =5 th -a = -5
(ph nh) ca ton hng.

HTML v JavaScript

Trang 120

VIETHANIT

Chng 6. Ton t v biu thc trong Javascript

Ch :
Trong cc ton t s hc trn, cc ton t +, -, *, /, % c gi l cc ton
t s hc hai ngi, v cc ton t ++, --, - c gi l ton t s hc mt
ngi, c ngha l n ch c tc dng vi mt ton hng i km.
Nu ton t ++ hay -- kt hp vi mt ton t khc, v d nh kt hp vi
ton t gn, th kt qu tr v s l khc nhau ph thuc vo v tr xut
hin trc hay sau ca ++ hay -- vi tn bin, c ngha l y = ++x s cho
ra kt qu khc vi y = x++. Nu ++ hay -- ng trc x th x s c
tng hoc gim mt n v trc khi gi tr x c gn cho y. Nu ++ hay
-- ng sau x th gi tr ca x s c gn cho y trc khi n c tng
hay gim. (Xem v d trong bng trn)
6.1.1.3 Ton t so snh
Cc ton t so snh s so snh cc ton hng ca n v tr v mt gi tr logic
trn c s php so snh c ng hay khng. Ton hng c th l cc s, chui, logic
hay i tng. Cc chui c so snh trn c s th t t in tiu chun, s dng
cc gi tr Unicode. Kt qu tr v ca ton t ny l mt gi tr true (ng) hoc false
(sai).
Bng sau m t cc ton t so snh v ngha ca chng trong JavaScript:
Bng 6.3: Cc ton t so snh trong JavaScript
Ton t so snh

==
(Bng)

!=
(Khng bng)

===
(Bng tuyt i)
!==

M t

V d
(tr v kt qu true)

Tr v gi tr true nu cc ton 3 == var1


hng bng nhau. Nu hai ton 3 == var1
hng
khng
cng
kiu,
JavaScript s th i cc ton 3 = 3
hng thnh mt kiu tng ng
so snh.
Tr v gi tr true nu cc ton var1 !=4
hng khng bng nhau. Nu hai var2 !=3
ton hng khng cng kiu,
JavaScript s th i cc ton
hng thnh mt kiu tng ng
so snh.
Tr v gi tr true nu hai ton 3===var1
hng bng nhau v c cng
kiu.

(Khng bng
tuyt i)

Tr v gi tr true nu cc ton var1!==3


hng khng bng nhau v/hoc 3!==3
khng cng kiu.

>

Tr v gi tr true nu ton hng var2>var1

HTML v JavaScript

Trang 121

VIETHANIT

Chng 6. Ton t v biu thc trong Javascript

(Ln hn)
>=
(Ln hn hoc
bng)
<
(Nh hn)
<=
(Nh hn hoc
bng)

bn tri ln hn ton hng bn


phi.
Tr v gi tr true nu ton hng var2>=var1
bn tri ln hn hoc bng ton var1>=3
hng bn phi.
Tr v gi tr true nu ton hng var1<var2
bn tri nh hn ton hng bn
phi.
Tr v gi tr true nu ton hng var1<=var2
bn tri nh hn hoc bng ton var2<=5
hng bn phi.

Trong cc v d bng trn, ta gi s rng var1 c gn gi tr l 3 v var2


c gn gi tr l 4.
6.1.1.4 Ton t logic
Cc ton t logic c s dng tiu biu cho cc gi tr Boolean, khi cc ton
hng c gi tr l boolean th chng tr v gi tr kiu boolean. Tuy nhin, cc ton t
&& v || thc s tr v gi tr ca mt trong cc ton hng ch nh. Nh vy nu cc
ton t ny c gn vi cc gi tr khng c kiu boolean, th chng c th tr v mt
gi tr khng c kiu boolean. Cc ton t logic c m t trong bng sau:
Bng 6.4: Cc ton t logic trong JavaScript
Ton t

S dng

M t
Ton t logic AND, tr v gi tr l bt1
nu bt1 c th c chuyn i tng
ng thnh false; ngoi ra tr v bt2.

&&

bt1 && bt2

Nh vy khi s dng n vi cc gi tr
boolean, && tr v true nu c hai ton
hng u l true, ngoi ra tr v gi tr
false.
Ton t logic OR tr v gi tr bt1 nu
bt1 c th c chuyn i tng ng
thnh true, ngoi ra tr v bt2.

||

HTML v JavaScript

bt1 || bt2

!bt

Nh vy, khi s dng vi cc gi tr


boolean, || tr v true nu mi ton hng
l true; nu c hai ton hng l false th
tr v gi tr false.
Ton t logic NOT tr v false nu ton
hng ca n c th c chuyn i
tng ng thnh true; ngoi ra tr v
true
Trang 122

VIETHANIT

Chng 6. Ton t v biu thc trong Javascript

T nhng m t trn, ta rt ra c bng chn tr (vi cc gi tr boolean) sau:


Bng 6.5: Bng chn tr cho cc ton t logic
bt1

bt2

bt1 && bt2

bt1 || bt2

!bt1

True

True

True

True

False

True

False

False

True

False

False

True

False

True

True

False

False

False

False

True

Cc biu thc c th c chuyn i tng ng thnh false l cc biu thc


c nh gi tr l null, 0, chui rng () hoc khng xc nh.
i vi cc gi tr khc (khng phi l boolean) ta xt cc v d sau:
A1 =cat && dog // tr v gi tr dog
A2 = false && dog // tr v gi tr false
A3 =cat && false // tr v gi tr false
A4 =cat || dog // tr v gi tr cat
A5 =false || dog // tr v gi tr dog
A6 =cat || false // tr v gi tr cat
A7 =!cat // tr v gi tr false
nh gi tr ngay lp tc
V cc biu thc logic c nh gi tr t tri sang phi, nn chng c kim
tra c th nh gi tr ngay lp tc bng cch s dng cc lut sau:
false && anything c nh gi tr ngay lp tc l false
true || anything c nh gi tr ngay lp tc l true
Cc lut logic m bo rng vic nh gi tr ny lun chnh xc. y lu
rng phn anything ca cc biu thc trn khng cn thit phi nh gi tr, ni cch
khc l vic thc hin cc biu thc trn s khng cn quan tm ti gi tr ca
anything.
6.1.1.5 Ton t thao tc trn bit
Cc ton t thao tc bit xem xt cc ton hng ca chng nh mt tp hp 32 bit
(cc s 0 v s 1), thay v cc s thp phn, thp lc phn v bt phn. V d, s thp
phn 9 c chui nh phn m t l 1001. Cc ton t thao tc bit thc hin cc hot
ng ca chng trn cc chui bit m t nh vy, nhng chng tr v cc gi tr s tiu
chun ca JavaScript.
Bng sau y m t cc ton t thao tc trn bit ca JavaScript:

HTML v JavaScript

Trang 123

VIETHANIT

Chng 6. Ton t v biu thc trong Javascript


Bng 6.6: Cc ton t thao tc trn bit

Ton t

S dng

M t

a&b

Tr v gi tr 1 trong mi v tr bit,
nu cc bit tng ng ca hai ton
hng u c gi tr l 1.

OR

a|b

Tr v gi tr 1 trong mi v tr bit,
nu cc bit tng ng ca mt hoc
hai ton hng c gi tr l 1.

XOR

a^b

Tr v gi tr 1 trong mi v tr bit,
nu cc bit tng ng ca c hai ton
hng khng cng bng 1.

NOT

~a

o cc bit ca ton hng

Dch tri

a << b

Dch chui bit m t gi tr a sang tri


b bit, thm cc s 0 vo bn phi.

a >> b

Dch chui bit m t gi tr a sang


phi b bit, loi b i cc bit b y ra
ngoi.

a >>> b

Dch chui bit m t gi tr a sang


phi b bit, loi b i cc bit b y ra
ngoi, in cc s 0 vo bn tri

AND

Dch phi nhn


du
Dch phi in
gi tr 0

Ta chia cc ton t thao tc trn bit ra lm hai loi: Cc ton t logic thao tc bit
(&, |, ^, ~) v cc ton t dch ca thao tc bit (<<, >> v >>>).
Cc ton t logic thao tc bit
Cc ton t logic thao tc bit lm vic nh sau:
Cc ton hng c i thnh cc s nguyn 32 bit v c biu din
bng mt chui bit (0 v 1)
Mi bit trong ton hng th nht c ghp vi bit tng ng trong ton
hng th hai: bit u vi bit u, bit th hai vi bit th hai
Ton t c p dng cho mi cp bit v gi tr tr v c xy dng t
kt qu ca vic p dng ton t cho cc cp bit .
V d, s 9 c m t bng dy bit 1001, v s 15 c m t bng dy bit
1111, khi cc ton t thao tc bit c p dng cho cc gi tr ny th kt qu tr v
nh sau:

15 & 9 = 9 (1111 & 1001 = 1001)

15 | 9 = 15 (1111 | 1001 = 1111)

15 ^ 9 = 6 (1111 ^ 1001 = 0110)

Cc ton t dch ca thao tc bit

HTML v JavaScript

Trang 124

VIETHANIT

Chng 6. Ton t v biu thc trong Javascript

Cc ton t dch bit cn hai ton hng, ton hng th nht l s c dch, v
ton hng th hai ch ra s v tr m ton hng th nht c dch chuyn. Hng ca
ton t dch chuyn bit c ch ra bi ton t s dng.
Cc ton t dch chuyn s i cc ton hng th nht thnh s nguyn 32 bit,
dch theo hng ca ton t yu cu sang s bc dch c ch ra ton hng th
hai, v sau tr v kt qu cng kiu vi ton hng th nht.
Cc ton t dch chuyn v ngha ca chng c lit k v phn tch trong
bng sau:
Bng 2.7: Cc ton t dch chuyn bit
Ton t
<<
(Dch tri)

>>
(Dch phi duy
tr du)

>>>
(Dch phi in
0)

M t

V d

Ton t ny dch chuyn ton


hng u tin sang tri mt s bit
xc nh bi ton hng th hai.
Cc bit y sang tri b loi b,
in cc bit 0 vo bn phi

9 << 2 = 36

Ton t ny dch chuyn ton


hng u tin sang phi mt s bit
xc nh bi ton hng th hai.
Cc bit y sang phi s b loi b.
Sao chp cc bit bn tri nht
c dch vo t bn tri. Chnh v
vy m du ca ton hng th nht
c duy tr sau php dch ny.

9 >> 2 = 2

Ton t ny dch ton hng th


nht sang phi mt s bit xc nh.
Cc bit y ra ngoi b loi b.
Cc bit 0 c in vo bn tri.

19 >>> 2 = 4

(v 9 c vit thnh
1001, dch sang tri
hai bit thnh 100100,
tc l bng 36 )

(v 1001 dch sang


phi hai bit thnh 10,
tc l 2)
-9 >>2 = -3
(bi v du c duy
tr)

(v 19 c chuyn
thnh 10011, dch phi
2 bit thnh 100, tc l
i vi cc s khng m, dch 4)
phi in gi tr 0 v dch phi duy
tr du c cng kt qu.

6.1.1.6 Ton t chui


Cc ton t so snh c th c s dng cho cc gi tr chui, ton t ni (+) ni
hai gi tr chui vi nhau, v tr v mt chui mi l s hp nht ca hai chui ton
hng.
V d: my + string tr v chui mystring
Ton t gn vit gn += c th cng c s dng ni cc chui. V d, nu
bin mystring c gi tr l alpha, th biu thc mystring += bet c gi tr l
alphabet v gn gi tr ny cho bin mystring.

HTML v JavaScript

Trang 125

VIETHANIT

Chng 6. Ton t v biu thc trong Javascript

6.1.2 Mt s ton t khc


Mt s ton t t s dng trong JavaScript v khng c xp vo loi c th
no. Nhng ton t ny c lit k di y:
6.1.2.1 Ton t iu kin
Ton t iu kin l mt ton t ca JavaScript cn ba ton hng . Ton t c th
c mt trong hai gi tr ty thuc vo iu kin.
C php:
condition ? val1 : val2

Nu iu kin l true, th ton t c gi tr l val1. Nu khng th n c gi tr l


val2.
V d: status = (age >= 18) ? adult : minor
Cu lnh ny gn gi tr adult cho bin status nu age >= 18. Ngc li, n gn
cho bin ny gi tr minor
6.1.2.2 Ton t du phy
Ton t du phy (,) nh gi tr cho c hai ton hng ca n v tr v gi tr ca
ton hng th hai. Ton t ny c s dng ch yu trong vng lp for, cho php
nhiu bin c gn gi tr ban u hoc nhiu bin c cp nht li gi tr thng qua
mi bc lp.
V d: Xt bi ton tnh tng cc s t 1 n 10 dng vng lp for. Ta s khi
to gi tr ban u cho hai bin, bin dem=1 v bin tong=0, lc ny ta s s dng ton
t du phy.
for (var dem=1,tong=0;dem<=10;dem++)
tong += dem;

6.1.2.3 Ton t new


Chng ta c th s dng ton t new to ra mt th hin (instance) ca kiu
i tng c nh ngha bi ngi s dng hoc mt kiu i tng c nh
ngha trc nh Array, Boolean, Date, Function, Image, Number, Object, Option,
RegExp, hoc String. Trn server ta cng c th s dng n vi DbPool, Lock, File,
hoc SendMail.
C php ca ton t ny nh sau:
objectName= new objectType (param1 [,param2] [,paramN])

6.1.2.4 Ton t typeof


Ton t typeof tr v chui cho bit tn kiu d liu ca ton hng. Ton hng c
th l mt chui, mt bin, t kha, hoc i tng.
C php: typeof (operand)
Trong du ngoc n khng bt buc.
V d: Gi s ta c cc bin:
var x = 5;
HTML v JavaScript

Trang 126

VIETHANIT

Chng 6. Ton t v biu thc trong Javascript

var shape = round;


Ton t typeof tr v cc kt qu sau cho cc bin ny:
typeof x is number
typeof shape is string.
Vi t kha true v null, ton t typeof tr v cc kt qu sau:
typeof true is boolean
typeof null is object
on m sau minh ha cho cc trng hp trn:
V d 6.1:
<HTML>
<HEAD>
<SCRIPT>
var x=5;
var shape= "round"
document.write(typeof (x));
document.write("<br>"+ typeof (shape));
document.write("<br>"+ typeof (true));
document.write("<br>"+ typeof (null));
</SCRIPT>
</HEAD>
</HTML>

Kt qu:

Hnh 6.1: Ton t typeof

HTML v JavaScript

Trang 127

VIETHANIT

Chng 6. Ton t v biu thc trong Javascript

6.1.2.5 Ton t this


Cu lnh this ch ra i tng hin hnh v c th c cc thuc tnh chun
chng hn nh tn, di v gi tr c p dng ph hp. Cu lnh this ch c
dng trong phm vi ca mt hm hay cc tham chiu khi gi hm.
C php:
this [.property]

Nu khng c i s th n s thng qua i tng hin hnh. Tuy nhin, chng


ta nn gn vo mt thuc tnh hp l a ra kt qu.
V d 6.2:
<HTML>
<HEAD>
<script>
function dispname (name) {
alert("welcome, "+name);
}
</script>
</HEAD>
<form>
<B> Enter your name: </B>
<INPUT TYPE = "text" NAME =
onChange="dispname(this.form.text1.value)">

"text1"

SIZE

20

</form>
</HTML>

Kt qu:

Hnh 6.2: Ton t this


HTML v JavaScript

Trang 128

VIETHANIT

Chng 6. Ton t v biu thc trong Javascript

6.1.3 Th t u tin ca cc ton t


Khi c nhiu ton t trong cng mt biu thc, u tin ca ton t xc nh
th t thc hin ca cc ton t . Mt biu thc c c t tri sang phi v c
thc hin t cc ton t c u tin cao n cc ton t c u tin thp hn. Nu
mun thay i trt t thc hin ca cc ton t, chng ta phi s dng cc cp du
ngoc n ( ).
Bng di y lit k u tin ca cc ton t t thp n cao:
Bng 6.8: u tin ca cc ton t
Kiu ton t

Cc ton t

Du phy
Php gn

= += -= *= /= %= <<= >>= >>>= &= ^= |=

iu kin

?:

Ton t logic OR

||

Ton t logic AND

&&

Ton t thao tc bit OR

Ton t thao tc bit XOR

Ton t thao tc bit AND

&

So snh bng

== != === !==

Quan h

< <= > >=

Ton t dch chuyn trn bit << >> >>>


Cng/Tr

+-

Nhn/Chia

*/%

Ph nh/Tng

! ~ - ++ --

6.2 Cc biu thc trong JavaScript


s dng cc bin hiu qu, ta phi c th thao tc v tnh ton chng mi khi
cn thit. Chng ta thc hin c iu ny nh s dng cc biu thc (expression).
Mt biu thc l mt tp hp hp l gm cc hng, cc bin v cc ton t
tnh ton v tr v mt gi tr n. Gi tr ny c th l mt s, mt chui hay bt k
mt gi tr logic no .
C hai kiu biu thc: gn mt gi tr cho mt bin, v n gin l ch c mt gi
tr. V d, biu thc x = 7 l biu thc m bin x c gn gi tr l 7. Biu thc ny t
n nh gi tr l 7. Cc biu thc nh vy s dng cc ton t gn. Mt v d khc, ta
c biu thc 3 + 4 nh gi tr l 7, n khng thc hin php gn.Cc ton t c s
dng trong cc biu thc nh vy n gin c tham kho ti nh l cc operator
(ton t).
JavaScript c cc biu thc sau y:

HTML v JavaScript

Trang 129

VIETHANIT

Chng 6. Ton t v biu thc trong Javascript

S hc: nh gi tr l mt s, v d 3.14159
Chui: nh gi tr l mt chui k t, v d Fred hoc 1234
Logic: nh gi tr l true hoc false
i tng: nh gi tr l mt i tng
6.2.1 Biu thc regular
Biu thc regular l cc mu c s dng so khp cc lin kt k t trong
cc chui. Vi biu thc regular, ta c th tm kim theo mu trong cc chui k t do
ngi dng nhp vo. V d, ta to mt mu tm kim gm t cat v s tm kim tt
c cc xut hin ca t ny trong mt xu no . Trong JavaScript, cc biu thc
regular cng l cc i tng.
Mu tm kim ca biu thc regular c th bao gm:
S dng cc mu n gin
Cc mu n gin c xy dng t cc k t m bn mun so khp trc tip. V
d, mu /abc/ so khp s lin kt k t trong cc chui ch khi cc k t abc i lin
nhau theo th t mt cch chnh xc. Nh vy vic so khp s thnh cng trong chui
Hi, do you know your abcs?, v khng c s so khp trong chui Grab crab bi
v n khng cha chui con abc.
S dng cc k t dc bit
Khi tm kim mt trng khp yu cu nhiu iu hn vic so khp trc tip, nh
vic tm mt hoc nhiu k t b chng hn, hoc tm cc khong trng, mu c cha
cc k t c bit. V d, mu /ab*c/ so khp vi bt c lin kt k t no, trong k
t duy nht a c theo sau bi khng hoc nhiu k t b (* c ngha l khng
hoc nhiu k t c sn) v ngay lp tc c theo sau bi k t c. Trong chui
cbbabbbbcdebc mu so khp l chui con abbbbc.
Bng sau lit k v m t mt s k t c bit c th c s dng trong cc
biu thc regular:
Bng 6.9: Cc k t c bit trong cc biu thc regular
K t
\

ngha

V d

C mt trong cc ngha
sau:
- V d, /b/ so khp vi k t

- Vi cc k t c xem b. Bng cch t mt du


xt theo tng ch, ch ra k t gch cho ngc trc b nh
tip theo l k t c bit v th ny /\b/, k t tr nn c
khng c thng dch theo bit c ngha so khp vi mt
t phn nh.
tng ch.
- V d, * l mt k t c bit
c ngha l khng hoc nhiu
- Vi cc k t c xem xt mt k t ca chui c sn s c
cch c bit, ch ra k t tip so khp; v d, /a*/ c ngha l
theo khng phi l k t c bit so khp vi khng hoc nhiu

HTML v JavaScript

Trang 130

VIETHANIT

Chng 6. Ton t v biu thc trong Javascript

v s c thng dch theo tng k t a. so khp vi k t


* theo tng ch, hy t trc
ch.
n mt du gch cho ngc; v

d, /a\*/ so khp vi a*.

So khp vi phn u ca chui


nhp. Nu c a dng c thit
lp l true, th s so khp ngay
lp tc sau khi c mt k t
xung dng.

/^A/ khng so khp vi k t


A trong chui an A, nhng
so khp vi k t A u tin
trong chui An A.

So khp vi phn cui ca chui /t$/ khng so khp vi t trong


nhp. Nu c a dng c thit chui eater, nhng so khp
lp l true, th s so khp ngay n trong chui eat
lp tc trc khi c mt k t
xung dng

So khp vi k t i trc khng /bo*/ so khp vi chui boooo


hoc nhiu ln.
trong chui A ghost booooed
v k t b trong chui A bird
warbled, nhng khng phi
trong chui A goat grunted.

So khp vi k t i trc mt /a+/ so khp vi a trong chui


hoc nhiu ln. Tng ng vi candy v tt c cc k t a
{1,}.
trong chui caaaandy.
So khp vi k t i trc khng /e?le?/ so khp vi el trong
hoc mt ln.
angel v le trong angle.

(x)

Nu c s dng ngay sau cc


k t *, +, ? hoc {}, th to thnh
k t non-greedy (so khp vi s
ln nh nht), tri li l greedy
(so khp s ln ln nht).
(Du chm thp phn) so khp /.n/ so khp vi an v on
vi k t duy nht no ngoi trong chui nay, an apple is on
tr k t dng mi.
the tree nhng khng trong
chui nay.
So khp vi chui x v nh s
so khp ny. Cc du ngoc n
ny c gi l cc du ngoc
n nhm.

/(foo)/ so khp vi foo trong


chui foo barv ghi nh
foo. Chui con c so khp
c th gi li t cc phn t [1],
, [n] ca mng kt qu.

So khp vi x hoc y.

/green|red/ so khp vi green


trong green apple v red
trong red apple.

x|y

HTML v JavaScript

Trang 131

VIETHANIT

Chng 6. Ton t v biu thc trong Javascript

{n,m}

Vi n, m l cc s nguyn dng. /a{1,3}/ khng so khp vi ci


So khp vi t nht n v nhiu g trong chui cndy c, nhng
nht m s kin ca k t i trc. so khp vi k t a trong
candy, hai k t a u tin
trong caandy v ba k t a
u tin trong caaaaaaandy.
Nh rng khi so khp
caaaaaaandy, chui so khp
l aaa, thm ch khi chui
nguyn thy c nhiu a trong
n.

[xyz]

Mt tp k t. So khp vi mt
trong cc k t bao hm trong tp
k t. Chng ta c th xc nh
mt min cc k t bng cch s
dng mt du ni (-).

[abcd] tng ng vi [a-d].


Chng so khp vi b trong
chui brisket v c trong
chui ache.

[^xyz]

Mt tp k t b ca [^xyz].
l, n so khp vi bt c k t
no m khng nm trong du
ngot vung. Chng ta c th xc
nh mt min cc k t bng
cch s dng mt du ni (-).

[^abc] tng t nh [^a-c].


Ngay u tin chng so khp
vi k t r trong brisket v
h trong chop.

\d

So khp vi mt k t s. Tng /\d/ hoc /[0-9]/ so khp vi 2


ng vi [0-9].
trong B2 is the suit number.

\s

So khp vi mt k t khong /\s\w*/ so khp vi bar trong


trng duy nht, bao gm cc k t foo bar.
khong trng, tab, k t sang
trang, k t chuyn dng. Tng
ng vi [\f\n\r\t\v].

\t

So khp vi phm tab

\w

So khp vi mt k t no /\w/ so khp vi a trong


trong bng ch ci, k c k t apple, 5 trong $5.28 v
gch di (_). Tng ng vi 3 trong 3D.
[A-Za-z0-9_]

\n

Vi n l mt s nguyn dng. /apple(,)\sorange\1/ so khp vi


Mt tham kho ngc n chui apple, orange, trong apple,
con cui cng so khp n du orange, cherry, peach
ngoc n m trong biu thc
regular (tng s cc du ngoc
n tri).

6.2.2 To ra mt biu thc regular


Mt biu thc regular l mt mu tm kim tm kim d liu cng dng.
JavaScript xem mt biu thc regular nh mt i tng. V vy, chng ta phi to
HTML v JavaScript

Trang 132

VIETHANIT

Chng 6. Ton t v biu thc trong Javascript

mt biu thc regular trc khi s dng chng. C th to ra mt biu thc regular
bng mt trong hai cch sau:
6.2.2.1 Khi to i tng (Object initializer).
Cch ny trc y c gi l to i tng bng cch s dng cc k hiu
nguyn dng, sau n c chuyn thnh khi to i tng ging vi thut ng
ca C++. Nu ta mun to ra mt th hin ca mt i tng, ta phi dng mt Object
initializer.
C php ca vic khi to i tng nh sau:
objectname = {expression}

Trong objectname l tn ca i tng mi, expression l mt khun mu


to i tng.
Chng hn:
re = /xy+z/

Trong nh ngha trn, mt biu thc regular xy+z c to v gn cho i


tng re. By gi chng ta c th dng i tng re tm kim cc mu theo yu
cu.
Khi chng ta khi to i tng, biu thc regular s c dch khi script c
nh gi. Nu biu thc regular khng thay i, th s dng khi to i tng hiu
qu hn.
6.2.2.2 Gi hm khi to ca i tng RegExp
JavaScript cung cp i tng biu thc nh ngha trc, l RegExp. Mt
hm khi to c dng to mt kiu i tng v nh ngha cc thuc tnh ca
i tng. V d, chng ta c th to mt i tng gi l employee. Cc thuc tnh
ca i tng l empID, join_dt, salary.
function employee (empID, join_dt, salary)
{
this.empID = empID
this.join_dt = join_dt
this.salary = salary
}

Sau khi hm c to, chng ta phi dng hm to mt th hin ca i tng


bng ton t new. V d:
employee1=new employee(123, 17/11/07, 2500)

Khi chng ta dng hm khi to, biu thc c dch trong thi gian thc thi.
Nu biu thc regular thay i hoc nu n ph thuc vo d liu nhp vo t ngi
dng, s dng hm khi to l hp l nht.
V d, hm getdetails() tm kim mt mu d liu c nhp t ngi dng. D
liu nhp bi ngi dng rt a dng. Chn mu tm kim l (\w+)\s(\d+). C ngha l,
mt hoc nhiu k t bt k xut hin theo sau mt k t trng hoc xut hin bt k

HTML v JavaScript

Trang 133

VIETHANIT

Chng 6. Ton t v biu thc trong Javascript

mt k t s no. Du cng (+) ch ra mt hoc nhiu k t xut hin. Du sao (*) ch


ra 0 hoc nhiu k t xut hin.
function getdetails()
{
re = /(\w+)\s(\d+)/
re.exec() ;
window.alert(RegExp.$1+, your age is + RegExp.$2) ;
}

6.2.3 S dng biu thc regular


Cc biu thc regular c s dng vi cc phng thc test v exec ca i
tng RegExp v cc phng thc match, replace, search, v spilit ca i tng
String.
Cc phng thc ny c m t trong bng sau:
Bng 6.10: Cc phng thc s dng cc biu thc regular
Phng thc

M t

Exec

Tm kim mt mu tng xng trong mt chui. N


tr v mt mng thng tin.

Test

Kim tra tng xng trong mt chui. Tr v gi tr


ng hoc sai.

Match

Tm kim tng xng trong mt chui. Tr v mt


mng thng tin hoc gi tr null nu sai.

Search

Kim tra s tng xng trong mt chui. Tr v gi


tr ch s ca tng xng nu tn ti, -1 nu b sai.

Replace

Tm kim s tng xng trong mt chui, v thay


th chui con tm kim tng xng bng mt chui
con thay th khc.

Spilit

Dng tch mt chui thnh mt mng cc chui


con.

dng mt phng thc, chng ta phi xc nh i tng c s dng.


C php l:
objectname.method = funtion_name

Sau chng ta c gi phng thc trong ng cnh ca i tng.


C php l:
Objectname.methodname(parameters)

Chng ta c th dng cc c vi biu thc regular. Hai c g v i c chn


ty , c th dng ring hoc dng c hai c. C g c dng ch dn tm kim
ton cc. C i dng ch dn tm kim c phn bit ch hoa v ch thng.
Chng hn: re = /\w+\s/g ; //use a global search
HTML v JavaScript

Trang 134

VIETHANIT

Chng 6. Ton t v biu thc trong Javascript

V d 6.3:
on m di y dng kim tra phng thc tm kim mt mu trong chui.
Nu mu c tm thy, gi tr tr v l true v ngc li th tr v false.
<HTML>
<HEAD>
<SCRIPT>
re = /Time/
str = re.test ("Time and Tide wait for none");
window.alert (str);
</SCRIPT>
</HEAD>
</HTML>

Kt qu:

Hnh 6.2: Minh ha biu thc regular


V d 6.4:
on m sau y tm kim s xut hin ca k t x, y, hoc z.
<HTML>
<HEAD>
<SCRIPT>
re = /[xyz]/
str = re.exec ("It is very coooooold");
window.alert (str);
</SCRIPT>
</HEAD>
</HTML>

Kt qu:

Hnh 6.3: Minh ha biu thc regular


HTML v JavaScript

Trang 135

VIETHANIT

Chng 6. Ton t v biu thc trong Javascript

6.3 Cu hi v bi tp
Cu hi:
1. JavaScript dng c ton t mt ngi v ton t hai ngi? _______ (ng/Sai)
2. Cc ton t mt ngi bao gm ________________
3. Kt qu tr v ca hai biu thc y = ++x v y = x++ c ging nhau khng?
_________ (C/Khng)
4. Trong JavaScript, ton t logic ch c s dng vi cc ton hng mang gi
tr boolean _________(ng/Sai)
5. i vi ton t logic &&, nu mt ton hng c gi tr false th kt qu tr v
l __________.
6. i vi cc s khng m, dch phi in gi tr 0 v dch phi duy tr du c
kt qu khc nhau _________(ng/Sai)
7. Ton t iu kin l mt ton t ca JavaScript cn ______ ton hng.
8. Khi c nhiu ton t trong cng mt biu thc, _____________ca ton t
xc nh th t thc hin ca cc ton t .
9. Mt ___________ l mt tp hp hp l gm cc hng, cc bin v cc ton
t tnh ton v tr v mt gi tr n.
10. Gi tr tr v (hay kt qu tr v) ca mt biu thc ch c th l mt s
_________(ng/Sai).
11. Hy nh gi cc biu thc sau:
a. 7 + 5
b. "7" + "5"
c. 7 == 7
d. 7 >= 5
e. 7 <= 7
f. (7 < 5) ? 7 : 5
g. (7 >= 5) && (5 > 5)
h. (7 >= 5) || (5 > 5)
12. on m sau s in ra kt qu?
<HTML>
<HEAD>
<SCRIPT>
var i = 1;
document.write(i++);
document.write(++i);
</SCRIPT>
</HEAD>
</HTML>

HTML v JavaScript

Trang 136

VIETHANIT
a.

12

b.

22

c.

13

d.

23

Chng 6. Ton t v biu thc trong Javascript

13. on m sau s in ra kt qu?


<HTML>
<HEAD>
<SCRIPT>
var x = 11;
var y = 5
document.write(x|y);
</SCRIPT>
</HEAD>
</HTML>

HTML v JavaScript

Trang 137

VIETHANIT

Chng 6. Ton t v biu thc trong Javascript

Bi tp thc hnh chng 6:


1. Dng JavaScript hin th mt thng bo Chao ban!
2. S dng prompt cho php ngi dng nhp tn vo, sau hin th

cu cho Xin chao ... Trong . l tn va nhp.


3. Cho on m sau:
<HTML>
<HEAD>
<SCRIPT>
var x=prompt ("Please enter the first number: ","");
var y=prompt ("Please enter the second number: ","");
r=x+y;
document.write("The result is: "+r);
</SCRIPT>
</HEAD>
</HTML>

D on kt qu ca chng trnh khi hai s nhp vo l 3 v 5.


G li on m trn vo trnh son tho kim tra kt qu.
4. Cho ngi dng nhp vo mt chui, chuyn tt c cc k t a trong
chui thnh AB, sau hin th li chui va bin i
(Gi : s dng phng thc replace())
5. G li cu hi 12 v 13 kim tra kt qu
6. G li cc v d trong chng 1 v 2.

HTML v JavaScript

Trang 138

VIETHANIT

Chng 7. Cu lnh iu kin

CHNG 7

CU LNH IU KIN
7.1 Lnh v khi lnh
7.1.1 Lnh v quy c lnh trong JavaScript
Cng nh trong hu ht cc ngn ng khc, n v lm vic c bn ca
JavaScript l cu lnh. Trong hai chng trc, chng ta lm quen vi rt nhiu cu
lnh trong JavaScript. N c th l kt qu ca mt php gn gi tr cho mt bin, c
th l li gi mt hm, hay biu din mt dng php tnh, hoc thm ch l s kt hp
ca tt c nhng cng vic . Trong cc v d trc y, mt trong nhng cu lnh
m chng ta lm quen l cu lnh khai bo, cu lnh ny khng nhng dng khi
to (hay nh ngha) mt bin mi, m cn c th gn gi tr cho n, v d nh:
var x = 10;

Nh ni trn, mt chng trnh JavaScript l mt tp hp ca cc cu lnh,


cc cu lnh ny c th c t chc thnh tng hm (s c cp trong chng 5).
Cc cu lnh JavaScript bao gm cc t kha c s dng vi c php thch hp v
c kt thc bi du chm phy (;). Mt cu lnh duy nht c th nm trn nhiu
dng. Nhiu cu lnh cng c th c vit trn mt dng duy nht nu mi cu lnh
c phn tch bi mt du chm phy (;).
7.1.2 Khi lnh
Mt khi lnh c s dng nhm cc cu lnh. Cc cu lnh ny c gi l
ng cp v s c nhm li bi mt cp du ngoc mc ({}).
Bn trong mt khi lnh li c th vit lng khi lnh khc. S lng nhau theo
cch nh vy l khng hn ch.
7.2 Cc cu lnh iu kin
Mt cu lnh iu kin l mt tp hp cc lnh thi hnh nu iu kin ch nh l
ng. Kt qu ca iu kin xc nh cu lnh hoc khi lnh s c thc thi.
JavaScript cung cp hai cu lnh iu kin: ifelse v switch.
7.2.1 Cu lnh ifelse
Cu lnh ny dng kim tra iu kin, n thc thi vic tnh ton trn mt biu
thc, n kim tra iu kin l ng hay sai thc hin khi lnh tng ng.
Mt cu lnh if n gin c c php lnh nh sau:
if (iu kin )
{
// cc cu lnh ng vi iu kin ng
}

y l c php lnh n gin, n s kim tra nu iu kin sau theo sau if l


ng th khi lnh s c thc thi.

HTML v JavaScript

Trang 139

VIETHANIT

Chng 7. Cu lnh iu kin

V d 7.1: Kim tra mt s c phi l s chn hay khng? Nu l s chn th hin


th kt lun s chn.
i vi bi ton ny, ta s s dng php chia ly d (%) kim tra. Nu mt s
thc hin php chia ly d cho 2 m tr v kt qu l 0 th kt lun s l s chn.
on m sau minh ha cho bi ton trn. Trong on m ny, ta lu n cch
s dng cu lnh if:
<HTML>
<HEAD>
<SCRIPT>
var x = 4;
r=x%2;
if (r==0)
{
document.write("so "+x+" la so chan");
}
</SCRIPT>
</HEAD>
</HTML>

Kt qu:

Hnh 7.1: Cu lnh iu kin if n gin


Nu trong v d trn, ta thay gi tr ca x = 5 th trn mn hnh s khng xut
hin g c, ni cch khc, n khng thc hin khi lnh sau if, v trong trng hp ny,
biu thc r == 0 tr v gi tr sai (false).
Ta cng c th ch ra khi lnh cn thc hin khi iu kin l sai (false) bng
cch dng mnh else.
C php nh sau:
if (iu kin)

HTML v JavaScript

Trang 140

VIETHANIT

Chng 7. Cu lnh iu kin

{
// cc cu lnh ng vi iu kin ng
}
else
{
// cc cu lnh ng vi iu kin sai
}

C php trn c hiu nh sau: Nu iu kin l ng (true) th khi lnh sau if


s c thc hin, v ngc li, nu l sai (false) th khi lnh sau else s c thc
hin.
Trong c hai c php lnh trn, iu kin c th l bt c biu thc JavaScript
no c gi tr l true hoc false. Khi lnh sau if hoc else cng c th l bt c cu
lnh JavaScript no, k c cc cu lnh if c lng thm vo trong. Nu chng ta
mun s dng thm mt hoc nhiu cu lnh sau mt cu lnh if hoc else th ta phi
ng cc cu lnh bng cc du ngoc mc ({}).
V d sau minh ha cho cu lnh iu kin ifelse. Trong v d ny, ta cng xt
mt s l s chn hay l, sau hin th kt qu ra mn hnh.
Cng nh v d 3.1, ta cng s s dng php chia ly d (%) kim tra. Nu
mt s thc hin php chia ly d cho 2 m tr v kt qu l 0 th kt lun s l s
chn, ngc li th kt lun n l s l
on m sau minh ha cho bi ton trn.
V d 7.2:
<HTML>
<HEAD>
<SCRIPT>
var x=prompt ("enter a num: ","");
r=x%2;
if (r==0)
{
document.write("so "+x+" la so chan");
}
else
{
document.write("so "+x+" la so le");
}
</SCRIPT>
</HEAD>
</HTML>

HTML v JavaScript

Trang 141

VIETHANIT

Chng 7. Cu lnh iu kin

Kt qu:

Hnh 7.2.1: Trng hp nhp vo mt s chn

Hnh 7.2.2: Trng hp nhp vo mt s l

HTML v JavaScript

Trang 142

VIETHANIT

Chng 7. Cu lnh iu kin

7.2.2 Cu lnh switch


Khi c nhiu ty chn ifelse th tt hn ta nn s dng lnh switch. Lnh ny
cn c xem l lnh case. Cu lnh switch cho php mt chng trnh nh gi tr
mt biu thc v th so khp gi tr ca biu thc vi tng trng hp. Nu so khp
tha mn th chng trnh thi hnh cu lnh tng ng. Nu khng tm thy mt gi tr
no trong danh sch cc case ca n, khi lnh trong phn default s c thc hin.
Lnh break dng thot ra khi cu lnh switch.
Cu lnh switch c dng nh sau:
switch (expression){
case label:
statements;
break;
case label:
statements;
break;

defaul: statements;
}

u tin chng trnh tm mt nhn trng khp vi gi tr biu thc v thi hnh
cu lnh tng ng nu so khp thnh cng. Nu nhn so khp khng c tm thy,
chng trnh s tm n khi lnh trong la chn default, v nu tm thy s thc hin
cu lnh tng ng. Nu khng tm thy cu lnh default, th chng trnh tip tc thi
hnh cu lnh tip theo sau cu lnh switch.
Cu lnh ty chn break kt hp vi mi trng hp m bo rng chng trnh
s thot khi lnh switch khi cu lnh so khp c thi hnh v tip tc thc thi cu
lnh tip theo cu lnh switch. Nu khng s dng cu lnh break th chng trnh vn
tip tc thi hnh lnh k tip trong cu lnh switch.
V d7.3: Trong v d sau, nu exp c lng n Bananas, th chng trnh
so khp gi tr vi trng hp Bananas v thi hnh cu lnh c kt hp. Khi bt
gp break th chng trnh ngt switch v thi hnh cu lnh theo sau switch. Nu break
c b qua, th cu lnh cho trng hp Cherries cng s c thi hnh:
<HTML>
<HEAD>
<SCRIPT>
document.write("1.Oranges");
document.write("<br>2.Apples");
document.write("<br>3.Bananas");
document.write("<br>4.Cherries");
var exp=prompt ("Vui lng hy chn mt loi tri cy trong danh sch:
","");
switch (exp){

HTML v JavaScript

Trang 143

VIETHANIT

Chng 7. Cu lnh iu kin


case "Oranges":
document.write("<br>Oranges are $0.59 a pound.");
break;
case "Apples":
document.write("<br>Apples are $0.32 a pound.");
break;
case "Bananas":
document.write("<br>Bananas are $0.48 a pound.");
break;
case "Cherries":
document.write("<br>Cherries are $3.00 a pound.");
break;
default:
document.write ("<br>Sorry, we have no this kind of fruit!!");
}
</SCRIPT>

</HEAD>
</HTML>

Kt qu:

HTML v JavaScript

Trang 144

VIETHANIT

Chng 7. Cu lnh iu kin

Hnh 7.3.1: Cu lnh switch


y chng ta cn lu v cu lnh break trong mi case. Nh ni trn,
nu khng c break, chng trnh s tip tc thc hin khi case khc. V d, trong
on m trn, nu ta khng kt thc khi case Oranges bng cu lnh break, th
chng trnh s tip tc thc hin khi lnh ca case Apples.
Xt on m ang cp:
switch (exp){
case "Oranges":
document.write("<br>Oranges are $0.59 a pound.");
case "Apples":
document.write("<br>Apples are $0.32 a pound.");
break;
case "Bananas":
document.write("<br>Bananas are $0.48 a pound.");
break;

Kt qu:

HTML v JavaScript

Trang 145

VIETHANIT

Chng 7. Cu lnh iu kin

Hnh 7.3.2: Ch vi s dng cu lnh break


7.3 Cu hi v bi tp
Cu hi:
1. Cc cu lnh trong JavaScript c kt thc bi du phy (,) __________
(ng/Sai)
2. Mt cu lnh duy nht c th nm trn nhiu dng. __________ (ng/Sai)
3. Nhiu cu lnh khng c vit trn mt dng duy nht cho d mi cu lnh
c phn tch bi mt du chm phy (;). __________ (ng/Sai)
4. Bn trong mt khi lnh c th c mt khi lnh khc hay khng? _________
(C/Khng)
HTML v JavaScript

Trang 146

VIETHANIT

Chng 7. Cu lnh iu kin

5. JavaScript cung cp hai cu lnh iu kin l __________ v ________.


6. Mt cu lnh if c nht thit phi c thnh phn else theo sau hay khng?
_________(C/Khng)
7. i vi cu lnh if, chng trnh s kim tra nu iu kin sau theo sau if l
________ th khi lnh sau if s c thc thi.
8. i vi cu lnh switch, nu chng trnh khng tm thy mt gi tr no
trong danh sch cc case ca n, khi lnh trong phn _________ s c
thc hin.
9. Lnh ________ dng thot ra khi cu lnh switch.

Bi tp thc hnh chng 7:

HTML v JavaScript

Trang 147

VIETHANIT

Chng 7. Cu lnh iu kin

1. Vit chng trnh cho php ngi dng nhp vo hai s songuyen1 v
songuyen2, kim tra xem songuyen1 c chia ht cho songuyen2 khng, hin
thng bo tng ng.
Gi : Thc hin nh sau:
-

Nhp vo gi tr ca 2 s (dng prompt).

Ly s d ca php chia songuyen1 cho songuyen2.

Nu s d ny bng 0 th in ra thng bo songuyen1 chia het cho


songuyen2.

Nu s d ny khc 0 th in thng bo songuyen1 khong chia het cho


songuyen2.

2. Vit chng trnh nhp vo ba con s, tm s ln nht trong ba s ny.


3. Vit chng trnh cho php ngi dng nhp vo 1 nm, kim tra nm c
phi l nm nhun hay khng.
Gi : Nm nhun l nm chia ht cho 4, ngoi tr nhng nm chia ht cho 100
m khng chia ht cho 400. V d 1700, 1800, 1900 khng phi l nm nhun,
cc nm 1600, 2000 l cc nm nhun.
4. Vit chng trnh xp loi hc vin theo im s nguyn nh sau: (dng
if..else)
-

Nhp im t bn phm (dng prompt).

In ra thng bo xp loi tng ng vi im nh sau:


o Nu im l 9, 10 th xp loi gii.
o Nu im l 7, 8 th xp loi kh.
o Nu im l 5, 6 th xp loi trung bnh.
o Nu im l 0, 1, 2, 3, 4 th xp loi yu.
o Nu im <0 hoc im>10 th thng bo im nhp vo khng hp
l.

5. Vit li chng trnh bi 4 bng cch s dng lnh switch.

HTML v JavaScript

Trang 148

VIETHANIT

Chng 8. Cu lnh vng lp

CHNG 8

CU LNH VNG LP
8.1 Cc lnh vng lp trong JavaScript
Vng lp l mt tp hp cc lnh thi hnh lp i lp li cho n khi mt iu kin
c th c xc nh. C nhiu loi vng lp:
-

Vng lp thc hin lp i lp li cc lnh cho n khi iu kin l false.

Vng lp thc hin lp i lp li cc lnh cho n khi iu kin l true.

Vng lp thc hin lp i lp li cc lnh theo mt s ln nht nh.

JavaScript cung cp cc cu lnh vng lp for, do..while, v while. Ngoi ra


chng ta c th s dng cc cu lnh chuyn iu khin bn trong cc cu lnh vng
lp nh break, continue v label (mc d label khng phi l cu lnh vng lp, nhng
n c s dng thng xuyn vi cc cu lnh vng lp)..
Ngoi ra, trong chng ny chng ta cn tm hiu v hai cu lnh vng lp thao
tc trn i tng l for..in v with.
8.1.1 Cu lnh for
Vng lp for s thc hin lp i lp li khi lnh cho n khi iu kin l false.
S ln thc hin ca vng lp thng c iu khin thng qua mt bin m.
Cu lnh for bao gm ba thnh phn, c phn cch nhau bi du chm phy
(;). C ba thnh phn ny u khng bt buc phi c, v chng iu khin vic thc
hin ca vng lp for. Nu c nhiu cu lnh thc hin trong thn ca vng lp,
chng trnh phi s dng cp du ngoc mc ({}) cha cc cu lnh
C php lnh nh sau:
for([initialExpression];[condition];[incrementExpresion]){
statements;
}

Trong :
-

initialExpression: Lnh khi to, c thc hin duy nht mt ln v thng


dng khi to bin m.

condition: iu kin ca vng lp.

incrementExpression: Lnh tng, thay i gi tr bin m ca vng lp.

statements: Cc lnh bn trong vng lp.

Vng lp for thi hnh nh sau:


1.

Khi to biu thc initialExpression, nu thnh cng th vng lp c


thi hnh. Biu thc ny thng dng khi to mt hoc nhiu b m ca
vng lp, v c php cho php mt biu thc c bt k phc tp no.
Biu thc ny c th cng khai bo cc bin.

HTML v JavaScript

Trang 149

VIETHANIT

Chng 8. Cu lnh vng lp

2.

Biu thc condition c c lng. Nu gi tr ca condition l true, th


cc cu lnh ca vng lp thi hnh. Nu gi tr ca condition l false th
thot khi vng lp. Nu b qua hon ton biu thc condition th iu kin
lun c tha nhn l true.

3.

Thc thi statements.

4.

Cp nht biu thc incrementExpression, v tr v bc 2.

V d sau tnh tng cc s t 0 n 9, s dng vng lp for.


tong = 0;
for (var i = 0; i<= 9; i++) {
tong += i;
}

Trong vng lp for, ta c th s dng nhiu biu thc khi to hay biu thc thay
i gi tr cho bin m bng cch dng ton t du phy ( hc chng 2: Ton t
v biu thc ).
Xt v d trn, ta c th khi to gi tr cho bin tng nh l mt thnh phn ca
vng lp for thng qua ton t du phy:
for (var i = 0, tong = 0; i<= 9; i++) {
tong += i;
}

V d 8.1: Hm sau y c mt cu lnh for m s cc mc c la chn trong


danh sch cun (mt i tng Select cho php c nhiu s la chn). Cu lnh for
khai bo bin i v khi to cho n gi tr 0. Vng lp s kim tra, nu i nh hn s ty
chn trong i tng Select, th thi hnh cu lnh if thnh cng, v tng i ln 1 sau khi
thi hnh xong ln lp.
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function howMany(selectObject){
var numberSelected = 0;
for(var i=0;i<selectObject.options.length; i++)
{
if(selectObject.options[i].selected == true)
numberSelected ++;
}
return numberSelected;
}
</SCRIPT>
</HEAD>

HTML v JavaScript

Trang 150

VIETHANIT

Chng 8. Cu lnh vng lp

<BODY>
<FORM NAME = selectForm>
<P><B>Choose some music types, then click the button blow: </B>
<BR><SELECT NAME =musicTypesMULTIPLE>
<OPTION SELECTED> R&B
<OPTION>Jazz
<OPTION>Blues
<OPTION>New Age
<OPTION>Classical
<OPTION>Opera
</SELECT>
<P><INPUT TYPE = button VALUE = How many are selected?
onClick
=
alert
(Number
of
options
selected:+
howMany(document.selectForm.musicTypes))>
</FORM>
</BODY>
</HTML>

Kt qu:

Hnh 8.1: Vng lp for


8.1.2 Cu lnh do..while
Cu lnh dowhile lp cho ti khi mt iu kin c th c gi tr l false.
HTML v JavaScript

Trang 151

VIETHANIT

Chng 8. Cu lnh vng lp

C php lnh nh sau:


do {
statement
} while (condition)

Trc ht, cu lnh ny thi hnh statement mt ln. Ti lc kt thc ca mi ln


thi hnh vng lp, condition c kim tra: Nu condition l true, th cu lnh tip tc
c thi hnh mt ln na, ngc li, nu iu kin l false, th thi hnh ngng v iu
khin c chuyn ti cu lnh k tip cu lnh dowhile.
V d 8.2: Trong v d sau, vng lp dowhile lm i lm li cho n khi bin i
khng cn nh hn 5 na.
do {
i += 1;
document.write (i);
} while (i<5)

8.1.3 Cu lnh while


Lnh while l mt cu trc lp khc trong JavaScript. N c dng thc hin
mt khi cc cu lnh chng no iu kin l true. Nu c nhiu cu lnh thc hin
trong thn ca vng lp, chng trnh phi s dng cp du ngoc mc ({}) cha
cc cu lnh .
Khc bit chnh gia vng lp while v dowhile l cc lnh trong thn vng
lp while c th khng c thc hin mt ln no v n kim tra iu kin trc, v
c th ngay t ban u iu kin l false. Tuy nhin vng lp dowhile bao gi
cng c thc hin t nht mt ln.
C php lnh nh sau:
while (condition) {
statement;
}

Nu iu kin l false, th cc cu lnh trong vng lp dng thi hnh v iu


khin c chuyn ti cu lnh sau vng lp.
Vic kim tra iu kin xy ra trc khi cc cu lnh trong vng lp c thi
hnh. Nu iu kin tr v l true, th cc cu lnh trong vng lp c thi hnh v
iu kin c kim tra li mt ln na. Nu iu kin tr v l false, th dng thi hnh
v iu khin c chuyn ti cu lnh k tip cu lnh while.
V d 8.3: Vng lp while sau y lp i lp li min l n nh hn 3:
n = 0;
x = 0;
while (n <3){
n++;
x += n;

HTML v JavaScript

Trang 152

VIETHANIT

Chng 8. Cu lnh vng lp

Mi ln lp li, vng lp tng n v gn gi tr cho x. V th, x v n s c cc


gi tr sau:
-

Sau vng lp u tin: n = 1 v x = 1

Sau vng lp th 2: n = 2 v x = 3

Sau vng lp th 3: n = 3 v x = 6

Sau khi kt thc vng lp th 3, iu kin n<3 khng cn ng, nh vy vng lp


kt thc.
Chng ta lu rng phi m bo iu kin trong vng lp cui cng s c gi tr
l false, nu khng th vng lp s khng bao gi thot, lc ny chng ta ni vng lp
v tn.
V d 8.4: Cc cu lnh trong vng lp while sau y thi hnh mi mi bi v
iu kin khng bao gi c gi tr l false:
while (true) {
alert (Hello, word!)
}

8.2 Cc lnh chuyn iu khin trong vng lp


8.2.1 Cu lnh label
Mt label bao gm mt cu lnh vi mt danh hiu cho php chng ta tham kho
ti n mt ni khc trong chng trnh ca bn. V d, bn c th s dng mt nhn
ch ra mt vng lp, v sau s dng cc cu lnh break hoc continue ch ra
mt chng trnh s thot khi vng lp hoc tip tc thi hnh n.
C php ca cu lnh label nh sau:
label:
statement

Gi tr ca label c th l bt c danh hiu no ca JavaScript nhng khng phi


l t kha c sn ca JavaScript.
statement c th l bt c cu lnh no.

V d 8.5 : Trong v d ny, nhn markLoop ch ra mt vng lp while.


markLoop:
while (theMark == true) {
doSomething ();
}

8.2.2 Cu lnh break


Cc vng lp for, while v dowhile s kt thc thc hin khi iu kin l false.
Tuy nhin ta cng c th kt thc vng lp nu mun. Lnh break dng kt thc
vic thc thi ca mt cu lnh. Khi c s dng trong mt vng lp, lnh break lm
dng ngay vng lp v khng thc hin thm na.
HTML v JavaScript

Trang 153

VIETHANIT

Chng 8. Cu lnh vng lp

Chng ta s dng cu lnh break thot khi vng lp, cu lnh switch hoc
cu lnh label.
Khi chng ta s dng break m khng c mt label, n thot khi vng
lp while, dowhile, for hoc cu lnh switch ngay lp tc v chuyn
iu khin ti cu lnh theo sau.
Khi chng ta s dng break vi mt nhn (label), n nhy ti cu lnh
c gn nhn c th.
C php ca cu lnh break nh sau:
1. break
2. break label

Dng th nht ca c php thot ngay ra khi vng lp hoc cu lnh switch,
dng th hai nhy ti cu lnh c label nh km.
V d 8.6: V d sau y lp i lp li thng qua cc phn t trong mt mng cho
ti khi n tm thy ch s ca mt phn t m gi tr ca n l theValue:
for (i = 0; i < a.length; i++) {
if (a[i] = theValue)
break;
}

V d 8.7: Hm sau c cu lnh break chm dt vng lp while khi i l 3, v sau


tr v gi tr 3*x.
function testBreak (x) {
var i = 0;
while (i<6) {
if (i == 3)
break;
i++;
}
return i*x;
}

8.2.3 Cu lnh continue


Mt lnh c bit khc cng c th c s dng trong vng lp l lnh continue.
Continue dng ngay ln lp hin ti v quay li kim tra iu kin thc hin ln lp
tip theo. N c th c s dng khi ng li mt cu lnh while, dowhile, for
hoc cu lnh label.
Khi chng ta s dng cu lnh continue m khng c label, th n dng
ln lp hin ti ca cu lnh while, dowhile, hoc for v tip tc thi
hnh vng lp ln lp tip theo. Tri vi cu lnh break, continue khng
kt thc s thi hnh ca ton b vng lp. Trong vng lp while, n nhy
HTML v JavaScript

Trang 154

VIETHANIT

Chng 8. Cu lnh vng lp

ngc tr li phn iu kin. Trong vng lp for, n nhy ti phn


incrementExpression.
Khi chng ta s dng continue vi mt label, th n tip tc vi cu lnh
lp c ch ra vi label .
C php ca cu lnh continue nh sau:
1. continue
2. continue label

V d 8.8: V d sau trnh by vng lp while vi cu lnh continue thi hnh khi
gi tr ca i bng 3.
i = 0;
n = 0;
while (i<5) {
i++;
if (i == 3)
continue;
n+=i;
}

V d 8.9: Trong v d sau, cu lnh c gn nhn checkiandj cha mt cu


lnh c gn nhn checkj. Nu gp phi continue, chng trnh kt thc ln lp hin
ti ca checkj v bt u ln lp tip theo. Mi ln gp phi continue, checkj lp li
cho ti khi iu kin ca n tr v gi tr false. Khi gi tr false c tr v, phn cn
li ca cu lnh checkiandj c hon thnh, v checkiandj lp li cho ti khi iu
kin ca n tr v false. Khi gi tr false c tr v, chng trnh tip tc ti cu lnh
sau checkiandj.
Nu cu lnh continue c mt nhn checkiandj, chng trnh s tip tc ti u
ca cu lnh checkiandj.
checkiandj:
while (i<4) {
document.write (i + <BR>);
i +=1;
checkj:
while (j>4) {
document.write (j + <BR>);
j -=1;
if ((j%2) == 0)
continue checkj;
document.write (j + is odd. <BR>);
}

HTML v JavaScript

Trang 155

VIETHANIT

Chng 8. Cu lnh vng lp


document.write(i = + i + <BR>);
document.write(j = + j + <BR>);

8.3 Cc lnh thao tc trn i tng


JavaScript s dng cc cu lnh forin v with thao tc trn cc i tng.
8.3.1 Cu lnh forin
Cu lnh forin lp i lp li mt bin ch nh trn tt c cc thuc tnh ca
mt i tng. Vi mi thuc tnh ring, JavaScript thc thi cc cu lnh c th. V d
chng ta c th s dng cu lnh forin thc hin mt khi cc cu lnh cho mi
phn t ca mng.
C php lnh nh sau:
for (variable in object) {
statements;
}

V d 8.10: Hm sau y c i s l mt i tng v tn ca i tng. Sau


n lp i lp li trn ton b thuc tnh ca i tng v tr v mt chui lit k tn
ca cc thuc tnh v gi tr ca chng.
function dump_props (obj, obj_name) {
var result = ;
for (var i in obj) {
result += obj_name + . + i + = + obj[i] + <BR>
}
result += <HR>;
return result;
}

Vi mt i tng car, cc thuc tnh make v model, th result s l:


car.make = Ford
car.model = Mustang

V d 8.11: Trong v d di y, mt mng color c to. Cc phn t ca


mng l red, blue v green. Vng lp forin c dng duyt qua mng
mu v hin th cc phn t trong n.
<HTML>
<HEAD>
<TITLE> Datatype Example </TITLE>
<SCRIPT LANGUAGE= "JavaScript">
color = new Array ("red", "blue", "green");
var record = "color";

HTML v JavaScript

Trang 156

VIETHANIT

Chng 8. Cu lnh vng lp


for (var prop in color){
record += prop + "=" + color[prop] + "<BR>"
}
record += "<BR>"
document.write (record)
</SCRIPT>
</HEAD>

</HTML>

Kt qu:

Hnh 8.1: Cu lnh forin


8.3.2 Cu lnh with
Cu lnh with thit lp i tng mc nh cho mt tp hp cc cu lnh.
JavaScript tm kim bt c ci tn tuyt i no nm trong tp hp cc cu lnh xc
nh xem cc tn ny c l cc thuc tnh ca i tng mc nh hay khng. Nu mt
tn tuyt i so khp vi mt thuc tnh, th thuc tnh c s dng nm trong cu
lnh, nu khng th mt bin cc b hoc ton cc c s dng.
C php lnh nh sau:
with (object) {
statements;
}

V d 8.12: Cu lnh with sau y cho thy i tng Math l i tng mc


nh. Cc cu lnh theo sau cu lnh with tham kho ti thuc tnh PI v cc phng
thc cos v sin m khng ch r mt i tng. JavaScript tha nhn i tng Math
cho cc tham kho ny.
var a, x, y;

HTML v JavaScript

Trang 157

VIETHANIT

Chng 8. Cu lnh vng lp

var r =10
with (Math) {
a = PI * r * r;
x = r * cos (PI);
y = r * sin (PI/2);
}

8.4 Cu hi v bi tp
1. Khi s dng mt vng lp, ta phi xc nh s ln lp c th. _________

(ng/Sai)
2. Vng lp for s thc hin lp i lp li khi lnh cho n khi iu kin l
________(true/false)
3.

Cu lnh for bao gm 3 thnh phn, c phn cch nhau bi du


__________

4. Mt vng lp for phi c y 3 thnh phn. _________(ng/Sai)


5. Trong vng lp for, ta c th s dng nhiu biu thc khi to hay biu thc
thay i gi tr cho bin m bng cch dng ton t _____________
6. Cu lnh dowhile lp cho ti khi mt iu kin c th c gi tr l false.
_________ (ng/Sai)
7. Cu lnh while c dng thc hin mt khi cc cu lnh chng no iu
kin cn l _________
8. Khc bit chnh gia vng lp while v dowhile l vng lp ________ c
th khng c thc hin mt ln no v n kim tra iu kin trc.

Bi tp thc hnh chng 8:


1. Vit chng trnh tnh tng cc s t 1 n 200.
2. Vit chng trnh tnh tch cc s l t 1 n 300.
HTML v JavaScript

Trang 158

VIETHANIT

Chng 8. Cu lnh vng lp

3. Vit chng trnh cho php ngi dng nhp vo mt s. Kim tra s ny c
phi l s nguyn t khng.
Gi : S nguyn t l s bt u t 2, ch chia ht cho 1 v cho chnh n.
4. Vit chng trnh cho php ngi dng nhp vo hai s (x v n). Tnh xn.

5. Cho ngi dng nhp tn vo mt hp nhp, d liu nhp vo khng c


trng. Nu nhp trng phi cho nhp li.
6. In ra tt c cc nm nhun t 1699 n 2008.
Gi : Xem cch kim tra nm nhun bi tp chng 3.

HTML v JavaScript

Trang 159

VIETHANIT

Chng 9. Hm

CHNG 9

HM
9.1 Khi nim v cc thao tc trn hm
9.1.1 Khi nim v hm
Hm l mt trong nhng khi c bn c xy dng trong JavaScript. Mt hm
trong JavaScript kh ging vi mt th tc hay chng trnh con trong ngn ng lp
trnh. Mt hm c nh ngha l mt tp cc cu lnh, thc hin mt nhim v c
th no .
Mc d khng nht thit phi c, song cc hm c th c mt hay nhiu tham s
truyn vo v mt gi tr tr v. Bi v JavaScript l ngn ng c tnh nh kiu thp
nn khng cn nh ngha kiu tham s v gi tr tr v ca hm. Hm c th l thuc
tnh ca mt i tng, trong trng hp ny n c xem nh l phng thc ca
i tng .
JavaScript h tr nhiu hm nh ngha sn m chng ta s s dng trong cc
script. Ngoi ra, ngi dng c th t nh ngha cc hm khc s dng.
Sau y ta s tm hiu mt s thao tc trn hm.
9.1.2 To hm
Thao tc ny s dng cho cc hm t nh ngha. s dng mt hm, u tin
ta phi to ra, hay cn gi l nh ngha hm, sau script c th gi n. nh ngha
mt hm l mt qu trnh khai bo tn ca hm v cc lnh s c thc thi khi gi
hm.
Cc thnh phn ca mt hm gm c:
T kha function.
Tn hm.
Danh sch cc i s ca hm, nm trong cc du ngot n () v c
phn cch bi cc du phy (,). Mt hm c th khng c i s, nhng
chng ta vn phi c cp du ngoc n () t sau tn hm.
Cc cu lnh JavaScript nh ngha hm, nm trong cp du ngoc mc
{}. Cc cu lnh trong mt hm c th bao gm cc lnh gi n cc hm
khc nh ngha trong ng dng hin hnh.
C php ca mt hm nh sau:
function functionName (argument1, argument2, )
{
statements;
}

Lu mt iu l trong JavaScript, cc hm khng th lng nhau.


C ngha l mt hm khng th c nh ngha bn trong thn
mt hm khc.
HTML v JavaScript

Trang 160

VIETHANIT
Chng 9. Hm
V d, on m ngun sau nh ngha mt hm n gin c tn l square:
function square (number) {
return number * number;
}

Hm square c mt i s gi l number, c mt cu lnh tr v gi tr, gi tr tr


v ca hm bng i s ca hm nhn vi chnh n. Cu lnh return c dng ch
nh gi tr tr v ca hm (s trnh by trong phn 5.1.4: Cu lnh return).
Tt c cc tham bin c truyn cho cc hm bng gi tr, gi tr c truyn
ti hm; nhng nu hm thay i gi tr ca tham bin, th s thay i ny khng c
phn nh mt cch ton cc hoc khng phn nh trong vic gi hm. Tuy nhin, nu
ta truyn mt i tng nh mt tham bin cho mt hm v hm thay i cc thuc
tnh ca i tng, th s thay i c th thy c bn ngoi ca hm, nh c minh
ha trong v d sau:
function myFunc(theObject) {
theObject.make = Toyota
}
mycar = {make:Honda, model:Accord, year:1998};
x = mycar.make; // Tr v Honda
myFunc(mycar); // Truyn i tng mycar cho hm
y = mycar.make; // Tr v Toyota (thuc tnh b thay i bi hm)

Mt hm c th c nh ngha da trn mt iu kin. V d, xt nh ngha


hm sau:
if (num == 0)
{
function myFunc (theObject) {
theObject.make = Toyota
}
}

Hm myFunc ch c nh ngha nu bin num bng 0. Nu num khc 0, th


hm khng c nh ngha v bt c s c gng no thc hin n cng s tht bi.
Mt hm cng c th c nh ngha bn trong mt biu thc, hm ny c
gi l biu thc hm. in hnh cho loi hm ny l hm khng cn c tn. V d, hm
square trn c th c nh ngha nh sau:
const square = function (number) {return number * number};

iu ny thun li khi truyn mt hm nh mt i s cho mt hm khc. V d


sau trnh by hm map c nh ngha v c gi vi mt hm khng tn nh l
tham bin u tin ca n.
function map(f,a) {
var result = new Array;

HTML v JavaScript

Trang 161

VIETHANIT

Chng 9. Hm
for (var i = 0; i != a.length; i++)
result[i] = f(a[i]);
return result;

Vic gi:
map(function(x){return x * x * x },[0, 1, 2, 5, 10]);

Tr v gi tr: [0, 1, 8, 125, 1000].


9.1.3 Gi hm
nh ngha mt hm khng c ngha l thi hnh hm . nh ngha hm n
gin l t tn cho hm v ch ra nhng g s lm khi hm c gi. Vic gi hm thc
t l thc hin cc hnh ng c th cng vi cc tham bin xc nh. Nh vy,
thc thi mt hm, ta phi gi n. gi mt hm ta ch ra tn hm v danh sch cc
tham s nu c.
V d, nu chng ta nh ngha hm square, ta c th gi n nh sau:
square (5)

Cu lnh trn gi hm vi i s bng 5. Hm thc hin cc cu lnh ca n v


tr v gi tr l 25.
Cc i s ca mt hm khng bt buc phi l cc chui hay cc s. Ta cng c
th truyn cc i tng cho mt hm.
Mt hm thm ch c th c quy, hm quy l hm c th gi li chnh
n.
V d, xt mt hm tnh giai tha ca mt s:
function factorial (n) {
if ((n == 0) || (n = 1))
return 1
else {
var result = (n * factorial(n -1));
return result
}
}

Chng ta c th tnh giai tha ca cc s t 1 n 5 nh sau:


a = factorial(1) // Tr v 1
b = factorial(2) // Tr v 2
c = factorial(3) // Tr v 6
d = factorial(4) // Tr v 24
e = factorial(5) // Tr v 120
9.1.4 Cu lnh return
HTML v JavaScript

Trang 162

VIETHANIT
Chng 9. Hm
Cu lnh ny c dng tr v mt gi tr. Dng lnh return trong mt hm l
khng bt buc v khng phi tt c cc hm u tr v mt gi tr c th.
C php l:
return value;

hoc:
return (value);

V d:
<HTML>
<HEAD>
<script language="javascript">
function testreturn(x){
var i=0;
while (i<6)
{
if (i ==3)
break
i++
}
document.write(i*x);
return (i*x);
}
</script>
</HEAD>
<BODY>
<script>
testreturn(4);
</script>
</BODY>
</HTML>

Kt qu:

HTML v JavaScript

Trang 163

VIETHANIT

Chng 9. Hm

Hnh 9.1: Gi tr tr v hm
Ti bt k lc no, chng ta cng c th thot ra khi hm n gin ch cn s
dng lnh return m khng cn n bt k cu trc phc tp no. Quyn iu khin
ngay lp tc tr v cho cu lnh ng sau lnh gi hm.
9.2 Mt s hm thng dng c h tr bi JavaScript
Nh ta bit, JavaScript c nhiu hm c nh ngha sn m khi cn chng ta
ch vic gi. V d, nu chng ta mun kim tra gi tr m ngi dng nhp vo c
phi l mt s hay khng, chng ta c th s dng hm isNaN (NaN: Not a Number)
thc hin iu ny.
Trong phn ny chng ta s tm hiu v mt s hm thng dng c h tr bi
JavaScript nh sau:
Hm eval
Hm isFinite
Hm isNaN
Hm parseInt v parseFloat
Hm Number v String
9.2.1 Hm eval
Hm eval c dng nh gi mt chui m khng cn tham chiu n bt k
mt i tng c th no.
C php ca hm nh sau:
eval (string)

Vi string l chui cn c nh gi. Chui ny c th l mt biu thc


JavaScript, mt cu lnh, hay mt nhm cc cu lnh. Trong biu thc c th bao gm
cc bin v thuc tnh ca mt i tng.
Nu chui i din cho mt biu thc th hm eval nh gi tr biu thc . Nu
i s i din cho mt hoc nhiu cu lnh JavaScript, th hm eval thc hin cc cu
lnh ny. Khng dng hm eval nh gi tr mt biu thc s hc, v JavaScript
nh gi tr cc biu thc s hc mt cch t ng.
9.2.2 Hm isFinite
HTML v JavaScript

Trang 164

VIETHANIT
Chng 9. Hm
Hm isFinite nh gi tr mt i s xc nh xem n c phi l mt s hu
hn hay khng.
C php ca hm nh sau:
isFinite(number)

Vi number l s c nh gi tr.
Nu i s l NaN, dng v cng hoc m v cng th phng thc ny tr v
false, ngoi ra n tr v true.
on m ngun sau kim tra i s ClientInput xc nh xem n c phi l s
hu hn khng:
if (isFinite(ClientInput) == true)
{
/* cc bc c th*/
}

9.2.3 Hm isNaN
Hm isNaN nh gi tr mt i s xc nh xem n c phi l NaN (Not a
Number) hay khng.
C php ca hm nh sau:
isNaN(testValue)

Vi testValue l gi tr bn mun nh gi tr.


Cc hm parseInt v parseFloat tr v NaN khi chng nh gi tr mt gi tr
khng phi l mt s. Hm isNaN tr v true nu n c truyn gi tr NaN v
ngc li l false.
on m ngun sau nh gi tr floatValue xc nh xem n c phi l mt s
hay khng v sau gi mt th tc ph hp:
floatValue = parseFloat (toFloat)
if (isNaN (floatValue)) {
notFloat()
}
else {
isFloat()
}

9.2.4 Cc hm parseInt v parseFloat


Hai hm parseInt v parseFloat tr v mt gi tr s khi cho i s l mt chui.
C php ca hm parseFloat l:
parseFloat(str)

Hm parseFloat phn tch i s ca n l chui str, v c gng tr v mt s du


chm ng. Nu n gp phi mt k t khc vi mt du (+ hoc -), mt s (0-9), mt
du chm thp phn, hoc mt s m, th n tr v gi tr cho n v tr v b qua
HTML v JavaScript

Trang 165

VIETHANIT
Chng 9. Hm
k t v tt c cc k t theo sau. Nu k t u tin khng th c chuyn i
thnh mt s, th n tr v NaN.
C php ca hm parseInt l:
parseInt (str [, radix])

Hm parseInt phn tch i s u tin ca n l chui str v c gng tr v mt


s nguyn ca c s radix ch nh, c ch ra bi i s ty chn th hai l radix.
V d, mt c s mi c ch ra chuyn i chui thnh mt s thp phn,
c s 8 h bt phn chuyn i chui thnh mt s bt phn, c s 16 thp lc
phn chuyn i chui thnh mt s thp lc phn Vi cc c s trn 10, cc ch
ci ca bng k t ch ra cc ch s ln hn 9. V d, vi cc s thp lc phn (base
16), cc ch t A n F c s dng.
Nu hm parseInt gp phi mt k t khng phi l mt ch s trong h c s ch
nh, th n s b qua s v tt c cc k t theo sau v tr v gi tr s nguyn
c phn tch n v tr . Nu k t u khng th c chuyn i thnh mt s
trong h c s ch nh, th n tr v NaN. Hm parseInt rt ngn chui thnh cc
gi tr s nguyn.
9.2.5 Cc hm Number v String
Cc hm Number v String cho php bn chuyn i mt i tng thnh mt s
hay thnh mt chui.
C php ca cc hm ny l:
Number (objRef)
String (objRef)

Vi objRef l mt tham chiu i tng.


V d sau chuyn i i tng Date thnh mt chui c th c c.
D = new Date (430054663215)
// tr v kt qu di y
// Thu Aug 18 18:37:43 UTC+0700 1983
x = String (D)

9.3 Cu hi v bi tp
1. Mt hm c nh ngha l mt tp cc __________, thc hin mt nhim
v c th.
2. Cc hm bt buc phi c mt hay nhiu tham s truyn vo v mt gi tr tr

v _________(ng/Sai)
3. Trong JavaScript, ngi dng ch c th s dng cc hm nh ngha sn ch

khng c php t nh ngha mt hm. _________(ng/Sai)


4. nh ngha mt hm th ta phi bt u bng t kha ___________
5. Danh sch cc i s ca hm, nm trong cc du ___________ v c phn
cch bi cc du ___________
6. Nu mt hm khng c i s, th khng cn cp du ngoc n () t sau tn
hm ________(ng/Sai)
HTML v JavaScript

Trang 166

VIETHANIT
Chng 9. Hm
7. Trong JavaScript, cc hm khng th lng nhau. C ngha l mt hm khng
th c nh ngha bn trong thn mt hm khc _________(ng/Sai)
8. Tt c cc tham bin c truyn cho cc hm bng ___________
9. Hm _________ l hm c th gi li chnh n.
10. Dng lnh return trong mt hm l khng bt buc _________(ng/Sai)
11. Hm __________ nh gi tr mt i s xc nh xem n c phi l mt
s hu hn hay khng.
12. Hai hm parseInt v parseFloat tr v mt gi tr ________ khi cho i s l
mt _________.
13. Cc hm Number v String cho php bn chuyn i mt __________ thnh
mt s hay thnh mt chui.
14. Nu i s ca hm isNaN l mt s th gi tr tr v ca hm l
________(True/False).

Bi tp thc hnh chng 9:

HTML v JavaScript

Trang 167

VIETHANIT
Chng 9. Hm
1. Hy in ra tt c cc nm nhun t 1699 n 2008 vi nh dng: 5 nm in ra
trn mt dng.
Yu cu: Vit hm t nh ngha check (year) kim tra mt nm c phi
l nm nhun hay khng.
2. Vit chng trnh in tt c cc s nguyn t t 2 n 300.
Yu cu: Vit hm t nh ngha checknum (num) kim tra mt s c
phi l s nguyn t hay khng.
3. Vit chng trnh cho php ngi dng nhp vo ba s, kim tra xem ba s
c phi l chiu di ba cnh ca mt tam gic hay khng. Nu ng th tnh chu
vi ca tam gic ny.
Yu cu: Vit hai hm t nh ngha checknums() v cal() kim tra ba s
c phi l ba cnh ca tam gic hay khng v tnh chu vi ca tam gic .

HTML v JavaScript

Trang 168

VIETHANIT

Chng 10. Mng

CHNG 10

MNG
10.1 Khi nim v mng v cc thao tc trn mng trong JavaScript
10.1.1 Khi nim v mng
C nhng lc ta mun lu nhiu gi tr vo trong mt bin, khi ta s dng
mng. Mng c dng lu mt tp hp cc bin c cng tn. Ch s ca mng
dng phn bit cc bin ny. Trong JavaScript, ch s ca mng bt u t 0.
Tuy nhin, JavaScript khng c kiu d liu mng tng minh. Nu mun s
dng mng, ta c th s dng i tng Array sn c v cc phng thc ca n
lm vic vi cc mng trong ng dng ca mnh. i tng Array c cc phng thc
thao tc mng theo nhiu cch khc nhau, nh lin kt, i chiu, v sp xp chng.
N c mt thuc tnh xc nh chiu di mng v cc thuc tnh khc s dng vi
cc biu thc regular.
Mt mng c nh ngha l mt tp th t cc gi tr c tham kho ti bng
tn v ch mc ca n. V d, bn c th c mt mng c tn l emp cha tn ca cc
nhn vin c nh ch s bi s hiu ca nhn vin. Nh vy emp[0] s l nhn vin
th nht, emp[1] s l nhn vin th hai
10.1.2 To mng
C php sau y dng to mng:
arrayObjectName=new Array(element0,element1,,elementN)

hoc:
arrayObjectName=new Array(arrayLength)

Trong :
- arrayObjectName l tn ca i tng mi hoc thuc tnh ca i tng c

sn. Khi s dng cc thuc tnh v cc phng thc ca Array, th


arrayObjectName l tn ca i tng mng mi.
- element0, element1, , elementN l mt danh sch cc gi tr cho cc phn t

ca mng. Khi s dng dng ny, mng c khi to vi cc gi tr c th


bng cc phn t ca n, v thuc tnh length ca mng c thit lp bng s
cc i s.
- arrayLength l di khi to ca mng. V d, m ngun sau y to ra mt

mng c nm phn t:
billingMethod = new Array(5).

Cc mng ch cng l cc i tng Array. V d sau l mt mng ch:


coffees = [French Roast, Columbian, Kona]

10.1.3 Gn gi tr cho cc phn t mng


Chng ta c th gn gi tr cho mt mng bng cch gn cc gi tr cho cc phn
t ca n.
HTML v JavaScript

Trang 169

VIETHANIT
V d:

Chng 10. Mng

emp[0] = Casey Jones


emp[1] = Phil Lesh
emp[2] = August West

Ta cng c th gn gi tr cho mt mng ngay khi to ra n:


myArray = new Array (Hello, myVar, 3.14159)

V d 10.1:
<HTML>
<HEAD>
<SCRIPT>
myArray = new Array(3);
myArray[0] = "Ha Noi";
myArray[1] = "TP Da Nang";
myArray[2] = "TP Ho Chi Minh";
document.writeln(myArray[0] + "<BR>");
document.writeln(myArray[1] + "<BR>");
document.writeln(myArray[2] + "<BR>");
</SCRIPT>
</HEAD>
</HTML>

Kt qu:

Hnh 10.1: V d mng

HTML v JavaScript

Trang 170

VIETHANIT
10.1.4 Truy cp n cc phn t mng

Chng 10. Mng

Chng ta truy cp ti cc phn t ca mng bng cch s dng s th t (hay ch


s) ca phn t .
V d, gi s ta nh ngha mng sau:
myArray = new Array (Wind, Rain, Fire)

Sau ta s tham kho ti phn t th nht ca mng bng cch dng


myArray[0] v phn t th hai ca mng bng myArray[1].
y lu rng: Ch mc ca cc phn t bt u bng s 0, nhng di ca
mng phn nh s phn t ca mng.
Ngoi cch dng ch s ca phn t mng, th ta cn c dng cch ch ra tn ca
phn t truy cp n phn t .
V d: myArray[Rain].
10.2 Cc phng thc ca mng
Cc phng thc ca i tng Array c lit k v m t trong bng sau:
Bng 10.1: Cc phng thc ca i tng mng
Phng thc

M t

concat

Ni hai mng v tr v mt mng mi.

join

Kt hp tt c cc phn t ca mt mng thnh mt


chui.

pop

G b phn t cui cng ca mt mng v tr v phn


t .

push

B sung mt hoc nhiu phn t vo cui mt mng v


tr v di mi ca mng.

reverse

Hon v cc phn t ca mt mng: Phn t mng u


tin tr thnh phn t cui cng v ngc li, phn t
cui cng tr thnh phn t u tin.

shift

G b phn t u tin ca mt mng v tr v phn t


.

slice

Trch mt phn ca mt mng v tr v mt mng mi.

splice

B sung v/hoc g b cc phn t ca mt mng.

sort

Sp xp cc phn t ca mt mng

toSource

Tr v mt mng ch i din cho mng ch nh; ta c


th s dng gi tr ny to ra mt mng mi. Phng
thc ny ln phng thc Object.toSource.

toString

Tr v mt chui i din cho mng v cc phn t ca


n. Phng thc ny ln phng thc
Object.toString.

unshift

B sung mt hoc nhiu phn t vo pha trc ca mt

HTML v JavaScript

Trang 171

VIETHANIT

Chng 10. Mng


mng v tr v di mi ca mng.

valueOf

Tr v gi tr nguyn thy ca mng. Phng thc ny


ln phng thc Object.valueOf.

Ngoi ra, i tng ny k tha cc phng thc watch v unwatch t i tng


Object.
Di y s phn tch mt s phng thc thng dng trong bng trn.
10.2.1 Phng thc concat
C php:
concat (arrayName2, arrayName3,, arrayNameN)

M t:
concat khng lm thay i cc mng nguyn thy, nhng tr v mt bn sao bao
gm cc bn sao ca cc phn t c lin kt t cc mng nguyn thy. Cc phn t
ca cc mng nguyn thy c sao chp vo trong mng mi nh sau:
Cc tham kho i tng (v khng phi i tng thc s): concat sao
chp cc tham kho i tng vo trong mng mi. C mng nguyn thy
v mng mi tham kho n cng i tng. Nu mt i tng c
tham kho thay i, th s thay i thy r trong c cc mng mi v
mng nguyn thy.
Cc chui v cc s (khng phi cc i tng String v Number): concat
sao chp cc chui v cc s vo trong mng mi. Thay i chui hoc s
trong mt mng khng lm nh hng n cc mng khc.
Nu mt phn t mi c b sung vo mt trong hai mng, th mng kia khng
b nh hng.
V d: M ngun sau kt hp hai mng:
a = new Array (a, b, c)
b = new Array (1,2,3)
ab = a.concat(b);

s to ra mng: [a, b, c, 1, 2, 3].


V d: M ngun sau kt hp ba mng:
num1 = [1,2,3]
num2 = [4,5,6]
num3 = [7,8,9]
nums = num1.concat(num2,num3)

s to ra mng: [1,2,3,4,5,6,7,8,9].
10.2.2 Phng thc join
C php:
join (separator)

HTML v JavaScript

Trang 172

VIETHANIT
Chng 10. Mng
Trong : separator ch ra mt chui ngn cch mi phn t ca mt mng.
Du ngn cch c chuyn i thnh mt chui nu cn thit. Nu b qua, th cc
phn t mng c ngn cch bi mt du phy.
M t:
Cc chuyn i chui ca tt c cc phn t mng c kt hp thnh mt chui.
V d sau to ra mt mng a vi ba phn t, sau kt hp mng ba ln: s dng
du ngn cch mc nh, sau n mt du phy v mt du cch, ri n mt du
cng.
V d 10.2:
<HTML>
<HEAD>
<SCRIPT>
a = new Array ("a","b","c");
a1=a.join(); // gn "a,b,c" vo a1
a2=a.join(","); // gn "a,b,c" vo a2
a3=a.join("+"); // gn "a+b+c" vo a1
document.writeln(a1 + "<BR>");
document.writeln(a2 + "<BR>");
document.writeln(a3 + "<BR>");
</SCRIPT>
</HEAD>
</HTML>

Kt qu:

Hnh 10.2: Minh ha phng thc join


HTML v JavaScript

Trang 173

VIETHANIT

Chng 10. Mng

10.2.3 Phng thc pop


C php:
pop()

V d : M ngun sau to ra mng myFish gm c bn phn t, sau g b


phn t cui cng ca n.
myFish = [angel, clown, mandarin, surgeon] ;
popped = myFish.pop();

Chng trnh s g b phn t cui cng ca mng myFish l surgeon v tr v


phn t ny. Sau cu lnh ny, mng myFish ch cn li ba phn t, chiu di ca mng
s l 3.
10.2.4 Phng thc push
C php:
push(element1, , elementN)

Trong : element1, , elementN l cc phn t c b sung vo cui mng.


M t:
Phng thc push b sung mt hoc nhiu phn t vo cui mt mng v tr v
di mi ca mng.
V d: M ngun sau to ra mng myFish gm c hai phn t, sau b sung hai
phn t vo mng. Sau khi m ngun thi hnh, pushed cha bn phn t.
myFish = ["angel", "clown"] ;
pushed = myFish.push("mandarin", "surgeon");

10.2.5 Phng thc reverse


C php:
reverse()

M t:
Phng thc reverse hon v cc phn t ca i tng mng c gi.
V d 10.3: V d sau to ra mt mng myArray, gm c ba phn t, sau hon
v mng.
<HTML>
<HEAD>
<SCRIPT>
myArray = new Array(3);
myArray[0] = "One";
myArray[1] = "Two";
myArray[2] = "Three";
myArray.reverse();

HTML v JavaScript

Trang 174

VIETHANIT

Chng 10. Mng


document.writeln(myArray[0] + "<BR>");
document.writeln(myArray[1] + "<BR>");
document.writeln(myArray[2] + "<BR>");
</SCRIPT>
</HEAD>

</HTML>

Kt qu:

Hnh 10.3: Minh ha hm reverse


10.2.6 Phng thc sort
C php:
sort (compareFunction)

Trong : compareFunction ch nh mt hm nh ngha th t sp xp. Nu b


qua, th mng c sp xp theo th t t in (trong lut t in) theo nh s chuyn
i chui ca mi phn t.
M t:
Nu compareFunction khng c cung cp, th cc phn t c sp xp bng
cch chuyn i chng thnh cc chui v so snh cc chui theo th t t in
(khng phi th t s hc). V d, 80 xp trc 9 theo th t t in, nhng trong
sp xp s hc th 9 xp trc 80.
Nu compareFunction c cung cp, th cc phn t mng c sp xp tun
theo gi tr tr v ca hm compare. Nu a v b l hai phn t ang c so snh th:
Nu compareFunction(a,b) nh hn 0, th sp xp b c ch s nh hn a.
Nu compareFunction(a,b) tr v 0, th a v b khng thay i vai tr vi
nhau, nhng c sp xp nh tt c cc phn t khc.
Nu compareFunction(a,b) ln hn 0, th sp xp b c ch s ln hn a.
HTML v JavaScript

Trang 175

VIETHANIT
V d sau minh ha cho phng thc sort:

Chng 10. Mng

V d 10.4:
<HTML>
<HEAD>
<SCRIPT>
myArray = new Array(3);
myArray[0] = "Ha Noi";
myArray[1] = "Da Nang";
myArray[2] = "Ho Chi Minh";
myArray.sort();
document.writeln(myArray[0] + "<BR>");
document.writeln(myArray[1] + "<BR>");
document.writeln(myArray[2] + "<BR>");
</SCRIPT>
</HEAD>
</HTML>

Kt qu:

Hnh 6.4: Cc phn t mng c lit k sau khi sp xp


10.3 Mng hai chiu
Mt mng c th c nhiu hn mt chiu. V d, ta c th to ra mt mng hai
chiu lu tr m nhn vin v tn ca nhn vin .
V d 10.5:
on m di y to ra mt mng hai chiu v cho hin th gi tr ca mt trong
nhng phn t trong mng.
HTML v JavaScript

Trang 176

VIETHANIT

Chng 10. Mng

<HTML>
<HEAD>
<SCRIPT>
myArray = new Array(3,3);
myArray[0,0] = "One";
myArray[0,1] = 1;
myArray[1,0] = "Two";
myArray[1,1] = 2;
myArray[2,0] = "Three";
myArray[2,1] = 3;
document.write("The word " +myArray[1,0]);
document.write("
+myArray[1,1]);

is

correlatived

with

the

number

"

</SCRIPT>
</HEAD>
</HTML>

Kt qu:

Hnh 10.5 V d mng hai chiu


Mng hai chiu cn c coi l mng ca cc mng mt chiu. C ngha l mi
phn t ca mng mt chiu cng l mt mng mt chiu.
V d: M ngun sau y to ra mt mng hai chiu
a = new Array(4)
for (i=0; i<4; i++) {
a[i] = new Array(4)

HTML v JavaScript

Trang 177

VIETHANIT

Chng 10. Mng


for (j=0; j<4; j++) {
a[i][j] = [+i+,+j+]
}

V d ny to ra mt mng vi cc dng nh sau:


Row 0: [0,0][0,1][0,2][0,3]
Row 1: [1,0][1,1][1,2][1,3]
Row 2: [2,0][2,1][2,2][2,3]
Row 3: [3,0][3,1][3,2][3,3]

10.4 Cu hi v bi tp
1. Mng c dng lu mt tp hp cc bin c cng _________
2. __________ ca mng dng phn bit cc bin ny.
3. Trong JavaScript, ch s ca mng bt u t 0 _________(ng/Sai)
4. Ta khng th gn gi tr cho mt mng ngay khi to ra _________(ng/Sai)
5. ___________ ca mng phn nh s phn t ca mng.
6. Phng thc _________ c dng sp xp cc phn t ca mt mng.
7. Phng thc reverse c dng ___________ cc phn t ca mt mng.
8. Phng thc ___________ ni hai mng v tr v mt mng mi.
9. Phng thc ___________ g b phn t cui cng ca mt mng v tr v
phn t .

HTML v JavaScript

Trang 178

VIETHANIT
Bi tp thc hnh chng 10:

Chng 10. Mng

1. Nhp vo cc gi tr cho mt mng 15 phn t. Sau in ra cc gi tr ny.


2. Nhp mt mng 15 phn t. Hy in cc gi tr ca mng sau khi sp xp cc gi
tr ny theo th t tng dn.

HTML v JavaScript

Trang 179

VIETHANIT

Chng 11. Cc i tng c bn ca Javascript

CHNG 11

CC I TNG C BN CA JAVASCRIPT
JavaScript c thit k trn m hnh nn tng i tng n gin. Mt i
tng l mt gi d liu ton din. Cc thuc tnh (l cc bin hoc cc i tng khc
ca JavaScript) dng nh ngha i tng v cc phng thc (l cc hm kt hp
vi i tng) tc ng ti d liu u nm trong i tng.
truy cp n cc thuc tnh ca i tng, chng ta phi ch ra tn i tng
v thuc tnh ca n:
objectName.propertyName

Trong , c tn i tng (objectName) v tn thuc tnh (propertyName) u


phn bit ch hoa v ch thng. Ta nh ngha mt thuc tnh bng cch gn cho n
mt gi tr.
V d: Mt chic xe hi l mt i tng. Cc thuc tnh ca chic xe hi l hng
xe (make), kiu dng (model) v mu sc ca xe (color). Hu ht cc chic xe hi u
c mt vi phng thc chung nh go(), brake(), reverse().
myCar.make = Ford;
myCar.model = Mustang;
myCar.color = black;

truy cp n cc phng thc ca mt i tng, chng ta phi ch ra tn i


tng v phng thc yu cu:
objectName.method()

Khi to ra mt trang Web, chng ta c th chn:


Cc i tng ca trnh duyt
Cc i tng xy dng sn ca ngn ng kch bn c s dng
(JavaScript )
Cc phn t HTML
D nhin, chng ta c th to ra cc i tng s dng theo yu cu ca mnh.

HTML v JavaScript

Trang 180

VIETHANIT

Chng 11. Cc i tng c bn ca Javascript


i tng ca trnh duyt

i tng kch bn

Phn t HTML
Hnh 7.1: Cy phn cp i tng
Khi ti liu HTML c hin th trong trnh duyt, mt cy phn cp i tng
c to ra da trn cc phn t trong trang. Cc i tng trnh duyt chng hn nh
vn bn (document), ca s (window), khung (frame), v tr (location), nm trn
cng ca cy phn cp i tng. Sau l cc i tng xy dng sn ca
JavaScript. Cc phn t HTML nm sau cng v chnh l cc th HTML to nn vn
bn hin hnh.
Trong chng ny, chng ta tm hiu v mt s i tng xy dng sn trong
JavaScript:
Math
String
Date
11.1 i tng Math
11.1.1 M t
i tng Math l mt i tng c xy dng sn c cc phng thc v cc
thuc tnh cho cc hm v cc hng s ton hc.
Math l mt i tng JavaScript cp cao. Chng ta c th t ng truy xut n
m khng cn s dng mt hm dng hay gi mt phng thc no.
Tt c cc thuc tnh v phng thc ca i tng Math u tnh. Chng ta
tham kho n hng s PI di dng Math.PI v ta gi hm sin di dng Math.sin(x),
vi x l i s ca phng thc. Cc hng s c nh ngha vi chnh xc cao
nht ca cc s thc trong JavaScript.
C th s dng cu lnh with khi mt on m ngun s dng mt s hng s v
phng thc Math, v th chng ta khng cn phi lp li Math nhiu ln.
V d:
Thay v phi vit:
a = Math.PI * r * r
b= r * Math.sin(x)
c = r * Math.cos(x)

Ta c th dng with:
with (Math)

HTML v JavaScript

Trang 181

VIETHANIT

Chng 11. Cc i tng c bn ca Javascript

{
a = PI * r * r
b= r * sin(x)
c = r * cos(x)
}

11.1.2 Cc thuc tnh ca i tng Math


Cc thuc tnh ca i tng Math c tng kt trong bng sau:
Bng 7.1: Cc thuc tnh ca i tng Math
Thuc tnh

M t

Hng s Euler v c s ca cc logarithm t nhin, xp


x 2.718.

LN2

Logarithm t nhin ca 2, xp x 0.693.

LN10

Logarithm t nhin ca 10, xp x 2.302.

LOG2E

Logarithm c s 2 ca E, xp x 1.442.

LOG10E

Logarithm c s 10 ca E, xp x 0.434.

PI

T l ca chu vi mt ng trn vi ng knh ca n,


xp x 3.14159.

SQRT1_2

Cn bc hai ca , tng ng 1 trn cn bc hai ca


2, xp x 0.707.

SQRT2

Cn bc hai ca 2, xp x 1.414.

V d 11.1:
V d sau tnh din tch ca mt ng trn vi bn knh do ngi dng nhp t
bn phm:
<HTML>
<HEAD>
<SCRIPT LANGUAGE = "JavaScript">
function doCal (x)
{
var a;
a = Math.PI * x * x;
alert ("The area of a circle with a radius of " + x + "" + " is " + "" + a);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>

HTML v JavaScript

Trang 182

VIETHANIT

Chng 11. Cc i tng c bn ca Javascript


Enter the radius of the circle:
<INPUT TYPE = TEXT size = 5 name = "rad"
<BR><BR>
<INPUT TYPE =
"doCal(rad.value)">

button

value

"Display

Area"

onclick

</FORM>
</BODY>
</HTML>

Kt qu:

Hnh 11.2: Kt qu tnh din tch ca ng trn vi bn knh bng 5


11.1.3 Cc phng thc ca i tng Math
Cc phng thc ca i tng Math c tng kt trong bng sau:
Bng 7.2: Cc phng thc ca i tng Math
Phng
thc

M t

abs

Tr v gi tr tuyt i ca mt s.

acos

Tr v arccos (theo radian) ca mt s.

asin

Tr v arcsin (theo radian) ca mt s.

atan

Tr v arctang (theo radian) ca mt s.

atan2

Tr v arctang ca thng s ca cc i s ca n.

ceil

Tr v s nguyn nh nht ln hn hoc bng mt s.

cos

Tr v cos ca mt s.

HTML v JavaScript

Trang 183

VIETHANIT

Chng 11. Cc i tng c bn ca Javascript

exp

Tr v Enumber, vi number l i s, v E l hng s


Euler, c s ca logarithm t nhin.

floor

Tr v s nguyn ln nht nh hn hoc bng mt s.

log

Tr v logarithm t nhin (c s E) ca mt s.

max

Tr v s ln hn trong hai s.

min

Tr v s nh hn trong hai s.

pow

Tr v c s ly tha s m, l baseexponent.

random

Tr v mt s gi ngu nhin gia 0 v 1.

round

Tr v gi tr ca mt s c lm trn n s nguyn
gn nht.

sin

Tr v sin ca mt s.

sqrt

Tr v cn bc hai ca mt s

tan

Tr v tan ca mt s.

V d 11.2:
V d sau tr v gi tr tuyt i ca mt s:
<HTML>
<HEAD>
<SCRIPT LANGUAGE = "JavaScript">
function show (value)
{
with (Math)
{
document.write("Absulute value of a number " + value + " is : "
+abs(eval(value)));
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<B>Enter Value:</B>
<INPUT TYPE = TEXT size = 5 name = "absofvalue">
<BR><BR>
<INPUT TYPE = button value = "Absulute Value" onclick = "show
(this.form.absofvalue.value)">
</FORM>

HTML v JavaScript

Trang 184

VIETHANIT

Chng 11. Cc i tng c bn ca Javascript


</BODY>

</HTML>

Kt qu:

Hnh 11.3.1: Nhp gi tr

Hnh 11.3.2: Kt qu tr v tr tuyt i ca gi tr


11.2 i tng String
11.2.1 M t
i tng String c dng thao tc v lm vic vi chui vn bn. Chng ta
c th tch n thnh cc chui con v bin i chui thnh cc chui ch hoa hoc
ch thng trong mt chng trnh.

HTML v JavaScript

Trang 185

VIETHANIT
Chng 11. Cc i tng c bn ca Javascript
C php tng qut truy cp n mt thuc tnh hoc mt phng thc ca mt
i tng String nh sau:
stringName.propertyName

v:
stringName.methodName

y chng ta lu ng nhm ln gia mt chui ch vi mt i tng


String, bi v i tng String l mt trnh bao bc xung quanh kiu d liu chui
nguyn thy.
V d, m ngun sau y to ra mt chui ch s1 v cng to ra i tng String
s2:
s1 = foo // to ra mt chui k t
s2 = new String (foo) // to ra mt i tng String.

Ta c th gi bt c phng thc no ca i tng String trn gi tr chui ch JavaScript t ng chuyn i chui ch thnh mt i tng String tm thi, gi
phng thc, sau loi b i tng String tm thi. Ta cng c th s dng thuc
tnh String.length vi mt chui ch.
Chng ta nn s dng chui ch nu khng cn s dng i tng String mt
cch c th, v cc i tng String c th tc ng khc thng.
Xt v d sau:
s1 = 2 + 2 // to ra mt gi tr cho chui k t
s2 = new String (2 + 2) // to ra mt i tng String
eval(s1) // tr v s 4
eval(s2) // tr v chui 2 + 2
11.2.2 Cc thuc tnh ca i tng String
i tng String c mt thuc tnh duy nht l thuc tnh length. Thuc tnh ny
cho bit s k t trong mt chui.
V d, m ngun sau s gn gi tr 13 cho bin strlen, v chui myString c cha
13 k t:
myString = Hello, World!
strlen = myString.length

Thuc tnh length ca mt i tng String (hay mt chui) s c t ng cp


nht (thay i gi tr) khi chui thay i, v ngi dng khng c quyn thit t
gi tr ny.
11.2.3 Cc phng thc ca i tng String
i tng String c hai kiu phng thc: mt kiu tr v s bin i trn bn
thn mt chui, chng hn nh phng thc substring() v toUpperCase() hay
toLowerCase(), v kiu kia tr v mt chui c dng HTML, chng hn nh phng
thc bold() v link().

HTML v JavaScript

Trang 186

VIETHANIT
Chng 11. Cc i tng c bn ca Javascript
V d, nu s dng chui myString nh ngha trn, c hai cu lnh
myString.toUpperCase() v cu lnh hello, world!.toUpperCase() u s tr v chui
HELLO, WORLD!.
Phng thc substring c hai i s v tr v mt chui con ca chui gia hai
i s. S dng v d trn, myString.substring(4,9) tr v chui o, Wo.
Nh ni trn, i tng String cng c mt s phng thc t ng nh
dng HTML, chng hn nh bold to ra vn bn kiu ch m v link to ra siu
lin kt.
V d, chng ta c th to ra mt siu lin kt ti mt URL vi phng thc link
nh sau:
myString.link(http://www.helloworld.com)

Bng sau y tng kt cc phng thc thng dng ca i tng String:


Bng 7.3: Cc phng thc ca i tng String
Phng thc

M t

big

Tng kch thc ca chui vn bn

blink

To hiu ng nhp nhy cho chui (Internet Explorer


khng h tr phng thc ny)

bold

In m chui

concat

Ni hai chui v tr v chui mi

fontcolor

Xc nh mu ca font ch

italics

Hin th chui dng in nghing

link

To ra siu lin kt HTML

small

Gim kch thc ca chui vn bn


Hin th chui c ng gch ngang nm gia

strike

(v d: strikethrough)

sub

Hin th vn bn di dng ch s di

substring, substr

Tr v chui con c th ca mt chui, bng cch ch


ra ch s u v ch s cui, hoc ch s u v
di chui con.

sup

Hin th vn bn di dng ch s trn

toLowerCase

Chuyn chui thnh k t thng

toUpperCase

Chuyn chui thnh k t hoa

V d di y minh ha mt vi phng thc ca i tng String v cng


dng ca chng:
V d 11.3:
<HTML>
<HEAD>

HTML v JavaScript

Trang 187

VIETHANIT

Chng 11. Cc i tng c bn ca Javascript


<SCRIPT LANGUAGE = "JavaScript">
var a = "big";
var b = "small";
var c = "bold";
var d = "blink";
var e = "UpperCase";
var f = "LowerCase";
document.write ("<BR>This is "+ a.big() + " text");
document.write ("<BR>This is "+ b.small() + " text");
document.write ("<BR>This is "+ c.bold() + " text");
document.write ("<BR>This is "+ d.blink() + " text");
document.write ("<BR>This is "+ e.toUpperCase() + " text");
document.write ("<BR>This is "+ f.toLowerCase() + " text");
</SCRIPT>
</HEAD>

</HTML>

Kt qu:

Hnh 11.4: Minh ha mt s phng thc ca i tng String


11.2.4 Tm kim trong mt chui
Chng ta c th s dng hm search() ca i tng String tm kim s xut
hin ca mt on vn bn trong chui. Tham s cho hm ny l chui m ta cn tm.
Hm search() tr li ch s v tr ca chui tm kim. Nu khng tm thy, hm s tr
v gi tr -1.
HTML v JavaScript

Trang 188

VIETHANIT
Chng 11. Cc i tng c bn ca Javascript
V d di y minh ha cng dng ca hm ny:
V d 11.4:
<HTML>
<HEAD>
<title>Tim kiem trong chuoi </title>
<script language=javascript>
str1 = "y l kt thc ca mt dng.";
document.write(str1);
document.write("<BR>");
document.write("V tr ca t 'kt' l " +str1.search('kt'));
</script>
</HEAD>
</HTML>

Kt qu:

Hnh 11.5.1: Minh ha hm search()


on m sau thay i tham s ca hm search() tm mt chui con khng c
trong chui:
str1 = "y l kt thc ca mt dng.";
document.write(str1);
document.write("<BR>");
document.write( " V tr ca t 'hng' l "

+str1.search('hng'));

Kt qu:

HTML v JavaScript

Trang 189

VIETHANIT

Chng 11. Cc i tng c bn ca Javascript

Hnh 11.5.2: Minh ha hm search() khi khng tm ra chui con


11.2.5 nh v cc k t trong mt chui
Chng ta c th dng hm indexOf() (tng t nh search()) xc nh v tr
xut hin u tin ca mt chui con hoc mt k t trong mt chui, ngoi ra ta cn
c th xc nh ni m indexOf() bt u thc hin vic tm kim. Ta cng c th tm
bt u t cui chui bng cch dng hm lastIndexOf(). Nu cung cp tham s th hai
cho hm ny, n s tm kim ngc v u chui bt u ti v tr c xc nh bi
tham s th hai.
Ta xt cc v d sau hiu r hn v hai hm ny:
V d 11.5: S dng hm indexOf() xc nh v tr xut hin u tin ca chui
con ma trong chui Trong cc ma, ma xun l ma hoa v cy m chi ny
lc
<HTML>
<HEAD>
<title>Dinh vi ky tu trong chuoi </title>
<script language=javascript>
str1 = "Trong cc ma, ma xun l ma hoa v cy m chi
ny lc.";
document.write(str1);
document.write("<BR>");
document.write("V tr
+str1.indexOf('ma'));

ca

'ma'

tin

"

</script>
</HEAD>
</HTML>

Kt qu:
HTML v JavaScript

Trang 190

VIETHANIT

Chng 11. Cc i tng c bn ca Javascript

Hnh 11.6: Minh ha hm indexOf()


V d 11.6: S dng hm lastIndexOf() xc nh v tr xut hin cui cng ca
chui con ma trong chui Trong cc ma, ma xun l ma hoa v cy m chi
ny lc
<HTML>
<HEAD>
<title>Dinh vi ky tu trong chuoi </title>
<script language=javascript>
str1 = "Trong cc ma, ma xun l ma hoa v cy m chi
ny lc.";
document.write(str1);
document.write("<BR>");
document.write("V tr ca t
+str1.lastIndexOf('ma'));

'ma'

cui

cng

"

</script>
</HEAD>
</HTML>

Kt qu:

HTML v JavaScript

Trang 191

VIETHANIT

Chng 11. Cc i tng c bn ca Javascript

Hnh 11.7: Minh ha hm lastIndexOf()


11.3 i tng Date
11.3.1 M t
JavaScript khng c kiu d liu ngy thng. Tuy nhin, chng ta c th s dng
i tng Date v cc phng thc ca n lm vic vi ngy thng, thi gian trong
cc ng dng. i tng Date c nhiu phng thc cho vic thit lp, nhn v thao
tc ngy thng. N khng c bt k thuc tnh no.
JavaScript x l ngy thng tng t Java. Hai ngn ng ny c nhiu phng
thc ngy thng ging nhau, v c hai ngn ng lu tr ngy thng bng s miligiy
k t 00:00:00, ngy 1 thng 1 nm 1970.
Phm vi ca i tng Date l t -100,000,000 ngy ti 100,000,000 ngy lin
quan ti ngy 01 thng 1 nm 1970 UTC.
to ra mt i tng Date, ta dng c php sau:
dateObjectName = new Date ([parameters])

y dateObjectName l tn ca i tng Date s c to ra, n c th l i


tng mi hoc thuc tnh ca mt i tng sn c.
Cc parameters trong c php sn c c th l:
Khng c i s: to ra ngy thng v thi gian ca mt ngy.
V d: today = new Date()
Mt chui m t ngy thng c dng nh sau: Thng ngy, nm
gi:pht:giy.
V d: Xmas95 = new Date(December 25,1995 13:30:00).
Nu b qua gi, pht v giy, th gi tr s c thit lp l 0.
Mt tp hp cc gi tr s nguyn cho nm, thng, ngy.
V d: Xmas95 = new Date (1995,11,25)
HTML v JavaScript

Trang 192

VIETHANIT
Chng 11. Cc i tng c bn ca Javascript
Mt tp hp cc gi tr s nguyn cho nm, thng, ngy, gi, pht v giy.
V d: Xmas95 = new Date(1995,11,25,9,30,0).
11.3.2 Cc nhm phng thc ca i tng Date
Bng sau m t cc nhm phng thc v thi gian:
Bng 7.4: Cc nhm phng thc ca i tng Date
Nhm phng thc

M t

set

Gm nhng phng thc c dng thit lp


cc gi tr thi gian.

get

Gm nhng phng thc c dng ly cc


gi tr thi gian.

to

Gm nhng phng thc c dng tr v cc


chui gi tr t cc i tng Date.

parse v UTC

Gm nhng phng thc c dng phn tch


cc chui.

Vi cc phng thc get v set, ta c th nhn v thit lp giy, pht, gi,


ngy ca thng, ngy ca tun, cc thng v cc nm ring bit. C phng thc
getDay tr v ngy ca tun, nhng khng c phng thc setDay tng ng, bi v
ngy ca tun c thit lp t ng. Cc phng thc s dng cc s nguyn m
t cc gi tr ny nh sau:
Giy v pht: 0 n 59.
Gi: 0 n 23.
Ngy (trong tun): 0 (ch nht) n 6 (th 7).
Ngy (trong thng): 1 n 31.
Thng: 0 (thng 1) n 11 (thng 12).
Nm: t 1900 tr i.
V d, gi s ta nh ngha ngy thng sau:
Xmas95 = new Date(December 25, 1995)
Th Xmas95.getMonth() s tr v gi tr 11, v Xmas95.getFullYear() s tr v
nm 1995.
Phn tip theo chng ta s tm hiu v cc phng thc trong tng nhm phng
thc ca i tng Date.
11.3.3 Cc phng thc ca i tng Date
11.3.3.1 Nhm phng thc get
Phng thc

M t

getDate

Tr v ngy trong thng t i tng Date (1-31).

getDay

Tr v ngy trong tun t i tng Date (0-6).

getHours

Tr v gi t i tng Date (0-23).

HTML v JavaScript

Trang 193

VIETHANIT
getMinutes

Chng 11. Cc i tng c bn ca Javascript


Tr v pht t i tng Date (0-59).

getSeconds

Tr v giy t i tng Date (0-59).

getMonth

Tr v thng t i tng Date (0-11).

getYear

Tr v nm t i tng Date .

getTime

Tr v s mili giy ca thi gian hin ti (tnh t


1/1/1970).

getTimeZoneOffset

Tr v chnh lch bng pht gia gi a phng v


gi chun (GMT).

11.3.3.2 Nhm phng thc set


Phng thc

M t

setDate

Thit lp ngy trong thng cho i tng Date(0-31)

setHours

Thit lp gi cho i tng Date (0-23).

setMinutes

Thit lp pht cho i tng Date (0-59).

setSeconds

Thit lp giy cho i tng Date (0-59).

setTime

Thit lp gi tr thi gian (tnh bng mili giy) cho


i tng Date.

setMonth

Thit lp gi cho i tng Date (1-12).

setYear

Thit lp nm cho i tng Date, nm phi ln hn


1900 (nm (-) 1900).

11.3.3.3 Nhm phng thc to


Phng thc

M t

toGMTString

Chuyn mt i tng Date t mt chui thi gian


sang dng GMT.

toLocaleString

Chuyn mt i tng Date t mt chui sang dng


thi gian a phng.

11.3.3.4 Nhm phng thc parse v UTC


Phng thc

M t

Date.parse (date string)

S mili giy trong mt date string (chui thi gian)


tnh t 1/1/1970.

Date.UTC (year, month,

S mili giy ca mt i tng thi gian tnh t

day, hours, min., secs.)

1/1/1970.

V d 11.7:
<HTML>
<HEAD>
<script>
function disptime() {
var time = new Date()

HTML v JavaScript

Trang 194

VIETHANIT

Chng 11. Cc i tng c bn ca Javascript


var hour = time.getHours()
var min = time.getMinutes()
var sec = time.getSeconds()
var temp = "" + ((hour>12) ? hour -12:hour)
temp +=((min <10)? ":0" : ":") + min
temp +=((sec <10)? ":0" : ":") + sec
temp +=(hour>=12)? "P.M." : "A.M."
document.MyPage.time.value = temp
}
</script>
</HEAD>
<BODY onload="disptime()">
<P> The time is displayed on the next textbox:
<BR><BR>
<FORM Name = "MyPage">
<INPUT Type = "text" Name="time" size =12 value = "" >
</FORM>
</BODY>

</HTML>

Kt qu:

Hnh 11.8 Minh ha i tng Date


11.4 Cu hi v bi tp
1. truy cp n cc thuc tnh ca i tng, chng ta phi ch ra _______
i tng v ___________ ca n.

HTML v JavaScript

Trang 195

VIETHANIT
Chng 11. Cc i tng c bn ca Javascript
2. i tng String c mt thuc tnh duy nht l thuc tnh __________.
Thuc tnh ny cho bit ___________ trong mt chui.
3. Ngi dng c quyn thit t gi tr cho thuc tnh length _________
(ng/Sai)
4. Nhm phng thc set gm nhng phng thc c dng _________
cc gi tr thi gian.
5. Nhm phng thc get gm nhng phng thc c dng _________
cc gi tr thi gian.
6. Nhm phng thc parse v UTC gm nhng phng thc c dng
__________ cc chui.
7. Phng thc getDate s tr v ngy trong tun t i tng Date (0-6).
_________ (ng/Sai)
8. Phng thc setDay c dng thit lp ngy trong tun cho i tng
Date. _________ (ng/Sai)

Bi tp thc hnh chng 11:


1. Cho dng khai bo sau:
var str1 = new String ("HELLO");
HTML v JavaScript

Trang 196

VIETHANIT
Chng 11. Cc i tng c bn ca Javascript
var str2 = new String ("world");
Hy vit chng trnh y thc hin cc cng vic nh trong hnh sau:

Gi : dng cc phng thc ca i tng String.


2. Vit chng trnh ly cc thng s ngy, thng, nm v gi ca h thng. Kt
qu chy chng trnh s nh trong hnh sau:

Gi : dng cc phng thc ca i tng Date.


3. Cho dng khai bo sau:
num1=10
num2=20

HTML v JavaScript

Trang 197

VIETHANIT
Chng 11. Cc i tng c bn ca Javascript
Vit chng trnh hin th dng ch nh trong hnh: (s dng phng thc
ca hm Math)

4. Nhp vo mt s l bn knh ca ng trn. Hy tnh chu vi v bn knh ca


ng trn .
5. In ra cu cho Cho bui sng. By gi l . nu gi h thng < 12.
Ngc li nu gi >12 th in cu Cho bui chiu. By gi l .

HTML v JavaScript

Trang 198

VIETHANIT

Chng 12. X l form v cc s kin cho cc phn t trn form

CHNG 12

X L FORM V CC S KIN CHO CC PHN T


TRN FORM
12.1 Gii thiu v i tng form
12.1.1 M t i tng
i tng form (biu mu) cho php ngi s dung nhp vo vn bn v to ra
cc la chn t cc phn t form nh cc hp chn (checkbox), cc nt bm radio v
cc danh sch la chn (selection lists). Ta cng c th s dung mt biu mu gi
d liu n mt server.
i tng form c to ra bi th FORM ca HTML. Cng c thi hnh
JavaScript to ra mt i tng form cho mi th FORM trong ti liu. Ta truy xut
cc i tng FORM thng qua thuc tinh document.forms v thng qua cc thuc
tinh ch nh ca i tng .
nh ngha mt biu mu, ta s dung c php HTML chun vi s b sung
cc trnh x l s kin ca JavaScript. Nu ta cung cp mt gia tri cho thuc tinh
NAME, th ta c th s dung gia tri ch mc trong mng forms. Ngoi ra, i
tng document c kt hp c mt thuc tinh ch nh cho mi biu mu ch nh.
Mi biu mu trong mt ti liu l mt i tng ring bit. Ta c th tham kho
n cc phn t ca mt biu mu trong m ngun ca mnh bng cch s dung tn
ca phn t (t thuc tinh NAME) hoc mng Form.elements. Mng elements cha
mt mc nhp cho mi phn t (nh mt i tng Checkbox, Radio hoc Text chng
hn) trong mt biu mu.
Nu nhiu i tng trn cng biu mu c cng thuc tinh NAME, th mt
mng tn cho c t ng to ra. Mi phn t trong mng i din cho mt i
tng Form ring bit. Cc phn t c ch mc theo th t gc bt u t 0. Vi du,
nu hai phn t Text v mt phn t Textarea trn cng biu mu c thuc tinh NAME
ca chng c thit lp l myField, th mt mng vi cc phn t myField[0],
myField[1] v myField[2] c to ra. Ta cn bit trng thi ny trong m ngun ca
mnh v bit myField tham kho n mt phn t duy nht hay n mt mng cc
phn t.
12.1.2 Cc thuc tinh v phng thc ca i tng form
Cc thuc tinh ca i tng form c trnh by trong bng sau:
Bng 9.1: Cc thuc tnh ca i tng form
Thuc tnh

M t

action

Thuc tinh ny ch nh v tr ca script s c dng


x l form c hon thnh v gi (submit)

elements

Mt mng phn nh tt c cc phn t trong mt biu


mu.

encoding

Phn nh thuc tinh ENCTYPE

HTML v JavaScript

Trang 199

VIETHANIT

Chng 12. X l form v cc s kin cho cc phn t trn form

length

Phn nh s cc phn t trn mt biu mu.

method

Thuc tinh ny ch nh phng thc m d liu s


c gi n server.

name

Phn nh thuc tinh NAME.

target

Phn nh thuc tinh TARGET.

Cc phng thc ca i tng form c trnh by trong bng sau:


Bng 9.2: Cc phng thc ca i tng form
Phng thc

M t

handleEvent

Gi trnh x l cho s kin c ch nh.

reset

M phng vic kch chut trn mt nt bm reset cho


biu mu gi.

submit

trnh mt biu mu.

V d 12.1:
V d sau m t mt form n gin vi hai nt Submit v Reset. Khi ngi dng
nhn vo nt Submit th s lin kt n mt file khc (file Simple.html) v hin th giao
din ca file ny. y l hai nt m ta thng thy trong cc form, thng c dng
gi thng tin nhp i (Submit), hoc xa cc thng tin nhp nhp li
(Reset).
<HTML>
<HEAD>
<TITLE> Using Form Tag </TITLE>
</HEAD>
<BODY BGCOLOR = "#FFFFFF">
<FORM ACTION = "Simple.html">
<INPUT TYPE = "submit" NAME= "Submit">
<INPUT TYPE = "reset" NAME= "Reset">
</FORM>
</BODY>
</HTML>

File Simple.html:
<HTML>
<HEAD>
<TITLE> SIMPLE </TITLE>
</HEAD>
<BODY BGCOLOR = "#00FF00">
<H3> This is Simple.html file </H3>

HTML v JavaScript

Trang 200

VIETHANIT

Chng 12. X l form v cc s kin cho cc phn t trn form


</BODY>

</HTML>

Kt qu:

Hnh 12.1.1: Kt qu v d 9.1

Hnh 9.1.2: Sau khi nhn nt Submit


12.2 X l s kin trong JavaScript
12.2.1 Khi nim v s kin v trnh x l s kin
Cc s kin l hnh ng do ngi dng tc ng sinh ra. Chng ta c th lm
cho trang web d tng tc hn bng cch to ra cc trnh x l s kin p ng cc s
kin do ngi dng to ra. Trong phn ny, chng ta s tm hiu v cc s kin m
trinh duyt h tr v cch to ra cc trnh x l s kin cho cc s kin ny.
HTML v JavaScript

Trang 201

VIETHANIT
Chng 12. X l form v cc s kin cho cc phn t trn form
Cc chng trnh JavaScript thng l hng s kin. Cc s kin l cc hnh
ng xy ra trn trang web. Mt s kin c th do ngi dng to ra nh kch chut
vo mt nt (button) hoc do h thng to ra nh thay i kch thc ca trang.
Hu ht cc trinh duyt u h tr mt i tng Event. Mi s kin c mt i
tng Event tng ng. i tng Event cung cp thng tin v s kin loi s kin
v v tr ca con tr ti thi im xy ra s kin. Khi mt s kin c pht sinh, n
c gi i nh mt i s n trnh x l s kin. D nhin, phi c mt trnh x l
s kin trong trng hp ny.
Chng hn, khi ngi dng nhp chut, s kin onmousedown c pht sinh.
i tng Event cha nhng thng tin sau:
Loi s kin Trong trng hp ny l nhp chut.
V tr x v y ca con tr khi nhp chut.
Nt chut no c nhn.
Cc phm h tr (Control, Alt, Meta, hoc Shift) c nhn vo thi im
xy ra s kin.
i tng Event khng th c s dung trc tip vi i tng window, n
c s dung nh mt phn ca trnh x l s kin.
Mt s kin bt u bng hnh ng hoc iu kin khi to s kin v kt thc
bng vic p li ca trnh x l s kin. Vng i ca mt s kin thng thng gm
nhng bc sau:
1. Hnh ng ngi dng hoc iu kin tng ng vi s kin xy ra.
2. i tng Event c cp nht tc th nhm phn nh trng thi ca s kin.
3. S kin c kch hot.
4. Trnh x l s kin tng ng c gi.
5. Trnh x l s kin thc hin hnh ng ca n v tr v iu khin cho
chng trnh.
12.2.2 Cc s kin JavaScript ph bin
Sau y l mt s s kin JavaScript ph bin thng c hu ht cc i tng
h tr:
onClick
S kin onClick c to ra bt c khi no ngi dng nhp chut ln cc phn
t form no (button, checkbox, radio button, v phn t select), hoc ln cc
hyperlink.
V d 9.2:
Vi du sau minh ho s kin onClick. Trong v d ny, ngi dng s nhp mt
biu thc vo textbox expr, sau khi bm nt Calculate th trn mn hnh s xut hin
mt hp thoi yu cu ngi dng xc nhn c thc hin biu thc va nhp hay
khng. Nu ng th kt qu ca biu thc s c hin th, nu khng th s hin th
thng bo Please come back again.
<HTML>

HTML v JavaScript

Trang 202

VIETHANIT

Chng 12. X l form v cc s kin cho cc phn t trn form


<HEAD>
<TITLE> onClick example </TITLE>
<SCRIPT LANGUAGE = "JavaScript">
function compute(form)
{
if (confirm ("Are you sure?"))
{
form.ketqua.value = eval(form.expr.value)
}
else
{
alert("Please come back again.")
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
Enter the expression:
<INPUT TYPE="text" NAME ="expr" SIZE =15>
<BR>
<BR>
<INPUT TYPE = "button" VALUE = "Calculate" onClick=
"compute(this.form)">
<BR>
<BR>
<BR>
The result is:
<INPUT TYPE="text" NAME ="ketqua" SIZE =15>
<BR>
</FORM>
</BODY>

</HTML>

HTML v JavaScript

Trang 203

VIETHANIT
Kt qu:

Chng 12. X l form v cc s kin cho cc phn t trn form

Hnh 12.2: Minh ha s kin onClick


onChange
S kin onChange xy ra bt c khi no mt phn t form thay i. iu ny c
th xy ra khi ni dung ca mt trng vn bn thay i, hoc khi mt la chn trong
danh sch chn la thay i. Tuy nhin, s kin onChange khng c to ra khi mt
radio button hoc mt checkbox c nhp. Thay vo , s kin onClick s c to
ra.
S kin onChange c gi i khi mt phn t hon tt vic thay i. V vy, khi
mt textbox ang c hiu chnh, s kin onChange ch c pht sinh sau khi vic
hiu chnh hon tt, v khi ngi dng thot khi textbox .
V d 12.3:
Vi du sau s x l k t do ngi dng nhp vo. Nu k t nhp vo l mt con
s, th trn mn hnh s hin th thng bo Thank you!, nu khng phi th s hin
th Please enter a numeric value.
<HTML>
<HEAD>
<TITLE> onChange example </TITLE>
<SCRIPT LANGUAGE = "JavaScript">
function checkNum(num)
{
if (num =="")
{
alert ("Please enter a number");
return false;

HTML v JavaScript

Trang 204

VIETHANIT

Chng 12. X l form v cc s kin cho cc phn t trn form


}
if (isNaN(num))
{
alert ("Please enter a numeric value");
return false;
}
else
{
alert ("Thank you!");
}
}
</SCRIPT>
</HEAD>
<BODY bgColor = white>
<FORM>
Please enter a number:
<INPUT TYPE = text size = 5 onChange = "checkNum(this.value)">
</FORM>
</BODY>

</HTML>

Kt qu: Nu gia tri nhp vo khng phi l mt s:

Hnh 12.3.1: Minh ha s kin onChange


Nu gia tri nhp vo l mt s:

HTML v JavaScript

Trang 205

VIETHANIT

Chng 12. X l form v cc s kin cho cc phn t trn form

Hnh 12.3.2: Minh ha s kin onChange


onFocus
S kin onFocus c gi i bt khi no mt phn t form tr thnh phn t hin
thi. Ch khi mt phn t nhn c tiu im n mi nhn c d liu nhp t
ngi dng. iu ny c th xy ra khi ngi dng nhp chut ln phn t, hoc s
dung phm Tab hoc Shift+Tab (di chuyn n cc phn t trn form).
onBlur
onBlur ngc vi onFocus. Khi ngi dng ri khi mt phn t trn form, s
kin onBlur c kch hot. i vi mt s phn t, nu ni dung ca n cng b thay
i, th s kin onChange cng c kch hot.
V d 12.4:
V d sau minh ho s kin onFocus v onBlur. Khi textbox nhn c focus,
mu nn s chuyn sang DIMGRAY, khi mt focus (blur), mu nn s chuyn sang
AQUA.
<HTML>
<HEAD>
<TITLE> onFocus and onBlur example </TITLE>
</HEAD>
<BODY bgColor = "lavender">
<FORM>
<INPUT TYPE = text name= text1
onBlur = "(document.bgColor='aqua')"
onfocus= "(document.bgColor='dimgray')">
</FORM>

HTML v JavaScript

Trang 206

VIETHANIT

Chng 12. X l form v cc s kin cho cc phn t trn form


</BODY>

</HTML>

Kt qu:

Hnh 12.4.1: Khi textbox mt focus (blur)

Hnh 12.4.2: Khi textbox nhn focus


onMouseOver
S kin onMouseOver c to ra bt c khi no con tr chut di chuyn ln trn
mt phn t.
HTML v JavaScript

Trang 207

VIETHANIT
V d 12.5:

Chng 12. X l form v cc s kin cho cc phn t trn form

V d sau minh ho s kin onMouseOver. Trong v d ny, khi ngi dng di


chuyn con tr chut ln mt phn t, th s kin onMouseOver s c to ra, lc
ny trn textbox s hin th mt ni dung tng ng vi phn t c la chn. C
ngha l, khi con tr chut c di chuyn n phn t Vietnam, th trn textbox s
hin th cu You have selected Vietnam. Tng t i vi cc phn t America v
Korea.
<HTML>
<HEAD>
<TITLE> onMouseOver and example </TITLE>
<SCRIPT LANGUAGE = "JavaScript">
var num=0
function showLink(num)
{
if (num==1)
{
document.forms[0].elements[0].value=
selected America";

"You

have

"You

have

"You

have

}
if (num==2)
{
document.forms[0].elements[0].value=
selected Korea";
}
if (num==3)
{
document.forms[0].elements[0].value=
selected Vietnam";
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="text" SIZE =40>
</FORM>
<a href = "#" onMouseOver = "showLink(1)"> America </a><br>
<a href = "#" onMouseOver = "showLink(2)"> Korea </a><br>
<a href = "#" onMouseOver = "showLink(3)"> Vietnam </a><br>

HTML v JavaScript

Trang 208

VIETHANIT

Chng 12. X l form v cc s kin cho cc phn t trn form


</BODY>

</HTML>

Kt qu:

Hnh 12.5: Minh ha s kin onMouseOver


onMouseOut
S kin onMouseOut c to ra bt c khi no con tr chut di chuyn ra khi
phn t .
onLoad
S kin onLoad (p dng cho i tng body) c pht sinh khi ti xong ti
liu. N cng c pht sinh khi mt nh ti xong.
V d 12.6:
on m sau minh ho s kin ny, dng trong th BODY.
<HTML>
<HEAD>
<TITLE> Hello </TITLE>
</HEAD>
<BODY onLoad="alert('Hello')">
</BODY>
</HTML>

Kt qu:

HTML v JavaScript

Trang 209

VIETHANIT

Chng 12. X l form v cc s kin cho cc phn t trn form

Hnh 12.6: Minh ha s kin onLoad


onSubmit
S kin onSubmit c to ra bt c khi no ngi dng truyn d liu t form
i (thng s dung nt Submit). S kin xy ra trc khi form tht s c gi i.
Tht ra, trnh x l s kin tng ng vi s kin ny c th ngn chn form khng
c gi i bng cch tr v gia tri false. Cch ny dng kim tra s hp l ca d
liu nhp vo.
onMouseDown
S kin ny c kch hot khi hnh ng nhp chut xy ra. Ngha l khi ngi
dng nhp chut. y l trnh x l s kin cho cc i tng button, document, v
link.
onMouseUp
S kin ny c kch hot khi hnh ng nh chut xy ra. Ngha l khi ngi
dng th chut. y l trnh x l s kin cho cc i tng button, document, v link.
V d 12.7:
Trong v d sau, khi ngi dng nhp chut vo nt Change th mu nn s
chuyn sang mu aqua, v khi ngi dng th chut th mu nn s l limegreen.
<HTML>
<HEAD>
<TITLE> onMouseDown-onMouseUp example </TITLE>
</HEAD>
<BODY bgColor = "lavender">
<FORM>
<INPUT TYPE = button name= butt1 value="Change Color"

HTML v JavaScript

Trang 210

VIETHANIT

Chng 12. X l form v cc s kin cho cc phn t trn form


onMouseDown = "(document.bgColor='aqua')"
onMouseUp= "(document.bgColor='limegreen')">
</FORM>
</BODY>

</HTML>

Kt qu:

Hnh 12.7.1: Minh ha s kin onMouseDown

Hnh 12.7.2: Minh ha s kin onMouseUp


onResize

HTML v JavaScript

Trang 211

VIETHANIT
Chng 12. X l form v cc s kin cho cc phn t trn form
S kin ny c kch hot khi hnh ng thay i kch thc ca s xy ra.
Ngha l, khi ngi dng hoc mt script lm thay i kch thc mt ca s hay
frame. y l trnh x l s kin cho cc i tng Window.
12.2.3 Lm vic vi trnh x l s kin
Khi mt s kin c khi to, chng ta c th to ra mt on m JavaScript
p ng li s kin. on m ny c gi l trnh x l s kin. Trnh x l s kin
c th l mt cu lnh n, mt tp hp cc cu lnh hoc mt hm.
V d:
<INPUT TYPE = button
NAME = docode
onClick = DoOnClick();>

Khi nhp chut vo mt button, s kin onClick c khi to. S kin onClick
gi hm DoOnClick v thc thi nhng cu lnh bn trong hm.
12.2.3.1 Trnh x l s kin cho cc th HTML
khi to trnh x l s kin cho th HTML, chng ta phi ch nh th v
thuc tnh trnh x l s kin. Sau chng ta gn m JavaScript. on m phi c
t trong cp du nhy kp.
<TAG eventHandler = JavaScript Code>

Cc i s chui phi c t trong cp du nhy n.


<INPUT TYPE=button NAME=Button1 VALUE=Open See!
onClick = window.open(mydoc.html, newWin)>

Thay v s dng nhiu cu lnh JavaScript, hm s gip cho vic thit k chng
trnh tt hn. Chng ta s gi hm khi cn thit; hn na cc hm c th c dng
bi cc phn t khc.
Cu lnh ny gn hm greeting() cho trnh x l s kin onLoad ca window.
Thuc tnh trnh x l s kin c tham chiu n hm greeting ch khng phi li
gi n hm greeting().
V d 12.8:
<HTML>
<HEAD>
<TITLE> My home page </TITLE>
<SCRIPT LANGUAGE = "JavaScript">
function greeting()
{
alert ("Welcome to my world!");
}
</SCRIPT>
</HEAD>
<BODY onLoad="greeting()">

HTML v JavaScript

Trang 212

VIETHANIT

Chng 12. X l form v cc s kin cho cc phn t trn form


</BODY>

</HTML>

Kt qu:

Hnh 12.8: Kt qu v d 9.8


12.2.3.2 Trnh x l s kin nh l nhng thuc tnh
Chng ta cng c th gn mt hm cho mt trnh x l s kin ca mt i
tng. C php nh sau:
object.eventhandler = function;

V d:
window.onload = greeting;

Chng ta xem li v d trn v s dng trnh x l s kin nh nhng thuc tnh:


V d 12.9:
<HTML>
<HEAD>
<TITLE> My home page </TITLE>
<SCRIPT LANGUAGE = "JavaScript">
function greeting()
{
alert ("Welcome to my world!");
}
window.onLoad = greeting();
</SCRIPT>
</HEAD>

HTML v JavaScript

Trang 213

VIETHANIT

Chng 12. X l form v cc s kin cho cc phn t trn form

</HTML>

Kt qu s tng t nh hnh 9.8. im mnh ca k thut ny l tnh linh hot.


C ngha l chng ta c th thay i nhanh chng cc trnh x l s kin khi c yu
cu.
12.3 S dng s kin cho cc thnh phn trn form
Trong phn ny chng ta s tho lun v cc phn t trn form v cc s kin
trn cc phn t ny.
12.3.1 i tng Textfield (Trng vn bn)
Cc Textfield nhn bit cc s kin onBlur, onFocus, v onChange.
S kin onFocus xy ra khi ngi dng nhp chut vo trng text.
S kin onBlur xy ra khi ngi dng di chuyn ra khi trng text bng
cch nhp chut bn ngoi n hoc nhn phm tab.
S kin onChange xy ra khi ngi dng c s thay i bn trong trng
text v sau di chuyn ra khi trng vn bn.
V d 12.10:
V d di y minh ha cc s kin ni trn. Trong v d ny, khi ngi dng
nhp chut bn trong trng text, s kin onFocus s xy ra. Khi ngi dng c s
thay i vn bn sau di chuyn ra khi vng vn bn hin thi, s kin onChange
s xy ra.
<HTML>
<HEAD>
<TITLE> Textfield Events </TITLE>
<SCRIPT LANGUAGE = "JavaScript">
function writeIt(value)
{
alert (value);
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR = "#FFFFFF">
<FORM NAME = "myfm">
<INPUT TYPE="text" NAME="first_text"
onFocus="writeIt('focus');"
onChange="writeIt('change');">
</FORM>
</BODY>
</HTML>

Kt qu:
HTML v JavaScript

Trang 214

VIETHANIT

Chng 12. X l form v cc s kin cho cc phn t trn form

Hnh 12.9.1: Kt qu v d 9.10

Hnh 12.9.2: Khi nhp chut vo textbox

HTML v JavaScript

Trang 215

VIETHANIT

Chng 12. X l form v cc s kin cho cc phn t trn form

Hnh 12.9.3: Khi nhp chut ra khi textbox


(Nu ni dung trong textbox thay i )
12.3.2 i tng Command Button
S kin onClick ca mt command button xy ra khi ngi dng nhp chut vo
command button .
V d di y s minh ha cch s dng s kin onClick trn i tng
command button. Trong v d ny, khi ngi dng nhp chut vo nt Copy, s kin
onClick xy ra v phn vn bn trng text th nht s c sao chp sang trng
text th hai.
V d 12.11:
<HTML>
<HEAD>
<TITLE> Button Events </TITLE>
<SCRIPT LANGUAGE = "JavaScript">
function writeIt(value)
{
myfm.second_text.value = value;;
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR = "#FFFFFF">
<FORM NAME = "myfm">
<INPUT TYPE="text" NAME="first_text">
<INPUT TYPE="button" VALUE="Copy"

HTML v JavaScript

Trang 216

VIETHANIT

Chng 12. X l form v cc s kin cho cc phn t trn form


onClick="writeIt(myfm.first_text.value);">
<INPUT TYPE="text" NAME="second_text">
</FORM>
</BODY>

</HTML>

Kt qu:

Hnh 12.10.1: Kt qu v d 9.10

Hnh 12.10.2: Sau khi nhp vn bn vo trng text u tin

Hnh 12.10.3: Sau khi nhp vo nt Copy


12.3.3 i tng Checkbox
Checkbox l mt i tng ca form hot ng theo c ch bt-tt. iu ny c
ngha l Checkbox c th c check hoc khng. Cng nh button, checkbox cng
HTML v JavaScript

Trang 217

VIETHANIT
Chng 12. X l form v cc s kin cho cc phn t trn form
nhn bit s kin onClick. V d di y s minh ha v cch s dng i tng
checkbox.
Trong v d sau, trn form s c mt chn checkbox, khi ngi dng kch chn
vo checkbox ny (tm hiu l khi bt n) th mu nn s chuyn sang mu trng,
ng thi km theo thng bo Thanks!, ngc li, khi ngi dng b chn (tm hiu
l tt n) th mu nn s l mu en v hin th thng bo Hey! Turn that back
on!
V d 12.12:
<HTML>
<HEAD>
<TITLE> Checkbox Events </TITLE>
<SCRIPT LANGUAGE = "JavaScript">
function switchLight()
{
var the_box=window.document.form_2.check_1;
var the_switch = "";
if (the_box.checked == false)
{
document.bgColor='black';
alert ("Hey! Turn that back on!");
}
else
{
document.bgColor='white';
alert ("Thanks!");
}
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR = "#FFFFFF">
<FORM NAME = "form_2">
<INPUT TYPE="checkbox" NAME="check_1"
onClick="switchLight();">
The Light Switch
</FORM>
</BODY>
</HTML>

HTML v JavaScript

Trang 218

VIETHANIT
Kt qu:

Chng 12. X l form v cc s kin cho cc phn t trn form

Hnh 12.11.1: Khi nhp chn vo checkbox

Hnh 12.11.2: Khi b chn checkbox


12.3.4 i tng radio
M JavaScript ca s kin onClick trn nt radio tng t nh i vi checkbox,
chng ch khc nhau trong cch dng trn form. Khi chng ta mt checkbox ch
tt (bt) ta c th bt li (tt i). Tuy nhin i vi cc nt radio th khc, mt khi
c bt, th tt c cc radio khc u ch tt, ta khng th thay i trng thi
ca radio ny bng cch nhp vo n nh i vi checkbox. Trng thi ny ca cc nt
gi nguyn cho n khi mt radio khc c bt. Lc ny, ch c radio mi c bt
l trng thi bt cn cc radio khc u ch tt.
HTML v JavaScript

Trang 219

VIETHANIT
Chng 12. X l form v cc s kin cho cc phn t trn form
V d sau minh ha i tng radio. Cng tng t nh v d 9.11, nhng trong
v d ny, checkbox c thay bng hai nt radio, mt nt l bt n (Light on) v
mt nt l tt n (Light off). Vi chc nng tng t, khi chn Light on th mu
nn s l mu trng, v thng bo km theo s l Thanks!, ngc li, nu chn
Light off th mu nn s chuyn thnh mu en, v s hin th thng bo Hey! Turn
that back on!.
V d 12.13:
<HTML>
<HEAD>
<TITLE> Option Button Events </TITLE>
<SCRIPT LANGUAGE = "JavaScript">
function offButton()
{
var the_box=window.document.form_1.radio_1;
if (the_box.checked == true)
{
window.document.form_1.radio_2.checked
= false;
document.bgColor='black';
alert ("Hey! Turn that back on!");
}
}
function onButton()
{
var the_box=window.document.form_1.radio_2;
if (the_box.checked == true)
{
window.document.form_1.radio_1.checked
= false;
document.bgColor='white';
alert ("Thanks!");
}
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR = "#FFFFFF" TEXT ="red">
<FORM NAME = "form_1">
<INPUT TYPE="radio" NAME="radio_1"

HTML v JavaScript

Trang 220

VIETHANIT

Chng 12. X l form v cc s kin cho cc phn t trn form


onClick="offButton();">
Light off
<INPUT TYPE="radio" NAME="radio_2"
onClick="onButton();" checked>
Light on
</FORM>
</BODY>

</HTML>

Kt qu:

Hnh 12.12.1: Khi chn Light on

HTML v JavaScript

Trang 221

VIETHANIT

Chng 12. X l form v cc s kin cho cc phn t trn form


Hnh 12.12.2: Khi chn Light off

12.3.5 i tng ComboBox (la chn)


i tng ComboBox xut hin trong form HTML ging nh mt danh sch
xung hoc danh sch cun ca cc ty chn.
Danh sch ty chn c m t gi hai th <SELECT> v </SELECT> bng
cch s dng th <OPTION>
ComboBox h tr cc s kin onBlur, onFocus, v onChange.
12.3.6 Kim tra tnh hp l ca ni dung cc trng trn form
Chng trnh di y l mt v d v vic kim tra tnh hp l ca ni dung cc
trng trn form trc khi chuyn n cho server tip tc x l. Trong qu trnh
kim tra tnh hp l ca ni dung cc trng trn form, ngi lp trnh phi kim tra
tng trng bo m rng khng c trng no b b trng hoc cha cc thng tin
khng hp l.
V d 12.14:
<HTML>
<HEAD>
<TITLE> Form events </TITLE>
<SCRIPT LANGUAGE = "JavaScript">
function validateFirstName()
{
var str=form1.fname.value;
if (str.length == 0)
{
alert ("The first name cannot be
empty");
return false;
}
return true;
}
function validateLastName()
{
var str=form1.lname.value;
if (str.length == 0)
{
alert ("The last name cannot be
empty");
return false;
}

HTML v JavaScript

Trang 222

VIETHANIT

Chng 12. X l form v cc s kin cho cc phn t trn form


return true;
}
function validateEmail()
{
var str=form1.email.value;
if (str.length == 0)
{
alert ("The Email field cannot be
empty");
return false;
}
}
function proccessForm()
{
disp = open("","result")
disp.document.write("<TITLE> Result Page
</TITLE>"+"<PRE>")
disp.document.write("<H2 ALIGN='CENTER'>" +
"Thanks for signing in " +
"</H2>"+"<HR>"+"<BR><BR>")
disp.document.write("First name \t\t:" +
form1.fname.value+"<BR>")
disp.document.write("Last name \t\t:"+
form1.lname.value+"<BR>")
disp.document.write("Email \t\t\t:" +
form1.email.value+"<BR>")
disp.document.write("Your comments \t\t:" +
form1.comment.value+"<BR>")
disp.document.write("<PRE>")
if (disp.confirm("Is this information
correct"))
disp.close()
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR = "#FFFFFF">
<H2 ALIGN = "CENTER"> Handling Form
Events</H2><HR>
<FORM NAME = "form1">

HTML v JavaScript

Trang 223

VIETHANIT

Chng 12. X l form v cc s kin cho cc phn t trn form


<P> First name: <INPUT TYPE="text" NAME="fname"
size=10 onBlur = "validateFirstName()">
Last name: <INPUT TYPE="text" NAME="lname"
size=15
onBlur = "validateLastName()"></P>
<P> Email: <INPUT TYPE="text" NAME="email"
size=10
onBlur = "validateFirstName()">
Comments: <TEXTAREA NAME="comment" rows=4
cols=30>Enter your comments </TEXTAREA></P>
<P ALIGN="CENTER"><INPUT TYPE = "button"
VALUE="Submit this form" onClick =
"proccessForm()">
<INPUT TYPE= "reset"></P>
</FORM>
</BODY>

</HTML>

Kt qu:

Hnh 12.10.1: Kt qu v d 9.11

HTML v JavaScript

Trang 224

VIETHANIT

Chng 12. X l form v cc s kin cho cc phn t trn form

Hnh 12.10.2: Sau khi nhp thng tin vo form

Hnh 12.10.3: Sau khi bm nt Submit this form


HTML v JavaScript

Trang 225

VIETHANIT
Chng 12. X l form v cc s kin cho cc phn t trn form
Chng ta xt tip v d sau, v d ny l on chng trnh kim tra tnh ng
n ca mt a ch email c nhp vo qua Textbox.
V d 12.15:
<HTML>
<HEAD>
<TITLE> Email Validation </TITLE>
<script language=Javascript>
function IsEmailValid (Formname,ElemName)
{
var EmailOk = true;
var Temp = ElemName;
var AtSym = Temp.value.indexOf ('@');
var Period =Temp.value.lastIndexOf('.');
var Space = Temp.value.indexOf(' ');
var Length = Temp.length -1;
if ((AtSym <1)||(Period<=AtSym+1)||(Period ==Length)||(Space
>=0))
{
EmailOk=false
alert('Please enter a valid email address!')
Temp.focus()
}
else
alert('This is a valid email address!')
return EmailOk
}
</script>
</HEAD>
<BODY>
<form name="frm">
<b> Please enter your email address: <input type = "text" name =
"text1">
<input type= "button" value = "Check email address" onClick =
"IsEmailValid('frm', frm.text1);">
</form>
</BODY>
</HTML>

Kt qu:
HTML v JavaScript

Trang 226

VIETHANIT

Chng 12. X l form v cc s kin cho cc phn t trn form

Hnh 12.11.1: Mt a ch email hp l

Hnh 12.11.1: Kim tra a ch email khng hp l, yu cu ngi dng nhp li


12.4 Cu hi v bi tp
1. S kin onChange c c to ra khi mt radio button hoc mt checkbox
c nhp hay khng ?_________ (C/Khng )
2. S kin _________ c to ra bt c khi no con tr chut di chuyn ln
trn mt phn t.
3. S kin _________ c to ra bt c khi no con tr chut di chuyn ra khi
phn t .
4. S kin _________ c kch hot khi hnh ng nhp chut xy ra.
5. S kin _________ c kch hot khi hnh ng nh chut xy ra.
HTML v JavaScript

Trang 227

VIETHANIT
Chng 12. X l form v cc s kin cho cc phn t trn form
6. Khi mt s kin c khi to, chng ta c th to ra mt on m JavaScript
p ng li s kin. on m ny c gi l _________.
7. Cc Textfield nhn bit cc s kin onBlur, onFocus, v onChange. Trong :
S kin _________ xy ra khi ngi dng c s thay i bn trong trng
text v sau di chuyn ra khi trng vn bn.
S kin _________ xy ra khi ngi dng di chuyn ra khi trng text
bng cch nhp chut bn ngoi n hoc nhn phm tab.
S kin _________ xy ra khi ngi dng nhp chut vo trng text.
8. Trong mt form, ta c th chn nhiu nt radio trong cng mt nhm.
___________ (ng/Sai)
9. i tng _________ xut hin trong form HTML ging nh mt danh sch
s xung hoc danh sch cun ca cc ty chn.

Bi tp thc hnh chng 12:


HTML v JavaScript

Trang 228

VIETHANIT
Chng 12. X l form v cc s kin cho cc phn t trn form
1. Hy vit mt trang web, gm c mt textbox v hai nt radio nh hnh di
Yu cu: Vit mt hm JavaScript, khi kch vo nt radio Disabled th gi tr
trong textbox n, v khi chn nt radio abled th cho textbox son tho c.

2. Hy vit mt trang web, tng t bi 1 gm c mt button v mt nt


CheckBox nh hnh di. Khi kch vo CheckBox th cho button ny n i.
3. Hy vit mt trang web, chn mt textbox, g ni dung vo textbox. Khi
textBox mt focus (tiu im) th s c mt hp thng bo hin th ni dung
ca textbox.
4. Hy vit mt trang web, chn mt textbox v mt button. Nu khng nhp
ni dung vo textbox th button ny s b n (thuc tnh disabled ca button
bng true), khi ni dung c nhp vo textbox th button ny s xut hin.
Bm vo button th s xut hin mt thng bo ni dung va nhp trong
textbox.
5. Thit k mt form gm c hai textbox v mt nt lnh button, textbox1
ngi dng nhp username, textbox2 ngi dng nhp password (khi
ngi dng g vo textbox ny th trn textbox ch hin th cc du * thay v
ni dung ang nhp). Sau khi nhp ni dung vo hai textbox ny, nhn vo
nt lnh th username v password ca ngi dng s c hin th trong mt
thng bo.
6. Lm li v d 9.14 trong chng ny, yu cu cc trng khng c
trng, v email nhp vo phi l mt a ch email hp l. Nu email khng
hp l th ch buc ngi dng nhp li da ch email (Cc trng khc khng
bt buc nhng vn c th thay i ni dung c).

HTML v JavaScript

Trang 229

VIETHANIT

TI LIU THAM KHO


[1] Cn bn thit k Web, Nh xut bn thng k.
[2] Nguyn Vit Linh (2002), Hng dn lp trnh v tham kho ton din JavaScript,
NXB Thanh Nin, Bn Tre.
[3] Nguyn Trng Sinh (2006), Hc nhanh JavaScript bng hnh nh, NXB Lao ng
x hi.
[4] Nguyn Trng Sinh (2005), Thit k Web ng vi JavaScript, NXB Lao ng x
hi
[5] L Minh Tr (2000), JavaScript, NXB Tr v Cng ty vn ha Phng Nam, TP H
Ch Minh.
[6] Thit k trang Web c nhn bng ngn ng HTML, Nh Xut bn thng k
[7] Thu Nhi, Thit k trang Web vi HTML, NXB Tr
[8] Trung tm o to lp trnh vin quc t Softech Aptech, Gio trnh HTML v
JavaScript.
[9] JavaScript 2.0: The Complete Reference, Second Edition
by Thomas Powell and Fritz Schneider.
McGraw-Hill/Osborne 2004
[10] JavaScript & DHTML Cookbook
By Danny Goodman
Publisher: OReilly
[11] JavaScript: The Definitive Guide, 4th Edition
By David Flanagan
Publisher: OReilly
[12] Learning JavaScript
By Shelley Powers
Publisher: OReilly

HTML v JavaScript

You might also like