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