Стать программистом. Часть 26. Основы JavaScript для абсолютных новичков!

Доброго времени суток, друзья!

В нашем прошлом уроке мы начали свое знакомство с глобальным объектом document. Проанализировали три метода для выборки HTML-элементов: getElementsByTagName (по тэгу), getElementsByClassName (по названию класса) и getElementById (по названию идентификатора). Рассмотрели эти методы на практике, узнали какие результаты возвращает каждая из них. Процесс выборки требуемых нам элементов из документа с HTML разметкой фундаментальный. Без понимания того, как именно он происходит дальнейшая работа с JavaScript'ом будет крайне затруднительна. Еще раз призываю оставлять свои вопросы в комментариях, в случае если они возникли.

Урок 26. Встроенные функции и Объекты, Часть IV. DOM. Events.

Прежде чем приступить ко второму пункту списка из прошлого урока...

... я бы хотел немного дополнить первый. Обратите внимания, во время практических примеров я каждый раз анализировал HTML разметку в файле index.html. Такой подход конечно имеет право на жизнь, однако по некоторым позициям он не совсем корректен. Дело в том, что браузер, читая HTML разметку в нашем файле, строит внутри себя свою собственную разметку. Разметка, которую мы создали, является для него лишь основой, не более. Зачем все так организовано? Дело в том, что браузер берет на себя абсолютно всю ответственность за отображение той HTML структуры, которую мы создали. При этом гарантии в том, что мы сделали это правильно у браузера конечно же нет. В конце концов мы всего лишь люди, и вероятность потенциальной ошибки всегда присутствует в нашей работе. Так вот браузер не только выстраивает свою HTML-структуру, основываясь на той, которую мы ему предложили, помимо этого он еще анализирует и исправляет ошибки, которые мы возможно допустили. Пример:

У нас есть файл index.html со следующей разметкой внутри:

Обратите внимание на тэг html (на него указывает зеленые стрелки). Этот тэг является обязательным для любого документа с HTML-разметкой. Теперь допустим, что в процессе работы мы допустили оплошность и забыли указать этот обязательный тэг в нашей разметке. Примерно так:

Давайте теперь пройдем в браузер и посмотрим на то, как отобразился наш документ:

Мы видим, что ничего толком не изменилось, и документ отобразился правильно. В чем же дело? Ведь мы явно допустили грубую ошибку. А дело как раз в той самой внутренней HTML-разметке браузера, которую он построил, основываясь на нашей. Браузер сразу же заметил отсутствие тэга html в нашем документе и при построении своей структуры автоматически добавил этого тэг в нее. Именно поэтому все у нас работает без изменений. Потом что фактически мы видим результат не нашей разметки, а разметки браузера. Для того чтобы посмотреть разметку, созданную браузером мы так же должны воспользоваться панелью для профилирования кода. Только на это раз открыть вкладку Elements а не Console, с которой мы уже почти на "ты":

Обратите внимание на то что тэг html в разметке построенной браузером присутствует, несмотря на то что в нашем файле его нет. Исходя из вышесказанного получается так что разметка внутри браузера несколько актуальнее, чем разметка в нашем файле. Поэтому анализировать именно ее в своей работе вариант более предпочтительный, чем тот, который мы использовали в предыдущем уроке.

Такая структура HTML-элементов внутри браузера называется Document Object Model или DOM (ДОМ). Если перевести это название на русский язык, то получим Объектная Модель Документа. Кроме этих названий можно услышать еще один термин -Дерево DOM. Почему именно дерево? Потому что дерево по свей сути имеет иерархический порядок - из одного ствола растут ветви, на которых в свою очередь растут другие ветви и еще несколько повторений такого же порядка. DOM аналогично дереву имеет иерархическую структуру. Главный тэг html внутри которого расположились тэги head и body внутри которых в свою очередь также есть тэги, которые опять же могут включать в себя другие тэги и т.д.

В нашей дальнейшей работе мы будем анализировать именно DOM, а не разметку внутри index.html файла.

Мониторинг активности пользователя на странице с HTML разметкой. Events.

Для того чтобы какой-то объект расположенный на нашей странице начал менять свой вид или поведение нам требуется некое условие, после которого эти изменения должны произойти. Основным источником таких условий является активность пользователя. Обратите внимание что большинство изменений в поведении или в стилевом виде элементов на странице сайта происходит после того как Вы куда-то щелкнули или навели указатель мыши или за что-нибудь потянули и так далее. В JavaScript'e существует целая система для отслеживания деятельности пользователя на странице. Эта система носит название Events (События).

Events или События - это определенные сигналы, которые может воспринимать JavaScript, и что намного важнее, восприняв сигнал такого рода JavaScript может ответить на него исполнением кода, предназначенным для данного сигнала. Технически обработка сигнала такого рода происходит по следующим пунктам:

1. Выборка элемента который будет ожидать события (Event).
2. Присваивание этому элементу ожидания конкретного события (Event) а также ссылки на кусочек кода, который должен будет быть выполнен в случае если ожидаемое событие произойдет.
3. Исполнение ожидаемого события (Event) на элементе.
4. Исполнение кода ссылка на который была присвоена в пункте № 2.

Другими словами, мы создали кнопку при клике, на которую должна показаться реклама.
Пользователь кликнул на кнопку -> произошло событие "клик мышью” -> JavaScript воспринял этот сигнал и исполнил код, который показывает рекламу.

Давайте рассмотрим на практике как реализуется данный код:

/* Объект document. Events. */

var button = document.getElementById('js-square');

button.addEventListener('click', function() {
    alert('РЕКЛАМА HUGS');
});

Что мы видим в этом примере? Мы создали переменную button куда поместили результат выборки элемента по идентификатору "js-square". Если попробовать найти выбранную нами кнопку в DOM, то вот она:

Обратите внимание на идентификатор, по которому мы осуществляем выборку указывает красная стрелочка. Итак, в переменную button у нас попал объект с сылкой на нужный нам элемент (кнопку). Для того чтобы удостоверится что в значении переменно находится именно объект мы можем воспользоваться известным нам по предыдущим урокам оператором typeof. Каждый объект такого типа (полученный в результате выборки HTML-элемента) обладает методом для присваивание этому элементу ожидания конкретного события. Он называется addEventListener (если перевести на русский, получим - ДобавитьСлушательСобытия). То есть мы как бы приклеиваем к выбранному нами элементу «прослушку» на конкретное действие пользователя.

Метод addEventListener принимает два основных элемента (на самом деле он может принимать больше аргументов, но так как мы пока еще новички, то другие аргументы можем пока не рассматривать).

Первый основной аргумент (обведен зеленой рамкой) - это название события, которого элемент будет ожидать для того, чтобы выполнить функцию, переданную вторым параметром (обведена оранжевой рамкой). Мы ожидаем, что пользователь кликнет мышью на кнопку. Это событие называется "клик" и в JavaScript'e это событие закреплено под названием "click". Вторым параметром предается функция. В нашем случае она просто выводит сообщение с текстом "РЕКЛАМА HUGS".

То есть еще раз. Мы выбрали кнопку и присоединили к ней ожидание события "клик" с помощью метода addEventListener. Как только клик произойдет, исполнится функция (второй параметр), которая выведет сообщение о рекламе. Давайте кликнем на кнопке в браузере и посмотрим, сработает ли наш код.

Как видим код отработал и после того как мы выполнили клик на кнопке появилось сообщение на о рекламе.

По большому счету это вся логика использования событий (Events) в JavaScript'e. Осталось добавить пару моментов.

Момент первый:
Событие "клик мышью" (click) конечно же не единственное событие, представленное в JavaScript. Ведь кроме клика мышью на странице может происходить еще огромное количество других событий. Полный список для ознакомления легко можно найти в интернете, например, здесь.

Момент второй:
В теме Events (События) существует один подводный камень. Имя ему кроссбраузерность. Что это такое? В нашем IT-мире существует большое многообразие браузеров. Они различны по внешнему виду, по компании, которая их создала и что самое печально для нас - они различны в анализе и исполнении JavaScript кода который в них загружается. Эти различия не носят всеохватывающий характер. В большинстве случаев один и тот же код отработает в разных браузерах одинаково. Однако существуют моменты, с которыми рано или поздно придется столкнутся. Например, код с методом addEventListener отработает в Chrome, Opera, Firefox и даже Internet Explorer (начниая с 9 версии). Но этот код выдаст ошибку если вы попробуете исполнить его в Internet Explorer'e до 8 версии включительно. Ошибка будет заключаться в том, что в IE До 8 версии попросту нет такого метода как addEventListener. Вместо него надо использовать метод attachEvent. Мы не станем сейчас подробно рассматривать все аспекты кроссбраузерности исполнения JavaScript. Эта тема обширна и заслуживает отдельного освещения, и мы разберем её как-нибудь позже. Однако, знать о том, что такие нюансы возможны лишним не будет.

Задача

1. Сделайте выборку html-элемента, который отвечает за отображение круга в нашем Index.html. 
   
2. Добавьте к результату вашей выборки ожидание события клик мышью (click) используя метод addEventListener
3. Организуйте код таким образом, чтобы после клика на круге в окне браузера появлялось диалоговое окно с вопросом ""Это был клик?" и возможность ввести текстовый ответ на этот вопрос (вспоминаем урок о встроенных функциях alert, confirm и prompt)
4. Проверьте работоспособность Вашего кода в браузере.

А на сегодня все.

Ссылки на предыдущие уроки:

Урок 1 - Окружение.,
Урок 2 - Некоторые особенности синтаксиса.,
Урок 3 - Переменные.,
Урок 4 - Типы переменных, как основа для их взаимодействия.,
Урок 5 - Операции с переменными одного типа.,
Урок 6 - Операции с переменными одного типа. Часть II.,
Урок 7 - Взаимодействие переменных с разными типами.,
Урок 8 - Взаимодействие переменных разного типа. часть II.,
Урок 9 - Взаимодействие переменных разного типа. Часть III.,
Урок 10 - Другие возможные взаимодействия между переменными.,
Урок 11 - Другие возможные взаимодействия между переменными. Часть II.,
Урок 12 - Другие возможные взаимодействия между переменными. Операторы присваивания.,
Урок 13 - Другие возможные взаимодействия между переменными. Операторы сравнения.,
Урок 14 - Сложные переменные. Array и Object.,
Урок 15 - Условные операторы.),
Урок 16 - Циклы.,
Урок 17 - Циклы. Часть II.,
Урок 18 - Функции.,
Урок 19 - Функции. Часть II.,
Урок 20 - Профилирование. Функции, часть III.,
Урок 21 - Функции, Часть IV. Аргументы.,
Урок 22 - Objects (Объекты).,
Урок 23 - Встроенные функции и объекты.,
Урок 24 - Встроенные функции и Объекты, Часть II. Глобальные функции и переменные.,
Урок 25 - Встроенные функции и Объекты, Часть III. Document Object Model.