JavaScript luôn gắn liền với trình duyệt web (browser) nên việc hiểu về browser là rất quan trọng với người lập trình JavaScript.
BOM
JavaScript và trình duyệt có thể “giao tiếp” thông qua một mô hình đối tượng gọi là BOM (Browser Object Model). Mô hình này tạo ra hệ thống giống cấu trúc cây các đối tượng, cung cấp nhiều thuộc tính và phương thức cho người lập trình JavaScript. Bản thân browser được xem là một đối tượng – đối tượng window. Đối tượng window là cha của một số đối tượng như hình sau:
Self
Đối tượng window là đối tượng toàn cục đại diện cho cửa sổ mở hiện tại của trình duyệt. Đối tượng window có một số phương thức (ví dụ hai phương thức quen thuộc là alert() và prompt()), thuộc tính, và các đối tượng con (như hình trên). Vì là đối tượng toàn cục nên các phương thức, thuộc tính, hay đối tượng con của window có thể được truy cập trực tiếp mà không cần thông qua window, ví dụ thay vì gọi:
window.alert();
chúng ta có thể gọi:
alert();
Tuy nhiên, khi truy cập đến các thuộc tính, phương thức, đối tượng con của đối tượng là con của window thì cần phải thông qua đối tượng đó, ví dụ truy cập đến đối tượng forms[0] là con của đối tượng document (và document) là con của window chúng ta viết:
document.forms[0];
window có thuộc tính self tham chiếu đến chính bản thân đối tượng window, ngoài ra còn có một số thuộc tính phổ biến khác như sau:
| Thuộc tính | Mô tả |
| closed | Thiết lập đến true khi cửa sổ được đóng |
| defaultStatus | Thiết lập văn bản mặc định trên thanh trạng thái của browser |
| name | Tên của window khi nó được mở lần đầu |
| opener | Một tham chiếu đến window đã tạo ra window |
| parent | Thường dùng với các frame tham chiếu đến window đã tạo ra window hay một mức trên kể từ frame |
| status | Thiết lập văn bản trên thanh status khi người dùng lướt qua (hover) một phần tử, chẳng hạn một liên kết |
| top | Tham chiếu đến của sổ cha mức cao nhất |
Một số phương thức phổ biến của window:
| Phương thức | Mô tả |
| addEventListener() | Thêm trình xử lý sự kiện |
| attachEvent() | Phiên bản của addEventListener trong IE |
| blur() | Làm biến mất focus của input từ cửa sổ |
| focus() | Làm xuất hiện focus đến cửa sổ |
| close() | Đóng cửa sổ trình duyệt |
| detachEvent() | Phiên bản của removeEventListenrt trong IE |
| removeEventListener() | Xoá trình xử lý sự kiện |
| open() | Mở một cửa sổ |
| print() | Phát sinh chứa năng Print của trình duyệt |
| moveBy() | Di chuyển cửa sổ đến một vị trí tương đối |
| moveTo() | Di chuyển cửa sổ đến một vị trí cụ thể |
| resizeBy() | Thay đổi kích cỡ cửa sổ theo một giá trị tương đối |
| resizeTo() | Thay đổi kích cỡ cửa sổ theo một giá trị cụ thể |
Ngoài ra, bộ định thời gian (timer) cũng liên quan đến đối tượng window thông qua một số phương thức như: clearInterval(), clearTimout(), setInterval(), setTimeout().
Ví dụ về các phương thức hay thuộc tính của window sẽ được giới thiệu trong các phần sau.
Đối tượng screen
Khi thiết kế giao diện, thông tin về màn hình hiển thị đến người xem là rất quan trọng. Đối tượng screen cung cấp cho chúng ta cách để có được thông tin từ màn hình người xem qua một số thuộc tính:
| Thuộc tính | Mô tả |
| availHeight | Lấy chiều cao màn hình trừ đi chiều cao bị chiếm bởi các thành phần khác, ví dụ như thanh nhiệm vụ (taskbar) trong Microsoft Windows. |
| availWidth | Lấy chiều rộng màn hình trừ đi chiều rộng bị chiếm bởi các thành phần khác, ví dụ như thanh nhiệm vụ (taskbar) trong Microsoft Windows. |
| height | Lấy toàn bộ chiều cao màn hình |
| width | Lấy toàn bộ chiều rộng màn hình |
| colorDepth |
Ví dụ thực thi đoạn mã sau (để nhanh chóng chúng ta có thể dùng công cụ trực tuyến jsfiddle.net ):
alert("Chiều cao hợp lệ: " + screen.availHeight);
alert("Tổng chiều cao: " + screen.height);
alert("Chiều ngang hợp lệ: " + screen.availWidth);
alert("Tổng chiều ngang: " + screen.width);
Chú ý sự khác biệt về chiều cao (do có taskbar).
Đối tượng navigator
Đối tượng navigator cung cấp các thuộc tính có thể được dùng để phát hiện các thanh phần trên trình duyệt của người dùng. Mặc dù hiện nay không còn phổ biến do xuất hiện nhiều kĩ thuật mới nhưng mục đích ban đầu của người lập trình JavaScript là dùng đối tượng navigator để phát hiện người dùng đang dùng trình duyệt gì.
Chúng ta sẽ tìm hiểu các thuộc tính của đối tượng navigator thông qua ví dụ sau:
Tạo một tập tin html có nội dung sau:
<!doctype html>
<html>
<head>
<title>The navigator Object</title>
</head>
<body>
<script type="text/javascript">
var body = document.getElementsByTagName("body")[0];
for (var prop in navigator) {
var elem = document.createElement("p");
var text = document.createTextNode(prop + ": " + navigator[prop]);
elem.appendChild(text);
body.appendChild(elem);
}
</script>
</body>
</html>
Lưu và thực thi với Chrome, kết quả:
Nếu thực thi bằng IE:
Ý kiến bài viết