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.