DHTML

Bi 7.
DHTML
Hong Anh Vit Vin CNTT&TT - HBKHN

1
Mc ch
Cung cp cho sinh vin nhng kin thc v DHTML Thc hin cc bi thc hnh lin quan n cc kin thc hc: HTML, CSS, JavaScript
Ni dung
1. Gii thiu v DHTML 2. Cc c im ca DHTML 3. M hnh s kin DHTML 4. Thc hnh
1. Gii thiu v DHTML

HTML CSS JavaScript DHTML
4
HTML tnh Style ca trang Tng tc
1. Gii thiu v DHTML

Dynamic HTML hay DHTML (HTML ng) L s kt hp ca HTML, CSS v JavaScript, HTML DOM trong mt trang Web, gip cho vic thao tc v xy dng trang Web tr nn sinh ng, d dng v hiu qu hn
DHTML = HTML + CSS + JavaScript + HTML DOM
1. Gii thiu v DHTML

<html> <head> <title>DHTML</title> </head> <body> <p onclick="style.color='red'> Click chuot vao dong nay</p> </body> </html>
6
1. Gii thiu v DHTML
2. Cc c im ca DHTML
2.1. Cu trc i tng 2.2. Style ng 2.3. nh v 2.4. X l s kin
2.1. Cu trc i tng

DHTML coi mi phn t l mt i tng. Mi i tng c th c truy cp v lp trnh c lp Truy cp vo i tng thng qua DOM
Thng qua tn i tng: name Thng qua id i tng: id method: document.getElementById(id) hoc trc tip qua id Ly ni dung s dng thuc tnh: innerHTML
9
2.1. Cu trc i tng

<html> <head> <script language="javascript"> function bat_dau(){ alert(pObj.innerHTML); pObj.innerHTML="Cam on ban"; } </script> </head> <body onLoad="bat_dau();"> <p id="pObj">Chao mung ban den Website</p> </body> </html>
10
2.1. Cu trc i tng
11
2.1. Cu trc i tng
12
2.2. Style ng
S dng CSS hay Style, song song vi nhng tng tc ca ngi s dng Thay i v Style nh:
Mu sc Kiu ch, c ch, font ch Khong cch V tr .
13
2.2. Style ng
<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();"> <p>Chao mung den Website</p> </body> </html>
14
2.2. Style ng
15
2.2. Style ng
16
2.3. nh v
HTML: khng cho php iu chnh ta ca phn t DHTML: cho php iu chnh ta ca phn t. Chng ta c th ch ra v tr chnh xc (tng i hoc tuyt i).
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> <h1 id="header onmouseover="moveleft() onmouseout="moveback()> Mouse over this text</h1> </body> </html>
18
2.3. nh v
19
2.4. X l s kin
20
<html> <head> <script language="javascript"> bLight=0; function changeimage(){ if (bLight==0){ bLight=1; document.myimage.src="bulbon.gif"; } else{ bLight=0; document.myimage.src="bulboff.gif; } } </script> </head> <body> <img name="myimage" onClick="changeimage()" src="bulboff.gif"> </body> </html> 21
S dng DHTML
DHTML c 3 c im:
1. Style ng: cho php ch ra kiu nh dng vn bn trong trang web: mu sc, kch thc, kiu ch 2. nh v: cho php ch ra v tr ca cc phn t HTML trong mt trang theo ta x, y 3. X l s kin: cho php nm bt s kin do ngi dng hay h thng to ra sa i kiu hay ni dung trang web
22
3. M hnh x l s kin DHTML

3.1. S kin 3.2. Ni bt s kin 3.3. Kim sot li vi s kin onerror
23
3.1. S kin
M hnh s kin (Event Model) l mt phn quan trng trong m hnh i tng ti liu (Document Object Model) L thnh phn chnh to nn mt trang Web ng v c tng tc vi ngi s dng M hnh s kin xc nh s kin no sinh ra, thng tin cung cp cho trnh x l s kin (event handler)
24
<html> <body> <script language="JavaScript"> function toa_do(event1) { myX.innerHTML = event1.pageX ; myY.innerHTML = event1.pageY; } </script> <p>Toa do X:<span id="myX">0</span><br> Toa do Y:<span id="myY">0</span></p> <div id="myDiv onmousemove="toa_do(event);> <img src="bulbon.gif"> </div> </body> </html>
25
3.1. S kin
26
3.2. Ni bt s kin
HTML: mun xc nh hnh vi cho mt s kin chng ta phi a ra on m m t cho i tng DHTML cung cp cho chng ta mt h thng phn cp i tng.
27
3.2. Ni bt s kin
Document Obj HTML Page BODY Obj Tag
28
3.2. Ni bt s kin
Gii thch
Khi mt s kin cp di xy ra, th s kin c chuyn ngc ln cp pha trn S phn cp ny khng ph thuc vo th t cc mc hin th trn ti liu
29
<body onClick="ClickHere();"> <h1 style="color:red">Xin chao ban</h1><br /> <p style="color:blue" onclick="AlsoClick(); >Trang Web</p><br /> <h2>Cam on ban</h2> <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
3.2. Ni bt s kin
Khi ngi dng click chut vo H1 th s kin OnClick xy ra H1 khng c b x l s kin, s kin ny s chuyn ln n BODY v gi hm ClickHere() Khi ngi dng click chut vo P th s kin OnClick xy ra P c b x l s kin v gi AlsoClick(). Tip tc chuyn ln BODY v gi ClickHere()
31
3.2. Ni bt s kin
32
3.2. Ni bt s kin
33
3.2. Ni bt s kin
34
3.2. Ni bt s kin
Nu khng mun cc s kin chuyn ln cp cao hn, t thuc tnh cancelBubble ca i tng l True window.event.cancelBubble=true;
35
3.3. Kim sot li vi s kin onerror

S kin onerror c thc thi khi trnh duyt pht hin li trong on m JavaScript Gip cho ngi lp trnh bit iu g ang xy ra
36
<html> <head> <script language="javascript"> window.onerror = soat_loi; function hien_thi(){ alertt("xin chao ban"); } function soat_loi(kieu_loi,url,dong_sai){ window.status = "Error "+kieu_loi+" on line "+dong_sai; } </script> </head> <body> <input id="button" type="button" value="Click here" onclick="hien_thi();"/> </body> </html> 37
38
39
4. Thc hnh
1. CSS 2. Event 3. Text 4. Image 5. Menu 6. Mouse 7. Link 8. Input Form 9. Window
40
1. CSS
41
1. CSS
42
2. Event
43
2. Event
44
3. Text - ToolTip
45
3. Text - Write Message
46
3. Text - Size
47
4. Image
48
5. Menu
49
6. Mouse
50
7. Link
51
8. Input Form
52
9. Window
53
Cu hi
54

DHTML

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

DHTML

Uploaded by

Copyright:

Available Formats

Bi 7.

Hong Anh Vit Vin CNTT&TT - HBKHN

1. Gii thiu v DHTML

HTML tnh Style ca trang Tng tc

1. Gii thiu v DHTML

1. Gii thiu v DHTML

1. Gii thiu v DHTML

2.1. Cu trc i tng

2.1. Cu trc i tng

2.1. Cu trc i tng

2.1. Cu trc i tng

3. M hnh x l s kin DHTML

3.3. Kim sot li vi s kin onerror

3.3. Kim sot li vi s kin onerror

3.3. Kim sot li vi s kin onerror

3. Text - Write Message

You might also like