-
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.
