Giao Trinh Java Script

Trang 1/108
Gio trnh JavaScript ***

CHNG 1 LI NI U..............................................................................................................4 CHNG 2 NHP MN JAVASCRIPT.........................................................................................5 2.1.Nhng JavaScript vo file HTML.....................................................................................5 2.3. Th <NOScript> v </NOSCRIPT>................................................................................7 2.3. Hin th mt dng text....................................................................................................8 2.4. Giao tip vi ngi s dng........................................................................................10 2.5. im li cc lnh v m rng......................................................................................13 CHNG 3 BIN TRONG JAVASCRIPT....................................................................................14 3.1. Bin v phn loI bin..................................................................................................14 3.2. Biu din t t trong JavaScript...................................................................................14 3.3. Kiu d liu..................................................................................................................14 1.1.1. KIu nguyn (Interger)........................................................................................16 1.1.2. Kiu du phy ng (Floating Point)...................................................................16 1.1.3. Kiu logic (Boolean)............................................................................................16 1.1.4. Kiu chui (String)...............................................................................................16 2. XY DNG CC BIU THC TRONG JAVASCRIPT...................................................17 NH NGHA V PHN LOI BIU THC..................................................................................17 CC TON T (OPERATOR)......................................................................................................17 2.1.1. Gn.....................................................................................................................17 2.1.2. So snh...............................................................................................................17 2.1.3. S hc.................................................................................................................18 2.1.4. Chui...................................................................................................................18 2.1.5. Logic....................................................................................................................19 2.1.6. Bitwise.................................................................................................................19 BI TP........................................................................................................................................19 2.1.7. Cu hi................................................................................................................19 2.1.8. Tr li..................................................................................................................20 3. CC LNH.......................................................................................................................21 CU LNH IU KIN.................................................................................................................21 CU LNH LP............................................................................................................................21 3.1.1. Vng lp for.........................................................................................................22 3.1.2. while....................................................................................................................23 3.1.3. Break...................................................................................................................23 3.1.4. continue...............................................................................................................23 CC CU LNH THAO TC TRN I TNG........................................................................23 3.1.5. for...in..................................................................................................................24 3.1.6. new......................................................................................................................25 3.1.7. this.......................................................................................................................26 3.1.8. with......................................................................................................................26
Trang 2/108
CC HM (FUNCTIONS).............................................................................................................27 CC HM C SN......................................................................................................................27 3.1.9. eval......................................................................................................................28 3.1.10. parseInt...............................................................................................................29 3.1.11. parseFloat...........................................................................................................29 MNG (ARRAY)...........................................................................................................................30 S KIN.......................................................................................................................................31 BI TP........................................................................................................................................34 3.1.12. Cu hi................................................................................................................34 3.1.13. Tr li..................................................................................................................35 4. CC I TNG TRONG JAVASCRIPT......................................................................37 I TNG NAVIGATOR...........................................................................................................38 I TNG WINDOW................................................................................................................39 4.1.1. Cc thuc tnh.....................................................................................................40 4.1.2. Cc Phng thc................................................................................................40 4.1.3. Cc Chng trnh x l s kin..........................................................................41 I TNG LOCATION..............................................................................................................41 I TNG FRAME...................................................................................................................41 4.1.4. Cc thuc tnh.....................................................................................................41 4.1.5. Cc Phng thc................................................................................................41 4.1.6. S dng Frame...................................................................................................41 I TNG DOCUMENT...........................................................................................................45 4.1.7. Cc thuc tnh.....................................................................................................45 4.1.8. Cc Phng thc................................................................................................45 I TNG ANCHORS..............................................................................................................45 I TNG FORMS...................................................................................................................46 4.1.9. Cc thuc tnh.....................................................................................................46 4.1.10. Cc Phng thc................................................................................................46 4.1.11. Cc Chng trnh x l s kin..........................................................................46 I TNG HISTORY................................................................................................................46 4.1.12. Cc thuc tnh.....................................................................................................46 4.1.13. Cc Phng thc................................................................................................46 I TNG LINKS......................................................................................................................47 4.1.14. Cc thuc tnh.....................................................................................................47 4.1.15. Cc Chng trnh x l s kin..........................................................................47 I TNG MATH......................................................................................................................47 4.1.16. Cc thuc tnh.....................................................................................................47 4.1.17. Cc Phng thc................................................................................................47 I TNG DATE......................................................................................................................48 4.1.18. Cc Phng thc................................................................................................48 I TNG STRING..................................................................................................................49 4.1.19. Cc Phng thc................................................................................................49 CC PHN T CA I TNG FORM...................................................................................49 4.1.20. Thuc tnh type....................................................................................................50
Trang 3/108
4.1.21. 4.1.22. 4.1.23. 4.1.24. 4.1.25. 4.1.26. 4.1.27. 4.1.28. 5. Phn t button....................................................................................................50 Phn t checkbox...............................................................................................51 Phn t File Upload............................................................................................52 Phn t hidden....................................................................................................52 Phn t Password...............................................................................................53 Phn t radio......................................................................................................53 Phn t reset......................................................................................................54 Phn t select.....................................................................................................55
M HNH I TNG (OBJECT MODEL)....................................................................56
I TNG V THUC TNH....................................................................................................56 TO CC I TNG MI........................................................................................................56 5.1.1. S dng khi to i Tng...............................................................................56 5.1.2. S dng mt hm xy dng(Constructor Function)............................................56 5.1.3. Lp mc lc cho cc thuc tnh ca i tng....................................................56 5.1.4. nh ngha thm cc thuc tnh cho mt kiu i tng.....................................56 5.1.5. nh ngha cc cch thc....................................................................................56 5.1.6. S dng cho cc tham chiu i tng (Object References).............................56 5.1.7. Xo i tng.....................................................................................................56 6. 7. BNG TNG KT CC T KHO.................................................................................56 TNG KT.......................................................................................................................56
Trang 4/108
CHNG 1 LI NI U
Vi HTML and Microsoft FrontPage bn bit cch to ra trang Web - tuy nhin ch mi mc biu din thng tin ch cha phi l cc trang Web ng c kh nng p ng cc s kin t pha ngi dng. Hng Netscape a ra ngn ng script c tn l LiveScript thc hin chc nng ny. Sau ngn ng ny c i tn thnh JavaScript tn dng tnh i chng ca ngn ng lp trnh Java. Mc d c nhng im tng ng gia Java v JavaScript, nhng chng vn l hai ngn ng ring bit. JavaScript l ngn ng di dng script c th gn vi cc file HTML. N khng c bin dch m c trnh duyt din dch. Khng ging Java phi chuyn thnh cc m d bin dch, trnh duyt c JavaScript di dng m ngun. Chnh v vy bn c th d dng hc JavaScript qua v d bi v bn c th thy cch s dng JavaScript trn cc trang Web. JavaScript l ngn ng da trn i tng, c ngha l bao gm nhiu kiu i tng, v d i tng Math vi tt c cc chc nng ton hc. Tuy vy JavaScript khng l ngn ng hng i tng nh C++ hay Java do khng h tr cc lp hay tnh tha k. JavaScript c th p ng cc s kin nh ti hay loi b cc form. Kh nng ny cho php JavaScript tr thnh mt ngn ng script ng. Ging vi HTML v Java, JavaScript c thit k c lp vi h iu hnh. N c th chy trn bt k h iu hnh no c trnh duyt h tr JavaScript. Ngoi ra JavaScript ging Java kha cnh an ninh: JavaScript khng th c v vit vo file ca ngi dng. Cc trnh duyt web nh Nescape Navigator 2.0 tr i c th hin th nhng cu lnh JavaScript c nhng vo trang HTML. Khi trnh duyt yu cu mt trang, server s gi y ni dung ca trang , bao gm c HTML v cc cu lnh JavaScript qua mng ti client. Client s c trang t u n cui, hin th cc kt qu ca HTML v x l cc cu lnh JavaScript khi no chng xut hin. Cc cu lnh JavaScript c nhng trong mt trang HTML c th tr li cho cc s kin ca ngi s dng nh kch chut, nhp vo mt form v iu hng trang. V d bn c th kim tra cc gi tr thng tin m ngi s dng a vo m khng cn n bt c mt qu trnh truyn trn mng no. Trang HTML vi JavaScript c nhng s kim tra cc gi tr c a vo v s thng bo vi ngi s dng khi gi tr a vo l khng hp l. Mc ch ca phn ny l gii thiu v ngn ng lp trnh JavaScript bn c th vit cc script vo file HTML ca mnh.
Trang 5/108
CHNG 2 NHP MN JAVASCRIPT

2.1.NHNG JAVASCRIPT VO FILE HTML Bn c th nhng JavaScript vo mt file HTML theo mt trong cc cch sau y: S dng cc cu lnh v cc hm trong cp th <SCRIPT> S dng cc file ngun JavaScript S dng mt biu thc JavaScript lm gi tr ca mt thuc tnh HTML S dng th s kin (event handlers) trong mt th HTML no Trong , s dng cp th <SCRIPT>...</SCRIPT> v nhng mt file ngun JavaScript l c s dng nhiu hn c. 2.1.1.S dng th SCRIPT
Ch : Ghi ch khn g c t trong cp th
Script c a vo file HTML bng cch s dng cp th <SCRIPT> v </SCRIPT>. Cc th <SCRIPT> c th xut hin trong phn <HEAD> hay <BODY> ca file HTML. Nu t trong phn <HEAD>, n s c ti v sn sng trc khi phn cn li ca vn bn c ti. Thuc tnh duy nht c nh ngha hin thi cho th <SCRIPT> l LANGUAGE= dng xc nh ngn ng script c s dng. C hai gi tr c nh ngha l "JavaScript" v "VBScript". Vi Chng trnh vit bng JavaScript bn s dng c php sau :
<SCRIPT LANGUAGE=JavaScript> // INSERT ALL JavaScript HERE </SCRIPT>
im khc nhau gia c php vit cc ghi ch gia HTML v JavaScript l cho php bn n cc m JavaScript trong cc ghi ch ca file HTML, cc trnh duyt c khng h tr cho JavaScript c th c c n nh trong v d sau y:
<SCRIPT LANGUAGE=JavaScript>  </SCRIPT>
Dng cui cng ca script cn c du // trnh duyt khng din dch dng ny di dng m JavaScript. Cc v d trong Chng ny khng cha c im n ca JavaScript m c th d hiu hn. 2.1.2. S dng mt file ngun JavaScript
Trang 6/108 Thuc tnh SRC ca th <SCRIPT> cho php bn ch r file ngun JavaScript c s dng (dng Phng php ny hay hn nhng trc tip mt on lnh JavaScript vo trang HTML). C php:
<SCRIPT SRC="file_name.js"> .... </SCRIPT>
Thuc tnh ny ry hu dng cho vic chia s cc hm dng chung cho nhiu trang khc nhau. Cc cu lnh JavaScript nm trong cp th <SCRIPT> v </SCRIPT> c cha thuc tinh SRC tr khi n c li. V d bn mun a dng lnh sau vo gia cp th <SCRIPT SRC="..."> v </SCRIPT>:
document.write("Khng tm thy file JS a vo!");
Thuc tnh SRC c th c nh r bng a ch URL, cc lin kt hoc cc ng dn tuyt i, v d:

<SCRIPT SRC=" http://cse.com.vn ">
Cc file JavaScript bn ngoi khng c cha bt k th HTML no. Chng ch c cha cc cu lnh JavaScript v nh ngha hm. Tn file ca cc hm JavaScript bn ngoi cn c ui .js, v server s phi nh x ui .js ti kiu MIME application/x-javascript. l nhng g m server gi tr li phn Header ca file HTML. nh x ui ny vo kiu MIME, ta thm dng sau vo file mime.types trong ng dn cu hnh ca server, sau khi ng li server:
Ch Khi bn mu n ch ra mt
type=application/x-javascript
Nu server khng nh x c ui .js ti kiu MIME application/x-javascript , Navigator s ti file JavaScript c ch ra trong thuc tnh SRC v khng ng cch. Trong v d sau, hm bar c cha xu "left" nm trong mt cp du nhy kp:
function bar(widthPct){ document.write(" <HR ALIGN='LEFT' WIDTH="+widthPct+"%>") }
2.3. TH <NOSCRIPT> V </NOSCRIPT> Cp th ny dng nh r ni dung thng bo cho ngi s dng bit trnh duyt khng h tr JavaScript. Khi trnh duyt s khng hiu th <NOSCRIPT> v n b l i, cn on m nm trong cp th ny s c Navigator hin th. Ngc li, nu trnh duyt c h tr JavaScript th on m trong cp th <NOSCRIPT> s c b qua. Tuy nhin, iu ny cng c th xy ra nu ngi s dng khng s dng JavaScript trong trnh duyt ca mnh bng cch tt n i trong hp Preferences/Advanced. V d:
Trang 7/108
<NOSCRIPT> <B> Trang ny c s dng JavaScript. Do bn cn s dng trnh duyt Netscape Navigator t version 2.0 tr i! <BR> <A HREF="http://home.netscape.com/comprd/mirror/index.html"> Hy kch chut vo y ti v phin bn Netscape mi hn </A> </BR> Nu bn s dng trnh duyt Netscape t 2.0 tr i m vn c c dng ch ny th hy bt Preferences/Advanced/JavaScript ln </NOSCRIPT>
Hnh 2.3: Minh ho th NOSCRIPT 2.3. HIN TH MT DNG TEXT Trong hu ht cc ngn ng lp trnh, mt trong nhng kh nng c s l hin th ra mn hnh mt dng text. Trong JavaScript, ngi lp trnh cng c th iu khin vic xut ra mn hnh ca client mt dng text tun t trong file HTML. JavaScript s xc nh im m n s xut ra trong file HTML v dng text kt qu s c dch nh cc dng HTML khc v hin th trn trang. Hn na, JavaScript cn cho php ngi lp trnh sinh ra mt hp thng bo hoc xc nhn gm mt hoc hai nt. Ngoi ra, dng text v cc con s cn c th hin th trong trng TEXT v TEXTAREA ca mt form. Trong phn ny, ta s hc cch thc write() v writeln() ca i tng document.
Trang 8/108 i tng document trong JavaScript c thit k sn hai cch thc xut mt dng text ra mn hnh client: write() v writeln(). Cch gi mt cch thc ca mt i tng nh sau:
object_name.property_name
D liu m cch thc dng thc hin cng vic ca n c a vo dng tham s, v d:
document.write("Test"); document.writeln('Test');
Cch thc write() xut ra mn hnh xu Text nhng khng xung dng, cn cch thc writeln() sau khi vit xong dng Text t ng xung dng. Hai cch thc ny u cho php xut ra th HTML.
V d: Cch thc write() xut ra th HTML

<HTML> <HEAD> <TITLE>Ouputting Text</TITLE> </HEAD> <BODY> This text is plain.<BR> <B> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </BODY> </HTML>
Trang 9/108
V d: S khc nhau ca write() v writeln():

<PRE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </PRE>
Khi duyt s c kt qu:
Trang 10/108
Hnh 2.5: S khc nhau ca write() v writeln() 2.4. GIAO TIP VI NGI S DNG JavaScript h tr kh nng cho php ngi lp trnh to ra mt hp hi thoi. Ni dung ca hp hi thoi ph thuc vo trang HTML c cha on script m khng lm nh hng n vic xut ni dung trang. Cch n gin lm vic l s dng cch thc alert(). s dng c cch thc ny, bn phi a vo mt dng text nh khi s dng document.write() v document.writeln() trong phn trc. V d: alert("Nhn vo OK tip tc"); Khi file s ch cho n khi ngi s dng nhn vo nt OK ri mi tip tc thc hin Thng thng, cch thc alert() c s dng trong cc trng hp: Thng tin a v form khng hp l Kt qu sau khi tnh ton khng hp l Khi dch v cha sn sng truy nhp d liu
Trang 11/108
Tuy nhin cch thc alert() mi ch cho php thng bo vi ngi s dng ch cha thc s giao tip vi ngi s dng. JavaScript cung cp mt cch thc khc giao tip vi ngi s dng l promt(). Tng t nh alert(), prompt() to ra mt hp hi thoi vi mt dng thng bo do bn a vo, nhng ngoi ra n cn cung cp mt trng nhp d liu vo. Ngi s dng c th nhp vo trng ri kch vo OK. Khi , ta c th x l d liu do ngi s dng va a vo. V d: Hp hi thoi gm mt dng thng bo, mt trng nhp d liu, mt nt OK v mt nt Cancel Chng trnh ny s hi tn ngi dng v sau s hin th mt thng bo ngn s dng tn mi a vo. V d c lu vo file Hello.html
<HTML> <HEAD> <TITLE> JavaScript Exemple </TITLE> <SCRIPT LANGUAGE= JavaScript> var name=window.prompt(Hello! Whats your name ?,); document.write(Hello + name + ! I hope you like JavaScript ); </SCRIPT> </HEAD> <BODY> </BODY> </HTML>
Hnh2.1: Hin th ca s nhp tn Khi duyt c kt qu:
Trang 12/108 V d ny hin th du nhc nhp vo tn vi Phng thc window.prompt. Gi tr t c s c ghi trong bin c tn l name. Bin name c kt hp vi cc chui khc v c hin th trong ca s ca trnh duyt nh Phng thc document.write.
Hnh 2.2: Hin th li cho ngi nhp H H
By gi bn c tng v cc chc nng c th t c qua JavaScript, chng ta hy tip tc tm hiu thm v chnh ngn ng ny. 2.5. IM LI CC LNH V M RNG
LNH/M RNG SCRIPT SRC KIU th HTML Thuc tnh ca th SCRIPT thuc tnh ca th SCRIPT Ghi ch trong JavaScript Ghi ch trong M T Hp cha cc lnh JavaScript Gi a ch ca file JavaScript bn ngoi. File ny phi c phn ui .js nh r ngn ng script c s dng (JavaScript hoc VBScript) nh du ghi ch mt dng trong on script
LANGUAGE
// /*...*/
nh du ghi ch mt khi trong on script
Trang 13/108
JavaScript document.write() document.writeln() alert() cch thc JavaScript Cch thc JavaScript Cch thc ca JavaScript Cch thc JavaScript Xut ra mt xu trn ca s hin thi mt cch tun t theo file HTML c on script Tng t cch thc document.write() nhng vit xong t xung dng. Hin th mt dng thng bo trn hp hi thoi
promt()
Hin th mt dng thng bo trong hp hi thoi ng thi cung cp mt trng nhp d liu ngi s dng nhp vo.
Trang 14/108
CHNG 3 BIN TRONG JAVASCRIPT

3.1. BIN V PHN LOI BIN Tn bin trong JavaScript phi bt u bng ch hay du gch di. Cc ch s khng c s dng m u tn mt bin nhng c th s dng sau k t u tin. Phm vi ca bin c th l mt trong hai kiu sau: Bin ton cc: C th c truy cp t bt k u trong ng dng. c khai bo nh sau :
x = 0;
Bin cc b: Ch c truy cp trong phm vi Chng trnh m n khai bo. Bin cc b c khai bo trong mt hm vi t kho var nh sau:
var x = 0;
Bin ton cc c th s dng t kho var, tuy nhin iu ny khng thc s cn thit. 3.2. BIU DIN T T TRONG JAVASCRIPT
Ch Khc vi C, trong Java Scrip
T t l cc gi tr trong Chng trnh khng thay i. Sau y l cc v d v t t:

8 The dog ate my shoe true
3.3. KIU D LIU
Khc vi C++ hay Java, JavaScript l ngn ng c tnh nh kiu thp. iu ny c ngha l khng phi ch ra kiu d liu khi khai bo bin. Kiu d liu c t ng chuyn thnh kiu ph hp khi cn thit. V d file Variable.Html:
<HTML> <HEAD> <TITLE> Datatype Example </TITLE> <SCRIPT LANGUAGE= "JavaScript"> var fruit='apples'; var numfruit=12; numfruit = numfruit + 20; var temp ="There are " + numfruit + " " + "."; document.write(temp); </SCRIPT> </HEAD> <BODY> </BODY>
</HTML> Cc trnh duyt h tr JavaScript s x l chnh xc v d trn v a ra kt qu di y:
Trang 15/108
Hnh 3.1: qu ca x l d Trnh din dch JavaScript s xem bin numfruit c kiu nguyn khi cng vi 20 v c kiu chui khi kt hp vi bin temp. Trong JavaScript, c bn kiu d liu sau y: kiu s nguyn, kiu du phy ng, kiu logic v kiu chui. 1.1.1. KIU NGUYN (INTERGER) S nguyn c th c biu din theo ba cch: H c s 10 (h thp phn) - c th biu din s nguyn theo c s 10, ch rng ch s u tin phi khc 0. H c s 8 (h bt phn) - s nguyn c th biu din di dng bt phn vi ch s u tin l s 0. H c s 16 (h thp lc phn) - s nguyn c th biu din di dng thp lc phn vi hai ch s u tin l 0x. 1.1.2. KIU DU PHY NG (FLOATING POINT) Mt literal c kiu du phy ng c 4 thnh phn sau: Phn nguyn thp phn. Du chm thp phn (.). Phn d. Phn m.
Trang 16/108 phn bit kiu du phy ng vi kiu s nguyn, phi c t nht mt ch s theo sau du chm hay E. V d:
9.87 -0.85E4 9.87E14 .98E-3
1.1.3. KIU LOGIC (BOOLEAN) Kiu logic c s dng ch hai iu kin : ng hoc sai. Min gi tr ca kiu ny ch c hai gi tr true. false. 1.1.4. KIU CHUI (STRING) Mt literal kiu chui c biu din bi khng hay nhiu k t c t trong cp du " ... " hay '... '. V d:
The dog ran up the tree The dog barked 100
biu din du nhy kp ( " ), trong chui s dng ( \" ), v d:

document.write( \This text inside quotes.\ );
Trang 17/108
2. XY DNG JAVASCRIPT
CC
BIU
THC
TRONG
NH NGHA V PHN LOI BIU THC

Tp hp cc literal, bin v cc ton t nhm nh gi mt gi tr no c gi l mt biu thc (expression). V c bn c ba kiu biu thc trong JavaScript: S hc: Nhm lng gi gi tr s. V d (3+4)+(84.5/3) c nh gi bng 197.1666666667. Chui: Nhm nh gi chui. V d "The dog barked" + barktone + "!" l The dog barked ferociously!. Logic: Nhm nh gi gi tr logic. V d temp>32 c th nhn gi tr sai. JavaScript cng h tr biu thc iu kin, c php nh sau:
(condition) ? valTrue : valFalse
Nu iu kin condition c nh gi l ng, biu thc nhn gi tr valTrue, ngc li nhn gi tr valFalse. V d:
state = (temp>32) ? "liquid" : "solid"
Trong v d ny bin state c gn gi tr "liquid" nu gi tr ca bin temp ln hn 32; trong trng hp ngc li n nhn gi tr "solid".
CC TON T (OPERATOR)
Ton t c s dng thc hin mt php ton no trn d liu. Mt ton t c th tr li mt gi tr kiu s, kiu chui hay kiu logic. Cc ton t trong JavaScript c th c nhm thnh cc loi sau y: gn, so snh, s hc, chui, logic v logic bitwise. 2.1.1. GN Ton t gn l du bng (=) nhm thc hin vic gn gi tr ca ton hng bn phi cho ton hng bn tri. Bn cnh JavaScript cn h tr mt s kiu ton t gn rt gn. Kiu gn thng thng x=x+y x=x-y x=x*y x=x/y x=x%y 2.1.2. SO SNH Kiu gn rt gn x+=y x-=y x*=y x/=y x%=y
Trang 18/108 Ngi ta s dng ton t so snh so snh hai ton hng v tr li gi tr ng hay sai ph thuc vo kt qu so snh. Sau y l mt s ton t so snh trong JavaScript: == != > >= < <= Tr li gi tr ng nu ton hng bn tri bng ton hng bn phi Tr li gi tr ng nu ton hng bn tri khc ton hng bn phi Tr li gi tr ng nu ton hng bn tri ln hn ton hng bn phi Tr li gi tr ng nu ton hng bn tri ln hn hoc bng ton hng bn phi Tr li gi tr ng nu ton hng bn tri nh hn ton hng bn phi Tr li gi tr ng nu ton hng bn tri nh hn hoc bng ton hng bn phi
2.1.3. S HC Bn cnh cc ton t cng (+), tr (-), nhn (*), chia (/) thng thng, JavaScript cn h tr cc ton t sau y: var1% var2 var++ var-Ton t phn d, tr li phn d khi chia var1 cho var2 Ton t ph nh, c gi tr ph nh ton hng Ton t ny tng var ln 1 (c th biu din l ++var) Ton t ny gim var i 1 (c th biu din l --var)
Nu bn gn gi tr ca ton t + 2.1.4. CHUI Khi c s dng vi chui, ton t + c coi l kt hp hai chui, v d: "abc" + "xyz" c "abcxyz" 2.1.5. LOGIC JavaScript h tr cc ton t logic sau y:
Trang 19/108
expr1 && expr2 expr1 || expr2 ! expr
L ton t logic AND, tr li gi tr ng nu c expr1 v expr2 cng ng. L ton t logic OR, tr li gi tr ng nu t nht mt trong hai expr1 v expr2 ng. L ton t logic NOT ph nh gi tr ca expr.
2.1.6. BITWISE Vi cc ton t thao tc trn bit, u tin gi tr c chuyn di dng s nguyn 32 bit, sau ln lt thc hin cc php ton trn tng bit. & Ton t bitwise AND, tr li gi tr 1 nu c hai bit cng l 1. | Ton t bitwise OR, tr li gi tr 1 nu mt trong hai bit l 1. ^ Ton t bitwise XOR, tr li gi tr 1 nu hai bit c gi tr khc nhau Ngoi ra cn c mt s ton t dch chuyn bitwise. Gi tr c chuyn thnh s nguyn 32 bit trc khi dch chuyn. Sau khi dch chuyn, gi tr li c chuyn thnh kiu ca ton hng bn tri. Sau y l cc ton t dch chuyn: << Ton t dch tri. Dch chuyn ton hng tri sang tri mt s lng bit bng ton hng phi. Cc bit b chuyn sang tri b mt v 0 thay vo pha bn phi. V d: 4<<2 tr thnh 16 (s nh phn 100 tr thnh s nh phn 10000) >> Ton t dch phi. Dch chuyn ton hng tri sang phi mt s lng bit bng ton hng phi. Cc bit b chuyn sang phi b mt v du ca ton hng bn tri c gi nguyn. V d: 16>>2 tr thnh 4 (s nh phn 10000 tr thnh s nh phn 100) >>> Ton t dch phi c chn 0. Dch chuyn ton hng tri sang phi mt s lng bit bng ton hng phi. Bit du c dch chuyn t tri (ging >>). Nhng bit c dch sang phi b xo i. V d: -8>>>2 tr thnh 1073741822 (bi cc bit du tr thnh mt phn ca s). Tt nhin vi s dng kt qu ca ton t >> v >>> l ging nhau.
C mt s ton t dch chuyn bitwise rt gn: Kiu bitwise thng thng x = x << y x = x >> y x = x >>> y x=x&y x=x^y Kiu bitwise rt gn x << = y x - >> y x >>> = y x&=y x^=y
Trang 20/108 x=x|y x|=y
BI TP
2.1.7. CU HI Hy nh gi cc biu thc sau: 1. a. 7 + 5 b. "7" + "5" c. 7 == 7 d. 7 >= 5 e. 7 <= 7 2. f. (7 < 5) ? 7 : 5 g. (7 >= 5) && (5 > 5) h. (7 >= 5) || (5 > 5) 2.1.8. TR LI Cc biu thc c nh gi nh sau: 1. a. 12 b. "75" c. true d. true e. true 2. f. 5 g. false h. true
Trang 21/108
3.
CC LNH
C th chia cc lnh ca JavaScript thnh ba nhm sau: Lnh iu kin. Lnh lp. Lnh tho tc trn i tng.
CU LNH IU KIN
Cu lnh iu kin cho php Chng trnh ra quyt nh v thc hin cng vic no y da trn kt qu ca quyt nh. Trong JavaScript, cu lnh iu kin l if...else
if ... else
Cu lnh ny cho php bn kim tra iu kin v thc hin mt nhm lnh no y da trn kt qu ca iu kin va kim tra. Nhm lnh sau else khng bt buc phi c, n cho php ch ra nhm lnh phi thc hin nu iu kin l sai. C php
if ( <iu kin> ) { //Cc cu lnh vi iu kin ng } else { //Cc cu lnh vi iu kin sai }
V d:
if (x==10){ document.write(x bng 10, t li x bng 0.); x = 0; } else document.write(x khng bng 10.);
K t { v
CU LNH LP
Cu lnh lp th hin vic lp i lp li mt on m cho n khi biu thc iu kin c nh gi l ng. JavaScipt cung cp hai kiu cu lnh lp: for loop
Trang 22/108 while loop
3.1.1. VNG LP FOR Vng lp for thit lp mt biu thc khi u - initExpr, sau lp mt on m cho n khi biu thc <iu kin> c nh gi l ng. Sau khi kt thc mi vng lp, biu thc incrExpr c nh gi li. C php: for (initExpr; <iu kin> ; incrExpr){ //Cc lnh c thc hin trong khi lp } V d:
<HTML> <HEAD> <TITLE>For loop Example </TITLE> <SCRIPT LANGUAGE= "JavaScript"> for (x=1; x<=10 ; x++) { y=x*25; document.write("x ="+ x +";y= "+ y + "<BR>"); } </SCRIPT> </HEAD> <BODY></BODY> </HTML>
Trang 23/108 Hnh 5.1: qu ca lnh
V d ny lu vo file for_loop.Html. Vng lp ny s thc hin khi m lnh cho n khi x>10. 3.1.2. WHILE Vng lp while lp khi lnh chng no <iu kin> cn c nh gi l ng C php: while (<iu kin>) { //Cc cu lnh thc hin trong khi lp } V d:
x=1; while (x<=10){ y=x*25; document.write("x="+x +"; y = "+ y + "<BR>"); x++; }
Kt qu ca v d ny ging nh v d trc. 3.1.3. BREAK Cu lnh break dng kt thc vic thc hin ca vng lp for hay while. Chng trnh c tip tc thc hin ti cu lnh ngay sau ch kt thc ca vng lp. C php
break;
on m sau lp cho n khi x ln hn hoc bng 100. Tuy nhin nu gi tr x a vo vng lp nh hn 50, vng lp s kt thc V d:
Trang 24/108
while (x<100) { if (x<50) break; x++; }
3.1.4. CONTINUE Lnh continue ging lnh break nhng khc ch vic lp c kt thc v bt u t u vng lp. i vi vng lp while, lnh continue iu khin quay li <iu kin>; vi for, lnh continue iu khin quay li incrExpr. C php
continue;
V d: on m sau tng x t 0 ln 5, nhy ln 8 v tip tc tng ln 10

x=0; while (x<=10) { document.write(Gi tr ca x l:+ x+<BR>); if (x=5) { x=8; continue; } x++; }
CC CU LNH THAO TC TRN I TNG

JavaScript l mt ngn ng da trn i tng, do n c mt s cu lnh lm vic vi cc i tng. 3.1.5. FOR...IN Cu lnh ny c s dng lp tt c cc thuc tnh (properties) ca mt i tng. Tn bin c th l mt gi tr bt k, ch cn thit khi bn s dng cc thuc tnh trong vng lp. V d sau s minh ho iu ny C php
for (<variable> in <object>) { //Cc cu lnh }
V d V d sau s ly ra tt c cc thuc tnh ca i tng Window v in ra tn ca mi thuc tnh. Kt qu c minh ho trn hnh 5.2.
Trang 25/108
<HTML> <HEAD> <TITLE>For in Example </TITLE> <SCRIPT LANGUAGE= "JavaScript"> document.write("The properties of the Window object are: <BR>"); for (var x in window) document.write(" "+ x + ", "); </SCRIPT> </HEAD> <BODY> </BODY> </HTML>
Hnh 5.2: Kt qu ca lnh for...in
Trang 26/108 3.1.6. NEW Bin new c thc hin to ra mt th hin mi ca mt i tng C php
objectvar = new object_type ( param1 [,param2]... [,paramN])
V d sau to i tng person c cc thuc tnh firstname, lastname, age, sex. Ch rng t kho this c s dng ch i tng trong hm person. Sau ba th hin ca i tng person c to ra bng lnh new
<HTML> <HEAD> <TITLE>New Example </TITLE> <SCRIPT LANGUAGE= "JavaScript"> function person(first_name, last_name, age, sex){ this.first_name=first_name; this.last_name=last_name; this.age=age; this.sex=sex; } person1= new person("Thuy", "Dau Bich", "23", "Female"); person2= new person("Chung", "Nguyen Bao", "24", "Male"); person3= new person("Binh", "Nguyen Nhat", "24", "Male"); person4= new person("Hon", " Vn", "24", "Male"); document.write ("1. "+person1.last_name+" " + person1.first_name + "<BR>" ); document.write("2. "+person2.last_name +" "+ person2.first_name + "<BR>"); document.write("3. "+ person3.last_name +" "+ person3.first_name + "<BR>"); document.write("4. "+ person4.last_name +" "+ person4.first_name+"<BR>"); </SCRIPT> </HEAD> <BODY> </BODY>
Trang 27/108
Hnh 5.3: Kt qu ca v d lnh New K K

</HTML>
3.1.7. THIS T kho this c s dng ch i tng hin thi. i tng c gi thng l i tng hin thi trong Phng thc hoc trong hm. C php
this [.property]
C th xem v d ca lnh new. 3.1.8. WITH Lnh ny c s dng thit lp i tng ngm nh cho mt nhm cc lnh, bn c th s dng cc thuc tnh m khng cp n i tng. C php
with (object) { // statement }
V d: V d sau ch ra cch s dng lnh with thit lp i tng ngm nh l document v c th s dng Phng thc write m khng cn cp n i tng document
Trang 28/108
<HTML> <HEAD> <TITLE>With Example </TITLE> <SCRIPT LANGUAGE= "JavaScript"> with (document){ write(This is an exemple of the things that can be done <BR>); write(With the <B>with<B> statment. <P>); write(This can really save some typing); } </SCRIPT> </HEAD> <BODY> </BODY>
Hnh 5.4: Kt qu ca v d lnh with

</HTML>
CC HM (FUNCTIONS)
JavaScript cg cho php s dng cc hm. Mc d khng nht thit phi c, song cc hm c th c mt hay nhiu tham s truyn vo v mt gi tr tr v. Bi v JavaScript l ngn ng c tnh nh kiu thp nn khng cn nh ngha kiu tham s v gi tr tr v
Trang 29/108 ca hm. Hm c th l thuc tnh ca mt i tng, trong trng hp ny n c xem nh l Phng thc ca i tng . Lnh function c s dng to ra hm trong JavaScript. C php
function fnName([param1],[param2],...,[paramN]) { //function statement }
V d: V d sau minh ho cch thc to ra v s dng hm nh l thnh vin ca mt i tng. Hm printStats c to ra l Phng thc ca i tng person
<HTML> <HEAD> <TITLE>Function Example </TITLE> <SCRIPT LANGUAGE= "JavaScript"> function person(first_name, last_name, age, sex) { this.first_name=first_name; this.last_name=last_name; this.age=age; this.sex=sex; this.printStats=printStats; } function printStats() { with (document) { write (" Name :" + this.last_name + " " + this.first_name + "<BR>" ); write("Age :"+this.age+"<BR>"); write("Sex :"+this.sex+"<BR>"); } } person1= new person("Thuy", "Dau Bich", "23", "Female"); person2= new person("Chung", "Nguyen Bao", "24", "Male"); person3= new person("Binh", "Nguyen Nhat", "24", "Male"); person4= new person("Hoan", "Do Van", "23", "Male"); person1.printStats(); person2.printStats(); person3.printStats(); person4.printStats(); </SCRIPT> </HEAD> <BODY> </BODY> </HTML>
Trang 30/108
Hnh 8: V d v hm
Hn h 5.5: JavaScript c mt s mt i tng no: 3.1.9. EVAL
CC HM C SN
hm c sn, gn trc tip vo chnh ngn ng v khng nm trong eval parseInt parseFloat
Hm ny c s dng nh gi cc biu thc hay lnh. Biu thc, lnh hay cc i tng ca thuc tnh u c th c nh gi. c bit ht sc hu ch khi nh gi cc biu thc do ngi dng a vo (ngc li c th nh gi trc tip). C php: returnval=eval (bt k biu thc hay lnh hp l trong Java) V d:
<HTML>
Trang 31/108
<HEAD> <TITLE>Eval Example </TITLE> <SCRIPT LANGUAGE= "JavaScript"> var string=10+ Math.sqrt(64); document.write(string+ =+ eval(string)); </SCRIPT> </HEAD> <BODY> </BODY> </HTML>
Hnh 5.6 V d hm Eval V V
3.1.10. PARSEINT Hm ny chuyn mt chui s thnh s nguyn vi c s l tham s th hai (tham s ny khng bt buc). Hm ny thng c s dng chuyn cc s nguyn sang c s 10 v m bo rng cc d liu c nhp di dng k t c chuyn thnh s trc khi tnh ton. Trong trng hp d liu vo khng hp l, hm parseInt s c v chuyn dng chui n v tr n tm thy k t khng phi l s. Ngoi ra hm ny cn ct du phy ng. C php
parseInt (string, [, radix])
Trang 32/108 V d:
<HTML> <HEAD> <TITLE> perseInt Exemple </TITLE> <SCRIPT LANGUAGE= "JavaScript"> document.write("Converting 0xC hex to base-10: " + parseInt(0xC,10) + "<BR>"); document.write("Converting 1100 binary to base-10: " + parseInt(1100,2) + "<BR>"); </SCRIPT> </HEAD> <BODY> </BODY> </HTML>
Hnh 5.7: V d parInt 3.1.11. PARSEFLOAT Hm ny ging hm parseInt nhng n chuyn chui thnh s biu din di dng du phy ng. C php
parseFloat (string)
V d:
Trang 33/108 V d sau minh ho cch thc x l ca parseFloat vi cc kiu chui khc nhau. Hnh 5.8 minh ha kt qu
<HTML> <HEAD> <TITLE> perseFload Exemple </TITLE> <SCRIPT LANGUAGE= "JavaScript"> document.write("This script will show how diffrent strings are "); document.write("Converted using parseFloat<BR>"); document.write("137= " + parseFloat("137") + "<BR>"); document.write("137abc= " + parseFloat("137abc") + "<BR>"); document.write("abc137= " + parseFloat("abc137") + "<BR>"); document.write("1abc37= " + parseFloat("1abc37") + "<BR>"); </SCRIPT> </HEAD> <BODY> </BODY>
</HTML>
MNG (ARRAY)
Mc d JavaScript khng h tr cu trc d liu mng nhng Netscape to ra Phng thc cho php bn t to ra cc hm khi to mng nh sau:
function InitArray(NumElements){ this.length = numElements; for (var x=1; x<=numElements; x++){ this[x]=0
Hnh 5.8 : Kt qu ca v d parseFloat
Trang 34/108
} return this; }
N to ra mt mng vi kch thc xc nh trc v in cc gi tr 0. Ch rng thnh phn u tin trong mng l di mng v khng c s dng. to ra mt mng, khai bo nh sau:
myArray = new InitArray (10)
N to ra cc thnh phn t myArray[1] n myArray[10] vi gi tr l 0. Gi tr cc thnh phn trong mng c th c thay i nh sau:
myArray[1] = "Ngh An" myArray[2] = "Lo"
Sau y l v d y :
<HTML> <HEAD> <TITLE> Array Exemple </TITLE> <SCRIPT LANGUAGE= "JavaScript"> function InitArray(numElements) { this.length = numElements; for (var x=1; x<=numElements; x++){ this[x]=0 } return this; } myArray = new InitArray(10); myArray[1] = "Ngh An"; myArray[2] = "H Ni"; document.write(myArray[1] + "<BR>"); document.write(myArray[2] + "<BR>"); </SCRIPT> </HEAD> <BODY> </BODY> </HTML>
Trang 35/108
Hnh 5.9: V d mng
S KIN
JavaScript l ngn ng nh hng s kin, ngha l s phn ng trc cc s kin xc nh trc nh kch chut hay ti mt vn bn. Mt s kin c th gy ra vic thc hin mt on m lnh (gi l cc Chng trinh x l s kin) gip cho Chng trnh c th phn ng mt cch thch hp.
Chng trnh x l s kin (Event handler): Mt on m hay mt hm

c thc hin phn ng trc mt s kin gi l Chng trnh x l s kin. Chng trnh x l s kin c xc nh l mt thuc tnh ca mt th HTML:
<tagName eventHandler = "JavaScript Code or Function">
V d sau gi hm CheckAge() mi khi gi tr ca trng vn bn thay i:

<INPUT TYPE=TEXT NAME="AGE" onChange="CheckAge()">
on m ca Chng trnh x l s kin khng l mt hm; n l cc lnh ca JavaScript cch nhau bng du chm phy. Tuy nhin cho mc ch vit thnh cc module nn vit di dng cc hm. Mt s Chng trnh x l s kin trong JavaScript:
onBlur onClick
Xy ra khi input focus b xo t thnh phn form Xy ra khi ngi dng kch vo cc thnh phn hay lin
Trang 36/108 kt ca form.

onChange onFocus onLoad onMouseOver onSelect onSubmit onUnLoad
Xy ra khi gi tr ca thnh phn c chn thay i Xy ra khi thnh phn ca form c focus(lm ni ln). Xy ra trang Web c ti. Xy ra khi di chuyn chut qua kt ni hay anchor. Xy ra khi ngi s dng la chn mt trng nhp d liu trn form. Xy ra khi ngi dng a ra mt form. Xy ra khi ngi dng ng mt trang
Sau y l bng cc Chng trnh x l s kin c sn ca mt s i tng. Cc i tng ny s c trnh by k hn trong phn sau. i tng Selection list Text Textarea Button Checkbox Radio button Hypertext link Clickable Imagemap area Reset button Submit button Document Window Framesets Form Image Chng trnh x l s kin c sn onBlur, onChange, onFocus onBlur, onChange, onFocus, onSelect onBlur, onChange, onFocus, onSelect onClick onClick onClick onClick, onMouseOver, onMouseOut onMouseOver, onMouseOut onClick onClick onLoad, onUnload, onError onLoad, onUnload, onBlur, onFocus onBlur, onFocus onSubmit, onReset onLoad, onError, onAbort
V d sau l mt on m script n gin ca Chng trnh x l s kin thm nh gi tr a vo trong trng text. Tui ca ngi s dng c nhp vo trong trng ny v Chng trnh x l s kin s thm nh tnh hp l ca d liu a vo. Nu khng hp l
Trang 37/108 s xut hin mt thng bo yu cu nhp li. Chng trnh x l s kin c gi mi khi trng AGE b thay i v focus chuyn sang trng khc. Hnh 5.10 minh ho kt qu ca v d ny
<HTML> <HEAD> <TITLE> An Event Handler Exemple </TITLE> <SCRIPT LANGUAGE= "JavaScript"> function CheckAge(form) { if ( (form.AGE.value<0)||(form.AGE.value>120) ) { alert("Tui nhp vo khng hp l! Mi bn nhp li"); form.AGE.value=0; } } </SCRIPT> </HEAD> <BODY> <FORM NAME="PHIEU_DIEU_TRA">
Nhp vo tn ca bn:<BR>
Tn <INPUT TYPE=TEXT NAME="TEN" MAXLENGTH=10 SIZE=10><BR> m <INPUT TYPE=TEXT NAME="DEM" MAXLENGTH=15 SIZE=10><BR> H <INPUT TYPE=TEXT NAME="HO" MAXLENGTH=10 SIZE=10><BR> Age <P> <INPUT TYPE=TEXT NAME="AGE" MAXLENGTH=3 onChange="CheckAge(PHIEU_DIEU_TRA)"><BR> SIZE=2
Bn thch ma no nht:<BR>
Ma xun<INPUT TYPE=RADIO NAME="MUA" VALUE="Mua xuan"> Ma h<INPUT TYPE=RADIO NAME="MUA" VALUE="Mua ha"> Ma thu<INPUT TYPE=RADIO NAME="MUA" VALUE="Mua thu"> Ma ng<INPUT TYPE=RADIO NAME="MUA" VALUE="Mua dong"> <P>
Hy chn nhng hot ng ngoi tri m bn yu thch:<BR>

i b<INPUT TYPE=CHECKBOX NAME="HOAT_DONG" VALUE="Di bo">
Trang 38/108
Trt tuyt<INPUT TYPE=CHECKBOX NAME="HOAT_DONG" VALUE="Truot tuyet"> Th thao di nc<INPUT TYPE=CHECKBOX VALUE="Duoi nuoc"> NAME="HOAT_DONG"
p xe<INPUT TYPE=CHECKBOX NAME="HOAT_DONG" VALUE="Dap xe"> <P> <INPUT TYPE=SUBMIT> <INPUT TYPE=RESET> </FORM> </BODY> </HTML>
Hnh 5.10: Minh ho cho v d Event Handler
BI TP
3.1.12. CU HI 1. Vit mt on lnh JavaScript s dng cch thc confirm() v cu lnh if...then thc hin:
Trang 39/108 Hi ngi s dng c mun nhn c mt li cho khng Nu c th hin nh wellcome.jpg v mt li cho. Nu khng th vit ra mt li thng bo 2. Vit mt on lnh JavaScript thc hin: Hi ngi s dng: "10+10 bng bao nhiu?" Nu ng th hi tip: C mun tr li cu th hai khng?" Nu mun th hi: "10*10 bng bao nhiu?" nh gi kt qu bng biu thc logic sau vit ra mn hnh: ng: "CORRECT"; Sai: "INCORRECT" Gi : S dng bin ton cc lu kt qu ng so snh vi kt qa a vo. 3. Cu lnh no trong cc cu sau y s dng sai th s kin a. <BODY onClick="doSomething();"> b. <INPUT TYPE=text onFocus="doSomething();"> c. <INPUT TYPE=textarea onLoad="doSomething();"> d. <BODY onUnload="doSomething();"> e. <FORM onLoad="doSomething();"> f. <FORM onSubmit="doSomething();"> 4. iu g xy ra khi thc hin script sau:
<HTML> <HEAD> <TITLE>Exercise 5.4</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </HEAD> <BODY onLoad="welcome();" onUnload="farewell();";> This is my page! </BODY> </HTML>
5. S dng vng lp while m phng cc vng lp for sau: a.

for (j = 4; j > 0; j --) {
Trang 40/108
document.writeln(j + "<BR>"); }
b.
for (k = 1; k <= 99; k = k*2) { k = k/1.5; }
c.
for (num = 0; num <= 10; num ++) { if (num == 8) break; }
3.1.13. TR LI 1. S dng cch thc confirm() v cu trc if...then:

<HTML> <HEAD> <TITLE>Execise 5.1</TITLE> <HEAD> <BODY> <P> <SCRIPT LANGUAGE="JavaScript"> var conf=confirm("Click OK to see a wellcome message!") if (conf){ document.write("<IMG SRC='wellcome.jpg'>"); document.write("<BR>Wellcome you come to CSE's class"); } else document.write("What a pity! You have just click Cancel button"); </SCRIPT> </P> </BODY> </HTML>
2. Thc hin hi ngi s dng:

<HTML> <HEAD> <TITLE>Exercise 3.3</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </BODY> </HTML>
3. Cc cu sai: a, c, e. Cc cu ng: b, d, f 4. Khi Chng trnh c chy (load), hm wellcome s thc hin hi tn ngi s dng, lu tn vo bin ton cc name. Khi ngi s dng sang mt a ch URL khc, hm farewell() s thc hin gi mt li cm n ti ngi s dng. 5. S dng vng lp while nh sau: a.
j = 5; while (--j > 0) { document.writeln(j + "<BR>"); }
Trang 42/108 b.
k = 1; while (k <= 99) { k = k * 2 / 1.5; }
c.
num = 0; while (num <= 10) { if (num++ == 8) break; }
Trang 43/108
4.
CC I TNG TRONG JAVASCRIPT
Nh ni JavaScript l ngn ng lp trnh da trn i tng, nhng khng hng i tng bi v n khng h tr cc lp cng nh tnh tha k. Phn ny ni v cc i tng trong JavaScript v hnh 6.1 ch ra s phn cp cc i tng. Trong s phn cp cc i tng ca JavaScript, cc i tng con thc s l cc thuc tnh ca cc i tng b m. Trong v d v Chng trnh x l s kin trc y form tn PHIEU_DIEU_TRAl thuc tnh ca i tng document v trng text AGE l thuc tnh ca form PHIEU_DIEU_TRA. tham chiu n gi tr ca AGE, bn phi s dng:
document.PHIEU_DIEU_TRA.AGE.value
Cc i tng c thuc tnh (properties), Phng thc (methods), v cc Chng trnh x l s kin (event handlers) gn vi chng. V d i tng document c thuc tnh title phn nh ni dung ca th <TITLE> ca document. Bn cnh bn thy Phng thc document.write c s dng trong nhiu v d a vn bn kt qu ra document. i tng cng c th c cc Chng trnh x l s kin. V d i tng link c hai Chng trnh x l s kin l onClick v onMouseOver. onClick c gi khi c i tng link c kch, onMouseOver c gi khi con tr chut di chuyn qua link. Khi bn ti mt document xung Navigator, n s to ra mt s i tng cng vi nhng gi tr cc thuc tnh ca chng da trn file HTML ca document v mt vi thng tin cn thit khc. Nhng i tng ny tn ti mt cch c cp bc v phn nh chnh cu trc ca file HTML .
Trang 44/108 Window Texturea Text Plugin Frame Layer Link document Image Area Location Anchor Applet History Plugin Form Checkbox Button Select Hnh 6.1: S 1 - Phn cp i tng Navigator S sau s minh ho s phn cp ca cc i tng ny Option FileUpload Mime Type Password Hidden Submit Reset Radio navigator
Trong s phn cp ny, cc i tng con chnh l cc thuc tnh ca mt i tng cha. V d nh mt form tn l form1 chnh l mt i tng con ca i tng document v c gi ti l document.form1 Tt c cc trang u c cc i tng sau y: navigator: c cc thuc tnh tn v phin bn ca Navigator ang c s dng, dng cho MIME type c h tr bi client v plug-in c ci t trn client. window: l i tng mc cao nht, c cc thuc tnh thc hin p dng vo ton b ca s. document: cha cc thuc tnh da trn ni dung ca document nh tn, mu nn, cc kt ni v cc forms.
Trang 45/108 location: c cc thuc tnh da trn a ch URL hin thi history: Cha cc thuc tnh v cc URL m client yu cu trc . Sau y s m t cc thuc tnh, Phng thc cng nh cc Chng trnh x l s kin cho tng i tng trong JavaScript.
I TNG NAVIGATOR
i tng ny c s dng t c cc thng tin v trnh duyt nh s phin bn. i tng ny khng c Phng thc hay Chng trnh x l s kin. Cc thuc tnh appCodeName AppName AppVersion userAgent Xc nh tn m ni ti ca trnh duyt (Atlas). Xc nh tn trnh duyt. Xc nh thng tin v phin bn ca i tng navigator. Xc nh header ca user - agent.
V d V d sau s hin th cc thuc tnh ca i tng navigator

<HTML> <HEAD> <TITLE> Navigator Object Exemple </TITLE> <SCRIPT LANGUAGE= "JavaScript"> document.write("appCodeName = "+navigator.appCodeName + "<BR>"); document.write("appName = "+navigator.appName + "<BR>"); document.write("appVersion = "+navigator.appVersion + "<BR>"); document.write("userAgent = "+navigator.userAgent + "<BR>"); </SCRIPT> </HEAD> <BODY> </BODY> </HTML>
Trang 46/108
Hn h 6.2:
I TNG WINDOW
i tng window nh ni trn l i tng mc cao nht. Cc i tng document, frame, v tr u l thuc tnh ca i tng window. 4.1.1. CC THUC TNH defaultStatus - Thng bo ngm nh hin th ln trn thanh trng thi ca ca s Frames - Mng xc nh tt c cc frame trong ca s. Length - S lng cc frame trong ca s cha m. Name - Tn ca ca s hin thi. Parent - i tng ca s cha m Self - Ca s hin thi. Status - c s dng cho thng bo tm thi hin th ln trn thanh thng thi ca s. c s dng ly hay t li thng bo trng thi v ghi ln defaultStatus. Top - Ca s trn cng. Window - Ca s hin thi. 4.1.2. CC PHNG THC
Trang 47/108 alert ("message") -Hin th hp hi thoi vi chui "message" v nt OK. clearTimeout(timeoutID) -Xa timeout do SetTimeout t. SetTimeout tr li timeoutID windowReference.close -ng ca s windowReference. confirm("message") -Hin th hp hi thoi vi chui "message", nt OK v nt Cancel. Tr li gi tr True cho OK v False cho Cancel. [windowVar = ][window]. open("URL", "windowName", [ "windowFeatures" ] ) - M ca s mi. prompt ("message" [,"defaultInput"]) - M mt hp hi thoi nhn d liu vo trng text. TimeoutID = setTimeout(expression,msec) - nh gi biu thc expresion sau thi gian msec. V d: S dng tn ca s khi gi ti n nh l ch ca mt form submit hoc trong mt Hipertext link (thuc tnh TARGET ca th FORM v A). Trong v d to ra mt ti ca s th hai, nh nt th nht m mt ca s rng, sau mt lin kt s ti file doc2.html xung ca s mi ri mt nt khc dng ng ca s th hai li, v d ny la vo file window.html:
<HTML> <HEAD> <TITLE>Frame Example </TITLE> </HEAD> <BODY> <FORM> <INPUT TYPE="button" VALUE="Open Second Window" onClick="msgWindow=window.open('','window2','resizable=no,width=200,heig ht=200')"> <P> <A HREF="doc2.html" TARGET="window2"> Load a file into window2 </A> </P> <INPUT TYPE="button" VALUE="Close Second Window" onClick="msgWindow.close()"> </FORM> </BODY> </HTML>
Trang 48/108
Hnh 6.3: Minh ho cho i tng ca s 4.1.3. CC CHNG TRNH X L S KIN onLoad - Xut hin khi ca s kt thc vic ti. onUnLoad - Xut hin khi ca s c loi b.
I TNG LOCATION
Cc thuc tnh ca i tng location duy tr cc thng tin v URL ca document hin thi. i tng ny hon ton khng c cc Phng thc v Chng trnh x l s kin i km. V d: http:// www.abc.com/ chap1/page2.html#topic3 Cc thuc tnh hash - Tn anchor ca v tr hin thi (v d topic3). Host - Phn hostname:port ca URL (v d www.abc.com ). Ch rng y thng l cng ngm nh v t khi c ch ra. Hostname - Tn ca host v domain (v d www.abc.com ). href - Ton b URL cho document hin ti. Pathname - Phn ng dn ca URL (v d /chap1/page2.html). Port - Cng truyn thng c s dng cho my tnh host, thng l cng ngm nh. Protocol - Giao thc c s dng (cng vi du hai chm) (v d http:). Search - Cu truy vn tm kim c th cui URL cho cc script CGI.
Trang 49/108
I TNG FRAME
Mt ca s c th c mt vi frame. Cc frame c th cun mt cch c lp vi nhau v mi frame c URL ring. frame khng c cc Chng trnh x l s kin. S kin onLoad v onUnLoad l ca i tng window. 4.1.4. CC THUC TNH frames - Mng tt c cc frame trong ca s. Name - Thuc tnh NAME ca th <FRAME> Length - S lng cc frame con trong mt frame. Parent - Ca s hay frame cha nhm frame hin thi. self - frame hin thi. Window - frame hin thi.
4.1.5. CC PHNG THC clearTimeout (timeoutID) - Xo timeout do setTimeout lp. SetTimeout tr li timeoutID. TimeoutID = setTimeout (expression,msec) - nh gi expression sau khi ht thi gian msec. 4.1.6. S DNG FRAME 4.1.6.1. a) To mt frame (create) to mt frame, ta s dng th FRAMESET. Mc ch ca th ny l nh ngha mt tp cc frame trong mt trang. V d1: to frame ( hnh 17)
<HTML> <HEAD> <TITLE>Frame Example </TITLE> <FRAMESET ROWS="90%,10%"> <FRAMESET COLS="30%,70%"> <FRAME SRC=CATEGORY.HTM NAME="ListFrame"> <FRAME SRC=TITLES.HTM NAME="contentFrame"> </FRAMESET > <FRAME SRC=NAVIGATOR.HTM NAME="navigateFrame"> </FRAMESET > </HEAD> <BODY> </BODY> </HTML>
S sau hin th cu trc ca cc frame: C 3 frame u trn cng mt ca s cha, mc d 2 trong s cc frame nm trong mt frameset khc.
Trang 50/108 Top listFrame (category.html) contentFrame (titles.html) navigatorFrame (navigator.html) Bn c th gi ti nhng frame trc bng cch s dng thuc tnh frames nh sau: listFrame chnh l top.frames[0] contentFrame chnh l top.frames[1] navigatorFrame chnh l top.frames[2]
Hnh 6.4: Kt qu vic to frame trong V d 2: Cng ging nh mt s la chn, bn c th to ra mt ca s ging nh v d trc nhng trong mi nh ca hai frame li c mt ca s cha ring t navigateFrame. Mc frameset cao nht c th c nh ngha nh sau:
<HTML> <HEAD>
Trang 51/108
<TITLE>Frame Example </TITLE> <FRAMESET ROWS="90%,10%"> <FRAME SRC=muske13.HTML NAME="upperFrame"> <FRAME SRC=NAVIGATOR.HTM NAME="navigateFrame"> </FRAMESET > </HEAD> <BODY> </BODY> </HTML>
Trong file muske13.html li tip tc t mt frameset:

<HTML> <HEAD> <TITLE>Frame Example </TITLE> <FRAMESET COLS="30%,70%"> <FRAME SRC=CATEGORY.HTM NAME="ListFrame"> <FRAME SRC=TITLES.HTM NAME="contentFrame"> </FRAMESET > </HEAD> <BODY> </BODY> </HTML>
Khi kt qu hin th ca v d 2 ging v d 1 nhng s phn cp ca cc frames li khc hn: top listFrame (category.html) upperFrame (muske13.html) contentFrame (titles.html) navigatorFrame (navigator.html) Bn c th gi ti cc frame trn bng cch s dng thuc tnh mng frames nh sau: upperFrame chnh l top.frames[0] navigatorFrame chnh l top.frames[1] listFrame chnh l upperFrame.frames[0] hoc top.frames[0].frames[0] contentFrame chnh l upperFrame.frames[1] hoc top.frames[0].frames[1] 4.1.6.2. b) Cp nht mt frame (update)
Trang 52/108 Bn c th cp nht ni dung ca mt frame bng cch s dng thuc tnh location t a ch URL v phi nh ch r v tr ca frame trong cu trc. Trong v d trn, nu bn thm mt dng sau vo navigatorFrame:
<INPUT TYPE="button" VALUE="Titles only" onClick="top.frames[0].location='artist.html'">
th khi nt Titles only c nhn, file artist.html s c ti vo upperFrame, v hai frame listFrame, contentFrame s b ng li nh chng cha bao gi tn ti.
I TNG DOCUMENT
i tng ny cha cc thng tin v document hin thi v cung cp cc Phng thc a thng tin ra mn hnh. i tng document c to ra bng cp th <BODY> v </BODY>. Mt s cc thuc tnh gn vi th <BODY>. Cc i tng anchor, forms, history, links l thuc tnh ca i tng document. Khng c cc Chng trnh x l s kin cho cc frame. S kin onLoad v onUnLoad l cho i tng window. 4.1.7. CC THUC TNH alinkColor - Ging nh thuc tnh ALINK. anchor - Mng tt c cc anchor trong document. bgColor - Ging thuc tnh BGCOLOR. cookie - S dng xc nh cookie. fgColor - Ging thuc tnh TEXT. forms - Mng tt c cc form trong document. lastModified - Ngy cui cng vn bn c sa. linkColor - Ging thuc tnh LINK. links - Mng tt c cc link trong document. location - URL y ca vn bn. referrer - URL ca vn bn gi n. title - Ni dung ca th <TITLE>. vlinkColor - Ging thuc tnh VLINK.
4.1.8. CC PHNG THC document.clear - Xo document hin thi. document.close - ng dng d liu vo v a ton b d liu trong b m ra mn hnh. document.open (["mineType"]) - M mt stream thu thp d liu vo ca cc phwong thc write v writeln. document.write(expression1 [,expression2]...[,expressionN]) - Vit biu thc HTML ln vn bn trng mt ca s xc nh. document.writeln (expression1 [,expression2] ... [,expressionN] ) Ging Phng thc trn nhng khi ht mi biu thc li xung dng.
Trang 53/108
I TNG ANCHORS
anchor l mt on vn bn trong document c th dng lm ch cho mt siu lin kt. N c xc nh bng cp th <A> v </A>. i tng anchor khng c thuc tnh, Phng thc cng nh Chng trnh x l s kin. Mng anchor tham chiu n mi anchor c tn trong document. Mi anchor c tham chiu bng cch:
document.anchors [index]
Mng anchor c mt thuc tnh duy nht l length xc nh s lng cc anchor trong document, n c th c xc nh nh sau:
document.anchors.length.
I TNG FORMS
Cc form c to ra nh cp th <FORM> v </FORM>. Phn ln cc thuc tnh ca i tng form phn nh cc thuc tnh ca th <FORM>. C mt vi phn t (elements) l thuc tnh ca i tng forms:
button checkbox hidden password radio reset select submit text textarea
Cc phn t ny s c trnh by sau. Nu document cha mt vi form, chng c th c tham chiu qua mng forms. S lng cc form c th c xc nh nh sau:
document.forms.length.
Mi mt form c th c tham chiu nh sau:

document.forms[index]
4.1.9. CC THUC TNH action thuc tnh ACTION ca th FORM. elements Mng cha tt c cc thnh phn trong mt form (nh checkbox, trng text, danh sch la chn encoding Xu cha kiu MIME c s dng m ho ni dung ca form gi cho server. length S lng cc thnh phn trong mt form. method Thuc tnh METHOD. target Xu cha tn ca ca s ch khi submit form
Trang 54/108 4.1.10. CC PHNG THC formName.submit () - Xut d liu ca mt form tn formName ti trang x l. Phng thc ny m phng mt click vo nt submit trn form. 4.1.11. CC CHNG TRNH X L S KIN onSubmit - Chng trnh x l s kin ny c gi khi ngi s dng chuyn d liu t form i.
I TNG HISTORY
i tng ny c s dng lu gi cc thng tin v cc URL trc c ngi s dng s dng. Danh sch cc URL c lu tr theo th t thi gian. i tng ny khng c Chng trnh x l s kin. 4.1.12. CC THUC TNH length - S lng cc URL trong i tng. 4.1.13. CC PHNG THC history.back() - c s dng tham chiu ti URL mi c thm trc y. history.forward() - c s dng tham chiu ti URL k tip trong danh sch. N s khng gy hiu ng g nu n cui ca danh sch. history.go (delta | "location") - c s dng chuyn ln hay chuyn xung delta bc hay di chun n URL xc nh bi location trong danh sch. Nu delta c s dng th vic dch chuyn ln pha trn khi delta dng v xung pha di khi delta m. nu s dng location, URL gn nht c cha location l chui con s c tham chiu.
I TNG LINKS
i tng link l mt on vn bn hay mt nh c xem l mt siu lin kt. Cc thuc tnh ca i tng link ch yu x l v URL ca cc siu lin kt. i tng link cng khng c Phng thc no. Mng link cha danh sch tt c cc lin kt trong document. C th xc nh s lng cc link qua document.links.length() C th tham chiu ti mt lin kt qa document.links [index] xc nh cc thuc tnh ca i tng link, c th s dng URL tng t: http://www.abc.com/chap1/page2.html#topic3 4.1.14. CC THUC TNH hash - Tn anchor ca v tr hin thi (v d topic3).
Trang 55/108 Host - Phn hostname:port ca URL (v d www.abc.com). Ch rng y thng l cng ngm nh v t khi c ch ra. Hostname - Tn ca host v domain (v d ww.abc.com). href - Ton b URL cho document hin ti. Pathname - Phn ng dn ca URL (v d /chap1/page2.html). port - Cng truyn thng c s dng cho my tnh host, thng l cng ngm nh. Protocol - Giao thc c s dng (cng vi du hai chm) (v d http:). Search - Cu truy vn tm kim c th cui URL cho cc script CGI. Target - Ging thuc tnh TARGET ca <LINK>. 4.1.15. CC CHNG TRNH X L S KIN onClick - Xy ra khi ngi s dng nhn vo link. onMouseOver - Xy ra khi con chut di chuyn qua link.
I TNG MATH
i tng Math l i tng ni ti trong JavaScript. Cc thuc tnh ca i tng ny cha nhiu hng s ton hc, cc hm ton hc, lng gic ph bin. i tng Math khng c Chng trnh x l s kin. Vic tham chiu ti number trong cc Phng thc c th l s hay cc biu thc c nh gi l s hp l. 4.1.16. CC THUC TNH E - Hng s Euler, khong 2,718. LN2 - logarit t nhin ca 2, khong 0,693. LN10 - logarit t nhin ca 10, khong 2,302. LOG2E - logarit c s 2 ca e, khong 1,442. PI - Gi tr ca , khong 3,14159. SQRT1_2 - Cn bc 2 ca 0,5, khong 0,707. SQRT2 - Cn bc 2 ca 2, khong 1,414.
4.1.17. CC PHNG THC Math.abs (number) - Tr li gi tr tuyt i ca number. Math.acos (number) - Tr li gi tr arc cosine (theo radian) ca number. Gi tr ca number phi nmg gia -1 v 1. Math.asin (number) - Tr li gi tr arc sine (theo radian) ca number. Gi tr ca number phi nmg gia -1 v 1. Math.atan (number) - Tr li gi tr arc tan (theo radian) ca number. Math.ceil (number) - Tr li s nguyn nh nht ln hn hoc bng number. Math.cos (number) - Tr li gi tr cosine ca number.
Trang 56/108 Math.exp (number) - Tr li gi tr e^ number, vi e l hng s Euler. Math.floor (number) - Tr li s nguyn ln nht nh hn hoc bng number. Math.log (number) - Tr li logarit t nhin ca number. Math.max (num1,num2) - Tr li gi tr ln nht gia num1 v num2 Math.min (num1,num2) - Tr li gi tr nh nht gia num1 v num2. Math.pos (base,exponent) - Tr li gi tr base lu tha exponent. Math.random (r) - Tr li mt s ngu nhin gia 0 v 1. Phwong thc ny ch thc hin c trn nn tng UNIX. Math.round (number) - Tr li gi tr ca number lm trn ti s nguyn gn nht. Math.sin (number) - Tr li sin ca number. Math.sqrt (number) - Tr li cn bc 2 ca number. Math.tan (number) - Tr li tag ca number.
I TNG DATE
i tng Date l i tng c sn trong JavaScript. N cung cp nhiu Phng thc c ch x l v thi gian v ngy thng. i tng Date khng c thuc tnh v Chng trnh x l s kin. Phn ln cc Phng thc date u c mt i tng Date i cng. Cc Phng thc gii thiu trong phn ny s dng i tng Date dateVar, v d:
dateVar = new Date ('August 16, 1996 20:45:04');
4.1.18. CC PHNG THC dateVar.getDate() - Tr li ngy trong thng (1-31) cho dateVar. dateVar.getDay() - Tr li ngy trong tun (0=ch nht,...6=th by) cho dateVar. dateVar.getHours() - Tr li gi (0-23) cho dateVar. dateVar.getMinutes() - Tr li pht (0-59) cho dateVar. dateVar.getSeconds() - Tr li giy (0-59) cho dateVar. dateVar.getTime() - Tr li s lng cc mili giy t 00:00:00 ngy 1/1/1970. dateVar.getTimeZoneOffset() - Tr li dch chuynbng pht ca gi a Phng hin ti so vi gi quc t GMT. dateVar.getYear()-Tr li nm cho dateVar. Date.parse (dateStr) - Phn tch chui dateStr v tr li s lng cc mili giy tnh t 00:00:00 ngy 01/01/1970. dateVar.setDay(day) - t ngy trong thng l day cho dateVar. dateVar.setHours(hours) - t gi l hours cho dateVar.
Trang 57/108 dateVar.setMinutes(minutes) - t pht l minutes cho dateVar. dateVar.setMonths(months) - t thng l months cho dateVar. dateVar.setSeconds(seconds) - t giy l seconds cho dateVar. dateVar.setTime(value) - t thi gian l value, trong value biu din s lng mili giy t 00:00:00 ngy 01/01/10970. dateVar.setYear(years) - t nm l years cho dateVar. dateVar.toGMTString() - Tr li chui biu din dateVar di dng GMT. dateVar.toLocaleString()-Tr li chui biu din dateVar theo khu vc thi gian hin thi. Date.UTC (year, month, day [,hours] [,minutes] [,seconds]) - Tr li s lng mili giy t 00:00:00 01/01/1970 GMT.
I TNG STRING
i tng String l i tng c xy dng ni ti trong JavaScript cung cp nhiu Phng thc thao tc trn chui. i tng ny c thuc tnh duy nht l di (length) v khng c Chng trnh x l s kin. 4.1.19. CC PHNG THC str.anchor (name) - c s dng to ra th <A> (mt cch ng). Tham s name l thuc tnh NAME ca th <A>. str.big() - Kt qu ging nh th <BIG> trn chui str. str.blink() - Kt qu ging nh th <BLINK> trn chui str. str.bold() - Kt qu ging nh th <BOLD> trn chui str. str.charAt(a) - Tr li k t th a trong chui str. str.fixed() - Kt qu ging nh th <TT> trn chui str. str.fontcolor() - Kt qu ging nh th <FONTCOLOR = color>. str.fontsize(size) - Kt qu ging nh th <FONTSIZE = size>. str.index0f(srchStr [,index]) - Tr li v tr trong chui str v tr xut hin u tin ca chui srchStr. Chui str c tm t tri sang phi. Tham s index c th c s dng xc nh v tr bt u tm kim trong chui. str.italics() - Kt qu ging nh th <I> trn chui str. str.lastIndex0f(srchStr [,index]) - Tr li v tr trong chui str v tr xut hin cui cng ca chui srchStr. Chui str c tm t phi sang tri. Tham s index c th c s dng xc nh v tr bt u tm kim trong chui. str.link(href) - c s dng to ra mt kt ni HTML ng cho chhui str. Tham s href l URL ch ca lin kt. str.small() - Kt qu ging nh th <SMALL> trn chui str. str.strike() - Kt qu ging nh th <STRIKE> trn chui str. str.sub() - To ra mt subscript cho chui str, ging th <SUB>.
Trang 58/108 str.substring(a,b) - Tr li chui con ca str l cc k t t v tr th a ti v tr th b. Cc k t c m t tri sang phi bt u t 0. str.sup() - To ra superscript cho chui str, ging th <SUP>. str.toLowerCase() - i chui str thnh ch thng. str.toUpperCase() - i chui str thnh ch hoa.
CC PHN T CA I TNG FORM

Form c to bi cc phn t cho php ngi s dng a thng tin vo. Khi , ni dung (hoc gi tr) ca cc phn t s c chuyn n mt Chng trnh trn server qua mt giao din c gi l Common Gateway Interface(Giao tip qua mt cng chung) gi tt l CGI S dng JavaScript bn c th vit nhng on scripts chn vo HTML ca bn lm vic vi cc phn t ca form v cc gi tr ca chng. Bng ?: Cc phn t ca form Phn t M t L mt nt bm hn l nt submit hay nt reset (<INPUT TYPE="button">) Mt checkbox (<INPUT TYPE="checkbox">) L mt phn t ti file ln cho php ngi s dng gi ln mt file
button checkbox FileUpload hidden password radio reset select submit text textArea
(<INPUT TYPE="file">)
Mt trng n (<INPUT TYPE="hidden">) Mt trng text nhp mt khu m tt c cc k t nhp vo u hin th l du (*)(<INPUT TYPE="password">) Mt nt bm (<INPUT TYPE="radio">) Mt nt reset(<INPUT TYPE="reset">) Mt danh sch la chn (<SELECT><OPTION>option1</OPTION>
<OPTION>option2</OPTION></SELECT>)
Mt nt submit (<INPUT TYPE="submit">) Mt trng text (<INPUT TYPE="text">)
Mt trng text cho php nhp vp nhiu dng
<TEXTAREA>default text</TEXTAREA>)
THUC TNH TYPE
Mi phn t c th c t tn JavaScript truy nhp n chng qua tn 4.1.20.
Trang 59/108 Trong mi phn t ca form u c thuc tnh type, l mt xu ch nh r kiu ca phn t c a vo nh nt bm, mt trng text hay mt checkbox... Xu c th l mt trong cc gi tr sau: Text field: "text" Radio button: "radio" Checkbox: "checkbox" Hidden field: "hidden" Submit button: "submit" Reset button: "reset" Password field: "password" Button: "button" Select list: "select-one" Multiple select lists: "select-multiple" Textarea field: "textarea" 4.1.21. PHN T BUTTON
Trong mt form HTML chun, ch c hai nt bm c sn l submit v reset bi v d liu trong form phi c gi ti mt vi a ch URL (thng l CGI-BIN script) x l v lu tr. Mt phn t button c ch nh r khi s dng th INPUT: <INPUT TYPE="button" NAME="name" VALUE= "buttonName"> Trong th INPUT, name l tn ca button, thuc tnh VALUE c cha nhn ca button s c hin th trn Navigator ca browser. Ch c mt th s kin duy nht i vi button l onClick. Kt hp vi n l cch thc duy nht click.Phn t buttton c kh nng m rng cho php ngi lp trnh JavaScript c th vit c mt on m lnh JavaScript thc thi vic thm vo mt nt bm trong mt script. Trong v d sau, thay v s dng onChange, bn c th chnh sa script nh gi biu thc khi button c bm. V d: nh gi mt form s dng phn t button.
<HTML> <HEAD> <TITLE>button Example</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </HEAD>
Trang 60/108
<BODY> <FORM METHOD=POST> Enter a JavaScript mathematical expression: <INPUT TYPE="text" NAME="entry" VALUE=""> <BR> The result of this expression is: <INPUT TYPE=text NAME="results" onFocus="this.blur();"> <BR> <INPUT TYPE="button" VALUE="Calculate" onClick="calculate(this.form);"> </FORM> </BODY> </HTML>
4.1.22.
PHN T CHECKBOX
Cc phn t checkbox c kh nng bt tt dng chn hoc khng chn mt thng tin. Cc checkbox c nhiu thuc tnh v cch thc hn button. Bng di y l danh sch cc thuc tnh v cc cch thc ca phn t checkbox. Bng . Cc thuc tnh v cch thc ca phn t checkbox. Cch thc v thuc tnh
checked defaultChecked name value click()
M t Cho bit trng thi hin thi ca checkbox (thuc tnh) Cho bit trng thi mc nh ca phn t (thuc tnh) Cho bit tn ca phn t c ch nh trong th INPUT (thuc tnh) Cho bit gi tr hin thi ca phn t c ch nh trong th INPUT (thuc tnh) M t mt click vo checkbox (Cch thc)
Phn t checkbox ch c mt th s kin l onClick V d: To hp checkbox nhp vo mt s ri la chn tnh nhn i v bnh Phng:
<HTML> <HEAD> <TITLE>checkbox Example</TITLE> <SCRIPT>  </SCRIPT> </HEAD> <BODY> <FORM METHOD=POST> Value: <INPUT TYPE="text" NAME="entry" VALUE=0 onChange="calculate(this.form,this.name);"> <BR> Action (default double): <INPUT TYPE=checkbox NAME=square onClick="calculate(this.form,this.name);"> Square <BR> Result: <INPUT TYPE="text" NAME="result" VALUE=0 onChange="calculate(this.form,this.name);"> </FORM> </BODY> </HTML>
Trong script ny, bn thy cch s dng th s kin onClick cng nh thuc tnh checked l mt gi tr kiu Boolean c th dng lm iu kin trong cu lnh if...else Bn c th thm mt checkbox tn l square vo form. Nu hp ny c check, Chng trnh s ly gi tr ca n, nu khng, mt thc thi c mc nh s nhn i gi tr ca n. Th s kin onClick trong checkbox c nh ngha:
(<INPUT TYPE=checkbox NAME=square onClick= "calculate( this.form, this.name);"> )
Khi nu ngi dng thay i mt cu lnh khc, form s c tnh ton li. to ra s m rng cho checkbox. bn c th thay i hm calculate() nh sau:
function calculate(form,callingField) { if (callingField == "result") { // if (1)
Trang 62/108
if (form.square.checked) { // if (2) form.entry.value = Math.sqrt(form.result.value); } else { form.entry.value = form.result.value / 2; //end if(2)
} }
else { if (form.square.checked) { // if (3) form.result.value=form.entry.value*form.entry.value; } else { form.result.value = form.entry.value * 2; } // end if (3) } // end if (1) }
4.1.23.
PHN T FILE UPLOAD
Phn t ny cung cp cho form mt cch ngi s dng c th ch r mt file a vo form x l. Phn t file Upload c ch nh r trong JavaScript bng i tng FileUpload. i tng ch c hai thuc tnh l name v value, c hai u l gi tr xu nh cc i tng khc. Khng c cch thc hay th file cho i tng ny. 4.1.24. PHN T HIDDEN
Phn t hidden l phn t duy nht trong s tt c cc phn t ca form khng c hin th trn Web browser. Trng hidden c th s dng lu cc gi tr cn thit gi ti server song song vi s xut ra t form (form submission) nhng n khng c hin th trn trang. Mi ngi c th s dng trong JavaScript lu cc gi tr trong sut mt script v tnh ton khng cn form. i tng hidden ch c hai thuc tnh l name v value, cng l nhng gi tr xu ging cc i tng khc. Khng c cch thc hay th s kin no cho i tng ny. 4.1.25. PHN T PASSWORD
i tng Password l i tng duy nht trong cc i tng ca form m khi g bt k k t no vo cng u hin th du sao(*). N cho php a vo nhng thng tin b mt nh ng k mt khu... i tng Password c 3 thuc tnh ging trng text l: defaultValue, name v value. Khng ging vi hai phn t trn, trng Password c nhiu cch thc hn(focus(), blur(), and select() ) v tng ng vi cc th s kin: onFocus, onBlur, and onSelect. Phn ny s c ni k hn trong i tng text. 4.1.26. PHN T RADIO
Trang 63/108 i tng radio gn ging s bt tt checkbox khi c hai nt radio kt hp thnh mt nhm. Khi nhiu radio c kt hp thnh mt nhm, ch c mt nt c chn trong bt k mt thi im no. V d dng lnh sau to ra mt nhm radio c ba nt tn l test:
<INPUT TYPE="radio" NAME="test" VALUE="1" chECKED>1<BR> <INPUT TYPE="radio" NAME="test" VALUE="2">2<BR> <INPUT TYPE="radio" NAME="test" VALUE="3">3<BR>
Nhm cc nt radio li bng cch t cho chng c cng mt tn trong cc th INPUT. C mt vi thuc tnh kim tra trng thi hin thi ca mt nhm nt radio. Bng sau hin th cc thuc tnh v cch thc ca i tng radio. Bng? . Cc thuc tnh v cch thc ca i tng radio. Thuc tnh v cch thc
checked defaultChecked index length name value click()
M t M t trng thi hin thi ca phn t radio (thuc tnh) M t trng thi mc nh ca phn t (thuc tnh) M t th t ca nt radio c chn hin thi trong mt nhm M t tng s nt radio trong mt nhm M t tn ca phn t c ch nh trong th INPUT (thuc tnh) M t gi tr hin thi ca phn t c nh ra trong th INPUT (thuc tnh) M phng mt click trn nt radio (cch thc)
Cng nh checkbox, radio ch c mt th s kin l onClick. Khng c bt k mt i tng form no c thuc tnh index v length. Do mt nhm radio gm nhiu phn t radio, nn chng c t trong mt mng cc nt radio v c nh s t 0. Trong v d nhm radio c tn test trn, nu nhm nm trong mt form c tn l "testform", bn c th gi ti nt radio th hai bng tn "testform.test[1]" v c th kim tra gi tr ca n bng "testform.test[1].checked" minh ho r cch dng i tng radio, ta xem v d sau: V d:
<HTML> <HEAD> <TITLE>radio button Example</TITLE> <SCRIPT>  </SCRIPT> </HEAD> <BODY> <FORM METHOD=POST> Value: <INPUT TYPE="text" NAME="entry" VALUE=0 onChange="calculate(this.form,this.name);"> <BR> Action:<BR> <INPUT TYPE="radio" NAME="action" VALUE="twice" onClick="calculate(this.form,this.name);"> Double<BR> <INPUT TYPE="radio" NAME="action" VALUE="square" onClick="calculate(this.form,this.name);"> Square <BR> Result: <INPUT TYPE=text NAME="result" VALUE=0 onChange="calculate(this.form,this.name);"> </FORM> </BODY> </HTML>
Trong v d ny, s thay i t checkbox trn l rt kh nhn bit. Thay cho mt checkbox trong v d trc, y ta s dng hai nt radio vi hai gi tr khc nhau: double v square Nh ta bit c th truy nhp n cc nt radio qua mt mng, do hai nt ny c th truy nhp bng action[0] v action[1]. Bng cch ny, bn ch cn thay i tham chiu n hm calculate() t form.square.checked thnh form.action[1].checked. 4.1.27. PHN T RESET
S dng i tng reset, bn c th tc ng ngc li click vo nt Reset. Cng ging i tng button, i tng reset c hai thuc tnh l name v value, v mt cch thc click(), mt th s kin onClick. Hu ht nhng ngi lp trnh khong s dng th s kin onClick ca nt reset kim tra gi tr ca nt ny, i tng reset thng dng xo form. V d sau minh ho cch s dng nt reset xo cc gi tr ca form.
Trang 65/108 V d:
<HTML> <HEAD> <TITLE>reset Example</TITLE> <SCRIPT LANGUAGE="JavaScript">  //SCRIPT> </HEAD> <BODY> <FORM METHOD=POST> <INPUT TYPE="text" NAME="value1"><BR> <INPUT TYPE="text" NAME="value2"><BR> <INPUT TYPE="reset" VALUE="Clear Form" onClick="clearForm(this.form);"> </FORM> </BODY> </HTML>
4.1.28.
PHN T SELECT
Danh sch la chn trong cc form HTML xut hin menu drop-down hoc danh sch cun c ca cc i tng c th c la chn. Cc danh dch c xy dng bng cch s dng hai th SELECT v OPTION. V d:
<SELECT NAME="test"> <OPTION SELECTED>1 <OPTION>2 <OPTION>3 </SELECT>
to ra ba thnh phn ca menu th drop-down vi ba la chn 1,2 v 3. S dng thuc tnh SIZE bn c th to ta mt danh sch cun vi s phn t hin th ln th nht. bt menu drop-down trong mt menu cun vi hai thnh phn hin th, bn c th s dng nh sau:
<SELECT NAME="test" SIZE=2> <OPTION SELECTED>1 <OPTION>2 <OPTION>3 </SELECT>
Trang 66/108 Trong c hai v d trn, ngi s dng ch c th c mt la chn. Nu s dng thuc tnh MULTIPLE, bn c th cho php ngi s dng la chn nhiu hn mt gi tr trong danh sch la chn:
<SELECT NAME="test" SIZE=2 MULTIPLE> <OPTION SELECTED>1 <OPTION>2 <OPTION>3 </SELECT>
Danh sch la chn trong JavaScript l i tng select. i tng ny to ra mt vi thnh phn tng t cc button v radio. Vi cc thnh phn la chn, danh sch cc la chn c cha trong mt mng c nh s t 0. Trong trng hp ny, mng l mt thuc tnh ca i tng select gi l options. C vic la chn cc option v tng phn t option ring bit u c nhng thuc tnh. B sung thm vo mng option, phn t select c thuc tnh selectedIndex, c cha s th t ca option c la chn hin thi. Mi option trong danh sch la chn u c mt vi thuc tnh: DEFAULTSELECTED: cho bit option c c mc nh l la chn trong th OPTION hay khng. INDEX: cha gi tr s th t ca option hn thi trong mng option. SELECTED: cho bit trng thi hin thi ca option TEXT: c cha gi tr ca dng text hin th trn menu cho mi option, v thuc tnh value mi gi tr ch ra trong th OPTION. i tng select khng c cc cch thc c nh ngha sn. Tuy nhin, i tng select c ba th s kin, l onBlue, onFocus, onChange, chng u l nhng i tng text. V d bn c danh sch la chn sau:
<SELECT NAME="example" onFocus="react();"> <OPTION SELECTED VALUE="Number One">1 <OPTION VALUE="The Second">2 <OPTION VALUE="Three is It">3 </SELECT>
Khi ln u tin hin th bn c th truy nhp ti cc thng tin sau:

example.options[1].value = "The Second" example.options[2].text = "3" example.selectedIndex = 0 example.options[0].defaultSelected = true example.options[1].selected = false
Nu ngi s dng kch vo menu v la chn option th hai, th th onFocus s thc hin, v khi gi tr ca thuc tnh s l:
example.options[1].value = "The Second" example.options[2].text = "3"
Trang 67/108
example.selectedIndex = 1 example.options[0].defaultSelected = true example.options[1].selected = true
Sa cc danh sch la chn

Navigator 3.0 cho php thay i ni dung ca danh sch la chn t JavaScript bng cch lin kt cc gi tr mi cho thuc tnh text ca cc thc th trong danh sch. V d, trong v d trc, bn to ra mt danh sch la chn nh sau:
<SELECT NAME="example" onFocus="react();"> <OPTION SELECTED VALUE="Number One">1 <OPTION VALUE="The Second">2 <OPTION VALUE="Three is It">3 </SELECT> C th thay i c dng text hin th trn nt th hai thnh "two" bng: example.options[1].text = "two"; C th thm cc la chn mi vo danh sch bng cch s dng i tng xy dng Option() theo c php: newOptionName = new Option(optionText, optionValue, defaultSelected, selected); selectListName.options[index] = newOptionName; Vic to i tng option() ny vi dng text c ch trc, defaultSelected v selected nh trn nh ra nhng gi tr kiu Boolean. i tng ny c lin kt vo danh sch la chn c thc hin bng index. Cc la chn c th b xo trong danh sch la chn bng cch gn gi tr null cho i tng mun xo selectListName.options[index] = null; 1.1 Phn t submit Nt Submit l mt trng hp c bit ca button, cng nh nt Reset. Nt ny a thng tin hin ti t cc trng ca form ti a ch URL c ch ra trong thuc tnh ACTION ca th form s dng cch thc METHOD ch ra trong th FORM. Ging nh i tng button v reset, i tng submit c sn thuc tnh name v value, cch thc click() v th s kin onClick. 1.2 Phn t Text
Trang 68/108
Phn t ny nm trong nhng phn t hay c s dng nht trong cc form HTML. Tng t nh trng Password, trng text cho php nhp vo mt dng n, nhng cc k t ca n hin ra bnh thng. i tng text c ba thuc tnh:defautValue, name v value. Ba cch thc m phng s kin ca ngi s dng: focus(), blur() v select(). C 4 th s kin l: obBlur, onFocus, onChange, onSelect. Ch cc s kin ny ch thc hin khi con tr c kch ra ngoi trng text. Bng sau m t cc thuc tnh v cch thc ca i tng text. Bng .Cc thuc tnh v cch thc ca i tng text. Cch thc v thuc tnh M t defaultValue name value focus() blur() select() Ch ra gi tr mc nh ca phn t c ch ra trong th INPUT (thuc tnh) Tn ca i tng c ch ra trong th INPUT (thuc tnh) Gi tr hin thi ca phn t (thuc tnh) M t vic con tr ti trng text (cch thc) M t vic con tr ri trng text (cch thc) M t vic la chn dng text trong trng text (cch thc)
Mt ch quan trng l c th gn gi tr cho trng text bng cch lin kt cc gi tr vi thuc tnh value. Trong v d sau y, dng text c a vo trng u tin c lp li trong trng text th hai, v mi dng text c a vo trng text th hai li c lp li trong trng texxt th nht. Kh nng ny ca n c th p dng t ng cp nht hoc thay i d liu. V d. T ng cp nht cc trng text . <HTML> <HEAD> <TITLE>text Example</TITLE> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </HEAD> <BODY> <FORM> <INPUT TYPE=text NAME="first" onChange="echo(this.form,this.name);"> <INPUT TYPE=text NAME="second" onChange="echo(this.form,this.name);"> </FORM> </BODY> </HTML> 1.3 Phn t Textarea Th TEXTAREA cung cp mt hp cho php nhp s dng text do ngi thit k nh trc. V d: <TEXTAREA NAME="fieldName" ROWS=10 COLS=25> Default Text Here </TEXTAREA> v d ny to ra mt trng text cho php a vo 10 hng ,mi hng 25 k t. Dng "Defautl Text Here"s xut hin trong trng ny vo ln hin th u tin. Cng nh phn t text , JavaScript cung cp cho bn cc thuc tnh defaultValue, name, v value, cc cch thc focus(), select(), v blur(), cc th s kin onBlur, onForcus, onChange, onSelect. 2. Mng elements[] Cc i tng ca form c th c gi ti bng mng elements[]. V d bn to ra mt form sau: <FORM METHOD=POST NAME=testform> <INPUT TYPE="text" NAME="one"> <INPUT TYPE="text" NAME="two"> <INPUT TYPE="text" NAME="three">
Trang 70/108
</FORM> bn c th gi ti ba thnh phn ny nh sau: document.elements[0], document.elements[1], document.elements[2], hn na cn c th gi document.testform.one, document.testform.two, document.testform.three. Thuc tnh ny thng c s dng trong cc mi quan h tun t ca cc phn t hn l dng tn ca chng. 3. Mng form[] Cc th s kin c thit k lm vic vi cc form ring bit hoc cc trng mt thi im, n rt hu dng cho php gi ti cc form c lin quan trong cng mt trang. Mng form[] cp n y c th c nhiu xc nh cc nhn ca form trn cng mt trang v have information in a single field match in all three forms. C th gi bng document.forms[] thay v gi bng tn form. Trong script ny, bn c hai trng text nhp v nm trn hai form c lp vi nhau. S dng mng form bn c th tng tc trn cc gi tr ca cc trng trong hai form cng mt lc khi ngi s dng thay i gi tr trn mt form. <HTML> <HEAD> <TITLE>forms[] Example</TITLE> </HEAD> <BODY> <FORM METHOD=POST> <INPUT TYPE=text onChange="document.forms[1].elements[0].value = this.value;"> </FORM> <FORM METHOD=POST> <INPUT TYPE=text onChange="document.forms[0].elements[0].value = this.value;"> </FORM> </BODY> </HTML> Mt khc, bn cng c th truy nhp n form bng tn form c t trong th FORM: <FORM METHOD=POST NAME="name">
Trang 71/108
Khi bn c th gi document.name 4. Xem li cc lnh v m rng Lnh/ M rng blur() form.action form.elemrnts Kiu
document.forms["name"]
hoc
M t
cch thc M t vic dch chuyn con tr t mt JavaScript phn t cch thc Xu cha gi tr ca thuc tnh JavaScript ACTION trong th FORM thuc tnh mng cha danh sch cc phn t JavaScript trong form (nh checkbox, trng text, danh sch la chn) thuc tnh xu cha kiu MIME s dng khi JavaScript chuyn thng tin t form ti server thuc tnh Xu cha gi tr thuc tnh NAME JavaScript trong th FORM thuc tnh Xu cha tn ca s ch bi mt JavaScript form submition cch thc M t vic submit mt form HTML JavaScript thuc tnh nh x kiu ca mt phn t form JavaScript thnh mt xu. Th s kin thuc HTML thuc HTML thuc HTML thuc HTML thuc HTML th s kin cho vic submit tnh Thuc tnh kiu cho cc nt bm ca HTML (<INPUT TYPE=button>) tnh Thuc tnh kiu cho cc checkbox ca HTML (<INPUT TYPE=checkbox>) tnh Thuc tnh kiu cho cc dng pasword ca HTML(<INPUT TYPE=password>) tnh Thuc tnh kiu cho cc nt radio ca HTML (<INPUT TYPE=radio>) tnh Thuc tnh kiu cho cc nt reset ca HTML (<INPUT TYPE=reset>)
form.encoding form,name form.target form.submit type onSubmit button checkbox pasword
radio reset
Trang 72/108
SELECT OPTION
th HTML th HTML
Hp th cho danh sch la chn ch ra cc la chn trong danh sch la chn(<SELECT><OPTION>Option 1<OPTION>Option 2</SELECT>) tnh Thuc tnh kiu ca nt submit (<INPUT TYPE=submit>) tnh Thuc tnh kiu ca trng trong form (<INPUT TYPE=text>) Hp th cho nhiu dng (<TEXTAREA> defautl </TEXTAREA>) text text
submit text TEXTAREA
thuc HTML thuc HTML
Th HTML
name value
thuc tnh Xu cha tn phn t HTML (button, JavaScript checkbox, password...) thuc tnh Xu cha gi tr hin thi ca mt JavaScript phn t HTML(button, checkbox, password...) cch thc M t vic kch vo mt phn t trn JavaScript form (button, checkbox,password) thuc tnh Th s kin cho s kin kch (button, JavaScript checkbox, radio button, reset, selection list, submit) thuc tnh Gi tr kiu Boolean m t mt la JavaScript chn check(checkbox, radio button) thuc tnh Xu cha gi tr mc nh ca mt JavaScript phn t HTML (password, text, textarea) cch thc M t vic con tr ti mt phn t JavaScript (password, text, textarea) cch thc M t vic con tr ri khi mt phn JavaScript t (password, text, textarea) cch thc M t vic la chn dng text trong JavaScript mt trng (password, text, textarea) Th s kin Th s kin cho s kin
click() onClick
checked defaultChecked
focus() blur() select() onFocus()
Trang 73/108
focus(password, selection list, text, textarea) onBlur Th s kin Th s kin cho s kin blur (password, selection list, text, textarea) Th s kin cho s kin khi gi tr ca trng thay i (password, selection list, text, textarea) Th s kin khi ngi s dng chn dng text trong mt trng (password, text, textarea)
onChange
Th s kin
onSelect
Th s kin
index
thuc tnh L mt s nguyn m t la chn hin JavaScript thi trong mt nhm la chn (radio button) thuc tnh S nguyn m t tng s cc la chn JavaScript trong mt nhm cc la chn (radio button) thuc tnh Gi tr Boolean m t khi c mt la JavaScript chn c t l mc nh (seledtion list) thuc tnh Mng cc la chn trong danh sch JavaScript la chn thuc tnh Dng text hin th cho mt thnh phn JavaScript ca menu trong danh sch la chn th HTML th HTML th HTML thuc HTML thuc HTML thuc Hp th cho cc bng HTML Hp th cho cc hng ca mt bng HTML Hp th cho cc ca mt hng trong mt bng HTML tnh L thuc tnh ca th TD m t trong mt ca bng c nhiu ct tnh L thuc tnh ca th TD m t trong mt ca bng c nhiu hng tnh L thuc tnh ca th TABLE m t
length
dafautlSelected
options text TABLE TR TD COLSPAN ROWSPAN BODER
Trang 74/108
HTML document.forms[]
rng ng vin ca bng
thuc tnh mng ca cc i tng form vi mt JavaScript danh sch cc form trong mt document cch thc Tr li mt xu con ca xu string t JavaScript tham s v tr k t u n v tr k t cui cch thc Tr li mt gi tr nguyn tip theo JavaScript nh hn gi tr ca tham s a vo. thuc tnh Gi tr nguyn ca s th t k t cui JavaScript cng trong xu string
string.substring()
Math.floor() string.length
Trang 75/108
5.
M HNH I TNG (OBJECT MODEL)

I TNG V THUC TNH
Nh bit, mt i tng trong JavaScript c cc thuc tnh i km vi n. Bn c th truy nhp n cc thuc tnh ca n bng cch gi :
objectName.propertyName
C tn i tng v tn thuc tnh u nhy cm. Bn nh ngha mt thuc tnh bng cch gn cho n mt gi tr. V d, gi s c mt i tng tn l myCar (trong trng hp ny gi s i tng ny tn ti sn sng). Bn c th ly cc thuc tnh c tn make, model v year ca n nh sau:
myCar.make = Ford myCar.model = Mustang myCar.year = 69;
C mt mng lu tr tp hp cc gi tr tham chiu ti tng bin. Thuc tnh v mng trong JavaScript c quan h mt thit vi nhau, thc ra chng ch khc nhau v cch giao tip vi cng mt cu trc d liu. V d cng c th truy nhp ti cc thuc tnh ca i tng myCar trn bng mng nh sau:
myCar[make] = Ford myCar[model] = Mustang myCar[year] = 69;
Kiu mng ny c hiu nh mt mng c kh nng lin kt bi mi mt phn t trong u c th lin kt n mt gi tr xu no . minh ho vic my c thc hin nh th no, hm sau y s hin th cc thuc tnh ca mt i tng thng qua tham s v kiu i tng v tn i tng.
function show_props (obj, obj_name) { var result= for (i in obj) result=result+ obj_name + .+ i+ = + obj[i] + \n return result }
Khi gi hm show_props(myCar,myCar) s hin ln:

myCar.make = Ford myCar.model = Mustang myCar.year = 69;
TO CC I TNG MI
Trang 76/108 C JavaScript client-side v server-side u c mt s i tng c nh ngha trc. Tuy nhin, bn cng c th to ra nhng i tng ca ring bn. Trong JavaScript 1.2, nu bn ch mun to ra mt i tng duy nht ca mt kiu i tng, bn c th to n bng cch s dng khi to i tng. Hoc nu bn mun to ra nhiu c th ca mt kiu i tng, bn c th to ra mt hm xy dng trc, sau to ra cc i tng c kiu ca hm bng ton t new 5.1.1. S DNG KHI TO I TNG Trong nhng phin bn trc ca Navigator, bn ch c th to ra mt i tng bng cch s dng hm xy dng chng hoc s dng mt hm c cung cp bi mt vi i tng khc t c mc ch. Tuy nhin, trong Navigator 4.0, bn c th to ra mt i tng bng cch s dng mt khi to i tng.Bn s dng cch ny khi bn ch mun to ra mt c th n l ch khng phi nhiu c th ca i tng. C php to ra mt i tng bng cch khi to i tng (Object Initializers):
objectName={property1: value1, property2: value2, ..., propertyN: valueN}
Trong objectName l tn ca i tng mi, mi propertyI l mt xc minh (c th l mt tn, mt s hoc mt xu k t) v mi valueI l mt biu thc m gi tr ca n c gn cho propertyI. C th la chn khi to bng tn i tng hoc ch bng cc khai bo. Nu nh bn khng cn dng n i tng trong mi ch, bn khng cn phi gn n cho mt bin. Nu mt i tng c to bng cch khi to i tng mc cao nht, mi ln i tng xut hin trong cc biu thc, JavaScript s nh gi li n mt ln. Ngoi ra, nu s dng vic khi to ny trong mt hm th mi ln gi hm, i tng s c khi to mt ln Gi s bn c cu lnh sau:
if (condition) x={hi: there.}
Trong trng hp ny, JavaScript s to ra mt i tng v gn n vo bin x nu biu thc condition c nh gi l ng Cn v d sau to ra mt i tng myHonda vi 3 thuc tnh: myHonda={color:red,wheels:4,engine:{cylinder:4,size:2.2}} Ch rng thuc tnh engine cng l mt i tng vi cc thuc tnh ca n Trong Navigator 4.0, bn cng c th s dng mt khi to to mt mng. C php to mng bng cch ny khc vi to i tng:
arrayName=[element0, element1,...,elementN]
Trong , arrayName l tn ca mng mi, v mi elementI l gi tr ca phn t v tr ca mng. Khi bn to mt mng bng cch s dng Phng php khi to, th n s coi mi gi tr l mt phn t trn mng, v chiu di ca mng chnh l s cc tham s.
Trang 77/108 Bn khng cn phi ch nh r tt c cc phn t trn mng mi. Nu bn t hai du phy vo hng, th mng s c to vi nhng chn trng cho nhng phn t cha c nh ngha nh v d di y: Nu mt mng c to bng cch khi to(initializer) mc cao nht, mi ln mng xut hin trong cc biu thc, JavaScript s nh gi li n mt ln. Ngoi ra, nu s dng vic khi to ny trong mt hm th mi ln gi hm, mng s c khi to mt ln V d1: To mt mng coffees vi 3 phn t v di ca mng l 3:
coffees = [French Roast,Columbian,Kona]
V d 2: To ra mt mng vi 2 phn t c khi u v mt phn t rng:

fish = [Lion, , Surgeon]
Vi biu thc ny, fish[0] l Lion, fish[2] l Surgeon, v fish[2] cha c nh ngha 5.1.2. S DNG MT HM XY DNG(CONSTRUCTOR FUNCTION) Bn c th to ra i tng ca ring mnh vi hai bc sau: 1. nh ngha kiu ca i tng bng cch vit mt hm xy dng. 2. To ra mt c th ca i tng bng ton t new nh ngha mt kiu i tng, ta phi to ra mt hm ch nh r tn, cc thuc tnh v cc cch thc ca kiu i tng . V d gi s bn mun to mt kiu i tng t vi tn l car, c cc thuc tnh make, model, year v color, thc hin vic ny c th vit mt hm nh sau:
function car(make, model, year ){ this.make = make this.model = model this.year = year }
Ch vic s dng ton t this gn gi tr cho cc thuc tnh ca i tng phi thng qua cc tham s ca hm. V d, bn c th to mt i tng mi kiu car nh sau:
mycar = new car(Eagle,Talon TSi,1993)
Cu lnh ny s to ra i tng mycar v lin kt cc gi tr c a vo vi cc thuc tnh. Khi gi tr ca mycar.make l Eagle, gi tr ca mycar.model l Talon TSi, v mycar.year l mt s nguyn 1993....C nh vy bn c th to ra nhiu i tng kiu car. Mt i tng cng c th c nhng thuc tnh m bn thn n cng l mt i tng. V d bn nh ngha thm mt i tng khc l person nh sau:
function person(name, age, sex){ this.name=name this.age=age this.sex=sex }
Trang 78/108 V sau ta to ra hai ngi mi:

rank = new person(Rank McKinnon,33,M) ken = new person(Ken John,39,M)
By gi bn nh ngha li hm xy dng car nh sau:

function car(make, model, year,owner ){ this.make = make this.model = model this.year = year this.owner = owner }
Nh vy bn c th to i tng kiu car mi:

car1 = new car(Eagle,Talon TSi,1993,rank) car2 = new car(Nissan,300ZX,1992,ken)
Nh vy, thay v phi qua mt xu k t hay mt gi tr s khi to i tng, ta ch cn a hai i tng c to cu lnh trn vo dng tham s ca i tng mi to. Ta cng c th ly c thuc tnh ca i tng owner bng cu lnh sau:
car2.owner.name
Ch rng bn cng c th to ra mt thuc tnh mi cho i tng trc khi nh ngha n, v d:

car1.color=black
Nh vy, thuc tnh color ca i tng car1 c gn l black. Tuy nhin, n s khng gy tc ng ti bt k mt i tng kiu car no khc. Nu mun thm thuc tnh cho tt c cc i tng th phi nh ngha li hm xy dng i tng. 5.1.3. LP MC LC CHO CC THUC TNH CA I TNG Trong Navigator 2.0, bn c th gi thuc tnh ca mt i tng bng tn thuc tnh hoc bng s th t ca n. Tuy nhin t Navigator 3.0 tr i, nu ban u bn nh ngha mt thuc tnh bng tn ca n, bn s lun lun phi gi n bng tn, v nu bn nh ngha mt thuc tnh bng ch s th bn cng lun lun phi gi ti n bng ch s. iu ny ng dng khi bn to mt i tng vi nhng thuc tnh ca chng bng hm xy dng (nh v d v kiu i tng car phn trc) v khi bn nh ngha nhng thuc tnh ca ring mt i tng (nh mycar.color=red). V vy nu bn nh ngha cc thuc tnh ca i tng ngay t u bng ch s nh mycar[5]=25 mpg, bn c th ln lt gi ti cc thuc tnh khc nh mycar[5]. Tuy nhin iu ny l khng ng i vi nhng i tng tng ng ca HTML nh mng form. Bn c th gi ti cc i tng trong mng bi s th t hoc tn ca chng. V d th <FORM> th hai trong mt document c thuc tnh NAME l myform th bn c th gi ti form bng document.form[1] hoc document.form[myForm] hoc document.myForm
Trang 79/108 5.1.4. NH NGHA THM CC THUC TNH CHO MT KIU I TNG Bn c th thm thuc tnh cho mt kiu i tng c nh ngha trc bng cch s dng thuc tnh property. Thuc tnh c nh ngha ny khng ch c tc dng i vi mt i tng m c tc dng i vi tt c cc i tng khc cng kiu.V d sau thc hin thm thuc tnh color cho tt c cc i tng kiu car, sau gn mt gi tr mu cho thuc tnh color ca i tng car1:
car.prototype.color=null car1.color=red
5.1.5. NH NGHA CC CCH THC Mt cch thc l mt hm c lin kt vi mt i tng. Bn nh ngha mt cch thc cng c ngha l bn nh ngha mt hm chun. Bn c th s dng c php sau gn mt hm cho mt i tng ang tn ti:
object.methodname = function_name
Trong object l i tng ang tn ti, methodname l tn cch thc v function_name l tn hm Bn c th gi cch thc ny t i tng nh sau:
object.methodname(<tham s>)
Bn c th nh ngha cch thc cho mt kiu i tng bng cch a cch thc vo trong hm xy dng i tng. V d bn c th nh ngha mt hm c th nh dng v hin th cc thuc tnh ca cc i tng kiu car xy dng phn trc:
function displayCar () { var result = Abeautiful+this.year+ + this.make + + this.model document.write(result) }
Bn c th thm cch thc ny vo cho i tng car bng cch thm dng lnh sau vo hm nh ngha i tng
this.displayCar= displayCar;
Nh vy c th nh ngha li i tng car nh sau:

function car(make, model, year,owner ){ this.make = make this.model = model this.year = year this.owner = owner this.displayCar= displayCar }
Sau , bn c th gi cch thc displayCar i vi mi i tng:

car1.displayCar() car2.displayCar()
Trang 80/108 5.1.6. S DNG CHO REFERENCES) CC THAM CHIU I TNG (OBJECT
JavaScript c mt t kho c bit l this m bn c th s dng n cng vi mt cch thc gi ti i tng hin thi. V d, gi s bn c mt hm validate dng xc nhn gi tr thuc tnh ca mt i tng nm trong mt khong no : function validate(obj, lowval, hival){ if ( (obj.value<lowdate)||(obj.value>hival) ) alert(Invalid value!) } Sau bn c th gi hm validate t mi th s kin onChange: <INPUT TYPE=TEXT NAME=AGE SIZE=3 onChange=validate(this,18,99) > Khi lin kt vi mt thuc tnh form, t kho this c th gi ti form cha ca i tng hin thi. Trong v d sau, myForm c cha i tng Text v mt nt bm. Khi ngi s dng kch vo nt bm, trng text s hin th tn form. Th s kin onClick ca nt bm s dng this.form gi ti form cha l myForm. <FORM NAME=myForm> Form name:<INPUT TYPE=text NAME=text1 VALUE=Beluga> <P> <INPUT TYPE=button NAME=button1 value=Show Form Name onClick=this.form.text1.value=this.form.name> </FORM> 5.1.7. XO I TNG Trong JavaScript cho Navigator 2.0, bn khng th xo cc i tng-chng vn tn ti trong khi bn ri khi trang . Trong khi JavaScript cho Navigator 3.0 cho php bn c th xo mt i tng bng cch t cho n tr ti gi tr Null (nu nh l ln cui cng gi ti i tng). JavaScript s ng i tng ngay lp tc thng qua biu thc gn.
Trang 81/108
6.
BNG TNG KT CC T KHO
Sau y l cc t oc nh ngha l mt phn trong ngn ng JavaScript v khng c s dng l tn bin: abstract boolean break byte case catch char class const continue default do double else eval extends false final finally float for function goto if implements import in instanceof int interface long native new null package parseFloat parseInt private protected public return short static super switch synchrinized this throw throws transient true try var void while with
Trang 82/108
7.
TNG KT
Nh vy, ti liu khng nhng gii thiu s qua v JavaScript, m n cn l sch tham kho ht sc hu ch pht trin ng dng ca bn. Bn c th tham kho ton din JavaScript trong quyn Teach Yourself JavaScript in 14 Days, hoc JavaScript Guide Do JavaScript l ngn ng cn mi v c s thay i nhanh chng, bn nn n vi trang Web ca hng Netscape ( http://www.netscape.com ) c cc thng tin mi nht v ngn ng ny.
Khoa cng ngh thng tin(HQG)
Trang 83/108
JAVASCRIPT Ton tp (bi 1)
B SUNG
Bi 1: TNG QUAN V JAVASCRIPT. 1. c tnh ca ngn ng javascript: Javascript l mt ngn ng thng dch (interpreter), chng trnh ngun ca n c nhng (embedded) hoc tch hp (integated) vo tp tin HTML chun. Khi file c load trong Browser (c support cho JavaScript), Browser s thng dch cc Script v thc hin cc cng vic xc nh. Chng trnh ngun JavaScript c thng dch trong trang HTML sau khi ton b trang c load nhng trc khi trang c hin th. Javascript l mt ngn ng c c tnh: n gin. ng (Dynamic). Hng i tng (Object Oriented). 2. Ngn ng javascript: Mt trong nhng c tnh quan trng ca ngn ng JavaScript l kh nng to v s dng cc i tng (Object). Cc Object ny cho php ngi lp trnh s dng pht trin ng dng. Trong JavaScript ,cc Object c nhn theo 2 kha cnh: a. Cc Object tn ti. b. Cc Object do ngi lp trnh xy dng. Trong cc Object tn ti c chia thnh 2 kiu: a. Cc Object ca JavaScript (JavaScript Built-in Object). b. Cc i tng c cung cp bi mi trng Netscape. 3. Built-in Object trong javascript: JavaScript cung cp 1 b cc Built-in Object cung cp cc thng tin v s hin hnh ca cc i tng c load trong trang Web v ni dung ca n.Cc i tng ny bao gm cc phng php (Method) lm vic vi cc thuc tnh (Properties) ca n. 4. Cc i tng c cung cp bi mi trng Netscape: Netscape Navigator cung cp cc i tng cho php JavaScript tng tc vi file HTML, cc i tng ny cho php chng ta iu khin vic hin th thng tin v p
Trang 84/108 ng cc s kin trong mi trng Navigator.V d i tng M t Window Cung cp cc phng php v cc tnh cht cho ca s hin hnh ca trnh duyt,bao gm cc i tng cho mi frame. J JAVASCRIPT MEDIASPACE CLUB (HTD) PAGE: 2 Location Cung cp cc tnh cht v phng php lm vic vi cc a ch URL hin hnh c m. History Cc i tng history cung cp thng tin v cc danh sch c v c th gii hn s tng tc vi danh sch. Document y l mt i tng c s dng nhiu nht .N cha ng cc i tng,tnh cht v cc phng php lm vic vi cc thnh phn ca ti liu nh cc :form,link,anchor,applet. 5. Cc i tng do ngi lp trnh xy dng: a. nh ngha thuc tnh ca i tng: (Object Properties) C php : Object-name.Property-name (tn i tng.tn c tnh) V d :Mt i tng airplane c cc thuc tnh nh sau: Airplane.model Airplane.price Airplane.seating Airplane.maxspeed Airplane.fuel b. Thm cc phng php cho i tng Method to Object) Sau khi c cc thng tin v airplane ta tip tc xy dng phng php s dng thng tin ny.V d bn mun in ra m t ca airplane hoc tnh ton khong cch ti a ca cuc hnh trnh vi nhin liu c: Airplane.description() Airplane.distance() c. To mt instance ca i tng: Trc khi thao tc vi mt i tng ca JavaScript ta phi to mt instance cho i tng . 6 . Nhng JavaScript vo trong tp tin HTML: C php: <script> JavaScript Program </SCRIPT> Thuc tnh ca th SCRIPT
Trang 85/108 + SRC :a ch URL ch n tp tin chng trnh JavaScript (*.js) + LANGUAGE: Ch nh ngn ng c s dng trong Script v cc phin bn s dng (v d nh :JavaScript ,JavaScript .1.2 vv ,VBScript). 7. n cc Scripts i vi cc Browser khng cung cp javascript: <script> <D> </SCRIPT> JAVASCRIPT MEDIASPACE CLUB (HTD) PAGE: 3 8. S dng tp tin JavaScript bn ngoi : <script> <D> </SCRIPT> 9. Thm chng trnh vo tp tin HTML: <HTML> <HEAD> <TITLE>Listing 2.1</TITLE> </HEAD> <BODY> Here is result: <script> <document> </SCRIPT> </BODY> </HTML> -----------------Kent(HCE) JAVASCRIPT Ton tp (bi 2) Bi 2: S DNG JAVASCRIPT 1. C php c bn ca lnh : JavaScript xy dng cc hm,cc pht biu,cc ton t v cc biu thc trn cng mt dng v kt thc bng ; V d: document.writeln("It work<BR>"); 2. Cc khi lnh: Nhiu dng lnh c th c lin kt vi nhau v c bao bi { } V d: { document.writeln("Does It work");
Trang 86/108 document.writeln("It work!"); } 3. Xut d liu ra ca s trnh duyt: Dng 2 phng php document.write() v document.writeln() V d: document.write(Test); document.writeln(Test); 4. Xut cc th HTML t JavaScript V d 1: <HTML> <HEAD> <TITLE>Outputting Text</TITLE> </HEAD> <BODY> This is text plain <BR> <script> </SCRIPT> </BODY> </HTML> V d 2: <HTML> <HEAD> <TITLE>Example 2.4 </TITLE> </HEAD> <BODY> <script> </H1> </SCRIPT> </BODY> </HTML> 5. S dng phng php writeln() vi th PRE: <HTML> <HEAD> <TITLE>Outputting Text</TITLE> </HEAD> <BODY>
<script>
Trang 87/108
<document> </SCRIPT>
</BODY> </HTML> 6. Cc k t c bit trong chui: \n : New line \t : Tab \r : carriage return \f : form feed \b: backspace V d: document.writeln("It work!\n"); 7. Lm vic vi cc dialog boxes S dng hm alert() hin th thng bo trong mt hp. V d: <HTML> <HEAD> <TITLE>Example 2.5 </TITLE> </HEAD> <BODY> <script> <alert> </SCRIPT> </BODY> 8. Tng tc vi ngi s dng: S dng phng php promt() tng tc vi ngi s dng. V d 1: <HTML> <HEAD> <TITLE>Listing 2.6</TITLE> </HEAD> <BODY> <script> <document> </SCRIPT> </BODY>
Trang 88/108 </HTML> V d 2: <HTML> <HEAD> <TITLE>Listing 2.6</TITLE> </HEAD> <BODY> <script> </H1> </SCRIPT> </BODY> </HTML> S dng du + cng 2 chui n li: V d 3: <HTML> <HEAD> <TITLE>Listing 2.6</TITLE> </HEAD> <BODY> <script> </H1> </SCRIPT> </BODY> </HTML> 9. Cc kiu d liu trong javascript: a. D liu kiu s: + S nguyn: v d 720 + S Octal: v d :056 + S Hexa:v d:0x5F + S thp phn :v d :7.24 , -34.2 ,2E3 b. D liu kiu chui: v d: Hello 245 c. D liu kiu Boolean: Kt qu tr v l true hoc false. d. D liu kiu null: Tr v gi tr rng. e. D liu kiu vn bn (ging nh kiu chui) 10. To bin trong javascript: Var example;
Trang 89/108 Var example=Hello; Ta c th dng document.write(example); xut ni dung ca bin. V d 1: dng t kha var khai bo bin <HTML> <HEAD> <TITLE>Example 3.1</TITLE> <script> <var> </SCRIPT> </HEAD> <BODY> <script> </H1> </SCRIPT> </BODY> </HTML> V du 2: to li mt gi tr mi cho bin <HTML> <HEAD> <TITLE>Example 3.2</TITLE> <script> var name=prompt("enter your name:","name"); alert ("greeting " + name + " , "); name=prompt("enter your friend's name:","friend's name"); </SCRIPT> </HEAD> <BODY> <script> </H1> </SCRIPT> </BODY> </HTML> 11. Lm vic vi bin v biu thc: Thit lp biu thc: C php: <bi> <to> <bi> * Ton t: = Thit lp gi tr bn phi cho bn tri V d Mad=5 += Cng tri v phi ,sau gn kt qu cho bn tri php ton V d: cho x=10,y=5 x+=y => x=15 -= Tr bn tri cho bn phi ,gn kt qu li cho bn tri
Trang 90/108 x-=y => x=5 *= Nhn bn tri cho bn phi,gn kt qu cho bn tri x*=y => x=50 /= Chia bn tri cho phi ,gn kt qu li cho bn tri x/=y => x=2 %= Chia bn tri cho bn phi v ly s d gn li cho bn tri x%=y => x=0 * Cc ton t khc: V d: x+=15+3 => x=18 8+5 32.5 * 72.3 12 % 5 Du ++ v du - - v du V d: x=5; y=++x; (=> y=6 v x tng ln 6) z=x++; (=> z=6 v sau x gn cho z) sau x tng 1 => x=7 Do ta c kt qu cui cng l: x=7;y=6;z=6; V d: x=5; x=-x => x=-5 Php ton Logic && : v ||: hoc ! not V d: x=5 ,y=2 ,c=3 (x>y) && (x>c) false && anything is always false (x>y) || (c<x> true !x Ton t so snh trong javascript: == != > < >= <V> true 3<1>false 5 >=4 =>true the != he => true 4==4 =>true Ton t iu kin:
Trang 91/108 C php: (iu kin ) ? gi tr 1 : gi tr 2 Nu iu kin ng th tr v gi tr 1 Nu iu kin sai th tr v gi tr 2 V d: (day=Saturday) ? Weekend : Not Saturday Ton t chui: Welcome to + Netscape Navigator V d: Var welcome=Welcome to Welcome += Netscape Navigator ! welcome= Welcome to Netsacpe Navigator V d : S dng ton t iu kin kim tra ng vo <HTML> <HEAD> <TITLE>Example 3.3</TITLE> <script> var question="What is 10+10 ?"; var answer=20; var correct=''; var incorrect=''; var response=prompt(question,"0"); var output = (response==answer) ? correct:incorrect; </SCRIPT> </HEAD> <BODY> <script> <document> </SCRIPT> </BODY> </HTML> 12. Cu trc iu kin if else if iu kin lnh ; if iu kin { M JavaScript } V d: if (day==Saturday) { document.writeln(Its the weekend); alert( Its the weekend); } V d: If (day==Saturday) {
Trang 92/108 document.writeln(Its the weekend); } If (day!=Saturday) { document.writeln(Its not Saturday); } S dng cu trc else if cho v d trn If (day==Saturday) { document.writeln(Its the weekend); } else { document.writeln(Its not Saturday); } Cu trc kt hp : if iu kin 1 { Cc lnh JavaScript if iu kin 2 { Cc lnh JavaScript } else { cc lnh khc } Cc lnh JavaScript } else { Cc lnh khc } V d 1 : S dng phng php confirm() vi pht biu if <HTML> <HEAD> <TITLE>Example 3.3</TITLE> <script> var question="What is 10+10 ?"; var answer=20; var correct=''; var incorrect=''; var response=prompt(question,"0"); if (response != answer) { if (confirm("Wrong ! press OK for a second change")) response=prompt(question,"0"); } var output = (response ==answer ) ? correct:incorrect ; </SCRIPT> </HEAD> <BODY> <script>
Trang 93/108 <document> </SCRIPT> </BODY> </HTML> V d 2 : S dng phng php confirm() vi pht biu if - else <HTML> <HEAD> <TITLE>Example 3.3</TITLE> <script> var question="What is 10+10 ?"; var answer=20; var correct=''; var incorrect=''; var response=prompt(question,"0"); if (response != answer) { if (confirm("Wrong ! press OK for a second change")) response=prompt(question,"0"); }else { if (confirm("Correct ! press OK for a second question")) { question="What is 10*10"; answer=100; response=prompt(question,"0"); } } var output = (response ==answer ) ? correct:incorrect ; </SCRIPT> </HEAD> <BODY> <script> <document> </SCRIPT> </BODY> </HTML> ------------------Kent(HCE)
JAVASCRIPT Ton tp (bi 3) BI 3: HM V I TNG
Trang 94/108 Trong k thut lp trnh cc lp trnh vin thng s dng hm thc hin mt on chng trnh th hin cho mt module no thc hin mt cng vic no . Trong Javascript c cc hm c xy dng sn gip bn thc hin mt chc nng no v d nh hm alert(), document.write(), parseInt() v bn cng c th nh ngha ra cc hm khc ca mnh thc hin mt cng vic no ca bn, nh ngha hm bn theo c php sau: function function_name(parameters, arguments) { command block } Truyn tham s: function printName(name) { document.write(<HR>Your Name is ); document.write(name); document.write(<HR>); } V d: Gi hm printName()vi lnh sau printName(Bob); Khi hm printName()c thi hnh gi tr ca name l "Bob" nu gi hm printName()vi i s l mt bin var user = John; printName(user); Khi name l John. Nu bn mun thay i gi tr ca name bn c th lm nh sau : name = Mr. + name; Phm vi ca bin: Bin ton cc (Global variable) Bin cc b (Local variable) Tr v cc gi tr: V d: Dng return tr v gi tr ca bin cube. MTWRFSS function cube(number) { var cube = number * number * number; return cube; } JAVASCRIPT MEDIASPACE CLUB (HTD) PAGE: 11 V d: MTWRFSS <HTML> <HEAD>
Trang 95/108 <TITLE>Example 4.1</TITLE> <script> <!-- HIDE FROM OTHER BROWSERS //DEFINE FUNCTION testQuestion() function testQuestion(question) { //DEFINE LOCAL VARIABLES FOR THE FUNCTION var answer=eval(question); var output=What is + question + ?; var correct=; var incorrect=; //ASK THE QUESTION var response=prompt(output,0"); //CHECK THE RESULT return (response == answer) ? correct : incorrect; } // STOP HIDING FROM OTHER BROWSERS -> </SCRIPT> </HEAD< <BODY> <script> <HIDE> </SCRIPT> </BODY> </HTML> Hm eval dng chuyn i gi tr chui s thnh gi tr s eval(10*10)tr v gi tr l 100 Hm gi li hm: V d: <HTML> <HEAD> <TITLE>Example 4.2</TITLE> <script> <!-- HIDE FROM OTHER BROWSERS //DEFINE FUNCTION testQuestion() function testQuestion(question) { //DEFINE LOCAL VARIABLES FOR THE FUNCTION var answer=eval(question); var output=What is + question + ?; var correct=; var incorrect=;
Trang 96/108 //ASK THE QUESTION var response=prompt(output,0"); //CHECK THE RESULT return (response == answer) ? correct : testQuestion(question); } // STOP HIDING FROM OTHER BROWSERS -> </SCRIPT> </HEAD< <BODY> <script> <HIDE> </SCRIPT> </BODY> </HTML> V d 2: <HTML> <HEAD> <TITLE>Example 4.2</TITLE> <script> <!-- HIDE FROM OTHER BROWSERS //DEFINE FUNCTION testQuestion() function testQuestion(question,chances) { //DEFINE LOCAL VARIABLES FOR THE FUNCTION var answer=eval(question); var output=What is + question + ?; var correct=; JAVASCRIPT MEDIASPACE CLUB (HTD) PAGE: 12 var incorrect=; 4 //ASK THE QUESTION var response=prompt(output,0"); //CHECK THE RESULT if (chances > 1) { return (response == answer) ? correct : testQuestion(question,chances-1); } else { return (response == answer) ? correct : incorrect; } } // STOP HIDING FROM OTHER BROWSERS --
Trang 97/108 > </SCRIPT> </HEAD> <BODY> <script> <HIDE> </SCRIPT> </BODY> </HTML> ------------------Kent(HCE) JAVASCRIPT Ton tp (bi 4) Bi 4: TO I TNG TRONG JAVASCRIPT 1. nh ngha thuc tnh ca i tng: function student(name,age, grade) { this.name = name; this.age = age; this.grade = grade; } to mt Object ta s dng pht biu new.V d to i tng student1 student1 = new student(Bob,10,75); 3 thuc tnh ca i tng student1 l : student1.name student1.age student1.grade V d to i tng student2 student2 = new student(Jane,9,82); thm thuc tnh cho student1 bn c th lm nh sau: student1.mother = Susan; hoc bn c th nh ngha li hm student MTWRFSS 4 function student(name, age, grade, mother) { this.name = name; this.age = age; this.grade = grade; this.mother = mother; } JAVASCRIPT MEDIASPACE CLUB (HTD) PAGE: 13 i tng l thuc tnh ca i tng khc V d: function grade (math, english, science) {
Trang 98/108 this.math = math; this.english = english; this.science = science; } bobGrade = new grade(75,80,77); janeGrade = new grade(82,88,75); student1 = new student(Bob,10,bobGrade); student2 = new student(Jane,9,janeGrade); student1.grade.math:dng ly im Ton ca student1 student2.grade.science: dng ly im mn Khoa hc ca student2 2. Thm phng php cho i tng: function displayProfile() { document.write(Name: + this.name + <BR>); document.write(Age: + this.age + <BR>); document.write(Mothers Name: + this.mother + <BR>); document.write(Math Grade: + this.grade.math + <BR>); document.write(English Grade: + this.grade.english + <BR>); document.write(Science Grade: + this.grade.science + <BR>); } function student(name,age, grade) { this.name = name; this.age = age; this.grade = grade; this.mother = mother; this.displayProfile = displayProfile; } student1.displayProfile(); V du: 4 <HTML> <HEAD> <TITLE>Example 4.3</TITLE> <script> <!-- HIDE FROM OTHER BROWSERS //DEFINE METHOD function displayInfo() { document.write(<H1>Employee Profile: + this.name + </H1><HR> ); document.writeln(Employee Number: + this.number);
Trang 99/108
JAVASCRIPT MEDIASPACE CLUB (HTD) PAGE: 14 document.writeln(Social Security Number: + this.socsec); document.writeln(Annual Salary: + this.salary); document.write( ); } //DEFINE OBJECT function employee() { this.name=prompt(Enter Employees Name,Name); this.number=prompt(Enter Employee Number for + this.name,000-000"); this.socsec=prompt(Enter Social Security Number for + this.name,000-00-0000"); this.salary=prompt(Enter Annual Salary for + this.name,$00,000"); this.displayInfo=displayInfo; } newEmployee=new employee(); // STOP HIDING FROM OTHER BROWSERS -> </SCRIPT> </HEAD> <BODY> <script> <HIDE> </SCRIPT> </BODY> </HTML> Vi du:
Trang 100/108 <script> <Begin> 12) ? myhours 12 : myhours; ampm = (myhours >= 12) ? 'Bu i Chi u ' : ' Bu i S ng '; mytime = mydate.getMinutes(); myminutes = ((mytime <10> </script> Trong phn body bn c th xut ra dng nh sau: <body> <script> document.write("<font>" + ampmhour + "" + myminutes + ampm) document.write(" - " + day + " ng y " + myweekday +" "); document.write( month + " , n m " + year + "</font>"); </script> </body> ------------------Kent(HCE) JAVASCRIPT Ton tp (bi 5) Bi 5: S KIN TRONG JAVASCRIPT Cc s kin cung cp cc tng tc vi ca s trnh duyt v ti liu hin hnh ang c load trong trang web, cc hnh ng ca user khi nhp d liu vo form v khi click vo cc button trong form. Khi s dng b qun l s kin bn c th vit cc hm biu din cho cc hnh ng da vo cc s kin oc chn Bng s kin trong Javascript JAVASCRIPT MEDIASPACE CLUB (HTD) PAGE: 16 Tn s kin M t blur Xy ra khi im tp trungca ng vo c di chuyn ra khi mt thnh phn ca Form (Khi user click ra ngoi mt trng) click Khi user Click vo 1 link hoc thnh phn ca Form. change Xy ra khi gi tr ca Form Field b thay i bi user. focus Xy ra khi ng vo tp trung vo thnh phn ca Form load Xy ra khi mt trang c Load vo trong b duyt. mouseover Xy ra khi User di chuyn mouse qua mt Hyperlink. select Xy ra khi User chn 1 trng ca thnh phn Form. submit Xy ra khi User xc nhn nhp xong d liu.
Trang 101/108 unload Xy ra khi User ri khi trang Web. B qun l s kin (Event Handler) qun l cc s kin trong javascript ta dng cc b qun l s kin. C php ca mt b qun l s kin: <HTML_TAG> V d: <INPUT> V d: <INPUT TYPE=text onChange= if (parseInt(this.value) <5> V d: <INPUT> T kha this: quy cho i tng hin hnh.Trong Javascript Form l m i tng.Cc thnh phn ca Form bao gm text fields, checkboxes, radio buttons, buttons, v selection lists. V d: <INPUT> Cc b qun l s kin trong Javascript i tng B qun l s kin tng ng. JAVASCRIPT MEDIASPACE CLUB (HTD) PAGE: 17 Selection list onBlur, onChange, onFocus Text element onBlur, onChange, onFocus, onSelect Textarea element onBlur, onChange, onFocus, onSelect Button element OnClick Checkbox onClick Radio button OnClick Hypertext link onClick, onMouseOver Reset button OnClick Submit button OnClick Document onLoad, onUnload Window onLoad, onUnload Form onSubmit 5 Cch dng b qun l s kin onLoad & onUnload <HTML> <HEAD> <TITLE>Example 5.1</TITLE> </HEAD> <BODY> </BODY> </HTML> MTWRFSS Vi du: <HTML>
Trang 102/108 <HEAD> <TITLE>Example 5.1</TITLE> <script> <HIDE> </SCRIPT> </HEAD> <BODY> </BODY> </HTML> Vi du MTWRFSS <HTML> <HEAD> JAVASCRIPT MEDIASPACE CLUB (HTD) PAGE: 18 <TITLE>Example 5.1</TITLE> <script> <HIDE> </SCRIPT> </HEAD> <BODY> </BODY> </HTML> Cc s kin v Form Cac s kin c s dng truy xut Form nh: OnClick, onSubmit, onFocus, onBlur, v onChange. V d: <INPUT> Khi gi tr thay i function check() s c gi. Ta dng t kha this chuyn i tng ca trng hin hnh n hm check() Bn cng c th da vo cc phng php v cc thuc tnh ca i tng bng pht biu sau: this.methodName() & this.propertyName. V d: <HTML> <HEAD> <TITLE>Example 5.3</TITLE> <script> <HIDE> </SCRIPT> </HEAD> <BODY> <FORM> Enter a JavaScript mathematical
Trang 103/108 expression: <INPUT> <BR> JAVASCRIPT MEDIASPACE CLUB (HTD) PAGE: 19 The result of this expression is: <INPUT> </FORM> </BODY> </HTML> MTWRFSS formObjectName.fieldnameng ch tn trng ca hin hnh trong Form. formObjectName.fieldname.value: dng ly gi tr ca trng form hin hnh. S dng vng lp trong JavaScript 1 . Vng lp for : C php : for ( init value ; condition ; update expression ) V d : for (i = 0 ; i < 5 ; i++) { lnh ; } V d: <HTML> <HEAD> <TITLE> for loop Examle </TITLE> </HEAD> <BODY> <script> <!- var name=prompt("What is your name?" ,"name"); var query= " " ; document.write("<H1>" + name + " 's 10 favorite foods </H1> "); for (var i=1 ;i<10> </SCRIPT> </BODY> </HTML> 2 . Vng lp while : C php: While ( iu kin) { lnh JavaScript ; } V d: var num=1;
Trang 104/108 while(num<=10) { document.writeln(num); num++; } V d: var answer= ; var correc=100; var question= what is 10*10 ? ; while(answer!=correct) { answer=prompt(question,0); } 3. To mng vi vng lp for: function createArray(num) { this.length=num; for ( var j=0 ; j<num; j++) this[j]=0; } Hm s to mt mng c gi tr index bt u l 0 v gn tt c cc gi tr ca mng v 0 . s dng i tng mng ta c th lm nh sau: newArray= new createArray(4) S to ra mt mng gm 4 thnh phn newArray[0] NewArray[3] JAVASCRIPT MEDIASPACE CLUB (HTD) PAGE: 21 S dng i tng Windows Window l i tng ca mi trng Navigator,ngoi cc thuc tnh Window i tng window cn gi cc i tng khc m c th c xem nh l cc thnh phn (member) ca window, cc i tng l: Cc frame c to Cc i tng location v histtory i tng document i tng document cha (encompasses) tt c cc thnh phn trong trang HTML.y l mt i tng hon ho c cc i tng khc ca JavaScript gn (attached) vo n (nh l anchor,form,history,link).Hu nh mi chng trnh JavaScript u c s dng i tng ny tham kho n cc thnh phn trong trang HTML. 1) Cc thuc tnh (properties) ca i tng document a . alink b . anchor c . bgColor
Trang 105/108 d . cookies e . fgColor f . form g . lastModified h . linkColor i . links j . location k . referrer l . title m . vlinkColor 2) Cc hnh vi (Methods) ca i tng document a . clear() b . close() c . open() d . write() e . writeln() 3) Cc thuc tnh ca i tng Window a . defaultStatus : Gi tr mt nhin c hin th thanh trng thi b . frames : Mng cc i tng cha ng mt mc cho mi frame con trong mt frame ti liu c . parent : c s dng trong FRAMSET d . self : Ca s hin hnh , dng phn bit gia cc ca s hin hnh v cc forms c cng tn . e . status : Gi tr ca chui vn bn c hin th ti thanh status bar.Dng hin thi cc thng bo cho ngi s dng . f . top : nh cao nht ca ca s cha JAVASCRIPT MEDIASPACE CLUB (HTD) PAGE: 22 g . window 4) Cc hnh vi (Methods) ca i tng window a . alert() : Hin 1 thng bo trong hp thoi vi OK button. b . close() : ng ca s hin hnh. c . open() : M mt ca s mi vi 1 ti liu c ch ra hoc m mt ti liu trong mt tn ca s c ch nh. d . prompt() : Hin mt hp thng bo e . setTimeout() : f . clearTimeout() : Hnh vi ny cung cp cch gi pht biu JavaScript sau mt khong thi gian tri qua .Ngoi ra i tng window c th thc hin event handler : onLoad=statement Lm vic vi status bar Khi user di chuyn qua mt hyperlink ta c th hin ra mt thng bo ti thanh status bar ca
Trang 106/108 bowser da vo event handler onMouseOver v bng cch t self.status l mt chui (hoc window.status). V d: <HTML> <HEAD> <TITLE>Status Example</TITLE> <BODY> <A>Lop chuyen d PLC </A> <A>Thiet Ke Web</A> </BODY> </HTML> M v ng cc ca s S dng phng php open() v close() ta c th iu khin vic m v ng ca s cha ti liu. open (URL , WindowName , featureList) ; Cc c im trong phng php open() gm c: toolbar : to mt toolbar chun location: to mt vng location directories: to cc button th mc chun status: to thanh trng thi. menubar : to thanh menu ti nh ca ca s scrollbars: to thanh scroll bar resizable: cho php user thay i kch thc ca s width : ch nh chiu rng ca s theo n v pixel height : ch nh chiu cao ca s theo n v pixel V d: window.open( plc.htm,newWindow,toolbar=yes,locat ion=1,directories=yes,status=yes, JAVASCRIPT MEDIASPACE CLUB (HTD) PAGE: 23 menubar=1,scroolbar=yes,resizable=0,copyhistory=1, width=200,height=200); V d: <HTML> <HEAD> <TITLE>WINDOWS</TITLE> <script> <function> </SCRIPT> </HEAD> <BODY> <a>PLC</a>, <a>Sua chua</a>, <a>Thiet ke web</a> </BODY>
Trang 107/108 </HTML> ng ca s ta c th dng phng php close() V d: <HTML> <HEAD> <TITLE>Close Example</TITLE> </HEAD> <BODY> <A></A> <A>Close This Sample</A> </BODY> </HTML> S dng i tng string String l mt i tng ca JavaScript,khi dng i tng string chng ta khng cn cc pht biu to mt instance (th nghim) ca i tng ,bt k lc no ta t text gia hai du ngoc kp v gn n n mt bin hoc mt thuc tnh th ta to mt i tng string. 1. Cc thuc tnh ca i tng string Thuc tnh length gi s k t ca string. 2. Cc hnh vi (Methods) ca i tng string a . Anchor (nameAttribute) b . big() c . blink() d . bold() e . charAt(index) f . fixed() g . fontcolor(color) JAVASCRIPT MEDIASPACE CLUB (HTD) PAGE: 24 h . fontsize(size) i . indexOf(character,[fromIndex]) j . italics() k . lastIndexOf(character,[fromIndex]) l . link(URL) m . small() n . strike() o . sub() p . substring(startIndex,endIndex) q . sup() r . toLowerCase() s . toUpperCase() Su Tm
Trang 108/108 ------------------Kent(HCE)

Giao Trinh Java Script

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Giao Trinh Java Script

Uploaded by

Copyright:

Available Formats

Trang 1/108

Gio trnh JavaScript ***

M HNH I TNG (OBJECT MODEL)....................................................................56

CHNG 2 NHP MN JAVASCRIPT

Thuc tnh SRC c th c nh r bng a ch URL, cc lin kt hoc cc ng dn tuyt i, v d:

V d: Cch thc write() xut ra th HTML

V d: S khc nhau ca write() v writeln():

Khi duyt s c kt qu:

Hnh2.1: Hin th ca s nhp tn Khi duyt c kt qu:

Hnh 2.2: Hin th li cho ngi nhp H H

nh du ghi ch mt khi trong on script

CHNG 3 BIN TRONG JAVASCRIPT

T t l cc gi tr trong Chng trnh khng thay i. Sau y l cc v d v t t:

3.3. KIU D LIU

</HTML> Cc trnh duyt h tr JavaScript s x l chnh xc v d trn v a ra kt qu di y:

biu din du nhy kp ( " ), trong chui s dng ( \" ), v d:

NH NGHA V PHN LOI BIU THC

Trang 20/108 x=x|y x|=y

Trang 22/108 while loop

Trang 23/108 Hnh 5.1: qu ca lnh

V d: on m sau tng x t 0 ln 5, nhy ln 8 v tip tc tng ln 10

CC CU LNH THAO TC TRN I TNG

Hnh 5.2: Kt qu ca lnh for...in

Hnh 5.3: Kt qu ca v d lnh New K K

Hnh 5.4: Kt qu ca v d lnh with

Hn h 5.5: JavaScript c mt s mt i tng no: 3.1.9. EVAL

Hnh 5.6 V d hm Eval V V

Hnh 5.8 : Kt qu ca v d parseFloat

Hnh 5.9: V d mng

Chng trnh x l s kin (Event handler): Mt on m hay mt hm

V d sau gi hm CheckAge() mi khi gi tr ca trng vn bn thay i:

Trang 36/108 kt ca form.

Hy chn nhng hot ng ngoi tri m bn yu thch:<BR>

Hnh 5.10: Minh ho cho v d Event Handler

5. S dng vng lp while m phng cc vng lp for sau: a.

3.1.13. TR LI 1. S dng cch thc confirm() v cu trc if...then:

2. Thc hin hi ngi s dng:

CC I TNG TRONG JAVASCRIPT

V d V d sau s hin th cc thuc tnh ca i tng navigator

Trong file muske13.html li tip tc t mt frameset:

Mi mt form c th c tham chiu nh sau:

CC PHN T CA I TNG FORM

Mt trng text cho php nhp vp nhiu dng

Mi phn t c th c t tn JavaScript truy nhp n chng qua tn 4.1.20.

PHN T FILE UPLOAD

Khi ln u tin hin th bn c th truy nhp ti cc thng tin sau:

Sa cc danh sch la chn

form.encoding form,name form.target form.submit type onSubmit button checkbox pasword

submit text TEXTAREA

thuc HTML thuc HTML

focus() blur() select() onFocus()

options text TABLE TR TD COLSPAN ROWSPAN BODER

rng ng vin ca bng

M HNH I TNG (OBJECT MODEL)

Khi gi hm show_props(myCar,myCar) s hin ln:

V d 2: To ra mt mng vi 2 phn t c khi u v mt phn t rng:

Trang 78/108 V sau ta to ra hai ngi mi:

By gi bn nh ngha li hm xy dng car nh sau:

Nh vy bn c th to i tng kiu car mi:

Ch rng bn cng c th to ra mt thuc tnh mi cho i tng trc khi nh ngha n, v d:

Nh vy c th nh ngha li i tng car nh sau:

Sau , bn c th gi cch thc displayCar i vi mi i tng:

BNG TNG KT CC T KHO