Nội dung động là khả năng cho phộp thay đổi nội dung của trang web bằng cỏc lệnh Script.
Để thay đổi nội dung của một phần tử nào đú trong IE, chỳng ta cú thể thay đổi một
trong 4 thuộc tớnh của nú : • innerText
• innerHTML • outerText • outerHTML
Cỳ phỏp dựng để thay đổi giỏ trị của cỏc thuộc tớnh như sau:
document.all.<Giỏ trị của thuộc tớnh ID>.<Tờn thuộc tớnh> = <Giỏ trị mới> Trong đú <Tờn thuộc tớnh là một trong số 4 thuộc tớnh nờu trờn.
Định vị (Thay đổi vị trớ) cỏc tầng trong IE và Netscape
Lưu ý quan trọng :Để thay đổi vị trớ của một phần tử nào đú trong IE và Netscape, trớc hết bạn cần phải đặt phần tử đú trong một tầng.
Thay đổi trong IE
Bạn cần thay đổi 2 thuộc tớnh của tầng là pixelLeft và pixelTop. • Thuộc tớnh pixelLeft qui định di chuyển sang phải / sang trỏi • Thuộc tớnh pixelTop qui định di chuyển lờn trờn / xuống dưới Cỳ phỏp cõu lệnh để thay đổi như sau:
document.all.<Giỏ trị ID>.style.pixelTop= <Vị trớ cần di chuyển đến>
Thay đổi trong Netsape
Trong Netscape, muốn thay đổi bạn cũng chỉ việc thay đổi 2 thuộc tớnh là top và left, như sau:
document.<Tờn tầng>.top = <Vị trớ cần di chuyển> document.<Tờn tầng>.left = <Vị trớ cần di chuyển>
Trong đú, Tờn tầng chớnh là giỏ trị của thuộc tớnhname do bạn đặt.
BÀI TẬP MẪU
Bài số 1:Minh hoạ thay đổi thuộc tớnh innerText
Yờu cầu: Tạo một dũng chữ "I am having fun" thành "This is great fun" khi người dựng click chuột.
Hướng dẫn: Bạn cú thể dựng bất kỳ thẻ gỡ (thẻ H, thẻ P v.v...) để tạo dũng chữ ở trờn. Do đầu bài yờu cầu là chỉ thay đổi dũng văn bản, do vậy chỳng ta sẽ thay đổi thuộc tớnh innerText, dũng lệnh này sẽ đặt trong sự kiện 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>
Yờu cầu: Tạo một dũng chữ "Click here". Khi người dựng click chuột vào thỡ dũng chữ đú biến thành nỳt cú nhón là "Having fun"
Hướng dẫn:
• Bạn cú thể sử dụng bất kỳ thẻ nào để hiển thị dũng chữ "Click here"
• Trong sự kiện click chuột (onMouseMove) bạn viết lệnh thay nội dung trong thẻ bằng nội dung mới (Nội dung này là thẻ tạo nỳt).
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>
Bài số 3 :Minh hoạ thay thế thuộc tớnh outerText.
Yờu cầu: Tạo một nỳt cú nhón là "Open". Khi người dựng click vào nỳt này thỡ mở trang http://www.echip.com.vn, trong một cửa sổ mới và dũng nỳt đú sẽ thay bằng dũng chữ "Trang này đó mở".
Hướng dẫn:
• Để mở một trang web trong một cửa sổ mới, bạn viết: window.open("Địa chỉ URL của trang cần mở", "_Blank")
• Thay thế nỳt bằng một dũng chữ thụng qua thay đổi thuộc tớnh outerText của nỳt.
Minh hoạ: <html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head>
<SCRIPT language="JavaScript">
functionThayDoi() {
window.open("http://www.echip.com.vn","_blank"); document.all.Nut1.outerText='"Trang này đó thăm"; }
</SCRIPT> <body>
<INPUT id="Nut1" type="button" value="Open" onClick="ThayDoi();"> </body>
</html>
Bài số 4: Minh hoạ thay đổi thuộc tớnh outerHTML
Yờu cầu: Tạo một dũng chữ "Click here" cú màu xanh, kớch cỡ H1. Khi người dựng click vào dũng chữ này thỡ thay bằng một liờn kết đến trang http://www.vn.vn
Hướng dẫn: Do ở đõy khi người dựng click vào dũng chữ thỡ thay thế bằng một liờn kết nờn thuộc tớnh cần thay đổi sẽ là outerHTML. Cõu lệnh thay đổi sẽ được đặt trong sự kiện Click chuột.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head>
<SCRIPTlanguage="JavaScript">
functionChenLienKet()
{
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>
Bài số 5: Minh họa việc định vị động trong IE
Yờu cầu: Tạo một nỳt cú nhón là "Sign Up". Khi chuột di chuyển trong nỳt này thỡ hiển thị dũng nhắc là "Đăng ký hũm thư mới" cú màu nền là vàng tại vị trớ của con chuột. Khi chuột di chuyển ra ngoài thỡ dũng nhắc ẩn đi.
Hướng dẫn: Bạn tạo ra một tầng chứa dũng chữ "Đăng ký hũm thư mới" cú màu nền là vàng. Khi chuột di chuyển đến (onMouseMove) thỡ đặt thuộc tớnh visibility là 'visible' để cho hiện tầng đú và khi di chuyển chuột ra ngoài (onMouseOut) thỡ đặt lại thuộc tớnh visibility là 'hidden' để ẩn tầng. Lưu ý, vị trớ của chuột được lưu trong thuộc tớnh event.clientX và event.clientY. Bạn sẽ gỏn vị trớ này của chuột cho 2 thuộc tớnh pixelLeft và pixelTop để định vị tầng.
Minh hoạ: <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <SCRIPT language="JavaScript"> functionHienThi() { document.all.Tang1.style.pixelLeft= event.clientX; document.all.Tang1.style.pixelTop= event.clientY; document.all.Tang1.style.visibility= 'visible'; }
functionAnTang() // Ẩn Tầng 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">
</BODY> </html>
Kết quả khi chuột di chuyển vào trong nỳt
Bài số 6 : Minh hoạ nội dung trong Netscape
Yờu cầu: Tạo một tầng cú tờn là Tang1, một nỳt nhấn cú nhón là "Nạp trang Web" và một hộp text cú tờn là DiaChi. Khi người dựng nhập địa chỉ vào trong hộp text và nhấn nỳt "Nạp trang web" thỡ nội dung của trang đú sẽ được nạp vào tầngTang1.
Hướng dẫn:
- Dựng thẻ LAYER để tạo tầng và đặt tờn cho nú là Tang1
- Viết trong sự kiện onCLick của nỳt "Nạp trang web" cõu lệnh nạp tài liệu vào tầng. Cỳ phỏp nạp tài liệu vào một tầng trong Netscape như sau:
document.<Tờn tầng>.src = "Địa chỉ trang cần nạp" Trong trường hợp này sẽ là :
document.Tang1.src = document.form1.DiaChi.value Minh hoạ:
<html> <head>
<TITLE>Hiển thị tooltip</TITLE>
</head> <body>
<LAYERname="Tang1">
<h1> Tầng này dựng để hiển thị trang Web bạn gừ trong hộpText ! </LAYER>
<FORMname="Form1">
<INPUT type="text" name="DiaChi">
<INPUT type="button" onClick="document.Tang1.src = document.form1.DiaChi.value"> </FORM> </body> </html> BÀI TẬP TỰ GIẢI Bài số 1:
Tạo một tầng cú chứa dũng chữ "Hello", kớch thước H1. và một nỳt nhấn cú nhón là "Thay đổi". Khi người dựng click vào nỳt này thỡ yờu cầu người dựng nhập vào một xõu, sau đú thay nội dung trong thẻ H1 bằng xõu nhập vào này (Theo 4 cỏch: thay thuộc tớnh innerText, innerHTML, outerText, outerHTML).
Bài số 2:
Tạo một thẻ H1, màu chữ xanh dựng để hiển thị thời gian của hệ thống (gồm giờ:phỳt:giõy).
Gợi ý: Viết hàm CapNhat để lấy giờ:phỳt:Giõy trong mỏy tớnh sau đú gỏn cho thuộc tớnh innerText của thẻ H1. Sử dụng hàm setInterval("CapNhat();", 1000) để liờn tục cập nhật thời gian theo từng giõy.
Bài số 3:Tạo 2 tầng trong IE, mỗi tầng chứa một bức ảnh. Tầng thứ nhất chạy từ trỏi sang phải màn hỡnh, tầng thứ hai chạy từ trờn xuống dưới màn hỡnh.
Gợi ý: Sử dụng 2 hàm setInterval để gọi 2 hàm di chuyển 2 tầng.
Bài số 4:Tạo một tầng chứa 3 liờn kết. Chuột click tại vị trớ nào thỡ tầng sẽ được đặt tại vị trớ đú. Gợi ý: Viết lệnh trong sự kiện onClick của thẻ BODY.
Bài số 5:Tạo một form đăng ký E-Mail tương tự như của Yahoo (Bạn chỉ cần tạo một số phần tử, khụng cần tạo hết). Mỗi khi người dựng di chuyển chuột đến một phần tử nào đú thỡ hiển thị một lời chỳ thớch bằng Tiếng việt. (Xem Bài số 5)
Bài số 6: Tạo 3 tầng (Trong Netscape), mỗi tầng nạp một trang tương ứng như sau: http://www.vnn.vn,http://www.echip.com.vnvà http://www.manguon.com.
Bài số 7:Tạo một tầng chứa một bức ảnh, một nỳt cú nhón là "Di chuyển". Khi người dựng click vào nỳt này thỡ bức ảnh sẽ di chuyển chộo từ gúc trờn bờn phải xuống gúc dưới bờn trỏi của màn hỡnh.Gợi ý: Tăng dần pixelTop, giảm pixelLeft.
Bài số 8: Hóy làm hết cỏc bài tập trong sỏch giỏo khoa của cuốn giỏo trỡnh HTML, DHTML & JavaScript.
Phần B
ASP