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!
Leave a comment