Виступаючий 1: Зараз в останньому прикладі, Нагадаємо, що ми перемежовуються деякі JavaScript код всередині мого HTML, Зокрема, внутрішня частина вартості атрибут закликав Надіслати для цього тега форми. Тепер для невеликих сторінок, це не така вже велика справа. Але, як веб-сторінка отримує більше і більше комплекс, просто покласти ваші JavaScript код тут і там всередині від вартості атрибути не кращий дизайн. Найкраще, якщо ми фактором, що, і принаймні поставити його всередині тег сценарію централізовано. 

Як це зробити? Ну давайте повернемося до моєї тега форми і спочатку видалити цей атрибут і його цінуєте в цілому. Тоді тут, а не визначити Функція називається Вітайте, давайте триматися в рядку коду, що, в кінцевому рахунку ми буде як і раніше хочете виконати і замінити функція наступним чином Вітайте. Document.get Елемент За ID цитую Unquote демо - де демо, нагадаємо, є єдиним Ідентифікатор для самої формі - точка на уявити, що згадати це ім'я обробника подій, в яких ми зацікавлені. І давайте призначимо, що на представити обробник значення, яке насправді функціонувати себе. 

Тепер зверніть увагу, що я насправді не виклику функції тут. Я замість визначення анонімний, інакше відомий як функцію лямбда, , Вказавши між цими фігурні дужки купа коду, який повинен насправді виконані. Зокрема, код, який я хотів би виконати те, що лінія, яка у мене була раніше, а потім давайте додамо до того, що повернутися помилковим, так що ця форма не в кінцевому рахунку, представлений в кінець віддаленого веб сервер традиційним способом. 

Давайте тепер зберегти цей файл, відкрити його в браузері, і подивитися, що відбувається. http://localhost/dom-1.html. Давайте тепер ввести своє ім'я, Девід, Відправити. І нічого не з'являється, сталося крім Адреса моїй сторінці здається змінилися, ніби форма була фактично представлений той же файл. 

Тепер, чому це може бути? Ну мені потрібно більше інформації. Так що давайте йти вперед і відкрити в Chrome Інструменти розробника, так що я можу насправді подивитися на вікні консолі, щоб побачити якщо я зробив щось не так. Я можу отримати доступ, що через кілька способів. Одним з них є допомогою цього меню тут, Потім в меню Сервіс, потім вниз до Інструменти розробника. 

І зверніть увагу, тут на вкладці Console, є неперехваченное Помилка типу, не може встановити власність на уявити, рівним нулю. Тепер, чому це може бути? Ну ще в моєму вихідному коді тут, повідомлення що на відправити, я думаю, властивість елемента, унікальний ідентифікатор є демо. Елемент, знову ж, це просто вузол в дереві. 

Виходить, що мій браузер не думаю, що цей елемент або вузол існує ще. І справді, це не так. Нагадаємо, що веб-сторінка аналізується або читати веб-браузером, зверху вниз, зліва направо. І тому, коли JavaScript код зіткнулися, як правило, він виконується відразу ж. 

Але в даному випадку, ми навіть не отримали ще в тій частині DOM, HTML, в якому, що форма з унікальним Ідентифікатор демо був оголошений. І таким чином ми намагаємося виконати мій JavaScript код до цього вузла навіть існує в дерево, яке, звичайно, є проблематично, тому що тоді, безумовно, сам елемент буде нульовим на той момент. 

Так, як виправити? Ну у нас є кілька рішень. Але давайте спробуємо найпростіших шляхом переміщення мій тег скрипт з голови помітити до мого тіла, але конкретно, до дно тіла моєї сторінки так що це нижче вузлів і питання. Зокрема, давайте виділити і вирізати відкритий тег і закриваючий тег для сценарію і положення, що весь блок коду в нижній частині файлу тут. 

Тепер це не обов'язково найчистіший дизайн, але принаймні це буде дотримання правильного порядку операцій. Давайте збережіть файл і перезавантажити в моєму браузері. Давайте перезавантажте сторінку, повторно вхід моє ім'я, і там, Привіт Девід повернувся.