Tài liệu cơ bản về HTML, DHTML và Javascript

 thì mở ra trang tương ứng là    và  
Gợi ý: Làm tương tự như bài tập mẫu, nhưng tạo ra 4 thẻ H2.
Bài tập tự giải 2: Hãy tạo một menu gồm 4 mục như ở trên nhưng theo chiều ngang, 
Hướng dẫn: Nếu bạn dùng thẻ H2, thì mỗi mục sẽ tự động được đặt riêng trên một dòng. Để có thể đặt nhiều mục trên cùng một dòng, bạn có thể tạo một bảng có một hàng và nhiều cột. Mỗi mục bây giờ sẽ được đặt trong một thẻ . Để thay đổi kích thước, màu nền, màu chữ v.v.. bạn cũng sử dụng STYLE: <TD style = “color: white” ……
Hoặc cách thứ hai là bạn sử dụng thẻ . Ví dụ:
<Span style = “color:white; background-color:blue; cursor:hand; font-size:16pt”
onClick = “window.open(‘’);” > 
Trang Echip.com 
Bài số 4: Minh hoạ tạo tầng trong IE
Tạo một tầng gồm có dòng chữ “Welcome to LAYER !”, màu đỏ, kích thước 40pt, font chữ Arial. Toàn bộ dòng chữ này có độ rộng (width) là 300px.
Hướng dẫn: Việc tạo tầng và đặt các thuộc tính có thể đặt thông qua định nghĩa STYLE. 
Minh hoạ:
Tạo tầng trong IE
	<DIV STYLE="position:absolute; color:red; font-family:arial; font-size:30pt; 
	top: 50px; left: 50px; width:400px">
	Welcome to LAYER !
Top=50
left=50
Width = 400px
Bài số 5: Minh hoạ việc ẩn và hiện tầng bằng câu lệnh JavaScirpt
Yêu cầu: tạo một dòng chữ “Các liên kết” bằng thẻ H2, màu nền là tím (magenta), màu chữ trắng (white). Và tạo một tầng có ID = LienKet, Trong tầng có một bảng gồm 2 hàng, 1 cột, nội dung của bảng chứa 2 liên kết (bạn có thể tạo bằng thẻ A HREF) đến các trang  và  Ban đầu, tầng này ẩn (visible : ‘hidden’). Khi người dùng dùng di chuyển chuột đến thẻ H2 thì tầng này hiện. Còn khi người dùng click vào một trong 3 liên kết thì tầng này ẩn.
Hướng dẫn: Để ẩn hay hiện tầng bạn viết:
document.all.LienKet.style.visibility = ‘visible’ (hoặc ‘hidden’)
Minh hoạ:
Tạo tầng trong IE Version 2
<H2 STYLE="color:white; background-color:magenta; width:200px"
	onMouseOver = "document.all.LienKet.style.visibility = 'visible';">
	Các liên kết
<DIV ID="LienKet" STYLE="position:absolute; font-family:arial; visibility: hidden; 
	background-color:yellow; top: 40px; left: 10px; width:200px; ">
	 Trang đăng ký E-Mail 
	 Website miễn phí 
Bài tập tự giải 3: Tạo một hệ thống menu như trang bên:
Tạo Menu trong IE - Sử dụng TẦNG và JavaScript
 .MenuBar{background-color:blue; color:white; font-family:arial; font-size:16pt;width:150px; cursor:hand}
 .Menu { background-color: yellow; color: white; position: absolute; top : 40; visibility : hidden}
	function AnCacMenu() // Hàm Ẩn các Menu có tác dụng làm ẩn các tầng mỗi khi được gọi
	{
	document.all.Menu1.style.visibility = 'hidden';
	document.all.Menu2.style.visibility = 'hidden';
	document.all.Menu3.style.visibility = 'hidden';
	}	
<!-- Hàm AnCacMenu () trong sự kiện onClick của BODY sẽ được gọi khi người dùng
 Click chuột vào bất kỳ đâu trong tài liệu (Xem lại phần Nổi bọt sự kiện) -->
	Trang đăng ký E-Mail 
	Đăng ký Website miễn phí 
	Trang dạy JavaScript 
	Trang IT Tiếng việt 
	Đại học Bách khoa Hà Nội 
	Đại học cần thơ 
	Đại học Quốc gia
	Các liên kết
	Tin tức
	Các hoạt động
Chương VI: Nội dung động và định vị động
Mục tiêu của chương này giúp người học có thể:
Thay đổi nội dung của các thẻ trong trang web thông qua JavaScript
Sử dụng JavaScript để di chuyển các tầng
Vận dụng khả năng định vị động và nội dung động vào thiết kế web
TÓM TẮT LÝ THUYẾT
1. 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.. = 
Trong đó <Tên thuộc tính là một trong số 4 thuộc tính nêu trên.
2. Đị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.
2.1 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..style.pixelLeft = 
document.all..style.pixelTop = 
2.2 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..top = 
	document..left = 
Trong đó, Tên tầng chính là giá trị của thuộc tính name do bạn đặt.
B. 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ạ :
 I am having func
Bài số 2: Minh hoạ 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ạ:
 '">
	Click here
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  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ạ:
	function ThayDoi()
	{
	window.open("","_blank");
	document.all.Nut1.outerText='"Trang này đã thăm";
	}
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 
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.
Minh hoạ:
 function ChenLienKet() 
 {
 document.all.LienKet.outerHTML='Trang Aptech' ;
 }
	Click Here
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ạ: 
	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';
	}
	<INPUT type="button" value="Sign Up" 
	onMouseMove="HienThi();" 
	onMouseOut="AnTang()">
	Đăng ký hòm thư mới
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ầ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..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ạ:
Hiển thị tooltip
	 Tầng này dùng để hiển thị trang Web bạn gõ trong hộpText !
C. 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:   và 
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.