Lệnh dụng màn hình trong javascript

- Đối tượng screen chứa đựng các thông tin về màn hình của người dùng.

- Với đối tượng screen, ta có thể xác định được chiều cao, chiều rộng, độ phân giải màu sắc màn hình của người dùng.

- Dưới đây là danh sách các thuộc tính của đối tượng screen.

Thuộc tínhMô tả
height Lấy chiều cao màn hình của người dùng
width Lấy chiều rộng màn hình của người dùng
availHeight Lấy chiều cao màn của người dùng (không bao gồm thanh Taskbar nằm ngang)
availWidth Lấy chiều rộng màn hình của người dùng (không bao gồm thanh Taskbar nằm dọc)
colorDepth Lấy độ phân giải màu sắc màn hình của người dùng

1) Lấy chiều cao của màn hình

- Để lấy chiều cao màn hình của người dùng, ta truy cập vào thuộc tính height của đối tượng screen.

Lấy chiều cao màn hình của người dùng

Đối với màn hình của bạn, biến x sẽ lưu trữ giá trị là:

2) Lấy chiều rộng của màn hình

- Để lấy chiều rộng màn hình của người dùng, ta truy cập vào thuộc tính width của đối tượng screen.

Lấy chiều rộng màn của người dùng

Đối với màn hình của bạn, biến x sẽ lưu trữ giá trị là:

3) Lấy chiều cao của màn hình (không gồm Taskbar)

- Để lấy chiều cao màn hình (không bao gồm thanh Taskbar nằm ngang) của người dùng, ta truy cập vào thuộc tính availHeight của đối tượng screen.

Lệnh dụng màn hình trong javascript

Lấy chiều cao màn hình (không bao gồm thanh Taskbar nằm ngang) của người dùng

Đối với màn hình của bạn, biến x sẽ lưu trữ giá trị là:

4) Lấy chiều rộng của màn hình (không gồm Taskbar)

- Để lấy chiều rộng màn hình (không bao gồm thanh Taskbar nằm dọc) của người dùng, ta truy cập vào thuộc tính availWidth của đối tượng screen.

Lấy chiều rộng màn hình (không bao gồm thanh Taskbar nằm dọc) của người dùng

Đối với màn hình của bạn, biến x sẽ lưu trữ giá trị là:

5) Lấy độ phân giải màu sắc

- Để lấy độ phân giải màu sắc (số bit cho một điểm ảnh) màn hình của người dùng, ta truy cập vào thuộc tính colorDepth của đối tượng screen.

Lấy độ phân giải màu sắc màn hình của người dùng

Đối với màn hình của bạn, biến x sẽ lưu trữ giá trị là:

- Trong HTML, việc hiển thị một nội dung gì đó lên màn hình thật đơn giản, ta chỉ cần gõ trực tiếp nội dung muốn hiển thị là xong (Xem ví dụ)

- Còn đối với JavaScript thì không được hỗ trợ hiển thị dữ liệu trực tiếp giống như trong HTML, mà phải thông qua một phương thức (Xem ví dụ)

- Dưới đây là ba cách cơ bản dùng để hiển thị nội dung lên màn hình trong JavaScript:

  • Cách 1: Sử dụng alert()
  • Cách 2: Sử dụng document.write()
  • Cách 3: Sử dụng document.getElementById().innerHTML

1) Sử dụng alert()

- Khi sử dụng alert(), nội dung mà bạn muốn hiển thị sẽ được hiển thị bên trong một hộp thoại thông báo (Hãy nếu bạn chưa biết "hộp thoại thông báo" trông như thế nào)

- Cú pháp:

alert(nội dung muốn hiển thị);

Hiển thị câu "Tài liệu học Lập Trình Web" trong một hộp thoại thông báo


Xem ví dụ

2) Sử dụng document.write()

- Khi sử dụng document.write(), nội dung mà bạn muốn hiển thị sẽ được hiển thị ngay đúng vị trí mà nó được đặt trong trang web.

- Cú pháp:

document.write(nội dung muốn hiển thị);






    

Tài liệu học HTML

Tài liệu học JavaScript

Xem ví dụ

- Nếu sau khi trang web đã được tải xong mà ta lại sử dụng đến document.write() thì tất cả nội dung nằm bên trong phần tử sẽ bị thay thế bởi nội dung mà bạn muốn hiển thị.






    

Tài liệu học HTML

Tài liệu học CSS

Tài liệu học JavaScript

Tài liệu học MySQL

Tài liệu học PHP

Xem ví dụ

3) Sử dụng document.getElementById().innerHTML

- Khi sử dụng document.getElementById().innerHTML, nội dung mà bạn muốn hiển thị sẽ được hiển thị bên trong một phần tử xác định.

- Cú pháp:

document.getElementById("id của phần tử").innerHTML = nội dung muốn hiển thị;

Hiển thị dòng chữ "Tài liệu học CSS" bên trong phần tử có id là skud


Xem ví dụ

- Lưu ý: Sau khi sử dụng document.getElementById().innerHTML, nội dung mà bạn muốn hiển thị sẽ thay thế tất cả nội dung ban đầu của phần tử.

Tất cả nội dung bên trong phần tử có id là skud sẽ bị thay thế bởi câu "Lập Trình Web"






    

Tài liệu học HTML

Tài liệu học JavaScript

Tài liệu học CSS

Xem ví dụ

4) Một vài vấn đề trong việc viết nội dung muốn hiển thị

- Nếu nội dung mà bạn muốn hiển thị là một chuỗi ký tự, thì chuỗi ký tự đó phải được đặt bên trong cặp dấu nháy kép hoặc cặp dấu nháy đơn.

- Nếu nội dung mà bạn muốn hiển thị là một số, thì số đó có thể đặt (hoặc không đặt) bên trong cặp dấu nháy kép hoặc cặp dấu nháy đơn.


Xem ví dụ

- Nếu chuỗi ký tự được đặt bên trong cặp dấu nháy kép thì chuỗi đó không được chứa ký tự là dấu nháy kép (tuy nhiên nó được phép chứa ký tự là dấu nháy đơn)

- Nếu chuỗi ký tự được đặt bên trong cặp dấu nháy đơn thì chuỗi đó không được chứa ký tự là dấu nháy đơn (tuy nhiên nó được phép chứa ký tự là dấu nháy kép)


- Ta cũng có thể dùng chuỗi để tạo các phần tử HTML.


Xem ví dụ