Nhập môn JavaScript: Phần 2 - ĐH Quốc gia Hà Nội

Chia sẻ: Nguyên Hoàng | Ngày: | Loại File: PDF | Số trang:40

Thêm vào BST

Báo xấu

84
lượt xem 8
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Nhập môn JavaScript phần 2 sẽ nối tiếp nội dung phần 1 với 3 chương: Các đối tượng trong JavaScript, Mô hình đối tượng, Bảng tổng kết các từ khóa. Qua tài liệu này sẽ giúp học tập tốt môn lập trình cũng như có thể phát triển các ứng dụng của cá nhân.

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Nhập môn JavaScript: Phần 2 - ĐH Quốc gia Hà Nội

JavaScript 40 4. C¸c ®èi tîng trong JavaScript Nh ®· nãi JavaScript lµ ng«n ng÷ lËp tr×nh dùa trªn ®èi tîng, nhng 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Î cña document. Bªn c¹nh ®ã b¹n thÊy ph¬ng thøc document.write ®îc sö dông trong nhiÒu vÝ dô ®Ó ®a v¨n b¶n kÕt qu¶ ra document. §èi tîng còng cã thÓ cã c¸c ch¬ng tr×nh xö lý sù kiÖn. VÝ dô ®èi tîng link cã hai ch¬ng tr×nh xö lý sù kiÖn lµ onClick vµ onMouseOver. onClick ®îc gäi khi cã ®èi tîng link ®îc kÝch, onMouseOver ®îc gäi khi con trá chuét di chuyÓn qua link. Khi b¹n t¶i mét document xuèng Navigator, nã sÏ t¹o ra mét sè ®èi tîng cïng víi nh÷ng gi¸ trÞ c¸c thuéc tÝnh cña chóng dùa trªn file HTML cña document ®ã vµ mét vµi th«ng tin cÇn thiÕt kh¸c. Nh÷ng ®èi tîng nµy tån t¹i mét c¸ch cã cÊp bËc vµ ph¶n ¸nh chÝnh cÊu tróc cña file HTML ®ã. Khoa Toan tin, §¹i häc Quèc gia Hµ Néi
JavaScript 41 S¬ ®å sau sÏ minh ho¹ sù ph©n cÊp cña c¸c ®èi tîng nµy Window Texturea navigator Text Plugin Layer FileUpload Frame Mime Type Link Password document Image Hidden Area Submit Location Anchor Reset Applet Radio History Plugin Checkbox Form Button Select Option H×nh 6.1: S¬ ®å 1 - Ph©n cÊp ®èi tîng 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 ®èi tîng cha. VÝ dô nh mét form tªn lµ form1 chÝnh lµ mét ®èi tîng con cña ®èi tîng document vµ ®- îc gäi tíi lµ document.form1 TÊt c¶ c¸c trang ®Òu cã c¸c ®èi tîng sau ®©y: • navigator: cã c¸c thuéc tÝnh tªn vµ phiªn b¶n cña Navigator ®ang ®îc sö dông, dïng cho MIME type ®îc hç trî bëi client vµ plug-in ®îc cµi ®Æt trªn client. • window: lµ ®èi tîng ë møc cao nhÊt, cã c¸c thuéc tÝnh thùc hiÖn ¸p dông vµo toµn bé cöa sæ. • document: chøa c¸c thuéc tÝnh dùa trªn néi dung cña document nh tªn, mµu nÒn, c¸c kÕt nèi vµ c¸c forms. • location: cã c¸c thuéc tÝnh dùa trªn ®Þa chØ URL hiÖn thêi • history: Chøa c¸c thuéc tÝnh vÒ c¸c URL mµ client yªu cÇu tríc ®ã. Khoa Toan tin, §¹i häc Quèc gia Hµ Néi
JavaScript 42 Sau ®©y sÏ m« t¶ c¸c thuéc tÝnh, ph¬ng thøc còng nh c¸c ch¬ng tr×nh xö lý sù kiÖn cho tõng ®èi tîng trong JavaScript. §èi tîng navigator §èi tîng nµy ®îc sö dông ®Ó ®¹t ®îc c¸c th«ng tin vÒ tr×nh duyÖt nh sè phiªn b¶n. §èi t- îng nµy kh«ng cã ph¬ng thøc hay ch¬ng tr×nh xö lý sù kiÖn. C¸c thuéc tÝnh appCodeName X¸c ®Þnh tªn m· néi t¹i cña tr×nh duyÖt (Atlas). AppName X¸c ®Þnh tªn tr×nh duyÖt. AppVersion X¸c ®Þnh th«ng tin vÒ phiªn b¶n cña ®èi tîng navigator. userAgent X¸c ®Þnh header cña user - agent. VÝ dô VÝ dô sau sÏ hiÓn thÞ c¸c thuéc tÝnh cña ®èi tîng navigator Navigator Object Exemple document.write("appCodeName = "+navigator.appCodeName + ""); document.write("appName = "+navigator.appName + ""); document.write("appVersion = "+navigator.appVersion + ""); document.write("userAgent = "+navigator.userAgent + ""); Khoa Toan tin, §¹i häc Quèc gia Hµ Néi
JavaScript 43 H×nh 6.2: Minh ho¹ cho ®èi tîng Navigator §èi tîng window §èi tîng window nh ®· nãi ë trªn lµ ®èi tîng ë møc cao nhÊt. C¸c ®èi tîng document, frame, vÞ trÝ ®Òu lµ thuéc tÝnh cña ®èi tîng window. 4.1.1. C¸c thuéc tÝnh • defaultStatus - Th«ng b¸o ngÇm ®Þnh hiÓn thÞ lªn trªn thanh tr¹ng th¸i cña cöa sæ • Frames - M¶ng x¸c ®Þnh tÊt c¶ c¸c frame trong cöa sæ. • Length - Sè lîng c¸c frame trong cöa sæ cha mÑ. • Name - Tªn cña cöa sæ hiÖn thêi. • Parent - §èi tîng cöa sæ cha mÑ • Self - Cöa sæ hiÖn thêi. • Status - §îc sö dông cho th«ng b¸o t¹m thêi hiÓn thÞ lªn trªn thanh th¹ng th¸i cöa sæ. §ù¬c sö dông ®Ó lÊy hay ®Æt l¹i th«ng b¸o tr¹ng th¸i vµ ghi ®Ì lªn defaultStatus. • Top - Cöa sæ ë trªn cïng. • Window - Cöa sæ hiÖn thêi. Khoa Toan tin, §¹i häc Quèc gia Hµ Néi
JavaScript 44 4.1.2. C¸c ph¬ng thøc • alert ("message") -HiÓn thÞ hép héi tho¹i víi chuçi "message" vµ nót OK. • clearTimeout(timeoutID) -Xãa timeout do SetTimeout ®Æt. SetTimeout tr¶ l¹i timeoutID • windowReference.close -§ãng cöa sæ windowReference. • confirm("message") -HiÓn thÞ hép héi tho¹i víi chuçi "message", nót OK vµ nót Cancel. Tr¶ l¹i gi¸ trÞ True cho OK vµ False cho Cancel. • [windowVar = ][window]. open("URL", "windowName", [ "windowFeatures" ] ) - Më cöa sæ míi. • prompt ("message" [,"defaultInput"]) - Më mét hép héi tho¹i ®Ó nhËn d÷ liÖu vµo trêng text. • TimeoutID = setTimeout(expression,msec) - §¸nh gi¸ biÓu thøc expresion sau thêi gian msec. VÝ dô: Sö dông tªn cöa sæ khi gäi tíi nã nh lµ ®Ých cña mét form submit hoÆc trong mét Hipertext link (thuéc tÝnh TARGET cña thÎ FORM vµ A). Trong vÝ dô t¹o ra mét tíi cöa sæ thø hai, nh nót thø nhÊt ®Ó më mét cöa sæ rçng, sau ®ã mét liªn kÕt sÏ t¶i file doc2.html xuèng cöa sæ míi ®ã råi mét nót kh¸c dïng ®Ó ®ãng cña sæ thø hai l¹i, vÝ dô nµy la vµo file window.html: Frame Example Load a file into window2 Khoa Toan tin, §¹i häc Quèc gia Hµ Néi
JavaScript 45 H×nh 6.3: Minh ho¹ cho ®èi tîng cöa sæ 4.1.3. C¸c ch¬ng tr×nh xö lý sù kiÖn • onLoad - XuÊt hiÖn khi cöa sæ kÕt thóc viÖc t¶i. • onUnLoad - XuÊt hiÖn khi cöa sæ ®îc lo¹i bá. §èi tîng location C¸c thuéc tÝnh cña ®èi tîng location duy tr× c¸c th«ng tin vÒ URL cña document hiÖn thêi. §èi tîng nµy hoµn toµn kh«ng cã c¸c ph¬ng thøc vµ ch¬ng tr×nh xö lý sù kiÖn ®i kÌm. VÝ dô: http:// www.abc.com/ chap1/page2.html#topic3 C¸c thuéc tÝnh • hash - Tªn anchor cña vÞ trÝ hiÖn thêi (vÝ dô topic3). • Host - PhÇn hostname:port cña URL (vÝ dô www.abc.com ). Chó ý r»ng ®©y thêng lµ cæng ngÇm ®Þnh vµ Ýt khi ®îc chØ ra. • Hostname - Tªn cña host vµ domain (vÝ dô www.abc.com ). • href - Toµn bé URL cho document hiÖn t¹i. • Pathname - PhÇn ®êng dÉn cña URL (vÝ dô /chap1/page2.html). • Port - Cæng truyÒn th«ng ®îc sö dông cho m¸y tÝnh host, thêng lµ cæng ngÇm ®Þnh. • Protocol - Giao thøc ®îc sö dông (cïng víi dÊu hai chÊm) (vÝ dô http:). • Search - C©u truy vÊn t×m kiÕm cã thÓ ë cuèi URL cho c¸c script CGI. Khoa Toan tin, §¹i häc Quèc gia Hµ Néi
JavaScript 46 §èi tîng frame Mét cöa sè cã thÓ cã mét vµi frame. C¸c frame cã thÓ cuén mét c¸ch ®éc lËp víi nhau vµ mçi frame cã URL riªng. frame kh«ng cã c¸c ch¬ng tr×nh xö lý sù kiÖn. Sù kiÖn onLoad vµ onUnLoad lµ cña ®èi tîng window. 4.1.4. C¸c thuéc tÝnh • frames - M¶ng tÊt c¶ c¸c frame trong cöa sæ. • Name - Thuéc tÝnh NAME cña thÎ • Length - Sè lîng c¸c frame con trong mét frame. • Parent - Cöa sæ hay frame chøa nhãm frame hiÖn thêi. • self - frame hiÖn thêi. • Window - frame hiÖn thêi. 4.1.5. C¸c ph¬ng thøc • clearTimeout (timeoutID) - Xo¸ timeout do setTimeout lËp. SetTimeout tr¶ l¹i timeoutID. • TimeoutID = setTimeout (expression,msec) - §¸nh gi¸ expression sau khi hÕt thêi gian msec. 4.1.6. Sö dông Frame 4.1.6.1. a) T¹o mét frame (create) §Ó t¹o mét frame, ta sö dông thÎ FRAMESET. Môc ®Ých cña thÎ nµy lµ ®Þnh nghÜa mét tËp c¸c frame trong mét trang. VÝ dô1: t¹o frame ( h×nh 17) Frame Example S¬ ®å sau hiÓn thÞ cÊu tróc cña c¸c frame: C¶ 3 frame ®Òu trªn cïng mét cöa sæ cha, mÆc dï 2 trong sè c¸c frame ®ã n»m trong mét frameset kh¸c. Top listFrame (category.html) contentFrame (titles.html) Khoa Toan tin, §¹i häc Quèc gia Hµ Néi navigatorFrame (navigator.html)
JavaScript 47 B¹n cã thÓ gäi tíi nh÷ng frame tríc ®ã b»ng c¸ch sö dông thuéc tÝnh frames nh sau: listFrame chÝnh lµ top.frames[0] contentFrame chÝnh lµ top.frames[1] navigatorFrame chÝnh lµ top.frames[2] 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 nhng trong mçi ®Ønh cña hai frame l¹i cã mét cöa sæ cha riªng tõ navigateFrame. Møc frameset cao nhÊt cã thÓ ®îc ®Þnh nghÜa nh sau: Frame Example Trong file muske13.html l¹i tiÕp tôc ®Æt mét frameset: Frame Example Khoa Toan tin, §¹i häc Quèc gia Hµ Néi
JavaScript 48 Khi ®ã kÕt qu¶ hiÓn thÞ cña vÝ dô 2 gièng vÝ dô 1 nhng sù ph©n cÊp cña c¸c frames l¹i kh¸c h¼n: B¹n cã thÓ gäi tíi c¸c frame trªn b»ng c¸ch sö dông thuéc tÝnh m¶ng frames nh sau: top listFrame (category.html) upperFrame (muske13.html) contentFrame (titles.html) navigatorFrame (navigator.html) upperFrame chÝnh lµ top.frames[0] navigatorFrame chÝnh lµ top.frames[1] listFrame chÝnh lµ upperFrame.frames[0] hoÆc top.frames[0].frames[0] contentFrame chÝnh lµ upperFrame.frames[1] hoÆc top.frames[0].frames[1] 4.1.6.2. b) CËp nhËt mét frame (update) B¹n cã thÓ cËp nhËt néi dung cña mét frame b»ng c¸ch sö dông thuéc tÝnh location ®Ó ®Æt ®Þa chØ URL vµ ph¶i ®Þnh chØ râ vÞ trÝ cña frame trong cÊu tróc. Trong vÝ dô trªn, nÕu b¹n thªm mét dßng sau vµo navigatorFrame: 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 cha bao giê tån t¹i. §èi tîng document §èi tîng nµy chøa c¸c th«ng tin vÒ document hiÖn thêi vµ cung cÊp c¸c ph¬ng thøc ®Ó ®a th«ng tin ra mµn h×nh. §èi tîng document ®îc t¹o ra b»ng cÆp thÎ vµ . Mét sè c¸c thuéc tÝnh g¾n víi thÎ . Khoa Toan tin, §¹i häc Quèc gia Hµ Néi
JavaScript 49 C¸c ®èi tîng anchor, forms, history, links lµ thuéc tÝnh cña ®èi tîng document. Kh«ng cã c¸c ch¬ng tr×nh xö lý sù kiÖn cho c¸c frame. Sù kiÖn onLoad vµ onUnLoad lµ cho ®èi tîng window. 4.1.7. C¸c thuéc tÝnh • alinkColor - Gièng nh thuéc tÝnh ALINK. • anchor - M¶ng tÊt c¶ c¸c anchor trong document. • bgColor - Gièng thuéc tÝnh BGCOLOR. • cookie - Sö dông ®Ó x¸c ®Þnh cookie. • fgColor - Gièng thuéc tÝnh TEXT. • forms - M¶ng tÊt c¶ c¸c form trong document. • lastModified - Ngµy cuèi cïng v¨n b¶n ®îc söa. • linkColor - Gièng thuéc tÝnh LINK. • links - M¶ng tÊt c¶ c¸c link trong document. • location - URL ®Çy ®ñ cña v¨n b¶n. • referrer - URL cña v¨n b¶n gäi nã. • title - Néi dung cña thÎ . • vlinkColor - Gièng thuéc tÝnh VLINK. 4.1.8. C¸c ph¬ng thøc • document.clear - Xo¸ document hiÖn thêi. • document.close - §ãng dßng d÷ liÖu vµo vµ ®a toµn bé d÷ liÖu trong bé ®Öm ra mµn h×nh. • document.open (["mineType"]) - Më mét stream ®Ó thu thËp d÷ liÖu vµo cña c¸c phwong thøc write vµ writeln. • document.write(expression1 [,expression2]...[,expressionN]) - ViÕt biÓu thøc HTML lªn v¨n b¶n tr«ng mét cöa sæ x¸c ®Þnh. • document.writeln (expression1 [,expression2] ... [,expressionN] ) - Gièng ph¬ng thøc trªn nhng khi hÕt mçi biÓu thøc l¹i xuèng dßng. §èi tîng anchors anchor lµ mét ®o¹n v¨n b¶n trong document cã thÓ dïng lµm ®Ých cho mét siªu liªn kÕt. Nã ®îc x¸c ®Þnh b»ng cÆp thÎ vµ . §èi tîng anchor kh«ng cã thuéc tÝnh, ph¬ng thøc còng nh ch¬ng tr×nh xö lý sù kiÖn. M¶ng anchor tham chiÕu ®Õn mçi anchor cã tªn trong document. Mçi anchor ®îc tham chiÕu b»ng c¸ch: document.anchors [index] M¶ng anchor cã mét thuéc tÝnh duy nhÊt lµ length x¸c ®Þnh sè lîng c¸c anchor trong document, nã cã thÓ ®îc x¸c ®Þnh nh sau: Khoa Toan tin, §¹i häc Quèc gia Hµ Néi
JavaScript 50 document.anchors.length. §èi tîng forms C¸c form ®îc t¹o ra nhê cÆp thÎ vµ . 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Î . 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. elements M¶ng chøa tÊt c¶ c¸c thµnh phÇn trong mét form (nh checkbox, tr- êng text, danh s¸ch lùa chän encoding X©u chøa kiÓu MIME ®îc sö dông ®Ó m· ho¸ néi dung cña form göi cho server. length Sè lîng c¸c thµnh phÇn trong mét form. method Thuéc tÝnh METHOD. target X©u chøa tªn cña cöa sæ ®Ých khi submit form 4.1.10. C¸c ph¬ng thøc formName.submit () - XuÊt d÷ liÖu cña mét form tªn formName tíi trang xö lý. Ph¬ng thøc nµy m« pháng mét click vµo nót submit trªn form. Khoa Toan tin, §¹i häc Quèc gia Hµ Néi
JavaScript 51 4.1.11. C¸c ch¬ng tr×nh xö lý sù kiÖn onSubmit - Ch¬ng tr×nh xö lý sù kiÖn nµy ®îc gäi khi ngêi sö dông chuyÓn d÷ liÖu tõ form ®i. §èi tîng history §èi tîng nµy ®îc sö dông ®Ó lu 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 lu tr÷ theo thø tù thêi gian. §èi tîng nµy kh«ng cã ch¬ng tr×nh xö lý sù kiÖn. 4.1.12. C¸c thuéc tÝnh length - Sè lîng c¸c URL trong ®èi tîng. 4.1.13. C¸c ph¬ng thøc • history.back() - §îc sö dông ®Ó tham chiÕu tíi URL míi ®îc th¨m tríc ®©y. • history.forward() - §îc sö dông ®Ó tham chiÕu tíi URL kÕ tiÕp trong danh s¸ch. Nã sÏ kh«ng g©y hiÖu øng g× nÕu ®· ®Õn cuèi cña danh s¸ch. • history.go (delta | "location") - §îc sö dông ®Ó chuyÓn lªn hay chuyÓn xuèng delta bËc hay di chuÓn ®Õn URL x¸c ®Þnh bëi location trong danh s¸ch. NÕu delta ®îc sö dông th× viÖc dÞch chuyÓn lªn phÝa trªn khi delta d¬ng vµ xuèng phÝa díi khi delta ©m. nÕu sö dông location, URL gÇn nhÊt cã chøa location lµ chuçi con sÏ ®îc tham chiÕu. §èi tîng links §èi tîng link lµ mét ®o¹n v¨n b¶n hay mét ¶nh ®îc xem lµ mét siªu liªn kÕt. C¸c thuéc tÝnh cña ®èi tîng link chñ yÕu xö lý vÒ URL cña c¸c siªu liªn kÕt. §èi tîng link còng kh«ng cã ph¬ng thøc nµo. M¶ng link chøa danh s¸ch tÊt c¶ c¸c liªn kÕt trong document. Cã thÓ x¸c ®Þnh sè lîng c¸c link qua document.links.length() Cã thÓ tham chiÕu tíi mét liªn kÕt qña document.links [index] §Ó x¸c ®Þnh c¸c thuéc tÝnh cña ®èi tîng link, cã thÓ sö dông URL t¬ng tù: http://www.abc.com/chap1/page2.html#topic3 4.1.14. C¸c thuéc tÝnh • hash - Tªn anchor cña vÞ trÝ hiÖn thêi (vÝ dô topic3). • Host - PhÇn hostname:port cña URL (vÝ dô www.abc.com). Chó ý r»ng ®©y th- êng lµ cæng ngÇm ®Þnh vµ Ýt khi ®îc chØ ra. Khoa Toan tin, §¹i häc Quèc gia Hµ Néi
JavaScript 52 • Hostname - Tªn cña host vµ domain (vÝ dô ww.abc.com). • href - Toµn bé URL cho document hiÖn t¹i. • Pathname - PhÇn ®êng dÉn cña URL (vÝ dô /chap1/page2.html). • port - Cæng truyÒn th«ng ®îc sö dông cho m¸y tÝnh host, thêng lµ cæng ngÇm ®Þnh. • Protocol - Giao thøc ®îc sö dông (cïng víi dÊu hai chÊm) (vÝ dô http:). • Search - C©u truy vÊn t×m kiÕm cã thÓ ë cuèi URL cho c¸c script CGI. • Target - Gièng thuéc tÝnh TARGET cña . 4.1.15. C¸c ch¬ng tr×nh xö lý sù kiÖn • onClick - X¶y ra khi ngêi sö dông nhÊn vµo link. • onMouseOver - X¶y ra khi con chuét di chuyÓn qua link. §èi tîng Math §èi tîng Math lµ ®èi tîng néi t¹i trong JavaScript. C¸c thuéc tÝnh cña ®èi tîng nµy chøa nhiÒu h»ng sè to¸n häc, c¸c hµm to¸n häc, lîng gi¸c phæ biÕn. §èi tîng Math kh«ng cã ch¬ng tr×nh xö lý sù kiÖn. ViÖc tham chiÕu tíi number trong c¸c ph¬ng thøc cã thÓ lµ sè hay c¸c biÓu thøc ®îc ®n¸h gi¸ lµ sè hîp lÖ. 4.1.16. C¸c thuéc tÝnh • E - H»ng sè Euler, kho¶ng 2,718. • LN2 - logarit tù nhiªn cña 2, kho¶ng 0,693. • LN10 - logarit tù nhiªn cña 10, kho¶ng 2,302. • LOG2E - logarit c¬ sè 2 cña e, kho¶ng 1,442. • PI - Gi¸ trÞ cña π, kho¶ng 3,14159. • SQRT1_2 - C¨n bËc 2 cña 0,5, kho¶ng 0,707. • SQRT2 - C¨n bËc 2 cña 2, kho¶ng 1,414. 4.1.17. C¸c ph¬ng thøc • Math.abs (number) - Tr¶ l¹i gi¸ trÞ tuyÖt ®èi cña number. • Math.acos (number) - Tr¶ l¹i gi¸ trÞ arc cosine (theo radian) cña number. Gi¸ trÞ cña number ph¶i n¨mg gi÷a -1 vµ 1. • Math.asin (number) - Tr¶ l¹i gi¸ trÞ arc sine (theo radian) cña number. Gi¸ trÞ cña number ph¶i n¨mg gi÷a -1 vµ 1. • Math.atan (number) - Tr¶ l¹i gi¸ trÞ arc tan (theo radian) cña number. • Math.ceil (number) - Tr¶ l¹i sè nguyªn nhá nhÊt lín h¬n hoÆc b»ng number. Khoa Toan tin, §¹i häc Quèc gia Hµ Néi
JavaScript 53 • Math.cos (number) - Tr¶ l¹i gi¸ trÞ cosine cña number. • Math.exp (number) - Tr¶ l¹i gi¸ trÞ e^ number, víi e lµ h»ng sè Euler. • Math.floor (number) - Tr¶ l¹i sè nguyªn lín nhÊt nhá h¬n hoÆc b»ng number. • Math.log (number) - Tr¶ l¹i logarit tù nhiªn cña number. • Math.max (num1,num2) - Tr¶ l¹i gi¸ trÞ lín nhÊt gi÷a num1 vµ num2 • Math.min (num1,num2) - Tr¶ l¹i gi¸ trÞ nhá nhÊt gi÷a num1 vµ num2. • Math.pos (base,exponent) - Tr¶ l¹i gi¸ trÞ base luü thõa exponent. • Math.random (r) - Tr¶ l¹i mét sè ngÉu nhiªn gi÷a 0 vµ 1. Phwong thøc nµy chØ thùc hiÖn ®îc trªn nÒn t¶ng UNIX. • Math.round (number) - Tr¶ l¹i gi¸ trÞ cña number lµm trßn tíi sè nguyªn gÇn nhÊt. • Math.sin (number) - Tr¶ l¹i sin cña number. • Math.sqrt (number) - Tr¶ l¹i c¨n bËc 2 cña number. • Math.tan (number) - Tr¶ l¹i tag cña number. §èi tîng Date §èi tîng Date lµ ®èi tîng cã s½n trong JavaScript. Nã cung cÊp nhiÒu ph¬ng thøc cã Ých ®Ó xö lý vÒ thêi gian vµ ngµy th¸ng. §èi tîng Date kh«ng cã thuéc tÝnh vµ ch¬ng tr×nh xö lý sù kiÖn. PhÇn lín c¸c ph¬ng thøc date ®Òu cã mét ®èi tîng Date ®i cïng. C¸c ph¬ng thøc giíi thiÖu trong phÇn nµy sö dông ®èi tîng Date dateVar, vÝ dô: dateVar = new Date ('August 16, 1996 20:45:04'); 4.1.18. C¸c ph¬ng thøc • dateVar.getDate() - Tr¶ l¹i ngµy trong th¸ng (1-31) cho dateVar. • dateVar.getDay() - Tr¶ l¹i ngµy trong tuÇn (0=chñ nhËt,...6=thø b¶y) cho dateVar. • dateVar.getHours() - Tr¶ l¹i giê (0-23) cho dateVar. • dateVar.getMinutes() - Tr¶ l¹i phót (0-59) cho dateVar. • dateVar.getSeconds() - Tr¶ l¹i gi©y (0-59) cho dateVar. • dateVar.getTime() - Tr¶ l¹i sè lîng c¸c mili gi©y tõ 00:00:00 ngµy 1/1/1970. • dateVar.getTimeZoneOffset() - Tr¶ l¹i ®é dÞch chuyÓnb»ng phót cña giê ®Þa ph¬ng hiÖn t¹i so víi giê quèc tÕ GMT. • dateVar.getYear()-Tr¶ l¹i n¨m cho dateVar. Khoa Toan tin, §¹i häc Quèc gia Hµ Néi
JavaScript 54 • Date.parse (dateStr) - Ph©n tÝch chuçi dateStr vµ tr¶ l¹i sè lîng c¸c mili gi©y tÝnh tõ 00:00:00 ngµy 01/01/1970. • dateVar.setDay(day) - §Æt ngµy trong th¸ng lµ day cho dateVar. • dateVar.setHours(hours) - §Æt giê lµ hours cho dateVar. • dateVar.setMinutes(minutes) - §Æt phót lµ minutes cho dateVar. • dateVar.setMonths(months) - §Æt th¸ng lµ months cho dateVar. • dateVar.setSeconds(seconds) - §Æt gi©y lµ seconds cho dateVar. • dateVar.setTime(value) - §Æt thêi gian lµ value, trong ®ã value biÓu diÔn sè lîng mili gi©y tõ 00:00:00 ngµy 01/01/10970. • dateVar.setYear(years) - §Æt n¨m lµ years cho dateVar. • dateVar.toGMTString() - Tr¶ l¹i chuçi biÓu diÔn dateVar díi d¹ng GMT. • dateVar.toLocaleString()-Tr¶ l¹i chuçi biÓu diÔn dateVar theo khu vùc thêi gian hiÖn thêi. • Date.UTC (year, month, day [,hours] [,minutes] [,seconds]) - Tr¶ l¹i sè l- îng mili gi©y tõ 00:00:00 01/01/1970 GMT. §èi tîng String §èi tîng String lµ ®èi tîng ®îc x©y dùng néi t¹i trong JavaScript cung cÊp nhiÒu ph¬ng thøc thao t¸c trªn chuçi. §èi tîng nµy cã thuéc tÝnh duy nhÊt lµ ®é dµi (length) vµ kh«ng cã ch¬ng tr×nh xö lý sù kiÖn. 4.1.19. C¸c ph¬ng thøc • str.anchor (name) - §îc sö dông ®Ó t¹o ra thÎ (mét c¸ch ®éng). Tham sè name lµ thuéc tÝnh NAME cña thÎ . • str.big() - KÕt qu¶ gièng nh thÎ trªn chuçi str. • str.blink() - KÕt qu¶ gièng nh thÎ trªn chuçi str. • str.bold() - KÕt qu¶ gièng nh thÎ trªn chuçi str. • str.charAt(a) - Tr¶ l¹i ký tù thø a trong chuçi str. • str.fixed() - KÕt qu¶ gièng nh thÎ trªn chuçi str. • str.fontcolor() - KÕt qu¶ gièng nh thÎ . • str.fontsize(size) - KÕt qu¶ gièng nh thÎ . • 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Î trªn chuçi str. Khoa Toan tin, §¹i häc Quèc gia Hµ Néi
JavaScript 55 • str.lastIndex0f(srchStr [,index]) - Tr¶ l¹i vÞ trÝ trong chuçi str vÞ trÝ xuÊt hiÖn cuèi cïng cña chuçi srchStr. Chuçi str ®îc t×m tõ ph¶i sang tr¸i. Tham sè index cã thÓ ®îc sö dông ®Ó x¸c ®Þnh vÞ trÝ b¾t ®Çu t×m kiÕm trong chuçi. • str.link(href) - §îc sö dông ®Ó t¹o ra mét kÕt nèi HTML ®éng cho chhuçi str. Tham sè href lµ URL ®Ých cña liªn kÕt. • str.small() - KÕt qu¶ gièng nh thÎ trªn chuçi str. • str.strike() - KÕt qu¶ gièng nh thÎ trªn chuçi str. • str.sub() - T¹o ra mét subscript cho chuçi str, gièng thÎ . • str.substring(a,b) - Tr¶ l¹i chuçi con cña str lµ c¸c ký tù tõ vÞ trÝ thø a tíi vÞ trÝ thø b. C¸c ký tù ®îc ®Õm tõ tr¸i sang ph¶i b¾t ®Çu tõ 0. • str.sup() - T¹o ra superscript cho chuçi str, gièng thÎ . • str.toLowerCase() - §æi chuçi str thµnh ch÷ thêng. • str.toUpperCase() - §æi chuçi str thµnh ch÷ hoa. C¸c phÇn tö cña ®èi tîng Form Form ®îc t¹o bëi c¸c phÇn tö cho phÐp ngêi sö dông ®a th«ng tin vµo. Khi ®ã, néi dung (hoÆc gi¸ trÞ) cña c¸c phÇn tö sÏ ®îc chuyÓn ®Õn mét ch¬ng tr×nh trªn server qua mét giao diÖn ®îc gäi lµ Common Gateway Interface(Giao tiÕp qua mét cæng chung) gäi t¾t lµ CGI Sö dông JavaScript b¹n cã thÓ viÕt nh÷ng ®o¹n scripts chÌn vµo HTML cña b¹n ®Ó lµm viÖc víi c¸c phÇn tö cña form vµ c¸c gi¸ trÞ cña chóng. B¶ng ?: C¸c phÇn tö cña form PhÇn tö M« t¶ Lµ mét nót bÊm h¬n lµ nót submit hay nót reset button () checkbox Mét checkbox () Lµ mét phÇn tö t¶i file lªn cho phÐp ngêi sö dông göi lªn mét file FileUpload () hidden Mét trêng Èn () 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 password thÞ lµ dÊu (*)() radio Mét nót bÊm () reset Mét nót reset() Mét danh s¸ch lùa chän select (option1 option2) submit Mét nót submit () Khoa Toan tin, §¹i häc Quèc gia Hµ Néi
JavaScript 56 text Mét trêng text () Mét trêng text cho phÐp nhËp vµp nhiÒu dßng textArea default text) Mçi phÇn tö cã thÓ ®îc ®Æt tªn ®Ó JavaScript truy nhËp ®Õn chóng qua tªn 4.1.20. Thuéc tÝnh type Trong mçi phÇn tö cña form ®Òu cã thuéc tÝnh type, ®ã lµ mét x©u chØ ®Þnh râ kiÓu cña phÇn tö ®îc ®a vµo nh nót bÊm, mét trêng text hay mét checkbox... X©u ®ã cã thÓ lµ mét trong c¸c gi¸ trÞ sau: Text field: "text" Radio button: "radio" Checkbox: "checkbox" Hidden field: "hidden" Submit button: "submit" Reset button: "reset" Password field: "password" Button: "button" Select list: "select-one" Multiple select lists: "select-multiple" Textarea field: "textarea" 4.1.21. PhÇn tö button Trong mét form HTML chuÈn, chØ cã hai nót bÊm cã s½n lµ submit vµ reset bëi vÞ d÷ liÖu trong form ph¶i ®îc göi tíi mét vµi ®Þa chØ URL (thêng lµ CGI-BIN script) ®Ó xö lý vµ lu tr÷. Mét phÇn tö button ®îc chØ ®Þnh râ khi sö dông thÎ INPUT: 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 ®Ó ®Þnh gi¸ biÓu thøc khi button ®îc bÊm. VÝ dô: §Þnh gi¸ mét form sö dông phÇn tö button. Khoa Toan tin, §¹i häc Quèc gia Hµ Néi
JavaScript 57 button Example Enter a JavaScript mathematical expression: The result of this expression is: 4.1.22. PhÇn tö checkbox C¸c phÇn tö checkbox cã kh¶ n¨ng bËt t¾t dïng ®Ó chän hoÆc kh«ng chän mét th«ng tin. C¸c checkbox cã nhiÒu thuéc tÝnh vµ c¸ch thøc h¬n button. B¶ng díi ®©y lµ danh s¸ch c¸c thuéc tÝnh vµ c¸c c¸ch thøc cña phÇn tö checkbox. B¶ng . C¸c thuéc tÝnh vµ c¸ch thøc cña phÇn tö checkbox. C¸ch thøc vµ thuéc M« t¶ tÝnh checked Cho biÕt tr¹ng th¸i hiÖn thêi cña checkbox (thuéc tÝnh) defaultChecked Cho biÕt tr¹ng th¸i mÆc ®Þnh cña phÇn tö (thuéc tÝnh) name Cho biÕt tªn cña phÇn tö ®îc chØ ®Þnh trong thÎ INPUT (thuéc tÝnh) value Cho biÕt gi¸ trÞ hiÖn thêi cña phÇn tö ®îc chØ ®Þnh trong thÎ INPUT (thuéc tÝnh) click() M« t¶ mét click vµo checkbox (C¸ch thøc) PhÇn tö checkbox chØ cã mét thÎ sù kiÖn lµ onClick VÝ dô: T¹o hép checkbox ®Ó nhËp vµo mét sè råi lùa chän tÝnh nh©n ®«i vµ b×nh ph¬ng: Khoa Toan tin, §¹i häc Quèc gia Hµ Néi
JavaScript 58 checkbox Example Value: Action (default double): Square Result: Khoa Toan tin, §¹i häc Quèc gia Hµ Néi
JavaScript 59 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: ( ) Khi ®ã nÕu ngêi dïng thay ®æi mét c©u lÖnh kh¸c, form sÏ ®îc tÝnh to¸n l¹i. §Ó t¹o ra sù më réng cho checkbox. b¹n cã thÓ thay ®æi hµm calculate() nh sau: function calculate(form,callingField) { if (callingField == "result") { // if (1) if (form.square.checked) { // if (2) form.entry.value = Math.sqrt(form.result.value); } else { form.entry.value = form.result.value / 2; } //end if(2) } else { if (form.square.checked) { // if (3) form.result.value=form.entry.value*form.entry.value; } else { form.result.value = form.entry.value * 2; } // end if (3) } // end if (1) } 4.1.23. PhÇn tö File Upload PhÇn tö nµy cung cÊp cho form mét c¸ch ®Ó ngêi sö dông cã thÓ chØ râ mét file ®a vµo form xö lý. PhÇn tö file Upload ®îc chØ ®Þnh râ trong JavaScript b»ng ®èi tîng FileUpload. §èi tîng chØ cã hai thuéc tÝnh lµ name vµ value, c¶ hai ®Òu lµ gi¸ trÞ x©u nh c¸c ®èi tîng kh¸c. Kh«ng cã c¸ch thøc hay thÎ file cho ®èi tîng nµy. 4.1.24. PhÇn tö hidden PhÇn tö hidden lµ phÇn tö duy nhÊt trong sè tÊt c¶ c¸c phÇn tö cña form kh«ng ®îc hiÓn thÞ trªn Web browser. Trêng hidden cã thÓ sö dông ®Ó lu 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) nhng nã kh«ng ®îc hiÓn thÞ trªn trang. Mäi ngêi cã thÓ sö dông trong JavaScript ®Ó lu c¸c gi¸ trÞ trong suèt mét script vµ ®Ó tÝnh to¸n kh«ng cÇn form. Khoa Toan tin, §¹i häc Quèc gia Hµ Néi