Table of contents
Open Table of contents
1. Window Properties (Thuộc tính)
Các thuộc tính này cho phép bạn lấy thông tin về kích thước và trạng thái của cửa sổ:
innerWidth/innerHeight: Kích thước vùng hiển thị nội dung (Viewport).outerWidth/outerHeight: Kích thước toàn bộ cửa sổ trình duyệt (Bao gồm cả thanh công cụ, viền…).localStorage/sessionStorage: Truy cập bộ nhớ trình duyệt.location: Truy cập đối tượng Location (Xử lý URL).history: Truy cập lịch sử duyệt web.
2. Window Methods (Phương thức)
- Cửa sổ giao tiếp:
alert(): Hiển thị thông báo.confirm(): Hiển thị hộp thoại xác nhận (OK/Cancel).prompt(): Hiển thị hộp thoại nhập dữ liệu.
- Điều khiển cửa sổ:
open(): Mở một tab hoặc cửa sổ mới.close(): Đóng cửa sổ hiện tại.moveTo()/resizeTo(): Di chuyển hoặc thay đổi kích thước cửa sổ.
- Quản lý thời gian (Timing):
setTimeout(function, ms): Chạy hàm sau một khoảng thời gian.setInterval(function, ms): Lặp lại hàm sau mỗi khoảng thời gian.clearTimeout()/clearInterval(): Dừng các bộ đếm thời gian.
3. Window Screen (Đối tượng Screen)
Dùng để lấy thông tin về màn hình của thiết bị người dùng:
screen.width/screen.height: Tổng độ phân giải màn hình.screen.availWidth/screen.availHeight: Độ phân giải khả dụng (Trừ đi thanh Taskbar/Menu bar).screen.colorDepth: Số bit màu trên màn hình.
4. Ví dụ thực tế: Cảnh báo khi người dùng rời trang
window.addEventListener("beforeunload", (event) => {
event.returnValue = "Bạn có chắc chắn muốn rời đi?";
});Lời kết Tập 7
Hiểu rõ về Window Object là bước đầu tiên để bạn điều khiển trải nghiệm người dùng trên trình duyệt. Trong Tập 8, chúng ta sẽ đi sâu vào Navigator - “Bộ não” cung cấp mọi thông tin về hệ thống và phần cứng của người dùng.
Hẹn gặp lại các bạn!