Tài liệu học lập trình javascript

JAVASCRIPT
Ba
̀
i 1: TÔ
̉
NG QUAN VÊ
̀
JAVASCRIPT.
1. Đă
̣
c tı
́
nh cu
̉
a ngôn ngư Javascript:
J (embedded) hoă
̣
c tı
́
ch hơp (integated) va
̀
o tâ
̣
p tin HTML chuâ
̉
n. Khi file đơc load trong
Browser (co
́
support cho JavaScript), Browser se
̃
thông di

̣
ch ca
́
c Script va
̀
thưc hiê
̣
n ca
́
c công
viê
̣
c
xa
́
c đnh. Chưng trı
̀
nh nguô
̀
n JavaScript đơc thông di
̣
ch trong trang HTML sau khi toa
̀
n bô
̣
trang
đơc load nhưng trư
́
c khi trang đơc hiê
̉

n thi
̣
.
Javascript la
̀
mô
̣
t ngôn ngư co
́
đă
̣
c tı
́
nh:
• Đn gia
̉
n.
• Đô
̣
ng (Dynamic).
• Hư
́
ng đô
́
i tư
̣
ng (Object Oriented).
2. Ngôn ngư JavaScript:
Mô
̣

t trong nhưng đă
̣
c tı
́
nh quan tro
̣
ng cu
̉
a ngôn ngư JavaScript la
̀
kha
̉
năng ta
̣
o va
̀
sư du
̣
ng ca
́
c đô
́
i
tư
̣
ng (Object). Ca
́
c Object na
̀
y cho phe

́
p ngư
̀
i lâ
̣
p trı
̀
nh sư du
̣
ng đê
̉
pha
́
t triê
̉
n ưng du
̣
ng.
Trong JavaScript ,ca
́
c Object đơc nhı
̀
n theo 2 khı
́
a ca
̣
nh:
a. Ca
́
c Object đa

̃
tô
̀
n ta
̣
i.
b. Ca
́
c Object do ngư
̀
i lâ
̣
p trı
̀
nh xây dưng.
Trong ca
́
c Object đa
̃
tô
̀
n ta
̣
i đơc chia tha
̀
nh 2 kiê
̉
u:
a. Ca
́

c Object cu
̉
a JavaScript (JavaScript Built-in Object).
b. Ca
́
c đô
́
i tư
̣
ng đơc cung câ
́
p bơi môi trư
̀
ng Netscape.
3. Built-in Object trong JavaScript:
JavaScript cung câ
́
p 1 bô
̣
ca
́
c Built-in Object đê
̉
cung câ
́
p ca
́
c thông tin vê
̀
sư hiê

̣
n ha
̀
nh cu
̉
a ca
́
c
đô
́
i tư
̣
ng đơc load trong trang Web va
̀
nô
̣
i dung cu
̉
a no
́
.Ca
́
c đô
́
i tư
̣
ng na
̀
y bao gô
̀

m ca
́
c phương
pha
́
p (Method) la
̀
m viê
̣
c vơi ca
́
c thuô
̣
c tı
́
nh (Properties) cu
̉
a no
́
.
4. Ca
́
c đô
́
i tư
̣
ng đơc cung câ
́
p bơi môi trư
̀

ng Netscape:
Netscape Navigator cung câ
́
p ca
́
c đô
́
i tư
̣
ng cho phe
́
p JavaScript tưng ta
́
c vơi file HTML, ca
́
c đô
́
i
tư
̣
ng na
̀
y cho phe
́
p chu
́
ng ta điê
̀
u khiê
̉

n viê
̣
c hiê
̉
n thi
̣
thông tin va
̀
đa
́
p ưng ca
́
c sư kiê
̣
n trong môi
trư
̀
ng Navigator.Vı
́
du
̣
avascript la
̀
mô
̣
t ngôn ngư thông di
̣
ch (interpreter), chưng trı
̀
nh nguô

̀
n cu
̉
a no
́
đơc nhu
́
ng
Đô
́
i tư
̣
ng
Window
Mô ta
̉
Cung câ
́
p ca
́
c phưng pha
́
p va
̀
ca
́
c tı
́
nh châ
́

t cho cưa sô
̉
hiê
̣
n ha
̀
nh
cu
̉
a trı
̀
nh duyê
̣
t,bao gô
̀
m ca
́
c đô
́
i tư
̣
ng cho mô
̃
i frame.
JAVASCRIPT
MEDIASPACE CLUB (HTD)
PAGE: 1
Location
History
Document

Cung câ
́
p ca
́
c tı
́
nh châ
́
t va
̀
phưng pha
́
p la
̀
m viê
̣
c vơi ca
́
c đa chı
̉
URL hiê
̣
n ha
̀
nh đơc mơ.
Ca
́
c đô
́
i tư

̣
ng history cung câ
́
p thông tin vê
̀
ca
́
c danh sa
́
ch cu
̃
va
̀
co
́
thê
̉
giơi ha
̣
n sư tưng ta
́
c vơi danh sa
́
ch.
Đây la
̀
mô
̣
t đô
́

i tư
̣
ng đơc sư du
̣
ng nhiê
̀
u nhâ
́
t .No
́
chưa đng ca
́
c
Đô
́
i tư
̣
ng,tı
́
nh châ
́
t va
̀
ca
́
c phưng pha
́
p la
̀
m viê

̣
c vơi ca
́
c tha
̀
nh
phâ
̀
n cu
̉
a ta
̀
i liê
̣
u như ca
́
c :form,link,anchor,applet.
5. Ca
́
c đô
́
i tư
̣
ng do ngư
̀
i lâ
̣
p trı
̀
nh xây dưng:

a. Đnh nghı
̃
a thuô
̣
c tı
́
nh cu
̉
a đô
́
i tư
̣
ng: (Object Properties)
Cu
́
pha
́
p : Object-name.Property-name (tên đô
́
i tư
̣
ng.tên đă
̣
c tı
́
nh)
Vı
́
du
̣

:Mô
̣
t đô
́
i tư
̣
ng airplane co
́
ca
́
c thuô
̣
c tı
́
nh như sau:
Airplane.model
Airplane.price
Airplane.seating
Airplane.maxspeed
Airplane.fuel
b. Thêm ca
́
c phưng pha
́
p cho đô
́
i tư
̣
ng:( Method to Object)
Sau khi đa

̃
co
́
ca
́
c thông tin vê
̀
airplane ta tiê
́
p tu
̣
c xây dưng phưng pha
́
p đê
̉
sư du
̣
ng thông tin
na
̀
y.Vı
́
du
̣
ba
̣
n muô
́
n in ra mô ta
̉

cu
̉
a airplane hoă
̣
c tı
́
nh toa
́
n khoa
̉
ng ca
́
ch tô
́
i đa cu
̉
a cuô
̣
c ha
̀
nh
trı
̀
nh vơi nhiên liê
̣
u đa
̃
co
́
:

Airplane.description()
Airplane.distance()
c. Ta
̣
o mô
̣
t instance cu
̉
a đô
́
i tư
̣
ng:
Trư
́
c khi thao ta
́
c vơi mô
̣
t đô
́
i tư
̣
ng cu
̉
a JavaScript ta pha
̉
i ta
̣
o mô

̣
t instance cho đô
́
i tư
̣
ng đo
́
.
6 . Nhu
́
ng JavaScript va
̀
o trong tâ
̣
p tin HTML:
Cu
́
pha
́
p:
<SCRIPT LANGUAGE="JavaScript">
JavaScript Program
</SCRIPT>
Thuô
̣
c tı
́
nh cu
̉
a the

̉
SCRIPT
+ SRC :Đa chı
̉
URL chı
̉
đê
́
n tâ
̣
p tin chưng trı
̀
nh JavaScript (*.js)
+ LANGUAGE: Chı
̉
đnh ngôn ngư đơc sư du
̣
ng trong Script va
̀
ca
́
c phiên ba
̉
n sư du
̣
ng (vı
́
du
̣
như :JavaScript ,JavaScript .1.2 vv¼ ,VBScript).

7. Â
̉
n ca
́
c Scripts đô
́
i vơ
́
i ca
́
c Browser không cung câ
́
p JavaScript:
<SCRIPT LANGUAGE="JavaScript">
<!- - Do
̀
ng dâ
́
u Script đô
́
i vơi ca
́
c Browser không cung câ
́
p (support)
JavaScript Program
//Do
̀
ng kê
́

t thu
́
c viê
̣
c dâ
́
u Script va
̀
chu
́
thı
́
ch - - >
</SCRIPT>
JAVASCRIPT
MEDIASPACE CLUB (HTD)
PAGE: 2

8. Sư
̉
du
̣
ng tâ
̣
p tin JavaScript bên ngoa
̀
i :
<SCRIPT LANGUAGE="JavaScript" SRC=" /><!- - Do
̀
ng dâ

́
u Script đô
́
i vơi ca
́
c Browser không cung câ
́
p (support)
JavaScript Program
//Do
̀
ng kê
́
t thu
́
c viê
̣
c dâ
́
u Script va
̀
chu
́
thı
́
ch - - >
</SCRIPT>
9. Thêm chưng trı
̀
nh va

̀
o tâ
̣
p tin HTML:
<HTML>
<HEAD>
<TITLE>Listing 2.1</TITLE>
</HEAD>
<BODY>
Here is result:
<SCRIPT LANGUAGE="Javascript">
<!
document.writeln("It work<BR>");
>
</SCRIPT>
</BODY>
</HTML>
Ba
̀
i 2: SƯ DU
̣
NG JAVASCRIPT
1. Cu
́
pha
́
p cơ ba
̉
n cu
̉

a lê
̣
nh :
JavaScript xây dưng ca
́
c ha
̀
m,ca
́
c pha
́
t biê
̉
u,ca
́
c toa
́
n tư va
̀
ca
́
c biê
̉
u thưc trên cu
̀
ng mô
̣
t do
̀
ng va

̀
kê
́
t thu
́
c bă
̀
ng ;
Vı
́
du
̣
: document.writeln("It work<BR>");
2. Ca
́
c khô
́
i lê
̣
nh:
Nhiê
̀
u do
̀
ng lê
̣
nh co
́
thê
̉

đơc liên kê
́
t vơi nhau va
̀
đơc bao bơi {
Vı
́
du
̣
:
{
document.writeln("Does It work");
document.writeln("It work!");
}
3. Xuâ
́
t dư liê
̣
u ra cưa sô
̉
trı
̀
nh duyê
̣
t:
Du
̀
ng 2 phưng pha
́
p document.write() va

̀
document.writeln()
Vı
́
du
̣
:
document.write("Test");
document.writeln("Test");
4. Xuâ
́
t ca
́
c the
̉
HTML tư JavaScript
}
JAVASCRIPT
MEDIASPACE CLUB (HTD)
PAGE: 3
Vı
́
du
̣
1:
<HTML>
<HEAD>
<TITLE>Outputting Text</TITLE>
</HEAD>
<BODY>

This is text plain <BR>
<B>
Vı
́
du
̣
2:
<HTML>
<HEAD>
<TITLE>Example 2.4 </TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="Javascript">
<!- -
<SCRIPT LANGUAGE="Javascript">
<!- -
document.write("This is text bold </B>");
- ->
</SCRIPT>
</BODY>
</HTML>
document.write('<IMG
SRC="welcome.gif">');
document.write("<BR><H1>WELCOME TO
NETSCAPE 2.1</H1>");
- ->
</SCRIPT>
</BODY>
</HTML>
5. Sư du

̣
ng phưng pha
́
p writeln() vơ
́
i the
̉
PRE:
<HTML>
<HEAD>
<TITLE>Outputting Text</TITLE>
</HEAD>
<BODY>
<PRE>
<SCRIPT LANGUAGE="Javascript">
<!- -
document.writeln("One,");
6. Ca
́
c kı
́
tư đă
̣
c biê
̣
t trong chuô
̉
i:
\n : New line
\t : Tab

\r : carriage return
\f : form feed
\b: backspace
Vı
́
du
̣
:
document.writeln("It work!\n");
7. La
̀
m viê
̣
c vơ
́
i ca
́
c dialog boxes
document.writeln("Two,");
document.write("Three");
document.write(" ");
- ->
</SCRIPT>
</PRE>
</BODY>
</HTML>
Sư du
̣
ng ha
̀

m alert() đê
̉
hiê
̉
n thi
̣
thông ba
́
o trong mô
̣
t hô
̣
p.
Vı
́
du
̣
:
<HTML>
<HEAD>
<TITLE>Example 2.5 </TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="Javascript">
<!- -
alert("Welcome to Netscape Navigator
21");
document.write('<IMG
SRC="welcome.gif">');
- ->

</SCRIPT>
</BODY>
JAVASCRIPT
MEDIASPACE CLUB (HTD)
PAGE: 4
8. Tưng ta
́
c vơ
́
i ngư
̀
i sư du
̣
ng:
Sư du
̣
ng phưng pha
́
p promt() đê
̉
tưng ta
́
c vơi ngư
̀
i sư du
̣
ng.
Vı
́
du

̣
1:
<HTML>
<HEAD>
<TITLE>Listing 2.6</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="Javascript">
<!- -
document.write("Your favorite color
is:");
document.writeln(prompt("enter your
favorite color:","Blue"));
- ->
</SCRIPT>
</BODY>
</HTML>
Vı
́
du
̣
2:
<HTML>
<HEAD>
<TITLE>Listing 2.6</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="Javascript">
<!- -
document.write('<IMG

SRC="welcome.gif">');
Sư du
̣
ng dâ
́
u + đê
̉
cô
̣
ng 2 chuô
̉
i đn la
̣
i:
Vı
́
du
̣
3:
<HTML>
<HEAD>
<TITLE>Listing 2.6</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="Javascript">
<!- -
document.write('<IMG
SRC="welcome.gif">');
9. Ca
́

c kiê
̉
u dư liê
̣
u trong JavaScript:
a. Dư liê
̣
u kiê
̉
u sô
́
:
+ Sô
́
nguyên: vı
́
du
̣
720
+ Sô
́
Octal: vı
́
du
̣
:056
+ Sô
́
Hexa:vı
́

du
̣
:0x5F
+ Sô
́
thâ
̣
p phân :vı
́
du
̣
:7.24 , -34.2 ,2E3
b. Dư liê
̣
u kiê
̉
u chuô
̉
i:
vı
́
du
̣
: " Hello"
'245'
" "
c. Dư liê
̣
u kiê
̉

u Boolean:
Kê
́
t qua
̉
tra
̉
vê
̀
la
̀
true hoă
̣
c false.
document.write("<H1>Greeting ,");
document.writeln(prompt("enter your
name:","name"));
document.write("Welcome to netscape
navigator 2.01 </H1>");
- ->
</SCRIPT>
</BODY>
</HTML>
document.write("<H1>Greeting ," +
prompt("enter your name:","name") + "
Welcome to netscape navigator 2.01
</H1>");
- ->
</SCRIPT>
</BODY>

</HTML>
JAVASCRIPT
MEDIASPACE CLUB (HTD)
PAGE: 5
d. Dư liê
̣
u kiê
̉
u null:
Tra
̉
vê
̀
gia
́
tri
̣
rô
̃
ng.
e. Dư liê
̣
u kiê
̉
u văn ba
̉
n (giô
́
ng như kiê
̉

u chuô
̉
i)
10. Ta
̣
o biê
́
n trong JavaScript:
Var example;
Var example="Hello";
Ta co
́
thê
̉
du
̀
ng document.write(example); đê
̉
xuâ
́
t nô
̣
i dung cu
̉
a biê
́
n.
Vı
́
du

̣
1: du
̀
ng tư kho
́
a var đê
̉
khai ba
́
o biê
́
n
<HTML>
<HEAD>
<TITLE>Example 3.1</TITLE>
<SCRIPT LANGUAGE="Javascript">
<!- -
var name=prompt("enter your
name:","name");
- ->
</SCRIPT>
</HEAD>
Vı
́
du 2: ta
̣
o la
̣
i mô
̣

t gia
́
tri
̣
mơi cho biê
́
n
<HTML>
<HEAD>
<TITLE>Example 3.2</TITLE>
<SCRIPT LANGUAGE="Javascript">
var name=prompt("enter your
name:","name");
alert ("greeting " + name + " , ");
name=prompt("enter your friend's
name:","friend's
</SCRIPT>
name");
<BODY>
<SCRIPT LANGUAGE="Javascript">
<!
document.write('<IMG
SRC="Welcome.gif">');
document.write("<H1>Greeting ," +
name + " Welcome to netscape
navigator 2.01 </H1>");
>
</SCRIPT>
</BODY>
</HTML>

</HEAD>
<BODY>
<SCRIPT LANGUAGE="Javascript">
<!
document.write('<IMG
SRC="Welcome.gif">');
document.write("<H1>Greeting ," +
name + " Welcome to netscape
navigator 2.01 </H1>");
>
</SCRIPT>
</BODY>
</HTML>
11. La
̀
m viê
̣
c vơ
́
i biê
́
n va
̀
biê
̉
u thưc:
• Thiê
́
t lâ
̣

p biê
̉
u thưc:
Cu
́
pha
́
p: <biê
́
n> <toa
́
n tư > <biê
̉
u thưc>
* Toa
́
n tư:
= Thiê
́
t lâ
̣
p gia
́
tri
̣
bên pha
̉
i cho bên tra
́
i

Vı
́
du
̣
:x=5
+= Cô
̣
ng tra
́
i va
̀
pha
̉
i ,sau đo
́
ga
́
n kê
́
t qua
̉
cho bên tra
́
i phe
́
p toa
́
n
Vı
́

du
̣
: cho x=10,y=5
x+=y => x=15
-= Trư bên tra
́
i cho bên pha
̉
i ,ga
́
n kê
́
t qua
̉
la
̣
i cho bên tra
́
i
x-=y => x=5
JAVASCRIPT
MEDIASPACE CLUB (HTD)
PAGE: 6
*= Nhân bên tra
́
i cho bên pha
̉
i,ga
́
n kê

́
t qua
̉
cho bên tra
́
i
x*=y => x=50
/= Chia bên tra
́
i cho pha
̉
i ,ga
́
n kê
́
t qua
̉
la
̣
i cho bên tra
́
i
x/=y => x=2
%= Chia bên tra
́
i cho bên pha
̉
i va
̀
lâ

́
y sô
́
dư ga
́
n la
̣
i cho bên tra
́
i
x%=y => x=0
* Ca
́
c toa
́
n tư kha
́
c:
Vı
́
du
̣
:
x+=15+3
=> x=18
8+5
32.5 * 72.3
12 % 5
Dâ
́

u ++ va
̀
dâ
́
u - - va
̀
dâ
́
u -
Vı
́
du
̣
:
x=5;
• Phe
́
p toa
́
n Logic
&& : va
̀
||: hoă
̣
c
! not
Vı
́
du
̣

:
x=5 ,y=2 ,c=3
(x>y) && (x>c)
false && anything is always false
(x>y) || (c<x) => true
!x
• Toa
́
n tư
̉
so sa
́
nh trong JavaScript:
==
!=
>
<
>=
<=
Vı
́
du
̣
:
• Toa
́
n tư điê
̀
u kiê
̣

n:
Cu
́
pha
́
p:
(điê
̀
u kiê
̣
n ) ? gia
́
tri
̣
1 : gia
́
tri
̣
2
Nê
́
u điê
̀
u kiê
̣
n đu
́
ng thı
̀
tra

̉
vê
̀
gia
́
tri
̣
1
Nê
́
u điê
̀
u kiê
̣
n sai thı
̀
tra
̉
vê
̀
gia
́
tri
̣
2
Vı
́
du
̣
:

y=++x; (=> y=6 vı
̀
x tăng lên 6)
z=x++; (=> z=6 vı
̀
sau đo
́
x ga
́
n cho z)
sau đo
́
x tăng 1 => x=7
Do đo
́
ta co
́
kê
́
t qua
̉
cuô
́
i cu
̀
ng la
̀
:
x=7;y=6;z=6;
Vı

́
du
̣
: x=5;
x=-x => x=-5
1==1 => true
3<1 =>false
5 >=4 =>true
"the" != "he" => true
4=="4" =>true
JAVASCRIPT
MEDIASPACE CLUB (HTD)
PAGE: 7
(day="Saturday") ? "Weekend" : "Not Saturday"
• Toa
́
n tư chuô
̉
i:
" Welcome to " + " Netscape Navigator"
Vı
́
du
̣
:
Var welcome="Welcome to"
Welcome += " Netscape Navigator"
! welcome= "Welcome to Netsacpe Navigator"
Vı
́

du
̣
: Sư du
̣
ng toa
́
n tư điê
̀
u kiê
̣
n đê
̉
kiê
̉
m tra ngo
̉
va
̀
o
<HTML>
<HEAD>
<TITLE>Example 3.3</TITLE>
<SCRIPT LANGUAGE="Javascript">
var question="What is 10+10 ?";
var answer=20;
var correct='<IMG
SRC="correct.gif">';
var incorrect='<IMG
SRC="incorect.gif">';
var response=prompt(question,"0");

var output = (response==answer) ?
correct:incorrect;
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="Javascript">
<!
document.write(output);
>
</SCRIPT>
</BODY>
</HTML>
12. Câ
́
u tru
́
c điê
̀
u kiê
̣
n if - else
if điê
̀
u kiê
̣
n
lê
̣
nh ;
if điê

̀
u kiê
̣
n {
Ma
̃
JavaScript
}
Vı
́
du
̣
:
if (day=="Saturday") {
document.writeln("It's the weekend");
alert(" It's the weekend");
}
Vı
́
du
̣
:
If (day=="Saturday") {
document.writeln("It's the weekend");
}
If (day!="Saturday") {
document.writeln("It's not Saturday");
}
Sư du
̣

ng câ
́
u tru
́
c else - if cho vı
́
du
̣
ơ trên
If (day=="Saturday") {
document.writeln("It's the weekend");
}
else {
document.writeln("It's not Saturday");
}
Câ
́
u tru
́
c kê
́
t hơp :
if điê
̀
u kiê
̣
n 1 {
Ca
́
c lê

̣
nh JavaScript
JAVASCRIPT
MEDIASPACE CLUB (HTD)
PAGE: 8
if điê
̀
u kiê
̣
n 2 {
Ca
́
c lê
̣
nh JavaScript
} else {
ca
́
c lê
̣
nh kha
́
c
}
Ca
́
c lê
̣
nh JavaScript
} else {

Ca
́
c lê
̣
nh kha
́
c
}
Vı
́
du
̣
1 : Sư du
̣
ng phưng pha
́
p confirm() vơi pha
́
t biê
̉
u if
<HTML>
<HEAD>
<TITLE>Example 3.3</TITLE>
<SCRIPT LANGUAGE="Javascript">
var question="What is 10+10 ?";
var answer=20;
var correct='<IMG
SRC="correct.gif">';
var incorrect='<IMG

SRC="incorect.gif">';
var response=prompt(question,"0");
if (response != answer) {
if (confirm("Wrong ! press OK for
a second change"))
response=prompt(question,"0");
}
var output = (response ==answer ) ?
correct:incorrect ;
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="Javascript">
<!
document.write(output);
>
</SCRIPT>
</BODY>
</HTML>
Vı
́
du
̣
2 : Sư du
̣
ng phưng pha
́
p confirm() vơi pha
́
t biê

̉
u if - else
<HTML>
<HEAD>
<TITLE>Example 3.3</TITLE>
<SCRIPT LANGUAGE="Javascript">
var question="What is 10+10 ?";
var answer=20;
var correct='<IMG
SRC="correct.gif">';
var incorrect='<IMG
SRC="incorect.gif">';
var response=prompt(question,"0");
if (response != answer) {
if (confirm("Wrong ! press OK for
a second change"))
response=prompt(question,"0");
}else {
if (confirm("Correct ! press OK
for a second question"))
{
question="What is 10*10";
answer=100;
response=prompt(question,"0");
}
}
var output = (response ==answer ) ?
correct:incorrect ;
</SCRIPT>
</HEAD>

<BODY>
<SCRIPT LANGUAGE="Javascript">
<!
document.write(output);
>
</SCRIPT>
</BODY>
</HTML>
JAVASCRIPT
MEDIASPACE CLUB (HTD)
PAGE: 9
BA
̀
I 3: HA
̀
M VA
̀
ĐÔ
́
I TƯ
̣
NG
Trong ky
̃
thuâ
̣
t lâ
̣
p trı
̀

nh ca
́
c lâ
̣
p trı
̀
nh viên thư
̀
ng sư du
̣
ng ha
̀
m đê
̉
thưc hiê
̣
n mô
̣
t đoa
̣
n
chưng
trı
̀
nh thê
̉
hiê
̣
n cho mô
̣

t module na
̀
o đo
́
đê
̉
thưc hiê
̣
n mô
̣
t công viê
̣
c na
̀
o đo
́
.
Trong Javascript co
́
ca
́
c ha
̀
m đơc xây dưng să
̃
n đê
̉
giu
́
p ba

̣
n thưc hiê
̣
n mô
̣
t chưc năng na
̀
o đo
́
vı
́
du
̣
như ha
̀
m alert(), document.write(), parseInt() va
̀
ba
̣
n cu
̃
ng co
́
thê
̉
đnh nghı
̃
a ra ca
́
c ha

̀
m kha
́
c
cu
̉
a mı
̀
nh đê
̉
thưc hiê
̣
n mô
̣
t công viê
̣
c na
̀
o đo
́
cu
̉
a ba
̣
n, đê
̉
đnh nghı
̃
a ha
̀

m ba
̣
n theo cu
́
pha
́
p sau:
function function_name(parameters, arguments)
{
command block
}
Truyê
̀
n tham sô
́
:
function printName(name) {
document.write("<HR>Your Name is <B><I>");
document.write(name);
document.write("</B></I><HR>");
}
Vı
́
du
̣
:
Go
̣
i ha
̀

m printName()vơi lê
̣
nh sau printName("Bob");
Khi ha
̀
m printName()đơc thi ha
̀
nh gia
́
tri
̣
cu
̉
a name la
̀
"Bob" nê
́
u go
̣
i ha
̀
m
printName()vơi đô
́
i sô
́
la
̀
mô
̣

t biê
́
n
var user = "John";
printName(user);
Khi đo
́
name la
̀
"John". Nê
́
u ba
̣
n muô
́
n thay đô
̉
i gia
́
tri
̣
cu
̉
a name ba
̣
n co
́
thê
̉
la

̀
m như sau : name
= "Mr. " + name;
Pha
̣
m vi cu
̉
a biê
́
n:
Biê
́
n toa
̀
n cu
̣
c (Global variable)
Biê
́
n cu
̣
c bô
̣
(Local variable)
Tra
̉
vê
̀
ca
́

c gia
́
tri
̣
:
Vı
́
du
̣
:
Du
̀
ng return đê
̉
tra
̉
vê
̀
gia
́
tri
̣
cu
̉
a biê
́
n cube.
function cube(number) {
var cube = number * number * number;
return cube;

}
JAVASCRIPT
MEDIASPACE CLUB (HTD)
PAGE: 10
Vı
́
du
̣
:
MTWRFSS
<HTML>
<HEAD>
<TITLE>Example 4.1</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<! HIDE FROM OTHER BROWSERS
//DEFINE FUNCTION testQuestion()
function testQuestion(question) {
//DEFINE LOCAL VARIABLES FOR THE
FUNCTION
var answer=eval(question);
var output="What is " + question +
"?";
var correct='<IMG
SRC="correct.gif">';
var incorrect='<IMG
SRC="incorrect.gif">';
//ASK THE QUESTION
var response=prompt(output,"0");
//CHECK THE RESULT
return (response == answer) ? correct

: incorrect;
}
// STOP HIDING FROM OTHER BROWSERS
>
</SCRIPT>
</HEAD<
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<! HIDE FROM OTHER BROWSERS
//ASK QUESTION AND OUTPUT RESULTS
var result=testQuestion("10 + 10");
document.write(result);
//STOP HIDING FROM OTHER BROWSERS >
</SCRIPT>
</BODY>
</HTML>
Ha
̀
m eval du
̀
ng chuyê
̉
n đô
̉
i gia
́
tri
̣
chuô
̉

i sô
́
tha
̀
nh gia
́
tri
̣
sô
́
eval("10*10")tra
̉
vê
̀
gia
́
tri
̣
la
̀
100
Ha
̀
m go
̣
i la
̣
i ha
̀
m:

Vı
́
du
̣
:
<HTML>
<HEAD>
<TITLE>Example 4.2</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<! HIDE FROM OTHER BROWSERS
//DEFINE FUNCTION testQuestion()
function testQuestion(question) {
//DEFINE LOCAL VARIABLES FOR THE
FUNCTION
var answer=eval(question);
var output="What is " + question +
"?";
var correct='<IMG
SRC="correct.gif">';
var incorrect='<IMG
SRC="incorrect.gif">';
//ASK THE QUESTION
var response=prompt(output,"0");
Vı
́
du
̣
2:
<HTML>
<HEAD>

<TITLE>Example 4.2</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<! HIDE FROM OTHER BROWSERS
//DEFINE FUNCTION testQuestion()
function
testQuestion(question,chances) {
//CHECK THE RESULT
return (response == answer) ? correct
: testQuestion(question);
}
// STOP HIDING FROM OTHER BROWSERS
>
</SCRIPT>
</HEAD<
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<! HIDE FROM OTHER BROWSERS
//ASK QUESTION AND OUTPUT RESULTS
var result=testQuestion("10 + 10");
document.write(result);
//STOP HIDING FROM OTHER BROWSERS >
</SCRIPT>
</BODY>
</HTML>
//DEFINE LOCAL VARIABLES FOR THE
FUNCTION
var answer=eval(question);
var output="What is " + question +
"?";
var correct='<IMG

SRC="correct.gif">';
JAVASCRIPT
MEDIASPACE CLUB (HTD)
PAGE: 11
var incorrect='<IMG
SRC="incorrect.gif">';
4
//ASK THE QUESTION
var response=prompt(output,"0");
//CHECK THE RESULT
if (chances > 1) {
return (response == answer) ? correct
: testQuestion(question,chances-1);
} else {
return (response == answer) ? correct
: incorrect;
}
}
// STOP HIDING FROM OTHER BROWSERS
>
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<! HIDE FROM OTHER BROWSERS
//ASK QUESTION AND OUTPUT RESULTS
var result=testQuestion("10 + 10",3);
document.write(result);
//STOP HIDING FROM OTHER BROWSERS >
</SCRIPT>

</BODY>
</HTML>
Ba
̀
i 4: TA
̣
O ĐÔ
́
I TƯ
̣
NG TRONG JAVASCRIPT
1. Đnh nghı
̃
a thuô
̣
c tı
́
nh cu
̉
a đô
́
i tư
̣
ng:
function student(name,age, grade) {
this.name = name;
this.age = age;
this.grade = grade;
}
Đê

̉
ta
̣
o mô
̣
t Object ta sư du
̣
ng pha
́
t biê
̉
u new.Vı
́
du
̣
đê
̉
ta
̣
o đô
́
i tư
̣
ng student1
student1 = new student("Bob",10,75);
3 thuô
̣
c tı
́
nh cu

̉
a đô
́
i tư
̣
ng student1 la
̀
:
student1.name
student1.age
student1.grade
Vı
́
du
̣
đê
̉
ta
̣
o đô
́
i tư
̣
ng student2
student2 = new student("Jane",9,82);
Đê
̉
thêm thuô
̣
c tı

́
nh cho student1 ba
̣
n co
́
thê
̉
la
̀
m như sau:
student1.mother = "Susan"; hoă
̣
c ba
̣
n co
́
thê
̉
đnh nghı
̃
a la
̣
i ha
̀
m student
4
function student(name, age, grade, mother) {
this.name = name;
this.age = age;
this.grade = grade;

this.mother = mother;
}
JAVASCRIPT
MEDIASPACE CLUB (HTD)
PAGE: 12
Đô
́
i tư
̣
ng la
̀
thuô
̣
c tı
́
nh cu
̉
a đô
́
i tư
̣
ng kha
́
c
Vı
́
du
̣
:
function grade (math, english, science) {

this.math = math;
this.english = english;
this.science = science;
}
bobGrade = new grade(75,80,77);
janeGrade = new grade(82,88,75);
student1 = new student("Bob",10,bobGrade);
student2 = new student("Jane",9,janeGrade);
student1.grade.math:du
̀
ng đê
̉
lâ
́
y điê
̉
m Toa
́
n cu
̉
a student1
student2.grade.science: du
̀
ng lâ
́
y điê
̉
m môn Khoa ho
̣
c cu

̉
a student2
2. Thêm phưng pha
́
p cho đô
́
i tư
̣
ng:
function displayProfile() {
document.write("Name: " + this.name + "<BR>");
document.write("Age: " + this.age + "<BR>");
document.write("Mother's Name: " + this.mother + "<BR>");
document.write("Math Grade: " + this.grade.math + "<BR>");
document.write("English Grade: " + this.grade.english + "<BR>");
document.write("Science Grade: " + this.grade.science + "<BR>");
}
function student(name,age, grade) {
this.name = name;
this.age = age;
this.grade = grade;
this.mother = mother;
this.displayProfile = displayProfile;
}
student1.displayProfile();
Vı
́
du:
4
<HTML>

<HEAD>
<TITLE>Example 4.3</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<! HIDE FROM OTHER BROWSERS
//DEFINE METHOD
function displayInfo() {
document.write("<H1>Employee Profile:
" + this.name + "</H1><HR><PRE>");
document.writeln("Employee Number: "
+ this.number);
JAVASCRIPT
MEDIASPACE CLUB (HTD)
PAGE: 13
document.writeln("Social Security
Number: " + this.socsec);
document.writeln("Annual Salary: " +
this.salary);
document.write("</PRE>");
}
//DEFINE OBJECT
function employee() {
this.name=prompt("Enter Employee's
Name","Name");
this.number=prompt("Enter Employee
Number for " + this.name,"000-000");
this.socsec=prompt("Enter Social
Security Number for " +
this.name,"000-00-0000");
this.salary=prompt("Enter Annual
Salary for " + this.name,"$00,000");

this.displayInfo=displayInfo;
}
newEmployee=new employee();
// STOP HIDING FROM OTHER BROWSERS
>
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<! HIDE FROM OTHER BROWSERS
newEmployee.displayInfo();
// STOP HIDING FROM OTHER BROWSERS
>
</SCRIPT>
</BODY>
</HTML>
Vi du:
<script LANGUAGE="JavaScript">
<! Begin
var day="";
var month="";
var ampm="";
var ampmhour="";
var myweekday="";
var year="";
mydate = new Date();
myday = mydate.getDay();
mymonth = mydate.getMonth();
myweekday= mydate.getDate();
weekday= myweekday;

myyear= mydate.getYear();
year = myyear;
JAVASCRIPT
myhours = mydate.getHours();
ampmhour = (myhours > 12) ? myhours -
12 : myhours;
ampm = (myhours >= 12) ? 'Buô
̉
i Chiê
̀
u '
: ' Buô
̉
i Sa
́
ng ';
mytime = mydate.getMinutes();
myminutes = ((mytime < 10) ? ':0' :
':') + mytime;
if(myday == 0)
day = " Chu
̉
Nhâ
̣
t , ";
else if(myday == 1)
day = " Th ư
́
hai, ";
else if(myday == 2)

day = " Th ư
́
ba, ";
else if(myday == 3)
MEDIASPACE CLUB (HTD)
PAGE: 14
day = " Th ư
́
tư, ";
else if(myday == 4)
day = " Th ư
́
nă m, ";
else if(myday == 5)
day = " Th ư
́
sa
́
u , ";
else if(myday == 6)
day = " Th ư
́
ba
̉
y , ";
if(mymonth == 0) {
month = "tha
́
ng mô
̣

t ";}
else if(mymonth ==1)
month = "tha
́
ng hai ";
else if(mymonth ==2)
month = "tha
́
ng ba ";
else if(mymonth ==3)
month = "tha
́
ng tư ";
else if(mymonth ==4)
month = "tha
́
ng nă m, ";
else if(mymonth ==5)
month = "tha
́
ng sa
́
u ";
else if(mymonth ==6)
month = "tha
́
ng ba
̉
y ";
else if(mymonth ==7)

month = "tha
́
ng ta
́
m ";
else if(mymonth ==8)
month = "tha
́
ng chı
́
n ";
else if(mymonth ==9)
month = "tha
́
ng mư ơ
̀
i ";
else if(mymonth ==10)
month = "tha
́
ng mư ơ
̀
i mô
̣
t ";
else if(mymonth ==11)
month = "tha
́
ng mư ơ
̀

i hai ";
// End >
</script>
Trong phâ
̀
n body ba
̣
n co
́
thê
̉
xuâ
́
t ra da
̣
ng như sau:
<body>
<script>
document.write("<b><font color=#0000ff face='VNI-
Times,helvetica,arial'>" + ampmhour + "" + myminutes + ampm)
document.write(" - " + day + " nga
̀
y " + myweekday +" ");
document.write( month + " , nă m " + year + "</font>");
</script>
</body>
Ba
̀
i 5: SƯ KIÊ
̣

N TRONG JAVASCRIPT
Ca
́
c sư kiê
̣
n cung câ
́
p ca
́
c tưng ta
́
c vơi cưa sô
̉
trı
̀
nh duyê
̣
t va
̀
ta
̀
i liê
̣
u hiê
̣
n ha
̀
nh đang đơc load
trong trang web, ca
́

c ha
̀
nh đô
̣
ng cu
̉
a user khi nhâ
̣
p dư liê
̣
u va
̀
o form va
̀
khi click va
̀
o ca
́
c button
trong form.
Khi sư du
̣
ng bô
̣
qua
̉
n ly
́
sư kiê
̣

n ba
̣
n co
́
thê
̉
viê
́
t ca
́
c ha
̀
m đê
̉
biê
̉
u diê
̃
n cho ca
́
c ha
̀
nh đô
̣
ng dưa va
̀
o
ca
́
c sư kiê

̣
n đoc cho
̣
n
Ba
̉
ng sư kiê
̣
n trong Javascript
JAVASCRIPT
MEDIASPACE CLUB (HTD)
PAGE: 15
Tên sư kiê
̣
n
blur
click
change
focus
load
mouseover
select
submit
unload
Mô ta
̉
Xa
̃
y ra khi điê
̉

m tâ
̣
p trungcu
̉
a ngo
̃
va
̀
o đơc di chuyê
̉
n ra
kho
̉
i mô
̣
t tha
̀
nh phâ
̀
n cu
̉
a Form (Khi user click ra ngoa
̀
i mô
̣
t
trư
̀
ng)
Khi user Click va

̀
o 1 link hoă
̣
c tha
̀
nh phâ
̀
n cu
̉
a Form.
Xa
̃
y ra khi gia
́
tri
̣
cu
̉
a Form Field bi
̣
thay đô
̉
i bơi user.
Xa
̃
y ra khi ngo
̃
va
̀
o tâ

̣
p trung va
̀
o tha
̀
nh phâ
̀
n cu
̉
a Form
Xa
̃
y ra khi mô
̣
t trang đơc Load va
̀
o trong bô
̣
duyê
̣
t.
Xa
̃
y ra khi User di chuyê
̉
n mouse qua mô
̣
t Hyperlink.
Xa
̃

y ra khi User cho
̣
n 1 trư
̀
ng cu
̉
a tha
̀
nh phâ
̀
n Form.
Xa
̃
y ra khi User xa
́
c nhâ
̣
n đa
̃
nhâ
̣
p xong dư liê
̣
u.
Xa
̃
y ra khi User rơi kho
̉
i trang Web.
Bô

̣
qua
̉
n ly
́
sư kiê
̣
n (Event Handler)
Đê
̉
qua
̉
n ly
́
ca
́
c sư kiê
̣
n trong javascript ta du
̀
ng ca
́
c bô
̣
qua
̉
n ly
́
sư kiê
̣

n.
Cu
́
pha
́
p cu
̉
a mô
̣
t bô
̣
qua
̉
n ly
́
sư kiê
̣
n:
<HTML_TAG OTHER_ATTRIBUTES eventHandler="JavaScript Program">
Vı
́
du
̣
:
<INPUT TYPE="text" onChange="checkField(this)">
Vı
́
du
̣
:

<INPUT TYPE="text" onChange="
if (parseInt(this.value) <= 5) {
alert('Please enter a number greater than 5.');
}
">
Vı
́
du
̣
:
<INPUT TYPE="text" onChange="
alert('Thanks for the entry.');
confirm('Do you want to continue?');
">
Tư kho
́
a this: quy cho đô
́
i tư
̣
ng hiê
̣
n ha
̀
nh.Trong Javascript Form la
̀
mô
̣
đô
́

i tư
̣
ng.Ca
́
c tha
̀
nh
phâ
̀
n cu
̉
a Form bao gô
̀
m text fields, checkboxes, radio buttons, buttons, va
̀
selection lists.
Vı
́
du
̣
:
<INPUT TYPE="text" onChange="checkField(this)">
Ca
́
c bô
̣
qua
̉
n ly
́

sư kiê
̣
n trong Javascript
Đô
́
i tư
̣
ng
Bô
̣
qua
̉
n ly
́
sư kiê
̣
n tưng ưng.
JAVASCRIPT
MEDIASPACE CLUB (HTD)
PAGE: 16
Selection list
Text element
Textarea element
Button element
Checkbox
Radio button
Hypertext link
Reset button
Submit button
Document

Window
Form
onBlur, onChange, onFocus
onBlur, onChange, onFocus, onSelect
onBlur, onChange, onFocus, onSelect
OnClick
onClick
OnClick
onClick, onMouseOver
OnClick
OnClick
onLoad, onUnload
onLoad, onUnload
onSubmit
5
Ca
́
ch du
̀
ng bô
̣
qua
̉
n ly
́
sư kiê
̣
n onLoad & onUnload
<HTML>
<HEAD>

<TITLE>Example 5.1</TITLE>
</HEAD>
<BODY onLoad="alert('Welcome to my page!');"
onUnload="alert('Goodbye! Sorry to see you go!');">
<IMG SRC="title.gif">
</BODY>
</HTML>
Vi du:
<HTML>
<HEAD>
<TITLE>Example 5.1</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<! HIDE FROM OTHER BROWSERS
var name = "";
// STOP HIDING FROM OTHER BROWSERS >
</SCRIPT>
</HEAD>
<BODY onLoad="
name = prompt('Enter Your Name:','Name');
alert('Greetings ' + name + ', welcome to my page!');"
onUnload=" alert(Goodbye ' + name + ', sorry to see you go!');">
<IMG SRC="title.gif">
</BODY>
</HTML>
Vi du
MTWRFSS
<HTML>
<HEAD>
JAVASCRIPT
MEDIASPACE CLUB (HTD)

PAGE: 17
<TITLE>Example 5.1</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<! HIDE FROM OTHER BROWSERS
// DEFINE GLOBAL VARIABLE
var name = "";
function hello() {
name = prompt('Enter Your Name:','Name');
alert('Greetings ' + name + ', welcome to my page!');
}
function goodbye() {
alert(Goodbye ' + name + ', sorry to see you go!');
}
// STOP HIDING FROM OTHER BROWSERS >
</SCRIPT>
</HEAD>
<BODY onLoad="hello();" onUnload="goodbye();">
<IMG SRC="title.gif">
</BODY>
</HTML>
Ca
́
c sư kiê
̣
n va
̀
Form
Cac sư kiê
̣
n đơc sư du

̣
ng đê
̉
truy xuâ
́
t Form như:
OnClick, onSubmit, onFocus, onBlur, va
̀
onChange.
Vı
́
du
̣
:
<INPUT TYPE=text NAME="test" VALUE="test"
onBlur="alert('Thank You!');"
onChange="check(this);">
Khi gia
́
tri
̣
thay đô
̉
i function check() se
̃
đơc go
̣
i. Ta du
̀
ng tư kho

́
a this đê
̉
chuyê
̉
n đô
́
i tư
̣
ng cu
̉
a
trư
̀
ng hiê
̣
n ha
̀
nh đê
́
n ha
̀
m check()
Ba
̣
n cu
̃
ng co
́
thê

̉
dưa va
̀
o ca
́
c phưng pha
́
p va
̀
ca
́
c thuô
̣
c tı
́
nh cu
̉
a đô
́
i tư
̣
ng bă
̀
ng pha
́
t biê
̉
u sau:
this.methodName() & this.propertyName.
Vı

́
du
̣
:
<HTML>