Trong môi trường trình duyệt, window là đối tượng gốc (root object) của mô hình Browser Object Model (BOM). Nó đóng vai trò là đối tượng toàn cục (global object) cho mọi mã thực thi JavaScript phía client. Mỗi tab trình duyệt, cửa sổ hoặc thậm chí là một iframe đều được đại diện bởi một thực thể window riêng biệt.

Phạm vi toàn cục (Global Scope)

Mọi biến hoặc hàm được khai báo ở phạm vi toàn cục đều mặc nhiên trở thành thuộc tính hoặc phương thức của đối tượng window. Điều này cho phép chúng ta truy cập các thành phần của BOM như document, location trực tiếp hoặc thông qua tiền tố window..

// Khai báo biến toàn cục
var appTitle = "Hệ thống Quản lý";

// Khai báo hàm toàn cục
function notifyUser() {
    console.log("Thông báo từ: " + appTitle);
}

// Truy cập thông qua đối tượng window
console.log(window.appTitle); // Kết quả: "Hệ thống Quản lý"
window.notifyUser();          // Thực thi hàm notifyUser

Hệ thống đối tượng con của Window

Đối tượng window phân cấp và quản lý nhiều đối tượng con khác để tương tác với các thành phần khác nhau của trình duyệt:

• document: Đại diện cho tài liệu HTML hiện tại, cung cấp các phương thức để thao tác với DOM.
• navigator: Chứa các thông tin về trình duyệt đang sử dụng như phiên bản, tên trình duyệt, hệ điều hành.
• location: Dùng để quản lý URL của trang web hiện tại, cho phép chuyển hướng trang hoặc lấy thông tin về query string.
• history: Lưu trữ lịch sử duyệt web của cửa sổ hiện tại, hỗ trợ điều hướng quay lại hoặc đi tiếp.
• screen: Cung cấp thông số kỹ thuật về màn hình hiển thị của người dùng như độ phân giải, độ sâu màu.

Tương tác người dùng thông qua Dialogs

JavaScript cung cấp ba phương thức chính để tạo các hộp thoại tương tác cơ bản:

1. alert(message): Hiển thị một hộp thoại thông báo với nút OK.
2. confirm(message): Hiển thị hộp thoại xác nhận với hai nút OK và Cancel, trả về giá trị kiểu Boolean.
3. prompt(message, defaultValue): Hiển thị hộp thoại yêu cầu người dùng nhập liệu, trả về chuỗi văn bản hoặc null.

Quản lý và điều khiển cửa sổ

Chúng ta có thể mở hoặc đóng các cửa sổ trình duyệt mới thông qua các phương thức của window:

• window.open(url, name, features): Tạo một cửa sổ hoặc tab mới. Tham số features cho phép cấu hình kích thước, vị trí và các thanh công cụ của cửa sổ mới.
• window.close(): Đóng cửa sổ hiện tại (thường chỉ áp dụng cho các cửa sổ được mở bằng mã lệnh open()).
• window.opener: Truy cập ngược lại đối tượng window của cửa sổ đã gọi lệnh mở cửa sổ hiện tại.

// Ví dụ mở một cửa sổ con với kích thước cố định
function openSmallWindow() {
    let childWin = window.open("https://example.com", "subWindow", "width=400,height=300");
}

Làm việc với bộ định thời (Timers)

Window cung cấp các phương thức để thực thi mã nguồn dựa trên thời gian:

Điều khiển cuộn trang (Scrolling)

Để điều hướng vị trí hiển thị trên trang web, chúng ta sử dụng hai phương thức cuộn chính:

• scrollTo(x, y): Di chuyển thanh cuộn đến một tọa độ tuyệt đối cụ thể trên trang.
• scrollBy(x, y): Di chuyển thanh cuộn một khoảng cách tương đối so với vị trí hiện tại.

<div style="height: 2000px; background-color: #f4f4f4;">
    <button onclick="window.scrollTo({top: 0, behavior: 'smooth'});">Lên đầu trang</button>
    <button onclick="window.scrollBy(0, 200);">Cuộn xuống 200px</button>
</div>

Quản lý tiêu điểm (Focus Control)

Cửa sổ và các phần tử form có thể được điều khiển trạng thái tập trung thông qua focus() và blur():

• focus(): Đưa tiêu điểm vào cửa sổ hoặc phần tử.
• blur(): Loại bỏ tiêu điểm khỏi cửa sổ hoặc phần tử hiện tại.

<div>
    <input type="text" id="usernameField" placeholder="Nhập tên đăng nhập">
    <button onclick="document.getElementById('usernameField').focus()">Nhập liệu ngay</button>
    <button onclick="document.getElementById('usernameField').blur()">Bỏ chọn</button>
</div>