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 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 th vi t các script vào file HTML c a mình. b n có

FPT

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:
y y y 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 th <SCRIPT> và <\SCRIPT>. Các th xu t hi n trong ph n <HEAD> hay HTML. N u t trong ph n <HEAD>, s n sàng tr c khi ph n còn l i c a v

cách s d ng c p <SCRIPT> có th <BODY> c a file nó s c t i và nb n c t 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 /* ... */.

Thu c tính duy nh t c nh ngh a hi n th i cho th xác nh ngôn <SCRIPT> là ³ LANGUAGE=³ dùng 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>

FPT

JavaScript 3

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.
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 ng d n tuy t i, ví d :

c

nh rõ b ng

a ch URL, các liên k t ho c các

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

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

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 l i server:
type=application/x-javascript

ng

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+"%>")

}

FPT

JavaScript 4

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

FPT

JavaScript 5

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 document . h c cách th c write() và writeln() c a i t ng

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 tham s , ví d :

th c hi n công vi c c a nó

c

a vào dòng

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>

FPT

JavaScript 6

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 :

FPT

JavaScript 7

Hình 2.5: S khác nhau c a write() và writeln()
2.4. Giao ti p v i ng is 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(). cách th c này, b n ph i a vào m t dòng text nh document.write() và document.writeln() trong ph n tr c. Ví d : alert("Nh n vào OK Khi ó file s ch th c hi n Thông th
y y y

s d ng c khi s d ng

ti p t c"); n khi ng is d ng nh n vào nút OK r i m i ti p t c ng h p:

cho

ng, cách th c alert() Thông tin

c s d ng trong các tr

a và form không h p l truy nh p d li u

K t qu sau khi tính toán không h p l Khi d ch v ch a s n sàng

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

FPT

JavaScript 8

v a

a vào. ng nh p d li u, m t nút

Ví d : H p h i tho i g m m t dòng thông báo, m t tr 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 JavaS cript ´); </SCRIPT> </HEAD> <BODY> </BODY> </HTML> Khi duy t có k t qu :

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 cs c ghi trong bi n có tên là name.

Hình2.1:

Bi n name c k t h p v i các chu i khác và trình duy t nh ph ng th c document.write.

c hi n th trong c a s c a

FPT

JavaScript 9

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

c qua JavaScript,

L nh/M SCRIPT SRC

r ng

Ki u

Mô t

LANGUAGE

//

/*...*/

document.write( )
FPT

th HTML Thu c tính c a th SCRIPT thu c tính c a th SCRIPT Ghi chú trong JavaScript Ghi chú trong JavaScript cách th c JavaScript

H p ch a các l nh JavaScript Gi a ch c a file JavaScript bên ngoài. File này ph i có ph n uôi .js nh rõ ngôn ng script c s d ng (JavaScript ho c VBScript) ánh d u ghi chú m t dòng trong o n script ánh d u ghi chú m t kh i trong o n script 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

JavaScript 10

document.writel n() alert()

promt()

Cách th c JavaScript Cách th c c a JavaScript Cách th c JavaScript

script ó T ng t cách th c document.write() nh ng vi t xong t xu ng dòng. Hi n th m t dòng thông báo trên h p h i tho i 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.

FPT

JavaScript 11

Ch 3.1. Bi n và phân lo I bi n

ng 3 Bi n trong JavaScript

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; y 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.
y 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 Sau ây là các ví d v t t :
8 ³The dog ate my shoe´ true 3.3. Ki u d li u

i.

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

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 k hi khai báo bi n. Ki u d li u ct 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>
FPT

JavaScript 12

<BODY> </BODY> </HTML> Các trình duy t h tr JavaScript s x lý chính xác ví d trên và d i ây: a ra k t qu

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 ng, ki u logic và ki u chu i.
1.1.1. KI u nguyên (Interger)

li u sau ây: ki u s nguyên, ki u d u ph y

S nguyên có th
y y y

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 bát phân v i ch s u tiên là s 0. i d ng i

H c s 16 (h th p l c phân) - s nguyên có th bi u di n d d ng th p l c phân v i hai ch s u tiên là 0x.
ng (Floating Point)

1.1.2.

Ki u d u ph y

M t literal có ki u d u ph y

ng có 4 thành ph n sau:
c a x lý d li u

Hình 3.1: K t qu

FPT

JavaScript 13

y y y y

Ph n nguyên th p phân. D u ch m th p phân (.). Ph n d . Ph n m . s

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 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 ki u này ch có hai giá tr
y y 1.1.4.

ch hai i u ki n : úng ho c sai. Mi n giá tr c a

true. false.

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 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.\´ ´);

c

t trong

FPT

JavaScript 14

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:
y y y S h c : Nh m l ng giá giá tr s . Ví d (3+4)+(84.5/3) giá b ng 197.1666666667.

c ánh

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 x=x+y x=x-y x=x*y x=x/y x=x%y ng Ki u gán rút g n x+=y x-=y x*=y x/=y x%=y

FPT

JavaScript 15

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 ph i Tr l i giá tr ph i Tr l i giá tr bên ph i

úng n u toán h ng bên trái b ng toán h ng bên úng n u toán h ng bên trái khác toán h ng bên úng n u toán h ng bên trái l n h n toán h ng

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 bên ph i úng n u toán h ng bên trái nh h n toán h ng

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 còn h tr các toán t sau ây:
var1% var2 var++ var--

ng, JavaScript

Toán t var2

ph n d , tr l i ph n d nh, có giá tr ph

khi chia var1 cho nh toán h ng

Toán t ph

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)

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 ví d :

c s d ng v i chu i, toán t "abc" + "xyz" c "abcxyz"

+

c coi là k t h p hai chu i,

FPT

JavaScript 16

2.1.5.

Logic

JavaScript h tr các toán t logic sau ây: expr1 && expr2 expr1 || expr2 ! expr
2.1.6. Bitwise

Là toán t logic AND, tr l i giá tr expr1 và expr2 cùng úng.

úng n u c

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.

V i các toán t thao tác trên bit, u tiên giá tr c chuy n d nguyên 32 bit, sau ó l n l t th c hi n các phép toán trên t ng bit.
& |

i d ng s

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 l d ch ph i. D ch chuy n toán h ng trái sang ph i m t s c gi nguyên. Ví d : 16>>2 tr 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

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

FPT

JavaScript 17

x = x >> y x = x >>> y x=x&y x=x^y x=x|y

x - >> y x >>> = y x&=y 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 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 1. a. 12 b. "75" c. true d. true e. true 2. f. 5 g. false h. true

c ánh giá nh sau:

FPT

JavaScript 18

3.

Các l nh

Có th chia các l nh c a JavaScript thành ba nhóm sau:
y y y

L nh i u ki n. L nh l p. L nh tháo tác trên it 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, x = 0; } else document.write(³x không b ng 10.´); t l i x b ng 0.´);

Chú ý Ký t { và } c s d ng tách các kh i mã.

FPT

JavaScript 19

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:
y y 3.1.1.

for loop while loop
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>

FPT

JavaScript 20

Hình 5.1: K t qu

c a l nh for...loop

Ví d này l u vào file for_loop.Html. Vòng l p này s th c hi n kh i mã l nh cho
3.1.2. Cú pháp: while (< i u ki n>) { //Các câu l nh th c hi n trong khi l p } while

n khi x>10.

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

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.

FPT

JavaScript 21

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 ut u vòng l p. i v i vòng l p while, l nh continue i u khi n quay l i < i u ki n>; v i for, l nh continue i u khi n quay l i incrExpr.
Cú pháp continue;

Ví d : o n mã sau t ng x t 0 lên 5, nh y lên 8 và ti p t c t ng lên 10 x=0; while (x<=10) { document.write(³Giá tr c a x là:´+ x+´<BR>´); if (x=5) { x=8; continue; } x++; }
Các câu l nh thao tác trên it ng

JavaScript là m t ngôn ng d a trên vi c v i các i t ng.
FPT

it

ng, do ó nó có m t s câu l nh làm

JavaScript 22

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(" </SCRIPT> </HEAD> <BODY> </BODY> </HTML> "+ x + ", ");

FPT

JavaScript 23

Hình

5.2:

K t

qu

c a l nh for...in

3.1.6.

new

Bi n new

c th c hi n

t o ra m t th hi n m i c a m t

it

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");

FPT

JavaScript 24

person3= new person("Binh", "Ngu yen Nhat", "24", "Male"); person4= new person("Hoàn", " V n", "24", "Male"); document.write ("1. "+person1.last_name+" " + person1.first_name + "<BR>" ); document.write("2. "+person2.last_name +" "+ person2.first_name + "<BR>"); document.write("3. "+ person3.last_name +" "+ person3.first_name + "<BR>"); document.write("4. "+ person4.last_name +" "+ person4.first_name+"<BR>"); </SCRIPT> </HEAD> <BODY> </BODY> </HTML>

Hình 5.3: K t qu

c a ví d

l nh New

3.1.7.

this

T khoá this th ng là i t

c s d ng ch ng hi n th i trong ph

i t ng hi n th i. i t ng th c ho c trong hàm.

ng

c g i

FPT

JavaScript 25

Cú pháp this [.property]

Có th xem ví d c a l nh new.
3.1.8. with

L nh này c s d ng thi t l p i t ng ng m nh cho m t nhóm cá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 document và có th s d ng ph ng th c write mà không c n c p t ng document <HTML> <HEAD> <TITLE>With Example </TITLE> <SCRIPT LANGUAGE= "JavaScript"> with (document){

nh là n i

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>

FPT

JavaScript 26

Hình 5.4: K t qu

c a ví d

l nh with

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ú pháp
function fnName([param1],[param2],...,[paramN]) { //function statement }

c s d ng

t o ra hàm trong JavaScript.

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, se x)

FPT

JavaScript 27

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

FPT

JavaScript 28

1.1.1.1.1. d v

Hình 8: Ví hàm

Hình 5.5: K t qu

vi c s

d ng hàm

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 n m trong m t i t ng nào:
y y y 3.1.9.

và không

eval parseInt parseFloat

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

JavaScript 29

<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.6 Ví d 3.1.10. parseInt

hàm Eval

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])
FPT

JavaScript 30

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
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 d ng d u ph y ng. Cú pháp
parseFloat (string)

i

FPT

JavaScript 31

Ví d : Ví d sau minh ho cách th c x 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> lý c a parseFloat v i các ki u chu i khác nhau.

Hình 5.8 : parseFloat

K t

qu

c a

d

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){
FPT

JavaScript 32

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>

FPT

JavaScript 33

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: X y ra khi input focus b xoá t thành ph n form 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.

onBlur onClick

FPT

JavaScript 34

onChange onFocus onLoad onMouseOver onSelect onSubmit onUnLoad

X y ra khi giá tr c a thành ph n i X y ra khi thành ph n c a form lên). X y ra trang Web c t i.

c ch n thay c focus(làm n i

X y ra khi di chuy n chu t qua k t n i hay anchor. X y ra khi ng i s d ng l a ch n m t tr nh p d li u trên form. X y ra khi ng X y ra khi ng i dùng a ra m t form. ng

i dùng óng m t trang it ng.

Sau ây là b ng các ch ng trình x lý s ki n có s n c a m t s Các i t ng này s c trình bày k h n trong ph n sau. it Text Textarea Button Checkbox Radio button Hypertext link Clickable Imagemap area Reset button Submit button Document Window Framesets Form Image ng Ch ng trình x lý s ki n có s n Selection list onBlur, onChange, onFocus

onBlur, onChange, onFocus, onSelect onBlur, onChange, onFocus, onSelect onClick onClick onClick onClick, onMouseOver, onMouseOut onMouseOver, onMouseOut onClick onClick onLoad, onUnload, onError onLoad, onUnload, onBlur, onFocus onBlur, onFocus onSubmit, onReset 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

FPT

JavaScript 35

<HTML> <HEAD> <TITLE> An Event Handler Exemple </TITLE> <SCRIPT LANGUAGE= "JavaScript"> function CheckAge(form) { if ( (form.AGE.value<0)||(form.AGE.value>120) ) { alert("Tu i nh p vào không h p l ! M i b n nh p l i"); form.AGE.value=0; } } </SCRIPT> </HEAD> <BODY> <FORM NAME="PHIEU_DIEU_TRA"> Nh p vào tên c a b n:<BR> Tên <INPUT TYPE=TEXT NAME="TEN" MAXLENGTH=10 SIZE=10><BR> m <INPUT TYPE=TEXT NAME="DEM" MAXLENGTH=15 SIZE=10><BR> H <INPUT TYPE=TEXT NAME="HO" MAXLENGTH=10 SIZE=10><BR> Age <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"> <INPUT TYPE=TEXT NAME="AGE" MAXLENGTH=3 onChange="CheckAge(PHIEU_ DIEU_TRA)"><BR> SIZE=2

FPT

JavaScript 36

<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 VALUE="Truot tuyet"> i n NAME="HOAT_DONG"

Th thao d

c<INPUT TYPE=CHECKBOX NAME="HOAT_DONG" VALUE="Duoi nuoc">

p xe<INPUT TYPE=CHECKBOX NAME="HOAT_DONG" VALUE="Dap xe"> <P> <INPUT TYPE=SUBMIT> <INPUT TYPE=RESET> </FORM> </BODY> </HTML>

FPT

JavaScript 37

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

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 úng: "CORRECT"; Sai: "INCORRECT" d ng bi n toàn c c l u k t qu úng ó vi t ra màn hình: so sánh v i k t q a

G i ý: S 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();"> 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.");
FPT

JavaScript 38

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

mô ph ng các vòng l p for sau:

1. S d ng cách th c confirm() và c u trúc if...then: <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");
FPT

JavaScript 39

} else document.write("What a pity! You have just click Cancel button"); </SCRIPT> </P> </BODY> </HTML> 2. Th c hi n h i 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 i s d ng:

FPT

JavaScript 40

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

FPT

JavaScript 41

4.

Các

it

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ún g 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 ó.

FPT

JavaScript 42

S

sau s minh ho s phân c p c a các

it

ng này

Window

Texturea Text

navigat or Plugin

Frame

Layer Link

FileUplo ad Password Hidden Submit Reset Radio Checkbox Button Select

Mime Type

document

Image Area

Location

Anchor Applet

History Plugin Form

Option i t ng

Hình 6.1: S

1 - Phân c p Navigator

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 t ng cha. Ví d nh m t form tên là form1 chính là m t i t ng con c a t ng document và c g i t i là document.form1 T t c các trang
y

i i

u có các

it

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

y y y

FPT

JavaScript 43

y

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 s ki n cho t ng i t ng trong JavaScript.
it ng navigator

ng trình x lý

i t ng này phiên b n. it

c s d ng t ng này không có ph

c các thông tin v trình duy t nh s ng th c hay ch ng trình x lý s ki n.

Các thu c tính appCodeName AppName AppVersion userAgent Xác Xác nh tên mã n i t i c a trình duy t (Atlas). nh tên trình duy t. phiên b n c a i t ng

Xác nh thông tin v navigator. 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>

FPT

JavaScript 44

Hình 6.2: Minh ho

cho

i t

ng Navigator

it

ng window

i t ng window nh document, frame, v trí
4.1.1. y y y y y y y

ã nói trên là i t u là thu c tính c a

ng it

m c cao nh t. Các ng window.

i t

ng

Các thu c tính

defaultStatus - Thông báo ng m c ac as Frames - M ng xác Length - S l Parent it

nh hi n th lên trên thanh tr ng thái

nh t t c các frame trong c a s .

ng các frame trong c a s cha m . ng c a s cha m

Name - Tên c a c a s hi n th i. Self - C a s hi n th i. Status c s d ng cho thông báo t m th i hi n th lên trên thanh th ng thái c a s . c s d ng l y hay t l i thông báo tr ng thái và ghi è lên defaultStatus. Top - C a s trên cùng. Window - C a s hi n th i.

y y

FPT

JavaScript 45

4.1.2. y y y y y y y

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 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 li u vào tr ng text. TimeoutID = setTimeout(expression,msec) expresion sau th i gian msec. nh n d t. SetTimeout

ánh giá bi u th c

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 tc as 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,width =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>

FPT

JavaScript 46

Hình 6.3: Minh ho cho
4.1.3. y y Các ch ng trình x lý s ki n

it

ng c a s

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
it

c lo i b .

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

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). cs c s d ng cho máy tính host, th ng là Port - C ng truy n thông c ng ng m nh. Protocol - Giao th c http:).

d ng (cùng v i d u hai ch m) (ví d

FPT

JavaScript 47

y

Search - Câu truy v n tìm ki m có th
it ng frame

cu i URL cho các script CGI.

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. y y y y y y 4.1.5. y y 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.
Các ph ng th c

clearTimeout (timeoutID) - Xoá timeout do setTimeout l p. SetTimeout tr l i timeoutID. TimeoutID = setTimeout (expression,msec) khi h t th i gian msec.
S d ng Frame 4.1.6.1. a) T o m t frame (create)

ánh giá expression sau

4.1.6.

t o m t frame, ta s d ng th FRAMESET. M c ích c a th này là ngh a m t t p các frame trong m t trang.

nh

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.

FPT

JavaScript 48

Top listFrame (category.html) contentFrame (titles.html) navigatorFrame (navigator.html) B n có th g i t i nh ng frame tr c ó b ng cách s nh sau:

d ng thu c tính frames

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

JavaScript 49

<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"> <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 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 nh sau:
top listFrame (category.html)

phân c p c a các

d ng thu c tính m ng frames

upperFrame (muske13.html)

contentFrame (titles.html) navigatorFrame (navigator.html ) upperFrame navigatorFrame listFrame contentFrame

chính là top.frames[0] chính là top.frames[1] chính là upperFrame.frames[0] ho c top.frames[0].frames[0] chính là upperFrame.frames[1] ho c top.frames[0].frames[1]

FPT

JavaScript 50

4.1.6.2.

b) C p nh t m t frame (update)

B n có th location

c p nh t n i dung c a m t frame b ng cách s d ng thu c tính 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.
it ng document

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. y y y y y y y y y y y y y 4.1.8. y y y Các thu c tính

i t

alinkColor - Gi ng nh thu c tính ALINK. 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 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.
Các ph ng th c

c s a.

document.clear - Xoá document hi n th i. document.close - óng dòng d li u vào và b m ra màn hình. document.open (["mineType"]) - M m t stream c a các phwong th c write và writeln. a toàn b d li u trong thu th p d li u vào

FPT

JavaScript 51

y y

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.
it 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 trong document, nó có th c xác nh nh sau: document.anchors.length.
it ng forms

nh s l

ng các anchor

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

FPT

JavaScript 52

elements encoding length method target
4.1.10.

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 Xâu ch a ki u MIME form g i cho server. c s d ng mã hoá n i dung c a

S l

ng các thành ph n trong m t form. ích khi submit form

Thu c tính METHOD. Xâu ch a tên c a c a s
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 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

lý.

onSubmit - Ch ng trình x lý s ki n này d li u t form i.
it

c g i khi ng

i s d ng chuy n

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
4.1.13. y y

ng các URL trong
ng th c

it

ng.

Các ph

history.back() tr c ây.

cs

d ng

tham chi u t i URL m i

c th m

history.forward() c s d ng danh sách. Nó s không gây hi u sách.

tham chi u t i URL k ti p trong ng gì n u ã n cu i c a danh

y

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.
it 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 l ng các link qua
FPT

nh s

JavaScript 53

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 it ng link, có th s d ng URL t ng t : http://www.abc.com/chap1/page2.html#topic3
4.1.14. y y y y y y y y y 4.1.15. y y 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). cs c s d ng cho máy tính host, th ng là port - C ng truy n thông c ng ng m nh. Protocol - Giao th c http:).

d ng (cùng v i d u hai ch m) (ví d cu i URL cho các script CGI.

Search - Câu truy v n tìm ki m có th

Target - Gi ng thu c tính TARGET c a <LINK>.
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.
it ng Math

t

i t ng Math là i t ng n i t i trong JavaScript. Các thu c tính c a i 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. ng th c có th là s hay các bi u

Vi c tham chi u t i number trong các ph th c c náh giá là s h p l .
4.1.16. y y y y y y Các thu c tính

E LN2 LN10 LOG2E PI

- H ng s Euler, kho ng 2,718. - logarit t nhiên c a 2, kho ng 0,693. - logarit t nhiên c a 10, kho ng 2,302. - logarit c s 2 c a e, kho ng 1,442. - Giá tr c a T, kho ng 3,14159.

SQRT1_2 - C n b c 2 c a 0,5, kho ng 0,707.

FPT

JavaScript 54

y 4.1.17. y y y y y y y y

SQRT2
Các ph

- C n b c 2 c a 2, kho ng 1,414.
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.

y y y y y y y y y

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.
it 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 th c gi i thi u trong ph n này s d ng i t i t ng Date i cùng. Các ph ng Date dateVar, ví d : ng

dateVar = new Date ('August 16, 1996 20:45:04');
4.1.18. y Các ph ng th c

dateVar.getDate() - Tr l i ngày trong tháng (1 -31) cho dateVar.

FPT

JavaScript 55

y y y y y y y y y y y y y y y y y y

dateVar.getDay() - Tr cho dateVar.

l i ngày trong tu n (0=ch

nh t,...6=th

b y)

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 1/1/1970. l i s l ng các mili giây t 00:00:00 ngày

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 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. t gi là hours cho dateVar. t phút là minutes cho dateVar. t tháng là months cho dateVar. t giây là seconds cho dateVar. ó value bi u dateVar.setHours(hours) dateVar.setMonths(months) dateVar.setSeconds(seconds) ng các

dateVar.setMinutes(minutes) -

dateVar.setTime(value) t th i gian là value, trong di n s l ng mili giây t 00:00:00 ngày 01/01/10970. dateVar.setYear(years) dateVar.toGMTString() - Tr GMT. t n m là years cho dateVar.

l i chu i bi u di n dateVar d

i d ng

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.
it ng String

i t ng String là i t ng c xây d ng n i t i trong Jav aScript 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. y y y y Các ph ng th c

str.anchor (name) c s d ng t o ra th <A> (m t cách 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.

ng).

FPT

JavaScript 56

y y y y y

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 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 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() str.toUpperCase() i chu i str thành ch th i chu i str thành ch hoa.
c a it ng Form

y y

y y y y y y y y

ng cho

a

ng.

Các ph n t

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

Là m t nút b m h n là nút submit hay nút reset (<INPUT TYPE="button">) M t checkbox (<INPUT TYPE="checkbox">) Là m t ph n t t i file lên cho phép ng file (<INPUT TYPE="file">) is d ng g i lên m t

FPT

JavaScript 57

hidden password radio reset select submit text textArea

M t tr

ng n (<INPUT TYPE="hidden">)

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">) M t nút b m (<INPUT TYPE="radio">) M t nút reset(<INPUT TYPE="reset">) M t danh sách l a ch n (<SELECT><OPTION>option1</OPTION> <OPTION>option2</OPTION></SELECT>) M t nút submit (<INPUT TYPE="submit">) M t tr M t tr c ng text (<INPUT TYPE="text">) ng text cho phép nh p vàp nhi u dòng t tên JavaScript truy nh p n chúng qua tên

<TEXTAREA>default text</TEXTAREA>)

M i ph n t có th
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">

FPT

JavaScript 58

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. Trong ví d sau, thay vì s d ng onChange, b n có th ch nh s a script 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

nh

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

JavaScript 59

Cách th c và thu c tính checked defaultChecked name value click()

Mô t Cho bi t tr ng thái hi n th i c a checkbox (thu c tính) Cho bi t tr ng thái m c Cho bi t tên c a ph n t (thu c tính) nh c a ph n t (thu c tính) c ch nh trong th INPUT c ch nh trong

Cho bi t giá tr hi n th i c a ph n t th INPUT (thu c tính)

Mô t m t click vào checkbox (Cách th c) nh p vào m t s r i l a ch n tính n hân ôi và bình

Ph n t checkbox ch có m t th s ki n là onClick Ví d : T o h p checkbox 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; } } else{ if (form.square.checked) { } else { form.result.value = form.entry.value * 2; } //enfzd if(3) }//end if(1) // if(3) form.result.value=form.entry.value*form.entry.value; //end if(2)

FPT

JavaScript 60

}//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: (<INPUT TYPE=checkbox i dùng th ay m NAME=square onClick= "calculate( this.form, this.name);"> ) c tính toán l i. i hàm calculate() nh

Khi ó n u ng t o ra s sau:

i m t câu l nh khác, form s

r ng cho checkbox. b n có th thay

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)

FPT

JavaScript 61

} else { if (form.square.checked) { } else { form.result.value = form.entry.value * 2; } } }
4.1.23. Ph n t

// if (3)

form.result.value=form.entry.value*form.entry.value ;

// end if (3) // end if (1)

File Upload ng i s d ng có th ch rõ m t file c ch nh rõ trong JavaScript b ng

Ph n t này cung c p cho form m t cách a vào form x lý. Ph n t file Upload 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.
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
4.1.26. Ph n t

c nói k h n trong radio

it

ng text.

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

FPT

JavaScript 62

ch n trong b t k m t th i i m nào. Ví d dòng l nh sau t o r a 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 INPUT. t cho chúng có cùng m t tên trong các th

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 Thu c tính cách th c checked defaultChecked index length name value click() và Mô t Mô t tr ng thái hi n th i c a ph n t radio (thu c tính) Mô t tr ng thái m c Mô t th nhóm t nh c a ph n t (thu c tính) c ch n hi n th i trong m t c a nút radio it ng radio.

Mô t t ng s nút radio trong m t nhóm Mô t tên c a ph n t (thu c tính) c ch nh trong th c INPUT

Mô t giá tr hi n th i c a ph n t INPUT (thu c tính)

nh ra trong th

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 Ví d : <HTML> <HEAD> <TITLE>radio button Example</TITLE> <SCRIPT> <!-- HIDE FROM OTHER BROWSERS function calculate(form,callingField) { if (callingField == "result") { it ng radio, ta xem ví d sau:

FPT

JavaScript 63

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

FPT

JavaScript 64

thay i tham chi u n hàm calculate() t form.action[1].checked .
4.1.27. Ph n t

form.square.checked thành

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

xoá các giá tr c a form.

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
FPT

JavaScript 65

<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 <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. m t vài thành ph n t ng t các button và radio. it ng này t o ra

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

u có m t vài thu c tính: c m c nh là l a ch n

DEFAULTSELECTED: cho bi t option có 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:

FPT

JavaScript 66

<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: d ng i 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 t ng xây d ng Option() theo cú pháp: newOptionName selected); = new Option(optionText, optionValue,

defaultSelected,

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

FPT

JavaScript 67

Boolean. i t ng này hi n b ng index.

c liên k t vào danh sách l a ch n

c th c

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, onCha nge, 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. B ng sau mô t các thu c tính và cách th c c a B ng .Các thu c tính và cách th c c a Cách th c và thu c tính defaultValue name value focus() blur() select() Mô t Ch ra giá tr m c nh c a ph n t trong th INPUT (thu c tính) Tên c a i t (thu c tính) ng c ch ra it it ng text. ng text.

c ch ra trong th INPUT

Giá tr hi n th i c a ph n t (thu c tính) Mô t vi c con tr t i tr Mô t vi c con tr r i tr ng text (cách th c) ng text (cách th c) ng text

Mô t vi c l a ch n dòng text trong tr (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 <HTML> <HEAD>
FPT

ng c p nh t các tr

ng text .

JavaScript 68

<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 onChange="echo(this.form,this.name);"> <INPUT TYPE=text onChange="echo(this.form,this.name);"> </FORM> </BODY> </HTML> 1.3 Ph n t Textarea Th TEXTAREA cung c p m t h p cho phép nh p s thi t k nh tr c. Ví d : Default Text Here </TEXTAREA> ví d này t o ra m t tr ng text cho phép a vào 10 hàng ,m i hàng 25 ký t . Dòng "Defautl Text Here"s xu t hi n trong tr ng này vào l n hi n th u tiên. C ng nh ph n t text , Ja vaScript cung c p cho b n các thu c tính defaultValue, name, và value, các cách th c focus(), select(), và blur(), các th s ki n onBlur, onForcus, onChange, onSelect.
2. M ng elements[]

NAME="first" NAME="second"

dòng text do ng

i

<TEXTAREA NAME="fieldName" ROWS=10 COLS=25>

Các i t ng c a form có th b n t o ra m t form sau:

c g i t i b ng m ng elements[]. Ví d

<FORM METHOD=POST NAME=testform> <INPUT TYPE="text" NAME="one">
FPT

JavaScript 69

<INPUT TYPE="text" NAME="two"> <INPUT TYPE="text" NAME="three"> </FORM> b n có th g i t i ba thành ph n này nh sau: document.elements[0], document.elements[1], document.elements[2], h n n a còn có th g i document.testform.one, document.testform.two, document.testform.three. Thu c tính này th ng c s d ng trong các m i quan h tu n t c a các ph n t h n là dùng tên c a chúng. 3. M ng form[] Các th s ki n c thi t k làm vi c v i các form riêng bi t ho c các tr ng m t th i i m, nó r t h u d ng cho phép g i t i các form có liên quan trong cùng m t trang. M ng form[] c p n ây có th có nhi u xác nh các nhân c a form trên cùng m t trang và have information in a single field match in all three forms. Có th g i b ng document.forms[] thay vì g i b ng tên form. Trong script này, b n có hai tr ng text nh p và n m trên hai form c l p v i nhau. S d ng m ng form b n có th t ng tác trên cá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="docu ment.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 trong th FORM: n form b ng tên form c t

<FORM METHOD=POST NAME="name"> Khi ó b n có th g i là document.forms["name"] ho c document.name

FPT

JavaScript 70

4. Xem l i các l nh và m r ng L nh/ M r ng blur() form.action form.elemrnts Ki u cách th c JavaScript cách th c JavaScript thu c tính JavaScript Mô t Mô t vi c d ch chuy n con tr t ph n t m t

Xâu ch a giá tr c a thu c tính ACTION trong th FORM m ng ch a danh sách các ph n t trong form (nh checkbox, tr ng text, danh sách l a ch n) xâu ch a ki u MIME s d ng khi chuy n thông tin t form t i server Xâu ch a giá tr thu c tính NAME trong th FORM Xâu ch a tên c a s submition ích b i m t form

form.encoding form,name form.target form.submit type onSubmit button checkbox pasword radio reset SELECT OPTION

thu c tính JavaScript thu c tính JavaScript thu c tính JavaScript cách th c JavaScript thu c tính JavaScript Th s ki n thu c tính HTML thu c tính HTML thu c tính HTML thu c tính HTML thu c tính HTML th HTML th HTML

Mô t vi c submit m t form HTML ánh x ki u c a m t ph n t form thành m t xâu. th s ki n cho vi c submit Thu c tính ki u cho các nút b m c a HTML (<INPUT TYPE=button>) Thu c tính ki u cho các checkbox c a HTML (<INPUT TYPE=checkbox>) Thu c tính ki u cho các dòng pasword c a HTML(<INPUT TYPE=password>) Thu c tính ki u cho các nút radio c a HTML (<INPUT TYPE=radio>) Thu c tính ki u cho các nút reset c a HTML (<INPUT TYPE=reset>) H p th cho danh sách l a ch n ch ra các l a ch n trong danh sách l a ch n(<SELECT><OPTION>Option 1<OPTION>Option 2</SELECT>) Thu c tính ki u c a nút submit (<INPUT TYPE=submit>) Thu c tính ki u c a tr (<INPUT TYPE=text>) H p th cho (<TEXTAREA> </TEXTAREA>) ng trong form text text

submit text TEXTAREA

thu c tính HTML thu c tính HTML Th HTML

nhi u dòng defautl

FPT

JavaScript 71

name value click() onClick

thu c tính JavaScript thu c tính JavaScript cách th c JavaScript thu c tính JavaScript

Xâu ch a tên ph n t HTML (button, checkbox, password...) Xâu ch a giá tr hiên th i c a m t ph n t HTML(button, checkbox, password...) Mô t vi c kích vào m t ph n t form (button, checkbox,password) trên

Th s ki n cho s ki n kích (button, checkbox, radio button, reset, selection list, submit) Giá tr ki u Boolean mô t m t l a ch n check(checkbox, radio button) Xâu ch a giá tr m c nh c a m t ph n t HTML (password, text, textarea) Mô t vi c con tr t i m t ph n t (password, text, textarea) Mô t vi c con tr r i kh i m t ph n t (password, text, textarea) Mô t vi c l a ch n dòng text trong m t tr ng (password, text, textarea) Th s ki n cho s ki n focus (password, selection list, text, textarea) Th s ki n cho s ki n blur (password, selection list, text, textarea) Th s ki n cho s ki n khi giá tr c a tr ng thay i (password, selection list, text, textarea) Th s ki n khi ng i s d ng ch n dòng text trong m t tr ng (password, text, textarea) Là m t s nguyên mô t l a ch n hi n th i trong m t nhóm l a ch n (radio button) S nguyên mô t t ng s các l a ch n trong m t nhóm các l a ch n (radio button) Giá tr Boolean mô t khi có m t l a ch n c t là m c nh (seledtion list) M ng các l a ch n trong danh sách l a ch n Dòng text hi n th cho m t thành ph n

checked defaultChecked focus() blur() select() onFocus()

thu c tính JavaScript thu c tính JavaScript cách th c JavaScript cách th c JavaScript cách th c JavaScript Th s ki n

onBlur onChange

Th s ki n Th s ki n

onSelect

Th s ki n

index

thu c tính JavaScript

length

thu c tính JavaScript

dafautlSelected

thu c tính JavaScript

options text
FPT

thu c tính JavaScript thu c tính JavaScript

JavaScript 72

c a menu trong danh sách l a ch n TABLE TR TD COLSPAN ROWSPAN BODER document.forms[] th HTML th HTML th HTML thu c tính HTML thu c tính HTML thu c tính HTML thu c tính JavaScript H p th cho các b ng HTML H p th HTML cho các hàng c a m t b ng

H p th cho các ô c a m t hàng trong m t b ng HTML Là thu c tính c a th TD mô t m t ô c a b ng có nhi u c t Là thu c tính c a th TD mô t m t ô c a b ng có nhi u hàng trong trong

Là thu c tính c a th TABLE mô t r ng ng vi n c a b ng m ng c a các i t ng form v i m t danh sách các form trong m t document 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 Tr l i m t giá tr nguyên ti p theo nh h n giá tr c a tham s a vào. Giá tr nguyên c a s th cùng trong xâu string t ký t cu i

string.substring()

cách th c JavaScript

Math.floor() string.length

cách th c JavaScript thu c tính JavaScript

FPT

JavaScript 73

5.

Mô hình

it

ng (Object Model) it ng và thu c tính

Nh ã bi t, m t nó. B n có th truy nh p

i t ng trong JavaScript có các thu c tính i kèm v i n các thu c tính c a nó b ng cách g i :

objectName.propertyName C tên i t ng và tên thu c tính u nh y c m. B n nh ngh a m t thu c tính b ng 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 l u 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 } Khi g i hàm show_props(myCar,´myCar´) s hi n lên: myCar.make = Ford myCar.model = Mustang
FPT

JavaScript 74

myCar.year = 69;
T o các it ng m i

C JavaScript client-side và server-side u có m t s i t ng c nh ngh a tr c. Tuy nhiên, b n c ng có th t o ra nh ng i t ng c a riêng b n. Trong JavaScript 1.2, n u b n ch mu n t o ra m t i t ng duy nh t c a m t ki u i t ng, b n có th t o nó b ng cách s d ng k h i t o i t ng. Ho c n u b n mu n t o ra nhi u cá th c a m t ki u i t ng, b n có th t o ra m t hàm xây d ng tr c, sau ó t o ra các i t ng có ki u c a hàm ó b ng toán t new
5.1.1. S d ng kh i t o it ng

Trong nh ng phiên b n tr c c a Navigator, b n ch có th t o ra m t i t ng b ng cách s d ng hàm xây d ng chúng ho c s d ng m t hàm c cung c p b i m t vài i t ng khác t c m c ích. Tuy nhiên, trong Navigator 4.0, b n có th t o ra m t i t ng b ng cách s d ng m t kh i t o i t ng.B n s d ng cách này khi b n ch mu n t o ra m t cá th n l ch không ph i nhi u cá th c a i t ng. Cú pháp Initializers): t o ra m t i t ng b ng cách kh i t o i t ng (Object

objectName={property1: value1, property2: value2, ..., propertyN: valueN}

Trong ó objectName là tên c a i t ng m i, m i propertyI là m t xác minh (có th là m t tên, m t s ho c m t xâu ký t ) và m i valueI là m t bi u th c mà giá tr c a nó c gán cho propertyI. Có th l a ch n kh i t o b ng tên i t ng ho c ch b ng các khai báo. N u nh b n không c n dùng n i t ng ó trong m i ch , b n không c n ph i gán nó cho m t bi n. N u nh t, m i l l i nó m t l g i hàm, m t i t ng c t o b ng cách kh i t o i t ng m c cao n i t ng ó xu t hi n trong các bi u th c, JavaS cript s ánh giá 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 i t ng s c kh i t o m t l n
if (condition) x={hi: ´there .´}

Gi s b n có câu l nh sau:

Trong tr ng h p này, JavaScript s t o ra m t bi n x n u bi u th c condition c ánh giá là úng Còn ví d sau t o ra m t it

i t

ng và g n nó vào

ng myHonda v i 3 thu c tính: it ng v i các th u c tính c a t o m t

myHonda={color:´red´,wheels:4,engine:{cylinder:4,size:2.2}} Chú ý r ng thu c tính engine c ng là m t nó Trong Navigator 4.0, b n c ng có th s d ng m t kh i t o m ng. Cú pháp t o m ng b ng cách này khác v i t o i t ng:

FPT

JavaScript 75

arrayName=[element0, element1,...,elementN]

Trong ó, arrayName là tên c a m ng m i, và m i elementI là giá tr c a ph n t v trí ó c a m ng. Khi b n t o m t m ng b ng cách s d ng ph ng pháp kh i t o, thì nó s coi m i giá tr là m t ph n t trên m ng, và chi u dài c a m ng chính là s các tham s . 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 ch a 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 t h 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à Ví d 2: T o ra m t m ng v i 2 ph n t r ng:
fish = [³Lion´, ,´ Surgeon´]

dài c a m ng là 3: c kh i u và m t ph n t

coffees = [³French Roast´,´Columbian´,´ Kona´]

V i bi u th c này, fish[0] là ³Lion´, fish[2] là ´ Surgeon ´, và fish[2] ch a c nh ngh a
5.1.2. S d ng m t hàm xây d ng(Constructor Function)

B n có th t o ra 1.

it

ng c a riêng mình v i hai b it it ng ó b ng toán t

c sau:
new

nh ngh a ki u c a

ng b ng cách vi t m t hàm xây d ng.

2. T o ra m t cá th c a

nh ngh a m t ki u i t ng, ta ph i t o ra m t hàm ch nh rõ tên, các thu c tính và các cách th c c a ki u i t ng ó. Ví d gi s b n mu n t o m t ki u i t ng ô tô v i tên là car, có các thu c tính make, model, year và color, th c hi n vi c này có th vi t m t hàm nh sau: function car(make, model, year ){ this.make = make this.model = model this.year = year } t Chú ý vi c s d ng toán t this gán giá tr cho các thu c tính c a ng ph i thông qua các tham s c a hàm. Ví d , b n có th t o m t it ng m i ki u car nh sau: mycar = new car(³Eagle´,´Talon TSi´,1993) Câu l nh này s t o ra i t ng mycar và liên k t các giá tr c a vào v i các thu c tính. Khi ó giá tr c a mycar.make là ³Eagle´, giá tr c a mycar.model là ³Talon TSi´, và mycar.year là m t s nguyên 1993....C nh v y b n có th t o ra nhi u i t ng ki u car.
FPT

i

JavaScript 76

m t sau:

M t i t ng c ng có th có nh ng thu c tính mà b n thân nó c ng là i t ng. Ví d b n nh ngh a thêm m t i t ng khác là person nh function person(name, age, sex){ this.name=name this.age=age this.sex=sex }

Và sau ó ta t o ra hai ng

i m i:

rank = new person(³Rank McKinnon´,33,´M´) ken = new person(³Ken John´,39,´M´) Bây gi b n nh ngh a l i hàm xây d ng car nh sau: this.make = make this.model = model this.year = year this.owner = owner } Nh v y b n có th t o it 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 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.
5.1.3. L p m c l c cho các thu c tính c a it ng

function car(make, model, year,owner ){

it

ng tr

c khi

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
FPT

JavaScript 77

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 chúng b ng hàm xây d ng (nh ví d v ki u i t ng car ph b n nh ngh a nh ng thu c tính c a riêng m t i mycar.color=´red´). Vì v y n u b n nh ngh a các thu c tính c a t u b ng ch s nh mycar[5]=´25 mpg´, b n có th l n l t g tính khác nh mycar[5]. thu c tính c a n tr c) và khi t ng (nh i t ng ngay i t i các thu c

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
5.1.4. nh ngh a thêm các thu c tính cho m t ki u it 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´
5.1.5. nh ngh a các cách th c

M t cách th c là m t hàm c liên k t v i m t i t ng. B n nh ngh a m t cách th c c ng có ngh a là b n nh ngh a m t hàm chu n. B n có th s d ng cú pháp sau g n m t hàm cho m t i t ng ang t n t i:
object.methodname = function_name

Trong ó object là i t function_name là tên hàm

ng ang t n t i, methodname là tên cách th c và it ng nh sau:

B n có th g i cách th c này t
object.methodname(<tham s >)

B n có th nh ngh a cách th c cho m t ki u i t ng b ng cách a cách th c ó vào trong hàm xây d ng i t ng. Ví d b n có th nh ngh a m t hàm có th nh d ng và hi n th các thu c tính c a các i t ng ki u car ã xây d ng ph n tr c: function displayCar () { var result = ³Abeautiful´+this.year+ ³ ´+ this.make + ³ ´+ this.model document.write(result) }

FPT

JavaScript 78

B n có th thêm cách th c này vào cho dòng l nh sau vào hàm nh ngh a i t ng this.displayCar= displayCar; Nh v y có th nh ngh a l i it

i t

ng car b ng cách thêm

ng car nh sau:

function car(make, model, year,owner ){ this.make = make this.model = model this.year = year this.owner = owner this.displayCar= displayCar } Sau ó, b n có th g i cách th c displayCar car1.displayCar() car2.displayCar()
5.1.6. S d ng cho các tham chi u it ng (Object References)

iv im i

it

ng:

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

JavaScript 79

5.1.7.

Xoá

it

ng

Trong JavaScript cho Navigator 2.0, b n không th xoá các i t ngchúng v n t n t i trong khi b n ã r i kh i t rang ó. Trong khi JavaScript cho Navigator 3.0 cho phép b n có th xoá m t i t ng b ng cách t cho nó tr t i giá tr Null (n u nh ó là l n cu i cùng g i t i i t ng). JavaScript s óng i t ng ó ngay l p t c thông qua bi u th c gán.

FPT

JavaScript 80

6.

B ng t ng k t các t

khoá

Sau ây là các t oc nh ngh a là m t ph n trong ngôn ng không c s d ng là tên bi n:
abstract boolean break byte case catch char class const continue default do double else eval extends false final finally float for function goto if implements import in instanceof int interface long native new null package parseFloat parseInt private protected public return short

JavaScript và

static super switch synchrinized this throw throws transient true try var void while with

FPT

JavaScript 81

7.

T ng k t

Nh v y, tài li u không nh ng ã gi i thiêu s qua v JavaScript, mà nó còn là sách tham kh o h t s c h u ích phát tri n ng d ng c a b n. B n có th tham kh o toàn di n JavaScript trong quy n Teach Yourself JavaScript in 14 Days, ho c JavaScript Guide Do JavaScript là ngôn ng còn m i và có s thay i nhanh chóng, b n nên n v i trang Web c a hãng Netscape ( http://www.netscape.com ) có các thông tin m i nh t v ngôn ng này.

FPT

Sign up to vote on this title
UsefulNot useful