Giáo trình JavaScript
JavaScript
1
Gi¸o tr×nh JavaScript
***
ch-¬ng 1 Lêi nãi ®Çu................................................................................................................4
2.1.Nhóng JavaScript vµo file HTML......................................................................................5
2.3. ThÎ <NOScript> vµ </NOSCRIPT>.................................................................................6
2.4. Giao tiÕp víi ng-êi sö dông.............................................................................................9
3.1. BiÕn vµ ph©n lo¹I biÕn...................................................................................................13
3.3. KiÓu d÷ liÖu....................................................................................................................13
G¸n.......................................................................................................................16
Bµi tËp..........................................................................................................................................19
Tr¶ lêi....................................................................................................................19
Khoa Toan tin, §¹i häc Quèc gia Hµ Néi
JavaScript
2
for...in....................................................................................................................23
3.1.10. parseInt.................................................................................................................30
3.1.11. parseFloat.............................................................................................................31
Bµi tËp..........................................................................................................................................37
3.1.12. C©u hái .................................................................................................................37
3.1.13. Tr¶ lêi....................................................................................................................39
C¸c thuéc tÝnh.......................................................................................................45
C¸c ph-¬ng thøc...................................................................................................46
C¸c ch-¬ng tr×nh xö lý sù kiÖn..............................................................................47
§èi t-îng location................................................................................................................47
C¸c thuéc tÝnh.......................................................................................................48
C¸c ph-¬ng thøc...................................................................................................48
Sö dông Frame.....................................................................................................48
C¸c thuéc tÝnh.......................................................................................................51
C¸c ph-¬ng thøc...................................................................................................51
C¸c thuéc tÝnh.......................................................................................................52
4.1.10. C¸c ph-¬ng thøc...................................................................................................52
4.1.11. C¸c ch-¬ng tr×nh xö lý sù kiÖn..............................................................................52
4.1.12. C¸c thuéc tÝnh.......................................................................................................53
4.1.13. C¸c ph-¬ng thøc...................................................................................................53
§èi t-îng links........................................................................................................................53
Khoa Toan tin, §¹i häc Quèc gia Hµ Néi
JavaScript
3
4.1.14. C¸c thuéc tÝnh.......................................................................................................53
4.1.15. C¸c ch-¬ng tr×nh xö lý sù kiÖn..............................................................................54
4.1.16. C¸c thuéc tÝnh.......................................................................................................54
4.1.17. C¸c ph-¬ng thøc...................................................................................................54
4.1.18. C¸c ph-¬ng thøc...................................................................................................55
4.1.19. C¸c ph-¬ng thøc...................................................................................................56
4.1.20. Thuéc tÝnh type .....................................................................................................58
4.1.21. PhÇn tö button ......................................................................................................58
4.1.22. PhÇn tö checkbox .................................................................................................59
4.1.23. PhÇn tö File Upload ..............................................................................................61
4.1.24. PhÇn tö hidden......................................................................................................61
4.1.25. PhÇn tö Password.................................................................................................61
4.1.26. PhÇn tö radio ........................................................................................................62
4.1.27. PhÇn tö reset ........................................................................................................64
4.1.28. PhÇn tö select.......................................................................................................64
Sö dông khëi t¹o ®èi t-îng...................................................................................75
LËp môc lôc cho c¸c thuéc tÝnh cña ®èi t-îng......................................................77
Xo¸ ®èi t-îng........................................................................................................79
Khoa Toan tin, §¹i häc Quèc gia Hµ Néi
JavaScript
4
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.
Khoa Toan tin, §¹i häc Quèc gia Hµ Néi
JavaScript
5
Ch-¬ng 2 NhËp m«n JavaScript
2.1.Nhóng JavaScript vµo file HTML
B¹n cã thÓ nhóng JavaScript vµo mét file HTML theo mét trong c¸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
Chó ý:
Ghi chó kh«ng ®-îc
®Æt trong cÆp thÎ
<- vµ -> nh- ghi
®Æ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.
chó
HTML. Có ph¸p cña
JavaScript t-¬ng
tù có ph¸p cña C
nªn cã thÓ sö dông
// hay /* ... */.
trong
file
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.
Khoa Toan tin, §¹i häc Quèc gia Hµ Néi
JavaScript
6
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ô:
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.
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 ®ã.
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
§iÒu
nµy
cho
phÐp
script nhËn ra x©u ký
tù ®ã.
file mime.typestrong ®-ê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.
Khoa Toan tin, §¹i häc Quèc gia Hµ Néi
JavaScript
7
VÝ dô:
<NOSCRIPT>
<B> Trang nµy cã sö dông JavaScript. Do ®ã b¹n cÇn sö dông tr×nh duyÖt Netscape
Navigator tõ version 2.0 trë ®i!
<BR>
<A HREF="http://home.netscape.com/comprd/mirror/index.html">
H·y kÝch chuét vµo ®©y ®Ó t¶i vÒ phiªn b¶n Netscape míi h¬n
</A>
</BR>
NÕu b¹n ®· sö dông tr×nh duyÖt Netscape tõ 2.0 trë ®i mµ vÉn ®äc ®-îc dßng ch÷ nµy th×
h·y bËt Preferences/Advanced/JavaScript lªn
</NOSCRIPT>
H×nh 2.3: Minh ho¹ thÎ NOSCRIPT
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.
Khoa Toan tin, §¹i häc Quèc gia Hµ Néi
JavaScript
8
§èi t-îng documenttrong 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 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>
Khoa Toan tin, §¹i häc Quèc gia Hµ Néi
JavaScript
9
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>
</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");
Khoa Toan tin, §¹i häc Quèc gia Hµ Néi
JavaScript
10
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 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>
Khoa Toan tin, §¹i häc Quèc gia Hµ Néi
JavaScript
11
Khi duyÖt cã kÕt qu¶:
H×nh2.1: HiÓn thÞ cöa sæ nhËp tªn
VÝ dô nµy hiÓn thÞ dÊu nh¾c nhËp vµo tªn víi ph-¬ng thøc window.prompt. Gi¸ trÞ ®¹t
®-îc sÏ ®-îc ghi trong biÕn cã tªn lµ name.
BiÕn name ®-îc kÕt hîp víi c¸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×nh 2.2: HiÓn thÞ lêi chµo ng-êi nhËp
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.
Khoa Toan tin, §¹i häc Quèc gia Hµ Néi
JavaScript
12
2.5. §iÓm l¹i c¸c lÖnh vµ më réng
LÖnh/Më réng
SCRIPT
KiÓu
thÎ HTML
M« t¶
Hép chøa c¸c lÖnh JavaScript
Thuéc tÝnh
cña thÎ
Gi÷ ®Þa chØ cña file JavaScript bªn ngoµi. File nµy
ph¶i cã phÇn ®u«i .js
SRC
SCRIPT
thuéc tÝnh
cña thÎ
§Þnh râ ng«n ng÷ script ®-îc sö dông (JavaScript
hoÆc VBScript)
LANGUAGE
SCRIPT
Ghi chó trong §¸nh dÊu ghi chó mét dßng trong ®o¹n script
JavaScript
//
Ghi chó trong §¸nh dÊu ghi chó mét khèi trong ®o¹n script
JavaScript
/*...*/
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.write()
document.writeln()
alert()
C¸ch thøc
JavaScript
T-¬ng tù c¸ch thøc document.write() nh-ng viÕt
xong tù xuèng dßng.
C¸ch thøc
cña
HiÓn thÞ mét dßng th«ng b¸o trªn hép héi tho¹i
JavaScript
C¸ch thøc
JavaScript
HiÓn thÞ mét dßng th«ng b¸o trong hép héi tho¹i
®ång thêi cung cÊp mét tr-êng nhËp d÷ liÖu ®Ó
ng-êi sö dông nhËp vµo.
promt()
Khoa Toan tin, §¹i häc Quèc gia Hµ Néi
JavaScript
13
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è:
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
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>
Khoa Toan tin, §¹i häc Quèc gia Hµ Néi
JavaScript
14
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.
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:
H×nh 3.1: KÕt qu¶ cña xö lý d÷ liÖu
• PhÇn nguyªn thËp ph©n.
• DÊu chÊm thËp ph©n (.).
• PhÇn d-.
• PhÇn mò.
Khoa Toan tin, §¹i häc Quèc gia Hµ Néi
JavaScript
15
§Ó ph©n biÖt kiÓu dÊu phÈy ®éng víi kiÓu sè nguyªn, ph¶i cã Ýt nhÊt mét ch÷ sè theo sau
dÊu chÊm hay E. VÝ dô:
9.87
-0.85E4
9.87E14
.98E-3
1.1.3. KiÓu logic (Boolean)
KiÓu logic ®-îc sö dông ®Ó chØ hai ®iÒu kiÖn : ®óng hoÆc sai. MiÒn gi¸ trÞ cña kiÓu nµy chØ
cã hai gi¸ trÞ
• true.
• false.
1.1.4. KiÓu chuçi (String)
Mét literal kiÓu chuçi ®-îc biÓu diÔn bëi kh«ng hay nhiÒu ký tù ®-îc ®Æt trong cÆp dÊu "
... " hay '... '. VÝ dô:
“The dog ran up the tree”
‘The dog barked’
“100”
§Ó biÓu diÔn dÊu nh¸y kÐp ( " ), trong chuçi sö dông ( \" ), vÝ dô:
document.write(“ \”This text inside quotes.\” ”);
Khoa Toan tin, §¹i häc Quèc gia Hµ Néi
JavaScript
16
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
x = x + y
KiÓu g¸n rót gän
x + = y
x = x - y
x = x * y
x = x / y
x = x % y
x - = y
x * = y
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:
Khoa Toan tin, §¹i häc Quèc gia Hµ Néi
JavaScript
17
Tr¶ l¹i gi¸ trÞ ®óng nÕu to¸n h¹ng bªn tr¸i b»ng to¸n h¹ng bªn ph¶i
Tr¶ l¹i gi¸ trÞ ®óng nÕu to¸n h¹ng bªn tr¸i kh¸c to¸n h¹ng bªn ph¶i
Tr¶ l¹i gi¸ trÞ ®óng nÕu to¸n h¹ng bªn tr¸i lín h¬n to¸n h¹ng bªn ph¶i
==
!=
>
Tr¶ l¹i gi¸ trÞ ®óng nÕu to¸n h¹ng bªn tr¸i lín h¬n hoÆc b»ng to¸n
h¹ng bªn ph¶i
>=
Tr¶ l¹i gi¸ trÞ ®óng nÕu to¸n h¹ng bªn tr¸i nhá h¬n to¸n h¹ng bªn
ph¶i
<
Tr¶ l¹i gi¸ trÞ ®óng nÕu to¸n h¹ng bªn tr¸i nhá h¬n hoÆc b»ng to¸n
h¹ng bªn ph¶i
<=
2.1.3. Sè häc
Bªn c¹nh c¸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:
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
To¸n tö nµy t¨ng var lªn 1 (cã thÓ biÓu diÔn lµ ++var)
To¸n tö nµy gi¶m var ®i 1 (cã thÓ biÓu diÔn lµ --var)
var1% var2
-
var++
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.1.4. Chuçi
Khi ®-îc sö dông víi chuçi, to¸n tö + ®-îc coi lµ kÕt hîp hai chuçi,
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.
Khoa Toan tin, §¹i häc Quèc gia Hµ Néi
JavaScript
18
expr1 || expr2
! expr
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.
Lµ to¸n tö logic NOT phñ ®Þnh gi¸ trÞ cña expr.
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
x = x << y
KiÓu bitwise rót gän
x << = y
x = x >> y
x - >> y
x >>> = y
x & = y
x ^ = y
x = x >>> y
x = x & y
x = x ^ y
x = x | y
x | = y
Khoa Toan tin, §¹i häc Quèc gia Hµ Néi
JavaScript
19
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
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
Khoa Toan tin, §¹i häc Quèc gia Hµ Néi
JavaScript
20
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.”);
Chó ý
Ký tù { vµ } ®-îc sö dông ®Ó t¸ch c¸c khèi m·.
Khoa Toan tin, §¹i häc Quèc gia Hµ Néi
Tải về để xem bản đầy đủ
82 trang
07/05/2022
7280
Bạn đang xem 20 trang mẫu của tài liệu "Giáo trình JavaScript", để tải tài liệu gốc về máy hãy click vào nút Download ở trên
File đính kèm:
- giao_trinh_javascript.doc
