SlideShare ist ein Scribd-Unternehmen logo
1 von 72
Downloaden Sie, um offline zu lesen
JavaScript 1
Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi
ch−¬ng 1 Lêi nãi ®Çu
Víi HTML and Microsoft FrontPage b¹n ®· biÕt c¸ch t¹o ra trang Web - tuy nhiªn chØ míi ë møc
biÓu diÔn th«ng tin chø ch−a ph¶i lµ c¸c trang Web ®éng cã kh¶ n¨ng ®¸p øng c¸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, nh−ng 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¸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¸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 c¸ch sö dông JavaScript trªn c¸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¸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¸c líp hay tÝnh thõa kÕ.
JavaScript cã thÓ ®¸p øng c¸c sù kiÖn nh− t¶i hay lo¹i bá c¸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¸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 c©u lÖnh JavaScript qua m¹ng tíi client. Client sÏ ®äc trang ®ã
tõ ®Çu ®Õn cuèi, hiÓn thÞ c¸c kÕt qu¶ cña HTML vµ xö lý c¸c c©u lÖnh JavaScript khi nµo chóng xuÊt
hiÖn.
C¸c c©u lÖnh JavaScript ®−îc nhóng trong mét trang HTML cã thÓ tr¶ lêi cho c¸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¸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¸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¸c script
vµo file HTML cña m×nh.
JavaScript 2
Khoa C«ng nghÖ, §¹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
B¹n cã thÓ nhóng JavaScript vµo mét file HTML theo mét trong c¸c c¸ch sau ®©y:
• Sö dông c¸c c©u lÖnh vµ c¸c hµm trong cÆp thÎ <SCRIPT>
• Sö dông c¸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 c¸ch sö dông cÆp thÎ
<SCRIPT> vµ <SCRIPT>. C¸c thÎ <SCRIPT> cã thÓ xuÊt hiÖn
trong phÇn <HEAD> hay <BODY> cña file HTML. NÕu ®Æt trong
phÇn <HEAD>, nã sÏ ®−îc t¶i vµ s½n sµng tr−íc khi phÇn cßn l¹i cña
v¨n b¶n ®−îc t¶i.
Thuéc tÝnh duy nhÊt ®−îc ®Þnh nghÜa hiÖn thêi cho thÎ
<SCRIPT> lµ “LANGUAGE=“ dïng ®Ó x¸c ®Þnh ng«n ng÷ script
®−îc sö dông. Cã hai gi¸ 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¸c ghi chó gi÷a HTML vµ JavaScript lµ cho phÐp b¹n Èn c¸c m·
JavaScript trong c¸c ghi chó cña file HTML, ®Ó c¸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”>
<!-- From here the JavaScript code hidden
// INSERT ALL JavaScript HERE
// This is where the hidden ends -->
</SCRIPT>
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¸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.
Chó ý:
Ghi chó kh«ng ®−îc
®Æt trong cÆp thÎ
<- vµ -> nh− ghi
chó trong file
HTML. Có ph¸p cña
JavaScript t−¬ng
tù có ph¸p cña C
nªn cã thÓ sö dông
// hay /* ... */.
JavaScript 3
Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi
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¸c hµm dïng chung cho nhiÒu trang kh¸c nhau. C¸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¸c liªn kÕt hoÆc c¸c ®−êng dÉn tuyÖt ®èi, vÝ
dô:
<SCRIPT SRC=" http://cse.com.vn ">
C¸c file JavaScript bªn ngoµi kh«ng ®−îc chøa bÊt kú thÎ
HTML nµo. Chóng chØ ®−îc chøa c¸c c©u lÖnh
JavaScript vµ ®Þnh nghÜa hµm.
Tªn file cña c¸c hµm JavaScript bªn ngoµi cÇn cã ®u«i .js, vµ
server sÏ ph¶i ¸nh x¹ ®u«i .js ®ã tíi kiÓu MIME
application/x-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 c¸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){
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 c¸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!
Chó ý
Khi b¹n muèn chØ ra
mét x©u trÝch dÉn trong
mét x©u kh¸c cÇn sö
dông dÊu nh¸y ®¬n ( ' )
®Ó ph©n ®Þnh x©u ®ã.
§iÒu nµy cho phÐp
script nhËn ra x©u ký
tù ®ã.
JavaScript 4
Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Né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
2.3. HiÓn thÞ mét dßng text
Trong hÇu hÕt c¸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¸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¸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 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 c¸ch thøc ®Ó xuÊt mét dßng text ra mµn
h×nh client: write() vµ writeln(). C¸ch gäi mét c¸ch thøc cña mét ®èi t−îng nh− sau:
object_name.property_name
D÷ liÖu mµ c¸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');
JavaScript 5
Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi
C¸ch thøc write() xuÊt ra mµn h×nh x©u Text nh−ng kh«ng xuèng dßng, cßn c¸ch thøc writeln() sau khi viÕt
xong dßng Text tù ®éng xuèng dßng. Hai c¸ch thøc nµy ®Òu cho phÐp xuÊt ra thÎ HTML.
VÝ dô: C¸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">
<!-- HIDE FROM OTHER BROWSERS
document.write("This text is bold.</B>");
// STOP HIDING FROM OTHER BROWSERS -->
</SCRIPT>
</BODY>
</HTML>
VÝ dô: Sù kh¸c nhau cña write() vµ writeln():
<PRE>
<SCRIPT LANGUAGE="JavaScript">
<!-- HIDE FROM OTHER BROWSERS
document.writeln("One,");
document.writeln("Two,");
document.write("Three ");
document.write("...");
// STOP HIDING FROM OTHER BROWSERS -->
</SCRIPT>
JavaScript 6
Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi
</PRE>
Khi duyÖt sÏ ®−îc kÕt qu¶:
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.
C¸ch ®¬n gi¶n ®Ó lµm viÖc ®ã lµ sö dông c¸ch thøc alert(). §Ó sö dông ®−îc 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, c¸ch thøc alert() ®−îc sö dông trong c¸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ô ch−a s½n sµng ®Ó truy nhËp d÷ liÖu
Tuy nhiªn c¸ch thøc alert() míi chØ cho phÐp th«ng b¸o víi ng−êi sö dông chø ch−a thùc sù giao
tiÕp víi ng−êi sö dông. JavaScript cung cÊp mét c¸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
JavaScript 7
Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi
b¹n ®−a vµo, nh−ng ngoµi ra nã cßn cung cÊp mét tr−êng ®Ó nhËp d÷ liÖu 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 l−u 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¶:
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¸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.
H×nh2.1: HiÓn thÞ cöa sæ nhËp tªn
JavaScript 8
Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi
B©y giê b¹n ®· cã ý t−ëng vÒ c¸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¸c lÖnh vµ më réng
LÖnh/Më réng KiÓu M« t¶
SCRIPT thÎ HTML Hép chøa c¸c lÖnh JavaScript
SRC Thuéc tÝnh
cña thÎ
SCRIPT
Gi÷ ®Þa chØ cña file JavaScript bªn ngoµi. File nµy
ph¶i cã phÇn ®u«i .js
LANGUAGE thuéc tÝnh
cña thÎ
SCRIPT
§Þnh râ ng«n ng÷ script ®−îc sö dông (JavaScript
hoÆc VBScript)
// Ghi chó trong
JavaScript
§¸nh dÊu ghi chó mét dßng trong ®o¹n script
/*...*/ Ghi chó trong
JavaScript
§¸nh dÊu ghi chó mét khèi trong ®o¹n script
document.write() c¸ch thøc
JavaScript
XuÊt ra mét x©u trªn cöa sæ hiÖn thêi mét c¸ch
tuÇn tù theo file HTML cã ®o¹n script ®ã
document.writeln() C¸ch thøc
JavaScript
T−¬ng tù c¸ch thøc document.write() nh−ng viÕt
xong tù xuèng dßng.
alert() C¸ch thøc
cña
JavaScript
HiÓn thÞ mét dßng th«ng b¸o trªn hép héi tho¹i
promt() C¸ch thøc HiÓn thÞ mét dßng th«ng b¸o trong hép héi tho¹i
H×nh 2.2: HiÓn thÞ lêi chµo ng−êi nhËp
JavaScript 9
Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi
JavaScript ®ång thêi cung cÊp mét tr−êng nhËp d÷ liÖu ®Ó
ng−êi sö dông nhËp vµo.
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¸c ch÷ sè kh«ng ®−îc sö dông
®Ó më ®Çu tªn mét biÕn nh−ng 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¸c gi¸ trÞ trong ch−¬ng tr×nh kh«ng thay ®æi. Sau ®©y lµ c¸c
vÝ dô vÒ tõ tè:
8
“The dog ate my shoe”
true
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>
<BODY>
</BODY>
</HTML>
C¸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:
Chó ý
Kh¸c víi C,
trong JavaScript
kh«ng cã kiÓu
h»ng sè CONST ®Ó
biÓu diÔn mét
gi¸ trÞ kh«ng
®æi nµo ®Êy
JavaScript 10
Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi
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 c¸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:
• PhÇn nguyªn thËp ph©n.
• 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
H×nh 3.1: KÕt qu¶ cña xö lý d÷ liÖu
JavaScript 11
Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi
-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 12
Khoa C«ng nghÖ, §¹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
TËp hîp c¸c literal, biÕn vµ c¸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¸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¸c to¸n tö trong JavaScript cã thÓ ®−îc nhãm thµnh c¸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
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
JavaScript 13
Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Né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¸c to¸n tö céng (+), trõ (-), nh©n (*), chia (/) th«ng th−êng, JavaScript cßn hç trî c¸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)
2.1.4. C
h
u
ç
i
Khi
®−îc sö
dông
víi
chuçi, to¸n tö + ®−îc coi lµ kÕt hîp hai chuçi,
vÝ dô:
"abc" + "xyz" ®−îc "abcxyz"
2.1.5. Logic
JavaScript hç trî c¸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.
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¸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.
JavaScript 14
Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi
2.1.6. Bitwise
Víi c¸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¸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¸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¸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¸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 c¸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 th−êng KiÓu bitwise 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
x = x | y x | = y
Bµi tËp
2.1.7. C©u hái
H·y ®¸nh gi¸ c¸c biÓu thøc sau:
1. a. 7 + 5
b. "7" + "5"
c. 7 == 7
d. 7 >= 5
e. 7 <= 7
JavaScript 15
Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi
2. f. (7 < 5) ? 7 : 5
g. (7 >= 5) && (5 > 5)
h. (7 >= 5) || (5 > 5)
2.1.8. Tr¶ lêi
C¸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
h. true
JavaScript 16
Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi
3. C¸c lÖnh
Cã thÓ chia c¸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 c©u lÖnh víi ®iÒu kiÖn ®óng
}
else
{
//C¸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.”);
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
Chó ý
Ký tù { vµ } ®−îc sö dông ®Ó t¸ch c¸c khèi m·.
JavaScript 17
Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi
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¸c lÖnh ®−îc thùc hiÖn trong khi lÆp
}
VÝ dô:
<HTML> <HEAD>
<TITLE>For loop Example </TITLE>
<SCRIPT LANGUAGE= "JavaScript">
for (x=1; x<=10 ; x++) {
y=x*25;
document.write("x ="+ x +";y= "+ y + "<BR>");
}
</SCRIPT>
</HEAD>
<BODY></BODY>
</HTML>
VÝ dô nµy l−u vµo file for_loop.Html.
H×nh 5.1: KÕt qu¶ cña lÖnh for...loop
JavaScript 18
Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi
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 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.
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 nh−ng 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;
JavaScript 19
Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi
while (x<=10)
{
document.write(“Gi¸ trÞ cña x lµ:”+ x+”<BR>”);
if (x=5)
{
x=8;
continue;
}
x++;
}
C¸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¸c ®èi
t−îng.
3.1.5. for...in
C©u lÖnh nµy ®−îc sö dông ®Ó lÆp tÊt c¶ 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¸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 c©u lÖnh
}
VÝ dô
VÝ dô sau sÏ lÊy ra tÊt c¶ 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>
<SCRIPT LANGUAGE= "JavaScript">
document.write("The properties of the Window object are: <BR>");
for (var x in window)
document.write(" "+ x + ", ");
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
JavaScript 20
Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi
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¸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>
<SCRIPT LANGUAGE= "JavaScript">
function person(first_name, last_name, age, sex){
this.first_name=first_name;
this.last_name=last_name;
this.age=age;
this.sex=sex;
}
person1= new person("Thuy", "Dau Bich", "23", "Female");
person2= new person("Chung", "Nguyen Bao", "24", "Male");
person3= new person("Binh", "Nguyen Nhat", "24", "Male");
person4= new person("Hoµn", "§ç V¨n", "24", "Male");
H×nh 5.2: KÕt qu¶ cña lÖnh for...in
JavaScript 21
Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi
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>
</HTML>
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.
H×nh 5.3: KÕt qu¶ cña vÝ dô lÖnh New
JavaScript 22
Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi
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¸c lÖnh, b¹n cã thÓ sö dông
c¸c thuéc tÝnh mµ kh«ng ®Ò cËp ®Õn ®èi t−îng.
Có ph¸p
with (object)
{
// statement
}
VÝ dô:
VÝ dô sau chØ ra c¸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>
<SCRIPT LANGUAGE= "JavaScript">
with (document){
write(“This is an exemple of the things that can be done
<BR>”);
write(“With the <B>with<B> statment. <P>”);
write(“This can really save some typing”);
}
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
H×nh 5.4: KÕt qu¶ cña vÝ dô lÖnh with
JavaScript 23
Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi
C¸c hµm (Functions)
JavaScript còg cho phÐp sö dông c¸c hµm. MÆc dï kh«ng nhÊt thiÕt ph¶i cã, song c¸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¹ c¸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>
<SCRIPT LANGUAGE= "JavaScript">
function person(first_name, last_name, age, sex)
{
this.first_name=first_name;
this.last_name=last_name;
this.age=age;
this.sex=sex;
this.printStats=printStats;
}
function printStats() {
with (document) {
write (" Name :" + this.last_name + " " + this.first_name +
"<BR>" );
write("Age :"+this.age+"<BR>");
write("Sex :"+this.sex+"<BR>");
}
}
person1= new person("Thuy", "Dau Bich", "23", "Female");
person2= new person("Chung", "Nguyen Bao", "24", "Male");
person3= new person("Binh", "Nguyen Nhat", "24", "Male");
person4= new person("Hoan", "Do Van", "23", "Male");
person1.printStats();
person2.printStats();
person3.printStats();
person4.printStats();
</SCRIPT>
JavaScript 24
Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi
</HEAD>
<BODY> </BODY>
</HTML>
1.1.1.1.1. H×nh 8: VÝ dô vÒ hµm
JavaScript 25
Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi
C¸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
• parseFloat
3.1.9. eval
Hµm nµy ®−îc sö dông ®Ó ®¸nh gi¸ c¸c biÓu thøc hay lÖnh. BiÓu thøc, lÖnh hay c¸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¸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>
<SCRIPT LANGUAGE= "JavaScript">
var string=”10+ Math.sqrt(64)”;
document.write(string+ “=”+ eval(string));
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
H×nh 5.5: KÕt qu¶ viÖc sö dông hµm
H×nh 5.6 VÝ dô hµm Eval
JavaScript 26
Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi
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¸c sè nguyªn sang c¬ sè 10 vµ ®¶m b¶o r»ng c¸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>
<SCRIPT LANGUAGE= "JavaScript">
document.write("Converting 0xC hex to base-10: " +
parseInt(0xC,10) + "<BR>");
document.write("Converting 1100 binary to base-10: " +
parseInt(1100,2) + "<BR>");
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
H×nh 5.7: VÝ dô parInt
JavaScript 27
Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi
3.1.11. parseFloat
Hµm nµy gièng hµm parseInt nh−ng 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¹ c¸ch thøc xö lý cña parseFloat víi c¸c kiÓu chuçi kh¸c nhau. H×nh 5.8 minh häa
kÕt qu¶
<HTML> <HEAD>
<TITLE> perseFload Exemple </TITLE>
<SCRIPT LANGUAGE= "JavaScript">
document.write("This script will show how diffrent strings are ");
document.write("Converted using parseFloat<BR>");
document.write("137= " + parseFloat("137") + "<BR>");
document.write("137abc= " + parseFloat("137abc") + "<BR>");
document.write("abc137= " + parseFloat("abc137") + "<BR>");
document.write("1abc37= " + parseFloat("1abc37") + "<BR>");
</SCRIPT>
</HEAD>
<BODY> </BODY>
</HTML>
H×nh 5.8 : KÕt qu¶ cña vÝ dô parseFloat
JavaScript 28
Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi
M¶ng (Array)
MÆc dï JavaScript kh«ng hç trî cÊu tróc d÷ liÖu m¶ng nh−ng Netscape t¹o ra ph−¬ng thøc cho phÐp
b¹n tù t¹o ra c¸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¸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:
myArray = new InitArray (10)
Nã t¹o ra c¸c thµnh phÇn tõ myArray[1] ®Õn myArray[10] víi gi¸ trÞ lµ 0. Gi¸ trÞ c¸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>
<SCRIPT LANGUAGE= "JavaScript">
function InitArray(numElements) {
this.length = numElements;
for (var x=1; x<=numElements; x++){
this[x]=0
}
return this;
}
myArray = new InitArray(10);
myArray[1] = "NghÖ An";
myArray[2] = "Hµ Néi";
document.write(myArray[1] + "<BR>");
document.write(myArray[2] + "<BR>");
</SCRIPT>
</HEAD>
<BODY> </BODY>
</HTML>
JavaScript 29
Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi
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¸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¸c ch−¬ng tri×nh xö lý sù kiÖn) gióp cho ch−¬ng tr×nh cã thÓ ph¶n øng mét c¸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¸c lÖnh cña JavaScript c¸ch nhau
b»ng dÊu chÊm phÈy. Tuy nhiªn cho môc ®Ých viÕt thµnh c¸c module nªn viÕt d−íi d¹ng c¸c hµm.
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¸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.
JavaScript 30
Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Né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¸c ch−¬ng tr×nh xö lý sù kiÖn cã s½n cña mét sè ®èi t−îng. C¸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 area onMouseOver, onMouseOut
Reset button onClick
Submit button onClick
Document onLoad, onUnload, onError
Window onLoad, onUnload, onBlur, onFocus
Framesets onBlur, onFocus
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>
<SCRIPT LANGUAGE= "JavaScript">
function CheckAge(form) {
if ( (form.AGE.value<0)||(form.AGE.value>120) )
{
JavaScript 31
Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi
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>
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>
JavaScript 32
Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi
</HTML>
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 c¸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 l−u 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 c©u sau ®©y sö dông sai thÎ sù kiÖn
a. <BODY onClick="doSomething();">
b. <INPUT TYPE=text onFocus="doSomething();">
JavaScript 33
Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi
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>
<SCRIPT LANGUAGE="JavaScript">
<!-- HIDE FROM OTHER BROWSERS
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.");
}
// STOP HIDING FROM OTHER BROWSERS -->
</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¸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.
for (num = 0; num <= 10; num ++) {
if (num == 8)
break;
}
3.1.13. Tr¶ lêi
1. Sö dông c¸ch thøc confirm() vµ cÊu tróc if...then:
JavaScript 34
Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi
<HTML>
<HEAD>
<TITLE>Execise 5.1</TITLE>
<HEAD>
<BODY>
<P>
<SCRIPT LANGUAGE="JavaScript">
var conf=confirm("Click OK to see a wellcome message!")
if (conf){
document.write("<IMG SRC='wellcome.jpg'>");
document.write("<BR>Wellcome you come to CSE's class");
}
else
document.write("What a pity! You have just click Cancel
button");
</SCRIPT>
</P>
</BODY>
</HTML>
2. Thùc hiÖn hái ng−êi sö dông:
<HTML>
<HEAD>
<TITLE>Exercise 3.3</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- HIDE FROM OTHER BROWSERS
// DEFINE VARIABLES FOR REST OF SCRIPT
var question="What is 10+10?";
var answer=20;
var correct='CORRECT';
var incorrect='INCORRECT';
// 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");
JavaScript 35
Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi
}
}
// chECK THE ANSWER
var output = (response == answer) ? correct : incorrect;
// STOP HIDING FROM OTHER BROWSERS -->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!-- HIDE FROM OTHER BROWSERS
// OUTPUT RESULT
document.write(output);
// STOP HIDING FROM OTHER BROWSERS -->
</SCRIPT>
</BODY>
</HTML>
3. C¸c c©u sai: a, c, e. C¸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, l−u
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) {
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 36
Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi
4. C¸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, nh−ng kh«ng h−íng ®èi t−îng bëi
v× nã kh«ng hç trî c¸c líp còng nh− tÝnh thõa kÕ. PhÇn nµy nãi vÒ c¸c ®èi t−îng trong JavaScript vµ
h×nh 6.1 chØ ra s¬ ®å ph©n cÊp c¸c ®èi t−îng.
Trong s¬ ®å ph©n cÊp c¸c ®èi t−îng cña JavaScript, c¸c ®èi t−îng con thùc sù lµ c¸c thuéc tÝnh cña
c¸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¸c ®èi t−îng cã thuéc tÝnh (properties), ph−¬ng thøc (methods), vµ c¸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¸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¸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 c¸ch cã cÊp bËc vµ ph¶n ¸nh chÝnh cÊu tróc cña file HTML ®ã.
S¬ ®å sau sÏ minh ho¹ sù ph©n cÊp cña c¸c ®èi t−îng nµy
Window Texturea
Text
FileUpload
Password
Hidden
Submit
Reset
Radio
Checkbox
Button
Select
Plugin
Mime Type
Frame
document
Location
History
Layer
Link
Image
Area
Anchor
Applet
Plugin
Form
navigator
Option
H×nh 6.1: S¬ ®å 1 - Ph©n cÊp ®èi t−îng Navigator
JavaScript 37
Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi
Trong s¬ ®å ph©n cÊp nµy, c¸c ®èi t−îng con chÝnh lµ c¸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¸c trang ®Òu cã c¸c ®èi t−îng sau ®©y:
• navigator: cã 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¸c thuéc tÝnh thùc hiÖn ¸p dông vµo toµn
bé cöa sæ.
• document: chøa c¸c thuéc tÝnh dùa trªn néi dung cña document nh− tªn, mµu nÒn,
c¸c kÕt nèi vµ c¸c forms.
• location: cã c¸c thuéc tÝnh dùa trªn ®Þa chØ URL hiÖn thêi
• history: Chøa c¸c thuéc tÝnh vÒ c¸c URL mµ client yªu cÇu tr−íc ®ã.
Sau ®©y sÏ m« t¶ c¸c thuéc tÝnh, ph−¬ng thøc còng nh− c¸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¸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¸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¸c thuéc tÝnh cña ®èi t−îng navigator
<HTML>
<HEAD>
<TITLE> Navigator Object Exemple </TITLE>
<SCRIPT LANGUAGE= "JavaScript">
document.write("appCodeName = "+navigator.appCodeName + "<BR>");
document.write("appName = "+navigator.appName + "<BR>");
document.write("appVersion = "+navigator.appVersion + "<BR>");
document.write("userAgent = "+navigator.userAgent + "<BR>");
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
JavaScript 38
Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi
§èi t−îng window
§èi t−îng window nh− ®· nãi ë trªn lµ ®èi t−îng ë møc cao nhÊt. C¸c ®èi t−îng document, frame,
vÞ trÝ ®Òu lµ thuéc tÝnh cña ®èi t−îng window.
4.1.1. C¸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¸c frame trong cöa sæ.
• Length - Sè l−îng c¸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.
H×nh 6.2: Minh ho¹ cho ®èi t−îng Navigator
JavaScript 39
Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi
• Top - Cöa sæ ë trªn cïng.
• Window - Cöa sæ hiÖn thêi.
4.1.2. C¸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 l−a 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,widt
h=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 40
Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi
H×nh 6.3: Minh ho¹ cho ®èi t−îng cöa sæ
4.1.3. C¸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¸c thuéc tÝnh cña ®èi t−îng location duy tr× c¸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¸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¸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).
• 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¸c script CGI.
JavaScript 41
Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi
§èi t−îng frame
Mét cöa sè cã thÓ cã mét vµi frame. C¸c frame cã thÓ cuén mét c¸ch ®éc lËp víi nhau vµ
mçi frame cã URL riªng. frame kh«ng cã c¸c ch−¬ng tr×nh xö lý sù kiÖn. Sù kiÖn onLoad vµ
onUnLoad lµ cña ®èi t−îng window.
4.1.4. C¸c thuéc tÝnh
• frames - M¶ng tÊt c¶ c¸c frame trong cöa sæ.
• Name - Thuéc tÝnh NAME cña thÎ <FRAME>
• Length - Sè l−îng c¸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.
4.1.5. C¸c ph−¬ng thøc
• 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¸c
frame trong mét trang.
VÝ dô1: t¹o frame ( h×nh 17)
<HTML>
<HEAD>
<TITLE>Frame Example </TITLE>
<FRAMESET ROWS="90%,10%">
<FRAMESET COLS="30%,70%">
<FRAME SRC=CATEGORY.HTM NAME="ListFrame">
<FRAME SRC=TITLES.HTM NAME="contentFrame">
</FRAMESET >
<FRAME SRC=NAVIGATOR.HTM NAME="navigateFrame">
</FRAMESET >
</HEAD>
<BODY> </BODY>
</HTML>
S¬ ®å sau hiÓn thÞ cÊu tróc cña c¸c frame: C¶ 3 frame ®Òu trªn cïng mét cöa sæ cha, mÆc dï 2 trong
sè c¸c frame ®ã n»m trong mét frameset kh¸c.
Top
listFrame (category.html)
contentFrame (titles.html)
navigatorFrame (navigator.html)
JavaScript 42
Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi
B¹n cã thÓ gäi tíi nh÷ng frame tr−íc ®ã b»ng c¸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]
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 nh−ng
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>
<TITLE>Frame Example </TITLE>
<FRAMESET ROWS="90%,10%">
<FRAME SRC=muske13.HTML NAME="upperFrame">
<FRAME SRC=NAVIGATOR.HTM NAME="navigateFrame">
</FRAMESET >
</HEAD>
<BODY>
</BODY>
</HTML>
Trong file muske13.html l¹i tiÕp tôc ®Æt mét frameset:
<HTML>
<HEAD>
<TITLE>Frame Example </TITLE>
<FRAMESET COLS="30%,70%">
<FRAME SRC=CATEGORY.HTM NAME="ListFrame">
JavaScript 43
Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi
<FRAME SRC=TITLES.HTM NAME="contentFrame">
</FRAMESET >
</HEAD>
<BODY>
</BODY>
</HTML>
Khi ®ã kÕt qu¶ hiÓn thÞ cña vÝ dô 2 gièng vÝ dô 1 nh−ng sù ph©n cÊp cña c¸c frames l¹i kh¸c h¼n:
B¹n cã thÓ gäi tíi c¸c frame trªn b»ng c¸ch sö dông thuéc tÝnh m¶ng frames nh− sau:
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 c¸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 ch−a bao giê tån t¹i.
§èi t−îng document
§èi t−îng nµy chøa c¸c th«ng tin vÒ document hiÖn thêi vµ cung cÊp c¸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¸c
thuéc tÝnh g¾n víi thÎ <BODY>.
C¸c ®èi t−îng anchor, forms, history, links lµ thuéc tÝnh cña ®èi t−îng document. Kh«ng cã c¸c
ch−¬ng tr×nh xö lý sù kiÖn cho c¸c frame. Sù kiÖn onLoad vµ onUnLoad lµ cho ®èi t−îng window.
4.1.7. C¸c thuéc tÝnh
• alinkColor - Gièng nh− thuéc tÝnh ALINK.
top
upperFrame
(muske13.html)
navigatorFrame
(navigator.html)
listFrame (category.html)
contentFrame (titles.html)
JavaScript 44
Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi
• anchor - M¶ng tÊt c¶ 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¸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¸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.
4.1.8. C¸c ph−¬ng thøc
• 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¸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 nh−ng 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 c¸ch:
document.anchors [index]
M¶ng anchor cã mét thuéc tÝnh duy nhÊt lµ length x¸c ®Þnh sè l−îng c¸c anchor trong document, nã
cã thÓ ®−îc x¸c ®Þnh nh− sau:
document.anchors.length.
§èi t−îng forms
C¸c form ®−îc t¹o ra nhê cÆp thÎ <FORM> vµ </FORM>. PhÇn lín c¸c thuéc tÝnh cña ®èi
t−îng form ph¶n ¸nh c¸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
JavaScript 45
Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi
password
radio
reset
select
submit
text
textarea
C¸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¸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]
4.1.9. C¸c thuéc tÝnh
action thuéc tÝnh ACTION cña thÎ FORM.
elements M¶ng chøa tÊt c¶ 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¸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
4.1.10. C¸c ph−¬ng thøc
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.
4.1.11. C¸c ch−¬ng tr×nh xö lý sù kiÖn
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 ®Ó l−u gi÷ c¸c th«ng tin vÒ c¸c URL tr−íc ®−îc ng−êi sö dông
sö dông. Danh s¸ch c¸c URL ®−îc l−u tr÷ theo thø tù thêi gian. §èi t−îng nµy kh«ng cã ch−¬ng
tr×nh xö lý sù kiÖn.
4.1.12. C¸c thuéc tÝnh
length - Sè l−îng c¸c URL trong ®èi t−îng.
4.1.13. C¸c ph−¬ng thøc
• history.back() - §−îc sö dông ®Ó tham chiÕu tíi URL míi ®−îc th¨m tr−íc ®©y.
JavaScript 46
Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi
• 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¸c thuéc
tÝnh cña ®èi t−îng link chñ yÕu xö lý vÒ URL cña c¸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¸c liªn kÕt trong document. Cã thÓ x¸c ®Þnh sè l−îng c¸c link qua
document.links.length()
Cã thÓ tham chiÕu tíi mét liªn kÕt qña
document.links [index]
§Ó x¸c ®Þnh c¸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
4.1.14. C¸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ô 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¸c script CGI.
• Target - Gièng thuéc tÝnh TARGET cña <LINK>.
4.1.15. C¸c ch−¬ng tr×nh xö lý sù kiÖn
• 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¸c thuéc tÝnh cña ®èi t−îng nµy chøa nhiÒu
h»ng sè to¸n häc, 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¸c ph−¬ng thøc cã thÓ lµ sè hay c¸c biÓu thøc ®−îc ®n¸h gi¸ lµ
sè hîp lÖ.
JavaScript 47
Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi
4.1.16. C¸c thuéc tÝnh
• 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.
• 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.
4.1.17. C¸c ph−¬ng thøc
• 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.
§è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¸c ph−¬ng thøc date ®Òu cã mét ®èi t−îng Date ®i cïng. C¸c ph−¬ng thøc giíi thiÖu trong
phÇn nµy sö dông ®èi t−îng Date dateVar, vÝ dô:
JavaScript 48
Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi
dateVar = new Date ('August 16, 1996 20:45:04');
4.1.18. C¸c ph−¬ng thøc
• 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¸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¸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.
• 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.
4.1.19. C¸c ph−¬ng thøc
• str.anchor (name) - §−îc sö dông ®Ó t¹o ra thÎ <A> (mét c¸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.
JavaScript 49
Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi
• 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>.
• str.substring(a,b) - Tr¶ l¹i chuçi con cña str lµ c¸c ký tù tõ vÞ trÝ thø a tíi vÞ trÝ thø b.
C¸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¸c phÇn tö cña ®èi t−îng Form
Form ®−îc t¹o bëi c¸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¸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¸c
phÇn tö cña form vµ c¸c gi¸ trÞ cña chóng.
B¶ng ?: C¸c phÇn tö cña form
PhÇn tö M« t¶
button
Lµ mét nót bÊm h¬n lµ nót submit hay nót reset
(<INPUT TYPE="button">)
checkbox Mét checkbox (<INPUT TYPE="checkbox">)
FileUpload
Lµ mét phÇn tö t¶i file lªn cho phÐp ng−êi sö dông göi lªn mét file
(<INPUT TYPE="file">)
hidden Mét tr−êng Èn (<INPUT TYPE="hidden">)
password
Mét tr−êng text ®Ó nhËp mËt khÈu mµ tÊt c¶ c¸c ký tù nhËp vµo ®Òu hiÓn
thÞ lµ dÊu (*)(<INPUT TYPE="password">)
JavaScript 50
Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi
radio Mét nót bÊm (<INPUT TYPE="radio">)
reset Mét nót reset(<INPUT TYPE="reset">)
select
Mét danh s¸ch lùa chän
(<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">)
textArea
Mét tr−êng text cho phÐp nhËp vµp nhiÒu dßng
<TEXTAREA>default text</TEXTAREA>)
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¸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µ l−u 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µ c¸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.
JavaScript 51
Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi
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>
<SCRIPT LANGUAGE="JavaScript">
<!-- HIDE FROM OTHER BROWSERS
function calculate(form) {
form.results.value = eval(form.entry.value);
}
// STOP HIDING FROM OTHER BROWSERS -->
</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¸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¸c
checkbox cã nhiÒu thuéc tÝnh vµ c¸ch thøc h¬n button. B¶ng d−íi ®©y lµ danh s¸ch c¸c thuéc tÝnh vµ
c¸c c¸ch thøc cña phÇn tö checkbox.
B¶ng . C¸c thuéc tÝnh vµ c¸ch thøc cña phÇn tö checkbox.
C¸ch thøc vµ thuéc
tÝnh
M« t¶
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 (C¸ch thøc)
PhÇn tö checkbox chØ cã mét thÎ sù kiÖn lµ onClick
JavaScript 52
Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi
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>
<!-- HIDE FROM OTHER BROWSERS
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
// STOP HIDING FROM OTHER BROWSERS -->
</SCRIPT>
</HEAD>
<BODY>
<FORM METHOD=POST>
Value: <INPUT TYPE="text" NAME="entry" VALUE=0
onChange="calculate(this.form,this.name);">
<BR>
Action (default double): <INPUT TYPE=checkbox NAME=square
onClick="calculate(this.form,this.name);">
Square
<BR>
Result: <INPUT TYPE="text" NAME="result" VALUE=0
onChange="calculate(this.form,this.name);">
</FORM>
</BODY>
</HTML>
JavaScript 53
Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi
Trong script nµy, b¹n ®· thÊy c¸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:
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;
} // end if (3)
} // end if (1)
}
4.1.23. PhÇn tö File Upload
PhÇn tö nµy cung cÊp cho form mét c¸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¸c ®èi t−îng kh¸c.
Kh«ng cã 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¸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 ®Ó l−u c¸c gi¸ trÞ cÇn thiÕt ®Ó göi tíi server song song
víi sù xuÊt ra tõ form (form submission) nh−ng nã kh«ng ®−îc hiÓn thÞ trªn trang. Mäi ng−êi cã
thÓ sö dông trong JavaScript ®Ó l−u c¸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¸c ®èi
t−îng kh¸c. Kh«ng cã c¸ch thøc hay thÎ sù kiÖn nµo cho ®èi t−îng nµy.
JavaScript 54
Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi
4.1.25. PhÇn tö Password
§èi t−îng Password lµ ®èi t−îng duy nhÊt trong c¸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 c¸ch thøc h¬n(focus(), blur(), and select() ) vµ
t−¬ng øng víi c¸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¸c nót radio l¹i b»ng c¸ch ®Æt cho chóng cã cïng mét tªn trong c¸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¸c
thuéc tÝnh vµ c¸ch thøc cña ®èi t−îng radio.
B¶ng? . C¸c thuéc tÝnh vµ c¸ch thøc cña ®èi t−îng radio.
Thuéc tÝnh vµ c¸ch
thøc
M« t¶
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Î INPUT (thuéc tÝnh)
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 (c¸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¸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â c¸ch dïng ®èi t−îng radio, ta xem vÝ dô sau:
VÝ dô:
<HTML>
<HEAD>
<TITLE>radio button Example</TITLE>
<SCRIPT>
JavaScript 55
Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi
<!-- HIDE FROM OTHER BROWSERS
function calculate(form,callingField) {
if (callingField == "result") {
if (form.action[1].checked) {
form.entry.value = Math.sqrt(form.result.value);
} else {
form.entry.value = form.result.value / 2;
}
} else {
if (form.action[1].checked) {
form.result.value=form.entry.value*form.entry.value;
} else {
form.result.value = form.entry.value * 2;
}
}
}
// STOP HIDING FROM OTHER BROWSERS -->
</SCRIPT>
</HEAD>
<BODY>
<FORM METHOD=POST>
Value: <INPUT TYPE="text" NAME="entry" VALUE=0
onChange="calculate(this.form,this.name);"> <BR>
Action:<BR>
<INPUT TYPE="radio" NAME="action" VALUE="twice"
onClick="calculate(this.form,this.name);"> Double<BR>
<INPUT TYPE="radio" NAME="action" VALUE="square"
onClick="calculate(this.form,this.name);"> Square <BR>
Result: <INPUT TYPE=text NAME="result" VALUE=0
onChange="calculate(this.form,this.name);">
</FORM>
</BODY>
</HTML>
Trong vÝ dô 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¸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 c¸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.
JavaScript 56
Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi
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 c¸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.
VÝ dô sau minh ho¹ c¸ch sö dông nót reset ®Ó xo¸ c¸c gi¸ trÞ cña form.
VÝ dô:
<HTML>
<HEAD>
<TITLE>reset Example</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- HIDE FROM OTHER BROWSERS
function clearForm(form) {
form.value1.value = "Form";
form.value2.value = "Cleared";
}
// STOP HIDING FROM OTHER BROWSERS -->
//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¸c form HTML xuÊt hiÖn menu drop-down hoÆc danh s¸ch cuén ®−îc
cña c¸c ®èi t−îng cã thÓ ®−îc lùa chän. C¸c danh d¸ch ®−îc x©y dùng b»ng c¸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 57
Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi
<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¸c button vµ radio.
Víi c¸c thµnh phÇn lùa chän, danh s¸ch c¸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¸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¸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¸c th«ng tin sau:
example.options[1].value = "The Second"
example.options[2].text = "3"
example.selectedIndex = 0
example.options[0].defaultSelected = true
example.options[1].selected = false
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"
JavaScript 58
Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi
example.selectedIndex = 1
example.options[0].defaultSelected = true
example.options[1].selected = true
Söa c¸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 c¸ch liªn kÕt
c¸c gi¸ trÞ míi cho thuéc tÝnh text cña c¸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¸c lùa chän míi vµo danh s¸ch b»ng c¸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¸c lùa chän cã thÓ bÞ xo¸ trong danh s¸ch lùa chän b»ng c¸ch g¾n gi¸ trÞ null
cho ®èi t−îng muèn xo¸
selectListName.options[index] = null;
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¸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 c¸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, c¸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¸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, nh−ng c¸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 c¸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¸c sù kiÖn nµy chØ thùc hiÖn khi
con trá ®· ®−îc kÝch ra ngoµi tr−êng text.
JavaScript 59
Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi
B¶ng sau m« t¶ c¸c thuéc tÝnh vµ c¸ch thøc cña ®èi t−îng text.
B¶ng .C¸c thuéc tÝnh vµ c¸ch thøc cña ®èi t−îng text.
C¸ch thøc vµ thuéc tÝnh M« t¶
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Î INPUT
(thuéc tÝnh)
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 (c¸ch thøc)
blur() M« t¶ viÖc con trá rêi tr−êng text (c¸ch thøc)
select() M« t¶ viÖc lùa chän dßng text trong tr−êng text
(c¸ch thøc)
Mét chó ý quan träng lµ cã thÓ g¸n gi¸ trÞ cho tr−êng text b»ng c¸ch liªn kÕt
c¸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¸c tr−êng text .
<HTML>
<HEAD>
<TITLE>text Example</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- HIDE FROM OTHER BROWSERS
function echo(form,currentField) {
if (currentField == "first")
form.second.value = form.first.value;
else
form.first.value = form.second.value;
}
// STOP HIDING FROM OTHER BROWSERS -->
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE=text NAME="first"
onChange="echo(this.form,this.name);">
Giao trinh java_script[1]
Giao trinh java_script[1]
Giao trinh java_script[1]
Giao trinh java_script[1]
Giao trinh java_script[1]
Giao trinh java_script[1]
Giao trinh java_script[1]
Giao trinh java_script[1]
Giao trinh java_script[1]
Giao trinh java_script[1]
Giao trinh java_script[1]
Giao trinh java_script[1]
Giao trinh java_script[1]

Weitere ähnliche Inhalte

Andere mochten auch

Introducción a la tecnología de información y comunicación
Introducción a la tecnología de información y comunicaciónIntroducción a la tecnología de información y comunicación
Introducción a la tecnología de información y comunicaciónainefrefon
 
PROYECTO DE FIFA WORLD CUP brasil
PROYECTO DE FIFA WORLD CUP brasilPROYECTO DE FIFA WORLD CUP brasil
PROYECTO DE FIFA WORLD CUP brasilpuyol1105
 
Rework a budget
Rework a budgetRework a budget
Rework a budgetMatt Frost
 
Version final dmj_directores_190515
Version final dmj_directores_190515Version final dmj_directores_190515
Version final dmj_directores_190515Enio Maldonado
 
2. caraterísticas técnicas
2. caraterísticas técnicas2. caraterísticas técnicas
2. caraterísticas técnicasMário Nicolau
 
Ata reunião abril 2013
Ata reunião abril 2013Ata reunião abril 2013
Ata reunião abril 2013cmsaraguari
 
Cinemática_MOVIMENTO UNIFORME
Cinemática_MOVIMENTO UNIFORMECinemática_MOVIMENTO UNIFORME
Cinemática_MOVIMENTO UNIFORMELEAM DELGADO
 
Wordpress e suas funções
Wordpress e suas funçõesWordpress e suas funções
Wordpress e suas funçõesDaniel Marcos
 
Successstory2 hindi
Successstory2 hindiSuccessstory2 hindi
Successstory2 hindisugarmills
 
Tema 13 veinatge_civil_
Tema 13 veinatge_civil_Tema 13 veinatge_civil_
Tema 13 veinatge_civil_cris_crash92
 
Seguridad informática.cristi
Seguridad informática.cristiSeguridad informática.cristi
Seguridad informática.cristicarmelacaballero
 
Presentación Salvador Ruiz Carrasco
Presentación Salvador Ruiz CarrascoPresentación Salvador Ruiz Carrasco
Presentación Salvador Ruiz Carrascocarmelacaballero
 

Andere mochten auch (20)

Que es pensar
Que es pensarQue es pensar
Que es pensar
 
Introducción a la tecnología de información y comunicación
Introducción a la tecnología de información y comunicaciónIntroducción a la tecnología de información y comunicación
Introducción a la tecnología de información y comunicación
 
PROYECTO DE FIFA WORLD CUP brasil
PROYECTO DE FIFA WORLD CUP brasilPROYECTO DE FIFA WORLD CUP brasil
PROYECTO DE FIFA WORLD CUP brasil
 
Rework a budget
Rework a budgetRework a budget
Rework a budget
 
Metacognição e seus contornos
Metacognição e seus contornosMetacognição e seus contornos
Metacognição e seus contornos
 
Version final dmj_directores_190515
Version final dmj_directores_190515Version final dmj_directores_190515
Version final dmj_directores_190515
 
2. caraterísticas técnicas
2. caraterísticas técnicas2. caraterísticas técnicas
2. caraterísticas técnicas
 
Relatório Abril 2012
Relatório Abril 2012Relatório Abril 2012
Relatório Abril 2012
 
Ata reunião abril 2013
Ata reunião abril 2013Ata reunião abril 2013
Ata reunião abril 2013
 
1412
14121412
1412
 
Cinemática_MOVIMENTO UNIFORME
Cinemática_MOVIMENTO UNIFORMECinemática_MOVIMENTO UNIFORME
Cinemática_MOVIMENTO UNIFORME
 
Wordpress e suas funções
Wordpress e suas funçõesWordpress e suas funções
Wordpress e suas funções
 
Successstory2 hindi
Successstory2 hindiSuccessstory2 hindi
Successstory2 hindi
 
Tema 13 veinatge_civil_
Tema 13 veinatge_civil_Tema 13 veinatge_civil_
Tema 13 veinatge_civil_
 
Filho eu quero tanto
Filho eu quero tantoFilho eu quero tanto
Filho eu quero tanto
 
Bella Donna Residencial
Bella Donna ResidencialBella Donna Residencial
Bella Donna Residencial
 
Copa do mundo de futebol e a Geografia Escolar
Copa do mundo de futebol e a Geografia EscolarCopa do mundo de futebol e a Geografia Escolar
Copa do mundo de futebol e a Geografia Escolar
 
Seguridad informática.cristi
Seguridad informática.cristiSeguridad informática.cristi
Seguridad informática.cristi
 
Presentación Salvador Ruiz Carrasco
Presentación Salvador Ruiz CarrascoPresentación Salvador Ruiz Carrasco
Presentación Salvador Ruiz Carrasco
 
Com funciona Twitter?
Com funciona Twitter?Com funciona Twitter?
Com funciona Twitter?
 

Ähnlich wie Giao trinh java_script[1]

Java script dh bk share-book.com
Java script dh bk   share-book.comJava script dh bk   share-book.com
Java script dh bk share-book.comphongbk1609
 
Ebook học Javascript cơ bản tới nâng cao
Ebook học Javascript cơ bản tới nâng caoEbook học Javascript cơ bản tới nâng cao
Ebook học Javascript cơ bản tới nâng caoTrung Thanh Nguyen
 
Laptrinh ph pvamysql
Laptrinh ph pvamysqlLaptrinh ph pvamysql
Laptrinh ph pvamysqlHiền Phạm
 
Ngôn ngữ lập trình PHP và MySQL - khoahoclaptrinhweb.tin.vn
Ngôn ngữ lập trình PHP và MySQL - khoahoclaptrinhweb.tin.vnNgôn ngữ lập trình PHP và MySQL - khoahoclaptrinhweb.tin.vn
Ngôn ngữ lập trình PHP và MySQL - khoahoclaptrinhweb.tin.vnTrình Kim Ngân
 
Giao trinh java_script (1)
Giao trinh java_script (1)Giao trinh java_script (1)
Giao trinh java_script (1)duynamit
 
JavaScript (Tieng viet)
JavaScript (Tieng viet)JavaScript (Tieng viet)
JavaScript (Tieng viet)Park Ji Hưng
 
Giao trinh java_script
Giao trinh java_scriptGiao trinh java_script
Giao trinh java_scriptnmphuong91
 
Javascript tong-hop a-z
Javascript tong-hop a-zJavascript tong-hop a-z
Javascript tong-hop a-zManhh Nguyễn
 
Tai lieu-laptrinh ph-pvamysql
Tai lieu-laptrinh ph-pvamysqlTai lieu-laptrinh ph-pvamysql
Tai lieu-laptrinh ph-pvamysqlJohn Phan
 
Haiphongit.com.tai lieu-laptrinh ph-pvamysql
Haiphongit.com.tai lieu-laptrinh ph-pvamysqlHaiphongit.com.tai lieu-laptrinh ph-pvamysql
Haiphongit.com.tai lieu-laptrinh ph-pvamysqlGiang Nguyễn
 
Tai lieu-laptrinh ph-pvamysql - bachkhoaaptech.com
Tai lieu-laptrinh ph-pvamysql - bachkhoaaptech.comTai lieu-laptrinh ph-pvamysql - bachkhoaaptech.com
Tai lieu-laptrinh ph-pvamysql - bachkhoaaptech.comDang Thao
 
Lap trinh php va my sql
Lap trinh php va my sqlLap trinh php va my sql
Lap trinh php va my sqlhieusy
 
Lập trình web đại học tài nguyên môi trường
Lập trình web   đại học tài nguyên môi trườngLập trình web   đại học tài nguyên môi trường
Lập trình web đại học tài nguyên môi trườngKiên Thỏ
 
Html vnn canban
Html vnn canbanHtml vnn canban
Html vnn canbanhieusy
 
bctntlvn (52).pdf
bctntlvn (52).pdfbctntlvn (52).pdf
bctntlvn (52).pdfLuanvan84
 
Ebook drupal 7 vn
Ebook drupal 7 vnEbook drupal 7 vn
Ebook drupal 7 vngaugauvn
 

Ähnlich wie Giao trinh java_script[1] (20)

Java script dh bk share-book.com
Java script dh bk   share-book.comJava script dh bk   share-book.com
Java script dh bk share-book.com
 
Ebook học Javascript cơ bản tới nâng cao
Ebook học Javascript cơ bản tới nâng caoEbook học Javascript cơ bản tới nâng cao
Ebook học Javascript cơ bản tới nâng cao
 
Lập trình PHP và MySQL
Lập trình PHP và MySQLLập trình PHP và MySQL
Lập trình PHP và MySQL
 
Laptrinh ph pvamysql
Laptrinh ph pvamysqlLaptrinh ph pvamysql
Laptrinh ph pvamysql
 
Ngôn ngữ lập trình PHP và MySQL - khoahoclaptrinhweb.tin.vn
Ngôn ngữ lập trình PHP và MySQL - khoahoclaptrinhweb.tin.vnNgôn ngữ lập trình PHP và MySQL - khoahoclaptrinhweb.tin.vn
Ngôn ngữ lập trình PHP và MySQL - khoahoclaptrinhweb.tin.vn
 
Giao trinh java script
Giao trinh java scriptGiao trinh java script
Giao trinh java script
 
Giao trinh java_script (1)
Giao trinh java_script (1)Giao trinh java_script (1)
Giao trinh java_script (1)
 
JavaScript (Tieng viet)
JavaScript (Tieng viet)JavaScript (Tieng viet)
JavaScript (Tieng viet)
 
Giao trinh java_script
Giao trinh java_scriptGiao trinh java_script
Giao trinh java_script
 
Javascript tong-hop a-z
Javascript tong-hop a-zJavascript tong-hop a-z
Javascript tong-hop a-z
 
Tai lieu-laptrinh ph-pvamysql
Tai lieu-laptrinh ph-pvamysqlTai lieu-laptrinh ph-pvamysql
Tai lieu-laptrinh ph-pvamysql
 
Haiphongit.com.tai lieu-laptrinh ph-pvamysql
Haiphongit.com.tai lieu-laptrinh ph-pvamysqlHaiphongit.com.tai lieu-laptrinh ph-pvamysql
Haiphongit.com.tai lieu-laptrinh ph-pvamysql
 
Tai lieu-laptrinh ph-pvamysql - bachkhoaaptech.com
Tai lieu-laptrinh ph-pvamysql - bachkhoaaptech.comTai lieu-laptrinh ph-pvamysql - bachkhoaaptech.com
Tai lieu-laptrinh ph-pvamysql - bachkhoaaptech.com
 
Lap trinh php va my sql
Lap trinh php va my sqlLap trinh php va my sql
Lap trinh php va my sql
 
Lập trình web đại học tài nguyên môi trường
Lập trình web   đại học tài nguyên môi trườngLập trình web   đại học tài nguyên môi trường
Lập trình web đại học tài nguyên môi trường
 
Tu hoc matlab
Tu hoc matlabTu hoc matlab
Tu hoc matlab
 
Ebook drupal 7 vn
Ebook drupal 7 vnEbook drupal 7 vn
Ebook drupal 7 vn
 
Html vnn canban
Html vnn canbanHtml vnn canban
Html vnn canban
 
bctntlvn (52).pdf
bctntlvn (52).pdfbctntlvn (52).pdf
bctntlvn (52).pdf
 
Ebook drupal 7 vn
Ebook drupal 7 vnEbook drupal 7 vn
Ebook drupal 7 vn
 

Kürzlich hochgeladen

Catalogue cáp điện GOLDCUP 2023(kỹ thuật).pdf
Catalogue cáp điện GOLDCUP 2023(kỹ thuật).pdfCatalogue cáp điện GOLDCUP 2023(kỹ thuật).pdf
Catalogue cáp điện GOLDCUP 2023(kỹ thuật).pdfOrient Homes
 
CATALOGUE ART-DNA 2023-2024-Orient Homes.pdf
CATALOGUE ART-DNA 2023-2024-Orient Homes.pdfCATALOGUE ART-DNA 2023-2024-Orient Homes.pdf
CATALOGUE ART-DNA 2023-2024-Orient Homes.pdfOrient Homes
 
2020.Catalogue CÁP TR131321313UNG THẾ.pdf
2020.Catalogue CÁP TR131321313UNG THẾ.pdf2020.Catalogue CÁP TR131321313UNG THẾ.pdf
2020.Catalogue CÁP TR131321313UNG THẾ.pdfOrient Homes
 
Catalogue Inox Gia Anh ban xem truoc final.pdf
Catalogue Inox Gia Anh ban xem truoc final.pdfCatalogue Inox Gia Anh ban xem truoc final.pdf
Catalogue Inox Gia Anh ban xem truoc final.pdftuvanwebsite1
 
CATALOG cáp cadivi_1.3.2024_compressed.pdf
CATALOG cáp cadivi_1.3.2024_compressed.pdfCATALOG cáp cadivi_1.3.2024_compressed.pdf
CATALOG cáp cadivi_1.3.2024_compressed.pdfOrient Homes
 
Phân tích mô hình PESTEL Coca Cola - Nhóm 4.pptx
Phân tích mô hình PESTEL Coca Cola - Nhóm 4.pptxPhân tích mô hình PESTEL Coca Cola - Nhóm 4.pptx
Phân tích mô hình PESTEL Coca Cola - Nhóm 4.pptxtung2072003
 
Catalog Dây cáp điện CADIVI ky thuat.pdf
Catalog Dây cáp điện CADIVI ky thuat.pdfCatalog Dây cáp điện CADIVI ky thuat.pdf
Catalog Dây cáp điện CADIVI ky thuat.pdfOrient Homes
 
5. Phân tích đầu tư và đinh giá Trái phiếu.pdf
5. Phân tích đầu tư và đinh giá Trái phiếu.pdf5. Phân tích đầu tư và đinh giá Trái phiếu.pdf
5. Phân tích đầu tư và đinh giá Trái phiếu.pdfPhcCaoVn
 
Nghiên cứu thực trạng sinh viên tốt nghiệp có việc làm
Nghiên cứu thực trạng sinh viên tốt nghiệp có việc làmNghiên cứu thực trạng sinh viên tốt nghiệp có việc làm
Nghiên cứu thực trạng sinh viên tốt nghiệp có việc làmTBiAnh7
 
Catalogue Cadisun CÁP HẠ THẾ (26-09-2020).pdf
Catalogue Cadisun CÁP HẠ THẾ (26-09-2020).pdfCatalogue Cadisun CÁP HẠ THẾ (26-09-2020).pdf
Catalogue Cadisun CÁP HẠ THẾ (26-09-2020).pdfOrient Homes
 

Kürzlich hochgeladen (10)

Catalogue cáp điện GOLDCUP 2023(kỹ thuật).pdf
Catalogue cáp điện GOLDCUP 2023(kỹ thuật).pdfCatalogue cáp điện GOLDCUP 2023(kỹ thuật).pdf
Catalogue cáp điện GOLDCUP 2023(kỹ thuật).pdf
 
CATALOGUE ART-DNA 2023-2024-Orient Homes.pdf
CATALOGUE ART-DNA 2023-2024-Orient Homes.pdfCATALOGUE ART-DNA 2023-2024-Orient Homes.pdf
CATALOGUE ART-DNA 2023-2024-Orient Homes.pdf
 
2020.Catalogue CÁP TR131321313UNG THẾ.pdf
2020.Catalogue CÁP TR131321313UNG THẾ.pdf2020.Catalogue CÁP TR131321313UNG THẾ.pdf
2020.Catalogue CÁP TR131321313UNG THẾ.pdf
 
Catalogue Inox Gia Anh ban xem truoc final.pdf
Catalogue Inox Gia Anh ban xem truoc final.pdfCatalogue Inox Gia Anh ban xem truoc final.pdf
Catalogue Inox Gia Anh ban xem truoc final.pdf
 
CATALOG cáp cadivi_1.3.2024_compressed.pdf
CATALOG cáp cadivi_1.3.2024_compressed.pdfCATALOG cáp cadivi_1.3.2024_compressed.pdf
CATALOG cáp cadivi_1.3.2024_compressed.pdf
 
Phân tích mô hình PESTEL Coca Cola - Nhóm 4.pptx
Phân tích mô hình PESTEL Coca Cola - Nhóm 4.pptxPhân tích mô hình PESTEL Coca Cola - Nhóm 4.pptx
Phân tích mô hình PESTEL Coca Cola - Nhóm 4.pptx
 
Catalog Dây cáp điện CADIVI ky thuat.pdf
Catalog Dây cáp điện CADIVI ky thuat.pdfCatalog Dây cáp điện CADIVI ky thuat.pdf
Catalog Dây cáp điện CADIVI ky thuat.pdf
 
5. Phân tích đầu tư và đinh giá Trái phiếu.pdf
5. Phân tích đầu tư và đinh giá Trái phiếu.pdf5. Phân tích đầu tư và đinh giá Trái phiếu.pdf
5. Phân tích đầu tư và đinh giá Trái phiếu.pdf
 
Nghiên cứu thực trạng sinh viên tốt nghiệp có việc làm
Nghiên cứu thực trạng sinh viên tốt nghiệp có việc làmNghiên cứu thực trạng sinh viên tốt nghiệp có việc làm
Nghiên cứu thực trạng sinh viên tốt nghiệp có việc làm
 
Catalogue Cadisun CÁP HẠ THẾ (26-09-2020).pdf
Catalogue Cadisun CÁP HẠ THẾ (26-09-2020).pdfCatalogue Cadisun CÁP HẠ THẾ (26-09-2020).pdf
Catalogue Cadisun CÁP HẠ THẾ (26-09-2020).pdf
 

Giao trinh java_script[1]

  • 1. JavaScript 1 Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi ch−¬ng 1 Lêi nãi ®Çu Víi HTML and Microsoft FrontPage b¹n ®· biÕt c¸ch t¹o ra trang Web - tuy nhiªn chØ míi ë møc biÓu diÔn th«ng tin chø ch−a ph¶i lµ c¸c trang Web ®éng cã kh¶ n¨ng ®¸p øng c¸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, nh−ng 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¸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¸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 c¸ch sö dông JavaScript trªn c¸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¸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¸c líp hay tÝnh thõa kÕ. JavaScript cã thÓ ®¸p øng c¸c sù kiÖn nh− t¶i hay lo¹i bá c¸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¸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 c©u lÖnh JavaScript qua m¹ng tíi client. Client sÏ ®äc trang ®ã tõ ®Çu ®Õn cuèi, hiÓn thÞ c¸c kÕt qu¶ cña HTML vµ xö lý c¸c c©u lÖnh JavaScript khi nµo chóng xuÊt hiÖn. C¸c c©u lÖnh JavaScript ®−îc nhóng trong mét trang HTML cã thÓ tr¶ lêi cho c¸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¸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¸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¸c script vµo file HTML cña m×nh.
  • 2. JavaScript 2 Khoa C«ng nghÖ, §¹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 B¹n cã thÓ nhóng JavaScript vµo mét file HTML theo mét trong c¸c c¸ch sau ®©y: • Sö dông c¸c c©u lÖnh vµ c¸c hµm trong cÆp thÎ <SCRIPT> • Sö dông c¸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 c¸ch sö dông cÆp thÎ <SCRIPT> vµ <SCRIPT>. C¸c thÎ <SCRIPT> cã thÓ xuÊt hiÖn trong phÇn <HEAD> hay <BODY> cña file HTML. NÕu ®Æt trong phÇn <HEAD>, nã sÏ ®−îc t¶i vµ s½n sµng tr−íc khi phÇn cßn l¹i cña v¨n b¶n ®−îc t¶i. Thuéc tÝnh duy nhÊt ®−îc ®Þnh nghÜa hiÖn thêi cho thÎ <SCRIPT> lµ “LANGUAGE=“ dïng ®Ó x¸c ®Þnh ng«n ng÷ script ®−îc sö dông. Cã hai gi¸ 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¸c ghi chó gi÷a HTML vµ JavaScript lµ cho phÐp b¹n Èn c¸c m· JavaScript trong c¸c ghi chó cña file HTML, ®Ó c¸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”> <!-- From here the JavaScript code hidden // INSERT ALL JavaScript HERE // This is where the hidden ends --> </SCRIPT> 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¸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. Chó ý: Ghi chó kh«ng ®−îc ®Æt trong cÆp thÎ <- vµ -> nh− ghi chó trong file HTML. Có ph¸p cña JavaScript t−¬ng tù có ph¸p cña C nªn cã thÓ sö dông // hay /* ... */.
  • 3. JavaScript 3 Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi 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¸c hµm dïng chung cho nhiÒu trang kh¸c nhau. C¸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¸c liªn kÕt hoÆc c¸c ®−êng dÉn tuyÖt ®èi, vÝ dô: <SCRIPT SRC=" http://cse.com.vn "> C¸c file JavaScript bªn ngoµi kh«ng ®−îc chøa bÊt kú thÎ HTML nµo. Chóng chØ ®−îc chøa c¸c c©u lÖnh JavaScript vµ ®Þnh nghÜa hµm. Tªn file cña c¸c hµm JavaScript bªn ngoµi cÇn cã ®u«i .js, vµ server sÏ ph¶i ¸nh x¹ ®u«i .js ®ã tíi kiÓu MIME application/x-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 c¸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){ 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 c¸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! Chó ý Khi b¹n muèn chØ ra mét x©u trÝch dÉn trong mét x©u kh¸c cÇn sö dông dÊu nh¸y ®¬n ( ' ) ®Ó ph©n ®Þnh x©u ®ã. §iÒu nµy cho phÐp script nhËn ra x©u ký tù ®ã.
  • 4. JavaScript 4 Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Né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 2.3. HiÓn thÞ mét dßng text Trong hÇu hÕt c¸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¸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¸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 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 c¸ch thøc ®Ó xuÊt mét dßng text ra mµn h×nh client: write() vµ writeln(). C¸ch gäi mét c¸ch thøc cña mét ®èi t−îng nh− sau: object_name.property_name D÷ liÖu mµ c¸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');
  • 5. JavaScript 5 Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi C¸ch thøc write() xuÊt ra mµn h×nh x©u Text nh−ng kh«ng xuèng dßng, cßn c¸ch thøc writeln() sau khi viÕt xong dßng Text tù ®éng xuèng dßng. Hai c¸ch thøc nµy ®Òu cho phÐp xuÊt ra thÎ HTML. VÝ dô: C¸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"> <!-- HIDE FROM OTHER BROWSERS document.write("This text is bold.</B>"); // STOP HIDING FROM OTHER BROWSERS --> </SCRIPT> </BODY> </HTML> VÝ dô: Sù kh¸c nhau cña write() vµ writeln(): <PRE> <SCRIPT LANGUAGE="JavaScript"> <!-- HIDE FROM OTHER BROWSERS document.writeln("One,"); document.writeln("Two,"); document.write("Three "); document.write("..."); // STOP HIDING FROM OTHER BROWSERS --> </SCRIPT>
  • 6. JavaScript 6 Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi </PRE> Khi duyÖt sÏ ®−îc kÕt qu¶: 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. C¸ch ®¬n gi¶n ®Ó lµm viÖc ®ã lµ sö dông c¸ch thøc alert(). §Ó sö dông ®−îc 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, c¸ch thøc alert() ®−îc sö dông trong c¸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ô ch−a s½n sµng ®Ó truy nhËp d÷ liÖu Tuy nhiªn c¸ch thøc alert() míi chØ cho phÐp th«ng b¸o víi ng−êi sö dông chø ch−a thùc sù giao tiÕp víi ng−êi sö dông. JavaScript cung cÊp mét c¸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
  • 7. JavaScript 7 Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi b¹n ®−a vµo, nh−ng ngoµi ra nã cßn cung cÊp mét tr−êng ®Ó nhËp d÷ liÖu 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 l−u 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¶: 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¸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. H×nh2.1: HiÓn thÞ cöa sæ nhËp tªn
  • 8. JavaScript 8 Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi B©y giê b¹n ®· cã ý t−ëng vÒ c¸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¸c lÖnh vµ më réng LÖnh/Më réng KiÓu M« t¶ SCRIPT thÎ HTML Hép chøa c¸c lÖnh JavaScript SRC Thuéc tÝnh cña thÎ SCRIPT Gi÷ ®Þa chØ cña file JavaScript bªn ngoµi. File nµy ph¶i cã phÇn ®u«i .js LANGUAGE thuéc tÝnh cña thÎ SCRIPT §Þnh râ ng«n ng÷ script ®−îc sö dông (JavaScript hoÆc VBScript) // Ghi chó trong JavaScript §¸nh dÊu ghi chó mét dßng trong ®o¹n script /*...*/ Ghi chó trong JavaScript §¸nh dÊu ghi chó mét khèi trong ®o¹n script document.write() c¸ch thøc JavaScript XuÊt ra mét x©u trªn cöa sæ hiÖn thêi mét c¸ch tuÇn tù theo file HTML cã ®o¹n script ®ã document.writeln() C¸ch thøc JavaScript T−¬ng tù c¸ch thøc document.write() nh−ng viÕt xong tù xuèng dßng. alert() C¸ch thøc cña JavaScript HiÓn thÞ mét dßng th«ng b¸o trªn hép héi tho¹i promt() C¸ch thøc HiÓn thÞ mét dßng th«ng b¸o trong hép héi tho¹i H×nh 2.2: HiÓn thÞ lêi chµo ng−êi nhËp
  • 9. JavaScript 9 Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi JavaScript ®ång thêi cung cÊp mét tr−êng nhËp d÷ liÖu ®Ó ng−êi sö dông nhËp vµo. 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¸c ch÷ sè kh«ng ®−îc sö dông ®Ó më ®Çu tªn mét biÕn nh−ng 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¸c gi¸ trÞ trong ch−¬ng tr×nh kh«ng thay ®æi. Sau ®©y lµ c¸c vÝ dô vÒ tõ tè: 8 “The dog ate my shoe” true 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> <BODY> </BODY> </HTML> C¸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: Chó ý Kh¸c víi C, trong JavaScript kh«ng cã kiÓu h»ng sè CONST ®Ó biÓu diÔn mét gi¸ trÞ kh«ng ®æi nµo ®Êy
  • 10. JavaScript 10 Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi 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 c¸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: • PhÇn nguyªn thËp ph©n. • 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 H×nh 3.1: KÕt qu¶ cña xö lý d÷ liÖu
  • 11. JavaScript 11 Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi -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.” ”);
  • 12. JavaScript 12 Khoa C«ng nghÖ, §¹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 TËp hîp c¸c literal, biÕn vµ c¸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¸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¸c to¸n tö trong JavaScript cã thÓ ®−îc nhãm thµnh c¸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 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
  • 13. JavaScript 13 Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Né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¸c to¸n tö céng (+), trõ (-), nh©n (*), chia (/) th«ng th−êng, JavaScript cßn hç trî c¸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) 2.1.4. C h u ç i Khi ®−îc sö dông víi chuçi, to¸n tö + ®−îc coi lµ kÕt hîp hai chuçi, vÝ dô: "abc" + "xyz" ®−îc "abcxyz" 2.1.5. Logic JavaScript hç trî c¸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. 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¸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.
  • 14. JavaScript 14 Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi 2.1.6. Bitwise Víi c¸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¸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¸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¸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¸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 c¸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 th−êng KiÓu bitwise 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 x = x | y x | = y Bµi tËp 2.1.7. C©u hái H·y ®¸nh gi¸ c¸c biÓu thøc sau: 1. a. 7 + 5 b. "7" + "5" c. 7 == 7 d. 7 >= 5 e. 7 <= 7
  • 15. JavaScript 15 Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi 2. f. (7 < 5) ? 7 : 5 g. (7 >= 5) && (5 > 5) h. (7 >= 5) || (5 > 5) 2.1.8. Tr¶ lêi C¸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 h. true
  • 16. JavaScript 16 Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi 3. C¸c lÖnh Cã thÓ chia c¸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 c©u lÖnh víi ®iÒu kiÖn ®óng } else { //C¸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.”); 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 Chó ý Ký tù { vµ } ®−îc sö dông ®Ó t¸ch c¸c khèi m·.
  • 17. JavaScript 17 Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi 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¸c lÖnh ®−îc thùc hiÖn trong khi lÆp } VÝ dô: <HTML> <HEAD> <TITLE>For loop Example </TITLE> <SCRIPT LANGUAGE= "JavaScript"> for (x=1; x<=10 ; x++) { y=x*25; document.write("x ="+ x +";y= "+ y + "<BR>"); } </SCRIPT> </HEAD> <BODY></BODY> </HTML> VÝ dô nµy l−u vµo file for_loop.Html. H×nh 5.1: KÕt qu¶ cña lÖnh for...loop
  • 18. JavaScript 18 Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi 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 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. 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 nh−ng 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;
  • 19. JavaScript 19 Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi while (x<=10) { document.write(“Gi¸ trÞ cña x lµ:”+ x+”<BR>”); if (x=5) { x=8; continue; } x++; } C¸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¸c ®èi t−îng. 3.1.5. for...in C©u lÖnh nµy ®−îc sö dông ®Ó lÆp tÊt c¶ 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¸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 c©u lÖnh } VÝ dô VÝ dô sau sÏ lÊy ra tÊt c¶ 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> <SCRIPT LANGUAGE= "JavaScript"> document.write("The properties of the Window object are: <BR>"); for (var x in window) document.write(" "+ x + ", "); </SCRIPT> </HEAD> <BODY> </BODY> </HTML>
  • 20. JavaScript 20 Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi 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¸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> <SCRIPT LANGUAGE= "JavaScript"> function person(first_name, last_name, age, sex){ this.first_name=first_name; this.last_name=last_name; this.age=age; this.sex=sex; } person1= new person("Thuy", "Dau Bich", "23", "Female"); person2= new person("Chung", "Nguyen Bao", "24", "Male"); person3= new person("Binh", "Nguyen Nhat", "24", "Male"); person4= new person("Hoµn", "§ç V¨n", "24", "Male"); H×nh 5.2: KÕt qu¶ cña lÖnh for...in
  • 21. JavaScript 21 Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi 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> </HTML> 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. H×nh 5.3: KÕt qu¶ cña vÝ dô lÖnh New
  • 22. JavaScript 22 Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi 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¸c lÖnh, b¹n cã thÓ sö dông c¸c thuéc tÝnh mµ kh«ng ®Ò cËp ®Õn ®èi t−îng. Có ph¸p with (object) { // statement } VÝ dô: VÝ dô sau chØ ra c¸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> <SCRIPT LANGUAGE= "JavaScript"> with (document){ write(“This is an exemple of the things that can be done <BR>”); write(“With the <B>with<B> statment. <P>”); write(“This can really save some typing”); } </SCRIPT> </HEAD> <BODY> </BODY> </HTML> H×nh 5.4: KÕt qu¶ cña vÝ dô lÖnh with
  • 23. JavaScript 23 Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi C¸c hµm (Functions) JavaScript còg cho phÐp sö dông c¸c hµm. MÆc dï kh«ng nhÊt thiÕt ph¶i cã, song c¸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¹ c¸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> <SCRIPT LANGUAGE= "JavaScript"> function person(first_name, last_name, age, sex) { this.first_name=first_name; this.last_name=last_name; this.age=age; this.sex=sex; this.printStats=printStats; } function printStats() { with (document) { write (" Name :" + this.last_name + " " + this.first_name + "<BR>" ); write("Age :"+this.age+"<BR>"); write("Sex :"+this.sex+"<BR>"); } } person1= new person("Thuy", "Dau Bich", "23", "Female"); person2= new person("Chung", "Nguyen Bao", "24", "Male"); person3= new person("Binh", "Nguyen Nhat", "24", "Male"); person4= new person("Hoan", "Do Van", "23", "Male"); person1.printStats(); person2.printStats(); person3.printStats(); person4.printStats(); </SCRIPT>
  • 24. JavaScript 24 Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi </HEAD> <BODY> </BODY> </HTML> 1.1.1.1.1. H×nh 8: VÝ dô vÒ hµm
  • 25. JavaScript 25 Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi C¸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 • parseFloat 3.1.9. eval Hµm nµy ®−îc sö dông ®Ó ®¸nh gi¸ c¸c biÓu thøc hay lÖnh. BiÓu thøc, lÖnh hay c¸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¸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> <SCRIPT LANGUAGE= "JavaScript"> var string=”10+ Math.sqrt(64)”; document.write(string+ “=”+ eval(string)); </SCRIPT> </HEAD> <BODY> </BODY> </HTML> H×nh 5.5: KÕt qu¶ viÖc sö dông hµm H×nh 5.6 VÝ dô hµm Eval
  • 26. JavaScript 26 Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi 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¸c sè nguyªn sang c¬ sè 10 vµ ®¶m b¶o r»ng c¸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> <SCRIPT LANGUAGE= "JavaScript"> document.write("Converting 0xC hex to base-10: " + parseInt(0xC,10) + "<BR>"); document.write("Converting 1100 binary to base-10: " + parseInt(1100,2) + "<BR>"); </SCRIPT> </HEAD> <BODY> </BODY> </HTML> H×nh 5.7: VÝ dô parInt
  • 27. JavaScript 27 Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi 3.1.11. parseFloat Hµm nµy gièng hµm parseInt nh−ng 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¹ c¸ch thøc xö lý cña parseFloat víi c¸c kiÓu chuçi kh¸c nhau. H×nh 5.8 minh häa kÕt qu¶ <HTML> <HEAD> <TITLE> perseFload Exemple </TITLE> <SCRIPT LANGUAGE= "JavaScript"> document.write("This script will show how diffrent strings are "); document.write("Converted using parseFloat<BR>"); document.write("137= " + parseFloat("137") + "<BR>"); document.write("137abc= " + parseFloat("137abc") + "<BR>"); document.write("abc137= " + parseFloat("abc137") + "<BR>"); document.write("1abc37= " + parseFloat("1abc37") + "<BR>"); </SCRIPT> </HEAD> <BODY> </BODY> </HTML> H×nh 5.8 : KÕt qu¶ cña vÝ dô parseFloat
  • 28. JavaScript 28 Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi M¶ng (Array) MÆc dï JavaScript kh«ng hç trî cÊu tróc d÷ liÖu m¶ng nh−ng Netscape t¹o ra ph−¬ng thøc cho phÐp b¹n tù t¹o ra c¸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¸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: myArray = new InitArray (10) Nã t¹o ra c¸c thµnh phÇn tõ myArray[1] ®Õn myArray[10] víi gi¸ trÞ lµ 0. Gi¸ trÞ c¸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> <SCRIPT LANGUAGE= "JavaScript"> function InitArray(numElements) { this.length = numElements; for (var x=1; x<=numElements; x++){ this[x]=0 } return this; } myArray = new InitArray(10); myArray[1] = "NghÖ An"; myArray[2] = "Hµ Néi"; document.write(myArray[1] + "<BR>"); document.write(myArray[2] + "<BR>"); </SCRIPT> </HEAD> <BODY> </BODY> </HTML>
  • 29. JavaScript 29 Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi 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¸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¸c ch−¬ng tri×nh xö lý sù kiÖn) gióp cho ch−¬ng tr×nh cã thÓ ph¶n øng mét c¸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¸c lÖnh cña JavaScript c¸ch nhau b»ng dÊu chÊm phÈy. Tuy nhiªn cho môc ®Ých viÕt thµnh c¸c module nªn viÕt d−íi d¹ng c¸c hµm. 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¸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.
  • 30. JavaScript 30 Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Né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¸c ch−¬ng tr×nh xö lý sù kiÖn cã s½n cña mét sè ®èi t−îng. C¸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 area onMouseOver, onMouseOut Reset button onClick Submit button onClick Document onLoad, onUnload, onError Window onLoad, onUnload, onBlur, onFocus Framesets onBlur, onFocus 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> <SCRIPT LANGUAGE= "JavaScript"> function CheckAge(form) { if ( (form.AGE.value<0)||(form.AGE.value>120) ) {
  • 31. JavaScript 31 Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi 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> 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>
  • 32. JavaScript 32 Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi </HTML> 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 c¸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 l−u 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 c©u sau ®©y sö dông sai thÎ sù kiÖn a. <BODY onClick="doSomething();"> b. <INPUT TYPE=text onFocus="doSomething();">
  • 33. JavaScript 33 Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi 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> <SCRIPT LANGUAGE="JavaScript"> <!-- HIDE FROM OTHER BROWSERS 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."); } // STOP HIDING FROM OTHER BROWSERS --> </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¸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. for (num = 0; num <= 10; num ++) { if (num == 8) break; } 3.1.13. Tr¶ lêi 1. Sö dông c¸ch thøc confirm() vµ cÊu tróc if...then:
  • 34. JavaScript 34 Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi <HTML> <HEAD> <TITLE>Execise 5.1</TITLE> <HEAD> <BODY> <P> <SCRIPT LANGUAGE="JavaScript"> var conf=confirm("Click OK to see a wellcome message!") if (conf){ document.write("<IMG SRC='wellcome.jpg'>"); document.write("<BR>Wellcome you come to CSE's class"); } else document.write("What a pity! You have just click Cancel button"); </SCRIPT> </P> </BODY> </HTML> 2. Thùc hiÖn hái ng−êi sö dông: <HTML> <HEAD> <TITLE>Exercise 3.3</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- HIDE FROM OTHER BROWSERS // DEFINE VARIABLES FOR REST OF SCRIPT var question="What is 10+10?"; var answer=20; var correct='CORRECT'; var incorrect='INCORRECT'; // 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");
  • 35. JavaScript 35 Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi } } // chECK THE ANSWER var output = (response == answer) ? correct : incorrect; // STOP HIDING FROM OTHER BROWSERS --> </SCRIPT> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!-- HIDE FROM OTHER BROWSERS // OUTPUT RESULT document.write(output); // STOP HIDING FROM OTHER BROWSERS --> </SCRIPT> </BODY> </HTML> 3. C¸c c©u sai: a, c, e. C¸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, l−u 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) { 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; }
  • 36. JavaScript 36 Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi 4. C¸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, nh−ng kh«ng h−íng ®èi t−îng bëi v× nã kh«ng hç trî c¸c líp còng nh− tÝnh thõa kÕ. PhÇn nµy nãi vÒ c¸c ®èi t−îng trong JavaScript vµ h×nh 6.1 chØ ra s¬ ®å ph©n cÊp c¸c ®èi t−îng. Trong s¬ ®å ph©n cÊp c¸c ®èi t−îng cña JavaScript, c¸c ®èi t−îng con thùc sù lµ c¸c thuéc tÝnh cña c¸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¸c ®èi t−îng cã thuéc tÝnh (properties), ph−¬ng thøc (methods), vµ c¸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¸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¸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 c¸ch cã cÊp bËc vµ ph¶n ¸nh chÝnh cÊu tróc cña file HTML ®ã. S¬ ®å sau sÏ minh ho¹ sù ph©n cÊp cña c¸c ®èi t−îng nµy Window Texturea Text FileUpload Password Hidden Submit Reset Radio Checkbox Button Select Plugin Mime Type Frame document Location History Layer Link Image Area Anchor Applet Plugin Form navigator Option H×nh 6.1: S¬ ®å 1 - Ph©n cÊp ®èi t−îng Navigator
  • 37. JavaScript 37 Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi Trong s¬ ®å ph©n cÊp nµy, c¸c ®èi t−îng con chÝnh lµ c¸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¸c trang ®Òu cã c¸c ®èi t−îng sau ®©y: • navigator: cã 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¸c thuéc tÝnh thùc hiÖn ¸p dông vµo toµn bé cöa sæ. • document: chøa c¸c thuéc tÝnh dùa trªn néi dung cña document nh− tªn, mµu nÒn, c¸c kÕt nèi vµ c¸c forms. • location: cã c¸c thuéc tÝnh dùa trªn ®Þa chØ URL hiÖn thêi • history: Chøa c¸c thuéc tÝnh vÒ c¸c URL mµ client yªu cÇu tr−íc ®ã. Sau ®©y sÏ m« t¶ c¸c thuéc tÝnh, ph−¬ng thøc còng nh− c¸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¸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¸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¸c thuéc tÝnh cña ®èi t−îng navigator <HTML> <HEAD> <TITLE> Navigator Object Exemple </TITLE> <SCRIPT LANGUAGE= "JavaScript"> document.write("appCodeName = "+navigator.appCodeName + "<BR>"); document.write("appName = "+navigator.appName + "<BR>"); document.write("appVersion = "+navigator.appVersion + "<BR>"); document.write("userAgent = "+navigator.userAgent + "<BR>"); </SCRIPT> </HEAD> <BODY> </BODY> </HTML>
  • 38. JavaScript 38 Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi §èi t−îng window §èi t−îng window nh− ®· nãi ë trªn lµ ®èi t−îng ë møc cao nhÊt. C¸c ®èi t−îng document, frame, vÞ trÝ ®Òu lµ thuéc tÝnh cña ®èi t−îng window. 4.1.1. C¸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¸c frame trong cöa sæ. • Length - Sè l−îng c¸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. H×nh 6.2: Minh ho¹ cho ®èi t−îng Navigator
  • 39. JavaScript 39 Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi • Top - Cöa sæ ë trªn cïng. • Window - Cöa sæ hiÖn thêi. 4.1.2. C¸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 l−a 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,widt h=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>
  • 40. JavaScript 40 Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi H×nh 6.3: Minh ho¹ cho ®èi t−îng cöa sæ 4.1.3. C¸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¸c thuéc tÝnh cña ®èi t−îng location duy tr× c¸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¸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¸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). • 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¸c script CGI.
  • 41. JavaScript 41 Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi §èi t−îng frame Mét cöa sè cã thÓ cã mét vµi frame. C¸c frame cã thÓ cuén mét c¸ch ®éc lËp víi nhau vµ mçi frame cã URL riªng. frame kh«ng cã c¸c ch−¬ng tr×nh xö lý sù kiÖn. Sù kiÖn onLoad vµ onUnLoad lµ cña ®èi t−îng window. 4.1.4. C¸c thuéc tÝnh • frames - M¶ng tÊt c¶ c¸c frame trong cöa sæ. • Name - Thuéc tÝnh NAME cña thÎ <FRAME> • Length - Sè l−îng c¸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. 4.1.5. C¸c ph−¬ng thøc • 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¸c frame trong mét trang. VÝ dô1: t¹o frame ( h×nh 17) <HTML> <HEAD> <TITLE>Frame Example </TITLE> <FRAMESET ROWS="90%,10%"> <FRAMESET COLS="30%,70%"> <FRAME SRC=CATEGORY.HTM NAME="ListFrame"> <FRAME SRC=TITLES.HTM NAME="contentFrame"> </FRAMESET > <FRAME SRC=NAVIGATOR.HTM NAME="navigateFrame"> </FRAMESET > </HEAD> <BODY> </BODY> </HTML> S¬ ®å sau hiÓn thÞ cÊu tróc cña c¸c frame: C¶ 3 frame ®Òu trªn cïng mét cöa sæ cha, mÆc dï 2 trong sè c¸c frame ®ã n»m trong mét frameset kh¸c. Top listFrame (category.html) contentFrame (titles.html) navigatorFrame (navigator.html)
  • 42. JavaScript 42 Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi B¹n cã thÓ gäi tíi nh÷ng frame tr−íc ®ã b»ng c¸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] 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 nh−ng 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> <TITLE>Frame Example </TITLE> <FRAMESET ROWS="90%,10%"> <FRAME SRC=muske13.HTML NAME="upperFrame"> <FRAME SRC=NAVIGATOR.HTM NAME="navigateFrame"> </FRAMESET > </HEAD> <BODY> </BODY> </HTML> Trong file muske13.html l¹i tiÕp tôc ®Æt mét frameset: <HTML> <HEAD> <TITLE>Frame Example </TITLE> <FRAMESET COLS="30%,70%"> <FRAME SRC=CATEGORY.HTM NAME="ListFrame">
  • 43. JavaScript 43 Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi <FRAME SRC=TITLES.HTM NAME="contentFrame"> </FRAMESET > </HEAD> <BODY> </BODY> </HTML> Khi ®ã kÕt qu¶ hiÓn thÞ cña vÝ dô 2 gièng vÝ dô 1 nh−ng sù ph©n cÊp cña c¸c frames l¹i kh¸c h¼n: B¹n cã thÓ gäi tíi c¸c frame trªn b»ng c¸ch sö dông thuéc tÝnh m¶ng frames nh− sau: 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 c¸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 ch−a bao giê tån t¹i. §èi t−îng document §èi t−îng nµy chøa c¸c th«ng tin vÒ document hiÖn thêi vµ cung cÊp c¸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¸c thuéc tÝnh g¾n víi thÎ <BODY>. C¸c ®èi t−îng anchor, forms, history, links lµ thuéc tÝnh cña ®èi t−îng document. Kh«ng cã c¸c ch−¬ng tr×nh xö lý sù kiÖn cho c¸c frame. Sù kiÖn onLoad vµ onUnLoad lµ cho ®èi t−îng window. 4.1.7. C¸c thuéc tÝnh • alinkColor - Gièng nh− thuéc tÝnh ALINK. top upperFrame (muske13.html) navigatorFrame (navigator.html) listFrame (category.html) contentFrame (titles.html)
  • 44. JavaScript 44 Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi • anchor - M¶ng tÊt c¶ 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¸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¸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. 4.1.8. C¸c ph−¬ng thøc • 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¸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 nh−ng 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 c¸ch: document.anchors [index] M¶ng anchor cã mét thuéc tÝnh duy nhÊt lµ length x¸c ®Þnh sè l−îng c¸c anchor trong document, nã cã thÓ ®−îc x¸c ®Þnh nh− sau: document.anchors.length. §èi t−îng forms C¸c form ®−îc t¹o ra nhê cÆp thÎ <FORM> vµ </FORM>. PhÇn lín c¸c thuéc tÝnh cña ®èi t−îng form ph¶n ¸nh c¸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
  • 45. JavaScript 45 Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi password radio reset select submit text textarea C¸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¸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] 4.1.9. C¸c thuéc tÝnh action thuéc tÝnh ACTION cña thÎ FORM. elements M¶ng chøa tÊt c¶ 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¸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 4.1.10. C¸c ph−¬ng thøc 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. 4.1.11. C¸c ch−¬ng tr×nh xö lý sù kiÖn 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 ®Ó l−u gi÷ c¸c th«ng tin vÒ c¸c URL tr−íc ®−îc ng−êi sö dông sö dông. Danh s¸ch c¸c URL ®−îc l−u tr÷ theo thø tù thêi gian. §èi t−îng nµy kh«ng cã ch−¬ng tr×nh xö lý sù kiÖn. 4.1.12. C¸c thuéc tÝnh length - Sè l−îng c¸c URL trong ®èi t−îng. 4.1.13. C¸c ph−¬ng thøc • history.back() - §−îc sö dông ®Ó tham chiÕu tíi URL míi ®−îc th¨m tr−íc ®©y.
  • 46. JavaScript 46 Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi • 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¸c thuéc tÝnh cña ®èi t−îng link chñ yÕu xö lý vÒ URL cña c¸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¸c liªn kÕt trong document. Cã thÓ x¸c ®Þnh sè l−îng c¸c link qua document.links.length() Cã thÓ tham chiÕu tíi mét liªn kÕt qña document.links [index] §Ó x¸c ®Þnh c¸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 4.1.14. C¸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ô 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¸c script CGI. • Target - Gièng thuéc tÝnh TARGET cña <LINK>. 4.1.15. C¸c ch−¬ng tr×nh xö lý sù kiÖn • 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¸c thuéc tÝnh cña ®èi t−îng nµy chøa nhiÒu h»ng sè to¸n häc, 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¸c ph−¬ng thøc cã thÓ lµ sè hay c¸c biÓu thøc ®−îc ®n¸h gi¸ lµ sè hîp lÖ.
  • 47. JavaScript 47 Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi 4.1.16. C¸c thuéc tÝnh • 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. • 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. 4.1.17. C¸c ph−¬ng thøc • 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. §è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¸c ph−¬ng thøc date ®Òu cã mét ®èi t−îng Date ®i cïng. C¸c ph−¬ng thøc giíi thiÖu trong phÇn nµy sö dông ®èi t−îng Date dateVar, vÝ dô:
  • 48. JavaScript 48 Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi dateVar = new Date ('August 16, 1996 20:45:04'); 4.1.18. C¸c ph−¬ng thøc • 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¸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¸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. • 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. 4.1.19. C¸c ph−¬ng thøc • str.anchor (name) - §−îc sö dông ®Ó t¹o ra thÎ <A> (mét c¸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.
  • 49. JavaScript 49 Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi • 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>. • str.substring(a,b) - Tr¶ l¹i chuçi con cña str lµ c¸c ký tù tõ vÞ trÝ thø a tíi vÞ trÝ thø b. C¸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¸c phÇn tö cña ®èi t−îng Form Form ®−îc t¹o bëi c¸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¸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¸c phÇn tö cña form vµ c¸c gi¸ trÞ cña chóng. B¶ng ?: C¸c phÇn tö cña form PhÇn tö M« t¶ button Lµ mét nót bÊm h¬n lµ nót submit hay nót reset (<INPUT TYPE="button">) checkbox Mét checkbox (<INPUT TYPE="checkbox">) FileUpload Lµ mét phÇn tö t¶i file lªn cho phÐp ng−êi sö dông göi lªn mét file (<INPUT TYPE="file">) hidden Mét tr−êng Èn (<INPUT TYPE="hidden">) password Mét tr−êng text ®Ó nhËp mËt khÈu mµ tÊt c¶ c¸c ký tù nhËp vµo ®Òu hiÓn thÞ lµ dÊu (*)(<INPUT TYPE="password">)
  • 50. JavaScript 50 Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi radio Mét nót bÊm (<INPUT TYPE="radio">) reset Mét nót reset(<INPUT TYPE="reset">) select Mét danh s¸ch lùa chän (<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">) textArea Mét tr−êng text cho phÐp nhËp vµp nhiÒu dßng <TEXTAREA>default text</TEXTAREA>) 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¸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µ l−u 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µ c¸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.
  • 51. JavaScript 51 Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi 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> <SCRIPT LANGUAGE="JavaScript"> <!-- HIDE FROM OTHER BROWSERS function calculate(form) { form.results.value = eval(form.entry.value); } // STOP HIDING FROM OTHER BROWSERS --> </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¸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¸c checkbox cã nhiÒu thuéc tÝnh vµ c¸ch thøc h¬n button. B¶ng d−íi ®©y lµ danh s¸ch c¸c thuéc tÝnh vµ c¸c c¸ch thøc cña phÇn tö checkbox. B¶ng . C¸c thuéc tÝnh vµ c¸ch thøc cña phÇn tö checkbox. C¸ch thøc vµ thuéc tÝnh M« t¶ 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 (C¸ch thøc) PhÇn tö checkbox chØ cã mét thÎ sù kiÖn lµ onClick
  • 52. JavaScript 52 Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi 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> <!-- HIDE FROM OTHER BROWSERS 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 // STOP HIDING FROM OTHER BROWSERS --> </SCRIPT> </HEAD> <BODY> <FORM METHOD=POST> Value: <INPUT TYPE="text" NAME="entry" VALUE=0 onChange="calculate(this.form,this.name);"> <BR> Action (default double): <INPUT TYPE=checkbox NAME=square onClick="calculate(this.form,this.name);"> Square <BR> Result: <INPUT TYPE="text" NAME="result" VALUE=0 onChange="calculate(this.form,this.name);"> </FORM> </BODY> </HTML>
  • 53. JavaScript 53 Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi Trong script nµy, b¹n ®· thÊy c¸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: 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; } // end if (3) } // end if (1) } 4.1.23. PhÇn tö File Upload PhÇn tö nµy cung cÊp cho form mét c¸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¸c ®èi t−îng kh¸c. Kh«ng cã 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¸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 ®Ó l−u c¸c gi¸ trÞ cÇn thiÕt ®Ó göi tíi server song song víi sù xuÊt ra tõ form (form submission) nh−ng nã kh«ng ®−îc hiÓn thÞ trªn trang. Mäi ng−êi cã thÓ sö dông trong JavaScript ®Ó l−u c¸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¸c ®èi t−îng kh¸c. Kh«ng cã c¸ch thøc hay thÎ sù kiÖn nµo cho ®èi t−îng nµy.
  • 54. JavaScript 54 Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi 4.1.25. PhÇn tö Password §èi t−îng Password lµ ®èi t−îng duy nhÊt trong c¸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 c¸ch thøc h¬n(focus(), blur(), and select() ) vµ t−¬ng øng víi c¸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¸c nót radio l¹i b»ng c¸ch ®Æt cho chóng cã cïng mét tªn trong c¸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¸c thuéc tÝnh vµ c¸ch thøc cña ®èi t−îng radio. B¶ng? . C¸c thuéc tÝnh vµ c¸ch thøc cña ®èi t−îng radio. Thuéc tÝnh vµ c¸ch thøc M« t¶ 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Î INPUT (thuéc tÝnh) 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 (c¸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¸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â c¸ch dïng ®èi t−îng radio, ta xem vÝ dô sau: VÝ dô: <HTML> <HEAD> <TITLE>radio button Example</TITLE> <SCRIPT>
  • 55. JavaScript 55 Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi <!-- HIDE FROM OTHER BROWSERS function calculate(form,callingField) { if (callingField == "result") { if (form.action[1].checked) { form.entry.value = Math.sqrt(form.result.value); } else { form.entry.value = form.result.value / 2; } } else { if (form.action[1].checked) { form.result.value=form.entry.value*form.entry.value; } else { form.result.value = form.entry.value * 2; } } } // STOP HIDING FROM OTHER BROWSERS --> </SCRIPT> </HEAD> <BODY> <FORM METHOD=POST> Value: <INPUT TYPE="text" NAME="entry" VALUE=0 onChange="calculate(this.form,this.name);"> <BR> Action:<BR> <INPUT TYPE="radio" NAME="action" VALUE="twice" onClick="calculate(this.form,this.name);"> Double<BR> <INPUT TYPE="radio" NAME="action" VALUE="square" onClick="calculate(this.form,this.name);"> Square <BR> Result: <INPUT TYPE=text NAME="result" VALUE=0 onChange="calculate(this.form,this.name);"> </FORM> </BODY> </HTML> Trong vÝ dô 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¸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 c¸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.
  • 56. JavaScript 56 Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi 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 c¸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. VÝ dô sau minh ho¹ c¸ch sö dông nót reset ®Ó xo¸ c¸c gi¸ trÞ cña form. VÝ dô: <HTML> <HEAD> <TITLE>reset Example</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- HIDE FROM OTHER BROWSERS function clearForm(form) { form.value1.value = "Form"; form.value2.value = "Cleared"; } // STOP HIDING FROM OTHER BROWSERS --> //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¸c form HTML xuÊt hiÖn menu drop-down hoÆc danh s¸ch cuén ®−îc cña c¸c ®èi t−îng cã thÓ ®−îc lùa chän. C¸c danh d¸ch ®−îc x©y dùng b»ng c¸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
  • 57. JavaScript 57 Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi <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¸c button vµ radio. Víi c¸c thµnh phÇn lùa chän, danh s¸ch c¸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¸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¸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¸c th«ng tin sau: example.options[1].value = "The Second" example.options[2].text = "3" example.selectedIndex = 0 example.options[0].defaultSelected = true example.options[1].selected = false 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"
  • 58. JavaScript 58 Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi example.selectedIndex = 1 example.options[0].defaultSelected = true example.options[1].selected = true Söa c¸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 c¸ch liªn kÕt c¸c gi¸ trÞ míi cho thuéc tÝnh text cña c¸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¸c lùa chän míi vµo danh s¸ch b»ng c¸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¸c lùa chän cã thÓ bÞ xo¸ trong danh s¸ch lùa chän b»ng c¸ch g¾n gi¸ trÞ null cho ®èi t−îng muèn xo¸ selectListName.options[index] = null; 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¸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 c¸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, c¸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¸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, nh−ng c¸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 c¸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¸c sù kiÖn nµy chØ thùc hiÖn khi con trá ®· ®−îc kÝch ra ngoµi tr−êng text.
  • 59. JavaScript 59 Khoa C«ng nghÖ, §¹i häc Quèc gia Hµ Néi B¶ng sau m« t¶ c¸c thuéc tÝnh vµ c¸ch thøc cña ®èi t−îng text. B¶ng .C¸c thuéc tÝnh vµ c¸ch thøc cña ®èi t−îng text. C¸ch thøc vµ thuéc tÝnh M« t¶ 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Î INPUT (thuéc tÝnh) 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 (c¸ch thøc) blur() M« t¶ viÖc con trá rêi tr−êng text (c¸ch thøc) select() M« t¶ viÖc lùa chän dßng text trong tr−êng text (c¸ch thøc) Mét chó ý quan träng lµ cã thÓ g¸n gi¸ trÞ cho tr−êng text b»ng c¸ch liªn kÕt c¸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¸c tr−êng text . <HTML> <HEAD> <TITLE>text Example</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- HIDE FROM OTHER BROWSERS function echo(form,currentField) { if (currentField == "first") form.second.value = form.first.value; else form.first.value = form.second.value; } // STOP HIDING FROM OTHER BROWSERS --> </SCRIPT> </HEAD> <BODY> <FORM> <INPUT TYPE=text NAME="first" onChange="echo(this.form,this.name);">