Một tính năng hay của JS là

tạo hình ảnh động.

Nhưng mà trước khi đụng đến cái đó, tôi muốn đảm bảo là

bạn hiểu về 1 global variable (biến toàn cục) này nữa,

biến này tồn tại trên mọi web page, gọi là window variable.

Tôi sẽ console.log biến đó và bạn cũng có thể dừng video,

vào dev tools xem trong biến đó có những gì.

Bạn thấy chưa?

Nó to thật đấy.

Có nhiều thông tin đến choáng ngợp.

Để bớt choáng thì tôi

sẽ cho bạn biết một số thuộc tính

và hàm mà bạn sẽ thường dùng đến trong biến đó.

Có window.location, tức là

thông tin về URL của trang web.

Tôi sẽ viết cái đó luôn ra trang này

để bạn đỡ phải dừng video liên tục.

Vậy là có textContent, rồi ta chỉ

"The URL of this page is " + window.location,

nhưng mà cái này là một đối tượng, nên

ta sẽ phải đi vào trong đối tượng đấy để tìm thuộc tính .href.

Thế là xong. Đây chính là URL của

trang web iframed này.

Một thuộc tính khác là window.navigator.userAgent,

tức là thông tin về trình duyệt

của dười dùng, gõ...

"The user agent is "

+ window.navigator.userAgent.

Cái string về user agent này sẽ

trông khá là lộn xộn,

vì nó không phải để cho người đọc,

và cũng khá là loạn

vì vốn người ta quen dặt nó thế.

Vậy nên khi lập trình web thì người ta sẽ dùng các thư viện có sẵn

để giải mã thông tin trong string này

xem trình duyệt và phần mềm hệ thống của người dùng là gì, đại loại thế.

Vì string này tự nó khó hiểu lắm.

Giờ đến một cái khác dễ hiểu hơn.

Có window.outerWidth và window.outerHeight.

Ví dụ, viết

"This webpage is " + window.outerWidth

ta hiện chiều rộng trước,

+ " by " + window.outerHeight.

Với tôi thì kết quả là 1280 by 715,

nhưng với bạn thì chắc sẽ là số khác,

tuỳ theo kích thước mà bạn đang xem

video này.

Giờ tôi sẽ cho bạn thấy một cái hay nữa.

Tôi sẽ xoá chữ window trong code này đi.

Và bạn thấy là code vẫn

chạy bình thường, là vì 'window' là

biến toàn cục mặc định trên trang web.

Khi trình duyệt tìm kiếm biến mà bạn muốn dùng,

nó sẽ tìm ở trong đối tượng window,

vì khi bạn tạo một biến toàn cục mới,

thì đối tượng window sẽ lưu biến đó làm thuộc tính của mình.

tức là bạn không nên tự tạo

biến có tên outerWidth hay outerHeight,

vì những biến tự tạo đó sẽ đè lên

các biến mặc định window.outerWidth và window.outerHeight.

Thường thì bạn nên không tạo biến toàn cục nào cả

vì chúng rất dễ đụng lẫn nhau

hoặc đụng vào các biến có sẵn trong window.

Để an toàn hơn, bạn cũng có thể tạo tiền tố cho các biến toàn cục,

ví dụ như trong Khan Academy, ta viết thêm KA_

lên đằng trường tất cả các biến toàn cục, để khỏi lẫn.

Vậy là xong về đối tượng window.

Tiếp theo ta sẽ học cách dùng

2 hàm trong đó để tạo hình ảnh động.