Giao Trinh JAVASCRIPT

JavaScript
Gi¸o tr×nh JavaScript

***
ch¬ng 1 Lêi nãi ®Çu.................................................................................. ..................4
Ch¬ng 2 NhËp m«n JavaScript............................................................ .........................5
2.1.Nhóng JavaScript vµo file HTML................................................................... ..5
2.3. ThÎ <NOScript> vµ </NOSCRIPT>......................................................... .......7
2.3. HiÓn thÞ mét dßng text............................................................................. ...8
2.4. Giao tiÕp víi ngêi sö dông.................................................. ........................10
2.5. §iÓm l¹i çc lÖnh vµ më réng..................................................................... .12
Ch¬ng 3 BiÕn trong JavaScript............................................................................. ......14
3.1. BiÕn vµ ph©n lo¹I biÕn............................................................. .................14
3.2. BiÓu diÔn tõ tè trong JavaScript............................................................. ....14
3.3. KiÓu d÷ liÖu.............................................................. ................................14
1.1.1. KIÓu nguyªn (Interger)........................................................... ..................15
1.1.2. KiÓu dÊu phÈy ®éng (Floating Point)............................................. ..........15
1.1.3. KiÓu logic (Boolean)...................................................................... ...........16
1.1.4. KiÓu chuçi (String)........................................................... ........................16
2. X©y dùng çc biÓu thøc trong JavaScript..............................................17
®Þnh nghÜa vµ ph©n lo¹I biÓu thøc................................................................ ..........17

Çc to¸n tö (operator)....................................................................................... .........17
2.1.1. G¸n...................................................................................................... .....17
2.1.2. So s¸nh.................................................................................................. ...18
2.1.3. Sè häc.................................................................................. ....................18
2.1.4. Chuçi........................................................................................... .............18
2.1.5. Logic......................................................................... ...............................19
2.1.6. Bitwise........................................................................ .............................19
Bµi tËp20
2.1.7. C©u hái................................................................................................. ...20
2.1.8. Tr¶ lêi............................................................................... ........................20
3. Çc lÖnh..............................................................................................22
C©u lÖnh ®iÒu kiÖn........................................................................................ .........22

C©u lÖnh lÆp............................................................................. ..............................23
3.1.1. Vßng lÆp for................................................................ ............................23
3.1.2. while.......................................................................... ..............................24
3.1.3. Break.................................................................................................... ....25
3.1.4. continue.................................................................................. .................25
Çc c©u lÖnh thao t¸c trªn ®èi tîng............................................................. .............25
Khoa Toan tin, §¹i häc Quèc gia Hµ Néi

JavaScript
2
3.1.5. for...in.............................................................................................. .........26

3.1.6. new..................................................................................... .....................27
3.1.7. this.............................................................................................. .............30
3.1.8. with.......................................................................................... ................30
Çc hµm (Functions).................................................................................. .................32
Çc hµm cã s½n................................................................................... ......................33
3.1.9. eval........................................................................................ ..................34
3.1.10. parseInt......................................................................................... .........35
3.1.11. parseFloat........................................................................ ......................36
M¶ng (Array)................................................................................... ...........................37
Sù kiÖn............................................................................................................. ..........38
Bµi tËp42
3.1.12. C©u hái............................................................................................... ...42
3.1.13. Tr¶ lêi............................................................................ .........................44
4. Çc ®èi tîng trong JavaScript................................................................47
§èi tîng navigator...................................................................................................... ..49

§èi tîng window....................................................................................................... ....50
4.1.1. Çc thuéc tÝnh................................................................. ........................50
4.1.2. Çc ph¬ng thøc............................................................................... .........51
4.1.3. Çc ch¬ng tr×nh xö lý sù kiÖn.......................................................... .......52
§èi tîng location....................................................................................... ...................52
§èi tîng frame...................................................................................... .......................53
4.1.4. Çc thuéc tÝnh................................................................. ........................53
4.1.5. Çc ph¬ng thøc............................................................................... .........53
4.1.6. Sö dông Frame.................................................................... .....................53
§èi tîng document................................................................................................ .......57
4.1.7. Çc thuéc tÝnh................................................................. ........................58
4.1.8. Çc ph¬ng thøc............................................................................... .........58
§èi tîng anchors........................................................................................ ..................58
§èi tîng forms............................................................................................................. .59
4.1.9. Çc thuéc tÝnh................................................................. ........................59
4.1.10. Çc ph¬ng thøc............................................................................. .........60
4.1.11. Çc ch¬ng tr×nh xö lý sù kiÖn........................................................ .......60
§èi tîng history.................................................................................................... ........60
4.1.12. Çc thuéc tÝnh............................................................... ........................60
4.1.13. Çc ph¬ng thøc............................................................................. .........60
§èi tîng links.................................................................................... ...........................60
4.1.14. Çc thuéc tÝnh............................................................... ........................61
4.1.15. Çc ch¬ng tr×nh xö lý sù kiÖn........................................................ .......61

JavaScript
3
§èi tîng Math......................................................................................................... ......61

4.1.16. Çc thuéc tÝnh............................................................... ........................61
4.1.17. Çc ph¬ng thøc............................................................................. .........62
§èi tîng Date.............................................................................................. .................63
4.1.18. Çc ph¬ng thøc............................................................................. .........63
§èi tîng String........................................................................................ .....................64
4.1.19. Çc ph¬ng thøc............................................................................. .........64
Çc phÇn tö cña ®èi tîng Form................................................................................ ...65
4.1.20. Thuéc tÝnh type................................................................... ..................66
4.1.21. PhÇn tö button.................................................................. .....................66
4.1.22. PhÇn tö checkbox............................................................................. ......67
4.1.23. PhÇn tö File Upload...................................................... ..........................70
4.1.24. PhÇn tö hidden............................................................................... ........70
4.1.25. PhÇn tö Password....................................................................... ............70
4.1.26. PhÇn tö radio......................................................................................... .70
4.1.27. PhÇn tö reset........................................................................................ ..72
4.1.28. PhÇn tö select.................................................................. ......................73
5. M« h×nh ®èi tîng (Object Model).........................................................84
§èi tîng vµ thuéc tÝnh......................................................................................... ........84

T¹o çc ®èi tîng míi................................................................................ ...................85
5.1.1. Sö dông khëi t¹o ®èi tîng.......................................................... ...............85
5.1.2. Sö dông mét hµm x©y dùng(Constructor Function).................................86
5.1.3. LËp môc lôc cho çc thuéc tÝnh cña ®èi tîng..................................... ......88
5.1.4. §Þnh nghÜa thªm çc thuéc tÝnh cho mét kiÓu ®èi tîng..........................88
5.1.5. §Þnh nghÜa çc çch thøc............................................... .........................88
5.1.6. Sö dông cho çc tham chiÕu ®èi tîng (Object References)......................89
5.1.7. Xo¸ ®èi tîng........................................................................... ..................90
6. B¶ng tæng kÕt çc tõ kho¸...................................................................91
7. Tæng kÕt............................................................................................92

JavaScript
4
ch¬ng 1 Lêi nãi ®Çu

Víi HTML and Microsoft FrontPage b¹n ®· biÕt çch t¹o ra trang Web -
tuy nhiªn chØ míi ë møc biÓu diÔn th«ng tin chø cha ph¶i lµ çc trang
Web ®éng cã kh¶ n¨ng ®¸p øng çc sù kiÖn tõ phÝa ngêi dïng. H·ng
Netscape ®· ®a ra ng«n ng÷ script cã tªn lµ LiveScript ®Ó thùc hiÖn
chøc n¨ng nµy. Sau ®ã ng«n ng÷ nµy ®îc ®æi tªn thµnh JavaScript
®Ó tËn dông tÝnh ®¹i chóng cña ng«n ng÷ lËp tr×nh Java. MÆc dï cã
nh÷ng ®iÓm t¬ng ®ång gi÷a Java vµ JavaScript, nhng chóng vÉn lµ
hai ng«n ng÷ riªng biÖt.
JavaScript lµ ng«n ng÷ díi d¹ng script cã thÓ g¾n víi çc file HTML. Nã
kh«ng ®îc biªn dÞch mµ ®îc tr×nh duyÖt diÔn dÞch. Kh«ng gièng Java
ph¶i chuyÓn thµnh çc m· dÔ biªn dÞch, tr×nh duyÖt ®äc JavaScript díi
d¹ng m· nguån. ChÝnh v× vËy b¹n cã thÓ dÔ dµng häc JavaScript qua
vÝ dô bëi v× b¹n cã thÓ thÊy çch sö dông JavaScript trªn çc trang
Web.
JavaScript lµ ng«n ng÷ dùa trªn ®èi tîng, cã nghÜa lµ bao gåm nhiÒu
kiÓu ®èi tîng, vÝ dô ®èi tîng Math víi tÊt c¶ çc chøc n¨ng to¸n häc.
Tuy vËy JavaScript kh«ng lµ ng«n ng÷ híng ®èi tîng nh C++ hay Java
do kh«ng hç trî çc líp hay tÝnh thõa kÕ.
JavaScript cã thÓ ®¸p øng çc sù kiÖn nh t¶i hay lo¹i bá çc form. Kh¶
n¨ng nµy cho phÐp JavaScript trë thµnh mét ng«n ng÷ script ®éng.
Gièng víi HTML vµ Java, JavaScript ®îc thiÕt kÕ ®éc lËp víi hÖ ®iÒu
hµnh. Nã cã thÓ ch¹y trªn bÊt kú hÖ ®iÒu hµnh nµo cã tr×nh duyÖt hç
trî JavaScript. Ngoµi ra JavaScript gièng Java ë khÝa c¹nh an ninh:
JavaScript kh«ng thÓ ®äc vµ viÕt vµo file cña ngêi dïng.
Çc tr×nh duyÖt web nh Nescape Navigator 2.0 trë ®i cã thÓ hiÓn thÞ
nh÷ng c©u lÖnh JavaScript ®îc nhóng vµo trang HTML. Khi tr×nh
duyÖt yªu cÇu mét trang, server sÏ göi ®Çy ®ñ néi dung cña trang ®ã,
bao gåm c¶ HTML vµ çc c©u lÖnh JavaScript qua m¹ng tíi client. Client
sÏ ®äc trang ®ã tõ ®Çu ®Õn cuèi, hiÓn thÞ çc kÕt qu¶ cña HTML vµ
xö lý çc c©u lÖnh JavaScript khi nµo chóng xuÊt hiÖn.
Çc c©u lÖnh JavaScript ®îc nhóng trong mét trang HTML cã thÓ tr¶ lêi
cho çc sù kiÖn cña ngêi sö dông nh kÝch chuét, nhËp vµo mét form vµ
®iÒu híng trang. VÝ dô b¹n cã thÓ kiÓm tra çc gi¸ trÞ th«ng tin mµ ng-
êi sö dông ®a vµo mµ kh«ng cÇn ®Õn bÊt cø mét qu¸ tr×nh truyÒn
trªn m¹ng nµo. Trang HTML víi JavaScript ®îc nhóng sÏ kiÓm tra çc gi¸
trÞ ®îc ®a vµo vµ sÏ th«ng b¸o víi ngêi sö dông khi gi¸ trÞ ®a vµo lµ
kh«ng hîp lÖ.
Môc ®Ých cña phÇn nµy lµ giíi thiÖu vÒ ng«n ng÷ lËp tr×nh JavaScript
®Ó b¹n cã thÓ viÕt çc script vµo file HTML cña m×nh.

JavaScript
5
Ch¬ng 2 NhËp m«n JavaScript
2.1.Nhóng JavaScript vµo file HTML

B¹n cã thÓ nhóng JavaScript vµo mét file HTML theo mét trong çc çch
sau ®©y:
• Sö dông çc c©u lÖnh vµ çc hµm trong cÆp thÎ <SCRIPT>
• Sö dông çc file nguån JavaScript
• Sö dông mét biÓu thøc JavaScript lµm gi¸ trÞ cña mét thuéc
tÝnh HTML
• Sö dông thÎ sù kiÖn (event handlers) trong mét thÎ HTML nµo
®ã
Trong ®ã, sö dông cÆp thÎ <SCRIPT>...</SCRIPT> vµ nhóng mét file
nguån JavaScript lµ ®îc sö dông nhiÒu h¬n c¶.
2.1.1.Sö dông thÎ SCRIPT
Script ®îc ®a vµo file HTML bªng çch sö dông
Chó ý:
cÆp thÎ <SCRIPT> vµ <\SCRIPT>. Çc thÎ
<SCRIPT> cã thÓ xuÊt hiÖn trong phÇn <HEAD> Ghi chó kh«ng ®îc
®Æt trong cÆp thÎ
hay <BODY> cña file HTML. NÕu ®Æt trong phÇn
<- vµ -> nh ghi chó
<HEAD>, nã sÏ ®îc t¶i vµ s½n sµng tríc khi phÇn trong file HTML. Có
cßn l¹i cña v¨n b¶n ®îc t¶i. ph¸p cña
JavaScript t¬ng tù
Thuéc tÝnh duy nhÊt ®îc ®Þnh nghÜa hiÖn thêi có ph¸p cña C nªn
cho thÎ <SCRIPT> lµ “LANGUAGE=“ dïng ®Ó cã thÓ sö dông //
x¸c ®Þnh ng«n ng÷ script ®îc sö dông. Cã hai gi¸ hay /* ... */.
trÞ ®îc ®Þnh nghÜa lµ "JavaScript" vµ "VBScript". Víi ch¬ng tr×nh viÕt
bªng JavaScript b¹n sö dông có ph¸p sau :
<SCRIPT LANGUAGE=”JavaScript”>
// INSERT ALL JavaScript HERE
</SCRIPT>
§iÓm kh¸c nhau gi÷a có ph¸p viÕt çc ghi chó gi÷a HTML vµ JavaScript
lµ cho phÐp b¹n Èn çc m· JavaScript trong çc ghi chó cña file HTML,
®Ó çc tr×nh duyÖt cò kh«ng hç trî cho JavaScript cã thÓ ®äc ®îc nã
nh trong vÝ dô sau ®©y:
<SCRIPT LANGUAGE=”JavaScript”>

</SCRIPT>

JavaScript
6
Dßng cuèi cïng cña script cÇn cã dÊu // ®Ó tr×nh duyÖt kh«ng diÔn
dÞch dßng nµy díi d¹ng m· JavaScript. Çc vÝ dô trong ch¬ng nµy kh«ng
chøa ®Æc ®iÓm Èn cña JavaScript ®Ó m· cã thÓ dÔ hiÓu h¬n.
2.1.2. Sö dông mét file nguån JavaScript
Thuéc tÝnh SRC cña thÎ <SCRIPT> cho phÐp b¹n chØ râ file nguån
JavaScript ®îc sö dông (dïng ph¬ng ph¸p nµy hay h¬n nhóng trùc tiÕp
mét ®o¹n lÖnh JavaScript vµo trang HTML).
Có ph¸p:
<SCRIPT SRC="file_name.js">
....
</SCRIPT>
Thuéc tÝnh nµy rÊy h÷u dông cho viÖc chia sÎ çc hµm dïng chung cho
nhiÒu trang kh¸c nhau. Çc c©u lÖnh JavaScript nªm trong cÆp thÎ
<SCRIPT> vµ </SCRIPT> cã chøa thuéc tinh SRC trõ khi nã cã lçi. VÝ dô
b¹n muèn ®a dßng lÖnh sau vµo gi÷a cÆp thÎ <SCRIPT SRC="..."> vµ
</SCRIPT>:
document.write("Kh«ng t×m thÊy file JS ®a vµo!");
Thuéc tÝnh SRC cã thÓ ®îc ®Þnh râ bªng ®Þa chØ URL, çc liªn kÕt
hoÆc çc ®êng dÉn tuyÖt ®èi, vÝ dô:
<SCRIPT SRC=" http://cse.com.vn ">
Çc file JavaScript bªn ngoµi kh«ng ®îc
Chó ý
chøa bÊt kú thÎ HTML nµo. Chóng chØ ®îc
chøa çc c©u lÖnh JavaScript vµ ®Þnh Khi b¹n muèn chØ ra
nghÜa hµm. mét x©u trÝch dÉn
trong mét x©u kh¸c cÇn
Tªn file cña çc hµm JavaScript bªn ngoµi sö dông dÊu nh¸y ®¬n (
cÇn cã ®u«i .js, vµ server sÏ ph¶i ¸nh x¹ ' ) ®Ó ph©n ®Þnh x©u
®ã. §iÒu nµy cho phÐp
®u«i .js ®ã tíi kiÓu MIME application/x- script nhËn ra x©u ký
javascript. §ã lµ nh÷ng g× mµ server göi
trë l¹i phÇn Header cña file HTML. §Ó ¸nh x¹ ®u«i nµy vµo kiÓu MIME,
ta thªm dßng sau vµo file mime.types trong ®êng dÉn cÊu h×nh cña
server, sau ®ã khëi ®éng l¹i server:
type=application/x-javascript
NÕu server kh«ng ¸nh x¹ ®îc ®u«i .js tíi kiÓu MIME application/x-
javascript , Navigator sÏ t¶i file JavaScript ®îc chØ ra trong thuéc tÝnh
SRC vÒ kh«ng ®óng çch.
Trong vÝ dô sau, hµm bar cã chøa x©u "left" nªm trong mét cÆp dÊu
nh¸y kÐp:
function bar(widthPct){

JavaScript
7
document.write(" <HR ALIGN='LEFT' WIDTH="+widthPct+"%>")

}
2.3. ThÎ <NOScript> vµ </NOSCRIPT>

CÆp thÎ nµy dïng ®Ó ®Þnh râ néi dung th«ng b¸o cho ngêi sö dông
biÕt tr×nh duyÖt kh«ng hç trî JavaScript. Khi ®ã tr×nh duyÖt sÏ kh«ng
hiÓu thÎ <NOSCRIPT> vµ nã bÞ lê ®i, cßn ®o¹n m· nªm trong cÆp thÎ
nµy sÏ ®îc Navigator hiÓn thÞ. Ngîc l¹i, nÕu tr×nh duyÖt cã hç trî
JavaScript th× ®o¹n m· trong cÆp thÎ <NOSCRIPT> sÏ ®îc bá qua. Tuy
nhiªn, ®iÒu nµy còng cã thÓ x¶y ra nÕu ngêi sö dông kh«ng sö dông
JavaScript trong tr×nh duyÖt cña m×nh bªng çch t¾t nã ®i trong hép
Preferences/Advanced.
VÝ dô:
<NOSCRIPT>
<B> Trang nµy cã sö dông JavaScript. Do ®ã b¹n cÇn sö dông tr×nh duyÖt
Netscape Navigator tõ version 2.0 trë ®i!
<BR>
<A HREF="http://home.netscape.com/comprd/mirror/index.html">
H·y kÝch chuét vµo ®©y ®Ó t¶i vÒ phiªn b¶n Netscape míi h¬n
</A>
</BR>
NÕu b¹n ®· sö dông tr×nh duyÖt Netscape tõ 2.0 trë ®i mµ vÉn ®äc ®îc dßng
ch÷ nµy th× h·y bËt Preferences/Advanced/JavaScript lªn
</NOSCRIPT>
H×nh 2.3: Minh ho¹ thÎ NOSCRIPT

JavaScript
8
2.3. HiÓn thÞ mét dßng text

Trong hÇu hÕt çc ng«n ng÷ lËp tr×nh, mét trong nh÷ng kh¶ n¨ng c¬
së lµ hiÓn thÞ ra mµn h×nh mét dßng text. Trong JavaScript, ngêi lËp
tr×nh còng cã thÓ ®iÒu khiÓn viÖc xuÊt ra mµn h×nh cña client mét
dßng text tuÇn tù trong file HTML. JavaScript sÏ x¸c ®Þnh ®iÓm mµ nã
sÏ xuÊt ra trong file HTML vµ dßng text kÕt qu¶ sÏ ®îc dÞch nh çc dßng
HTML kh¸c vµ hiÓn thÞ trªn trang.
H¬n n÷a, JavaScript cßn cho phÐp ngêi lËp tr×nh sinh ra mét hép
th«ng b¸o hoÆc x¸c nhËn gåm mét hoÆc hai nót. Ngoµi ra, dßng text
vµ çc con sè cßn cã thÓ hiÓn thÞ trong trêng TEXT vµ TEXTAREA cña
mét form.
Trong phÇn nµy, ta sÏ häc çch thøc write() vµ writeln() cña ®èi tîng
document.
§èi tîng document trong JavaScript ®îc thiÕt kÕ s½n hai çch thøc ®Ó
xuÊt mét dßng text ra mµn h×nh client: write() vµ writeln(). Çch gäi
mét çch thøc cña mét ®èi tîng nh sau:
object_name.property_name
D÷ liÖu mµ çch thøc dïng ®Ó thùc hiÖn c«ng viÖc cña nã ®îc ®a vµo
dßng tham sè, vÝ dô:
document.write("Test");
document.writeln('Test');
Çch thøc write() xuÊt ra mµn h×nh x©u Text nhng kh«ng xuèng dßng, cßn çch
thøc writeln() sau khi viÕt xong dßng Text tù ®éng xuèng dßng. Hai çch thøc nµy
®Òu cho phÐp xuÊt ra thÎ HTML.
VÝ dô: Çch thøc write() xuÊt ra thÎ HTML
<HTML>
<HEAD>
<TITLE>Ouputting Text</TITLE>
</HEAD>
<BODY> This text is plain.<BR> <B>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</BODY>
</HTML>

JavaScript
9
VÝ dô: Sù kh¸c nhau cña write() vµ writeln():

<PRE>
document.writeln("One,");
document.writeln("Two,");
document.write("Three ");
document.write("...");
</SCRIPT>
</PRE>
Khi duyÖt sÏ ®îc kÕt qu¶:

JavaScript
10
H×nh 2.5: Sù kh¸c nhau cña write() vµ writeln()
2.4. Giao tiÕp víi ngêi sö dông

JavaScript hç trî kh¶ n¨ng cho phÐp ngêi lËp tr×nh t¹o ra mét hép héi
tho¹i. Néi dung cña hép héi tho¹i phô thuéc vµo trang HTML cã chøa
®o¹n script mµ kh«ng lµm ¶nh hëng ®Õn viÖc xuÊt néi dung trang.
Çch ®¬n gi¶n ®Ó lµm viÖc ®ã lµ sö dông çch thøc alert(). §Ó sö
dông ®îc çch thøc nµy, b¹n ph¶i ®a vµo mét dßng text nh khi sö dông
document.write() vµ document.writeln() trong phÇn tríc. VÝ dô:
alert("NhÊn vµo OK ®Ó tiÕp tôc");
Khi ®ã file sÏ chê cho ®Õn khi ngêi sö dông nhÊn vµo nót OK råi míi
tiÕp tôc thùc hiÖn
Th«ng thêng, çch thøc alert() ®îc sö dông trong çc trêng hîp:
• Th«ng tin ®a vµ form kh«ng hîp lÖ
• KÕt qu¶ sau khi tÝnh to¸n kh«ng hîp lÖ
• Khi dÞch vô cha s½n sµng ®Ó truy nhËp d÷ liÖu
Tuy nhiªn çch thøc alert() míi chØ cho phÐp th«ng b¸o víi ngêi sö dông
chø cha thùc sù giao tiÕp víi ngêi sö dông. JavaScript cung cÊp mét
çch thøc kh¸c ®Ó giao tiÕp víi ngêi sö dông lµ promt(). T¬ng tù nh
alert(), prompt() t¹o ra mét hép héi tho¹i víi mét dßng th«ng b¸o do b¹n
®a vµo, nhng ngoµi ra nã cßn cung cÊp mét trêng ®Ó nhËp d÷ liÖu

JavaScript
11
vµo. Ngêi sö dông cã thÓ nhËp vµo trêng ®ã råi kÝch vµo OK. Khi ®ã,
ta cã thÓ xö lý d÷ liÖu do ngêi sö dông võa ®a vµo.
VÝ dô: Hép héi tho¹i gåm mét dßng th«ng b¸o, mét trêng nhËp d÷ liÖu,
mét nót OK vµ mét nót Cancel
Ch¬ng tr×nh nµy sÏ hái tªn ngêi dïng vµ sau ®ã sÏ hiÓn thÞ mét th«ng
b¸o ng¾n sö dông tªn míi ®a vµo. VÝ dô ®îc lu vµo file Hello.html
<HTML>
<HEAD>
<TITLE> JavaScript Exemple </TITLE>
<SCRIPT LANGUAGE= “JavaScript”>
var name=window.prompt(“Hello! What’s your name ?”,””);
document.write(“Hello ” + name + “ ! I hope you like JavaScript ”);
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
Khi duyÖt cã kÕt qu¶:
H×nh2.1: HiÓn thÞ cöa sæ nhËp tªn
VÝ dô nµy hiÓn thÞ dÊu nh¾c nhËp vµo tªn víi ph¬ng thøc
window.prompt. Gi¸ trÞ ®¹t ®îc sÏ ®îc ghi trong biÕn cã tªn lµ name.
BiÕn name ®îc kÕt hîp víi çc chuçi kh¸c vµ ®îc hiÓn thÞ trong cöa sæ
cña tr×nh duyÖt nhê ph¬ng thøc document.write.

JavaScript
12
H×nh 2.2: HiÓn thÞ lêi chµo ngêi nhËp
B©y giê b¹n ®· cã ý tëng vÒ çc chøc n¨ng cã thÓ ®¹t ®îc qua
JavaScript, chóng ta h·y tiÕp tôc t×m hiÓu thªm vÒ chÝnh ng«n ng÷
nµy.
2.5. §iÓm l¹i çc lÖnh vµ më réng
LÖnh/Më réng KiÓu M« t¶

SCRIPT thÎ HTML Hép chøa çc lÖnh JavaScript
SRC Thuéc tÝnh Gi÷ ®Þa chØ cña file JavaScript bªn ngoµi.
cña thÎ File nµy ph¶i cã phÇn ®u«i .js
SCRIPT
LANGUAGE thuéc tÝnh §Þnh râ ng«n ng÷ script ®îc sö dông
cña thÎ (JavaScript hoÆc VBScript)
SCRIPT
// Ghi chó §¸nh dÊu ghi chó mét dßng trong ®o¹n
trong script
JavaScript
/*...*/ Ghi chó §¸nh dÊu ghi chó mét khèi trong ®o¹n script
trong
JavaScript
document.write( çch thøc XuÊt ra mét x©u trªn cöa sæ hiÖn thêi mét
) JavaScript çch tuÇn tù theo file HTML cã ®o¹n script
®ã

JavaScript
13
document.writel Çch thøc T¬ng tù çch thøc document.write() nhng

n() JavaScript viÕt xong tù xuèng dßng.
alert() Çch thøc HiÓn thÞ mét dßng th«ng b¸o trªn hép héi
cña tho¹i
JavaScript
promt() Çch thøc HiÓn thÞ mét dßng th«ng b¸o trong hép héi
JavaScript tho¹i ®ång thêi cung cÊp mét trêng nhËp
d÷ liÖu ®Ó ngêi sö dông nhËp vµo.

JavaScript
14
Ch¬ng 3 BiÕn trong JavaScript
3.1. BiÕn vµ ph©n lo¹I biÕn

Tªn biÕn trong JavaScript ph¶i b¾t ®Çu bªng ch÷ hay dÊu g¹ch díi. Çc
ch÷ sè kh«ng ®îc sö dông ®Ó më ®Çu tªn mét biÕn nhng cã thÓ sö
dông sau ký tù ®Çu tiªn.
Ph¹m vi cña biÕn cã thÓ lµ mét trong hai kiÓu sau:
• BiÕn toµn côc: Cã thÓ ®îc truy cËp tõ bÊt kú ®©u trong øng
dông.
®îc khai b¸o nh sau :
x = 0;
• BiÕn côc bé: ChØ ®îc truy cËp trong ph¹m vi ch¬ng tr×nh mµ
nã khai b¸o. BiÕn côc bé ®îc khai b¸o trong mét hµm víi tõ
kho¸ var nh sau:
var x = 0;
BiÕn toµn côc cã thÓ sö dông tõ kho¸ var, tuy nhiªn ®iÒu nµy kh«ng
thùc sù cÇn thiÕt.
3.2. BiÓu diÔn tõ tè trong JavaScript

Tõ tè lµ çc gi¸ trÞ trong ch¬ng tr×nh kh«ng Chó ý
thay ®æi. Sau ®©y lµ çc vÝ dô vÒ tõ tè:
Kh¸c víi C, trong
8 JavaScript kh«ng
cã kiÓu h»ng sè
“The dog ate my shoe” CONST ®Ó biÓu
true diÔn mét gi¸ trÞ
kh«ng ®æi nµo
3.3. KiÓu d÷ liÖu
Kh¸c víi C++ hay Java, JavaScript lµ ng«n ng÷ cã tÝnh ®Þnh kiÓu thÊp.
§iÒu nµy cã nghÜa lµ kh«ng ph¶i chØ ra kiÓu d÷ liÖu khi khai b¸o biÕn.
KiÓu d÷ liÖu ®îc tù ®éng chuyÓn thµnh kiÓu phï hîp khi cÇn thiÕt.
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>

JavaScript
15
<BODY>
</BODY>
</HTML>
Çc tr×nh duyÖt hç trî JavaScript sÏ xö lý chÝnh x¸c vÝ dô trªn vµ ®a ra
kÕt qu¶ díi ®©y:
Tr×nh diÔn dÞch JavaScript sÏ xem biÕn numfruit cã kiÓu nguyªn khi
céng víi 20 vµ cã kiÓu chuçi khi kÕt hîp víi biÓn temp.
Trong JavaScript, cã bèn kiÓu d÷ liÖu sau ®©y: kiÓu sè nguyªn, kiÓu
dÊu phÈy ®éng, kiÓu logic vµ kiÓu chuçi.
1.1.1.KIÓu nguyªn (Interger)

Sè nguyªn cã thÓ ®îc biÓu diÔn theo ba çch:
• HÖ c¬ sè 10 (hÖ thËp ph©n) - cã thÓ biÓu diÔn sè nguyªn
theo c¬ sè 10, chó ý rªng ch÷ sè ®Çu tiªn ph¶i kh¸c 0.
• HÖ c¬ sè 8 (hÖ b¸t ph©n) - sè nguyªn cã thÓ biÓu diÔn díi
d¹ng b¸t ph©n víi ch÷ sè ®Çu tiªn lµ sè 0.
• HÖ c¬ sè 16 (hÖ thËp lôc ph©n) - sè nguyªn cã thÓ biÓu
diÔn díi d¹ng thËp lôc ph©n víi hai ch÷ sè ®Çu tiªn lµ 0x.
1.1.2.KiÓu dÊu phÈy ®éng (Floating Point)

Mét literal cã kiÓu dÊu phÈy ®éng cã 4 thµnh phÇn sau:
H×nh 3.1: KÕt qu¶
cña xö lý d÷ liÖu
• PhÇn nguyªn thËp ph©n.

JavaScript
16
• DÊu chÊm thËp ph©n (.).

• PhÇn d.
• PhÇn mò.
§Ó ph©n biÖt kiÓu dÊu phÈy ®éng víi kiÓu sè nguyªn, ph¶i cã Ýt nhÊt
mét ch÷ sè theo sau dÊu chÊm hay E. VÝ dô:
9.87
-0.85E4
9.87E14
.98E-3
1.1.3.KiÓu logic (Boolean)

KiÓu logic ®îc sö dông ®Ó chØ hai ®iÒu kiÖn : ®óng hoÆc sai. MiÒn
gi¸ trÞ cña kiÓu nµy chØ cã hai gi¸ trÞ
• true.
• false.
1.1.4.KiÓu chuçi (String)

Mét literal kiÓu chuçi ®îc biÓu diÔn bëi kh«ng hay nhiÒu ký tù ®îc
®Æt trong cÆp dÊu " ... " hay '... '. VÝ dô:
“The dog ran up the tree”
‘The dog barked’
“100”
§Ó biÓu diÔn dÊu nh¸y kÐp ( " ), trong chuçi sö dông ( \" ), vÝ dô:
document.write(“ \”This text inside quotes.\” ”);

JavaScript
17
2.X©y dùng çc biÓu thøc trong JavaScript
®Þnh nghÜa vµ ph©n lo¹I biÓu thøc

TËp hîp çc literal, biÕn vµ çc to¸n tö nhªm ®¸nh gi¸ mét gi¸ trÞ nµo
®ã ®îc gäi lµ mét biÓu thøc (expression). VÒ c¬ b¶n cã ba kiÓu biÓu
thøc trong JavaScript:
• Sè häc: Nhªm ®Ó lîng gi¸ gi¸ trÞ sè. VÝ dô (3+4)+(84.5/3) ®-
îc ®¸nh gi¸ bªng 197.1666666667.
• Chuçi: Nhªm ®Ó ®¸nh gi¸ chuçi. VÝ dô "The dog barked" +
barktone + "!" lµ The dog barked ferociously!.
• Logic: Nhªm ®¸nh gi¸ gi¸ trÞ logic. VÝ dô temp>32 cã thÓ
nhËn gi¸ trÞ sai. JavaScript còng hç trî biÓu thøc ®iÒu kiÖn, có
ph¸p nh sau:
(condition) ? valTrue : valFalse
NÕu ®iÒu kiÖn condition ®îc ®¸nh gi¸ lµ ®óng, biÓu thøc
nhËn gi¸ trÞ valTrue, ngîc l¹i nhËn gi¸ trÞ valFalse. VÝ dô:
state = (temp>32) ? "liquid" : "solid"
Trong vÝ dô nµy biÕn state ®îc g¸n gi¸ trÞ "liquid" nÕu gi¸
trÞ cña biÕn temp lín h¬n 32; trong trêng hîp ngîc l¹i nã
nhËn gi¸ trÞ "solid".
Çc to¸n tö (operator)

To¸n tö ®îc sö dông ®Ó thùc hiÖn mét phÐp to¸n nµo ®ã trªn d÷ liÖu.
Mét to¸n tö cã thÓ tr¶ l¹i mét gi¸ trÞ kiÓu sè, kiÓu chuçi hay kiÓu logic.
Çc to¸n tö trong JavaScript cã thÓ ®îc nhãm thµnh çc lo¹i sau ®©y:
g¸n, so s¸nh, sè häc, chuçi, logic vµ logic bitwise.
2.1.1.G¸n
To¸n tö g¸n lµ dÊu bªng (=) nhªm thùc hiÖn viÖc g¸n gi¸ trÞ cña to¸n
h¹ng bªn ph¶i cho to¸n h¹ng bªn tr¸i. Bªn c¹nh ®ã JavaScript cßn hç trî
mét sè kiÓu to¸n tö g¸n rót gän.
KiÓu g¸n th«ng thêng KiÓu g¸n rót gän

x=x+y x+=y
x=x-y x-=y
x=x*y x*=y
x=x/y x/=y
x=x%y x%=y

JavaScript
18
2.1.2.So s¸nh
Ngêi ta sö dông to¸n tö so s¸nh ®Ó so s¸nh hai to¸n h¹ng vµ tr¶ l¹i gi¸
trÞ ®óng hay sai phô thuéc vµo kÕt qu¶ so s¸nh. Sau ®©y lµ mét sè
to¸n tö so s¸nh trong JavaScript:
== Tr¶ l¹i gi¸ trÞ ®óng nÕu to¸n h¹ng bªn tr¸i bªng to¸n
h¹ng bªn ph¶i
!= Tr¶ l¹i gi¸ trÞ ®óng nÕu to¸n h¹ng bªn tr¸i kh¸c to¸n
h¹ng bªn ph¶i
> Tr¶ l¹i gi¸ trÞ ®óng nÕu to¸n h¹ng bªn tr¸i lín h¬n to¸n
h¹ng bªn ph¶i
>= Tr¶ l¹i gi¸ trÞ ®óng nÕu to¸n h¹ng bªn tr¸i lín h¬n hoÆc
bªng to¸n h¹ng bªn ph¶i
< Tr¶ l¹i gi¸ trÞ ®óng nÕu to¸n h¹ng bªn tr¸i nhá h¬n
to¸n h¹ng bªn ph¶i
<= Tr¶ l¹i gi¸ trÞ ®óng nÕu to¸n h¹ng bªn tr¸i nhá h¬n
hoÆc bªng to¸n h¹ng bªn ph¶i
2.1.3.Sè häc
Bªn c¹nh çc to¸n tö céng (+), trõ (-), nh©n (*), chia (/) th«ng thêng,
JavaScript cßn hç trî çc to¸n tö sau ®©y:
var1% var2 To¸n tö phÇn d, tr¶ l¹i phÇn d khi chia var1 cho
var2
- To¸n tö phñ ®Þnh, cã gi¸ trÞ phñ ®Þnh to¸n
h¹ng
var++ To¸n tö nµy t¨ng var lªn 1 (cã thÓ biÓu diÔn lµ
++var)
var-- To¸n tö nµy gi¶m var ®i 1 (cã thÓ biÓu diÔn lµ
--var)
Chó ý
NÕu b¹n g¸n gi¸ trÞ cña to¸n tö ++ hay -- vµo mét biÕn, nh y= x++,
cã thÓ cã çc kÕt qu¶ kh¸c nhau phô thuéc vµo vÞ trÝ xuÊt hiÖn tríc
hay sau cña ++ hay -- víi tªn biÕn (lµ x trong trêng hîp nµy). NÕu ++
®øng tríc x, x sÏ ®îc t¨ng hoÆc gi¶m tríc khi gi¸ trÞ x ®îc g¸n cho y.
NÕu ++ hay -- ®øng sau x, gi¸ trÞ cña x ®îc g¸n cho y tríc khi nã ®îc
t¨ng hay gi¶m.
2.1.4.Chuçi
Khi ®îc sö dông víi chuçi, to¸n tö + ®îc coi lµ kÕt hîp hai chuçi,

JavaScript
19
vÝ dô:
"abc" + "xyz" ®îc "abcxyz"
2.1.5.Logic
JavaScript hç trî çc to¸n tö logic sau ®©y:
expr1 && expr2 Lµ to¸n tö logic AND, tr¶ l¹i gi¸ trÞ ®óng
nÕu c¶ expr1 vµ expr2 cïng ®óng.
expr1 || expr2 Lµ to¸n tö logic OR, tr¶ l¹i gi¸ trÞ ®óng
nÕu Ýt nhÊt mét trong hai expr1 vµ expr2
®óng.
! expr Lµ to¸n tö logic NOT phñ ®Þnh gi¸ trÞ cña

expr.
2.1.6.Bitwise
Víi çc to¸n tö thao t¸c trªn bit, ®Çu tiªn gi¸ trÞ ®îc chuyÓn díi d¹ng sè
nguyªn 32 bit, sau ®ã lÇn lît thùc hiÖn çc phÐp to¸n trªn tõng bit.
& To¸n tö bitwise AND, tr¶ l¹i gi¸ trÞ 1 nÕu c¶ hai bit cïng lµ 1.
| To¸n tö bitwise OR, tr¶ l¹i gi¸ trÞ 1 nÕu mét trong hai bit lµ 1.
^ To¸n tö bitwise XOR, tr¶ l¹i gi¸ trÞ 1 nÕu hai bit cã gi¸ trÞ
kh¸c nhau
Ngoµi ra cßn cã mét sè to¸n tö dÞch chuyÓn bitwise. Gi¸ trÞ ®îc
chuyÓn thµnh sè nguyªn 32 bit tríc khi dÞch chuyÓn. Sau khi dÞch
chuyÓn, gi¸ trÞ l¹i ®îc chuyÓn thµnh kiÓu cña to¸n h¹ng bªn tr¸i. Sau
®©y lµ çc to¸n tö dÞch chuyÓn:
<< To¸n tö dÞch tr¸i. DÞch chuyÓn to¸n h¹ng tr¸i sang tr¸i mét
sè lîng bit bªng to¸n h¹ng ph¶i. Çc bit bÞ chuyÓn sang tr¸i
bÞ mÊt vµ 0 thay vµo phÝa bªn ph¶i. VÝ dô: 4<<2 trë thµnh
16 (sè nhÞ ph©n 100 trë thµnh sè nhÞ ph©n 10000)
>> To¸n tö dÞch ph¶i. DÞch chuyÓn to¸n h¹ng tr¸i sang ph¶i
mét sè lîng bit bªng to¸n h¹ng ph¶i. Çc bit bÞ chuyÓn sang
ph¶i bÞ mÊt vµ dÊu cña to¸n h¹ng bªn tr¸i ®îc gi÷ nguyªn.
VÝ dô: 16>>2 trë thµnh 4 (sè nhÞ ph©n 10000 trë thµnh sè
nhÞ ph©n 100)
>>> To¸n tö dÞch ph¶i cã chÌn 0. DÞch chuyÓn to¸n h¹ng tr¸i
sang ph¶i mét sè lîng bit bªng to¸n h¹ng ph¶i. Bit dÊu ®îc
dÞch chuyÓn tõ tr¸i (gièng >>). Nh÷ng bit ®îc dÞch sang
ph¶i bÞ xo¸ ®i. VÝ dô: -8>>>2 trë thµnh 1073741822 (bëi

JavaScript
20
çc bit dÊu ®· trë thµnh mét phÇn cña sè). TÊt nhiªn víi sè
d¬ng kÕt qu¶ cña to¸n tö >> vµ >>> lµ gièng nhau.
Cã mét sè to¸n tö dÞch chuyÓn bitwise rót gän:

KiÓu bitwise th«ng KiÓu bitwise rót
thêng gän
x = x << y x << = y
x = x >> y x - >> y
x = x >>> y x >>> = y
x=x&y x&=y
x=x^y x^=y
x=x|y x|=y
Bµi tËp
2.1.7.C©u hái
H·y ®¸nh gi¸ çc biÓu thøc 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¶ lêi
Çc biÓu thøc ®îc ®¸nh gi¸ nh sau:
1. a. 12
b. "75"
c. true
d. true
e. true
2. f. 5
g. false

JavaScript
21
h. true

JavaScript
22
3.Çc lÖnh
Cã thÓ chia çc lÖnh cña JavaScript thµnh ba nhãm sau:
• LÖnh ®iÒu kiÖn.
• LÖnh lÆp.
• LÖnh th¸o t¸c trªn ®èi tîng.
C©u lÖnh ®iÒu kiÖn

C©u lÖnh ®iÒu kiÖn cho phÐp ch¬ng tr×nh ra quyÕt ®Þnh vµ thùc
hiÖn c«ng viÖc nµo ®Êy dùa trªn kÕt qu¶ cña quyÕt ®Þnh. Trong
JavaScript, c©u lÖnh ®iÒu kiÖn lµ if...else
if ... else
C©u lÖnh nµy cho phÐp b¹n kiÓm tra ®iÒu kiÖn vµ thùc hiÖn mét
nhãm lÖnh nµo ®Êy dùa trªn kÕt qu¶ cña ®iÒu kiÖn võa kiÓm tra.
Nhãm lÖnh sau else kh«ng b¾t buéc ph¶i cã, nã cho phÐp chØ ra
nhãm lÖnh ph¶i thùc hiÖn nÕu ®iÒu kiÖn lµ sai.
Có ph¸p
if ( <®iÒu kiÖn> )
{
//Çc c©u lÖnh víi ®iÒu kiÖn ®óng
}
else
{
//Çc c©u lÖnh víi ®iÒu kiÖn sai
}
VÝ dô:
if (x==10){
document.write(“x bªng 10, ®Æt l¹i x bªng 0.”);
x = 0;
}
else
document.write(“x kh«ng bªng 10.”);
Chó ý
Ký tù { vµ } ®îc sö dông ®Ó t¸ch çc khèi m·.

JavaScript
23
C©u lÖnh lÆp

C©u lÖnh lÆp thÓ hiÖn viÖc lÆp ®i lÆp l¹i mét ®o¹n m· cho ®Õn khi
biÓu thøc ®iÒu kiÖn ®îc ®¸nh gi¸ lµ ®óng. JavaScipt cung cÊp hai
kiÓu c©u lÖnh lÆp:
• for loop
• while loop
3.1.1.Vßng lÆp for

Vßng lÆp for thiÕt lËp mét biÓu thøc khëi ®Çu - initExpr, sau ®ã lÆp
mét ®o¹n m· cho ®Õn khi biÓu thøc <®iÒu kiÖn> ®îc ®¸nh gi¸ lµ
®óng. Sau khi kÕt thóc mçi vßng lÆp, biÓu thøc incrExpr ®îc ®¸nh gi¸
l¹i.
Có ph¸p:
for (initExpr; <®iÒu kiÖn> ; incrExpr){
//Çc lÖnh ®îc thùc hiÖn trong khi lÆp
}
VÝ dô:
<HTML> <HEAD>
<TITLE>For loop Example </TITLE>
for (x=1; x<=10 ; x++) {
y=x*25;
document.write("x ="+ x +";y= "+ y + "<BR>");
}
</SCRIPT>
</HEAD>
<BODY></BODY>
</HTML>

JavaScript
24
H×nh 5.1: KÕt qu¶ cña lÖnh

for...loop
VÝ dô nµy lu vµo file for_loop.Html.

Vßng lÆp nµy sÏ thùc hiÖn khèi m· lÖnh cho ®Õn khi x>10.
3.1.2.while
Vßng lÆp while lÆp khèi lÖnh chõng nµo <®iÒu kiÖn> cßn ®îc ®¸nh
gi¸ lµ ®óng
Có ph¸p:
while (<®iÒu kiÖn>)
{
//Çc c©u lÖnh thùc hiÖn trong khi lÆp
}
VÝ dô:
x=1;
while (x<=10){
y=x*25;
document.write("x="+x +"; y = "+ y + "<BR>");
x++;
}
KÕt qu¶ cña vÝ dô nµy gièng nh vÝ dô tríc.

JavaScript
25
3.1.3.Break
C©u lÖnh break dïng ®Ó kÕt thóc viÖc thùc hiÖn cña vßng lÆp for
hay while. Ch¬ng tr×nh ®îc tiÕp tôc thùc hiÖn t¹i c©u lÖnh ngay sau
chç kÕt thóc cña vßng lÆp.
Có ph¸p
break;
§o¹n m· sau lÆp cho ®Õn khi x lín h¬n hoÆc bªng 100. Tuy nhiªn nÕu
gi¸ trÞ x ®a vµo vßng lÆp nhá h¬n 50, vßng lÆp sÏ kÕt thóc
VÝ dô:
while (x<100)
{
if (x<50) break;
x++;
}
3.1.4.continue
LÖnh continue gièng lÖnh break nhng kh¸c ë chç viÖc lÆp ®îc kÕt
thóc vµ b¾t ®Çu tõ ®Çu vßng lÆp. §èi víi vßng lÆp while, lÖnh
continue ®iÒu khiÓn quay l¹i <®iÒu kiÖn>; víi for, lÖnh continue
®iÒu khiÓn quay l¹i incrExpr.
Có ph¸p
continue;
VÝ dô:
§o¹n m· sau t¨ng x tõ 0 lªn 5, nh¶y lªn 8 vµ tiÕp tôc t¨ng lªn 10
x=0;
while (x<=10)
{
document.write(“Gi¸ trÞ cña x lµ:”+ x+”<BR>”);
if (x=5)
{
x=8;
continue;
}
x++;
}
Çc c©u lÖnh thao t¸c trªn ®èi tîng

JavaScript lµ mét ng«n ng÷ dùa trªn ®èi tîng, do ®ã nã cã mét sè c©u
lÖnh lµm viÖc víi çc ®èi tîng.

JavaScript
26
3.1.5.for...in
C©u lÖnh nµy ®îc sö dông ®Ó lÆp tÊt c¶ çc thuéc tÝnh (properties)
cña mét ®èi tîng. Tªn biÕn cã thÓ lµ mét gi¸ trÞ bÊt kú, chØ cÇn thiÕt
khi b¹n sö dông çc thuéc tÝnh trong vßng lÆp. VÝ dô sau sÏ minh ho¹
®iÒu nµy
Có ph¸p
for (<variable> in <object>)
{
//Çc c©u lÖnh
}
VÝ dô
VÝ dô sau sÏ lÊy ra tÊt c¶ çc thuéc tÝnh cña ®èi tîng Window vµ in ra
tªn cña mçi thuéc tÝnh. KÕt qu¶ ®îc minh ho¹ trªn h×nh 5.2.
<HTML>
<HEAD>
<TITLE>For in Example </TITLE>
document.write("The properties of the Window object are: <BR>");
for (var x in window)
document.write(" "+ x + ", ");
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>

JavaScript
27
H×nh 5.2: KÕt qu¶ cña lÖnh for...in
3.1.6.new
BiÕn new ®îc thùc hiÖn ®Ó t¹o ra mét thÓ hiÖn míi cña mét ®èi tîng
Có ph¸p
objectvar = new object_type ( param1 [,param2]...
[,paramN])
VÝ dô sau t¹o ®èi tîng person cã çc thuéc tÝnh firstname, lastname,
age, sex. Chó ý rªng tõ kho¸ this ®îc sö dông ®Ó chØ ®èi tîng trong
hµm person. Sau ®ã ba thÓ hiÖn cña ®èi tîng person ®îc t¹o ra bªng
lÖnh new
<HTML>
<HEAD>
<TITLE>New Example </TITLE>
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");

JavaScript
28
person3= new person("Binh", "Nguyen Nhat", "24", "Male");

person4= new person("Hoµn", "§ç V¨n", "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>

JavaScript
29

JavaScript
30
</HTML>
H×nh 5.3: KÕt qu¶ cña vÝ dô lÖnh New
3.1.7.this
Tõ kho¸ this ®îc sö dông ®Ó chØ ®èi tîng hiÖn thêi. §èi tîng ®îc gäi
thêng lµ ®èi tîng hiÖn thêi trong ph¬ng thøc hoÆc trong hµm.
Có ph¸p
this [.property]
Cã thÓ xem vÝ dô cña lÖnh new.
3.1.8.with
LÖnh nµy ®îc sö dông ®Ó thiÕt lËp ®èi tîng ngÇm ®Þnh cho mét
nhãm çc lÖnh, b¹n cã thÓ sö dông çc thuéc tÝnh mµ kh«ng ®Ò cËp
®Õn ®èi tîng.
Có ph¸p
with (object)
{
// statement
}
VÝ dô:

JavaScript
31
VÝ dô sau chØ ra çch sö dông lÖnh with ®Ó thiÕt lËp ®èi tîng ngÇm
®Þnh lµ document vµ cã thÓ sö dông ph¬ng thøc write mµ kh«ng
cÇn ®Ò cËp ®Õn ®èi tîng document
<HTML>
<HEAD>
<TITLE>With Example </TITLE>
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>
H×nh 5.4: KÕt qu¶ cña vÝ dô lÖnh with

</HTML>

JavaScript
32
Çc hµm (Functions)

JavaScript còg cho phÐp sö dông çc hµm. MÆc dï kh«ng nhÊt thiÕt
ph¶i cã, song çc hµm cã thÓ cã mét hay nhiÒu tham sè truyÒn vµo vµ
mét gi¸ trÞ tr¶ vÒ. Bëi v× JavaScript lµ ng«n ng÷ cã tÝnh ®Þnh kiÓu
thÊp nªn kh«ng cÇn ®Þnh nghÜa kiÓu tham sè vµ gi¸ trÞ tr¶ vÒ cña
hµm. Hµm cã thÓ lµ thuéc tÝnh cña mét ®èi tîng, trong trêng hîp nµy
nã ®îc xem nh lµ ph¬ng thøc cña ®èi tîng ®ã.
LÖnh function ®îc sö dông ®Ó t¹o ra hµm trong JavaScript.
Có ph¸p
function fnName([param1],[param2],...,[paramN])
{
//function statement
}
VÝ dô:
VÝ dô sau minh ho¹ çch thøc t¹o ra vµ sö dông hµm nh lµ thµnh viªn
cña mét ®èi tîng. Hµm printStats ®îc t¹o ra lµ ph¬ng thøc cña ®èi tîng
person
<HTML> <HEAD>
<TITLE>Function Example </TITLE>
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");

JavaScript
33
person3= new person("Binh", "Nguyen Nhat", "24", "Male");

person4= new person("Hoan", "Do Van", "23", "Male");
person1.printStats();
</SCRIPT>
</HEAD>
<BODY> </BODY>
</HTML>
1.1.1.1.1.H×nh 8: VÝ dô vÒ
hµm
H×nh 5.5: KÕt qu¶ viÖc sö dông hµm
Çc hµm cã s½n

JavaScript cã mét sè hµm cã s½n, g¾n trùc tiÕp vµo chÝnh ng«n ng÷
vµ kh«ng nªm trong mét ®èi tîng nµo:
• eval
• parseInt

JavaScript
34
• parseFloat
3.1.9.eval
Hµm nµy ®îc sö dông ®Ó ®¸nh gi¸ çc biÓu thøc hay lÖnh. BiÓu thøc,
lÖnh hay çc ®èi tîng cña thuéc tÝnh ®Òu cã thÓ ®îc ®¸nh gi¸. §Æc
biÖt hÕt søc h÷u Ých khi ®¸nh gi¸ çc biÓu thøc do ngêi dïng ®a vµo
(ngîc l¹i cã thÓ ®¸nh gi¸ trùc tiÕp).
Có ph¸p:
returnval=eval (bÊt kú biÓu thøc hay lÖnh hîp lÖ trong Java)
VÝ dô:
<HTML>
<HEAD>
<TITLE>Eval Example </TITLE>
var string=”10+ Math.sqrt(64)”;
document.write(string+ “=”+ eval(string));
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
H×nh 5.6 VÝ dô hµm Eval

JavaScript
35
3.1.10.parseInt
Hµm nµy chuyÓn mét chuçi sè thµnh sè nguyªn víi c¬ sè lµ tham sè
thø hai (tham sè nµy kh«ng b¾t buéc). Hµm nµy thêng ®îc sö dông
®Ó chuyÓn çc sè nguyªn sang c¬ sè 10 vµ ®¶m b¶o rªng çc d÷ liÖu
®äc nhËp díi d¹ng ký tù ®îc chuyÓn thµnh sè tríc khi tÝnh to¸n. Trong
trêng hîp d÷ liÖu vµo kh«ng hîp lÖ, hµm parseInt sÏ ®äc vµ chuyÓn
d¹ng chuçi ®Õn vÞ trÝ nã t×m thÊy ký tù kh«ng ph¶i lµ sè. Ngoµi ra
hµm nµy cßn c¾t dÊu phÈy ®éng.
Có ph¸p
parseInt (string, [, radix])
VÝ dô:
<HTML>
<HEAD>
<TITLE> perseInt Exemple </TITLE>
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>

JavaScript
36
H×nh 5.7: VÝ dô parInt
3.1.11.parseFloat
Hµm nµy gièng hµm parseInt nhng nã chuyÓn chuçi thµnh sè biÓu diÔn
díi d¹ng dÊu phÈy ®éng.
Có ph¸p
parseFloat (string)
VÝ dô:
VÝ dô sau minh ho¹ çch thøc xö lý cña parseFloat víi çc kiÓu chuçi
kh¸c nhau. H×nh 5.8 minh häa kÕt qu¶
<HTML> <HEAD>
<TITLE> perseFload Exemple </TITLE>
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>

JavaScript
37
M¶ng (Array)
MÆc dï JavaScript kh«ng hç trî cÊu tróc d÷ liÖu m¶ng nhng Netscape
t¹o ra ph¬ng thøc cho phÐp b¹n tù t¹o ra çc hµm khëi t¹o m¶ng nh
sau:
function InitArray(NumElements){
this.length = numElements;
for (var x=1; x<=numElements; x++){
this[x]=0
}
return this;
}
Nã t¹o ra mét m¶ng víi kÝch thíc x¸c ®Þnh tríc vµ ®iÒn çc gi¸ trÞ 0.
Chó ý rªng thµnh phÇn ®Çu tiªn trong m¶ng lµ ®é dµi m¶ng vµ kh«ng
®îc sö dông.
§Ó t¹o ra mét m¶ng, khai b¸o nh sau: H×nh 5.8 : KÕt
myArray = new InitArray (10) qu¶ cña vÝ dô
Nã t¹o ra çc thµnh phÇn tõ myArray[1] ®Õn myArray[10] víi gi¸ trÞ lµ
0. Gi¸ trÞ çc thµnh phÇn trong m¶ng cã thÓ ®îc thay ®æi nh sau:
myArray[1] = "NghÖ An"
myArray[2] = "Lµo"
Sau ®©y lµ vÝ dô ®Çy ®ñ:

<HTML> <HEAD>
<TITLE> Array Exemple </TITLE>
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µ Néi";
document.write(myArray[1] + "<BR>");
document.write(myArray[2] + "<BR>");
</SCRIPT>
</HEAD>
<BODY> </BODY>
</HTML>

JavaScript
38
H×nh 5.9: VÝ dô m¶ng
Sù kiÖn
JavaScript lµ ng«n ng÷ ®Þnh híng sù kiÖn, nghÜa lµ sÏ ph¶n øng tríc
çc sù kiÖn x¸c ®Þnh tríc nh kÝch chuét hay t¶i mét v¨n b¶n. Mét sù
kiÖn cã thÓ g©y ra viÖc thùc hiÖn mét ®o¹n m· lÖnh (gäi lµ çc ch¬ng
tri×nh xö lý sù kiÖn) gióp cho ch¬ng tr×nh cã thÓ ph¶n øng mét çch
thÝch hîp.
Ch¬ng tr×nh xö lý sù kiÖn (Event handler): Mét
®o¹n m· hay mét hµm ®îc thùc hiÖn ®Ó ph¶n øng tríc mét sù kiÖn gäi
lµ ch¬ng tr×nh xö lý sù kiÖn. Ch¬ng tr×nh xö lý sù kiÖn ®îc x¸c ®Þnh
lµ mét thuéc tÝnh cña mét thÎ HTML:
<tagName eventHandler = "JavaScript Code or Function">
VÝ dô sau gäi hµm CheckAge() mçi khi gi¸ trÞ cña trêng v¨n b¶n thay
®æi:
<INPUT TYPE=TEXT NAME="AGE" onChange="CheckAge()">
§o¹n m· cña ch¬ng tr×nh xö lý sù kiÖn kh«ng lµ mét hµm; nã lµ çc

lÖnh cña JavaScript çch nhau bªng dÊu chÊm phÈy. Tuy nhiªn cho môc
®Ých viÕt thµnh çc module nªn viÕt díi d¹ng çc hµm.

JavaScript
39
Mét sè ch¬ng tr×nh xö lý sù kiÖn trong JavaScript:
onBlur X¶y ra khi input focus bÞ xo¸ tõ thµnh phÇn

form
onClick X¶y ra khi ngêi dïng kÝch vµo çc thµnh phÇn
hay liªn kÕt cña form.
onChange X¶y ra khi gi¸ trÞ cña thµnh phÇn ®îc chän
thay ®æi
onFocus X¶y ra khi thµnh phÇn cña form ®îc

focus(lµm næi lªn).
onLoad X¶y ra trang Web ®îc t¶i.
onMouseOver X¶y ra khi di chuyÓn chuét qua kÕt nèi hay

anchor.
onSelect X¶y ra khi ngêi sö dông lùa chän mét trêng

nhËp d÷ liÖu trªn form.
onSubmit X¶y ra khi ngêi dïng ®a ra mét form.
onUnLoad X¶y ra khi ngêi dïng ®ãng mét trang

Sau ®©y lµ b¶ng çc ch¬ng tr×nh xö lý sù kiÖn cã s½n cña mét sè ®èi
tîng. Çc ®èi tîng nµy sÏ ®îc tr×nh bµy kü h¬n trong phÇn sau.
§èi tîng Ch¬ng tr×nh xö lý sù kiÖn cã s½n
Selection list onBlur, onChange, onFocus
Text onBlur, onChange, onFocus, onSelect
Textarea onBlur, onChange, onFocus, onSelect
Button onClick
Checkbox onClick
Radio button onClick
Hypertext link onClick, onMouseOver, onMouseOut
Clickable Imagemap onMouseOver, onMouseOut
area
Reset button onClick
Submit button onClick
Document onLoad, onUnload, onError
Window onLoad, onUnload, onBlur, onFocus
Framesets onBlur, onFocus

JavaScript
40
Form onSubmit, onReset

Image onLoad, onError, onAbort
VÝ dô sau lµ mét ®o¹n m· script ®¬n gi¶n cña ch¬ng tr×nh xö lý sù

kiÖn thÈm ®Þnh gi¸ trÞ ®a vµo trong trêng text. Tuæi cña ngêi sö dông
®îc nhËp vµo trong trêng nµy vµ ch¬ng tr×nh xö lý sù kiÖn sÏ thÈm
®Þnh tÝnh hîp lÖ cña d÷ liÖu ®a vµo. NÕu kh«ng hîp lÖ sÏ xuÊt hiÖn
mét th«ng b¸o yªu cÇu nhËp l¹i. Ch¬ng tr×nh xö lý sù kiÖn ®îc gäi mçi
khi trêng AGE bÞ thay ®æi vµ focus chuyÓn sang trêng kh¸c. H×nh
5.10 minh ho¹ kÕt qu¶ cña vÝ dô nµy
<HTML>
<HEAD>
<TITLE> An Event Handler Exemple </TITLE>
function CheckAge(form) {
if ( (form.AGE.value<0)||(form.AGE.value>120) )
alert("Tuæi nhËp vµo kh«ng hîp lÖ! Mêi b¹n nhËp l¹i");
form.AGE.value=0;
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="PHIEU_DIEU_TRA">
NhËp vµo tªn cña b¹n:<BR>

Tªn <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 <INPUT TYPE=TEXT NAME="AGE" MAXLENGTH=3 SIZE=2

onChange="CheckAge(PHIEU_DIEU_TRA)"><BR>
<P>

JavaScript
41
B¹n thÝch mïa nµo nhÊt:<BR>

Mïa xu©n<INPUT TYPE=RADIO NAME="MUA" VALUE="Mua xuan">
Mïa h¹<INPUT TYPE=RADIO NAME="MUA" VALUE="Mua ha">
Mïa thu<INPUT TYPE=RADIO NAME="MUA" VALUE="Mua thu">
Mïa ®«ng<INPUT TYPE=RADIO NAME="MUA" VALUE="Mua dong">
<P>
H·y chän nh÷ng ho¹t ®éng ngoµi trêi mµ b¹n yªu thÝch:<BR>
§i bé<INPUT TYPE=CHECKBOX NAME="HOAT_DONG" VALUE="Di bo">
Trît tuyÕt<INPUT TYPE=CHECKBOX NAME="HOAT_DONG"

VALUE="Truot tuyet">
ThÓ thao díi níc<INPUT TYPE=CHECKBOX NAME="HOAT_DONG"

VALUE="Duoi nuoc">
§¹p xe<INPUT TYPE=CHECKBOX NAME="HOAT_DONG" VALUE="Dap

xe">
<P>
<INPUT TYPE=SUBMIT>
<INPUT TYPE=RESET>
</FORM>
</BODY>
</HTML>

JavaScript
42
H×nh 5.10: Minh ho¹ cho vÝ dô Event Handler
Bµi tËp
3.1.12.C©u hái
1. ViÕt mét ®o¹n lÖnh JavaScript sö dông çch thøc confirm() vµ c©u
lÖnh if...then ®Ó thùc hiÖn:
Hái ngêi sö dông cã muèn nhËn ®îc mét lêi chµo kh«ng
NÕu cã th× hiÖn ¶nh wellcome.jpg vµ mét lêi chµo.
NÕu kh«ng th× viÕt ra mét lêi th«ng b¸o
2. ViÕt mét ®o¹n lÖnh JavaScript ®Ó thùc hiÖn:
• Hái ngêi sö dông: "10+10 bªng bao nhiªu?"
• NÕu ®óng th× hái tiÕp: Cã muèn tr¶ lêi c©u thø hai kh«ng?"
• NÕu muèn th× hái: "10*10 bªng bao nhiªu?"
• §¸nh gi¸ kÕt qu¶ bªng biÓu thøc logic sau ®ã viÕt ra mµn
h×nh:
§óng: "CORRECT"; Sai: "INCORRECT"
Gîi ý: Sö dông biÕn toµn côc lu kÕt qu¶ ®óng ®Ó so s¸nh víi kÕt
qña ®a vµo.
3. C©u lÖnh nµo trong çc c©u sau ®©y sö dông sai thÎ sù kiÖn

JavaScript
43
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. §iÒu g× x¶y ra khi thùc hiÖn script sau:
<HTML>
<HEAD>
<TITLE>Exercise 5.4</TITLE>
var name = "";
function welcome() {
name = prompt("Welcome to my page! What's Your
Name?","name");
}
function farewell() {
alert("Goodbye " + name + ". Thanks for visiting my page.");
}
</SCRIPT>
</HEAD>
<BODY onLoad="welcome();" onUnload="farewell();";>
This is my page!
</BODY>
</HTML>
5. Sö dông vßng lÆp while ®Ó m« pháng çc vßng lÆp for sau:
a.
for (j = 4; j > 0; j --) {
document.writeln(j + "<BR>");
}
b.
for (k = 1; k <= 99; k = k*2) {
k = k/1.5;
}
c.

JavaScript
44
for (num = 0; num <= 10; num ++) {

if (num == 8)
break;
}
3.1.13.Tr¶ lêi
1. Sö dông çch thøc confirm() vµ cÊu tróc if...then:
<HTML>
<HEAD>
<TITLE>Execise 5.1</TITLE>
<HEAD>
<BODY>
<P>
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. Thùc hiÖn hái ngêi sö dông:
<HTML>
<HEAD>
<TITLE>Exercise 3.3</TITLE>
// DEFINE VARIABLES FOR REST OF SCRIPT
var question="What is 10+10?";
var answer=20;
var correct='CORRECT';
var incorrect='INCORRECT';

JavaScript
45
// ASK THE QUESTION

var response = prompt(question,"0");
// chECK THE ANSWER THE FIRST TIME
if (response != answer) {
// THE ANSWER WAS WRONG: OFFER A SECOND chAncE
if (confirm("Wrong! Press OK for a second chance."))
response = prompt(question,"0");
} else {
// THE ANSWER WAS RIGHT: OFFER A SECOND QUESTION
if (confirm("Correct! Press OK for a second question.")) {
question = "What is 10*10?";
answer = 100;
response = prompt (question,"0");
}
}
// chECK THE ANSWER
var output = (response == answer) ? correct : incorrect;
</SCRIPT>
</HEAD>
<BODY>
// OUTPUT RESULT
document.write(output);
</SCRIPT>
</BODY>
</HTML>
3. Çc c©u sai: a, c, e. Çc c©u ®óng: b, d, f
4. Khi ch¬ng tr×nh ®îc ch¹y (load), hµm wellcome sÏ thùc hiÖn
hái tªn ngêi sö dông, lu tªn ®ã vµo biÕn toµn côc name. Khi ngêi
sö dông sang mét ®Þa chØ URL kh¸c, hµm farewell() sÏ thùc hiÖn
göi mét lêi c¶m ¬n tíi ngêi sö dông.
5. Sö dông vßng lÆp while nh sau:
a.
j = 5;
while (--j > 0) {

JavaScript
46
document.writeln(j + "<BR>");
}
b.
k = 1;
while (k <= 99) {
k = k * 2 / 1.5;
}
c.
num = 0;
while (num <= 10) {
if (num++ == 8)
break;
}

JavaScript
47
4.Çc ®èi tîng trong JavaScript

Nh ®· nãi JavaScript lµ ng«n ng÷ lËp tr×nh dùa trªn ®èi tîng, nhng
kh«ng híng ®èi tîng bëi v× nã kh«ng hç trî çc líp còng nh tÝnh thõa
kÕ. PhÇn nµy nãi vÒ çc ®èi tîng trong JavaScript vµ h×nh 6.1 chØ ra
s¬ ®å ph©n cÊp çc ®èi tîng.
Trong s¬ ®å ph©n cÊp çc ®èi tîng cña JavaScript, çc ®èi tîng con
thùc sù lµ çc thuéc tÝnh cña çc ®èi tîng bè mÑ. Trong vÝ dô vÒ ch-
¬ng tr×nh xö lý sù kiÖn tríc ®©y form tªn PHIEU_DIEU_TRAlµ thuéc
tÝnh cña ®èi tîng document vµ trêng text AGE lµ thuéc tÝnh cña form
PHIEU_DIEU_TRA. §Ó tham chiÕu ®Õn gi¸ trÞ cña AGE, b¹n ph¶i sö
dông:
document.PHIEU_DIEU_TRA.AGE.value
Çc ®èi tîng cã thuéc tÝnh (properties), ph¬ng thøc (methods), vµ çc
ch¬ng tr×nh xö lý sù kiÖn (event handlers) g¾n víi chóng. VÝ dô ®èi t-
îng document cã thuéc tÝnh title ph¶n ¸nh néi dung cña thÎ <TITLE>
cña document. Bªn c¹nh ®ã b¹n thÊy ph¬ng thøc document.write ®îc
sö dông trong nhiÒu vÝ dô ®Ó ®a v¨n b¶n kÕt qu¶ ra document.
§èi tîng còng cã thÓ cã çc ch¬ng tr×nh xö lý sù kiÖn. VÝ dô ®èi tîng
link cã hai ch¬ng tr×nh xö lý sù kiÖn lµ onClick vµ onMouseOver.
onClick ®îc gäi khi cã ®èi tîng link ®îc kÝch, onMouseOver ®îc gäi khi
con trá chuét di chuyÓn qua link.
Khi b¹n t¶i mét document xuèng Navigator, nã sÏ t¹o ra mét sè ®èi tîng
cïng víi nh÷ng gi¸ trÞ çc thuéc tÝnh cña chóng dùa trªn file HTML cña
document ®ã vµ mét vµi th«ng tin cÇn thiÕt kh¸c. Nh÷ng ®èi tîng nµy
tån t¹i mét çch cã cÊp bËc vµ ph¶n ¸nh chÝnh cÊu tróc cña file HTML
®ã.

JavaScript
48
S¬ ®å sau sÏ minh ho¹ sù ph©n cÊp cña çc ®èi tîng nµy
Window Texturea navigator
Text
Plugin
Layer FileUpload
Frame Mime
Type
Link Password
document Image Hidden
Area Submit
Location
Anchor Reset
Applet Radio
History
Plugin Checkbox
Form Button
Select Option
H×nh 6.1: S¬ ®å 1 - Ph©n cÊp ®èi tîng

Navigator
Trong s¬ ®å ph©n cÊp nµy, çc ®èi tîng con chÝnh lµ çc thuéc tÝnh
cña mét ®èi tîng cha. VÝ dô nh mét form tªn lµ form1 chÝnh lµ mét ®èi
tîng con cña ®èi tîng document vµ ®îc gäi tíi lµ document.form1
TÊt c¶ çc trang ®Òu cã çc ®èi tîng sau ®©y:
• navigator: cã çc thuéc tÝnh tªn vµ phiªn b¶n cña Navigator
®ang ®îc sö dông, dïng cho MIME type ®îc hç trî bëi client
vµ plug-in ®îc cµi ®Æt trªn client.
• window: lµ ®èi tîng ë møc cao nhÊt, cã çc thuéc tÝnh thùc
hiÖn ¸p dông vµo toµn bé cöa sæ.
• document: chøa çc thuéc tÝnh dùa trªn néi dung cña
document nh tªn, mµu nÒn, çc kÕt nèi vµ çc forms.
• location: cã çc thuéc tÝnh dùa trªn ®Þa chØ URL hiÖn thêi

JavaScript
49
• history: Chøa çc thuéc tÝnh vÒ çc URL mµ client yªu cÇu
tríc ®ã.
Sau ®©y sÏ m« t¶ çc thuéc tÝnh, ph¬ng thøc còng nh çc ch¬ng
tr×nh xö lý sù kiÖn cho tõng ®èi tîng trong JavaScript.
§èi tîng navigator

§èi tîng nµy ®îc sö dông ®Ó ®¹t ®îc çc th«ng tin vÒ tr×nh duyÖt nh
sè phiªn b¶n. §èi tîng nµy kh«ng cã ph¬ng thøc hay ch¬ng tr×nh xö lý
sù kiÖn.
Çc thuéc tÝnh
appCodeName X¸c ®Þnh tªn m· néi t¹i cña tr×nh duyÖt

(Atlas).
AppName X¸c ®Þnh tªn tr×nh duyÖt.
AppVersion X¸c ®Þnh th«ng tin vÒ phiªn b¶n cña ®èi t-
îng navigator.
userAgent X¸c ®Þnh header cña user - agent.
VÝ dô
VÝ dô sau sÏ hiÓn thÞ çc thuéc tÝnh cña ®èi tîng navigator
<HTML>
<HEAD>
<TITLE> Navigator Object Exemple </TITLE>
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>

JavaScript
50
H×nh 6.2: Minh ho¹ cho ®èi tîng Navigator
§èi tîng window

§èi tîng window nh ®· nãi ë trªn lµ ®èi tîng ë møc cao nhÊt. Çc ®èi t-
îng document, frame, vÞ trÝ ®Òu lµ thuéc tÝnh cña ®èi tîng window.
4.1.1.Çc thuéc tÝnh
• defaultStatus - Th«ng b¸o ngÇm ®Þnh hiÓn thÞ lªn trªn thanh
tr¹ng th¸i cña cöa sæ
• Frames - M¶ng x¸c ®Þnh tÊt c¶ çc frame trong cöa sæ.
• Length - Sè lîng çc frame trong cöa sæ cha mÑ.
• Name - Tªn cña cöa sæ hiÖn thêi.
• Parent - §èi tîng cöa sæ cha mÑ
• Self - Cöa sæ hiÖn thêi.
• Status - §îc sö dông cho th«ng b¸o t¹m thêi hiÓn thÞ lªn trªn
thanh th¹ng th¸i cöa sæ. §ù¬c sö dông ®Ó lÊy hay ®Æt l¹i
th«ng b¸o tr¹ng th¸i vµ ghi ®Ì lªn defaultStatus.
• Top - Cöa sæ ë trªn cïng.
• Window - Cöa sæ hiÖn thêi.

JavaScript
51
4.1.2.Çc ph¬ng thøc
• alert ("message") -HiÓn thÞ hép héi tho¹i víi chuçi "message"
vµ nót OK.
• clearTimeout(timeoutID) -Xãa timeout do SetTimeout ®Æt.
SetTimeout tr¶ l¹i timeoutID
• windowReference.close -§ãng cöa sæ windowReference.
• confirm("message") -HiÓn thÞ hép héi tho¹i víi chuçi
"message", nót OK vµ nót Cancel. Tr¶ l¹i gi¸ trÞ True cho OK vµ
False cho Cancel.
• [windowVar = ][window]. open("URL", "windowName",
[ "windowFeatures" ] ) - Më cöa sæ míi.
• prompt ("message" [,"defaultInput"]) - Më mét hép héi tho¹i
®Ó nhËn d÷ liÖu vµo trêng text.
• TimeoutID = setTimeout(expression,msec) - §¸nh gi¸ biÓu thøc
expresion sau thêi gian msec.
VÝ dô: Sö dông tªn cöa sæ khi gäi tíi nã nh lµ ®Ých cña mét form
submit hoÆc trong mét Hipertext link (thuéc tÝnh TARGET cña thÎ
FORM vµ A).
Trong vÝ dô t¹o ra mét tíi cöa sæ thø hai, nh nót thø nhÊt ®Ó më mét
cöa sæ rçng, sau ®ã mét liªn kÕt sÏ t¶i file doc2.html xuèng cöa sæ míi
®ã råi mét nót kh¸c dïng ®Ó ®ãng cña sæ thø hai l¹i, vÝ dô nµy la vµo
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,w
idth=200,height=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>

JavaScript
52
H×nh 6.3: Minh ho¹ cho ®èi tîng cöa sæ
4.1.3.Çc ch¬ng tr×nh xö lý sù kiÖn
• onLoad - XuÊt hiÖn khi cöa sæ kÕt thóc viÖc t¶i.

• onUnLoad - XuÊt hiÖn khi cöa sæ ®îc lo¹i bá.
§èi tîng location

Çc thuéc tÝnh cña ®èi tîng location duy tr× çc th«ng tin vÒ URL cña
document hiÖn thêi. §èi tîng nµy hoµn toµn kh«ng cã çc ph¬ng thøc
vµ ch¬ng tr×nh xö lý sù kiÖn ®i kÌm. VÝ dô:
http:// www.abc.com/ chap1/page2.html#topic3
Çc thuéc tÝnh
• hash - Tªn anchor cña vÞ trÝ hiÖn thêi (vÝ dô topic3).
• Host - PhÇn hostname:port cña URL (vÝ dô www.abc.com ).
Chó ý rªng ®©y thêng lµ cæng ngÇm ®Þnh vµ Ýt khi ®îc chØ
ra.
• Hostname - Tªn cña host vµ domain (vÝ dô www.abc.com ).
• href - Toµn bé URL cho document hiÖn t¹i.
• Pathname - PhÇn ®êng dÉn cña URL (vÝ dô
/chap1/page2.html).

JavaScript
53
• Port - Cæng truyÒn th«ng ®îc sö dông cho m¸y tÝnh host, th-
êng lµ cæng ngÇm ®Þnh.
• Protocol - Giao thøc ®îc sö dông (cïng víi dÊu hai chÊm) (vÝ dô
http:).
• Search - C©u truy vÊn t×m kiÕm cã thÓ ë cuèi URL cho çc
script CGI.
§èi tîng frame

Mét cöa sè cã thÓ cã mét vµi frame. Çc
frame cã thÓ cuén mét çch ®éc lËp víi
nhau vµ mçi frame cã URL riªng. frame
kh«ng cã çc ch¬ng tr×nh xö lý sù kiÖn.
Sù kiÖn onLoad vµ onUnLoad lµ cña ®èi
tîng window.
• frames - M¶ng tÊt c¶ çc frame trong cöa sæ.

• Name - Thuéc tÝnh NAME cña thÎ <FRAME>
• Length - Sè lîng çc frame con trong mét frame.
• Parent - Cöa sæ hay frame chøa nhãm frame hiÖn thêi.
• self - frame hiÖn thêi.
• Window - frame hiÖn thêi.
• clearTimeout (timeoutID) - Xo¸ timeout do setTimeout lËp.

SetTimeout tr¶ l¹i timeoutID.
• TimeoutID = setTimeout (expression,msec) - §¸nh gi¸
expression sau khi hÕt thêi gian msec.
4.1.6.Sö dông Frame
4.1.6.1.a) T¹o mét frame (create)

§Ó t¹o mét frame, ta sö dông thÎ FRAMESET. Môc ®Ých cña thÎ nµy lµ
®Þnh nghÜa mét tËp çc frame trong mét trang.
VÝ dô1: t¹o frame ( h×nh 17)
<HTML>
<HEAD>
<FRAMESET ROWS="90%,10%">
<FRAMESET COLS="30%,70%">
<FRAME SRC=CATEGORY.HTM NAME="ListFrame">
<FRAME SRC=TITLES.HTM NAME="contentFrame">

JavaScript
54
</FRAMESET >
<FRAME SRC=NAVIGATOR.HTM NAME="navigateFrame">
</FRAMESET >
</HEAD>
<BODY> </BODY>
</HTML>
S¬ ®å sau hiÓn thÞ cÊu tróc cña çc frame: C¶ 3 frame ®Òu trªn cïng
mét cöa sæ cha, mÆc dï 2 trong sè çc frame ®ã nªm trong mét
frameset kh¸c.
Top
listFrame
(category.html)
contentFrame
(titles.html)
navigatorFrame
(navigator.html)
B¹n cã thÓ gäi tíi nh÷ng frame tríc ®ã bªng çch sö dông thuéc tÝnh
frames nh sau:
listFrame chÝnh lµ top.frames[0]
contentFrame chÝnh lµ top.frames[1]
navigatorFrame chÝnh lµ top.frames[2]

JavaScript
55

JavaScript
56
H×nh 6.4: KÕt qu¶ viÖc t¹o frame trong
VÝ dô 2: Còng gièng nh mét sù lùa chän, b¹n cã thÓ t¹o ra mét cöa sæ
gièng nh vÝ dô tríc nhng trong mçi ®Ønh cña hai frame l¹i cã mét cöa
sæ cha riªng tõ navigateFrame. Møc frameset cao nhÊt cã thÓ ®îc
®Þnh nghÜa nh sau:
<HTML>
<HEAD>
<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 l¹i tiÕp tôc ®Æt mét frameset:

<HTML>
<HEAD>
<FRAMESET COLS="30%,70%">
<FRAME SRC=CATEGORY.HTM NAME="ListFrame">
<FRAME SRC=TITLES.HTM NAME="contentFrame">
</FRAMESET >

JavaScript
57
</HEAD>
<BODY>
</BODY>
</HTML>
Khi ®ã kÕt qu¶ hiÓn thÞ cña vÝ dô 2 gièng vÝ dô 1 nhng sù ph©n cÊp
cña çc frames l¹i kh¸c h¼n:
B¹n cã thÓ gäi tíi çc frame trªn bªng çch sö dông thuéc tÝnh m¶ng
frames nh sau:
top
listFrame (category.html)
upperFrame
(muske13.html)
contentFrame (titles.html)
navigatorFrame
(navigator.html)
upperFrame chÝnh lµ top.frames[0]

navigatorFrame chÝnh lµ top.frames[1]
listFrame chÝnh lµ upperFrame.frames[0]
hoÆc top.frames[0].frames[0]
contentFrame chÝnh lµ upperFrame.frames[1]
hoÆc top.frames[0].frames[1]
4.1.6.2.b) CËp nhËt mét frame (update)
B¹n cã thÓ cËp nhËt néi dung cña mét frame bªng çch sö dông thuéc
tÝnh location ®Ó ®Æt ®Þa chØ URL vµ ph¶i ®Þnh chØ râ vÞ trÝ cña
frame trong cÊu tróc.
Trong vÝ dô trªn, nÕu b¹n thªm mét dßng sau vµo navigatorFrame:
<INPUT TYPE="button" VALUE="Titles only"
onClick="top.frames[0].location='artist.html'">
th× khi nót “Titles only” ®îc nhÊn, file artist.html sÏ ®îc t¶i vµo
upperFrame, vµ hai frame listFrame, contentFrame sÏ bÞ ®ãng l¹i
nh chóng cha bao giê tån t¹i.
§èi tîng document

§èi tîng nµy chøa çc th«ng tin vÒ document hiÖn thêi vµ cung cÊp çc
ph¬ng thøc ®Ó ®a th«ng tin ra mµn h×nh. §èi tîng document ®îc t¹o
ra bªng cÆp thÎ <BODY> vµ </BODY>. Mét sè çc thuéc tÝnh g¾n víi
thÎ <BODY>.

JavaScript
58
Çc ®èi tîng anchor, forms, history, links lµ thuéc tÝnh cña ®èi tîng
document. Kh«ng cã çc ch¬ng tr×nh xö lý sù kiÖn cho çc frame. Sù
kiÖn onLoad vµ onUnLoad lµ cho ®èi tîng window.
• alinkColor - Gièng nh thuéc tÝnh ALINK.

• anchor - M¶ng tÊt c¶ çc anchor trong document.
• bgColor - Gièng thuéc tÝnh BGCOLOR.
• cookie - Sö dông ®Ó x¸c ®Þnh cookie.
• fgColor - Gièng thuéc tÝnh TEXT.
• forms - M¶ng tÊt c¶ çc form trong document.
• lastModified - Ngµy cuèi cïng v¨n b¶n ®îc söa.
• linkColor - Gièng thuéc tÝnh LINK.
• links - M¶ng tÊt c¶ çc link trong document.
• location - URL ®Çy ®ñ cña v¨n b¶n.
• referrer - URL cña v¨n b¶n gäi nã.
• title - Néi dung cña thÎ <TITLE>.
• vlinkColor - Gièng thuéc tÝnh VLINK.
• document.clear - Xo¸ document hiÖn thêi.

• document.close - §ãng dßng d÷ liÖu vµo vµ ®a toµn bé d÷
liÖu trong bé ®Öm ra mµn h×nh.
• document.open (["mineType"]) - Më mét stream ®Ó thu thËp
d÷ liÖu vµo cña çc phwong thøc write vµ writeln.
• document.write(expression1 [,expression2]...[,expressionN]) -
ViÕt biÓu thøc HTML lªn v¨n b¶n tr«ng mét cöa sæ x¸c ®Þnh.
• document.writeln (expression1 [,expression2] ...
[,expressionN] ) - Gièng ph¬ng thøc trªn nhng khi hÕt mçi
biÓu thøc l¹i xuèng dßng.
§èi tîng anchors

anchor lµ mét ®o¹n v¨n b¶n trong document cã thÓ dïng lµm ®Ých cho
mét siªu liªn kÕt. Nã ®îc x¸c ®Þnh bªng cÆp thÎ <A> vµ </A>. §èi tîng
anchor kh«ng cã thuéc tÝnh, ph¬ng thøc còng nh ch¬ng tr×nh xö lý sù
kiÖn. M¶ng anchor tham chiÕu ®Õn mçi anchor cã tªn trong document.
Mçi anchor ®îc tham chiÕu bªng çch:
document.anchors [index]

JavaScript
59
M¶ng anchor cã mét thuéc tÝnh duy nhÊt lµ length x¸c ®Þnh sè lîng
çc anchor trong document, nã cã thÓ ®îc x¸c ®Þnh nh sau:
document.anchors.length.
§èi tîng forms

Çc form ®îc t¹o ra nhê cÆp thÎ <FORM>
vµ </FORM>. PhÇn lín çc thuéc tÝnh cña
®èi tîng form ph¶n ¸nh çc thuéc tÝnh
cña thÎ <FORM>. Cã mét vµi phÇn tö
(elements) lµ thuéc tÝnh cña ®èi tîng
forms:
button
checkbox
hidden
password
radio
reset
select
submit
text
textarea
Çc phÇn tö nµy sÏ ®îc tr×nh bµy sau.
NÕu document chøa mét vµi form, chóng cã thÓ ®îc tham chiÕu qua
m¶ng forms. Sè lîng çc form cã thÓ ®îc x¸c ®Þnh nh sau:
document.forms.length.
Mçi mét form cã thÓ ®îc tham chiÕu nh sau:
document.forms[index]

action thuéc tÝnh ACTION cña thÎ FORM.
elements M¶ng chøa tÊt c¶ çc thµnh phÇn trong mét form (nh
checkbox, trêng text, danh s¸ch lùa chän
encoding X©u chøa kiÓu MIME ®îc sö dông ®Ó m· ho¸ néi
dung cña form göi cho server.
length Sè lîng çc thµnh phÇn trong mét form.
method Thuéc tÝnh METHOD.
target X©u chøa tªn cña cöa sæ ®Ých khi submit form

JavaScript
60

formName.submit () - XuÊt d÷ liÖu cña mét form tªn formName tíi
trang xö lý. Ph¬ng thøc nµy m« pháng mét click vµo nót submit trªn
form.

onSubmit - Ch¬ng tr×nh xö lý sù kiÖn nµy ®îc gäi khi ngêi sö dông
chuyÓn d÷ liÖu tõ form ®i.
§èi tîng history

§èi tîng nµy ®îc sö dông ®Ó lu gi÷ çc
th«ng tin vÒ çc URL tríc ®îc ngêi sö
dông sö dông. Danh s¸ch çc URL ®îc lu
tr÷ theo thø tù thêi gian. §èi tîng nµy
kh«ng cã ch¬ng tr×nh xö lý sù kiÖn.

length - Sè lîng çc URL trong ®èi tîng.
• history.back() - §îc sö dông ®Ó tham chiÕu tíi URL míi ®îc

th¨m tríc ®©y.
• history.forward() - §îc sö dông ®Ó tham chiÕu tíi URL kÕ tiÕp
trong danh s¸ch. Nã sÏ kh«ng g©y hiÖu øng g× nÕu ®· ®Õn
cuèi cña danh s¸ch.
• history.go (delta | "location") - §îc sö dông ®Ó chuyÓn lªn hay
chuyÓn xuèng delta bËc hay di chuÓn ®Õn URL x¸c ®Þnh bëi
location trong danh s¸ch. NÕu delta ®îc sö dông th× viÖc
dÞch chuyÓn lªn phÝa trªn khi delta d¬ng vµ xuèng phÝa díi
khi delta ©m. nÕu sö dông location, URL gÇn nhÊt cã chøa
location lµ chuçi con sÏ ®îc tham chiÕu.
§èi tîng links

§èi tîng link lµ mét ®o¹n v¨n b¶n hay mét
¶nh ®îc xem lµ mét siªu liªn kÕt. Çc
thuéc tÝnh cña ®èi tîng link chñ yÕu xö
lý vÒ URL cña çc siªu liªn kÕt. §èi tîng
link còng kh«ng cã ph¬ng thøc nµo.
M¶ng link chøa danh s¸ch tÊt c¶ çc liªn kÕt trong document. Cã thÓ
x¸c ®Þnh sè lîng çc link qua
document.links.length()
Cã thÓ tham chiÕu tíi mét liªn kÕt qña

JavaScript
61
document.links [index]
§Ó x¸c ®Þnh çc thuéc tÝnh cña ®èi tîng link, cã thÓ sö dông URL t¬ng
tù:
http://www.abc.com/chap1/page2.html#topic3
• hash - Tªn anchor cña vÞ trÝ hiÖn thêi (vÝ dô topic3).

• Host - PhÇn hostname:port cña URL (vÝ dô www.abc.com). Chó
ý rªng ®©y thêng lµ cæng ngÇm ®Þnh vµ Ýt khi ®îc chØ ra.
• Hostname - Tªn cña host vµ domain (vÝ dô ww.abc.com).
• href - Toµn bé URL cho document hiÖn t¹i.
• Pathname - PhÇn ®êng dÉn cña URL (vÝ dô
/chap1/page2.html).
• port - Cæng truyÒn th«ng ®îc sö dông cho m¸y tÝnh host, th-
êng lµ cæng ngÇm ®Þnh.
• Protocol - Giao thøc ®îc sö dông (cïng víi dÊu hai chÊm) (vÝ dô
http:).
• Search - C©u truy vÊn t×m kiÕm cã thÓ ë cuèi URL cho çc
script CGI.
• Target - Gièng thuéc tÝnh TARGET cña <LINK>.
• onClick - X¶y ra khi ngêi sö dông nhÊn vµo link.

• onMouseOver - X¶y ra khi con chuét di chuyÓn qua link.
§èi tîng Math

§èi tîng Math lµ ®èi tîng néi t¹i trong JavaScript. Çc thuéc tÝnh cña ®èi
tîng nµy chøa nhiÒu hªng sè to¸n häc, çc hµm to¸n häc, lîng gi¸c phæ
biÕn. §èi tîng Math kh«ng cã ch¬ng tr×nh xö lý sù kiÖn.
ViÖc tham chiÕu tíi number trong çc ph¬ng thøc cã thÓ lµ sè hay çc
biÓu thøc ®îc ®n¸h gi¸ lµ sè hîp lÖ.
• E - Hªng sè Euler, kho¶ng 2,718.

• LN2 - logarit tù nhiªn cña 2, kho¶ng 0,693.
• LN10 - logarit tù nhiªn cña 10, kho¶ng 2,302.
• LOG2E - logarit c¬ sè 2 cña e, kho¶ng 1,442.
• PI - Gi¸ trÞ cña π, kho¶ng 3,14159.

JavaScript
62
• SQRT1_2 - C¨n bËc 2 cña 0,5, kho¶ng 0,707.

• SQRT2 - C¨n bËc 2 cña 2, kho¶ng 1,414.
• Math.abs (number) - Tr¶ l¹i gi¸ trÞ tuyÖt ®èi cña number.
• Math.acos (number) - Tr¶ l¹i gi¸ trÞ arc cosine (theo radian)
cña number. Gi¸ trÞ cña number ph¶i n¨mg gi÷a -1 vµ 1.
• Math.asin (number) - Tr¶ l¹i gi¸ trÞ arc sine (theo radian) cña
number. Gi¸ trÞ cña number ph¶i n¨mg gi÷a -1 vµ 1.
• Math.atan (number) - Tr¶ l¹i gi¸ trÞ arc tan (theo radian) cña
number.
• Math.ceil (number) - Tr¶ l¹i sè nguyªn nhá nhÊt lín h¬n hoÆc
bªng number.
• Math.cos (number) - Tr¶ l¹i gi¸ trÞ cosine cña number.
• Math.exp (number) - Tr¶ l¹i gi¸ trÞ e^ number, víi e lµ hªng sè
Euler.
• Math.floor (number) - Tr¶ l¹i sè nguyªn lín nhÊt nhá h¬n hoÆc
bªng number.
• Math.log (number) - Tr¶ l¹i logarit tù nhiªn cña number.

• Math.max (num1,num2) - Tr¶ l¹i gi¸ trÞ lín nhÊt gi÷a num1 vµ
num2
• Math.min (num1,num2) - Tr¶ l¹i gi¸ trÞ nhá nhÊt gi÷a num1 vµ
num2.
• Math.pos (base,exponent) - Tr¶ l¹i gi¸ trÞ base luü thõa
exponent.
• Math.random (r) - Tr¶ l¹i mét sè ngÉu nhiªn gi÷a 0 vµ 1.
Phwong thøc nµy chØ thùc hiÖn ®îc trªn nÒn t¶ng UNIX.
• Math.round (number) - Tr¶ l¹i gi¸ trÞ cña number lµm trßn tíi sè
nguyªn gÇn nhÊt.
• Math.sin (number) - Tr¶ l¹i sin cña number.
• Math.sqrt (number) - Tr¶ l¹i c¨n bËc 2 cña number.
• Math.tan (number) - Tr¶ l¹i tag cña number.

JavaScript
63
§èi tîng Date

§èi tîng Date lµ ®èi tîng cã s½n trong
JavaScript. Nã cung cÊp nhiÒu ph¬ng
thøc cã Ých ®Ó xö lý vÒ thêi gian vµ
ngµy th¸ng. §èi tîng Date kh«ng cã thuéc
tÝnh vµ ch¬ng tr×nh xö lý sù kiÖn.
PhÇn lín çc ph¬ng thøc date ®Òu cã mét ®èi tîng Date ®i cïng. Çc
ph¬ng thøc giíi thiÖu trong phÇn nµy sö dông ®èi tîng Date dateVar,
vÝ dô:
dateVar = new Date ('August 16, 1996 20:45:04');
• dateVar.getDate() - Tr¶ l¹i ngµy trong th¸ng (1-31) cho

dateVar.
• dateVar.getDay() - Tr¶ l¹i ngµy trong tuÇn (0=chñ
nhËt,...6=thø b¶y) cho dateVar.
• dateVar.getHours() - Tr¶ l¹i giê (0-23) cho dateVar.
• dateVar.getMinutes() - Tr¶ l¹i phót (0-59) cho dateVar.
• dateVar.getSeconds() - Tr¶ l¹i gi©y (0-59) cho dateVar.
• dateVar.getTime() - Tr¶ l¹i sè lîng çc mili gi©y tõ 00:00:00
ngµy 1/1/1970.
• dateVar.getTimeZoneOffset() - Tr¶ l¹i ®é dÞch chuyÓnbªng
phót cña giê ®Þa ph¬ng hiÖn t¹i so víi giê quèc tÕ GMT.
• dateVar.getYear()-Tr¶ l¹i n¨m cho dateVar.
• Date.parse (dateStr) - Ph©n tÝch chuçi dateStr vµ tr¶ l¹i sè l-
îng çc mili gi©y tÝnh tõ 00:00:00 ngµy 01/01/1970.
• dateVar.setDay(day) - §Æt ngµy trong th¸ng lµ day cho
dateVar.
• dateVar.setHours(hours) - §Æt giê lµ hours cho dateVar.
• dateVar.setMinutes(minutes) - §Æt phót lµ minutes cho
dateVar.
• dateVar.setMonths(months) - §Æt th¸ng lµ months cho
dateVar.
• dateVar.setSeconds(seconds) - §Æt gi©y lµ seconds cho
dateVar.
• dateVar.setTime(value) - §Æt thêi gian lµ value, trong ®ã
value biÓu diÔn sè lîng mili gi©y tõ 00:00:00 ngµy
01/01/10970.
• dateVar.setYear(years) - §Æt n¨m lµ years cho dateVar.

JavaScript
64
• dateVar.toGMTString() - Tr¶ l¹i chuçi biÓu diÔn dateVar díi d¹ng

GMT.
• dateVar.toLocaleString()-Tr¶ l¹i chuçi biÓu diÔn dateVar theo
khu vùc thêi gian hiÖn thêi.
• Date.UTC (year, month, day [,hours] [,minutes] [,seconds]) -
Tr¶ l¹i sè lîng mili gi©y tõ 00:00:00 01/01/1970 GMT.
§èi tîng String

§èi tîng String lµ ®èi tîng ®îc x©y dùng néi t¹i trong JavaScript cung
cÊp nhiÒu ph¬ng thøc thao t¸c trªn chuçi. §èi tîng nµy cã thuéc tÝnh
duy nhÊt lµ ®é dµi (length) vµ kh«ng cã ch¬ng tr×nh xö lý sù kiÖn.
• str.anchor (name) - §îc sö dông ®Ó t¹o ra thÎ <A> (mét çch

®éng). Tham sè name lµ thuéc tÝnh NAME cña thÎ <A>.
• str.big() - KÕt qu¶ gièng nh thÎ <BIG> trªn chuçi str.
• str.blink() - KÕt qu¶ gièng nh thÎ <BLINK> trªn chuçi str.
• str.bold() - KÕt qu¶ gièng nh thÎ <BOLD> trªn chuçi str.
• str.charAt(a) - Tr¶ l¹i ký tù thø a trong chuçi str.
• str.fixed() - KÕt qu¶ gièng nh thÎ <TT> trªn chuçi str.
• str.fontcolor() - KÕt qu¶ gièng nh thÎ <FONTCOLOR = color>.
• str.fontsize(size) - KÕt qu¶ gièng nh thÎ <FONTSIZE = size>.
• str.index0f(srchStr [,index]) - Tr¶ l¹i vÞ trÝ trong chuçi str vÞ
trÝ xuÊt hiÖn ®Çu tiªn cña chuçi srchStr. Chuçi str ®îc t×m tõ
tr¸i sang ph¶i. Tham sè index cã thÓ ®îc sö dông ®Ó x¸c
®Þnh vÞ trÝ b¾t ®Çu t×m kiÕm trong chuçi.
• str.italics() - KÕt qu¶ gièng nh thÎ <I> trªn chuçi str.
• str.lastIndex0f(srchStr [,index]) - Tr¶ l¹i vÞ trÝ trong chuçi str
vÞ trÝ xuÊt hiÖn cuèi cïng cña chuçi srchStr. Chuçi str ®îc t×m
tõ ph¶i sang tr¸i. Tham sè index cã thÓ ®îc sö dông ®Ó x¸c
®Þnh vÞ trÝ b¾t ®Çu t×m kiÕm trong chuçi.
• str.link(href) - §îc sö dông ®Ó t¹o ra mét kÕt nèi HTML ®éng
cho chhuçi str. Tham sè href lµ URL ®Ých cña liªn kÕt.
• str.small() - KÕt qu¶ gièng nh thÎ <SMALL> trªn chuçi str.
• str.strike() - KÕt qu¶ gièng nh thÎ <STRIKE> trªn chuçi str.
• str.sub() - T¹o ra mét subscript cho chuçi str, gièng thÎ
<SUB>.

JavaScript
65
• str.substring(a,b) - Tr¶ l¹i chuçi con cña str lµ çc ký tù tõ vÞ

trÝ thø a tíi vÞ trÝ thø b. Çc ký tù ®îc ®Õm tõ tr¸i sang ph¶i
b¾t ®Çu tõ 0.
• str.sup() - T¹o ra superscript cho chuçi str, gièng thÎ <SUP>.
• str.toLowerCase() - §æi chuçi str thµnh ch÷ thêng.
• str.toUpperCase() - §æi chuçi str thµnh ch÷ hoa.
Çc phÇn tö cña ®èi tîng Form

Form ®îc t¹o bëi çc phÇn tö cho phÐp ngêi sö dông ®a th«ng tin vµo.
Khi ®ã, néi dung (hoÆc gi¸ trÞ) cña çc phÇn tö sÏ ®îc chuyÓn ®Õn
mét ch¬ng tr×nh trªn server qua mét giao diÖn ®îc gäi lµ Common
Gateway Interface(Giao tiÕp qua mét cæng chung) gäi t¾t lµ CGI
Sö dông JavaScript b¹n cã thÓ viÕt nh÷ng ®o¹n scripts chÌn vµo HTML
cña b¹n ®Ó lµm viÖc víi çc phÇn tö cña form vµ çc gi¸ trÞ cña chóng.
B¶ng ?: Çc phÇn tö cña form
PhÇn tö M« t¶
Lµ mét nót bÊm h¬n lµ nót submit hay nót reset
button
(<INPUT TYPE="button">)
checkbox Mét checkbox (<INPUT TYPE="checkbox">)
Lµ mét phÇn tö t¶i file lªn cho phÐp ngêi sö dông göi lªn
FileUpload mét file (<INPUT TYPE="file">)
hidden Mét trêng Èn (<INPUT TYPE="hidden">)
Mét trêng text ®Ó nhËp mËt khÈu mµ tÊt c¶ çc ký tù
password nhËp vµo ®Òu hiÓn thÞ lµ dÊu (*)(<INPUT
TYPE="password">)
radio Mét nót bÊm (<INPUT TYPE="radio">)
reset Mét nót reset(<INPUT TYPE="reset">)
Mét danh s¸ch lùa chän
select (<SELECT><OPTION>option1</OPTION>
<OPTION>option2</OPTION></SELECT>)
submit Mét nót submit (<INPUT TYPE="submit">)
text Mét trêng text (<INPUT TYPE="text">)
Mét trêng text cho phÐp nhËp vµp nhiÒu dßng
textArea
<TEXTAREA>default text</TEXTAREA>)

JavaScript
66
Mçi phÇn tö cã thÓ ®îc ®Æt tªn ®Ó JavaScript truy nhËp ®Õn chóng
qua tªn
4.1.20.Thuéc tÝnh type

Trong mçi phÇn tö cña form ®Òu cã thuéc tÝnh type, ®ã lµ mét x©u
chØ ®Þnh râ kiÓu cña phÇn tö ®îc ®a vµo nh nót bÊm, mét trêng text
hay mét checkbox...
X©u ®ã cã thÓ lµ mét trong çc 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.PhÇn tö button
Trong mét form HTML chuÈn, chØ cã hai nót bÊm cã s½n lµ submit vµ
reset bëi vÞ d÷ liÖu trong form ph¶i ®îc göi tíi mét vµi ®Þa chØ URL
(thêng lµ CGI-BIN script) ®Ó xö lý vµ lu tr÷.
Mét phÇn tö button ®îc chØ ®Þnh râ khi sö dông thÎ INPUT:
<INPUT TYPE="button" NAME="name" VALUE= "buttonName">
Trong thÎ INPUT, name lµ tªn cña button, thuéc tÝnh VALUE cã chøa
nh·n cña button sÏ ®îc hiÓn thÞ trªn Navigator cña browser.
ChØ cã mét thÎ sù kiÖn duy nhÊt ®èi víi button lµ onClick. KÕt hîp víi
nã lµ çch thøc duy nhÊt click.PhÇn tö buttton cã kh¶ n¨ng më réng
cho phÐp ngêi lËp tr×nh JavaScript cã thÓ viÕt ®îc mét ®o¹n m· lÖnh
JavaScript ®Ó thùc thi viÖc thªm vµo mét nót bÊm trong mét script.
Trong vÝ dô sau, thay v× sö dông onChange, b¹n cã thÓ chØnh söa
script ®Ó ®Þnh gi¸ biÓu thøc khi button ®îc bÊm.
VÝ dô: §Þnh gi¸ mét form sö dông phÇn tö button.
<HTML>
<HEAD>
<TITLE>button Example</TITLE>

JavaScript
67

function calculate(form) {
form.results.value = eval(form.entry.value);
}
</SCRIPT>
</HEAD>
<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.PhÇn tö checkbox
Çc phÇn tö checkbox cã kh¶ n¨ng bËt t¾t dïng ®Ó chän hoÆc kh«ng
chän mét th«ng tin. Çc checkbox cã nhiÒu thuéc tÝnh vµ çch thøc
h¬n button. B¶ng díi ®©y lµ danh s¸ch çc thuéc tÝnh vµ çc çch thøc
cña phÇn tö checkbox.
B¶ng . Çc thuéc tÝnh vµ çch thøc cña phÇn tö checkbox.
Çch thøc vµ M« t¶
thuéc tÝnh
checked Cho biÕt tr¹ng th¸i hiÖn thêi cña checkbox (thuéc
tÝnh)
defaultChecked Cho biÕt tr¹ng th¸i mÆc ®Þnh cña phÇn tö (thuéc
tÝnh)
name Cho biÕt tªn cña phÇn tö ®îc chØ ®Þnh trong thÎ
INPUT (thuéc tÝnh)
value Cho biÕt gi¸ trÞ hiÖn thêi cña phÇn tö ®îc chØ
®Þnh trong thÎ INPUT (thuéc tÝnh)
click() M« t¶ mét click vµo checkbox (Çch thøc)
PhÇn tö checkbox chØ cã mét thÎ sù kiÖn lµ onClick

JavaScript
68
VÝ dô: T¹o hép checkbox ®Ó nhËp vµo mét sè råi lùa chän tÝnh nh©n
®«i vµ b×nh ph¬ng:
<HTML>
<HEAD>
<TITLE>checkbox Example</TITLE>
<SCRIPT>
function calculate(form,callingField) {
if (callingField == "result") { // if(1)
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;
} //enfzd if(3)
}//end if(1)
}//end function
</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

JavaScript
69
<BR>
Result: <INPUT TYPE="text" NAME="result" VALUE=0
</FORM>
</BODY>
</HTML>
Trong script nµy, b¹n ®· thÊy çch sö dông thÎ sù kiÖn onClick còng nh
thuéc tÝnh checked lµ mét gi¸ trÞ kiÓu Boolean cã thÓ dïng lµm ®iÒu
kiÖn trong c©u lÖnh if...else
B¹n cã thÓ thªm mét checkbox tªn lµ square vµo form. NÕu hép nµy ®-
îc check, ch¬ng tr×nh sÏ lÊy gi¸ trÞ cña nã, nÕu kh«ng, mét thùc thi ®-
îc mÆc ®Þnh sÏ nh©n ®«i gi¸ trÞ cña nã. ThÎ sù kiÖn onClick trong
checkbox ®îc ®Þnh nghÜa:
(<INPUT TYPE=checkbox NAME=square onClick= "calculate( this.form,
this.name);"> )
Khi ®ã nÕu ngêi dïng thay ®æi mét c©u lÖnh kh¸c, form sÏ ®îc tÝnh
to¸n l¹i.
§Ó t¹o ra sù më réng cho checkbox. b¹n cã thÓ thay ®æi hµm
calculate() nh sau:
if (callingField == "result") { // if (1)
if (form.square.checked) { // if (2)
}
else {
} //end if(2)
}
else {
if (form.square.checked) { // if (3)
}
else {
} // end if (3)
} // end if (1)
}

JavaScript
70
4.1.23.PhÇn tö File Upload

PhÇn tö nµy cung cÊp cho form mét çch ®Ó ngêi sö dông cã thÓ chØ
râ mét file ®a vµo form xö lý. PhÇn tö file Upload ®îc chØ ®Þnh râ
trong JavaScript bªng ®èi tîng FileUpload.
§èi tîng chØ cã hai thuéc tÝnh lµ name vµ value, c¶ hai ®Òu lµ gi¸ trÞ
x©u nh çc ®èi tîng kh¸c. Kh«ng cã çch thøc hay thÎ file cho ®èi tîng
nµy.
4.1.24.PhÇn tö hidden
PhÇn tö hidden lµ phÇn tö duy nhÊt trong sè tÊt c¶ çc phÇn tö cña
form kh«ng ®îc hiÓn thÞ trªn Web browser. Trêng hidden cã thÓ sö
dông ®Ó lu çc gi¸ trÞ cÇn thiÕt ®Ó göi tíi server song song víi sù xuÊt
ra tõ form (form submission) nhng nã kh«ng ®îc hiÓn thÞ trªn trang.
Mäi ngêi cã thÓ sö dông trong JavaScript ®Ó lu çc gi¸ trÞ trong suèt
mét script vµ ®Ó tÝnh to¸n kh«ng cÇn form.
§èi tîng hidden chØ cã hai thuéc tÝnh lµ name vµ value, ®ã còng lµ
nh÷ng gi¸ trÞ x©u gièng çc ®èi tîng kh¸c. Kh«ng cã çch thøc hay thÎ
sù kiÖn nµo cho ®èi tîng nµy.
4.1.25.PhÇn tö Password
§èi tîng Password lµ ®èi tîng duy nhÊt trong çc ®èi tîng cña form mµ
khi gâ bÊt kú ký tù nµo vµo còng ®Òu hiÓn thÞ dÊu sao(*). Nã cho
phÐp ®a vµo nh÷ng th«ng tin bÝ mËt nh ®¨ng ký mËt khÈu...
§èi tîng Password cã 3 thuéc tÝnh gièng trêng text lµ: defaultValue,
name vµ value. Kh«ng gièng víi hai phÇn tö ë trªn, trêng Password cã
nhiÒu çch thøc h¬n(focus(), blur(), and select() ) vµ t¬ng øng víi çc
thÎ sù kiÖn: onFocus, onBlur, and onSelect.
PhÇn nµy sÏ ®îc nãi kü h¬n trong ®èi tîng text.
4.1.26.PhÇn tö radio
§èi tîng radio gÇn gièng sù bËt t¾t checkbox khi cã hai nót radio kÕt
hîp thµnh mét nhãm. Khi nhiÒu radio ®îc kÕt hîp thµnh mét nhãm, chØ
cã mét nót ®îc chän trong bÊt kú mét thêi ®iÓm nµo. VÝ dô dßng lÖnh
sau t¹o ra mét nhãm radio cã ba nót tªn 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>
Nhãm çc nót radio l¹i bªng çch ®Æt cho chóng cã cïng mét tªn trong
çc thÎ INPUT.
Cã mét vµi thuéc tÝnh ®Ó kiÓm tra tr¹ng th¸i hiÖn thêi cña mét nhãm
nót radio. B¶ng sau hiÓn thÞ çc thuéc tÝnh vµ çch thøc cña ®èi tîng
radio.
B¶ng? . Çc thuéc tÝnh vµ çch thøc cña ®èi tîng radio.

JavaScript
71
Thuéc tÝnh vµ M« t¶
çch thøc
checked M« t¶ tr¹ng th¸i hiÖn thêi cña phÇn tö radio (thuéc

tÝnh)
defaultChecked M« t¶ tr¹ng th¸i mÆc ®Þnh cña phÇn tö (thuéc
tÝnh)
index M« t¶ thø tù cña nót radio ®îc chän hiÖn thêi trong
mét nhãm
length M« t¶ tæng sè nót radio trong mét nhãm
name M« t¶ tªn cña phÇn tö ®îc chØ ®Þnh trong thÎ
value M« t¶ gi¸ trÞ hiÖn thêi cña phÇn tö ®îc ®Þnh ra
trong thÎ INPUT (thuéc tÝnh)
click() M« pháng mét click trªn nót radio (çch thøc)
Còng nh checkbox, radio chØ cã mét thÎ sù kiÖn lµ onClick.
Kh«ng cã bÊt kú mét ®èi tîng form nµo cã thuéc tÝnh index vµ length.
Do mét nhãm radio gåm nhiÒu phÇn tö radio, nªn chóng ®îc ®Æt
trong mét m¶ng çc nót radio vµ ®îc ®¸nh sè tõ 0. Trong vÝ dô nhãm
radio cã tªn test ë trªn, nÕu nhãm ®ã nªm trong mét form cã tªn lµ
"testform", b¹n cã thÓ gäi tíi nót radio thø hai bªng tªn
"testform.test[1]" vµ cã thÓ kiÓm tra gi¸ trÞ cña nã bªng
"testform.test[1].checked"
§Ó minh ho¹ râ çch dïng ®èi tîng radio, ta xem vÝ dô sau:
VÝ dô:
<HTML>
<HEAD>
<TITLE>radio button Example</TITLE>
<SCRIPT>
if (callingField == "result") {
if (form.action[1].checked) {
} else {
}
} else {
if (form.action[1].checked) {

JavaScript
72
} else {
}
}
}
</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
</FORM>
</BODY>
</HTML>
Trong vÝ dô nµy, sù thay ®æi tõ checkbox ë trªn lµ rÊt khã nhËn biÕt.
Thay cho mét checkbox trong vÝ dô tríc, ë ®©y ta sö dông hai nót
radio víi hai gi¸ trÞ kh¸c nhau: double vµ square
Nh ta ®· biÕt cã thÓ truy nhËp ®Õn çc nót radio qua mét m¶ng, do
®ã hai nót nµy cã thÓ truy nhËp bªng action[0] vµ action[1]. Bªng
çch nµy, b¹n chØ cÇn thay ®æi tham chiÕu ®Õn hµm calculate() tõ
form.square.checked thµnh form.action[1].checked.
4.1.27.PhÇn tö reset
Sö dông ®èi tîng reset, b¹n cã thÓ t¸c ®éng ngîc l¹i ®Ó click vµo nót
Reset. Còng gièng ®èi tîng button, ®èi tîng reset cã hai thuéc tÝnh lµ
name vµ value, vµ mét çch thøc click(), mét thÎ sù kiÖn onClick.
HÇu hÕt nh÷ng ngêi lËp tr×nh khong sö dông thÎ sù kiÖn onClick cña
nót reset ®Ó kiÓm tra gi¸ trÞ cña nót nµy, ®èi tîng reset thêng dïng
®Ó xo¸ form.

JavaScript
73
VÝ dô sau minh ho¹ çch sö dông nót reset ®Ó xo¸ çc gi¸ trÞ cña form.
VÝ dô:
<HTML>
<HEAD>
<TITLE>reset Example</TITLE>
function clearForm(form) {
form.value1.value = "Form";
form.value2.value = "Cleared";
}
//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.PhÇn tö select
Danh s¸ch lùa chän trong çc form HTML xuÊt hiÖn menu drop-down
hoÆc danh s¸ch cuén ®îc cña çc ®èi tîng cã thÓ ®îc lùa chän. Çc
danh d¸ch ®îc x©y dùng bªng çch sö dông hai thÎ SELECT vµ OPTION.
VÝ dô:
<SELECT NAME="test">
<OPTION SELECTED>1
<OPTION>2
<OPTION>3
</SELECT>
t¹o ra ba thµnh phÇn cña menu th¶ drop-down víi ba lùa chän 1,2 vµ 3.
Sö dông thuéc tÝnh SIZE b¹n cã thÓ t¹o ta mét danh s¸ch cuén víi sè
phÇn tö hiÓn thÞ ë lÇn thø nhÊt. §Ó bËt menu drop-down trong mét
menu cuén víi hai thµnh phÇn hiÓn thÞ, b¹n cã thÓ sö dông nh sau:
<SELECT NAME="test" SIZE=2>
<OPTION SELECTED>1

JavaScript
74
<OPTION>2
<OPTION>3
</SELECT>
Trong c¶ hai vÝ dô trªn, ngêi sö dông chØ cã thÓ cã mét lùa chän. NÕu
sö dông thuéc tÝnh MULTIPLE, b¹n cã thÓ cho phÐp ngêi sö dông lùa
chän nhiÒu h¬n mét gi¸ trÞ trong danh s¸ch lùa chän:
<SELECT NAME="test" SIZE=2 MULTIPLE>
<OPTION SELECTED>1
<OPTION>2
<OPTION>3
</SELECT>
Danh s¸ch lùa chän trong JavaScript lµ ®èi tîng select. §èi tîng nµy t¹o
ra mét vµi thµnh phÇn t¬ng tù çc button vµ radio.
Víi çc thµnh phÇn lùa chän, danh s¸ch çc lùa chän ®îc chøa trong
mét m¶ng ®îc ®¸nh sè tõ 0. Trong trêng hîp nµy, m¶ng lµ mét thuéc
tÝnh cña ®èi tîng select gäi lµ options.
C¶ viÖc lùa chän çc option vµ tõng phÇn tö option riªng biÖt ®Òu cã
nh÷ng thuéc tÝnh. Bæ sung thªm vµo m¶ng option, phÇn tö select cã
thuéc tÝnh selectedIndex, cã chøa sè thø tù cña option ®îc lùa chän
hiÖn thêi.
Mçi option trong danh s¸ch lùa chän ®Òu cã mét vµi thuéc tÝnh:
• DEFAULTSELECTED: cho biÕt option cã ®îc mÆc ®Þnh lµ lùa
chän trong thÎ OPTION hay kh«ng.
• INDEX: chøa gi¸ trÞ sè thø tù cña option hÞªn thêi trong m¶ng
option.
• SELECTED: cho biÕt tr¹ng th¸i hiÖn thêi cña option
• TEXT: cã chøa gi¸ trÞ cña dßng text hiÓn thÞ trªn menu cho
mçi option, vµ thuéc tÝnh value mäi gi¸ trÞ chØ ra trong thÎ
OPTION.
§èi tîng select kh«ng cã çc çch thøc ®îc ®Þnh nghÜa s½n. Tuy nhiªn,
®èi tîng select cã ba thÎ sù kiÖn, ®ã lµ onBlue, onFocus, onChange,
chóng ®Òu lµ nh÷ng ®èi tîng text.
VÝ dô b¹n cã danh s¸ch lùa chän 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 lÇn ®Çu tiªn hiÓn thÞ b¹n cã thÓ truy nhËp tíi çc th«ng tin sau:
example.options[1].value = "The Second"

JavaScript
75
example.options[2].text = "3"
example.selectedIndex = 0
example.options[0].defaultSelected = true
example.options[1].selected = false
NÕu ngêi sö dông kÝch vµo menu vµ lùa chän option thø hai, th× thÎ
onFocus sÏ thùc hiÖn, vµ khi ®ã gi¸ trÞ cña thuéc tÝnh sÏ lµ:
example.options[1].value = "The Second"
example.options[2].text = "3"
example.selectedIndex = 1
example.options[0].defaultSelected = true
example.options[1].selected = true
Söa çc danh s¸ch lùa chän
Navigator 3.0 cho phÐp thay ®æi néi dung cña danh s¸ch lùa chän tõ
JavaScript bªng çch liªn kÕt çc gi¸ trÞ míi cho thuéc tÝnh text cña çc
thùc thÓ trong danh s¸ch.
VÝ dô, trong vÝ dô tríc, b¹n ®· t¹o ra mét danh s¸ch lùa chän 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 dßng text hiÓn thÞ trªn nót thø hai
thµnh "two" b¨ng:
example.options[1].text = "two";
Cã thÓ thªm çc lùa chän míi vµo danh s¸ch bªng çch
sö dông ®èi tîng x©y dùng Option() theo có ph¸p:
newOptionName = new Option(optionText, optionValue,
defaultSelected, selected);
selectListName.options[index] = newOptionName;
ViÖc t¹o ®èi tîng option() nµy víi dßng text ®îc chØ tríc,
defaultSelected vµ selected nh trªn ®· ®Þnh ra nh÷ng
gi¸ trÞ kiÓu Boolean. §èi tîng nµy ®îc liªn kÕt vµo danh
s¸ch lùa chän ®îc thùc hiÖn bªng index.
Çc lùa chän cã thÓ bÞ xo¸ trong danh s¸ch lùa chän
bªng çch g¾n gi¸ trÞ null cho ®èi tîng muèn xo¸
selectListName.options[index] = null;

JavaScript
76
1.1 PhÇn tö submit

Nót Submit lµ mét trêng hîp ®Æc biÖt cña button, còng
nh nót Reset. Nót nµy ®a th«ng tin hiÖn t¹i tõ çc trêng
cña form tíi ®Þa chØ URL ®îc chØ ra trong thuéc tÝnh
ACTION cña thÎ form sö dông çch thøc METHOD chØ ra
trong thÎ FORM.
Gièng nh ®èi tîng button vµ reset, ®èi tîng submit cã
s½n thuéc tÝnh name vµ value, çch thøc click() vµ thÎ
sù kiÖn onClick.
1.2 PhÇn tö Text
PhÇn tö nµy nªm trong nh÷ng phÇn tö hay ®îc sö dông
nhÊt trong çc form HTML. T¬ng tù nh trêng Password,
trêng text cho phÐp nhËp vµo mét dßng ®¬n, nhng çc
ký tù cña nã hiÖn ra b×nh thêng.
®èi tîng text cã ba thuéc tÝnh:defautValue, name vµ
value. Ba çch thøc m« pháng sù kiÖn cña ngêi sö dông:
focus(), blur() vµ select(). Cã 4 thÎ sù kiÖn lµ: obBlur,
onFocus, onChange, onSelect. Chó ý çc sù kiÖn nµy
chØ thùc hiÖn khi con trá ®· ®îc kÝch ra ngoµi trêng
text.
B¶ng sau m« t¶ çc thuéc tÝnh vµ çch thøc cña ®èi t-
îng text.
B¶ng .Çc thuéc tÝnh vµ çch thøc cña ®èi tîng text.
Çch thøc vµ thuéc M« t¶
tÝnh
defaultValue ChØ ra gi¸ trÞ mÆc ®Þnh cña phÇn
tö ®îc chØ ra trong thÎ INPUT (thuéc
tÝnh)
name Tªn cña ®èi tîng ®îc chØ ra trong thÎ
value Gi¸ trÞ hiÖn thêi cña phÇn tö (thuéc
tÝnh)
focus() M« t¶ viÖc con trá tíi trêng text (çch
thøc)
blur() M« t¶ viÖc con trá rêi trêng text (çch
thøc)
select() M« t¶ viÖc lùa chän dßng text trong

JavaScript
77
trêng text (çch thøc)

Mét chó ý quan träng lµ cã thÓ g¸n gi¸ trÞ cho trêng
text bªng çch liªn kÕt çc gi¸ trÞ víi thuéc tÝnh value.
Trong vÝ dô sau ®©y, dßng text ®îc ®a vµo trêng ®Çu
tiªn ®îc lÆp l¹i trong trêng text thø hai, vµ mäi dßng
text ®îc ®a vµo trêng text thø hai l¹i ®îc lÆp l¹i trong
trêng texxt thø nhÊt. Kh¶ n¨ng nµy cña nã cã thÓ ¸p
dông ®Ó tù ®éng cËp nhËt hoÆc thay ®æi d÷ liÖu.
VÝ dô. Tù ®éng cËp nhËt çc trêng text .
<HTML>
<HEAD>
<TITLE>text Example</TITLE>
function echo(form,currentField) {
if (currentField == "first")
form.second.value = form.first.value;
else
form.first.value = form.second.value;
}
</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 PhÇn tö Textarea

JavaScript
78
ThÎ TEXTAREA cung cÊp mét hép cho phÐp nhËp sè

dßng text do ngêi thiÕt kÕ ®Þnh tríc. VÝ dô:
<TEXTAREA NAME="fieldName" ROWS=10 COLS=25>
Default Text Here
</TEXTAREA>
vÝ dô nµy t¹o ra mét trêng text cho phÐp ®a vµo 10
hµng ,mçi hµng 25 ký tù. Dßng "Defautl Text Here"sÏ
xuÊt hiÖn trong trêng nµy vµo lÇn hiÓn thÞ ®Çu tiªn.
Còng nh phÇn tö text , JavaScript cung cÊp cho b¹n çc
thuéc tÝnh defaultValue, name, vµ value, çc çch thøc
focus(), select(), vµ blur(), çc thÎ sù kiÖn onBlur,
onForcus, onChange, onSelect.
2. M¶ng elements[]
Çc ®èi tîng cña form cã thÓ ®îc gäi tíi bªng m¶ng
elements[]. VÝ dô b¹n t¹o ra mét form sau:
<FORM METHOD=POST NAME=testform>
<INPUT TYPE="text" NAME="one">
<INPUT TYPE="text" NAME="two">
<INPUT TYPE="text" NAME="three">
</FORM>
b¹n cã thÓ gäi tíi ba thµnh phÇn nµy nh sau:
document.elements[0], document.elements[1],
document.elements[2], h¬n n÷a cßn cã thÓ gäi
document.testform.one, document.testform.two,
document.testform.three.
Thuéc tÝnh nµy thêng ®îc sö dông trong çc mèi quan
hÖ tuÇn tù cña çc phÇn tö h¬n lµ dïng tªn cña chóng.
3. M¶ng form[]
Çc thÎ sù kiÖn ®îc thiÕt kÕ ®Ó lµm viÖc víi çc form
riªng biÖt hoÆc çc trêng ë mét thêi ®iÓm, nã rÊt h÷u
dông ®Ó cho phÐp gäi tíi çc form cã liªn quan trong
cïng mét trang.
M¶ng form[] ®Ò cËp ®Õn ë ®©y cã thÓ cã nhiÒu x¸c
®Þnh çc nh©n cña form trªn cïng mét trang vµ have
information in a single field match in all three forms. Cã
thÓ gäi bªng document.forms[] thay v× gäi bªng tªn

JavaScript
79
form. Trong script nµy, b¹n cã hai trêng text ®Ó nhËp vµ

nªm trªn hai form ®éc lËp víi nhau. Sö dông m¶ng form
b¹n cã thÓ t¬ng t¸c trªn çc gi¸ trÞ cña çc trêng trong
hai form cïng mét lóc khi ngêi sö dông thay ®æi gi¸ trÞ
trªn mét 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>
MÆt kh¸c, b¹n còng cã thÓ truy nhËp ®Õn form bªng
tªn form ®îc ®Æt trong thÎ FORM:
<FORM METHOD=POST NAME="name">
Khi ®ã b¹n cã thÓ gäi lµ document.forms["name"] hoÆc
document.name
4. Xem l¹i çc lÖnh vµ më réng
LÖnh/ Më KiÓu M« t¶
réng
blur() çch thøc M« t¶ viÖc dÞch chuyÓn con
JavaScript trá tõ mét phÇn tö
form.action çch thøc X©u chøa gi¸ trÞ cña thuéc
JavaScript tÝnh ACTION trong thÎ FORM
form.elemrnts thuéc tÝnh m¶ng chøa danh s¸ch çc

JavaScript
80
JavaScript phÇn tö trong form (nh

checkbox, trêng text, danh
s¸ch lùa chän)
form.encodin thuéc tÝnh x©u chøa kiÓu MIME sö dông
g JavaScript khi chuyÓn th«ng tin tõ form
tíi server
form,name thuéc tÝnh X©u chøa gi¸ trÞ thuéc tÝnh
JavaScript NAME trong thÎ FORM
form.target thuéc tÝnh X©u chøa tªn cöa sæ ®Ých
JavaScript bëi mét form submition
form.submit çch thøc M« t¶ viÖc submit mét form
JavaScript HTML
type thuéc tÝnh ¸nh x¹ kiÓu cña mét phÇn tö
JavaScript form thµnh mét x©u.
onSubmit ThÎ sù kiÖn thÎ sù kiÖn cho viÖc submit
button thuéc tÝnh Thuéc tÝnh kiÓu cho çc nót
HTML bÊm cña HTML (<INPUT
TYPE=button>)
checkbox thuéc tÝnh Thuéc tÝnh kiÓu cho çc
HTML checkbox cña HTML (<INPUT
TYPE=checkbox>)
pasword thuéc tÝnh Thuéc tÝnh kiÓu cho çc dßng
HTML pasword cña HTML(<INPUT
TYPE=password>)
radio thuéc tÝnh Thuéc tÝnh kiÓu cho çc nót
HTML radio cña HTML (<INPUT
TYPE=radio>)
reset thuéc tÝnh Thuéc tÝnh kiÓu cho çc nót
HTML reset cña HTML (<INPUT
TYPE=reset>)
SELECT thÎ HTML Hép thÎ cho danh s¸ch lùa
chän
OPTION thÎ HTML chØ ra çc lùa chän trong
danh s¸ch lùa
chän(<SELECT><OPTION>Op
tion
1<OPTION>Option

JavaScript
81
2</SELECT>)
submit thuéc tÝnh Thuéc tÝnh kiÓu cña nót
HTML submit (<INPUT
TYPE=submit>)
text thuéc tÝnh Thuéc tÝnh kiÓu cña trêng
HTML trong form (<INPUT
TYPE=text>)
TEXTAREA ThÎ HTML Hép thÎ cho nhiÒu dßng text
(<TEXTAREA> defautl text
</TEXTAREA>)
name thuéc tÝnh X©u chøa tªn phÇn tö HTML
JavaScript (button, checkbox,
password...)
value thuéc tÝnh X©u chøa gi¸ trÞ hiªn thêi cña
JavaScript mét phÇn tö HTML(button,
checkbox, password...)
click() çch thøc M« t¶ viÖc kÝch vµo mét
JavaScript phÇn tö trªn form (button,
checkbox,password)
onClick thuéc tÝnh ThÎ sù kiÖn cho sù kiÖn kÝch
JavaScript (button, checkbox, radio
button, reset, selection list,
submit)
checked thuéc tÝnh Gi¸ trÞ kiÓu Boolean m« t¶
JavaScript mét lùa chän check(checkbox,
radio button)
defaultChecke thuéc tÝnh X©u chøa gi¸ trÞ mÆc ®Þnh
d JavaScript cña mét phÇn tö HTML
(password, text, textarea)
focus() çch thøc M« t¶ viÖc con trá tíi mét
JavaScript phÇn tö (password, text,
textarea)
blur() çch thøc M« t¶ viÖc con trá rêi khái
JavaScript mét phÇn tö (password, text,
textarea)
select() çch thøc M« t¶ viÖc lùa chän dßng text
JavaScript trong mét trêng (password,

JavaScript
82
text, textarea)
onFocus() ThÎ sù kiÖn ThÎ sù kiÖn cho sù kiÖn
focus(password, selection
list, text, textarea)
onBlur ThÎ sù kiÖn ThÎ sù kiÖn cho sù kiÖn blur
(password, selection list, text,
textarea)
onChange ThÎ sù kiÖn ThÎ sù kiÖn cho sù kiÖn khi gi¸
trÞ cña trêng thay ®æi
(password, selection list, text,
textarea)
onSelect ThÎ sù kiÖn ThÎ sù kiÖn khi ngêi sö dông
chän dßng text trong mét tr-
êng (password, text,
textarea)
index thuéc tÝnh Lµ mét sè nguyªn m« t¶ lùa
JavaScript chän hiÖn thêi trong mét
nhãm lùa chän (radio button)
length thuéc tÝnh Sè nguyªn m« t¶ tæng sè çc
JavaScript lùa chän trong mét nhãm çc
lùa chän (radio button)
dafautlSelect thuéc tÝnh Gi¸ trÞ Boolean m« t¶ khi cã
ed JavaScript mét lùa chän ®îc ®Æt lµ
mÆc ®Þnh (seledtion list)
options thuéc tÝnh M¶ng çc lùa chän trong danh
JavaScript s¸ch lùa chän
text thuéc tÝnh Dßng text hiÓn thÞ cho mét
JavaScript thµnh phÇn cña menu trong
danh s¸ch lùa chän
TABLE thÎ HTML Hép thÎ cho çc b¶ng HTML
TR thÎ HTML Hép thÎ cho çc hµng cña mét
b¶ng HTML
TD thÎ HTML Hép thÎ cho çc « cña mét
hµng trong mét b¶ng HTML
COLSPAN thuéc tÝnh Lµ thuéc tÝnh cña thÎ TD m«
HTML t¶ trong mét « cña b¶ng cã
nhiÒu cét

JavaScript
83
ROWSPAN thuéc tÝnh Lµ thuéc tÝnh cña thÎ TD m«

HTML t¶ trong mét « cña b¶ng cã
nhiÒu hµng
BODER thuéc tÝnh Lµ thuéc tÝnh cña thÎ TABLE
HTML m« t¶ ®é réng ®êng viÒn
cña b¶ng
document.for thuéc tÝnh m¶ng cña çc ®èi tîng form
ms[] JavaScript víi mét danh s¸ch çc form
trong mét document
string.substri çch thøc Tr¶ l¹i mét x©u con cña x©u
ng() JavaScript string tõ tham sè vÞ trÝ ký tù
®Çu ®Õn vÞ trÝ ký tù cuèi
Math.floor() çch thøc Tr¶ l¹i mét gi¸ trÞ nguyªn tiÕp
JavaScript theo nhá h¬n gi¸ trÞ cña
tham sè ®a vµo.
string.length thuéc tÝnh Gi¸ trÞ nguyªn cña sè thø tù
JavaScript ký tù cuèi cïng trong x©u
string

JavaScript
84
5.M« h×nh ®èi tîng (Object Model)
§èi tîng vµ thuéc tÝnh

Nh ®· biÕt, mét ®èi tîng trong JavaScript cã çc thuéc tÝnh ®i
kÌm víi nã. B¹n cã thÓ truy nhËp ®Õn çc thuéc tÝnh cña nã bªng çch
gäi :
objectName.propertyName
C¶ tªn ®èi tîng vµ tªn thuéc tÝnh ®Òu nh¹y c¶m. B¹n ®Þnh
nghÜa mét thuéc tÝnh bªng çch g¸n cho nã mét gi¸ trÞ. VÝ dô, gi¶ sö
cã mét ®èi tîng tªn lµ myCar (trong trêng hîp nµy gi¶ sö ®èi tîng nµy
®· tån t¹i s½n sµng). B¹n cã thÓ lÊy çc thuéc tÝnh cã tªn make, model
vµ year cña nã nh sau:
myCar.make = “Ford“
myCar.model = “Mustang“
myCar.year = 69;
Cã mét m¶ng lu tr÷ tËp hîp çc gi¸ trÞ tham chiÕu tíi tõng biÕn.
Thuéc tÝnh vµ m¶ng trong JavaScript cã quan hÖ mËt thiÕt víi nhau,
thùc ra chóng chØ kh¸c nhau vÒ çch giao tiÕp víi cïng mét cÊu tróc d÷
liÖu. VÝ dô còng cã thÓ truy nhËp tíi çc thuéc tÝnh cña ®èi tîng myCar
ë trªn bªng m¶ng nh sau:
myCar[make] = “Ford“
myCar[model] = “Mustang“
myCar[year] = 69;
KiÓu m¶ng nµy ®îc hiÓu nh mét m¶ng cã kh¶ n¨ng liªn kÕt bëi
mçi mét phÇn tö trong ®ã ®Òu cã thÓ liªn kÕt ®Õn mét gi¸ trÞ x©u
nµo ®ã. §Ó minh ho¹ viÖc mµy ®îc thùc hiÖn nh thÕ nµo, hµm sau
®©y sÏ hiÓn thÞ çc thuéc tÝnh cña mét ®èi tîng th«ng qua tham sè
vÒ kiÓu ®èi tîng ®ã vµ tªn ®èi tîng.
function show_props (obj, obj_name)
{
var result=””
for (i in obj)
result=result+ obj_name + “.”+ i+ “=” + obj[i] +
“\n”
return result
}

JavaScript
85
Khi gäi hµm show_props(myCar,”myCar”) sÏ hiÖn lªn:

myCar.make = Ford
myCar.model = Mustang
myCar.year = 69;
T¹o çc ®èi tîng míi

C¶ JavaScript client-side vµ server-side ®Òu cã mét sè ®èi tîng ®îc
®Þnh nghÜa tríc. Tuy nhiªn, b¹n còng cã thÓ t¹o ra nh÷ng ®èi tîng cña
riªng b¹n. Trong JavaScript 1.2, nÕu b¹n chØ muèn t¹o ra mét ®èi tîng
duy nhÊt cña mét kiÓu ®èi tîng, b¹n cã thÓ t¹o nã bªng çch sö dông
khëi t¹o ®èi tîng. HoÆc nÕu b¹n muèn t¹o ra nhiÒu ç thÓ cña mét
kiÓu ®èi tîng, b¹n cã thÓ t¹o ra mét hµm x©y dùng tríc, sau ®ã t¹o ra
çc ®èi tîng cã kiÓu cña hµm ®ã bªng to¸n tö new
5.1.1.Sö dông khëi t¹o ®èi tîng

Trong nh÷ng phiªn b¶n tríc cña Navigator, b¹n chØ cã thÓ t¹o ra mét
®èi tîng bªng çch sö dông hµm x©y dùng chóng hoÆc sö dông mét
hµm ®îc cung cÊp bëi mét vµi ®èi tîng kh¸c ®Ó ®¹t ®îc môc ®Ých.
Tuy nhiªn, trong Navigator 4.0, b¹n cã thÓ t¹o ra mét ®èi tîng bªng çch
sö dông mét khëi t¹o ®èi tîng.B¹n sö dông çch nµy khi b¹n chØ muèn
t¹o ra mét ç thÓ ®¬n lÎ chø kh«ng ph¶i nhiÒu ç thÓ cña ®èi tîng.
Có ph¸p ®Ó t¹o ra mét ®èi tîng bªng çch khëi t¹o ®èi tîng (Object
Initializers):
objectName={property1: value1, property2: value2,
..., propertyN: valueN}
Trong ®ã objectName lµ tªn cña ®èi tîng míi, mçi propertyI lµ
mét x¸c minh (cã thÓ lµ mét tªn, mét sè hoÆc mét x©u ký tù) vµ mçi
valueI lµ mét biÓu thøc mµ gi¸ trÞ cña nã ®îc g¸n cho propertyI. Cã
thÓ lùa chän khëi t¹o bªng tªn ®èi tîng hoÆc chØ bªng çc khai b¸o.
NÕu nh b¹n kh«ng cÇn dïng ®Õn ®èi tîng ®ã trong mäi chç, b¹n kh«ng
cÇn ph¶i g¸n nã cho mét biÕn.
NÕu mét ®èi tîng ®îc t¹o bªng çch khëi t¹o ®èi tîng ë møc cao
nhÊt, mçi lÇn ®èi tîng ®ã xuÊt hiÖn trong çc biÓu thøc, JavaScript sÏ
®¸nh gi¸ l¹i nã mét lÇn. Ngoµi ra, nÕu sö dông viÖc khëi t¹o nµy trong
mét hµm th× mçi lÇn gäi hµm, ®èi tîng sÏ ®îc khëi t¹o mét lÇn
Gi¶ sö b¹n cã c©u lÖnh sau:
if (condition)
x={hi: ”there.”}
Trong trêng hîp nµy, JavaScript sÏ t¹o ra mét ®èi tîng vµ g¾n nã
vµo biÕn x nÕu biÓu thøc condition ®îc ®¸nh gi¸ lµ ®óng
Cßn vÝ dô sau t¹o ra mét ®èi tîng myHonda víi 3 thuéc tÝnh:
myHonda={color:”red”,wheels:4,engine:{cylinder:4,size:2.2}}

JavaScript
86
Chó ý rªng thuéc tÝnh engine còng lµ mét ®èi tîng víi çc thuéc
tÝnh cña nã
Trong Navigator 4.0, b¹n còng cã thÓ sö dông mét khëi t¹o ®Ó t¹o
mét m¶ng. Có ph¸p ®Ó t¹o m¶ng bªng çch nµy kh¸c víi t¹o ®èi tîng:
arrayName=[element0, element1,...,elementN]
Trong ®ã, arrayName lµ tªn cña m¶ng míi, vµ mçi elementI lµ
gi¸ trÞ cña phÇn tö ë vÞ trÝ ®ã cña m¶ng. Khi b¹n t¹o mét m¶ng bªng
çch sö dông ph¬ng ph¸p khëi t¹o, th× nã sÏ coi mçi gi¸ trÞ lµ mét phÇn
tö trªn m¶ng, vµ chiÒu dµi cña m¶ng chÝnh lµ sè çc tham sè.
B¹n kh«ng cÇn ph¶i chØ ®Þnh râ tÊt c¶ çc phÇn tö trªn m¶ng
míi. NÕu b¹n ®Æt hai dÊu phÈy vµo hµng, th× m¶ng sÏ ®îc t¹o víi
nh÷ng chèn trèng cho nh÷ng phÇn tö cha ®îc ®Þnh nghÜa nh vÝ dô d-
íi ®©y:
NÕu mét m¶ng ®îc t¹o bªng çch khëi t¹o(initializer) ë møc cao
nhÊt, mçi lÇn m¶ng ®ã xuÊt hiÖn trong çc biÓu thøc, JavaScript sÏ
®¸nh gi¸ l¹i nã mét lÇn. Ngoµi ra, nÕu sö dông viÖc khëi t¹o nµy trong
mét hµm th× mçi lÇn gäi hµm, m¶ng sÏ ®îc khëi t¹o mét lÇn
VÝ dô1: T¹o mét m¶ng coffees víi 3 phÇn tö vµ ®é dµi cña m¶ng
lµ 3:
coffees = [“French Roast”,”Columbian”,”Kona”]
VÝ dô 2: T¹o ra mét m¶ng víi 2 phÇn tö ®îc khëi ®Çu vµ mét
phÇn tö rçng:
fish = [“Lion”, ,” Surgeon”]
Víi biÓu thøc nµy, fish[0] lµ “Lion”, fish[2] lµ ” Surgeon”, vµ
fish[2] cha ®îc ®Þnh nghÜa
5.1.2.Sö dông mét hµm x©y dùng(Constructor Function)

B¹n cã thÓ t¹o ra ®èi tîng cña riªng m×nh víi hai bíc sau:
1. §Þnh nghÜa kiÓu cña ®èi tîng bªng çch viÕt mét hµm x©y
dùng.
2. T¹o ra mét ç thÓ cña ®èi tîng ®ã bªng to¸n tö new
§Ó ®Þnh nghÜa mét kiÓu ®èi tîng, ta ph¶i t¹o ra mét hµm ®Ó
chØ ®Þnh râ tªn, çc thuéc tÝnh vµ çc çch thøc cña kiÓu ®èi tîng
®ã. VÝ dô gi¶ sö b¹n muèn t¹o mét kiÓu ®èi tîng « t« víi tªn lµ car, cã
çc thuéc tÝnh make, model, year vµ color, ®Ó thùc hiÖn viÖc nµy
cã thÓ viÕt mét hµm nh sau:
function car(make, model, year ){
this.make = make
this.model = model
this.year = year
}

JavaScript
87
Chó ý viÖc sö dông to¸n tö this ®Ó g¸n gi¸ trÞ cho çc thuéc
tÝnh cña ®èi tîng ph¶i th«ng qua çc tham sè cña hµm.
VÝ dô, b¹n cã thÓ t¹o mét ®èi tîng míi kiÓu car nh sau:
mycar = new car(“Eagle”,”Talon TSi”,1993)
C©u lÖnh nµy sÏ t¹o ra ®èi tîng mycar vµ liªn kÕt çc gi¸ trÞ ®îc
®a vµo víi çc thuéc tÝnh. Khi ®ã gi¸ trÞ cña mycar.make lµ “Eagle”,
gi¸ trÞ cña mycar.model lµ “Talon TSi”, vµ mycar.year lµ mét sè
nguyªn 1993....Cø nh vËy b¹n cã thÓ t¹o ra nhiÒu ®èi tîng kiÓu car.
Mét ®èi tîng còng cã thÓ cã nh÷ng thuéc tÝnh mµ b¶n th©n nã
còng lµ mét ®èi tîng. VÝ dô b¹n ®Þnh nghÜa thªm mét ®èi tîng kh¸c lµ
person nh sau:
function person(name, age, sex){
this.name=name
this.age=age
this.sex=sex
}
Vµ sau ®ã ta t¹o ra hai ngêi míi:
rank = new person(“Rank McKinnon”,33,”M”)
ken = new person(“Ken John”,39,”M”)
B©y giê b¹n ®Þnh nghÜa l¹i hµm x©y dùng car nh sau:
function car(make, model, year,owner ){
this.make = make
this.model = model
this.year = year
this.owner = owner
}
Nh vËy b¹n cã thÓ t¹o ®èi tîng kiÓu car míi:
car1 = new car(“Eagle”,”Talon TSi”,1993,rank)
car2 = new car(“Nissan”,”300ZX”,1992,ken)
Nh vËy, thay v× ph¶i qua mét x©u ký tù hay mét gi¸ trÞ sè khi t¹o ®èi
tîng, ta chØ cÇn ®a hai ®èi tîng ®· ®îc t¹o ë c©u lÖnh trªn vµo dßng
tham sè cña ®èi tîng míi t¹o. Ta còng cã thÓ lÊy ®îc thuéc tÝnh cña
®èi tîng owner bªng c©u lªnh sau:
car2.owner.name
Chó ý rªng b¹n còng cã thÓ t¹o ra mét thuéc tÝnh míi cho ®èi tîng tríc
khi ®Þnh nghÜa nã, vÝ dô:
car1.color=”black”

JavaScript
88
Nh vËy, thuéc tÝnh color cña ®èi tîng car1 ®îc g¸n lµ “black”. Tuy
nhiªn, nã sÏ kh«ng g©y t¸c ®éng tíi bÊt kú mét ®èi tîng kiÓu car nµo
kh¸c. NÕu muèn thªm thuéc tÝnh cho tÊt c¶ çc ®èi tîng th× ph¶i
®Þnh nghÜa l¹i hµm x©y dùng ®èi tîng.
5.1.3.LËp môc lôc cho çc thuéc tÝnh cña ®èi tîng
Trong Navigator 2.0, b¹n cã thÓ gäi thuéc tÝnh cña mét ®èi tîng
bªng tªn thuéc tÝnh hoÆc bªng sè thø tù cña nã. Tuy nhiªn tõ Navigator
3.0 trë ®i, nÕu ban ®Çu b¹n ®Þnh nghÜa mét thuéc tÝnh bªng tªn cña
nã, b¹n sÏ lu«n lu«n ph¶i gäi nã bªng tªn, vµ nÕu b¹n ®Þnh nghÜa mét
thuéc tÝnh bªng chØ sè th× b¹n còng lu«n lu«n ph¶i gäi tíi nã bªng chØ
sè.
§iÒu nµy øng dông khi b¹n t¹o mét ®èi tîng víi nh÷ng thuéc tÝnh
cña chóng bªng hµm x©y dùng (nh vÝ dô vÒ kiÓu ®èi tîng car ë phÇn
tríc) vµ khi b¹n ®Þnh nghÜa nh÷ng thuéc tÝnh cña riªng mét ®èi tîng
(nh mycar.color=”red”). V× vËy nÕu b¹n ®Þnh nghÜa çc thuéc tÝnh
cña ®èi tîng ngay tõ ®Çu bªng chØ sè nh mycar[5]=”25 mpg”, b¹n cã
thÓ lÇn lît gäi tíi çc thuéc tÝnh kh¸c nh mycar[5].
Tuy nhiªn ®iÒu nµy lµ kh«ng ®óng ®èi víi nh÷ng ®èi tîng t¬ng
øng cña HTML nh m¶ng form. B¹n cã thÓ gäi tíi çc ®èi tîng trong m¶ng
bëi sè thø tù hoÆc tªn cña chóng. VÝ dô thÎ <FORM> thø hai trong mét
document cã thuéc tÝnh NAME lµ “myform” th× b¹n cã thÓ gäi tíi form
®ã bªng document.form[1] hoÆc document.form[“myForm”] hoÆc
document.myForm
5.1.4.§Þnh nghÜa thªm çc thuéc tÝnh cho mét kiÓu ®èi tîng
B¹n cã thÓ thªm thuéc tÝnh cho mét kiÓu ®èi tîng ®· ®îc ®Þnh
nghÜa tríc bªng çch sö dông thuéc tÝnh property. Thuéc tÝnh ®îc
®Þnh nghÜa nµy kh«ng chØ cã t¸c dông ®èi víi mét ®èi tîng mµ cã t¸c
dông ®èi víi tÊt c¶ çc ®èi tîng kh¸c cïng kiÓu.VÝ dô sau thùc hiÖn
thªm thuéc tÝnh color cho tÊt c¶ çc ®èi tîng kiÓu car, sau ®ã g¾n
mét gi¸ trÞ mµu cho thuéc tÝnh color cña ®èi tîng car1:
car.prototype.color=null
car1.color=”red”
5.1.5.§Þnh nghÜa çc çch thøc

Mét çch thøc lµ mét hµm ®îc liªn kÕt víi mét ®èi tîng. B¹n ®Þnh
nghÜa mét çch thøc còng cã nghÜa lµ b¹n ®Þnh nghÜa mét hµm
chuÈn. B¹n cã thÓ sö dông có ph¸p sau ®Ó g¾n mét hµm cho mét ®èi
tîng ®ang tån t¹i:
object.methodname = function_name
Trong ®ã object lµ ®èi tîng ®ang tån t¹i, methodname lµ tªn çch
thøc vµ function_name lµ tªn hµm
B¹n cã thÓ gäi çch thøc nµy tõ ®èi tîng nh sau:

JavaScript
89
object.methodname(<tham sè>)
B¹n cã thÓ ®Þnh nghÜa çch thøc cho mét kiÓu ®èi tîng bªng
çch ®a çch thøc ®ã vµo trong hµm x©y dùng ®èi tîng. VÝ dô b¹n cã
thÓ ®Þnh nghÜa mét hµm cã thÓ ®Þnh d¹ng vµ hiÓn thÞ çc thuéc
tÝnh cña çc ®èi tîng kiÓu car ®· x©y dùng ë phÇn tríc:
function displayCar () {
var result = “Abeautiful”+this.year+ “ ”+ this.make + “ ”+
this.model
document.write(result)
}
B¹n cã thÓ thªm çch thøc nµy vµo cho ®èi tîng car bªng çch
thªm dßng lÖnh sau vµo hµm ®Þnh nghÜa ®èi tîng
this.displayCar= displayCar;
Nh vËy cã thÓ ®Þnh nghÜa l¹i ®èi tîng 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 ®ã, b¹n cã thÓ gäi çch thøc displayCar ®èi víi mçi ®èi tîng:
car1.displayCar()
car2.displayCar()
5.1.6.Sö dông cho çc tham chiÕu ®èi tîng (Object References)
JavaScript cã mét tõ kho¸ ®Æc biÖt lµ this mµ b¹n cã thÓ sö
dông nã cïng víi mét çch thøc ®Ó gäi tíi ®èi tîng hiÖn thêi. VÝ dô, gi¶
sö b¹n cã mét hµm validate dïng ®Ó x¸c nhËn gi¸ trÞ thuéc tÝnh cña
mét ®èi tîng nªm trong mét kho¶ng nµo ®ã:
function validate(obj, lowval, hival){
if ( (obj.value<lowdate)||(obj.value>hival) )
alert(“Invalid value!”)
}
Sau ®ã b¹n cã thÓ gäi hµm validate tõ mçi thÎ sù kiÖn
onChange:
<INPUT TYPE=”TEXT” NAME=”AGE” SIZE=3
onChange=”validate(this,18,99)” >

JavaScript
90
Khi liªn kÕt víi mét thuéc tÝnh form, tõ kho¸ this cã thÓ gäi tíi
form cha cña ®èi tîng hiÖn thêi. Trong vÝ dô sau, myForm cã chøa ®èi
tîng Text vµ mét nót bÊm. Khi ngêi sö dông kÝch vµo nót bÊm, trêng
text sÏ hiÓn thÞ tªn form. ThÎ sù kiÖn onClick cña nót bÊm sö dông
this.form ®Ó gäi tíi 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 tîng

Trong JavaScript cho Navigator 2.0, b¹n kh«ng thÓ xo¸ çc ®èi t-
îng-chóng vÉn tån t¹i trong khi b¹n ®· rêi khái trang ®ã. Trong khi
JavaScript cho Navigator 3.0 cho phÐp b¹n cã thÓ xo¸ mét ®èi tîng
bªng çch ®Æt cho nã trá tíi gi¸ trÞ Null (nÕu nh ®ã lµ lÇn cuèi cïng gäi
tíi ®èi tîng). JavaScript sÏ ®ãng ®èi tîng ®ã ngay lËp tøc th«ng qua
biÓu thøc g¸n.

JavaScript
91
6.B¶ng tæng kÕt çc tõ kho¸

Sau ®©y lµ çc tõ ®ùoc ®Þnh nghÜa lµ mét phÇn trong ng«n ng÷
JavaScript vµ kh«ng ®îc sö dông lµ tªn biÕn:
abstract eval int static
boolean extends interface super
break false long switch
byte final native synchrinize
d
case finally new this
catch float null throw
char for package throws
class function parseFloat transient
const goto parseInt true
continue if private try
default implement protected var
s
do import public void
double in return while
else instanceof short with

JavaScript
92
7.Tæng kÕt
Nh vËy, tµi liÖu kh«ng nh÷ng ®· giíi thiªu s¬ qua vÒ JavaScript, mµ nã
cßn lµ s¸ch tham kh¶o hÕt søc h÷u Ých ®Ó ph¸t triÓn øng dông cña
b¹n.
B¹n cã thÓ tham kh¶o toµn diÖn JavaScript trong quyÓn Teach
Yourself JavaScript in 14 Days, hoÆc JavaScript Guide
Do JavaScript lµ ng«n ng÷ cßn míi vµ cã sù thay ®æi nhanh chãng, b¹n
nªn ®Õn víi trang Web cña h·ng Netscape ( http://www.netscape.com )
®Ó cã çc th«ng tin míi nhÊt vÒ ng«n ng÷ nµy.

Giao Trinh JAVASCRIPT

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Giao Trinh JAVASCRIPT

Uploaded by

Copyright:

Available Formats

JavaScript

Gi¸o tr×nh JavaScript

2. X©y dùng c¸c biÓu thøc trong JavaScript..............................................17

®Þnh nghÜa vµ ph©n lo¹I biÓu thøc................................................................ ..........17

C©u lÖnh ®iÒu kiÖn........................................................................................ .........22

Khoa Toan tin, §¹i häc Quèc gia Hµ Néi

3.1.5. for...in.............................................................................................. .........26

4. C¸c ®èi tîng trong JavaScript................................................................47

§èi tîng navigator...................................................................................................... ..49

Khoa Toan tin, §¹i häc Quèc gia Hµ Néi

§èi tîng Math......................................................................................................... ......61

5. M« h×nh ®èi tîng (Object Model).........................................................84

§èi tîng vµ thuéc tÝnh......................................................................................... ........84

6. B¶ng tæng kÕt c¸c tõ kho¸...................................................................91

Khoa Toan tin, §¹i häc Quèc gia Hµ Néi

ch¬ng 1 Lêi nãi ®Çu

Khoa Toan tin, §¹i häc Quèc gia Hµ Néi

Ch¬ng 2 NhËp m«n JavaScript

2.1.Nhóng JavaScript vµo file HTML

Khoa Toan tin, §¹i häc Quèc gia Hµ Néi

Khoa Toan tin, §¹i häc Quèc gia Hµ Néi

document.write(" <HR ALIGN='LEFT' WIDTH="+widthPct+"%>")

2.3. ThÎ <NOScript> vµ </NOSCRIPT>

H×nh 2.3: Minh ho¹ thÎ NOSCRIPT

Khoa Toan tin, §¹i häc Quèc gia Hµ Néi

2.3. HiÓn thÞ mét dßng text

Khoa Toan tin, §¹i häc Quèc gia Hµ Néi

VÝ dô: Sù kh¸c nhau cña write() vµ writeln():

Khi duyÖt sÏ ®îc kÕt qu¶:

Khoa Toan tin, §¹i häc Quèc gia Hµ Néi

H×nh 2.5: Sù kh¸c nhau cña write() vµ writeln()

2.4. Giao tiÕp víi ngêi sö dông

Khoa Toan tin, §¹i häc Quèc gia Hµ Néi

Khi duyÖt cã kÕt qu¶:

H×nh2.1: HiÓn thÞ cöa sæ nhËp tªn

Khoa Toan tin, §¹i häc Quèc gia Hµ Néi

H×nh 2.2: HiÓn thÞ lêi chµo ng­êi nhËp

2.5. §iÓm l¹i c¸c lÖnh vµ më réng

LÖnh/Më réng KiÓu M« t¶

Khoa Toan tin, §¹i häc Quèc gia Hµ Néi

document.writel C¸ch thøc T¬ng tù c¸ch thøc document.write() nhng

Khoa Toan tin, §¹i häc Quèc gia Hµ Néi

Ch¬ng 3 BiÕn trong JavaScript

3.1. BiÕn vµ ph©n lo¹I biÕn

3.2. BiÓu diÔn tõ tè trong JavaScript

Khoa Toan tin, §¹i häc Quèc gia Hµ Néi

1.1.1.KIÓu nguyªn (Interger)

1.1.2.KiÓu dÊu phÈy ®éng (Floating Point)

Khoa Toan tin, §¹i häc Quèc gia Hµ Néi

• DÊu chÊm thËp ph©n (.).

1.1.3.KiÓu logic (Boolean)

1.1.4.KiÓu chuçi (String)

Khoa Toan tin, §¹i häc Quèc gia Hµ Néi

2.X©y dùng c¸c biÓu thøc trong JavaScript

®Þnh nghÜa vµ ph©n lo¹I biÓu thøc

C¸c to¸n tö (operator)

KiÓu g¸n th«ng thêng KiÓu g¸n rót gän

Khoa Toan tin, §¹i häc Quèc gia Hµ Néi

Khoa Toan tin, §¹i häc Quèc gia Hµ Néi

! expr Lµ to¸n tö logic NOT phñ ®Þnh gi¸ trÞ cña

Khoa Toan tin, §¹i häc Quèc gia Hµ Néi

Cã mét sè to¸n tö dÞch chuyÓn bitwise rót gän:

Khoa Toan tin, §¹i häc Quèc gia Hµ Néi

Khoa Toan tin, §¹i häc Quèc gia Hµ Néi

H×nh 2.2: HiÓn thÞ lêi chµo ngêi nhËp