L7 DHTML
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (650.49 KB, 27 trang )
8/2/2010
Bài 7.
DHTML
Ĉӛ%i/kP
9LӋQ&17777- Ĉ+%.+1
1
0өFÿtFK
&XQJFҩSFKRVLQKYLrQQKӳQJNLӃQWKӭFYӅ
DHTML
7KӵFKLӋQFiFEjLWKӵFKjQKOLrQTXDQÿӃQFiF
NLӃQWKӭFÿmKӑF +70/&66-DYD6FULSW
2
1
8/2/2010
1ӝLGXQJ
*LӟLWKLӋXYӅ'+70/
&iFÿһFÿLӇPFӫD'+70/
0{KuQKVӵNLӋQ'+70/
7KӵFKjQK
3
*LӟLWKLӋXYӅ'+70/
HTML
CSS
JavaScript
+70/³WƭQK´
6W\OHFӫDWUDQJ
7ѭѫQJWiF
DHTML
4
2
8/2/2010
*LӟLWKLӋXYӅ'+70/
'\QDPLF+70/KD\'+70/ +70/ÿӝQJ
/jVӵNӃWKӧSFӫD+70/&66Yj-DYD6FULSW
+70/'20WURQJPӝWWUDQJ:HEJL~SFKR
YLӋFWKDRWiFYj[k\GӵQJWUDQJ:HEWUӣQrQ
VLQKÿӝQJGӉGjQJYjKLӋXTXҧKѫQ
DHTML = HTML + CSS + JavaScript + HTML DOM
5
*LӟLWKLӋXYӅ'+70/
<html>
<head>
<title>DHTML</title>
</head>
<body>
SRQFOLFN VW\OHFRORU
UHG
³!
Click chuot vao dong nay
</body>
</html>
6
3
8/2/2010
*LӟLWKLӋXYӅ'+70/
7
&iFÿһFÿLӇPFӫD'+70/
&ҩXWU~FÿӕLWѭӧQJ
6W\OHÿӝQJ
ĈӏQKYӏ
;ӱOêVӵNLӋQ
8
4
8/2/2010
&ҩXWU~FÿӕLWѭӧQJ
'+70/FRLPӛLSKҫQWӱOjPӝWÿӕLWѭӧQJ
0ӛLÿӕLWѭӧQJFyWKӇÿѭӧFWUX\FұSYjOұS
WUuQKÿӝFOұS
7UX\FұSYjRÿӕLWѭӧQJWK{QJTXD'20
± 7K{QJTXDWrQÿӕLWѭӧQJ name
± 7K{QJTXDLGÿӕLWѭӧQJ id
method: document.getElementById(id)
KR̿FWUӵFWLӃSTXD id
± /ҩ\QӝLGXQJVӱGөQJWKXӝFWtQK innerHTML
9
&ҩXWU~FÿӕLWѭӧQJ
<html>
<head>
<script language="javascript">
function bat_dau(){
alert(pObj.innerHTML);
pObj.innerHTML="Cam on ban";
}
</script>
</head>
<body onLoad="bat_dau();">
Chao mung ban den Website
</body>
</html>
10
5
8/2/2010
&ҩXWU~FÿӕLWѭӧQJ
11
&ҩXWU~FÿӕLWѭӧQJ
12
6
8/2/2010
6W\OHÿӝQJ
6ӱGөQJ&66KD\6W\OHVRQJVRQJYӟLQKӳQJ
WѭѫQJWiFFӫDQJѭӡLVӱGөQJ
7KD\ÿәLYӅ6W\OHQKѭ
± 0jXVҳF
± .LӇXFKӳFӥFKӳIRQWFKӳ
± .KRҧQJFiFK
± 9ӏWUt
«
13
6W\OHÿӝQJ
<html>
<head>
<script language="javascript">
function bat_dau(){
var mau=prompt("Nhap mau nen cua trang","");
document.body.style.backgroundColor=mau;
}
</script>
</head>
<body onload="bat_dau();">
Chao mung den Website
</body>
</html>
14
7
8/2/2010
6W\OHÿӝQJ
15
6W\OHÿӝQJ
16
8
8/2/2010
ĈӏQKYӏ
+70/ NK{QJFKRSKpSÿLӅXFKӍQKWӑDÿӝFӫD
SKҫQWӱ
'+70/ FKRSKpSÿLӅXFKӍQKWӑDÿӝFӫDSKҫQ
Wӱ&K~QJWDFyWKӇFKӍUDYӏWUtFKtQK[iF
WѭѫQJÿӕLKRһFWX\ӋWÿӕL
17
<html>
<head>
<script language="javascript">
function moveleft(){
document.getElementById('header').style.position=
"absolute";
document.getElementById('header').style.left="0";
}
function moveback(){
document.getElementById('header').style.left="100";
}
</script>
</head>
<body>
KLG KHDGHU³RQPRXVHRYHU PRYHOHIW
³
RQPRXVHRXW PRYHEDFN
³!0RXVHRYHUWKLVWH[W K!
</body>
</html>
18
9
8/2/2010
ĈӏQKYӏ
19
;ӱOêVӵNLӋQ
20
10
8/2/2010
<html>
<head>
<script language="javascript">
bLight=0;
function changeimage(){
if (bLight==0){
bLight=1; document.myimage.src="bulbon.gif";
}
else{
E/LJKW GRFXPHQWP\LPDJHVUF EXOERIIJLI³
}
}
</script>
</head>
<body>
</body>
</html>
21
6ӱGөQJ'+70/
'+70/FyÿһFÿLӇP
1. 6W\OHÿӝQJ FKRSKpSFKӍUDNLӇXÿӏQKGҥQJYăQ
EҧQWURQJWUDQJZHE PjXVҳFNtFKWKѭӟFNLӇX
FKӳ«
2. ĈӏQKYӏ FKRSKpSFKӍUDYӏWUtFӫDFiFSKҫQWӱ
+70/WURQJPӝWWUDQJWKHRWӑDÿӝ[\
3. ;ӱOêVӵNLӋQ FKRSKpSQҳPEҳWVӵNLӋQGRQJѭӡL
GQJKD\KӋWKӕQJWҥRUDÿӇVӱDÿәLNLӇXKD\QӝL
dung trang web
22
11
8/2/2010
0{KuQK[ӱOêVӵNLӋQ'+70/
6ӵNLӋQ
1әLEӑWVӵNLӋQ
.LӇPVRiWOӛLYӟLVӵNLӋQRQHUURU
23
6ӵNLӋQ
0{KuQKVӵNLӋQ (YHQW0RGHO
OjPӝWSKҫQ
TXDQWUӑQJWURQJP{KuQKÿӕLWѭӧQJWjLOLӋX
(Document Object Model)
/jWKjQKSKҫQFKtQKWҥRQrQPӝWWUDQJ:HE
ÿӝQJYjFyWѭѫQJWiFYӟLQJѭӡLVӱGөQJ
0{KuQKVӵNLӋQ[iFÿӏQKVӵNLӋQQjRVLQKUD
WK{QJWLQFXQJFҩSFKRWUuQK[ӱOêVӵNLӋQ
(event handler)
24
12
8/2/2010
<html>
<body>
<script language="JavaScript">
function toa_do(event1) {
myX.innerHTML = event1.pageX ;
myY.innerHTML = event1.pageY;
}
</script>
Toa do X:<span id="myX">0</span>
Toa do Y:<span id="myY">0</span>
GLYLG P\'LY³RQPRXVHPRYH WRDBGR HYHQW
³!
<img src="bulbon.gif">
</div>
</body>
</html>
25
6ӵNLӋQ
26
13
8/2/2010
1әLEӑWVӵNLӋQ
+70/ PXӕQ[iFÿӏQKKjQKYLFKRPӝWVӵ
NLӋQFK~QJWDSKҧLÿѭDUDÿRҥQPmP{WҧFKR
ÿӕLWѭӧQJÿy
'+70/FXQJFҩSFKRFK~QJWDPӝWKӋWKӕQJ
SKkQFҩSÿӕLWѭӧQJ
27
1әLEӑWVӵNLӋQ
Document Obj
HTML Page
BODY Obj
Tag
28
14
8/2/2010
1әLEӑWVӵNLӋQ
*LҧLWKtFK
± .KLPӝWVӵNLӋQӣFҩS³GѭӟL´[ҧ\UDWKuVӵNLӋQÿy
ÿѭӧFFKX\ӇQQJѭӧFOrQFҩSSKtDWUrQ
± 6ӵSKkQFҩSQj\NK{QJSKөWKXӝFYjRWKӭWӵFiF
PөFKLӇQWKӏWUrQWjLOLӋX
29
<body onClick="ClickHere();">
Xin chao ban
³
>Trang Web
Cam on ban
<script language="javascript">
function ClickHere(){
alert("Thanh phan duoc bam
"+window.event.srcElement.tagName);
}
function AlsoClick(){
alert("Ban da bam
"+window.event.srcElement.tagName);
}
</script>
</body>
30
15
8/2/2010
1әLEӑWVӵNLӋQ
.KLQJѭӡLGQJFOLFNFKXӝWYjR+WKuVӵNLӋQ
2Q&OLFN[ҧ\UD
+NK{QJFyEӝ[ӱOêVӵNLӋQVӵNLӋQQj\VӁ
FKX\ӇQOrQÿӃQ%2'<YjJӑLKjP&OLFN+HUH
.KLQJѭӡLGQJFOLFNFKXӝWYjR3WKuVӵNLӋQ
2Q&OLFN[ҧ\UD
3FyEӝ[ӱOêVӵNLӋQYjJӑL$OVR&OLFN
7LӃS
WөFFKX\ӇQOrQ%2'<YjJӑL&OLFN+HUH
