JavaScript Reference - Tập 8: Navigator & Screen - Hiểu rõ thiết bị người dùng

Table of contents

1. Window Navigator (Thông tin trình duyệt)

Đối tượng navigator chứa mọi thông tin về phần mềm duyệt web:

• onLine: Thuộc tính cực kỳ quan trọng để kiểm tra xem thiết bị của người dùng có đang kết nối Internet hay không.
• userAgent: Trả về chuỗi thông tin định danh của trình duyệt (Dùng để nhận diện Chrome, Firefox, Safari…).
• language: Trả về ngôn ngữ ưu tiên của người dùng (Ví dụ: vi-VN hoặc en-US).
• cookieEnabled: Kiểm tra xem trình duyệt có đang cho phép sử dụng Cookie hay không.
• geolocation: Cung cấp quyền truy cập vào vị trí địa lý (Kinh độ, vĩ độ).

2. Window Screen (Thông tin màn hình)

Đối tượng screen cho phép bạn đo đạc không gian hiển thị của thiết b:

• width / height: Độ phân giải gốc của màn hình.
• availWidth / availHeight: Độ phân giải thực tế mà trình duyệt có thể chiếm dụng (Sau khi trừ đi các thanh công cụ hệ thống như Taskbar trên Windows).
• colorDepth: Độ sâu màu sắc (Số bit dùng để hiển thị 1 điểm ảnh).

3. Ứng dụng thực tế: Kiểm tra kết nối mạng

Bạn có thể sử dụng navigator.onLine để thông báo cho người dùng khi họ bị mất kết nối:

window.addEventListener("offline", () => {
  alert("Bạn đã mất kết nối Internet!");
});

window.addEventListener("online", () => {
  console.log("Đã kết nối lại thành công.");
});

Lời kết Tập 8

Học cách lắng nghe phần cứng và môi trường trình duyệt giúp web của bạn trở nên thông minh và linh hoạt hơn. Trong Tập 9, chúng ta sẽ khám phá cách điều khiển luồng điều hướng với History và Location Reference.

Hẹn gặp lại các bạn!