Professional Documents
Culture Documents
Giao Trinh JavaScript
Giao Trinh JavaScript
CC LNH....................................................................................................................... 21
Trang 2/108
CC HM (FUNCTIONS)..................................................................................................... ........27
CC HM C SN............................................................................................... .......................27
3.1.9.
eval.................................................................................................................... ..28
3.1.10. parseInt........................................................................................... ....................29
3.1.11. parseFloat...................................................................................... .....................29
MNG (ARRAY)................................................................................................... ........................30
S KIN.......................................................................................................................... .............31
BI TP................................................................................................................................ ........34
3.1.12. Cu hi....................................................................................................... .........34
3.1.13. Tr li..................................................................................................... .............35
4.
Trang 3/108
4.1.21.
4.1.22.
4.1.23.
4.1.24.
4.1.25.
4.1.26.
4.1.27.
4.1.28.
5.
7.
Trang 4/108
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.
Trang 5/108
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
Trang 6/108
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).
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!");
Khi
bn
mu
n
ch
ra
mt
type=application/x-javascript
Trang 7/108
<NOSCRIPT>
<B> Trang ny c s dng JavaScript. Do bn cn s dng trnh duyt Netscape
Navigator t version 2.0 tr i!
<BR>
<A HREF="http://home.netscape.com/comprd/mirror/index.html">
Hy kch chut vo y ti v phin bn Netscape mi hn
</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>
Trang 8/108
i tng document trong JavaScript c thit k sn hai cch thc xut mt dng
text ra mn hnh client: write() v writeln(). Cch gi mt cch thc ca mt i tng
nh sau:
object_name.property_name
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');
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.
Trang 9/108
Trang 10/108
Trang 11/108
Tuy nhin cch thc alert() mi ch cho php thng bo vi ngi s dng ch cha thc
s giao tip vi ngi s dng. JavaScript cung cp mt cch thc khc giao tip vi
ngi s dng l promt(). Tng t nh alert(), prompt() to ra mt hp hi thoi vi
mt dng thng bo do bn a vo, nhng ngoi ra n cn cung cp mt trng nhp
d liu vo. Ngi s dng c th nhp vo trng ri kch vo OK. Khi , ta c th
x l d liu do ngi s dng va a vo.
V d: Hp hi thoi gm mt dng thng bo, mt trng nhp d liu, mt nt OK v
mt nt Cancel
Chng trnh ny s hi tn ngi dng v sau s hin th mt thng bo ngn s
dng tn mi a vo. V d c lu vo file Hello.html
<HTML>
<HEAD>
<TITLE> JavaScript Exemple </TITLE>
<SCRIPT LANGUAGE= JavaScript>
var name=window.prompt(Hello! Whats your name ?,);
document.write(Hello + name + ! I hope you like JavaScript );
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
Trang 12/108
V d ny hin th du nhc nhp vo tn vi Phng thc window.prompt. Gi tr t
c s c ghi trong bin c tn l name.
Bin name c kt hp vi cc chui khc v c hin th trong ca s ca trnh duyt
nh Phng thc document.write.
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
Trang 13/108
JavaScript
document.write()
cch thc
JavaScript
document.writeln()
Cch thc
JavaScript
alert()
Cch thc
ca
JavaScript
promt()
Cch thc
JavaScript
Trang 14/108
x = 0;
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:
Ch
Khc
vi
C,
trong
Java
Scrip
8
The dog ate my shoe
true
Khc vi C++ hay Java, JavaScript l ngn ng c tnh nh kiu thp. iu ny c ngha
l khng phi ch ra kiu d liu khi khai bo bin. Kiu d liu c t ng chuyn
thnh kiu ph hp khi cn thit.
V d file Variable.Html:
<HTML>
<HEAD>
<TITLE> Datatype Example </TITLE>
<SCRIPT LANGUAGE= "JavaScript">
var fruit='apples';
var numfruit=12;
numfruit = numfruit + 20;
var temp ="There are " + numfruit + " " + ".";
document.write(temp);
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
Trang 15/108
Cc trnh duyt h tr JavaScript s x l chnh xc v d trn v a ra kt qu di
y:
Hnh 3.1:
qu ca x l d
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.
Phn d.
Trang 16/108
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
.98E-3
false.
Trang 17/108
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
Trang 18/108
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:
==
!=
>
>=
<
<=
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--
Nu
bn
gn
gi
tr
ca
ton
t
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:
Trang 19/108
expr1 && expr2
expr1 || expr2
! expr
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
Trang 20/108
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
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
Trang 21/108
3.CC LNH
C th chia cc lnh ca JavaScript thnh ba nhm sau:
Lnh iu kin.
Lnh lp.
Lnh tho tc trn i tng.
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.);
K
t
{ v
CU LNH LP
Trang 22/108
while loop
3.1.1.VNG LP FOR
Vng lp for thit lp mt biu thc khi u - initExpr, sau lp mt on m cho n
khi biu thc <iu kin> c nh gi l ng. Sau khi kt thc mi vng lp, biu
thc incrExpr c nh gi li.
C php:
for (initExpr; <iu kin> ; incrExpr){
//Cc lnh c thc hin trong khi lp
}
V d:
<HTML> <HEAD>
<TITLE>For loop Example </TITLE>
<SCRIPT LANGUAGE= "JavaScript">
for (x=1; x<=10 ; x++) {
y=x*25;
document.write("x ="+ x +";y= "+ y + "<BR>");
}
</SCRIPT>
</HEAD>
<BODY></BODY>
</HTML>
Trang 23/108
Hnh 5.1:
qu ca lnh
V d ny lu vo file for_loop.Html.
Vng lp ny s thc hin khi m lnh cho n khi x>10.
3.1.2.WHILE
Vng lp while lp khi lnh chng no <iu kin> cn c nh gi l ng
C php:
while (<iu kin>)
{
//Cc cu lnh thc hin trong khi lp
}
V d:
x=1;
while (x<=10){
y=x*25;
document.write("x="+x +"; y = "+ y + "<BR>");
x++;
}
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;
Trang 24/108
while (x<100)
{
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.
Trang 25/108
<HTML>
<HEAD>
<TITLE>For in Example </TITLE>
<SCRIPT LANGUAGE= "JavaScript">
document.write("The properties of the Window object are: <BR>");
for (var x in window)
document.write(" "+ x + ", ");
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
Trang 26/108
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])
Trang 27/108
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
Trang 28/108
<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>
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
Trang 29/108
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;
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>
Trang 30/108
Hnh 8: V d v hm
H
nh
5.5:
CC HM C SN
Trang 31/108
<HEAD>
<TITLE>Eval Example </TITLE>
<SCRIPT LANGUAGE= "JavaScript">
var string=10+ Math.sqrt(64);
document.write(string+ =+ eval(string));
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
3.1.10.PARSEINT
Hm ny chuyn mt chui s thnh s nguyn vi c s l tham s th hai (tham s ny
khng bt buc). Hm ny thng c s dng chuyn cc s nguyn sang c s 10
v m bo rng cc d liu c nhp di dng k t c chuyn thnh s trc khi
tnh ton. Trong trng hp d liu vo khng hp l, hm parseInt s c v chuyn
dng chui n v tr n tm thy k t khng phi l s. Ngoi ra hm ny cn ct du
phy ng.
C php
parseInt (string, [, radix])
Trang 32/108
V d:
<HTML>
<HEAD>
<TITLE> perseInt Exemple </TITLE>
<SCRIPT LANGUAGE= "JavaScript">
document.write("Converting 0xC hex to base-10: " + parseInt(0xC,10) +
"<BR>");
document.write("Converting 1100 binary to base-10: " + parseInt(1100,2) +
"<BR>");
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
V d:
Trang 33/108
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>
</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
Trang 34/108
}
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++){
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>
Trang 35/108
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.
onClick
Trang 36/108
kt ca form.
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
Submit button
onClick
Document
Window
Framesets
onBlur, onFocus
Form
onSubmit, onReset
Image
Trang 37/108
s xut hin mt thng bo yu cu nhp li. Chng trnh x l s kin c gi mi
khi trng AGE b thay i v focus chuyn sang trng khc. Hnh 5.10 minh ho kt
qu ca v d ny
<HTML>
<HEAD>
<TITLE> An Event Handler Exemple </TITLE>
<SCRIPT LANGUAGE= "JavaScript">
function CheckAge(form) {
if ( (form.AGE.value<0)||(form.AGE.value>120) )
{
alert("Tui nhp vo khng hp l! Mi bn nhp li");
form.AGE.value=0;
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="PHIEU_DIEU_TRA">
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">
Ma h<INPUT TYPE=RADIO NAME="MUA" VALUE="Mua ha">
Ma thu<INPUT TYPE=RADIO NAME="MUA" VALUE="Mua thu">
Ma ng<INPUT TYPE=RADIO NAME="MUA" VALUE="Mua dong">
<P>
SIZE=2
Trang 38/108
Trt tuyt<INPUT TYPE=CHECKBOX NAME="HOAT_DONG" VALUE="Truot
tuyet">
Th
thao
di
nc<INPUT TYPE=CHECKBOX
VALUE="Duoi nuoc">
NAME="HOAT_DONG"
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:
Trang 39/108
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>
Trang 40/108
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>
Trang 41/108
var correct='CORRECT';
var incorrect='INCORRECT';
// ASK THE QUESTION
var response = prompt(question,"0");
// chECK THE ANSWER THE FIRST TIME
if (response != answer) {
// THE ANSWER WAS WRONG: OFFER A SECOND chAncE
if (confirm("Wrong! Press OK for a second chance."))
response = prompt(question,"0");
} else {
// THE ANSWER WAS RIGHT: OFFER A SECOND QUESTION
if (confirm("Correct! Press OK for a second question.")) {
question = "What is 10*10?";
answer = 100;
response = prompt (question,"0");
}
}
// chECK THE ANSWER
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>");
}
Trang 42/108
b.
k = 1;
while (k <= 99) {
k = k * 2 / 1.5;
}
c.
num = 0;
while (num <= 10) {
if (num++ == 8)
break;
}
Trang 43/108
Trang 44/108
Window
Texturea
navigator
Text
Plugin
Layer
Frame
Mime Type
document
Location
FileUpload
Link
Password
Image
Hidden
Area
Submit
Anchor
Reset
Applet
Radio
Plugin
Checkbox
Form
Button
History
Select
Option
Trang 45/108
location: c cc thuc tnh da trn a ch URL hin thi
history: Cha cc thuc tnh v cc URL m client yu cu trc .
Sau y s m t cc thuc tnh, Phng thc cng nh cc Chng trnh x l s kin
cho tng i tng trong JavaScript.
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>
Trang 46/108
H
nh
6.2:
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
Trang 47/108
alert ("message") -Hin th hp hi thoi vi chui "message" v nt OK.
clearTimeout(timeoutID) -Xa timeout do SetTimeout t. SetTimeout tr
li timeoutID
windowReference.close -ng ca s windowReference.
confirm("message") -Hin th hp hi thoi vi chui "message", nt OK v
nt Cancel. Tr li gi tr True cho OK v False cho Cancel.
[windowVar = ][window]. open("URL", "windowName",
[ "windowFeatures" ] ) - M ca s mi.
prompt ("message" [,"defaultInput"]) - M mt hp hi thoi nhn d
liu vo trng text.
TimeoutID = setTimeout(expression,msec) - nh gi biu thc expresion
sau thi gian msec.
V d: S dng tn ca s khi gi ti n nh l ch ca mt form submit hoc trong mt
Hipertext link (thuc tnh TARGET ca th FORM v A).
Trong v d to ra mt ti ca s th hai, nh nt th nht m mt ca s rng, sau
mt lin kt s ti file doc2.html xung ca s mi ri mt nt khc dng ng ca
s th hai li, v d ny la vo file window.html:
<HTML>
<HEAD>
<TITLE>Frame Example </TITLE>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" VALUE="Open Second Window"
onClick="msgWindow=window.open('','window2','resizable=no,width=200,heigh
t=200')">
<P>
<A HREF="doc2.html" TARGET="window2">
Load a file into window2 </A>
</P>
<INPUT TYPE="button" VALUE="Close Second Window"
onClick="msgWindow.close()">
</FORM>
</BODY>
</HTML>
Trang 48/108
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.
Trang 49/108
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)
to mt frame, ta s dng th FRAMESET. Mc ch ca th ny l nh ngha mt
tp cc frame trong mt trang.
V d1: to frame ( hnh 17)
<HTML>
<HEAD>
<TITLE>Frame Example </TITLE>
<FRAMESET ROWS="90%,10%">
<FRAMESET COLS="30%,70%">
<FRAME SRC=CATEGORY.HTM NAME="ListFrame">
<FRAME SRC=TITLES.HTM
NAME="contentFrame">
</FRAMESET >
<FRAME SRC=NAVIGATOR.HTM NAME="navigateFrame">
</FRAMESET >
</HEAD>
<BODY> </BODY>
</HTML>
Trang 50/108
Top
listFrame (category.html)
contentFrame (titles.html)
navigatorFrame (navigator.html)
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]
Trang 51/108
<TITLE>Frame Example </TITLE>
<FRAMESET ROWS="90%,10%">
<FRAME SRC=muske13.HTML NAME="upperFrame">
<FRAME SRC=NAVIGATOR.HTM NAME="navigateFrame">
</FRAMESET >
</HEAD>
<BODY>
</BODY>
</HTML>
Trang 52/108
Bn c th cp nht ni dung ca mt frame bng cch s dng thuc tnh location t
a ch URL v phi nh ch r v tr ca frame trong cu trc.
Trong v d trn, nu bn thm mt dng sau vo navigatorFrame:
<INPUT TYPE="button" VALUE="Titles only"
onClick="top.frames[0].location='artist.html'">
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.
4.1.7.CC THUC TNH
alinkColor - Ging nh thuc tnh ALINK.
anchor - Mng tt c cc anchor trong document.
bgColor - Ging thuc tnh BGCOLOR.
cookie - S dng xc nh cookie.
fgColor - Ging thuc tnh TEXT.
forms - Mng tt c cc form trong document.
lastModified - Ngy cui cng vn bn c sa.
linkColor - Ging thuc tnh LINK.
links - Mng tt c cc link trong document.
location - URL y ca vn bn.
referrer - URL ca vn bn gi n.
title - Ni dung ca th <TITLE>.
vlinkColor - Ging thuc tnh VLINK.
4.1.8.CC PHNG THC
document.clear - Xo document hin thi.
document.close - ng dng d liu vo v a ton b d liu trong b m
ra mn hnh.
document.open (["mineType"]) - M mt stream thu thp d liu vo ca
cc phwong thc write v writeln.
document.write(expression1 [,expression2]...[,expressionN]) - Vit biu
thc HTML ln vn bn trng mt ca s xc nh.
document.writeln (expression1 [,expression2] ... [,expressionN] ) Ging Phng thc trn nhng khi ht mi biu thc li xung dng.
Trang 53/108
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
radio
reset
select
submit
text
textarea
Trang 54/108
4.1.10.CC PHNG THC
formName.submit () - Xut d liu ca mt form tn formName ti trang x l. Phng
thc ny m phng mt click vo nt submit trn form.
4.1.11.CC CHNG TRNH X L S KIN
onSubmit - Chng trnh x l s kin ny c gi khi ngi s dng chuyn d liu
t form i.
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.
history.go (delta | "location") - c s dng chuyn ln hay chuyn
xung delta bc hay di chun n URL xc nh bi location trong danh
sch. Nu delta c s dng th vic dch chuyn ln pha trn khi delta dng v xung pha di khi delta m. nu s dng location, URL gn nht c
cha location l chui con s c tham chiu.
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).
Trang 55/108
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
- Hng s Euler, khong 2,718.
LN2
- logarit t nhin ca 2, khong 0,693.
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.
Trang 56/108
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');
Trang 57/108
dateVar.setMinutes(minutes) - t pht l minutes cho dateVar.
dateVar.setMonths(months) - t thng l months cho dateVar.
dateVar.setSeconds(seconds) - t giy l seconds cho dateVar.
dateVar.setTime(value) - t thi gian l value, trong value biu din s
lng mili giy t 00:00:00 ngy 01/01/10970.
dateVar.setYear(years) - t nm l years cho dateVar.
dateVar.toGMTString() - Tr li chui biu din dateVar di dng GMT.
dateVar.toLocaleString()-Tr li chui biu din dateVar theo khu vc thi
gian hin thi.
Date.UTC (year, month, day [,hours] [,minutes] [,seconds]) - Tr li s lng mili giy t 00:00:00 01/01/1970 GMT.
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.
str.lastIndex0f(srchStr [,index]) - Tr li v tr trong chui str v tr xut
hin cui cng ca chui srchStr. Chui str c tm t phi sang tri. Tham
s index c th c s dng xc nh v tr bt u tm kim trong chui.
str.link(href) - c s dng to ra mt kt ni HTML ng cho chhui
str. Tham s href l URL ch ca lin kt.
str.small() - Kt qu ging nh th <SMALL> trn chui str.
str.strike() - Kt qu ging nh th <STRIKE> trn chui str.
str.sub() - To ra mt subscript cho chui str, ging th <SUB>.
str.substring(a,b) - Tr li chui con ca str l cc k t t v tr th a ti v
tr th b. Cc k t c m t tri sang phi bt u t 0.
Trang 58/108
str.sup() - To ra superscript cho chui str, ging th <SUP>.
str.toLowerCase() - i chui str thnh ch thng.
str.toUpperCase() - i chui str thnh ch hoa.
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
textArea
<TEXTAREA>default text</TEXTAREA>)
Trang 59/108
Xu c th l mt trong cc 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. PHN T BUTTON
Trong mt form HTML chun, ch c hai nt bm c sn l submit v reset bi v d liu
trong form phi c gi ti mt vi a ch URL (thng l CGI-BIN script) x l v
lu tr.
Mt phn t button c ch nh r khi s dng th INPUT:
<INPUT TYPE="button" NAME="name" VALUE= "buttonName">
Trong th INPUT, name l tn ca button, thuc tnh VALUE c cha nhn ca button s
c hin th trn Navigator ca browser.
Ch c mt th s kin duy nht i vi button l onClick. Kt hp vi n l cch thc
duy nht click.Phn t buttton c kh nng m rng cho php ngi lp trnh JavaScript
c th vit c mt on m lnh JavaScript thc thi vic thm vo mt nt bm
trong mt script.
Trong v d sau, thay v s dng onChange, bn c th chnh sa script nh gi biu
thc khi button c bm.
V d: nh gi mt form s dng phn t button.
<HTML>
<HEAD>
<TITLE>button Example</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- HIDE FROM OTHER BROWSERS
function calculate(form) {
form.results.value = eval(form.entry.value);
}
// STOP HIDING FROM OTHER BROWSERS -->
</SCRIPT>
</HEAD>
<BODY>
<FORM METHOD=POST>
Trang 60/108
Enter a JavaScript mathematical expression:
<INPUT TYPE="text" NAME="entry" VALUE="">
<BR>
The result of this expression is:
<INPUT TYPE=text NAME="results" onFocus="this.blur();">
<BR>
<INPUT TYPE="button" VALUE="Calculate" onClick="calculate(this.form);">
</FORM>
</BODY>
</HTML>
M t
checked
defaultChecked
name
value
click()
Trang 61/108
}
//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);
Trang 62/108
}
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)
}
Trang 63/108
i tng radio gn ging s bt tt checkbox khi c hai nt radio kt hp thnh mt
nhm. Khi nhiu radio c kt hp thnh mt nhm, ch c mt nt c chn trong bt
k mt thi im no. V d dng lnh sau to ra mt nhm radio c ba nt tn l test:
<INPUT TYPE="radio" NAME="test" VALUE="1" chECKED>1<BR>
<INPUT TYPE="radio" NAME="test" VALUE="2">2<BR>
<INPUT TYPE="radio" NAME="test" VALUE="3">3<BR>
M t
checked
defaultChecked
index
length
name
value
click()
Trang 64/108
form.entry.value = form.result.value / 2;
}
} else {
if (form.action[1].checked) {
form.result.value=form.entry.value*form.entry.value;
} else {
form.result.value = form.entry.value * 2;
}
}
}
// STOP HIDING FROM OTHER BROWSERS -->
</SCRIPT>
</HEAD>
<BODY>
<FORM METHOD=POST>
Value: <INPUT TYPE="text" NAME="entry" VALUE=0
onChange="calculate(this.form,this.name);"> <BR>
Action:<BR>
<INPUT TYPE="radio" NAME="action" VALUE="twice"
onClick="calculate(this.form,this.name);"> Double<BR>
<INPUT TYPE="radio" NAME="action" VALUE="square"
onClick="calculate(this.form,this.name);"> Square <BR>
Result: <INPUT TYPE=text NAME="result" VALUE=0
onChange="calculate(this.form,this.name);">
</FORM>
</BODY>
</HTML>
Trang 65/108
V d:
<HTML>
<HEAD>
<TITLE>reset Example</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- HIDE FROM OTHER BROWSERS
function clearForm(form) {
form.value1.value = "Form";
form.value2.value = "Cleared";
}
// STOP HIDING FROM OTHER BROWSERS -->
//SCRIPT>
</HEAD>
<BODY>
<FORM METHOD=POST>
<INPUT TYPE="text" NAME="value1"><BR>
<INPUT TYPE="text" NAME="value2"><BR>
<INPUT TYPE="reset" VALUE="Clear Form" onClick="clearForm(this.form);">
</FORM>
</BODY>
</HTML>
Trang 66/108
Trong c hai v d trn, ngi s dng ch c th c mt la chn. Nu s dng thuc
tnh MULTIPLE, bn c th cho php ngi s dng la chn nhiu hn mt gi tr trong
danh sch la chn:
<SELECT NAME="test" SIZE=2 MULTIPLE>
<OPTION SELECTED>1
<OPTION>2
<OPTION>3
</SELECT>
Trang 67/108
example.selectedIndex = 1
example.options[0].defaultSelected = true
example.options[1].selected = true
Trang 68/108
Ch ra gi tr mc nh ca phn t c ch ra
trong th INPUT (thuc tnh)
name
value
focus()
blur()
select()
Trang 69/108
form.second.value = form.first.value;
else
form.first.value = form.second.value;
}
// STOP HIDING FROM OTHER BROWSERS -->
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT
TYPE=text
NAME="first"
onChange="echo(this.form,this.name);">
<INPUT
TYPE=text
NAME="second"
onChange="echo(this.form,this.name);">
</FORM>
</BODY>
</HTML>
1.3 Phn t Textarea
Th TEXTAREA cung cp mt hp cho php nhp s dng text do
ngi thit k nh trc. V d:
<TEXTAREA NAME="fieldName" ROWS=10 COLS=25>
Default Text Here
</TEXTAREA>
v d ny to ra mt trng text cho php a vo 10 hng ,mi hng
25 k t. Dng "Defautl Text Here"s xut hin trong trng ny vo
ln hin th u tin.
Cng nh phn t text , JavaScript cung cp cho bn cc thuc tnh
defaultValue, name, v value, cc cch thc focus(), select(), v blur(),
cc th s kin onBlur, onForcus, onChange, onSelect.
2. Mng elements[]
Cc i tng ca form c th c gi ti bng mng elements[]. V
d bn to ra mt form sau:
<FORM METHOD=POST NAME=testform>
<INPUT TYPE="text" NAME="one">
<INPUT TYPE="text" NAME="two">
<INPUT TYPE="text" NAME="three">
Trang 70/108
</FORM>
bn c th gi ti ba thnh phn ny nh sau: document.elements[0],
document.elements[1], document.elements[2], hn na cn c th gi
document.testform.one, document.testform.two,
document.testform.three.
Thuc tnh ny thng c s dng trong cc mi quan h tun t ca
cc phn t hn l dng tn ca chng.
3. Mng form[]
Cc th s kin c thit k lm vic vi cc form ring bit hoc
cc trng mt thi im, n rt hu dng cho php gi ti cc
form c lin quan trong cng mt trang.
Mng form[] cp n y c th c nhiu xc nh cc nhn ca
form trn cng mt trang v have information in a single field match
in all three forms. C th gi bng document.forms[] thay v gi bng
tn form. Trong script ny, bn c hai trng text nhp v nm trn
hai form c lp vi nhau. S dng mng form bn c th tng tc
trn cc gi tr ca cc trng trong hai form cng mt lc khi ngi
s dng thay i gi tr trn mt form.
<HTML>
<HEAD>
<TITLE>forms[] Example</TITLE>
</HEAD>
<BODY>
<FORM METHOD=POST>
<INPUT
TYPE=text
onChange="document.forms[1].elements[0].value = this.value;">
</FORM>
<FORM METHOD=POST>
<INPUT
TYPE=text
onChange="document.forms[0].elements[0].value = this.value;">
</FORM>
</BODY>
</HTML>
Mt khc, bn cng c th truy nhp n form bng tn form c t
trong th FORM:
<FORM METHOD=POST NAME="name">
Trang 71/108
Khi bn c th gi
document.name
4. Xem li cc lnh v m rng
document.forms["name"]
hoc
Lnh/ M rng
Kiu
M t
blur()
cch
thc M t vic dch chuyn con tr t mt
JavaScript
phn t
form.action
cch
thc Xu cha gi tr ca thuc tnh
JavaScript
ACTION trong th FORM
form.elemrnts
thuc
tnh mng cha danh sch cc phn t
JavaScript
trong form (nh checkbox, trng text,
danh sch la chn)
form.encoding
thuc
tnh xu cha kiu MIME s dng khi
JavaScript
chuyn thng tin t form ti server
form,name
thuc
tnh Xu cha gi tr thuc tnh NAME
JavaScript
trong th FORM
form.target
thuc
tnh Xu cha tn ca s ch bi mt
JavaScript
form submition
form.submit
cch
thc M t vic submit mt form HTML
JavaScript
type
thuc
tnh nh x kiu ca mt phn t form
JavaScript
thnh mt xu.
onSubmit
Th s kin
button
thuc
HTML
checkbox
thuc
HTML
pasword
thuc
HTML
radio
thuc
HTML
reset
thuc
HTML
Trang 72/108
SELECT
th HTML
OPTION
th HTML
submit
thuc
HTML
text
thuc
HTML
TEXTAREA
Th HTML
name
thuc
tnh Xu cha tn phn t HTML (button,
JavaScript
checkbox, password...)
value
thuc
tnh Xu cha gi tr hin thi ca mt
JavaScript
phn t HTML(button, checkbox,
password...)
click()
cch
thc M t vic kch vo mt phn t trn
JavaScript
form (button, checkbox,password)
onClick
thuc
tnh Th s kin cho s kin kch (button,
JavaScript
checkbox,
radio
button,
reset,
selection list, submit)
checked
thuc
tnh Gi tr kiu Boolean m t mt la
JavaScript
chn check(checkbox, radio button)
defaultChecked
thuc
tnh Xu cha gi tr mc nh ca mt
JavaScript
phn t HTML (password, text,
textarea)
focus()
cch
thc M t vic con tr ti mt phn t
JavaScript
(password, text, textarea)
blur()
cch
thc M t vic con tr ri khi mt phn
JavaScript
t (password, text, textarea)
select()
cch
thc M t vic la chn dng text trong
JavaScript
mt trng (password, text, textarea)
onFocus()
Th s kin
Th
kin
cho
text
text
kin
Trang 73/108
Th s kin
onChange
Th s kin
onSelect
Th s kin
index
thuc
tnh L mt s nguyn m t la chn hin
JavaScript
thi trong mt nhm la chn (radio
button)
length
thuc
tnh S nguyn m t tng s cc la chn
JavaScript
trong mt nhm cc la chn (radio
button)
dafautlSelected
thuc
tnh Gi tr Boolean m t khi c mt la
JavaScript
chn c t l mc nh (seledtion
list)
options
thuc
tnh Mng cc la chn trong danh sch
JavaScript
la chn
text
thuc
tnh Dng text hin th cho mt thnh phn
JavaScript
ca menu trong danh sch la chn
TABLE
th HTML
TR
th HTML
TD
th HTML
COLSPAN
thuc
HTML
ROWSPAN
thuc
HTML
BODER
thuc
Trang 74/108
HTML
document.forms[]
thuc
tnh mng ca cc i tng form vi mt
JavaScript
danh sch cc form trong mt
document
string.substring()
cch
thc Tr li mt xu con ca xu string t
JavaScript
tham s v tr k t u n v tr k t
cui
Math.floor()
cch
thc Tr li mt gi tr nguyn tip theo
JavaScript
nh hn gi tr ca tham s a vo.
string.length
thuc
tnh Gi tr nguyn ca s th t k t cui
JavaScript
cng trong xu string
Trang 75/108
TO CC I TNG MI
Trang 76/108
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 bng cch s dng khi to i tng. Hoc nu bn mun to ra nhiu c th ca mt
kiu i tng, bn c th to ra mt hm xy dng trc, sau to ra cc i tng c
kiu ca hm bng ton t new
5.1.1.S DNG KHI TO I TNG
Trong nhng phin bn trc ca Navigator, bn ch c th to ra mt i tng bng
cch s dng hm xy dng chng hoc s dng mt hm c cung cp bi mt vi i
tng khc t c mc ch.
Tuy nhin, trong Navigator 4.0, bn c th to ra mt i tng bng cch s dng mt
khi to i tng.Bn s dng cch ny khi bn ch mun to ra mt c th n l ch
khng phi nhiu c th ca i tng.
C php to ra mt i tng bng cch khi to i tng (Object Initializers):
objectName={property1: value1, property2: value2,
..., propertyN: valueN}
Trang 77/108
Bn khng cn phi ch nh r tt c cc phn t trn mng mi. Nu bn t hai
du phy vo hng, th mng s c to vi nhng chn trng cho nhng phn t cha
c nh ngha nh v d di y:
Nu mt mng c to bng cch khi to(initializer) mc cao nht, mi ln
mng xut hin trong cc biu thc, JavaScript s nh gi li n mt ln. Ngoi ra,
nu s dng vic khi to ny trong mt hm th mi ln gi hm, mng s c khi to
mt ln
V d1: To mt mng coffees vi 3 phn t v di ca mng l 3:
coffees = [French Roast,Columbian,Kona]
Trang 78/108
V sau ta to ra hai ngi mi:
rank = new person(Rank McKinnon,33,M)
ken = new person(Ken John,39,M)
Nh vy, thuc tnh color ca i tng car1 c gn l black. Tuy nhin, n s khng
gy tc ng ti bt k mt i tng kiu car no khc. Nu mun thm thuc tnh cho
tt c cc i tng th phi nh ngha li hm xy dng i tng.
5.1.3.LP MC LC CHO CC THUC TNH CA I TNG
Trong Navigator 2.0, bn c th gi thuc tnh ca mt i tng bng tn thuc
tnh hoc bng s th t ca n. Tuy nhin t Navigator 3.0 tr i, nu ban u bn nh
ngha mt thuc tnh bng tn ca n, bn s lun lun phi gi n bng tn, v nu bn
nh ngha mt thuc tnh bng ch s th bn cng lun lun phi gi ti n bng ch s.
iu ny ng dng khi bn to mt i tng vi nhng thuc tnh ca chng
bng hm xy dng (nh v d v kiu i tng car phn trc) v khi bn nh ngha
nhng thuc tnh ca ring mt i tng (nh mycar.color=red). V vy nu bn nh
ngha cc thuc tnh ca i tng ngay t u bng ch s nh mycar[5]=25 mpg, bn
c th ln lt gi ti cc thuc tnh khc nh mycar[5].
Tuy nhin iu ny l khng ng i vi nhng i tng tng ng ca HTML
nh mng form. Bn c th gi ti cc i tng trong mng bi s th t hoc tn ca
chng. V d th <FORM> th hai trong mt document c thuc tnh NAME l
myform th bn c th gi ti form bng document.form[1] hoc
document.form[myForm] hoc document.myForm
5.1.4.NH NGHA THM CC THUC TNH CHO MT KIU I TNG
Trang 79/108
Bn c th thm thuc tnh cho mt kiu i tng c nh ngha trc bng
cch s dng thuc tnh property. Thuc tnh c nh ngha ny khng ch c tc dng
i vi mt i tng m c tc dng i vi tt c cc i tng khc cng kiu.V d
sau thc hin thm thuc tnh color cho tt c cc i tng kiu car, sau gn mt gi
tr mu cho thuc tnh color ca i tng car1:
car.prototype.color=null
car1.color=red
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;
CC
THAM
CHIU
TNG
(OBJECT
Trang 80/108
JavaScript c mt t kho c bit l this m bn c th s dng n cng vi mt
cch thc gi ti i tng hin thi. V d, gi s bn c mt hm validate dng
xc nhn gi tr thuc tnh ca mt i tng nm trong mt khong no :
function validate(obj, lowval, hival){
if ( (obj.value<lowdate)||(obj.value>hival) )
alert(Invalid value!)
}
Sau bn c th gi hm validate t mi th s kin onChange:
<INPUT TYPE=TEXT NAME=AGE SIZE=3
onChange=validate(this,18,99) >
Khi lin kt vi mt thuc tnh form, t kho this c th gi ti form cha ca i
tng hin thi. Trong v d sau, myForm c cha i tng Text v mt nt bm. Khi
ngi s dng kch vo nt bm, trng text s hin th tn form. Th s kin onClick
ca nt bm s dng this.form gi ti form cha l myForm.
<FORM NAME=myForm>
Form name:<INPUT TYPE=text NAME=text1 VALUE=Beluga>
<P>
<INPUT TYPE=button NAME=button1
value=Show Form Name
onClick=this.form.text1.value=this.form.name>
</FORM>
5.1.7.XO I TNG
Trong JavaScript cho Navigator 2.0, bn khng th xo cc i tng-chng vn
tn ti trong khi bn ri khi trang . Trong khi JavaScript cho Navigator 3.0 cho
php bn c th xo mt i tng bng cch t cho n tr ti gi tr Null (nu nh l
ln cui cng gi ti i tng). JavaScript s ng i tng ngay lp tc thng qua
biu thc gn.
Trang 81/108
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
Trang 82/108
7.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.
Trang 83/108
B SUNG
Trang 84/108
ng cc s kin trong mi
trng Navigator.V d
i tng M t
Window Cung cp cc phng php v cc tnh cht cho ca s hin
hnh
ca trnh duyt,bao gm cc i tng cho mi frame.
J
JAVASCRIPT MEDIASPACE CLUB (HTD) PAGE: 2
Location Cung cp cc tnh cht v phng php lm vic vi cc a
ch
URL hin hnh c m.
History Cc i tng history cung cp thng tin v cc danh sch c
v
c th gii hn s tng tc vi danh sch.
Document y l mt i tng c s dng nhiu nht .N cha
ng cc
i tng,tnh cht v cc phng php lm vic vi cc thnh
phn ca ti liu nh cc :form,link,anchor,applet.
5. Cc i tng do ngi lp trnh xy dng:
a. nh ngha thuc tnh ca i tng: (Object Properties)
C php : Object-name.Property-name (tn i tng.tn c tnh)
V d :Mt i tng airplane c cc thuc tnh nh sau:
Airplane.model
Airplane.price
Airplane.seating
Airplane.maxspeed
Airplane.fuel
b. Thm cc phng php cho i tng Method to Object)
Sau khi c cc thng tin v airplane ta tip tc xy dng phng
php s dng thng tin
ny.V d bn mun in ra m t ca airplane hoc tnh ton khong
cch ti a ca cuc hnh
trnh vi nhin liu c:
Airplane.description()
Airplane.distance()
c. To mt instance ca i tng:
Trc khi thao tc vi mt i tng ca JavaScript ta phi to mt
instance cho i tng .
6 . Nhng JavaScript vo trong tp tin HTML:
C php:
<script>
JavaScript Program
</SCRIPT>
Thuc tnh ca th SCRIPT
Trang 85/108
+ SRC :a ch URL ch n tp tin chng trnh JavaScript (*.js)
+ LANGUAGE: Ch nh ngn ng c s dng trong Script v cc
phin bn s dng (v d
nh :JavaScript ,JavaScript .1.2 vv ,VBScript).
7. n cc Scripts i vi cc Browser khng cung cp javascript:
<script>
<D>
</SCRIPT>
JAVASCRIPT MEDIASPACE CLUB (HTD) PAGE: 3
8. S dng tp tin JavaScript bn ngoi :
<script>
<D>
</SCRIPT>
9. Thm chng trnh vo tp tin HTML:
<HTML>
<HEAD>
<TITLE>Listing 2.1</TITLE>
</HEAD>
<BODY>
Here is result:
<script>
<document>
</SCRIPT>
</BODY>
</HTML>
-----------------Kent(HCE)
JAVASCRIPT Ton tp (bi 2)
Bi 2: S DNG JAVASCRIPT
1. C php c bn ca lnh :
JavaScript xy dng cc hm,cc pht biu,cc ton t v cc biu
thc trn cng mt dng v
kt thc bng ;
V d: document.writeln("It work<BR>");
2. Cc khi lnh:
Nhiu dng lnh c th c lin kt vi nhau v c bao bi { }
V d:
{
document.writeln("Does It work");
Trang 86/108
document.writeln("It work!");
}
3. Xut d liu ra ca s trnh duyt:
Dng 2 phng php document.write() v document.writeln()
V d:
document.write(Test);
document.writeln(Test);
4. Xut cc th HTML t JavaScript
V d 1:
<HTML>
<HEAD>
<TITLE>Outputting Text</TITLE>
</HEAD>
<BODY>
This is text plain <BR>
<script>
</SCRIPT>
</BODY>
</HTML>
V d 2:
<HTML>
<HEAD>
<TITLE>Example 2.4 </TITLE>
</HEAD>
<BODY>
<script>
</H1>
</SCRIPT>
</BODY>
</HTML>
5. S dng phng php writeln() vi th PRE:
<HTML>
<HEAD>
<TITLE>Outputting Text</TITLE>
</HEAD>
<BODY>
<script>
Trang 87/108
<document>
</SCRIPT>
</BODY>
</HTML>
6. Cc k t c bit trong chui:
\n : New line
\t : Tab
\r : carriage return
\f : form feed
\b: backspace
V d:
document.writeln("It work!\n");
7. Lm vic vi cc dialog boxes
S dng hm alert() hin th thng bo trong mt hp.
V d:
<HTML>
<HEAD>
<TITLE>Example 2.5 </TITLE>
</HEAD>
<BODY>
<script>
<alert>
</SCRIPT>
</BODY>
8. Tng tc vi ngi s dng:
S dng phng php promt() tng tc vi ngi s dng.
V d 1:
<HTML>
<HEAD>
<TITLE>Listing 2.6</TITLE>
</HEAD>
<BODY>
<script>
<document>
</SCRIPT>
</BODY>
Trang 88/108
</HTML>
V d 2:
<HTML>
<HEAD>
<TITLE>Listing 2.6</TITLE>
</HEAD>
<BODY>
<script>
</H1>
</SCRIPT>
</BODY>
</HTML>
S dng du + cng 2 chui n li:
V d 3:
<HTML>
<HEAD>
<TITLE>Listing 2.6</TITLE>
</HEAD>
<BODY>
<script>
</H1>
</SCRIPT>
</BODY>
</HTML>
9. Cc kiu d liu trong javascript:
a. D liu kiu s:
+ S nguyn: v d 720
+ S Octal: v d :056
+ S Hexa:v d:0x5F
+ S thp phn :v d :7.24 , -34.2 ,2E3
b. D liu kiu chui:
v d: Hello
245
Trang 89/108
Var example=Hello;
Ta c th dng document.write(example); xut ni dung ca bin.
V d 1: dng t kha var khai bo bin
<HTML>
<HEAD>
<TITLE>Example 3.1</TITLE>
<script>
<var>
</SCRIPT>
</HEAD>
<BODY>
<script>
</H1>
</SCRIPT>
</BODY>
</HTML>
V du 2: to li mt gi tr mi cho bin
<HTML>
<HEAD>
<TITLE>Example 3.2</TITLE>
<script>
var name=prompt("enter your
name:","name");
alert ("greeting " + name + " , ");
name=prompt("enter your friend's
name:","friend's name");
</SCRIPT>
</HEAD>
<BODY>
<script>
</H1>
</SCRIPT>
</BODY>
</HTML>
11. Lm vic vi bin v biu thc:
Thit lp biu thc:
C php: <bi> <to> <bi>
* Ton t:
= Thit lp gi tr bn phi cho bn tri
V d Mad=5
+= Cng tri v phi ,sau gn kt qu cho bn tri php ton
V d: cho x=10,y=5
x+=y => x=15
-= Tr bn tri cho bn phi ,gn kt qu li cho bn tri
Trang 90/108
x-=y => x=5
*= Nhn bn tri cho bn phi,gn kt qu cho bn tri
x*=y => x=50
/= Chia bn tri cho phi ,gn kt qu li cho bn tri
x/=y => x=2
%= Chia bn tri cho bn phi v ly s d gn li cho bn tri
x%=y => x=0
* Cc ton t khc:
V d:
x+=15+3
=> x=18
8+5
32.5 * 72.3
12 % 5
Du ++ v du - - v du V d:
x=5;
y=++x; (=> y=6 v x tng ln 6)
z=x++; (=> z=6 v sau x gn cho z)
sau x tng 1 => x=7
Do ta c kt qu cui cng l:
x=7;y=6;z=6;
V d: x=5;
x=-x => x=-5
Php ton Logic
&& : v
||: hoc
! not
V d:
x=5 ,y=2 ,c=3
(x>y) && (x>c)
false && anything is always false
(x>y) || (c<x> true
!x
Ton t so snh trong javascript:
==
!=
>
<
>=
<V> true
3<1>false
5 >=4 =>true
the != he => true
4==4 =>true
Ton t iu kin:
Trang 91/108
C php:
(iu kin ) ? gi tr 1 : gi tr 2
Nu iu kin ng th tr v gi tr 1
Nu iu kin sai th tr v gi tr 2
V d:
(day=Saturday) ? Weekend : Not Saturday
Ton t chui:
Welcome to + Netscape Navigator
V d:
Var welcome=Welcome to
Welcome += Netscape Navigator
! welcome= Welcome to Netsacpe Navigator
V d : S dng ton t iu kin kim tra ng vo
<HTML>
<HEAD>
<TITLE>Example 3.3</TITLE>
<script>
var question="What is 10+10 ?";
var answer=20;
var correct='';
var incorrect='';
var response=prompt(question,"0");
var output = (response==answer) ?
correct:incorrect;
</SCRIPT>
</HEAD>
<BODY>
<script>
<document>
</SCRIPT>
</BODY>
</HTML>
12. Cu trc iu kin if else
if iu kin
lnh ;
if iu kin {
M JavaScript
}
V d:
if (day==Saturday) {
document.writeln(Its the weekend);
alert( Its the weekend);
}
V d:
If (day==Saturday) {
Trang 92/108
document.writeln(Its the weekend);
}
If (day!=Saturday) {
document.writeln(Its not Saturday);
}
S dng cu trc else if cho v d trn
If (day==Saturday) {
document.writeln(Its the weekend);
}
else {
document.writeln(Its not Saturday);
}
Cu trc kt hp :
if iu kin 1 {
Cc lnh JavaScript
if iu kin 2 {
Cc lnh JavaScript
} else {
cc lnh khc
}
Cc lnh JavaScript
} else {
Cc lnh khc
}
V d 1 : S dng phng php confirm() vi pht biu if
<HTML>
<HEAD>
<TITLE>Example 3.3</TITLE>
<script>
var question="What is 10+10 ?";
var answer=20;
var correct='';
var incorrect='';
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>
Trang 93/108
<document>
</SCRIPT>
</BODY>
</HTML>
V d 2 : S dng phng php confirm() vi pht biu if - else
<HTML>
<HEAD>
<TITLE>Example 3.3</TITLE>
<script>
var question="What is 10+10 ?";
var answer=20;
var correct='';
var incorrect='';
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>
<document>
</SCRIPT>
</BODY>
</HTML>
------------------Kent(HCE)
Trang 94/108
Trong k thut lp trnh cc lp trnh vin thng s dng hm thc
hin mt on chng
trnh th hin cho mt module no thc hin mt cng vic no
.
Trong Javascript c cc hm c xy dng sn gip bn thc hin
mt chc nng no v
d nh hm alert(), document.write(), parseInt() v bn cng c th
nh ngha ra cc hm khc
ca mnh thc hin mt cng vic no ca bn, nh ngha
hm bn theo c php sau:
function function_name(parameters, arguments)
{
command block
}
Truyn tham s:
function printName(name) {
document.write(<HR>Your Name is );
document.write(name);
document.write(<HR>);
}
V d:
Gi hm printName()vi lnh sau printName(Bob);
Khi hm printName()c thi hnh gi tr ca name l "Bob" nu gi
hm
printName()vi i s l mt bin
var user = John;
printName(user);
Khi name l John. Nu bn mun thay i gi tr ca name bn c
th lm nh sau : name
= Mr. + name;
Phm vi ca bin:
Bin ton cc (Global variable)
Bin cc b (Local variable)
Tr v cc gi tr:
V d:
Dng return tr v gi tr ca bin cube.
MTWRFSS
function cube(number) {
var cube = number * number * number;
return cube;
}
JAVASCRIPT MEDIASPACE CLUB (HTD) PAGE: 11
V d:
MTWRFSS
<HTML>
<HEAD>
Trang 95/108
<TITLE>Example 4.1</TITLE>
<script>
<!-- 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=;
var incorrect=;
//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>
<HIDE>
</SCRIPT>
</BODY>
</HTML>
Hm eval dng chuyn i gi tr chui s thnh gi tr s
eval(10*10)tr v gi tr l 100
Hm gi li hm:
V d:
<HTML>
<HEAD>
<TITLE>Example 4.2</TITLE>
<script>
<!-- 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=;
var incorrect=;
Trang 96/108
//ASK THE QUESTION
var response=prompt(output,0");
//CHECK THE RESULT
return (response == answer) ? correct
: testQuestion(question);
}
// STOP HIDING FROM OTHER BROWSERS ->
</SCRIPT>
</HEAD<
<BODY>
<script>
<HIDE>
</SCRIPT>
</BODY>
</HTML>
V d 2:
<HTML>
<HEAD>
<TITLE>Example 4.2</TITLE>
<script>
<!-- HIDE FROM OTHER BROWSERS
//DEFINE FUNCTION testQuestion()
function
testQuestion(question,chances) {
//DEFINE LOCAL VARIABLES FOR THE
FUNCTION
var answer=eval(question);
var output=What is + question +
?;
var correct=;
JAVASCRIPT MEDIASPACE CLUB (HTD) PAGE: 12
var incorrect=;
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 --
Trang 97/108
>
</SCRIPT>
</HEAD>
<BODY>
<script>
<HIDE>
</SCRIPT>
</BODY>
</HTML>
------------------Kent(HCE)
JAVASCRIPT Ton tp (bi 4)
Bi 4: TO I TNG TRONG JAVASCRIPT
1. nh ngha thuc tnh ca i tng:
function student(name,age, grade) {
this.name = name;
this.age = age;
this.grade = grade;
}
to mt Object ta s dng pht biu new.V d to i tng
student1
student1 = new student(Bob,10,75);
3 thuc tnh ca i tng student1 l :
student1.name
student1.age
student1.grade
V d to i tng student2
student2 = new student(Jane,9,82);
thm thuc tnh cho student1 bn c th lm nh sau:
student1.mother = Susan; hoc bn c th nh ngha li hm
student
MTWRFSS 4
function student(name, age, grade, mother) {
this.name = name;
this.age = age;
this.grade = grade;
this.mother = mother;
}
JAVASCRIPT MEDIASPACE CLUB (HTD) PAGE: 13
i tng l thuc tnh ca i tng khc
V d:
function grade (math, english, science) {
Trang 98/108
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:dng ly im Ton ca student1
student2.grade.science: dng ly im mn Khoa hc ca student2
2. Thm phng php cho i tng:
function displayProfile() {
document.write(Name: + this.name + <BR>);
document.write(Age: + this.age + <BR>);
document.write(Mothers 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>
<!-- HIDE FROM OTHER BROWSERS
//DEFINE METHOD
function displayInfo() {
document.write(<H1>Employee Profile:
+ this.name + </H1><HR>
);
document.writeln(Employee Number:
+ this.number);
Trang 99/108
Trang 100/108
<script>
<Begin> 12) ? myhours 12 : myhours;
ampm = (myhours >= 12) ? 'Bu i Chi u '
: ' Bu i S ng ';
mytime = mydate.getMinutes();
myminutes = ((mytime <10>
</script>
Trong phn body bn c th xut ra dng nh sau:
<body>
<script>
document.write("<font>" + ampmhour + "" + myminutes + ampm)
document.write(" - " + day + " ng y " + myweekday +" ");
document.write( month + " , n m " + year + "</font>");
</script>
</body>
------------------Kent(HCE)
JAVASCRIPT Ton tp (bi 5)
Bi 5: S KIN TRONG JAVASCRIPT
Cc s kin cung cp cc tng tc vi ca s trnh duyt v ti liu
hin hnh ang c load
trong trang web, cc hnh ng ca user khi nhp d liu vo form v
khi click vo cc button
trong form.
Khi s dng b qun l s kin bn c th vit cc hm biu din
cho cc hnh ng da vo
cc s kin oc chn
Bng s kin trong Javascript
JAVASCRIPT MEDIASPACE CLUB (HTD) PAGE: 16
Tn s kin M t
blur Xy ra khi im tp trungca ng vo c di chuyn ra
khi mt thnh phn ca Form (Khi user click ra ngoi mt
trng)
click Khi user Click vo 1 link hoc thnh phn ca Form.
change Xy ra khi gi tr ca Form Field b thay i bi user.
focus Xy ra khi ng vo tp trung vo thnh phn ca Form
load Xy ra khi mt trang c Load vo trong b duyt.
mouseover Xy ra khi User di chuyn mouse qua mt Hyperlink.
select Xy ra khi User chn 1 trng ca thnh phn Form.
submit Xy ra khi User xc nhn nhp xong d liu.
Trang 101/108
unload Xy ra khi User ri khi trang Web.
B qun l s kin (Event Handler)
qun l cc s kin trong javascript ta dng cc b qun l s kin.
C php ca mt b qun l s kin:
<HTML_TAG>
V d:
<INPUT>
V d:
<INPUT TYPE=text onChange=
if (parseInt(this.value) <5>
V d:
<INPUT>
T kha this: quy cho i tng hin hnh.Trong Javascript Form l m
i tng.Cc thnh
phn ca Form bao gm text fields, checkboxes, radio buttons,
buttons, v selection lists.
V d:
<INPUT>
Cc b qun l s kin trong Javascript
i tng B qun l s kin tng ng.
JAVASCRIPT MEDIASPACE CLUB (HTD) PAGE: 17
Selection list onBlur, onChange, onFocus
Text element onBlur, onChange, onFocus, onSelect
Textarea element onBlur, onChange, onFocus, onSelect
Button element OnClick
Checkbox onClick
Radio button OnClick
Hypertext link onClick, onMouseOver
Reset button OnClick
Submit button OnClick
Document onLoad, onUnload
Window onLoad, onUnload
Form onSubmit
5
Cch dng b qun l s kin onLoad & onUnload
<HTML>
<HEAD>
<TITLE>Example 5.1</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
MTWRFSS
Vi du:
<HTML>
Trang 102/108
<HEAD>
<TITLE>Example 5.1</TITLE>
<script>
<HIDE>
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
Vi du
MTWRFSS
<HTML>
<HEAD>
JAVASCRIPT MEDIASPACE CLUB (HTD) PAGE: 18
<TITLE>Example 5.1</TITLE>
<script>
<HIDE>
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
Cc s kin v Form
Cac s kin c s dng truy xut Form nh:
OnClick, onSubmit, onFocus, onBlur, v onChange.
V d:
<INPUT>
Khi gi tr thay i function check() s c gi. Ta dng t kha this
chuyn i tng ca
trng hin hnh n hm check()
Bn cng c th da vo cc phng php v cc thuc tnh ca i
tng bng pht biu sau:
this.methodName() & this.propertyName.
V d:
<HTML>
<HEAD>
<TITLE>Example 5.3</TITLE>
<script>
<HIDE>
</SCRIPT>
</HEAD>
<BODY>
<FORM>
Enter a JavaScript mathematical
Trang 103/108
expression:
<INPUT>
<BR>
JAVASCRIPT MEDIASPACE CLUB (HTD) PAGE: 19
The result of this expression is:
<INPUT>
</FORM>
</BODY>
</HTML>
MTWRFSS
formObjectName.fieldnameng ch tn trng ca hin hnh trong
Form.
formObjectName.fieldname.value: dng ly gi tr ca trng form
hin hnh.
S dng vng lp trong JavaScript
1 . Vng lp for :
C php :
for ( init value ; condition ; update expression )
V d :
for (i = 0 ; i < 5 ; i++)
{
lnh ;
}
V d:
<HTML>
<HEAD>
<TITLE> for loop Examle </TITLE>
</HEAD>
<BODY>
<script>
<!- var name=prompt("What is your name?" ,"name");
var query= " " ;
document.write("<H1>" + name + " 's 10 favorite foods </H1> ");
for (var i=1 ;i<10>
</SCRIPT>
</BODY>
</HTML>
2 . Vng lp while :
C php:
While ( iu kin)
{
lnh JavaScript ;
}
V d:
var num=1;
Trang 104/108
while(num<=10)
{
document.writeln(num);
num++;
}
V d:
var answer= ;
var correc=100;
var question= what is 10*10 ? ;
while(answer!=correct)
{
answer=prompt(question,0);
}
3. To mng vi vng lp for:
function createArray(num)
{
this.length=num;
for ( var j=0 ; j<num; j++)
this[j]=0;
}
Hm s to mt mng c gi tr index bt u l 0 v gn tt c cc
gi tr ca mng v 0 .
s dng i tng mng ta c th lm nh sau:
newArray= new createArray(4)
S to ra mt mng gm 4 thnh phn newArray[0] NewArray[3]
JAVASCRIPT MEDIASPACE CLUB (HTD) PAGE: 21
S dng i tng Windows
Window l i tng ca mi trng Navigator,ngoi cc thuc tnh
Window i tng window
cn gi cc i tng khc m c th c xem nh l cc thnh phn
(member) ca window,
cc i tng l:
Cc frame c to
Cc i tng location v histtory
i tng document
i tng document cha (encompasses) tt c cc thnh phn trong
trang HTML.y l mt i
tng hon ho c cc i tng khc ca JavaScript gn (attached)
vo n (nh l
anchor,form,history,link).Hu nh mi chng trnh JavaScript u c
s dng i tng ny
tham kho n cc thnh phn trong trang HTML.
1) Cc thuc tnh (properties) ca i tng document
a . alink
b . anchor
c . bgColor
Trang 105/108
d . cookies
e . fgColor
f . form
g . lastModified
h . linkColor
i . links
j . location
k . referrer
l . title
m . vlinkColor
2) Cc hnh vi (Methods) ca i tng document
a . clear()
b . close()
c . open()
d . write()
e . writeln()
3) Cc thuc tnh ca i tng Window
a . defaultStatus : Gi tr mt nhin c hin th thanh trng thi
b . frames : Mng cc i tng cha ng mt mc cho mi frame con
trong mt frame ti liu
c . parent : c s dng trong FRAMSET
d . self : Ca s hin hnh , dng phn bit gia cc ca s hin
hnh v cc forms c cng
tn .
e . status : Gi tr ca chui vn bn c hin th ti thanh status
bar.Dng hin thi cc thng
bo cho ngi s dng .
f . top : nh cao nht ca ca s cha
JAVASCRIPT MEDIASPACE CLUB (HTD) PAGE: 22
g . window
4) Cc hnh vi (Methods) ca i tng window
a . alert() : Hin 1 thng bo trong hp thoi vi OK button.
b . close() : ng ca s hin hnh.
c . open() : M mt ca s mi vi 1 ti liu c ch ra hoc m mt
ti liu trong mt tn ca
s c ch nh.
d . prompt() : Hin mt hp thng bo
e . setTimeout() :
f . clearTimeout() :
Hnh vi ny cung cp cch gi pht biu JavaScript sau mt khong
thi gian tri qua .Ngoi
ra i tng window c th thc hin event handler :
onLoad=statement
Lm vic vi status bar
Khi user di chuyn qua mt hyperlink ta c th hin ra mt thng bo
ti thanh status bar ca
Trang 106/108
bowser da vo event handler onMouseOver v bng cch t
self.status l mt chui (hoc
window.status).
V d:
<HTML>
<HEAD>
<TITLE>Status Example</TITLE>
<BODY>
<A>Lop chuyen d PLC </A>
<A>Thiet Ke Web</A>
</BODY>
</HTML>
M v ng cc ca s
S dng phng php open() v close() ta c th iu khin vic m v
ng ca s cha ti
liu.
open (URL , WindowName , featureList) ;
Cc c im trong phng php open() gm c:
toolbar : to mt toolbar chun
location: to mt vng location
directories: to cc button th mc chun
status: to thanh trng thi.
menubar : to thanh menu ti nh ca ca s
scrollbars: to thanh scroll bar
resizable: cho php user thay i kch thc ca s
width : ch nh chiu rng ca s theo n v pixel
height : ch nh chiu cao ca s theo n v pixel
V d:
window.open( plc.htm,newWindow,toolbar=yes,locat
ion=1,directories=yes,status=yes,
JAVASCRIPT MEDIASPACE CLUB (HTD) PAGE: 23
menubar=1,scroolbar=yes,resizable=0,copyhistory=1,
width=200,height=200);
V d:
<HTML>
<HEAD>
<TITLE>WINDOWS</TITLE>
<script>
<function>
</SCRIPT>
</HEAD>
<BODY>
<a>PLC</a>,
<a>Sua chua</a>,
<a>Thiet ke web</a>
</BODY>
Trang 107/108
</HTML>
ng ca s ta c th dng phng php close()
V d:
<HTML>
<HEAD>
<TITLE>Close Example</TITLE>
</HEAD>
<BODY>
<A></A>
<A>Close This Sample</A>
</BODY>
</HTML>
S dng i tng string
String l mt i tng ca JavaScript,khi dng i tng string chng
ta khng cn cc pht
biu to mt instance (th nghim) ca i tng ,bt k lc no ta
t text gia hai du
ngoc kp v gn n n mt bin hoc mt thuc tnh th ta to
mt i tng string.
1. Cc thuc tnh ca i tng string
Thuc tnh length gi s k t ca string.
2. Cc hnh vi (Methods) ca i tng string
a . Anchor (nameAttribute)
b . big()
c . blink()
d . bold()
e . charAt(index)
f . fixed()
g . fontcolor(color)
JAVASCRIPT MEDIASPACE CLUB (HTD) PAGE: 24
h . fontsize(size)
i . indexOf(character,[fromIndex])
j . italics()
k . lastIndexOf(character,[fromIndex])
l . link(URL)
m . small()
n . strike()
o . sub()
p . substring(startIndex,endIndex)
q . sup()
r . toLowerCase()
s . toUpperCase()
Su Tm
Trang 108/108
------------------Kent(HCE)