Chương 6: MÔ HÌNH ĐỐI TƯỢNG TRÌNH DUYỆT docx

Chương 6
MÔ HÌNH ĐỐI TƯỢNG TRÌNH DUYỆT
I. KHÁI NIỆM
Trình duyệt là một ứng dụng dùng để hiển thị các nội dung của một tư liệu
HTML. Các trình duyệt cũng đã đưa ra một số đối tượng để các script có thể truy
cập, các đối tượng này được tổ chức theo một mô hình phân cấp, gọi là mô hình đối
tượng trình duyệt (BOM, Browser Object Model)
BOM đóng vai trò như là một API (Application Programming Interface) cho
việc lập trình các ứng dụng trên nền tảng web cho client-side hay cách khác: chính
trong môi trường trình duyệt, JavaScript dựa vào mô hình này để truy xuất các đối
tượng trên một trang web để cập nhật nội dung, cấu trúc và kiểu dáng của đối tượng
Mỗi đối tượng trong BOM là một tập hợp gồm :
- Các thuộc tính (Properties)
- Các phương thức (Methodes)
- Các sự kiện (Events) có thể kết hợp trên đối tượng.
Trong giáo trình này, chúng ta trình bày các đối tượng trong BOM được cả
IE 5.0 và NN 6.0 sử dụng và một số nét đặc sắc của mỗi mô hình đối tượng trình
duyệt của IE và NN.
IE Browser Objects NN Browser Objects
Trong IE BOM, đối tượng lớn nhất là đối tượng window, còn trong NN
BOM, đối tượng window và đối tượng navigator là ngang cấp.
Sự khác nhau giữa IE BOM và NN BOM chủ yếu là các đối tượng và các
thuộc tính và phương thức của mỗi đối tượng.
Lưu ý : một số tài liệu đề cập đến khái niệm DOM, mô hình đối tượng tư liệu
(Document Object Model), đây là một lĩnh vực rộng lớn chủ yếu dành cho XML.
Thuật ngữ BOM khá xa lạ với các tài liệu bằng tiếng Việt, tuy nhiên P.Kantor thuộc
Đại học New York đã sử dụng khái niệm này trong giáo trình của mình.
93
II. CÁC ĐỐI TƯỢNG CỦA MÔ HÌNH ĐỐI TƯỢNG TRÌNH DUYỆT
Có 9 đối tượng của trình duyệt: window, document, event, frame, history,
location, navigator, screen, mimeType và plugin; ta sẽ lần lượt nghiên cứu các đối

tượng quan trọng, trong đó đối tượng quan trọng nhất là đối tượng document
II.1. Đối tượng window
Đối tượng window miêu tả cửa sổ đang hiển thị trang web, cung cấp các khả
năng truy xuất đến các đối tượng con của nó và các trạng thái cũng như nắm bắt các
sự kiện xảy ra trên cửa sổ này.
II.1.1: Các thuộc tính
- defaultStatus: dòng thông báo xuất hiện trên thanh trạng thái của cửa sổ
trình duyệt.
- status : dòng thông báo tạm thời xuất hiện trên thanh trạng thái của cửa sổ
trình duyệt.
- frames : mảng các frame được chứa bên trong cửa sổ trình duyệt
- location : URL của tệp tin tư liệu HTM được mở trong cửa sổ hiện thời
- name : tên của cửa sổ
- closed : xác định trạng thái của cửa sổ có được đóng hay không.
- top : trả về sổ cha nằm phía trên nhất.
- parent : tham chiếu đến cửa sổ chứa một cửa sổ khác
- self, window : chỉ cửa sổ hiện thời.
- external : trả về host của trang web
- openner : khi một cửa sổ được mở, thuộc tính openner trỏ đến cửa sổ cha
của nó.
II.1.2: Các phương thức
- alert : hiển thị một hộp hội thoại chứa một thông báo do một ứng dụng xác
định.
- confirm : hiển thị một hộp hội thoại chứa một thông báo do một ứng dụng
xác định và hai nút lệnh Yes, No; phương thức trả về true | false tùy thuộc người sử
dụng ấn nút yes hay no.
- prompt : hiển thị một hộp hội thoại chứa một thông báo do một ứng dụng
xác định và một text box để người sử dụng nhập liệu. Phương thức trả về một dữ
liệu kiểu chuổi. Cú pháp : window.prompt(dòng nhắc, giá trị mặc nhiên);
- close : đóng cửa sổ trình duyệt hiện thời hay một ứng dụng HTML (HTA).

- open : mở một cửa sổ mới và nạp tệp tư liệu HTML được cho bởi URL. Cú
pháp : window.open(URL, windowName, features);
Trong đó feature là các sắc thái của cửa sổ mới, đây là tham số tùy chọn. Một số
thuôc tính và giá trị :
o height | width | left | = x ; xác định kích thước của cửa sổ và khoảng cách bên
trái với cửa sổ hiện tại, đơn vị tính bằng pixel.
o location | menubar | scrollbars | toolbar : thêm thanh địa chỉ, vào cửa sổ
(gán giá trị yes sau mỗi thuộc tính để xác định)
o resizable : cửa sổ có thể thay đổi kích thước
Ví dụ : window.open("chuong1.htm","wChap1","width=400, height=200");
94
- print : in trang web hiện thời ra máy in.
- setTimeOut();
- focus: chuyển cửa sổ vừa mở tiến đến phía trước.
Ví dụ : <a href ="#onClick="window.openner.location="";>
VietNamNet </a>
- blur : ngược lại với phương thức focus(), đưa cửa sổ đang mở ra phía sau.
- resizeTo(x, y) : thay đổi kích thước cửa sổ với width =x và height=y.
- resizeBy(m, n) : với m,n ∈ Z, tăng / giảm kích thước cửa sổ với m,n pixel.
- moveTo(x,y) : di chuyển cửa sổ đến vị trí với tạo độ đỉnh trên trái đến (x,y)
- moveBy(m.y) : tăng giảm tọa độ đỉnh trên trái của cửa sổ với m, n pixel
-setInterval(câu lệnh JavaScript, số milli giây): thực hiện câu lệnh JavaScript
trong khoảng thời gian, hàm này trả lại thời gian để hàm clearInterval() có thể loại
bỏ nó.
-setTimeout(câu lệnh JavaScript, số milli giây): thực hiện câu lệnh
JavaScript một lần sau một thời gian nhất định tính bằng milli giây.
-clearTimeout(số milli giây) : xóa bỏ đồng hồ báo giờ.
Lưu ý : trong cửa sổ trình duyệt, khi ta muốn in (File-Print hay sử dụng
phương thức print) một trang web ra giấy in mà không muốn in header và footer
mặc nhiên thì Page Setup và xóa trống các mã định dạng trong các text box như

sau:
II.1.3. Các sự kiện
Có 5 sự kiện được kết hợp với đối tượng window: onblur, onfocus, onload,
onresize, onunload. Ta sẽ nghiên cứu ở phần II.2 dưới đây.
II.2 Mô hình sự kiện (Event model)
Mô hình sự kiện trong IE và NN bao gồm hai thành phần , tuy nhiên về chi
tiết có nhiều điểm khác nhau.
- Đối tượng Event, được xem là một giao diện sự kiện để lập trình các script.
- Danh sách các sự kiện, mỗi sự kiện được xem như là một thuộc tính nội tại
của mỗi thẻ HTML.
II.2.1. Đối tượng sự kiện (Event Object)
 Sự kiện là kết quả của một hành động do người sử dụng hay hệ thống tạo
ra, JavaScript là một ngôn ngữ hướng sự kiện, có thể sử dụng để đón bắt các sự kiện
này khi chúng xảy ra và thực hiện các hành động. Thông qua việc nắm bắt và xử lý
sự kiện, JavaScript có thể truy cập đến các đối tượng của DOM để cập nhật, thay
đổi thuộc tính của đối tượng, tạo nên trang web tương tác và động, đây chính là khả
năng mà Microsoft IE gọi là DHTML.
 Đối tượng event
95
Trong IE DOM : đối tượng event là một đối tượng con của đối tượng
window còn trong NN DOM thì nó là một đối tượng ngang cấp với đối tượng
window, và trong mỗi mô hình đối tượng tư liệu đối tượng event có các thuộc tính ,
phương thức khác nhau được cho trong các bảng sau, đây là sự khác biệt quan trọng
cần lưu ý.
Các thuộc tính của đối tượng event:
(IE 6: Event Object có 38 thuộc tính, NN 8: Event Object có 201 thuộc tính)
Properties IE NN Diễn tả
altKey x x Trả về true nếu người sử dụng ấn phím ALT trong
khi sự kiện xảy ra và ngược lại
ctlKey x x Trả về true nếu người sử dụng ấn phím CTRL trong

khi sự kiện xảy ra và ngược lại
shiftKey x x Trả về true nếu người sử dụng ấn phím SHIFT trong
khi sự kiện xảy ra và ngược lại
cancelBubble x x Trả về true nếu muốn ngưng sự nổi bọt sự kiện
clientX, clientY x x Tọa độ góc trên trái của trang web, tính bằng pixel
screenX, screenY x x Tọa độ của màn hình tại vị trí xảy ra sự kiện
pageX, pageY x Tọa độ của cửa số trang tại vị trí xảy ra sự kiện
offsetX, offsetY x Tọa độ của cửa số trang tại vị trí xảy ra sự kiện
fromElement x Trả về phần tử HTML mà từ đó con trỏ chuột đi ra
toElement x Trả về phần tử HTML mà từ đó con trỏ chuột đi vào
srcElement x Đối tượng mà sự kiện diễn ra trong đó
target x Trả về đối tượng đầu tiên mà sự kiện diễn ra
type x x Loại sự kiện
keyCode x x Trả về mã Unicode của phím được ấn xuống
Ví dụ 1 : khi người sử dụng ấn nút chuột vào một button , sự kiện onclick
được phát sinh, và mọi thông tin về sự kiện này được cập nhật trong đối tượng
Event:
Đọan mã sau đây cho ta các thuộc tính quan trọng trong đối tượng event của
IE DOM.
<HTML>
<HEAD>
<SCRIPT language ="JavaScript">
function listInfo(){
// Lưu ý: script này chỉ chạy trên Internet
Explorer
var str="Event.Type:"+event.type+"\n"+
"Event.clientX,Y:
("+event.clientX+","+event.clientY+")"+"\n"+
"Event.offsetX,Y:("+event.offsetX+","+event.offsetY+")"+"\n"+
"Event.srcElement.tagName:"+event.srcElement.tagName;

alert(str);
}
</SCRIPT>
</HEAD>
<BODY>
96
<INPUT type="button" name ="b1" value="Event Information"
onClick="listInfo();return false;">
</BODY>
</HTML>
Ví dụ 2 : Trong các trang web có phần tìm kiếm, việc thực hiện gõ chữ Việt
trong textbox sẽ do một script điều khiển dựa vào thuộc tính keyCode của đối tượng
event. Đọan mã sau đây minh họa giá trị keyCode (theo bảng mã Unicode) của một
phím được ấn
<INPUT type = "text" size=40 onKeyPress="alert(event.keyCode);">
IE DOM và NN DOM có sự khác biệt trong việc mô tả đối tượng Event.
Đọan mã sau đây sẽ liệt kê tất cả các thuộc tính của đối tượng Event:
for(prop in event) { document.write("event."+prop+"<br>");}
II.2.2. Ngăn chặn sự nổi bọt sự kiện (Event Bubbling)
Trong DOM, các phần tử của trang web được tổ chức theo một cây phân cấp,
do vậy một sự kiện xảy ra trên đối tượng con có thể được xảy ra trên đối tượng cha
của nó, hiện tượng này gọi là sự nổi bọt sự kiện. Ngược lại với sự nổi bọt sự kiện là
sự chảy tràn sự kiện (Event Flow), sự kiện xảy ra ở cấp cao sẽ ảnh hưởng đến các
cấp thấp hơn.
Ví dụ:
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
function cancelBubble(the){
var str=document.getElementById(the);

if(str.tagName=="P") event.cancelBubble=true; //(1)
/* script này chạy trên IE 6.0 lẫn NN 7.1
có thể thay dòng lệnh (1) bằng event.cancelBubble=true; là đủ */
alert("Thẻ P");
}
</SCRIPT>
</HEAD>
<BODY onClick="alert('Thẻ BODY');">
<P id="idP" onClick="cancelBubble('idP');return false;"> PARAGRAPH</P>
</BODY>
</HTML>
Nếu không có dòng lệnh (1) ở trên thì khi click trên PARAGRAPH sẽ lần
lượt xảy ra sự kiện onClick trên thẻ <P> rồi trên thẻ <BODY> và hai hộp hội thoại
lần lượt xuất hiện. Dòng lệnh (1) có tác dụng ngăn chặn sự nổi bọt sự kiện, lúc này
khi click trên PARAGRAPH chỉ có hàm CancelBubble được thực hiện mà thôi.
Trong script trên ta sử dụng các phương thức và thuộc tính được cả hai trình
duyệt chấp nhận : phương thức getElementByID (sẽ trình bày trong mục Document
97
Object) và thuộc tính event.cancelBubble (đã trình bày trên), kỹ thuật như vậy gọi
là cross-browser.
II.2.3. Các sự kiện
Tập hợp các sự kiện là thành phần của DOM chứ không phải là thành phần
của JavaScript, mỗi phần tử trên trang web được kết hợp với một số sự kiện và các
sự kiện này khác nhau trên mỗi trình duyệt hay cách khác mỗi thẻ HTML có những
thuộc tính sự kiện xác định.
Cách sử dụng:
<tag_name event_name = "câu lệnh JavaScript;">
Danh sách các sự kiện thông dụng được sử dụng cho IE và NN :
NSD : Người sử dụng
Event Áp dụng cho phần tử Mô tả & Sử dụng khi

onAbort
image NSD dỡ bỏ việc nạp ảnh khi ckick vào một
liên kết hay ấn nút lệnh Stop
onBlur
window, frame và cả
các phần tử của form
NSD rời khỏi tiêu điểm từ window, frame
hay tất cả phần tử của form
onFocus
window, frame và cả
các phần tử của form
Được kích họat khi NSD thiết lập tiêu
điểm trên đối tượng window, frame,
onClick
link, button, check
box, v.v.
Được kích họat khi NSD ấn nút trái của
chuột lên đối tượng
onChange
text field, text area,
select list
Được kích họat khi NSD thay đổi giá trị
của phần tử
onLoad
window, document,
applet, framset, image,
link, object, script,
style
Được kích họat sau khi trình duyệt đã tải
xong tư liệu HTML , applet hay image

onUnLoad
window, document,
framset
Được bẩy (trigger) khi NSD loại bỏ tư liệu
HTML khỏi trình duyệt.
onMouseDown
button, link, document Được kích họat khi NSD ấn một phím
chuột
onMouseUp
button, link, document Được kích họat khi NSD thả một phím
chuột
onMouseOver
textarea, link, layer ,
image, button
Được kích họat khi NSD di chuyển con trỏ
chuột trên phần tử
onMouseOut
textarea, link, layer,
image, button
Được kích họat khi NSD di chuyển con trỏ
chuột ra khỏi phần tử
onResize
window, frame Được kích họat khi kích thước đối tượng
sắp bị thay đổi
onScroll
window, frame Được kích họat khi NSD sử dụng thanh
cuộn của cửa sổ
onKeyDown
textbox, text area Được kích họat khi NSD ấn một phím
onKeyUp

textbox, text area Được kích họat khi NSD nhả một phím
onKeyPress
textbox, text area Được kích họat khi NSD gõ một phím
Ví dụ 1: Sử dụng sự kiện onLoad để tự động mở trang web khác xuất hiện
phía trước trang web hiện tại.
98
<HTML>
<BODY onLoad="window.open('vd.htm','wVD','height=100, width=300);">
<!- Nội dung trang web ->
</BODY></HTML>
Ví dụ 2: Sử dụng sự kiện onKeyDown để nhận diện phím bấm có phải là
phím số hay không, nếu không đúng con trỏ không thể ra khỏi textbox. Đây cũng là
một phương pháp kiểm tra sự hợp lệ dữ liệu nhập mà không sử dụng sự kiện onBlur.
<HTML><HEAD>
<SCRIPT language="JavaScript">
function check(){
var kcode=event.keyCode;
if(kcode>47 && kcode<58) { window.status=''; return true; }
else { window.status='Ban nhap sai!'; return false; }
/* kiem tra co phai nhap du lieu Numeric?
Mã Unicode của các chữ số có giá trị từ 48 đến 57 */
}
</SCRIPT>
</HEAD>
<BODY>
<FORM >
<INPUT type="text" name "box1" onKeyDown="return check();"
onBlur="alert(this.value);"><br>
</FORM></BODY></HTML>
Ví dụ 3: Sử dụng sự kiện onMouseOver và onMouseOut để tạo hiệu ứng

rollover, đây cũng là phương pháp thường dùng trong việc tạo
các menu với các nút lệnh là các hình ảnh.
<HTML><HEAD>
<SCRIPT language="JavaScript">
function changeImage(num){
var img=document.getElementById("Sample");
if (num==1){ img.src='MouseOver.gif'; }
else { img.src='MouseOut.gif'; }
}
</SCRIPT>
</HEAD>
<BODY>
<IMG src='MouseOut.gif' id="Sample" alt="Sample"
onMouseOver="changeImage(1);" onMouseOut="changeImage(2);">
</BODY> </HTML>
II.3. Đối tượng history
99
Đối tượng history lưu giữ các URL mà người sử dụng đã mở bằng trình
duyệt. window.history có các thuộc tính và phương thức sau :
 Các thuộc tính
- lenght : danh sách URL trong history
- current: URL của tư liệu HTML hiện hành
- next: URL của tư liệu HTML tiếp sau
- previous : URL của tư liệu HTML được mở liền trước.
 Các phương thức
- back() : trở lại trang trước
- forward() : đi đến trang kế tiếp
- go() : nhận tham số là một URL hay một số (-1,0,1) để đi đến trang xác định.
Trong IE: -1 tương ứng với trang trước, 0: trang hiện tại, 1: trang kế tiếp.
II.4. Đối tượng location

Đối tượng location chứa các thông tin về giao thức, host, port, liên kết,
đường dẫn, tên tệp tư liệu HTML của tệp tư liệu HTML được xem từ client, đồng
thời cho phép thiết lập URL cho đối tượng window .
Ví dụ :
<a href="#" onClick="window.location='';">VNN </a>
Đối tượng location có các thuộc tính:
- host : tên webserver
- hostname : tên miền
- href : đường dẫn đầy đủ của liên kết
- pathname : đường dẫn và tên tệp tin của liên kết
- port : cổng URL
- protocol : giao thức thực hiện liên kết.
- search : trả về một chuổi là thông tin nhận được từ một trang web khác
gởi đến theo phương pháp GET.
Để biết các thuộc tính của đối tượng location ta sử dụng đọan script sau:
for(prop in location){
document.write(prop+": "+location[prop]+"<br>";}
II.5. Đối tượng navigator
Đối tượng navigator chứa các thông tin về trình duyệt: tên, phiên bản, tên
mã, ngôn ngữ thể hiện, hệ điều hành
Các thuộc tính (được IE và NN sử dụng):
- Appname : tên trình duyệt
- AppVersion : phiên bản của trình duyệt
- appCodeName : tên mã của trình duyệt
- platform : hệ điều hình của trình duyệt
Để biết các thuộc tính của đối tượng navigator ta sử dụng đọan script sau:
for(prop in navigator){
100
document.write(prop+": "+ navigator [prop]+"<br>";}
Chú ý : Trong IE DOM navigator là đối tượng con của window, còn trong

NN DOM navigator ngang cấp với window.
II.6. Đối tượng screen
Đối tượng screen chứa các thuộc tính liên quan đến độ phân giải màn hình,
khả năng màu sắc và kích thước màn hình tính bằng pixel:
- availHeight : Chiều cao của màn hình hệ thống, không kể thanh tác vụ
- availWidth : Chiều rộng của màn hình hệ thống, không kể thanh tác vụ
- colorDepth : Số bít dùng để thể hiện màu cho mỗi pixel
- height : Độ phân giải tính theo chiều đứng của màn hình
- width : Độ phân giải tính theo chiều ngang của màn hình
Đọan script sau sẽ thay đổi kích thước và canh giữa cửa sổ trình duyệt trên
màn hình của người sử dụng :
var newTopLeftX=(screen.availWidth-640)/2.0;
var newTopLeftY =(screen.availHeight-480)/2.0;
window.resizeTo(640,480);
window.moveTo(newTopLeftX, newTopLeftY);
II.7. Đối tượng document.
document là đối tượng tư liệu của cửa sổ, chứa tất cả phần tử HTML của
trang web trong cửa sổ đó. Đây là đối tượng quan trọng nhất trong mô hình đối
tượng trình duyệt, cho đến nay giữa IE và NN không có nhiều khác biệt: các đối
tượng all, filter và selection (phần có dấu *) chỉ có trong IE DOM còn đối tượng
layer vốn là một đặc trưng của NN, nay đã không tồn tại trong các phiên bản NN
6.0 hay cao hơn.
II.7.1. Các thuộc tính
Thuộc tính
Diễn giải
anchors
Trả về tập các phần tử anchor, link trong tư liệu
applets
Trả về tập các phần tử đối tượng trong một applet
101

body
Trả về phần tử body hay frameset
childNodes
Trả về tập các đối tượng con của một đối tượng
cookies
Trả về tất cả cookies của tư liệu
domain
Trả về tên miền của webserver chứa tư liệu
forms
Trả về tập các phần tử của form trong tư liệu
images
Trả về tập các phần tử image trong tư liệu
links
Trả về tập tất cả các phần anchor, link trong tư liệu với
thuộc tính href được xác định
referrer
Trả về địa chỉ URL của trang trước trang hiện tại
title
Thiết lập hay trả về tiêu đề của tư liệu
url
Trả về địa chỉ URL của tư liệu
fgColor
Trả về màu ký tự của trang web
bgColor
Trả về màu nền của trang web
linkColor
Trả về màu của liên kết
alinkColor
Trả về màu của liên kết khi trỏ đến
vlinkColor

Trả về màu của liên kết đã kích họat
location
Trả về URL của tệp tư liệu
Đối tượng document chứa 5 mảng phần tử (còn gọi là tập hợp, collection)
images, applets, links, forms và anchors, mỗi mảng phần tử chứa danh sách các
phần tử liên quan trong cùng một trang web, ví dụ : mảng images chứa danh sách
các hình ảnh trong trang web.
II.7.2. Các phương thức
Phương thức Diễn giải
close()
Đóng một tư liệu đã được mở với phương thức
document.open().
open()
Mở một tư liệu mới
clear()
Xóa một tư liệu
write()
In một chuổi đến một tư liệu
writeln()
In một dòng ký tự đến một tư liệu
getElementById(ID)
Trả về một phần tử với ID xác định
getElementsByName(name)
Trả về một tập của các phần tử với tên đã xác định
getElementsByTagName
Trả về một phần tử với thẻ HTML xác định
setAttributes(attr, value)
Thay đổi thuộc tính của một phần tử HTML
Trong các phương thức trên, hai phương thức getElementsByName và
getElementByID mới được đưa vào từ IE5 và NN7, cho phép chúng ta tìm kiếm

nhanh chóng một phần tử nào đó trong DOM, từ đó có thể truy xuất các thuộc tính
hay thiết lập thuộc tính của một đối tượng trong trang web.
Ví dụ 1 : Sử dụng tập hợp collection childNodes và phương thức
getElementById để truy xuất và thiết lập các thuộc tính trong một trang web.
Xét một tư liệu HTML sau :
<HTML><HEAD>
<TITLE> ChildNodes & getElementById </TITLE>
102
<! script in ra màn hình cấu trúc cây của trang web ->
</HEAD>
<BODY>
<p id="ip" align="center"> This is a sample of some <b id="ib"> HTML you
might have </b> in your document </p>
<script> listStructure(sp);</script>
<A href="#" onClick="changeContents(sp,pp);"> Thay đổi nội dung</A>
</BODY></HTML>
Cấu trúc cây như sau:
Đọan scrip sau sẽ phân tích cấu trúc cây của trang web đồng thời cho phép
thay đổi giá trị các thuộc tính của một phần tử trên trang web:
<script language="JavaScript">
var pp=document.getElementById("ip");
var sp=pp.childNodes;
function listStructure(the){
document.write("P"+"<br>");
for(i=0;i<the.length;i++){
if(the[i].nodeValue!=null)
document.write("| "+the[i].nodeValue+"<br>")
else document.write("| "+the[i].nodeName+"<br>"+"|"+
"&nbsp;&nbsp;&nbsp;&nbsp"+
"| "+the[1].childNodes[0].nodeValue+"<br>");

} }
function changeContents(the, obThe){
for(i=0;i<the.length;i++){
if(the[i].nodeValue!=null) {the[i].nodeValue="Content node " +(++i)+" ";}
// thay đổi nội dung của đối tượng sp
}
obThe.setAttribute("align","left"); // thay đổi thuộc tính của đối tượng sp
document.body.setAttribute("bgColor","lime"); // thay đổi màu nền trang web
}
</script>
Khi thực hiện đọan scrip, nội dung và thể hiện của trang web sẽ như sau:
103
Tập hợp childNodes cho lại một mãng các đối tượng con của một đối
tượng.Ví dụ: sp = pp.childNodes cho lại mãng sp chứa các đối tượng con của pp, do
vậy sp[i] là các đối tượng con của pp; sp[i].childNodes[j] là node con thứ j của đối
tượng sp[i], nodeValue là giá trị của một node.
Ví dụ 2 : Table là một ví dụ rõ nhất của mô hình phân cấp các đối tượng, sử
dụng tập hợp collection childNodes và phương thức getElementById để truy xuất và
thiết lập các thuộc tính trong một table.
<HTML><HEAD>
<TITLE>Dynamic contents</TITLE>
<SCRIPT language="JavaScript">
function change(){
var dg=document.getElementById("dong");
var row=dg.childNodes;
row[0].childNodes[0].nodeValue="One"; // thay đổi nội dung trong cell
row[1].childNodes[0].nodeValue="Two";
}
</SCRIPT></HEAD>
<BODY>

<TABLE><TR id="dong"><TD>mot </TD> <TD > hai</TD></TR>
</TABLE>
<SCRIPT>
if(confirm("Ban co muon thay doi noi dung table")) change();
</SCRIPT>
</BODY></HTML>
II.7.3. Làm việc với FORM
1.7.3.1 Đối tượng form và tập hợp forms
form là một đối tượng con của đối tượng document, các phần tử của form ta
đã nghiên cứu trong chương II giáo trình này. Để có thể xử lý dữ liệu của người sử
dụng trên máy client, ta dùng JavaScript và các thuộc tính, phương thức của đối
tượng form. Ngoài ra trong BOM đã đưa ra 2 collection (tập hợp, mãng):
- forms : tập (mãng) các đối tượng form trong một tư liệu HTML.
- options : tập (mãng) các đối tượng option trong một đối tượng Select.
Các thuộc tính :
Thuộc tính Diễn giải
acceptCharset
Trả về danh sách các bảng mã ký tự được hỗ trợ
104
action Thiết lập / Trả về các action trên form
elements Trả về một tập tất cả phần tử của form
length Trả về số lượng các phần tử trên một form
name Trả về tên form được khai báo qua thuộc tính name
method Thiết lập / Trả về phương thức HTTP để submit một form
target Thiết lập frame để submit dữ liệu đến
Các phương thức:
Phương thức Diễn giải
reset
Thiết lập lại các giá trị của các trường dữ liệu của form
submit

Submit một form
Các sự kiện :
- onReset : script chạy trước khi thiết lập lại dữ liệu của form
- onSubmit: script chạy trước khi form được gởi đi.
- Để truy xuất một phần tử của form ta sử dụng cú pháp:
document.tên_Form.tên_Đốitượng hay document.id_Form.id_Đốitượng
- Để thiết lập giá trị cho một phần tử của form ta sử dụng cú pháp:
document.tên_Form.tên_Đốitượng.value=giá_tri hay
document.id_Form.id_Đốitượng.value=giá_trị.
 Phần tử text box
- Thẻ HTML : <INPUT type="text">
- Các thuộc tính : id, name, class, style, value, size, maxlength (số tối đa các ký
tự có thể nhập vào), readonly (khóa điều khiển, không cho thay đổi giá trị),
accesskey (Thiết lập phím tắt: Alt+phím), tableIndex (Thiết lập thứ tự nhận tiêu
điểm), disabled (Khóa điều khiển, không cho thay đổi giá trị và nhận tiêu điểm),
style
- Các sự kiện : onChange, onFocus, onBlur
Ví dụ 1: Xây dựng các hàm để kiểm tra nhập liệu cho một form.
Yêu cầu nhập liệu : Họ tên không rỗng, điểm nằm trong đoạn [0,10], nếu hợp lệ thì
cho nút submit hoạt động, ngược lại vô hiệu hóa nút submit.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Nhập điểm cho sinh viên</title>
105
<style>
body{font: nornal 10pt arial}
table{border:collapse:collapse; border:solid 1pz maroon}
</style>
<script language=”javascript”>

function kiemTra(){
var objH=document.getElementById("iht"); // họ tên
var objD=document.getElementById("idm"); // điểm
var objS=document.getElementById("sm"); // nút submit
var ok=(objH.value!="");
ok= ok && ((parseInt(objD.value)>=0)||(parseInt(objD.value)<=10));
if(ok){objS.disabled=false;} else {objS.disabled=true;}
}
</script>
</head>
<body>
<!- - Phối hợp table và form để trình bày form cho mỹ thuật >
<form>
<table width="60%">
<tr>
<td width="36%">Họ và tên sinh viên</td>
<td width="57%">
<input type=text name=hoten id="iht" size="30"
onblur="kiemTra();">
</td>
</tr>
<tr>
<td width="36%">Điểm thi</td>
<td width="57%">
<input type=text name=diem id="idm" size="6"
onblur="kiemTra();">
</td>
</tr>
<tr>
<td colspan="2">

<input type="submit" disabled value="Submit" id="sm">
<input type="submit" value="Reset">
</td>
</tr>
</table>
</form>
</body>
</html>
 Phần tử text area
- Thẻ HTML : <TEXTAREA> </TEXTAREA>
- Các thuộc tính : id, name,value, rows, cols, style, tableIndex, disabled
- Các sự kiện : onFocus, onBlur, onChange
Ví dụ :
<TEXTAREA rows="5" name="S1" cols="31" id="ta" value="Cai gi day"
style="background-color: 'red'; color:'white';font-family:'Arial'" ></TEXTAREA>
106
 Phần tử button
- Thẻ HTML : <INPUT type="button">
- Các thuộc tính : value, style,
- Các sự kiện : onClick, onMouseOver, onMouseOut,
Hai kiểu đặc biệt của phần tử button có kiểu là : reset và submit
Ví dụ : xây dựng script là thay đối biểu biện nút lệnh ứng với hai sự kiện chuột
<SCRIPT laguage ="JavaScript">
function ch(bg,fco){
var nt=document.getElementById("bt");
nt.style.backgroundColor=bg;
nt.style.color=fco
// có thể sử dụng nt.value để thay đổi nhãn của nút lệnh
}
</SCRIPT>

<! Các thẻ HTML khác >
<INPUT type="button" id='iB" value="Nut lenh"
onMouseOver="change('red','yellow');"
onMouseOut="restore('lightgrey','navy');">
 Phần tử Select box
Phần tử select box có hai dạng : drop-down menu và scrolling text box đã trình
bầy ở chương 3. Các phần tử bắt buộc phải có của thẻ <SELECT> là các phần tử
<OPTION>.
+ Phần tử SELECT
- Các thuộc tính : id, name, length (số đề mục), selectedIndex (trả về thứ tự đề
mục đã chọn), disabled, options[i] (trả về đối tượng option thứ i, options là tập các
đề mục)
. options[i].text : nội dung đề mục thứ i
. options[i].value : trả về chuổi giá trị của đề mục thứ i
- Các sự kiện : onChange, onBlur, onFocus.
+ Phần tử OPTION
- Các thuộc tính : id, name, value, text, index
+ Các sử dụng :
Để truy cập một phần tử option ta sử dụng moojt trong 2 phương pháp:
- Sử dụng tập forms: document.forms.name_form.name_select.options[i];
- Sử dụng phương thức getElementById
Ví dụ:
<HTML><HEAD>
<SCRIPT type="text/javascript">
function formAction()
{
var x=document.forms.myForm.mySelect
//var x=document.getElementById("iS");
// cả hai cách đều được
107

alert(x.options[x.selectedIndex].text)
}
/* có thể thay thuộc tính text trong x.options[x.selectedIndex].text bằng các
thuộc tính value, index để thử nghiệm kết quả. */
</SCRIPT></HEAD>
<BODY>
<FORM name="myForm">
<SELECT name="mySelect" id="iS">
<OPTION>Tao </OPTION>
<OPTION>Chuoi</OPTION>
<OPTION>Cam</OPTION>
</SELECT>
<INPUT type="button" onclick="formAction()" value="Show Text">
</FORM>
</BODY></HTML>
 Phần tử Radio button / Check box
- Thẻ HTML : <INPUT type="radio"> / <INPUT type="checkbox">
- Các thuộc tính : id, name, value, checked (được chọn mặc nhiên), length (số
nút radio/ chexkbox trong nhóm có cùng tên)
- Các sự kiện : onClick, onMouseOver, onMouseOut
Ví dụ : Xây dựng một biểu mẫu nhập liệu để thăm dò ý kiến độc giả và cần phải
kiểm tra dữ liệu được nhập là đầy đủ theo mẫu như sau :
(Để trình bày biểu mẫu được mỹ thuật cần sử dụng table theo cấu trúc :
<TABLE>
<FORM>
<TR><TD> thẻ INPUT hay SELECT </TD> </TR>
</FORM>
<TABLE>
đọan mã sau đây được lược bớt phần table cho dễ theo dõi)
<HTML>

<HEAD>
<TITLE>Tham do y kien</TITLE>
108
<SCRIPT language="JavaScript">
function checkForm(){
var myForm = document.forms[0];
var hoTen=myForm.hoten.value;
var emailAddr=myForm.email.value;
// Hãy so sánh việc truy xuất các đối tượng ở trên với sử dụng getElementByID
var tuoiIndex=myForm.age.selectedIndex;
var tuoi=myForm.tuoi.options[tuoiIndex].value;
var nutObj=myForm.nut;
var nut="";
for(var i=0;i<nutObj.length;i++){
if(nutObj[i].checked) nut=nutObj[i].value;}
if((hoTen=="") || (emailAddr=="") || (tuoi=="none") || (nut==""))
{ alert("Thieu thong tin"); return false;}
else { return true }
}
</SCRIPT>
</HEAD>
<BODY>
<FORM action="#" onSubmit="return checkForm();">
Họ và tên <input type="text" name="hoten" size="20">
Email <input type="text" name="email" size="20">
Tuổi <select size="1" name="tuoi">
<option value="none"> Hay chon </option>
<option value="16-25">16-25 </option>
<option value="26-35">26-35 </option>
<option value="36-49">36-49 </option>

</select>
Bạn biết chúng tôi thông qua:
<input type="radio" name="nut" value="Bao chi" checked > Báo chí
<input type="radio" name="nut" value="Ti vi"> Tivi
<input type="radio" name="nut" value="Gioi thieu"> Giới thiệu của bạn bè
<input type="radio" name="nut" value="Tin don"> Tin đồn
<input type="submit" value="Submit" name="B1">
</TABLE>
</FORM>
</BODY>
</HTML>
 Truyền thông dữ liệu giữa các trang web : method POST và GET
Thuộc tính method của phần tử FORM xác định phương thức truyền gởi dữ
liệu giữa các trang web hay truyền gởi dữ liệu đến webserver để vấn tin.
Phương pháp POST : gởi dữ liệu theo giao thức HTTP đến webserver.
Phương pháp GET: gởi dữ liệu trong chuổi vấn tin đính kèm đến URL.
Trong phần này ta nghiên cứu các phương pháp truyền thông dữ liệu giữa các trang
web theo phương pháp GET. Có 3 phương pháp :
- Dùng link :
<a href="receiveInfo.htm?Nguyen Van Quang&48"> Send data</a>
Gởi hai dữ liệu "Nguyen Van Quang" và "48" đến trang web receiveInfo.htm
- Dùng JavaScript để tạo một URL :
<input type="button" value="SendData" name ="button1"
109
onClick="location.href='receiveInfo.htm?'+
encodeURI('Ngo Dinh Thuong&48')">
Hàm encodeURI có chức năng mã hóa dữ liệu để gởi đi, phía trang web nhận
sẽ giải mã dữ liệu bằng hàm decodeURI và đón nhận dữ liệu bằng phương thức :
location.search.
- Dùng form với method GET.

Ví dụ : Ta có hai trang web: sendInfo.htm, có chức năng nhập liệu và gởi thông
tin, receiveInfo.htm có chức năng nhận và hiển thị thông tin nhận được.
* sendInfo.htm
<HTML><HEAD><TITLE>Sending Information</TITLE></HEAD>
<BODY>
<- PP1 : dùng liên kết ->
<a href="receiveInfo.htm?Nguyen Van Quang&48"> Send data</a>
<- PP2 : dùng JS tạo URL ->
<FORM>
<input type="button" value="SendData" name ="button1"
onClick="location.href='receiveInfo.htm?'+
encodeURI('Nguyen Van Quang&48')">
<! escape tuong duong encodeURI, unescape tuong duong decodeURI ->
<! trong các trình duyệt cũ ->
</FORM>
<- PP3 : dùng JS tạo URL trong form->
<FORM action="receiveInfo.htm" method="GET" name="form1">
<! GET gởi dữ liệu trong chuổi vấn tin đính kèm đến URL ->
Ho ten <INPUT type="text" name ="name"><br>
Tuoi <INPUT type="text" name ="age"><br>
<INPUT type="SUBMIT" value="Vsubmit" name ="Nsubmit" id="submit1">
</FORM>
</BODY></HTML>
* receiveInfo.htm
<HTML><HEAD><TITLE>Receiving Information</TITLE></HEAD>
<BODY>
<SCRIPT language="JavaScript">
var infoPassed=decodeURI(location.search);
document.write("Info sent is: "+infoPassed);
</SCRIPT></BODY></HTML>

Kết quả trang web receiveInfo.htm nhận theo các phương pháp gởi dữ liệu như
sau :
Phương pháp 1, 2: ?Nguyen Van Quang&48
Phương pháp 3 : ?name=Nguyen+Van+Quang&age=48& Nsubmit=Vsubmit
Đối với phương pháp gởi dữ liệu theo link việc nhận thông tin đơn giản, dễ xử
lý, còn đối với phương pháp cuối cùng, tức là gởi tất cả các thành phần của form
đến trang web khác, việc xử lý dữ liệu khó khăn hơn.
II.7.4. Đối tượng anchor
110
Đối tượng anchor đại diện cho phần tử <a> trên tư liệu HTML
- Các thuộc tính : accessKey, charset, id, name, tabIndex, href (xác định
URL của liên kết ), target (xác định cửa sổ mở trang web xác định trong URL),
innerHTML (xác định đọan văn bản của thẻ A chứa liên kết)
- Phương thức : blur(), focus().
Ví dụ : Xây dựng đọan mã cho phép thay đổi URL và nội dung text của một
liên kết thỏa mãn chạy trên IE và NN.
<HTML>
<HEAD>
<SCRIPT type="text/javascript">
function myHref()
{
var lienket=document.getElementById('myAnchor');
/* Các biện pháp thay đổi nội dung văn bản của liên kết
* lienket.textContent='Visit W3Schools'; //câu lệnh này chỉ chạy trên NN
* lienket.innerText="Visit W3Schools"; //câu lệnh này chỉ chạy trên IE */
lienket.innerHTML='Visit W3Schools'; //câu lệnh này chạy trên NN và IE
//var lin=lienket.childNodes;
//lin[0].nodeValue='Visit W3Schools';
/* Câu lệnh này chạy được trên IE và NN, dùng thuộc tính childNodes*/
document.getElementById('myAnchor').href="";

}
</SCRIPT></HEAD>
<BODY>
<a id="myAnchor" href="">Visit Microsoft</a>
<FORM>
<INPUT type="button" onclick="myHref()" value="Change URL and text">
</FORM>
</BODY>
</HTML>
III. DHTML (Dynamic HTML)
III.1. Khái niệm
DHTML là từ viết tắt của Dynamic Hyper Text Markup Languge, HTML
động, là một thuật ngữ marketing của Microsoft khi phát hành phiên bản IE 4.0 và
thuật ngữ này chưa được W3C chính thức chấp nhận, tuy nhiên trước sự hấp dẫn
của nó mang lại, nhiều nhà phát triển web đã tận dụng kỹ thuật này. DHTML được
định nghĩa bằng một công thức ngắn gọn :
DHTML = HTML + CSS + JavaScript
Tuy nhiên, DOM mới chính là cơ sở của DHTML, nó cung cấp giao diện cho
các script và các component truy cập vào các đối tượng của tư liệu HTML để đọc
và thiết lập các giá trị của các thuộc tính, tạo nên một trang web "động" (animated,
cần chú ý khái niệm này hoàn toàn khác với khái niệm dynamic web page mà ta sẽ
nghiên cứu ở các chương 7,8 của giáo trình này).
111
IE và NN đều hỗ trợ DHTML, tuy nhiên chính hai trình duyệt này dựa trên
hai mô hình đối tượng tư liệu khác nhau, người thiết kế web phải xây dựng một
trang web trung tính để thỏa mãn nhiều người sử dụng khác nhau.
III.2. Các phương pháp truy cập đến một đối tượng trên tư liệu HTML
DOM cung cấp một giao diện lập trình ứng dụng phía client, theo đó ta có
thể truy cập đến một đối tượng trên tư liệu HTML bằng một trong những phương
pháp sau :

- Sử dụng phương thức của đối tượng document: getElementById(),
getElementsByName() và getElementsByTagName()
- Sử dụng thuộc tính childNodes của một đối tượng.
- Sử dụng các collection : elements (của form), anchors, images v.v.
Trong các phương pháp trên, hai phương pháp đầu tỏ ra khá hiệu quả và
thường được ưa thích để truy cập đến một đối tượng riêng biệt trên trang web.
III.3 Các đặc điểm của DHTML
DHTML có 3 đặc điểm quan trọng hay sự kết hợp giữa HTML, CSS và
JavaScript cho chúng ta có thể thay đổi nội dung, thể hiện, vị trí của một đối tượng
trên trang web thông qua các sự kiện mà không cần phải nạp lại trang web.
III.3.1. Nội dung động
DHTML cho phép thiết kế trang web có thể thay đổi nội dung sau khi được
nạp, trong đó IE cung cấp nhiều khả năng hơn NN.
Ví dụ :
<HTML><HEAD><TITLE>Dynamic Content </TITLE>
<SCRIPT language="JavaScript">
function change(){
var oH =document.getElementById("iH3");
oH.innerHTML="Tam biet"; // thỏa mãn IE và NN
/* có thể thay câu lệnh trên bằng một trong hai câu lệnh dưới
* oH.childNodes[0].nodeValue="Tam biet";
* oC[0].nodeValue="Tam biet"; */
}
</SCRIPT></HEAD>
<BODY onClick="change();">
<H3 id="iH3"> Chao mung cao ban !</H3>
<P> Click chuot de xem su thay doi </P>
</BODY></HTML>
IE còn cung cấp các thuộc tính innerText (xác định văn bản bên trong cặp thẻ
HTML), outerHTML (giống như innerText và thêm các thẻ HTML), phương thức

document.body.insertAdjacentHTML để chèn một đọan văn bản vào cuối trang web
đã nạp. Giải pháp của NN 4.0 là dùng thẻ LAYER, tiếc thay thẻ này không còn
được dùng trong các phiên bản sau của NN.

112
III.3.2. Kiểu động (dynamic style)
Các vấn đề về Style ta đã nghiên cứu trong Chương 4 giáo trình này, trong
mô hình đối tượng tư liệu DOM cho ta phương thức truy cập và thiết lập kiểu của
một đối tượng theo cú pháp :
đối_tượng. style.thuộc_tính [= giá_trị] ;
Một vấn đề cần chú ý tên thuộc_tính của đối tượng style không như tên
thuộc tính trong định nghĩa kiểu . Ví dụ :
CSS : thuộc tính background-color
BOM : thuộc tính backgroundColor, viết liền, phân biệt chữ hoa với chữ
thường
Để xác định các thuộc tính của style cho một đối tượng thỏa cho một trình
duyệt ta sử dụng đọan script sau:
var the =document.getElementById("idThe"); / /idThe là id của một thẻ HTML
var th= the.style; // trả về một Object
for(var pr in th){document.write(pr+": "+th[pr]+"<br>");}
Ví dụ 1 : Thay đổi màu nền, màu chữ và nhãn của một nút lệnh tương ứng
với hai sự kiện onMouseOver và onMouseOut.
<SCRIPT language="JavaScript">
var oldfColor; // màu chữ ban đầu
var oldbColor; // màu nền ban đầu
var oldText ; // nhãn ban đầu
function mOver(the,bColor, fColor, newText){
// the là tham số sẽ đón nhận tham số thật sự là this. bColor: màu nền,
// fColor: màu chữ, newText: nhãn mới
oldfColor=this.style.color;

oldbColor= this.style.backgroundColor;
oldText=this.value;
// lưu lại các giá trị
the.style.backgroundColor=bClor;
the.style.color=fClor;
the.value=newText;
}
function mOut(the,oldbColor, oldfColor, oldText){
the.style.backgroundColor=oldbClor;
the.style.color=oldfClor;
the.value=oldText;
}
</SCRIPT>
Ví dụ 2: Sử dụng thuộc tính display để thiết kế menu co giãn được (như
menu điều hướng của website VietNamNet ,VNExpress, Dân trí v.v )
<HTML>
<HEAD><TITLE>DAI HOC DA NANG</TITLE>
113
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<STYLE type="text/css">
a:link, a:visited, a:focus{color:white;text-decoration:none;
font-family:Tahoma; font-size:10pt}
a:hover{color:yellow;text-decoration:underline;
font-family:Tahoma; font-size:10pt}
</STYLE>
<SCRIPT language="JavaScript">
var curbgColor;
function ItemMinimize(Name) {
var MItem=document.getElementById(Name);
if (MItem.style.display==''){MItem.style.display='none';}

else {MItem.style.display='';} }
function active(obj,color) {
curbgColor=obj.bgColor;
obj.bgColor=color;
obj.style.fontWeight="normal";}
function deactive(obj) {
obj.bgColor=curbgColor;
obj.style.fontWeight="normal";}
</SCRIPT>
<basefont face="Tahoma" size="2">
</HEAD>
<BODY text=navy bgColor=white leftMargin=7 topMargin=0>
<TABLE width="77%" id="T1" border="0" cellspacing="0" cellpadding="2">
<! bat dau tu day >
<tr><td width="100%" bgColor=white> &nbsp;</td></tr>
<!- một dòng trống ->
<TR><TD width="100%"
onclick="ItemMinimize('01')"
onmouseover="active(this, 'navy')"
onmouseout="deactive(this)" bgColor="#004199">
<B><A href="#">TỔNG QUAN </A></B>
</TD></TR>
<TR><TD width="100%" bgcolor="#99CCFF">
<DIV id='01' style="DISPLAY:none;line-height:12pt;">
<UL type=square>
<LI><A href="m1.htm" style="color:navy">Giới thiệu</A>
<LI><A href="m2.htm" style="color:navy">Sơ đồ tổ chức</A>
<LI><A href="m3.htm" style="color:navy">Hệ thống đào tạo</A>
</UL>
114

</DIV>
</TD></TR>
<TR><TD width="100%"
onclick="ItemMinimize('02')"
onmouseover="active(this, 'navy')"
onmouseout="deactive(this)" bgColor="#003399" >
<B><A href="#">CƠ QUAN ĐẠI HỌC ĐÀ NẴNG </A></B>
</TD></TR>
<TR><TD width="100%" bgcolor="#99CCFF">
<DIV id='02' style="DISPLAY:none;line-height:12pt">
<UL type=square>
<LI><A href="h1.htm" style="color:navy">Ban Giám đôc</A><BR>
<LI><A href="h2.htm" style="color:navy">Văn phòng</A><BR>
<LI><A href="h3.htm"
style="color:navy">Các ban</A><BR>
</UL>
</DIV>
</TD></TR>
<! Các đọan sau cũng như vậy->
</TABLE>
</BODY></HTML>
Nhận xét :
- Trang web trên chạy được trên IE lẫn NN mà không dùng đến applet (công
nghệ của Sun) hay đối tượng ActiveX (công nghệ của Microsoft).
- Qua ví dụ trên ta thấy công dụng to lớn của thẻ DIV trong việc thiết lập
kiểu động.
Kiểu động được áp dụng trong việc thiết kế các menu điều hướng trong các
trang web.
Cần phân biệt hai thuộc tính display nhận giá trị " " và "none") và visibility
(nhận giá trị visible và hidden).

display="" tương đương visibility=visible
display='none' tương đương visibility=hidden , nhưng đối tượng bị hidden
chiếm không gian trên trang web còn 'none' thì không, lợi dụng tính chất của thuộc
tính display để xây dựng menu co giãn được.
III.3.3. Định vị động
Định vị động là xác định vị trí của một phần tử trên trang web tại thời điểm
trang web đang mở dựa trên hai tọa độ x,y. Có 2 phương pháp định vị : định vị tuyệt
đối (position:absolute) và định vị tương đối (position:relative).
115
Ví dụ : thiết kế một banner quảng cáo di chuyển trên cửa sổ trình duyệt khi
mở một trang web (không dùng phương thức window.open dễ bị ngăn chặn)
<HTML>
<HEAD>
<TITLE>Quang cao</TITLE>
<SCRIPT language="JavaScript">
var top=0;
var max=200;
var step=2;
var count=0;
var alpha=100;
var time=5;
function quangCao() {
ad=document.getElementById("advs");
if(top+ad.clientHeight<0)
{
ad.style.visibility="hidden";}
else {
if(top>=max)
{
if(count>time) { ad.style.filter="alpha(opacity="+(alpha-=5)+")"; }

else count++;
}
else
{ top+=step+=2; ad.style.top=top;}
}

}
time=time*2;
setInterval("quangCao()",100);
</SCRIPT>
<STYLE type="text/css">
H1{position:relative;width:200px; height:200px; top:150px}
</STYLE>
</HEAD>
<BODY onload="quangCao();">
<DIV id="advs"
style=" position: absolute; width: 50%;
border: 3px solid olive;
padding: 8px;
background: lime none repeat scroll 0% 50%;
-moz-background-clip: initial;
-moz-background-inline-policy: initial;
-moz-background-origin: initial;">
<H3><FONT color="#330099">
<P align="center">Chào mừng bạn đến với TVAd, VTV3! <BR>
(powered by JavaScript)</P>
116
</FONT></H3>
</DIV>
<!- noi dung chinh cua trang web ->

</BODY>
</HTML>
Nhận xét : Trang web trên chạy được trên IE lẫn NN, tuy nhiên hiệu ứng lọc
(filter) chỉ áp dụng cho IE còn NN thì không được.
IV. TỔNG KẾT CHƯƠNG
Mô hình đối tượng trình duyệt BOM là một giao diện lập trình phía client.
Có các mô hình cho các trình duyệt khác nhau. Do vậy, để đảm bảo trang web chạy
được trên nhiều trình duyệt cần phải nghiên cứu sâu các mô hình này để xây dựng
một trang web trung tính hoặc trang web xuyên nền (cross platform), nhất là nhiều
người sử dụng đang quan tâm đến một trình duyệt mới của Mozilla là FireFox có
tính bảo mật tốt hơn Internet Explorer ./.
1. Tại sao W3C DOM có những đặc tả không có trong IE DOM lẫn Netscape Dom?
2. Thẻ Layers còn hiệu lực trong NN 7.0 và FireFox 1.0 ? Giải pháp thay thể thẻ này
trong NN và FireFox là gì?
3. Trong DHTML, tất cả các phần tử HTML và các thẻ đều được xem như là những đối
tượng có thể truy cập và xử lý độc lập? Giải thích.
4. Nội dung động (dynamic content) là một đặc điểm theo đó ta có thể thay đổi nội dung
văn bản của trang web sau khi trang web được nạp xong.
5. Đối tượng event chỉ có thể được sử dụng trong phạm vi của trình xử lý sự kiện (event
handler). Giải thích?
6. Kết thúc một hành động tương đương với kết thúc sự nổi bọt sự kiện ?
7. Một trình xử lý sự kiện là tập các câu lệnh được thi hành để đáp ứng một sự kiện?
Phân biệt thuật ngữ event, event handler
8. Lập bảng so sánh style trong CSS và DOM HTML ?
9. Không dùng giả lớp (pseudo class) mà chỉ dùng JavaScript để thay đổi trạng thái các
liên kết.
10. Sử dụng các thẻ <MAP>, <DIV> và các kỹ thuật DHTML để xây dựng một bản đồ
hướng dẫn du lịch Đà Nẵng
11. Sử dụng Xara Web style 5.0 để xây dựng menu pulldown. Kiểm tra mã nguồn được
phát sinh để kết luận menu này có chạy được trong IE lẫn NN không?

1.
2. W3C, W3C DOM, last updated May 2008

117