1
00:00:00,000 --> 00:00:00,380

2
00:00:00,380 --> 00:00:03,000
>> SPEAKER 1: Bây giờ trong đó ví dụ cuối cùng,
nhớ lại rằng chúng ta xen kẽ một số

3
00:00:03,000 --> 00:00:07,170
Mã JavaScript bên trong HTML của tôi,
đặc biệt, bên trong giá trị của

4
00:00:07,170 --> 00:00:10,460
thuộc tính được gọi là Ngày Gửi
cho rằng thẻ form.

5
00:00:10,460 --> 00:00:12,850
Bây giờ cho các trang nhỏ, điều này
không phải là một việc lớn như vậy.

6
00:00:12,850 --> 00:00:15,950
Nhưng như là một trang web được lâu hơn và nhiều hơn nữa
phức tạp, chỉ cần đặt của bạn

7
00:00:15,950 --> 00:00:19,660
JavaScript code đã có bên trong
giá trị của các thuộc tính không phải là

8
00:00:19,660 --> 00:00:20,830
thiết kế tốt nhất.

9
00:00:20,830 --> 00:00:23,440
Tốt nhất nếu chúng ta yếu tố đó ra và
ít nhất là đặt nó bên trong

10
00:00:23,440 --> 00:00:25,200
thẻ script trực thuộc Trung ương.

11
00:00:25,200 --> 00:00:26,080
>> Làm thế nào để làm điều này?

12
00:00:26,080 --> 00:00:30,040
Vâng chúng ta hãy quay trở lại thẻ hình thức của tôi và
đầu tiên xóa thuộc tính này và nó

13
00:00:30,040 --> 00:00:31,780
giá trị hoàn toàn.

14
00:00:31,780 --> 00:00:35,730
Sau đó lên đây, chứ không phải là định nghĩa một
chức năng gọi là Greet, hãy treo

15
00:00:35,730 --> 00:00:39,405
để các dòng mã mà cuối cùng chúng tôi
vẫn muốn thực hiện và thay thế

16
00:00:39,405 --> 00:00:41,560
chức năng Greet như sau.

17
00:00:41,560 --> 00:00:48,190
Document.get tử bởi ID
trích dẫn bản demo unquote -

18
00:00:48,190 --> 00:00:52,410
nơi demo, thu hồi, là độc đáo
định danh cho các mẫu tự -

19
00:00:52,410 --> 00:00:56,600
dot trình, mà nhớ lại là tên
của xử lý sự kiện trong đó

20
00:00:56,600 --> 00:00:57,710
chúng tôi quan tâm.

21
00:00:57,710 --> 00:01:01,990
Và chúng ta hãy gán vào trình xử lý
giá trị mà thực sự là một

22
00:01:01,990 --> 00:01:03,740
hoạt động riêng của mình.

23
00:01:03,740 --> 00:01:06,390
>> Bây giờ nhận thấy rằng tôi không thực sự
gọi một chức năng ở đây.

24
00:01:06,390 --> 00:01:10,650
Tôi thay vì định nghĩa một vô danh,
nếu không được biết đến như là một hàm lambda,

25
00:01:10,650 --> 00:01:14,100
bằng cách xác định giữa các dấu ngoặc nhọn
một loạt các mã mà nên

26
00:01:14,100 --> 00:01:15,490
thực sự được thực thi.

27
00:01:15,490 --> 00:01:18,500
Cụ thể, các mã mà tôi muốn
để thực hiện là dòng mà tôi đã có

28
00:01:18,500 --> 00:01:23,370
trước, và sau đó chúng ta hãy thêm vào đó
return false để hình thức này không phải là

29
00:01:23,370 --> 00:01:26,950
cuối cùng trình kết thúc web từ xa
máy chủ theo cách truyền thống.

30
00:01:26,950 --> 00:01:30,345
>> Bây giờ hãy lưu tập tin này, mở nó lên
trong trình duyệt, và xem những gì sẽ xảy ra.

31
00:01:30,345 --> 00:01:33,050

32
00:01:33,050 --> 00:01:39,800
http://localhost/dom-1.html.

33
00:01:39,800 --> 00:01:43,060
Bây giờ hãy gõ vào tên của tôi,
David, Submit.

34
00:01:43,060 --> 00:01:46,900
Và không có gì dường như đã xảy ra
ngoại trừ URL của trang của tôi dường như

35
00:01:46,900 --> 00:01:52,580
đã thay đổi như hình thức là
thực sự đệ trình lên cùng một tập tin.

36
00:01:52,580 --> 00:01:53,870
>> Bây giờ tại sao có thể được?

37
00:01:53,870 --> 00:01:55,340
Tôi cũng cần một số thông tin.

38
00:01:55,340 --> 00:01:58,700
Vì vậy, chúng ta hãy đi trước và mở Chrome
Công cụ phát triển để tôi có thể thực sự

39
00:01:58,700 --> 00:02:01,440
nhìn vào cửa sổ giao diện điều khiển để xem
nếu tôi đã làm điều gì sai.

40
00:02:01,440 --> 00:02:03,330
Tôi có thể truy cập thông qua
một vài cách.

41
00:02:03,330 --> 00:02:07,250
Một trong số đó là thông qua trình đơn này đây,
sau đó dưới Tools, sau đó xuống

42
00:02:07,250 --> 00:02:08,509
Công cụ phát triển.

43
00:02:08,509 --> 00:02:12,890
>> Và nhận thấy đây trong tab Console,
có một lỗi uncaught loại, có thể không

44
00:02:12,890 --> 00:02:15,390
thiết lập thuộc tính trên trình null.

45
00:02:15,390 --> 00:02:16,900
Bây giờ tại sao có thể được?

46
00:02:16,900 --> 00:02:21,380
Cũng trở lại trong mã nguồn của tôi ở đây, thông báo
mà trên submit tôi nghĩ là một

47
00:02:21,380 --> 00:02:25,360
tài sản của các yếu tố có
định danh duy nhất là bản demo.

48
00:02:25,360 --> 00:02:27,810
Một yếu tố, một lần nữa, chỉ là
một nút trong một cây.

49
00:02:27,810 --> 00:02:30,870
>> Vì vậy, có vẻ như trình duyệt của tôi không
nghĩ rằng yếu tố đó

50
00:02:30,870 --> 00:02:32,500
hoặc nút tồn tại được nêu ra.

51
00:02:32,500 --> 00:02:33,790
Và quả thực, nó không.

52
00:02:33,790 --> 00:02:37,690
Nhớ lại rằng một trang web được phân tích cú pháp hoặc đọc
bởi một trình duyệt web, trên xuống dưới,

53
00:02:37,690 --> 00:02:38,430
trái sang phải.

54
00:02:38,430 --> 00:02:41,810
Và như vậy khi mã JavaScript là
gặp phải, thông thường, nó được thực hiện

55
00:02:41,810 --> 00:02:42,700
ngay lập tức.

56
00:02:42,700 --> 00:02:46,460
>> Nhưng trong trường hợp này, chúng tôi đã thậm chí không nhận được
chưa đến một phần của dom, các

57
00:02:46,460 --> 00:02:51,100
HTML, trong đó có hình thức với một độc đáo
bản demo nhận dạng đã được tuyên bố.

58
00:02:51,100 --> 00:02:54,320
Và vì vậy chúng tôi đang cố gắng để thực hiện của tôi
Mã JavaScript trước khi nút đó thậm chí

59
00:02:54,320 --> 00:02:58,530
tồn tại trong cây đó, tất nhiên, là
vấn đề bởi vì sau đó, chắc chắn,

60
00:02:58,530 --> 00:03:01,390
các yếu tố chính nó sẽ là vô giá trị
tại thời điểm đó.

61
00:03:01,390 --> 00:03:02,390
>> Vậy làm thế nào để khắc phục?

62
00:03:02,390 --> 00:03:03,810
Vâng, chúng tôi có một vài giải pháp.

63
00:03:03,810 --> 00:03:07,200
Nhưng chúng ta hãy thử đơn giản bằng cách chuyển
tag kịch bản của tôi từ đầu

64
00:03:07,200 --> 00:03:11,560
thẻ để cơ thể của tôi, nhưng cụ thể, hướng tới
dưới cùng của cơ thể trang của tôi vì vậy

65
00:03:11,560 --> 00:03:14,170
rằng đó là bên dưới các nút
và các câu hỏi.

66
00:03:14,170 --> 00:03:19,930
Cụ thể, chúng ta hãy làm nổi bật và cắt
thẻ mở và thẻ đóng cho kịch bản

67
00:03:19,930 --> 00:03:24,720
và di chuyển mà toàn bộ khối mã
để dưới cùng của các tập tin ở đây.

68
00:03:24,720 --> 00:03:27,690
>> Bây giờ điều này không nhất thiết phải là sạch
thiết kế, nhưng ít nhất nó sẽ

69
00:03:27,690 --> 00:03:29,530
thực thi đúng thứ tự của các hoạt động.

70
00:03:29,530 --> 00:03:31,495
Hãy lưu các tập tin và
tải lại trong trình duyệt của tôi.

71
00:03:31,495 --> 00:03:34,620

72
00:03:34,620 --> 00:03:40,240
Hãy tải lại trang, tái đầu vào tên của tôi,
và ở đó, Xin chào David trở lại.

73
00:03:40,240 --> 00:03:42,784