201051210816914

TRNG I HC LT KHOA CNG NGH THNG TIN
Thc s Hong Mnh Hng
BI GING TM TT
LP TRNH WEB
Dnh cho sinh vin ngnh Cao ng (Lu hnh ni b)
Lt 2008
MC LC
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
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
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
CHNG 1: GII THIU HTML CC SIU LIN KT

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 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
<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
</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
</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> <TITLE>Welcome to HTML</TITLE> </HEAD> <BODY BGCOLOR = lavender> <P>This is going to be real fun <P> Another paragraph element </BODY> </HTML>
Hnh 1.5: Kt qu ca v d 3 Th ng </P> l khng bt buc. Th <P> k tip s t ng bt u mt on mi. Cc th ngt 8
Lp trnh Web 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> <TITLE>Welcome to HTML</TITLE> </HEAD> <BODY BGCOLOR = lavender> <P>This is going to be real <BR>fun <P> Another paragraph element </BODY> </HTML>
Hnh 1.6: Kt qu ca v d 4 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 Left Center Right Justify Vn bn c canh l tri Vn bn c canh gia Vn bn c canh phi Vn bn c canh u hai bn Description
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. 9
Lp trnh Web V d 5
<HTML> <HEAD> <TITLE>Learning HTML</TITLE> </HEAD> <BODY BGCOLOR=lavender>
<P
</BODY> </HTML>
align = right>This is good fun</P>
Hnh 1.7: Kt qu ca v d 5 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, s sinh ra mt u p ng HTTP nh sau:
Expires: Mon, 15 Sep 2003 14:25:27 GMT 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
10
Lp trnh Web 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 Ln hn (>) M nh dng > <HTML> <HEAD> <TITLE>Learning HTML</TITLE> </HEAD> <BODY> <CODE>If </CODE> A > B Then <BR> A = A + 1 V d
<P> The above characters </BODY> </HTML> Nh hn (<) < <HTML> <HEAD>
statement
used
special
<TITLE>Learning HTML</TITLE> </HEAD> <BODY> <CODE>If A < B Then <BR> A = A + 1 </CODE> <P> The characters </BODY> </HTML> Trch dn() " <HTML> <HEAD> <TITLE>Learning HTML</TITLE> </HEAD> <BODY> " To be or not is the question </BODY> </HTML> K t & & <HTML> <HEAD> to be ? " That above statement used special
11
Lp trnh Web
<TITLE>Learning HTML</TITLE> </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 12
Lp trnh Web 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.
13
Lp trnh Web 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>
14
Lp trnh Web
<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>
Hnh 1.10: Kt qu ca v d 6 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>
15
Lp trnh Web
Hnh 1.11: Kt qu v d 7 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>
16
Lp trnh Web 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>
17
Lp trnh Web
Hnh 1.12: Kt qu v d 8
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>
18
Lp trnh Web
<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 19
Lp trnh Web 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.
20
Lp trnh Web 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.
21
Lp trnh Web
CHNG 2: CC TH HTML C BN
Kt thc chng ny, bn c th: 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> <H2>Introduction to HTML</H2> <H3>Introduction to HTML</H3> <H4>Introduction to HTML</H4> <H5>Introduction to HTML</H5> <H6>Introduction to HTML</H6> </HTML>
22
Lp trnh Web
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> <TITLE>Learning HTML</TITLE> </HEAD> <BODY> <DIV>
Division 1 <P> The DIV element is used to group elements <P>Typically, DIV is used for block level elements
</DIV> <DIV align = right>
Division 2
23
Lp trnh Web
<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 </SPAN>is applied to all the elements in the division </BODY> </HTML> formatting
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 24
Lp trnh Web 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> <TITLE>Learning HTML</TITLE> </HEAD> <BODY> <UL> <LI>Monday <LI>Tuesday <LI>Wednesday <LI>Thursday <LI>Friday
25
Lp trnh Web
</UL> </BODY> </HTML>
Hnh 2.6: Kt qu v d 6 Chng ta c th to ra cc danh sch lng nhau m t nhm con ca thng tin. V d 7:
<HTML> <HEAD> <TITLE>Learning HTML</TITLE> </HEAD> <BODY> <UL>
<LI>Monday
<UL> <LI>Introduction to HTML <LI>Creating Lists </UL>
<LI>Tuesday
<UL> <LI>Creating Tables <LI>Inserting Images </UL>
<LI>Wednesday <LI>Thursday <LI>Friday

</UL> </BODY>
26
Lp trnh Web
</HTML>
Hnh 2.7: Kt qu v d 7 Thuc tnh TYPE c th c dng nh dng cc bullets hin th cho cc mc ca danh sch.
Thuc tnh Bulleted Th <UL> v <LI> <HTML> <HEAD> <TITLE>Learning HTML</TITLE> </HEAD> <BODY> <UL> <LI>Monday <UL> <LI>Introduction to HTML <LI>Creating Lists </UL> <LI>Tuesday <UL> <LI>Creating Tables <LI>Inserting Images </UL> V d
27
Lp trnh Web
<LI>Wednesday <LI>Thursday <LI>Friday </UL> </BODY> </HTML> Customized bullets <LI TYPE = <HTML> SQUARE> Square <HEAD> bullets <TITLE>Learning HTML</TITLE> <LI TYPE = DISC> </HEAD> Sphere bullets <LI TYPE = <BODY> CIRCLE> Round <UL> bullets <LI>Monday <UL> <LI TYPE HTML </UL> <LI>Tuesday <UL> <LI TYPE = SQUARE>Creating Tables <LI TYPE Images </UL> <LI>Wednesday <UL> <LI TYPE = CIRCLE>Creating Forms <LI TYPE Frames </UL> <LI>Thursday <LI>Friday </UL> </BODY> </HTML> = CIRCLE>Working with = SQUARE>Inserting = DISC>Introduction to
<LI TYPE = DISC>Creating Lists
Ch : Thuc tnh TYPE khng c hin th trong Internet Explorer 2.6.2 Danh sch c th t 28
Lp trnh Web 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> <TITLE>Learning HTML</TITLE> </HEAD> <BODY> <OL>
<LI>Monday <LI>Tuesday <LI>Wednesday <LI>Thursday <LI>Friday

</OL> </BODY> </HTML>
Hnh 2.8: Kt qu v d 8 Chng ta c th t cc thuc tnh nh ngha h thng s m c to ra cho cc mc danh sch.
Thuc tnh Upper Roman Lower Roman Uppercase <LI TYPE = I> <LI TYPE = i> <LI TYPE = A> Th
29
Lp trnh Web
Lowercase Bt u vi mt s khc ln hn 1 <LI TYPE = a> <OL START = n>
Thuc tnh START xc nh s khi to ban u ca danh sch. V d 9:

<HTML> <HEAD> <TITLE>Learning HTML</TITLE> </HEAD> <BODY> <OL> <LI>Monday <OL> <LI TYPE = i>Introduction to HTML <LI TYPE = i>Creating Lists </OL> <LI>Tuesday <OL> <LI TYPE = A>Creating Tables <LI TYPE = A>Inserting Images </OL> <LI>Wednesday <OL START = 5> <LI >Creating Forms <LI >Working with Frames </OL> <LI>Thursday
<LI>Friday
</OL> </BODY> </HTML>
30
Lp trnh Web
Hnh 2.9: Kt qu v d 9 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> <TITLE>Learning HTML</TITLE> </HEAD> <BODY> <UL>
<LI>Monday
<OL> <LI TYPE = i>Introduction to HTML <LI TYPE = i>Creating Lists </OL>
<LI>Tuesday <OL>
<LI TYPE = a>Creating Tables <LI TYPE = a>Inserting Images </OL>
<LI>Wednesday <LI>Thursday
31
Lp trnh Web
<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 align width size noshade M t Ch nh v tr ca ng nm ngang. Chng ta c th canh l center(gia)|right(phi)|left(tri). V d align=center 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. Ch dy ca ng thng v c xc nh bng cc pixel. Ch ng c hin th bng mu c thay v c bng.
V d 12:
<HTML> <HEAD> <TITLE>Welcome to HTML</TITLE> </HEAD> <BODY>
32
Lp trnh Web
<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 COLOR SIZE M t c dng ch mu ca font. Chng ta c th dng tn mu hoc gi tr thp phn xc nh mu. 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)
33
Lp trnh Web Cc thuc tnh ca FONT c th kt hp trong cng mt th. V d 13:

<HTML> <HEAD> <TITLE>Welcome to HTML</TITLE> </HEAD> <BODY> <H3><FONT SIZE = 3 COLOR = HOTPINK FACE = Arial>My first HTML document</FONT></H3> fun </HTML> <P>This is <FONT COLOR = BLUE SIZE = 6>going </FONT>to be real
</BODY>
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> <TITLE>Learning HTML</TITLE> </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>
34
Lp trnh Web
Hnh 2.14: Kt qu ca v d 14 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 #FF0000 #00FF00 #0000FF #000000 #FFFFFF Red Green Blue Black White Mu
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). 35
Lp trnh Web 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. 36
Lp trnh Web <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.
37
Lp trnh Web Hnh 2.15: Kt qu v d 15 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 .
38
Lp trnh Web 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)
39
Lp trnh Web
CHNG 3: S DNG BNG

Kt thc chng ny, bn c th: 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> <TD>Data Cell 2</TD>
40
Lp trnh Web
<TD>Data Cell 3</TD>
</TABLE> </BODY> </HTML>
Hnh 3.2: Kt qu ca v d 1 Mt hng ca bng c nh ngha bng th <TR> V d2:

<HTML> <HEAD> <TITLE>Using Tables</TITLE> </HEAD> <BODY> <TABLE> <TR> <TD>Data Cell 1</TD> <TD>Data Cell 2</TD> <TD>Data Cell 3</TD> <TR> <TD>Data Cell 4</TD> <TD>Data Cell 5</TD> <TD>Data Cell 6</TD> </TABLE> </BODY> </HTML>
41
Lp trnh Web
Hnh 3.3: Kt qu ca v d 2 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> <TITLE>Using Tables</TITLE> </HEAD> <BODY> <TABLE BORDER = 2>
<TR> <TD>Data Cell 1</TD> <TD>Data Cell 2</TD> <TD>Data Cell 3</TD> <TR> <TD>Data Cell 4</TD> <TD>Data Cell 5</TD> <TD>Data Cell 6</TD>
42
Lp trnh Web
Hnh 3.4: Kt qu ca v d 3 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> <TITLE>Using Tables</TITLE> </HEAD> <BODY> <TABLE BORDER = 2> <TR> <TD>Data Cell 1</TD> <TD>Data Cell 2</TD> <TD>Data Cell 3</TD>
<TD>New column</TD>
<TR> <TD>Data Cell 4</TD> <TD>Data Cell 5</TD>
43
Lp trnh Web
<TD>Data Cell 6</TD>
<TR> <TD>New Row</TD>

Hnh 3.5: Kt qu ca v d 4 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> <TITLE>Using Tables</TITLE> </HEAD> <BODY> <TABLE BORDER = 2> <TR> <TD>Data Cell 1</TD> <TD>Data Cell 2</TD> <TD>Data Cell 3</TD> <TR>
<TD>New Row</TD>
44
Lp trnh Web
Hnh 3.6: Kt qu ca v d 5 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> <TITLE>Using Tables</TITLE> </HEAD> <BODY> <TABLE BORDER CELLPADDING = 6> = 2 BGCOLOR = lavender CELLSPACING = 2
<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>
45
Lp trnh Web
<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>

Hnh 3.7: Kt qu ca v d 6 V d 7:
<HTML> <HEAD> <TITLE>Using Tables</TITLE>
46
Lp trnh Web
</HEAD> <BODY> <TABLE BORDER CELLPADDING = 6> <TR> = 2 BGCOLOR = lavender CELLSPACING = 2
<CAPTION>Creating a Table</CAPTION>
<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>

47
Lp trnh Web
Hnh 3.8: Kt qu ca v d 7 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> <TITLE>Using Tables</TITLE> </HEAD> <BODY> <TABLE BORDER = 2 WIDTH = 50% BGCOLOR = lavender>
48
Lp trnh Web
<TR> <TD ALIGN = right VALIGN = bottom>Data Cell 1</TD> <TD>Data Cell 2</TD> <TD>Data Cell 3</TD> <TR> <TD>Data Cell 4</TD> <TD>Data Cell 5</TD> <TD>Data Cell 6</TD>
Hnh 3.9: Kt qu ca v d 8 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> <TITLE>Using Tables</TITLE> </HEAD> <BODY> <TABLE BORDER CELLPADDING = 10> = 2 BGCOLOR = lavender CELLSPACING = 5
<TR>
49
Lp trnh Web
<TD>Data Cell 1</TD> <TD>Data Cell 2</TD> <TD>Data Cell 3</TD> <TR> <TD>Data Cell 4</TD> <TD>Data Cell 5</TD> <TD>Data Cell 6</TD>
Hnh 3.10: Kt qu ca v d 9
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>
50
Lp trnh Web
</HEAD> <H1><FONT SIZE=3 Image</B></FONT></H1> <HR> <BODY> <IMG SRC=coffeecup.gif ALT="Steaming Coffee"> </BODY> </HTML> COLOR=FORESTGREEN><B>Inserting an
Hnh 3.13: Kt qu ca v d 12 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. 51
Lp trnh Web 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>
52
Lp trnh Web Hnh 3.14: Kt qu ca v d 13 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
53
Lp trnh Web
CHNG 4: S DNG BIU MU V KHUNG

Kt thc chng ny, bn c th: 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:
54
Lp trnh Web
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 ACCEPT M t 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 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
ACTION
55
Lp trnh Web
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 TYPE Description 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 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 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. 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) 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. 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 = URL. Thuc tnh ny c dng khi ta mun s dng mt nh trong kiu INPUT. N xc nh v tr ca nh
NAME
VALUE
SIZE
MAXLENGTH CHECKED SRC
56
Lp trnh Web 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 NAME SIZE TYPE VALUE M t Thit lp hoc truy xut tn ca iu khin Thit lp hoc truy xut kch thc ca iu khin Truy xut loi iu khin bn trong c biu din bi <INPUT type = button> 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 CHECKED NAME SIZE STATUS TYPE VALUE M t Thit lp hoc truy xut trng thi ca checkbox Thit lp hoc truy xut tn ca iu khin Thit lp hoc truy xut kch thc ca iu khin Thit lp hoc truy xut trng thi xem checkbox c c chn hay khng Truy xut loi iu khin, s dng <INPUT type = checkbox>. Thit lp hoc truy xut gi tr ca checkbox <INPUT
57
Lp trnh Web
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 CHECKED NAME SIZE STATUS TYPE VALUE M t Thit lp hoc truy xut trng thi ca nt radio Thit lp hoc truy xut tn ca iu khin Thit lp hoc truy xut kch thc ca iu khin Thit lp hoc truy xut trng thi xem nt radio c c chn hay khng Truy xut loi iu khin, s dng <INPUT type = radio>. 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. 58
Lp trnh Web 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"> METHOD="POST"> <FORM ACTION="http://www.mysite.com/FormSite" <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 <INPUT TYPE="RADIO" NAME="RESULT_RadioButton-3" VALUE="Radio-1">intermediate <INPUT TYPE="RADIO" NAME="RESULT_RadioButton-3" 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 <INPUT TYPE="CHECKBOX" NAME="RESULT_CheckBox-4" VALUE="CheckBox-1">Options <INPUT TYPE="CHECKBOX" NAME="RESULT_CheckBox-4" 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>
59
Lp trnh Web
<INPUT TYPE="SUBMIT" NAME="Submit" VALUE="Submit"> <INPUT TYPE="RESET" NAME="Reset" VALUE="Reset"></p> </FORM> </BODY> </HTML>
Hnh 4.2: Kt qu v d 1 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 COLS ROWS SIZE TYPE Truy xut rng ca textarea Thit lp hoc truy xut s hng ngang trong <TEXTAREA> Thit lp hoc truy xut kch thc ca iu khin Truy xut loi iu khin, s dng <TEXTAREA> M t
60
Lp trnh Web
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 NAME VALUE TYPE Gn tn cho nt Gn gi tr cho nt 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 M t
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> <TITLE> Sample Form </TITLE> </HEAD> <BODY bgColor="#ffffcc" Text="#000099"> <FORM ACTION="http://www.mysite.com/FormSite" METHOD="POST"> <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">
61
Lp trnh Web
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>
Hnh 4.3: Kt qu v d 2 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 NAME SIZE M t Gn tn cho phn t. Khi biu mu c gi i, thuc tnh tn c gn vi gi tr chn la Nu c nhiu s chn la, ngi dng s dng cun, thuc tnh ny xc nh s dng trong danh sch c hin th.
62
Lp trnh Web
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> <TITLE> Sample Form </TITLE> </HEAD> <BODY bgColor="#ffffcc" Text="#000099"> METHOD="POST"> <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"> </P> </FORM> </BODY> </HTML> <INPUT TYPE="RESET" NAME="Reset" VALUE="Reset"> <FORM ACTION="http://www.mysite.com/FormSite"
63
Lp trnh Web
Hnh 4.4: Kt qu v d 3 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 SELECTED VALUE M t y l thuc tnh logic s dng chn trc mt ty chn. 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 Xc nh vn bn hin th cho mt ty chn.
LABEL
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
64
Lp trnh Web
<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>
Hnh 4.5: Kt qu v d 4 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>
65
Lp trnh Web
<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>
Hnh 4.6: Kt qu v d 5 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>
66
Lp trnh Web
<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 CHECKED>Web Designer
<INPUT TYPE=RADIO Administrator
NAME=CONTROL1"
NAME=CONTROL1"
VALUE=0"
>Web
VALUE=1"
<INPUT Developer
TYPE=RADIO
NAME=CONTROL1"
VALUE=2"
>Web
<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" 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>
COLS=30"
ROWS=5">Type
67
Lp trnh Web
Hnh 4.7: Kt qu v d 6 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.
68
Lp trnh Web 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 Designer TYPE=RADIO NAME=CONTROL1" VALUE=0" CHECKED>Web
<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" ROWS=5">Type your comments here</TEXTAREA> COLS=30"
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.
69
Lp trnh Web
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 ROWS M t Xc nh rng ca khung, c tnh theo im(pixels), phn trm hoc rng tng i. Gi tr mc nh l 100%, ngha l mt dng Xc nh cao ca khung, c tnh theo im(pixels), phn trm hoc cao tng i. Gi tr mc nh l 100%. N xc nh ch c mt ct
COLS
70
Lp trnh Web 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>
Hnh 4.9: Kt qu v d 7 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 NAME SRC NORESIZE
M t Thuc tnh ny gn tn cho khung hin thi Thuc tnh ny xc nh v tr ti liu ban u c cha trong khung y l thuc tnh logic. N quy nh ca s khung khng c thay i kch thc
71
Lp trnh Web
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 Xc nh khong cch gia ni dung trong khung vi l trn v l di ca khung. Gi tr phi ln hn mt
MARGINHEIGHT
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>
72
Lp trnh Web
Hnh 4.10: Kt qu v d 8 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: 73
Lp trnh Web
<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>
Hnh 4.12: Kt qu v d 10 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>
74
Lp trnh Web
Hnh 4.13: Kt qu v d 11 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 FRAMEBORDER=no>

</FRAMESET> </HTML>
NAME=Links
SCROLLING=no
Link.html
<HTML> <BODY>
75
Lp trnh Web
<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>
Hnh 4.14: Kt qu v d 12 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 href=main.htm>for a non-frames version</A>

</NOFRAMES> </FRAMESET> </FRAMESET> </HTML>
here
<A
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 76
Lp trnh Web 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 NAME WIDTH HEIGHT Gn tn cho khung hin thi Xc nh rng ca khung trn dng Xc nh chiu cao ca khung trn dng M t
V d 14:
<HTML> <P>It has been good fun. You have been learning about frames <BR><BR> <IFRAME frameborder=1> src="x.html" width="100" height="150" scrolling=auto
[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)
77
Lp trnh Web
CHNG 5: S DNG STYLE

Kt thc chng ny, bn c th: 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. 78
Lp trnh Web 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. 79
Lp trnh Web 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)
80
Lp trnh Web 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>
81
Lp trnh Web
Hnh 5.1: Kt qu v d 1 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.
82
Lp trnh Web 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>
83
Lp trnh Web
H1 {color:limegreen} H1 {font-family:Arial} H2 {color:limegreen} H2 {font-family:Arial} </STYLE> </HEAD> <H1>This is the H1 element</H1> <H2>This is the H2 element</H2> <H3>This is the H3 element with its default style as displayed in the browser</H3>
</HTML>
Lu : text/css ch ra kiu style c dng y l stylesheet phn cp cascading style sheet
Hnh 5.2: Kt qu v d 2 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> <STYLE TYPE=text/css> H1, H2{color:limegreen;font-family:Arial;} </STYLE> </HEAD> <H1>This is the H1 element</H1> <H2>This is the H2 element</H2>
84
Lp trnh Web
<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 } A:visited { color: blue } A:active { color: lime } /* unvisited link */ /* visited links */ /* 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>
85
Lp trnh Web
<HEAD>
<STYLE TYPE="text/css"> P{font-style:italic; 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>
font-weight:bold;
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>
<STYLE TYPE=text/css> .water { color:blue } .danger { color:red }
86
Lp trnh Web
</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 class</H5> is an H5 element that uses the RED
<H5 CLASS=hotpink>This is an H5 element that has been allowed to use hotpink style.</H5>
87
Lp trnh Web
<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
Hnh 5.6: Kt qu v d 6 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>
<STYLE TYPE="text/css"> #control {color:red} </STYLE> </HEAD>
88
Lp trnh Web
<BODY>
<P id="control">Fire is of this color</H2>

<BR>
<P>This paragraph has no style applied

</BODY> </HTML>
Hnh 5.7: Kt qu v d 7 V d 8:
<HTML> <HEAD> <TITLE> Combining ID and Class Selectors</TITLE> <STYLE TYPE="text/css"> .forest {color:green} .danger {color:red} #control {color:blue} </STYLE> </HEAD> <BODY> <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>
89
Lp trnh Web
<P id=control> water </P> </BODY> </HTML>
Hnh 5.8: Kt qu v d 8 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> <STYLE TYPE="text/css"> BODY {color:blue; background:lavender;
90
Lp trnh Web
font-family:Arial;} UL {color:red } </STYLE> <HEAD> <BODY> <UL> <LI> <LI> </UL> <OL> mangoes apples
<LI> oranges
<LI> mangoes
<LI> </OL> </BODY> </HTML> oranges
<LI> apples
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 91
Lp trnh Web 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 H1 P </Style> = "text/css"> {color:maroon;} {color:hotpink; font-family:Arial;}
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 HREF Type REL = stylesheet = stylesmine.css" = "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>
92
Lp trnh Web
<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>
Hnh 5.10: Kt qu v d 10 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 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 Tn CSS
93
Lp trnh Web
border-color Cc thuc tnh v v tr Clip height Left Top z-index
94
Lp trnh Web
CHNG 6: JAVASCRIPT, NN TNG V C PHP

Kt thc chng ny, bn c th: 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 95
Lp trnh Web 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 96
Lp trnh Web 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 serverside 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
97
Lp trnh Web 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"> <!-JavaScript statements; //--> </script>
Thuc tnh language trong th script ch ra ngn ng m trnh duyt s dng bin dch script. Chng ta cng c th ch r phin bn JavaScript no s c trnh duyt s dng. V d:
<script language="JavaScript1.2">
<! - -statements //- -> l 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>
98
Lp trnh Web
<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. 99
Lp trnh Web 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. 100
Lp trnh Web 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
101
Lp trnh Web 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:
102
Lp trnh Web
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:
103
Lp trnh Web
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
104
Lp trnh Web 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 Numbers M t Cc s nguyn hoc s thc. V d: 487 hoc 25.95 Logical hoc Boolean Strings Null True hoc False Hello World 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. 105
Lp trnh Web 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> <SCRIPT LANGUAGE = "Javascript"> 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: 106
Lp trnh Web
<HTML> <HEAD> <SCRIPT LANGUAGE = "Javascript"> 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> <SCRIPT LANGUAGE = "Javascript"> var x = "a15" a = parseFloat(x); document.write(a); </SCRIPT> </HEAD> </HTML>
107
Lp trnh Web 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 \b \f \n \r \t ngha backspace form feed new line (xung dng v a con tr v u dng ) Carriage return (a con tr v u dng hin ti) Tab
108
Lp trnh Web Nhng v d di y minh ha cch s dng cc k t c bit ca JavaScript: K t backspace <SCRIPT LANGUAGE = "Javascript"> alert(" This is line one \b This is line two"); </SCRIPT> K t form feed (sang trang) <SCRIPT LANGUAGE = "Javascript"> alert(" This is line one \f This is line two"); </SCRIPT> K t new line (xung dng) <SCRIPT LANGUAGE = "Javascript"> alert(" This is line one \n This is line two"); </SCRIPT> K t carriage return (Phm xung dng) <SCRIPT LANGUAGE = "Javascript"> alert(" This is line one \r This is line two"); </SCRIPT> K t tab <SCRIPT LANGUAGE = "Javascript"> 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
109
Lp trnh Web 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 + / % ++ Php cng Php tr Php chia Php chia ly s d M t V d A=5+8 A=8-5 A = 20 / 5 10 % 3 = 1
Tng ln mt n v. Ton t ny nhn mt ton ++x s tr v gi tr hng. Gi tr ca ton hng s tng ln 1 n v. Gi ca x sau khi tng. tr c tr v s tu thuc vo ton t ++ nm sau x++ s tr v gi tr hay nm trc ton hng. ca x trc khi tng. Gim mt n v. Ton t ny nhn mt ton hng. --x s tr v gi tr Gi tr c tr v tu thuc vo ton t -- nm ca x sau khi gim. trc hay nm ton hng. 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);
110
Lp trnh Web
alert ("The value of x + x = alert ("The value of x - x = alert ("The value of x * x = alert ("The value of x / 3 = alert ("The value of x % 3 = alert ("The value of --x = alert ("The value of ++x = alert ("The value of -x = </SCRIPT> </HEAD> </HTML> " + (x + x)); " + (x - x)); " + (x * x)); " + (x / 3)); " + (x % 3)); " + (--x)); " + (++x)); " + (-x));
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 Bng. Tr v gi tr true nu cc ton hng bng a = = b nhau. Khng bng. Tr v gi tr true nu cc ton hng Var2 != 5 khng bng nhau. Ln hn. Tr v gi tr true nu ton hng tri ln Var1 > var2 hn ton hng phi. Ln hn hoc bng. Tr v gi tr true nu ton Var1 >= 5 hng tri ln hn hoc bng ton hng phi. Var1 >= var2 V d
111
Lp trnh Web
< <= Nh hn. Tr v gi tr true nu ton hng tri nh Var2 < var1 hn ton hong phi. Nh hn hoc bng. Tr v gi tr true nu ton Var2 <= 4 hng tri nh hn hoc bng ton hng phi. 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 And ( &&) Gi tr expr1 && expr2 M t Tr v gi tr ca expr1 nu n l false. Nu khng th n tr v gi tr ca expr2. Tr v gi tr ca expr1 nu n l true. Nu khng th n s tr v gi tr ca expr2. Tr v gi tr false nu biu thc ng v tr v gi tr true nu biu thc sai.
Or ( ||)
expr1 || expr2
Not (!)
!expr
V d 10:
<HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> var x = 10; var y = 5; alert ("The value of x is " + x + "The value of y is alert("x AND y = " + (x && y)); alert("x OR y = " + (x || y)); alert("NOT x = " + (!x)); </SCRIPT> </HEAD> </HTML> " + y);
Kt qu:
112
Lp trnh Web 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 language="JavaScript"> <!-var todays_date var seconds = new Date(); = todays_date.getSeconds(); "Red" : "Green"; document.write("<body ">"); //--> </script> </head> <h1> <hr> text=White bgcolor=" + b_color +
var b_color = (seconds >=3 && seconds <=50) ?
113
Lp trnh Web
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 language="JavaScript"> <!-var x = 5; document.write(typeof(x)); //--> </script> </head> </html>
Ton t typeof s tr v: number Kt qu:
114
Lp trnh Web
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 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 Cc ton t n = += -= *= /= %= <<= >>= >>>= &= ^= |= ?: || && | ^ & == != < <= > >= << >> >>> +*/% ! ~ - ++ -- 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. 115
Lp trnh Web 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 language="JavaScript"> <!-emp = new Array(3) emp[0] = "Ryan Dias" emp[1] = "Graham Browne" emp[2] = "David Greene"; document.writeln(emp[0]); document.writeln(emp[1]); document.writeln(emp[2]); //--> </script> </head>
</html> Kt qu:
116
Lp trnh Web
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
Join Pop Push
M t Kt hp cc phn t ca mng thnh mt chui Tr v phn t cui cng ca mng, sau khi xo n t mng. Thm mt hoc nhiu phn t vo cui mng. Tr li phn t cui cng thm vo. 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. Xo phn t u tin ca mng v tr v phn t . Sp xp cc phn t ca mng.
Reverse
Shift Sort
Phng thc sort Phng thc emp.sort () s sp xp mng di y V d 16: 117
Lp trnh Web
<html> <head> <script language="JavaScript"> <!-emp = new Array(3) emp[0] = "Ryan Dias" emp[1] = "Graham Browne" emp[2] = "David Greene"; emp.sort(); document.writeln(emp[0]); document.writeln(emp[1]); document.writeln(emp[2]); //--> </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 .
118
Lp trnh Web
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 LANGUAGE = "JavaScript"> <!-MyArray = new Array(5,5); MyArray[0, 0] = "Ryan Dias"; MyArray[0, 1] = 1; MyArray[1, 0] = "Mike Donne"; MyArray[1, 1] = 2; MyArray[2, 0] = "Joe Dean"; MyArray[2, 1] = 3; MyArray[3, 0] = "Robert Matey"; MyArray[3, 1] = 4; document.write ("The name is --> </SCRIPT> </HEAD> </HTML> " + MyArray[3, 0]); document.write("and the code is " + MyArray[3,1]);
Kt qu:
119
Lp trnh Web
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;
120
Lp trnh Web
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)
121
Lp trnh Web
{ 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> <SCRIPT LANGUAGE = "JavaScript"> 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:
122
Lp trnh Web
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. 123
Lp trnh Web 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> <SCRIPT LANGUAGE = "JavaScript"> 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: 124
Lp trnh Web
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()
125
Lp trnh Web 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 language="JavaScript"> <!-function hello( ) { document.write ('Hello.'); document.write ('Welcome to the hello( ) function.'); return; } function sum_up ( one, two) { var result = one + two; return result; } function sum_all ( ) { var loop=0, sum=0; for ( loop = arguments.length-1; loop >=0; loop--) sum += arguments[loop]; return sum; } // Add it up now hello ( ); var total = sum_up(7, 9); document.write ( total + ' ' + sum_up ( 8, 15)); document.write ( ' ' + sum_all ( 1, 5, 8,7, 6) ); //--> </script> </head> </html>
126
Lp trnh Web 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> <script language="JavaScript"> function testreturn(x) { var i = 0; while (i < 6) { if (i == 3) break i++ } document.write (i*x); return (i*x); } </script> </head> <BODY> <SCRIPT>
127
Lp trnh Web
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.
128
Lp trnh Web
CHNG 7: CC I TNG C BN TRONG JAVASCRIPT

Kt thc chng ny, bn c th: 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.
129
Lp trnh Web
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> <script language="JavaScript"> function dispname(name) { alert("Welcome to the world of JavaScript, " + name); } </script> </HEAD>
130
Lp trnh Web
<FORM> <B>Enter your name:</B> <INPUT TYPE = "text" NAME = onChange="dispname(this.form.text1.value)"> </FORM> </HTML> "text1" SIZE = 20
Hnh 7.2: Kt qu ca v d 1 V d 2:
<html> <head> <script language="JavaScript"> 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>
131
Lp trnh Web
Hnh 7.3: Kt qu ca v d 2 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 length M t Tr li di ca chui
Phng thc:
Tn Big Blink M t Tng kch thc ca chui vn bn To hiu ng nhp nhy cho chui (Internet Explorer khng h
132
Lp trnh Web
tr phng thc ny) Bold Fontcolor Italics Small Strike Sub Sup ToLowerCase ToUpperCase In m chui Xc nh mu ca font ch Hin th chui dng in nghing Gim kch thc ca chui vn bn Hin th chui c ng gch ngang nm gia (strikethrough) Hin th vn bn di dng ch s di Hin th vn bn di dng ch s trn Chuyn chui thnh k t thng 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>
133
Lp trnh Web
Hnh 7.8: Kt qu ca v d 7 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 PI LN10 E M t Gi tr ca , bng khong 3.1415. Gi tr ca lg (logarit c s 10), bng khong 2,302 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 Abs (number) Sin (number) Cos (number) Tan (number) Min (number1, number2) Max (number1, number2) Round (number) M t Description Tr v gi tr tuyt i ca mt s Tr v gi tr sin ca ca mt s (tnh bng radian) Tr v gi tr cosin ca ca mt s (tnh bng radian) Tr v gi tr tang ca ca mt s (tnh bng radian) Tr v gi tr nh nht ca hai s number1 v number2 Tr v gi tr ln nht ca hai s number1 v number2 Lm trn i s ti s nguyn gn nht
134
Lp trnh Web
Sqrt (number) Tr v cn bc hai ca mt s
V d 8:
<HTML> <SCRIPT LANGUAGE = "JavaScript"> 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 onclick="doCalc(rad.value)">

"Display
Area"
Hnh 7.9: Kt qu ca v d 8 V d 9: 135
Lp trnh Web
<html> <head> <script language="JavaScript"> 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" <P> <INPUT TYPE = "button" NAME = "button1" onClick="show(this.form.text1.value)" </FORM> </html> value="Absolute Value" SIZE = 20>
Hnh 7.10 a: Kt qu ca v d 9
136
Lp trnh Web
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 Set Get To M t Gm nhng phng thc dng thit lp cc gi tr thi gian. Gm nhng phng thc c dng ly cc gi tr thi gian. Gm nhng phng thc c dng tr v cc chui gi tr t cc i tng Date.
137
Lp trnh Web
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 Giy v pht Gi Ngy (trong tun) Ngy (trong thng) Thng Nm 0 n 59 0 n 23 0 n 6 1 n 31 0 n 11 (thng mt n thng mi hai) T 1900 tr i S nguyn
Chng ta hy tm hiu cc nhm phng thc get, set, to v parse: Nhm phng thc get:
Phng thc getDate getDay getHours getMinutes getSeconds getMonth getYear getTime getTimeZoneOffset M t Tr v ngy trong thng t i tng Date (1-31) Tr v ngy trong tun t i tng Date (0-6) Tr v gi t i tng Date (0 23) Tr v pht t i tng Date ( 0-59) Tr v giy t i tng Date (0 -59) Tr v thng t i tng Date ( 0 11) Tr v nm t i tng Date ( nm ()1900) Tr v s mili giy ca thi gian hin ti ( tnh t 1/1/1970) Tr v chnh lch bng pht gia gi a phng v gi chun (GMT)
Nhm phng thc set:

Phng thc setDate setHours setMinutes M t Thit lp ngy trong thng cho i tng Date (0 31) Thit lp gi cho i tng Date ( 0-23) Thit lp pht cho i tng Date ( 0-59)
138
Lp trnh Web
setSeconds setTime setMonth setYear Thit lp giy cho i tng Date ( 0-59) Thit lp gi tr thi gian (tnh bng mili giy) cho i tng Date Thit lp thng cho i tng Date (1-12) Thit lp nm cho i tng Date, nm phi ln hn 1900 (nm () 1900)
Nhm phng thc to:

Phng thc toGMTString toLocaleString M t Chuyn mt i tng Date t mt chui thi gian sang dng GMT Chuyn mt i tng Date t mt chui sang dng thi gian a phng
Nhm phng thc Parse & UTC:

Phng thc Date.parse(date string ) M t S mili giy trong mt date string (chui thi gian) tnh t 1/1/1970
Date.UTC(year, month, S mili giy ca mt i tng thi gian tnh t 1/1/1970 day, hours, min., secs. )
V d 10:
<HTML> <HEAD> <SCRIPT language="JavaScript"> <!-function disptime() { var time = new Date() var hour = time.getHours() var minute = time.getMinutes() var second = time.getSeconds() var temp = "" + ((hour > 12) ? hour - 12 : hour) temp += ((minute < 10) ? ":0" : ":") + minute temp += ((second < 10) ? ":0" : ":") + second temp += (hour >= 12) ? " P.M." : " A.M." document.MyPage.digits.value = temp id = setTimeout("disptime()",1000) } //--> </SCRIPT>
139
Lp trnh Web
</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>
Hnh 7.11: Kt qu ca v d 10 V d 11:

<HTML> <HEAD> <TITLE> TODAY'S DATE </TITLE> </HEAD> <BODY> <script language="JavaScript"> mydate=new Date() document.write("Today's Date is: "+ mydate.getDate()); </script> </BODY> </HTML>
140
Lp trnh Web
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

141
Lp trnh Web 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> <SCRIPT LANGUAGE="JavaScript"> 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.
142
Lp trnh Web
Hnh 7.1: Kt qu ca v d 1 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 LANGUAGE="JavaScript">  </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)
144
Lp trnh Web 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>
145
Lp trnh Web
</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= Aptech"; } if (num==2) "You have selected
{
document.forms[0].elements[0].value = "You have selected Asset"; }
146
Lp trnh Web
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.
Hnh 7.4: Kt qu ca v d 4 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>
147
Lp trnh Web
<HEAD> <TITLE>Hello </TITLE> </HEAD> <BODY onLoad="alert('Hello')"> </BODY> </HTML>
Kt qu:
Hnh 7.5: Kt qu ca v d 5 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
148
Lp trnh Web
onmousedown="(document.bgColor='aqua')" onmouseup="(document.bgColor='limegreen')" </FORM> </BODY> </HTML>
Hnh di y hin th kt qu ca v d 6
Hnh 7.6: 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> <script language="JavaScript"> 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:
149
Lp trnh Web
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 onClick="window.open('mydoc.html', 'newWin')"> Sesame!"
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> <SCRIPT LANGUAGE="JavaScript">
150
Lp trnh Web
function greeting() { alert("Welcome to my world"); } </SCRIPT> </HEAD> <BODY onLoad="greeting()"> </BODY> </HTML>
Kt qu:
Hnh 7.8: Kt qu v d 8 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 LANGUAGE="JavaScript"> <!-function greeting() { alert("Welcome to my world"); } window.onload = greeting;
151
Lp trnh Web
// --> </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.
152
Lp trnh Web
TI LIU THAM KHO

1. Gio trnh Lp trnh Web, Trung tm Aptech 2. T hc HTML, Trung tm in ton Trng i hc Bch Khoa Tp HCM.
153

201051210816914

Uploaded by

Document Information

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

201051210816914

Uploaded by

Copyright:

Available Formats

TRNG I HC LT KHOA CNG NGH THNG TIN

Thc s Hong Mnh Hng

CHNG 1: GII THIU HTML CC SIU LIN KT

1.1 GII THIU

1.2 GII THIU INTERNET

Hnh 1.2: Trnh duyt yu cu n my ch

1.3 GII THIU HTML

Hnh 1.5: Kt qu ca v d 3 Th ng </P> l khng bt buc. Th <P> k tip s t ng bt u mt on mi. Cc th ngt 8

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

align = right>This is good fun</P>

1.4 S DNG CC SIU LIN KT

1.4.3 iu hng quanh Web site 19

2.1 GII THIU

2.2 HEADING (TIU )

2.3 TH KHI <SPAN>, <DIV>

Ch : Phn t SPAN khng hin th trong Netscape

2.4 DANH SCH

<LI>Wednesday <LI>Thursday <LI>Friday

<LI TYPE = DISC>Creating Lists

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

Thuc tnh START xc nh s khi to ban u ca danh sch. V d 9:

2.5 TH K NG NGANG: <HR>

2.6 S DNG FONT

Lp trnh Web Cc thuc tnh ca FONT c th kt hp trong cng mt th. V d 13:

2.8 S DNG HNH NH TRONG TI LIU HTML

Ch : file Flowers.jpg nm trong cng th mc vi file HTML ngun.

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

CHNG 3: S DNG BNG

3.1 GII THIU

3.2 CCH TO BNG

<TD>Data Cell 1</TD> <TD>Data Cell 2</TD>

Hnh 3.2: Kt qu ca v d 1 Mt hng ca bng c nh ngha bng th <TR> V d2:

Phn t CAPTION c dng thm vo mt ch thch cho bng. y bn s dng n m t bng. V d,

<TR> <TD>New Row</TD>

<TD>Jan</TD> <TD>Feb</TD> <TD>March</TD> <TD>April</TD> <TD>May</TD>

<TD>1000</TD> <TD>550</TD> <TD>240</TD>

<TD>3000</TD> <TD>2430</TD> <TD>2500</TD> <TD>1250</TD> <TD>900</TD> <TD>3400</TD>

<TH></TH> <TH></TH> <TH>NUTS</TH> <TH>BOLTS</TH> <TH>Hammers</TH>

<TD>Jan</TD> <TD>2500</TD> <TD>1000</TD> <TD>1240</TD>

<TD>Feb</TD> <TD>3000</TD> <TD>2500</TD> <TD>4000</TD>

<TD>March</TD> <TD>3200</TD> <TD>1000</TD> <TD>2400</TD>

3.4 CHN MULTIMEDIA VO TI LIU HTML

CHNG 4: S DNG BIU MU V KHUNG

4.1 GII THIU

4.2 GII THIU BIU MU

V d, a mt biu mu n chng trnh x l biu mu s dng theo phng thc POST

MAXLENGTH CHECKED SRC

V d sau th hin vic s dng nhiu kiu nhp khc nhau. V d 1:

<INPUT tabindex = 6 TYPE=SUBMIT VALUE=OK>

4.3 KHUNG (FRAME)

Thuc tnh NAME SRC NORESIZE

<FRAME SRC=LINK.HTML FRAMEBORDER=no>

Frames are not being displayed. Click href=main.htm>for a non-frames version</A>

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

CHNG 5: S DNG STYLE

5.1 GII THIU

5.3 STYLE SHEETS

Lu : text/css ch ra kiu style c dng y l stylesheet phn cp cascading style sheet

<STYLE TYPE="text/css"> P{font-style:italic; color:limegreen} </STYLE>

<STYLE TYPE=text/css> .water { color:blue } .danger { color:red }

Ch : Xem kt qu trong Netscape

<P id="control">Fire is of this color</H2>

<P>This paragraph has no style applied