Tuhocjs

T hc Javascript Writer: TungTung (tlqtung34@student.ctu.edu.
vn)
http://gkiss.net Trang 1
LI NI U

Cho cc bn, y l ln u tin mnh vit mt chuyn v mt ngn ng lp
trnh. Do khng th khng tn ti mt s sai st mong c s p gp nhit tnh
ca cc bn.
Theo xu hng hin nay, web l mt ng dng ngy cng c nhiu ngi s
dng cng vi s pht trin khng ngng ca internet. pht trin c mt website
nng ng v ni dung ln hnh thc th u trc ht chng ta phi nm c mt s
vn c bn v nhng ngn ng cng nh cc cng c gip chng ta c th cho ra i
nhng trang web hon ho.
J avascript l mt ngn ng lp trnh tng i nh, n gin nhng n li l cnh
tay c lc ca coder cng nh designer. Sau y l ni dung quyn sch, mi gp xin
gi v tungtung@gkiss.net hoc tlqtung34@student.ctu.edu.vn. Y!M: trantung8111

Chc cc bn lun thnh cng v hc tt.
T hc Javascript Writer: TungTung (tlqtung34@student.ctu.edu.vn)
MC LC

Trang
CHNG 1: LM QUEN VI JAVASCRIPT 4
1.1 JAVASCRIPT L G?...................................................................................................4
1.2 JAVASCRIPT C TH LM G?.................................................................................4
1.3 S DUNG JAVASCRIPT NH TH NO?.................................................................4
1.4 JAVASCRIPT THC THI LNH KHI NO?...............................................................5
1.5 V TR JAVASCRIPT TRONG TRANG HTML?..........................................................6
1.6 HIN TH D LIU BNG JAVASCRIPT LN TRNH DUYT...............................7
1.7 GHI CH TRONG JAVASCRIPT.................................................................................7
CHNG 2: BIN TRONG JAVASCRIPT 8
2.1 KHAI BO BIN..........................................................................................................8
2.2 CC QUI TC V BIN..............................................................................................8
CHNG 3: CC TON T 9
3.1 H THNG PHP TNH TRONG JAVASCRIPT.........................................................9
3.2 TON T GN TRONG JAVASCRIPT.......................................................................9
3.3 NI CC CHUI K T...........................................................................................10
3.4 PHP CNG TRONG CHUI V S........................................................................10
3.5 TON T SO SNH...................................................................................................10
3.6 TON T LOGIC.......................................................................................................11
3.7 TON T IU KIN................................................................................................11
CHNG 4: CC PHT BIU 12
4.1 CU LNH IF ELSE...............................................................................................12
4.2 CU LNH SWITCHCASE....................................................................................13
4.3 VNG LP FOR.........................................................................................................14
4.4 VNG LP WHILE ....................................................................................................15
4.5 VNG LP DOWHILE...........................................................................................15
4.6 VNG LP FORIN.................................................................................................16
4.7 CU LNH BREAK VA CONTINUE ........................................................................16
CHNG 5: CA S THNG BO 17
5.1 HP THOI CNH BO...........................................................................................17
5.2 HP THOI XC NHN...........................................................................................17
5.3 HP THOI NHP LIU...........................................................................................18
CHNG 6: HM (FUNCTION) TRONG JAVASCRIPT 19
6.1 HM KHNG THAM S...........................................................................................19
6.2 HM C THAM S ...................................................................................................20
6.3 HM C TR V GI TR SAU KHI THC HIN LNH......................................20
6.4 GI HM TRONG MT HM KHC.......................................................................20
CHNG 7: S KIN TRONG JAVASCRIPT 21
7.1 S KIN L G ?........................................................................................................21
7.2 S KIN VI FORM..................................................................................................22
7.3 S KIN VI HNH NH..........................................................................................22
7.4 S KIN VI IMAGE MAP.......................................................................................22
7.5 S KIN VI LINK....................................................................................................22
7.6 S KIN VI WINDOW............................................................................................22
CHNG 8: MNG TRONG JAVASCRIPT 22
8.1 MNG C BN..........................................................................................................22
8.2 NI MNG (CONCAT) ..............................................................................................23
8.3 NI CC PHN T TRONG MNG (JOIN).............................................................23
8.4 XA MT PHN T CUI MNG (POP)............................................................24
8.5 THM MT PHN T VO CUI MNG (PUSH) .................................................24
8.6 O NGC MT MNG (REVERSE)...................................................................24
8.7 LOI B MT PHN T U MNG (SHIFT) ..................................................24
8.8 TO MNG MI T MT MNG C SN (SLICE) ..............................................24
8.9 SP XP MNG (SORT)............................................................................................25
8.10 THM V XA CC PHN T CA MNG (SPLICE) .......................................25
8.11 CHUYN MT MNG THNH CHUI (TOSTRING)...........................................25
8.12 THEM PHN T VO U MNG (UNSHIFT) ...................................................25
CHNG 9: I TNG MATH V THIT LP THI GIAN CHY 26
9.1 I TNG MATH...................................................................................................26
9.2 THIT LP THI GIAN CHY.................................................................................27

CHNG 1: LM QUEN VI JAVASCRIPT
1.1 JAVASCRIPT L G?
JavaScript c thit k to ra cc tng tc vo cc trang HTML
JavaScript l mt ngn ng kch bn (scripting language)
Mt ngn ng kch bn l mt ngn ng lp trnh nh
JavaScript thng c nhng trc tip vo cc trang HTML
JavaScript l mt ngn ng thng dch ngha l script thc hin m khng cn s bin dch
JavaScript th hon ton min ph
1.2 JAVASCRIPT C TH LM G?
- JavaScript cung cp cho nhng designer mt cng c lp trnh v HTML l khng phi l mt ngn
ng lp, nhng JavaScript l mt ngn ng lp trnh vi c php rt n gin. Hu ht mi ngi c
th nhng cc on m JavaScript vo nhng trang HTML lm cho n tr nn sinh ng hn.
- JS c th a vo trang HTML mt on vn bn mi m trc ni dung ca trang web ny
cha h c.
- JS c th phn ng li vi mt s kin no nh ngi s dng nhn chut ln mt phn t ca
trang HTML hoc thay i mt gi tr no trong nhp liu
- JS c th c hoc thay i ni dung ca cc phn t trong trang HTML.
- JS c th dng kim tra d liu trc khi trnh duyt gi d liu n my ch. iu ny gip
cho my ch khng phi x l qu nhiu.
- JS c th dng pht hin cc loi trnh duyt khc nhau c th ti nhng phn thit k ph
hp vi trnh duyt
- JS c th dng s dng to cc tp tin cookie lu tr v truy xut thng tin trn my tnh ca
ngi truy cp website.
1.3 S DUNG JAVASCRIPT NH TH NO?
s dng JS rt n gin, chng ta ch cn a cc cu lnh ca JS vo trong th <script> ca
HTML

V d: Xut ra trnh duyt cu Hello World
<ht ml >
<body>
<scr i pt t ype="t ext / j avascr i pt ">
document . wr i t e( "Hel l o Wor l d! ") ;
</ scr i pt >
</ body>
</ ht ml >
Chng ta cng c th thm th ca HTML vo JS
<ht ml >
<body>
document . wr i t e( "<h1>Hel l o Wor l d! </ h1>") ;
</ scr i pt >
</ body>
</ ht ml >
trnh trng hp mt s trnh duyt khng h tr JS v c th gy ra li khi website ca chng ta
c s dng JS, chng ta thm mt on sau ghi ch ca HTML cho ni dung ca JS
<ht ml >
<body>
<! - -
document . wr i t e( "Hel l o Wor l d! ") ;
/ / - - >
</ scr i pt >
</ body>
</ ht ml >
1.4 JAVASCRIPT THC THI LNH KHI NO?
JS trong mt trang web thc thi theo 2 cch sau:
TH1: Thc hin lnh ngay khi trang web c ti v trnh duyt ca ngi s dng.
TH2: Thc hin lnh khi nhn c mt tc ng no nh nhn nt, di chuyn chut hoc a
chut ln mt phn t no ca HTML
V d: TH1
<ht ml >
<head>
f unct i on message( )
{
al er t ( "Thi s al er t box was cal l ed wi t h t he onl oad event ") ;
}
</ scr i pt >
</ head>

<body onl oad="message( ) ">
</ body>
</ ht ml >
V d: TH1
<ht ml >
<head>
</ head>

<body>
document . wr i t e( "Thi s message i s wr i t t en by J avaScr i pt ") ;
</ scr i pt >
</ body>

</ ht ml >
V d: TH2
<ht ml >
<head>
{
}
</ scr i pt >
</ head>

<body >
<a hr ef ="#" oncl i ck="message( ) ">Cl i ck Her e</ a>
</ body>
</ ht ml >
1.5 V TR JAVASCRIPT TRONG TRANG HTML?
t trong cp th <head> ca trang web
<ht ml >
<head>
{
}
</ scr i pt >
</ head>

<body onl oad="message( ) ">
</ body>
</ ht ml >
t trong cp th <body> ca trang web
<ht ml >
<head>
</ head>

<body>
document . wr i t e( "Thi s message i s wr i t t en by J avaScr i pt ") ;
</ scr i pt >
</ body>

</ ht ml >
t trong tp tin .js sau nhng tp tin ny vo website. To tp tin alert.js c ni dung sau:
/ / J avaScr i pt Document
{
}
Sau to mt tp tin HMTL nhng tp tin .js trn vo
<ht ml >
<head>
<scr i pt t ype="t ext / j avascr i pt " sr c="al er t . j s"></ scr i pt >
</ head>
<body >
<a hr ef ="#" onCl i ck="message( ) ">Cl i ck Her e</ a>
</ body>
</ ht ml >

1.6 HIN TH D LIU BNG JAVASCRIPT LN TRNH DUYT
in ra mt gi tr no bng JS ra trnh duyt chng ta ch dng cu lnh n gin sau

C php
document.write("<gi tr cn in>");
V d:
document . wr i t e( "<h1>Thi s i s a headi ng</ h1>") ;
document . wr i t e( "Thi s i s a par agr aph. ") ;
document . wr i t e( "Thi s i s anot her par agr aph. ") ;
</ scr i pt >
Chng ta c th dng cu lnh ny in cc gi tr c th chui, s, th HTML
1.7 GHI CH TRONG JAVASCRIPT
Khi chng ta lp trnh on m s khng n gin l mt vi dng m i khi c th ln n c ngn
dng lnh trn mt trang nn chng ta cn ghi ch cho cc dng lnh, on m lnh khi chng ta
hoc ngi khc c c th hiu c on m c ngha g

C 2 kiu ghi ch thng c s dng trong ngn ng lp trnh:

Dng ghi ch n bt u vi du //
V d:
/ / Wr i t e a headi ng
/ / Wr i t e t wo par agr aphs:
</ scr i pt >
Nhiu dng ghi ch bt u vi du /* v kt thc vi */
V d:
/ *
The code bel ow wi l l wr i t e
one headi ng and t wo par agr aphs
*/
</ scr i pt >
Ch : Chng ta c th dng 2 dng ghi ch ny ng tm thi cc dng lnh JS trong qu
trnh lp trnh

CHNG 2: BIN TRONG JAVASCRIPT
2.1 KHAI BO BIN
Bin c dng lu tr nhng thng tin trong qu trnh x l mt vn no . Nh chng ta
hc ti cc trng ph thng th:
x=5
y=6
z=x+y =5 +6 =11

Vi php ton trn th x, y, z l cc bin.
x dng lu tr gi tr 5
y dng lu tr gi tr 6
z dng lu tr tng gi tr ca 2 bin x v y

Vi JS cng vy bin dng lu tr mt gi tr no c th l mt chui, mt i tng, mt con
s, mt mng, mt php ton no ... khai bo mt bin trong JavaScript chng ta ch cn t
mt cu lnh var trc tn ca bin.
var <tn bin>;

Chng ta c th khai bo trc bin v khng cn a gi tr vo bin
V d:
var x;
var car name;
</ scr i pt
Chng ta cng c th va khai bo bin v va gn gi tr vo bin . Gi tr c gi l gi tr
mc nh

V d:
var x=5;
var car name="Vol vo";
</ scr i pt >
Bin c th l mt php ton no
V d:
var x=5;
y=x- 5;
z=y+5;
</ scr i pt

2.2 CC QUI TC V BIN
Tn bin phi bt u bng k t hoc du gch di ( _ ) v khng c khong trng.
V d:
var xToaDo =5;
var _t oaDo = 10;
</ scr i pt >
Tn bin phn bit ch hoa v ch thng ngha l ch x s khc vi ch X
V d:
var xToaDo = 5;
var XToaDo = 10;
</ scr i pt >
Cch t tn bin nn s dng trong lp trnh.
t tn bin c y ngha vi ni dung bin s cha.
Ch ci u tn trong cm t to tn bin nn l ch thng v cc ch ci u tin trong cc t cn
l ch hoa.
V d:
var t ongGi aTr i ;
var t oaDoX;
var t oaDoY;
</ scr i pt >

CHNG 3: CC TON T
Ton t l mt trong nhng phn khng th thiu trong bt k ngn ng lp trnh no. Nu chng
ta hiu r ton t th cc dng s l lnh ca chng ta s gn gn v d hiu hn.
Du bng (=): s dng gn mt gi tr.
Du cng (+): cng thm mt gi tr
3.1 H THNG PHP TNH TRONG JAVASCRIPT
Cho bin y = 5
Ton t Miu t V d Kt qu
+ Cng x=y+2 x=7
- Tr x=y-2 x=3
* Nhn x=y*2 x=10
/ chia x=y/2 x=2.5
% Ly gi tr l x=y%2 x=1
++ Tng x=++y x=6
-- Gim x=--y x=4

3.2 TON T GN TRONG JAVASCRIPT
Cho bin x=10 v y=5
Operator Example Same As Result
= x=y x=5
+= x+=y x=x+y x=15
-= x-=y x=x-y x=5
*= x*=y x=x*y x=50
/= x/=y x=x/y x=2
%= x%=y x=x%y x=0
3.3 NI CC CHUI K T
ni cc chui k t li vi nhau, JavaScript s dng du cng (+)
V d:
var t xt 1, t xt 2, t xt 3;
t xt 1="What a ver y";
t xt 2="ni ce day";
t xt 3=t xt 1+t xt 2;
document . wr i t e( t xt 3) ;
</ scr i pt >
V d:
var t xt 1, t xt 2, t xt 3;
t xt 1="What a ver y";
t xt 2="ni ce day";
t xt 3=t xt 1+" "+t xt 2;
document . wr i t e( t xt 3) ;
</ scr i pt >
3.4 PHP CNG TRONG CHUI V S
V d:

x=5+5;
document . wr i t e( x) ;

x="5"+"5";

x=5+"5";

x="5"+5;
</ scr i pt >

3.5 TON T SO SNH
V d chng ta c mt bin x c gi tr l 5. By gi chng th xem vi h thng ton t so snh trong
JavaScript nh th no.
Ton t M t V d
== So snh bng x==8 is false
=== So snh tuyt i x==="5" is false
x===5 is true
!= Khng bng x!=8 is true
> Ln hn x>8 is false
< Nh hn x<8 is true
>= Ln hn hoc bng x>=8 is false
<= Nh hn hoc bng x<=8 is true
S dng:
s dng chng ta kt hp cc ton t so snh vi cc cu iu kin if hoc if else
var age = 10;
i f ( age<18) document . wr i t e( "Too young") ;
</ scr i pt >

3.6 TON T LOGIC
Cho gi tr x=6 and y=3
Ton t M t V d
&& and (x <10 && y >1) is true
|| or (x==5 || y==5) is false
! not !(x==y) is true

3.7 TON T IU KIN
C php
var i abl ename=( condi t i on) ?val ue1: val ue2
V d:
gr eet i ng=( vi si t or =="PRES") ?"Dear Pr esi dent ": "Dear ";
</ scr i pt >
V d:
var t uoi = 5;
var ket qua;

/ *i f ( t uoi > 5) {
document . wr i t e( "vao cap 1") ;
}el se{
document . wr i t e( "khong duoc vao cap 1") ;
}*/

/ / var i abl ename=( condi t i on) ?val ue1: val ue2

ket qua = ( t uoi > 5) ? "vao cap 1" : "khong duoc vao cap 1";
document . wr i t e( ket qua) ;

CHNG 4: CC PHT BIU
4.1 CU LNH IF ELSE
Cu iu kin thng c s dng thc hin cc hnh ng khc nhau vi nhng iu kin khc
nhau.

Cu iu kin l cu lnh m chng ta thng xuyn s dng khi vit m cho bng bt k ngn ng
no. thc hin nhng hnh ng khc nhau trong nhng iu kin khc nhau.

V d: nu bn 22 im bn s c vo i Hc, nu bn c im di 22 bn s hc h Cao
ng.

Trong JavaScript chng ta c nhng kiu cu iu kin IF sau:
a. Cu lnh IF
S dng cu lnh ny thc hin mt s m lnh nu ng iu kin nh ra.
V d:
var di emHocVi en_A = 5. 0;
var di emHocVi en_B = 4. 5;
var di emHocVi en_C = 6. 5;

i f ( di emHocVi en_A >= 5) {
document . wr i t e( "Bn c ln l p");
}

i f ( di emHocVi en_B >= 5) {
}

i f ( di emHocVi en_C >= 5) {
}
</ scr i pt >
b. Cu lnh IFELSE
S dng cu lnh iu kin ny thc hin mt s m lnh nu ng iu kin nh v nu khng
ng iu kin nh th thc hin mt s m lnh khc
V d:
var di emHocVi en_B = 4. 5;
var di emHocVi en_C = 6. 5;

i f ( di emHocVi en_A >= 5) {
}el se{
document . wr i t e( "Bn phi thi li");
}

i f ( di emHocVi en_B >= 5) {
}el se{
document . wr i t e( "Bn phi thi li");
}

</ scr i pt >
c. Cu lnh IF ELSE IF ELSE
S dng cu lnh iu kin ny trong trng hp c nhiu iu kin t ra v khi tha mi iu kin
s thc hin mt s m lnh khc nhau.
V d:

i f ( di emHocVi en_A < 3. 5) {
document . wr i t e( "Hc lc loi KM");
}el se i f ( di emHocVi en_A < 5) {
document . wr i t e( "Hc lc loi YU");
}el se i f ( di emHocVi en_A < 6. 5) {
document . wr i t e( "Hc lc loi TRUNG B NH") ;
}el se i f ( di emHocVi en_A < 8) {
document . wr i t e( "Hc lc loi KH");
}el se{
document . wr i t e( "Hc lc loi GII");
}

</ scr i pt >

4.2 CU LNH SWITCHCASE
Cu iu kin Switch thng c s dng thc hin cc hnh ng khc nhau vi nhng iu kin
khc nhau.

Cu iu kin ny gn ging nh cu iu kin IF ELSE nhng c mt im c bit l trong cu
iu kin Switch c mt iu kin mc nh ngha l khi gi tr a vo khng tha mt iu kin no
th n s ly cc cu lnh trong phn iu kin mc nh thc hin.
C php:
swi t ch( n)
{
case 1:
execut e code bl ock 1
br eak;
case 2:
execut e code bl ock 2
br eak;
def aul t :
code t o be execut ed i f n i s di f f er ent f r omcase 1 and 2
}
V d:
var t uoi HocVi en = 8;

swi t ch( t uoi HocVi en)
{
case 6:
document . wr i t e( "Bn s hc lp 1");
br eak;
case 7:
br eak;
case 8:
br eak;
def aul t :
document . wr i t e( "Xi n vui l ng nhp tui chng ti xp lp cho
bn");
}

</ scr i pt >

4.3 VNG LP FOR
C php:
f or ( st ar t Val ue; endVal ue; var I ncr ement )
{
/ / Code goes her e
}

startValue: gi tr bt u
endValue: gi tr cui cng
varIncrement: gi tr tng ca vng lp

V d: In ra gi tr t 1 n 20
var i ;
f or ( i =1; i <=20; i ++)
{
document . wr i t e( "The number i s " + i ) ;
document . wr i t e( " ") ;
}
</ scr i pt >

V d: In ra cc tr chn t 1 n 20
var i ;
f or ( i =2; i <=20; i +=2)
{
}
</ scr i pt >

V d 3: In ra cc gi tr l t 1-20
var i ;
f or ( i =1; i <=20; i +=2)
{
}
</ scr i pt >

V d 4: In ra cc gi tr t 20 1
var i ;
f or ( i =20; i >=1; i - - )
{
}
</ scr i pt >
4.4 VNG LP WHILE
Vng lp while thc hin mt khi lnh khi iu kin tha v dng li ngay khi iu kin khng tha

C php:
whi l e ( var <=endval ue)
{
code t o be execut ed
}

V d:
var i =0;
whi l e ( i <=5)
{
i ++;
}
</ scr i pt >
4.5 VNG LP DOWHILE
Vng lp ny s thc hin khi lnh mt ln sau , ri sau kim tra iu kin nu ng s thc
hin li khi lnh mt ln na

C php:
do
{
}
whi l e ( var <=endval ue) ;

V d:
<ht ml >
<body>
var i =0;
do
{
i ++;
}
whi l e ( i <=5) ;
</ scr i pt >
</ body>
</ ht ml >
4.6 VNG LP FORIN
Vng lp ny thng dng duyn qua mt mng d liu hoc thuc tnh ca mt i tng

C Php:
f or ( var i abl e i n obj ect )
{
}

V d:
<ht ml >
<body>

var x;
var mycar s = new Ar r ay( ) ;
mycar s[ 0] = "Saab";
mycar s[ 1] = "Vol vo";
mycar s[ 2] = "BMW";

f or ( x i n mycar s)
{
document . wr i t e( mycar s[ x] + " ") ;
}
</ scr i pt >

</ body>
</ ht ml >
4.7 CU LNH BREAK VA CONTINUE
4.7.1 Break
Cu lnh ny c chc nng thot khi mt vng lnh nu tha mt iu kin no
<ht ml >
<body>
var i =0;
f or ( i =0; i <=10; i ++)
{
i f ( i ==3)
{
br eak;
}
}
</ scr i pt >
</ body>
</ ht ml >
4.7.2 Continue
Cu lnh ny c chc nng thc hin mt iu g nu tha mt iu kin.
<ht ml >
<body>
var i =0
f or ( i =0; i <=10; i ++)
{
i f ( i ==3)
{
cont i nue;
}
}
</ scr i pt >
</ body>
</ ht ml >
CHNG 5: CA S THNG BO
JavaScript c 3 kiu hin th hp thoi thng bo: Alert box(Cnh bo), Confirm box(xc
nhn), Prompt box(gi ).
5.1 HP THOI CNH BO
L loi hp thoi cnh bo thng c s dng bo cho ngi s dng c chc chn mun thc
hin thao tc h ng thc hin hay khng. Khi hp thng bo hin ln, nu ngi dng nhn nt OK
th qu trnh thc hin thao tc mi c tin hnh.

C php:
alert("sometext");

V d:
<ht ml >
<head>
<met a ht t p- equi v="Cont ent - Type" cont ent ="t ext / ht ml ; char set =ut f - 8" / >
<t i t l e>J avaScr i pt t r ai ni ng </ t i t l e>
f unct i on show_al er t ( )
{
alert("y l hp thoi hin th cnh bo!");
}
</ scr i pt >
</ head>
<body>

</ body>
</ ht ml >
5.2 HP THOI XC NHN
L mt hp thoi thng c s dng yu cu ngi s dng xc nhn c thc hin mt hnh
ng no hay khng. Hp thoi ny c 2 nt nhn "OK" v "Cancel". Nu ngi s dng nhn vo
nt "OK" hnh ng s c thc hin v ngc li nu ngi
s dng nhn vo nt "Cancel" hnh ng s b hy b.

Khi nhn vo nt OK chng ta s nhn c mt gi tr ca hp thoi gi v l true v ngc li l
false

C php:
confirm("sometext");

V d:
<ht ml >
<head>
f unct i on show_comf i r m( )
{
var comf i r mBox;
comf i r mBox = conf i r m( "H thng tn l a c kch hot.\ n Bn c
mun phng tn l u i khng?");

i f ( comf i r mBox == t r ue) {
document . wr i t e( "Tn l a c phng");
}el se{
document . wr i t e( "Qu t r nh phng t n l a c hy");
}

}
</ scr i pt >
</ head>
<body>

</ body>
</ ht ml >
5.3 HP THOI NHP LIU
L kiu hp thoi dng nhc ngi s dng nhp mt gi tr no sau thc hin mt hnh
ng nu c nhn nt OK. Trong hp thoi ny cng c 2 nt "OK" v "Cancel" ging nh hp
thoi Confirm. Khi nhn vo nt OK chng ta s nhn c gi tr trong nhp liu ca hp thoi
Confirm

C php:
prompt(text,value);
text: l thng tin hin th trn hp thoi
value: l gi tr mc nh hin th trong nhp liu ca hp thoi.

V d:
<ht ml >
<head>
f unct i on show_pr ompt ( )
{
var name;
name = pr ompt ( "Tn ca bn l g ?", "Xi n vui l ng nhp tn bn vo
y");

i f ( name ! = "" && name ! = nul l ) {
document . wr i t e( "Xi n cho " + name) ;
}

}
</ scr i pt >
</ head>
<body>

</ body>
</ ht ml >
CHNG 6: HM (FUNCTION) TRONG JAVASCRIPT
6.1 FUNCTION LA G ?
Function l mt chc nng m thng thng chng ta gi lm hm. Trong JavaScript hm thng
c gi thng qua mt s kin hoc hm no .

trnh duyt kt hp vi JavaScript mt cch linh ng chng ta c th a cc on m JavaScript
m mt hm v khi cn dng n chc nng m hm cung cp chng ta ch cn gi hm ra s dng.

Khi s dng hm chng ta c nhiu li ch nh khng phi vit li cc on m ging nhau, c th gi
hm bt k ni u trn trang HTML m chng ta mun v cng c th gi hm trn cc trang
HTML khc nu chng ta a hm ny vo tp tin .js

Hm c th nhiu ni trong trang HTML: trong cp th <head>, trong cp th <body>, trong tp
tin .js, hoc sau th </html> cui trang HTML.
C php:
f unct i on f unct i on_name( var 1, var 2, . . . , var X)
{
/ / Code goes her e
}

var1, var2 varX: c gi l cc tham s ca hm. Hm c th c nhiu tham s hoc khng c
tham sao no c.

Ch : cch t tn hm tng t nh cch t tn bin. Hoc chng ta dng du gch di ( _ ) trong
hm c tn l mt cm t.
6.2 HM KHNG THAM S
V d:
<ht ml >
<head>
f unct i on show_al er t ( )
{
alert("y l hp thoi hin th cnh bo!");
}
</ scr i pt >
</ head>
<body>

</ body>
</ ht ml >
6.3 HM C THAM S
V d:
<ht ml >
<head>
f unct i on show_al er t ( t ext )
{
al er t ( t ext ) ;
}
</ scr i pt >
</ head>
<body>

</ body>
</ ht ml >
6.4 HM C TR V GI TR SAU KHI THC HIN LNH
Thng thng hm s dng x l mt chc nng no v sau khi x l xong thng phi tr v
cc gi tr. tr v mt gi tr no sau khi x l chng ta dng lnh return.

V d:
<ht ml >
<head>
</ head>
<body>
f unct i on phepCong( a, b)
{
var t ongGi aTr i ;
t ongGi aTr i = a + b;
r et ur n t ongGi aTr i ;

}

var phepToan;
phepToan = phepCong( 10, 7) ;

document . wr i t e( phepToan) ;
</ scr i pt >
</ body>
</ ht ml >
6.5 GI HM TRONG MT HM KHC
Chng ta c th xy dng nhiu hm x l v chng ta c th s dng hm x l ny trong mt hm
x l khc.

V d:

f unct i on xuLyPhepToan( val _1, val _2, oper at or ) {
var phepToan;

i f ( oper at or == "cong") {
phepToan = phepCong( val _1, val _2) ;
}

i f ( oper at or == "t r u") {
phepToan = phepTr u( val _1, val _2) ;
}

r et ur n phepToan;

}

f unct i on phepCong( a, b)
{
var t ongGi aTr i ;
t ongGi aTr i = a + b;

}

f unct i on phepTr u( a, b)
{
var t ongGi aTr i ;
t ongGi aTr i = a - b;

}

var phepToan;
phepToan = xuLyPhepToan( 10, 7, "t r u") ;

document . wr i t e( phepToan) ;
</ scr i pt >

Ch : Bin trong cc mt hm bt k ch c tc dng trong hm ch khng h nh hng n cc
hm khc cho d tn bin ging nhau.
CHNG 7: S KIN TRONG JAVASCRIPT
7.1 S KIN L G ?
S kin l nhng hnh ng ca ngi s dng c pht hin bi JavaScript. Tt c cc thnh phn
ca trang web u c s kin, iu m c th kch hot mt on m JavaScript. V d v cc s kin:
Nhn chut
Ti mt trang web hoc mt hnh nh
Di chuyn chut qua mt v tr no ca trang web
La chn mt nhp liu trong HTML form
Gi mt d liu t HTML
Nhn mt t hp phm

Onload v unload:

L 2 s kin c ngi dng s dng khi vo hoc ri khi website. Cc s kin onload thng
kim tra loi trnh duyt ca ngi truy cp v phin bn trnh duyt ti phin bn thch hp cho
website

Thuc tnh s kin (Event Properties):

x - Ta x ca chut khi c mt s kin xy ra
y - Ta y ca chut khi c mt s kin xy ra

JavaScript nh ra 5 loi s kin sau: FORM, Images, image map link, and window. Nhng s kin
ny c lin kt vi cc th HTML trong trang web.
7.2 S KIN VI FORM
blur: S kin xy ra khi chng ta ri khi mt phn t no ca FORM
change: S kin xy ra khi chng ta thay i gi tr mt phn t no ca FORM
focus: S kin xy ra khi chng ta n mt phn t no ca FORM
reset: S kin xy ra khi chng ta thit lp li gi tr cho FORM no
select: S kin xy ra khi chng ta chn mt on vn bn no
submit: S kin xy ra khi chng ta mun gi d liu trong FORM t trnh duyt n my ch
7.3 S KIN VI HNH NH
about: to ra mt hnh ng hy b chc nng
error: C li xy ra
load: mt i c ti xong
7.4 S KIN VI IMAGE MAP
mouseOut: Chut c di chuyn ra ngoi t link ca MAP
mouseOver: Chut c di chuyn ln link ca MAP
7.5 S KIN VI LINK
click: Mt i tng link c nhn
mouseOut: Chut c di chuyn ra ngoi t link
mouseOver: Chut c di chuyn ln link
7.6 S KIN VI WINDOW
blur: Ri khi mt phn t no
error: Mt li xy ra.
focus: Chuyn n mt phn t no
load: Load mt phn t
unload: Thot khi mt phn t
CHNG 8: MNG TRONG JAVASCRIPT
8.1 MNG C BN
a.To mt mng:
var ar r ayName = new Ar r ay( ) ;
b. Thm mt phn t vo mng:
ar r ayName[ 0] = val ue;
c. Cc cch to mt mng:

Cch 1:
var st udent s = new Ar r ay( ) ;
st udent s[ 0] = "Nguyen Van A";
st udent s[ 1] = "Nguyen Van B";
st udent s[ 2] = "Nguyen Van C";
Cch 2:
var st udent s=new Ar r ay( "Nguyen Van A", "Nguyen Van B", "Nguyen Van C") ;
Cch 3:
var st udent s=[ "Nguyen Van A", "Nguyen Van B", "Nguyen Van C"] ;
d. In tng phn t trong mng:
document . wr i t e( st udent s[ 0] ) ;
e. In tt c mng:
f or ( x i n st udent s)
{
document . wr i t e( st udent s[ x] + " ") ;
}
</ scr i pt >

document . wr i t e( st udent s) ;
</ scr i pt >

f. Ly chiu di ca mt mng:
document . wr i t e( st udent s. l engt h) ;
</ scr i pt >
8.2 NI MNG (CONCAT)
Khi chng ta c nhiu mng v chng ta mun ni cc mng li vi nhau th chng ta dng phng
thc concat() ca i tng mng

C php:
ar r ay. concat ( ar r ay2, ar r ay3, . . . , ar r ayX) ;
V d 1:
var st r _1 = [ "a", "b", "c"] ;
var st r _2 = [ "d", "e", "f "] ;
var st r _3 = [ "g", "h", "i "] ;
var char at er s;
char at er s = st r _1. concat ( st r _2) ;
document . wr i t e( char at er s) ;
</ scr i pt >
V d 2:
var st r _1 = [ "a", "b", "c"] ;
var st r _2 = [ "d", "e", "f "] ;
var st r _3 = [ "g", "h", "i "] ;
var char at er s;
char at er s = st r _1. concat ( st r _2, st r _3) ;
</ scr i pt >
8.3 NI CC PHN T TRONG MNG (JOIN)
Phng thc ny gip chng ta c th to ra mt chui t cc phn t trong mt mng v c ngn
cch bng mt k t bt k

V d:
var st r _1 = [ "a", "b", "c"] ;
var st r _2 = [ "d", "e", "f "] ;
var st r _3 = [ "g", "h", "i "] ;
var char at er s;
char at er s = st r _1. j oi n( "| ") ;
</ scr i pt >
8.4 XA MT PHN T CUI MNG (POP)
b i mt phn t cui mng chng ta c th s dng phng thc pop().

V d:
var st r _1 = [ "a", "b", "c"] ;
document . wr i t e( st r _1 + " ") ;
document . wr i t e( st r _1. pop( ) + " ") ;
</ scr i pt >
8.5 THM MT PHN T VO CUI MNG (PUSH)
Phng thc push() dng thm 1 phn t vo cui mng, v sau khi thc hin phng thc ny
chng ta s nhn c gi tr chiu di mi ca mng.

V d:
var st r _1 = [ "a", "b", "c"] ;
document . wr i t e( st r _1. push( "d") + " ") ;
document . wr i t e( st r _1. push( "e", "f ") + " ") ;
</ scr i pt >
8.6 O NGC MT MNG (REVERSE)
o ngc th t ca mt mng trong JavaScript, chng ta s dng phng thc reverse()

V d:
var st r _1 = [ "a", "b", "c"] ;
st r _1. r ever se( ) ;
</ scr i pt >
8.7 LOI B MT PHN T U MNG (SHIFT)
Phng thc shift() dng loi b phn t u mng. Sau tr v gi tr ca phn t mng
xa.

V d:
var st r _1 = [ "a", "b", "c"] ;
var x;
x = st r _1. shi f t ( ) ;
document . wr i t e( x + " ") ;
</ scr i pt >
8.8 TO MNG MI T MT MNG C SN (SLICE)
Phng thc slice(start, end) gip chng ta to mt mng mi t mt mng c sn bng cch nhp
vo v tr bt u v kt thc

V d:
var st r _1 = [ "a", "b", "c", 1, 2, 3] ;
var x;
x = st r _1. sl i ce( 0, 5) ;
document . wr i t e( x + " ") ;
</ scr i pt >
8.9 SP XP MNG (SORT)
Phng thc sort() gip chng ta sp xp mt mng theo gi tr ca cc phn t trong mng

V d:
var st r _1 = [ "a", "b", "c", 1, 2, 3] ;
var x;
st r _1. sor t ( ) ;
</ scr i pt >
8.10 THM V XA CC PHN T CA MNG (SPLICE)
Phng thc splice() gip chng ta xa cc phn t trong mng theo v tr nhp vo (ging slice()) v
thm vo cc phn t mng mi vo cui mng (ging push())

V d:
var st r _1 = [ "a", "b", "c", 1, 2, 3] ;
var x;
st r _1. spl i ce( 0, 2, "Nguyen Van A", "Nguyen Van B", 6, 7, 8) ;
</ scr i pt >
8.11 CHUYN MT MNG THNH CHUI (TOSTRING)
Phng thc toString() gip chng ta chuyn mt mng thnh mt chui, hy xem v d sau:

V d:
var st r _1 = [ "a", "b", "c", 1, 2, 3] ;
var x;
x = st r _1. t oSt r i ng( ) ;
</ scr i pt >
8.12 THEM PHN T VO U MNG (UNSHIFT)
Phng thc unshift() gip chng ta thm cc gi tr vo mt mng v tr v mt mng mi

V d:
var st r _1 = [ "a", "b", "c", 1, 2, 3] ;
var x;
st r _1. unshi f t ( 100) ;
st r _1. spl i ce( 0, 0, 200) ;
</ scr i pt >
CHNG 9: I TNG MATH V THIT LP THI GIAN CHY
9.1 I TNG MATH
i tng Math trong JavaScript h tr chng ta trong cng vic thc hin cc php ton

Cch s dng:
Math.<phng thc>;

Cc phng thc thng dng trong i tng Math:
ID Phng thc Chc nng
1 Math.round(x) Lm trn (.5 =1)
2 Math.floor(x) Lm trn xung (.6 = 0)
3 Math.random() Ly ngu nhin mt s
4 Math.max(x,y,z,...,n) Ly s c gi tr ln nht trong chui s
5 Math.min(x,y,z,...,n) Ly s c gi tr nh nht trong chui s
6 Math.abs(x) Tr v gi tr s nguyn dng

V d: Hin th ngu nhin mt hnh nh t mt tp hp nhiu nh

Trong v d ny chng ta s kt hp 2 i tng Array v Math ca JavaScript. Cc bc thc hin:
- Chun b mt s hnh nh ( 5 pictures)
- To mt mng lu tn ca cc hnh nh ny
- S dng cc phng thc floor(), random() hin th ngu nhin mt hnh nh
<ht ml >
<head>
<t i t l e>Unt i t l ed Document </ t i t l e>
var i mageLi st = new Ar r ay;
i mageLi st [ 0] = "i mages/ 001. j pg";
f unct i on showI mage( ) {
var i mageChoi ce = Mat h. f l oor ( Mat h. r andom( ) * i mageLi st . l engt h) ;
document . wr i t e( ' ' ) ;
}
</ scr i pt >
</ head>
<body>
showI mage( ) ;
</ scr i pt >
</ body>
</ ht ml >
9.2 THIT LP THI GIAN CHY
JavaScript c th thc hin mt chc nng no sau mt thi gian c nh trc.

setTimeout() - Thc hin mt s lnh vi thi gian c nh trc trong tng lai.
clearTimeout() - Hy hm setTimeout()

C php:
set Ti meout ( "j avascr i pt st at ement ", mi l l i seconds) ;
/ / mi l l i seconds * 1000 = 1 gi y

V d 1: Hin th hp thoi alert sau 5 giy sau khi nhn nt
<ht ml >
<head>
var t ;
f unct i on t i medMsg( ) {
var t =set Ti meout ( "al er t ( ' 5 seconds! ' ) ", 5000) ;
}
</ scr i pt >
</ head>

<body>
<f or m>

</ f or m>
</ body>
</ ht ml >

V d 2: To mt textbox v c gi tr thay i theo thi gian
<ht ml >
<head>
var c=0;
var t ;
f unct i on t i medCount ( ) {
document . get El ement ByI d( ' t xt ' ) . val ue=c;
c=c+1;
t =set Ti meout ( "t i medCount ( ) ", 1000) ;
}
</ scr i pt >
</ head>

<body>
<f or m>


</ f or m>
</ body>
</ ht ml >

V d 3: Dng gi tr trong textbox trong v d 2
<ht ml >
<head>
var c=0;
var t ;

f unct i on t i medCount ( ) {
document . get El ement ByI d( ' t xt ' ) . val ue=c;
c=c+1;
t =set Ti meout ( "t i medCount ( ) ", 1000) ;
}
f unct i on st opCount ( )
{
cl ear Ti meout ( t ) ;
}
</ scr i pt >
</ head>
<body>
<f or m>



</ f or m>
</ body>
</ ht ml >

V d 4: n hin mt bc tranh kt hp setTimeout() v thuc tnh opacity ca CSS
<ht ml >
<head>
<t i t l e>Unt i t l ed Document </ t i t l e>

var maxOpaci t y = 1;
var mi nOpaci t y = 0;

f unct i on set Hi dden( ) {
var t hi sObj = document . get El ement ByI d( ' pi ct ur e' ) ;
maxOpaci t y = maxOpaci t y - 0. 1;
i f ( maxOpaci t y >= 0) {
t hi sObj . st yl e. opaci t y = maxOpaci t y;
/ / t hi sObj . f i l t er s. al pha. opaci t y = maxOpaci t y;
wi ndow. set Ti meout ( "set Hi dden( ' pi ct ur e' ) ", 100) ;
}el se{
t hi sObj . st yl e. opaci t y = 0;
}
}

f unct i on set Show( ) {
var t hi sObj = document . get El ement ByI d( ' pi ct ur e' ) ;
mi nOpaci t y = mi nOpaci t y + 0. 1;
i f ( mi nOpaci t y <= 1) {
t hi sObj . st yl e. opaci t y = mi nOpaci t y;
/ / t hi sObj . f i l t er s. al pha. opaci t y = maxOpaci t y;
wi ndow. set Ti meout ( "set Show( ' pi ct ur e' ) ", 100) ;
}el se{
t hi sObj . st yl e. opaci t y = 1;
}
}

</ scr i pt >
</ head>
<body >


 

</ body>
</ ht ml >

Tuhocjs

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Tuhocjs

Uploaded by

Copyright:

Available Formats

T hc Javascript Writer: TungTung (tlqtung34@student.ctu.edu.

You might also like