< Return to Video

Processing forms with events (Video Version)

  • 0:01 - 0:05
    Form (mẫu đơn điền) là công cụ để trang web của bạn gửi thông tin đến server.
  • 0:05 - 0:10
    Chúng tôi không cho các trang web trong Khan Academy tương tác với server
  • 0:10 - 0:11
    vì lí do an ninh,
  • 0:11 - 0:14
    nên chúng tôi không dạy về form ở đây.
  • 0:14 - 0:17
    Nhưng giờ bạn đang học JS để làm việc với trang web,
  • 0:17 - 0:21
    nên tôi có thể cho bạn xem cách dùng JS để xử lí element trong form
  • 0:21 - 0:23
    mà không cần gửi tới server.
  • 0:23 - 0:28
    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:28 - 0:30
    và language (ngôn ngữ) họ dùng.
  • 0:30 - 0:34
    Tôi muốn trang web này chào người dùng theo ngôn ngữ đó
  • 0:34 - 0:37
    khi click vào nút này.
  • 0:37 - 0:41
    Việc đầu tiên là lưu element của nút vào một biến,
  • 0:41 - 0:49
    ta sẽ viết document.getElementById("button").
  • 0:49 - 0:53
    Tiếp theo là định nghĩa một hàm event listener,
  • 0:53 - 0:58
    `var onButtonClick = function() {`
  • 0:58 - 1:04
    rồi ở trong này, ta sẽ hiện ra một dòng message,
  • 1:04 - 1:09
    viết là
    `document.getElementById("message")`,
  • 1:09 - 1:11
    và message đó sẽ là một 'div'.
  • 1:11 - 1:21
    có nội dung là textContent += "You clicked me! Thank you so much!".
  • 1:21 - 1:23
    Div để cám ơn.
  • 1:23 - 1:29
    Cuối cùng ta sẽ thêm một event listener cho button
  • 1:29 - 1:32
    để khi click vào thì sẽ gọi hàm kia.
  • 1:32 - 1:36
    vậy nên là `("click", onButtonClick)`.
  • 1:36 - 1:43
    Bạn hãy dừng video lại và thử xem có hoạt động đúng không.
  • 1:43 - 1:48
    Giờ ta sẽ thay đổi nội dung dòng chữ tuỳ theo nội dung trong form.
  • 1:48 - 1:53
    Ta cần lấy được dữ liệu mà người dùng nhập vào trong form kia.
  • 1:53 - 1:56
    Hãy tạo một variable cho nó,
  • 1:56 - 2:05
    viết là
    `var name = document.getElementById`,
  • 2:05 - 2:07
    và element đó có id,
  • 2:07 - 2:11
    nên ta nhập id vào đây.
  • 2:11 - 2:17
    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,
  • 2:17 - 2:23
    viết là `var greeting = "Heyaz ,"`, để chào,
  • 2:23 - 2:24
    ` + name`.
  • 2:24 - 2:30
    Okay, giờ ta có một string, kèm theo dữ liệu trong biến kia.
  • 2:30 - 2:39
    Ta sửa cái textContent này thành greeting.
  • 2:39 - 2:42
    Xem nào, có vẻ được rồi.
  • 2:42 - 2:45
    Ta nhận vào input của name, tạo một string để chào,
  • 2:45 - 2:48
    và đưa string đó vào trong div message.
  • 2:48 - 2:53
    Bạn hãy dừng video lại thử xem có được không.
  • 2:53 - 2:56
    Không được, phải không?
  • 2:56 - 3:02
    bạn có thấy "Heyaz [object Object]", hay là
  • 3:02 - 3:05
    Giả sử tên bạn không phải là 'Object'
  • 3:05 - 3:08
    - nếu tên bạn thế thì cũng không sao cả -
  • 3:08 - 3:11
    thì tức là chương trình có lỗi rồi.
  • 3:11 - 3:14
    Ta muốn hiện ra đúng cái tên ta nhập vào cơ mà,
  • 3:14 - 3:16
    nhưng lại chỉ thấy chữ "object".
  • 3:16 - 3:21
    Thế tức là cái biến 'name' đang trỏ tới một object (đối tượng),
  • 3:21 - 3:24
    chữ không phải trỏ tới string của tên.
  • 3:24 - 3:27
    Có khi tự bạn cũng đã thấy được nguyên do lỗi này rồi.
  • 3:27 - 3:32
    Ta gán cả đối tượng element vào biến 'name,'
  • 3:32 - 3:35
    mà đối tượng element đó thì lại là một đối tượng to,
  • 3:35 - 3:37
    có nhiều thông tin về element ở trong:
  • 3:37 - 3:40
    có các thuộc tính, các hàm.
  • 3:40 - 3:43
    Để 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
  • 3:43 - 3:46
    trong element: là 'value'.
  • 3:46 - 3:52
    Tôi sẽ gõ thêm '.value' vào, thế là sửa được rồi.
  • 3:52 - 3:56
    Bạn hãy dừng video lại mà thử xem.
  • 3:56 - 3:58
    Được rồi đúng không?
  • 3:58 - 4:02
    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.
  • 4:02 - 4:05
    Tôi sẽ cho bạn xem một lỗi thường gặp nữa.
  • 4:05 - 4:14
    Tôi kéo dòng này ra ngoài hàm.
  • 4:14 - 4:23
    Bạn dừng video lại mà thử xem,
  • 4:23 - 4:26
    bạn sẽ thấy
  • 4:26 - 4:28
    một string rỗng ở chỗ tên.
  • 4:28 - 4:30
    Bạn có biết tại sao không?
  • 4:30 - 4:34
    Lí do nằm ở trong thứ tự các dòng code được chạy.
  • 4:34 - 4:37
    Trong code này, trình duyệt hiện trang web lên,
  • 4:37 - 4:40
    chạy các code JS từng dòng một.
  • 4:40 - 4:43
    Đầu tiên, gán button vào một biến.
  • 4:43 - 4:47
    Sau đó, lưu giá trị của input vào một biến nữa.
  • 4:47 - 4:50
    Giá trị này được lưu vào lúc trang web hiện ra,
  • 4:50 - 4:52
    tức là chưa có giá trị gì cả.
  • 4:52 - 4:56
    Sau đó mới định nghĩa hàm và event listener.
  • 4:56 - 5:00
    Khi gọi hàm listener, cái 'name' vẫn mang giá trị của string
  • 5:00 - 5:03
    khi trang web hiện lên,
  • 5:03 - 5:06
    chứ listener không biết được giá trị sau khi người dùng nhập vào là gì.
  • 5:06 - 5:09
    Đấy là lí do dòng code này
  • 5:09 - 5:13
    phải đặt ở trong hàm event listener,
  • 5:13 - 5:19
    thì nó mới biết được giá trị của input khi event xảy ra.
  • 5:19 - 5:22
    Ta sẽ thêm code nữa để lấy giá trị của 'language',
  • 5:22 - 5:24
    để bạn hiểu rõ hơn.
  • 5:24 - 5:30
    Ở trong listener, tôi sẽ lưu giá trị của 'language' trong một biến 'lang'.
  • 5:32 - 5:35
    Vào lề xấu quá.
    Ugh, look at this indenting,
  • 5:35 - 5:37
    Sắp đặt lại các hàng này nào...
  • 5:37 - 5:39
    Okay...
  • 5:39 - 5:41
    [gõ]
  • 5:47 - 5:51
    bạn thấy rằng tôi đang đặt tên biến ở đây giống như tên id ở trên,
  • 5:51 - 5:55
    đấy là tôi thích thế, còn bạn đặt tên thế nào cũng được.
  • 5:55 - 6:00
    Giờ tôi sẽ hiện ra một message khác tuỳ theo language mà người dùng chọn.
  • 6:00 - 6:04
    Để ý rằng 'value' không phải là dòng chữ hiện ra ở trong menu drop-down,
  • 6:04 - 6:07
    mà là thuộc tính value ở trong HTML.
  • 6:07 - 6:11
    Vậy nên 'lang' sẽ có thể có các giá trị là "en", "es", hoặc là "plt".
  • 6:11 - 6:17
    Thế nên
  • 6:17 - 6:24
    thì câu chào sẽ là "Hola, ".
  • 6:24 - 6:27
    Ta sẽ tạo biến greeting ở đây.
  • 6:27 - 6:35
    Đặt 'greeting' là "Hola ," cộng thêm tên.
  • 6:35 - 6:41
    Còn nếu lang là "plt", tức là Pig Latin,
  • 6:41 - 6:49
    thì câu chào sẽ là "Ello-hay, " cộng thêm tên,
  • 6:49 - 6:53
    rồi thêm dòng 'else' cho tiếng Anh.
  • 6:53 - 6:55
    Ta chuyển cái này vào đây.
  • 6:55 - 6:57
    Được rồi.
  • 6:57 - 7:00
    Nếu bạn muốn tự thách đố mình thì
  • 7:00 - 7:04
    hãy thử đổi cả tên ra tiếng Pig Latin nữa,
  • 7:04 - 7:08
    Để toàn bộ câu chào đều là Pig Latin.
  • 7:08 - 7:10
    Thế là chuẩn luôn.
  • 7:10 - 7:13
    Giờ hãy dừng video lại, nhập tên bạn vào,
  • 7:13 - 7:19
    chọn một ngôn ngữ khác mà thử xem.
  • 7:19 - 7:20
    Hay không?
  • 7:20 - 7:25
    Có rất nhiều thứ để làm với form input với JS,
  • 7:25 - 7:27
    word game, number game, viết truyện,...
  • 7:27 - 7:30
    Và nếu bạn có sử dụng server ngoài Khan Academy,
  • 7:30 - 7:33
    bạn có thể dùng JS để xử lí input trong form
  • 7:33 - 7:35
    trước khi gửi tới server.
  • 7:35 - 7:39
    Còn có nhiều event khác trong form để listen nữa,
  • 7:39 - 7:41
    ví dụ như là 'keypress' hay 'focus'.
  • 7:41 - 7:44
    Bạn hãy nhớ để ý đọc 'value' của input,
  • 7:44 - 7:47
    và đọc value đó sau lúc event xảy ra.
  • 7:47 - 7:50
    Bạn sẽ được thực hành ngay trong bài sau,
Title:
Processing forms with events (Video Version)
Description:

more » « less
Video Language:
English
Duration:
07:54

Vietnamese subtitles

Incomplete

Revisions