CongNgheWeb Session31

Chư¬ng 3: Ng«n ng÷ JavaScript
I. GIỚI THIỆU
+ Script cã thÓ xem như mét c«ng cô nh»m hç trî
ngưêi lËp tr×nh t¹o ra çc øng dông nhanh chãng,
®¬n gi¶n chø kh«ng mang tÝnh chuyªn nghiÖp như
mét ng«n ng÷ lËp tr×nh thËt sù.
+ JavaScript còng lµ mét lo¹i Script cho phÐp
ph¸t triÓn çc øng dông trªn Internet ë c¶ phÝa
Client vµ Server b»ng çch viÕt çc chư¬ng tr×nh
víi có ph¸p hoµn toµn gièng Java.
II. Ng«n ng÷ JavaScript
+ JavaScript cã thÓ viÕt kÌm trong file HTML ®Ó
x©y dùng mét trang web chÆt chÏ, phong phó vÒ néi
dung vµ h×nh thøc, như kiÓm tra tÝnh tư¬ng thÝch
vµ th«ng b¸o lçi trong qu¸ tr×nh nhËp liÖu...
Çch viÕt JavaScript trong mét trang HTML như
sau:
<Script Language="JavaScript">
//Çc hµm cña JavaScript ®Æt ë ®©y
</Script>
1. Mét sè ®Þnh nghÜa
1.1. Çc kiÓu d÷ liÖu :
Trong JavaScript cã çc kiÓu d÷ liÖu :
• Interger: Gåm çc sè ë d¹ng c¬ sè 10, c¬ sè 16, c¬ sè 8, c¬ sè 2
⚫ VÝ dô: 42, 0xFFF, -345...
• Sè thùc : VÝ dô: 3.1415, -3.1E12, 2e-12 ... lu ý E, e ®Òu cã ý
nghÜa như nhau.
• Boolean: Cã gi¸ true hoÆc false.
• Chuçi (String): Mét chuçi lµ mét d·y çc ký tù n»m gi÷a hai
cÆp dÊu ("") hoÆc (''). VÝ dô: "blah",'blah',"1234", “dong
mot\n dong hai”.
1.2. BiÕn
+ BiÕn lµ mét ®¹i lưîng dïng ®Ó lưu tr÷ d÷ liÖu mµ gi¸
trÞ cña nã cã thÓ thay ®æi trong qu¸ tr×nh thùc hiÖn chư¬ng tr×nh.
+ §Ó biÓu diÔn biÕn ngưêi ta sö dông tªn biÕn, khi khai
b¸o mét biÕn th× tªn biÕn ®ưîc cÊp ph¸t mét ®Þa chØ cô thÓ trong
bé nhí m¸y tÝnh.
+ Tªn biÕn lµ chuçi gåm çc ký tù, ch÷ sè, vµ dÊu g¹ch
dưíi (_), tªn biÕn trong ng«n ng÷ JavaScript cã ph©n biÖt ch÷ hoa
vµ ch÷ thưêng.
+ §Ó ®Þnh nghÜa mét biÕn b»ng çch dïng tõ kho¸ var
VÝ dô: var x=12
Trong JavaScript cã thÓ dïng biÕn mµ kh«ng cÇn khai b¸o.
1.3. Çc phÐp to¸n
+ Các phép toán số học
+ Çc phÐp to¸n so s¸nh
+ Çc phÐp to¸n thao t¸c trªn bit
+ Çc phÐp to¸n logic
2 CÊu tróc çc lÖnh ®iÒu khiÓn trong JavaScript
+ Lệnh if... else
+ Lệnh for
+ Lệnh while
……
III. Xö lý çc sù kiÖn trªn trang Web
1. Sù kiÖn vµ ®èi tưîng
+ §Þnh nghÜa sù kiÖn: sù kiÖn lµ mét hµnh ®éng x¶y
ra khi ngưêi sö dông lµm mét viÖc g× ®ã trªn trang
web.
VÝ dô : KÝch (Click) mét nót, thay ®æi (Change) d÷ liÖu trong
trưêng Textbox, di chuyÓn con trá chuét (Mouse) trªn
mét siªu liªn kÕt (Hyperlink),...
+ Vµ như vËy b¹n ph¶i tiÕn hµnh viÕt çc lÖnh ®Ó khi
çc sù kiÖn nµy x¶y ra th× ®Þnh hưíng ngưêi sö dông
®¸p øng ®óng nhu cÇu cña øng dông, như th«ng b¸o
nhËp sai d÷ liÖu, d÷ liÖu chưa ®Çy ®ñ,....
⚫ + ViÖc viÕt çc lÖnh ®Ó ®¸p øng çc sù kiÖn nµy gäi lµ
®iÒu khiÓn sù kiÖn. Trong JavaScript th× çch sö dông
çc ®iÒu khiÓn như sau: trưíc tiªn lµ tõ "on" vµ theo
sau lµ tªn sù kiÖn.
⚫ VÝ dô : Khi kÝch mét nót th× sù kiÖn Click x¶y ra, ®Ó
®¸p øng sù kiÖn nµy b¹n dïng ®iÒu khiÓn onClick.
⚫ + B¶ng dưíi ®©y liÖt kª çc sù kiÖn vµ çc ®iÒu khiÓn
sù kiÖn tư¬ng øng cho tÊt c¶ çc sù kiÖn trªn web như
sau :
Sù kiÖn ĐiÒu khiÓn X¶y ra khi Áp dông cho
blur onBlur Ngưêi sö dông di chuyÓn focus rêi Textbox, Textarea,
khái phÇn tö trªn form Select list
click onClick Ngưêi sö dông kÝch vµo mét phÇn tö Button, Radio
trªn form hoÆc kÝch vµo 1 liªn kÕt button, Check
button, Submit
button, Reset
button, Link
change onChange Ngưêi sö dông thay ®æi gi¸ trÞ cña Textbox, Textarea,
phÇn tö Select list
focus onFocus Ngưêi sö dông di chuyÓn focus ®Õn Textbox, Textarea,
phÇn tö trªn form Select list
select onSelect Ngưêi sö dông chän dữ liÖu trong çc Textbox, Textarea
phÇn tö
load onLoad N¹p trang web vµo trinh duyÖt Document

unload onUnload Tho¸t khái mét trang web Document
mouseover onMouseOver Ngưêi sö dông di chuyÓn con trá chuét Link
trªn mét liªn kÕt
submit onSubmit Ngưêi sö dông cho thi hµnh øng dông Submit button
VÝ dô: Dưíi ®©y lµ mét trang HTML hoµn chØnh khi
kÝch vµo nót "Click here" sÏ xuÊt hiÖn c©u th«ng
b¸o "Hello..."
⚫ <Script language="JavaScript">
⚫ function thongbao()
{
⚫ alert("Hello...");
⚫ }
⚫ </Script>
VÝ dô: Dưíi ®©y lµ mét trang HTML hoµn chØnh khi
kÝch vµo nót "Click here" sÏ xuÊt hiÖn c©u th«ng
b¸o "Hello..."
⚫ <BODY>
⚫ <Form name="form1">
⚫ <input type="button" value="Click here"
onClick="thongbao()">
⚫ </Form>
⚫ </BODY>
§Ó ®¸p øng ®óng sù kiÖn cho çc ®èi tưîng cÇn ®iÒu khiÓn,
b¹n cã thÓ h×nh dung ra çc ®èi tưîng trªn mét trang web
như sau:
+ §èi tưîng lín nhÊt cña tr×nh duyÖt lµ window
+ Trong window chøa çc tµi liÖu HTML (mçi tµi liÖu lµ
mét ®èi tưîng document)
+ Trong document cã thÓ chøa nhiÒu Form (cã ®èi tưîng lµ
form), vµ çc liªn kÕt (cã ®èi tưîng lµ links)
+ Trong Form cã thÓ chøa nhiÒu phÇn tö (cã ®èi tưîng lµ
elements)
window
document
form
elements
links
2. Çc phư¬ng thøc vµ thuéc tÝnh cña çc ®èi tưîng
+ §Ó tham chiÕu ®Õn çc thuéc tÝnh (hay çc phư¬ng thøc)
cña mét ®èi tưîng nµo ®ã b¹n cÇn ®Æc t¶ tªn cña ®èi tưîng
®ã cïng víi çc ®èi tưîng cÊp cao h¬n nã.
VÝ dô: ĐÓ g¸n gi¸ trÞ x©u chuçi "Hello" cho trưêng textbox (cã tªn
lµ txtbox) trong mét form (cã tªn lµ form1) b¹n sö dông lÖnh
sau:
document.form1.txtbox.value="Hello"
+ Trong ®ã value lµ thuéc tÝnh cña ®èi tưîng txtbox, çc
thµnh phÇn document, form1 lµ çc ®èi tưîng «ng cha cña
nã.
2.1 §èi tưîng window
⚫ * Çc phư¬ng thøc:
Phư¬ng thøc Môc ®Ých
alert("message") Đưa ra hép tho¹i th«ng b¸o víi néi dung lµ
message
confirm("message") Đưa ra hép tho¹i yªu cÇu ngưêi sö dông x¸c
nhËn l¹i c«ng viÖc cÇn hµnh ®éng (chän OK
hay Cancel). Phư¬ng thøc nµy tr¶ vÒ gi¸ trÞ
true (khi chän OK) hoÆc false (khi chän
Cancel)
prompt("message",variable) Đưa ra hép tho¹i cho phÐp ngưêi sö dông nhËp
dữ liÖu ®Çu vµo, dữ liÖu sau khi nhËp ®ưîc g¸n
cho biÕn variable. message lµ dßng th«ng b¸o.
close() Đãng cöa sæ trinh duyÖt
open("URL","name") Më trang web cã ®Þa chØ lµ URL trong cöa sæ
2.1 §èi tưîng window
⚫ * Çc thuéc tÝnh:
Thuéc tÝnh Môc ®Ých
status ChØ ®Þnh th«ng tin n»m trªn thanh tr¹ng th¸i
ë cuèi cöa sæ
⚫ §Ó khi n¹p trang web lªn mµ thanh trang th¸i cã dßng

th«ng b¸o "Chµo çc b¹n..." th× b¹n dïng tag <BODY> như
sau:
<BODY onLoad="window.status='Chµo çc b¹n...'">
⚫ * Çc ®iÒu khiÓn sù kiÖn:
§èi tưîng window cã hai ®iÒu khiÓn sù kiÖn lµ onLoad vµ
onUnload
2.2. §èi tưîng document
2.3. §èi tưîng form
2.4. §èi tưîng links
2.5. §èi tưîng text, textarea, vµ password
2.6. §èi tưîng select (gièng nh listbox)
2.7. §èi tưîng button, submit, reset
2.8. §èi tưîng checkbox, radio
2.2 §èi tưîng document
⚫ * Çc phương thức:
write(expression) hoÆc
ViÕt biÓu thøc expression ra trang web trªn cöa cña tr×nh
writeln(expression)
duyÖt
NÕu cã nhiÒu biÓu thøc cÇn viÕt th× çc biÓu thøc nµy çch
nhau dÊu phÈy (,)
writeln kh¸c write ë chç lµ sau khi viÕt xong th× xuèng hµng
tiÕp theo.
VÝ dô : §Ó viÕt mét biÓu thøc 5+6=11 ra tr×nh duyÖt b¹n sö
dông có ph¸p như sau:
⚫ document.write("5 + 6 =",5+6)
⚫ * Çc thuộc tÝnh:
bgcolor="#rrggbb" X¸c ®Þnh mµu nÒn cho tµi liÖu
fgcolor="#rrggbb" X¸c ®Þnh mµu ch÷ cho tµi liÖu
linkColor="#rrggbb" X¸c ®Þnh mµu cho çc liªn kÕt khi chưa cã sù viÕng
th¨m liªn kÕt ®ã
vlinkColor="#rrggbb" X¸c ®Þnh mµu cho çc liªn kÕt khi ®· cã sù viÕng th¨m
liªn kÕt ®ã
alinkColor=="#rrggbb" X¸c ®Þnh mµu cho liªn kÕt khi nã ®ưîc kÝch ho¹t
⚫ VÝ dô : Thay ®æi mµu nÒn cña trang web khi ngưêi sö dông
nhËp vµo tæ hîp mµu (hay tªn mµu) trong « textbox vµ kÝch
nót "bgColor"
⚫ VÝ dô : Thay ®æi mµu nÒn cña trang web khi ngưêi sö dông
nhËp vµo tæ hîp mµu (hay tªn mµu) trong « textbox vµ kÝch
nót "bgColor"
2.3 §èi tưîng form
⚫ * Çc phương thức
submit() Cho thùc thi øng dông (b¾t ®Çu göi sè liÖu lªn Server xö lý)
* Çc thuéc tÝnh

Action §Æc t¶ URL cña Server mµ d÷ liÖu tõ form sÏ ®îc göi ®Õn
Method §Æc t¶ phư¬ng thøc trao ®æi th«ng tin gi÷a Client vµ Server
(POST hay GET)
Name X¸c ®Þnh tªn cña form
Target X¸c ®Þnh tªn cña cöa sæ (hay cña frame) mµ khi d÷ liÖu ph¶n
håi vÒ tõ Server sÏ ®ưîc hiÓn thÞ trªn cöa sæ ®ã
* Çc ®iÒu khiÓn sù kiÖn : ChØ cã ®iÒu khiÓn sù kiÖn onSubmit

2.4 §èi tưîng links
* Çc thuéc tÝnh
Target X¸c ®Þnh tªn cña cöa sæ (hay cña frame) mµ khi kÝch vµo
liªn kÕt th× trang ®ưîc liªn kÕt sÏ n¹p vµo cöa sæ ®ã.
* Çc ®iÒu khiÓn sù kiÖn : Bao gåm onClick vµ

onMouseOver
VÝ dô sau cho xuÊt hiÖn c©u th«ng b¸o "Click here" ë
thanh tr¹ng th¸i khi b¹n di chuyÓn con trá chuét trªn dßng v¨n
b¶n liªn kÕt "onMouseOver Sample"
<a href="" onMouseOver="window.status='Click
here'">onMouseOver Sample </a>
2.5 §èi tưîng text, textarea, password
* Çc phương thức
Blur() Di chuyÓn focus rêi khái ®èi tưîng
Focus() Di chuyÓn focus tíi ®èi tưîng
Select() §¸nh khèi d÷ liÖu ®· ®ưîc nhËp cho ®èi tưîng
* Çc thuéc tÝnh

defaultValue X¸c ®Þnh gi¸ trÞ ngÇm ®Þnh cho ®èi tưîng
Name X¸c ®Þnh tªn cña ®èi tưîng
Value X¸c ®Þnh gi¸ trÞ hiÖn hµnh cña ®èi tưîng
* Çc ®iÒu khiÓn sù kiÖn : Bao gåm onBlur, onChange, onFocus, vµ

onSelect
VÝ dô: T¹o ra mét form trong ®ã cã mét textbox dïng ®Ó nhËp liÖu.
Sau khi nhËp sè liÖu vµ dïng phÝm Tab ®Ó di chuyÓn focus khái « nhËp liÖu
th× tÊt c¶ v¨n b¶n trong « ®ã sÏ chuyÓn sang ch÷ hoa. Khi n¹p trang web
lªn th× focus (hay con trá) ®ưîc ®Æt t¹i « nhËp liÖu
VÝ dô: T¹o ra mét form trong ®ã cã mét textbox dïng ®Ó nhËp liÖu.
Sau khi nhËp sè liÖu vµ dïng phÝm Tab ®Ó di chuyÓn focus khái « nhËp liÖu
th× tÊt c¶ v¨n b¶n trong « ®ã sÏ chuyÓn sang ch÷ hoa. Khi n¹p trang web
lªn th× focus (hay con trá) ®ưîc ®Æt t¹i « nhËp liÖu
2.6 §èi tưîng select (gièng như listbox)
* Çc thuéc tÝnh
Length X¸c ®Þnh sè phÇn tö trong danh s¸ch
Name X¸c ®Þnh tªn ®èi tưîng
SelectedIndex Tr¶ vÒ (hoÆc thiÕt lËp) chØ môc cña phÇn tö trong danh s¸ch ®ưîc chän
(nghĩa lµ phÇn tö thø mÊy ®ưîc chän, b¾t ®Çu tõ 0)
* Çc ®iÒu khiÓn sù kiÖn : Bao gåm onBlur, onChange, vµ onFocus

VÝ dô: T¹o ra một form chøa 1 select box (gåm 4 phÇn tö tõ 0 ®Õn 3), 1
textbox ®Ó nhËp liÖu, vµ 1 button. Khi ngưêi sö dông nhËp một sè vµo «
textbox vµ kÝch nót button th× phÇn tö trong select box cã chØ môc b»ng sè
®ưîc nhËp sÏ ®ưîc chän Khi n¹p trang web lªn th× focus (hay con trá) ®ưîc
®Æt t¹i « nhËp liÖu
VÝ dô: T¹o ra một form chøa 1 select box (gåm 4 phÇn tö tõ 0 ®Õn 3), 1
textbox ®Ó nhËp liÖu, vµ 1 button. Khi ngưêi sö dông nhËp một sè vµo «
textbox vµ kÝch nót button th× phÇn tö trong select box cã chØ môc b»ng sè
®ưîc nhËp sÏ ®ưîc chän
2.7 §èi tưîng button, submit, reset
* Çc thuéc tÝnh

Name X¸c ®Þnh tªn ®èi tưîng
Value X¸c ®Þnh gi¸ trÞ cña ®èi tưîng
* Çc ®iÒu khiÓn sù kiÖn : ChØ cã onClick

2.8 §èi tưîng checkbox, radio
* Çc thuéc tÝnh
Checked X¸c ®Þnh tr¹ng th¸i ®ưîc chän hay kh«ng (true hay false)
cña ®èi tưîng hay mét m¶ng ®èi tưîng
defaultChecked ChØ ®Þnh gi¸ trÞ ngÇm ®Þnh cho ®èi tưîng ®ưîc chän
name X¸c ®Þnh tªn cña ®èi tưîng
value X¸c ®Þnh gi¸ trÞ cña ®èi tưîng
* Çc ®iÒu khiÓn sù kiÖn : ChØ cã onClick

3. Các đối tượng người dùng tự định nghĩa
⚫ Các đối tượng người dùng tự định nghĩa và đối tượng
có sẵn là đối tượng con của một đối tượng Object.
⚫ Toán tử new được sử dụng để tạo một đối tượng. Để
tạo một đối tượng, toán tử new được theo sau bởi
phương thức constructor.
var object = new Object();
var lanpro = new Array("C", “Java", “Python");
⚫ Constructor là một hàm tạo và khởi tạo một đối
tượng.
⚫ JavaScript cung cấp một hàm constructor đặc biệt
là Object() để xây dựng một đối tượng.
⚫ Giá trị trả về của Object() constructor được gán tới
một biến.
⚫ Biến này chứa một tham chiếu tới đối tượng mới.
Các thuộc tính được gán tới đối tượng không là các
biến và không được định nghĩa với từ khóa var.
Ví dụ : Minh hoạ cách tạo một Object
Ví dụ: Từ khóa this được sử dụng để tham chiếu tới đối
tượng mà đã được truyền tới một hàm
Định nghĩa phương thức cho một đối tượng
⚫ Ví dụ trên minh họa cách constructor tạo đối
tượng và gán các thuộc tính.
⚫ Chúng ta cần hoàn thành việc định nghĩa một
đối tượng bằng việc gán các phương thức cho
nó.
Từ khóa 'with‘:
⚫ Được sử dụng để tham chiếu các thuộc tính hoặc phương
thức của đối tượng.
⚫ Đối tượng được xác định như là một tham số tới with trở
thành đối tượng mặc định cho của khối mà theo sau.
⚫ Các thuộc tính và phương thức cho đối tượng có thể được sử
dụng mà không cần đặt tên đối tượng đó
⚫ Cú pháp cho đối tượng ‘with’ như sau:
with(object){
properties used without the object name and dot
}
Từ khóa 'with‘:
III. Xử lý sự kiện trên trang Web
JavaScript có một số đối tượng có sẵn.
Những đối tượng này là có thể truy cập từ bất cứ đâu trong
chương trình và sẽ làm việc theo cách tương tự với bất kỳ đối
tượng nào đang chạy trên bất kỳ hệ điều hành nào.
Đối tượng Number Đối tượng Boolean
Đối tượng String Đối tượng Array
Đối tượng Date Đối tượng Math
Hết !!!

CongNgheWeb Session31

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CongNgheWeb Session31

Uploaded by

Copyright:

Available Formats

Chư¬ng 3: Ng«n ng÷ JavaScript

load onLoad N¹p trang web vµo trinh duyÖt Document

Thuéc tÝnh Môc ®Ých

⚫ §Ó khi n¹p trang web lªn mµ thanh trang th¸i cã dßng

fgcolor="#rrggbb" X¸c ®Þnh mµu ch÷ cho tµi liÖu

* C¸c thuéc tÝnh

* C¸c ®iÒu khiÓn sù kiÖn : ChØ cã ®iÒu khiÓn sù kiÖn onSubmit

* C¸c ®iÒu khiÓn sù kiÖn : Bao gåm onClick vµ

Thuéc tÝnh Môc ®Ých

* C¸c ®iÒu khiÓn sù kiÖn : Bao gåm onBlur, onChange, onFocus, vµ

* C¸c ®iÒu khiÓn sù kiÖn : Bao gåm onBlur, onChange, vµ onFocus

Thuéc tÝnh Môc ®Ých

* C¸c ®iÒu khiÓn sù kiÖn : ChØ cã onClick

name X¸c ®Þnh tªn cña ®èi tưîng

value X¸c ®Þnh gi¸ trÞ cña ®èi tưîng

* C¸c ®iÒu khiÓn sù kiÖn : ChØ cã onClick

You might also like