Hôm nay chúng ta sẽ cùng nhau nghiên cứu một số bài tập về Nội dung động trong HTML
 |
| HTML, CSS |
Bài 1: 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>
Bài 2: Thay đổi thuộc tính innerHTML
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 3: 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">
function ThayDoi()
{
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 4: 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.niit.vnHướ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.
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.niit.vn">Trang NIIT</A>' ;
}
</SCRIPT>
<body>
<h1 id="LienKet" style="color:blue" onClick="ChenLienKet()">Click Here</h1>
</body>
</html>
Bài 5: Đị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">
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 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">
Đăng ký hòm thư mới
</DIV>
</BODY>
</html>
Kết quả khi chuột di chuyển vào trong nút
Bài 6: 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ầng Tang1.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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<LAYER name="Tang1">
<h1> Tầng này dùng để hiển thị trang Web bạn gõ trong hộpText !
</LAYER>
<FORM name="Form1">
<INPUT type="text" name="DiaChi">
<INPUT type="button" onClick="document.Tang1.src = document.form1.DiaChi.value">
</FORM>
</body>
</html>
Mong rằng sau khi làm các bài tập trên các bạn sẽ hiểu sâu hơn về Nội dung động - Định vị động trong HTML
Không có nhận xét nào:
Đăng nhận xét