WEBVTT

00:00:01.300 --> 00:00:03.734
Một tính năng hay của JS là 

00:00:03.734 --> 00:00:07.033
tạo hình ảnh động.

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

00:00:09.330 --> 00:00:11.833
bạn hiểu về 1 global variable (biến toàn cục) này nữa,

00:00:11.833 --> 00:00:16.833
biến này tồn tại trên mọi web page, gọi là window variable.

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

00:00:21.312 --> 00:00:24.600
vào dev tools xem trong biến đó có những gì.

00:00:27.075 --> 00:00:28.234
Bạn thấy chưa?

00:00:28.234 --> 00:00:29.733
Nó to thật đấy.

00:00:29.733 --> 00:00:33.812
Có nhiều thông tin đến choáng ngợp.

00:00:33.812 --> 00:00:35.603
Để bớt choáng thì tôi

00:00:35.603 --> 00:00:37.567
sẽ cho bạn biết một số thuộc tính

00:00:37.567 --> 00:00:40.411
và hàm mà bạn sẽ thường dùng đến trong biến đó.

00:00:40.411 --> 00:00:44.133
Có window.location, tức là

00:00:44.133 --> 00:00:47.210
thông tin về URL của trang web.

00:00:48.458 --> 00:00:51.709
Tôi sẽ viết cái đó luôn ra trang này

00:00:51.709 --> 00:00:54.662
để bạn đỡ phải dừng video liên tục.

00:00:54.662 --> 00:00:57.000
Vậy là có textContent, rồi ta chỉ

00:00:57.000 --> 00:01:02.000
"The URL of this page is " + window.location,

00:01:03.460 --> 00:01:04.756
nhưng mà cái này là một đối tượng, nên

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

00:01:08.586 --> 00:01:10.766
Thế là xong. Đây chính là URL của

00:01:10.766 --> 00:01:13.525
trang web iframed này.

00:01:14.800 --> 00:01:18.201
Một thuộc tính khác là window.navigator.userAgent,

00:01:18.201 --> 00:01:21.857
tức là thông tin về trình duyệt

00:01:21.857 --> 00:01:25.551
của dười dùng, gõ... 

00:01:25.551 --> 00:01:28.136
"The user agent is "

00:01:28.136 --> 00:01:31.955
+ window.navigator.userAgent.

00:01:33.386 --> 00:01:36.138
Cái string về user agent này sẽ

00:01:36.138 --> 00:01:38.809
trông khá là lộn xộn,

00:01:38.809 --> 00:01:42.133
vì nó không phải để cho người đọc,

00:01:42.133 --> 00:01:43.683
và cũng khá là loạn

00:01:43.683 --> 00:01:46.200
vì vốn người ta quen dặt nó thế.

00:01:46.200 --> 00:01:49.333
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

00:01:49.333 --> 00:01:51.967
để giải mã thông tin trong string này

00:01:51.967 --> 00:01:55.100
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ế.

00:01:55.100 --> 00:01:57.372
Vì string này tự nó khó hiểu lắm.

00:01:59.140 --> 00:02:00.712
Giờ đến một cái khác dễ hiểu hơn.

00:02:00.728 --> 00:02:05.225
Có window.outerWidth và window.outerHeight.

00:02:05.225 --> 00:02:08.478
Ví dụ, viết 

00:02:10.199 --> 00:02:15.199
"This webpage is " + window.outerWidth

00:02:15.426 --> 00:02:17.509
ta hiện chiều rộng trước,

00:02:17.509 --> 00:02:21.130
+ " by " + window.outerHeight.

00:02:21.130 --> 00:02:24.198
Với tôi thì kết quả là 1280 by 715,

00:02:24.198 --> 00:02:25.855
nhưng với bạn thì chắc sẽ là số khác,

00:02:25.855 --> 00:02:28.973
tuỳ theo kích thước mà bạn đang xem

00:02:28.973 --> 00:02:30.822
video này.

00:02:31.900 --> 00:02:35.500
Giờ tôi sẽ cho bạn thấy một cái hay nữa.

00:02:35.500 --> 00:02:40.348
Tôi sẽ xoá chữ window trong code này đi.

00:02:41.533 --> 00:02:45.333
Và bạn thấy là code vẫn

00:02:45.333 --> 00:02:49.927
chạy bình thường, là vì 'window' là

00:02:49.927 --> 00:02:52.902
biến toàn cục mặc định trên trang web.

00:02:52.902 --> 00:02:56.435
Khi trình duyệt tìm kiếm biến mà bạn muốn dùng,

00:02:56.435 --> 00:03:00.098
nó sẽ tìm ở trong đối tượng window,

00:03:00.098 --> 00:03:03.174
vì khi bạn tạo một biến toàn cục mới,

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

00:03:07.833 --> 00:03:09.935
tức là bạn không nên tự tạo 

00:03:09.935 --> 00:03:13.200
biến có tên outerWidth hay outerHeight,

00:03:13.200 --> 00:03:14.974
vì những biến tự tạo đó sẽ đè lên

00:03:14.974 --> 00:03:18.100
các biến mặc định window.outerWidth và window.outerHeight.

00:03:18.100 --> 00:03:20.603
Thường thì bạn nên không tạo biến toàn cục nào cả

00:03:20.603 --> 00:03:23.474
vì chúng rất dễ đụng lẫn nhau

00:03:23.474 --> 00:03:27.502
hoặc đụng vào các biến có sẵn trong window.

00:03:27.502 --> 00:03:31.638
Để 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,

00:03:31.638 --> 00:03:35.833
ví dụ như trong Khan Academy, ta viết thêm KA_

00:03:35.833 --> 00:03:38.622
lên đằng trường tất cả các biến toàn cục, để khỏi lẫn.

00:03:40.003 --> 00:03:42.133
Vậy là xong về đối tượng window.

00:03:42.133 --> 00:03:44.187
Tiếp theo ta sẽ học cách dùng 

00:03:44.187 --> 00:00:00.000
2 hàm trong đó để tạo hình ảnh động.