0:00:00.552,0: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.

0:00:05.452,0:00:09.953
Chúng tôi không cho các trang web trong Khan Academy tương tác với server

0:00:09.953,0:00:11.442
vì lí do an ninh,

0:00:11.442,0:00:13.648
nên chúng tôi không dạy về form ở đây.

0:00:13.648,0:00:16.997
Nhưng giờ bạn đang học JS để làm việc với trang web,

0:00:16.997,0:00:20.550
nên tôi có thể cho bạn xem cách dùng JS để xử lí element trong form

0:00:20.550,0:00:23.074
mà không cần gửi tới server.

0:00:23.074,0: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,

0:00:28.096,0:00:30.045
và language (ngôn ngữ) họ dùng.

0:00:30.045,0:00:34.027
Tôi muốn trang web này chào người dùng theo ngôn ngữ đó

0:00:34.027,0:00:36.666
khi click vào nút này.

0:00:36.666,0:00:41.457
Việc đầu tiên là lưu element của nút vào một biến,

0:00:41.457,0:00:49.307
ta sẽ viết document.getElementById("button").

0:00:49.307,0:00:53.192
Tiếp theo là định nghĩa một hàm event listener,

0:00:53.192,0:00:57.885
`var onButtonClick = function() {`

0:00:57.885,0:01:03.770
rồi ở trong này, ta sẽ hiện ra một dòng message,

0:01:03.770,0:01:08.729
viết là[br]`document.getElementById("message")`,

0:01:08.729,0:01:10.709
và message đó sẽ là một 'div'.

0:01:10.709,0:01:20.707
có nội dung là textContent += "You clicked me! Thank you so much!".

0:01:20.707,0:01:23.161
Div để cám ơn.

0:01:23.161,0:01:28.796
Cuối cùng ta sẽ thêm một event listener cho button

0:01:28.796,0:01:31.711
để khi click vào thì sẽ gọi hàm kia.

0:01:31.711,0:01:36.491
vậy nên là `("click", onButtonClick)`.

0:01:36.491,0:01:42.959
Bạn hãy dừng video lại và thử xem có hoạt động đúng không.

0:01:42.959,0:01:47.971
Giờ ta sẽ thay đổi nội dung dòng chữ tuỳ theo nội dung trong form.

0:01:47.971,0:01:52.850
Ta cần lấy được dữ liệu mà người dùng nhập vào trong form kia.

0:01:52.850,0:01:55.834
Hãy tạo một variable cho nó,

0:01:55.834,0:02:04.770
viết là[br]`var name = document.getElementById`,

0:02:04.770,0:02:07.337
và element đó có id,

0:02:07.337,0:02:11.322
nên ta nhập id vào đây.

0:02:11.322,0: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,

0:02:17.115,0:02:22.720
viết là `var greeting = "Heyaz ,"`, để chào,

0:02:22.720,0:02:24.203
` + name`.

0:02:24.203,0:02:30.351
Okay, giờ ta có một string, kèm theo dữ liệu trong biến kia.

0:02:30.351,0:02:38.772
Ta sửa cái textContent này thành greeting.

0:02:38.772,0:02:41.688
Xem nào, có vẻ được rồi.

0:02:41.688,0:02:44.899
Ta nhận vào input của name, tạo một string để chào,

0:02:44.899,0:02:47.732
và đưa string đó vào trong div message.

0:02:47.732,0:02:53.032
Bạn hãy dừng video lại thử xem có được không.

0:02:53.032,0:02:55.632
Không được, phải không?

0:02:55.632,0:03:01.877
bạn có thấy "Heyaz [object Object]", hay là

0:03:01.877,0:03:04.761
Giả sử tên bạn không phải là 'Object'

0:03:04.761,0:03:08.073
- nếu tên bạn thế thì cũng không sao cả -

0:03:08.073,0:03:10.508
thì tức là chương trình có lỗi rồi.

0:03:10.508,0:03:13.704
Ta muốn hiện ra đúng cái tên ta nhập vào cơ mà,

0:03:13.704,0:03:16.482
nhưng lại chỉ thấy chữ "object".

0:03:16.482,0:03:20.682
Thế tức là cái biến 'name' đang trỏ tới một object (đối tượng),

0:03:20.682,0:03:23.581
chữ không phải trỏ tới string của tên.

0:03:23.581,0:03:26.647
Có khi tự bạn cũng đã thấy được nguyên do lỗi này rồi.

0:03:26.647,0:03:31.885
Ta gán cả đối tượng element vào biến 'name,'

0:03:31.885,0:03:34.987
mà đối tượng element đó thì lại là một đối tượng to,

0:03:34.987,0:03:37.095
có nhiều thông tin về element ở trong:

0:03:37.095,0:03:39.532
có các thuộc tính, các hàm.

0:03:39.532,0: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

0:03:43.472,0:03:46.211
trong element: là 'value'.

0:03:46.211,0:03:51.918
Tôi sẽ gõ thêm '.value' vào, thế là sửa được rồi.

0:03:51.918,0:03:56.177
Bạn hãy dừng video lại mà thử xem.

0:03:56.177,0:03:57.984
Được rồi đúng không?

0:03:57.984,0: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.

0:04:01.913,0:04:05.007
Tôi sẽ cho bạn xem một lỗi thường gặp nữa.

0:04:05.007,0:04:13.960
Tôi kéo dòng này ra ngoài hàm.

0:04:13.960,0:04:22.740
Bạn dừng video lại mà thử xem,

0:04:22.740,0:04:25.997
bạn sẽ thấy

0:04:25.997,0:04:28.050
một string rỗng ở chỗ tên.

0:04:28.050,0:04:29.693
Bạn có biết tại sao không?

0:04:29.693,0:04:33.937
Lí do nằm ở trong thứ tự các dòng code được chạy.

0:04:33.937,0:04:37.098
Trong code này, trình duyệt hiện trang web lên,

0:04:37.098,0:04:39.770
chạy các code JS từng dòng một.

0:04:39.770,0:04:42.928
Đầu tiên, gán button vào một biến.

0:04:42.928,0:04:46.817
Sau đó, lưu giá trị của input vào một biến nữa.

0:04:46.817,0:04:50.460
Giá trị này được lưu vào lúc trang web hiện ra,

0:04:50.460,0:04:52.465
tức là chưa có giá trị gì cả.

0:04:52.465,0:04:56.320
Sau đó mới định nghĩa hàm và event listener.

0:04:56.320,0:05:00.421
Khi gọi hàm listener, cái 'name' vẫn mang giá trị của string

0:05:00.421,0:05:02.877
khi trang web hiện lên,

0:05:02.877,0:05:06.201
chứ listener không biết được giá trị sau khi người dùng nhập vào là gì.

0:05:06.201,0:05:08.529
Đấy là lí do dòng code này

0:05:08.529,0:05:13.190
phải đặt ở trong hàm event listener,

0:05:13.190,0:05:18.757
thì nó mới biết được giá trị của input khi event xảy ra.

0:05:18.757,0:05:21.938
Ta sẽ thêm code nữa để lấy giá trị của 'language',

0:05:21.938,0:05:24.414
để bạn hiểu rõ hơn.

0:05:24.414,0:05:29.599
Ở trong listener, tôi sẽ lưu giá trị của 'language' trong một biến 'lang'.

0:05:31.769,0:05:34.546
Vào lề xấu quá.[br]Ugh, look at this indenting,

0:05:34.546,0:05:36.891
Sắp đặt lại các hàng này nào...

0:05:36.891,0:05:38.842
Okay...

0:05:38.842,0:05:41.453
[gõ]

0:05:46.773,0: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,

0:05:51.234,0:05:55.291
đấy là tôi thích thế, còn bạn đặt tên thế nào cũng được.

0:05:55.291,0: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.

0:05:59.787,0:06:03.627
Để ý rằng 'value' không phải là dòng chữ hiện ra ở trong menu drop-down,

0:06:03.627,0:06:06.880
mà là thuộc tính value ở trong HTML.

0:06:06.880,0:06:11.250
Vậy nên 'lang' sẽ có thể có các giá trị là "en", "es", hoặc là "plt".

0:06:11.250,0:06:17.212
Thế nên

0:06:17.212,0:06:23.684
thì câu chào sẽ là "Hola, ".

0:06:23.684,0:06:26.809
Ta sẽ tạo biến greeting ở đây.

0:06:26.809,0:06:35.105
Đặt 'greeting' là "Hola ," cộng thêm tên.

0:06:35.105,0:06:41.218
Còn nếu lang là "plt", tức là Pig Latin,

0:06:41.218,0:06:48.538
thì câu chào sẽ là "Ello-hay, " cộng thêm tên,

0:06:48.538,0:06:53.167
rồi thêm dòng 'else' cho tiếng Anh.

0:06:53.167,0:06:55.366
Ta chuyển cái này vào đây.

0:06:55.366,0:06:56.799
Được rồi.

0:06:56.799,0:07:00.374
Nếu bạn muốn tự thách đố mình thì

0:07:00.374,0:07:03.840
hãy thử đổi cả tên ra tiếng Pig Latin nữa,

0:07:03.840,0:07:07.678
Để toàn bộ câu chào đều là Pig Latin.

0:07:07.678,0:07:10.009
Thế là chuẩn luôn.

0:07:10.009,0:07:13.295
Giờ hãy dừng video lại, nhập tên bạn vào,

0:07:13.295,0:07:19.098
chọn một ngôn ngữ khác mà thử xem.

0:07:19.098,0:07:20.239
Hay không?

0:07:20.239,0:07:24.691
Có rất nhiều thứ để làm với form input với JS,

0:07:24.691,0:07:27.316
word game, number game, viết truyện,...

0:07:27.316,0:07:30.029
Và nếu bạn có sử dụng server ngoài Khan Academy,

0:07:30.029,0:07:33.447
bạn có thể dùng JS để xử lí input trong form

0:07:33.447,0:07:35.361
trước khi gửi tới server.

0:07:35.361,0:07:38.522
Còn có nhiều event khác trong form để listen nữa,

0:07:38.522,0:07:40.701
ví dụ như là 'keypress' hay 'focus'.

0:07:40.701,0:07:44.152
Bạn hãy nhớ để ý đọc 'value' của input,

0:07:44.152,0:07:47.289
và đọc value đó sau lúc event xảy ra.

0:07:47.289,0:07:50.031
Bạn sẽ được thực hành ngay trong bài sau,