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 liu ny cha nhng g? Ti liu ny cha mt s bi tp km gii thch ni
dung kin thc lin quan n k thut lp trnh Web c bn pha Client, bao gm:

Phn A
Chng 0: To cc phn t HTML.
Chng I: Bi tp c bn v JavaScript.
Chng II: S dng cc lp (i tng) x l Chui, Ngy thng, Ton hc.
Chng III: X l s kin trong trang HTML vi JavaScript
Chng IV: nh dng cc phn t HTML bng CSS
Chng V: To v x l cc tng (Layer)
Chng VI: Ni dung ng v nh v ng

Ai nn c ti liu ny
L Sinh vin, gio vin hoc nhng ngi cn c kin thc v lp trnh Web.

Cn c nhng kin thc g trc khi c ti liu ny?

Cn c kin thc c bn v lp trnh ni chung.

Gio trnh l thuyt

-

HTML, DHTML & JavaScript ca Aptech worldwide

Cc trang web nn gh thm

-

www.3schools.com
Search vi t kha Java Script tutorial; Java script Introduction

MC LC
Chng 0: To cc phn t HTML c bn....................................4
1. C php chung:..................................................................................................................4
2. To mt s phn t c bn.................................................................................................4
Chng I: Bi tp c bn v JavaScript.......................................6
Chng II: S dng cc lp x l Chui, Ngy thng, Ton hc.. . . .9
Chng III: X l s kin trong trang HTML vi JavaScript..........17
Chng IV: nh dng cc phn t HTML bng CSS....................26
Chng V: To v x l cc tng (Layer)...................................36
Chng VI: Ni dung ng v nh v ng................................42

Chng 0: To cc phn t HTML c bn.

Mc tiu: Kt thc chng ny, ngi hc c th
To cc phn t HTML c bn bng cch code trc tip
Dng Notepad to mt trang web cha cc phn t HTML
Ni dung
Gii thiu
Trong nhiu ng dng web khng phi lc no chng ta cng c th s dng trnh son tho
tch hp kiu nh Frontpage hay Dreamweaver thit k giao din, c bit l khi giao din
ny c lin quan n yu t lp trnh, khi ngi lp trnh phi to cc phn t HTML hon
ton th cng (Code ch khng dng ko th). Do vy, vic hiu c php to cc phn t
HTML l v cng quan trng.
1. C php chung:
<Tn_Loi_Phn_T <Thuc tnh 1> = Gi tr <Thuc Tnh> = Gi tr >
<Tn_Loi_Phn_T Style = Thuc_tnh: gi_tr; thuc_tnh : gi tr ;.; >
Kt hp c hai cch.
Trong :
Tn loi phn t HTML
Button
Text
File
Hidden
Select
TextArea
CheckBox

Thuc tnh
Name
VALUE
MAXLENGTH
ReadOnly
Disable
Cols, Rows
Multiple
TYPE

Phn gi tr c th t trong cp ngoc kp hoc cp ngoc n hoc khng cn !!

Nu t thuc tnh theo cch 2, th c th tham chiu bng sau (gi l theo c php
CSS)
2. To mt s phn t c bn
To nt nhn
<Input name="KiemTra" TYPE="button" VALUE="Kim tra d liu">
<Input TYPE="Submit" VALUE="ng nhp">
To nhp
<Input name="HoVaTen" TYPE="text" VALUE="Nguyn Vn A" size="20"
MAXLENGTH="30">
<Input name="Khoa" TYPE="text" VALUE="Khoa Cng ngh thng tin" size="40"
MAXLENGTH="50" readonly="true">
<Input name="Truong" TYPE="text" VALUE="Trng i hc s phm k thut Hng
Yn" size="40" MAXLENGTH="50" Disabled="true">

 To vng nhp (Textarea)

<textarea name="GhiChu" cols="50" rows="5"> Ni dung ghi ch: </textarea>
To nhp Password
<Input name="MatKhau" type="password" value="123456" size="10" maxlength="20">
To listbox
<select name="MonHoc" size="5" >
<option>Visual Basic</option>
<option>Lp trnh .NET</option>
<option>Lp trnh ASP</option>
</select>
To ComboBox (ch cn b thuc tnh size)
<select name="Mon" size = 1 onChange="Call DocGiaTriListBox">
<option value = "Visual Basic">Visual Basic</option>
<option value = "DOT_NET">Lp trnh .NET</option>
<option value = "ASP">Lp trnh ASP</option>
</select>
To hp kim
<Input name="chkVB" type="checkbox" value="Visual Basic" checked> Visual Basic
<Input name="chkASP" type="checkbox" value="ASP "> Active Server Pages
To nt Radio
<Input name="GioiTinh" type="radio" value="Nam" checked>
<Input name="GioiTinh" type="radio" value="N" >
<Input name="TinhTrang" type="radio" value=" lp gia nh" >
<Input name="TinhTrang" type="radio" value="c thn" checked >

Tn ging nhau th s thuc v cng mt nhm (Groups)

Phn t chn File
<Input name="ChonFile" type="file" size="30">
To textbox n (Hidden).
<Input name="PhanTuAn" type="hidden" value="">
To cc phn t v t thuc tnh:
+ To mt textbox v t thuc tnh font:
<FONT FACE = Times New Roman>
<Input type = text value = Font ch Unicode y !>
</FONT>
+ To mt textbox v t thuc tnh thng qua phong cch CSS:
<Input type = text value = Font Unicode Style = Font-Family:Times new
roman>

+ To mt nhn c font ch xanh, c hiu ng:

<P Style =Color:Blue; font-size:20; Text-Align:center>Xin cho </p>
+ To mt nt nhn c mu nn :
<Input type = button style=font-family:arial; background-color:red value = >

Kt qu

Chng I: Bi tp c bn v JavaScript
Mc tiu: Kt thc chng ny ngi hc c th:
Vit cc cu lnh JavaScript v nhng vo trang web
S dng c cc i tng nhp xut Promt, document.write.
Truy xut thuc tnh ca cc phn t HTML bng cu lnh JavaScript
Vit lnh x l mt s s kin n gin.
Ni dung:
6

V d 1: Cho ngi dng nhp vo tn v tui. Hy vit li tn v tui ca ngi ra mn

hnh bng hm document.write, trong tn c mu m, tui c gch chn.
Gii mu:
<HTML>
<HEAD> </HEAD>
<BODY>
<script language = "JavaScript">
var Ten, Tuoi;
// Khai bo 2 bin lu tn v tui
Ten = prompt("Bn hy nhp vo tn ", "");
Tuoi = prompt("Bn hy nhp vo Tui : ", 20);
document.write("Cho bn : <B> " + Ten + "</B>");
document.write("<BR>"); // Xung dng
document.write("Tui ca bn l : <U> " + Tuoi + "</U>");
</script>
</BODY>
</HTML>
V d 2: To mt nt nhn (button) c name l welcome, value l " Welcome ". Mt
textbox c tn l msg, value = "Welcome to".
Hng dn : S dng phng thc (hm) write ca i tng document to.
Gii mu:
<HTML>
<HEAD> </HEAD>
<BODY>
<script language = "JavaScript">
document.write("Tao Button va Text bang Script<BR>");
document.write("<BR>");
document.write("<input type=button name=welcome value = 'Welcome' ");
document.write("onclick = 'alert ('Welcome to JavaScript');' > ");
document.write("<input type = text name = msg value = 'Welcome to'>");
</script>
</BODY>
</HTML>
V d 3: To mt nt nh trong v d 2 v thm chc nng sau: Khi ngi dng click vo nt
welcome th hin th thng bo "Welcome to JavaScript !"
Hng dn: Dng th to nt nhn v thm thuc tnh onClick = "<Cu lnh
JavaScript>;" (Trong <Cu lnh JavaScript> c th l mt lnh JavaScript bt k, v d
lnh document.write, alert, prompt hoc lnh gi hm v.v...)
Gii mu:
<HTML>
<HEAD> </HEAD>
<BODY>
<input type=button name= welcome value="Welcome" onclick="alert('Welcome to JavaScript');">

</BODY>
</HTML>
Lu quan trng: Trong JavaScript, mt hng xu c bao bi cp nhy n hoc nhy
kp, v d cc xu: 'nhy n', "nhy kp" l nhng xu hp l, tuy nhin bn vit : 'abc" hay
"xyz' l nhng xu khng hp l. Trong trng hp bn mun in chnh bn thn du nhy
n hoc nhy kp ra mn hnh th bn t trc n mt k t \, v d bn c th in ra mn

hnh dng ch : Women's day ra mn hnh bng hai hm alert v document theo cc cch sau
y : alert("Women's day"), document.write('Women\'s day'); alert("Women\"s day");
alert('Women"s day'); v.v...
V d 4: Ly (c) gi tr ca mt phn t HTML
To 2 phn t nh trong v d 2 bng th HTML, khi ngi dng click chut vo nt
Welcome th hin th ni dung cha trong text c tn l msg.
Hng dn: ly gi tr ca mt phn t HTML, bn vit <Tn phn t>.value
V d: msg.value cho ta gi tr ca text tn l msg.
Gii mu:
<HTML>
<HEAD> </HEAD>
<BODY>
<input type = button name = welcome value = "Welcome" onclick = "alert(msg.value)">
<input type = text name = msg value = "Welcome to JavaScript" size = 30>
</BODY>
</HTML>
V d 5: Khai bo hm trong JavaScript v cch lin kt nt nhn vi mt hm
To 2 phn t nh v d 2, khi ngi dng nhn nt th gi mt hm c tn l HienThi, hm
hin th c chc nng hin th ni dung trong text c tn l msg trn.
Hng dn: Trong th to button, bn t thuc tnh onClick = "<Tn hm>", trong trng
hp ny bn t OnClick = "HienThi()". iu ny c ngha l khi ngi s dng Click chut
(OnClick = Click chut) th trnh duyt hy gi hm HienThi(). Cng ging nh trong ngn
ng C, Mt hm bt buc phi c cp ngoc n, cho d c tham s hay khng. V d khi gi
hm HienThi th bn phi vit l HienThi().
Gii mu:
<HTML>
<HEAD>
<Script Language = "JavaScript">
function HienThi() // Khai bo mt hm tn l HienThi
{
alert(msg.value);
// Ly ni dung trong text box v hin th
alert("Bn hy nhp vo text v th li !");
}
</Script>
</HEAD>
<BODY>
<input type = button name = welcome value = "Welcome" onclick = "HienThi()">
<input type = text name = msg value = "Welcome to JavaScript" size = 30>
</BODY>
</HTML>
Lu : Trong C, khai bo mt hm thng bn vit, v d: int HienThi() v...v.. Tuy
nhin, vi JavaScript c hi khc t cht, thay vo bn vit function HienThi()
Cn cc cu lnh khc bn vit tng t nh ngn ng C hc. Cc hm khi khai bo trong
JavaScript bt buc phi t trong th <Script> ..... </Script>.

Chng II: S dng cc lp x l Chui, Ngy thng, Ton hc.

Mc tiu: Kt thc bi hc ny, ngi hc c th.

M t c cng dng ca cc lp x l Chui (String), x l ngy thng (Date) v

x l cc hm ton hc Math.

S dng c mt s phng thc, thuc tnh c bn ca cc lp ny.

Vn dng vit mt s trang web n gin c s dng n 3 lp trn.

Ni dung:
Bi tp 1: Minh ho cch khai bo v s dng i tng Date ngy gi ca h thng.
Yu cu: Hy hin th ngy v gi ca h thng my tnh khi trang Web c np. Thng tin
hin th ra c dng nh sau:

Hm nay l th 2, ngy 13 thng 9 nm 2004

Hng dn: S dng i tng Date v s dng cc hm ly th, ngy, thng, nm in

thng tin ra mn hnh. Ch n cc hm tnh thng, ngy trong tun b ht mt n v.
Bi tp 2: Minh ho s khai bo v dng i tng Date ly Gi, pht, giy ca h thng
Yu cu: Hin th Gi v pht trong thanh tiu ca ca s khi trang Web c np.
Hng dn: Gi tr hin th trong thanh tiu ca trang web c lu trong thuc tnh title
ca i tng document, do vy hin th thng tin trn thanh tiu , bn cn vit:
document.title = <Gi tr>. V d, hin th dng ch "Hello Every body !", bn vit:
document.title "Hello Every body !"
Minh ho:
<HTML>
<BODY>
<script language="JavaScript">
var D = new Date();
document.title = "By gi l: " + D.getHours()+" gi "+ D.getMinutes()+ " pht.";
</script>
</BODY>
</HTML>

Bi 3: Vn dng bin i tng Date tnh tui ca mt ngi.

Yu cu : Cho ngi dng nhp vo nm sinh ca h, sau hin th tui tng ng.
Hng dn: S dng i tng Date ly nm hin ti. Tui s bng nm hin ti tr i
nm sinh va nhp vo.
Minh ho mu:
<HTML>
<TITLE>Tnh tui</TITLE>
<BODY>
<script language="JavaScript">

10

var D = new Date();

var NamSinh, NamHienTai;
NamHienTai = D.getYear(); // Lu nm hin ti vo bin
NamSinh = prompt("Bn sinh nm bao nhiu ? : ","");
alert("Tui ca bn by gi l : " + (NamHienTai-NamSinh));
</script>
</BODY>
</HTML>

Bi 4: Tng t nh bi 3 nhng Nm sinh nhp vo khng c ln hn nm hin ti.

Hng dn: S dng vng lp dowhile yu cu nhp li nu nm sinh > nm hin ti.
Minh ho mu:
<HTML>
<TITLE>Tinh tuoi</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<BODY>
<script language="JavaScript">
var D = new Date();
var NamSinh, NamHienTai;
NamHienTai = D.getYear(); //Lu nm hin ti vo bin
do {
NamSinh = prompt("Bn sinh nm bao nhiu : ","");
} while (parseInt(NamSinh)>NamHienTai); //Nhp li nu Nm sinh>nm hin ti
alert("Tui ca bn by gi l : " + (NamHienTai-NamSinh));
</script>
</BODY>
</HTML>

Bi 5: Minh ho cch t cc cu lnh JavaScript vo trong cc phn t HTML

thc thi khi ngi dng click chut v s dng hm open ca i tng window
m trang web.
Yu cu: Vit on Script cho ngi dng nhp vo mt s nguyn. Nu ngi
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.
Hng dn: m mt trang Web bt k trong ca s hin hnh bn vit nh sau:
window.open("a ch ca trang cn m").
V d : window.open(http://www.vnn.vnn) m trang ch ca VNN trong ca s hin ti.
Nh vy, gii quyt yu cu ca bi ton trn , bn cn cho ngi dng nhp
vo mt s v s dng cu trc switch kim tra v m trang web tng ng.
Minh ho mu:
<HTML>
<TITLE>M trang web vi hm open ca i tng window</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<BODY>
<script language="JavaScript">
var LuaChon;
LuaChon = prompt("Bn hy nhp vo mt s m trang web : ", 1);
switch (LuaChon)
{
case "1" : window.open("http://www.vnn.vn"); break;
case "2" : window.open("http://www.mail.yahoo.com"); break;

11

case "3" : window.open("http://www.echip.com.vn"); break;

default : window.open("http://www.google.com");
}
</script>
</BODY>
</HTML>

Bi s 6: Minh ho vic khai bo v s dng bin i tng Array lu tr danh sch v

cch s dng cc hm ca i tng Array nh hm sort v vng lp forin
Yu cu: Cho ngi dng nhp vo danh sch tn ca mt lp, sau sp xp theo vn
Alphabet ri hin th danh sch sp xp ra mn hnh, mi ngi trn mt dng.
Hng dn: S dng vng lp for cho php nhp danh sch h tn v Lu danh sch vo
mt mng, sau s dng phng thc sort ca i tng mng sp xp, tip theo dng
vng lp forin in cc phn t trong danh sch.
Minh ho mu:
<HTML>
<TITLE>Sp xp mng</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<BODY>
<script language="JavaScript">
var SoLuong, x;
var DS = new Array(100); // Khai bo mng DS, c th lu ti a l 100 phn t
SoLuong = prompt("Bn cn nhp bao nhiu ngi : ", 5);
for (i=0; i < SoLuong; i++)
{
DS[i] = prompt("Nhp vo h tn : ","");
}
// Gi hm sort ca i tng mng DS sp xp
DS.sort();
//Hin th kt qu sau khi sp (sort)
document.write("<h1>Danh sch sp xp l </h1>");
for (x in DS)
/* Nn s dng cu trc for in ny duyt mng */
{
document.write( DS[x] );
document.write("<BR>");
// Xung dng
}
</script>
</BODY>
</HTML>
*** Nhn xt: Nu mun sp theo chiu gim dn th sau khi sort bn gi hm reverse.

Bi s 7: Minh ho vic a cc cu lnh JS vo trong mt th khi ngi dng click chut.

Yu cu: To mt nt nhn (Button) c name = "DangKy", value = "ng k". Khi ngi
dng Click vo nt ny th thng bo l "ng k dch v E-Mail".
Hng dn: i vi cc phn t HTML, nh textbox, button, checkbox, Select v.v Cc
trnh duyt u cho php ta thc thi mt hoc nhiu cu lnh JavaScript khi ngi s dng
click chut ln cc phn t . Vn ch, vit cc cu lnh nh th no ?
vit cc cu lnh JavaScript khi ngi dng click chut ln mt phn t no , trong th
ca phn t ny, ta vit nh sau: OnClick = "Cc cu lnh JavaScript".

12

"Cc cu lnh JavaScript" y l bt k cu lnh JavaScript no v chng phi

c cch nhau bi du chm phy. Ngoi ra, cc cu lnh phi t trong cp du
nhy kp (Hoc nhy n).
V d mt s cch a cu lnh JavaScript cn thc thi khi ngi dng click chut
1. Onclick = "alert('Hello world';"
2. OnClick = 'document.write("Welcome to JavaScript");'
3. OnClick = "var x,y; x = 10; y = 20; alert('Tng l : ' + (x + y)); "
4. OnClick = "var Tuoi; Tuoi = txtTuoi.value; KiemTra(Tuoi);"
5. OnClick = "KiemTra();"
Theo v d trn, Khi ngi s dng Click :
1 : Thc hin cu lnh alert('Hello world')
2 : Thc hin cu lnh document.write('Welcome to JavaScript');
3 : Thc hin NHIU cu lnh JavaScript
4 : Thc hin nhiu cu lnh JavaScript v c li gi n hm KiemTra(Tuoi)
5 : Thc hin cu lnh gi hm KiemTra().
Minh ho mu:
<HTML>
<HEAD>
<TITLE>Minh ho a cu lnh JavaScript vo cc phn t</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
</HEAD>
<BODY>
<INPUT type="button" name="DangKy" value="ng k" onClick="alert('Dang ky E-Mail'); ">
</BODY>
</HTML>

Bi s 8: Minh ho cch thay i thuc tnh ca mt i tng thng qua vic vit cc cu lnh JavaScript.
To mt nt c name = ThayMauNen, value = "Thay i mu nn". Khi ngi dng click chut vo nt ny th
thay i mu nn ca trang Web thnh mu "xanh".
Hng dn: thay i mu nn ca trang Web thnh mu, ta cn thay i thuc tnh document.bgColor =
"blue". (Mu l red, tm : magenta, en: black, trng: white, vng: Yellow, tm nht: lavender). Nh vy, cu
lnh ny s c t trong phn onClick nh sau:
<HTML>
<HEAD>
<TITLE>Thay mau nen bang click chuot</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
</HEAD>
<BODY>
<h2>Thay i mu nn s dng i tng document</h2>
<INPUT type="button" name="ThayMauNen" value="Thay i mu nn"
onClick="document.bgColor = 'blue' ">
</BODY>
</HTML>

13

Bi s 9: Minh ho vic c gi tr trong phn t text v hin th ra mn hnh

Yu cu: To mt hp text c tn l HoTen. Mt nt c tn l HienThi, value = "Hin
th". Khi ngi dng click vo nt HienThi th hin th ni dung trong hp text
bng hm alert.
Hng dn: ly gi tr ca mt phn t HTML no , chng ta vit
<Tn phn t>.value
Trong : <Tn phn t> chnh l gi tr ca thuc tnh name khi bn to th.
V d : - Hoten.value, DangKy.value, GioiTinh.value, Password.value v.v
Minh ho :
<HTML>
<HEAD>
<TITLE>c gi tr trong hp text</TITLE>
</HEAD>
<BODY>
<h2>Hy g vn bn vo trong hp text v click vo nt Hin th</h2>
<INPUT type="text" name="HoTen" >
<INPUT type="button" name="HienThi" value="Hin th" onClick="alert(HoTen.value); ">
</BODY>
</HTML>

Lu : Khi mun ly gi tr ca phn t no bng JavaScript th bn phi t cho n

mt ci tn, nh v d trn, ly gi tr trong hp text ta t cho hp text ny tn
(name) l HoTen.
Bi s 10: Minh ho vic thay i gi tr ca hp textbox
Yu cu: To ra ba hp text ln lt tn l SoHang1, SoHang2, KetQua v mt nt c tn l
TinhTong, thc hin php tnh tng. Khi ngi dng nhp hai s hng vo hp SoHang1
v SoHang2, sau click vo nt TinhTong th kt qu tng s c lu vo trong hp text
KetQua.
Hng dn: thay i gi tr mt thuc tnh no ca phn t HTML, bn vit theo cch
sau:
<Tn ca phn t>.<Tn thuc tnh> = <Gi tr mi>
Trong : Tn phn t chnh l gi tr ca thuc tnh name khi bn to th.
V d: HoTen.value = "y l vn bn mi", DangKy.value = "Sign Up now", v.v
<HTML>
<HEAD>
<TITLE>Thay i gi tr ca thuc tnh</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
</HEAD>
<BODY>
<h2>Hy nhp hai s v click vo nt Tnh tng</h2>
<INPUT type="text" name="SoHang1" > +
<INPUT type="text" name="SoHang2"> =
<INPUT type="text" name="KetQua">
<INPUT type="button" value="Tnh tng"
onClick="KetQua.value = parseFloat(SoHang1.value) + parseFloat(SoHang2.value)">
</BODY>
</HTML>

Lu : - Gi tr lu trong hp text lun l mt xu, do vy thc hin php cng c

ng, bn cn phi chuyn gi tr sang dng s bng hm parseFloat (Hoc parseInt) nh
trn.
- Vic thay i ny c th p dng cho cc phn t khc nh button, checkbox, v.v

14

Bi tp 11: Minh ho vic gi hm khi ngi dng click vo mt nt

Yu cu: To ra 4 text c tn ln lt l : MauNen, MauChu, TieuDe, TrangThai v mt nt
c tn l ThayDoi, value l "Thay i". Khi ngi dng click vo nt ThayDoi th mu nn,
mu ch, tiu ca ti liu v thanh trng thi ca ca s trnh duyt s c thay i bng
cc gi tr trong text tng ng
Hng dn: Bn hon ton c th vit nhiu cu lnh trong thuc tnh OnClick nh cc v d
trc, tuy nhin nu c nhiu lnh th chng trnh trng khng c sng sa cho lm. Khi
bn c th nhm cc cu lnh vo trong mt hm v trong thuc tnh OnClick bn ch vic
gi hm ny ra.
Minh ho mu
<HTML>
<HEAD> <TITLE>Thay i thuc tnh ca trang Web</TITLE> </HEAD>
<SCRIPT language="JavaScript">
function CapNhat( )
{
document.title = TieuDe.value;
/* Thay i tiu ca trang Web */
document.bgColor = MauNen.value;
/* Thay i mu nn ca trang */
document.fgColor = MauChu.value;
/* Thay i mu ch ca trang */
window.defaultStatus = TrangThai.value; /* Thay i dng trng thi ca ca s */
}
</SCRIPT>
<BODY>
<h2>Nhp vo cc gi tr v nhn nt Thay i</h2>
<INPUT type="text" name="TieuDe" value="Tiu mi">
<INPUT type="text" name="MauNen" value="Nhp mu vo y (v d blue)"> <BR>
<INPUT type="text" name="MauChu" value="Nhp mu ch vo y (v d white)">
<INPUT type="text" name="TrangThai" value="Nhp dng trng thi vo y "> <BR>
<INPUT type="button" name ="ThayDoi" value="Thay i" onClick="Ham( );">
</BODY>
</HTML>
Nhn xt: v d trn, khi ngi dng click chut ln nt ThayDoi th hm CapNhat( ) s c gi.

Thanh
Thanh tiu
tiu

ca
ca ca
ca s
s
Thanh
Thanh trng
trng
thi
thi ca
ca ca
ca s
s

15

i tng String
Bt k mt bin xu hoc mt hng xu u c coi l mt i tng xu.
V d ta c: var s = "Hung Yen-Aptech", "JavaScript" hay
var x = new String("Welcome to Aptech") th bin s, x v hng "Hng Yn - Aptech" l
cc i tng xu v u c cc phng thc v thuc tnh di y.
Thuc
tnh

Tn thuc tnh

ngha

length

Cho bit di ca mt xu x

Tn phng thc
charAt(n)

ngha
Cho ta k t ti v tr: n
Cho ta v tr xut hin ca xu
s trong xu s. Nu khng thy
th v tr tr v l -1.
Cho ta v tr cui cng ca
xu x trong xu s
Ly ra mt xu con trong xu
s, ly t v tr n1 n n2 (s
k t ly ra l n2-n1 k t)
Chuyn xu s thnh ch
thng

indexOf(x)
lastIndexOf(x)
substring(n1, n2)
toLowerCase()

Phng
thc

V d
var x = "abc";
alert(x.length); // 3
alert("Aptech".length); // 6
V d
alert(s.charAt(0)); //H
s.indexOf("Aptech") -> 9
"Hello".indexOf("e") -> 1
"Java".indexOf("C") -> -1
s.lastIndexOf("n") -> 7
"Hello".lastIndexOf("l") -> 3
s.substring(0,3) -> "Hun"
s.substring(2,4) -> "ng"
"Hello".substring(2,5) ->"llo"
s.toLowerCase() -> "hung yen-aptech"
"Hello".toLowerCase()->"hello"
s.toUpperCase() -> "HUNG YENAPTECH"
"Hello".toUpperCase() -> "HELLO"
document.write(s.big())
document.write("abc".big())
document.write(s.bold())
document.write("abc".bold())

toUpperCase()

Chuyn xu s thnh ch
HOA

big()

In to xu s

bold()

In m xu s

fontcolor(m)

In xu s vi mu m. v d
mu: "red", "blue"
m"magenta" v.v..

document.write(s.fontcolor("blue"))
document.write("abc".fontcolor("red"))

fontsize(n)

In xu s vi kch c font l n

document.write(s.fontsize(30))
document.write("Java".fontsize(20))

strike()

In xu s vi ng gch
ngang

document.write(s.strike())

sub()

In xu s di dng hin ti

sup()

In xu s trn dng hin ti

anchor(A)

To mt im neo, c tn l
A, phn hin th l s.

document.write(s.anchor("TOP"))

link(A)

To mt lin kt n im
neo A, phn hin th l s

document.write(s.link("#TOP"))
document.write("V u
trang".link("#TOP"))

document.write(s.sub())
document.write("H"+"2".sub()
+"O")//H2O
document.write(s.sub())
document.write("x" + "2".sup());// -> x2

i tng Math
Vi i tng Math, Khi khai bo bin thuc i tng ny, bn khng c vit dng
nh : var m = new Math(); Khi mun s dng cc thuc tnh v phng thc ca i tng
ny bn gi trc tip cc thuc tnh v phng thc, v d: Math.sin(3.14), Math.PI,
Math.abs(x) v.v...
Thuc
tnh

Tn thuc tnh

ngha

PI

Cho ta hng s PI (tc 3.14159)

Cho ta hng s E (= 2.718)

V d
var BanKinh = 10;
alert("Din tch hnh trn l :" + Math.PI
* BanKinh*BanKinh);
alert("Hng s E l: " + Math.E)

16

SQRT2

Cho ta cn bc 2 ca 2 :
(=1.4142)
Cho ta (cn bc 2 ca 2) / 2

SQRT1_2
Tn phng thc

ngha

abs(x)

Cho ta tr tuyt i ca x

sin(x), cos(x)

Tnh sin v cos ca x

sqrt(x)

Tnh cn bc hai ca x

pow(x,y)

Tnh xy

round(x)

Lm trn s x. Nu phn l sau

phn thp phn > = 0.5 th b
phn thp phn v cng thm 1.
Tri li th b phn thp phn
nhng v khng cng g

max(a,b)

Cho ta gi tr ln nht trong hai

s a v b

min(a,b)

Cho ta gi tr nh nht trong hai

s a v b

Phng
thc

ceil(x)

floor(x)

Lm trn s x, Nu s x c
phn thp phn th phn thp
phn b ct i sau cng thm
1 vo x
Lm trn s x, nu x c phn l
thp phn th b ct i, ch ly
phn nguyn.

alert("Cn bc 2 ca 2 = " +
Math.SQRT2);
alert("Cn bc 2 ca 2 /2 = " +
Math.SQRT1_2);
V d
alert(Math.abs(-19)); // -> 19
alert(Math.abs(-1.5));// -> 1.5
alert("Sin(1.5) = " + Math.sin(1.5));
alert("Cos(0) = " + Math.cos(0));
alert("Cn 16 = " + Math.sqrt(16)); //4
alert("6^2="+ Math.pow(6,2)); //->36
alert("9^0.5="+ Math.pow(9,0.5));//3
alert(Math.round(3.5));//->4
alert(Math.round(3.6));//->4
alert(Math.round(3.49));//->3
var a = 10, b = 100;
alert("Max(a,b) = ",Math.max(a,b)); //100
alert(Math.max(-1,2));//->2
var a = 10, b = 100;
alert("Min(a,b)=",Math.min(a,b));//10
alert(Math.min(-1,2));//->-1
var x = 1.1, y = 2.5, z = 4.8;
alert(Math.ceil(x),
Math.ceil(y),Math.ceil(z)); // ->235
var x = 1.1, y = 2.5, z = 4.8;
alert(Math.floor(x),
Math.floor(y),Math.floor(z)); // ->124

i tng Date
Khai bo bin thuc i tng Date nh sau: var <Tn bin> = new Date();
V d ngy, gi hin ti l th hai 20/12/2004, 6h30' 20'', ta c cc kt qu sau:
Tn phng thc
getDay()
getDate()
getMonth()
getYear()
getHours()
getMinutes()
getSeconds()

ngha
Ly th hin ti trong tun (Ch nht ng
vi 0, th hai ng vi 1, ..., th 7 ng vi
6)
Ly ngy hin ti
Ly thng hin ti (0->thng 1, 1-> thng
2)
Ly nm hin ti
Ly gi hin ti (Tnh theo 24 h)
Ly pht hin ti
Ly giy hin ti

V d
var D = new Date();
alert(D.getDay()); //-> 1
alert(D.getDate()); //->20
alert(D.getMonth()); //->11

alert(D.getYear());//->2004
alert(D.getHours());//->6
alert(D.getMinutes());//->30
alert(D.getSeconds());//->20
D.setDate(10);
setDate(n)
t ngy l n
alert(By gi: +D.getDate()); //10
cc phng thc setYear(n), setHours(n) cng lm tng t. Ch , s n phi l s nguyn. v vic set ch
lm thay i gi tr ngy, thng nm, gi, pht, giy ... ca i tng Date ch khng lm thay i ngy gi
ca h thng my tnh.

17

Chng III: X l s kin trong trang HTML vi JavaScript

Mc tiu ca chng:
- Gip hc vin nhn bit c khi no s kin xy ra
- Vit cc cu lnh JavaScript t vo cc s kin khi n xy ra
- Vn dng linh hot vo vit chng trnh
Ni dung:
1.
Nhc li khi nim s kin (event)
S kin l nhng hnh ng do ngi dng hoc h thng gy ra. Cc hnh ng
do ngi 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 ng thc thi cc cu lnh JavaScript tng ng vi s kin
(nu chng ta nh ngha chng trnh x l s kin tng ng).
2.
Bng lit k cc s kin v tn tng ng
Mi s kin khi xy ra chng u c mt ci tn v thng bt u bng t on, v d nh onClick,
onChange.... c th c m ta nh trong bng di y:
Tn S kin

Ch p dng cho phn t

M t

Onabort

Image

c kch hot khi ngi s dng

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 b mt focus

Onclick

Button, radio button, check box, submit

button, reset button, link

c kch hot khi ngi s dng

kch tri chut vo phn t.

Onchange

Text field, textarea, select list

N c kch hot khi ngi s

dng thay i gi tr ca phn t.

Onfocus

Window, frame, all form element

N c kch hot khi ngi s

dng t focus vo mt ca s,
khung, hay phn t form

Onload

Document, applet, frameset, img, link,

object, script, style, window

N c kch hot khi ti liu

c trnh duyt np xong.

Onmousedown

Button, document, link

N c kch hot khi ngi s

dng n nt con chut

Onmouseout

Area, layer, link

N c kch hot khi ngi s

dng di chuyn con tr ra khi mt
phn t.

Onmouseover

Area, layer, link

N c kch hot khi ngi s

dng di chuyn con tr khp mt
phn t.

Onmouseup

Button, document, link

N kch hot khi ngi s dng

nh nt con chut c n.

Onreset

Form

Khi ngi s dng click vo nt

reset form

Onresize

Window, frame

N kch hot khi ngi s dng

ko gin ca s hoc mt khung.

onsubmit

Form

N c kch hot khi ngi s

18

dng click vo nt submit ca

form.
onunload

Document, frameset, image, window

N c kch hot khi ngi s

dng chuyn sang (m) mt trang
khc.

Vy p dng tn cc s kin lit k trn nh th no ?

Nu bn bit khi no mt s kin xy ra th bn hon c th thc thi cc cu lnh JavaScript
tng ng vi s kin .
C php khai bo trnh duyt thc thi cc cu lnh JavaScript khi mt s kin xy ra nh sau:
a/ Cch 1: <Tn th <Tn s kin> = " <Mt Cu lnh JavaScipt>" ..... >
Lu : Mt cu lnh JavaScript c th l bt k cu lnh no m bn hc. Cu lnh ny phi
c t trong cp nhy kp (hoc cp nhy n).
V d1 :
<Input onClick = "alert('Bn click vo textbox');" >
V d 2:
<Input type=button value="Th" onMouseMove = "alert('Bn di chut');">
V d 3:
<P onClick = "window.status='Vn bn b click chut';"> Hello ! </P>
V d 4:
<Input type = submit value = "Gi" onclick = "alert(' c gi');">
Ta hy i phn tch v d 1. Trong v d ny ta to ra mt textbox v vit (khai bo) s kin click
nh sau : onClick = "alert('Bn click vo textbox');"
y c 2 phn:
- Phn onClick : l tn ca s kin click chut (xin tham kho bng trn).
- Phn th 2 sau du =, l mt cu lnh JavaScript tng ng s c 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 ngi dng click chut vo textbox ny th trnh duyt s t
ng thc thi cu lnh alert('Bn click vo textbox');

Kt lun: Nu chng ta mun trnh duyt thc thi mt cu lnh no khi mt s kin xy ra th
cn khai bo trong phn nh ngha th nh sau:
<Tn s kin> = "<Cu lnh JavaScript cn thc thi>"

Tng t trong v d 2: Bt c khi no ngi dng di chuyn chut trong textbox (tn s kin l
onMouseMove) th lnh "alert('Bn di chut');" s c thc thi.
Trong v d 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 b click chut"
Trong v d 4: Theo bn, thng bo " c gi" khi no th xut hin !?

b/ Cch 2: Bn c th khng ch 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 c phn cch nhau bi du chm phy ";".
C php vit nh sau:
<Tn th <Tn s kin>=" <Cu lnh 1>; <Cu lnh 2>; ...; <Cu lnh n>" .... >
V d 1:
<input onclick="window.status='Click chut'; alert('Bn click chut')">
Trong v d ny, ta to mt textbox v khi ngi dng click chut vo textbox ny th trnh duyt s
thc thi 2 cu lnh tng ng nh ta ch ra trong th :
window.status='Click chut' v alert('Bn click chut'). 2 lnh ny c phn cch nhau bi
du chm phy.
V d 2:

19

<input name=Hoten onFocus="Hoten.value=' ' ; window.status='H tn nhn focus' ;

window.document.title = 'Ni dung trong textbox b xo' ">
Trong v d ny ta cng to ra mt textbox v khi textbox ny nhn c focus (click chut) th trnh
duyt s t ng thc thi 3 cu lnh :
Hoten.value=' '
window.status='H tn nhn focus'
window.document.title = 'Ni dung trong textbox b xo'
Nhn xt: 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 chng trnh x l s kin s dng theo cch 1 hoc cch 2. Cn trong trng
hp s cu lnh cn x l l ln, th cch nn s dng cch khc m ta s cp di y.
C/ Cch 3: Gi mt hm khi mt s kin xy ra.
V bn cht cch ny chnh l cch mt, c iu cu lnh l mt li gi hm.
Cch ny thng c s dng khi :
S lnh cn thc thi khi mt s kin xy ra l ln
m bo cho chng trnh sng sa v d c, d qun l v bo tr
C php khai bo hm trong nh ngha s kin nh sau:
<Tn th <tn s kin> = "Tn hm cn gi([Tham s nu c] )" .... >
V 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: Tu vo trng hp c th m khi mt s kin xy ra, bn c th vit mt lnh, nhiu lnh
hoc mt hm tng ng s c thc thi trong nh ngha th. Tuy nhin, mt qui tc chung l: Nu
on chng trnh x l s kin ch 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
V d 1: Hy to mt nt nhn (button) c value = "Th". Khi ngi dng click vo nt ny th tiu
ca ca s s l "Bn click chut"
Hng dn: Trc ht ta cn xc nh 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 ngi dng click chut th n
c thc thi theo nh yu cu bi ton
Lnh thay i tiu nh sau: document.title = "Bn click chut"
Nh ta bit khi ngi dng click th s kin onClick xut hin, do vy cu lnh trn s
c t tng ng vo s kin onClick, nh sau:
<HTML>
<HEAD>
<TITLE>Hay click vao nut o duoi va quan sat tieu de</TITLE>
</HEAD>
<BODY>
<input type=button value="Thu" onClick="document.title='Ban da click chuot' ">
</BODY>
</HTML>
V d 2: To mt trang Web, c 2 phn t : Phn t button c value = "Gi", v mt phn t
textbox.Yu cu: khi ngi dng click vo nt Gi th thng bo trn mn hnh l : "Bn click vo
nt gi" cn khi ngi dng click vo textbox th thng bo l "Bn click vo textbox".
Hng dn: Theo yu cu ca bi th dng thng bo "Bn click chut vo nt gi" xut hin ch
khi ngi dng click chut vo nt gi, do vy cc lnh thc hin hin th thng bo s c t
trong s kin onclick ca nt nhn. Cn dng thng bo "Bn click chut vo text box" khi
ngi dng click chut vo textbox, do vy cc lnh thc hin hin th dng thng bo s c t
trong s kin onclick ca textbox :
Minh ho:

20

<HTML>
<HEAD>
<TITLE>Hay click vao nut va textbox o duoi va quan sat tieu de</TITLE>
</HEAD>
<BODY>
<input type=button value="Gui" onClick="alert( 'Ban da click chuot vao nut') ">
<input type=text onclick = "alert('Ban da click chuot vao textbox') ">
</BODY>
</HTML>
V d 3: To 2 nt, nt th nht c value = "Xanh", nt th hai c value = "". Yu cu: Khi ngi
dng click vo nt xanh th mu nn ca ti liu l xanh (blue), cn khi ngi dng click vo nt
th mu nn ca ti liu l: (red).
Hng dn: Thuc tnh mu nn ca ti liu c lu trong thuc tnh bgColor ca i tng
document. Thuc tnh ny c th thay i c.
Minh ho:
<HTML>
<HEAD>
</HEAD>
<BODY>
<input type=button value=Xanh onclick="window.document.bgColor = 'blue'; ">
<input type = button value =Do onclick="window.document.bgColor = 'red'; ">
</BODY>
</HTML>
V d 4:
To mt danh sch la chn gm c 4 mu: red, blue, brown v lavender. Khi ngi dng chn mt
mu th mu nn ca ti liu s thay i tng ng.
Hng dn: thay i mu nn ca ti liu ta lm tng t nh v d 3
Minh ho:
<HTML>
<HEAD>
</HEAD>
<BODY>
<script language = JavaScript>
function DoiMau()
{
document.bgColor = Mau.value;
// Hoc vit: window.document.bgColor = Mau.value;
}
</script>
Bn hy chn mu nn:
<Select 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>
</select>
</BODY>
</HTML>
V d 5 : To mt textarea c tn l NoiDung, mt Textbox c tn l : SoKyTu. Vi yu cu nh sau:
Khi ngi s dng g cc phm vo trong textarea th s lng k t ( di xu) cha trong
textarea s c hin th trong textbox. Nu s lng k t trong textarea g vo vt qu 200 k
t th thng bo : "Bn g qu s k t cho php !".
<html>

21

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<script language="JavaScript">
function KiemTra()
{
if (NoiDung.value.length > 200) alert("Bn g qa s k t cho php !");
SoKyTu.value = NoiDung.value.length; // Hin th s k t trong textbox SoKyTu
}
</script>
<body style="font-family:arial">
S k t g : <input type="text" name="SoKyTu"> <BR>
<textarea name="NoiDung" cols=50 rows="10" onKeyUp="KiemTra();"> </textarea>
</body>
</html>
v d trn: Hm kim tra s c gi mi khi s kin nhn phm (onKeyUp) xut hin hay ni
cch khc l khi ngi dng g thm mt k t vo trong textarea. y ta khng t hm kim tra
vo trong s kin onClick; Mn hnh cho v d ny c dng nh sau:

<Xem kt qu>
V d 6: To mt nt c value = "Gi", textbox c name = "HoTen", 2 nt radio c tn l GioiTinh v
nhn tng ng l Nam, n.
Yu cu: Khi ngi dng di chuyn chut vo phn t no th hin th thng bo tng ng di
thanh trng thi. V d nu ngi s dng di chuyn chut qua nt nhn "Gi" th thanh trng thi s
l "Bn ang di chuyn chut vo nt"...
Hng dn: Khi ngi 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: mn hnh

22

<html>
<head>
<title>Xu ly su kien</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body style="font-family:arial">
<input type="button" value="Gi" onmousemove="window.status = 'Chut trong nt'; ">
<input onMouseMove ="window.status='Chut trong textbox';"> <BR>
<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>
<Xem kt qu>
V d 7:
To 3 textbox, c tn ln lt l: SoLuong (S lng), DonGia (n gi) v ThanhTien (Thnh tin);
Yu cu: Khi ngi dng nhp gi tr trong DonGia th kt qu s c cp nht ngay trong
ThanhTien.
Hng dn: Khi ngi dng nhp gi tr trong textbox DonGia bng cch nhn cc phm s th s
kin nhn phm xut hin (s kin nhn phm c tn l onKeyUp), do vy ta s vit cc lnh p ng
vi s kin ny. Cc lnh y ch c mt do vy nn t ngay trong nh ngha th, nh sau:
<html>
<head>
<title>Tinh tich</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body style="font-family:arial;background-color:lavender">
<H1>Bn hy nhp vo s lng v gi:</H1>
S lng: <input name="SoLuong">
n gi:<input name="DonGia" onKeyUp="ThanhTien.value=SoLuong.value*DonGia.value"> <HR>
Thnh tin:<input name="ThanhTien"> USD
</body>
</html>

23

<Xem kt qu>
V d 8: Tng t nh v d 7, nhng vit theo cch khai bo 3 (Cc lnh vit trong hm). Kt qu
vn cho ta nh v d 7
<html>
<head>
<title>Tinh tich</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<Script language = JavaScript>
function TinhToan()
{
ThanhTien.value=SoLuong.value*DonGia.value
;
// Hoc bn vit y l:
// window.ThanhTien.value = window.SoLuong.value*window.DonGia.value
}
</head>
<body style="font-family:arial;background-color:lavender">
<H1>Bn hy nhp vo s lng v gi:</H1>
S lng: <input name="SoLuong">
n gi:
<input name="DonGia" onKeyUp="TinhToan();"> <HR>
Thnh tin: <input name="ThanhTien"> USD
</body>
</html>

24

V d 9: To ra mt trang Web ng nhp vo trang Vinaphone cho php ngi gi tin nhn n
in thoi di ng.
hng dn: ng nhp vo mt trang Web no , nhng thng tin bt buc thng l
UserName v password (mt khu). Tuy nhin, ngoi nhng thng tin bt buc chng ta cn phi
gi cc thng tin ph. Nhng thng tin ph ny ngi dng ngi dng khng phi nhp. (cc thng
tin ph di y s c gch chn)
Minh ho:

<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Dang nhap vao trang http://sms.vinaphone.vnn.vn</title>
</HEAD>
<BODY style="font-family:arial">
<H2>ng nhp vo trang Web ca vinaphone </H2><HR>
<form action="http://sms.vinaphone.vnn.vn/sms/servlet/UserInterface" method=post>
User Name
Password <BR>
<input type="text" id = username name="username" size="20">
<input type="text" id= password name="password" size="20">
<input type="hidden" name="id" value="0" >
<input type="hidden" name="language" value="en">

25

<input type="submit" value="Dang nhap - Login">

</p>
</form>
</BODY>
</HTML>
Cc th c thuc tnh type = "hidden" s khng c hin th trong trnh duyt, tuy nhin khi chng ta
"Submit" th cc thng tin trong cng c gi i.

<Xem kt qu>

Cc bi tp t gii
Bi 1: Hy to ra trang Web c giao din nh sau:

Yu cu:
Khi ngi dng di chuyn chut n phn t no th hin th dng nhc di thanh trng thi
hng dn ngi dng. V d: Khi ngi dng a chut vo trong textbox User Name

26

th th hin th di thanh trng thi l :"Nhp m ngi dng", hay khi ngi a chut n
nt "ng k" th hin th dng nhc: "Gi thng tin i ng k" v.v...
Hng dn: Nt ng k nn l nt thng, tc l to bng th :
<input type = button value = "ng k">
Bi tp 2: C giao din nh bi 1, nhng yu cu nh sau:
Khi gi thng tin i, cn kim tra xem ni dung ngi 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 hp l. (Tc ngy phi nh hn 32,
thng phi nh hn 13)
Hng dn:
Nt ng k nn l nt thng, tc l to bng th :
<input type = button value = "ng k" onClick = "DangKy();">
Trong Hm DangKy() s kim tra d liu hp l v khi d liu nhp vo ng n th gi i bng
cch gi phng thc submit ca i tng document, nh sau: document.submit();
Bi tp 3:
Lm tng t bi tp 7 v 8, nhng thm yu cu: Khi ngi dng nhp hoc s lng, hoc n
gi th hy tnh lun textbox thnh tin.
Hng dn: Vit lnh tnh thnh tin trong c 2 s kin onKeyUp ca c hai textbox s lng v
textbox n gi.
*** Lu : Trc khi tnh tch th cn phi kim tra xem d liu trong hai textbox c hay cha, nu
mt cha nhp g th cha tnh.

Chng IV: nh dng cc phn t HTML bng CSS

Mc tiu ca chng:
- Gip hc vin hiu r hn v ngha ca vic dng kiu (style)
- Tra cu thnh tho cc thuc tnh trong bng dnh sch kiu
- Vn dng cc thuc tnh (kiu) nh dng cho cc phn t trong trang web, nng
cao tnh thm m.
Ni dung:
I. Nhc li khi nim v kiu
Kiu (style) thc cht l mt cch nh ngha thuc tnh cho cc phn t trong trang web theo
mt cch thc mi.
Vic nh ngha cc thuc tnh ny cho cc phn t s cho ta mt "dng v mi", mt "din
mo mi" v trang web. Ngoi ra, vic nh ngha thuc tnh theo c php mi ny s lm
tin cho vic xy dng cc trang web ng m ta s cp trong cc chng tip theo.
V d: Trc y, nh ngha mt on vn bn nm trong th <P> c font ch l .vntime,
chng ta s vit nh sau:
<P ><FONT face=.VnTime>Dng vn bn ny c font ch l .vntime</Font></p>
Nhng vi cch nh dng mi theo c php m ta gi l c php CSS, th c th thc hin
yu cu trn nh sau:
<P style= "font-family:.vntime">Dng vn bn ny c font ch l .vntime </P>
II. Minh ho cch khai bo style
Trong JavaScript, bn c th thit lp cc thuc tnh cho mt th no theo rt nhiu cch.
Di y xin gii thiu 3 cch thit lp thuc tnh cho th, l :
Thit lp (nh ngha) thuc tnh ngay trong khi nh ngha th (tag), kiu ny cn
gi l nh ngha kiu mc dng (style line)

27

Thit lp thuc tnh cho ton b mt loi th no . Cch ny cn gi l nh ngha

b chn
nh ngha mt lp, sau c th em ra s dng cho bt k phn t no
nh ngha b chn ID, cho php p dng tt c cc thuc tnh ca b chn vo tt c
cc th c thuc tnh ID ph hp vi m ID trong nh ngha.

I. Style p dng mc dng (Inline style)

Style mc dng (inline style) cho php bn c th thay i hnh thc (style) ca mt phn t
no bng cch thm cc thuc tnh nh dng trc tip vo ngay bn trong nh ngha ca
th.
Mt s v d minh ho
V d 1: to mt dng vn bn vi th <P>; c mu ch l , bn c th vit nh sau:
<P style = "color:blue"> Mu ny l mu ca ho bnh <P>.
Kt qu cho ta :
Mu ny l mu ca ho bnh
V d 2 : to mt mt button (Nt nhn) c mu nn l tm (magenta), bn vit:

<input type="button" style="background-color:magenta" value="Hello

world">
Kt qu :
V d 3: To mt nt nhn (Button), trong , khi ngi dng a chut n nt th con
tr chut c hnh bn tay
Thuc tnh qui nh chut c kiu hnh bn tay l "cursor:hand", do vy cn thm thuc tnh
ny trong nh ngha th
<Input type = button style = "cursor:hand" value="Chut hnh bn tay ">
Ta c kt qu (Bn di chut vo nt ny):
V d 4 : To mt textbox c vin mu
Thuc tnh to vin mu l : "background-border:red", do vy bn cn t vo trong nh
ngha th text nh sau:
<input type="text" style="border-color:red" value="vin mu ">
Kt qu cho ta mt textbox c vin mu :
Nhn xt :
Trong cc v d trn, chng ta c th thit lp mt s thuc tnh ca bt k phn t no
bng cch a vo dng style = "Tn thuc tnh:Gi tr ca thuc tnh" Trong , Cp tn
thuc tnh : Gi tr ca thuc tnh cc bn c th tra trong bng cc thuc tnh. c t trn
th mc ca my ch.
C th a vo mt hoc nhiu thuc tnh trong biu thc style="...." , khi a nhiu thuc
tnh th cc thuc tnh cch nhau bi du chm phy ";"
V d 5: To mt nt nhn c mu nn l tm (magenta) v mu ch l trng (white)
Thuc tnh qui nh mu nn tm l :"background-color:magenta", Cn thuc tnh qui nh
mu ch trng l "color:white"
Nh vy cn nh ngha th l : <input type ="button" style="background28

color:magenta; color:white" value="Nn tm- ch trng">

Kt qu :
V d 6: Thit lp nh nn ca trang Web l anh1.jpg, v nh ny hin th v tr c nh
(Tc l nu bn c cun thanh cun ca ca s th nh ny s khng b cun theo m vn
ng yn).
Bit rng thuc tnh a nh nn vo trang web nh sau:
background-image:url( ' <ng dn v tn file nh> ')
Thuc tnh nh v tr c nh l :
background-attachment:fixed
Lu : c tnh nh c nh ch c trong IE, khng c trong Nescape
Nh vy, yu cu trn c th thc hin nh sau:
<body style="background-image:url('anh1.jpg'); background-attachment:fixed; color:white;
font-family:arial">
<Click vo y xem minh ho> (Bn phi m bo l m trong trnh duyt IE)
V d 7: To cc lin kt n cc trang http://www.aptech.ute, http://www.vnn.vn, nhng
cc lin kt ny khng c ng gch chn v c cc thuc tnh nh sau:
- Mu ch : (red)
- Mu nn : lavender
- Mu khi chut click vo lin kt : tm (magenta)
- Mu khi trang c thm : nu (brown)
Hng dn:
- Thuc tnh qui nh mu ch ca lin kt l: linkColor, thuc i tng document
- Thuc tnh qui nh mu nn ca vn bn trong mt th : background-color (CSS)
- Thuc tnh qui nh ca lin kt khi b click chut : alinkColor, thuc document
- Thuc tnh qui nh mu ca lin kt c thm: vlinkColor, thuc document
Minh ho (Son trong Dreamweaver):

nh ngha style mc dng

29

III. B chn HTML

B chn HTML cho php chng ta ch cn nh ngha cc thuc tnh mt ln duy nht cho
mt loi th HTML no (V d P, INPUT, H1, H2 ....), v v sau tt c cc vn bn nm
trong loi th ny s c cng nh dng nh nhau. iu ny rt c li cho ta trong thc t,
chng hn khi bn to mt website cho mt cun sch no m trong cun sch ny li c
rt nhiu chng v bn mun mu sc, kch c, font ch, kiu dng... cho tiu cc
chng l nh nhau, th bn ch cn nh ngha mt ln v v sau tiu cc chng s c
cng nh dng ging nh nhau.
Vic chng ta to ra cc tnh cht chung cho mt loi th no th ta gi l mt b chn
(Selector) HTML
nh ngha ra mt b chn HTML, ta c 2 cch, bn c th tu chn mt trong 2 cch
ny. Cch th nht l ta vit theo mt dng c php m ta gi l c php dng CSS, dng th
hai l ta vit theo c php ca JavaScript.
C php to b chn theo CSS nh sau:
<Style type = "text/CSS">
<Tn th HTML> { <Tn thuc tnh> : <Gi tr> }
<Tn th HTML> { <Tn thuc tnh> : <Gi tr> }
<Tn th HTML> { <Tn thuc tnh> : <Gi tr> }
........................
</Style>
Trong :
-

<Tn th HTML> l mt trong cc th m bn hc, v d n c th l th P,

INPUT, LI, UL, B, H1, H2 v.v...
Tn thuc tnh : L tn ca thuc tnh ca loi th m bn mun thay i . N c th
l color, background-color, cursor, text-align v.v... Tn cc thuc tnh ny cc bn c
th tra trong bng (File Cac the su dung trong CSS.doc" nm trong th mc ti liu v
JavaScript ca my Server)
Gi tr: L gi tr mi m bn mun t cho thuc tnh. V d, "red", "lavender",
"hand", "center" v.v.... c th t gi tr cho hp l, bn tham kho trong file: Cac
the su dung trong CSS.doc" trong server.

Sau khi nh ngha tn ca mt loi th vi cc thuc tnh ca n, th tt c cc th cng

loi v sau s c tt c cc thuc tnh nh nh ngha. lm sng t iu ny, chng ta
hy ly mt s v d :
V d 1: Gi s bn cn to mt danh mc cc u sch ca Aptech, theo nh dng di y

KNOW YOUR DESKTOP

Office 2000
30

Access 2000
Logic Building with C
HTML, DHTML and JavaScript
Dream Weaver
Mt cch thng thng nht, vi cc kin thc nhng phn trc, bn hon ton c th to
c bng cch vit nh sau :

Tuy nhin nu theo cch trn th chng ta d dng thy c mt im cha c thun tin,
l mi khi thm tn mt loi sch chng ta cn phi thm trong th P dng:
<style="font-family:.vntimeH; font-size:20pt; color:red".
Trong trng hp ny, Bng cch nh ra mt qui tc (nh dng) chung cho tt c cc th P
ta c th c kt qu nh mong i m khng phi vit li cc dng d tha nh trn. Vic
nh ra qui tc chung cho th P ta gi l nh ngha b chn P.
p dng c php nh ngha b chn theo dng CSS nh ngha b chn P nh sau:
<style type = "text/css">
P {font-family:.vntimeH}
P {font-size:20pt}
P {color:red}
</style>
Hoc nh ngha mt cch ngn gn :
<style type = "text/css">
P {font-family:.vntimeH; font-size:20pt; color:red}
</style>
PH LC : BNG TRA CU CC THUC TNH CA CSS
- Cc thuc tnh p dng cho Font ch
Thuc tnh

Cc gi tr hp l

V d

font-family

[Tn font hoc kiu]

font-family: Verdana,
Arial;

font-style

normal hoc italic

font-style:italic;

font-variant

normal hoc small-caps

font-variant:small-caps;

31

font-weight

normal ho bold

font-weight:bold;

font-size

[ xx-large | x-large | large | medium | small | xsmall | xx-small ] | [ larger | smaller ] | phn
trm hoc length

font-size:12pt;

font

[ font-style || font-variant || font-weight ] ? font- font: bold 12pt Arial;

size [ / line-height ] ? font-family

- Cc thuc tnh mu v nn (Color and background properties)

Thuc tnh

Cc gi tr hp l

V d

color

Mu

color: red

background-color

Mu hoc transparent

background-color: yellow

background-image

a ch (url) hoc Khng t g

background-image:
url(house.jpg)

background-repeat

repeat | repeat-x | repeat-y | norepeat

background-repeat: no-repeat

background-attachment scroll hoc fixed

background-attachment: fixed

background-position

[ position | length ] | {1,2} | [ top | background-position: top

center | bottom ] || [ left | center | center
right ]

background

transparent | color || url || repeat ||

scroll || position

background: silver
url(house.jpg) repeat-y

* Lu : Cc gi tr in nghing khi s dng bn phi thay bng gi tr c th, v d vit phn

trm hay lenght th bn phi thay cc gi tr dng phn trm, v d 50% i vi thuc tnh
phn trm (percentage) v 10, 20 .... cho thuc tnh length.

32

- Cc thuc tnh p dng cho Text

Thuc tnh

Gi tr hp l

V d

letter-spacing

normal | length

letter-spacing:5pt

text-decoration

none | underline | overline | line-through

text-decoration:underline

vertical-align

sub | super |

vertical-align:sub

text-transform

capitalize | uppercase | lowercase | none

text-transform:lowercase

text-align

left | right | center | justify

text-align:center

text-indent

length | percentage

text-indent:25px

line-height

normal | number | length | percentage

line-height:15pt

- Cc thuc tnh p dng cho cc trong mt bng

Thuc tnh

Gi tr hp l

V d

margin-top

length | percentage | auto

margin-top:5px

margin-right

length | percentage | auto

margin-right:5px

margin-bottom

length | percentage | auto

margin-bottom:1em

margin-left

length | percentage | auto

margin-left:5pt

margin

length | percentage | auto {1,4}

margin: 10px 5px 10px 5px

padding-top

length | percentage

padding-top:10%

padding-right

length | percentage

padding-right:15px

padding-bottom

length | percentage

padding-bottom:1.2em

padding-left

length | percentage

padding-left:10pt; }

padding

length | percentage {1,4}

padding: 10px 10px 10px

15px

border-top-width

thin | medium | thick | length

border-top-width:thin

border-right-width

thin | medium | thick | length

border-right-width:medium

border-bottom-width

thin | medium | thick | length

border-bottom-width:thick

border-left-width

thin | medium | thick | length

border-left-width:15px

border-width

thin | medium | thick | length {1,4} border-width: 3px 5px 3px

5px

border-top-color

color

border-top-color:navajowhite

border-right-color

color

border-right-color:whitesmoke

border-bottom-color

color

border-bottom-color:black

border-left-color

color

border-left-color:#C0C0C0

border-color

color {1,4}

border-color: green red white

blue; }

33

border-top-style

none | solid | double | groove |

ridge | inset | outset

border-top-style:solid

border-right-style

none | solid | double | groove |

ridge | inset | outset

border-right-style:double

border-bottom-style

none | solid | double | groove |

ridge | inset | outset

border-bottom-style:groove

border-left-style

none | solid | double | groove |

ridge | inset | outset

border-left-style:none

border-style

none | solid | double | groove |

ridge | inset | outset

border-style:ridge; }

border-top

border-width | border-style |
border-color

border-top: medium outset red

border-right

border-width | border-style |
border-color

border-right: thick inset

maroon

border-bottom

border-width | border-style |
border-color

border-bottom: 10px ridge

gray

border-left

border-width | border-style |
border-color

border-left: 1px groove red

border

border-width | border-style |
border-color

border: thin solid blue

float

none | left | right

float:none

clear

none | left | right | both

clear:left

- Cc thuc tnh phn loi - classification Properties

Thuc tnh

Gi tr hp l

V d

display

none | block | inline | list-item

display:none

list-style-type

disk | circle | square | decimal |

lower-roman | upper-roman | loweralpha | upper-alpha | none

list-style-type:upper-alpha

list-style-image

url | none

list-styleimage:url(icFile.gif)

list-style-position

inside | outside

list-style-position:inside

list-style

keyword || position || url

list-style: square outside

url(icFolder.gif)

34

- Cc thuc tnh nh v tr cho cc phn t

Thuc tnh

Gi tr hp l

V d

C th p dng cho

clip

To ca mt hnh clip:rect(0px 200px

ch nht| auto
200px 0px)

tt c cc phn t (all
elements)

height

length | auto

height:200px

DIV, SPAN v cc pt b
thay th

left

length | percentage |
auto

left:0px

Cc phn t c nh v
tuyt i v tng i

overflow

visible | hidden |
scroll | auto

overflow:scroll

tt c cc phn t

position

absolute| relative |
static

position:absolute

tt c cc phn t

top

length | percentage |
auto

top:0px

Cc phn t c nh v
tuyt i v tng i

visibility

visible | hidden |
inherit

visibility:visible

tt c cc phn t

width

length | percentage |
auto

width:80%

DIV, SPAN and replaced

elements

z-index

auto | integer

z-index:-1

Cc phn t c nh v
tuyt i v tng i

- Thuc tnh lin quan n in n - Printing Properties

Thuc tnh

Gi tr hp l

V d

page-break-before

auto | always || left | right

page-break-before:always

page-break-after

auto | always || left | right

page-break-before:auto

-Pseudo Classes
Thuc tnh

Gi tr hp l

V d

cursor

auto | crosshair | default | hand | move | e- { cursor:hand; }

resize | ne-resize | nw-resize | n-resize | seresize | sw-resize | s-resize | w-resize | text |
wait | help

active, hover, link,

visited

n/a

a:hover { color:red; }

first-letter, first-line

any font manipulating declaration

p:first-letter{
float:left;color:blue
}
.

35

Mt s v d p dng:
V d 1: To mt dng vn bn Welcome to CSS c font ch l Arial, in nghing v
kch thc font ch l 16 point.
<HTML>
<HEAD> </HEADS>
<BODY>
<P style=font-family:arial; font-style:italic; font-size:16pt>Welcome to </P>
</BODY>
</HTML>
<Xem kt qu>
V d 2: To mt textbox vi mu nn l mu tm (magenta).
<HTML>
<HEAD> </HEADS>
<BODY>
<input type = text style = background-color:magenta>
</BODY>
</HTML>
<Xem kt qu>
V d 3: t 3 file nh nn tng ng vo ti liu, vo textbox v vo textarea
<HTML>
<HEAD> </HEAD>
<BODY style="background-image:url('anh1.jpg');background-repeat:no-repeat">
<input style = "background-image:url('anh2.jpg');background-repeat:repeat-x; width:100%">
<P>
<textarea style = "background-image:url('anh3.jpg');background-repeat:repeat-y" cols = 80 rows =
25>
</textarea>
</BODY>
</HTML>
<Xem kt qu>

*Ghi ch:
-Khi ta t l repeat-x th ta c mt dy nh c xp lin tip theo chiu ngang
-Khi ta t l repeat-y th ta c mt dy nh c xp lin tip theo chiu dc
V d 4: To mt dng vn bn, cha xu: "Trang chu cua HY-Aptech", trong t "Trang
chu" c mu xanh (blue) v khi ngi dng di chuyn chut n ch "Trang chu" th chut
chuyn thnh hnh bn tay, v khi chut click ln ch ny th trang http://www.aptech.ute s
c m.
<HTML>
<HEAD> </HEAD>
<BODY>
<TITLE>To lin kt v x l s kin</TITLE>

<font style ="cursor:hand;color:blue"

onclick="window.open('http://www.aptech.ute');">Trang chu </font> cua HY-Aptech
</BODY>
</HTML> ===> Xem kt qu

Ghi ch: Khi mun p dng cc kiu cho mt s phn t cc bn ch cn vit :

style="Tn_Thuc_tnh : Gi_Tr;" trong nh ngha th. Trong cp "Tn_Thuc_tnh :
Gi_Tr;" c th vit nh ct v d ch ra cc bng trn.

36

Ni dung trang Web ca chng ta by gi s l:

<html>
<head>
<title>Su dung bo chon</title>
</head>
<style type = "text/css">
P {font-family:.vntimeH; font-size:20pt; color:red}
</style>
<body>
<P>Know Your desktop </P>
<P>Office 2000 </P>
<P>Access 2000 </P>
<P>Logic Building with C </P>
<P>HTML, DHTML and JavaScript</P>
<P>Dream Weaver</P>
</body>
</html>

Chng V: To v x l cc tng (Layer)

Mc tiu ca chng ny gip ngi hc c th:
Thay i thuc tnh ca mt phn t HTML khi c cc s kin chut v
bn phm xy ra.
nh ngha cc tng (Layer) trong IE v Netscape.
n, hin tng bng cc lnh JavaScript
To mt menu lin kt n cc trang khc s dng tng.
A.

TM TT L THUYT

1. Mt s s kin thng dng:

- S kin Click chut (onClick) c kch hot khi chut c click
- S kin di chuyn chut vo bn trong phn t (onMouseOver) c kch hot khi chut
di chuyn chut t ngoi vo trong phn t.
- S kin di chut ra ngoi (onMouseOut) c kch hot khi di chuyn chut t bn trong
phn t ra khi phn t.
- S kin nhn phm (onKeyUp) c kch hot khi ngi dng nhn mt phm.

2. Thay i thuc tnh ca cc phn t HTML

thay i thuc tnh ca mt phn t HTML no trong trang bng lnh JavaScript, bn
vit nh sau:
document.all.<Gi tr ID ca th>.style.<Tn thuc tnh> = <Gi tr mi>
Trong :
<Gi tr ID ca th> chnh l gi tr m bn t cho thuc tnh ID, v d:
<H2 ID = TieuDe> THAY I THUC TNH CA TH </H2> th <gi tr ID ca th>
trong trng hp ny s l TieuDe.
<Tn thuc tnh> l tn thuc tnh cn thay i. Bn c th tra trong ti liu c
gio vin pht: Danh sch cc thuc tnh. V d : text-align, font-size, color v.v

37

<Gi tr mi> l nhng gi tr hp l cho thuc tnh cn thay i. (Bn cng tra trong ti
liu Danh sch cc thuc tnh).

** Lu : Nu bn mun thay i thuc tnh ca mt phn t th bt buc bn phi gn cho

th mt gi tr ID duy nht (Nh v d trn).

3. nh ngha tng trong IE v Netscape

a. nh ngha tng trong IE
nh ngha tng trong IE, bn ch cn t thuc tnh position cho style.
V d: <H2 style = position:absolute;>Th H2 ny c t trn mt tng </H2>
Tuy nhin, vi cch nh ngha trn th mi tng ch cha c mt phn t. Nu bn mun
mt tng cha c nhiu hn mt phn t th bn nh ngha tng bng cp th <DIV> hoc
<SPAN> nh sau:
<DIV ID = Tang1 style = position:absolute>
<t cc phn t khc vo y, v d : >
<H1> Phn t ny nm trn tng 1 </H1>
<input type = button value = Move>
<img src = file://c:/anh1.jpg>
<a href = http://www.echip.com.vn> Trang ch ca bo E-Chip </a>
</DIV>
Mi tng khi to ra, bn nn gn thuc tnh ID cho tng mt gi tr duy nht (Khng trng
vi ID ca bt k th no trong trang). Bn hon ton c th thc hin cc thao tc i vi
tng nh :
n tng, v d : document.all.Tang1.style.visibility = hidden
Hin tng, v d : document.all.Tang1.style.visibility = visible
Di chuyn tng sang tri 5 pixel, v d: document.all.Tang1.style.pixelLeft -= 5
Di chuyn tng sang phi 5 pixel, v d: document.all.Tang1.style.pixelLeft += 5
Di chuyn tng ln trn 5 pixel, v d: document.all.Tang1.style.pixelTop -= 5
Di chuyn tng xung di 5 pixel, v d: document.all.Tang1.style.pixelTop+=5
b. nh ngha tng trong Netscape
Trong Netscape, vic nh ngha (to ra) tng c phn d dng hn vi th LAYER :
<LAYER name = Tang1>
<t cc phn t khc vo y, v d : >
<H1> Phn t ny nm trn tng 1 </H1>
<input type = button value = Move>
<img src = file://c:/anh1.jpg>
<a href = http://www.manguon.com> Trang cha nhiu mo vt v IT </a>
</LAYER>
n / hin tng c to bi th LAYER thng qua lnh JavaScript, bn vit :
o document.<Tn ca tng>.visibility = 'hidden' ( n tng)
o document.<Tn ca tng>.visibility = 'show' ( hin tng)
Trong : <Tn ca tng> chnh l gi tr ca thuc tnh name.
**Lu : truy cp n mt tng, trong IE s dng gi tr ca thuc tnh ID, trong khi
Netscape s dng gi tr ca thuc tnh name.
V d : document.Tang1.visibility = 'hidden' n tng c tn l Tang1 to ra trn.
di chuyn tng bng JavaScript, bn vit:
38

o document.<Tn tng>.left = <Gi tr> (Di chuyn sang tri hoc phi)
o document.<Tn tng>.top = <Gi tr> (Di chuyn ln | xung)
Trong : <gi tr> m di chuyn li, gi tr dng di chuyn tin.

B.

V d di chuyn tng ln trn thm 10 pixel

o document.Tang1.top -= 10
V d di chuyn tng sang phi thm 10 pixel
o document.Tang1.left += 10
V d, di chuyn tng n v tr cch mp trn ca s trnh duyt 100px, v cch mp tri
50 pixel.
o document.Tang1.top = 100
o document.Tang1.left = 50

BI TP MU

Bi s 1: Minh ho s kin di chuyn chut vo phn t.

Yu cu: To mt lin kt n trang http://www.w3schools.com bng th H2. C mu nn l
xanh, mu ch l trng. Khi chut di chuyn n th i mu nn thnh mu .
Hng dn: i mu nn thnh i vi th H2 (hoc th bt k) bn vit:
document.all.LienKet.style.backgroundColor = red
Trong LienKet l gi tr ca thuc tnh ID .
Cu lnh JavaScript ny t u ?
Theo nh yu cu u bi l : Khi chut di chuyn . Do vy cu lnh ny s c t
trong s kin di chuyn chut n (c tn l onMouseMove)
Minh ho:
<HTML>
<HEAD>
<TITLE>Hiu ng di chuyn chut</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
</HEAD>
<BODY>
<h2 ID= "LienKet" STYLE="background-color:blue; color:white"
onMouseMove="document.all.LienKet.style.backgroundColor = 'red'">
Trang dy JavaScript http://www.w3schools.com
</h2>
</BODY>
</HTML>

Nhc li: Cc thuc tnh trong bng tra cu danh sch thuc tnh nu c cha du gch
ni (v d : background-color) th khi vit trong JavaScript, bn phi chuyn k t ng ngay
sau du gch ni thnh ch hoa v b du gch ni i. (V d t background-color
backgroundColor)
Bi s 2: Minh ho s kin di chuyn chut vo v ra khi mt phn t.
Yu cu: Nh bi tp 1, v thm yu cu sau: Khi ngi dng di chuyn chut ra khi phn
t H2 th t li mu nn l mu xanh.
Hng dn: Vit lnh thay i mu nn thnh xanh trong s kin di chut ra ngoi.
Minh ho:
<HTML>
<HEAD>
<TITLE>Hiu ng di chuyn chut Version 2</TITLE>
39

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">

</HEAD>
<BODY>
<H2 ID= "LienKet" STYLE="background-color:blue; color:white"
onMouseMove = "document.all.LienKet.style.backgroundColor = 'red' "
onMouseOut = "document.all.LienKet.style.backgroundColor = 'blue' ">
Trang dy JavaScript http://www.w3schools.com
</H2>
</BODY>
</HTML>
Bi s 3: Minh ho to mt lin kt hon chnh n mt trang web
Yu cu: Nh bi s 2 nhng khi ngi dng click chut th m trang
http://www.w3schools.com. V chut c hnh bn tay.
Hng dn: m trang web bt k bn vit: window.open(a ch URL). Lnh m ny
c t trong s kin Click chut (V theo yu cu: khi ngi dng click chut th mi m).
Minh ho:
<HTML>
<HEAD>
<TITLE>Hiu ng di chuyn chut Version 2</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
</HEAD>
<BODY>
<H2 ID="LienKet" STYLE="background-color:blue; color:white; cursor:hand"
onMouseMove = "document.all.LienKet.style.backgroundColor = 'red';"
onMouseOut = "document.all.LienKet.style.backgroundColor = 'blue';"
onClick
= "window.open('http://www.w3schools.com');" >
Trang dy JavaScript http://www.w3schools.com
</H2>
</BODY>
</HTML>

Bi tp t gii:
Bi t gii 1: Hy to mt menu t theo chiu dc gm 4 mc nh sau:
Gii thiu
Tin tc
Sn phm
Tr gip
Yu cu: 4 mc ny c mu nn l xanh, mu ch l vng (yellow). Khi ngi dng di
chuyn n mc no th mc c mu nn l mu . Khi di chuyn chut ra khi th mu
nn tr li mu xanh.
Khi ngi dng click vo th m ra trang tng ng l http://www.echip.com.vn,
http://www.manguon.com, http://www.w3schools.com v http://www.quantrimang.com.
Gi : Lm tng t nh bi tp mu, nhng to ra 4 th H2.

40

Bi tp t gii 2: Hy to mt menu gm 4 mc nh trn nhng theo chiu ngang,

Hng dn: Nu bn dng th H2, th mi mc s t ng c t ring trn mt dng.
c th t nhiu mc trn cng mt dng, bn c th to mt bng c mt hng v nhiu ct.
Mi mc by gi s c t trong mt th <TD>. thay i kch thc, mu nn, mu
ch v.v.. bn cng s dng STYLE: <TD style = color: white
Hoc cch th hai l bn s dng th <Span>. V d:
<Span style = color:white; background-color:blue; cursor:hand; font-size:16pt
onClick = window.open(http://www.echip.com.vn); >
Trang Echip.com
</Span>
Bi s 4: Minh ho to tng trong IE
To mt tng gm c dng ch Welcome to LAYER !, mu , kch thc 40pt, font ch
Arial. Ton b dng ch ny c rng (width) l 300px.
Hng dn: Vic to tng v t cc thuc tnh c th t thng qua nh ngha STYLE.
Minh ho:
<HTML>
<HEAD>
<TITLE>To tng trong IE</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
</HEAD>
<BODY>
<DIV STYLE="position:absolute; color:red; font-family:arial; font-size:30pt;
top: 50px; left: 50px; width:400px">
Welcome to LAYER !
</DIV>
</body>
</HTML>

Top=50
left=50

Width = 400px

Bi s 5: Minh ho vic n v hin tng bng cu lnh JavaScirpt

Yu cu: to mt dng ch Cc lin kt bng th H2, mu nn l tm (magenta), mu ch
trng (white). V to mt tng c ID = LienKet, Trong tng c mt bng gm 2 hng, 1 ct,
ni dung ca bng cha 2 lin kt (bn c th to bng th A HREF) n cc trang
http://www.vol.vnn.vn, v http://www.fateback.com, Ban u, tng ny n (visible :
hidden). Khi ngi dng dng di chuyn chut n th H2 th tng ny hin. Cn khi ngi
dng click vo mt trong 3 lin kt th tng ny n.
Hng dn: n hay hin tng bn vit:

41

document.all.LienKet.style.visibility = visible (hoc hidden)

Minh ho:
<HTML>
<HEAD>
<TITLE>To tng trong IE Version 2</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
</HEAD>
<BODY>
<H2 STYLE="color:white; background-color:magenta; width:200px"
onMouseOver = "document.all.LienKet.style.visibility = 'visible';">
Cc lin kt
</H2>
<DIV ID="LienKet" STYLE="position:absolute; font-family:arial; visibility: hidden;
background-color:yellow; top: 40px; left: 10px; width:200px; ">
<TABLE BORDER="0">
<TR>
<TD onClick = "document.all.LienKet.style.visibility = 'hidden';" >
<A HREF = "HTTP://www.vol.vnn.vn">Trang ng k E-Mail</A>
</TD>
</TR>
<TR>
<TD onClick = "document.all.LienKet.style.visibility = 'hidden';">
<A HREF = "HTTP://www.fateback.com">Website min ph</A>
</TD>
</TR>
</TABLE>
</DIV>

</body>
</HTML>
Bi tp t gii 3: To mt h thng menu nh trang bn:
<HTML>
<HEAD>
<TITLE>To Menu trong IE - S dng TNG v JavaScript</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
</HEAD>
<!-- nh ngha lp -->
<STYLE TYPE="TEXT/CSS">
.MenuBar{background-color:blue; color:white; font-family:arial; font-size:16pt;width:150px; cursor:hand}
.Menu { background-color: yellow; color: white; position: absolute; top : 40; visibility : hidden}

</STYLE>
<SCRIPT language="JavaScript">
function AnCacMenu() // Hm n cc Menu c tc dng lm n cc tng mi khi c gi
{
document.all.Menu1.style.visibility = 'hidden';
document.all.Menu2.style.visibility = 'hidden';
document.all.Menu3.style.visibility = 'hidden';
}
</SCRIPT>
<!-- Hm AnCacMenu () trong s kin onClick ca BODY s c gi khi ngi dng

42

Click chut vo bt k u trong ti liu (Xem li phn Ni bt s kin) -->

<BODY onClick = "AnCacMenu()">
<!-- To tng 1 cha cc lin kt ca mc "Cc Lin kt" -->
<DIV CLASS="Menu" ID="Menu1" style = "left:10">
<A HREF = "HTTP://www.vol.vnn.vn">Trang ng k E-Mail</A> <BR>
<A HREF = "HTTP://www.fateback.com">ng k Website min ph</A>
</DIV>
<!-- To tng 2 cha cc lin kt ca mc "Cc Lin kt" -->
<DIV CLASS="Menu" ID="Menu2" style = "left:150;">
<A HREF = "HTTP://www.w3schools.com">Trang dy JavaScript</A> <BR>
<A HREF = "HTTP://www.manguon.com">Trang IT Ting vit</A>
</DIV>
<!-- To tng 3 cha cc lin kt ca mc "Cc Lin kt" -->
<DIV CLASS="Menu" ID="Menu3" style = "left:250">
<A HREF = "HTTP://www.hut.edu.vn">i hc Bch khoa H Ni</A> <BR>
<A HREF = "HTTP://www.ctu.edu.vn">i hc cn th</A>
<A HREF = "HTTP://www.vnu.edu.vn">i hc Quc gia</A>
</DIV>
<span CLASS="MenuBar" onMouseMove="AnCacMenu(); document.all.Menu1.style.visibility = 'visible'">

Cc lin kt
</span>
<span CLASS="MenuBar" onMouseMove="AnCacMenu(); document.all.Menu2.style.visibility = 'visible'">

Tin tc
</SPAN>
<span CLASS="MenuBar" onMouseMove="AnCacMenu(); document.all.Menu3.style.visibility = 'visible'">

Cc hot ng
</SPAN>
</body>
</HTML>

Chng VI: Ni dung ng v nh v ng

Mc tiu ca chng ny gip ngi hc c th:

C.

Thay i ni dung ca cc th trong trang web thng qua JavaScript

S dng JavaScript di chuyn cc tng
Vn dng kh nng nh v ng v ni dung ng vo thit k web
TM TT L THUYT
43

1. Ni dung ng l kh nng cho php thay i ni dung ca trang web

bng cc lnh 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 tr ca cc thuc tnh nh sau:
document.all.<Gi tr ca thuc tnh ID>.<Tn thuc tnh> = <Gi tr mi>
Trong <Tn thuc tnh l mt trong s 4 thuc tnh nu trn.

2. nh v (Thay i v tr) cc tng trong IE v Netscape

Lu quan trng : thay i v tr ca mt phn t no trong IE v Netscape,
trc ht bn cn phi t phn t trong mt tng.

2.1 Thay i trong IE

Bn cn thay i 2 thuc tnh ca tng l pixelLeft v pixelTop.

Thuc tnh pixelLeft qui nh di chuyn sang phi / sang tri

Thuc tnh pixelTop qui nh di chuyn ln trn / xung di

C php cu lnh thay i nh sau:
document.all.<Gi tr ID>.style.pixelLeft = <V tr cn di chuyn n>
document.all.<Gi tr ID>.style.pixelTop = <V tr cn di chuyn n>

2.2 Thay i trong Netsape

Trong Netscape, mun thay i bn cng ch vic thay i 2 thuc tnh l top v left,
nh sau:
document.<Tn tng>.top = <V tr cn di chuyn>
document.<Tn tng>.left = <V tr cn di chuyn>
Trong , Tn tng chnh l gi tr ca thuc tnh name do bn t.

44

B. BI TP MU
Bi s 1: Minh ho thay i thuc tnh innerText
Yu cu: To mt dng ch "I am having fun" thnh "This is great fun" khi ngi
dng click chut.
Hng dn: Bn c th dng bt k th g (th H, th P v.v...) to dng ch
trn. Do u bi yu cu l ch 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 http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h2 id="ID1" onClick="document.all.ID1.innerText='This is great fun'">I am having func</h2>
</body>
</html>

Bi s 2: Minh ho thay i thuc tnh innerHTML

Yu cu: To mt dng ch "Click here". Khi ngi dng click chut vo th dng
ch bin thnh nt c nhn l "Having fun"
Hng dn:
Bn c th s dng bt k th no hin th 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 http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h2 id="ID1" onClick="document.all.ID1.innerHTML='<input type=button value = OK>'">

Click here
</h2>
</body>
</html>

Bi s 3: Minh ho thay th thuc tnh outerText.

Yu cu: To mt nt c nhn l "Open". Khi ngi 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".
Hng dn:
m mt trang web trong mt ca s mi, bn vit: window.open("a ch
URL ca trang cn m", "_Blank")
Thay th nt bng mt dng ch thng qua thay i thuc tnh outerText ca
nt.
Minh ho:

45

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<SCRIPT language="JavaScript">
function ThayDoi()
{
window.open("http://www.echip.com.vn","_blank");
document.all.Nut1.outerText='"Trang ny thm";
}
</SCRIPT>
<body>
<INPUT id="Nut1" type="button" value="Open" onClick="ThayDoi();">
</body>
</html>

Bi s 4: Minh ho thay i thuc tnh outerHTML

Yu cu: To mt dng ch "Click here" c mu xanh, kch c H1. Khi ngi dng
click vo dng ch ny th thay bng mt lin kt n trang http://www.vn.vn
Hng dn: Do y khi ngi 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 c t
trong s kin Click chut.
Minh ho:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<SCRIPT language="JavaScript">
function ChenLienKet()
{
document.all.LienKet.outerHTML='<A HREF = "http://www.vnn.vn">Trang Aptech</A>' ;
}
</SCRIPT>
<body>
<h1 id="LienKet" style="color:blue" onClick="ChenLienKet()">Click Here</h1>
</body>
</html>

Bi s 5: Minh ha vic nh v ng trong IE

Yu cu: To mt nt c nhn l "Sign Up". Khi chut di chuyn trong nt ny th
hin th dng nhc l "ng k hm th mi" c mu nn l vng ti v tr ca con
chut. Khi chut di chuyn ra ngoi th dng nhc n i.
Hng dn: Bn to ra mt tng cha dng ch "ng k hm th 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. Lu , v tr ca chut c lu trong
thuc tnh event.clientX v event.clientY. Bn s gn v tr ny ca chut cho 2 thuc
tnh pixelLeft v pixelTop nh v tng.
Minh ho:

46

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<SCRIPT language="JavaScript">
function HienThi()
{
document.all.Tang1.style.pixelLeft = event.clientX;
document.all.Tang1.style.pixelTop = event.clientY;
document.all.Tang1.style.visibility = 'visible';
}
function AnTang() // n Tng Tang1
{
document.all.Tang1.style.visibility = 'hidden';
}
</SCRIPT>
<BODY>
<INPUT type="button" value="Sign Up"
onMouseMove="HienThi();"
onMouseOut="AnTang()">
<DIV id= Tang1 style="position:absolute; visibility: hidden; background-color:yellow">
ng k hm th mi
</DIV>
</BODY>
</html>

Kt qu khi chut di chuyn vo trong nt

Bi s 6: Minh ho ni dung trong Netscape
Yu 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 ngi dng nhp a ch vo trong hp text v
nhn nt "Np trang web" th ni dung ca trang s c np vo tng Tang1.
Hng dn:
- Dng th LAYER 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 nh sau:
document.<Tn tng>.src = "a ch trang cn np"
Trong trng hp ny s l :
document.Tang1.src = document.form1.DiaChi.value
Minh ho:
<html>
<head>
<TITLE>Hin th tooltip</TITLE>

47

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head>
<body>
<LAYER name="Tang1">
<h1> Tng ny dng hin th trang Web bn g trong hpText !
</LAYER>
<FORM name="Form1">
<INPUT type="text" name="DiaChi">
<INPUT type="button" onClick="document.Tang1.src = document.form1.DiaChi.value">
</FORM>
</body>
</html>

C. BI TP T GII

Bi s 1:
To mt tng c cha dng ch "Hello", kch thc H1. v mt nt nhn c nhn l "Thay i". Khi
ngi dng click vo nt ny th yu cu ngi 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 s 2:
To mt th H1, mu ch xanh dng hin th thi gian ca h thng (gm gi:pht:giy).

Gi : Vit hm CapNhat ly gi:pht:Giy trong my tnh sau gn cho thuc

tnh innerText ca th H1. S dng hm setInterval("CapNhat();", 1000) lin tc
cp nht thi gian theo tng giy.
Bi s 3: To 2 tng trong IE, mi tng cha mt bc nh. Tng th nht chy t
tri sang phi mn hnh, tng th hai chy t trn xung di mn hnh.
Gi : S dng 2 hm setInterval gi 2 hm di chuyn 2 tng.

Bi s 4: To mt tng cha 3 lin kt. Chut click ti v tr no th tng s c t

ti v tr . Gi : Vit lnh trong s kin onClick ca th BODY.
Bi s 5: To mt form ng k E-Mail tng t nh ca Yahoo (Bn ch cn to
mt s phn t, khng cn to ht). Mi khi ngi dng di chuyn chut n mt
phn t no th hin th mt li ch thch bng Ting vit. (Xem Bi s 5)
Bi s 6: To 3 tng (Trong Netscape), mi tng np mt trang tng ng nh sau:
http://www.vnn.vn, http://www.echip.com.vn v http://www.manguon.com.
Bi s 7: To mt tng cha mt bc nh, mt nt c nhn l "Di chuyn". Khi
ngi dng click vo nt ny th bc nh s di chuyn cho t gc trn bn phi
xung gc di bn tri ca mn hnh. Gi : Tng dn pixelTop, gim pixelLeft.
Bi s 8: Hy lm ht cc bi tp trong sch gio khoa ca cun gio trnh HTML,
DHTML & JavaScript.

48