Giáo trình Hướng dẫn lập trình HTML, DHTML và Javascript

 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 ! 
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: 
Top=50 
left=50 
Width = 400px
41 
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:ar ial; 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
42 
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ể: 
q  Thay đổi nội dung của các thẻ trong trang web thông qua JavaScript 
q  Sử dụng JavaScript để di chuyển các tầng 
q  Vận dụng khả năng định vị động và nội dung động vào thiết kế web 
C.  TÓM TẮT LÝ THUYẾT
43 
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.
44 
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ạ:
45 
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ạ:
46 
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
47 
 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.