TI LIU

HTML, DHTML V JAVASCRIPT

HA NOI 9/2008
TI LIU DNH CHO KHA HC
C BN V HTML, JAVASCRIPT, CSS V ASP
Ti i!" #$ %&'( #&)#* *+, Ti liu ny cha mt s !i t"# $%m &i'i th(ch ni
)un& $i*n thc li+n ,uan -*n $. thu"t l"# t/0nh 12! c3 !'n #h(a Cli2nt4 !a5 &6m7
P&-# A
Chng 0: To cc phn t HTML.
Chng I: Bi tp c bn v !v!"c#ipt.
Chng II: " $%ng cc &'p ()*i t+ng, - &. Ch/0i1 2g3 thng1 Ton h4c.
Chng III: 5 &. 67 8i9n t#ong t#!ng HTML v'i !v!"c#ipt
Chng I:: ;<nh $ng cc phn t HTML b=ng C""
Chng :: To v - &. cc tng (L!3>#,
Chng :I: 2?i $/ng )?ng v )<nh v< )?ng
Ai #.# /0% 1i i!" #$
L 8inh 9i+n4 &i:5 9i+n h5;c nh<n& n&=>i c?n c@ $i*n thc 9A l"# t/0nh 12!B
C-# %2 #&)#* 3i4# 1&'% *+ 1567% 3&i /0% 1i i!" #$,
C?n c@ $i*n thc c3 !'n 9A l"# t/0nh n@i chun&B
8i9: 15+#& ; 1&"$41
C HTDL4 DHTDL E Fa9a8c/i#t cGa A#t2ch H5/l)Hi)2
C9% 15(#* <=> #.# *&? 1&@A
C HHHBIsch55lsBc5m
C 82a/ch 9Ji tK $h@a J(B( S%5iC1 1"1:5i(L J(B( D%5iC1 I#15:E"%1i:#
M
MFC LFC
Chng 0: To cc phn t HTML c bn....................................4
NB CO #h:# chun&7BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBP
MB TQ5 mt s #h?n tR c3 !'nBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBP
Chng I: Bi tp c bn v !"v"#c$ipt.......................................%
Chng II: # &'ng cc ()p * (+ Ch,-i. /g0 thng. Ton h1c.....2
Chng III: 3 (+ 45 6i7n t$ong t$"ng HTML v)i !"v"#c$ipt..........89
Chng I:: ;<nh &ng cc phn t HTML b=ng C##....................>%
Chng :: To v * (+ cc tng ?L"0@$A...................................B%
Chng :I: /Ci &,ng DCng v D<nh v< DCng................................4>
I
C&6G#* 0H TI: %9% C&-# 1J HTML %G >K#L
MM% 1i."H K*t thOc ch=3n& ny4 n&=>i hSc c@ thT
TQ5 c:c #h?n tR HTDL c3 !'n !Un& c:ch c5)2 t/Vc ti*#
DWn& N5t2#a) tQ5 mt t/an& H2! cha c:c #h?n tR HTDL
NNi E"#*
Gii thiu
T/5n& nhiAu n& )Xn& H2! $hYn& #h'i lOc n5 chOn& ta cZn& c@ thT sR )Xn& t/0nh s5Qn th'5
t(ch h[# $iTu nh= \/5nt#a&2 hay D/2amH2a92/ -T thi*t $* &ia5 )in4 -;c !it l $hi &ia5 )in
ny c@ li+n ,uan -*n y*u t l"# t/0nh4 $hi -@ n&=>i l"# t/0nh #h'i tQ5 c:c #h?n tR HTDL h5n
t5n thG cYn& ]C5)2 ch $hYn& )Wn& $^5 th'_B D5 9"y4 9ic hiTu cO #h:# -T tQ5 c:c #h?n tR
HTDL l 9Y cWn& ,uan t/Sn&B
1. C php chung:
OT.#PL:IiPP&-#PTJ OT&"N% 1Q#& RS ` abi: t/cd OT&"N% TQ#&S T abi: t/cde f
OT.#PL:IiPP&-#PTJ S1$= T aThucgt(nh7 &i:gt/cL thucgt(nh 7 &i: t/c LeBL S
U41 &VC %K &(i %9%&L
T5:#* /2 H
T.# :Ii C&-# 1J HTML T&"N% 1Q#&
hutt5n Nam2
T2it VALUW
\il2 MAXLWN8TH
Hi))2n j2a)Only
82l2ct Disa!l2
T2itA/2a C5ls4 j5Hs
Ch2c$h5i Dulti#l2
TYPW
Phn gi tr c th t trong cp ngoc kp hoc cp ngoc n hoc khng cn !!
N4" /Z1 1&"N% 1Q#& 1&=: %9%& 2, 1&+ %2 1&[ 1&(A %&i4" >K#* D(" \*0i 1&=: %] C&9C
CSS^
2. To mt s phn t c bn
TQ5 nOt nhkn
OI#C"1 nam2`lKi2mT/al TYPW`l!utt5nl VALUW`lKiTm t/a )< liulf
OI#C"1 TYPW`lS">Ai1l VALUW`lmnn& nh"#lf
TQ5 Y nh"#
OI#C"1 nam2`lH5oaT2nl TYPW`lt2itl VALUW`lN&uypn onn Al siq2`lMrl
MAXLWN8TH`lIrlf
OI#C"1 nam2`lKh5al TYPW`lt2itl VALUW`lKh5a CYn& n&h thYn& tinl siq2`lPrl
MAXLWN8TH`lsrl /2a)5nly`lt/u2lf
OI#C"1 nam2`lT/u5n&l TYPW`lt2itl VALUW`lT/=>n& mQi hSc s= #hQm $. thu"t H=n&
t+nl siq2`lPrl MAXLWN8TH`lsrl Disa!l2)`lt/u2lf
P
TQ5 9Wn& nh"# ]T2ita/2a_
ut2ita/2a nam2`lbhiChul c5ls`lsrl /5Hs`lslf Ni )un& &hi chO7 uvt2ita/2af
TQ5 Y nh"# wassH5/)
OI#C"1 nam2`lDatKhaul ty#2`l#assH5/)l 9alu2`lNMIPsxl siq2`lNrl mail2n&th`lMrlf
TQ5 list!5i
us2l2ct nam2`lD5nH5cl Di_=T`a` f
u5#ti5nfoisual hasicuv5#ti5nf
u5#ti5nfL"# t/0nh BNyTuv5#ti5nf
u5#ti5nfL"# t/0nh A8wuv5#ti5nf
uvs2l2ctf
TQ5 C5m!5h5i ]chz c?n !{ thuc t(nh siq2_
us2l2ct nam2`lD5nl siq2 ` N 5nChan&2`lCall D5cbiaT/iListh5ilf
u5#ti5n 9alu2 ` loisual hasiclfoisual hasicuv5#ti5nf
u5#ti5n 9alu2 ` lDOTgNyTlfL"# t/0nh BNyTuv5#ti5nf
u5#ti5n 9alu2 ` lA8wlfL"# t/0nh A8wuv5#ti5nf
uvs2l2ctf
TQ5 h# $iTm
OI#C"1 nam2`lch$ohl ty#2`lch2c$!5il 9alu2`loisual hasicl ch2c$2)f oisual hasic
OI#C"1 nam2`lch$A8wl ty#2`lch2c$!5il 9alu2`lA8w lf Acti92 82/92/ wa&2s
TQ5 nOt ja)i5
OI#C"1 nam2`l8i:iTi#&l ty#2`l/a)i5l 9alu2`lNaml ch2c$2)f
OI#C"1 nam2`l8i:iTi#&l ty#2`l/a)i5l 9alu2`lN<l f
OI#C"1 nam2`lTinhT/an&l ty#2`l/a)i5l 9alu2`lm| l"# &ia -0nhl f
OI#C"1 nam2`lTinhT/an&l ty#2`l/a)i5l 9alu2`lmc th}nl ch2c$2) f
Tn ging nh!u th" #$ thu%c &' c(ng )%t nh) *Group#+
wh?n tR chSn \il2
OI#C"1 nam2`lCh5n\il2l ty#2`l~il2l siq2`lIrlf
TQ5 t2it!5i n ]Hi))2n_B
OI#C"1 nam2`lwhanTuAnl ty#2`lhi))2nl 9alu2`llf
TQ5 c:c #h?n tR 9 -;t thuc t(nh7
TQ5 mt t2it!5i 9 -;t thuc t(nh ~5nt7
u\ONT \ACy ` aTim2s N2H j5mandf
OI#C"1 ty#2 ` t2it 9alu2 ` a\5nt ch< Unic5)2 -}y df
uv\ONTf
TQ5 mt t2it!5i 9 -;t thuc t(nh thYn& ,ua #h5n& c:ch C887
OI#C"1 ty#2 ` t2it 9alu2 ` a\5nt Unic5)2d 8tyl2 ` a\5ntC\amily7Tim2s n2H
/5mandf
s
TQ5 mt nh|n c@ ~5nt ch< ianh4 c@ hiu n&7
uw 8tyl2 `dC5l5/7hlu2L ~5ntCsiq27MrL T2itCAli&n7c2nt2/dfin ch5 uv#f
TQ5 mt nOt nhkn c@ mu nAn -{7
OI#C"1 ty#2 ` !utt5n styl2`d~5ntC~amily7a/ialL !ac$&/5un)Cc5l5/7/2)d 9alu2 ` am{df
K*t ,u'
C&6G#* IH Bi 1bC %G >K# Bc J(B(S%5iC1
MM% 1i."H K*t thOc ch=3n& ny n&=>i hSc c@ thT7
oi*t c:c c}u lnh Fa9a8c/i#t 9 nhOn& 95 t/an& H2!
8R )Xn& -=[c c:c -i t=[n& nh"# iukt w/5mt4 E:%"A=#1L<5i1=B
T/uy iukt thuc t(nh cGa c:c #h?n tR HTDL !Un& c}u lnh Fa9a8c/i#t
oi*t lnh iR l mt s sV $in -3n &i'nB
NNi E"#*H
x
VQ EM RH Ch5 n&=>i )Wn& nh"# 95 t+n 9 tuiB H|y 9i*t lQi t+n 9 tui cGa n&=>i -@ /a mn
h0nh !Un& hm E:%"A=#1L<5i1=4 t/5n& -@ t+n c@ mu -"m4 tui -=[c &Qch ch}nB
bi'i mu7
uHTDLf
uHyADf uvHyADf
uhODtf
usc/i#t lan&ua&2 ` lFa9a8c/i#tlf
9a/ T2n4 Tu5iL @@ Ah!i bo B biCn )D &/ tEn v t/Fi
T2n ` #/5m#t]lhQn h|y nh"# 95 t+n l4 ll_L
Tu5i ` #/5m#t]lhQn h|y nh"# 95 Tui 7 l4 Mr_L
E:%"A=#1L<5i1=]lCh5 !Qn 7 uhf l T2n luvhfl_L
E:%"A=#1L<5i1=]luhjfl_L @@ 5/*ng $Gng
E:%"A=#1L<5i1=]lTui cGa !Qn l 7 uUf l Tu5i luvUfl_L
uvsc/i#tf
uvhODtf
uvHTDLf
VQ EM 2H TQ5 mt nOt nhkn ]!utt5n_ c@ nam2 l <=%:A=4 9alu2 l ` d=%:A= `L Dt
t2it!5i c@ t+n l ms&4 9alu2 ` l12lc5m2 t5lB
H'ng $Hn : 8R )Xn& #h=3n& thc ]hm_ H/it2 cGa -i t=[n& )5cum2nt -T tQ5B
Iii JH/:
uHTDLf
uHyADf uvHyADf
uhODtf
usc/i#t lan&ua&2 ` lFa9a8c/i#tlf
E:%"A=#1L<5i1=]lTa5 hutt5n 9a T2it !an& 8c/i#tuhjfl_L
E:%"A=#1L<5i1=]luhjfl_L
E:%"A=#1L<5i1=]luin#ut ty#2`!utt5n nam2`H2lc5m2 9alu2 ` 12lc5m2 l_L
E:%"A=#1L<5i1=]l5nclic$ ` al2/t ]12lc5m2 t5 Fa9a8c/i#t_L f l_L
E:%"A=#1L<5i1=]luin#ut ty#2 ` t2it nam2 ` ms& 9alu2 ` 12lc5m2 t5fl_L
uvsc/i#tf
uvhODtf
uvHTDLf
VQ EM eH TQ5 mt nOt nh= t/5n& 9( )X M 9 th+m chc nnn& sau7 Khi n&=>i )Wn& clic$ 95 nOt
H2lc5m2 th0 hiTn thc thYn& !:5 l12lc5m2 t5 Fa9a8c/i#t l
H'ng $Hn: DWn& th -T tQ5 nOt nhkn 9 th+m thuc t(nh 5nClic$ ` luC}u lnh
Fa9a8c/i#tfLl ]T/5n& -@ uC}u lnh Fa9a8c/i#tf c@ thT l mt lnh Fa9a8c/i#t !kt $4 9( )X
lnh E:%"A=#1L<5i1=4 al2/t4 #/5m#t h5;c lnh &Si hm 9B9BBB_
Iii JH/:
uHTDLf
uHyADf uvHyADf
uhODtf
uin#ut ty#2`!utt5n nam2` H2lc5m2 9alu2`l12lc5m2l 5nclic$`lal2/t]12lc5m2 t5 Fa9a8c/i#t_Llf
uvhODtf
uvHTDLf
L6" ; f"(# 150#*H T/5n& Fa9a8c/i#t4 mt hUn& i}u -=[c !a5 !i c;# nh:y -3n h5;c nh:y
$^#4 9( )X c:c i}u7 nh:y -3n4 lnh:y $^#l l nh<n& i}u h[# l4 tuy nhi+n !Qn 9i*t 7 a!cl hay
liyq l nh<n& i}u $hYn& h[# lB T/5n& t/=>n& h[# !Qn mun in ch(nh !'n th}n )ku nh:y
-3n h5;c nh:y $^# /a mn h0nh th0 !Qn -;t t/=Jc n@ mt $ tV 4 9( )X !Qn c@ thT in /a mn

h0nh )n& ch< 7 15m2ns )ay /a mn h0nh !Un& hai hm al2/t 9 )5cum2nt th25 c:c c:ch sau
-}y 7 al2/t]l15m2ns )ayl_4 E:%"A=#1L<5i1=]15m2ns )ay_L al2/t]l15m2nls )ayl_L
al2/t]15m2nls )ay_L 9B9BBB
VQ EM gH Lky ]-Sc_ &i: t/c cGa mt #h?n tR HTDL
TQ5 M #h?n tR nh= t/5n& 9( )X M !Un& th HTDL4 $hi n&=>i )Wn& clic$ chut 95 nOt
12lc5m2 th0 hiTn thc ni )un& cha t/5n& t2it c@ t+n l AD*B
H'ng $Hn: mT lky &i: t/c cGa mt #h?n tR HTDL4 !Qn 9i*t uT+n #h?n tRfB9alu2
o( )X7 ms&B9alu2 ch5 ta &i: t/c cGa t2it t+n l ms&B
Iii JH/:
uHTDLf
uHyADf uvHyADf
uhODtf
uin#ut ty#2 ` !utt5n nam2 ` H2lc5m2 9alu2 ` l12lc5m2l 5nclic$ ` lal2/t]AD*LB("=_lf
uin#ut ty#2 ` t2it nam2 ` ms& 9alu2 ` l12lc5m2 t5 Fa9a8c/i#tl siq2 ` Irf
uvhODtf
uvHTDLf
VQ EM aH Uhai !:5 hm t/5n& Fa9a8c/i#t 9 c:ch li+n $*t nOt nhkn 9Ji mt hm
TQ5 M #h?n tR nh= 9( )X M4 $hi n&=>i )Wn& nhkn nOt th0 &Si mt hm c@ t+n l Hi2nThi4 hm
hiTn thc c@ chc nnn& hiTn thc ni )un& t/5n& t2it c@ t+n l AD* t/+nB
H'ng $Hn7 T/5n& th tQ5 !utt5n4 !Qn -;t thuc t(nh 5nClic$ ` luT+n hmfl4 t/5n& t/=>n&
h[# ny !Qn -;t OnClic$ ` lHi2nThi]_lB miAu ny c@ n&ha l $hi n&=>i sR )Xn& Clic$ chut
]OnClic$ ` Clic$ chut_ th0 t/0nh )uyt h|y &Si hm Hi2nThi]_B CZn& &in& nh= t/5n& n&Yn
n&< C4 Dt hm !t !uc #h'i c@ c;# n&5;c -3n4 ch5 )W c@ tham s hay $hYn&B o( )X $hi &Si
hm Hi2nThi th0 !Qn #h'i 9i*t l Hi2nThi]_B
bi'i mu7
uHTDLf
uHyADf
u8c/i#t Lan&ua&2 ` lFa9a8c/i#tlf
~uncti5n Hi2nThi]_ @@ Ah!i bo J?t hJ tEn & Hi>nThi

al2/t]ms&B9alu2_L @@ LK3 n?i $/ng t#ong t>-t bo- v hiDn th<

al2/t]lhQn h|y nh"# 95 Y t2it 9 thR lQi l_L

uv8c/i#tf
uvHyADf
uhODtf
uin#ut ty#2 ` !utt5n nam2 ` H2lc5m2 9alu2 ` l12lc5m2l 5nclic$ ` lHi=#T&i\^lf
uin#ut ty#2 ` t2it nam2 ` ms& 9alu2 ` l12lc5m2 t5 Fa9a8c/i#tl siq2 ` Irf
uvhODtf
uvHTDLf
,-u ./ T/5n& C4 -T $hai !:5 mt hm th=>n& !Qn 9i*t4 9( )X7 i#1 Hi=#T&i\^ 9BBB9BB Tuy
nhi+n4 9Ji Fa9a8c/i#t c@ h3i $h:c t( chOt4 thay 95 -@ !Qn 9i*t h"#%1i:# Hi=#T&i\^
Cn c:c c}u lnh $h:c !Qn 9i*t t=3n& tV nh= n&Yn n&< C -| hScB C:c hm $hi $hai !:5 t/5n&
Fa9a8c/i#t !t !uc #h'i -;t t/5n& th u8c/i#tf BBBBB uv8c/i#tfB

C&6G#* IIH SJ EM#* %9% 7C iJ ; C&"ji, N*$ 1&9#*, T:9# &0%L

MM% 1i."H K*t thOc !i hSc ny4 n&=>i hSc c@ thTB
DY t' -=[c cYn& )Xn& cGa c:c lJ# iR l Chui ]8t/in&_4 iR l n&y th:n& ]Dat2_ 9
iR l c:c hm t5n hSc DathB
8R )Xn& -=[c mt s #h=3n& thc4 thuc t(nh c3 !'n cGa c:c lJ# nyB
o"n )Xn& 9i*t mt s t/an& H2! -3n &i'n c@ sR )Xn& -*n I lJ# t/+nB
NNi E"#*H
Bi 1bC RH Dinh h5Q c:ch $hai !:5 9 sR )Xn& -i t=[n& D(1= -T n&y &i> cGa h thn&B
LE/ c/: H|y hiTn thc n&y 9 &i> cGa h thn& m:y t(nh $hi t/an& 12! -=[c nQ#B ThYn& tin
hiTn thc /a c@ )Qn& nh= sau7
H'ng $Hn: 8R )Xn& -i t=[n& Dat2 9 sR )Xn& c:c hm lky th4 n&y4 th:n&4 nnm -T in
thYn& tin /a mn h0nhB ChO -*n c:c hm t(nh th:n&4 n&y t/5n& tu?n !c hXt mt -3n 9cB
01i t2p 3/ Dinh h5Q sR $hai !:5 9 )Wn& -i t=[n& Dat2 -T lky bi>4 #hOt4 &i}y cGa h thn&
LE/ c/: HiTn thc bi> 9 #hOt t/5n& thanh ti+u -A cGa cRa s $hi t/an& 12! -=[c nQ#B
H'ng $Hn: bi: t/c hiTn thc t/5n& thanh ti+u -A cGa t/an& H2! -=[c l=u t/5n& thuc t(nh titl2
cGa -i t=[n& )5cum2nt4 )5 9"y -T hiTn thc thYn& tin t/+n thanh ti+u -A4 !Qn c?n 9i*t7
E:%"A=#1L1i1= T O8i9 15kSB o( )X4 -T hiTn thc )n& ch< lH2ll5 y92/y !5)y l4 !Qn 9i*t7
E:%"A=#1L1i1= `H=: WB=5$ >:E$ l`
Minh ho:
uHTDLf
uhODtf
uD%5iC1 lan&ua&2`lFa9a8c/i#tlf
9a/ D ` n2H Dat2]_L
E:%"A=#1L1i1= ` lh}y &i> l7 l DB*=1H:"5D]_l &i> l DB*=1Mi#"1=D]_ l #hOtBlL
uvD%5iC1f
uvhODtf
uvHTDLf
01i 4/ o"n )Xn& !i*n -i t=[n& Dat2 -T t(nh tui cGa mt n&=>iB
LE/ c/ : Ch5 n&=>i )Wn& nh"# 95 nnm sinh cGa hS4 sau -@ hiTn thc tui t=3n& n&B
H'ng $Hn: 8R )Xn& -i t=[n& Dat2 -T lky nnm hin tQiB Tui s !Un& nnm hin tQi t/K -i
nnm sinh 9Ka nh"# 95B
Minh ho JH/:
uHTDLf
uTITLyfT(nh tuiuvTITLyf
uhODtf
uD%5iC1 (#*"(*=`lFa9a8c/i#tlf
Nr
HYm nay l th M4 n&y NI th:n& nnm MrrP
B(5 D ` n2H Dat2]_L
B(5 Nam8inh4 NamHi2nTaiL
NamHi2nTai ` DB*=1Y=(5]_L @@ L/ nMJ hi9n ti vo biCn
Nam8inh ` #/5m#t]lhQn sinh nnm !a5 nhi+u 7 l4ll_L
(=51]lTui cGa !Qn !}y &i> l 7 l ]NamHi2nTaiCNam8inh__L
uvD%5iC1f
uvhODtf
uvHTDLf
01i 5/ T=3n& tV nh= !i I nh=n& Nnm sinh nh"# 95 $hYn& -=[c lJn h3n nnm hin tQiB
H'ng $Hn: 8R )Xn& 9n& l;# E:m<&i= -T y+u c?u nh"# lQi n*u nnm sinh f nnm hin tQiB
Minh ho JH/:
uHTDLf
uTITLyfTinh tu5iuvTITLyf
um2ta htt#C2,ui9`lC5nt2ntCTy#2l c5nt2nt`lt2itvhtmlL cha/s2t`ut~Clf
uhODtf
uD%5iC1 lan&ua&2`lFa9a8c/i#tlf
B(5 D ` #=< D(1=]_L
B(5 Nam8inh4 NamHi2nTaiL
NamHi2nTai ` DB*=1Y=(5]_L @@L/ nMJ hi9n ti vo biCn
E:
Nam8inh ` C5:AC1]lhQn sinh nnm !a5 nhi+u 7 l4ll_L
<&i= ]C(5D=I#1]Nam8inh_fNamHi2nTai_L @@2hp &i nC/ 2MJ 6inhNnMJ hi9n ti
(=51]lTui cGa !Qn !}y &i> l 7 l ]NamHi2nTaiCNam8inh__L
uvD%5iC1f
uvhODtf
uvHTDLf
Bi 5: Minh ho cch t cc cu lnh JavaScript vo trong cc phn t HTML
thc thi khi ngui dng click chut v s dung hm open ca i tuong window
m trang web.
Yu cu: Vit on Script cho ngui dng nhp vo mt s nguyn. Nu ngui
dng nhp s 1 th m trang Web http://www.vnn.vn, nu nhp s 2 th m trang
http://www.mail.yahoo.com, nu nhp s 3 th m trang http://www.echip.com.vn,
cn nu nhp mt s khc vi 1, 2 hay 3 th m trang http://www.google.com.
H'ng $Hn: mT m mt t/an& 12! !kt $ t/5n& cRa s hin hnh !Qn 9i*t nh= sau7
<i#E:<L:C=#\`nk( %&o %p( 15(#* %-# Aq`^L
:O $% : Hin)5HB5#2n]htt#7vvHHHB9nnB9nn _ -T m t/an& chG cGa VNN t/5n& cRa s hin tQiB
Nhu vy, gii quyt yu cu ca bi ton trn , bn cn cho ngui dng nhp
vo mt s v s dung cu trc switch kim tra v m trang web tuong ng.
Minh ho JH/:
uHTDLf
uTITLyfD t/an& H2! 9Ji hm 5#2n cGa -i t=[n& Hin)5HuvTITLyf
um2ta htt#C2,ui9`lC5nt2ntCTy#2l c5nt2nt`lt2itvhtmlL cha/s2t`ut~Clf
uhODtf
uD%5iC1 lan&ua&2`lFa9a8c/i#tlf
B(5 LuaCh5nL
LuaCh5n ` C5:AC1]lhQn h|y nh"# 95 mt s -T m t/an& H2! 7 l4 N_L
D<i1%& ]LuaCh5n_

%(D= lNl 7 <i#E:<L:C=#]lhtt#7vvHHHB9nnB9nl_L >5=(3L

%(D= lMl H <i#E:<L:C=#]lhtt#7vvHHHBmailByah55Bc5ml_L >5=(3L
NN
%(D= lIl 7 <i#E:<B:C=#]lhtt#7vvHHHB2chi#Bc5mB9nl_L >5=(3L
E=h("1 7 <i#E:<B:C=#]lhtt#7vvHHHB&55&l2Bc5ml_L

uvD%5iC1f
uvhODtf
uvHTDLf
01i # 6/ Dinh h5Q 9ic $hai !:5 9 sR )Xn& !i*n -i t=[n& A//ay -T l=u t/< )anh s:ch 9
c:ch sR )Xn& c:c hm cGa -i t=[n& A//ay nh= hm D:51 9 9n& l;# h:5mi#
LE/ c/: Ch5 n&=>i )Wn& nh"# 95 )anh s:ch t+n cGa mt lJ#4 sau -@ s# i*# th25 9?n
Al#ha!2t /6i hiTn thc )anh s:ch -| s# i*# -@ /a mn h0nh4 mi n&=>i t/+n mt )n&B
H'ng $Hn: 8R )Xn& 9n& l;# ~5/ -T ch5 #h^# nh"# )anh s:ch hS t+n 9 L=u )anh s:ch 95
mt m'n&4 sau -@ sR )Xn& #h=3n& thc s5/t cGa -i t=[n& m'n& -T s# i*#4 ti*# th25 )Wn&
9n& l;# h:5mi# -T in c:c #h?n tR t/5n& )anh s:chB
Minh ho JH/:
uHTDLf
uTITLyf8# i*# m'n&uvTITLyf
um2ta htt#C2,ui9`lC5nt2ntCTy#2l c5nt2nt`lt2itvhtmlL cha/s2t`ut~Clf
uhODtf
uD%5iC1 lan&ua&2`lFa9a8c/i#tlf
B(5 85Lu5n&4 iL
B(5 D8 ` #=< A55($]Nrr_L @@ Ah!i bo Jng P"1 cQ thD &/ t*i )! & R00 phSn t
85Lu5n& ` C5:AC1]lhQn c?n nh"# !a5 nhi+u n&=>i 7 l4 s_L
h:5 ]i`rL i u 85Lu5n&L i_

D8i ` C5:AC1]lNh"# 95 hS t+n 7 l4ll_L

@@ I4i hJ #ort cT! )*i t+ng Jng P" )D 6Up -Cp

D8BD:51]_L
@@HiDn th< 8Ct V/ 6!/ 8hi 6Up (6o#t,
E:%"A=#1L<5i1=]luhNfDanh s:ch -| s# i*# l uvhNfl_L
h:5 ]i i# D8_ @W 2En 6 $%ng cK/ t#Xc 7or 8 in n3 )D $/39t Jng W@

E:%"A=#1L<5i1=] D8i _L
E:%"A=#1L<5i1=]luhjfl_L 99 :ung ;<ng

uvD%5iC1f
uvhODtf
uvHTDLf
*** Nhn xt: Nu mun sp theo chiu gim dn th sau khi sort bn goi hm reverse.
01i # =/ Dinh h5Q 9ic -=a c:c c}u lnh F8 95 t/5n& mt th $hi n&=>i )Wn& %i%3 chutB
LE/ c/: TQ5 mt nOt nhkn ]hutt5n_ c@ nam2 ` lDan&Kyl4 9alu2 ` lmnn& $lB Khi n&=>i
)Wn& Clic$ 95 nOt ny th0 thYn& !:5 l `n@#* 3; Ek%& BM WrM(i`L
H'ng $Hn: mi 9Ji c:c #h?n tR HTDL4 nh= t2it!5i4 !utt5n4 ch2c$!5i4 82l2ct 9B9e C:c
t/0nh )uyt -Au ch5 #h^# ta thVc thi mt h5;c nhiAu c}u lnh Fa9a8c/i#t $hi n&=>i sR )Xn&
clic$ chut l+n c:c #h?n tR -@B okn -A ch4 9i*t c:c c}u lnh -@ nh= th* n5
mT 9i*t c:c c}u lnh Fa9a8c/i#t $hi n&=>i )Wn& clic$ chut l+n mt #h?n tR n5 -@4 t/5n& th
cGa #h?n tR ny4 ta 9i*t nh= sau7 O#Ci%3 ` `C9% %s" !#& J(B(S%5iC1`L
NM
"Cc cu lnh JavaScript" y l bt ky cu lnh JavaScript no v chng phi
uoc cch nhau bi du chm phy. Ngoi ra, cc cu lnh phi t trong cp du
nhy kp (Hoc nhy on).
VQ EM AN1 Dt %9%& /6( %s" !#& J(B(S%5iC1 %-# 1&u% 1&i 3&i #*6vi Ew#* %i%3 %&"N1
NB Onclic$ ` lal2/t]H2ll5 H5/l)Ll
MB OnClic$ ` E:%"A=#1L<5i1=]l12lc5m2 t5 Fa9a8c/i#tl_L
IB OnClic$ ` l9a/ i4yL i ` NrL y ` MrL al2/t]Tn& l 7 ]i y__L l
PB OnClic$ ` l9a/ Tu5iL Tu5i ` titTu5iB9alu2L Ki2mT/a]Tu5i_Ll
sB OnClic$ ` lKi2mT/a]_Ll
Th>o vO $% t#En1 Ahi ngYi 6 $%ng C&ic8 :
N 7 ThVc hin c}u lnh (=51\xH=: <:5Ex^
M 7 ThVc hin c}u lnh E:%"A=#1L<5i1=\xd=%:A= 1: J(B(S%5iC1x^y
I 7 ThVc hin NHIU c}u lnh Fa9a8c/i#t
P 7 ThVc hin nhiAu c}u lnh Fa9a8c/i#t 9 c@ l>i &Si -*n hm Ki2mT/a]Tu5i_
5 : Thc hin cu lnh goi hm KiemTra().
Minh ho JH/:
uHTDLf
uHyADf
uTITLyfDinh h5Q -=a c}u lnh Fa9a8c/i#t 95 c:c #h?n tRuvTITLyf
uDyTA htt#C2,ui9`lC5nt2ntCTy#2l c5nt2nt`lt2itvhtmlL cha/s2t`ut~Clf
uvHyADf
uhODtf
uINwUT ty#2`l!utt5nl nam2`lDan&Kyl 9alu2`lmnn& $l :#Ci%3`l(=51]Dan& $y yCDail_L lf
uvhODtf
uvHTDLf

01i # >/ Dinh h5Q c:ch thay -i thuc t(nh cGa mt -i t=[n& thYn& ,ua 9ic 9i*t c:c c}u lnh Fa9a8c/i#tB
TQ5 mt nOt c@ nam2 ` ThayDauN2n4 9alu2 ` lThay -i mu nAnlB Khi n&=>i )Wn& clic$ chut 95 nOt ny th0
thay -i mu nAn cGa t/an& 12! thnh mu lianhlB
H=Jn& )n7 mT thay -i mu nAn cGa t/an& 12! thnh mu4 ta c?n thay -i thuc t(nh )5cum2ntB>*C::5 `
l!lu2lB ]Du -{ l /2)4 t0m 7 ma&2nta4 -2n7 !lac$4 t/n&7 Hhit24 9n&7 t2ll5H4 t(m nhQt7 la92n)2/_B Nh= 9"y4 c}u
lnh ny s -=[c -;t t/5n& #h?n 5nClic$ nh= sau7
uHTDLf
uHyADf
uTITLyfThay mau n2n !an& clic$ chu5tuvTITLyf
uDyTA htt#C2,ui9`lC5nt2ntCTy#2l c5nt2nt`lt2itvhtmlL cha/s2t`ut~Clf
uvHyADf
uhODtf
uhMfThay -i mu nAn sR )Xn& -i t=[n& )5cum2ntuvhMf
<INPUT type="button" name="ThayMauNen" value="Thay i mu nn"
onCIick="document.bgCoIor = 'bIue' ">
uvhODtf
uvHTDLf
NI
01i # ?/ Dinh h5Q 9ic -Sc &i: t/c t/5n& #h?n tR t2it 9 hiTn thc /a mn h0nh
Yu cu: To mt hp text c tn l HoTen. Mt nt c tn l HienThi, value = "Hin
thj". Khi ngui dng click vo nt HienThi th hin thj ni dung trong hp text
bng hm alert.
H'ng $Hn: mT lky &i: t/c cGa mt #h?n tR HTDL n5 -@4 chOn& ta 9i*t
OT.# C&-# 1JSLB("=
T#ong )Q: uT+n #h?n tRf ch(nh l &i: t/c cGa thuc t(nh nam2 $hi !Qn tQ5 thB
:O $% : C H5t2nB9alu24 Dan&KyB9alu24 bi5iTinhB9alu24 wassH5/)B9alu2 9B9e
Minh ho :
uHTDLf
uHyADf
uTITLyfmSc &i: t/c t/5n& h# t2ituvTITLyf
uvHyADf
uhODtf
uhMfH|y & 9nn !'n 95 t/5n& h# t2it 9 clic$ 95 nOt HiTn thcuvhMf
uINwUT ty#2`lt2itl #(A=`lH5T2nl f
uINwUT ty#2`l!utt5nl nam2`lHi2nThil 9alu2`lHiTn thcl :#Ci%3`lal2/t]@oTAnB&!CuA_L lf
uvhODtf
uvHTDLf
L/ .7 Khi mun lky &i: t/c cGa #h?n tR n5 -@ !Un& Fa9a8c/i#t th0 !Qn #h'i -;t ch5 n@
mt c:i t+n4 nh= 9( )X t/+n4 -T lky &i: t/c t/5n& h# t2it ta -| -;t ch5 h# t2it ny t+n
]nam2_ l H:T=#B
01i # DE/ Dinh h5Q 9ic thay -i &i: t/c cGa h# t2it!5i
LE/ c/: TQ5 /a !a h# t2it l?n l=[t t+n l 85Han&N4 85Han&M4 K2tua 9 mt nOt c@ t+n l
TinhT5n&4 -T thVc hin #h^# t(nh tn&B Khi n&=>i )Wn& nh"# hai s hQn& 95 h# 85Han&N
9 85Han&M4 sau -@ clic$ 95 nOt TinhT5n& th0 $*t ,u' tn& s -=[c l=u 95 t/5n& h# t2it
K2tuaB
H'ng $Hn: mT thay -i &i: t/c mt thuc t(nh n5 -@ cGa #h?n tR HTDL4 !Qn 9i*t th25 c:ch
sau7
OT.# %p( C&-# 1JSLOT.# 1&"N% 1Q#&S T O8i9 15k A7iS
Trong : Tn phn t chnh l gi trj ca thuc tnh name khi bn to th.
:O $%: H5T2nB9alu2 ` lm}y l 9nn !'n mJil4 Dan&KyB9alu2 ` l8i&n U# n5Hl4 9B9e
uHTDLf
uHyADf
uTITLyfThay -i &i: t/c cGa thuc t(nhuvTITLyf
uDyTA htt#C2,ui9`lC5nt2ntCTy#2l c5nt2nt`lt2itvhtmlL cha/s2t`ut~Clf
uvHyADf
uhODtf
uhMfH|y nh"# hai s 9 clic$ 95 nOt T(nh tn&uvhMf
uINwUT ty#2`lt2itl nam2`lS:H(#*Rl f
uINwUT ty#2`lt2itl nam2`lS:H(#*2lf `
uINwUT ty#2`lt2itl nam2`lU=1z"(lf
uINwUT ty#2`l!utt5nl 9alu2`lT(nh tn&l
5nClic$``U=1z"(BB("= ` C(5D={:(1]85Han&NB9alu2_ C(5D={:(1]85Han&MB9alu2_`f
uvhODtf
uvHTDLf
L/ .: C bi: t/c l=u t/5n& h# t2it luYn l mt i}u4 )5 9"y -T thVc hin #h^# cn& -=[c
-On&4 !Qn c?n #h'i chuyTn &i: t/c san& )Qn& s !Un& hm #a/s2\l5at ]H5;c #a/s2Int_ nh=
t/+nB
C oic thay -i ny c@ thT :# )Xn& ch5 c:c #h?n tR $h:c nh= !utt5n4 ch2c$!5i4 9B9e
NP
01i t2p DD/ Dinh h5Q 9ic &Si hm $hi n&=>i )Wn& clic$ 95 mt nOt
LE/ c/: TQ5 /a P t2it c@ t+n l?n l=[t l 7 DauN2n4 DauChu4 Ti2uD24 T/an&Thai 9 mt nOt
c@ t+n l ThayD5i4 9alu2 l lThay -ilB Khi n&=>i )Wn& clic$ 95 nOt ThayD5i th0 mu nAn4
mu ch<4 ti+u -A cGa ti liu 9 thanh t/Qn& th:i cGa cRa s t/0nh )uyt s -=[c thay -i !Un&
c:c &i: t/c t/5n& t2it t=3n& n&
H'ng $Hn: hQn h5n t5n c@ thT 9i*t nhiAu c}u lnh t/5n& thuc t(nh OnClic$ nh= c:c 9( )X
t/=Jc4 tuy nhi+n n*u c@ nhiAu lnh th0 ch=3n& t/0nh t/Yn& $hYn& -=[c s:n& sGa ch5 lmB Khi
-@ !Qn c@ thT nh@m c:c c}u lnh 95 t/5n& mt hm 9 t/5n& thuc t(nh OnClic$ !Qn chz 9ic
&Si hm ny /aB
Mi#& &:I A|"
uHTDLf
uHyADf uTITLyfThay -i thuc t(nh cGa t/an& 12!uvTITLyf uvHyADf
u8CjIwT lan&ua&2`lFa9a8c/i#tlf
h"#%1i:# C(CN&(1] _

)5cum2ntBtitl2 ` Ti2uD2B9alu2L @W Th!3 )Fi tiE/ ) cT! t#!ng Z>b W@

)5cum2ntB!&C5l5/ ` DauN2nB9alu2L @W Th!3 )Fi J/ nn cT! t#!ng W@
)5cum2ntB~&C5l5/ ` DauChuB9alu2L @W Th!3 )Fi J/ ch[ cT! t#!ng W@
Hin)5HB)2~ault8tatus ` T/an&ThaiB9alu2L @W Th!3 )Fi $Gng t#ng thi cT! c! 6F W@

uv8CjIwTf
uhODtf
uhMfNh"# 95 c:c &i: t/c 9 nhkn nOt Thay -iuvhMf
uINwUT ty#2`lt2itl nam2`lTi2uD2l 9alu2`lTi+u -A mJilf
uINwUT ty#2`lt2itl nam2`lDauN2nl 9alu2`lNh"# mu 95 -}y ]9( )X !lu2_lf uhjf
uINwUT ty#2`lt2itl nam2`lDauChul 9alu2`lNh"# mu ch< 95 -}y ]9( )X Hhit2_lf
uINwUT ty#2`lt2itl nam2`lT/an&Thail 9alu2`lNh"# )n& t/Qn& th:i 95 -}y lf uhjf
uINwUT ty#2`l!utt5nl nam2 `lThayD5il 9alu2`lThay -il :#Ci%3`lH(A] _Llf
uvhODtf
uvHTDLf
2hn -\t: 9( )X t/+n4 $hi n&=>i )Wn& clic$ chut l+n nOt T&($D:i th0 hm C(CN&(1\ ^ s -=[c &SiB
Thanh tiu
ca ca s
Thanh tiu
ca ca s
Thanh trng
thi ca ca s
Thanh trng
thi ca ca s
Ns
nti 16V#* S15i#*
hkt $ mt !i*n i}u h5;c mt hUn& i}u -Au -=[c c5i l mt -i t=[n& i}uB
o( )X ta c@7 9a/ s ` lHun& t2nCA#t2chl4 lFa9a8c/i#tl hay
9a/ i ` n2H 8t/in&]l12lc5m2 t5 A#t2chl_ th0 !i*n s4 i 9 hUn& lH=n& t+n C A#t2chl -A l
c:c -i t=[n& i}u 9 -Au c@ c:c #h=3n& thc 9 thuc t(nh )=Ji -}yB
Thuc
t(nh
T.# 1&"N% 1Q#& ; #*&}( VQ EM
l2n&th Ch5 !i*t - )i cGa mt i}u i
9a/ i ` la!clL
al2/t]iBl2n&th_L vv I
al2/t]lA#t2chlBl2n&th_L vv x
wh=3n&
thc
T.# C&6G#* 1&'% ; #*&}( VQ EM
cha/At]n_ Ch5 ta $ tV tQi 9c t/(7 n al2/t]sBcha/At]r__L vvH
in)2iO~]i_
Ch5 ta 9c t/( iukt hin cGa i}u
s t/5n& i}u sB N*u $hYn& thky
th0 9c t/( t/' 9A l CNB
sBin)2iO~]lA#t2chl_ Cf
lH2ll5lBin)2iO~]l2l_ Cf N
lFa9alBin)2iO~]lCl_ Cf CN
lastIn)2iO~]i_
Ch5 ta 9c t/( cui cWn& cGa
i}u i t/5n& i}u s
sBlastIn)2iO~]lnl_ Cf
lH2ll5lBlastIn)2iO~]lll_ Cf I
su!st/in&]nN4 nM_
Lky /a mt i}u c5n t/5n& i}u
s4 lky tK 9c t/( nN -*n nM ]s
$ tV lky /a l nMCnN $ tV_
sBsu!st/in&]r4I_ Cf lHunl
sBsu!st/in&]M4P_ Cf ln&l
lH2ll5lBsu!st/in&]M4s_ Cflll5l
t5L5H2/Cas2]_
ChuyTn i}u s thnh ch<
th=>n&
sBt5L5H2/Cas2]_ Cf lhun& y2nCa#t2chl
lH2ll5lBt5L5H2/Cas2]_Cflh2ll5l
t5U##2/Cas2]_
ChuyTn i}u s thnh ch<
HOA
sBt5U##2/Cas2]_ Cf lHUNb tyNC
AwTyCHl
lH2ll5lBt5U##2/Cas2]_ Cf lHyLLOl
!i&]_ In t5 i}u s
E:%"A=#1L<5i1=]sB!i&]__
E:%"A=#1L<5i1=]la!clB!i&]__
!5l)]_ In -"m i}u s
E:%"A=#1L<5i1=]sB!5l)]__
E:%"A=#1L<5i1=]la!clB!5l)]__
~5ntc5l5/]m_
In i}u s 9Ji mu mB 9( )X
mu7 l/2)l4 l!lu2l
mlma&2ntal 9B9BB
E:%"A=#1L<5i1=]sB~5ntc5l5/]l!lu2l__
E:%"A=#1L<5i1=]la!clB~5ntc5l5/]l/2)l__
~5ntsiq2]n_ In i}u s 9Ji $(ch c ~5nt l n
E:%"A=#1L<5i1=]sB~5ntsiq2]Ir__
E:%"A=#1L<5i1=]lFa9alB~5ntsiq2]Mr__
st/i$2]_
In i}u s 9Ji -=>n& &Qch
n&an&
E:%"A=#1L<5i1=]sBst/i$2]__
su!]_ In i}u s )=Ji )n& hin tQi
E:%"A=#1L<5i1=]sBsu!]__
E:%"A=#1L<5i1=]lHllMlBsu!]_
lOl_vvHMO
su#]_ In i}u s t/+n )n& hin tQi
E:%"A=#1L<5i1=]sBsu!]__
E:%"A=#1L<5i1=]lil lMlBsu#]__Lvv Cf i
M
anch5/]A_
TQ5 mt -iTm n254 c@ t+n l
A4 #h?n hiTn thc l sB
E:%"A=#1L<5i1=]sBanch5/]lTOwl__
lin$]A_
TQ5 mt li+n $*t -*n -iTm
n25 A4 #h?n hiTn thc l s
E:%"A=#1L<5i1=]sBlin$]lTOwl__
E:%"A=#1L<5i1=]loA -?u
t/an&lBlin$]lTOwl__
nti 16V#* M(1&
oJi -i t=[n& Dath4 Khi $hai !:5 !i*n thuc -i t=[n& ny4 !Qn $hYn& -=[c 9i*t )Qn&
nh= 7 9a/ m ` n2H Dath]_L Khi mun sR )Xn& c:c thuc t(nh 9 #h=3n& thc cGa -i t=[n&
ny !Qn &Si t/Vc ti*# c:c thuc t(nh 9 #h=3n& thc4 9( )X7 DathBsin]IBNP_4 DathBwI4
DathBa!s]i_ 9B9BBB
Thuc
t(nh
T.# 1&"N% 1Q#& ; #*&}( VQ EM
wI Ch5 ta hUn& s wI ]tc IBNPNs_
9a/ hanKinh ` NrL
al2/t]lDin t(ch h0nh t/n l 7l DathBwI
hanKinhhanKinh_L
y Ch5 ta hUn& s y ]` MBNe_ al2/t]lHUn& s y l7 l DathBy_
Nx
8jTM Ch5 ta cnn !"c M cGa M 7
]`NBPNPM_
al2/t]lCnn !"c M cGa M ` l
DathB8jTM_L
8jTNgM
Ch5 ta ]cnn !"c M cGa M_ v M al2/t]lCnn !"c M cGa M vM ` l
DathB8jTNgM_L
wh=3n&
thc
T.# C&6G#* 1&'% ; #*&}( VQ EM
a!s]i_ Ch5 ta t/c tuyt -i cGa i
al2/t]DathBa!s]CN__L vv Cf N
al2/t]DathBa!s]CNBs__Lvv Cf NBs
sin]i_4 c5s]i_ T(nh sin 9 c5s cGa i
al2/t]l8in]NBs_ ` l DathBsin]NBs__L
al2/t]lC5s]r_ ` l DathBc5s]r__L
s,/t]i_ T(nh cnn !"c hai cGa i al2/t]lCnn Nx ` l DathBs,/t]Nx__L vvP
#5H]i4y_ T(nh i
y

al2/t]lxM`l DathB#5H]x4M__L vvCfIx
al2/t]lrBs`l DathB#5H]4rBs__LvvI
/5un)]i_
Lm t/n s iB N*u #h?n l sau
#h?n th"# #h}n f ` rBs th0 !{
#h?n th"# #h}n 9 cn& th+m NB
T/:i lQi th0 !{ #h?n th"# #h}n
nh=n& 9 $hYn& cn& &0
al2/t]DathB/5un)]IBs__LvvCfP
al2/t]DathB/5un)]IBx__LvvCfP
al2/t]DathB/5un)]IBP__LvvCfI
mai]a4!_
Ch5 ta &i: t/c lJn nhkt t/5n& hai
s a 9 !
9a/ a ` Nr4 ! ` NrrL
al2/t]lDai]a4!_ ` l4DathBmai]a4!__L vvNrr
al2/t]DathBmai]CN4M__LvvCfM
min]a4!_
Ch5 ta &i: t/c nh{ nhkt t/5n& hai
s a 9 !
9a/ a ` Nr4 ! ` NrrL
al2/t]lDin]a4!_`l4DathBmin]a4!__LvvNr
al2/t]DathBmin]CN4M__LvvCfCN
c2il]i_
Lm t/n s i4 N*u s i c@
#h?n th"# #h}n th0 #h?n th"#
#h}n !c ct -i sau -@ cn& th+m
N 95 i
9a/ i ` NBN4 y ` MBs4 q ` PBL
al2/t]DathBc2il]i_4
DathBc2il]y_4DathBc2il]q__L vv CfMIs
~l55/]i_
Lm t/n s i4 n*u i c@ #h?n l
th"# #h}n th0 !c ct -i4 chz lky
#h?n n&uy+nB
9a/ i ` NBN4 y ` MBs4 q ` PBL
al2/t]DathB~l55/]i_4
DathB~l55/]y_4DathB~l55/]q__L vv CfNMP
nti 16V#* D(1=
U&(i >9: >i4# 1&"N% /ti 16V#* D(1= #&6 D("H B(5 OT.# >i4#S T #=< D(1=\^y
VQ EM #*$, *iv &i!# 1Ii 1&' &(i 20/R2/200g, ~&e0x 20xx, 1( %2 %9% 341 f"K D("H
T.# C&6G#* 1&'% ; #*&}( VQ EM
&2tDay]_
Lky th hin tQi t/5n& tu?n ]ChG nh"t n&
9Ji r4 th hai n& 9Ji N4 BBB4 th n& 9Ji
x_
9a/ D ` n2H Dat2]_L
al2/t]DB&2tDay]__L vvCf N
&2tDat2]_ Lky n&y hin tQi al2/t]DB&2tDat2]__L vvCfMr
&2tD5nth]_
Lky th:n& hin tQi ]rCfth:n& N4 NCf th:n&
M_
al2/t]DB&2tD5nth]__L vvCfNN
&2tt2a/]_ Lky nnm hin tQi al2/t]DB&2tt2a/]__LvvCfMrrP
&2tH5u/s]_ Lky &i> hin tQi ]T(nh th25 MP h_ al2/t]DB&2tH5u/s]__LvvCfx
&2tDinut2s]_ Lky #hOt hin tQi al2/t]DB&2tDinut2s]__LvvCfIr
&2t82c5n)s]_ Lky &i}y hin tQi al2/t]DB&2t82c5n)s]__LvvCfMr
s2tDat2]n_ m;t n&y l n
DBs2tDat2]Nr_L
al2/t]ah}y &i>7 aDB&2tDat2]__L vvNr
c:c #h=3n& thc s2tt2a/]n_4 s2tH5u/s]n_ cZn& lm t=3n& tVB ChO 4 s n #h'i l s n&uy+nB 9 9ic s2t -@ chz
lm thay -i &i: t/c n&y4 th:n& nnm4 &i>4 #hOt4 &i}y BBB cGa -i t=[n& Dat2 ch $hYn& lm thay -i n&y &i>
cGa h thn& m:y t(nhB
N
C&6G#* IIIH XJ ; Du 3i!# 15:#* 15(#* HTML B7i J(B(S%5iC1
Mc tiu ca chng:
C Gip hoc vin nhn bit uoc khi no s kin xy ra
C Vit cc cu lnh JavaScript t vo cc s kin khi n xy ra
C Vn dung linh hot vo vit chuong trnh
Ni dung:
1. Nhc Ii khi nim s kin (event)
S kin l nhng hnh ng do ngui dng hoc h thng gy ra. Cc hnh ng
do ngui dng gy ra c th l di chuyn chut, nhn chut, nh chut, nhn phm,
nh phm, copy, ko gin ca s, di chuyn ca s v.v... Cc s kin do h thng
gy ra c th l np ti liu, ng ca s v.v...
Khi s kin xy ra, n s t dng thc thi cc cu Inh JavaScript tung ng vi s kin
(nu chng ta jnh ngha chuong trnh x l s kin tuong ng).
2. Bng Iit k cc s kin v tn tung ng
Mi s kin khi xy ra chng u c mt ci tn v thung bt u bng t on, v du nhu onClick,
onChange.... cu th uoc m ta nhu trong bng dui y:
Tn S kin Ch p dng ch ph!n t" M# t$
Onabort mage uoc kch hot khi ngui s dung
hu b vic ti mt hnh nh bng
cch kch vo mt kt ni hoc nt
Stop
Onblur Window, frame, all form element Khi phn t bj mt focus
Onclick Button, radio button, check box, submit
button, reset button, link
uoc kch hot khi ngui s dung
kch tri chut vo phn t.
Onchange Text field, textarea, select list N uoc kch hot khi ngui s
dung thay i gi trj ca phn t.
Onfocus Window, frame, all form element N uoc kch hot khi ngui s
dung t focus vo mt ca s,
khung, hay phn t form
Onload Document, applet, frameset, img, link,
object, script, style, window
N uoc kch hot khi ti liu
uoc trnh duyt np xong.
Onmousedown Button, document, link N uoc kch hot khi ngui s
dung n nt con chut
Onmouseout Area, layer, link N uoc kch hot khi ngui s
dung di chuyn con tr ra khi mt
phn t.
Onmouseover Area, layer, link N uoc kch hot khi ngui s
dung di chuyn con tr khp mt
phn t.
Onmouseup Button, document, link N kch hot khi ngui s dung
nh nt con chut uoc n.
Onreset Form Khi ngui s dung click vo nt
reset form
Onresize Window, frame N kch hot khi ngui s dung
ko gin ca s hoc mt khung.
onsubmit Form N uoc kch hot khi ngui s
N
dung click vo nt submit ca
form.
onunload Document, frameset, image, window N uoc kch hot khi ngui s
dung chuyn sang (m) mt trang
khc.
Vy p dung tn cc s kin lit k trn nhu th no ?
Nu bn bit khi no mt s kin xy ra th bn hon c th thc thi cc cu lnh JavaScript
tuong ng vi s kin .
C php khai bo trnh duyt thc thi cc cu Inh JavaScript khi mt s kin xy ra nhu sau:
a/ Cch 1: <Tn th <Tn s kin> = " <Mt Cu Inh JavaScipt>" ..... >
Lu : Mt cu Inh JavaScript c th l bt ky cu lnh no m bn hoc. Cu lnh ny phi
uoc t trong cp nhy kp (hoc cp nhy on).
%& d' :
<nput onCIick = "aIert('Bn d cIick vo textbox');" >
%& d (:
<nput type=button value="Th" onMouseMove = "aIert('Bn di chut');">
%& d ):
<P onCIick = "window.status='Vn bn bj click chut';"> Hello ! </P>
%& d *:
<nput type = submit value = "Gi" oncIick = "aIert(' duc gi');">
Ta hy i phn tch v du 1. Trong v du ny ta to ra mt textbox v vit (khai bo) s kin click
nhu sau : onCIick = "aIert('Bn d cIick vo textbox');"
y c 2 phn:
C Phn onCIick : l tn ca s kin click chut (xin tham kho bng trn).
C Phn th 2 sau du =, l mt cu lnh JavaScript tuong ng s uoc thc thi khi s kin
click chut xy ra i vi textbox . y l cu lnh alert.
iu ny c ngha l, bt c khi no ngui dng click chut vo textbox ny th trnh duyt s t
ng thc thi cu lnh aIert('Bn d cIick vo textbox');
+,t -u.n: Nu chng ta mun trnh duyt thc thi mt cu lnh no khi mt s kin xy ra th
cn khai bo trong phn jnh ngha th nhu sau:
<Tn s kin> = "<Cu Inh JavaScript cn thc thi>"
Tuong t trong v du 2: Bt c khi no ngui dng di chuyn chut trong textbox (tn s kin l
onMouseMove) th lnh "alert('Bn di chut');" s uoc thc thi.
Trong v du 3: Bt c khi no bn click chut vo dng ch "Hello !" th thanh trng thi ca ca
s s c dng ch : "Vn bn bj click chut"
Trong v du 4: Theo bn, thng bo " duc gi" khi no th xut hin !?
b/ Cch 2: Bn c th khng chi vit mt cu lnh khi mt s kin xy ra i vi mt phn t no
m JavaScript cn cho php bn thc thi nhiu cu lnh ng thi, vi iu kin cc cu lnh ny
phi uoc phn cch nhau bi du chm phy ";".
C/ php 0i,t nh 1au:
<Tn th <Tn s kin>=" <Cu lnh 1>; <Cu lnh 2>; ...; <Cu lnh n>" .... >
%& d ':
<input oncIick="window.status='Click chut'; alert('Bn click chut')">
Trong v du ny, ta to mt textbox v khi ngui dng click chut vo textbox ny th trnh duyt s
thc thi 2 cu lnh tuong ng nhu ta chi ra trong th :
window.status='CIick chut' v aIert('Bn d cIick chut'). 2 lnh ny uoc phn cch nhau bi
du chm phy.
%& d (:
N
<input name=Hoten onFocus="Hoten.value=' ' ; window.status='Ho tn nhn focus' ;
window.document.title = 'Ni dung trong textbox bj xo' ">
Trong v du ny ta cng to ra mt textbox v khi textbox ny nhn uoc focus (click chut) th trnh
duyt s t ng thc thi 3 cu lnh :
Hoten.value=' '
window.status='Ho tn nhn focus'
window.document.title = 'Ni dung trong textbox bj xo'
Nh.n 23t: Nu s cu lnh cn thc thi khi mt s kin xy ra l t (Mt hoc hai cu lnh) th ta c
th khai bo on chuong trnh x l s kin s dung theo cch 1 hoc cch 2. Cn trong trung
hop s cu lnh cn x l l ln, th cch nn s dung cch khc m ta s cp dui y.
C4 Cch ): Goi mt hm khi mt s kin xy ra.
V bn cht cch ny chnh l cch mt, c iu cu lnh l mt li goi hm.
Cch ny thung uoc s dung khi :
S lnh cn thc thi khi mt s kin xy ra l ln
m bo cho chuong trnh sng sa v d oc, d qun l v bo tr
C php khai bo hm trong jnh ngha s kin nhu sau:
<Tn th <tn s kin> = "Tn hm cn goi([Tham s nu c )" .... >
%& d:
1/ <input onclick ="Ham1()" >
2/ <input type = button value = Gui onclick = "GuiThongTin()">
3/ <input type = radio name = GT onclick = "KiemTra()">
Trong , Ham1(), GuiThongTin() v KiemTra() l cc hm.
Tm li: Tuy vo trung hop cu th m khi mt s kin xy ra, bn c th vit mt lnh, nhiu lnh
hoc mt hm tuong ng s uoc thc thi trong jnh ngha th. Tuy nhin, mt qui tc chung l: Nu
on chuong trnh x l s kin chi c mt lnh th nn vit theo cch a, cn tri li th nn vit cc
lnh trong mt hm (tc theo cch vit b).
3. Mt s bi tp minh ho
%& d ': Hy to mt nt nhn (button) c value = "Th". Khi ngui dng click vo nt ny th tiu
ca ca s s l "Bn click chut"
Hng dn: Truc ht ta cn xc jnh xem cc lnh no cho php ta thay i tiu ca ca s
thnh "Bn click chut", tip theo l t cc lnh vo u khi ngui dng click chut th n
uoc thc thi theo nhu yu cu bi ton
Lnh thay i tiu nhu sau: document.titIe = "Bn click chut"
Nhu ta bit khi ngui dng click th s kin onCIick xut hin, do vy cu lnh trn s
uoc t tuong ng vo s kin onClick, nhu sau:
<HTML>
<HAD>
<TTL>Hay click vao nut o duoi va quan sat tieu de</TTL>
</HAD>
<BOD>
<input type=button value="Thu" onCIick="document.title='Ban da click chuot' ">
</BOD>
</HTML>
%& d (: To mt trang Web, c 2 phn t : Phn t button c value = "Gi", v mt phn t
textbox.u cu: khi ngui dng click vo nt Gi th thng bo trn mn hnh l : "Bn click vo
nt gi" cn khi ngui dng click vo textbox th thng bo l "Bn click vo textbox".
56ng d7n: Theo yu cu ca bi th dng thng bo "Bn click chut vo nt gi" xut hin chi
khi ngui dng click chut vo nt gi, do vy cc lnh thc hin hin thj thng bo s uoc dt
trong s kin oncIick ca nt nhn. Cn dng thng bo "Bn click chut vo text box" khi
ngui dng click chut vo textbox, do vy cc lnh thc hin hin thj dng thng bo s uoc dt
trong s kin oncIick ca textbox :
Minh h8:
Mr
<HTML>
<HAD>
<TTL>Hay click vao nut va textbox o duoi va quan sat tieu de</TTL>
</HAD>
<BOD>
<input type=button value="Gui" onCIick="alert( 'Ban da click chuot vao nut') ">
<input type=text oncIick = "alert('Ban da click chuot vao textbox') ">
</BOD>
</HTML>
%& d ): To 2 nt, nt th nht c value = "anh", nt th hai c value = "". Yu cu: Khi ngui
dng click vo nt xanh th mu nn ca ti liu l xanh (blue), cn khi ngui dng click vo nt
th mu nn ca ti liu l: (red).
Hng dn: Thuc tnh mu nn ca ti liu uoc luu trong thuc tnh bgColor ca i tuong
document. Thuc tnh ny c th thay i uoc.
Minh ho:
<HTML>
<HAD>
</HAD>
<BOD>
<input type=button value=anh oncIick="window.document.bgCoIor = 'blue'; ">
<input type = button value =Do oncIick="window.document.bgCoIor = 'red'; ">
</BOD>
</HTML>
%& d *:
To mt danh sch la chon gm c 4 mu: red, blue, brown v lavender. Khi ngui dng chon mt
mu th mu nn ca ti liu s thay i tuong ng.
Hng dn: thay i mu nn ca ti liu ta lm tuong t nhu v du 3
Minh ho:
<HTML>
<HAD>
</HAD>
<BOD>
<script language = JavaScript>
function DoiMau()

document.bgColor = Mau.value;
// Hoc vit: window.document.bgo!o" # M$u.v$!ue%

</script>
Bn hy chon mu nn:
<SeIect name = Mau onchange = "DoiMau();" >
<option value = red> Mu </option>
<option value = blue> Mu xanh </option>
<option value = brown> Mu nu </option>
<option value = lavender> Mu xanh nht</option>
</seIect>
</BOD>
</HTML>
%& d 5 : To mt textarea c tn l NoiDung, mt Textbox c tn l : SoKyTu. Vi yu cu nhu sau:
Khi ngui s dung g cc phm vo trong textarea th s luong k t ( di xu) cha trong
textarea s uoc hin thj trong textbox. Nu s luong k t trong textarea g vo vuot qu 2 k
t th thng bo : "Bn g qu s k t cho php !".
<html>
MN
<head>
<meta httpequiv="ContentType" content="text/html; charset=utf">
</head>
<script language="JavaScript">
function KiemTra()

if (NoiDung.vaIue.Iength > 200) alert("Bn g qa s k t cho php !");

SoKyTu.vaIue = NoiDung.vaIue.Iength; // Hi&n th' () * t+ t"ong te,tbo, -o./0u

</script>
<body style="fontfamily:arial">
S k t g : <input type="text" name="SoKyTu"> <B>
<textarea name="NoiDung" cols=5 rows="1" onKeyUp="KiemTra();"> </textarea>
</body>
</html>
9 0& d t:n: Hm kim tra s uoc goi mi khi s kin nhn phm (onKeyp) xut hin hay ni
cch khc l khi ngui dng g thm mt k t vo trong textarea. y ta khng t hm kim tra
vo trong s kin onCIick; Mn hnh cho v du ny c dng nhu sau:
;<=> k,t ?u$@
%& d A: To mt nt c value = "Gi", textbox c name = "HoTen", 2 nt radio c tn l GioiTinh v
nhn tuong ng l Nam, n.
Yu cu: Khi ngui dng di chuyn chut vo phn t no th hin thj thng bo tuong ng dui
thanh trng thi. V du nu ngui s dung di chuyn chut qua nt nhn "Gi" th thanh trng thi s
l "Bn ang di chuyn chut vo nt"...
Hng dn: Khi ngui dng di chuyn chut th s kin di chuyn chut s xut hin, s kin ny c
tn l : onMoseMove. Vy ta s vit lnh trong s kin ny.
Minh ho: m1n h2nh
MM
<html>
<head>
<title>u ly su kien</title>
<meta httpequiv="ContentType" content="text/html; charset=utf">
</head>
<body style="fontfamily:arial">
<input type="button" value="Gi" onmousemove="window.status = 'Chut trong nt'; ">
<input onMouseMove ="window.status='Chut trong textbox';"> <B>
<input type="radio" name="GioiTinh" onMouseMove="window.status='Trong nam';">Nam </option>
<input type="radio" name="GioiTinh" onMouseMove="window.status='Trong n';"> N </option>
</body>
</html>
<em kt qu>
%& d B:
To 3 textbox, c tn ln luot l: SoLuong (S luong), DonGia (on gi) v ThanhTien (Thnh tin);
Yu cu: Khi ngui dng nhp gi trj trong DonGia th kt qu s uoc cp nht ngay trong
ThanhTien.
Hung dn: Khi ngui dng nhp gi trj trong textbox DonGia bng cch nhn cc phm s th s
kin nhn phm xut hin (s kin nhn phm c tn l onKeyp), do vy ta s vit cc lnh p ng
vi s kin ny. Cc lnh y chi c mt do vy nn t ngay trong jnh ngha th, nhu sau:
<html>
<head>
<title>Tinh tich</title>
<meta httpequiv="ContentType" content="text/html; charset=TF">
</head>
<body style="fontfamily:arial;backgroundcolor:lavender">
<H1>Bn hy nhp vo s luong v gi:</H1>
S luong: <input name="SoLuong">
on gi:<input name="DonGia" onKeyUp="ThanhTien.value=SoLuong.value*DonGia.value"> <H>
Thnh tin:<input name="ThanhTien"> SD
</body>
</html>
MI
<em kt qu>
%& d C: Tuong t nhu v du , nhung vit theo cch khai bo 3 (Cc lnh vit trong hm). Kt qu
vn cho ta nhu v du
<html>
<head>
<title>Tinh tich</title>
<meta httpequiv="ContentType" content="text/html; charset=TF">
<Script language = JavaScript>
function TinhToan()
{
ThanhTien.vaIue=SoLuong.vaIue*DonGia.vaIue ;
// Hoc bn vit 3/ 34 !1:
// window.0h$nh0ien.v$!ue # window.-oLuong.v$!ue5window.6on7i$.v$!ue

</head>
<body style="fontfamily:arial;backgroundcolor:lavender">
<H1>Bn hy nhp vo s luong v gi:</H1>
S luong: <input name="SoLuong">
on gi: <input name="DonGia" onKeyUp="TinhToan();"> <H>
Thnh tin: <input name="ThanhTien"> SD
</body>
</html>
MP
%& d D: To ra mt trang Web ng nhp vo trang Vinaphone cho php ngui gi tin nhn n
in thoi di ng.
hng dn: ng nhp vo mt trang Web no , nhng thng tin bt buc thung l
serName v password (mt khu). Tuy nhin, ngoi nhng thng tin bt buc chng ta cn phi
gi cc thng tin phu. Nhng thng tin phu ny ngui dng ngui dng khng phi nhp. (cc thng
tin phu dui y s uoc gch chn)
Minh ho:
<HTML>
<HAD>
<meta httpequiv="ContentType" content="text/html; charset=TF">
<title>Dang nhap vao trang http://sms.vinaphone.vnn.vn</title>
</HAD>
<BOD style="fontfamily:arial">
<H2>ng nhp vo trang Web ca vinaphone </H2><H>
<form action="http://sms.vinaphone.vnn.vn/sms/servlet/sernterface" method=post>
User Name Password <B>
<input type="text" id = username name="username" size="2">
<input type="text" id= password name="password" size="2">
8in9ut t/9e#:hidden: n$me#:id: v$!ue#:;: <
8in9ut t/9e#:hidden: n$me#:!$ngu$ge: v$!ue#:en:<
Ms
<input type="submit" value="Dang nhap Login">
</p>
</form>
</BOD>
</HTML>
Cc th c thuc tnh type = "hidden" s khng uoc hin thj trong trnh duyt, tuy nhin khi chng ta
"Submit" th cc thng tin trong cng uoc gi i.
<em kt qu>
Cc bi tp t gii
Bi ': Hy to ra trang Web c giao din nhu sau:
Yu cu:
Khi ngui dng di chuyn chut n phn t no th hin thj dng nhc dui thanh trng thi
hung dn ngui dng. V du: Khi ngui dng ua chut vo trong textbox ser Name
Mx
th th hin thj dui thanh trng thi l :"Nhp m ngui dng", hay khi ngui ua chut n
nt "ng k" th hin thj dng nhc: "Gi thng tin i ng k" v.v...
Hng dn: Nt ng k nn l nt thung, tc l to bng th :
<input type = button vaIue = "ng k">
Bi t.p ( : C giao din nhu bi 1, nhung yu cu nhu sau:
Khi gi thng tin i, cn kim tra xem ni dung ngui dng g trong Password vi textbox
trong "G li password" c ging nhau hay khng? Nu bng nhau th mi gi (Submit) i,
cn nu khng bng th thng bo l "Password phi ging nhau"
Khi gi thng tin, cn kim tra ngy sinh, thng sinh phi hop l. (Tc ngy phi nh hon 32,
thng phi nh hon 13)
Hng dn:
Nt ng k nn l nt thung, tc l to bng th :
<input type = button vaIue = "ng k" onCIick = "DangKy();">
Trong Hm DangKy() s kim tra d liu hop l v khi d liu nhp vo ng n th gi i bng
cch goi phuong thc submit ca i tuong document, nhu sau: document.submit();
Bi tp 3:
Lm tuong t bi tp v , nhung thm yu cu: Khi ngui dng nhp hoc s luong, hoc on
gi th hy tnh lun textbox thnh tin.
Hung dn: Vit lnh tnh thnh tin trong c 2 s kin onKeyp ca c hai textbox s luong v
textbox on gi.
EEE Fu G: Truc khi tnh tch th cn phi kim tra xem d liu trong hai textbox c hay chua, nu
mt chua nhp g th chua tnh.
C&6G#* IVH nk#& EI#* %9% C&-# 1J HTML >#* CSS
FGc tiu cH! ch-ng/
C biO# hSc 9i+n hiTu / h3n 9A n&ha cGa 9ic )Wn& $iTu ]styl2_
C T/a cu thnh thQ5 c:c thuc t(nh t/5n& !'n& ):nh s:ch $iTu
C o"n )Xn& c:c thuc t(nh ]$iTu_ -T -cnh )Qn& ch5 c:c #h?n tR t/5n& t/an& H2!4 n}n&
ca5 t(nh thm m.B
I%i ;ung/
IL N&% Ii 3&9i #i!A Bc 3i["
KiTu ]styl2_ thVc chkt l mt c:ch -cnh n&ha thuc t(nh ch5 c:c #h?n tR t/5n& t/an& H2! th25
mt c:ch thc mJiB
oic -cnh n&ha c:c thuc t(nh ny ch5 c:c #h?n tR s ch5 ta mt l):n& 9 mJil4 mt l)in
mQ5 mJil 9A t/an& H2!B N&5i /a4 9ic -cnh n&ha thuc t(nh th25 cO #h:# mJi ny s lm
tiAn -A ch5 9ic i}y )Vn& c:c t/an& H2! -n& m ta s -A c"# t/5n& c:c ch=3n& ti*# th25B
JK ;G/ T/=Jc -}y4 -T -cnh n&ha mt -5Qn 9nn !'n nUm t/5n& th uwf c@ ~5nt ch< l B9ntim24
chOn& ta s 9i*t nh= sau7
uw fu{ONT h(%=`BonTim2fDn& 9nn !'n ny c@ ~5nt ch< l B9ntim2uv\5ntfuv#f
Nh=n& 9Ji c:ch -cnh )Qn& mJi th25 cO #h:# m ta &Si l cO #h:# C884 th0 c@ thT thVc hin
y+u c?u t/+n nh= sau7
uw D1$=T `h:#1rh(Ai$HLB#1iA=`fDn& 9nn !'n ny c@ ~5nt ch< l B9ntim2 uvwf
IIL Mi#& &:I %9%& 3&(i >9: D1$=
T/5n& Fa9a8c/i#t4 !Qn c@ thT thi*t l"# c:c thuc t(nh ch5 mt th n5 -@ th25 /kt nhiAu c:chB
D=Ji -}y iin &iJi thiu I c:ch thi*t l"# thuc t(nh ch5 th4 -@ l 7
Thi*t l"# ]mcnh n&ha_ thuc t(nh n&ay t/5n& $hi -cnh n&ha th ]ta&_4 $iTu ny cn
&Si l -cnh n&ha $iTu mc )n& ]styl2 lin2_
M
Thi*t l"# thuc t(nh ch5 t5n ! mt l5Qi th n5 -@B C:ch ny cn &Si l -cnh n&ha
! chSn
mcnh n&ha mt lJ#4 sau -@ c@ thT -2m /a sR )Xn& ch5 !kt $ #h?n tR n5
mcnh n&ha ! chSn ID4 ch5 #h^# :# )Xn& tkt c' c:c thuc t(nh cGa ! chSn 95 tkt c'
c:c th c@ thuc t(nh ID #hW h[# 9Ji m| ID t/5n& -cnh n&haB
IL S1$= 9C EM#* q A'% E#* \I#i#= D1$=^
8tyl2 mc )n& ]inlin2 styl2_ ch5 #h^# !Qn c@ thT thay -i h0nh thc ]styl2_ cGa mt #h?n tR
n5 -@ !Un& c:ch th+m c:c thuc t(nh -cnh )Qn& t/Vc ti*# 95 n&ay !+n t/5n& -cnh n&ha cGa
thB
Dt s 9( )X minh h5Q
JK ;G D/ mT tQ5 mt )n& 9nn !'n 9Ji th uwfL c@ mu ch< l -{4 !Qn c@ thT 9i*t nh= sau7
uw D1$= T `%::5H>"=`f Du ny l mu cGa h5 !0nh uwfB
K*t ,u' ch5 ta 7
Du ny l mu cGa h5 !0nh

JK ;G 3 / mT tQ5 mt mt !utt5n ]NOt nhkn_ c@ mu nAn l t(m ]ma&2nta_4 !Qn 9i*t7
uin#ut ty#2`l!utt5nl D1$=T`>(%3*5:"#Er%::5HA(*=#1(` 9alu2`lH2ll5
H5/l)lf
K*t ,u' 7
JK ;G 4/ TQ5 mt nOt nhkn ]hutt5n_4 t/5n& -@4 $hi n&=>i )Wn& -=a chut -*n nOt -@ th0 c5n
t/{ chut c@ h0nh !n tay
Thuc t(nh ,ui -cnh chut c@ $iTu h0nh !n tay l lcu/s5/7han)l4 )5 9"y c?n th+m thuc t(nh
ny t/5n& -cnh n&ha th
uIn#ut ty#2 ` !utt5n D1$= T `%"5D:5H&(#E` 9alu2`lChut h0nh !n tay lf
Ta -[c $*t ,u' ]hQn )i chut 95 nOt ny_7
JK ;G 5 / TQ5 mt t2it!5i c@ 9iAn mu -{
Thuc t(nh tQ5 9iAn mu -{ l 7 l!ac$&/5un)C!5/)2/7/2)l4 )5 9"y !Qn c?n -;t 95 t/5n& -cnh
n&ha th t2it nh= sau7
uin#ut ty#2`lt2itl D1$=T`>:5E=5r%::5H5=E` 9alu2`l9iAn mu -{lf
K*t ,u' ch5 ta mt t2it!5i c@ 9iAn mu -{7
Ih2n Lt /
| T/5n& c:c 9( )X t/+n4 chOn& ta c@ thT thi*t l"# mt s thuc t(nh cGa !kt $ #h?n tR n5
!Un& c:ch -=a 95 )n& D1$= T `T.# 1&"N% 1Q#&H8i9 15k %p( 1&"N% 1Q#&` T/5n& -@4 C;# t+n
thuc t(nh 7 bi: t/c cGa thuc t(nh c:c !Qn c@ thT t/a t/5n& !'n& c:c thuc t(nhB -[c -;t t/+n
th mXc cGa m:y chGB
| C@ thT -=a 95 mt h5;c nhiAu thuc t(nh t/5n& !iTu thc styl2`lBBBBl 4 $hi -=a nhiAu thuc
t(nh th0 c:c thuc t(nh c:ch nhau !i )ku chkm #h'y `y`
JK ;G M/ TQ5 mt nOt nhkn c@ mu nAn l t(m ]ma&2nta_ 9 mu ch< l t/n& ]Hhit2_
Thuc t(nh ,ui -cnh mu nAn t(m l 7`>(%3*5:"#Er%::5HA(*=#1(`4 Cn thuc t(nh ,ui -cnh
mu ch< t/n& l `%::5H<&i1=`
Nh= 9"y c?n -cnh n&ha th l 7 uin#ut ty#2 `l!utt5nl D1$=T`>(%3*5:"#Er
M
%::5HA(*=#1(y %::5H<&i1=` 9alu2`lNAn t(mC ch< t/n&lf
K*t ,u' 7
o( )X x7 Thi*t l"# 'nh nAn cGa t/an& 12! l anhNB#&4 9 'nh ny hiTn thc 9c t/( c -cnh
]Tc l n*u !Qn c@ cun thanh cun cGa cRa s th0 'nh ny s $hYn& !c cun th25 m 9n
-n& y+n_B
hi*t /Un& thuc t(nh -=a 'nh nAn 95 t/an& H2! nh= sau7
>(%3*5:"#EriA(*=H"5\ x On6v#* E|# B 1.# hi= K#&S x^
Thuc t(nh -T 'nh 9c t/( c -cnh l 7
>(%3*5:"#Er(11(%&A=#1Hhii=E
L=u 7 -;c t(nh 'nh c -cnh chz c@ t/5n& Iy4 $hYn& c@ t/5n& N2sca#2
Nh= 9"y4 y+u c?u t/+n c@ thT thVc hin nh= sau7
u!5)y styl2`l!ac$&/5un)Cima&27u/l]anhNB#&_L !ac$&/5un)Cattachm2nt7~ii2)L c5l5/7Hhit2L
~5ntC~amily7a/iallf
uClic$ 95 -}y -T i2m minh h5Qf ]hQn #h'i -'m !'5 l m t/5n& t/0nh )uyt Iy_
JK ;G =/ TQ5 c:c li+n $*t -*n c:c t/an& htt#7vvHHHBa#t2chBut24 htt#7vvHHHB9nnB9n4 nh=n&
c:c li+n $*t ny $hYn& c@ -=>n& &Qch ch}n 9 c@ c:c thuc t(nh nh= sau7
C Du ch< 7 m{ ]/2)_
C Du nAn 7 la92n)2/
C Du $hi chut clic$ 95 li+n $*t 7 t(m ]ma&2nta_
C Du $hi t/an& -@ -| -=[c thnm 7 n}u ]!/5Hn_
@-ng ;Nn/
C Thuc t(nh ,ui -cnh mu ch< cGa li+n $*t l7 lin$C5l5/4 thuc -i t=[n& )5cum2nt
C Thuc t(nh ,ui -cnh mu nAn cGa 9nn !'n t/5n& mt th 7 !ac$&/5un)Cc5l5/ ]C88_
C Thuc t(nh ,ui -cnh cGa li+n $*t $hi !c clic$ chut 7 alin$C5l5/4 thuc )5cum2nt
C Thuc t(nh ,ui -cnh mu cGa li+n $*t -| -=[c thnm7 9lin$C5l5/4 thuc )5cum2nt
Finh hoO *PoOn trong QrA!)RA!&Ar+/
mcnh n&ha styl2 mc )n&
M
IIIL BN %&0# HTML
h chSn HTDL ch5 #h^# chOn& ta chz c?n -cnh n&ha c:c thuc t(nh mt l?n )uy nhkt ch5
mt l5Qi th HTDL n5 -@ ]o( )X w4 INwUT4 HN4 HM BBBB_4 9 9A sau tkt c' c:c 9nn !'n nUm
t/5n& l5Qi th ny s c@ cWn& -cnh )Qn& nh= nhauB miAu ny /kt c@ l[i ch5 ta t/5n& thVc t*4
chn& hQn $hi !Qn tQ5 mt H2!sit2 ch5 mt cun s:ch n5 -@ m t/5n& cun s:ch ny lQi c@
/kt nhiAu ch=3n& 9 !Qn mun mu sc4 $(ch c4 ~5nt ch<4 $iTu ):n&BBB ch5 ti+u -A c:c
ch=3n& l nh= nhau4 th0 !Qn chz c?n -cnh n&ha mt l?n 9 9A sau ti+u -A c:c ch=3n& s c@
cWn& -cnh )Qn& &in& nh= nhauB
oic chOn& ta tQ5 /a c:c t(nh chkt chun& ch5 mt l5Qi th n5 -@ th0 ta &Si l mt ! chSn
]82l2ct5/_ HTDL
mT -cnh n&ha /a mt ! chSn HTDL4 ta c@ M c:ch4 !Qn c@ thT tu chSn mt t/5n& M c:ch
nyB C:ch th nhkt l ta 9i*t th25 mt )Qn& cO #h:# m ta &Si l cO #h:# )Qn& C884 )Qn& th
hai l ta 9i*t th25 cO #h:# cGa Fa9a8c/i#tB
CO #h:# -T tQ5 ! chSn th25 C88 nh= sau7
u8tyl2 ty#2 ` lt2itvC88lf
uT+n th HTDLf uT+n thuc t(nhf 7 ubi: t/cf
uT+n th HTDLf uT+n thuc t(nhf 7 ubi: t/cf
uT+n th HTDLf uT+n thuc t(nhf 7 ubi: t/cf
BBBBBBBBBBBBBBBBBBBBBBBB
uv8tyl2f
Trong /
C uT+n th HTDLf l mt t/5n& c:c th m !Qn -| hSc4 9( )X n@ c@ thT l th w4
INwUT4 LI4 UL4 h4 HN4 HM 9B9BBB
C Tn thu%c tKnh 7 L t+n cGa thuc t(nh cGa l5Qi th m !Qn mun thay -i B N@ c@ thT
l c5l5/4 !ac$&/5un)Cc5l5/4 cu/s5/4 t2itCali&n 9B9BBB T+n c:c thuc t(nh ny c:c !Qn c@
thT t/a t/5n& !'n& ]\il2 Cac th2 su )un& t/5n& C88B)5cl nUm t/5n& th= mXc ti liu 9A
Fa9a8c/i#t cGa m:y 82/92/_
C Gi tr/ L &i: t/c mJi m !Qn mun -;t ch5 thuc t(nhB o( )X4 l/2)l4 lla92n)2/l4
lhan)l4 lc2nt2/l 9B9BBBB mT c@ thT -;t &i: t/c ch5 h[# l4 !Qn tham $h'5 t/5n& ~il27 Cac
th2 su )un& t/5n& C88B)5cl t/5n& s2/92/B
8au $hi -| -cnh n&ha t+n cGa mt l5Qi th 9Ji c:c thuc t(nh cGa n@4 th0 tkt c' c:c th cWn&
l5Qi 9A sau s c@ tkt c' c:c thuc t(nh nh= -| -cnh n&haB mT lm s:n& t{ -iAu ny4 chOn& ta
h|y lky mt s 9( )X 7

JK ;G D/ bi' sR !Qn c?n tQ5 mt )anh mXc c:c -?u s:ch cGa A#t2ch4 th25 -cnh )Qn& )3i -}y
KNO1 tOUj Dy8KTOw
O~~ic2 Mrrr
Ir
Acc2ss Mrrr
L5&ic huil)in& Hith C
HTDL4 DHTDL an) Fa9a8c/i#t
D/2am 12a92/
Dt c:ch thYn& th=>n& nhkt4 9Ji c:c $i*n thc nh<n& #h?n t/=Jc4 !Qn h5n t5n c@ thT tQ5
-=[c !Un& c:ch 9i*t nh= sau 7
Tuy nhi+n n*u th25 c:ch t/+n th0 chOn& ta )p )n& thky c@ mt -iTm ch=a -=[c thu"n tin4
-@ l mi $hi th+m t+n mt l5Qi s:ch chOn& ta c?n #h'i th+m t/5n& th w )n&7
OD1$=T`h:#1rh(Ai$HLB#1iA=Hy h:#1rDi_=H20C1y %::5H5=E`B
T/5n& t/=>n& h[# ny4 hUn& c:ch -cnh /a mt ,ui tc ]mcnh )Qn&_ chun& ch5 tkt c' c:c th w
ta c@ thT c@ $*t ,u' nh= m5n& -[i m $hYn& #h'i 9i*t lQi c:c )n& )= thKa nh= t/+nB oic
-cnh /a ,ui tc chun& ch5 th w ta &Si l -cnh n&ha ! chSn wB
:# )Xn& cO #h:# -cnh n&ha ! chSn th25 )Qn& C88 -T -cnh n&ha ! chSn w nh= sau7
ustyl2 ty#2 ` lt2itvcsslf
w h:#1rh(Ai$HLB#1iA=H
w h:#1rDi_=H20C1
w %::5H5=E
uvstyl2f
@oc nh nghS! )%t cch ngTn gUn /
ustyl2 ty#2 ` lt2itvcsslf
P h:#1rh(Ai$HLB#1iA=HL h:#1rDi_=H20C1L %::5H5=E
uvstyl2f
PHF LFC H BN8 TRA CU CC THUC TNH CA CSS
C C:c thuc t(nh :# )Xn& ch5 \5nt ch<
T&"N% 1Q#& C9% *i9 15k &VC ! VQ EM
h:#1rh(Ai$ T+n ~5nt h5;c $iTu ~5ntC~amily7 o2/)ana4
A/ialL
h:#1rD1$= n5/mal h5;c italic ~5ntCstyl27italicL
h:#1rB(5i(#1 n5/mal h5;c smallCca#s ~5ntC9a/iant7smallCca#sL
IN
h:#1r<=i*&1 n5/mal h5 !5l) ~5ntCH2i&ht7!5l)L
h:#1rDi_= iiCla/&2 iCla/&2 la/&2 m2)ium small iC
small iiCsmall la/&2/ small2/ phn
t#MJ h5;c &>ngth
~5ntCsiq27NM#tL
h:#1 ~5ntCstyl2 ~5ntC9a/iant ~5ntCH2i&ht ~5ntC
siq2 v lin2Ch2i&ht ~5ntC~amily
~5nt7 !5l) NM#t A/ialL
C C:c thuc t(nh mu 9 nAn ]C5l5/ an) !ac$&/5un) #/5#2/ti2s_
T&"N% 1Q#& C9% *i9 15k &VC ! VQ EM
%::5 M/ c5l5/7 /2)
>(%3*5:"#Er%::5 M/ h5;c t/ans#a/2nt !ac$&/5un)Cc5l5/7 y2ll5H
>(%3*5:"#EriA(*= mca chz ]u/l_ h5;c KhYn& -;t &0 !ac$&/5un)Cima&27
u/l]h5us2B#&_
>(%3*5:"#Er5=C=(1 /2#2at /2#2atCi /2#2atCy n5C
/2#2at
!ac$&/5un)C/2#2at7 n5C/2#2at
>(%3*5:"#Er(11(%&A=#1 sc/5ll h5;c ~ii2) !ac$&/5un)Cattachm2nt7 ~ii2)
>(%3*5:"#ErC:Di1i:# #5siti5n l2n&th N4M t5#
c2nt2/ !5tt5m l2~t c2nt2/
/i&ht
!ac$&/5un)C#5siti5n7 t5#
c2nt2/
>(%3*5:"#E t/ans#a/2nt c5l5/ u/l /2#2at
sc/5ll #5siti5n
!ac$&/5un)7 sil92/
u/l]h5us2B#&_ /2#2atCy
L=u 7 C:c &i: t/c in n&hi+n& $hi sR )Xn& !Qn #h'i thay !Un& &i: t/c cX thT4 9( )X 9i*t #h?n
t/nm hay l2n&ht th0 !Qn #h'i thay c:c &i: t/c )Qn& #h?n t/nm4 9( )X sr -i 9Ji thuc t(nh
#h?n t/nm ]#2/c2nta&2_ 9 Nr4 Mr BBBB ch5 thuc t(nh l2n&thB
IM
C C:c thuc t(nh :# )Xn& ch5 T2it
T&"N% 1Q#& 8i9 15k &VC ! VQ EM
=11=5rDC(%i#* n5/mal l2n&th l2tt2/Cs#acin&7s#t
1=i1rE=%:5(1i:# n5n2 un)2/lin2 592/lin2 lin2Cth/5u&h t2itC)2c5/ati5n7un)2/lin2
B=51i%(r(i*# su! su#2/ 92/ticalCali&n7su!
1=i1r15(#Dh:5A ca#italiq2 u##2/cas2 l5H2/cas2 n5n2 t2itCt/ans~5/m7l5H2/cas2
1=i1r(i*# l2~t /i&ht c2nt2/ usti~y t2itCali&n7c2nt2/
1=i1ri#E=#1 l2n&th #2/c2nta&2 t2itCin)2nt7Ms#i
i#=r&=i*&1 n5/mal num!2/ l2n&th #2/c2nta&2 lin2Ch2i&ht7Ns#t
C C:c thuc t(nh :# )Xn& ch5 c:c Y t/5n& mt !'n&
T&"N% 1Q#& 8i9 15k &VC ! VQ EM
A(5*i#r1:C l2n&th #2/c2nta&2 aut5 ma/&inCt5#7s#i
A(5*i#r5i*&1 l2n&th #2/c2nta&2 aut5 ma/&inC/i&ht7s#i
A(5*i#r>:11:A l2n&th #2/c2nta&2 aut5 ma/&inC!5tt5m7N2m
A(5*i#r=h1 l2n&th #2/c2nta&2 aut5 ma/&inCl2~t7s#t
A(5*i# l2n&th #2/c2nta&2 aut5 N4P ma/&in7 Nr#i s#i Nr#i s#i
C(EEi#*r1:C l2n&th #2/c2nta&2 #a))in&Ct5#7Nr
C(EEi#*r5i*&1 l2n&th #2/c2nta&2 #a))in&C/i&ht7Ns#i
C(EEi#*r>:11:A l2n&th #2/c2nta&2 #a))in&C!5tt5m7NBM2m
C(EEi#*r=h1 l2n&th #2/c2nta&2 #a))in&Cl2~t7Nr#tL
C(EEi#* l2n&th #2/c2nta&2 N4P #a))in&7 Nr#i Nr#i Nr#i
Ns#i
>:5E=5r1:Cr<iE1& thin m2)ium thic$ l2n&th !5/)2/Ct5#CHi)th7thin
>:5E=5r5i*&1r<iE1& thin m2)ium thic$ l2n&th !5/)2/C/i&htCHi)th7m2)ium
>:5E=5r>:11:Ar<iE1& thin m2)ium thic$ l2n&th !5/)2/C!5tt5mCHi)th7thic$
>:5E=5r=h1r<iE1& thin m2)ium thic$ l2n&th !5/)2/Cl2~tCHi)th7Ns#i
>:5E=5r<iE1& thin m2)ium thic$ l2n&th N4P !5/)2/CHi)th7 I#i s#i I#i
s#i
>:5E=5r1:Cr%::5 c5l5/ !5/)2/Ct5#Cc5l5/7na9a5Hhit2
>:5E=5r5i*&1r%::5 c5l5/ !5/)2/C/i&htCc5l5/7Hhit2sm5$2
>:5E=5r>:11:Ar%::5 c5l5/ !5/)2/C!5tt5mCc5l5/7!lac$
>:5E=5r=h1r%::5 c5l5/ !5/)2/Cl2~tCc5l5/7CrCrCr
>:5E=5r%::5 c5l5/ N4P !5/)2/Cc5l5/7 &/22n /2) Hhit2
!lu2L
II
>:5E=5r1:CrD1$= n5n2 s5li) )5u!l2 &/5592
/i)&2 ins2t 5uts2t
!5/)2/Ct5#Cstyl27s5li)
>:5E=5r5i*&1rD1$= n5n2 s5li) )5u!l2 &/5592
/i)&2 ins2t 5uts2t
!5/)2/C/i&htCstyl27)5u!l2
>:5E=5r>:11:ArD1$= n5n2 s5li) )5u!l2 &/5592
/i)&2 ins2t 5uts2t
!5/)2/C!5tt5mCstyl27&/5592
>:5E=5r=h1rD1$= n5n2 s5li) )5u!l2 &/5592
/i)&2 ins2t 5uts2t
!5/)2/Cl2~tCstyl27n5n2
>:5E=5rD1$= n5n2 s5li) )5u!l2 &/5592
/i)&2 ins2t 5uts2t
!5/)2/Cstyl27/i)&2L
>:5E=5r1:C !5/)2/CHi)th !5/)2/Cstyl2
!5/)2/Cc5l5/
!5/)2/Ct5#7 m2)ium 5uts2t /2)
>:5E=5r5i*&1 !5/)2/CHi)th !5/)2/Cstyl2
!5/)2/Cc5l5/
!5/)2/C/i&ht7 thic$ ins2t
ma/55n
>:5E=5r>:11:A !5/)2/CHi)th !5/)2/Cstyl2
!5/)2/Cc5l5/
!5/)2/C!5tt5m7 Nr#i /i)&2
&/ay
>:5E=5r=h1 !5/)2/CHi)th !5/)2/Cstyl2
!5/)2/Cc5l5/
!5/)2/Cl2~t7 N#i &/5592 /2)
>:5E=5 !5/)2/CHi)th !5/)2/Cstyl2
!5/)2/Cc5l5/
!5/)2/7 thin s5li) !lu2
h:(1 n5n2 l2~t /i&ht ~l5at7n5n2
%=(5 n5n2 l2~t /i&ht !5th cl2a/7l2~t
C C:c thuc t(nh #h}n l5Qi C classi~icati5n w/5#2/ti2s
T&"N% 1Q#& 8i9 15k &VC ! VQ EM
EiDC($ n5n2 !l5c$ inlin2 listCit2m )is#lay7n5n2
iD1rD1$=r1$C= )is$ ci/cl2 s,ua/2 )2cimal
l5H2/C/5man u##2/C/5man l5H2/C
al#ha u##2/Cal#ha n5n2
listCstyl2Cty#27u##2/Cal#ha
iD1rD1$=riA(*= u/l n5n2 listCstyl2C
ima&27u/l]ic\il2B&i~_
iD1rD1$=rC:Di1i:# insi)2 5utsi)2 listCstyl2C#5siti5n7insi)2
iD1rD1$= $2yH5/) #5siti5n u/l listCstyl27 s,ua/2 5utsi)2
u/l]ic\5l)2/B&i~_
IP
C C:c thuc t(nh -cnh 9c t/( ch5 c:c #h?n tR
T&"N% 1Q#& 8i9 15k &VC ! VQ EM C2 1&[ 9C EM#* %&:
%iC T5Q - cGa mt h0nh
ch< nh"t aut5
cli#7/2ct]r#i Mrr#i
Mrr#i r#i_
tkt c' c:c #h?n tR ]all
2l2m2nts_
&=i*&1 l2n&th aut5 h2i&ht7Mrr#i DIo4 8wAN 9 c:c #tR !c
thay th*
=h1 l2n&th #2/c2nta&2
aut5
l2~t7r#i C:c #h?n tR -=[c -cnh 9c
tuyt -i 9 t=3n& -i
:B=5h:< 9isi!l2 hi))2n
sc/5ll aut5
592/~l5H7sc/5ll tkt c' c:c #h?n tR
C:Di1i:# a!s5lut2 /2lati92
static
#5siti5n7a!s5lut2 tkt c' c:c #h?n tR
1:C l2n&th #2/c2nta&2
aut5
t5#7r#i C:c #h?n tR -=[c -cnh 9c
tuyt -i 9 t=3n& -i
BiDi>ii1$ 9isi!l2 hi))2n
inh2/it
9isi!ility79isi!l2 tkt c' c:c #h?n tR
<iE1& l2n&th #2/c2nta&2
aut5
Hi)th7r DIo4 8wAN an) /2#lac2)
2l2m2nts
_ri#E=i aut5 int2&2/ qCin)2i7CN C:c #h?n tR -=[c -cnh 9c
tuyt -i 9 t=3n& -i
C Thuc t(nh li+n ,uan -*n in kn C w/intin& w/5#2/ti2s
T&"N% 1Q#& 8i9 15k &VC ! VQ EM
C(*=r>5=(3r>=h:5= aut5 alHays l2~t /i&ht #a&2C!/2a$C!2~5/27alHays
C(*=r>5=(3r(h1=5 aut5 alHays l2~t /i&ht #a&2C!/2a$C!2~5/27aut5
Cws2u)5 Class2s
T&"N% 1Q#& 8i9 15k &VC ! VQ EM
%"5D:5 aut5 c/5sshai/ )2~ault han) m592 2C
/2siq2 n2C/2siq2 nHC/2siq2 nC/2siq2 s2C
/2siq2 sHC/2siq2 sC/2siq2 HC/2siq2 t2it
Hait h2l#
cu/s5/7han)L
(%1iB=, &:B=5, i#3,
BiDi1=E
nva a7h592/ c5l5/7/2)L
hi5D1r=11=5, hi5D1ri#= any ~5nt mani#ulatin& )2cla/ati5n #7~i/stCl2tt2/
~l5at7l2~tLc5l5/7!lu2

B
Is
M?t 6* vO $% p $%ng:
V d 1: To mt dng vn bn Welcome to CSS c font ch l Arial, in nghing v
kch thuc font ch l 1 point.
<HTML>
<HAD> </HADS>
<BOD>
<P styIe="font-famiIy:ariaI; font-styIe:itaIic; font-size:16pt">WeIcome to </P>
</BOD>
</HTML>
<em kt qu>
V d 2: To mt textbox vi mu nn l mu tm (magenta).
<HTML>
<HAD> </HADS>
<BOD>
<input type = text styIe = "background-coIor:magenta">
</BOD>
</HTML>
u2m $*t ,u'f
VQ EM eH m;t I ~il2 'nh nAn t=3n& n& 95 ti liu4 95 t2it!5i 9 95 t2ita/2a
<HTML>
<HAD> </HAD>
<BOD style="backgroundimage:url('anh1.jpg');backgroundrepeat:norepeat">
<input style = "backgroundimage:url('anh2.jpg');backgroundrepeat:repeatx; width:1">
<P>
<textarea style = "backgroundimage:url('anh3.jpg');backgroundrepeat:repeaty" cols = rows =
25>
</textarea>
</BOD>
</HTML>
<em kt qu>
VGhi chW/
CKhi ta -;t l /2#2atCi th0 ta c@ mt )|y 'nh -=[c i*# li+n ti*# th25 chiAu n&an&
CKhi ta -;t l /2#2atCy th0 ta c@ mt )|y 'nh -=[c i*# li+n ti*# th25 chiAu )Sc
VQ EM gH TQ5 mt )n& 9nn !'n4 cha i}u7 lT/an& chu cua HtCA#t2chl4 t/5n& -@ tK lT/an&
chul c@ mu ianh ]!lu2_ 9 $hi n&=>i )Wn& )i chuyTn chut -*n ch< lT/an& chul th0 chut
chuyTn thnh h0nh !n tay4 9 $hi chut clic$ l+n ch< ny th0 t/an& htt#7vvHHHBa#t2chBut2 s
-=[c mB
<HTML>
<HAD> </HAD>
<BOD>
<TTL>To lin kt v x l s kin</TTL>
<font style ="cursor:hand;color:blue"
onclick="window.open('http://www.aptech.ute');">Trang chu </font> cua HAptech
</BOD>
</HTML> ===> em kt qu
Ghi chW/ Khi mun :# )Xn& c:c $iTu ch5 mt s #h?n tR c:c !Qn chz c?n 9i*t 7
styl2`lT+ngThucgt(nh H bi:gT/cLl t/5n& -cnh n&ha thB T/5n& -@ c;# lT+ngThucgt(nh H
bi:gT/cLl c@ thT 9i*t nh= ct 9( )X -| chz /a c:c !'n& t/+nB
Ix
I%i ;ung tr!ng XAY cH! chWng t! YZ[ gi\ #$ C1/
uhtmlf
uh2a)f
utitl2f8u )un& !5 ch5nuvtitl2f
uvh2a)f
OD1$= 1$C= T `1=i1/%DD`S
P h:#1rh(Ai$HLB#1iA=Hy h:#1rDi_=H20C1y %::5H5=E
O/D1$=S
u!5)yf
uwfKn5H t5u/ )2s$t5# uvwf
uwfO~~ic2 Mrrr uvwf
uwfAcc2ss Mrrr uvwf
uwfL5&ic huil)in& Hith C uvwf
uwfHTDL4 DHTDL an) Fa9a8c/i#tuvwf
uwfD/2am 12a92/uvwf
uv!5)yf
uvhtmlf
C&6G#* VH TI: B iJ ; %9% 1-#* \L($=5^
Mc tiu ca chng nH gi/p ngIi hJc cK thL:
Thay -i thuc t(nh cGa mt #h?n tR HTDL $hi c@ c:c sV $in chut 9
!n #h(m i'y /aB
mcnh n&ha c:c t?n& ]Lay2/_ t/5n& Iy 9 N2tsca#2B
n4 hin t?n& !Un& c:c lnh Fa9a8c/i#t
TQ5 mt m2nu li+n $*t -*n c:c t/an& $h:c sR )Xn& t?n&B
AL TM TT L THUYT
RL MN1 Dt Du 3i!# 1&6v#* Ew#*H
C 8V $in Clic$ chut ]:#Ci%3_ -=[c $(ch h5Qt $hi chut -=[c clic$
C 8V $in )i chuyTn chut 95 !+n t/5n& #h?n tR ]:#M:"D=OB=5_ -=[c $(ch h5Qt $hi chut
)i chuyTn chut tK n&5i 95 t/5n& #h?n tRB
C 8V $in )i chut /a n&5i ]:#M:"D=O"1_ -=[c $(ch h5Qt $hi )i chuyTn chut tK !+n t/5n&
#h?n tR /a $h{i #h?n tRB
C 8V $in nhkn #h(m ]:#U=$UC_ -=[c $(ch h5Qt $hi n&=>i )Wn& nhkn mt #h(mB
2L T&($ /i 1&"N% 1Q#& %p( %9% C&-# 1J HTML
mT thay -i thuc t(nh cGa mt #h?n tR HTDL n5 -@ t/5n& t/an& !Un& lnh Fa9a8c/i#t4 !Qn
9i*t nh= sau7
E:%"A=#1L(LO8i9 15k ID %p( 1&SLD1$=LOT.# 1&"N% 1Q#&S T O8i9 15k A7iS
T#ong )Q:
O8i9 15k ID %p( 1&S ch(nh l &i: t/c m !Qn -;t ch5 thuc t(nh ID4 9( )X7
uHM ID ` Ti="D=f THAt mI THUC TNH CA TH uvHMf th0 u&i: t/c ID cGa thf
t/5n& t/=>n& h[# ny s l Ti="D=L
OT.# 1&"N% 1Q#&f l t+n thuc t(nh c?n thay -iB hQn c@ thT t/a t/5n& ti liu -| -=[c
&i:5 9i+n #h:t7 aDanh s:ch c:c thuc t(nhdB o( )X 7 t2itCali&n4 ~5ntCsiq24 c5l5/ 9B9e
I
O8i9 15k A7iS l nh<n& &i: t/c h[# l ch5 thuc t(nh c?n thay -iB ]hQn cZn& t/a t/5n& ti
liu aDanh s:ch c:c thuc t(nhd_B
VV ,-u ./ N*u !Qn mun thay -i thuc t(nh cGa mt #h?n tR th0 !t !uc !Qn #h'i &:n ch5
th -@ mt &i: t/c ID )uy nhkt ]Nh= 9( )X t/+n_B
eL nk#& #*&}( 1-#* 15:#* IW B N=1D%(C=
!B ]nh nghS! tng trong ^_
mT -cnh n&ha t?n& t/5n& Iy4 !Qn chz c?n -;t thuc t(nh #5siti5n ch5 styl2B
o( )X7 uHM styl2 ` a#5siti5n7a!s5lut2LdfTh HM ny -=[c -;t t/+n mt t?n& uvHMf
Tuy nhi+n4 9Ji c:ch -cnh n&ha t/+n th0 mi t?n& chz cha -=[c mt #h?n tRB N+u !Qn mun
mt t?n& cha -=[c nhiAu h3n mt #h?n tR th0 !Qn -cnh n&ha t?n& !Un& c;# th uDIof h5;c
u8wANf nh= sau7
ODIV ID T T(#*R D1$= T C:Di1i:#H(>D:"1=S
um;t c:c #h?n tR $h:c 95 -}y4 9( )X 7 f
uHNf wh?n tR ny nUm t/+n t?n& N uvHNf
uin#ut ty#2 ` !utt5n 9alu2 ` aD592df
uim& s/c ` a~il27vvc7vanhNB#&df
ua h/2~ ` ahtt#7vvHHHB2chi#Bc5mB9ndf T/an& chG cGa !:5 yCChi# uvaf
O/DIVS
Di t?n& $hi tQ5 /a4 !Qn n+n &:n thuc t(nh ID ch5 t?n& -@ mt &i: t/c )uy nhkt ]KhYn& t/Wn&
9Ji ID cGa !kt $ th n5 t/5n& t/an&_B hQn h5n t5n c@ thT thVc hin c:c tha5 t:c -i 9Ji
t?n& nh= 7
n t?n&4 9( )X 7 )5cum2ntBallBTan&NBstyl2B9isi!ility ` hi))2n
Hin t?n&4 9( )X 7 )5cum2ntBallBTan&NBstyl2B9isi!ility ` 9isi!l2
Di chuyTn t?n& san& t/:i s #ii2l4 9( )X7 )5cum2ntBallBTan&NBstyl2B#ii2lL2~t C` s
Di chuyTn t?n& san& #h'i s #ii2l4 9( )X7 )5cum2ntBallBTan&NBstyl2B#ii2lL2~t ` s
Di chuyTn t?n& l+n t/+n s #ii2l4 9( )X7 )5cum2ntBallBTan&NBstyl2B#ii2lT5# C` s
Di chuyTn t?n& iun& )=Ji s #ii2l4 9( )X7 )5cum2ntBallBTan&NBstyl2B#ii2lT5#`s
YB ]nh nghS! tng trong IAt#c!pA
T/5n& N2tsca#24 9ic -cnh n&ha ]tQ5 /a_ t?n& c@ #h?n )p )n& h3n 9Ji th LAtyj 7
OLAYWR #(A= T T(#*RS
um;t c:c #h?n tR $h:c 95 -}y4 9( )X 7 f
uHNf wh?n tR ny nUm t/+n t?n& N uvHNf
uin#ut ty#2 ` !utt5n 9alu2 ` aD592df
uim& s/c ` a~il27vvc7vanhNB#&df
ua h/2~ ` ahtt#7vvHHHBman&u5nBc5mdf T/an& cha nhiAu m5 9;t 9A IT uvaf
O/LAYWRS
mT n v hin t?n& -=[c tQ5 !i th LAtyj thYn& ,ua lnh Fa9a8c/i#t4 !Qn 9i*t 7
o )5cum2ntBuT+n cGa t?n&fB9isi!ility ` hi))2n ]-T n t?n&_
o )5cum2ntBuT+n cGa t?n&fB9isi!ility ` sh5H ]-T hin t?n&_
Trong / uT+n cGa t?n&f ch(nh l &i: t/c cGa thuc t(nh nam2B
,-u ./ mT t/uy c"# -*n mt t?n&4 t/5n& Iy sR )Xn& &i: t/c cGa thuc t(nh ID4 t/5n& $hi -@
N2tsca#2 sR )Xn& &i: t/c cGa thuc t(nh #(A=B
JK ;G / )5cum2ntBTan&NB9isi!ility ` hi))2n mT n t?n& c@ t+n l Tan&N tQ5 /a t/+nB
mT )i chuyTn t?n& !Un& Fa9a8c/i#t4 !Qn 9i*t7
I
o )5cum2ntBuT+n t?n&fB=h1 ` ubi: t/cf ]Di chuyTn san& t/:i h5;c #h'i_
o )5cum2ntBuT+n t?n&fB1:C ` ubi: t/cf ]Di chuyTn l+n iun&_
Trong / u&i: t/cf }m -T )i chuyTn lWi4 &i: t/c )=3n& -T )i chuyTn ti*nB
o( )X )i chuyTn t?n& l+n t/+n th+m Nr #ii2l
o )5cum2ntBTan&NB1:C C` Nr
o( )X )i chuyTn t?n& san& #h'i th+m Nr #ii2l
o )5cum2ntBTan&NB=h1 ` Nr
o( )X4 )i chuyTn t?n& -*n 9c t/( c:ch m^# t/+n cRa s t/0nh )uyt Nrr#i4 9 c:ch m^# t/:i
sr #ii2lB
o )5cum2ntBTan&NBt5# ` Nrr
o )5cum2ntBTan&NBl2~t ` sr
BL BI TP MU
01i # D/ Dinh h5Q sV $in )i chuyTn chut 95 #h?n tRB
LE/ c/: TQ5 mt li+n $*t -*n t/an& htt#7vvHHHBHIsch55lsBc5m !Un& th HMB C@ mu nAn l
ianh4 mu ch< l t/n&B Khi chut )i chuyTn -*n th0 -i mu nAn thnh mu -{B
H'ng $Hn: mT -i mu nAn thnh -{ -i 9Ji th HM ]h5;c th !kt $_ !Qn 9i*t7
E:%"A=#1L(LLi=#U=1LD1$=L>(%3*5:"#EC::5 T 5=E
T/5n& -@ Li=#U=1 l &i: t/c cGa thuc t(nh ID B
C}u lnh Fa9a8c/i#t ny -;t -}u
Th25 nh= y+u c?u -?u !i l 7 aKhi chut )i chuyTn edB D5 9"y c}u lnh ny s -=[c -;t
t/5n& sV $in )i chuyTn chut -*n ]c@ t+n l :#M:"D=M:B=_
Finh hoO/
<HTML>
<HAD>
<TTL>Hiu ng di chuyn chut</TTL>
<MTA HTTPV="ContentType" CONTNT="text/html; charset=utf">
</HAD>
<BOD>
<h2 D= "LienKet" STL="backgroundcolor:blue; color:white"
onMouseMove="document.aII.LienKet.styIe.backgroundCoIor = 'red'">
Trang dy JavaScript http://www.w3schools.com
</h2>
</BOD>
</HTML>
N&% IiH C:c thuc t(nh t/5n& !'n& t/a cu a)anh s:ch thuc t(nhd n*u c@ cha )ku &Qch
ni ]9( )X 7 !ac$&/5un)Cc5l5/_ th0 $hi 9i*t t/5n& Fa9a8c/i#t4 !Qn #h'i chuyTn $ tV -n& n&ay
sau )ku &Qch ni -@ thnh ch< h5a 9 !{ )ku &Qch ni -iB ]o( )X tK !ac$&/5un)Cc5l5/
!ac$&/5un)C5l5/_
01i # 3/ Dinh h5Q sV $in )i chuyTn chut 95 9 /a $h{i mt #h?n tRB
LE/ c/: Nh= !i t"# N4 9 th+m y+u c?u sau7 Khi n&=>i )Wn& )i chuyTn chut /a $h{i #h?n
tR HM -@ th0 -;t lQi mu nAn l mu ianhB
H'ng $Hn: oi*t lnh thay -i mu nAn thnh ianh t/5n& sV $in )i chut /a n&5iB
Minh ho:
uHTDLf
uHyADf
uTITLyfHiu n& )i chuyTn chut o2/si5n MuvTITLyf
I
uDyTA HTTwCyUIo`lC5nt2ntCTy#2l CONTyNT`lt2itvhtmlL cha/s2t`ut~Clf
uvHyADf
uhODtf
uHM ID` lLi=#U=1l 8TtLy`l!ac$&/5un)Cc5l5/7!lu2L c5l5/7Hhit2l
:#M:"D=M:B= ` l)5cum2ntBallBLi=#U=1Bstyl2B!ac$&/5un)C5l5/ ` /2) l
:#M:"D=O"1 ` l)5cum2ntBallBLi=#U=1Bstyl2B!ac$&/5un)C5l5/ ` !lu2 lf
T/an& )Qy Fa9a8c/i#t htt#7vvHHHBHIsch55lsBc5m
uvHMf
uvhODtf
uvHTDLf
01i # 4/ Dinh h5Q tQ5 mt li+n $*t h5n chznh -*n mt t/an& H2!
LE/ c/: Nh= !i s M nh=n& $hi n&=>i )Wn& clic$ chut th0 m t/an&
htt#7vvHHHBHIsch55lsBc5mB o chut c@ h0nh !n tayB
H'ng $Hn7 mT m t/an& H2! !kt $ !Qn 9i*t7 Hin)5HB5#2n]mca chz UjL_B Lnh m ny
-=[c -;t t/5n& sV $in Clic$ chut ]o0 th25 y+u c?u7 $hi n&=>i )Wn& clic$ chut th0 mJi m_B
Minh ho:
uHTDLf
uHyADf
uTITLyfHiu n& )i chuyTn chut o2/si5n MuvTITLyf
uDyTA HTTwCyUIo`lC5nt2ntCTy#2l CONTyNT`lt2itvhtmlL cha/s2t`ut~Clf
uvHyADf
uhODtf
uHM ID`lLi=#U=1l 8TtLy`l!ac$&/5un)Cc5l5/7!lu2L c5l5/7Hhit2L %"5D:5H&(#El
:#M:"D=M:B= ` l)5cum2ntBallBLi=#U=1Bstyl2B!ac$&/5un)C5l5/ ` /2)Ll
:#M:"D=O"1 ` l)5cum2ntBallBLi=#U=1Bstyl2B!ac$&/5un)C5l5/ ` !lu2Ll
:#Ci%3 ` lHin)5HB5#2n]htt#7vvHHHBHIsch55lsBc5m_Ll f
T/an& )Qy Fa9a8c/i#t htt#7vvHHHBHIsch55lsBc5m
uvHMf
uvhODtf
uvHTDLf
01i t2p t` giai/
Bi 1u *iKi RH H|y tQ5 mt m2nu -;t th25 chiAu )Sc &6m P mXc nh= sau7
8i7i 1&i!"
Ti# 1'%
SK# C&A
T5V *i]C
bu cu/ P mXc ny c@ mu nAn l ianh4 mu ch< l 9n& ]y2ll5H_B Khi n&=>i )Wn& )i
chuyTn -*n mXc n5 th0 mXc -@ c@ mu nAn l mu -{B Khi )i chuyTn chut /a $h{i th0 mu
nAn t/ lQi mu ianhB
Khi n&=>i )Wn& clic$ 95 th0 m /a t/an& t=3n& n& l htt#7vvHHHB2chi#Bc5mB9n4
htt#7vvHHHBman&u5nBc5m4 htt#7vvHHHBHIsch55lsBc5m 9 htt#7vvHHHB,uant/iman&Bc5mB
b[i 7 Lm t=3n& tV nh= !i t"# mu4 nh=n& tQ5 /a P th HMB
Pr
Bi 1bC 1u *iKi 2H H|y tQ5 mt m2nu &6m P mXc nh= t/+n nh=n& th25 chiAu n&an&4
H'ng $Hn7 N*u !Qn )Wn& th HM4 th0 mi mXc s tV -n& -=[c -;t /i+n& t/+n mt )n&B mT
c@ thT -;t nhiAu mXc t/+n cWn& mt )n&4 !Qn c@ thT tQ5 mt !'n& c@ mt hn& 9 nhiAu ctB
Di mXc !}y &i> s -=[c -;t t/5n& mt th uTDfB mT thay -i $(ch th=Jc4 mu nAn4 mu
ch< 9B9BB !Qn cZn& sR )Xn& 8TtLy7 uTD styl2 ` ac5l5/7 Hhit2d ee
H5;c c:ch th hai l !Qn sR )Xn& th u8#anfB o( )X7
uSC(# styl2 ` ac5l5/7Hhit2L !ac$&/5un)Cc5l5/7!lu2L cu/s5/7han)L ~5ntCsiq27Nx#td
5nClic$ ` aHin)5HB5#2n]htt#7vvHHHB2chi#Bc5mB9n_Ld f
T5(#* W%&iCL%:A
uvSC(#f
01i # 5/ Dinh h5Q tQ5 t?n& t/5n& Iy
TQ5 mt t?n& &6m c@ )n& ch< a12lc5m2 t5 LAtyj d4 mu -{4 $(ch th=Jc Pr#t4 ~5nt ch<
A/ialB T5n ! )n& ch< ny c@ - /n& ]Hi)th_ l Irr#iB
H'ng $Hn: oic tQ5 t?n& 9 -;t c:c thuc t(nh c@ thT -;t thYn& ,ua -cnh n&ha 8TtLyB
Minh ho:
uHTDLf
uHyADf
uTITLyfTQ5 t?n& t/5n& IyuvTITLyf
uDyTA HTTwCyUIo`lC5nt2ntCTy#2l CONTyNT`lt2itvhtmlL cha/s2t`ut~Clf
uvHyADf
uhODtf
uDIo 8TtLy`lC:Di1i:#7a!s5lut2L c5l5/7/2)L ~5ntC~amily7a/ialL ~5ntCsiq27Ir#tL
1:C7 sr#iL =h17 sr#iL <iE1&7Prr#ilf
12lc5m2 t5 LAtyj
uvDIof
uv!5)yf
uvHTDLf
01i # M/ Dinh h5Q 9ic n 9 hin t?n& !Un& c}u lnh Fa9a8ci/#t
t+u c?u7 tQ5 mt )n& ch< C9% i.# 341 !Un& th HM4 mu nAn l t(m ]ma&2nta_4 mu ch<
t/n& ]Hhit2_B o tQ5 mt t?n& c@ ID ` Li2nK2t4 T/5n& t?n& c@ mt !'n& &6m M hn&4 N ct4
ni )un& cGa !'n& cha M li+n $*t ]!Qn c@ thT tQ5 !Un& th A Hjy\_ -*n c:c t/an&
htt#7vvHHHB95lB9nnB9n4 9 htt#7vvHHHB~at2!ac$Bc5m4 han -?u4 t?n& ny n ]9isi!l2 7
hi))2n_B Khi n&=>i )Wn& )Wn& )i chuyTn chut -*n th HM th0 t?n& ny hinB Cn $hi n&=>i
)Wn& clic$ 95 mt t/5n& I li+n $*t th0 t?n& ny nB
H'ng $Hn: mT n hay hin t?n& !Qn 9i*t7
PN
T5#`sr
l2~t`sr
1i)th ` Prr#i
)5cum2ntBallBLi2nK2tBstyl2B9isi!ility ` 9isi!l2 ]h5;c hi))2n_
Minh ho:
uHTDLf
uHyADf
uTITLyfTQ5 t?n& t/5n& Iy o2/si5n MuvTITLyf
uDyTA HTTwCyUIo`lC5nt2ntCTy#2l CONTyNT`lt2itvhtmlL cha/s2t`ut~Clf
uvHyADf
uhODtf
OH2 STYLWT`%::5H<&i1=y >(%3*5:"#Er%::5HA(*=#1(y <iE1&H200Ci`
:#M:"D=OB=5 T `E:%"A=#1L(LLi=#U=1LD1$=LBiDi>ii1$ T xBiDi>=xy`S
C9% i.# 341
O/H2S
ODIV IDT`Li=#U=1` STYLWT`C:Di1i:#H(>D:"1=y h:#1rh(Ai$H(5i(y BiDi>ii1$H &iEE=#y
>(%3*5:"#Er%::5H$=:<y 1:CH g0Ciy =h1H R0Ciy <iE1&H200Ciy `S
OTABLW BORDWRT`0`S
OTRS
OTD :#Ci%3 T `E:%"A=#1L(LLi=#U=1LD1$=LBiDi>ii1$ T x&iEE=#xy` S
OA HRW{ T `HTTPH//<<<LB:LB##LB#`ST5(#* /@#* 3; WrM(iO/AS
O/TDS
O/TRS
OTRS
OTD :#Ci%3 T `E:%"A=#1L(LLi=#U=1LD1$=LBiDi>ii1$ T x&iEE=#xy`S
OA HRW{ T `HTTPH//<<<Lh(1=>(%3L%:A`Sd=>Di1= Ai# C&QO/AS
O/TDS
O/TRS
O/TABLWS
O/DIVS
uv!5)yf
uvHTDLf
Bi 1bC 1u *iKi eH TQ5 mt h thn& m2nu nh= t/an& !+n7
uHTDLf
uHyADf
uTITLyfTQ5 D2nu t/5n& Iy C 8R )Xn& T-Nb 9 Fa9a8c/i#tuvTITLyf
uDyTA HTTwCyUIo`lC5nt2ntCTy#2l CONTyNT`lt2itvhtmlL cha/s2t`ut~Clf
uvHyADf
Olrr nk#& #*&}( 7C rrS
u8TtLy Ttwy`lTyTvC88lf
BD2nuha/!ac$&/5un)Cc5l5/7!lu2L c5l5/7Hhit2L ~5ntC~amily7a/ialL ~5ntCsiq27Nx#tLHi)th7Nsr#iL cu/s5/7han)
BD2nu !ac$&/5un)Cc5l5/7 y2ll5HL c5l5/7 Hhit2L #5siti5n7 a!s5lut2L t5# 7 PrL 9isi!ility 7 hi))2n
uv8TtLyf
uSCRIPT lan&ua&2`lFa9a8c/i#tlf
~uncti5n AnCacD2nu]_ vv Hm n c:c D2nu c@ t:c )Xn& lm n c:c t?n& mi $hi -=[c &Si

)5cum2ntBallBD2nuNBstyl2B9isi!ility ` hi))2nL
)5cum2ntBallBD2nuMBstyl2B9isi!ility ` hi))2nL
)5cum2ntBallBD2nuIBstyl2B9isi!ility ` hi))2nL

uvSCRIPTf
]^__ HJ `nC!cM>n/ (, t#ong 67 8i9n onC&ic8 cT! BaPL 6b )+c g4i 8hi ngYi $cng
PM
C&ic8 ch/?t vo bKt 8d )e/ t#ong ti &i9/ (5>J &i phn 2Fi b4t 67 8i9n, __N
uhODt :#Ci%3 ` lA#C(%M=#"]_lf
]^__ To tng R chf! cc &iEn 8Ct cT! J%c gCc LiEn 8Ctg __N
uDIo CLA88`lD2nul ID`lD2nuNl styl2 ` ll2~t7Nrlf
uA Hjy\ ` lHTTw7vvHHHB95lB9nnB9nlfT/an& -nn& $ yCDailuvAf uhjf
uA Hjy\ ` lHTTw7vvHHHB~at2!ac$Bc5mlfmnn& $ 12!sit2 mipn #h(uvAf
uvDIof
]^__ To tng B chf! cc &iEn 8Ct cT! J%c gCc LiEn 8Ctg __N
uDIo CLA88`lD2nul ID`lD2nuMl styl2 ` ll2~t7NsrLlf
uA Hjy\ ` lHTTw7vvHHHBHIsch55lsBc5mlfT/an& )Qy Fa9a8c/i#tuvAf uhjf
uA Hjy\ ` lHTTw7vvHHHBman&u5nBc5mlfT/an& IT Ti*n& 9ituvAf
uvDIof
]^__ To tng h chf! cc &iEn 8Ct cT! J%c gCc LiEn 8Ctg __N
uDIo CLA88`lD2nul ID`lD2nuIl styl2 ` ll2~t7Msrlf
uA Hjy\ ` lHTTw7vvHHHBhutB2)uB9nlfmQi hSc h:ch $h5a H NiuvAf uhjf
uA Hjy\ ` lHTTw7vvHHHBctuB2)uB9nlfmQi hSc c?n th3uvAf
uA Hjy\ ` lHTTw7vvHHHB9nuB2)uB9nlfmQi hSc uc &iauvAf
uvDIof
us#an CLA88`lD2nuha/l 5nD5us2D592`lAnCacD2nu]_L )5cum2ntBallBD2nuNBstyl2B9isi!ility ` 9isi!l2lf
C9% i.# 341
uvs#anf
us#an CLA88`lD2nuha/l 5nD5us2D592`lAnCacD2nu]_L )5cum2ntBallBD2nuMBstyl2B9isi!ility ` 9isi!l2lf
Ti# 1'%
uv8wANf
us#an CLA88`lD2nuha/l 5nD5us2D592`lAnCacD2nu]_L )5cum2ntBallBD2nuIBstyl2B9isi!ility ` 9isi!l2lf
C9% &:I1 /N#*
uv8wANf
uv!5)yf
uvHTDLf
C&6G#* VIH NNi E"#* /N#* B /k#& Bk /N#*
Mc tiu ca chng nH gi/p ngIi hJc cK thL:
Thay i ni dung ca cc th trong trang web thng qua JavaScript
S dung JavaScript di chuyn cc tng
Vn dung kh nng jnh vj ng v ni dung ng vo thit k web
C. TM TAT L THUYT
PI
1. Ni dung dng I kh nng cho php thay di ni dung ca trang web
bng cc Inh Script.
thay i ni dung ca mt phn t no trong IE, chng ta c th thay i mt
trong 4 thuc tnh ca n :
innerText
innerHTML
outerText
outerHTML
C php dng thay i gi trj ca cc thuc tnh nhu sau:
dcu>=ntMa--M;Ni t:O ca thuc t&nh PQ@M;Tn thuc t&nh@ R ;Ni t:O >6i@
Trong <Tn thuc tnh l mt trong s 4 thuc tnh nu trn.
2. [nh v[ (Thay di v[ tr) cc tng trong IE v Netscape
Lu =u$n t">ng : thay i vj tr ca mt phn t no trong v Netscape,
trc ht bn cn phi t phn t trong mt tng.
2.1 Thay di trong IE
Bn cn thay i 2 thuc tnh ca tng l pixelLeft v pixelTop.
Thuc tnh pixelLeft qui jnh di chuyn sang phi / sang tri
Thuc tnh pixelTop qui jnh di chuyn ln trn / xung dui
? 9h@9 cAu !Bnh 3& th$/ 3Ci nh ($u:
document.all.<Gi trj D>.style.pixeILeft = <Vj tr cn di chuyn n>
document.all.<Gi trj D>.style.pixeITop = <Vj tr cn di chuyn n>
2.2 Thay di trong Netsape
Trong Netscape, mun thay i bn cng chi vic thay i 2 thuc tnh l top v left,
nhu sau:
document.<Tn tng>.top = <Vj tr cn di chuyn>
document.<Tn tng>.left = <Vj tr cn di chuyn>
Trong , Tn tng chnh l gi trj ca thuc tnh name do bn t.
PP
0B 0c^ TdP Fef
Bi 1S ': Minh ho thay i thuc tnh innerText
u cu: To mt dng ch " am having fun" thnh "This is great fun" khi ngui
dng click chut.
Hung dn: Bn c th dng bt ky th g (th H, th P v.v...) to dng ch
trn. Do u bi yu cu l chi thay i dng vn bn, do vy chng ta s thay i
thuc tnh innerText, dng lnh ny s t trong s kin onClick.
Minh ho :
<html>
<head>
<meta httpequiv="ContentType" content="text/html; charset=utf">
</head>
<body>
<h2 id="D1" onClick="document.all.D1.innerText='This is great fun'"> am having func</h2>
</body>
</html>
Bi 1S (: Minh ho thay di thuc tnh innerHTML
u cu: To mt dng ch "Click here". Khi ngui dng click chut vo th dng
ch bin thnh nt c nhn l "Having fun"
Hung dn:
Bn c th s dung bt ky th no hin thj dng ch "Click here"
Trong s kin click chut (onMouseMove) bn vit lnh thay ni dung trong
th bng ni dung mi (Ni dung ny l th to nt).
Minh ho:
<html>
<head>
<meta httpequiv="ContentType" content="text/html; charset=utf">
</head>
<body>
<h2 id="D1" onClick="document.all.D1.innerHTML='<input type=button value = OK>'">
CIick here
</h2>
</body>
</html>
Bi 1S ): Minh ho thay th thuc tnh outerText.
u cu: To mt nt c nhn l "Open". Khi ngui dng click vo nt ny th m
trang http://www.echip.com.vn, trong mt ca s mi v dng nt s thay bng
dng ch "Trang ny m".
Hung dn:
m mt trang web trong mt ca s mi, bn vit: window.open("ja chi
L ca trang cn m", "Blank")
Thay th nt bng mt dng ch thng qua thay i thuc tnh outerText ca
nt.
Minh ho:
Ps
<html>
<head>
<meta httpequiv="ContentType" content="text/html; charset=utf">
</head>
<SCPT language="JavaScript">
function ThayDoi()

window.open("http://www.echip.com.vn","blank");
document.all.Nut1.outerText='"Trang ny thm";

</SCPT>
<body>
<NPT id="Nut1" type="button" value="Open" onClick="ThayDoi();">
</body>
</html>
Bi s 4: Minh ho thay di thuc tnh outerHTML
u cu: To mt dng ch "Click here" c mu xanh, kch c H1. Khi ngui dng
click vo dng ch ny th thay bng mt lin kt n trang http://www.vn.vn
Hung dn: Do y khi ngui dng click vo dng ch th thay th bng mt lin
kt nn thuc tnh cn thay i s l outerHTML. Cu lnh thay i s uoc t
trong s kin Click chut.
Minh ho:
<html>
<head>
<meta httpequiv="ContentType" content="text/html; charset=utf">
</head>
<SCRIPT language="JavaScript">
function ChenLienKet()

document.all.LienKet.outerHTML='<A HF = "http://www.vnn.vn">Trang Aptech</A>' ;

</SCRIPT>
<body>
<h1 id="LienKet" style="color:blue" onClick="ChenLienKet()">CIick Here</h1>
</body>
</html>
Bi s 5: Minh ha vic d[nh v[ dng trong IE
u cu: To mt nt c nhn l "Sign p". Khi chut di chuyn trong nt ny th
hin thj dng nhc l "ng k hm thu mi" c mu nn l vng ti vj tr ca con
chut. Khi chut di chuyn ra ngoi th dng nhc n i.
Hung dn: Bn to ra mt tng cha dng ch "ng k hm thu mi" c mu
nn l vng. Khi chut di chuyn n (onMouseMove) th t thuc tnh visibility l
'visible' cho hin tng v khi di chuyn chut ra ngoi (onMouseOut) th t li
thuc tnh visibility l 'hidden' n tng. Luu , vj tr ca chut uoc luu trong
thuc tnh event.client v event.client. Bn s gn vj tr ny ca chut cho 2 thuc
tnh pixelLeft v pixelTop jnh vj tng.
Minh ho:
Px
<html>
<head>
<meta httpequiv="ContentType" content="text/html; charset=utf">
</head>
<SCPT language="JavaScript">
function HienThi()

document.all.Tang1.style.pixeILeft = event.cIientX;
document.all.Tang1.style.pixeITop = event.cIientY;
document.all.Tang1.style.visibiIity = 'visible';

function AnTang() // n Tng Tang1

document.all.Tang1.style.visibiIity = 'hidden';

</SCPT>
<BOD>
<NPT type="button" value="Sign p"
onMouseMove="HienThi();"
onMouseOut="AnTang()">
<DV id= Tang1 style="position:absolute; visibility: hidden; backgroundcolor:yellow">
ng k hm thu mi
</DV>
</BOD>
</html>
Kt qu khi chut di chuyn vo trong nt
Bi s 6: Minh ho ni dung trong Netscape
u cu: To mt tng c tn l Tang1, mt nt nhn c nhn l "Np trang Web" v
mt hp text c tn l DiaChi. Khi ngui dng nhp ja chi vo trong hp text v
nhn nt "Np trang web" th ni dung ca trang s uoc np vo tng Tang1.
Hung dn:
Dng th LA to tng v t tn cho n l Tang1
Vit trong s kin onCLick ca nt "Np trang web" cu lnh np ti liu vo tng.
C php np ti liu vo mt tng trong Netscape nhu sau:
document.<Tn tng>.src = "[a chi trang cn np"
Trong trung hop ny s l :
document.Tang1.src = document.form1.DiaChi.vaIue
Minh ho:
<html>
<head>
<TTL>Hin thj tooltip</TTL>
P
<meta httpequiv="ContentType" content="text/html; charset=utf">
</head>
<body>
<LAYER name="Tang1">
<h1> Tng ny dng hin thj trang Web bn g trong hpText !
</LAYER>

<FORM name="Form1">
<NPT type="text" name="DiaChi">
<NPT type="button" onClick="document.Tang1.src = document.form1.DiaChi.value">
</FORM>
</body>
</html>
CL BI TP T 8II
Bi 1S ':
To mt tng c cha dng ch "Hello", kch thuc H1. v mt nt nhn c nhn l "Thay i". Khi
ngui dng click vo nt ny th yu cu ngui dng nhp vo mt xu, sau thay ni dung trong
th H1 bng xu nhp vo ny (Theo 4 cch: thay thuc tnh innerText, innerHTML, outerText,
outerHTML).
Bi 1S (:
To mt th H1, mu ch xanh dng hin thj thi gian ca h thng (gm gi:pht:giy).
7Di : Vit hm CapNhat ly gi:pht:Giy trong my tnh sau gn cho thuc
tnh innerText ca th H1. S dung hm setnterval("CapNhat();", 1) lin tuc
cp nht thi gian theo tng giy.
Bi 1S ): To 2 tng trong , mi tng cha mt bc nh. Tng th nht chy t
tri sang phi mn hnh, tng th hai chy t trn xung dui mn hnh.
Goi : S dung 2 hm setnterval goi 2 hm di chuyn 2 tng.
Bi 1S *: To mt tng cha 3 lin kt. Chut click ti vj tr no th tng s uoc t
ti vj tr . Goi : Vit lnh trong s kin onClick ca th BOD.
Bi 1S 5: To mt form ng k Mail tuong t nhu ca ahoo (Bn chi cn to
mt s phn t, khng cn to ht). Mi khi ngui dng di chuyn chut n mt
phn t no th hin thj mt li ch thch bng Ting vit. (em Bi s 5)
Bi 1S A: To 3 tng (Trong Netscape), mi tng np mt trang tuong ng nhu sau:
http://www.vnn.vn, http://www.echip.com.vn v http://www.manguon.com.
Bi 1S B: To mt tng cha mt bc nh, mt nt c nhn l "Di chuyn". Khi
ngui dng click vo nt ny th bc nh s di chuyn cho t gc trn bn phi
xung gc dui bn tri ca mn hnh. 7Di : Tng dn pixelTop, gim pixelLeft.
Bi 1S C: Hy lm ht cc bi tp trong sch gio khoa ca cun gio trnh HTML,
DHTML JavaScript.
P