Tài liệu Java SCRIPT

JavaScript 1

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ø cha 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, nhng chóng vÉn lµ hai ng«n ng÷ riªng biÖt.

JavaScript lµ ng«n ng÷ díi d¹ng script cã thÓ g¾n víi c¸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 2

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 :

// 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

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

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>

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.

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.

Khoa Toan tin, §¹i häc Quèc gia Hµ Né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

VÝ dô:

<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>

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 5

§è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>

<!-- 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 6

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

<PRE>

<!-- 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 7

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>

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.

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

H×nh 2.2: H×nh2.1: HiÓn thÞ lêi chµo ngêi nhËp HiÓn thÞ cöa sæ nhËp tªn

Thư viện tri thức trực tuyến

Tài liệu đang bị lỗi

Nội dung xem thử

Mô tả chi tiết

Tài liệu tương tự (6)

Tài liệu JAVA

Tài liệu Java style pdf

Tài liệu Java tổng hợp

Tài liệu Java RMI

Tài liệu Java Database Programming Bible- P2 ppt

Tài liệu Java Database Programming Bible- P4 doc