Professional Documents
Culture Documents
Huong Dan Hoc Javascript Co Ban Nang Cao
Huong Dan Hoc Javascript Co Ban Nang Cao
<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.
<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ú
Chó ý
thÎ HTML nµo. Chóng chØ ®îc chøa c¸c c©u lÖnh
JavaScript vµ ®Þnh nghÜa hµm. Khi b¹n muèn chØ ra mét x©u
trÝch dÉn trong mét x©u kh¸c
Tªn file cña c¸c hµm JavaScript bªn ngoµi cÇn cã ®u«i cÇn sö dông dÊu nh¸y ®¬n ( ' )
.js, vµ server sÏ ph¶i ¸nh x¹ ®u«i .js ®ã tíi kiÓu MIME ®Ó ph©n ®Þnh x©u ®ã. §iÒu
application/x-javascript. §ã lµ nh÷ng g× mµ server göi nµy cho phÐp script nhËn ra
x©u ký tù ®ã.
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+"%>")
}
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!
<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>
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');
C¸ch thøc write() xuÊt ra mµn h×nh x©u Text nhng 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>
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ô cha 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ø cha 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 b¹n ®a vµo, nhng 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 lu vµo file Hello.html
<HTML>
<HEAD>
<TITLE> JavaScript Exemple </TITLE>
<SCRIPT LANGUAGE= “JavaScript”>
var name=window.prompt(“Hello! What’s your name ?”,””);
document.write(“Hello ” + name + “ ! I hope you like JavaScript ”);
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
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.
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.
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:
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.
§Ó ph©n biÖt kiÓu dÊu phÈy ®éng víi kiÓu sè nguyªn, ph¶i cã Ýt nhÊt mét ch÷ sè theo
sau dÊu chÊm hay E. VÝ dô:
9.87
-0.85E4
9.87E14
.98E-3
§Ó biÓu diÔn dÊu nh¸y kÐp ( " ), trong chuçi sö dông ( \" ), vÝ dô:
document.write(“ \”This text inside quotes.\” ”);
2.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.
2.2. So s¸nh
Ngêi ta sö dông to¸n tö so s¸nh ®Ó so s¸nh hai to¸n h¹ng vµ tr¶ l¹i gi¸ trÞ ®óng hay sai
phô thuéc vµo kÕt qu¶ so s¸nh. Sau ®©y lµ mét sè to¸n tö so s¸nh trong JavaScript:
== Tr¶ l¹i gi¸ trÞ ®óng nÕu to¸n h¹ng bªn tr¸i b»ng to¸n h¹ng bªn ph¶i
!= Tr¶ l¹i gi¸ trÞ ®óng nÕu to¸n h¹ng bªn tr¸i kh¸c to¸n h¹ng bªn ph¶i
> Tr¶ l¹i gi¸ trÞ ®óng nÕu to¸n h¹ng bªn tr¸i lín h¬n to¸n h¹ng bªn ph¶i
>= Tr¶ l¹i gi¸ trÞ ®óng nÕu to¸n h¹ng bªn tr¸i lín h¬n hoÆc b»ng to¸n
h¹ng bªn ph¶i
< Tr¶ l¹i gi¸ trÞ ®óng nÕu to¸n h¹ng bªn tr¸i nhá h¬n to¸n h¹ng bªn ph¶i
<= Tr¶ l¹i gi¸ trÞ ®óng nÕu to¸n h¹ng bªn tr¸i nhá h¬n hoÆc b»ng to¸n
h¹ng bªn ph¶i
2.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)
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.
2.4. Chuçi
Khi ®îc sö dông víi chuçi, to¸n tö + ®îc coi lµ kÕt hîp hai chuçi,
vÝ dô:
"abc" + "xyz" ®îc "abcxyz"
2.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.
2.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.
Bµi tËp
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.
Chó ý
Ký tù { vµ } ®îc sö dông ®Ó t¸ch c¸c khèi m·.
3.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.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.4. continue
LÖnh continue gièng lÖnh break nhng kh¸c ë chç viÖc lÆp ®îc kÕt thóc vµ b¾t ®Çu tõ
®Çu vßng lÆp. §èi víi vßng lÆp while, lÖnh continue ®iÒu khiÓn quay l¹i <®iÒu
kiÖn>; víi for, lÖnh continue ®iÒu khiÓn quay l¹i incrExpr.
Có ph¸p
continue;
VÝ dô:
§o¹n m· sau t¨ng x tõ 0 lªn 5, nh¶y lªn 8 vµ tiÕp tôc t¨ng lªn 10
x=0;
while (x<=10)
{
document.write(“Gi¸ trÞ cña x lµ:”+ x+”<BR>”);
if (x=5)
{
x=8;
continue;
}
x++;
}
3.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>
3.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");
3.7. this
Tõ kho¸ this ®îc sö dông ®Ó chØ ®èi tîng hiÖn thêi. §èi tîng ®îc gäi thêng lµ ®èi tîng
hiÖn thêi trong ph¬ng thøc hoÆc trong hµm.
Có ph¸p
this [.property]
Cã thÓ xem vÝ dô cña lÖnh new.
3.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>
this.first_name=first_name;
this.last_name=last_name;
this.age=age;
this.sex=sex;
this.printStats=printStats;
}
function printStats() {
with (document) {
write (" Name :" + this.last_name + " " + this.first_name + "<BR>" );
write("Age :"+this.age+"<BR>");
write("Sex :"+this.sex+"<BR>");
}
}
person1= new person("Thuy", "Dau Bich", "23", "Female");
person2= new person("Chung", "Nguyen Bao", "24", "Male");
person3= new person("Binh", "Nguyen Nhat", "24", "Male");
person4= new person("Hoan", "Do Van", "23", "Male");
person1.printStats();
person2.printStats();
person3.printStats();
person4.printStats();
</SCRIPT>
</HEAD>
<BODY> </BODY>
</HTML>
3.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>
<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>
3.11. parseFloat
Hµm nµy gièng hµm parseInt nhng nã chuyÓn chuçi thµnh sè biÓu diÔn díi d¹ng dÊu
phÈy ®éng.
Có ph¸p
parseFloat (string)
VÝ dô:
VÝ dô sau minh ho¹ 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>
M¶ng (Array)
MÆc dï JavaScript kh«ng hç trî cÊu tróc d÷ liÖu m¶ng nhng Netscape t¹o ra ph¬ng thøc
cho phÐp b¹n tù t¹o ra c¸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"
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:
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).
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.
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>
function CheckAge(form) {
if ( (form.AGE.value<0)||(form.AGE.value>120) )
alert("Tuæi nhËp vµo kh«ng hîp lÖ! Mêi b¹n nhËp l¹i");
form.AGE.value=0;
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="PHIEU_DIEU_TRA">
<P>
<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">
<P>
<INPUT TYPE=SUBMIT>
<INPUT TYPE=RESET>
</FORM>
</BODY>
</HTML>
Bµi tËp
</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;
}
</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");
}
}
// 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, lu tªn ®ã vµo biÕn toµn côc name. Khi ngêi sö dông sang mét ®Þa chØ
URL kh¸c, hµm farewell() sÏ thùc hiÖn göi mét lêi c¶m ¬n tíi ngêi sö dông.
5. Sö dông vßng lÆp while nh sau:
a.
j = 5;
while (--j > 0) {
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;
}
S¬ ®å sau sÏ minh ho¹ sù ph©n cÊp cña c¸c ®èi tîng nµy
Text
Plugin
Layer FileUpload
Frame
Mime Type
Link Password
Area Submit
Location
Anchor Reset
Applet Radio
History
Plugin Checkbox
Form Button
Select Option
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.
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>
Top
listFrame (category.html)
contentFrame
Khoa Toan tin, §¹i häc Quèc gia Hµ Néi (titles.html)
navigatorFrame (navigator.html)
JavaScript 47
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]
VÝ dô 2: Còng gièng nh mét sù lùa chän, b¹n cã thÓ t¹o ra mét cöa sæ gièng nh vÝ dô tríc
nhng trong mçi ®Ønh cña hai frame l¹i cã mét cöa sæ cha riªng tõ navigateFrame. Møc
frameset cao nhÊt cã thÓ ®îc ®Þnh nghÜa nh sau:
<HTML>
<HEAD>
<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>
<HEAD>
<TITLE>Frame Example </TITLE>
<FRAMESET COLS="30%,70%">
<FRAME SRC=CATEGORY.HTM NAME="ListFrame">
<FRAME SRC=TITLES.HTM NAME="contentFrame">
</FRAMESET >
</HEAD>
<BODY>
</BODY>
</HTML>
Khi ®ã kÕt qu¶ hiÓn thÞ cña vÝ dô 2 gièng vÝ dô 1 nhng sù ph©n cÊp cña c¸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]
top
listFrame (category.html)
upperFrame
(muske13.html)
contentFrame (titles.html)
navigatorFrame
(navigator.html)
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.
Search - C©u truy vÊn t×m kiÕm cã thÓ ë cuèi URL cho c¸c script CGI.
5. Target - Gièng thuéc tÝnh TARGET cña <LINK>.
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.
<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>
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
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>
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:
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>
<!-- 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.
§è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"
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:
t¬ng t¸c trªn c¸c gi¸ trÞ cña c¸c trêng trong hai form cïng mét lóc khi
ngêi sö dông thay ®æi gi¸ trÞ trªn mét form.
<HTML>
<HEAD>
<TITLE>forms[] Example</TITLE>
</HEAD>
<BODY>
<FORM METHOD=POST>
<INPUT TYPE=text
onChange="document.forms[1].elements[0].value = this.value;">
</FORM>
<FORM METHOD=POST>
<INPUT TYPE=text
onChange="document.forms[0].elements[0].value = this.value;">
</FORM>
</BODY>
</HTML>
MÆt kh¸c, b¹n còng cã thÓ truy nhËp ®Õn form b»ng tªn form ®îc
®Æt trong thÎ FORM:
<FORM METHOD=POST NAME="name">
Khi ®ã b¹n cã thÓ gäi lµ document.forms["name"] hoÆc
document.name
4. Xem l¹i c¸c lÖnh vµ më réng
LÖnh/ Më réng KiÓu M« t¶
blur() c¸ch thøc JavaScript M« t¶ viÖc dÞch chuyÓn con trá tõ
mét phÇn tö
form.action c¸ch thøc JavaScript X©u chøa gi¸ trÞ cña thuéc tÝnh
ACTION trong thÎ FORM
form.elemrnts thuéc tÝnh m¶ng chøa danh s¸ch c¸c phÇn tö
JavaScript trong form (nh checkbox, trêng text,
danh s¸ch lùa chän)
form.encoding thuéc tÝnh x©u chøa kiÓu MIME sö dông khi
JavaScript chuyÓn th«ng tin tõ form tíi server
form,name thuéc tÝnh X©u chøa gi¸ trÞ thuéc tÝnh NAME
(seledtion list)
options thuéc tÝnh M¶ng c¸c lùa chän trong danh s¸ch
JavaScript lùa chän
text thuéc tÝnh Dßng text hiÓn thÞ cho mét thµnh
JavaScript phÇn cña menu trong danh s¸ch lùa
chän
TABLE thÎ HTML Hép thÎ cho c¸c b¶ng HTML
TR thÎ HTML Hép thÎ cho c¸c hµng cña mét b¶ng
HTML
TD thÎ HTML Hép thÎ cho c¸c « cña mét hµng trong
mét b¶ng HTML
COLSPAN thuéc tÝnh HTML Lµ thuéc tÝnh cña thÎ TD m« t¶ trong
mét « cña b¶ng cã nhiÒu cét
ROWSPAN thuéc tÝnh HTML Lµ thuéc tÝnh cña thÎ TD m« t¶ trong
mét « cña b¶ng cã nhiÒu hµng
BODER thuéc tÝnh HTML Lµ thuéc tÝnh cña thÎ TABLE m« t¶
®é réng ®êng viÒn cña b¶ng
document.forms[] thuéc tÝnh m¶ng cña c¸c ®èi tîng form víi mét
JavaScript danh s¸ch c¸c form trong mét
document
string.substring() c¸ch thøc JavaScript Tr¶ l¹i mét x©u con cña x©u string tõ
tham sè vÞ trÝ ký tù ®Çu ®Õn vÞ
trÝ ký tù cuèi
Math.floor() c¸ch thøc JavaScript Tr¶ l¹i mét gi¸ trÞ nguyªn tiÕp theo
nhá h¬n gi¸ trÞ cña tham sè ®a vµo.
string.length thuéc tÝnh Gi¸ trÞ nguyªn cña sè thø tù ký tù cuèi
JavaScript cïng trong x©u string
C¶ tªn ®èi tîng vµ tªn thuéc tÝnh ®Òu nh¹y c¶m. B¹n ®Þnh nghÜa mét thuéc
tÝnh b»ng c¸ch g¸n cho nã mét gi¸ trÞ. VÝ dô, gi¶ sö cã mét ®èi tîng tªn lµ myCar (trong
trêng hîp nµy gi¶ sö ®èi tîng nµy ®· tån t¹i s½n sµng). B¹n cã thÓ lÊy c¸c thuéc tÝnh cã
tªn make, model vµ year cña nã nh sau:
myCar.make = “Ford“
myCar.model = “Mustang“
myCar.year = 69;
Cã mét m¶ng lu tr÷ tËp hîp c¸c gi¸ trÞ tham chiÕu tíi tõng biÕn. Thuéc tÝnh vµ
m¶ng trong JavaScript cã quan hÖ mËt thiÕt víi nhau, thùc ra chóng chØ kh¸c nhau vÒ
c¸ch giao tiÕp víi cïng mét cÊu tróc d÷ liÖu. VÝ dô còng cã thÓ truy nhËp tíi c¸c thuéc
tÝnh cña ®èi tîng myCar ë trªn b»ng m¶ng nh sau:
myCar[make] = “Ford“
myCar[model] = “Mustang“
myCar[year] = 69;
KiÓu m¶ng nµy ®îc hiÓu nh mét m¶ng cã kh¶ n¨ng liªn kÕt bëi mçi mét phÇn tö
trong ®ã ®Òu cã thÓ liªn kÕt ®Õn mét gi¸ trÞ x©u nµo ®ã. §Ó minh ho¹ viÖc mµy ® îc
thùc hiÖn nh thÕ nµo, hµm sau ®©y sÏ hiÓn thÞ c¸c thuéc tÝnh cña mét ®èi tîng th«ng
qua tham sè vÒ kiÓu ®èi tîng ®ã vµ tªn ®èi tîng.
function show_props (obj, obj_name)
{
var result=””
for (i in obj)
result=result+ obj_name + “.”+ i+ “=” + obj[i] + “\n”
return result
}
B¹n kh«ng cÇn ph¶i chØ ®Þnh râ tÊt c¶ c¸c phÇn tö trªn m¶ng míi. NÕu b¹n ®Æt
hai dÊu phÈy vµo hµng, th× m¶ng sÏ ®îc t¹o víi nh÷ng chèn trèng cho nh÷ng phÇn tö cha
®îc ®Þnh nghÜa nh vÝ dô díi ®©y:
NÕu mét m¶ng ®îc t¹o b»ng c¸ch khëi t¹o(initializer) ë møc cao nhÊt, mçi lÇn
m¶ng ®ã xuÊt hiÖn trong c¸c biÓu thøc, JavaScript sÏ ®¸nh gi¸ l¹i nã mét lÇn. Ngoµi ra,
nÕu sö dông viÖc khëi t¹o nµy trong mét hµm th× mçi lÇn gäi hµm, m¶ng sÏ ®îc khëi t¹o
mét lÇn
VÝ dô1: T¹o mét m¶ng coffees víi 3 phÇn tö vµ ®é dµi cña m¶ng lµ 3:
coffees = [“French Roast”,”Columbian”,”Kona”]
VÝ dô 2: T¹o ra mét m¶ng víi 2 phÇn tö ®îc khëi ®Çu vµ mét phÇn tö rçng:
fish = [“Lion”, ,” Surgeon”]
Víi biÓu thøc nµy, fish[0] lµ “Lion”, fish[2] lµ ” Surgeon”, vµ fish[2] cha ®îc
®Þnh nghÜa
this.sex=sex
}
Vµ sau ®ã ta t¹o ra hai ngêi míi:
rank = new person(“Rank McKinnon”,33,”M”)
ken = new person(“Ken John”,39,”M”)
B©y giê b¹n ®Þnh nghÜa l¹i hµm x©y dùng car nh sau:
function car(make, model, year,owner ){
this.make = make
this.model = model
this.year = year
this.owner = owner
}
Nh vËy b¹n cã thÓ t¹o ®èi tîng kiÓu car míi:
car1 = new car(“Eagle”,”Talon TSi”,1993,rank)
car2 = new car(“Nissan”,”300ZX”,1992,ken)
Nh vËy, thay v× ph¶i qua mét x©u ký tù hay mét gi¸ trÞ sè khi t¹o ®èi tîng, ta chØ cÇn
®a hai ®èi tîng ®· ®îc t¹o ë c©u lÖnh trªn vµo dßng tham sè cña ®èi tîng míi t¹o. Ta
còng cã thÓ lÊy ®îc thuéc tÝnh cña ®èi tîng owner b»ng c©u lªnh sau:
car2.owner.name
Chó ý r»ng b¹n còng cã thÓ t¹o ra mét thuéc tÝnh míi cho ®èi tîng tríc khi ®Þnh nghÜa
nã, vÝ dô:
car1.color=”black”
Nh vËy, thuéc tÝnh color cña ®èi tîng car1 ®îc g¸n lµ “black”. Tuy nhiªn, nã sÏ kh«ng
g©y t¸c ®éng tíi bÊt kú mét ®èi tîng kiÓu car nµo kh¸c. NÕu muèn thªm thuéc tÝnh cho
tÊt c¶ c¸c ®èi tîng th× ph¶i ®Þnh nghÜa l¹i hµm x©y dùng ®èi tîng.
6.3. LËp môc lôc cho c¸c thuéc tÝnh cña ®èi tîng
Trong Navigator 2.0, b¹n cã thÓ gäi thuéc tÝnh cña mét ®èi tîng b»ng tªn thuéc
tÝnh hoÆc b»ng sè thø tù cña nã. Tuy nhiªn tõ Navigator 3.0 trë ®i, nÕu ban ®Çu b¹n
®Þnh nghÜa mét thuéc tÝnh b»ng tªn cña nã, b¹n sÏ lu«n lu«n ph¶i gäi nã b»ng tªn, vµ
nÕu b¹n ®Þnh nghÜa mét thuéc tÝnh b»ng chØ sè th× b¹n còng lu«n lu«n ph¶i gäi tíi nã
b»ng chØ sè.
§iÒu nµy øng dông khi b¹n t¹o mét ®èi tîng víi nh÷ng thuéc tÝnh cña chóng b»ng
hµm x©y dùng (nh vÝ dô vÒ kiÓu ®èi tîng car ë phÇn tríc) vµ khi b¹n ®Þnh nghÜa
nh÷ng thuéc tÝnh cña riªng mét ®èi tîng (nh mycar.color=”red”). V× vËy nÕu b¹n ®Þnh
nghÜa c¸c thuéc tÝnh cña ®èi tîng ngay tõ ®Çu b»ng chØ sè nh mycar[5]=”25 mpg”, b¹n
cã thÓ lÇn lît gäi tíi c¸c thuéc tÝnh kh¸c nh mycar[5].
Tuy nhiªn ®iÒu nµy lµ kh«ng ®óng ®èi víi nh÷ng ®èi tîng t¬ng øng cña HTML
nh m¶ng form. B¹n cã thÓ gäi tíi c¸c ®èi tîng trong m¶ng bëi sè thø tù hoÆc tªn cña
chóng. VÝ dô thÎ <FORM> thø hai trong mét document cã thuéc tÝnh NAME lµ
“myform” th× b¹n cã thÓ gäi tíi form ®ã b»ng document.form[1] hoÆc
document.form[“myForm”] hoÆc document.myForm
6.4. §Þnh nghÜa thªm c¸c thuéc tÝnh cho mét kiÓu ®èi tîng
B¹n cã thÓ thªm thuéc tÝnh cho mét kiÓu ®èi tîng ®· ®îc ®Þnh nghÜa tríc b»ng
c¸ch sö dông thuéc tÝnh property. Thuéc tÝnh ®îc ®Þnh nghÜa nµy kh«ng chØ cã t¸c
dông ®èi víi mét ®èi tîng mµ cã t¸c dông ®èi víi tÊt c¶ c¸c ®èi tîng kh¸c cïng kiÓu.VÝ
dô sau thùc hiÖn thªm thuéc tÝnh color cho tÊt c¶ c¸c ®èi tîng kiÓu car, sau ®ã g¾n mét
gi¸ trÞ mµu cho thuéc tÝnh color cña ®èi tîng car1:
car.prototype.color=null
car1.color=”red”
Sau ®ã, b¹n cã thÓ gäi c¸ch thøc displayCar ®èi víi mçi ®èi tîng:
car1.displayCar()
car2.displayCar()
6.6. Sö dông cho c¸c tham chiÕu ®èi tîng (Object References)
JavaScript cã mét tõ kho¸ ®Æc biÖt lµ this mµ b¹n cã thÓ sö dông nã cïng víi mét
c¸ch thøc ®Ó gäi tíi ®èi tîng hiÖn thêi. VÝ dô, gi¶ sö b¹n cã mét hµm validate dïng ®Ó
x¸c nhËn gi¸ trÞ thuéc tÝnh cña mét ®èi tîng n»m trong mét kho¶ng nµo ®ã:
function validate(obj, lowval, hival){
if ( (obj.value<lowdate)||(obj.value>hival) )
alert(“Invalid value!”)
}
Sau ®ã b¹n cã thÓ gäi hµm validate tõ mçi thÎ sù kiÖn onChange:
<INPUT TYPE=”TEXT” NAME=”AGE” SIZE=3
onChange=”validate(this,18,99)” >
Khi liªn kÕt víi mét thuéc tÝnh form, tõ kho¸ this cã thÓ gäi tíi form cha cña ®èi
tîng hiÖn thêi. Trong vÝ dô sau, myForm cã chøa ®èi tîng Text vµ mét nót bÊm. Khi
ngêi sö dông kÝch vµo nót bÊm, trêng text sÏ hiÓn thÞ tªn form. ThÎ sù kiÖn onClick cña
nót bÊm sö dông this.form ®Ó gäi tíi form cha lµ myForm.
<FORM NAME=”myForm”>
Form name:<INPUT TYPE=”text” NAME=”text1” VALUE=”Beluga”>
<P>
<INPUT TYPE=”button” NAME=”button1”
value=”Show Form Name”
onClick=”this.form.text1.value=this.form.name”>
</FORM>
8. Tæng kÕt
Nh vËy, tµi liÖu kh«ng nh÷ng ®· giíi thiªu s¬ qua vÒ JavaScript, mµ nã cßn lµ s¸ch tham
kh¶o hÕt søc h÷u Ých ®Ó ph¸t triÓn øng dông cña b¹n.
B¹n cã thÓ tham kh¶o toµn diÖn JavaScript trong quyÓn Teach Yourself JavaScript in
14 Days, hoÆc JavaScript Guide
Do JavaScript lµ ng«n ng÷ cßn míi vµ cã sù thay ®æi nhanh chãng, b¹n nªn ®Õn víi trang
Web cña h·ng Netscape ( http://www.netscape.com ) ®Ó cã c¸c th«ng tin míi nhÊt vÒ
ng«n ng÷ nµy.