Bai Giang Full - ct2116 - Ltweb 3

M M C C L LC C
MC LC.............................................................................................................................................................. 1
CHNG 1: GII THIU HTML CC SIU LIN KT.......................................................................... 4
1.1 GII THIU .................................................................................................................................................... 4
1.2 GII THIU INTERNET.................................................................................................................................... 4
1.3 GII THIU HTML........................................................................................................................................ 5
1.3.1 HTML Development ............................................................................................................................. 6
1.3.2 Cu trc ca mt ti liu HTML.......................................................................................................... 7
1.3.3 S dng th <META>........................................................................................................................ 10
1.3.4 S dng k t c bit trong ti liu HTML....................................................................................... 10
1.4 S DNG CC SIU LIN KT....................................................................................................................... 12
1.4.1 Gii thiu siu lin kt v URL .......................................................................................................... 12
1.4.2 S dng siu lin kt .......................................................................................................................... 14
1.4.3 iu hng quanh Web site ............................................................................................................... 19
CHNG 2: CC TH HTML C BN........................................................................................................ 22
2.1 GII THIU .................................................................................................................................................. 22
2.2 HEADING (TIU ) .................................................................................................................................... 22
2.3 TH KHI <SPAN>, <DIV>........................................................................................................................ 23
2.4 DANH SCH................................................................................................................................................. 24
2.6.1 Danh sch khng th t ..................................................................................................................... 25
2.6.2 Danh sch c th t ........................................................................................................................... 28
2.5 TH K NG NGANG: <HR>.................................................................................................................... 32
2.6 S DNG FONT............................................................................................................................................ 33
2.7 S DNG MU SC...................................................................................................................................... 34
2.8 S DNG HNH NH TRONG TI LIU HTML............................................................................................... 35
CHNG 3: S DNG BNG......................................................................................................................... 40
3.1 GII THIU .................................................................................................................................................. 40
3.2 CCH TO BNG ......................................................................................................................................... 40
3.2.1 Th dng to bng......................................................................................................................... 40
3.2.2 Chn hng v ct................................................................................................................................ 43
3.2.3 Xo hng v ct.................................................................................................................................. 44
3.2.4 Trn : kt hp ct hay dng ............................................................................................................. 45
3.2.5 nh dng cho ................................................................................................................................. 48
3.4 CHN MULTIMEDIA VO TI LIU HTML................................................................................................... 50
3.4.1 Chn nh ng (.GIF) vo ti liu HTML.......................................................................................... 50
3.4.2 Chn m thanh vo ti liu HTML..................................................................................................... 51
3.4.3 Chn video vo ti liu HTML........................................................................................................... 53
CHNG 4: S DNG BIU MU V KHUNG......................................................................................... 54
4.1 GII THIU .................................................................................................................................................. 54
4.2 GII THIU BIU MU.................................................................................................................................. 54
4.2.1 S dng biu mu............................................................................................................................... 54
4.2.2 Phn t FORM................................................................................................................................... 55
4.2.3 Cc phn t nhp ca HTML............................................................................................................. 56
4.2.4 To biu mu...................................................................................................................................... 66
4.3 KHUNG (FRAME) ......................................................................................................................................... 69
Lp trnh Web
2

4.3.1 Ti sao s dng khung? ..................................................................................................................... 70
4.3.2 S dng khung.................................................................................................................................... 70
4.3.3 Phn t IFRAME Khung trn dng (inline frame).......................................................................... 76
CHNG 5: S DNG STYLE....................................................................................................................... 78
5.1 GII THIU .................................................................................................................................................. 78
5.2 DHTML........................................................................................................................................................ 78
5.2.1 Gii thiu DHTML............................................................................................................................. 78
5.2.2 Cc c im ca DHML................................................................................................................... 79
5.3 STYLE SHEETS............................................................................................................................................. 80
5.3.1 Khi nim, chc nng v li ch ca Style Sheets .............................................................................. 80
5.3.2 Quy tc Style Sheets ........................................................................................................................... 83
5.3.3 Cc Selector trong Style Sheets.......................................................................................................... 85
5.3.4 Kt hp, lin kt v chn mt Style Sheet vo ti liu HTML ............................................................ 91
5.3.5 Thit lp thuc tnh trong Style Sheet ................................................................................................ 93
CHNG 6: JAVASCRIPT, NN TNG V C PHP.............................................................................. 95
6.1 GII THIU .................................................................................................................................................. 95
6.2 GII THIU V JAVASCRIPT ......................................................................................................................... 95
6.2.1 Javascript l g?................................................................................................................................. 95
6.2.2 Hiu ng v quy tc Javascript.......................................................................................................... 96
6.2.3 Cc cng c Javascript v IDE, mi trng thc thi......................................................................... 97
6.2.4 Nhng Javascript vo trang Web....................................................................................................... 97
6.2.5 V d n gin s dng hp thng bo v phng thc write ......................................................... 103
6.3 CC BIN................................................................................................................................................... 104
6.3.1 Khai bo bin................................................................................................................................... 104
6.3.2 Phm vi ca bin.............................................................................................................................. 104
6.4 CC KIU D LIU..................................................................................................................................... 105
ngha ...................................................................................................................................................... 108
6.5 CC TON T............................................................................................................................................ 109
6.5.1 Ton t s hc.................................................................................................................................. 110
6.5.2 Ton t so snh................................................................................................................................ 111
6.5.3 Ton t logic .................................................................................................................................... 112
6.5.4 Ton t chui ................................................................................................................................... 113
6.5.4 Ton t Evaluation........................................................................................................................... 113
6.5.5 Mc u tin ca cc ton t............................................................................................................. 115
6.6 MNG ....................................................................................................................................................... 115
6.7 CC CU LNH IU KIN ......................................................................................................................... 120
6.8 CC LNH VNG LP................................................................................................................................. 121
6.9 HM (FUNCTION) ...................................................................................................................................... 125
CHNG 7: CC I TNG C BN TRONG JAVASCRIPT .......................................................... 129
7.1 GII THIU ................................................................................................................................................ 129
7.2 CC I TNG JAVASCRIPT .................................................................................................................... 129
7.2.1 Cu lnh This ................................................................................................................................... 130
7.2.2 i tng String............................................................................................................................... 132
7.2.3 i tng Math................................................................................................................................ 134
7.2.4 i tng Date................................................................................................................................. 137
Lp trnh Web
3

7.3 I TNG EVENT KHI NIM............................................................................................................... 141
7.4 CC S KIN JAVASCRIPT......................................................................................................................... 141
7.5 TRNH X L S KIN................................................................................................................................ 150
TI LIU THAM KHO................................................................................................................................. 153
Lp trnh Web
4

C CH H N NG G 1 1: : G GI I I I T TH HI I U U H HT TM ML L C CC C S SI I U U L LI I N N K K T T
Kt thc chng ny, bn c th:
M t v Internet
M t v HTML
Vit mt ti liu HTML n gin
S dng siu lin kt trong ti liu HTML
S dng th <META>
S dng cc k t c bit trong ti liu HTML
1.1 GII THIU
Internet,World Wide Web, v Web page khng ch cn l cc thut ng. Gi
y, cc thut ng ny tr thnh hin thc. Internet l mng my tnh ln nht trn
th gii, c xem nh l mng ca cc mng. World Wide Web l mt tp con ca
Internet. World Wide Web gm cc Web Servers c mt khp mi ni trn th gii.
Cc Web server cha thng tin m bt k ngi dng no trn th gii cng c th
truy cp c. Cc thng tin c lu tr di dng cc trang Web.
Trong phn ny, chng ta s hc v Ngn ng nh du siu vn bn (HTML), y l
mt phn quan trng trong lnh vc thit k v pht trin th gii Web.
1.2 GII THIU INTERNET
Mng l mt nhm cc my tnh kt ni vi nhau. Internet l mng ca cc mng.
Giao thc TCP/IP (Transmission Control Protocol/Internet Protocol) cung cp vic kt
ni tt c cc my tnh trn th gii.

Hnh 1.1: Internet

World Wide Web l mt tp con ca Internet. N bt u nh l n nghin cu cp
quc gia ti phng nghin cu CERN Thy S. Ngy nay, n cung cp thng tin cho
ngi dng trn ton th gii.
WWW hot ng da trn 3 c ch a cc ti nguyn c gi tr n vi ngi
dng. l:

Lp trnh Web
5

Giao thc: Ngi dng tun theo cc giao thc ny truy cp ti nguyn trn
Web. HyperText Transfer Protocol(HTTP) l giao thc c WWW s dng.
a ch: WWW tun theo mt cch thc t tn thng nht truy cp vo cc
ti nguyn trn Web. URL c s dng nhn dng cc trang v cc ti
nguyn trn Web.
HTML: Ngn ng nh du siu vn bn (HTML) c s dng to cc ti
liu c th truy cp trn Web. Ti liu HTML c to ra bng cch s dng
cc th v cc phn t ca HTML. File c lu trn Web server vi ui .htm
hoc .html.
Khi bn s dng trnh duyt yu cu mt s thng tin no , Web server s p
ng cc yu cu . N gi thng tin c yu cu n trnh duyt di dng cc
trang web. Trnh duyt nh dng thng tin do my ch gi v v hin thi chng.

Hnh 1.2: Trnh duyt yu cu n my ch
1.3 GII THIU HTML
Ngn ng nh du siu vn bn ch r mt trang Web c hin th nh th no trong
mt trnh duyt. S dng cc th v cc phn t HTML, bn c th:
iu khin hnh thc v ni dung ca trang
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 s hin th thng ip My first HTML
document
V d 1:
<HTML>
<HEAD>
Lp trnh Web
6

<TITLE>Welcome to HTML</TITLE>
</HEAD>
<BODY>
<H3>My first HTML document</H3>
</BODY>
</HTML>
Trnh duyt thng dch nhng lnh ny v hin th trang web nh hnh 1.3

Hnh 1.3: Kt qu v d 1
1.3.1 HTML Development
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 Mosaic, 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. Netscapes
Navigator v Microsofts 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 ha 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>
. . .
Lp trnh Web
7

</HTML>
Ch rng cc th khng phn bit ch hoa v ch thng, v th bn c th s dng
<html> thay cho <HTML>
Th HTML bao gm:
<ELEMENT ATTRIBUTE = value>
Phn t: nhn dng th
Thuc tnh: M t th
Value: gi tr c thit lp cho thuc tnh
V d, <BODY BGCOLOR = lavender>
Trong v d trn, BODY l phn t, BGCOLOR(nn) l thuc tnh v lavender l
gi tr. Khi c php HTML c thc hin, mu nn cho c trang c thit lp l
mu lavender.
1.3.2 Cu trc ca mt ti liu HTML
Mt ti liu HTML gm 3 phn c bn:
Phn HTML: Mi ti liu HTML phi bt u bng th m HTML <HTML>
v kt thc bng th ng HTML </HTML>
<HTML> . </HTML>
Th HTML bo cho trnh duyt bit ni dung gia hai th ny l mt ti liu
HTML
Phn tiu : Phn tiu bt u bng th <HEAD> v kt thc bi th
</HEAD>. Phn ny cha tiu m c hin th trn thanh iu hng ca
trang Web. Tiu nm trong th TITLE, bt u bng th <TITLE> v kt
thc l th </TITLE>.
Tiu l phn kh quan trng. Cc mc c dng nh du mt web site.
Trnh duyt s dng tiu lu tr cc mc ny. Do , khi ngi dng tm kim
thng tin, tiu ca trang Web cung cp t kha chnh yu cho vic tm kim.
Phn thn: phn ny nm sau phn tiu . Phn thn bao gm vn bn, hnh
nh v cc lin kt m bn mun hin th trn trang web ca mnh. Phn thn
bt u bng th <BODY> v kt thc bng th </BODY>

V d 2:
<HTML>
<HEAD>
<TITLE>Welcome to the world of HTML</TITLE>
</HEAD>
<BODY>
<P>This is going to be real fun</P>
</BODY>
Lp trnh Web
8

</HTML>

Hnh 1.4: Kt qu ca v d 2
on
Bn c ch n th <P> trong v d 2 khng? Th <P> trnh by mt on
Khi vit mt bi bo hay mt bi lun, bn nhm ni dung thnh mt lot cc on.
Mc ch l nhm cc tng logic li vi nhau v p dng mt s nh dng cho ni
dung. Trong mt ti liu HTML, ni dung c th c nhm thnh cc on. Th
on <P> c s dng nh du s bt u ca mt on mi.
V d 3
<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR = lavender>
<P>This is going to be real fun
<P> Another paragraph element
</BODY>
</HTML>

Th ng </P> l khng bt buc. Th <P> k tip s t ng bt u mt on mi.
Cc th ngt
Lp trnh Web
9

Phn t <BR> c s dng ngt dng trong ti liu HTML. Th <BR> b sung
mt k t xung dng ti v tr ca th.
V d 4:
<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR = lavender>
<P>This is going to be real <BR>fun
<P> Another paragraph element
</BODY>
</HTML>

Chn canh l
Thuc tnh align c s dng canh l cho cc phn t HTML trong trang Web.
Chng ta c th canh l vn bn, cc i tng, hnh nh, cc on, cc phn on,....
Sau y, bn s hc cch canh l vn bn:
Thuc tnh align gm cc gi tr sau:
Value Description
Left Vn bn c canh l tri
Center Vn bn c canh gia
Right Vn bn c canh phi
Justify Vn bn c canh u hai bn
Canh l c mc nh da vo hng ca vn bn. Nu hng vn bn l t tri sang
phi th mc nh l tri.
Lp trnh Web
10

V d 5
<HTML>
<HEAD>
<TITLE>Learning HTML</TITLE>
</HEAD>
<BODY BGCOLOR=lavender>
<P align = right>This is good fun</P>
</BODY>
</HTML>

1.3.3 S dng th <META>
Phn tiu cng 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 s kt hp gia thuc tnh v gi tr.
V d, ch Graham Browne l tc gi, ngi ta s dng phn t META nh sau:
<META name=Author content=Graham Browne>
Tc gi ca ti liu l Graham Browne
Thuc tnh http-equiv c th c s dng thay th thuc tnh name. My ch
HTTP s dng thuc tnh ny to ra mt u p ng HTTP (HTTP response
header).
u p ng c truyn n trnh duyt nhn dng d liu. Nu trnh duyt hiu
c u p ng ny, n s tin hnh cc hnh ng c bit i vi u p ng .
V d, <META http-equiv=Expires content=Mon, 15 Sep 2003 14:25:27 GMT>
s sinh ra mt u p ng HTTP nh sau:
Expires: Mon, 15 Sep 2003 14:25:27 GMT
Do vy, nu ti liu lu li, HTTP s bit khi no truy xut mt bn sao ca ti liu
tng ng.
1.3.4 S dng k t c bit trong ti liu HTML
Lp trnh Web
11

Bn c th chn cc k t c bit vo vn bn ca ti liu HTML. m bo trnh
duyt khng nhm chng vi th HTML, bn phi gn m nh dng cho cc k t c
bit ny.
K t c
bit
M nh
dng
V d
Ln hn (>) > <HTML>
<HEAD>
</HEAD>
<BODY>
<CODE>If A > B Then <BR> A = A + 1
</CODE>
<P> The above statement used special
characters
</BODY>
</HTML>
Nh hn (<)

<

<HTML>
<HEAD>
</HEAD>
<BODY>
<CODE>If A < B Then <BR> A = A + 1 </CODE>
<P> The above statement used special
characters
</BODY>
</HTML>
Trch dn() " <HTML>
<HEAD>
</HEAD>
<BODY>
" To be or not to be ? " That
is the question
</BODY>
</HTML>
K t &

&

<HTML>
<HEAD>
Lp trnh Web
12

</HEAD>
<BODY>
<P> William & Graham went to the fair
</BODY>
</HTML>
1.4 S DNG CC SIU LIN KT
Siu lin kt l mt phn t bn trong ti liu m lin kt n mt v tr khc trong
cng ti liu hoc n mt ti liu hon ton khc. Chng hn, khi ta kch vo siu
lin kt s nhy n lin kt cn n. Cc siu lin kt l thnh phn quan trng nht
ca h thng siu vn bn
1.4.1 Gii thiu siu lin kt v URL
Kh nng chnh ca HTML l h tr siu lin kt. Mt siu lin kt, hay ni ngn gn
l mt lin kt, l s kt ni n ti liu hay file khc ( ha, 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.
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

Hnh 1.8: S dng lin kt
Cc lin kt c th l lin kt trong hoc lin kt ngoi
Lin kt trong l lin kt kt ni n cc phn trong cng ti liu hoc cng mt
web site
Lp trnh Web
13

Lin kt ngoi l lin kt kt ni n cc trang trn cc web site khc hoc my
ch khc.

Hnh 1.9: Lin kt trong v lin kt ngoi
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 web site ca Micorsoft. 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 web
site hay ti nguyn trn World Wide Web.
nh dng c trng l www.nameofsite.typeofsite.contrycode
[trong
Nameofsite: tn ca site
Typeofsite: kiu ca site
Contrycode: m nc]
V d, 216.239.33.101 c th c biu din bng URL l www.google.com
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.
Lp trnh Web
14

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
nh dng l, giao thc: tn ca site / ti liu chnh #nh danh on
C hai dng URL:
URL tuyt i l a ch Internet y ca trang hoc file, bao gm giao thc,
v tr mng, ng dn ty chn v tn file. V d, http://www.microsoft.com l
mt a ch URL tuyt i.
URL tng i l mt URL c mt hoc nhiu phn b thiu. Trnh duyt ly
thng tin b thiu t trang cha URL . V d, nu giao thc b thiu, trnh duyt
s dng giao thc ca trang hin thi.
1.4.2 S dng siu lin kt
Th <A> c s dng xc nh vn bn hay nh no s dng lm siu lin kt
trong ti liu HTML. Thuc tnh HREF (tham chiu siu vn bn) c dng ch
a ch hay URL ca ti liu hoc file c lin kt.
C php ca HREF l:
<A HREF = protocol://host.domain:port/path/filename>Hypertext</A>
Trong ,
Giao thc y l loi giao thc. Mt s giao thc thng dng:
http giao thc truyn siu vn bn
telnet m mt phin telnet
gopher tm kim file
ftp giao thc truyn file
mailto gi th in t
Host.domain y l a ch Internet ca my ch
Port - Cng phc v ca my ch ch
HyperText y l vn bn hay hnh nh m ngi dng cn nhp vo kch
hot lin kt
Lin kt n nhng ti liu khc
Gi s c hai ti liu HTML trn a cng cc b, Doc1.htm v Doc2.htm. to mt
lin kt t Doc1.html n Doc2.htm
V d 6:
<HTML>
<HEAD>
<TITLE> Using links</TITLE>
</HEAD>
Lp trnh Web
15

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

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

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

Du # trc tn ca siu lin kt bo cho trnh duyt bit rng lin kt ny lin kt
n mt im c t tn trong ti liu. Khi khng c ti liu no c ch ra trc
k t #, trnh duyt hiu rng lin kt ny nm trong cng ti liu.
V d 8:
<HTML>
<HEAD>
<TITLE>Using Links</TITLE>
</HEAD>
<BODY>
<A HREF = #Internet>Internet</A>
<BR><BR>
<A HREF = #HTML>Introduction to HTML</A>
<BR><BR>
<A HREF = #Consistency>Unity and Variety</A>
<BR><BR>
<A name = Internet>Internet</A>
<BR>
<P> The Internet is a network of networks. That is, computer
networks are linked to other networks, spanning countries and today
the globe. The TCP/IP transfer protocol provides the bindings that
connect all these computers the world over.
</P>
<A name = HTML>Introduction to HTML</A>
<BR>
<P> Hyper Text Markup Language is the standard language that
the Web uses for creating and recognizing documents. Although not a
subset of, it is loosely related to the Standard Generalized Markup
Language (SGML). SGML is a method for representing document
formatting languages.
</P>
<A name = Consistency>Unity and Variety</A>
<BR>
<P> A basic rule is that of unity and variety. That is,
everything should fit together as a unit, but at the same time there
is enough variety to keep things interesting. Consistency creates and
reinforces the unique identity of a site. Colors, fonts, column
layout and other design elements should be consistent throughout
every section of the site.
</BODY>
</HTML>
Lp trnh Web
18


Hnh 1.13: Kt qu v d 8 sau khi kch vo Internet
Lin kt n mt im xc nh mt ti liu khc
By gi chng ta bit cch s dng cc vch du trong cng mt ti liu, hy th
nhy n mt v tr trn mt ti liu khc.
nhy n mt im trn ti liu khc, chng ta cn phi ch ra tn ca ti liu khi
chng ta to vch du. Trc tin trnh duyt s c tn ti liu v m ti liu . Sau
n s c vch du v di chuyn n im c nh du.
V d 9
<HTML>
<HEAD>
<TITLE>Main document</TITLE>
</HEAD>
<BODY>
<A HREF=Chapter18.html#Internet>Internet</A>
<BR>
Lp trnh Web
19

<BR>
<A HREF= Chapter18.html#HTML>Introduction to HTML</A>
<BR>
<BR>
<A HREF=Chapter18.html#Consistency>Unity and Variety</A>
</BODY>
</HTML>


Hnh 1.15: Kt qu v d 9 sau khi kch vo Internet
Ch s ging nhau gia hnh 1.13 vo hnh 1.15
S dng e-mail
Nu mun ngi s dng gi c e-mail, chng ta c th a mt c tnh vo trong
trang Web v cho php h gi e-mail t trnh duyt. Tt c nhng g chng ta cn lm
l chn gi tr mailto vo trong th lin kt.
<A HREF=mailto:thisperson@mymail.com>
1.4.3 iu hng quanh Web site
Lp trnh Web
20

D web site c li cun n u, nu n khng c mt lc iu hng n gin
th ngi dng cng s mt phng hng ngay. Mt s trong s h c th s khng
bao gi quay li. Lc iu hng trong mi site l khc nhau. Tuy nhin c mt
s nguyn tc c bn m bn cn nh:
Xc nh ni dung ca web site
To mt lc iu hng gip ngi dng i n phn cn n mt cch
nhanh chng
Cung cp cc chc nng tm kim thng tin
C nhiu cch t chc mt web site
Trnh by tuyn tnh Cch ny theo cu trc tuyn tnh. C mt chui lin kt
lin tc gia cc trang. Mi trang c lin kt n trang trc v trang sau. Trang
cui c lin kt n trang u. nh dng ny c dng khi chng ta mun trnh
by thng tin lin tc. V d, cc chng trong cun sch hoc cc slide ca mt
bi trnh by m yu cu ngi dng c thng tin theo trnh t lin tip nhau.

Hnh 1.16: Trnh by tuyn tnh
Trnh by theo phn cp: y l cch trnh by thng thng nht c s dng
trong thit k Web. Trang ch lin kt vi nhiu trang khc. Ngi dng c th
chn mt lin kt v nhy n trang cn n. Mi trang u c lin kt v trang
ch.

Hnh 1.17: Trnh by theo phn cp
Bn nh Mt s ngi thy cch trnh by trc quan th d hiu hn. V vy,
bn nh hay bn site c a vo cc trang ch. Khi ngi dng kch vo
cc im nng th ti liu lin quan c hin th.
Lp trnh Web
21

Khi quyt nh mt lc iu hng, y l lc thit k ti liu. C mt s
nguyn tc m bn cn ghi nh:
Siu lin kt nn r rng. T nn c gch chn v c mu xanh, bi v trn Web,
mu xanh c quy c l siu lin kt. Siu lin kt thng xut hin cui
trang. Nu chng xut hin gia on vn bn, c th lm ngi c khng tp
trung vo ti.
Cc trang con nn c mt thanh menu hoc thanh iu hng, nu khng ngi
c c th khng thy cc trang chnh. Nu ngi dng kch vo mt biu tng
bt k trn thanh iu hng th h s nhy t trang hin thi n trang mi
Lun c mt bng mc lc ngi dng nhy sang mt ti no . Bng mc
lc (TOC) c hin th cui trang. Ngi dng c th chn mt ti no
nhy n trang cn n

Lun c nt Back v Forward trong trang ngi dng c th iu hng
n trang cn n. Trnh duyt c cung cp cc chn la ny, nhng n s dng
cc trang trong danh sch history m c th khng phi l cc trang trong Web site.
Lp trnh Web
22

C CH H N NG G 2 2: : C C C C T TH H H HT TM ML L C C B B N N
S dng cc th c bn
Chn hnh nh vo trong ti liu HTML
2.1 GII THIU
Chng ny tho lun v nhng th c bn ca HTML nh cc th tiu (Header),
cc th on v cc th khi. Phn ny cng ni v danh sch (Lists) v lm th no
s dng cc nh trong ti liu HTML
2.2 HEADING (TIU )
Phn t ny c s dng cung cp tiu cho phn ni dung hin th trn trang
web. Tt c nhng phn t tiu phi c th kt thc. N bt u bng th <H1> v
kt thc bng </H1>.
Nhng phn tiu c hin th to v in m hn phn bit chng vi cc phn
cn li ca vn bn. Chng ta cng c th hin th phn tiu mt trong su kch
thc t H1 n H6. Tt c nhng g chng ta lm l nh r kch thc H1,
H2Trnh duyt ch trng n cch hin th
V d 1:
<HTML>
<HEAD>
<TITLE>Introduction to HTML</TITLE>
</HEAD>
<H1>Introduction to HTML</H1>
</HTML>
Lp trnh Web
23

2.3 TH KHI <SPAN>, <DIV>
C nhng trng hp chng ta mun chia vn bn trong mt trang web thnh nhng
khi thng tin logic. Chng ta cng c th p dng nhng thuc tnh thng thng cho
ton b khi. Phn t DIV v SPAN c s dng nhm ni dung li vi nhau.
Phn t DIV dng chia ti liu thnh cc thnh phn c lin quan vi nhau. Phn t
SPAN dng ch mt khong cc k t.
Phn t SPAN dng nh ngha ni dung trong dng(in-line) cn phn t DIV dng
nh ngha ni dung mc khi (block-level)
V d 5:
<HTML>
<HEAD>
</HEAD>
<BODY>
<DIV>
Division 1
<P> The DIV element is used to group elements
<P>Typically, DIV is used for block level elements
</DIV>
<DIV align = right>
Division 2
Lp trnh Web
24

<P>This is a second division
<BR>
<H2>Are you having fun?</H2>
</DIV>
<P>The second division is right aligned.
<SPAN STYLE = font-size:25; Color:blue>Common formatting
</SPAN>is applied to all the elements in the division
</BODY>
</HTML>
Ch : Phn t SPAN khng hin th trong Netscape

2.4 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
Orchids
Lp trnh Web
25

Apples
Oranges
Daffodils
Mangoes
C th c nhm thnh:
Fruits
Apples
Mangoes
Oranges
Flowers
Daffodils
Orchids
Roses
Sunflowers
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.6.1 Danh sch khng th t
y l loi danh sch n gin nht m bn c th thm vo ti liu HTML. Danh sch
khng th t l mt bulleted list. Cc mc c bt u bng du chm trn
bullet. Danh sch khng th t c nm trong cp th <UL></UL>. Mi mc
trong danh sch c nh du bng th <LI>. LI c vit tt ca t List Item. Th
kt thc </LI> l ty chn (khng bt buc).
V d 6:
<HTML>
<HEAD>
</HEAD>
<BODY>
<UL>
<LI>Monday
<LI>Tuesday
<LI>Wednesday
<LI>Thursday
<LI>Friday
Lp trnh Web
26

</UL>
</BODY>
</HTML>

Chng ta c th to ra cc danh sch lng nhau m t nhm con ca thng tin.
V d 7:
<HTML>
<HEAD>
</HEAD>
<BODY>
<UL>
<LI>Monday
<UL>
<LI>Introduction to HTML
<LI>Creating Lists
</UL>
<LI>Tuesday
<UL>
<LI>Creating Tables
<LI>Inserting Images
</UL>
<LI>Wednesday
<LI>Thursday
<LI>Friday
</UL>
</BODY>
Lp trnh Web
27

</HTML>

Thuc tnh TYPE c th c dng nh dng cc bullets hin th cho cc mc
ca danh sch.
Thuc tnh Th V d
Bulleted

<UL> v <LI>

<HTML>
<HEAD>
</HEAD>
<BODY>
<UL>
<LI>Monday
<UL>
<LI>Introduction to HTML
<LI>Creating Lists
</UL>
<LI>Tuesday
<UL>
<LI>Creating Tables
<LI>Inserting Images
</UL>
Lp trnh Web
28

<LI>Wednesday
<LI>Thursday
<LI>Friday
</UL>
</BODY>
</HTML>
Customized bullets

<LI TYPE =
SQUARE> Square
bullets
<LI TYPE = DISC>
Sphere bullets
<LI TYPE =
CIRCLE> Round
bullets
<HTML>
<HEAD>
</HEAD>
<BODY>
<UL>
<LI>Monday
<UL>
<LI TYPE = DISC>Introduction to
HTML
<LI TYPE = DISC>Creating Lists
</UL>
<LI>Tuesday
<UL>
<LI TYPE = SQUARE>Creating Tables
<LI TYPE = SQUARE>Inserting
Images
</UL>
<LI>Wednesday
<UL>
<LI TYPE = CIRCLE>Creating Forms
<LI TYPE = CIRCLE>Working with
Frames
</UL>
<LI>Thursday
<LI>Friday
</UL>
</BODY>
</HTML>
Ch : Thuc tnh TYPE khng c hin th trong Internet Explorer
2.6.2 Danh sch c th t
Lp trnh Web
29

Danh sch c th t nm trong cp th <OL></OL>. Danh sch c th t cng hin
th cc mc danh sch. S khc nhau l cc mc danh sch hin th theo th t c
to ra mt cch t ng.
V d 8:
<HTML>
<HEAD>
</HEAD>
<BODY>
<OL>
<LI>Monday
<LI>Tuesday
<LI>Wednesday
<LI>Thursday
<LI>Friday
</OL>
</BODY>
</HTML>

Chng ta c th t cc thuc tnh nh ngha h thng s m c to ra cho cc
mc danh sch.
Thuc tnh Th
Upper Roman <LI TYPE = I>
Lower Roman <LI TYPE = i>
Uppercase <LI TYPE = A>
Lp trnh Web
30

Lowercase <LI TYPE = a>
Bt u vi mt s khc ln hn 1 <OL START = n>
Thuc tnh START xc nh s khi to ban u ca danh sch.
V d 9:

<HTML>
<HEAD>
</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
</OL>
</BODY>
</HTML>
Lp trnh Web
31

Chng ta c th lng cc loi danh sch li vi nhau. C th lng cc danh sch c th
t vo trong cc danh sch khng th t v ngc li.
V d 10:
<HTML>
<HEAD>
</HEAD>
<BODY>
<UL>
<LI>Monday
<OL>
<LI TYPE = i>Introduction to HTML
<LI TYPE = i>Creating Lists
</OL>
<LI>Tuesday
<OL>
<LI TYPE = a>Creating Tables
<LI TYPE = a>Inserting Images
</OL>
<LI>Wednesday
<LI>Thursday
Lp trnh Web
32

<LI>Friday
</UL>
</BODY>
</HTML>

2.5 TH K NG NGANG: <HR>
Th <HR>(horizontal rule) c dng k mt ng ngang trn trang. Nhng
thuc tnh sau gip iu khin cc ng nm ngang. N ch c th bt u, khng c
th kt thc v khng c ni dung.
Thuc tnh M t
align Ch nh v tr ca ng nm ngang. Chng ta c th canh l
center(gia)|right(phi)|left(tri). V d align=center
width Ch di ca ng thng. N c th xc nh bng cc pixel hoc tnh theo
phn trm. Mc nh l 100%, ngha l ton b b ngang ca ti liu.
size Ch dy ca ng thng v c xc nh bng cc pixel.
noshade Ch ng c hin th bng mu c thay v c bng.
V d 12:
<HTML>
<HEAD>
</HEAD>
<BODY>
Lp trnh Web
33

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

2.6 S DNG FONT
Th <FONT> dng iu khin s hin th vn bn trn trang web. Chng ta cng c
th ch nh cc thuc tnh nh kch thc, mu sc, kiu
Chng ta c th t cc thuc tnh <FONT> cho c ti liu bng cch t phn t vo
bn trong th <BODY>. Ngoi ra, thuc tnh FONT c th t cho tng t, tng phn
v tng phn t trong trang.
Thuc tnh M t
COLOR c dng ch mu ca font. Chng ta c th dng tn mu hoc gi tr
thp phn xc nh mu.
SIZE c dng ch kch thc ca font. Chng ta c th xc nh cc kch
thc FONT t 1 cho n 7. Kch thc ln nht l 7 v nh nht l 1.
Chng ta c th dng mt kch thc chun v ch ra nhng kch thc tip
theo lin quan n kch thc chun. V d, nu kch thc chnh l 3, th
SIZE=+4 s tng ln 7
SIZE=-1 s gim xung 2
FACE c dng ch nh kiu font (phng ch)
Lp trnh Web
34

Cc thuc tnh ca FONT c th kt hp trong cng mt th.
V d 13:
<HTML>
<HEAD>
</HEAD>
<BODY>
<H3><FONT SIZE = 3 COLOR = HOTPINK FACE = Arial>My first HTML
document</FONT></H3>
<P>This is <FONT COLOR = BLUE SIZE = 6>going </FONT>to be real
fun
</BODY>
</HTML>

Hnh 2.13 Kt qu ca v d 13
2.7 S DNG MU SC
Chng ta c th thm mu vo trang v vo cc phn t trong trang. COLOR l thuc
tnh c th c s dng vi nhiu phn t nh phn t FONT v BODY.
V d 14:
<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR=lavender>
<H2><FONT COLOR = LIMEGREEN>Welcome to HTML</FONT></H2>
<P><FONT COLOR = RED>This is good fun</FONT></P>
</BODY>
</HTML>
Lp trnh Web
35

C 3 kiu mu chnh: , xanh v xanh da tri. Mi mu chnh c xem nh mt b
hai s ca h 16.
#RRGGBB
S thp lc phn 00 ch 0% ca mu trong khi s thp lc phn FF ch 100% ca
mu. Gi tr cui cng l mt m su ch s ch mu.
M thp lc
phn
Mu
#FF0000 Red
#00FF00 Green
#0000FF Blue
#000000 Black
#FFFFFF White
2.8 S DNG HNH NH TRONG TI LIU HTML
Mt bc tranh ng gi ngn t, tt nhin iu ny c th p dng cho mt trang
web. Nhng hnh nh c chn vo trong trang web c gi l nhng nh ni tuyn.
nh c th l biu tng, bullet, nh, logo cng ty v nhiu ci khc.
Ngy nay c nhiu nh dng ha ang c s dng. Tuy nhin, trn Web c khc
i cht. Ba nh dng ha thng thng c hin th trn hu ht cc trnh duyt
l:
nh GIF (Graphics Interchange Format) (.GIF)
GIF l nh dng thng thng nht c dng trong nhng ti liu HTML. Nhng
file GIF c nh dng khng ph thuc vo nh dng nn v h tr 256 mu.
u im ca cc file GIF l kh d chuyn ti, ngay c kt ni s dng
MODEM tc chm
C hai tiu chun cho cc file .gif -87a v 89a (h tr trong sut).
Lp trnh Web
36

nh dng GIF xen k(Interlaced GIF format): Mt file nh thng thng
hin th nh mt ln mt dng. Mc d cc nh xen k c hin th mt ln
mt dng, nhng th t c thay i
nh GIF trong sut (Transparent GIF images): nh GIF trong sut l nh
trong nn ca nh cng mu vi trang web. V d cc biu tng v bullet
c nn trong sut v vy chng hp vi mu nn ca ti liu.
nh JPEG (Joint Photographic Expert Group) (.JPEG)
Cch nn JPEG l mt lc nn mt thng tin. iu ny c ngha l nh sau khi
b nn khng ging nh nh gc. Tuy nhin trong qu trnh pht li th nh tt gn
nh nh gc. Khi bn lu mt file vi nh dng JPG, bn c th nh t l nn. T
l cng cao th nh cng t ging nh gc.
JPEG h tr hn 16 triu mu v thng c s dng cho cc nh c mu thc.
C hai file nh dng JPEG (ui m rng l .jpg) v cc dng GIF u nn nh m
bo ch chuyn ti qua internet c nhanh hn. nh JPG c th c nn nhiu
hn nhng chm hn trong qu trnh hin th so vi nh .GIF. C l l l do ti sao
nh .GIF c ph bin trong ti liu HTML.
PNG (Portable Network Graphics)
nh dng cho mt file PNG l lossless (khng mt thng tin). Trong nn
lossless, d liu nh c nn m khng b chi tit. Cc file PNG h tr nh
mu thc v di mu xm. Cc file PNG cng c th c nn v chuyn qua
mng.
Khi quyt nh nh dng ha, chng ta nn nh mt vi yu t:
Cht lng ca nh Cht lng ca nh c quan trng trong qu trnh hin th
khng?
ln d liu Kch c file cng ln th thi gian truyn cng cao.
Cc yu cu hin th - nh h tr trong sut, hin th tun t hay xen k.
Chn nh
Th IMG dng chn nhng nh vo trong ti liu HTML. Chng ta cng c th t
th IMG ti v tr m nh c hin th. Th IMG khng c ni dung, n hin th ni
dung bng cch xc nh thuc tnh SRC. C php l:
<IMG SRC=URL>
Trong SRC (source) l thuc tnh v gi tr l mt URL, ch v tr chnh xc ca file
nh
i khi, ch hnh nh khng th ni ln tt c. Chng ta cn phi cung cp cho ngi
dng mt vi gii thiu v mc ch ca hnh nh. Bn c th canh l nh cng vi vn
bn.
Thuc tnh ALIGN ca th IMG c th c s dng iu chnh canh l ca nh
vi vn bn xung quanh.
Lp trnh Web
37

<IMG ALIGN=position SRC=PICTURE.GIF>
Trong , v tr ca nh c th l trn(TOP), di(BOTTOM), gia(MIDDLE),
tri(LEFT) hoc phi(RIGHT).
V d 15:
<HTML>
<HEAD>
<TITLE>Inserting an Image</TITLE>
</HEAD>
<H1><FONT SIZE=3 COLOR=FORESTGREEN>
<B>Inserting an Image</B></FONT></H1>
<HR>
<BODY>
<IMG ALIGN=BOTTOM SRC=Flowers.jpg> Aligned at the bottom</P>
<P>
<IMG ALIGN=TOP SRC=Flowers.jpg> Aligned at the top</P>
<P>
<IMG ALIGN=MIDDLE SRC=Flowers.jpg> Aligned in the middle</P>
</BODY>
</HTML>
Ch : file Flowers.jpg nm trong cng th mc vi file HTML ngun.

Lp trnh Web
38

Ch rng mt vi trnh duyt khng hin th nhng nh ha. Trong trng hp
ny, chng ta cn xc nh mt dng ch thch thay th trong ti liu HTML. Thuc
tnh ALT c s dng ch ni dung nh ca bn.
V d 16:
<HTML>
<HEAD>
<TITLE>Inserting an Image</TITLE>
</HEAD>
<H1><FONT SIZE=3 COLOR=FORESTGREEN>
<B>Inserting an Image</B>
</FONT></H1>
<HR>
<BODY>
<IMG SRC=Flowers.jpg ALT=Beautiful Flowers>
</BODY>
</HTML>

Hnh 2.16: Kt qu v d 16 (dng vn bn gii thch hin th khi di chuyn chut
vo nh)
Nn ca trang cng quan trng nh vn bn. Ngi ta thng s dng mu cho trang
web, mc ch l lm cho ni dung c ni bt. Chng ta cng c th s dng nh
lm nn. lm iu , ta cn phi dng thuc tnh BACKGROUND trong th
BODY.
<BODY BACKGROUND=bgimage.gif> (Ch ra URL hon chnh ca nh)
Nu nh nh hn phm vi hin th ca ti liu th nh c xp k nhau lp y
ton b vng hin th .
Lp trnh Web
39

nh thng cun theo vn bn khi ngi dng ko thanh cun trong trnh duyt. Nu
khng mun nh vy v thay vo ta mun to ra hiu ng hnh m, ngha l vn
bn th cun cn nh th ng yn, ta thit lp thuc tnh BGPROPERTIES trong th
BODY c gi tr l FIXED
<BODY BACKGROUND=bgimage.gif BGPROPERTIES=FIXED>
Cc nh c chn vo ti liu HTML cng c th s dng nh siu lin kt. Nhng
nh nh th gi l siu nh. Khi ngi dng kch vo nh, s hin th ti liu hoc file
c ch ra trong URL. lm iu ny, ta cn lng nh vo trong th neo (anchor)
Lp trnh Web
40

C CH H N NG G 3 3: : S S D DN NG G B BN NG G
Bit cch s dng bng (table).
Chn cc i tng a phng tin Multimedia vo ti liu HTML
3.1 GII THIU
Chng ta hc cch nhm cc d liu c lin quan vo cc danh sch, nhng cn c
mt cch khc iu khin vic hin th vn bn trn trang web, bng cch dng cc
bng. Trong chng ny chng ta s hc cch to bng. Phn cui ca chng ny s
ni v lm th no chn cc iu khin a phng tin multimedia vo bn trong
ti liu HTML.
3.2 CCH TO BNG
Chng ta c th s dng bng hin th d liu di dng cc hng v cc ct. Bng
gip cho chng ta iu khin, xc nh v sp xp v tr ca vn bn v hnh nh trn
trang web, thay v giao tt c cc vic cho trnh duyt.

Hnh 3.1 M hnh ca bng
3.2.1 Th dng to bng
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 1:
<HTML>
<HEAD>
<TITLE>Using Tables</TITLE>
</HEAD>
<BODY>
<TABLE>
<TD>Data Cell 1</TD>
Lp trnh Web
41

</TABLE>
</BODY>
</HTML>

Mt hng ca bng c nh ngha bng th <TR>
V d2:
<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE>
<TR>
<TR>
</TABLE>
</BODY>
</HTML>
Lp trnh Web
42

Cc to thnh mt hng. Cc hng to thnh bng. iu ny c ni n trong c
php ca HTML c s dng to bng. Th TD c lng trong th TR. Th TR
c nm trong cp th ng v m TABLE.
Thuc tnh BORDER c th c s dng nh ngha cc v cu trc ca bng.
thuc tnh ny ch rng ca ng vin. Nu gi tr c t l 0 th ng vin s
khng hin th.
V d 3:
<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER = 2>
<TR>
<TR>
</TABLE>
</BODY>
</HTML>
Lp trnh Web
43

Mi ct trong bng, phn tiu c th nh ngha. Th <TH> nh ngha tiu cho
ct. V d:
<TH> Employee Name </TH>
Phn t CAPTION c dng thm vo mt ch thch cho bng. y bn s dng
n m t bng. V d,
<CAPTION> Creating a Table </CAPTION>
<CAPTION> nm ngay sau th m <TABLE>
3.2.2 Chn hng v ct
Nhng th <TD> v <TR> c th c dng chn theo th t cc hng v cc ct
vo trong bng. V d c m t bn di.
V d 4:
<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER = 2>
<TR>
<TD>New column</TD>
<TR>
Lp trnh Web
44

<TR>
<TD>New Row</TD>
</TABLE>
</BODY>
</HTML>

3.2.3 Xo hng v ct
xa mt hng, xa th <TR> tng ng cng vi tt c cc th <TD> bn trong n
t mt file m ngun HTML. Tng t, xa cc ct
Hy xem Hnh 3.4. xa dng th hai, chng ta cn xa th <TD> cho d liu 4, 5
v 6 cng vi th <TR> m n km theo nhng th <TD> ny t file HTML ngun.
xa ct cui cng, l New column, chng ta cn xa th <TD> lp nn ny
V d 5:
<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER = 2>
<TR>
<TR>
<TD>New Row</TD>
Lp trnh Web
45

</TABLE>
</BODY>
</HTML>

3.2.4 Trn : kt hp ct hay dng
i khi chng ta mun ni cc dng v cc ct vo trong mt . Nh vy, chng ta to
mt ct ko rng ra cho hn mt dng, hay to ra mt dng ko rng ra cho hn
mt ct. Thuc tnh COLSPAN v ROWSPAN c s dng to ra nhng m
chng c th ko rng ra cho hn mt dng hay ct. Thuc tnh COLSPAN c s
dng vi th <TH>, trong khi thuc tnh ROWSPAN c s dng vi th <TD>.
V d 6:
<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER = 2 BGCOLOR = lavender CELLSPACING = 2
CELLPADDING = 6>
<CAPTION>Creating a Table</CAPTION>
<TH ALIGN = CENTER COLSPAN = 3>Quarter 1</TH>
<TH ALIGN = CENTER COLSPAN = 3>Quarter 2</TH>
<TR>
<TD>Jan</TD>
<TD>Feb</TD>
<TD>March</TD>
<TD>April</TD>
<TD>May</TD>
Lp trnh Web
46

<TD>June</TD>
<TR>
<TD>1000</TD>
<TD>550</TD>
<TD>240</TD>
<TD>1500</TD>
<TD>2765</TD>
<TD>1240</TD>
<TR>
<TD>3000</TD>
<TD>2430</TD>
<TD>2500</TD>
<TD>1250</TD>
<TD>900</TD>
<TD>3400</TD>
</TABLE>
</BODY>
</HTML>

V d 7:
<HTML>
<HEAD>
Lp trnh Web
47

</HEAD>

<BODY>
CELLPADDING = 6>
<CAPTION>Creating a Table</CAPTION>
<TR>
<TH></TH>
<TH></TH>
<TH>NUTS</TH>
<TH>BOLTS</TH>
<TH>Hammers</TH>
<TR>
<TD ROWSPAN = 3>Quarter 1</TD>
<TD>Jan</TD>
<TD>2500</TD>
<TD>1000</TD>
<TD>1240</TD>
<TR>
<TD>Feb</TD>
<TD>3000</TD>
<TD>2500</TD>
<TD>4000</TD>
<TR>
<TD>March</TD>
<TD>3200</TD>
<TD>1000</TD>
<TD>2400</TD>
</TABLE>
</BODY>
</HTML>
Lp trnh Web
48

3.2.5 nh dng cho
C th ch nh c v tr ca vn bn bn trong mi ca bng. Nhng thuc tnh
canh l ngang (ALIGN) v canh l dc (VALIGN) c s dng iu khin vic
canh l trong cc ca bng. Thuc tnh ALIGN c th c cc gi tr: tri, phi, gia,
u hai bn. Thuc tnh VALIGN c th c cc gi tr: trn, gia v di
Ngoi vic xc nh v tr ni dng ca cc trong bng, chng ta cng c th thay i
kch thc, mu sc ca bng. Chng ta c th xc nh chiu rng ca bng. l
vng trn mn hnh m bng s m rng ra. Thuc tnh WIDTH ca th TABLE s
tht s cn thit. Gi tr ca thuc tnh WIDTH c th l mt nh dng phn trm hay
thm ch l cc im. Chng hn,
<TABLE WIDTH = 50%>
iu ny s ko rng bng n 50% ca mn hnh
Nu chng ta mun thm mt vi mu sc cho bng, chng ta s dng thuc tnh
BGCOLOR. Gi tr ny c th l tn ca mt mu hay l gi tr h thp lc phn.

V d 8:
<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER = 2 WIDTH = 50% BGCOLOR = lavender>
Lp trnh Web
49

<TR>
<TD ALIGN = right VALIGN = bottom>Data Cell
1</TD>
<TR>
</TABLE>
</BODY>
</HTML>

Nu ni dung ca vn bn trong nh hn khng gian trong th s c khng gian
trng l khong cch gia vn bn v ng vin ca . CELLSPACING l khng
gian gia cc v CELLPADDING l khng gian gia ng vin ca bng vi ni
dung vn bn c t trong . Nh m t trn, thuc tnh CELLSPACING nh
ngha khng gian gia cc , tnh theo im (pixel). Thuc tnh CELLPADDING nh
ngha nhng khng gian bn trong ca bng
V d 9:
<HTML>
<HEAD>
</HEAD>
<BODY>
CELLPADDING = 10>
<TR>
Lp trnh Web
50

<TR>
</TABLE>
</BODY>
</HTML>

3.4 CHN MULTIMEDIA VO TI LIU HTML
Mt trong nhng nhn t ln nht trong s pht trin ca web l s tch hp ca cc
a phng tin(multimedia) bn trong nhng ti liu HTML. Khi nhng phin bn u
tin ca HTML ra i, n cng bao gm cc i tng lin quan n hnh nh vo
trong mt ti liu cho php nhng hnh nh ni tuyn vo ni dung ti liu. Sau ,
HTML c m rng cho php nhng khng ch l nhng nh tnh m cn l m
thanh v video. Hin nay, tt c nhng tnh nng c php s dng lm phong
ph thm cho cc trang web.
3.4.1 Chn nh ng (.GIF) vo ti liu HTML
Trong chng 3, chng ta va mi tho lun th no l file GIF v chng c a
vo mt ti liu HTML bng cch no. Nh rng th <IMG> c dng chn mt
nh vo trong trang web.
V d 12:
<HTML>
<HEAD>
<TITLE>Inserting an animated .GIF File</TITLE>
Lp trnh Web
51

</HEAD>
<H1><FONT SIZE=3 COLOR=FORESTGREEN><B>Inserting an
Image</B></FONT></H1>
<HR>
<BODY>
<IMG SRC=coffeecup.gif ALT="Steaming Coffee">
</BODY>
</HTML>

Ch : trong v d 12, coffeecup.gif l mt nh ng l file .gif, khi hin th trong
trnh duyt th n hin th mt lung khi pha trn cc c ph. File ny c t vo
cng th mc vi file HTML ngun. Tuy nhin, n c th c thay th bi cc hnh
nh ng khc
3.4.2 Chn m thanh vo ti liu HTML
Tnh hp dn ca mt trang Web tng tc l thng s dng ting bip khi ngi
dng kch hot n mt trang web khc. Mt cch ty chn, mt trang web s yu cu
kt hp ting nhc bn trong n lm cho trang web c tnh hp dn hn. MIDI l
mt nh dng chun ca cc file nhc m chng c dng trong ti liu HTML. Cc
file MIDI cha nhng nt nhc v cc loi nhc c cho cc bn nhc. Nhc c in t
trong card m thanh m phng ting nhc. Ni cch khc, cc file .wav v .au dng
lu m thanh
thm vo m thanh cho trang web, chng ta phi s dng cc file m thanh (.wav
hay .midi) trn h thng ca chng ta. Chng hn nh,
<BGSOUND SRC=path\sound filename loop=positive number/infinite>
Nu chng ta khng xc nh c ng dn th trnh duyt s tm file m trang
web ang c nh v. Thuc tnh loop xc nh s ln m m thanh s c bt ln.
Ch rng phn t BGSOUND khng c h tr bi Netscape.
Lp trnh Web
52

Nhc MIDI nh cp phn trc, ch l mt ting nhc tng hp. Tuy nhin,
nu mun thm vo file nhc ca mnh, chng hn nh ging ni hay mt bi ht c
bit khi trang web c chuyn n, th chng ta cn phi s dng nhng file m
thanh c s ha.
Mt file m thanh c s ha cha nhng thng tin sao chp li mt bn sao m
thanh ng nh file gc ca n. Tn s ti nhng tm thanh c a ra lm v d
chun xc nh c cht lng ca file m thanh , tn sut cao hn, cht lng m
thanh tt hn. im hn ch l n cng s lm gia tng kch thc ca file. Nhng
file m thanh c s ha c th c lu trong hai nh dng, l file .au hay .wav
nh dng file .wav bt u vi h iu hnh Windows. N c t l nn thp v kch
thc file li
rt ln. Cn nh dng file .au c t chc vi nhng my ci h iu hnh Unix. C
v s tt hn cho vic lu tr cc file m thanh c v n c mt t ln nn cao hn
so vi nhng file .wav
V d 3:
<HTML>
<HEAD>
<TITLE>Inserting Sound</TITLE>
</HEAD>
<H1><FONT SIZE=3 COLOR=FORESTGREEN><B>Inserting sound</B></FONT></H1>
<HR>
<BODY>
<BGSOUND src="WindowsLogonSound.wav" loop="infinite">
<IMG SRC=coffeecup.gif ALT="Steaming Coffee">
</BODY>
</HTML>

Lp trnh Web
53

Ch : Trong v d 13, khi hin th trang web trong trnh duyt file nhc ng nhp
Windows s chy. File windowLogonSound.wav c t trong cng th mc vi file
HTML ngun. Tuy nhin, n c th c thay th bi cc file nhc khc
3.4.3 Chn video vo ti liu HTML
Mt file video c th c phn m rng l: .avi, .asf, .ram hay l .ra. chn mt file
video vo ti liu HTML, th <EMBED> c th c s dng. Chng hn nh,
<EMBED SRC=path\video file name WIDTH=width in pixels or percentage
HEIGHT=height in pixels or percentage>
V d 14:
<HTML>
<HEAD>
<TITLE>Inserting a Video file</TITLE>
</HEAD>
<H1><FONT SIZE=3 COLOR=FORESTGREEN><B>Inserting Video</B></FONT></H1>
<HR>
<BODY>
<EMBED SRC=clock.avi HEIGHT=100 WIDTH=100>
</BODY>
</HTML>

Hnh 3.15: Kt qu ca v d
Ch : xem kt qu 14, trnh Media Player phi c ci t. File clock.avi c th
c thay th bi cc file video khc
Lp trnh Web
54

C CH H N NG G 4 4: : S S D DN NG G B BI I U U M M U U V V K KH HU UN NG G
S dng biu mu (form) v cc phn t nhp thng thng trong HTML
S dng khung (frame)
4.1 GII THIU
Mt ngi hay dng Web thng xuyn gp cc loi biu mu khc nhau v nhiu khi
phi in thng tin vo cc loi biu mu . Trong chng ny, ta s hc cch thm
cc phn t nhp vo mt ti liu HTML v to ra mt biu mu. Ta cng s hc thm
v khung phn chia ti liu.
4.2 GII THIU BIU MU
Form HTML l mt phn ca ti liu, n cha cc phn t c bit gi l cc iu
khin. Cc iu khin c s dng nhp thng tin t ngi dng v cung cp mt
s tng tc. D liu do ngi dng nhp vo c th c xc nhn hp l nh cc
kch bn pha my khch (client-side scripts) v c chuyn n my ch x l
thm.
4.2.1 S dng biu mu
Vic s dng biu mu trn World Wide Web l kh nhiu v lin tc tng ln. Sau
y l mt s cch s dng thng thng:
Thu thp tn, a ch, s in thoi, a ch e-mail v cc thng tin khc ngi
dng ng k cho mt dch v hay mt s kin no
Thu thp thng tin dng ng k mua mt mt hng no , v d, khi mun
mua mt cun sch trn Internet, ta phi in tn, a ch gi th, phng thc
thanh ton v cc thng tin lin quan khc.
Thu thp thng tin phn hi v mt web site. Hu ht cc site cung cp mt dch v
no y u khuyn khch khch hng gi thng tin phn hi. Ngoi vic xy dng
mi quan h vi khch hng, y cn l mt ngun thng tin trao i hoc ci
tin dch v.
Cung cp cng c tm kim cho web site. Cc site cung cp nhiu thng tin khc
nhau thng cung cp cho ngi dng hp tm kim cho php h tm kim
thng tin nhanh hn.
Mt biu mu in hnh trn trang web nh sau:
Lp trnh Web
55

Hnh 4.1: Mt dng biu mu
4.2.2 Phn t FORM
Phn t <FORM> c s dng to mt vng trn trang nh mt biu mu. N ch
ra cch b tr ca biu mu. Cc thuc tnh bao gm:
Thuc tnh M t
ACCEPT Thuc tnh ny xc nh danh sch cc kiu MIME c my ch
nhn ra, trong c cha kch bn (script) x l biu mu. C php
l ACCEPT = Internet media type
ACTION Thuc tnh ny xc nh v tr ca script s x l biu mu hon chnh
v c gi i
C php l: ACTION = URL
METHOD Thuc tnh ny xc nh phng thc d liu c gi n my ch.
N cng xc nh giao thc c s dng khi my khch gi d liu
ln cho my ch. Nu gi tr l GET th trnh duyt s to mt cu hi
Lp trnh Web
56

c cha a ch URL ca trang , mt du chm hi v cc gi tr do
biu mu to ra. Trnh duyt s tr li cu hi cho kch bn c xc
nh trong URL x l. Nu gi tr l POST, th d liu trn biu
mu c gi n kch bn x l nh mt khi d liu. Ngi ta
khng s dng chui cu hi. C php l METHOD = (GET | POST).
V d, a mt biu mu n chng trnh x l biu mu s dng theo phng
thc POST
<FORM action=http://mysite.com/processform METHOD=post>
...form contents...
</FORM>
4.2.3 Cc phn t nhp ca HTML
Khi to mt biu mu, ta c th t cc iu khin ln biu mu nhn d liu nhp
vo t ngi dng. Cc iu khin ny c s dng vi phn t <FORM>. Tuy
nhin, ta cng c th s dng chng bn ngoi biu mu to cc giao din ngi
dng.
Phn t INPUT
Phn t <INPUT> xc nh loi v s xut hin ca iu khin trn biu mu. Cc
thuc tnh ca phn t ny l:
Attributes Description
TYPE Thuc tnh ny xc nh loi phn t. Ta c th chn mt trong cc la
chn: TEXT, PASSWORD, CHECKBOX, RADIO, SUBMIT, RESET,
FILE, HIDDEN v BUTTON. Mc nh l TEXT
NAME Thuc tnh ny ch tn ca iu khin. V d nu c nhiu hp vn bn (text
box) trn mt biu mu th bn nn s dng tn xc nh chng
TEXT1, TEXT2 hoc bt k tn no mnh chn. Phm vi hot ng ca
thuc tnh NAME nm trong phn t FORM
VALUE y l mt thuc tnh ty chn, n xc nh gi tr khi to ca iu khin.
Tuy nhin, i vi kiu (TYPE) l RADIO th ta phi xc nh cho n mt
gi tr.
SIZE Thuc tnh ny xc nh rng ban u ca iu khin. i vi kiu l
TEXT hay PASSWORD th kch thc c xc nh theo k t. i vi
cc loi phn t nhp khc, rng c xc nh bng im (pixels)
MAXLENGTH Thuc tnh ny c s dng xc nh s k t ln nht c th nhp vo
phn t TEXT hoc PASSWORD. Mc nh l khng gii hn.
CHECKED y l thuc tnh logic xc nh nt c c chn hay khng. Thc
tnh ny c s dng khi kiu nhp l RADIO hay CHECKBOX
SRC SRC = URL. Thuc tnh ny c dng khi ta mun s dng mt nh
trong kiu INPUT. N xc nh v tr ca nh
Lp trnh Web
57

Phn ny ta s tho lun v cc loi phn t nhp cng vi mt s c tnh v s
kin thng dng.
Nt bm
Loi ny to ra mt iu khin nt (button)
Tn M t
NAME Thit lp hoc truy xut tn ca iu khin
SIZE Thit lp hoc truy xut kch thc ca iu khin
TYPE Truy xut loi iu khin bn trong c biu din bi <INPUT type =
button>
VALUE Thit lp hoc truy xut gi tr ca nt <INPUT type=button>.
V d,
<INPUT TYPE=button VALUE=click NAME=b1">
Vn bn
Loi ny to mt iu khin nhp vn bn c mt dng. Thuc tnh SIZE xc
nh s k t c th hin th trong phn t. Thuc tnh MAXLENGTH xc nh
s k t ti a c th nhp vo phn t ny.
V d,
<INPUT TYPE=text VALUE= NAME=textbox SIZE=20>
Gi tr Value y hin th ni dung ban u ca vn bn v truy xut
vn bn khi biu mu c gi i
Checkbox (Hp kim)
Loi ny to ra mt iu khin checkbox. Ngi dng c th chn mt hoc
nhiu checkbox. Khi mt phn t checkbox c chn, th cp tn/gi tr c
nhn cng vi biu mu. Gi tr mc nh ca checkbox l bt (on) . Phn t
checkbox l mt phn t trn dng v khng cn th ng.
Tn M t
CHECKED Thit lp hoc truy xut trng thi ca checkbox
STATUS Thit lp hoc truy xut trng thi xem checkbox c c chn hay
khng
TYPE Truy xut loi iu khin, s dng <INPUT type = checkbox>.
VALUE Thit lp hoc truy xut gi tr ca checkbox <INPUT
Lp trnh Web
58

type=checkbox>
Radio
Loi ny to ra iu khin kiu nt radio. Mt iu khin kiu nt radio (radio
button control) c s dng i vi cc tp gi tr loi tr ln nhau. Cc iu
khin radio trong mt nhm phi c cng tn. Vo mt thi im, ngi dng
ch c th chn mt la chn. Ch c nt radio c chn trong nhm mi to
tn cp gi tr tn/value trong d liu c nhn. Cc nt radio nn t thuc
thuc tnh gi tr.
Tn M t
CHECKED Thit lp hoc truy xut trng thi ca nt radio
STATUS Thit lp hoc truy xut trng thi xem nt radio c c chn hay
khng
TYPE Truy xut loi iu khin, s dng <INPUT type = radio>.
VALUE Thit lp hoc truy xut gi tr ca radio <INPUT type=radio>
V d,
<INPUT TYPE=radio NAME=sex VALUE=male>Male
Submit
Loi ny to ra mt nt submit. Khi ngi dng nhp vo nt Submin, biu
mu c chuyn n v tr c xc nh trong thuc tnh ACTION. Cp
tn/gi tr ca nt submit c nhn cng vi biu mu.
V d,
<INPUT TYPE=submit VALUE=click NAME=b1">
nh
iu khin ny to ra mt nt submit dng nh. Gi tr ca thuc tnh SRC xc
nh URL ca nh c t trong nt y. Khi ngi dng nhp vo iu khin
nh ny, biu mu c chuyn i x l. Ta x v y (c o bng im)
ti v tr nhp chut c chuyn n my ch vi nh dng sau
Name.x = valueofx
Name.y = valueofy
Trong , name l tn ca iu khin
Ta c th s dng nhiu nt submit vi cc hnh nh khc nhau thay v mt nt
submit ch c mt hnh. Nu cn trnh by nhiu nh ta c th s dng bn
nh.
Lp trnh Web
59

V d,
<INPUT TYPE =image SRC=usamap.gif NAME=name>
Reset
iu khin ny to ra nt reset. Khi ngi dng nhp vo nt ny, cc gi tr
ca tt c cc iu khin c ti thit lp tr v gi tr ban u, c xc nh
trong cc gi tr thuc tnh ca chng
V d,
<INPUT TYPE=reset VALUE="Reset" NAME="B2">
V d sau th hin vic s dng nhiu kiu nhp khc nhau.
V d 1:
<HTML>
<HEAD>
<TITLE> Sample Form </TITLE>
</HEAD>
<BODY bgColor="#ffffcc" Text="#000099">
<FORM ACTION="http://www.mysite.com/FormSite" METHOD="POST">
<B><H2 align="left">Sample Stock Survey</H2></B>
<p><B>Describe your investment experience</B></p>
<p>
<INPUT TYPE="RADIO" NAME="RESULT_RadioButton-3"
VALUE="Radio-0">beginner
VALUE="Radio-1">intermediate
VALUE="Radio-2">expert
</p>
<p><B>Types of Investments you make</B></P>
<P>
<INPUT TYPE="CHECKBOX" NAME="RESULT_CheckBox-4"
VALUE="CheckBox-0">Individual Stocks
VALUE="CheckBox-1">Options
VALUE="CheckBox-2">Mutual Funds<BR></p>
<p><B>What is your stock pick for this year?</B></P>
<P>
<INPUT TYPE="TEXT" NAME="RESULT_TextField-6"
SIZE="30" MAXLENGTH="30">
</p>
<p>
Lp trnh Web
60

<INPUT TYPE="SUBMIT" NAME="Submit"
VALUE="Submit">
<INPUT TYPE="RESET" NAME="Reset" VALUE="Reset"></p>
</FORM>
</BODY>
</HTML>

Phn t TextArea (vng vn bn)
Loi ny to ra mt iu khin nhp vn bn trn nhiu dng so vi hp vn bn
nhp mt dng. Ta phi xc nh kch thc ca textarea. Ta cng phi xc nh s
dng, s ct trong textarea. Tuy nhin, ta phi kt thc phn t vi th ng
</TEXTAREA>
Tn M t
COLS Truy xut rng ca textarea
ROWS Thit lp hoc truy xut s hng ngang trong <TEXTAREA>
TYPE Truy xut loi iu khin, s dng <TEXTAREA>
Lp trnh Web
61

VALUE Thit lp hoc truy xut gi tr ca <TEXTAREA>
V d,
<TEXTAREA NAME=text1" COLS=20 ROWS=5> </TEXTAREA>
Phn t BUTTON (Nt bm)
iu khin ny to ra iu khin button. Khi ngi dng nhp vo nt Submit, biu
mu c nhn x l. Cp tn/gi tr ca nt submit c nhn cng vi biu
mu.
Thuc tnh M t
NAME Gn tn cho nt
VALUE Gn gi tr cho nt
TYPE Xc nh loi nt. Cc gi tr c th l:
Submit to nt nhn biu mu khi c nhp vo
Button To nt kch hot mt script khi c kch vo
Reset to nt thit lp li (reset) biu mu v cc gi tr ca cc iu
khin trong biu mu
Mt nt (BUTTON) c loi l submit (type=submit) ging nh mt phn t
INPUT ca loi nt. S khc nhau l ch khi phn t BUTTON c nhp vo
th cp tn/gi tr c nhn cng biu mu. Mt nt (BUTTON) c loi l submit
cng cha mt nh v ging mt phn t INPUT c loi l nh . S khc nhau l
ch phn t INPUT c dng mt nh phng trong khi phn t BUTTON th hin
th nh mt nt c hiu ng ln / xung khi nhp vo.
V d sau minh ha cho vic s dng phn t TEXTAREA v BUTTON
V d 2:
<HTML>
<HEAD>
</HEAD>
<B><CENTER><H2>Sample Stock Survey</H2></CENTER></B>
<P><B>Any Investment Advice for others?</B></P>
<TEXTAREA NAME="RESULT_TextArea-8" ROWS="7" COLS="20">
</TEXTAREA>
<P>
<BUTTON type="submit" name="submit" value="submit">
Lp trnh Web
62

Send <IMG src="submit.gif" alt="Submit"> </BUTTON>
<BUTTON type="reset" name="reset" >
Reset <IMG src="reset.gif" alt="Reset"> </BUTTON>
</P>
</FORM>
</BODY>
</HTML>

Phn t la chn (Select)
Phn t SELECT c s dng hin th mt danh sch cc la chn cho ngi
dng. Mi la chn c biu din bi phn t OPTION. Mt phn t SELECT
phi cha t nht mt phn t OPTION. Thnh phn c chn la s hin th vi
mu khc so vi cc thnh phn cn li.
Thuc tnh M t
NAME Gn tn cho phn t. Khi biu mu c gi i, thuc tnh tn
c gn vi gi tr chn la
SIZE Nu c nhiu s chn la, ngi dng s dng cun, thuc
tnh ny xc nh s dng trong danh sch c hin th.
Lp trnh Web
63

MULTIPLE L thuc tnh logic cho php ngi dng chn mt hoc nhiu
chn la.
Mi la chn trong hp chn c ly gi tr thng qua m t vn bn c n, xem
n c c chn hay khng.
Mng Option c to ra theo danh sch la chn trong phn t SELECT. Mi la
chn c thuc tnh Text v Selected cho php chng ta kim tra ty chn c
c chn hay khng v truy xut vn bn ca la chn theo th t. By gi ta c
th kim tra mi phn t trong mng v xc nhn n.
V d 3:
<HTML>
<HEAD>
</HEAD>
<B><CENTER><H2>Sample Stock Survey </H2></CENTER></B>
<P><B>How do you buy your stocks?</B>
<SELECT NAME="RESULT_RadioButton-5">
<OPTION></OPTION>
<OPTION>1) On-Line</OPTION>
<OPTION>2) Touch Tone Trading</OPTION>
<OPTION>3) Broker Assisted</OPTION>
<OPTION>4) Other</OPTION>
</SELECT></P>
<BR><BR><BR>
<P><INPUT TYPE="SUBMIT" NAME="Submit" VALUE="Submit">
<INPUT TYPE="RESET" NAME="Reset" VALUE="Reset">
</P>
</FORM>
</BODY>
</HTML>
Lp trnh Web
64

Phn t OPTGROUP c s dng nhm cc la chn vo mt cy phn cp.
V d, bng ni dung c th c tn cc chng. Cc ch v ch con trong
mt chng c th c nhm vo chng .
Thuc tnh M t
SELECTED y l thuc tnh logic s dng chn trc mt ty chn.
VALUE Xc nh gi tr c nhn vo cho ty chn c chn. Gi tr
ny c gn vi tn ca phn t SELECT. Ni dung ca phn
t OPTION l gi tr mc nh
LABEL Xc nh vn bn hin th cho mt ty chn.
V d 4:
<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 the
Internet
<OPTION value=Introhtml>Introduction to HTML
Lp trnh Web
65

<OPTION value=Introweb>Introduction to Web page
designing
</OPTGROUP>
<OPTGROUP>
<OPTION value=vbintro>Visual BasicAn Introduction
<OPTION value=vbdev>Visual Basic Application
Development
</OPTGROUP>
</SELECT>
</FORM>
</BODY>
</html>

Phn t LABEL (Nhn)
Phn t LABEL c s dng gn thng tin vo cc phn t iu khin. V d,
phn t TEXT khng c nhn xc nh r n. Ta c th gn nhn vo phn t
TEXT khi trang hin th. Ta phi xc nh thuc tnh ID ca iu khin m n c
gn vo.
V d 5:
<HTML>
<HEAD>
<TITLE>Using Labels</TITLE>
</HEAD>
<BODY>
Lp trnh Web
66

<H2><CENTER><FONT size = 5 color = hotpink face = arial>Personal
Information</FONT></CENTER></H2>
<HR align = center>
<FORM action=http://somesite.com 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>

4.2.4 To biu mu
Chng ta tho lun v phn t <FORM> v cc iu khin c th thm vo biu
mu nhn thng tin ngi dng. Trong phn ny, chng ta s to mt biu mu
nhn thng tin v mt ngi xin vic. Cc nt RESET v SUBMIT thc hin cc cng
vic cn thit.
V d 6:
<HTML>
<HEAD>
<TITLE>Job application</TITLE>
</HEAD>
Lp trnh Web
67

<BODY>
<H1><CENTER><FONT SIZE = 4 COLOR = Forestgreen> Application
Form</CENTER></FONT></H1>
<HR><BR>
<FORM action=http://somesite.com/processform method=post>
<P>
<LABEL for=firstname>Name: </LABEL>
<INPUT type=text id=firstname><BR>
<P>Area of Interest
<BR><BR>
<INPUT TYPE=RADIO NAME=CONTROL1" VALUE=0"
CHECKED>Web Designer
<INPUT TYPE=RADIO NAME=CONTROL1" VALUE=1" >Web
Administrator
<INPUT TYPE=RADIO NAME=CONTROL1" VALUE=2" >Web
Developer
<P>Experience
<SELECT NAME=CONTROL2">
<OPTION>None</OPTION>
<OPTION>1 Year</OPTION>
<OPTION>3 Years</OPTION>
<OPTION>5 Years</OPTION>
</SELECT>
<BR>
<P>Comments
<BR>
<TEXTAREA NAME=CONTROL3" COLS=30" ROWS=5">Type
your comments here.</TEXTAREA>
<BR>
<P><INPUT NAME=CONTROL4" TYPE=CHECKBOX CHECKED>Send
acknowledgement
<BR>
<P><INPUT TYPE=SUBMIT VALUE=OK>
<INPUT TYPE=RESET VALUE=RESET>
</FORM>
</BODY>
</HTML>
Lp trnh Web
68

Khi c nhiu phn t trong mt form, chng ta cn phi iu khin chng. Sau y l
cc thuc tnh iu khin cc phn t
Thit lp tiu im (Focus)
Mt phn t tr thnh hot ng khi n nhn tiu im. V d, nhp vn bn vo
phn t TEXT, tiu im phi nm trn phn t . Khi phn t mt tiu im, n
s khng hot ng na. Cch n gin nht t tiu im cho phn t l ta kch
vo n bng cch s dng chut, joystick ... hoc dng bn phm t.
Th t tab
Thuc tnh tabindex ca mt phn t xc nh trnh t phn t nhn tiu im
thng qua bn phm. y bao gm cc phn t c lng vo cc phn t khc.
Gi tr c th l bt c s no gia 0 v 32767. Tiu im bt u t phn t c gi
tr tabindex thp nht. Nu ta gn cng mt gi tr tabindex cho hn mt phn t,
th cc phn t nhn tiu im theo th t n xut hin trong ti liu.
Lp trnh Web
69

Nu phn t no khng h tr thuc tnh tabindex, n s l phn t nhn tiu im
cui cng. Nu ta v hiu ha mt phn t, n s khng c lit k vo th t tab
v n s khng nhn c tiu im.
V d,
<INPUT tabindex=2 TYPE=RADIO NAME=CONTROL1" VALUE=0" CHECKED>Web
Designer
<INPUT tabindex = 6 TYPE=SUBMIT VALUE=OK>
Phm truy cp (Access Keys)
Thuc tnh ny c s dng gn phm truy cp cho phn t. Phm truy cp l
mt k t v thng c s dng cng vi phm ALT. Khi ngi dng nhn phm
truy cp, phn t c xc nh s nhn tiu im v bt u hot ng.
V d,
<LABEL for=firstname>Name: </LABEL>
<INPUT accesskey=N tabindex=1 type=text id=firstname>
<TEXTAREA accesskey=C tabindex=4 NAME=CONTROL3" COLS=30"
ROWS=5">Type your comments here</TEXTAREA>
Phn t v hiu ha (Disabling Elements)
Nu lm vic vi trnh son tho vn bn, ta s thy rng nu khng m ti liu no
th cc ty chn lu v nh dng s b v hiu ha. i vi trang Web, ta c th v
hiu ha cc phn t hoc trng thi ch c (read-only) nu khng mun
ngi dng truy cp chng. V d, khi hin th mt biu mu, ta c th v hiu ha
nt Submit cho n khi ngi dng nhp d liu vo. Thuc tnh v hiu ha
c s dng iu khin truy cp mt phn t. Khi mt phn t b v hiu ha,
n khng c lit k trong th t tab. Do vy, iu khin khng nhn c tiu
im v cui cng l cc gi tr ca iu khin b v hiu ha khng c chuyn
i cng vi biu mu. Mt iu khin b v hiu ha c th c kch hot nh cc
script lc thc hin.
V d,
<INPUT TYPE=SUBMIT VALUE=OK DISABLED=True>
4.3 KHUNG (FRAME)
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.
Lp trnh Web
70

Hnh 4.8: Khung trong trang Web
4.3.1 Ti sao s dng khung?
Mt trang c th c mt hoc nhiu khung. Mt s l do s dng khung:
Hin th mt biu tng (logo) hoc thng tin tnh trn mt v tr c nh trn trang
Web
i vi bng ni dung trong trang m ngi dng c th kch vo v di
chuyn quanh web site m khng cn phi lin tc quay li trang ni dung.
Nhiu cch hin th cho php ngi thit k gi mt s thng tin tnh no trong
khi cun hay thao tc i vi nhng ni dung khc trn trang Web
Tuy nhin, mt hn ch ca vic s dng khung trong trang Web l: khng phi tt c
cc trnh duyt u h tr khung, v d, IE phin bn 2.0 hoc trc v Netscape
1.2 hoc trc . ni dung vn hp l m ngi s dng khng cn quan tm n
trnh duyt c h tr khung hay khng, ngi thit k cn phi cung cp mt cch
khc truy cp vo ni dung.
4.3.2 S dng khung
Mt ti liu HTML chun c phn HEAD v BODY. Mt ti liu HTML s dng
khung th c phn HEAD v phn FRAMESET. Phn FRAMESET xc nh cch
trnh by trong ca s ngi dng. Ta khng th s dng phn t BODY v
FRAMESET cng vi nhau. Trnh duyt ch nhn phn t u tin xut hin trong ti
liu v b qua phn t sau. Ngha l, nu bn s dng phn t BODY, th phn t
FRAMESET sau s b b qua v ngc li.
Khung c to ra bng cch s dng phn t FRAMESET. Cc thuc tnh nh sau:
Thuc tnh M t
ROWS 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
COLS 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
Lp trnh Web
71

Phn t FRAME xc nh hnh thc v ni dung ca mt khung trong FRAMESET.
V d sau y to hai khung bng nhau, chia i ca s.
V d 7:
<HTML>
<HEAD>
<TITLE>Two Equal Frames</TITLE>
</HEAD>
<FRAMESET COLS=50%,*>
<FRAME SRC=x.htm>
<FRAME SRC=y.htm>
</FRAMESET>
</HTML>

Ch : File x.html v y.html c lu cng th mc vi file .html chnh
Cc thuc tnh ca FRAME bao gm:

Thuc tnh M t
NAME Thuc tnh ny gn tn cho khung hin thi
SRC Thuc tnh ny xc nh v tr ti liu ban u c cha trong
khung
NORESIZE y l thuc tnh logic. N quy nh ca s khung khng c
thay i kch thc
Lp trnh Web
72

SCROLLING Thuc tnh ny xc nh kiu cun cho ca s khung. Cc gi tr
c th l:
Auto - Xut hin thanh cun khi cn thit. y l gi tr mc nh
Yes - Lun lun xut hin thanh cun trong ca s ca khung
No - Khng xut hin thanh cun trong ca s ca khung
FRAMEBORDER Xc nh vin ca khung. Cc gi tr c th l:
1 - L gi tr mc nh. C s phn cch gia khung hin thi vi
cc khung xung quanh
0 - Khng c s phn cch gia khung hin thi vi cc khung ln
cn. Tuy nhin, nu cc khung ln cn c thit lp th vn xut
hin s phn cch ny.
MARGINWIDTH Xc nh khong cch gia ni dung trong khung vi l tri v l
phi ca khung. Gi tr phi ln hn mt
MARGINHEIGHT Xc nh khong cch gia ni dung trong khung vi l trn v l
di ca khung. Gi tr phi ln hn mt
Ta khng th ng ca s ca khung. Khung c ng khi ca s to ra n b ng
li. Khung khng c thanh trng thi v vy ta phi s dng thanh trng thi ca khung
chnh trong ti liu.
V d 8:
<HTML>
<HEAD>
<TITLE>Scrolling in Frames</TITLE>
</HEAD>
<FRAMESET ROWS=50%,*>
<FRAME SRC=x.html SCROLLING=no>
<FRAME SRC=y.html SCROLLING=yes>
</FRAMESET>
</HTML>
Lp trnh Web
73

V d 9:
<HTML>
<HEAD>
<TITLE>Resizing Frames</TITLE>
</HEAD>
<FRAMESET cols=20%, 80%>
<FRAMESET rows=100, 200>
<FRAME src=x.html noresize>
<FRAME src=y.html>
</FRAMESET>
<FRAME src=flowers.jpg>
</FRAMESET>
</HTML>

Hnh 4.11:Kt qu v d 9
on m sau to 3 ct: Ct 2 c rng l 250 pixel, ct 1 chim 25% khong cn li
v ct 3 chim 75% khong cn li
V d 10:
Lp trnh Web
74

<HTML>
<HEAD>
<TITLE>Using Frames</TITLE>
</HEAD>
<FRAMESET cols=1*, 250, 3*>
<FRAME src = x.html frameborder = 0>
<FRAME src = y.html frameborder = 0 marginwidth=25>
<FRAME src = flowers.jpg>
</FRAMESET>
</HTML>

Ch trong v d 9, ta s dng phn t FRAMESET lng nhau (Nested framesets). Ta
c th to ra cc frameset (tp khung) lng nhau bt k mc no nh v d minh ha
di y:
V d 11:
<HTML>
<HEAD>
<TITLE>Nested Frames</TITLE>
</HEAD>
<FRAMESET cols="33%, 33%, 34%">
<FRAME src = "flowers.jpg">
<FRAMESET rows="40%, 50%">
<FRAME src = "x.html">
<FRAME src = "y.html">
</FRAMESET>
<FRAME src = "flowers.jpg">
</FRAMESET>
</HTML>
Lp trnh Web
75

Lin kt cc khung
Khi to lin kt trong trang Web, ta c th thit lp mt khung nh mt mc tiu
ca lin kt (link). Trnh duyt tun theo cc bc sau:
Nu ta xc nh mt khung trong thuc tnh ch (TARGET) ca phn t, th ti
liu c phn t ch ra s c ti vo khung khi phn t c kch hot.
Nu thuc tnh TARGET khng c thit lp th thuc tnh TARGET ca
phn t BASE s c s dng xc nh khung
Nu c phn t v phn t BASE khng cp n TARGET, th ti liu c
ti vo khung cha phn t .
Nu khng tm thy khung th trnh duyt to mt ca s v khung mi sau
ti ti liu vo khung mi ny.
Thuc tnh TARGET c s dng xc nh tn khung m ti liu c m
trong . Khi to khung, ta cn phi t thuc tnh tn. Tn ny c dng khi to
lin kt. Sau khi thay i ni dung ca mt khung th nh ngha frameset ban u
b mt i. Nu c nhiu lin kt n cng mt ch, ta c th thit lp mt
TARGET mc nh trong phn t BASE . Sau , vic xc nh thuc tnh
TARGET trong mi phn t s khng cn thit na.
V d 12:
<HTML>
<FRAMESET COLS=40%, 60%>
<FRAME SRC=FLOWERS.JPG NAME=Flowers SCROLLING=yes>
<FRAME SRC=LINK.HTML NAME=Links SCROLLING=no
FRAMEBORDER=no>
</FRAMESET>
</HTML>
Link.html
<HTML>
<BODY>
Lp trnh Web
76

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

Phn t NOFRAMES
Nu trnh duyt khng h tr khung, vi t cch l ngi pht trin ng dng ta
nn cung cp mt cch khc hin th ni dung. Phn t NOFRAMES c s
dng lm vic . N ch hot ng trong trnh duyt khng h tr khung.
V d 13:
<HTML>
<FRAMESET COLS=40%,60%>
<FRAME SRC=Flowers.jpg NAME=Flowers SCROLLING=yes>
<FRAMESET ROWS=60,*>
<FRAME SRC=x.html NAME=x SCROLLING=no
FRAMEBORDER=no>
<FRAME SRC=y.html NAME=y>
<NOFRAMES>
Frames are not being displayed. Click here <A
href=main.htm>for a non-frames version</A>
</NOFRAMES>
</FRAMESET>
</FRAMESET>
</HTML>
4.3.3 Phn t IFRAME Khung trn dng (inline frame)
Phn t IFRAME c s dng to khung trn dng (inline frame) hay khung ni
(floating frame). Ta c th to v chn mt khung vo mt khi vn bn. Khi trnh
Lp trnh Web
77

duyt khng h tr khung th ni dung nm trong th IFRAME b tr li. Khung trn
dng (inline frame) khng th thay i kch thc.
Thuc tnh M t
NAME Gn tn cho khung hin thi
WIDTH Xc nh rng ca khung trn dng
HEIGHT Xc nh chiu cao ca khung trn dng
V d 14:
<HTML>
<P>It has been good fun. You have been learning about frames
<BR><BR>
<IFRAME src="x.html" width="100" height="150" scrolling=auto
frameborder=1>
[The browser does not support frames or is currently configured
not to display frames. These are the <A href="x.html">contents</A>]
</IFRAME>
<BR>
<P><FONT color = hotpink>The above is an inline frame
</HTML>

Hnh 4.15: Kt qu v d 14 (trnh duyt c h tr khung)
Lp trnh Web
78

C CH H N NG G 5 5: : S S D DN NG G S ST TY YL LE E
Khi qut v DHTML
S dng style sheet
5.1 GII THIU
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 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 stylesheet (style sheet cch).
Stylesheet l mt c tnh quan trng c th c dng trong HTML ng. Mc d
trang Web khng cn c mt stylesheet, nhng vic s dng mt stylesheet s mang
li nhng li ch nht nh. Chng ta s tho lun v stylesheet nh l mt k thut v
bng cch no c th s dng n trong vic thit k v pht trin Web
5.2 DHTML
HTML ng c th c nh ngha nh l mt phn mm c s dng cho vic
m t s kt hp gia HTML, cc stylesheet v ngn ng script lm cho ti liu tr
nn sinh ng.
Mi th bt u ra sao? Vo nhng ngy u, HTML c pht trin nh mt nh
dng ti liu c dng trao i thng tin trn Internet. Vic truyn ti d liu n
c lp vi nn tng(platform). Tuy nhin, trng tm chuyn t cc vn khoa
hc v hn lm qua cc vn ca ngi dng hng ngy, nhng ngi hin nay ang
xem Internet nh l ngun thng tin v gii tr. Cc trang web tr nn hp dn v
nhiu mu sc hn lm thu ht ngi dng. Tuy nhin, cc dng v c bn v ni dung
ca nhng trang web vn c nh. Ngi pht trin rt t hoc khng c s iu khin
no c i vi mt trang web khi n c hin th. HTML vn cn tnh
5.2.1 Gii thiu DHTML
S ra i ca lp trnh script thm vo phn ng cho cc trang web. Ngi dng
c th tng tc vi trang web. Tuy nhin, mt s hn ch vn cn tn ti. Bt k s
xc nhn d liu no hoc vic lp trnh script u phi c thc hin trn my ch.
thay i ni dung hoc mt kiu ca trang, th trang phi c vit ln hon
ton. Bt c tng tc no ca ngi dng cng u thng qua my Web server.
Vi mi phin bn trnh duyt mi, li thm vo cc c tnh tt hn cho HTML.
Ngy nay Internet v Netscape Navigator h tr mt m hnh i tng ti liu
Document Object Model m cc phn t HTML v cc th c coi nh mt
i tng. Nhng i tng c nhng phng thc, thuc tnh v s kin c th lp
trnh iu khin cc hot ng ca chng. V d, c php thm vo thay i mu
ca vn bn trong phn t phn on <p> khi ngi dng kch chut ln n.
Lp trnh Web
79

Cc script (l mt chng trnh nh) c th thc thi trong trnh duyt. iu ny c
ngha l d liu c th c thao tc, nh dng v thay i mt cch nng ng my
khch (client) m khng cn qu nhiu s h tr t my ch. Tng tc ca ngi
dng gi y c th c x l bi chnh my khch.
Ch : Mt ng dng Client/Server c tch ra hai phn mt l giao din ngi
dng front-end client v phn back-end server. Client l mt phn ca ng dng,
n trnh by d liu i vi ngi dng. Thng thng Client giao din ngi dng
khng thc thi cc chc nng ca c s d liu, thay vo , client gi cc yu cu d
liu n mt my ch server, nh dng v hin th kt qu. Vai tr ca my ch
server cung cp x l hoc thng tin n cho client. My ch cung cp d liu n
client, nhng i khi, My ch server c th cn thc hin mt s cng vic x l
em li mt kt qu d liu yu cu. V d nu mt client yu cu v d liu bn hng
cho mt vng c th, Server cn thc hin chnh xc mt s x l d liu t tp tt c
cc d liu v nh dng n theo yu cu t pha client.
Mi cng ty Microsoft hay Netscape u c cch trin trai HTML ng ring ca h.
Microsoft tp trung vo dng cc Cascading Style Sheet (CSS). Chng ta c th dng
script tng tc nhng phn t CSS.
Netscape, ngc li, da vo cc phng thc dng cc tng. Th LAYER c dng
cung cp hu ht cc thuc tnh ca HTML ng.
5.2.2 Cc c im ca DHML
DHTML khng dng li mt s phn m rng ca HTML. Trong phn ny s tho
lun v cc c im ca DHTML v cch thc dng n thm vo nhng tnh nng
ng cho trang web.
Kiu ng (Dynamic Style)- Trong cc phin bn ca HTML trc y, nu
chng ta mun thay i kiu hay ni dung ca mt trang web sau khi n c hin
th trong trnh duyt th ton b trang phi c np li refresh. iu c
ngha l yu cu phi c gi n my ch thnh mt trang mi hin th. i
vi ngi dng th y l mt qui trnh r rng. Tuy nhin, nu trang phi c
np li refresh thng xuyn s tn nhiu thi gian v lm cho my ch tr nn
qu ti.
Trong HTML ng, Cch lm ny khc mt cht. Bng cch dng cc bng kiu
style sheets, Chng ta c th xc nh mu, kiu hoc kch c ca ni dung trang.
Chng ta c th thay i kiu ca trang m khng cn gi n my ch Web
server cho mi ln thm vo cc th v thuc tnh. iu c ngha l chng ta c
th thay i mu, font, kch c hoc ni dung vn bn khi p li nhng tng tc
ca ngi dng. Trong HTML ng, kiu lin quan n cch thc, nh dng xut
hin trn trang web hn l ni dung. Kiu style bao gm mu sc, kiu ch,
khong cch, tht u dng, nh v v xut hin ca vn bn.
Ni dung ng (Dynamic Content)- c h tr bi Internet Explorer. y
chng ta c th thay i ch v hnh nh trn trang web sau khi n hin th. Chng
ta cng c th thay i ni dung ca trang khi p li d kin nhp vo hay s
kin ngi dng kch chut vo.
Lp trnh Web
80

nh v (Positioning)- Cc phin bn ca HTML trc y, khng kim sot c
v tr ca mt phn t trn trang web. Theo v tr chnh xc ca trang v mt
ta th khng th ch ra c. Vic nh v dnh cho trnh duyt. HTML ch c
th m t ni dung v v tr tng i ca cc phn t.
Trong HTML ng, Chng ta c th ch ra v tr chnh xc (tuyt i hay tng
i), mi quan h gia ta x v y. Mt khi trang web c hin th, chng ta c
th di chuyn cc phn t trn trang lm cho n tr nn ng.
nh v tuyt i ch r v tr chnh xc theo cc im pixels.
nh vi tng i ch ra vi tr tng i ca cc phn t. Trnh duyt x l
vic nh v hin thi
c im vic nh v cng cho php chng ta xc nh th t sp xp z-orderca
cc phn t. C ngha l cc i tng ny nm chng ln i tng khc.
Lin kt d liu (Data Binding) Trong HTML ng, chng ta c th kt ni
mt c s d liu vo bng ca trang web. N c h tr bi Internet Explorer.
Khi trang c np ln, d liu t c s d liu trn my ch c hin th trong
bng. D liu c th c sp xp, lc v hin th cho ph hp vi yu cu.
Downloadable Fonts (C kh nng ti Font ch)- c Netscape h tr.
Downloadable fonts l mt t im cho php ta chn cc font m ty chn trn
trang web. Chng ta c th gi font trong trang. iu ny m bo rng vn bn
trong trang web lun lun hin th theo font m ta chn. y l c im quan
trng bi v thng thng nu cc font c ch ra khng c trong my ca ngi
dng th trnh duyt s dng font mc nh c sn. iu ny s lm hy b mc
ch ch ra kiu font ca bn.
Scripting Chng ta c th vit cc script thay i kiu v ni dung ca trang
web. Script ny c lng vo trong trang web.
Cu trc i tng (Object Structure) HTML ng theo mt cu trc i
tng theo mi phn t c i x nh mt i tng trong cu trc. Mi i
tng c th c truy cp v lp trnh c lp.
5.3 STYLE SHEETS
Stylesheet c to nn t cc qui tc kiu cch, m n bo cho trnh duyt bit c
cch trnh by mt ti liu. Stylesheet l mt k thut thm vo cc kiu (font, mu,
khong cch) cho nhng trang web.
5.3.1 Khi nim, chc nng v li ch ca Style Sheets
Mt tnh nng quan trng ca HTML ng l nhng kiu(style) ng. Ngha l bn c
th thay i kiu ca nhng phn t HTML trn trang sau khi chng c hin th trn
trang y. 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 ca chng ta:
Thay i kiu ni tuyn (inline style)
Lp trnh Web
81

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

Li ch ca cc stylesheet Cc stylesheet c th c dng :
Np chng trnh duyt: - Mi trnh duyt u c th hin th cc trang web
theo cch ring ca n. Trc y cc nh pht trin khng kim sot c cc
trang web hin th trn trnh duyt. Suy cho cng bn khng bit trnh duyt no
m ngi dng cch na vng tri t s dng. Nh c cc stylesheet bn c
th np chng cc qui c ca trnh duyt v t theo cch ring ca chng ta.
Chng hn, bn c th xc nh kiu m trong mt phn t <H1> cn hin
th:
<H1><FONT SIZE=3 COLOR=AQUA>
<B>Overriding the browser</B></FONT></H1>
B cc trang (Page layout) Nhng stylesheet c th dng hin th font
thay i mu m khng lm thay i cu trc ca trang web. iu ny c ngha
l vi t cch l mt nh thit k by gi bn c th tch bit nhng yu cu v
thit k hnh nh trc quan t cu trc logic ca trang web v a ch l hai
chuyn hon ton khc nhau.
Khi s dng cc bin php lin quan trong stylesheet ca bn, bn c th th
hin cc ti liu sao cho p mt trn bt k mn hnh no v theo bt k
phn gii no.
S dng li cc stylesheet Mt khi nh ngha kiu thng tin, chng ta c
th nhng stylesheet bn trong ti liu HTML. Ln lt thay th, chng ta c
th kt ni tt c cc trang trn website n stylesheet. iu ny chc chn rng
cc trang web ca chng ta u c cng din mo thng tin khi c hin th.
V vy, bn c th c c nn chung ca trang v d nh logo ca trang v
mt s thng tin chun(cho cc trang) trong mt stylesheet. iu ny s m
bo c cch nhn v cm nhn thng dng v trang website. C th hnh
dung xem c vi trm trang web v bn phi xc nh kiu ca mi trang mt
cch c lp.
Lp trnh Web
83

Ch cn lm mt ln tht tt Chng ta c th to mt stylesheet v c lin
kt n nhiu ti liu. Tt c nhng ti liu s c din mo ging nhau. Tuy
nhin, quan trng nht l khi bn thc hin thay i stylesheet th tt c cc ti
liu c kt ni vo stylesheet s b thay i theo.
5.3.2 Quy tc Style Sheets
Stylesheet phn cp(cascading style sheet) nh ngha cc kiu c th c p dng
vo cc trang hoc cc phn t ca trang.
Qui tc kiu (Style Rule)- Stylesheet phn cp l mt tp hp cc qui tc. Qui tc
nh ngha kiu ca ti liu. V d, chng ta c th to ra mt qui tc kiu c xc
nh cho tt c phn tiu <H1> hin th mu vng xanh. Qui tc kiu c th ng
dng vo cc thnh phn c chn ca trang web. V d, chng ta c th xc nh
mt on vn bn bt k in m v in nghing trn trang. iu ny c gi l
khai bo kiu c sn m nh cc kiu c p dng vo cc phn t HTML
n l trn mt trang web.
Style Sheet L mt danh mc cc qui tc kiu v c th nhng vo bn trong ti
liu HTML. Trong trng hp , n c gi l stylesheet nhng. Stylesheet cng
c th c to ra bng mt file bn ngoi v c lin kt vi ti liu HTML.
Cc qui tc (Rules) Bng kiu c th c mt hay nhiu qui tc. Phn u ca qui
tc gi l b chn (Selector). Mi b chn c cc thuc tnh v cc gi tr lin quan
n n.
RuleSelector {Declarations property: value; property: value; ... }

Phn ca qui tc c km theo trong phm vi cc du ngoc mc c gi l khai
bo. Khai bo c hai phn, phn trc du hai chm (:) l thuc tnh v phn nm
sau du hai chm l gi tr ca thuc tnh .
Cc khai bo c phn cch bi du chm phy (;). Ta nn t du chm phy sau
ln khai bo cui cng.
V d nh
H1 {color: blue}
y, H1 l b chn, color: blue l khai bo
Trong phm vi khai bo:
{Property: Value}
Color l thuc tnh, blue l gi tr.
Mi qui tt c th tch ri nhau trong phm vi th STYLE.
V d 2:
<HTML>
<HEAD>
<STYLE TYPE=text/css>
Lp trnh Web
84

H1 {color:limegreen}
H1 {font-family:Arial}
H2 {color:limegreen}
H2 {font-family:Arial}
</STYLE>
</HEAD>
<H1>This is the H1 element</H1>
<H3>This is the H3 element with its default style as displayed in the
browser</H3>
</HTML>
Lu : text/css ch ra kiu style c dng y l stylesheet phn cp cascading
style sheet

Thay vo chng ta c th nhm cc qui tc. Mi khai bo c tch ra bi du
chm phy.
V d 3:
<HTML>
<HEAD>
H1, H2{color:limegreen;font-family:Arial;}
</STYLE>
</HEAD>
Lp trnh Web
85

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

Hnh 5.3: Kt qu V d 3
5.3.3 Cc Selector trong Style Sheets
Ta c th dng cc gi lp trong cc selector nhng khng th dng chng trong
HTML. V c bn, chng dng nhng thng tin bn ngoi tc ng n vic nh
dng. V d, vi vic s dng lp gi, cc lin kt c gh qua c th hin th khc
i so vi cc lin kt cha c gh qua nh sau:
A:link { color: red } /* unvisited link */
A:visited { color: blue } /* visited links */
A:active { color: lime } /* active links */
Selector c th nh ngha nh l mt chui k t xc nh ra cc phn t v cc quy
tc tng ng p dng cho cc phn t y.
C hai kiu selector c bn:
Selector n
y l nhng selector d s dng nht. Selector n m t mt phn t bt chp v
tr ca n u trong cu trc ti liu. B nhn dng tiu H1 l mt in hnh.
Sau y l mt s kiu ca selector n.
Selector HTML
Nhng selector ny s dng tn ca phn t HTML v b i du mc . V vy,
th <P> trong HTML tr thnh P v khi , n c xem nh l mt selector.
V d sau y minh ha iu
V d 4:
<HTML>
Lp trnh Web
86

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

Hnh 5.4:Kt qu v d 4
Selector lp
Nhng selector ny s dng thuc tnh CLASS ca cc phn t HTML. Mi
phn t khi hin th c mt thuc tnh CLASS c s dng gn vo mt
nh danh (identifier). Ta c th gn mt tn lp duy nht cho mi phn t
khc. Ngoi ra, ta cng c th gn nh danh lp cho nhiu phn t cng loi
khi ta mun hin th cc trng thi khc nhau so vi dng chun. V d, ta c
th mun <H2> xut hin vi nhiu mu khc nhau. Trong trng hp , ta s
dng nh danh lp cho <H2>.
Selector lp c du chm (.) ng trc gi l k t c(flag), theo sau l tn lp
do chng ta chn. Tt hn ht nn chn nhng tn lp theo mc ch ca chng
ch khng nn chn tn m t mu sc hay kiu ca chng. V d, ta c th
mun on A hin th ch nghing, nhng on khc th hin th theo kiu
khc. Trong trng hp , on A c th c b nhn dng lp l .slant
V d 5:
<HTML>
<HEAD>
.water { color:blue }
.danger { color:red }
Lp trnh Web
87

</STYLE>
</HEAD>
<BODY>
<P class=water>test water
<P class=danger>test danger
<P> no style
<BR>
<EM class=danger>italic</EM>
</BODY>
</HTML>

Hnh 5.5:Kt qu v d 5
Khi xc nh mt lp kiu, ta c th xc nh c phn t HTML no c th
s dng kiu ny. Chng ta nn s dng t kha all, tt cc cc phn t u
c th s dng n.
V d 6:
<HTML>
<HEAD>
<STYLE type="text/css">
all.hotpink {color:hotpink;}
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>
<H5 CLASS=hotpink>This is an H5 element that has been allowed
to use hotpink style.</H5>
Lp trnh Web
88

<BODY bgColor=lavender>
<P CLASS=BLUE>This paragraph uses the class BLUE</P>
<P>This paragraph does not use the class BLUE</P>
<P CLASS=hotpink>This paragraph is hotpink
</BODY>
</HTML>
Ch : Xem kt qu trong Netscape

Selector ID
Selector ID s dng thuc tnh ID ca phn t HTML. Selector ID c dng
p dng mt kiu vo ring mt phn t no trn trang Web. V d, ta c
th s dng mt selector ID p dng mt kiu c bit no cho phn t
<H2>. iu khng c ngha l mt kiu tng t c p dng cho mt
phn t <H2> khc trn trang , nu khng c xc nh. Tng t vi vic
s dng kiu ni tuyn m nh c th p dng ring cho mt phn t no .
Selector ID c bt u bng du thng (#).
V d 7:
<HTML>
<HEAD>
<TITLE> ID Selectors</TITLE>
#control {color:red}
</STYLE>
</HEAD>
Lp trnh Web
89

<BODY>
<P id="control">Fire is of this color</H2>
<BR>
<P>This paragraph has no style applied
</BODY>
</HTML>

V d 8:
<HTML>
<HEAD>
<TITLE> Combining ID and Class Selectors</TITLE>
.forest {color:green}
.danger {color:red}
#control {color:blue}
</STYLE>
</HEAD>
<BODY>
<P class=forest>green things
<P class=danger>fire hazards
</P>
<EM class=forest>more green things</EM>
<BR>
<EM class=danger>more fire hazards</EM>
<UL>
<LI class=danger>things that burn
<LI class=forest>things that don't burn
</UL>
Lp trnh Web
90

<P id=control> water </P>
</BODY>
</HTML>

Selector ng cnh
Selector ng cnh lin quan n ng cnh ca phn t. V d, thnh thong ta c
hai phn t cng gi tr. Phn t chnh hay phn t cha c mt phn t con bn
trong n. thay i kiu ca phn t con, ta phi s dng selector theo ng cnh.
iu ny da trn khi nim k tha, phn t con k tha kiu c gn cho th
cha.
Mt v d in hnh l phn t <BODY>. Khi thm mt phn t vo th <BODY>,
th mi phn t bn trong s k tha cc kiu ca <BODY>.
By gi lm sao kim sot iu ? Suy cho cng, ta khng mun tt c cc
phn t trn trang Web xut hin cng mt kiu. Trong trng hp , chng ta
phi c s thay i c bit i vi cc phn t con, ni mt cch khc l s np
chng k tha.
V d 9:
<HTML>
<HEAD>
<TITLE>Contextual selectors</TITLE>
BODY {color:blue;
background:lavender;
Lp trnh Web
91

font-family:Arial;}
UL {color:red }
</STYLE>
<HEAD>
<BODY>
<UL>
<LI> mangoes
<LI> oranges
<LI> apples
</UL>
<OL>
<LI> mangoes
<LI> oranges
<LI> apples
</OL>
</BODY>
</HTML>

Hnh 5.9:Kt qu v d 9
Selector UL trong style sheet xc nh cc mc trong danh sch(list item) c
hin th mu . Chng k tha phng ch Arial t khai bo BODY, mu t
khai bo UL. Nu ta xc nh font-family trong khai bo UL, n s np chng ln
khai bo ca selector BODY. Khng c selector OL trong style sheet, v th cc
thuc tnh ca OL k tha t selector BODY.
5.3.4 Kt hp, lin kt v chn mt Style Sheet vo ti liu HTML
C mt s cch ta c th kt hp style sheet vi HTML
1. Phn t STYLE
Lp trnh Web
92

2. Thuc tnh Style
3. Phn t Link
Phn t STYLE
Phn t STYLE c chn vo phn t <HEAD> ca ti liu, tt c cc quy tc
c nh ngha gia th m v th ng. Khi hin th cc trang, th ch ti liu no
c nhng STYLE mi c tc ng. V d:
<Style Type = "text/css">
H1 {color:maroon;}
P {color:hotpink; font-family:Arial;}
</Style>
V d trn l cch s dng phn t <STYLE>
Thuc tnh STYLE
Thuc tnh STYLE c s dng p dng style sheet cho tng phn t. Mt
style sheet c th nh nh mt lut. Khi s dng thuc tnh Style ta c th b qua
phn t STYLE v t khai bo trc tip vo thuc tnh Style trong th m ca
phn t. V d:
<H2 style="color: green;
font-family: Arial">
</H2>
R rng l chng ta ch nn dng kiu ny khi thay i kiu cho mt phn t c
bit no . Nu ta c d nh p dng cng kiu trn khp ti liu th lc y y
khng phi l cch hay. V d trn l cch s dng thuc tnh STYLE.
Phn t Link
Nu ta mun s dng phn t LINK, th stylesheet ca ta phi l mt ti liu ring.
Sau chng ta phi thm a ch Web ca stylesheet vo. V d,
<LINK REL = stylesheet
HREF = stylesmine.css"
Type = "text/css" >
Thuc tnh rel=stylesheet phi c khai bo nu khng th trnh duyt s khng
ti c stylesheet .
V d 10:
Sheet1.css
H2 {color:blue; font-style:italic;}
P {color: limegreen;}
Tp .htm
<HTML>
<HEAD>
<TITLE>Linking external style sheets</TITLE>
Lp trnh Web
93

<LINK REL=STYLESHEET TYPE="text/css"
HREF="sheet1.css">
</HEAD>
<H2>This is an H2 element</H2>
<BR>
<BODY>
<P>This is a paragraph
</BODY>
</HTML>

5.3.5 Thit lp thuc tnh trong Style Sheet
Chng ta c th thit lp nhiu thuc tnh trong stylesheet. Bng 11.1 cho thy nhiu
thuc tnh c th c s dng trong stylesheet.
Thuc tnh Tn CSS
Cc thuc tnh font Font
font-size
font-style
Cc thuc tnh vn bn text-align
text-indent
vertical-align
Cc thuc tnh hp border
border-width
border-bottom
Lp trnh Web
94

border-color
Cc thuc tnh v v tr Clip
height
Left
Top
z-index
Lp trnh Web
95

C CH H N NG G 6 6: : J JA AV VA AS SC CR RI IP PT T, , N N N N T TN NG G V V C C PH PHP P
Hiu c c bn v JavaScript
Nm vng kin thc c bn c php JavaScript
6.1 GII THIU
JavaScript l mt ngn ng kch bn (scripting language) c dng to cc script
my client (client-side script) v my server (server-side script). Cc script my
client c thc thi ti trnh duyt, cc script my server c thc hin trn server.
Chng ny s gii thiu cho chng ta v ngn ng Javascript, v cch chn mt script
vo trong ti liu HTML.
6.2 GII THIU V JAVASCRIPT
HTML lc u c pht trin nh l mt nh dng ca ti liu c th chuyn d liu
trn Internet Tuy nhin, khng lu sau , trng tm ca HTML nng tnh hn lm v
khoa hc dn chuyn hng sang ngi dng thng nht v ngy nay ngi dng
xem Internet nh l mt ngun thng tin v gii tr. Cc trang Web ngy cng mang
tnh sng to v p mt hn nhm thu ht nhiu ngi dng hn. Nhng thc cht
kiu dng v ni dung bn trong vn khng thay i. V ngi dng hu nh khng
th iu khin trn trang Web mi khi n c hin th.
Javascript c pht trin nh l mt gii php cho vn nu trn. Javascript l mt
ngn ng kch bn c Sun Microsystems v Netscape pht trin. N c dng
to cc trang Web ng v tng tc trn Internet. i vi nhng ngi pht trin
HTML, Javascript rt hu ch trong vic xy dng cc h thng HTML c th tng
tc vi ngi dng.
6.2.1 Javascript l g?
Sun Microsystems vit ra mt ngn ng phc tp v mnh m m chng ta bit
l ngn ng Java. Mc d Java c tnh kh dng cao nhng n li ph hp nht i
vi cc nh lp trnh c kinh nghim v cho cc cng vic phc tp hn. Netscape
Communications nhn thy nhu cu cn mt ngn ng thit k web c kh nng
tng tc vI ngi s dng hay vI cc Java Applet, d s dng ngay c vi nhng
ngI lp trnh t kinh nghim.
LiveScript l mt ngn ng mi ch dng phc tho, tuy nhin n hp dn ngI s
dng v ha hn s p ng tt nhng yu cu trn. LiveScript c thit k theo tinh
thn ca nhiu ngn ng script n gin nhng n li c tnh kh dng cao c thit
k c bit xy dng cc trang Web (chng hn nh HTML v cc form tng tc).
gip bn chy ngn ng mi ny, Netscape hp tc vi Sun cho ra i ngn ng
Javascript. Trn thc t, Microsoft l ngi tin phong trin khai phin bn ca
Javascript (cn c tn l Jscript), nhng h khng s dng cc c t chnh thc ca
Javascript.
Mc tiu ca JavaScript l nhm cung cp cho cc nh pht trin Web mt s kh
nng v quyn iu khin chc nng cho trang Web. M Javascript c kh nng nhng
Lp trnh Web
96

trong ti liu HTML iu khin ni dung ca trang Web v kim tra s hp l ca
d liu m ngi dng nhp vo. Khi mt trang hin th trong trnh duyt, cc cu lnh
c trnh duyt thng dch v thc thi.
nh ngha
JavaScript l mt ngn ng kch bn da trn i tng nhm pht trin cc ng dng
Internet chy trn pha client v pha server.
Cc ng dng client c chy trong mt trnh duyt nh Netscape Navigator hoc
Internet Explorer, v cc ng dng server chy trn mt Web server nh Microsofts
Internet Information Server hoc Netscape Enterprise Server.
6.2.2 Hiu ng v quy tc Javascript
JavaScript l mt ngn ng lp trnh c nhng c trong cc trang HTML.
JavaScript nng cao tnh ng v kh nng tng tc cho web-site bng cch s dng
cc hiu ng ca n nh thc hin cc php tnh, kim tra form, vit cc tr chi, b
sung cc hiu ng c bit, tu bin cc chn la ho, to ra cc mt khu bo mt
v hn th na.
Chng ta c th s dng JavaScript :
Tng tc vi ngi dng. Chng ta c th vit m p lI cc s kin. Cc
s ny s c th pht sinh bi ngi dng - - nhp chut hay c pht sinh t h
thng - nh li kch thc ca trang v v.v.
Thay i ni dung ng. M JavaScript c th dng thay i ni dung v v tr
cc phn t mt cch ng trn mt trang nhm p li s tng tc vi ngi
dng.
Kim tra tnh hp l d liu. Chng ta c th vit m nhm kim tra tnh hp l
ca d liu do ngi dng nhp vo trc khi n c gi ln Web server x l.
Ging nh cc ngn ng khc, JavaScript cng tun th mt s quy tc ng php cn
bn. Vic nm vng cc quy tc ng php ny c th gip ta c c script v t vit
cc script khng b li.
Mt s trong cc lut ny bao gm:
Dng Caps. JavaScript phn bit ch hoa ch thng
Dng Pairs. Trong JavaScript, lun lun c cp k hiu m v ng. Li s xut
hin khi b st hoc t sai mt trong hai k hiu ny.
Dng Spaces (cc k t trng). Nh HTML, JavaScript thng b qua k t
trng. Trong JavaScript, ta c th thm vo cc k t trng hoc cc tab gip cho ta
d dng c hay sa cc file script.
Dng Ch thch (Comments). Cc ch thch gip ta ghi ch v chc nng ca
on script, thI gian v ngI to ra on script.
Mc d c client-side JavaScript v server-side JavaScript u da trn mt ngn ng
nn tng nh nhau, nhng mI loI cn c thm nhng tnh nng chuyn bit ph hp
vi mi trng m n chy. Ngha l, client-side JavaScript bao gm cc i tng
Lp trnh Web
97

c nh ngha sn ch c th s dng trn trnh duyt, Server-side JavaScript bao
gm cc i tng v cc hm c nh ngha sn ch c th s dng trong cc ng
dng pha server (server-side applications)
6.2.3 Cc cng c Javascript v IDE, mi trng thc thi.
Cc cng c sinh m JavaScript v IDE gip to ra m JavaScript rt hu hiu. . Cc
cng c ny cn gip ta nhanh chng pht trin website ca mnh.
Mt vi cng c JavaScript v IDE c cp di y:
Dialog Box. Cng c ny t ng to m sinh ra cc hp thoi tu bin trn cc
trnh duyt khc nhau (alert, confirm, prompt, v.v.) mang li kiu dng chuyn
nghip cho website.
Pop-up Menu builder. Ch cn a vo cc la chn, cng c ny s t ng to
ra cc pop-up menu trn cc trnh duyt khc nhau.
Remotes. T ng sinh m m ra mt ca s popup.
Nh chng ta bit, JavaScript c th c chy trn my khch (client) v my
ch (server). Bn pha my khch, trnh duyt s thc thi m lnh javascript trong
trang web khi m n. Bn pha my ch, m javascript s c thc thi ti my ch
v do my ch thc hin.
Client-side Java Script
Khi my client yu cu mt trang HTML, server s kim tra xem trang c cha
script hay khng. Nu n cha cc client-side script, server s chuyn ton b ti
liu bao gm m lnh JavaScript v ni dung HTML ca n cho trnh duyt. Khi
trnh duyt nhn c ti liu , n thc thi cc m lnh HTML v JavaScript m
khng cn bt k s tng tc no vi server.
JavaScript trn Web Server
Chng ta c th nhng cc lnh JavaScript chy trn server (server-side script) vo
trong ti liu HTML. Qu trnh to ra cc ng dng server-side l mt qu trnh
gm hai giai an.
1. Cc trang HTML c cha cc cu lnh JavaScript ca c client-side v server-
side u c to ra cng vi cc file JavaScript. Tt c cc file ny s c
bin dch thnh dng m thc thi c l bytecode.
2. Khi trnh duyt yu cu trang HTML, run-time engine s thc thi m lnh
server-side JavaScript ri tr trang HTML v cho trnh duyt.
Mt s cng dng ca script server-side bao gm:
Kt ni vo cc c s d liu
Chia s thng tin cho nhng ngi dng ca mt ng dng
Truy cp vo h thng file trn server
6.2.4 Nhng Javascript vo trang Web
Lp trnh Web
98

Chng ta c th chn cc lnh JavaScritp vo trong mt ti liu HTML theo nhng
cch sau y:
1. Nhng cc cu lnh trc tip vo trong ti liu bng cch s dng th <SCRIPT>
2. Lin kt file ngun JavaScript vi ti liu HTML
3. t cc biu thc JavaScript lm gi tr cho thuc tnh ca th HTML.
4. Dng nh trnh x l s kin trong cc th HTML.
Chng ta c xem chi tit mt s v d sau y:
Dng th SCRIPT
M JavaScript c th c nhng vo trong ti liu HTML bng th SCRIPT.
Chng ta c th nhng nhiu script vo trong cng mt ti liu, mi script nm
trong mt th SCRIPT. Khi trnh duyt gp phi mt th <SCRIPT> no , n s
c tng dng mt cho n khi gp th ng </SCRIPT>. Tip n n s kim tra
li trong cc cu lnh JavaScript. Nu gp phi li, n s cho hin th li trong
chui cc hp cnh bo (alert boxes) ln mn hnh. Nu khng c li, cc cu lnh
s c bin dch sao cho my tnh c th hiu c lnh .
C php nh sau:
<script language="JavaScript">

</script>
Thuc tnh language trong th script ch ra ngn ng m trnh duyt s dng
bin dch script. Chng ta cng c th ch r phin bn JavaScript no s c
trnh duyt s dng. V d:
<script language="JavaScript1.2">
<! - -statements //- -> l cc th ch thch. Nhng th ny c dng bo
cho trnh duyt b qua cc cu lnh cha trong n. < ! l th m ca th ch
thch, //- -> l th ng. Cc th ny khng bt buc phi c, nhng ta nn a
chng vo trong cc on script. Ch c Netscape 2.0 v cc phin bn sau
mi h tr JavaScript. Cc th ch thch m bo cc phin bn c hoc cc
trnh duyt khng h tr JavaScript s b qua cc cu lnh c nhng trong ti
liu HTML.
Cc cu lnh JavaScript phi c kt thc bng du chm phy ( ;).

Trong v d sau y, ngn ng script c t l JavaScript. Cc th ch thch
c dng cc phin bn c ca trnh duyt b qua script nm trong cc th ch
thch. Cc phin bn trnh duyt mi s thc thi cc cu lnh JavaScript.
V d 1:
<HTML>
Lp trnh Web
99

<HEAD>
<script language = "JavaScript">

</script>
</head>
<body>
<P>Enjoy the learning experience!!!
</BODY>
</HTML>
Kt qu:

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

Trong v d sau y, c hai file c to ra. File th nht - test.htm l mt file
ti liu HTML. File th hai - test.js l file vn bn c cha m JavaScript. File
ny c lin kt vi file ti liu HTML.
V d 2:
File HTML: (test.htm)
<HTML>
<HEAD>
<script src = "test.js"> </script>
</head>
<body>
<P>Enjoy the learning experience!!!
</body>
</html>
File ngun JavaScript: (test.js)
document.write("Hi! How are you?")
Kt qu:

Hnh 6.2: Dng JavaScript File ngoi
Ch : Lu cc file test.htm v test.js trong cng mt th mc.
y l mt v d n gin m t tnh nng lin kt cc file ring cha m lnh
JavaScript. Tuy nhin, vic thc hin chc nng lin kt cc file s rt c li khi ta
mun chia s cc hm cho nhiu ti liu HTML. Trong trng hp ny, chng ta
c th to ra mt file .js vi cc hm thng thng. File ny c lin kt vi cc
ti liu cn n. Nu ta mun iu chnh hoc thm vo mt vi hm, ta ch cn thc
hin thay i trong mt file m thi thay v phi trong nhiu ti liu HTML.
ui .js phi c server nh x n kiu MINE l application/x-javascript. Server
lc y s gi n trong phn u (header) ca giao thc HTTP.
nh x ui .js vi kiu MIME ta thm dng code sau vo file cha cc kiu
MIME trong th mc config ca server. Sau ta s khi ng li server.
Lp trnh Web
101

type=application/x-javascript exts=js
Nu server khng nh x ui .js n application/x-javascript MIME th trnh duyt
s khng ti ng file JavaScript c xc nh trong thuc tnh SRC.
t cc biu thc JavaScript l gi tr cho cc thuc tnh ca th HTML
Chng ta c th dng biu thc JavaScript lm gi tr cho thuc tnh ca th
HTML. Cc gi tr c thc hin mt cch ng mi khi trang c trnh
duyt ti vo. C php nh sau:
& {expression};
Trong expression l biu thc JavaScript s c thc hin.
Chng hn ta c th nh ngha mt bin cha rng. Chng ta c th dng bin
ny xc nh rng ca mt ng k ngang trn trang Web. Trong v d sau
y, gi tr rng c t l 10:
V d 3:
<HTML>
<HEAD>
<SCRIPT>
var linewidth = 10;
</SCRIPT>
<BODY>
<H2>Using entities</H2>
<HR width="&{linewidth};%" align = "left">
</BODY>
</HTML>
Khi m c thc thi, th phn t HR s dng gi tr cu bin linewidth nh minh
ha trong Hnh 6.3

Hnh 6.3: Dng cc biu thc JavaScript
Lp trnh Web
102

Mt biu thc JavaScript ch c th c s dng bn pha phi ca phn tn/gi tr
(name/value pair) trong th HTML. Chng hn khi chng ta dng HR
WIDTH=&{linewidth};% cu lnh s c dch l:
<HR WIDTH= 10%>
Nu chng ta s dng <H4>&{myTitle};</H4>, chui &myTitle; s c hin
th thay v gi tr ca bin myTitle.
Dng JavaScript trong trnh x l s kin
Chng ta c th to mt trnh x l s kin cho mt th HTML dng m
JavaScript. Mt s kin l mt hnh ng c h tr bi mt i tng. Mt trnh
x l s kin l on m s uc thc thi nhm p tr mt s kin. C php l:
<TAG event handler=JavaScript code>
TAG l mt th HTML. Event handler l tn ca trnh x l s kin, v JavaScript
code l mt lot cc cu lnh JavaScript c thc thi khi s kin c kch hot.
Trong v d sau y, s kin onClick 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 4:
<HTML>
<SCRIPT LANGUAGE = "JavaScript">
function greeting () {
alert ("Hi There !!");
}
</SCRIPT>
<BODY>
<FORM>
<INPUT TYPE="button" VALUE="Greeting"
onClick="greeting()">
</FORM>
</BODY>
</HTML>
Kt qu:
Lp trnh Web
103

Hnh 6.4: Dng JavaScript - Alert
6.2.5 V d n gin s dng hp thng bo v phng thc write
Trong v d minh ha di y, hng dn cch s dng cc phng thc confirm,
alert v write.
V d 5:
<HTML>
<HEAD>
<SCRIPT LANGUAGE = "Javascript">
confirm ("Are you Sure?");
alert("OK");
document.write(" Thank You !");
</SCRIPT>
</HEAD>
</HTML>
Kt qu:

Lp trnh Web
104

Hnh 6.5: Dng JavaScript Confirm, Alert v Write
6.3 CC BIN
Bin l mt tham chiu n mt v tr trong b nh. N dng cha cc gi tr c th
thay i khi script ang c thc thi. Chng ta phi t tn cho bin. Chng hn ta c
th to mt bin c tn First. Ti mi thi im thc hin, bin c th cha mt gi tr
mi. Khi chng ta mun xem gi tr ca bin hoc thay i gi tr ca n, ta ch cn
dng tn ca bin.
Cc bin thng c cc quy c t tn nh sau:
Tn bin phi bt u bng mt ch ci hoc k t gch di ("_")
Tn bin c th cha ch s
JavaScript phn bit r ch hoa v ch thng, v vy tn bin bao gm cc k t
t "A" n "Z" (ch hoa) v cc k t t "a" n "z" (ch thng)
6.3.1 Khai bo bin
S dng t kha var khai bo bin. Bin s tn ti ngay sau khi ta khai bo n.
Chng ta c th khi to gi tr cho bin ngay khi khai bo:
var A = 10;
Chng ta cng c th khai bo bin bng cch gn gi tr cho n m khng cn t kha
var.
A = 10
Chng ta c th khai bo nhiu bin trn cng mt dng bng cch tch tn cc bin
bng du phy.
y l mt s v d cc bin:
var new_amount
var answer = null
var old_cost = 12.50
var result = Unknown result
result = true
6.3.2 Phm vi ca bin
Lp trnh Web
105

Phm vi ca bin c xc nh ti v tr m n c khai bo trong script. Nu chng
ta khai bo mt bin ngay phn u ca script, th n c xem l mt bin global
(ton cc) v c th truy cp bt k ni u trong script. Nu ta khai bo bin trong
mt hm, n c xem l bin local (cc b) v n ch c s dng ch i vi hm
m thi. Nhng hm khc trong script khng th truy xut vo bin c. Hnh
6.6 minh ha phm vi ca cc bin trong script.

Hnh 6.6: Phm vi ca bin (variables)
Cc bin ton cc khng cn thit phi s dng t kha var khi khai bo. Tuy nhin,
cc bin cc b lun lun phi s dng t kha var khi khai bo.
Literals
Cc literals l nhng gi tr c nh m ta c th dng trong script. Gi tr ca
literal khng b thay i trong qu trnh thc hin script.
6.4 CC KIU D LIU
JavaScript c mt tp hp cc kiu d liu nh sau:
Kiu d liu M t
Numbers Cc s nguyn hoc s thc.
V d: 487 hoc 25.95
Logical hoc Boolean True hoc False
Strings Hello World
Null Keyword c bit ch gi tr null.
JavaScript lun phn bit cc ch hoa v ch thng; null khng ging nh Null
hoc NULL
D liu lun lun thuc mt kiu no . Bin c kiu d liu ph thuc vo d liu
m n lu tr, kiu d liu ca bin s b thay i khi gi tr ca n thay i.
Lp trnh Web
106

Khi chng ta khai bo mt bin th khng cn phi ch ra kiu d liu ca n. Cc kiu
d liu s t ng thay i nu cn thit trong qu trnh thc thi script. V d:
var x = 10
Sau , chng ta c th mt chui vo bin x trong script:
X = Are you having fun?
V d 6:
<HTML>
<HEAD>
var x = 10;
document.write(x);
var x = "Are we having fun?";
document.write(x);
</SCRIPT>
</HEAD>
</HTML>
Kt qu:

Hnh 6.7: Cc bin JavaScript:
Trong JavaScript, ta c th kt hp hai bin thuc cc kiu khc nhau. Chng hn, nu
chng ta kt hp mt chui vi mt gi tr s vi nhau th JavaScript s chuyn i cc
gi tr s sang cc chui.
V d:
A = This apple costs Rs. + 5
N s cho ra kt qu l mt chui c gi tr "This apple costs Rs. 5"
Tuy nhin, chng ta khng th chuyn mt chui thnh mt s. Nu chng ta cng mt
s thc 7.5 vi mt chui l "12", kt qu s l 127.5.
V d 7:
Lp trnh Web
107

<HTML>
<HEAD>
var A = "12" + 7.5;
document.write(A);
</SCRIPT>
</HEAD>
</HTML>
Kt qu:

Hnh 6.8: JavaScript: variables (1)
Trong JavaScript c hm parseInt() v parseFloat() c chc nng chuyn i cc chui
thnh cc s nguyn hoc cc s thc. Chng hn, hm parseInt("15") s chuyn i
chui 15 sang gi tr l mt s nguyn. Hm parseFloat("35.45") s chuyn mt
chui thnh mt s thc l 34.45. Nu hm parseFloat() nhn ra mt k t ch khng
phi l mt k hiu (+ hoc -), mt s (0 - 9), k hiu du thp phn hoc mt s m th
n s b qua k t v tt c cc k t theo sau n. Nu k t u tin khng th
chuyn i c, hm s tr v gi tr NaN (Not a Number).
Trong v d sau y, chui a15 c chuyn vo hm parseFloat (). Kt qu l NaN
v chui khng m u bng cc k t c th chuyn i c.
V d 8:
<HTML>
<HEAD>
var x = "a15"
a = parseFloat(x);
document.write(a);
</SCRIPT>
</HEAD>
</HTML>
Lp trnh Web
108

Kt qu:

Hnh 6.9: JavaScript: V d NaN
Literals c th c bt k cc kiu d liu no sau y:
a. S nguyn Chng c th c biu din trong h thp phn, h thp lc phn v
h nh phn.
b. S thc (Floating-point) -- Cc literal s thc (Floating-point literals) phi c t
nht mt ch s. S c th c du thp phn hoc e hoc E theo sau mt s
nguyn. S nguyn c th dng (+) hoc m (-). K hiu e hay E c hiu l
ly tha c s 10. V d: 10.24, 1.20e+22, 4E-8, .1815, v.v.
c. Chui -- l chui rng hoc cc k t c t trong du ngoc n (Unexpected
error) hoc du ngoc kp Hi! How are you. Chui phi bt u v kt thc
bng mt du ngoc ca cng mt kiu.
Sau y l mt s cc v d v literals chui:
Unexpected error
Hi! How are you
4531
Khi dng chui, ta c th chn cc k t c bit vo chui . Cc k t c bit s
thc hin mt cng vic c th. V d: chng ta c th thm mt du vch cho ngc
(\) trong chui . Di y l bn lit k cc k t c bit v ngha ca chng:
K t ngha
\b backspace
\f form feed
\n new line (xung dng v a con tr v u dng )
\r Carriage return (a con tr v u dng hin ti)
\t Tab
Lp trnh Web
109

Nhng v d di y minh ha cch s dng cc k t c bit ca JavaScript:
K t backspace
alert(" This is line one \b This is line two");
</SCRIPT>
K t form feed (sang trang)
alert(" This is line one \f This is line two");
</SCRIPT>
K t new line (xung dng)
alert(" This is line one \n This is line two");
</SCRIPT>
K t carriage return (Phm xung dng)
alert(" This is line one \r This is line two");
</SCRIPT>
K t tab
alert(" This is line one \t This is line two");
</SCRIPT>
Ngoi cc v d nu trn, chng ta c th chn cc k t khc trong mt chui bng
cch t trc n du backslash (\). y c xem l k t thot (escaping character)
Du backslash (\) c dng b qua ngha s dng ca k t ng sau n, v
nhiu k t c bit c thit k sn phc v mt chc nng c th no . V d,
nu ta mun cho hin th k t backslash, y l mt k t c bit nn ta phi loi b
ngha ca n.
d. Boolean - - N ch c th nhn hai gi tri: True hoc False. Kiu d liu ny rt
hu dng khi thc hin cc quyt nh hoc so snh d liu.
e. null - - Kiu null ch c duy nht mt gi tr.: null. Null ng l khng c d liu.
N thc hin chc nng l gi ch trong mt bin vi ng l khng c hu
dng g.
S khng hay mt xu rng v null l cc gi tr khc nhau.
6.5 CC TON T
Lp trnh Web
110

Cc ton t thc hin tnh ton trn mt hoc nhiu bin hoc gi tr (ton hng) v tr
v mt gi tr mi. V d: ton t '+' c th cng hai s cho ra mt s th ba. Cc
ton t c dng trong cc biu thc vi cc gi tr lin quan n nhau--nhm thc
hin cc php ton hoc so snh cc gi tr.
JavaScript s dng c cc ton t hai ngi v cc ton t mt ngi.
Ton t hai ngi cn hai ton hng. V d:
4 + 5
trong 4 v 5 l cc ton hng v + l ton t
Ton t mt ngi i hi phi c mt ton hng. V d:
a++ or b++
Cc ton t c phn loi tu thuc vo chc nng m chng thc hin:
6.5.1 Ton t s hc
Cc ton t s hc s dng cc gi tr s (literals hay cc bin) lm ton hng ca
chng v tr v mt gi tr s. Cc ton t s hc c bn l:
Ton t M t V d
+ Php cng A = 5 + 8
- Php tr A = 8 - 5
/ Php chia A = 20 / 5
% Php chia ly s d 10 % 3 = 1
++ Tng ln mt n v. Ton t ny nhn mt ton
hng. Gi tr ca ton hng s tng ln 1 n v. Gi
tr c tr v s tu thuc vo ton t ++ nm sau
hay nm trc ton hng.
++x s tr v gi tr
ca x sau khi tng.
x++ s tr v gi tr
ca x trc khi tng.
- - Gim mt n v. Ton t ny nhn mt ton hng.
Gi tr c tr v tu thuc vo ton t -- nm
trc hay nm ton hng.
--x s tr v gi tr
ca x sau khi gim.
x-- s tr v gi tr
ca x trc khi
gim. .
- Ly s i. N s tr v s i ca ton hng Nu a l 5, th a = -
5.
V d 9:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
var x = 10;
alert ("The value of x = " + x);
Lp trnh Web
111

alert ("The value of x + x = " + (x + x));
alert ("The value of x - x = " + (x - x));
alert ("The value of x * x = " + (x * x));
alert ("The value of x / 3 = " + (x / 3));
alert ("The value of x % 3 = " + (x % 3));
alert ("The value of --x = " + (--x));
alert ("The value of ++x = " + (++x));
alert ("The value of -x = " + (-x));
</SCRIPT>
</HEAD>
</HTML>
Di y l mt s hp thng bo:

Hnh 6.10: JavaScript: Cc ton t s hc
6.5.2 Ton t so snh
Ton t so snh thng so snh cc ton hng ca n v tr v mt gi tr logic da
trn php so snh ng hay khng. Cc ton hng c th l cc gi tr s hoc
chui. Khi so snh chui, n s da trn th t cc k t trong bng ch ci.
Ton t M t V d
= = Bng. Tr v gi tr true nu cc ton hng bng
nhau.
a = = b
!= Khng bng. Tr v gi tr true nu cc ton hng
khng bng nhau.
Var2 != 5
> Ln hn. Tr v gi tr true nu ton hng tri ln
hn ton hng phi.
Var1 > var2
>= Ln hn hoc bng. Tr v gi tr true nu ton
hng tri ln hn hoc bng ton hng phi.
Var1 >= 5
Var1 >= var2
Lp trnh Web
112

< Nh hn. Tr v gi tr true nu ton hng tri nh
hn ton hong phi.
Var2 < var1
<= Nh hn hoc bng. Tr v gi tr true nu ton
hng tri nh hn hoc bng ton hng phi.
Var2 <= 4
Var2 <= var1
6.5.3 Ton t logic
Ton t logic c dng kt hp nhiu ton t so snh thnh mt biu thc iu
kin. Mt ton t logic thng c hai ton hng, mi mt ton hng u c gi tr
true hoc false v tr v kt qu true hoc false. V d, c th chng ta mun kim tra
xem (total>100) AND (StateTax=true).
Ton t Gi tr M t
And ( &&)

expr1 && expr2 Tr v gi tr ca expr1 nu n l false. Nu
khng th n tr v gi tr ca expr2.
Or ( ||)

expr1 || expr2 Tr v gi tr ca expr1 nu n l true. Nu
khng th n s tr v gi tr ca expr2.
Not (!)

!expr Tr v gi tr false nu biu thc ng v tr v
gi tr true nu biu thc sai.
V d 10:
<HTML>
<HEAD>
var x = 10;
var y = 5;
alert ("The value of x is " + x + "The value of y is " + y);
alert("x AND y = " + (x && y));
alert("x OR y = " + (x || y));
alert("NOT x = " + (!x));
</SCRIPT>
</HEAD>
</HTML>
Kt qu:

Lp trnh Web
113

Hnh 6.11: JavaScript: Ton t logic
6.5.4 Ton t chui
Ton t chui nhn hai ton hng v to ra mt chui mi bng cch ghp hai chui
ban u li vi nhau.
V d:
x = yellow;
y = green;
z = x + y + white; which means z is yellowgreenwhite
w = y + 9, which means w is green9
6.5.4 Ton t Evaluation
Mt s ton t t s dng trong JavaScript v khng c xp vo loi c th no.
Nhng ton t ny c lit k di y:
Ton t iu kin
(condition) ? trueVal : falseVal gn mt gi tr xc nh cho mt bin nu iu kin
ng, v ngc li gn mt gi tr khc nu iu kin l false. V d:
status = (age >= 18) ? "adult" : "minor"
Nu tui ln hn hoc bng 18, bin status c gn gi tr adult. Nu khng, n
s c gi tr minor.
Trong v d sau y, phng thc getSeconds() c dng ly s giy t i
tng Date v gn n vi bin seconds. Nu gi tr seconds ln hn hoc bng
3 hoc nh hn hoc bng 50, th mu nn ca ti liu chuyn sang mu (red).
Ngc li mu nn l mu xanh lc (green).
V d 11:
<html>
<head>

</script>
</head>
<h1>
<hr>
Lp trnh Web
114

Welcome to Aptech Limited.
</hr> </h1>
</body>
</html>
Kt qu:

Hnh 6.12: JavaScript: Ton t Logic
typeof
Ton t typeof tr v chui cho bit tn kiu d liu ca ton hng
V d 12:
<html>
<head>

</script>
</head>
</html>
Ton t typeof s tr v: number
Kt qu:
Lp trnh Web
115

Hnh 6.13: JavaScript: Ton t typeof
6.5.5 Mc u tin ca cc ton t
Khi c nhiu ton t trong cng mt biu thc, u tin ca ton t xc nh th t
thc hin ca ton t . Mt biu thc c c t tri sang phi v c thc hin
t cc ton t c u tin cao n cc ton t c u tin thp hn. Nu chng ta
mun thay i trt t thc hin ca cc ton t, ta phi s dngc cc du ngoc. Bng
di y lit k u tin ca cc ton t t thp n cao:
Kiu ton t Cc ton t n
Gn = += -= *= /= %= <<= >>= >>>= &= ^= |=
iu kin ?:
logic -or ||
logic -and &&
bitwise-or |
bitwise-xor ^
bitwise-and &
bng/khng bng == !=
quan h < <= > >=
dch bit << >> >>>
cng/tr + -
nhn/chia * / %
ph nh/tng ! ~ - ++ -- typeof void
6.6 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.
Lp trnh Web
116

Tuy nhin, JavaScript khng c kiu d liu mng. Nhng n c mt i tng mng
c xy dng sn. dng mng trong chng trnh, ta phi s dng i tng
mng v cc phng thc ca n.
To mng
C php sau y dng to mt mng:
arrayObjectName = new Array([element0, element1, ..., elementN])
Trong arrayObjectName l tn ca i tng mng, ,v elementN l danh sch
cc gi tr ca cc phn t mng. Mng c khi to vi cc gi tr xc nh nh l
cc phn t ca n. Thuc tnh length lu s lng cc phn t c trong mng.
Thm cc phn t
Chng ta c th a cc phn t vo mt mng ngay khi chng ta to n. Chng ta
cng c th a d liu vo mt mng bng cch gn gi tr cho cc phn t ca n. V
d,
emp[0] = "Ryan Dias"
emp[1] = "Graham Browne"
emp[2] = "David Greene"
Ryan Dias Graham Browne David Greene
on m trn to ra mt mt mng v gn gi tr cho tng phn t ca n.
V d 15:
<html>
<head>

</script>
</head>
</html>
Kt qu:
Lp trnh Web
117

Hnh 6.16: JavaScript: Mng
Truy cp cc phn t mng
C hai cch truy cp cc phn t ca mng. Chng ta c th:
Ch ra tn ca phn t. V d, emp [Ryan Dias]
Ch ra ch s ca phn t. V d, emp [0].
S dng cc phng thc ca mng
thao tc trn mng, chng ta phi dng cc phng thc ca i tng mng.

Phng thc M t
Join
Kt hp cc phn t ca mng thnh mt chui
Pop
Tr v phn t cui cng ca mng, sau khi xo n t mng.
Push
Thm mt hoc nhiu phn t vo cui mng. Tr li phn
t cui cng thm vo.
Reverse
o ngc cc phn t ca mng: phn t u tin ca
mng tr thnh phn t cui cng v phn t cui cng tr
thnh phn t u tin.
Shift
Xo phn t u tin ca mng v tr v phn t .
Sort
Sp xp cc phn t ca mng.
Phng thc sort
Phng thc emp.sort () s sp xp mng di y
V d 16:
Lp trnh Web
118

<html>
<head>

</script>
</head>
</html>
Kt qu:

Hnh 6.17: JavaScript: Sp xp cc mng (Sorting Arrays)
Mng nhiu chiu
Mt mng c th c nhiu hn mt chiu. V d, ta c th to ra mt mng hai chiu
lu tr m nhn vin v tn ca nhn vin .
Lp trnh Web
119

Hnh 6.18: Mng hai chiu
on m di y to ra mt mng hai chiu v cho hin th gi tr ca mt trong
nhng phn t trong mng.
V d 17:
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
</HTML>
Kt qu:
Lp trnh Web
120

Hnh 6.19: Mng hai chiu (Two dimensional Array)
6.7 CC CU LNH IU KIN
Cu lnh iu kin c dng kim tra mt iu kin. Kt qu ca iu kin xc
nh cu lnh hoc khi lnh s c thc thi. Trong JavaScript cc cu lnh sau y
c dng kim tra mt iu kin:
Cu lnh if . . . else
Cu lnh ny dng kim tra iu kin, n thc hin vic tnh ton trn mt biu
thc. Nu iu kin l ng (true) th khi lnh c thc thi.
if (condition)
{ statements; }
Ta cng c th ch ra khi lnh cn thc hin khi iu kin l sai (false) bng vic
dng mnh else
if (condition)
{ statements; }
else
{ statements2; }
Nu iu kin l sai khi lnh sau else c thc thi.
Lnh switch
Khi ta c nhiu tu chn If...else th tt hn nn s dng lnh switch. Lnh ny cn
c xem l lnh case, lnh switch thc thi mt trong cc khi lnh tu thuc vo gi
tr ca biu thc. Nu khng tm thy mt gi tr no trong danh sch cc case ca n,
khi lnh trong phn default s c thc hin. Lnh break dng thot ra khi cu
lnh switch.
switch (expression){
case label:
statement;
break;
Lp trnh Web
121

case label:
statement;
break;
...
default: statement;
}
V d,

switch (dayofweek){
case 1:
statements;
break;
case 2:
statements;
break;
case 3:
statements;
break;
case 4:
statements;
break;
case 5:
statements;
break;
default: statements;
}
6.8 CC LNH VNG LP
Cc cu trc iu khin vic thc hin lp i lp li trong mt chng trnh c gi
l vng lp. C nhiu loi vng lp:
Vng lp thc hin lp i lp li cc lnh cho n khi iu kin l False
Vng lp thc hin lp i lp li cc lnh cho n khi iu kin l True
Vng lp thc hin lp i lp li cc lnh theo mt s ln nht inh
Vng lp for
Vng lp for s thc hin lp i lp li khi lnh cho n khi iu kin l false. S ln
thc hin ca vng lp thng c iu khin thng qua mt bin m.
Lnh for bao gm ba phn, cch nhau bi du chm phy. C ba phn u khng
bt buc phi c, v chng iu khin vic thc hin ca vng lp for.
for (lnh khi to; iu kin; lnh tng)
Lp trnh Web
122

{ statements; }
Lnh khi to -- c thc hin duy nht mt ln v thng dng khi to bin
m
Lnh iu kin -- iu kin ca vng lp.
Lnh tng -- thay i bin m trong vng lp.
Trong v d trn, khi ngi dng nhp chut mt nt, s kin onclick s c kch
hoc. Hm doloop() c gi bi s kin onclick. Hm doloop t align=center v
gn gi tr cho thuc tnh width ca th <HR>. Phng thc open dng m mt ti
liu. Vng lp for s dng bin m size v khi to cho n gi tr 5. Mi ln vng lp
c thc hin, gi tr ca bin size c tng ln 5. Vng lp c thc hin n khi
size c gi tr ln hn 1000. Trong thn vng lp, biu thc String1 c thc hin v
mt ng k ngang vi chiu rng xc nh c in ra mn hnh. Biu th String1 c
dng nh sau: <HR align=center width=size%>
V d 18:
<HTML>
<HEAD>
function doloop() {
var String1 = '<hr align="center" width=';
document.open();
for (var size = 5; size <= 100; size+=5)
document.writeln(String1 + size + '%">');
document.close();
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT type="button"
value="Test the loop"
onclick = "doloop()" >
</FORM>
</BODY>
</HTML>
Output:
Lp trnh Web
123

Hnh 6.20: Vng lp for
Do . . . while
Vng lp Do...while c dng thc thi mt khi lnh cho n khi iu kin l
false. C php l:
do
{ statements;}
while (condition)
Lnh while
Lnh while l mt cu trc lp khc trong JavaScript. N c dng thc hin mt
khi cc cu lnh chng no iu kin l true. Nu c nhiu cu lnh thc hin trong
thn ca vng lp chng trnh phi s dng cp du { v } cha cc cu lnh trong
.
Khc bit chnh gia vng lp while v dowhile l cc lnh trong thn vng lp
while c th khng c thc hin mt ln no v c th ngay t ban u iu kin
l false. Tuy nhin vng lp dowhile bao gi cng c thc hin t nht mt ln.
C php l:
while (condition)
{ statements; }
Cu lnh break & continue
Vng lp while loop v for s kt thc thc hin khi iu kin l false.Tuy nhin ta
cng c th kt thc vng lp nu mun. Lnh break dng kt thc vic thc thi ca
mt cu lnh. Khi c s dng trong mt vng lp, lnh break lm dng ngay vng
lp v khng thc hin thm na.
Mt lnh c bit khc cng c th c s dng trong vng lp l lnh continue.
Continue dng ngay ln lp hin ti v quay li kim tra iu kin thc hin ln lp
tip theo.
Lp trnh Web
124

for...in
Cu lnh for . . in c dng duyt cc thuc tnh ca mt i tng hay cc phn
t ca mt mng. V d, chng ta c th mun thc hin mt khi cc cu lnh cho
mi phn t ca mng.
Ch php l:
for (variable in object)
{ statements; }
Trong v d di y, mt mng color c to. Cc phn t ca mng l red,
blue v green. Vng lp for .. in c dng duyt qua mng mu v hin th
cc phn t trong n.
V d 19:
<HTML>
<HEAD>
color = new Array("red", "blue", "green");
var record = "color";
for (var prop in color)
{record += prop + " = " + color[prop] + "<BR>"}
record += "<br>"
document.write(record)
</SCRIPT>
</HEAD>
</HTML>
Kt qu:

Hnh 6.21: For..in loop
with
Cu lnh with c dng thc thi mt tp cc lnh cng tham chiu n mt i
tng xc nh. l i tong c ch ra trong cu lnh with
Ch php:
Lp trnh Web
125

with (object)
{ statements; }
i tng Math l mt i tng c xy dng sn trong JavaScript. N gm cc
thuc tnh v phng thc th hin cc hm ton hc chun.
6.9 HM (FUNCTION)
JavaScript c nhiu hm nh ngha trc m chng ta s dng trong script. V d, nu
chng ta mun kim tra ngi dng c phi nhp vo mt s hay khng, chng ta c
th s dng hm isNaN (Not a Number) thc hin iu ny . Trong phn ny chng
ta s xem dt mt vi hm JavaScript nh ngha sn.
Hm eval
Hm eval c dng nh gi mt chui v khng cn tham chiu n bt k mt
i tng c th no.
eval(string)
Chui c th l mt biu thc JavaScript, cu lnh, hoc mt nhm cc cu lnh.
Trong biu thc c th bao gm cc bin v thuc tnh ca mt i tng.
Nu chui c xc nh l mt biu thc, hm eval s tnh ton biu thc. Nu n l
mt hoc mt tp cc lnh, n s thc thi cc cu lnh. V d, chng ta to biu thc
theo mu nh chui sau - - 3 * 5. Chng ta c th dng eval tnh ton ra kt qu.
Hm isNaN
Hm isNaN c dng kim tra xem i s truyn vo c phi l mt s hay
khng.
isNaN(testValue)
To hm do ngi dng nh ngha
Mt hm JavaScript kh ging vi th tc ("procedure") hay chng trnh con
("subroutine") trong ngn ng lp trnh. Mt hm l mt tp cc cu lnh,,thc hin
cc tc v xc nh. Chng ta c th truyn cc gi tr (tham s) cho hm.Hm cng c
th tr v mt gi tr.
Cc thnh phn ca mt hm l:
T kho function.
Tn hm.
Danh sch cc i s ca hm cch nhau bi du phy (,) t trong cp ngoc
n( ).
Cc cu lnh ca hm t trong cp du mc {}.
function funcName(argument1,argument2,etc)
{ statements; }
Mt hm c th khng c i s, nhng chng ta vn phi c cp du ngoc n ( ).
funcName()
Lp trnh Web
126

Cc hm khng th lng nhau.
Dnh ngha hm
Trc khi chng ta gi hm, chng ta phi nh ngha n trong chng trnh. nh
ngha mt hm l mt qu trnh khai bo tn ca hm v cc lnh s c thc thi khi
gi hm.
Gi mt hm
thc thi mt hm, ta phi gi n. gi mt hm ta ch ra tn hm v danh sch
cc tham s nu c:
V d 20:
<html>
<head>

</script>
</head> </html>
Lp trnh Web
127

Kt qu:

Hnh 6.22: nh ngha v gi mt hm
Cu lnh return
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;
Or
return ( value ) ;
V d 21:
<html>
<head>
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>
Lp trnh Web
128

testreturn(4);
</SCRIPT>
</BODY>
</html>
Kt qu:

Hnh 6.23: 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.
Lp trnh Web
129

C CH H N NG G 7 7: : C CC C I I T T N NG G C C B BN N T TR RO ON NG G
J JA AV VA AS SC CR RI IP PT T
Lm vic trn cc i tng c bn
S dng cc thuc tnh v phng thc ca i tng
7.1 GII THIU
Khi to ra mt trang web chng ta c th s dng cc i tng do trnh duyt, ngn
ng kch bn v cc thnh phn HTML cung cp. Trong chng ny, chng ta cng
tho lun v nhng i tng khc nhau c th c chn vo trong mt ti liu
HTML.
7.2 CC I TNG JAVASCRIPT
Mt i tng l mt gi d liu ton din. Cc thuc tnh (bin) dng nh ngha
i tng v cc phng thc (hm) tc ng ti d liu u nm trong i tng. V
d nh, mt chic xe hi l mt i tng. Cc thuc tnh ca chic xe hi l cu to,
kiu dng v mu sc ca n. Hu ht cc chic xe hi u c mt vi phng thc
chung nh go(), brake(), reverse().
carobj.make = Fiat
carobj.model = Uno
carobj.color = red
truy cp cc thuc tnh ca i tng, chng ta phi ch ra tn i tng v thuc
tnh ca n:
objectName.propertyName
V d:
Document.bgcolor
Trong : bgcolor (background color) l thuc tnh ca i tng document.
truy cp cc phng thc ca mt i tng, chng ta phi ch ra tn i tng v
phng thc yu cu:
objectName.method()
Khi to ra mt trang web chng ta c th chn:
Cc i tng ca trnh duyt
Cc i tng c sn (thay i ph thuc vo ngn ng kch bn c s dng).
Cc phn t HTML
D nhin, chng ta c th to ra cc i tng s dng theo yu cu ca mnh.
Lp trnh Web
130

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, ca s, khung, v tr, nm trn cng ca cy phn cp i tng. Sau l cc
i tng JavaScript. y l cc i tng c cung cp bi JavaScript chng hn
nh i tng Date, Array, Cc phn t HTML nm sau cng v chnh l cc th
HTML to nn vn bn hin hnh.
S hiu bit v cy phn cp ny rt quan trng bi v cc i tng c truy cp
theo s phn cp. V d nh, truy cp mt i tng form bn cn phi ch ra tn
form v i tng cha trong nh vn bn, cu lnh s l:
document.form1
truy cp cc thuc tnh ca mt phn t vn bn, Text1 trong mt i tng form:
document.form.text1.value = Having fun
7.2.1 Cu lnh This
Cu lnh this khng ch l mt thuc tnh ni ti. Gi tr ca n ch ra i tng hin
hnh v c th c cc thuc tnh chun chng hn nh tn, di, v gi tr c p
dng ph hp. Cu lnh this ch c dng trong phm vi ca mt hm hay cc tham
chiu khi gi hm.
this[.property]
Nu n khng c i s th n s thng qua i tng hin hnh. Tuy nhin, chng ta
nn gn vo mt thuc tnh hp l a ra kt qu.
V d 1:
<HTML>
<HEAD>
function dispname(name) {
alert("Welcome to the world of JavaScript, " + name);
}
</script>
</HEAD>
Lp trnh Web
131

<FORM>
<B>Enter your name:</B>
<INPUT TYPE = "text" NAME = "text1" SIZE = 20
onChange="dispname(this.form.text1.value)">
</FORM>
</HTML>

V d 2:
<html>
<head>
function show(value) {
alert("You clicked " + value +" button");
}
</script>
</head>
<FORM>
<B>Enter your name:</B>
<INPUT TYPE = "button" NAME = "button1" value = "Click me" SIZE
= 20 onClick="show(this.form.button1.value)">
</FORM>
</html>
Lp trnh Web
132

7.2.2 i tng String
i tng string c dng thao tc v lm vic vi chui vn bn. Chng ta c th
tch n ra thnh cc chui con v bin i chui thnh cc chui hoa hoc thng
trong mt chng trnh. C php tng qut l:
stringName.propertyName
Hoc
stringName.methodName
C 3 phng thc khc nhau to ra chui.
Dng lnh var v gn cho n mt gi tr. V d nh
var newstr = This is my script
Dng mt ton t (=) c gn vi mt tn bin. V d nh:
newstr = This is my script
Dng hm khi to String (string). V d nh:
var newstr = String (This is my script)
Cc thuc tnh:
Tn M t
length Tr li di ca chui
Phng thc:
Tn M t
Big Tng kch thc ca chui vn bn
Blink To hiu ng nhp nhy cho chui (Internet Explorer khng h
Lp trnh Web
133

tr phng thc ny)
Bold In m chui
Fontcolor Xc nh mu ca font ch
Italics Hin th chui dng in nghing
Small Gim kch thc ca chui vn bn
Strike Hin th chui c ng gch ngang nm gia (strikethrough)
Sub Hin th vn bn di dng ch s di
Sup Hin th vn bn di dng ch s trn
ToLowerCase Chuyn chui thnh k t thng
ToUpperCase Chuyn chui thnh k t hoa
V d di y hin th mt vi phng thc v cng dng ca chng:
V d 7:
<HTML>
<HEAD>
<script language = "Javascript">
var bstr = "big";
var sstr = "small";
var blstr = "bold";
var blkstr = "blink"
var ucase = "Uppercase";
var lcase = "Lowercase";
document.write ("<BR>This is "+ bstr.big() + " text");
document.write ("<BR>This is "+ sstr.small() +" text");
document.write ("<BR>This is "+ blstr.bold() + " text");
document.write ("<BR>This is "+ blkstr.blink() + " text");
document.write ("<BR>This is "+ ucase.toUpperCase() + " text");
document.write ("<BR>This is "+ lcase.toLowerCase() + " text");
</script>
</HEAD>
</HTML>
Lp trnh Web
134

7.2.3 i tng Math
i tng Math c cc thuc tnh v phng thc biu th cc php tnh ton hc nng
cao.
Thuc tnh:
Thuc tnh M t
PI Gi tr ca , bng khong 3.1415.
LN10 Gi tr ca lg (logarit c s 10), bng khong 2,302
E Gi tr ca hng s Euler, bng khong 2.718. Hng s Euler c dng nh
s c s cho cc ln
Phng thc:
Phng thc Method M t Description
Abs (number) Tr v gi tr tuyt i ca mt s
Sin (number) Tr v gi tr sin ca ca mt s (tnh bng radian)
Cos (number) Tr v gi tr cosin ca ca mt s (tnh bng radian)
Tan (number) Tr v gi tr tang ca ca mt s (tnh bng radian)
Min (number1, number2) Tr v gi tr nh nht ca hai s number1 v number2
Max (number1, number2) Tr v gi tr ln nht ca hai s number1 v number2
Round (number) Lm trn i s ti s nguyn gn nht
Lp trnh Web
135

Sqrt (number) Tr v cn bc hai ca mt s
V d 8:
<HTML>
function doCalc(x)
{
{
var a;
a = Math.PI * x * x;
alert ("The area of a circle with a radius of " + x + " "
+ "is" + " " + a);
}
</SCRIPT>
<BODY bgColor = white>
<FORM>
Enter the radius of the circle :
<INPUT TYPE = TEXT size = 5 name = "rad">
<BR><BR>
<INPUT type = button value = "Display Area"
onclick="doCalc(rad.value)">
</FORM>
</BODY>
</HTML>

V d 9:
Lp trnh Web
136

<html>
<head>
function show(value)
{
with(Math)
document.write("Absulute value of a number "+ value+ "
is :"+abs(eval(value)));
}
</script>
</head>
<FORM>
<B>Enter Value:</B>
<INPUT TYPE = "text" NAME = "text1" SIZE = 20>
<P>
<INPUT TYPE = "button" NAME = "button1" value="Absolute Value"
onClick="show(this.form.text1.value)"
</FORM>
</html>

Hnh 7.10 a: Kt qu ca v d 9
Lp trnh Web
137

Hnh 7.10 b: Kt qu ca v d 9 (sau khi nhn nt lnh)
7.2.4 i tng Date
Date l mt i tng c sn cha thng tin v ngy v gi. i tng Date khng c
thuc tnh no. Tuy nhin, n c nhiu phng thc dng thit lp, ly v x l cc
thng tin v thi gian.
i tng Date lu tr thi gian theo s mili giy tnh t 1/1/1970 00:00:00.
To mt i tng Date
DateObject = new Date (parameters)
Trong :
DateObject l mt bin lu tr mt i tng thi gian mi.
Parameters c th l:
Khng c g Nu khng c tham s, n s tr v thi gian hin ti ca h thng.
V d: today = new Date().
String (chui) biu din ngy gi theo dng: MM DD, YYYY, hh:mm:ss. V
d:
tdate = new Date ( July 29, 1998,10:30:00)
Phng thc:
Bng sau m t cc nhm phng thc v thi gian:
Nhm phng thc M t
Set Gm nhng phng thc dng thit lp cc gi tr thi
gian.
Get Gm nhng phng thc c dng ly cc gi tr thi
gian.
To Gm nhng phng thc c dng tr v cc chui gi tr
t cc i tng Date.
Lp trnh Web
138

parse v UTC Gm nhng phng thc c dng phn tch cc chui.
Bng sau dng cc s nguyn biu din cc gi tr:
Cc gi tr S nguyn
Giy v pht 0 n 59
Gi 0 n 23
Ngy (trong tun) 0 n 6
Ngy (trong thng) 1 n 31
Thng 0 n 11 (thng mt n thng mi hai)
Nm T 1900 tr i
Chng ta hy tm hiu cc nhm phng thc get, set, to v parse:
Nhm phng thc get:
Phng thc M t
getDate Tr v ngy trong thng t i tng Date (1-31)
getDay Tr v ngy trong tun t i tng Date (0-6)
getHours Tr v gi t i tng Date (0 23)
getMinutes Tr v pht t i tng Date ( 0-59)
getSeconds Tr v giy t i tng Date (0 -59)
getMonth Tr v thng t i tng Date ( 0 11)
getYear Tr v nm t i tng Date ( nm ()1900)
getTime Tr v s mili giy ca thi gian hin ti ( tnh t 1/1/1970)
getTimeZoneOffset Tr v chnh lch bng pht gia gi a phng v gi chun
(GMT)
Nhm phng thc set:
Phng thc M t
setDate Thit lp ngy trong thng cho i tng Date (0 31)
setHours Thit lp gi cho i tng Date ( 0-23)
setMinutes Thit lp pht cho i tng Date ( 0-59)
Lp trnh Web
139

setSeconds Thit lp giy cho i tng Date ( 0-59)
setTime Thit lp gi tr thi gian (tnh bng mili giy) cho i tng Date
setMonth Thit lp thng cho i tng Date (1-12)
setYear Thit lp nm cho i tng Date, nm phi ln hn 1900 (nm ()
1900)
Nhm phng thc to:
Phng thc M t
toGMTString Chuyn mt i tng Date t mt chui thi gian sang dng GMT
toLocaleString Chuyn mt i tng Date t mt chui sang dng thi gian a
phng
Nhm phng thc Parse & UTC:
Phng thc M t
Date.parse(date string ) S mili giy trong mt date string (chui thi gian) tnh t 1/1/1970
Date.UTC(year, month,
day, hours, min., secs. )
S mili giy ca mt i tng thi gian tnh t 1/1/1970

V d 10:
<HTML>
<HEAD>
<SCRIPT language="JavaScript">

</SCRIPT>
Lp trnh Web
140

</HEAD>
<BODY onLoad="disptime()">
<P><font color = hotpink size = 4>Time and Tide wait
for none.
<BR><BR>
<P> The time is displayed on the page.
<BR><BR><BR>
<FORM NAME="MyPage">
<INPUT TYPE="text" NAME="digits" SIZE=12 VALUE="">
</FORM>
</BODY>
</HTML>

V d 11:
<HTML>
<HEAD>
<TITLE> TODAY'S DATE </TITLE>
</HEAD>
<BODY>
mydate=new Date()
document.write("Today's Date is: "+ mydate.getDate());
</script>
</BODY>
</HTML>
Lp trnh Web
141

7.3 I TNG EVENT KHI NIM
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 click chut vo mt
button - hoc do h thng to ra thay i kch thc ca trang.
Hu ht cc trnh 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 b tr (Control, Alt, Meta, hoc Shift) c nhn vo thi im xy ra
s kin.
i tng Event khng th c s dng trc tip vi i tng window. N c s
dng 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.
7.4 CC S KIN JAVASCRIPT
Lp trnh Web
142

Tp hp cc s kin tng ng vi cc phn t khc nhau trn trang l mt phn ca
m hnh i tng ti liu (Document Object Model), ch khng phi ca JavaScript.
Ngha l, cc s kin c mt phn t no h tr c th khc nhau trn cc trnh
duyt.
Sau y l mt s s kin 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 1:
<HTML>
<HEAD>
function compute(form)
{
if (confirm("Are you sure?"))
form.kt qu.value = eval(form.expr.value)
else
alert("Please come back again.")
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
Enter an expression:
<INPUT TYPE="text" NAME="expr" SIZE=15 ><BR><BR>
<INPUT TYPE="button" VALUE="Calculate" ONCLICK="compute(this.form)">
<BR><BR><BR>
Kt qu:
<INPUT TYPE="text" NAME="kt qu" SIZE=15 >
<BR>
</FORM>
</BODY>
</HTML>
Kt qu on m trong v d 1 c minh ho Hnh 7.1.
Lp trnh Web
143

onChange
S kin onChange xy ra bt c khi no mt phn t form thay i. iu ny c
th xy ra khi ni dung ca mt trng vn bn thay i, hoc khi mt chn la
trong danh sch chn la thay i. Tuy nhin, s kin onChange khng c to ra
khi mt radio button hoc mt checkbox c nhp. Thay vo , s kin onClick
s c to ra.
S kin onChange c gi i khi mt phn t hon tt vic thay i. V vy, khi
mt textbox ang c hiu chnh, s kin onChange ch c pht sinh sau khi
vic hiu chnh hon tt, v khi ngi dng thot khi textbox .
V d 2:

<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY bgColor = white>
<FORM>
Please enter a number:
<INPUT type = text size = 5 onChange="checkNum(this.value)">
</FORM>
</BODY>
</HTML>
Hnh 7.2(1) v 17.2(2) minh ho kt qu ca on m trong v d 2.

Hnh 7.2: Kt qu ca v d 2(1)
Lp trnh Web
145

Nu chng ta nhp vo mt gi tr s:

Hnh 7.2: Kt qu ca v d 2(2)
onFocus
S kin onFocus c gi i bt c khi no mt phn t form tr thnh phn t
hin thi. Ch khi mt phn t nhn c focus n mi nhn c input t ngi
dng. iu ny c th xy ra khi ngi dng nhp chut ln phn t, hoc s dng
phm Tab hoc Shift+Tab (di chuyn tI cc phn t trn form).
onBlur
Blur ngc vi focus. Khi ngi dng ri khi mt phn t trn form, s kin
onBlur c kch hot. i vi mt s phn t, nu ni dung ca n cng b thay
i, th s kin onChange cng c kch hot.
V d 3:
<HTML>
<BODY BGCOLOR="lavender">
<FORM>
<INPUT type = text name = text1
onblur="(document.bgColor='aqua')"
onfocus="(document.bgColor='dimgray')">
</FORM>
</BODY>
Lp trnh Web
146

</HTML>
Khi textbox nhn c focus, mu nn s chuyn sang DIMGRAY, khi mt focus
(blur), mu nn s chuyn sang AQUA.

Hnh 7.3: Kt qu ca v d 3 Blur (hnh tri) and focus (hnh phi)
onMouseOver
S kin onMouseOver c to ra bt c khi no con tr chut di chuyn ln trn
mt phn t.
onMouseOut
S kin onMouseOut c to ra bt c khi no con tr chut di chuyn ra khi
phn t .
V d 4:
<html>
<head>
<script language = "javascript">
var num =0
function showLink(num)
{
if (num==1)
{
document.forms[0].elements[0].value= "You have selected
Aptech";
}
if (num==2)
{
document.forms[0].elements[0].value = "You have selected
Asset";
}
Lp trnh Web
147

if (num==3)
{
document.forms[0].elements[0].value = "You have selected
Arena";
}
}
</script>
</head>
<body>
<form>
<input type=text size=60 >
</form>
<a href="#" onMouseOver="showLink(1)"document.bgcolor=
green">Aptech</a><br>
<a href="#" onMouseOver="showLink(2)">Asset</a><br>
<a href="#" onMouseOver="showLink(3)">Arena</a><br>
</body>
</html>
Khi di chuyn chut qua Aptech, kt qu c hin th nh sau.

OnLoad
S kin onLoad (p dng cho i tng body) c pht sinh khi ti xong ti
liu. N cng c pht sinh khi mt nh ti xong.
V d 5:

<HTML>
Lp trnh Web
148

<HEAD>
<TITLE>Hello </TITLE>
</HEAD>
<BODY onLoad="alert('Hello')">
</BODY>
</HTML>
Kt qu:

onSubmit
S kin onSubmit c to ra bt c khi no ngi dng truyn d liu t form i
(thng s dng nt Submit). S kin xy ra trc khi form tht s c gi i.
Tht ra, trnh x l s kin tng ng vi s kin ny c th ngn chn form khng
c gi i bng cch tr v gi tr false. Cch ny dng kim tra s hp l ca
d liu nhp vo.
onMouseDown
S kin ny c kch hot khi hnh ng nhp chut xy ra. Ngha l, khi ngi
dng nhp chut. y l trnh x l s kin cho cc i tng button, document,
v link.
onMouseUp
S kin ny c kch hot khi hnh ng nh chut xy ra. Ngha l, khi ngi
dng th chut. y l trnh x l s kin cho i tng button, document, v link.
V d 6:
<HTML>
<BODY BGCOLOR="lavender">
<FORM>
<INPUT type = button name = text1 value=Change Color
Lp trnh Web
149

onmousedown="(document.bgColor='aqua')"
onmouseup="(document.bgColor='limegreen')"
</FORM>
</BODY>
</HTML>
Hnh di y hin th kt qu ca v d 6

onResize
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.
V d 7
<html>
<head>
window.onresize= notify;
function notify()
{
alert("Window resized!");
}
</script>
</head>
<body>
Please resize the window.
</body>
</html>
Khi thay i kch thc ca s, kt qu xut hin nh sau:
Lp trnh Web
150

7.5 TRNH X L S KIN
Khi mt s kin c khi to, chng ta c th to 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
<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.
Trnh x l s kin cho cc th HTML
khi to trnh x l s kin cho th HTML, chng ta phi ch nh th v thuc
tnh trnh x l s kin. Sau chng ta gn m JavaScript. on m phi c
t trong cp du nhy kp.
<TAG eventHandler="JavaScript Code">
Cc i s chui phi c t trong cp du nhy n.
<INPUT TYPE="button" NAME="Button1" VALUE="Open Sesame!"
onClick="window.open('mydoc.html', 'newWin')">
Thay v s dng nhiu cu lnh JavaScript, hm s gip cho vic thit k chng
trnh tt hn. Chng ta s gi hm khi cn thit. Hn na cc hm c th c
dng bi cc phn t khc.
Cu lnh ny gn hm greeting() cho trnh x l s kin onLoad ca window.
Thuc tnh trnh x l s kin c tham chiu n hm greeting ch khng phi
li gi n hm greeting()
V d 8
<HTML>
<HEAD>
<TITLE>My Home Page</TITLE>
Lp trnh Web
151

function greeting() {
alert("Welcome to my world");
}
</SCRIPT>
</HEAD>
<BODY onLoad="greeting()">
</BODY>
</HTML>
Kt qu:

Trnh x l s kin nh l nhng thuc tnh
Chng ta cng c th gn mt hm cho mt trnh x l s kin ca mt i tng. C
php nh sau:
object.eventhandler = function;
V d,
window.onload = greeting;
Chng ta xem li v d trn v s dng trnh x l s kin nh nhng thuc tnh:
V d 9
<HTML>
<HEAD>
<TITLE>My Home Page</TITLE>

</SCRIPT>
</HEAD>
</HTML>
Kt qu s tng t nh Hnh 7.8. im mnh ca k thut ny l tnh linh hot.
Chng ta c th thay I nhanh chng cc trnh x l s kin khi c yu cu.
Lp trnh Web
153

T T I I L LI I U U T TH HA AM M KH KHO O
1. Gio trnh Lp trnh Web, Trung tm Aptech
2. T hc HTML, Trung tm in ton Trng i hc Bch Khoa Tp HCM.

Bai Giang Full - ct2116 - Ltweb 3

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Bai Giang Full - ct2116 - Ltweb 3

Uploaded by

Copyright:

Available Formats

M M C C L LC C

You might also like