1
00:00:00,552 --> 00:00:05,452
Form (mẫu đơn điền) là công cụ để trang web của bạn gửi thông tin đến server.

2
00:00:05,452 --> 00:00:09,953
Chúng tôi không cho các trang web trong Khan Academy tương tác với server 

3
00:00:09,953 --> 00:00:11,442
vì lí do an ninh,

4
00:00:11,442 --> 00:00:13,648
nên chúng tôi không dạy về form ở đây.

5
00:00:13,648 --> 00:00:16,997
Nhưng giờ bạn đang học JS để làm việc với trang web,

6
00:00:16,997 --> 00:00:20,550
nên tôi có thể cho bạn xem cách dùng JS để xử lí element trong form

7
00:00:20,550 --> 00:00:23,074
mà không cần gửi tới server.

8
00:00:23,074 --> 00:00:28,096
Tôi đã viết một số element trong form này đây để cho biết name (tên) của người dùng,

9
00:00:28,096 --> 00:00:30,045
và language (ngôn ngữ) họ dùng.

10
00:00:30,045 --> 00:00:34,027
Tôi muốn trang web này chào người dùng theo ngôn ngữ đó

11
00:00:34,027 --> 00:00:36,666
khi click vào nút này.

12
00:00:36,666 --> 00:00:41,457
Việc đầu tiên là lưu element của nút vào một biến,

13
00:00:41,457 --> 00:00:49,307
ta sẽ viết document.getElementById("button").

14
00:00:49,307 --> 00:00:53,192
Tiếp theo là định nghĩa một hàm event listener,

15
00:00:53,192 --> 00:00:57,885
`var onButtonClick = function() {`

16
00:00:57,885 --> 00:01:03,770
rồi ở trong này, ta sẽ hiện ra một dòng message,

17
00:01:03,770 --> 00:01:08,729
viết là
`document.getElementById("message")`,

18
00:01:08,729 --> 00:01:10,709
và message đó sẽ là một 'div'.

19
00:01:10,709 --> 00:01:20,707
có nội dung là textContent += "You clicked me! Thank you so much!".

20
00:01:20,707 --> 00:01:23,161
Div để cám ơn.

21
00:01:23,161 --> 00:01:28,796
Cuối cùng ta sẽ thêm một event listener cho button

22
00:01:28,796 --> 00:01:31,711
để khi click vào thì sẽ gọi hàm kia.

23
00:01:31,711 --> 00:01:36,491
vậy nên là `("click", onButtonClick)`.

24
00:01:36,491 --> 00:01:42,959
Bạn hãy dừng video lại và thử xem có hoạt động đúng không.

25
00:01:42,959 --> 00:01:47,971
Giờ ta sẽ thay đổi nội dung dòng chữ tuỳ theo nội dung trong form.

26
00:01:47,971 --> 00:01:52,850
Ta cần lấy được dữ liệu mà người dùng nhập vào trong form kia.

27
00:01:52,850 --> 00:01:55,834
Hãy tạo một variable cho nó,

28
00:01:55,834 --> 00:02:04,770
viết là
`var name = document.getElementById`,

29
00:02:04,770 --> 00:02:07,337
và element đó có id, 

30
00:02:07,337 --> 00:02:11,322
nên ta nhập id vào đây.

31
00:02:11,322 --> 00:02:17,115
Giờ ta tạo một string mới để chào người dùng, rồi thêm cái "name" vào sau,

32
00:02:17,115 --> 00:02:22,720
viết là `var greeting = "Heyaz ,"`, để chào,

33
00:02:22,720 --> 00:02:24,203
` + name`.

34
00:02:24,203 --> 00:02:30,351
Okay, giờ ta có một string, kèm theo dữ liệu trong biến kia.

35
00:02:30,351 --> 00:02:38,772
Ta sửa cái textContent này thành greeting.

36
00:02:38,772 --> 00:02:41,688
Xem nào, có vẻ được rồi.

37
00:02:41,688 --> 00:02:44,899
Ta nhận vào input của name, tạo một string để chào,

38
00:02:44,899 --> 00:02:47,732
và đưa string đó vào trong div message.

39
00:02:47,732 --> 00:02:53,032
Bạn hãy dừng video lại thử xem có được không.

40
00:02:53,032 --> 00:02:55,632
Không được, phải không?

41
00:02:55,632 --> 00:03:01,877
bạn có thấy "Heyaz [object Object]", hay là

42
00:03:01,877 --> 00:03:04,761
Giả sử tên bạn không phải là 'Object'

43
00:03:04,761 --> 00:03:08,073
- nếu tên bạn thế thì cũng không sao cả -

44
00:03:08,073 --> 00:03:10,508
thì tức là chương trình có lỗi rồi.

45
00:03:10,508 --> 00:03:13,704
Ta muốn hiện ra đúng cái tên ta nhập vào cơ mà,

46
00:03:13,704 --> 00:03:16,482
nhưng lại chỉ thấy chữ "object".

47
00:03:16,482 --> 00:03:20,682
Thế tức là cái biến 'name' đang trỏ tới một object (đối tượng),

48
00:03:20,682 --> 00:03:23,581
chữ không phải trỏ tới string của tên.

49
00:03:23,581 --> 00:03:26,647
Có khi tự bạn cũng đã thấy được nguyên do lỗi này rồi.

50
00:03:26,647 --> 00:03:31,885
Ta gán cả đối tượng element vào biến 'name,'

51
00:03:31,885 --> 00:03:34,987
mà đối tượng element đó thì lại là một đối tượng to,

52
00:03:34,987 --> 00:03:37,095
có nhiều thông tin về element ở trong:

53
00:03:37,095 --> 00:03:39,532
có các thuộc tính, các hàm.

54
00:03:39,532 --> 00:03:43,472
Để biết được nội dung người dùng nhập vào là gì, ta phải truy cập tới một thuộc tính riêng

55
00:03:43,472 --> 00:03:46,211
trong element: là 'value'.

56
00:03:46,211 --> 00:03:51,918
Tôi sẽ gõ thêm '.value' vào, thế là sửa được rồi.

57
00:03:51,918 --> 00:03:56,177
Bạn hãy dừng video lại mà thử xem.

58
00:03:56,177 --> 00:03:57,984
Được rồi đúng không?

59
00:03:57,984 --> 00:04:01,913
Vừa rồi là một lỗi khác thường gặp khi lập trình, bạn nên cẩn thận.

60
00:04:01,913 --> 00:04:05,007
Tôi sẽ cho bạn xem một lỗi thường gặp nữa.

61
00:04:05,007 --> 00:04:13,960
Tôi kéo dòng này ra ngoài hàm.

62
00:04:13,960 --> 00:04:22,740
Bạn dừng video lại mà thử xem,

63
00:04:22,740 --> 00:04:25,997
bạn sẽ thấy

64
00:04:25,997 --> 00:04:28,050
một string rỗng ở chỗ tên.

65
00:04:28,050 --> 00:04:29,693
Bạn có biết tại sao không?

66
00:04:29,693 --> 00:04:33,937
Lí do nằm ở trong thứ tự các dòng code được chạy.

67
00:04:33,937 --> 00:04:37,098
Trong code này, trình duyệt hiện trang web lên,

68
00:04:37,098 --> 00:04:39,770
chạy các code JS từng dòng một.

69
00:04:39,770 --> 00:04:42,928
Đầu tiên, gán button vào một biến.

70
00:04:42,928 --> 00:04:46,817
Sau đó, lưu giá trị của input vào một biến nữa.

71
00:04:46,817 --> 00:04:50,460
Giá trị này được lưu vào lúc trang web hiện ra,

72
00:04:50,460 --> 00:04:52,465
tức là chưa có giá trị gì cả.

73
00:04:52,465 --> 00:04:56,320
Sau đó mới định nghĩa hàm và event listener.

74
00:04:56,320 --> 00:05:00,421
Khi gọi hàm listener, cái 'name' vẫn mang giá trị của string

75
00:05:00,421 --> 00:05:02,877
khi trang web hiện lên,

76
00:05:02,877 --> 00:05:06,201
chứ listener không biết được giá trị sau khi người dùng nhập vào là gì.

77
00:05:06,201 --> 00:05:08,529
Đấy là lí do dòng code này

78
00:05:08,529 --> 00:05:13,190
phải đặt ở trong hàm event listener,

79
00:05:13,190 --> 00:05:18,757
thì nó mới biết được giá trị của input khi event xảy ra.

80
00:05:18,757 --> 00:05:21,938
Ta sẽ thêm code nữa để lấy giá trị của 'language',

81
00:05:21,938 --> 00:05:24,414
để bạn hiểu rõ hơn.

82
00:05:24,414 --> 00:05:29,599
Ở trong listener, tôi sẽ lưu giá trị của 'language' trong một biến 'lang'.

83
00:05:31,769 --> 00:05:34,546
Vào lề xấu quá.
Ugh, look at this indenting,

84
00:05:34,546 --> 00:05:36,891
Sắp đặt lại các hàng này nào...

85
00:05:36,891 --> 00:05:38,842
Okay...

86
00:05:38,842 --> 00:05:41,453
[gõ]

87
00:05:46,773 --> 00:05:51,234
bạn thấy rằng tôi đang đặt tên biến ở đây giống như tên id ở trên,

88
00:05:51,234 --> 00:05:55,291
đấy là tôi thích thế, còn bạn đặt tên thế nào cũng được.

89
00:05:55,291 --> 00:05:59,787
Giờ tôi sẽ hiện ra một message khác tuỳ theo language mà người dùng chọn.

90
00:05:59,787 --> 00:06:03,627
Để ý rằng 'value' không phải là dòng chữ hiện ra ở trong menu drop-down,

91
00:06:03,627 --> 00:06:06,880
mà là thuộc tính value ở trong HTML.

92
00:06:06,880 --> 00:06:11,250
Vậy nên 'lang' sẽ có thể có các giá trị là "en", "es", hoặc là "plt".

93
00:06:11,250 --> 00:06:17,212
Thế nên

94
00:06:17,212 --> 00:06:23,684
thì câu chào sẽ là "Hola, ".

95
00:06:23,684 --> 00:06:26,809
Ta sẽ tạo biến greeting ở đây.

96
00:06:26,809 --> 00:06:35,105
Đặt 'greeting' là "Hola ," cộng thêm tên.

97
00:06:35,105 --> 00:06:41,218
Còn nếu lang là "plt", tức là Pig Latin,

98
00:06:41,218 --> 00:06:48,538
thì câu chào sẽ là "Ello-hay, " cộng thêm tên,

99
00:06:48,538 --> 00:06:53,167
rồi thêm dòng 'else' cho tiếng Anh.

100
00:06:53,167 --> 00:06:55,366
Ta chuyển cái này vào đây.

101
00:06:55,366 --> 00:06:56,799
Được rồi. 

102
00:06:56,799 --> 00:07:00,374
Nếu bạn muốn tự thách đố mình thì

103
00:07:00,374 --> 00:07:03,840
hãy thử đổi cả tên ra tiếng Pig Latin nữa,

104
00:07:03,840 --> 00:07:07,678
Để toàn bộ câu chào đều là Pig Latin.

105
00:07:07,678 --> 00:07:10,009
Thế là chuẩn luôn.

106
00:07:10,009 --> 00:07:13,295
Giờ hãy dừng video lại, nhập tên bạn vào,

107
00:07:13,295 --> 00:07:19,098
chọn một ngôn ngữ khác mà thử xem.

108
00:07:19,098 --> 00:07:20,239
Hay không?

109
00:07:20,239 --> 00:07:24,691
Có rất nhiều thứ để làm với form input với JS,

110
00:07:24,691 --> 00:07:27,316
word game, number game, viết truyện,...

111
00:07:27,316 --> 00:07:30,029
Và nếu bạn có sử dụng server ngoài Khan Academy,

112
00:07:30,029 --> 00:07:33,447
bạn có thể dùng JS để xử lí input trong form

113
00:07:33,447 --> 00:07:35,361
trước khi gửi tới server.

114
00:07:35,361 --> 00:07:38,522
Còn có nhiều event khác trong form để listen nữa,

115
00:07:38,522 --> 00:07:40,701
ví dụ như là 'keypress' hay 'focus'.

116
00:07:40,701 --> 00:07:44,152
Bạn hãy nhớ để ý đọc 'value' của input,

117
00:07:44,152 --> 00:07:47,289
và đọc value đó sau lúc event xảy ra.

118
00:07:47,289 --> 00:07:50,031
Bạn sẽ được thực hành ngay trong bài sau,