You are on page 1of 11

BI TP LAB 3 MN THIT K WEB

BI THU HOCH JAVASCRIPT I. GII THIU V JAVASCRIPT


1. JavaScript l g? JavaScript l ngn ng kch bn Web. Ngn ng kch bn l dng ngn ng lp trnh khng y . JavaScript c thng c nhng vo mt trang Web. Qua , ngn ng ny c th tng tc vi cc m lnh trong trang Web. JavaScript l mt ngn ng gii thch. N khng cn phi bin dch thc hin nh cc ngn ng lp trnh khc. JavaScript hon ton min ph v vic s dng n khng gp bt k vn no v mt bn quyn. JavaScrpit c s dng trong hng triu thm ch l hng t Website. y l ngn ng n gin v d tm hiu. Bn c th d dng tm hiu nghin cu v thc hnh. 2. Java v JavaScript l mt? Khng. Mc d c tn ging nhau nhng hai ngn ng ny hon ton khc nhau. Gia chng khng c g ging nhau c v khi nim, c im s dng JavaScript l ngn ng kch bn Web trong khi Java l ngn ng lp trnh cp cao c pht trin bi Sun Microsystems. 3. JavaScript c th lm c nhng g? JavaScript cung cp cho ngi thit k WebSite mt cng c thit k v lp trnh WebSite JavaScript l mt ngn ng kch bn. JavaScript hon ton c th phn ng vi cc s kin s sy ra trn mt WebSite. JavaScript c pht trin ring h tr cho HTML nn n hon ton c th c v vit li cc on m HTML. JavaScript c th c s dng xc nhn d liu c nhp v trc khi gi n my ch. Bng cch thm cc on m JavaScript v trong mt trang Web bn c th xem xem cc d liu m ngi dng nhp vo c ph hp hay khng trc khi gi v my ch. JavaScript c th c dng xc nh trnh duyt m ngi s dng dng truy cp vo WebSite ca bn. Bng cch bn c th cho php ngi truy cp ti v trnh cc on m thch hp nht dnh cho trnh duyt . Trnh cc li hin th m cc trnh duyt khc nhau gp phi trong qu trnh hin th WebSite. JavaScript c th c dng o ra cc cookie. N c th lu tr v ly thng tin v my tnh ca ngi truy cp.

II. JAVASCRIPT C BN
Cc on m JavaScript c chn vo trang HTML bng cch t trong cp th <script> v </script>. Ngoi ra c th khai bo JavaScript bn ngoi theo c php: <script type="text/javascript" src="xxx.js"></script> v t khong c php ny trong th <head>. Thng s src s ch n a ch file JavaScript c sn. Cc th JavaScript c th c t trong th <head> v th <body>. NHM SVTH:16 1 GVHD: NGUYN THNH THY

BI TP LAB 3 MN THIT K WEB


Lnh trong JavaScript kt thc bng du ;. Thiu du ny Script vn s hot ng nhng khng b nhm ln khi dng nhiu lnh th khng nn qun du ; khi kt thc lnh. Lu rng nu trnh duyt c ci t khng hin th hay khng cho php cc on m JavaScript hot ng th n s hin th ni dung trong th <script> nh mt phn vn bn ca trang HTML. Khi cn thm on th <- v -> vn l th ch thch trong HTML vo u v cui th Script. Nh vy, nu trnh duyt khng cho php th JacaScript hot ng th cc ni dung bn trong cng s khng hin th ra ngoi. V d:

Lu rng: on -> cn t sau // trnh JavaScript hiu nhm. Ging nh C. JavaScript c hai cch biu din ch thch l // cho mi dng vn bn ring bit v /* on ch thich*/. 1. Cc k t c bit trong JavaScript Trong thc t vic thm cc k t c bit vo vn bn l iu hon ton bnh thng. V th JavaScript cung cp mt bng bn c th chn cc k t c bic v m khng nh hng n qu trnh x l chng trnh. Bng:
Code \' \" \\ \n \r \t \b \f Outputs single quote double quote backslash new line carriage return tab backspace form feed

2. S dng JavaScript thay i trang HTML Ch rng vic thay i ni dung trang HTML s c din ra trn nn HTML ch khng phi trn mn hnh my tnh. a) Lnh xut chui k t ca JavaScript C php: document.write(Th HTML) Lnh c dng chn on m HTML c bn. V d:

NHM SVTH:16

GVHD: NGUYN THNH THY

BI TP LAB 3 MN THIT K WEB

Kt qu hin th.

y lnh Date() c tc dng ly thi gian ca my tnh ngi dng ti thi im hin ti. Nh v d ny l: Th 7, ngy 15 thng 10 nm 2011 mi gi -7h tnh theo gi Thi Bnh Dng. b) Thay i thnh phn trang HTML thay i hay thao tc trn cc phn t HTML ta s dng phng thc getElementById (). Phng thc ny tr n th HTML c a chi ID c nu ra trong th. V d:

Kt qu hin th

C th thy rng trong cp th <p> v </p> khng h c bt k mt k t no. Tuy nhin, ni dung ca c on m JavaScript thay i qua a ch ID ca n. on lnh innerHTML c s dng chn on vn bn kia vo trong cp th c ch nh. 3. Hm trong JavaScript Khai bo hm trong JavaScript: NHM SVTH:16

GVHD: NGUYN THNH THY

BI TP LAB 3 MN THIT K WEB

Khi mt hm khng cn n cc bin b xung th trong cp du ngoc n c th trng. V d:

Kt qu hin th

Khi nhn chut vo nt Display Date s c

y, ta thy c s tng tc gia on m HTML v on m JavaScript. Bng cch gn s kin khi nhp chut bng tn hm c khi to trang th <script>. Khi nhp chut th hnh ng tng ng s gi hm displayDate v thc hin n. 4. Bin trong JavaScript a) c im bin trong JavaScript C php khai bo: var <tn bin> NHM SVTH:16 4 GVHD: NGUYN THNH THY

BI TP LAB 3 MN THIT K WEB


Ging nh cc ngn ng lp trnh khc. Tn bin trong JavaScript phi bt u bng mt ch ci hoc k t gch chn. Tn bin phn bit ch hoa v ch thng. Bin trong JavaScript khng cn phi khai bo kiu. Kiu s t ng c xc nh. Bin trong JavaScript nu cha gi tr l chui hay k t cn t trong cp du ngoc kp. Khi kahi bo bin khng nht thit phi gn gi tr cho n Cc bin trong JavaScript l bin cc b v ch xc nh trong phm vi n c khai bo. V vy, trong mt trang HTML bn c th khai bo nhiu bin vi cng tn min l chng c khai bo trong cc hm khc nhau. Vic ny tuy khng nh hng n cc lnh khc nhng d khin cho ngi vit ri tr khi lm vic. Nu bin c khai bo khng nm trong hm no bin c gi l bin ton cc v c nh hng n ton b trang HTML . Lu : nu khai bo bin m khng s dng hm var th bin c xem l bin ton cc. b) Php ton trn bin Bng cc php ton:
Php ton = + * / % ++ - ngha Gn gi tr Php cng Php tr Php nhn Php chia Chia ly d Cng thm mt n v Tr i mt n v V v x=y x=y+2 x=y-2 x=y*2 x=y/2 x=y%2 x=++y x=y++ x=--y x=y--

Nh rng cc rng buc x++ hay x- - trong biu thc 2 ngi s thc hin php tnh cng ay tr mt n v sau khi thc hin biu thc v ngc li vi ++x hay --x. Cc cch vit biu thc khc
Php ton += -= *= /= %= V d x+=y x-=y x*=y x/=y x%=y Cch vit tng ng x=x+y x=x-y x=x*y x=x/y x=x%y

Ch rng nu thc hin php cng mt s vi mt chui trong JavaScript th vic s ging nh vic cng hai chui. V d:

NHM SVTH:16

GVHD: NGUYN THNH THY

BI TP LAB 3 MN THIT K WEB

Kt qu hin th

c) Php ton so snh v logic trn bin Bng cc php so snh (Gi s x=5):
Php ton == === != > < >= <= ngha So snh bng So snh bng v loi v gi tr So snh khc So snh ln hn So snh b hn Ln hn hoc bng B hn hoc bng V d x==8 tr v false x==5 tr v true x===5 tr v true x==="5" tr v false x!=8 tr v true x>8 tr v false x<8 tr v true x>=8 tr v false x<=8 tr v true

Bng so snh logic


Php ton && || ! ngha V Hoc Ph nh

III. CC CU TRC IU KHIN TRONG JACASCRIPT


1. Cu trc iu khin a) Cu trc If-Else C php: NHM SVTH:16 6 GVHD: NGUYN THNH THY

BI TP LAB 3 MN THIT K WEB

Nu iu kin ng th on m trong lnh If s c thc hin. Ngc li s thc hin cc lnh trong phn Else. V d

Kt qa hin th

y, on m s kim tra xem by gi la my gi v a ra li cho thch hp vi thi im . Cu trc If-Else c th khuyt phn Else hoc lng nhau tu theo yu cu ca ngi vit. b) Cu trc Switch-Case C php:

NHM SVTH:16

GVHD: NGUYN THNH THY

BI TP LAB 3 MN THIT K WEB

Cu trc lnh Switch-Case s thc hin cc lnh theo gi tr ca bin n. Nu cc gi tr ca n khng c th s thc hin cc lnh sau default. Nu khng c lnh break th cc on m s tip tc thc hin cc lnh cc th sau cho n khi kt thc hoc gp lnh break. V d

Kt qu

2. Cu trc vng lp Khi x dng cu trc vng lp, trong mt s trng hp nu cn thoat khi vng lp ngay th c th s dng lnh break thot khi vng lp hin ti ang cha lnh . a) Vng lp For C php: NHM SVTH:16 8 GVHD: NGUYN THNH THY

BI TP LAB 3 MN THIT K WEB

Vng lp For c dng khi bit trc s ln lp, hay ni cch khc l s ln thc hin cc lnh bn trong thn. V d:

Kt qu hin th

Ngoi ra, v JavaScript l ngn ng kch bn Web nn cn mt bin th vng lp For khc na c dng kim tra cc gi tr c lu tr trong mt i tng no . V d:

Kt qu: C th thy rng mng person c 3 gi tr v vng lp For s in ra mn hnh cc gi tr . Thay v khai bo cho chy 3 ln th y ch cn khai bo lnh t chy cho n khi ht cc gi tr trong mng person. b) Vng lp While C php:

NHM SVTH:16

GVHD: NGUYN THNH THY

BI TP LAB 3 MN THIT K WEB

Vng lp While s thc hin cho n khi biu thc iu kin l sai. V vy nn ch trnh vng lp v hn. c) Vng lp Do...While C php:

Tng t nh vng lp While tuy nhin thay v kim tra iu kin ri thc hin thi vng lp Do...While li thc hin khi lnh trc khi kim tra iu kin.

IV. S KIN V X L NGOI L


1. S kin Cc hnh ng lin quan n chut, bn phm c th c JavaScript pht hin v x l. Trn mt trang Web c th c cc s kin m ngi lp trnh nh trc v quyt nh cch thc tng tc thch hp. Cc s kin c bn: +/S kin kim tra trnh duyt ca ngi ng nhp Web: onLoad v onUnload. +/ S kin kim tra cc trng nhp: onFocus, onBlur v onChange. +/ S kin trn Button: onSubmit +/ S kin di chuyn chut: onMouseOver 2. X l ngoi l, bt li C php:

Trong trng hp cc lnh trong khi try khng thc hin c v xut hin li, cc x l tng ng c ngi lp trnh vit ra trong phn catch s c thc hin. 3. S dng Throw gip bt ngoi l C php:

Khi vit lnh try-catch c th s dng lnh Throw xc nh cc li php sinh trong try. Vic ny tng hiu xut kim sot li pht sinh hn. V d: NHM SVTH:16 10 GVHD: NGUYN THNH THY

BI TP LAB 3 MN THIT K WEB

V. HP CNH BO
C 3 loi hp cnh bo l Hp c bn (Alert Box), Hp xc nhn (Confirm Box) v Hp nhp d liu (Prompt Box). 1. Hp c bn (Alert Box) C php: c s dng a ra mt thng bo n ngi dng. 2. Hp xc nhn (Confirm Box) C php: c s dng yu cu ngi s dng xc nhn mt yu cu m h thng ngh. 3. Hp nhp d liu (Prompt Box) C php: S dng yu cu ngi s dng nhp mt trng thng tin nht nh.

NHM SVTH:16

11

GVHD: NGUYN THNH THY

You might also like