DHTML

Trang 1
 DHTML

§ 1: MOÄT VAØI KHAÙI NIEÄM VEÀ DHTML

1. DHTML LAØ GÌ ?
DHTML (Dynamic HTML) bao haøm nhieàu coâng ngheä khaùc nhau vaø moâ taû caùch
thöùc maø caùc coâng ngheä naøy töông taùc vôùi nhau, noùi caùch khaùc DHTML cho pheùp ta
söû duïng HTML chuaån, caùc ngoân ngöõ kòch baûn, moâ hình ñoái töôïng hoà sô, vieäc ñònh vò
tuyeät ñoái, caùc kieåu ñoäng, caùc boä loïc multimedia vaø nhieàu coâng vieäc khaùc ñeå laøm thay
ñoåi ñoäng caùch thöùc hieån thò vaên baûn vaø ñoà hoïa treân maøn hình.
2. MOÂ HÌNH ÑOÁI TÖÔÏNG DHTML
Thoâng thöôøng caùc trang HTML laø caùc trang tónh, neáu baïn coù thoâng tin môùi muoán
hieån thò thì baïn phaûi vieát moät trang web môùi, ñeå traùnh vieäc naøy ta coù theå hieån thò
thoâng tin môùi trong caùc ñieàu khieån ActiveX, hoaëc trong caùc Java Applet, cho pheùp
thay ñoåi thoâng tin moät caùch ñoäng, tuy nhieân caùch naøy cuõng coøn coù giôùi haïn, vaø töø ñoù
moâ hình ñoái töôïng ra ñôøi.
Nguyeân lyù cuûa moâ hình ñoái töôïng hoà sô (dynamic HTML Object model)
Moâ hình naøy ñöôïc taïo ra vôùi moät soá muïc tieâu:
¾ Ñònh nghóa moät toå chöùc, phaân caáp theå hieän caùc phaàn cuûa hoà sô web
¾ Cho pheùp thay ñoåi caáu truùc ñoù thoâng qua vieäc theâm hay bôùt noäi dung.
¾ Cung caáp caùch thöùc ñeå quan saùt vaø thao taùc caùc ñaëc tính cuûa noäi dung treân trang
web.
¾ Cung caáp thoâng tin veà caùch thöùc maø caùc muïc tieâu treân trang web coù theå töông
taùc vôùi ngöôøi duøng vaø coù theå töông taùc vôùi nhau.
¾ Caùc hieïâu öùng maø moâ hình ñoái töôïng hoà sô coù theå taïo ra thoâng qua caùc maõ kòch
baûn
¾ Moät baûng danh muïc coù theå giaõn roäâng hoaëc co laïi khi ngöôøi duøng nhaáp chuoät vaøo
moät muïc.
¾ Khi ngöôøi duøng di chuyeån chuoät leân hình aûnh cuûa moät nuùt ôû traïng thaùi maëc ñònh,
hình aûnh naøy coù theå chuyeån sang moät hình khaùc theå hieän nuùt ôû traïng thaùi ñöôïc
choïn.
¾ Ngöôøi duøng coù theå keùo vaên baûn vaø hình aûnh xung quanh trang web.
¾ Caùc muïc coù theå di chuyeån xung quanh trang web maø khoâng caàn coù söï taùc ñoäng
cuûa ngöôøi duøng, vaø sau ñoù keát thuùc taïi vò trí chính xaùc theo yù nhaø thieát keá.
¾ Vaên baûn xuaát hieän khi ngöôøi duøng ñaët con troû leân moät hình aûnh.

Trang 2
 DHTML

¾ Ñònh daïng cuûa vaên baûn, ñoà hoïa vaø caùc baûng coù theå thay ñoåi tröïc tieáp.
¾ Caùc phaàn khaùc nhau cuûa trang coù theå ñöôïc taïo ra hoaëc huûy boû moät caùch ñoäng tuøy
theo thoâng tin cung caáp cuûa ngöôøi duøng.
3. ÑOÁI TÖÔÏNG
Ta coù theå xem moät ñoái töôïng laø moät phaàn töû hay moät tag trong moät hoà sô HTML,
moâ hình ñoái töôïng theå hieän caáu truùc phaân caáp cuûa taát caû caùc ñoái töôïng.
4. THUOÄC TÍNH
Trong HTML baïn coù theå thay ñoåi moät phaàn töû baèng caùch thay ñoåi thuoäc tính cuûa
noù, thuoäc tính laø caùc thoâng tin moâ taû phaàn töûa ñoù.
Ví duï : src, width, ID, … laø caùc thuoäc tính cuûa tag IMG.
5. SÖÏ KIEÄN
Khi baïn ñang duyeät trang web, thì moä caùi nhaáp chuoät hay moät phím ñöôïc nhaán ñieàu
ñoù coù nghóa laø baïn vöøa phaùt tín hieäu phaùt sinh ra moät söï kieän, söï kieän naøy coù theå ñöôïc
xöû lyù neáu coù moät ñoaïn maõ kòch baûn toàn taïi ñaùp öùng laïi söï kieän ñoù.
Moät soá söï kieän :

Söï kieän Ñöôïc phaùt sinh khi ngöôøi duøng

onMousedown Nhaán moät nuùt chuoät
onMouseover Di chuyeån chuoät leân moät ñoái töôïng
onMouseout Ngoaøi bieân giôùi cuûa moät ñoái töôïng
onKeypress Nhaán moät phím
onForcus Chuyeån tieâu ñieåm ñeán moät ñoái töôïng
Nhaáp chuoät vaøo ñoái töôïng, hay nhaán ENTER
onClick
treân ñoái töôïng
onHelp Nhaán phím F1
onLoad Moät ñoái töôïng ñöôïc taûi xuoáng xong
onResize Khi cuûa soå bò thay ñoåi kích thöôùc
onScroll Khi cöûa soå bò cuoän
Vaø coøn nhieàu nöõa … …

6. VIEÁT KÒCH BAÛN TRONG HTML.

Moät trong nhöõng caûi tieán quan troïng vaø haáp daãn trong caùc trình duyeät web laø khaû
naêng hoå trôï maõ kòch baûn. Thoâng qua vieäc vieát maõ kòch baûn ta coù theå boå sung ôû moät
möùc ñoä nhaát ñònh veà tính töông taùc trong trang web. Caùc maõ kòch baûn laø caùc khoái maõ
chöông trình ñöôïc “nhuùng vaøo” trang web vaø ñöôïc bieân dòch khi duyeät.
Ngoân ngöõ duøng ñeå vieát maõ kòch baûn: Trong internet explorer hoå trôï hai ngoân ngöõ
kòch baûn laø VBScript vaø JavaScript.

Trang 3
 DHTML

Caùc maõ kòch baûn trong HTML:

¾ Moãi phaàn töû trong HTML ñeàu coù moät tag vaø maõ kòch baûn cuõng caàn coù moät tag ñeå
nhaän dieän ñoù laø tag SCRIPT
<script language=”javascript”>
<!- -
Caùc leänh cuûa maõ kòch baûn
//-->
</script>
¾ Ñeå ghi chuù moät doøng trong phaàn vieát maõ kòch baûn ta duøng daáu //
¾ Neân vieát maõ kòch baûn trong daáu <!- - vaø //- -> ñeå ngaên caùc loåi coù theå xaûy ra ñoái
vôùi caùc trình duyeät khoâng coù khaû naêng hieåu maõ kòch baûn.
¾ Ngoaøi ra ta coøn coù theå tham chieáu ñeán moät maõ kòch baûn naèm trong moät taäp tin
khaùc coù phaàn môû roäng laø js (*.js) thoâng qua thuoäc tính SRC beân trong tag <script
…>
Vieát maõ kòch baûn cho moät trang web
Ví duï:
<html>
<head><title> Su Kien Onclick </title>
<script language="javascript" FOR="phone"
EVENT="onclick">phone.src="../image/
8250.jpg"
</script>
</head>
<body>
<img id="phone" src="../image/8210.jpg"
width="97" height="97">
</body>
</html>
¾ Thuoäc tính FOR duøng ñeå baùo cho trình duyeät bieát laø ta quan taâm ñeán ñoái töôïng
coù ID laø phone. Trong tag <img … >, laïi coù theâm moät thuoäc tính id cuûa tag img,
thuoäc tính naøy duøng ñeå ñònh danh rieâng cho tag img coù hình laø 8210.jpg
¾ Thuoäc tính EVENT xaùc ñònh söï kieän naøo seõ ñöôïc xöû lyù, ôû ñaây laø söï kieän onclick.
Boä xöû lyù ñöôïc nhuùng tröïc tieáp vaøo
<html> <head>
<title> Su Kien Onclick - Onmouseout</title>
</head>
<body>
<img id="phone" src="8210.jpg"
onclick="phone.src='../image/8250.jpg'"
onmouseout="phone.src='../image/8210.jpg'">
</body></html>

Trang 4
 DHTML

7. CAÙC ÑOÁI TÖÔÏNG TRONG MOÂ HÌNH ÑOÁI TÖÔÏNG CUÛA

INTERNET EXPLORER
A BUTTON DIV Document
Event History IMG Location
Navigator Screen Selection SPAN
Style TABLE userProfile window
8. ÑOÏC VAØ THAY ÑOÅI THUOÄC TÍNH CUÛA ÑOÁI TÖÔÏNG.
Ví duï:
<html>
<head>
<title> Thay doi thuoc tinh</title>
</head>
<body>
<img ID="Image1" src="../image/NguQua.jpg"
width="347" height="235" >
<script language="javascript">
alert("Image has width "+ Image1.width
+" and height "+ Image1.height)
Image1.width=150
Image1.height=30
alert("Now it has width "+ Image1.width
+" and height "+ Image1.height)
</script>
</body>
</html>
9. BAÃY CAÙC SÖÏ KIEÄN
Moät söï kieän khoâng thaät söï coù nghóa tröø khi coù moät maõ kòch baûn ñaùp öùng laïi söï kieän
ñoù, caùc ñoaïn maõ nhö vaäy ñöôïc goïi laø boä xöû lyù söï kieän.
<html>
<head>
<title> Bay Su Kien </title>
</head>
<body onload="alert('Bat dau BODY')">
<form>
<input type="button" value="Click me"
onclick="alert('You click the
button')" onmouseover="alert('You
mouse over the button')">
</form>
</body>
</html>

§ 2: CASCADING STYLE SHEET (CSS)

Trang 5
 DHTML

Söû duïng style sheet giuùp cho ngöôøi soaïn thaûo trang web deã daøng hôn trong thieát keá
vaø hieäu chænh caùc trang web, ñoàng thôøi ñaûm baûo tính nhaát quaùn trong trình baøy cuûa
website.
Moät style sheet laø moät maåu ñònh daïng cuûa caùc tag HTML.
1. LÔÏI ÍCH CUÛA STYLE SHEET
Söû duïng ñöôïc caùc thuoäc tính nhö leading, margins, indents, point size, text,
background, color trong trang web.
Thay ñoåi thuoäc tính cuûa töøng trang web hoaëc toaøn boä caùc trang trong website maø
khoâng caàn phaûi hieäu chænh caùc doøng lieân quan ñeán ñònh daïng trong caùc taäp tin HTML
2. ÑÒNH NGHÓA
Tag HTML {teân thuoäc tính : giaù trò cuûa thuoäc tính; teân thuoäc tính :
giaù trò cuûa thuoäc tính; ….}
Coù ba caùch söû duïng style sheet
¾ Lieân keát ñeán taäp tin chöùa style sheet.
<head> <title> … </title>
<LINK REL = STYLESHEET HREF = “../*.css”
TYPE = “text/css”>
</head>
¾ Nhuùng moät style block vaøo trang HTML :
Söû duïng caëp tag <STYLE> …. </STYLE>
Ví duï:
<html><head> <title> … </title></head>
<style>
<!- -
BODY{font: 10pt “Arial”}
H1{font: 15pt “Arial”; font-weight:
bold; color: maroon}
H2{font: 13pt/15pt “Arial”; font-weight:
bold; color: blue}
P{font: 10pt/12pt “Arial”; color: blue}
-->
</style>
<body>
……
</body>
</html>
¾ Söû duïng inline style: Caùch naøy coù aûnh höôûng tröïc tieáp ñeán tag hieän haønh
Ví duï:

Trang 6
 DHTML

<SELECT STYLE={font-family:”vni-times”; font-size :”10pt”

Name=”News”}>
<Option value=”TT”> Tuoåi treõ </Option>
<Option value=”LD”> Lao ñoäng </Option>
<Option value=”TN”> Thanh nieân </Option>
</SELECT>

Trang 7
 DHTML

§ 3: OUTLINE COÙ THEÅ THU GOÏN

Ñaây laø coâng cuï phoå bieán treân web, outline coù theå co giaõn khi ngöôøi söû duïng choïn
nhöõng tieâu ñeà khaùc nhau.
Ví duï:
<html>
<head><title>bbb</title>
<STYLE>
SPAN {font-size: 18pt; cursor: hand}
on {display: on}
A {text-decoration: none}
A:HOVER {color: red; text-decoration:
underline}
</STYLE>
<script language="javascript">
<!--
var bDoesDHTML =((navigator.userAgent.indexOf
("MSIE")>=0) &&
(navigator.appVersion.substring(0,1) >=4))
if(bDoesDHTML)
{
document.write("<STYLE>.off{display:
none}</STYLE>")
//alert("Khong the hien duoc outline !")
}
function doSection(secNum)
{
if(bDoesDHTML)
{
if(secNum.className=="off")
secNum.className="on"
else
secNum.className="off"
}
}
//-->
</script>
</head>
<body>
<SPAN onclick="doSection(Sec1)"><B>Phan I</B>
</SPAN><br>
<DIV CLASS="off" ID="Sec1&nbsp;&nbsp;&nbsp
<A href="chuong1.htm"> Chuong 1</A><br>
&nbsp;&nbsp;&nbsp;&nbsp;

Trang 8
 DHTML
<A href=“chuong2.htm”>Chuong 2</A><br>
</DIV>
<SPAN onclick="doSection(Sec2)"><B>Phan
II</B></SPAN><br>
<DIV CLASS="off" ID="Sec2">
&nbsp;&nbsp;&nbsp;&nbsp;
<A href=“chuong2.htm”>Chuong 3</A><br>
&nbsp;&nbsp;&nbsp;&nbsp;
<A href=“chuong4.htm”>Chuong 4</A><br>
&nbsp;&nbsp;&nbsp;&nbsp;
<A href="chuong5.htmChuong 5</A><br>
</DIV>
<SPAN onclick="doSection(Sec3)"><B>Phan
III</B></SPAN><br>
<DIV CLASS="off" ID="Sec3">
&nbsp;&nbsp;&nbsp;&nbsp;
<A href="chuong6.htm">Chuong 6</A><br>
&nbsp;&nbsp;&nbsp;&nbsp;
<A href="chuong7.htm">Chuong 7</A><br>
&nbsp;&nbsp;&nbsp;&nbsp;
<A href="chuong8.htm">Chuong 8</A><br>
&nbsp;&nbsp;&nbsp;&nbsp;
<A href="chuong9.htm">Chuong 9</A><br>
&nbsp;&nbsp;&nbsp;&nbsp;
<A href="chuong10.htm">Chuong 10</A><br>
</DIV>
</body>
</html>

Trang 9
 DHTML

§ 4: CHÖÕ CHUYEÅN ÑOÄNG

Ñeå taïo ra chöõ chuyeån ñoäng chaïy qua chaïy laïi treân trang web baïn coù theå söû duïng
tag <marquee … >
<marquee behavior="…" direction="…" scrollamount="…"
height="100"> noäi dung vaên baûn </marquee>
Ví duï:
<html>
<head>
<title>Text Run</title>
</head>
<body>
<p>
<marquee bgcolor="#00FF00">bgcolor="#00FF00"
behavior="SCROLL”</marquee></p>
<p>
<marquee behavior="slide" direction="right"
scrollamount="12"
height="100">behavior="slide"
direction="right" scrollamount="12"
height="100"</marquee></p>
<p>
<marquee behavior="alternate">behavior
="alternate" </marquee></p>
</body>
</html>

Trang 10
 DHTML

§ 5: AÂM THANH, MOVIE CLIP

(BGSOUND, DYNSRC, EMBED)

¾ Tag BGSOUND laø caùch ñôn giaûn nhaát ñeå ñöa aâm thanh vaøo trang web vaø tag
naøy phaûi ñöôïc ñaët trong phaàn HEAD cuûa trang web, caùc daïng aâm thanh ñöôïc hoå
trôï laø WAV, MIDI, MP3
<bgsound src="../*.mid" loop="-1" … balance=… volume=…>
Thuoäc tính:
Loop: = -1 seõ laùm cho aâm thanh ñöôïc phaùt laïi maõi maõi
Balance: nhaän giaù trò trong khoaûng -10000 ñeán 10000. Neáu giaù trò aâm
höôùng ra loa traùi, giaù trò döông aâm thanh seõ höôùng ra loa phaûi, 0
seõ caân ñoái caû hai.
Volume: chaáp nhaän giaù trò töø -10000 ñeán 0, 0 laø to nhaát
¾ Tag IMG vôùi thuoäc tính DYNSRC ñöôïc duøng ñeå chæ tôùi moät taäp tin video daïng
AVI, MPJ
<img border="0" dynsrc="../../*.mpg" start="fileopen"
width="320" height="240">
Ví duï:
<html><head>
<title>Media</title>
<bgsound src="../image/titanic.mid" loop="-1">
</head>
<body background="../image/Lightblue2.jpg"
topmargin="0">
<p align="center"><font face="VNI-Times"
size="4" color="#FF0000"><b>TAÏO AÂM
THANH NEÀN VAØ CHEØN VIDEO VAØO TRANG
WEB</b></font></p>
<p align="center"><img border="0"
dynsrc="../image/Bigshot.mpg"
start="fileopen" width="320"
height="240"></p>
</body>
</html>

Trang 11
 DHTML

Ví duï:
<html> <head> <title>New Page 1</title> </head>
<body background="../image/Lightblue2.jpg">
<table border="1" width="100%"
background="../image/bk.gif"
height="70" cellspacing="0">
<tr>
<td width="100%" height="64" align="center"
valign="top">
<table border="0" width="100%"
cellspacing="0" cellpadding="0">
<tr>
<td width="100%" align="center"><font
color="#FF0000"><b>TITANIC</b></font>
</td>
</tr>
<tr>
<td width="100%" align="center">
<embed width="292" height="43"
src="../image/titanic.mid"></td>
</tr>
</table>
</td>
</tr>
</table> <p>&nbsp;</p> <center>
<table border="1" width="46%" height="157"
bordercolor="#FF0000" cellspacing="0"
cellpadding="2">
<tr>
<td width="100%" height="151"
align="center" bordercolor="#FF0000">
<embed width="152" height="157"
src="../image/Bigshot.MPG"></td>
</tr>
</table>
</center>
</body>
</html>

Trang 12