[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.55,0:00:05.45,Default,,0000,0000,0000,,Form (mẫu đơn điền) là công cụ để trang web của bạn gửi thông tin đến server.
Dialogue: 0,0:00:05.45,0:00:09.95,Default,,0000,0000,0000,,Chúng tôi không cho các trang web trong Khan Academy tương tác với server 
Dialogue: 0,0:00:09.95,0:00:11.44,Default,,0000,0000,0000,,vì lí do an ninh,
Dialogue: 0,0:00:11.44,0:00:13.65,Default,,0000,0000,0000,,nên chúng tôi không dạy về form ở đây.
Dialogue: 0,0:00:13.65,0:00:16.100,Default,,0000,0000,0000,,Nhưng giờ bạn đang học JS để làm việc với trang web,
Dialogue: 0,0:00:16.100,0:00:20.55,Default,,0000,0000,0000,,nên tôi có thể cho bạn xem cách dùng JS để xử lí element trong form
Dialogue: 0,0:00:20.55,0:00:23.07,Default,,0000,0000,0000,,mà không cần gửi tới server.
Dialogue: 0,0:00:23.07,0:00:28.10,Default,,0000,0000,0000,,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,
Dialogue: 0,0:00:28.10,0:00:30.04,Default,,0000,0000,0000,,và language (ngôn ngữ) họ dùng.
Dialogue: 0,0:00:30.04,0:00:34.03,Default,,0000,0000,0000,,Tôi muốn trang web này chào người dùng theo ngôn ngữ đó
Dialogue: 0,0:00:34.03,0:00:36.67,Default,,0000,0000,0000,,khi click vào nút này.
Dialogue: 0,0:00:36.67,0:00:41.46,Default,,0000,0000,0000,,Việc đầu tiên là lưu element của nút vào một biến,
Dialogue: 0,0:00:41.46,0:00:49.31,Default,,0000,0000,0000,,ta sẽ viết document.getElementById("button").
Dialogue: 0,0:00:49.31,0:00:53.19,Default,,0000,0000,0000,,Tiếp theo là định nghĩa một hàm event listener,
Dialogue: 0,0:00:53.19,0:00:57.88,Default,,0000,0000,0000,,`var onButtonClick = function() {`
Dialogue: 0,0:00:57.88,0:01:03.77,Default,,0000,0000,0000,,rồi ở trong này, ta sẽ hiện ra một dòng message,
Dialogue: 0,0:01:03.77,0:01:08.73,Default,,0000,0000,0000,,viết là\N`document.getElementById("message")`,
Dialogue: 0,0:01:08.73,0:01:10.71,Default,,0000,0000,0000,,và message đó sẽ là một 'div'.
Dialogue: 0,0:01:10.71,0:01:20.71,Default,,0000,0000,0000,,có nội dung là textContent += "You clicked me! Thank you so much!".
Dialogue: 0,0:01:20.71,0:01:23.16,Default,,0000,0000,0000,,Div để cám ơn.
Dialogue: 0,0:01:23.16,0:01:28.80,Default,,0000,0000,0000,,Cuối cùng ta sẽ thêm một event listener cho button
Dialogue: 0,0:01:28.80,0:01:31.71,Default,,0000,0000,0000,,để khi click vào thì sẽ gọi hàm kia.
Dialogue: 0,0:01:31.71,0:01:36.49,Default,,0000,0000,0000,,vậy nên là `("click", onButtonClick)`.
Dialogue: 0,0:01:36.49,0:01:42.96,Default,,0000,0000,0000,,Bạn hãy dừng video lại và thử xem có hoạt động đúng không.
Dialogue: 0,0:01:42.96,0:01:47.97,Default,,0000,0000,0000,,Giờ ta sẽ thay đổi nội dung dòng chữ tuỳ theo nội dung trong form.
Dialogue: 0,0:01:47.97,0:01:52.85,Default,,0000,0000,0000,,Ta cần lấy được dữ liệu mà người dùng nhập vào trong form kia.
Dialogue: 0,0:01:52.85,0:01:55.83,Default,,0000,0000,0000,,Hãy tạo một variable cho nó,
Dialogue: 0,0:01:55.83,0:02:04.77,Default,,0000,0000,0000,,viết là\N`var name = document.getElementById`,
Dialogue: 0,0:02:04.77,0:02:07.34,Default,,0000,0000,0000,,và element đó có id, 
Dialogue: 0,0:02:07.34,0:02:11.32,Default,,0000,0000,0000,,nên ta nhập id vào đây.
Dialogue: 0,0:02:11.32,0:02:17.12,Default,,0000,0000,0000,,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,
Dialogue: 0,0:02:17.12,0:02:22.72,Default,,0000,0000,0000,,viết là `var greeting = "Heyaz ,"`, để chào,
Dialogue: 0,0:02:22.72,0:02:24.20,Default,,0000,0000,0000,,` + name`.
Dialogue: 0,0:02:24.20,0:02:30.35,Default,,0000,0000,0000,,Okay, giờ ta có một string, kèm theo dữ liệu trong biến kia.
Dialogue: 0,0:02:30.35,0:02:38.77,Default,,0000,0000,0000,,Ta sửa cái textContent này thành greeting.
Dialogue: 0,0:02:38.77,0:02:41.69,Default,,0000,0000,0000,,Xem nào, có vẻ được rồi.
Dialogue: 0,0:02:41.69,0:02:44.90,Default,,0000,0000,0000,,Ta nhận vào input của name, tạo một string để chào,
Dialogue: 0,0:02:44.90,0:02:47.73,Default,,0000,0000,0000,,và đưa string đó vào trong div message.
Dialogue: 0,0:02:47.73,0:02:53.03,Default,,0000,0000,0000,,Bạn hãy dừng video lại thử xem có được không.
Dialogue: 0,0:02:53.03,0:02:55.63,Default,,0000,0000,0000,,Không được, phải không?
Dialogue: 0,0:02:55.63,0:03:01.88,Default,,0000,0000,0000,,bạn có thấy "Heyaz [object Object]", hay là
Dialogue: 0,0:03:01.88,0:03:04.76,Default,,0000,0000,0000,,Giả sử tên bạn không phải là 'Object'
Dialogue: 0,0:03:04.76,0:03:08.07,Default,,0000,0000,0000,,- nếu tên bạn thế thì cũng không sao cả -
Dialogue: 0,0:03:08.07,0:03:10.51,Default,,0000,0000,0000,,thì tức là chương trình có lỗi rồi.
Dialogue: 0,0:03:10.51,0:03:13.70,Default,,0000,0000,0000,,Ta muốn hiện ra đúng cái tên ta nhập vào cơ mà,
Dialogue: 0,0:03:13.70,0:03:16.48,Default,,0000,0000,0000,,nhưng lại chỉ thấy chữ "object".
Dialogue: 0,0:03:16.48,0:03:20.68,Default,,0000,0000,0000,,Thế tức là cái biến 'name' đang trỏ tới một object (đối tượng),
Dialogue: 0,0:03:20.68,0:03:23.58,Default,,0000,0000,0000,,chữ không phải trỏ tới string của tên.
Dialogue: 0,0:03:23.58,0:03:26.65,Default,,0000,0000,0000,,Có khi tự bạn cũng đã thấy được nguyên do lỗi này rồi.
Dialogue: 0,0:03:26.65,0:03:31.88,Default,,0000,0000,0000,,Ta gán cả đối tượng element vào biến 'name,'
Dialogue: 0,0:03:31.88,0:03:34.99,Default,,0000,0000,0000,,mà đối tượng element đó thì lại là một đối tượng to,
Dialogue: 0,0:03:34.99,0:03:37.10,Default,,0000,0000,0000,,có nhiều thông tin về element ở trong:
Dialogue: 0,0:03:37.10,0:03:39.53,Default,,0000,0000,0000,,có các thuộc tính, các hàm.
Dialogue: 0,0:03:39.53,0:03:43.47,Default,,0000,0000,0000,,Để 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
Dialogue: 0,0:03:43.47,0:03:46.21,Default,,0000,0000,0000,,trong element: là 'value'.
Dialogue: 0,0:03:46.21,0:03:51.92,Default,,0000,0000,0000,,Tôi sẽ gõ thêm '.value' vào, thế là sửa được rồi.
Dialogue: 0,0:03:51.92,0:03:56.18,Default,,0000,0000,0000,,Bạn hãy dừng video lại mà thử xem.
Dialogue: 0,0:03:56.18,0:03:57.98,Default,,0000,0000,0000,,Được rồi đúng không?
Dialogue: 0,0:03:57.98,0:04:01.91,Default,,0000,0000,0000,,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.
Dialogue: 0,0:04:01.91,0:04:05.01,Default,,0000,0000,0000,,Tôi sẽ cho bạn xem một lỗi thường gặp nữa.
Dialogue: 0,0:04:05.01,0:04:13.96,Default,,0000,0000,0000,,Tôi kéo dòng này ra ngoài hàm.
Dialogue: 0,0:04:13.96,0:04:22.74,Default,,0000,0000,0000,,Bạn dừng video lại mà thử xem,
Dialogue: 0,0:04:22.74,0:04:25.100,Default,,0000,0000,0000,,bạn sẽ thấy
Dialogue: 0,0:04:25.100,0:04:28.05,Default,,0000,0000,0000,,một string rỗng ở chỗ tên.
Dialogue: 0,0:04:28.05,0:04:29.69,Default,,0000,0000,0000,,Bạn có biết tại sao không?
Dialogue: 0,0:04:29.69,0:04:33.94,Default,,0000,0000,0000,,Lí do nằm ở trong thứ tự các dòng code được chạy.
Dialogue: 0,0:04:33.94,0:04:37.10,Default,,0000,0000,0000,,Trong code này, trình duyệt hiện trang web lên,
Dialogue: 0,0:04:37.10,0:04:39.77,Default,,0000,0000,0000,,chạy các code JS từng dòng một.
Dialogue: 0,0:04:39.77,0:04:42.93,Default,,0000,0000,0000,,Đầu tiên, gán button vào một biến.
Dialogue: 0,0:04:42.93,0:04:46.82,Default,,0000,0000,0000,,Sau đó, lưu giá trị của input vào một biến nữa.
Dialogue: 0,0:04:46.82,0:04:50.46,Default,,0000,0000,0000,,Giá trị này được lưu vào lúc trang web hiện ra,
Dialogue: 0,0:04:50.46,0:04:52.46,Default,,0000,0000,0000,,tức là chưa có giá trị gì cả.
Dialogue: 0,0:04:52.46,0:04:56.32,Default,,0000,0000,0000,,Sau đó mới định nghĩa hàm và event listener.
Dialogue: 0,0:04:56.32,0:05:00.42,Default,,0000,0000,0000,,Khi gọi hàm listener, cái 'name' vẫn mang giá trị của string
Dialogue: 0,0:05:00.42,0:05:02.88,Default,,0000,0000,0000,,khi trang web hiện lên,
Dialogue: 0,0:05:02.88,0:05:06.20,Default,,0000,0000,0000,,chứ listener không biết được giá trị sau khi người dùng nhập vào là gì.
Dialogue: 0,0:05:06.20,0:05:08.53,Default,,0000,0000,0000,,Đấy là lí do dòng code này
Dialogue: 0,0:05:08.53,0:05:13.19,Default,,0000,0000,0000,,phải đặt ở trong hàm event listener,
Dialogue: 0,0:05:13.19,0:05:18.76,Default,,0000,0000,0000,,thì nó mới biết được giá trị của input khi event xảy ra.
Dialogue: 0,0:05:18.76,0:05:21.94,Default,,0000,0000,0000,,Ta sẽ thêm code nữa để lấy giá trị của 'language',
Dialogue: 0,0:05:21.94,0:05:24.41,Default,,0000,0000,0000,,để bạn hiểu rõ hơn.
Dialogue: 0,0:05:24.41,0:05:29.60,Default,,0000,0000,0000,,Ở trong listener, tôi sẽ lưu giá trị của 'language' trong một biến 'lang'.
Dialogue: 0,0:05:31.77,0:05:34.55,Default,,0000,0000,0000,,Vào lề xấu quá.\NUgh, look at this indenting,
Dialogue: 0,0:05:34.55,0:05:36.89,Default,,0000,0000,0000,,Sắp đặt lại các hàng này nào...
Dialogue: 0,0:05:36.89,0:05:38.84,Default,,0000,0000,0000,,Okay...
Dialogue: 0,0:05:38.84,0:05:41.45,Default,,0000,0000,0000,,[gõ]
Dialogue: 0,0:05:46.77,0:05:51.23,Default,,0000,0000,0000,,bạn thấy rằng tôi đang đặt tên biến ở đây giống như tên id ở trên,
Dialogue: 0,0:05:51.23,0:05:55.29,Default,,0000,0000,0000,,đấy là tôi thích thế, còn bạn đặt tên thế nào cũng được.
Dialogue: 0,0:05:55.29,0:05:59.79,Default,,0000,0000,0000,,Giờ tôi sẽ hiện ra một message khác tuỳ theo language mà người dùng chọn.
Dialogue: 0,0:05:59.79,0:06:03.63,Default,,0000,0000,0000,,Để ý rằng 'value' không phải là dòng chữ hiện ra ở trong menu drop-down,
Dialogue: 0,0:06:03.63,0:06:06.88,Default,,0000,0000,0000,,mà là thuộc tính value ở trong HTML.
Dialogue: 0,0:06:06.88,0:06:11.25,Default,,0000,0000,0000,,Vậy nên 'lang' sẽ có thể có các giá trị là "en", "es", hoặc là "plt".
Dialogue: 0,0:06:11.25,0:06:17.21,Default,,0000,0000,0000,,Thế nên
Dialogue: 0,0:06:17.21,0:06:23.68,Default,,0000,0000,0000,,thì câu chào sẽ là "Hola, ".
Dialogue: 0,0:06:23.68,0:06:26.81,Default,,0000,0000,0000,,Ta sẽ tạo biến greeting ở đây.
Dialogue: 0,0:06:26.81,0:06:35.10,Default,,0000,0000,0000,,Đặt 'greeting' là "Hola ," cộng thêm tên.
Dialogue: 0,0:06:35.10,0:06:41.22,Default,,0000,0000,0000,,Còn nếu lang là "plt", tức là Pig Latin,
Dialogue: 0,0:06:41.22,0:06:48.54,Default,,0000,0000,0000,,thì câu chào sẽ là "Ello-hay, " cộng thêm tên,
Dialogue: 0,0:06:48.54,0:06:53.17,Default,,0000,0000,0000,,rồi thêm dòng 'else' cho tiếng Anh.
Dialogue: 0,0:06:53.17,0:06:55.37,Default,,0000,0000,0000,,Ta chuyển cái này vào đây.
Dialogue: 0,0:06:55.37,0:06:56.80,Default,,0000,0000,0000,,Được rồi. 
Dialogue: 0,0:06:56.80,0:07:00.37,Default,,0000,0000,0000,,Nếu bạn muốn tự thách đố mình thì
Dialogue: 0,0:07:00.37,0:07:03.84,Default,,0000,0000,0000,,hãy thử đổi cả tên ra tiếng Pig Latin nữa,
Dialogue: 0,0:07:03.84,0:07:07.68,Default,,0000,0000,0000,,Để toàn bộ câu chào đều là Pig Latin.
Dialogue: 0,0:07:07.68,0:07:10.01,Default,,0000,0000,0000,,Thế là chuẩn luôn.
Dialogue: 0,0:07:10.01,0:07:13.30,Default,,0000,0000,0000,,Giờ hãy dừng video lại, nhập tên bạn vào,
Dialogue: 0,0:07:13.30,0:07:19.10,Default,,0000,0000,0000,,chọn một ngôn ngữ khác mà thử xem.
Dialogue: 0,0:07:19.10,0:07:20.24,Default,,0000,0000,0000,,Hay không?
Dialogue: 0,0:07:20.24,0:07:24.69,Default,,0000,0000,0000,,Có rất nhiều thứ để làm với form input với JS,
Dialogue: 0,0:07:24.69,0:07:27.32,Default,,0000,0000,0000,,word game, number game, viết truyện,...
Dialogue: 0,0:07:27.32,0:07:30.03,Default,,0000,0000,0000,,Và nếu bạn có sử dụng server ngoài Khan Academy,
Dialogue: 0,0:07:30.03,0:07:33.45,Default,,0000,0000,0000,,bạn có thể dùng JS để xử lí input trong form
Dialogue: 0,0:07:33.45,0:07:35.36,Default,,0000,0000,0000,,trước khi gửi tới server.
Dialogue: 0,0:07:35.36,0:07:38.52,Default,,0000,0000,0000,,Còn có nhiều event khác trong form để listen nữa,
Dialogue: 0,0:07:38.52,0:07:40.70,Default,,0000,0000,0000,,ví dụ như là 'keypress' hay 'focus'.
Dialogue: 0,0:07:40.70,0:07:44.15,Default,,0000,0000,0000,,Bạn hãy nhớ để ý đọc 'value' của input,
Dialogue: 0,0:07:44.15,0:07:47.29,Default,,0000,0000,0000,,và đọc value đó sau lúc event xảy ra.
Dialogue: 0,0:07:47.29,0:07:50.03,Default,,0000,0000,0000,,Bạn sẽ được thực hành ngay trong bài sau,