Professional Documents
Culture Documents
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
Trang 1
VIETHANIT
Ngn ng nh du siu vn bn
Ngn ng nh du m rng
Ngn ng XHTML
Trang 2
VIETHANIT
Ngn ng DHTML
HTML v JavaScript
Trang 3
VIETHANIT
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:
c im ca HTML
HTML v JavaScript
Trang 4
VIETHANIT
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>
HTML v JavaScript
Trang 5
VIETHANIT
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:
HTML v JavaScript
Trang 6
VIETHANIT
To trang Web
HTML v JavaScript
Trang 7
VIETHANIT
CHNG 2
CC TH C BN TRONG HTML
2.1 Th v cc thuc tnh ca th
Th m
Th ng
<B>Trang Web</B>
Mc nhn
Du xo ti
<TABLE BORDER>
Th
Trang 8
VIETHANIT
Gi tr ca SRC
Gi tr ca HSPACE
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
2.2.4
HTML v JavaScript
Trang 9
VIETHANIT
Kt qu:
HTML v JavaScript
Trang 10
VIETHANIT
Kt qu:
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
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
HTML v JavaScript
Trang 12
VIETHANIT
Kt qu:
HTML v JavaScript
Trang 13
VIETHANIT
</BODY>
</HTML>
Kt qu:
HTML v JavaScript
Trang 14
VIETHANIT
</BODY>
</HTML>
Kt qu:
Th
Upper Roman
Lower Roman
Uppercase
Lowercase
Bt u vi mt s khc ln hn 1
HTML v JavaScript
Trang 15
VIETHANIT
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
Kt qu:
HTML v JavaScript
Trang 17
VIETHANIT
</BODY>
</HTML>
Kt qu:
HTML v JavaScript
Trang 18
VIETHANIT
</BODY>
</HTML>
Kt qu:
Th xc nh vn bn trang web
C php:
<p> Ni dung ca vn bn </p>
Th to ng thng
HTML v JavaScript
Trang 19
VIETHANIT
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
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
Kt qu:
Th xc nh dng ch thch
C php:
<!-->
: Xc nh mt vng ch thch
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
</HEAD>
<BODY>
<B> This is a bold line text
</BODY>
</HTML>
Kt qu:
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
Kt qu:
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
Kt qu:
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
Kt qu:
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>
HTML v JavaScript
Trang 25
VIETHANIT
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
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>
La chn mu nn
HTML v JavaScript
Trang 27
VIETHANIT
<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:
2.4.2
Mu
#FF0000
Red
#00FF00
Green
#0000FF
Blue
#000000
Black
#FFFFFF
White
La chn hnh nh lm nn
HTML v JavaScript
Trang 28
VIETHANIT
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:
To on vn bn
HTML v JavaScript
Trang 29
VIETHANIT
Kt qu:
Ngt on
HTML v JavaScript
Trang 30
VIETHANIT
2.5.1
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
Contrycode: M nc
Trang 31
VIETHANIT
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:
Host.domain: a ch Internet ca my ch
HTML v JavaScript
Trang 32
VIETHANIT
<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:
Kt qu:
HTML v JavaScript
Trang 33
VIETHANIT
Trang 34
VIETHANIT
Kt qu:
HTML v JavaScript
Trang 35
VIETHANIT
HTML v JavaScript
Trang 36
VIETHANIT
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:
HTML v JavaScript
Trang 37
VIETHANIT
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>
HTML v JavaScript
Trang 38
VIETHANIT
Cc th DIV v SPAN
Kt qu:
HTML v JavaScript
Trang 39
VIETHANIT
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
</BODY>
</HTML>
Kt qu:
HTML v JavaScript
Trang 41
VIETHANIT
</BODY>
</HTML>
Kt qu:
HTML v JavaScript
Trang 42
VIETHANIT
Kt qu:
M nh dng
Ln hn (>)
>
Nh hn (<)
<
Trch dn ()
"
K t &
&
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
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:
*
*********
*********
*********
*********
*********
*********
HTML v JavaScript
Trang 44
VIETHANIT
HTML v JavaScript
Trang 45
VIETHANIT
HTML v JavaScript
Trang 46
VIETHANIT
HTML v JavaScript
Trang 47
VIETHANIT
CHNG 3
Cc
hng
trong
bng
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
</BODY>
</HTML>
Kt qu:
HTML v JavaScript
Trang 49
VIETHANIT
</HTML>
Kt qu:
M t
Bgcolor
nh r mu nn cho bng
Border
nh mu cho ng vin
Bordercolordark
Bordercolorlight
Cellpadding
Frame
Height
Rules
Width
M t
Align, Vlign
Bgcolor
nh r mu nn ca hng
HTML v JavaScript
Trang 50
VIETHANIT
M t
Align, vlign
Border
Colspan
Nowrap
Rowspan
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
</HTML>
Kt qu:
Trang 52
VIETHANIT
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>
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
Chng hn:
<table align = center border = 10 frame = vsible cellspacing= 0 rules= rows
width= 50%>
ngha
Void
Above
Below
Hsides
Lsh
Rsh
HTML v JavaScript
Trang 53
VIETHANIT
Vside
Box
ngha
None
Group
Rows
Cols
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
Kt qu:
HTML v JavaScript
Trang 55
VIETHANIT
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
Trang 57
VIETHANIT
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
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 .
Phn t FORM
HTML v JavaScript
Trang 59
VIETHANIT
Thuc tnh
M t
ACCEPT
ACTION
M t
TYPE
NAME
HTML v JavaScript
Trang 60
VIETHANIT
VALUE
SIZE
SRC
M t
NAME
SIZE
TYPE
VALUE
3.2.3.3 Textbox
HTML v JavaScript
Trang 61
VIETHANIT
M t
NAME
SIZE
TYPE
VALUE
STATUS
CHECKED
3.2.3.5 Radio
M t
NAME
SIZE
TYPE
VALUE
STATUS
CHECKED
Chng hn:
<INPUT TYPE = radio NAME = sex VALUE = male> Male
3.2.3.6 Submit
HTML v JavaScript
Trang 62
VIETHANIT
3.2.3.7 nh
HTML v JavaScript
Trang 63
VIETHANIT
</BODY>
</HTML>
Kt qu:
HTML v JavaScript
Trang 64
VIETHANIT
M t
COLS
ROWS
SIZE
TYPE
VALUE
Chng hn:
<TEXTAREA NAME = Text1 COLS = 20 ROWS = 5> </TEXTAREA>
3.2.3.10
Phn t BUTTON
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.
HTML v JavaScript
Trang 65
VIETHANIT
<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
Kt qu:
HTML v JavaScript
Trang 66
VIETHANIT
Phn t Select
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.
Trang 67
VIETHANIT
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
Kt qu:
HTML v JavaScript
Trang 68
VIETHANIT
M t
SELECTED
VALUE
LABEL
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
</BODY>
</HTML>
Kt qu:
Phn t LABEL
HTML v JavaScript
Trang 70
VIETHANIT
</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:
To biu mu
HTML v JavaScript
Trang 71
VIETHANIT
NAME=CONTROL1
VALUE=0
HTML v JavaScript
Trang 72
VIETHANIT
TYPE=CHECKBOX
<BR>
<P><INPUT TYPE=SUBMIT VALUE=OK>
<INPUT TYPE=RESET VALUE=RESET>
</FORM>
</BODY>
</HTML>
Kt qu:
HTML v JavaScript
Trang 73
VIETHANIT
HTML v JavaScript
Trang 74
VIETHANIT
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
Lm vic vi khung
HTML v JavaScript
Trang 75
VIETHANIT
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
Kt qu:
HTML v JavaScript
Trang 76
VIETHANIT
M t
NAME
SRC
NORESIZE
SCROLLING
FRAMEBORDER
MARGINWIDTH
MARGINHEIGH
T
HTML v JavaScript
Trang 77
VIETHANIT
</FRAMESET>
</HTML>
Kt qu:
HTML v JavaScript
Trang 78
VIETHANIT
Kt qu:
HTML v JavaScript
Trang 79
VIETHANIT
Kt qu:
HTML v JavaScript
Trang 80
VIETHANIT
</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:
HTML v JavaScript
Trang 81
VIETHANIT
here
<A
</NOFRAMES>
</FRAMESET>
</HTML>
M t
NAME
WIDTH
HEIGHT
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
HTML v JavaScript
Trang 83
VIETHANIT
HTML v JavaScript
Trang 84
VIETHANIT
</BODY>
</HTML>
Kt qu:
HTML v JavaScript
Trang 85
VIETHANIT
Kt qu:
HTML v JavaScript
Trang 86
VIETHANIT
</HEAD>
<BODY>
<IMG ALT="Dancing sweets" SRC="dacing sweets.gif">
</BODY>
</HTML>
Kt qu:
HTML v JavaScript
Trang 87
VIETHANIT
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:
Trang 88
VIETHANIT
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
HTML v JavaScript
Trang 89
VIETHANIT
4.1.2
HTML v JavaScript
Trang 90
VIETHANIT
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
Kt qu:
HTML v JavaScript
Trang 92
VIETHANIT
Trang 93
VIETHANIT
HTML v JavaScript
Trang 94
VIETHANIT
</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:
HTML v JavaScript
Trang 95
VIETHANIT
Kt qu:
HTML v JavaScript
Trang 96
VIETHANIT
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:
Trang 97
VIETHANIT
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:
HTML v JavaScript
Trang 98
VIETHANIT
<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:
HTML v JavaScript
Trang 99
VIETHANIT
<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:
HTML v JavaScript
Trang 100
VIETHANIT
</BODY>
</HTML>
Kt qu:
Trang 101
VIETHANIT
Kt qu:
HTML v JavaScript
Trang 102
VIETHANIT
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
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
Tn CSS
Font
font-size
font-style
Cc thuc tnh vn bn
text-align
text-indent
vertical-align
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
Trang 106
VIETHANIT
HTML v JavaScript
Trang 107
VIETHANIT
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
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
HTML v JavaScript
Trang 108
VIETHANIT
HTML v JavaScript
Trang 109
VIETHANIT
</HEAD>
<BODY>
<P> Chao mung cac ban den voi the gioi cua JavaScript
</BODY>
</HTML>
Kt qu:
Trang 110
VIETHANIT
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:
HTML v JavaScript
Trang 111
VIETHANIT
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:
HTML v JavaScript
Trang 112
VIETHANIT
Kt qu:
Trang 113
VIETHANIT
Trang 114
VIETHANIT
HTML v JavaScript
Trang 115
VIETHANIT
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
ngha
\b
Phm li (Backspace)
\f
\n
\r
\t
HTML v JavaScript
Trang 117
VIETHANIT
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.
HTML v JavaScript
Trang 118
VIETHANIT
CHNG 6
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
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
++
--
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
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)
(Khng bng
tuyt i)
>
HTML v JavaScript
Trang 121
VIETHANIT
(Ln hn)
>=
(Ln hn hoc
bng)
<
(Nh hn)
<=
(Nh hn hoc
bng)
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.
&&
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
VIETHANIT
bt2
bt1 || bt2
!bt1
True
True
True
True
False
True
False
False
True
False
False
True
False
True
True
False
False
False
False
True
HTML v JavaScript
Trang 123
VIETHANIT
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
Dch tri
a << b
a >> b
a >>> b
AND
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:
HTML v JavaScript
Trang 124
VIETHANIT
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
9 << 2 = 36
9 >> 2 = 2
19 >>> 2 = 4
(v 9 c vit thnh
1001, dch sang tri
hai bit thnh 100100,
tc l bng 36 )
(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.
HTML v JavaScript
Trang 125
VIETHANIT
Trang 126
VIETHANIT
Kt qu:
HTML v JavaScript
Trang 127
VIETHANIT
"text1"
SIZE
20
</form>
</HTML>
Kt qu:
Trang 128
VIETHANIT
Cc ton t
Du phy
Php gn
iu kin
?:
Ton t logic OR
||
&&
&
So snh bng
== != === !==
Quan h
+-
Nhn/Chia
*/%
Ph nh/Tng
! ~ - ++ --
HTML v JavaScript
Trang 129
VIETHANIT
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
HTML v JavaScript
Trang 130
VIETHANIT
(x)
So khp vi x hoc y.
x|y
HTML v JavaScript
Trang 131
VIETHANIT
{n,m}
[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 (-).
[^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 (-).
\d
\s
\t
\w
\n
Trang 132
VIETHANIT
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}
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
M t
Exec
Test
Match
Search
Replace
Spilit
Trang 134
VIETHANIT
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:
Kt qu:
Trang 135
VIETHANIT
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
HTML v JavaScript
Trang 137
VIETHANIT
HTML v JavaScript
Trang 138
VIETHANIT
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;
HTML v JavaScript
Trang 139
VIETHANIT
Kt qu:
HTML v JavaScript
Trang 140
VIETHANIT
{
// cc cu lnh ng vi iu kin ng
}
else
{
// cc cu lnh ng vi iu kin sai
}
HTML v JavaScript
Trang 141
VIETHANIT
Kt qu:
HTML v JavaScript
Trang 142
VIETHANIT
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
</HEAD>
</HTML>
Kt qu:
HTML v JavaScript
Trang 144
VIETHANIT
Kt qu:
HTML v JavaScript
Trang 145
VIETHANIT
Trang 146
VIETHANIT
HTML v JavaScript
Trang 147
VIETHANIT
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:
-
HTML v JavaScript
Trang 148
VIETHANIT
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:
-
Trong :
-
HTML v JavaScript
Trang 149
VIETHANIT
2.
3.
4.
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;
}
HTML v JavaScript
Trang 150
VIETHANIT
<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:
Trang 151
VIETHANIT
HTML v JavaScript
Trang 152
VIETHANIT
Sau vng lp th 2: n = 2 v x = 3
Sau vng lp th 3: n = 3 v x = 6
Trang 153
VIETHANIT
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;
}
Trang 154
VIETHANIT
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;
}
HTML v JavaScript
Trang 155
VIETHANIT
HTML v JavaScript
Trang 156
VIETHANIT
</HTML>
Kt qu:
HTML v JavaScript
Trang 157
VIETHANIT
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.
Trang 158
VIETHANIT
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.
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;
}
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;
}
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]);
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)
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)
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])
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
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).
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
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
mng c nm phn t:
billingMethod = new Array(5).
Trang 169
VIETHANIT
V d:
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:
HTML v JavaScript
Trang 170
VIETHANIT
10.1.4 Truy cp n cc phn t mng
M t
concat
join
pop
push
reverse
shift
slice
splice
sort
Sp xp cc phn t ca mt mng
toSource
toString
unshift
HTML v JavaScript
Trang 171
VIETHANIT
valueOf
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: [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:
Trang 173
VIETHANIT
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
</HTML>
Kt qu:
Trang 175
VIETHANIT
V d sau minh ha cho phng thc sort:
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:
Trang 176
VIETHANIT
<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:
HTML v JavaScript
Trang 177
VIETHANIT
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:
HTML v JavaScript
Trang 179
VIETHANIT
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
HTML v JavaScript
Trang 180
VIETHANIT
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
{
a = PI * r * r
b= r * sin(x)
c = r * cos(x)
}
M t
LN2
LN10
LOG2E
Logarithm c s 2 ca E, xp x 1.442.
LOG10E
Logarithm c s 10 ca E, xp x 0.434.
PI
SQRT1_2
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
button
value
"Display
Area"
onclick
</FORM>
</BODY>
</HTML>
Kt qu:
M t
abs
Tr v gi tr tuyt i ca mt s.
acos
asin
atan
atan2
Tr v arctang ca thng s ca cc i s ca n.
ceil
cos
Tr v cos ca mt s.
HTML v JavaScript
Trang 183
VIETHANIT
exp
floor
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
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
</HTML>
Kt qu:
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
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
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)
M t
big
blink
bold
In m chui
concat
fontcolor
Xc nh mu ca font ch
italics
link
small
strike
(v d: strikethrough)
sub
Hin th vn bn di dng ch s di
substring, substr
sup
toLowerCase
toUpperCase
HTML v JavaScript
Trang 187
VIETHANIT
</HTML>
Kt qu:
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:
+str1.search('hng'));
Kt qu:
HTML v JavaScript
Trang 189
VIETHANIT
ca
'ma'
tin
"
</script>
</HEAD>
</HTML>
Kt qu:
HTML v JavaScript
Trang 190
VIETHANIT
'ma'
cui
cng
"
</script>
</HEAD>
</HTML>
Kt qu:
HTML v JavaScript
Trang 191
VIETHANIT
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
get
to
parse v UTC
M t
getDate
getDay
getHours
HTML v JavaScript
Trang 193
VIETHANIT
getMinutes
getSeconds
getMonth
getYear
Tr v nm t i tng Date .
getTime
getTimeZoneOffset
M t
setDate
setHours
setMinutes
setSeconds
setTime
setMonth
setYear
M t
toGMTString
toLocaleString
M t
1/1/1970.
V d 11.7:
<HTML>
<HEAD>
<script>
function disptime() {
var time = new Date()
HTML v JavaScript
Trang 194
VIETHANIT
</HTML>
Kt qu:
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)
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:
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)
HTML v JavaScript
Trang 198
VIETHANIT
CHNG 12
M t
action
elements
encoding
HTML v JavaScript
Trang 199
VIETHANIT
length
method
name
target
M t
handleEvent
reset
submit
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
</HTML>
Kt qu:
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
</HTML>
HTML v JavaScript
Trang 203
VIETHANIT
Kt qu:
HTML v JavaScript
Trang 204
VIETHANIT
</HTML>
HTML v JavaScript
Trang 205
VIETHANIT
HTML v JavaScript
Trang 206
VIETHANIT
</HTML>
Kt qu:
Trang 207
VIETHANIT
V d 12.5:
"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
</HTML>
Kt qu:
Kt qu:
HTML v JavaScript
Trang 209
VIETHANIT
HTML v JavaScript
Trang 210
VIETHANIT
</HTML>
Kt qu:
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>
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
</HTML>
Kt qu:
V d:
window.onload = greeting;
HTML v JavaScript
Trang 213
VIETHANIT
</HTML>
Kt qu:
HTML v JavaScript
Trang 214
VIETHANIT
HTML v JavaScript
Trang 215
VIETHANIT
HTML v JavaScript
Trang 216
VIETHANIT
</HTML>
Kt qu:
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:
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
</HTML>
Kt qu:
HTML v JavaScript
Trang 221
VIETHANIT
HTML v JavaScript
Trang 222
VIETHANIT
HTML v JavaScript
Trang 223
VIETHANIT
</HTML>
Kt qu:
HTML v JavaScript
Trang 224
VIETHANIT
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
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.
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.
HTML v JavaScript
Trang 229
VIETHANIT
HTML v JavaScript