1
00:00:01,300 --> 00:00:03,734
Một tính năng hay của JS là 

2
00:00:03,734 --> 00:00:07,033
tạo hình ảnh động.

3
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à

4
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,

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

6
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,

7
00:00:21,312 --> 00:00:24,600
vào dev tools xem trong biến đó có những gì.

8
00:00:27,075 --> 00:00:28,234
Bạn thấy chưa?

9
00:00:28,234 --> 00:00:29,733
Nó to thật đấy.

10
00:00:29,733 --> 00:00:33,812
Có nhiều thông tin đến choáng ngợp.

11
00:00:33,812 --> 00:00:35,603
Để bớt choáng thì tôi

12
00:00:35,603 --> 00:00:37,567
sẽ cho bạn biết một số thuộc tính

13
00:00:37,567 --> 00:00:40,411
và hàm mà bạn sẽ thường dùng đến trong biến đó.

14
00:00:40,411 --> 00:00:44,133
Có window.location, tức là

15
00:00:44,133 --> 00:00:47,210
thông tin về URL của trang web.

16
00:00:48,458 --> 00:00:51,709
Tôi sẽ viết cái đó luôn ra trang này

17
00:00:51,709 --> 00:00:54,662
để bạn đỡ phải dừng video liên tục.

18
00:00:54,662 --> 00:00:57,000
Vậy là có textContent, rồi ta chỉ

19
00:00:57,000 --> 00:01:02,000
"The URL of this page is " + window.location,

20
00:01:03,460 --> 00:01:04,756
nhưng mà cái này là một đối tượng, nên

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

22
00:01:08,586 --> 00:01:10,766
Thế là xong. Đây chính là URL của

23
00:01:10,766 --> 00:01:13,525
trang web iframed này.

24
00:01:14,800 --> 00:01:18,201
Một thuộc tính khác là window.navigator.userAgent,

25
00:01:18,201 --> 00:01:21,857
tức là thông tin về trình duyệt

26
00:01:21,857 --> 00:01:25,551
của dười dùng, gõ... 

27
00:01:25,551 --> 00:01:28,136
"The user agent is "

28
00:01:28,136 --> 00:01:31,955
+ window.navigator.userAgent.

29
00:01:33,386 --> 00:01:36,138
Cái string về user agent này sẽ

30
00:01:36,138 --> 00:01:38,809
trông khá là lộn xộn,

31
00:01:38,809 --> 00:01:42,133
vì nó không phải để cho người đọc,

32
00:01:42,133 --> 00:01:43,683
và cũng khá là loạn

33
00:01:43,683 --> 00:01:46,200
vì vốn người ta quen dặt nó thế.

34
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

35
00:01:49,333 --> 00:01:51,967
để giải mã thông tin trong string này

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

37
00:01:55,100 --> 00:01:57,372
Vì string này tự nó khó hiểu lắm.

38
00:01:59,140 --> 00:02:00,712
Giờ đến một cái khác dễ hiểu hơn.

39
00:02:00,728 --> 00:02:05,225
Có window.outerWidth và window.outerHeight.

40
00:02:05,225 --> 00:02:08,478
Ví dụ, viết 

41
00:02:10,199 --> 00:02:15,199
"This webpage is " + window.outerWidth

42
00:02:15,426 --> 00:02:17,509
ta hiện chiều rộng trước,

43
00:02:17,509 --> 00:02:21,130
+ " by " + window.outerHeight.

44
00:02:21,130 --> 00:02:24,198
Với tôi thì kết quả là 1280 by 715,

45
00:02:24,198 --> 00:02:25,855
nhưng với bạn thì chắc sẽ là số khác,

46
00:02:25,855 --> 00:02:28,973
tuỳ theo kích thước mà bạn đang xem

47
00:02:28,973 --> 00:02:30,822
video này.

48
00:02:31,900 --> 00:02:35,500
Giờ tôi sẽ cho bạn thấy một cái hay nữa.

49
00:02:35,500 --> 00:02:40,348
Tôi sẽ xoá chữ window trong code này đi.

50
00:02:41,533 --> 00:02:45,333
Và bạn thấy là code vẫn

51
00:02:45,333 --> 00:02:49,927
chạy bình thường, là vì 'window' là

52
00:02:49,927 --> 00:02:52,902
biến toàn cục mặc định trên trang web.

53
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,

54
00:02:56,435 --> 00:03:00,098
nó sẽ tìm ở trong đối tượng window,

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

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

57
00:03:07,833 --> 00:03:09,935
tức là bạn không nên tự tạo 

58
00:03:09,935 --> 00:03:13,200
biến có tên outerWidth hay outerHeight,

59
00:03:13,200 --> 00:03:14,974
vì những biến tự tạo đó sẽ đè lên

60
00:03:14,974 --> 00:03:18,100
các biến mặc định window.outerWidth và window.outerHeight.

61
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ả

62
00:03:20,603 --> 00:03:23,474
vì chúng rất dễ đụng lẫn nhau

63
00:03:23,474 --> 00:03:27,502
hoặc đụng vào các biến có sẵn trong window.

64
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,

65
00:03:31,638 --> 00:03:35,833
ví dụ như trong Khan Academy, ta viết thêm KA_

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

67
00:03:40,003 --> 00:03:42,133
Vậy là xong về đối tượng window.

68
00:03:42,133 --> 00:03:44,187
Tiếp theo ta sẽ học cách dùng 

69
00:03:44,187 --> 00:00:00,000
2 hàm trong đó để tạo hình ảnh động.