Professional Documents
Culture Documents
CHNG 1 LI NI U
Vi HTML and Microsoft FrontPage bn bit cch to ra trang Web - tuy nhin ch
mi mc biu din thng tin ch cha phi l cc trang Web ng c kh nng p ng
cc s kin t pha ngi dng. Hng Netscape a ra ngn ng script c tn l
LiveScript thc hin chc nng ny. Sau ngn ng ny c i tn thnh
JavaScript tn dng tnh i chng ca ngn ng lp trnh Java. Mc d c nhng im
tng ng gia Java v JavaScript, nhng chng vn l hai ngn ng ring bit.
JavaScript l ngn ng di dng script c th gn vi cc file HTML. N khng c
bin dch m c trnh duyt din dch. Khng ging Java phi chuyn thnh cc m d
bin dch, trnh duyt c JavaScript di dng m ngun. Chnh v vy bn c th d
dng hc JavaScript qua v d bi v bn c th thy cch s dng JavaScript trn cc
trang Web.
JavaScript l ngn ng da trn i tng, c ngha l bao gm nhiu kiu i tng, v
d i tng Math vi tt c cc chc nng ton hc. Tuy vy JavaScript khng l ngn
ng hng i tng nh C++ hay Java do khng h tr cc lp hay tnh tha k.
JavaScript c th p ng cc s kin nh ti hay loi b cc form. Kh nng ny cho
php JavaScript tr thnh mt ngn ng script ng.
Ging vi HTML v Java, JavaScript c thit k c lp vi h iu hnh. N c th
chy trn bt k h iu hnh no c trnh duyt h tr JavaScript. Ngoi ra JavaScript
ging Java kha cnh an ninh: JavaScript khng th c v vit vo file ca ngi dng.
Cc trnh duyt web nh Nescape Navigator 2.0 tr i c th hin th nhng cu lnh
JavaScript c nhng vo trang HTML. Khi trnh duyt yu cu mt trang, server s gi
y ni dung ca trang , bao gm c HTML v cc cu lnh JavaScript qua mng ti
client. Client s c trang t u n cui, hin th cc kt qu ca HTML v x l cc
cu lnh JavaScript khi no chng xut hin.
Cc cu lnh JavaScript c nhng trong mt trang HTML c th tr li cho cc s kin
ca ngi s dng nh kch chut, nhp vo mt form v iu hng trang. V d bn c
th kim tra cc gi tr thng tin m ngi s dng a vo m khng cn n bt c mt
qu trnh truyn trn mng no. Trang HTML vi JavaScript c nhng s kim tra cc
gi tr c a vo v s thng bo vi ngi s dng khi gi tr a vo l khng hp
l.
Mc ch ca phn ny l gii thiu v ngn ng lp trnh JavaScript bn c th vit
cc script vo file HTML ca mnh.
JavaScript
Ch :
Ghi ch khng c t
trong cp th <- v ->
nh ghi ch trong file
HTML. C php ca
JavaScript tng t c
php ca C nn c th s
dng // hay /* ... */.
<SCRIPT LANGUAGE=JavaScript>
// INSERT ALL JavaScript HERE
</SCRIPT>
im khc nhau gia c php vit cc ghi ch gia HTML v JavaScript l cho php bn
n cc m JavaScript trong cc ghi ch ca file HTML, cc trnh duyt c khng 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>
Dng cui cng ca script cn c du // trnh duyt khng din dch dng ny di
dng m JavaScript. Cc v d trong chng ny khng cha c im n ca JavaScript
m c th d hiu hn.
2.1.2. S dng mt file ngun JavaScript
Thuc tnh SRC ca th <SCRIPT> cho php bn ch r file ngun JavaScript c s
dng (dng phng php ny hay hn nhng trc tip mt on lnh JavaScript vo trang
HTML).
JavaScript
C php:
<SCRIPT SRC="file_name.js">
....
</SCRIPT>
Thuc tnh ny ry hu dng cho vic chia s cc hm dng chung cho nhiu trang khc
nhau. Cc cu lnh JavaScript nm trong cp th <SCRIPT> v </SCRIPT> c cha thuc
tinh SRC tr khi n c li. V d bn mun a dng lnh sau vo gia cp th <SCRIPT
SRC="..."> v </SCRIPT>:
document.write("Khng tm thy file JS a vo!");
JavaScript
</A>
</BR>
Nu bn s dng trnh duyt Netscape t 2.0 tr i m vn c c dng ch ny th
hy bt Preferences/Advanced/JavaScript ln
</NOSCRIPT>
D liu m cch thc dng thc hin cng vic ca n c a vo dng tham s, v
d:
document.write("Test");
document.writeln('Test');
JavaScript
Cch thc write() xut ra mn hnh xu Text nhng khng xung dng, cn cch thc writeln()
sau khi vit xong dng Text t ng xung dng. Hai cch thc ny u cho php xut ra th
HTML.
JavaScript
</SCRIPT>
</PRE>
JavaScript
JavaScript
KIU
M T
SCRIPT
th HTML
SRC
Thuc tnh
ca th
SCRIPT
LANGUAGE
thuc tnh
ca th
SCRIPT
//
Ghi ch trong
JavaScript
/*...*/
Ghi ch trong
JavaScript
document.write()
cch thc
JavaScript
document.writeln()
Cch thc
JavaScript
alert()
Cch thc
ca
JavaScript
JavaScript
promt()
9
Cch thc
JavaScript
JavaScript
10
x = 0;
Bin cc b: Ch c truy cp trong phm vi chng trnh m n khai bo.
Bin cc b c khai bo trong mt hm vi t kho var nh sau:
var x = 0;
Bin ton cc c th s dng t kho var, tuy nhin iu ny khng thc s cn thit.
3.2. BIU DIN T T TRONG JAVASCRIPT
T t l cc gi tr trong chng trnh khng thay i. Sau
y l cc v d v t t:
8
The dog ate my shoe
true
Ch
Khc vi C, trong
JavaScript khng c
kiu hng s CONST
biu din mt gi tr
khng i no y
</HTML>
Cc trnh duyt h tr JavaScript s x l chnh xc v d trn v a ra kt qu di y:
JavaScript
11
Trnh din dch JavaScript s xem bin numfruit c kiu nguyn khi cng vi 20 v c
kiu chui khi kt hp vi bin temp.
Trong JavaScript, c bn kiu d liu sau y: kiu s nguyn, kiu du phy ng, kiu
logic v kiu chui.
1.1.1. KIU NGUYN (INTERGER)
S nguyn c th c biu din theo ba cch:
H c s 10 (h thp phn) - c th biu din s nguyn theo c s 10, ch
rng ch s u tin phi khc 0.
H c s 8 (h bt phn) - s nguyn c th biu din di dng bt phn
vi ch s u tin l s 0.
H c s 16 (h thp lc phn) - s nguyn c th biu din di dng thp
lc phn vi hai ch s u tin l 0x.
1.1.2. KIU DU PHY NG (FLOATING POINT)
Mt literal c kiu du phy ng c 4 thnh phn sau:
Phn nguyn thp phn.
Du chm thp phn (.).
Hnh 3.1: Kt qu ca x l d liu
Phn d.
Phn m.
phn bit kiu du phy ng vi kiu s nguyn, phi c t nht mt ch s theo sau
du chm hay E. V d:
9.87
-0.85E4
9.87E14
Khoa Toan tin, i hc Quc gia H Ni
JavaScript
12
.98E-3
JavaScript
13
2. XY DNG
JAVASCRIPT
CC
BIU
THC
TRONG
CC TON T (OPERATOR)
Ton t c s dng thc hin mt php ton no trn d liu. Mt ton t c th
tr li mt gi tr kiu s, kiu chui hay kiu logic. Cc ton t trong JavaScript c th
c nhm thnh cc loi sau y: gn, so snh, s hc, chui, logic v logic bitwise.
2.1.1. GN
Ton t gn l du bng (=) nhm thc hin vic gn gi tr ca ton hng bn phi cho
ton hng bn tri. Bn cnh JavaScript cn h tr mt s kiu ton t gn rt gn.
Kiu gn thng thng
Kiu gn rt gn
x=x+y
x+=y
x=x-y
x-=y
x=x*y
x*=y
x=x/y
x/=y
x=x%y
x%=y
2.1.2. SO SNH
Ngi ta s dng ton t so snh so snh hai ton hng v tr li gi tr ng hay sai
ph thuc vo kt qu so snh. Sau y l mt s ton t so snh trong JavaScript:
==
JavaScript
14
!=
>
>=
<
<=
2.1.3. S HC
Bn cnh cc ton t cng (+), tr (-), nhn (*), chia (/) thng thng, JavaScript cn h
tr cc ton t sau y:
var1% var2
var++
var--
Ch
Nu bn gn gi tr ca ton t ++ hay -- vo mt bin, nh y= x++, c th c cc
kt qu khc nhau ph thuc vo v tr xut hin trc hay sau ca ++ hay -- vi tn
bin (l x trong trng hp ny). Nu ++ ng trc x, x s c tng hoc gim
trc khi gi tr x c gn cho y. Nu ++ hay -- ng sau x, gi tr ca x c gn
cho y trc khi n c tng hay gim.
2.1.4. CHUI
Khi c s dng vi chui, ton t + c coi l kt hp hai chui,
v d:
"abc" + "xyz" c "abcxyz"
2.1.5. LOGIC
JavaScript h tr cc ton t logic sau y:
expr1 && expr2
expr1 || expr2
! expr
JavaScript
15
2.1.6. BITWISE
Vi cc ton t thao tc trn bit, u tin gi tr c chuyn di dng s nguyn 32 bit,
sau ln lt thc hin cc php ton trn tng bit.
&
Ton t bitwise AND, tr li gi tr 1 nu c hai bit cng l 1.
|
Ton t bitwise OR, tr li gi tr 1 nu mt trong hai bit l 1.
^
Ton t bitwise XOR, tr li gi tr 1 nu hai bit c gi tr khc nhau
Ngoi ra cn c mt s ton t dch chuyn bitwise. Gi tr c chuyn thnh s nguyn
32 bit trc khi dch chuyn. Sau khi dch chuyn, gi tr li c chuyn thnh kiu ca
ton hng bn tri. Sau y l cc ton t dch chuyn:
<<
Ton t dch tri. Dch chuyn ton hng tri sang tri mt s lng bit
bng ton hng phi. Cc bit b chuyn sang tri b mt v 0 thay vo pha
bn phi. V d: 4<<2 tr thnh 16 (s nh phn 100 tr thnh s nh phn
10000)
>>
Ton t dch phi. Dch chuyn ton hng tri sang phi mt s lng bit
bng ton hng phi. Cc bit b chuyn sang phi b mt v du ca ton
hng bn tri c gi nguyn. V d: 16>>2 tr thnh 4 (s nh phn
10000 tr thnh s nh phn 100)
>>>
Ton t dch phi c chn 0. Dch chuyn ton hng tri sang phi mt s
lng bit bng ton hng phi. Bit du c dch chuyn t tri (ging
>>). Nhng bit c dch sang phi b xo i. V d: -8>>>2 tr thnh
1073741822 (bi cc bit du tr thnh mt phn ca s). Tt nhin vi
s dng kt qu ca ton t >> v >>> l ging nhau.
Kiu bitwise rt gn
x = x << y
x << = y
x = x >> y
x - >> y
x = x >>> y
x >>> = y
x=x&y
x&=y
x=x^y
x^=y
x=x|y
x|=y
BI TP
2.1.7. CU HI
Hy nh gi cc biu thc sau:
1. a. 7 + 5
b. "7" + "5"
c. 7 == 7
d. 7 >= 5
JavaScript
e. 7 <= 7
2. f. (7 < 5) ? 7 : 5
g. (7 >= 5) && (5 > 5)
h. (7 >= 5) || (5 > 5)
2.1.8. TR LI
Cc biu thc c nh gi nh sau:
1. a. 12
b. "75"
c. true
d. true
e. true
2. f. 5
g. false
h. true
16
JavaScript
3.
17
CC LNH
CU LNH IU KIN
Cu lnh iu kin cho php chng trnh ra quyt nh v thc hin cng vic no y
da trn kt qu ca quyt nh. Trong JavaScript, cu lnh iu kin l if...else
if ... else
Cu lnh ny cho php bn kim tra iu kin v thc hin mt nhm lnh no y da
trn kt qu ca iu kin va kim tra. Nhm lnh sau else khng bt buc phi c, n
cho php ch ra nhm lnh phi thc hin nu iu kin l sai.
C php
if ( <iu kin> )
{
//Cc cu lnh vi iu kin ng
}
else
{
//Cc cu lnh vi iu kin sai
}
V d:
if (x==10){
document.write(x bng 10, t li x bng 0.);
x = 0;
}
else
document.write(x khng bng 10.);
Ch
K t { v } c s dng tch cc khi m.
CU LNH LP
Cu lnh lp th hin vic lp i lp li mt on m cho n khi biu thc iu kin c
nh gi l ng. JavaScipt cung cp hai kiu cu lnh lp:
for loop
while loop
JavaScript
18
JavaScript
19
Kt qu ca v d ny ging nh v d trc.
3.1.3. BREAK
Cu lnh break dng kt thc vic thc hin ca vng lp for hay while. Chng trnh
c tip tc thc hin ti cu lnh ngay sau ch kt thc ca vng lp.
C php
break;
JavaScript
20
{
if (x<50) break;
x++;
}
3.1.4. CONTINUE
Lnh continue ging lnh break nhng khc ch vic lp c kt thc v bt u t
u vng lp. i vi vng lp while, lnh continue iu khin quay li <iu kin>; vi
for, lnh continue iu khin quay li incrExpr.
C php
continue;
V d:
on m sau tng x t 0 ln 5, nhy ln 8 v tip tc tng ln 10
x=0;
while (x<=10)
{
document.write(Gi tr ca x l:+ x+<BR>);
if (x=5)
{
x=8;
continue;
}
x++;
}
V d
V d sau s ly ra tt c cc thuc tnh ca i tng Window v in ra tn ca mi thuc
tnh. Kt qu c minh ho trn hnh 5.2.
<HTML>
<HEAD>
<TITLE>For in Example </TITLE>
<SCRIPT LANGUAGE= "JavaScript">
Khoa Toan tin, i hc Quc gia H Ni
JavaScript
21
3.1.6. NEW
Bin new c thc hin to ra mt th hin mi ca mt i tng
C php
objectvar = new object_type ( param1 [,param2]... [,paramN])
JavaScript
22
<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");
person3= new person("Binh", "Nguyen Nhat", "24", "Male");
person4= new person("Hon", " Vn", "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>
JavaScript
23
3.1.7. THIS
T kho this c s dng ch i tng hin thi. i tng c gi thng l i
tng hin thi trong phng thc hoc trong hm.
C php
this [.property]
V d:
V d sau ch ra cch s dng lnh with thit lp i tng ngm nh l document v
c th s dng phng thc write m khng cn cp n i tng document
<HTML>
<HEAD>
<TITLE>With Example </TITLE>
<SCRIPT LANGUAGE= "JavaScript">
with (document){
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>
JavaScript
24
CC HM (FUNCTIONS)
JavaScript cg cho php s dng cc hm. Mc d khng nht thit phi c, song cc hm
c th c mt hay nhiu tham s truyn vo v mt gi tr tr v. Bi v JavaScript l ngn
ng c tnh nh kiu thp nn khng cn nh ngha kiu tham s v gi tr tr v ca
hm. Hm c th l thuc tnh ca mt i tng, trong trng hp ny n c xem nh
l phng thc ca i tng .
Lnh function c s dng to ra hm trong JavaScript.
C php
function fnName([param1],[param2],...,[paramN])
{
//function statement
}
V d:
V d sau minh ho cch thc to ra v s dng hm nh l thnh vin ca mt i tng.
Hm printStats c to ra l phng thc ca i tng person
<HTML> <HEAD>
<TITLE>Function 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;
JavaScript
25
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>
Hnh 8: V d v hm
JavaScript
26
CC HM C SN
JavaScript c mt s hm c sn, gn trc tip vo chnh ngn ng v khng nm trong
mt i tng no:
eval
parseInt
parseFloat
3.1.9. EVAL
Hm ny c s dng nh gi cc biu thc hay lnh. Biu thc, lnh hay cc i
tng ca thuc tnh u c th c nh gi. c bit ht sc hu ch khi nh gi cc
biu thc do ngi dng a vo (ngc li c th nh gi trc tip).
C php:
returnval=eval (bt k biu thc hay lnh hp l trong Java)
V d:
<HTML>
<HEAD>
<TITLE>Eval Example </TITLE>
<SCRIPT LANGUAGE= "JavaScript">
var string=10+ Math.sqrt(64);
document.write(string+ =+ eval(string));
</SCRIPT>
JavaScript
27
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>
JavaScript
28
</HTML>
V d:
V d sau minh ho cch thc x l ca parseFloat vi cc kiu chui khc nhau. Hnh 5.8
minh ha kt 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>
JavaScript
29
</HTML>
MNG (ARRAY)
Mc d JavaScript khng h tr cu trc d liu mng nhng Netscape to ra phng
thc cho php bn t to ra cc hm khi to mng nh sau:
function InitArray(NumElements){
this.length = numElements;
for (var x=1; x<=numElements; x++){
this[x]=0
}
return this;
}
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++){
Khoa Toan tin, i hc Quc gia H Ni
JavaScript
30
this[x]=0
}
return this;
}
myArray = new InitArray(10);
myArray[1] = "Ngh An";
myArray[2] = "H Ni";
document.write(myArray[1] + "<BR>");
document.write(myArray[2] + "<BR>");
</SCRIPT>
</HEAD>
<BODY> </BODY>
</HTML>
S KIN
JavaScript l ngn ng nh hng s kin, ngha l s phn ng trc cc s kin xc
nh trc nh kch chut hay ti mt vn bn. Mt s kin c th gy ra vic thc hin
mt on m lnh (gi l cc chng trinh x l s kin) gip cho chng trnh c th
phn ng mt cch thch hp.
JavaScript
31
onClick
onChange
onFocus
onLoad
onMouseOver
onSelect
onSubmit
onUnLoad
Selection list
Text
Textarea
Button
onClick
Checkbox
onClick
Radio button
onClick
Hypertext link
onMouseOver, onMouseOut
Reset button
onClick
JavaScript
32
Submit button
onClick
Document
Window
Framesets
onBlur, onFocus
Form
onSubmit, onReset
Image
Nhp vo tn ca bn:<BR>
Tn <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
<INPUT
TYPE=TEXT
NAME="AGE"
MAXLENGTH=3
onChange="CheckAge(PHIEU_DIEU_TRA)"><BR>
<P>
Bn thch ma no nht:<BR>
Ma xun<INPUT TYPE=RADIO NAME="MUA" VALUE="Mua xuan">
Khoa Toan tin, i hc Quc gia H Ni
SIZE=2
JavaScript
33
thao
di
nc<INPUT TYPE=CHECKBOX
VALUE="Duoi nuoc">
NAME="HOAT_DONG"
JavaScript
34
BI TP
3.1.12. CU HI
1. Vit mt on lnh JavaScript s dng cch thc confirm() v cu lnh if...then thc
hin:
Hi ngi s dng c mun nhn c mt li cho khng
Nu c th hin nh wellcome.jpg v mt li cho.
Nu khng th vit ra mt li thng bo
2. Vit mt on lnh JavaScript thc hin:
Hi ngi s dng: "10+10 bng bao nhiu?"
Nu ng th hi tip: C mun tr li cu th hai khng?"
Nu mun th hi: "10*10 bng bao nhiu?"
nh gi kt qu bng biu thc logic sau vit ra mn hnh:
ng: "CORRECT"; Sai: "INCORRECT"
Gi : S dng bin ton cc lu kt qu ng so snh vi kt qa a vo.
3. Cu lnh no trong cc cu sau y s dng sai th s kin
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. iu g xy ra khi thc hin 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.");
}
// STOP HIDING FROM OTHER BROWSERS -->
</SCRIPT>
</HEAD>
<BODY onLoad="welcome();" onUnload="farewell();";>
This is my page!
</BODY>
</HTML>
JavaScript
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 LI
1. S dng cch thc confirm() v cu trc 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");
}
else
document.write("What a pity! You have just click Cancel button");
</SCRIPT>
</P>
</BODY>
</HTML>
35
JavaScript
36
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
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. Cc cu sai: a, c, e. Cc cu ng: b, d, f
4. Khi chng trnh c chy (load), hm wellcome s thc hin hi tn ngi s
dng, lu tn vo bin ton cc name. Khi ngi s dng sang mt a ch
URL khc, hm farewell() s thc hin gi mt li cm n ti ngi s dng.
5. S dng vng lp while nh sau:
a.
j = 5;
while (--j > 0) {
document.writeln(j + "<BR>");
}
b.
k = 1;
while (k <= 99) {
k = k * 2 / 1.5;
JavaScript
37
c.
num = 0;
while (num <= 10) {
if (num++ == 8)
break;
}
JavaScript
4.
38
JavaScript
39
Window
Texturea
navigator
Text
Plugin
Frame
document
Location
Layer
FileUpload
Mime Type
Link
Password
Image
Hidden
Area
Submit
Anchor
Reset
Applet
Radio
Plugin
Checkbox
Form
Button
History
Select
Option
JavaScript
40
I TNG NAVIGATOR
i tng ny c s dng t c cc thng tin v trnh duyt nh s phin bn.
i tng ny khng c phng thc hay chng trnh x l s kin.
Cc thuc tnh
appCodeName
AppName
Xc nh tn trnh duyt.
AppVersion
userAgent
V d
V d sau s hin th cc thuc tnh ca i tng 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>
JavaScript
41
I TNG WINDOW
i tng window nh ni trn l i tng mc cao nht. Cc i tng
document, frame, v tr u l thuc tnh ca i tng window.
4.1.1. CC THUC TNH
defaultStatus - Thng bo ngm nh hin th ln trn thanh trng thi ca
ca s
Frames - Mng xc nh tt c cc frame trong ca s.
Length - S lng cc frame trong ca s cha m.
Name - Tn ca ca s hin thi.
Parent - i tng ca s cha m
Self - Ca s hin thi.
Status - c s dng cho thng bo tm thi hin th ln trn thanh thng
thi ca s. c s dng ly hay t li thng bo trng thi v ghi ln
defaultStatus.
Top - Ca s trn cng.
Window - Ca s hin thi.
4.1.2. CC PHNG THC
alert ("message") -Hin th hp hi thoi vi chui "message" v nt OK.
JavaScript
42
JavaScript
43
I TNG LOCATION
Cc thuc tnh ca i tng location duy tr cc thng tin v URL ca document hin
thi. i tng ny hon ton khng c cc phng thc v chng trnh x l s kin i
km. V d:
http:// www.abc.com/ chap1/page2.html#topic3
Cc thuc tnh
hash - Tn anchor ca v tr hin thi (v d topic3).
Host - Phn hostname:port ca URL (v d www.abc.com ). Ch rng y
thng l cng ngm nh v t khi c ch ra.
Hostname - Tn ca host v domain (v d www.abc.com ).
href - Ton b URL cho document hin ti.
Pathname - Phn ng dn ca URL (v d /chap1/page2.html).
Port - Cng truyn thng c s dng cho my tnh host, thng l cng
ngm nh.
Protocol - Giao thc c s dng (cng vi du hai chm) (v d http:).
Search - Cu truy vn tm kim c th cui URL cho cc script CGI.
JavaScript
44
I TNG FRAME
Mt ca s c th c mt vi frame. Cc frame c th cun mt cch c lp vi
nhau v mi frame c URL ring. frame khng c cc chng trnh x l s kin. S
kin onLoad v onUnLoad l ca i tng window.
4.1.4. CC THUC TNH
frames - Mng tt c cc frame trong ca s.
Name - Thuc tnh NAME ca th <FRAME>
Length - S lng cc frame con trong mt frame.
Parent - Ca s hay frame cha nhm frame hin thi.
self - frame hin thi.
Window - frame hin thi.
4.1.5. CC PHNG THC
clearTimeout (timeoutID) - Xo timeout do setTimeout lp. SetTimeout tr
li timeoutID.
TimeoutID = setTimeout (expression,msec) - nh gi expression sau khi
ht thi gian msec.
4.1.6. S DNG FRAME
4.1.6.1.
a) To mt frame (create)
JavaScript
45
Bn c th gi ti nhng frame trc bng cch s dng thuc tnh frames nh sau:
listFrame chnh l top.frames[0]
contentFrame chnh l top.frames[1]
navigatorFrame chnh l top.frames[2]
JavaScript
46
chnh l top.frames[1]
chnh l upperFrame.frames[0]
hoc top.frames[0].frames[0]
chnh l upperFrame.frames[1]
hoc top.frames[0].frames[1]
4.1.6.2.
I TNG DOCUMENT
i tng ny cha cc thng tin v document hin thi v cung cp cc phng thc
a thng tin ra mn hnh. i tng document c to ra bng cp th <BODY> v
</BODY>. Mt s cc thuc tnh gn vi th <BODY>.
Cc i tng anchor, forms, history, links l thuc tnh ca i tng document.
Khng c cc chng trnh x l s kin cho cc frame. S kin onLoad v onUnLoad
l cho i tng window.
JavaScript
47
I TNG ANCHORS
anchor l mt on vn bn trong document c th dng lm ch cho mt siu lin kt.
N c xc nh bng cp th <A> v </A>. i tng anchor khng c thuc tnh,
phng thc cng nh chng trnh x l s kin. Mng anchor tham chiu n mi
anchor c tn trong document. Mi anchor c tham chiu bng cch:
document.anchors [index]
Mng anchor c mt thuc tnh duy nht l length xc nh s lng cc anchor trong
document, n c th c xc nh nh sau:
document.anchors.length.
I TNG FORMS
Cc form c to ra nh cp th <FORM> v </FORM>. Phn ln cc thuc tnh
ca i tng form phn nh cc thuc tnh ca th <FORM>. C mt vi phn t
(elements) l thuc tnh ca i tng forms:
button
checkbox
hidden
password
JavaScript
48
radio
reset
select
submit
text
textarea
I TNG HISTORY
i tng ny c s dng lu gi cc thng tin v cc URL trc c
ngi s dng s dng. Danh sch cc URL c lu tr theo th t thi gian. i tng
ny khng c chng trnh x l s kin.
4.1.12. CC THUC TNH
length - S lng cc URL trong i tng.
4.1.13. CC PHNG THC
history.back() - c s dng tham chiu ti URL mi c thm trc
y.
history.forward() - c s dng tham chiu ti URL k tip trong danh
sch. N s khng gy hiu ng g nu n cui ca danh sch.
JavaScript
49
I TNG LINKS
i tng link l mt on vn bn hay mt nh c xem l mt siu lin kt.
Cc thuc tnh ca i tng link ch yu x l v URL ca cc siu lin kt. i tng
link cng khng c phng thc no.
Mng link cha danh sch tt c cc lin kt trong document. C th xc nh s lng
cc link qua
document.links.length()
C th tham chiu ti mt lin kt qa
document.links [index]
xc nh cc thuc tnh ca i tng link, c th s dng URL tng t:
http://www.abc.com/chap1/page2.html#topic3
4.1.14. CC THUC TNH
hash - Tn anchor ca v tr hin thi (v d topic3).
Host - Phn hostname:port ca URL (v d www.abc.com). Ch rng y
thng l cng ngm nh v t khi c ch ra.
Hostname - Tn ca host v domain (v d ww.abc.com).
href - Ton b URL cho document hin ti.
Pathname - Phn ng dn ca URL (v d /chap1/page2.html).
port - Cng truyn thng c s dng cho my tnh host, thng l cng
ngm nh.
Protocol - Giao thc c s dng (cng vi du hai chm) (v d http:).
Search - Cu truy vn tm kim c th cui URL cho cc script CGI.
Target - Ging thuc tnh TARGET ca <LINK>.
4.1.15. CC CHNG TRNH X L S KIN
onClick - Xy ra khi ngi s dng nhn vo link.
onMouseOver - Xy ra khi con chut di chuyn qua link.
I TNG MATH
i tng Math l i tng ni ti trong JavaScript. Cc thuc tnh ca i tng ny
cha nhiu hng s ton hc, cc hm ton hc, lng gic ph bin. i tng Math
khng c chng trnh x l s kin.
Vic tham chiu ti number trong cc phng thc c th l s hay cc biu thc c
nh gi l s hp l.
4.1.16. CC THUC TNH
E
LN2
JavaScript
50
LN10
- logarit t nhin ca 10, khong 2,302.
LOG2E - logarit c s 2 ca e, khong 1,442.
PI
- Gi tr ca , khong 3,14159.
SQRT1_2 - Cn bc 2 ca 0,5, khong 0,707.
SQRT2 - Cn bc 2 ca 2, khong 1,414.
4.1.17. CC PHNG THC
Math.abs (number) - Tr li gi tr tuyt i ca number.
Math.acos (number) - Tr li gi tr arc cosine (theo radian) ca number.
Gi tr ca number phi nmg gia -1 v 1.
Math.asin (number) - Tr li gi tr arc sine (theo radian) ca number. Gi
tr ca number phi nmg gia -1 v 1.
Math.atan (number) - Tr li gi tr arc tan (theo radian) ca number.
Math.ceil (number) - Tr li s nguyn nh nht ln hn hoc bng number.
Math.cos (number) - Tr li gi tr cosine ca number.
Math.exp (number) - Tr li gi tr e^ number, vi e l hng s Euler.
Math.floor (number) - Tr li s nguyn ln nht nh hn hoc bng
number.
Math.log (number) - Tr li logarit t nhin ca number.
Math.max (num1,num2) - Tr li gi tr ln nht gia num1 v num2
Math.min (num1,num2) - Tr li gi tr nh nht gia num1 v num2.
Math.pos (base,exponent) - Tr li gi tr base lu tha exponent.
Math.random (r) - Tr li mt s ngu nhin gia 0 v 1. Phwong thc ny
ch thc hin c trn nn tng UNIX.
Math.round (number) - Tr li gi tr ca number lm trn ti s nguyn
gn nht.
Math.sin (number) - Tr li sin ca number.
Math.sqrt (number) - Tr li cn bc 2 ca number.
Math.tan (number) - Tr li tag ca number.
I TNG DATE
i tng Date l i tng c sn trong JavaScript. N cung cp nhiu phng
thc c ch x l v thi gian v ngy thng. i tng Date khng c thuc tnh v
chng trnh x l s kin.
Phn ln cc phng thc date u c mt i tng Date i cng. Cc phng thc gii
thiu trong phn ny s dng i tng Date dateVar, v d:
dateVar = new Date ('August 16, 1996 20:45:04');
JavaScript
51
I TNG STRING
i tng String l i tng c xy dng ni ti trong JavaScript cung cp nhiu
phng thc thao tc trn chui. i tng ny c thuc tnh duy nht l di (length)
v khng c chng trnh x l s kin.
4.1.19. CC PHNG THC
str.anchor (name) - c s dng to ra th <A> (mt cch ng). Tham
s name l thuc tnh NAME ca th <A>.
str.big() - Kt qu ging nh th <BIG> trn chui str.
str.blink() - Kt qu ging nh th <BLINK> trn chui str.
str.bold() - Kt qu ging nh th <BOLD> trn chui str.
str.charAt(a) - Tr li k t th a trong chui str.
str.fixed() - Kt qu ging nh th <TT> trn chui str.
str.fontcolor() - Kt qu ging nh th <FONTCOLOR = color>.
str.fontsize(size) - Kt qu ging nh th <FONTSIZE = size>.
str.index0f(srchStr [,index]) - Tr li v tr trong chui str v tr xut hin
u tin ca chui srchStr. Chui str c tm t tri sang phi. Tham s index
c th c s dng xc nh v tr bt u tm kim trong chui.
str.italics() - Kt qu ging nh th <I> trn chui str.
JavaScript
52
button
checkbox
FileUpload
M t
L mt nt bm hn l nt submit hay nt reset
(<INPUT TYPE="button">)
Mt checkbox (<INPUT TYPE="checkbox">)
L mt phn t ti file ln cho php ngi s dng gi ln mt file
(<INPUT TYPE="file">)
hidden
password
radio
Mt nt bm (<INPUT TYPE="radio">)
reset
Mt nt reset(<INPUT TYPE="reset">)
Mt danh sch la chn
select
(<SELECT><OPTION>option1</OPTION>
<OPTION>option2</OPTION></SELECT>)
submit
text
JavaScript
textArea
53
<TEXTAREA>default text</TEXTAREA>)
JavaScript
54
M t
checked
defaultChecked
name
value
click()
JavaScript
55
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;
}
//enfzd if(3)
}//end if(1)
}//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 ny, bn thy cch s dng th s kin onClick cng nh thuc tnh
checked l mt gi tr kiu Boolean c th dng lm iu kin trong cu lnh if...else
Bn c th thm mt checkbox tn l square vo form. Nu hp ny c check, chng
trnh s ly gi tr ca n, nu khng, mt thc thi c mc nh s nhn i gi tr ca
n. Th s kin onClick trong checkbox c nh ngha:
(<INPUT TYPE=checkbox NAME=square onClick= "calculate( this.form, this.name);"> )
Khi nu ngi dng thay i mt cu lnh khc, form s c tnh ton li.
to ra s m rng cho checkbox. bn c th thay i hm 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);
}
JavaScript
56
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)
}
JavaScript
57
M t
checked
defaultChecked
index
length
name
value
click()
JavaScript
58
}
// 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>
JavaScript
59
</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>
JavaScript
60
JavaScript
61
Ch ra gi tr mc nh ca phn t c ch ra
trong th INPUT (thuc tnh)
name
value
focus()
blur()
select()
JavaScript
62
JavaScript
63
JavaScript
64
</FORM>
<FORM METHOD=POST>
<INPUT
TYPE=text
onChange="document.forms[0].elements[0].value = this.value;">
</FORM>
</BODY>
</HTML>
Mt khc, bn cng c th truy nhp n form bng tn form c t
trong th FORM:
<FORM METHOD=POST NAME="name">
Khi bn c th gi l document.forms["name"] hoc
document.name
4. Xem li cc lnh v m rng
Lnh/ M rng
Kiu
blur()
form.action
form.elemrnts
thuc
JavaScript
form.encoding
thuc
JavaScript
form,name
thuc
JavaScript
form.target
thuc
JavaScript
tnh Xu cha tn ca s ch bi mt
form submition
form.submit
type
thuc
JavaScript
onSubmit
Th s kin
button
checkbox
M t
JavaScript
65
pasword
radio
reset
SELECT
th HTML
OPTION
th HTML
submit
text
TEXTAREA
Th HTML
name
thuc
JavaScript
value
thuc
JavaScript
click()
onClick
thuc
JavaScript
checked
thuc
JavaScript
defaultChecked
thuc
JavaScript
tnh Xu cha gi tr mc nh ca mt
phn t HTML (password, text,
textarea)
focus()
blur()
text
text
JavaScript
66
onFocus()
Th s kin
onBlur
Th s kin
onChange
Th s kin
onSelect
Th s kin
index
thuc
JavaScript
length
thuc
JavaScript
dafautlSelected
thuc
JavaScript
options
thuc
JavaScript
text
thuc
JavaScript
TABLE
th HTML
TR
th HTML
TD
th HTML
COLSPAN
ROWSPAN
JavaScript
67
document.forms[] thuc
JavaScript
string.substring()
Math.floor()
string.length
thuc
JavaScript
tnh Gi tr nguyn ca s th t k t
cui cng trong xu string
JavaScript
5.
68
TO CC I TNG MI
C JavaScript client-side v server-side u c mt s i tng c nh ngha trc.
Tuy nhin, bn cng c th to ra nhng i tng ca ring bn. Trong JavaScript 1.2,
nu bn ch mun to ra mt i tng duy nht ca mt kiu i tng, bn c th to n
Khoa Toan tin, i hc Quc gia H Ni
JavaScript
69
JavaScript
70
JavaScript
71
JavaScript
72
Bn c th nh ngha cch thc cho mt kiu i tng bng cch a cch thc
vo trong hm xy dng i tng. V d bn c th nh ngha mt hm c th nh
dng v hin th cc thuc tnh ca cc i tng kiu car xy dng phn trc:
function displayCar () {
var result = Abeautiful+this.year+ + this.make + + this.model
document.write(result)
}
Bn c th thm cch thc ny vo cho i tng car bng cch thm dng lnh
sau vo hm nh ngha i tng
this.displayCar= displayCar;
5.1.6. S DNG
REFERENCES)
CHO
CC
THAM
CHIU
TNG
(OBJECT
JavaScript
73
JavaScript
6.
74
eval
int
static
boolean
extends
interface
super
break
false
long
switch
byte
final
native
synchrinized
case
finally
new
this
catch
float
null
throw
char
for
package
throws
class
function
parseFloat
transient
const
goto
parseInt
true
continue
if
private
try
default
implements
protected
var
do
import
public
void
double
in
return
while
else
instanceof
short
with
JavaScript
7.
75
TNG KT
Nh vy, ti liu khng nhng gii thiu s qua v JavaScript, m n cn l sch tham
kho ht sc hu ch pht trin ng dng ca bn.
Bn c th tham kho ton din JavaScript trong quyn Teach Yourself JavaScript in 14
Days, hoc JavaScript Guide
Do JavaScript l ngn ng cn mi v c s thay i nhanh chng, bn nn n vi trang
Web ca hng Netscape ( http://www.netscape.com ) c cc thng tin mi nht v
ngn ng ny.