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:

Tự tham chiếu

Đố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);

Kết quả >

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:

      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);

     }

Lưu và thực thi với Chrome, kết quả:

Nếu thực thi bằng IE:

< Cốt lõi JavaScript