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

2
00:00:00,380 --> 00:00:03,000
>> Виступаючий 1: Зараз в останньому прикладі,
Нагадаємо, що ми перемежовуються деякі

3
00:00:03,000 --> 00:00:07,170
JavaScript код всередині мого HTML,
Зокрема, внутрішня частина вартості

4
00:00:07,170 --> 00:00:10,460
атрибут закликав Надіслати
для цього тега форми.

5
00:00:10,460 --> 00:00:12,850
Тепер для невеликих сторінок, це
не така вже велика справа.

6
00:00:12,850 --> 00:00:15,950
Але, як веб-сторінка отримує більше і більше
комплекс, просто покласти ваші

7
00:00:15,950 --> 00:00:19,660
JavaScript код тут і там всередині
від вартості атрибути не

8
00:00:19,660 --> 00:00:20,830
кращий дизайн.

9
00:00:20,830 --> 00:00:23,440
Найкраще, якщо ми фактором, що, і
принаймні поставити його всередині

10
00:00:23,440 --> 00:00:25,200
тег сценарію централізовано.

11
00:00:25,200 --> 00:00:26,080
>> Як це зробити?

12
00:00:26,080 --> 00:00:30,040
Ну давайте повернемося до моєї тега форми і
спочатку видалити цей атрибут і його

13
00:00:30,040 --> 00:00:31,780
цінуєте в цілому.

14
00:00:31,780 --> 00:00:35,730
Тоді тут, а не визначити
Функція називається Вітайте, давайте триматися

15
00:00:35,730 --> 00:00:39,405
в рядку коду, що, в кінцевому рахунку ми
буде як і раніше хочете виконати і замінити

16
00:00:39,405 --> 00:00:41,560
функція наступним чином Вітайте.

17
00:00:41,560 --> 00:00:48,190
Document.get Елемент За ID
цитую Unquote демо -

18
00:00:48,190 --> 00:00:52,410
де демо, нагадаємо, є єдиним
Ідентифікатор для самої формі -

19
00:00:52,410 --> 00:00:56,600
точка на уявити, що згадати це ім'я
обробника подій, в яких

20
00:00:56,600 --> 00:00:57,710
ми зацікавлені.

21
00:00:57,710 --> 00:01:01,990
І давайте призначимо, що на представити обробник
значення, яке насправді

22
00:01:01,990 --> 00:01:03,740
функціонувати себе.

23
00:01:03,740 --> 00:01:06,390
>> Тепер зверніть увагу, що я насправді не
виклику функції тут.

24
00:01:06,390 --> 00:01:10,650
Я замість визначення анонімний,
інакше відомий як функцію лямбда,

25
00:01:10,650 --> 00:01:14,100
, Вказавши між цими фігурні дужки
купа коду, який повинен

26
00:01:14,100 --> 00:01:15,490
насправді виконані.

27
00:01:15,490 --> 00:01:18,500
Зокрема, код, який я хотів би
виконати те, що лінія, яка у мене була

28
00:01:18,500 --> 00:01:23,370
раніше, а потім давайте додамо до того, що
повернутися помилковим, так що ця форма не

29
00:01:23,370 --> 00:01:26,950
в кінцевому рахунку, представлений в кінець віддаленого веб
сервер традиційним способом.

30
00:01:26,950 --> 00:01:30,345
>> Давайте тепер зберегти цей файл, відкрити його
в браузері, і подивитися, що відбувається.

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
Давайте тепер ввести своє ім'я,
Девід, Відправити.

34
00:01:43,060 --> 00:01:46,900
І нічого не з'являється, сталося
крім Адреса моїй сторінці здається

35
00:01:46,900 --> 00:01:52,580
змінилися, ніби форма була
фактично представлений той же файл.

36
00:01:52,580 --> 00:01:53,870
>> Тепер, чому це може бути?

37
00:01:53,870 --> 00:01:55,340
Ну мені потрібно більше інформації.

38
00:01:55,340 --> 00:01:58,700
Так що давайте йти вперед і відкрити в Chrome
Інструменти розробника, так що я можу насправді

39
00:01:58,700 --> 00:02:01,440
подивитися на вікні консолі, щоб побачити
якщо я зробив щось не так.

40
00:02:01,440 --> 00:02:03,330
Я можу отримати доступ, що через
кілька способів.

41
00:02:03,330 --> 00:02:07,250
Одним з них є допомогою цього меню тут,
Потім в меню Сервіс, потім вниз до

42
00:02:07,250 --> 00:02:08,509
Інструменти розробника.

43
00:02:08,509 --> 00:02:12,890
>> І зверніть увагу, тут на вкладці Console,
є неперехваченное Помилка типу, не може

44
00:02:12,890 --> 00:02:15,390
встановити власність на уявити, рівним нулю.

45
00:02:15,390 --> 00:02:16,900
Тепер, чому це може бути?

46
00:02:16,900 --> 00:02:21,380
Ну ще в моєму вихідному коді тут, повідомлення
що на відправити, я думаю,

47
00:02:21,380 --> 00:02:25,360
властивість елемента,
унікальний ідентифікатор є демо.

48
00:02:25,360 --> 00:02:27,810
Елемент, знову ж, це просто
вузол в дереві.

49
00:02:27,810 --> 00:02:30,870
>> Виходить, що мій браузер не
думаю, що цей елемент

50
00:02:30,870 --> 00:02:32,500
або вузол існує ще.

51
00:02:32,500 --> 00:02:33,790
І справді, це не так.

52
00:02:33,790 --> 00:02:37,690
Нагадаємо, що веб-сторінка аналізується або читати
веб-браузером, зверху вниз,

53
00:02:37,690 --> 00:02:38,430
зліва направо.

54
00:02:38,430 --> 00:02:41,810
І тому, коли JavaScript код
зіткнулися, як правило, він виконується

55
00:02:41,810 --> 00:02:42,700
відразу ж.

56
00:02:42,700 --> 00:02:46,460
>> Але в даному випадку, ми навіть не отримали
ще в тій частині DOM,

57
00:02:46,460 --> 00:02:51,100
HTML, в якому, що форма з унікальним
Ідентифікатор демо був оголошений.

58
00:02:51,100 --> 00:02:54,320
І таким чином ми намагаємося виконати мій
JavaScript код до цього вузла навіть

59
00:02:54,320 --> 00:02:58,530
існує в дерево, яке, звичайно, є
проблематично, тому що тоді, безумовно,

60
00:02:58,530 --> 00:03:01,390
сам елемент буде нульовим
на той момент.

61
00:03:01,390 --> 00:03:02,390
>> Так, як виправити?

62
00:03:02,390 --> 00:03:03,810
Ну у нас є кілька рішень.

63
00:03:03,810 --> 00:03:07,200
Але давайте спробуємо найпростіших шляхом переміщення
мій тег скрипт з голови

64
00:03:07,200 --> 00:03:11,560
помітити до мого тіла, але конкретно, до
дно тіла моєї сторінки так

65
00:03:11,560 --> 00:03:14,170
що це нижче вузлів
і питання.

66
00:03:14,170 --> 00:03:19,930
Зокрема, давайте виділити і вирізати
відкритий тег і закриваючий тег для сценарію

67
00:03:19,930 --> 00:03:24,720
і положення, що весь блок коду
в нижній частині файлу тут.

68
00:03:24,720 --> 00:03:27,690
>> Тепер це не обов'язково найчистіший
дизайн, але принаймні це буде

69
00:03:27,690 --> 00:03:29,530
дотримання правильного порядку операцій.

70
00:03:29,530 --> 00:03:31,495
Давайте збережіть файл і
перезавантажити в моєму браузері.

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

72
00:03:34,620 --> 00:03:40,240
Давайте перезавантажте сторінку, повторно вхід моє ім'я,
і там, Привіт Девід повернувся.

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