Trình duyệt được tạo bởi các đối tượng. Khi Jscript chạy trên nền trình duyệt, chúng ta cso thể truy cập vào các đối tượng của trình duyệt chính xác như chúng ta truy cập vào các đối tượng của Jscript.
Trình duyệt đưa ra rất nhiều đối tượng, ví dụ như đối tượng window tương ứng với của sổ của trình duyệt. Chúng ta đã từng sử dụng 2 phương thức của đối tượng này đó là alert() và prompt(). Các đối tượng khác cũng có hiệu lực đối với trình duyệt chính là bản thân trang,
được biểu diễn bởi đối tượng văn bản (document object). Quay trở lại các phần trước chúng ta sử dụng thuộc tính bgColor của đối tượng document để thay đổi mầu nền của trang web. Chúng ta sử dụng phương thức write() của đối tượng để viết thông tin ra trang web.
Rất nhiều đối tượng khác được sử dụng trong mã HTML như là đối tượng img của thẻ <img>
Tập hợp các đối tượng mà trình duyệt cung cấp sử dụng cho Jscript được gọi là Brower Object Model (BOM).
4.2.6.1 Giới thiệu các đối tượng trình duyệt
Trong phần này chúng ta xem xét các đối tượng của BOM có hiểu lực đối với tất cả các trình duyệt. BOM cung cấp rất nhiều đối tượng, nhưng chỉ khoảng 10% được sử dụng.
Một trang web được biểu diễn ở trong BOM bởi đối tượng document.
4.2.6.2 Đối tượng Windows
Đối tượng window là đối tượng toàn cục, có nghĩa là chúng ta không phải sử dụng tên của nó để truy cập các thuộc tính và phương thức. Các hàm và biến cục bộ được tạo ra như các thuộc tínhv à đối tượng toàn cục. Ví dụ, hàm alert() thực chất là phương thức của đối tượng
window.
alert("Hello!"); hoặc window.alert("Hello!");
Cả hai trình duyệt bao gồm các đối tượng document, navigator, history, screen, và location. Đối tượng Document: biểu diễn các trang
Đối tượng screen: chứa thông tin về khả năng hiển thị của máy trạm Đối tượng location: lưu trư chie tiết về vị trị trang hiện thời.
Sử dụng đối tượng window
Một ví dụ đơn giản sử dụng các thuộc tính và phương thức của đối tượng window đó là tác độngv vào thanh trang thái của document
Để thay đối thông báo mặc địnhc của thanh trang thái của window, chúng ta sử dụng thuộc tính “defaultStatus” property.
window.defaultStatus = "Hello and Welcome"; hoặc defaultStatus = "Hello and Welcome"; <html>
<head>
<script language="JavaScript" type="text/JavaScript"> window.defaultStatus = "Hello and Welcome";
</script> </head> </html>
Trong một số trường hợp nếu chúng ta khai báo biến trùng với tên đối tượng hoặc thuộc tính của BOM không xảy ra lỗi những không nhận được kết quả chính xác
var defaultStatus;
defaultStatus = "Welcome to my website";
Trong trường hợp này chúng ta hoặc sử dụng tên biến khác hoặc cú pháp chính tắc để truy cấp thuộc tính của window
var defaultStatus;
window.defaultStatus = "Welcome to my website";
4.2.6.3 Đối tượng history
Đối tượng history theo dõi những trang mà người sử dụng đã duyệt qua. Danh sách các trang được gọi từ stack history của các trình duyệt. Nó cho phép người sử dụng bấm vào phím Back hoặc Forward của trình duyệt để thăm lại những trang vừa duyệt.
Giống như đối tượng Array của Jscript, đối tượng history có thuộc tính chiều dài (length). Đối tượng history có phương thức back() và forward(), go() …..
history.go(-2); Quay trở lại 2 mức
history.go(3);.Tiến lên 3 mức
Note: go(-1) tương đương với back() , và go(1) tương đương forward().
4.2.6.4 Đối tượng location
Đối tượng location lưu trữ rất nhiều thông tin có tích về vị trị hiện thời của trang. Không chỉ lưu trữ vẻ URL cho trang mà server lưu trang đó, số cổng kết nối server, giao thức được sử dụng. Những thông tin này tương đương với các thuộc tính href, hostname, port, và giao thức của đối tượng location
Để lấy được vị trí trang hiện thời, có thể sử dụng các phương thức của đối tượng vị trí để thay đổi vị trí và làm tươi trang hiện thời.
4.2.6.5 Thay đổi vị trị (Changing Locations)
Chúng ta có thể duyệt các trang khác theo 2 cách. Hoặc sử dụng thuộc tính href để chỉ tới trang khác, hoặc có thể sử dụng phương thức relplace(). Kết quả của hai cách này tương tự như nhau. Sự khác nhau đó là replace() xóa bỏ trang hiện thời trong stack history và thay vào đó là giá trị mới.
window.location.replace("myPage.htm"); window.location.href = "myPage.htm";
Đối tượng navigator
Thực chất đối tượng navigator thuộc tính của đối tượng window.
4.2.6.6 Đối tượng screen
Thuộc tính đổi tượng screen của đối tượng window chứa rất nhiều thông tin khả năng hiển thị của máy trạm. Các thuộc tính của nó bao gồm các thuộc tính chiều cao, độ rộng, xác định ra vùng dọc, ngang của screen
4.2.6.7 Đối tượng document
Cùng với đối tượng window, đối tượng document là một trong đối tượng quan trọng và chung nhất được sử dụng trong BOM. Thông qua đối tượng này, có thể truy cập tới các thuộc tính và phương thức của một vài đối khác định nghĩa bởi các thẻ HTML.
Các thuộc tính và phương thức trong các phiên bản trình duyệt khác nhau rất nhiều, trong phần này chúng ta tập trung các thuộc tính và phương thức chung nhất đối với tất cả các trình duyệt
Đối tượng document có các thuộc tính kết hợp với nó, thực chất là các mảng. Những thuộc tính chính đó là các mảng forms, images và links. IE4 và 5 hỗ trỡ thêm một số các thuộc tính mảng khác như là tất cả thuộc tính mạng lá mảng của các thể biểu diễn bởi các đối tượng trong trang. Còn NN hỗ trợ các thuộc tính mảng không được hỗ trở bởi IE ví dụ như các mảng thẻ.
a. Sử dụng đối tựong document
Ví dụ: thiết lập màu nền dựa vào chế độ màn hình của máy trạm <html>
<body>
<script language="JavaScript" type="text/JavaScript"> switch (window.screen.colorDepth) { case 1: case 4: document.bgColor = "white"; break; case 8: case 15: case 16: document.bgColor = "blue";
break; case 24: case 32: document.bgColor = "skyblue"; break; default: document.bgColor = "white"; }
document.write("Your screen supports " + window.screen.colorDepth + "bit color");
</script> </body> </html>
Giá trị thuộc tính colorDepth trả về các giá trị 1, 4, 8. 15, 16, 24, 32. Chúng biểu diễn số các bit được gán cho mỗi pixel trên màn hình.
b. Mảng các ảnh - The images Array
<img ALT="USA" name=myImage src="usa.gif">
Mỗi ảnh trong trang có một đối tượng img được tạo ra. Các đối tượng được lưu trong mạng images. Mảng này là thuộc tính của document. Ảnh đầu tiên trong trang được truy vấn thông qua images[0].
Có thể gán biến tham chiếu tới đối tượng img trong mảng images.
var myImage2 = document.images[1];
Chúng ta có thể truy cấp các đối tượng img trong mảng images bằng tên. Ví dụ, đối được bởi thẻ <img>, có tên là myImage, có thể được truy cập trong thuộc tính mảng ảnh của đối tượng document như sau:
document.images["myImage"]
Bởi vì thuộc tính document.images là một mảng, nó có các thuộc tính tự của đối tượng mảng Jscritp như thuộc tính length. Ví dụ, nếu chúng ta muôn biết có bao nhiêu ảnh ở trong trang, chúng ta có thể sử dụng document.images.length.
<html> <body>
<img name=img1 src="" border=0 width=200 height=150> <script language="JavaScript" type="text/JavaScript">
var myImages = new Array("usa.gif","canada.gif","jamaica.gif","mexico.gif"); var imgIndex = prompt("Enter a number from 0 to 3","");
document.images["img1"].src = myImages[imgIndex]; </script>
</body> </html>
c.Mảng links
Đối với mỗi thẻ hyperlink <A> định nghĩa với thuộc tính href, trình duyệt tạo ra một đối tượng A. Thuộc tính quan trọng nhất của đối tượng A đó là href, tương ứng với thuộc tính của thẻ. Sử dụng thuộc tính này, chúng ta có thể tim các điểm liên kết ở đâu và có thể thay đổi điều này thập chi sau khi trang đó được nạp
Tập hợp các đối tượng trong trang chứa bên trong mảng links[], tương tư như đối tương img trong mảng images[]
d. Code kết nối tới các sự kiện trang Web
Các sự kiện xuất hiện khi có một hành động nào xảy ra. Ví dụ như người sử dụng bâm vào trang, siêu liên kết hoặc di chuyển con trỏ tới một dòng text nào đó gây ra các sự kiện.
e. Xử lý các sự kiện như các thuộc tính:
<html> <body>
<A href="somepage.htm" name="linkSomePage"> Click Me
</A> </body> </html>
<A href="somepage.htm" name="linkSomePage" onclick="alert('You Clicked?')"> Click Me </A> <html> <body> <script language="JavaScript"> function linkSomePage_onclick() { alert('You Clicked?'); return true; } </script>
<A href="somepage.htm" name="linkSomePage" onclick="return linkSomePage_onclick()"> Click Me
</A> </body> </html>
Một vài sự kiện không liên kết trực tiếp tới hành động của người sử dụng. Ví dụ, đối tượng window có sự kiện load, xảy ra khi trang được nào và một sử dụ unload xảy ra khi trang unload (có thể chuyển tới một trang khác hoặc trình duyệt bị đóng lại). Các sự kiện này nằm trong tag <body>.
<body language=JavaScript onload="myOnLoadfunction()" onunload="myOnUnloadFunction()">
f. Xử lý các sự kiện như các thuộc tính
Theo cách thức kết nối tới các sự kiện, chúng ta cần phải định nghĩa hàm sẽ được thực hiện khi sự kiện xuất hiện. Sau đó, thiết lập thuộc tính xử lý xự kiển của đối tượng đến hàm đã địn nghĩa.
Ví dụ minh họa:
<html> <body>
function linkSomePage_onclick() {
alert('This link is going nowhere'); return false;
}
</script>
<A href="somepage.htm" name="linkSomePage"> Click Me
</A><P>
<A href="otherpage.htm" name="linkOtherPage"> Click Me
</A><p>
<script language="JavaScript" type="text/JavaScript"> window.document.links[0].onclick = linkSomePage_onclick; </script>
</body> </html>
Hiển thị ảnh ngẫu nhiên khi một trang được nạp
<html> <head>
<script language="JavaScript">
var myImages = new Array("usa.gif","canada.gif","jamaica.gif","mexico.gif"); function changeImg(imgNumber)
{
var imgClicked = document.images[imgNumber]; var newImgNumber = Math.round(Math.random() * 3);
while (imgClicked.src.indexOf(myImages[newImgNumber]) != -1) { newImgNumber = Math.round(Math.random() * 3); } imgClicked.src = myImages[newImgNumber]; return false; } </script> </head> <body>
<A href="" name="linkImg1" onclick="return changeImg(0)"> <img name=img0 SRC="usa.gif" border=0 >
</A>
<A href="" name="linkImg2" onclick="return changeImg(1)"> <img name="img0" SRC="mexico.gif" border="0" >
</A> </body> </html>