>> Выступающий 1: Сейчас в последнем примере, Напомним, что мы перемежаются некоторые
JavaScript код внутри моего HTML, В частности, внутренняя часть стоимости
атрибут призвал Отправить для этого тега формы.
Теперь для небольших страниц, это не такое уж большое дело.
Но, как веб-страница получает больше и больше комплекс, просто положить ваши
JavaScript код здесь и там внутри от стоимости атрибутов не
лучший дизайн.
Лучше всего, если мы фактором, что, и по крайней мере поставить его внутри
тег сценария централизованно.
>> Как это сделать?
Ну давайте вернемся к моей тега формы и сначала удалить этот атрибут и его
цените в целом.
Тогда здесь, а не определить Функция называется Приветствуйте, давайте держаться
в строке кода, что, в конечном счете мы будет по-прежнему хотите выполнить и заменить
функция следующим образом Приветствуйте.
Document.get Элемент По ID цитирую Unquote демо -
где демо, напомним, является единственным Идентификатор для самой форме -
точка на представить, что вспомнить это имя обработчика событий, в которых
мы заинтересованы.
И давайте назначим, что на представить обработчик значение, которое на самом деле
функционировать себя.
>> Теперь обратите внимание, что я на самом деле не вызове функции здесь.
Я вместо определения анонимный, иначе известный как функцию лямбда,
, указав между этими фигурные скобки куча кода, который должен
на самом деле выполнены.
В частности, код, который я хотел бы выполнить то, что линия, которая у меня была
раньше, а затем давайте добавим к тому, что вернуться ложным, так что эта форма не
в конечном счете, представлен в конец удаленного веб сервер традиционным способом.
>> Давайте теперь сохранить этот файл, открыть его в браузере, и посмотреть, что происходит.
http://localhost/dom-1.html.
Давайте теперь ввести свое имя, Дэвид, Отправить.
И ничего не появляется, произошло кроме Адрес моей странице кажется
изменились, как будто форма была фактически представлен тот же файл.
>> Теперь, почему это может быть?
Ну мне нужно больше информации.
Так что давайте идти вперед и открыть в Chrome Инструменты разработчика, так что я могу на самом деле
посмотреть на окне консоли, чтобы увидеть если я сделал что-то не так.
Я могу получить доступ, что через несколько способов.
Одним из них является помощью этого меню здесь, Затем в меню Сервис, затем вниз к
Инструменты разработчика.
>> И обратите внимание, здесь на вкладке Console, есть неперехваченное Ошибка типа, не может
установить собственность на представить, равным нулю.
Теперь, почему это может быть?
Ну еще в моем исходном коде здесь, уведомление что на отправить, я думаю,
свойство элемента, уникальный идентификатор является демо.
Элемент, опять же, это просто узел в дереве.
>> Получается, что мой браузер не думаю, что этот элемент
или узел существует еще.
И в самом деле, это не так.
Напомним, что веб-страница анализируется или читать веб-браузером, сверху вниз,
слева направо.
И поэтому, когда JavaScript код столкнулись, как правило, он выполняется
сразу же.
>> Но в данном случае, мы даже не получили еще в той части DOM,
HTML, в котором, что форма с уникальным Идентификатор демо был объявлен.
И таким образом мы пытаемся выполнить мой JavaScript код до этого узла даже
существует в дерево, которое, конечно, является проблематично, потому что тогда, безусловно,
сам элемент будет нулевым на тот момент.
>> Так, как исправить?
Ну у нас есть несколько решений.
Но давайте попробуем простейших путем перемещения мой тег скрипт из головы
пометить к моему телу, но конкретно, к дно тела моей страницы так
что это ниже узлов и вопросы.
В частности, давайте выделить и вырезать открытый тег и закрывающий тег для сценария
и положение, что весь блок кода в нижней части файла здесь.
>> Теперь это не обязательно самый чистый дизайн, но по крайней мере это будет
соблюдение правильного порядка операций.
Давайте сохраните файл и перезагрузить в моем браузере.
Давайте перезагрузите страницу, повторно вход мое имя, и там, Привет Дэвид вернулся.