Введение в js.

Взаимодействие: alert, prompt, confirm.

alert
Показывает сообщение и ждёт, пока пользователь нажмёт кнопку «ОК».

Например:

Это небольшое окно с сообщением называется модальным окном. Понятие

модальное означает, что пользователь не может взаимодействовать с интерфейсом
остальной части страницы, нажимать на другие кнопки и т.д. до тех пор, пока
взаимодействует с окном. В данном случае – пока не будет нажата кнопка «OK».
prompt
Функция prompt принимает два аргумента:
result = prompt(title, [default]);
Этот код отобразит модальное окно с текстом, полем для ввода текста и кнопками
OK/Отмена.
Title - текст для отображения в окне.
Default - необязательный второй параметр, который устанавливает начальное
значение в поле для текста в окне.
Квадратные скобки в синтаксисе [...]
Квадратные скобки вокруг default в описанном выше синтаксисе означают, что
параметр факультативный, необязательный.

Пользователь может напечатать что-либо в поле ввода и нажать OK. Введённый

текст будет присвоен переменной result. Пользователь также может отменить ввод
нажатием на кнопку «Отмена» или нажав на клавишу Esc. В этом случае значением result
станет null.

Вызов prompt возвращает текст, указанный в поле для ввода, или null, если ввод
отменён пользователем.

Например:
Confirm
Функция confirm отображает модальное окно с текстом вопроса question и двумя
кнопками: OK и Отмена.
Результат – true, если нажата кнопка OK. В других случаях – false.
Например:

Задание. Создайте макет регистрации html/css. Необходимо добавить обработчик

jacaScript при вводе логина/имени/e-mail и пароля пользователя, который будет
запрашивать согласен ли пользователь зарегистрироваться. Если пользователь дает
согласие, то выпадает модельное окно «Спасибо за регистрацию!». Если же не согласен,
то в выпадающем модальном окне должно появиться поле с надписью и текстовым полем:
«Расскажите, почему Вы не захотели сотрудничать с нами».
Примечание. Для решения этой задачи Вам понадобится инструкция «if» в JavaScript.

Консоль браузера, console.log и document.write в JavaScript

Незаменимым инструментом при работе с JavaScript является консоль браузера, которая
позволяет производить отладку программы. Во многих современных браузерах есть
подобная консоль. Например, чтобы открыть консоль в Google Chrome, нам нужно нажать
на правую кнопку мыши -> просмотреть код-> console. Либо нажать комбинацию клавиш
ctrl+shift+j.

Мы можем напрямую вводить в консоль браузера выражения JavaScript, и они будут

выполняться. Например, введем в консоли следующий текст:

Браузер выполнит данную команду и отобразит нам окно с сообщением.

Для вывода различного рода информации в консоли браузера используется специальная

функция console.log(). Например, определим следующую веб-страницу:
В коде javascript с помощью ключевого слова var объявляется переменная a, которой
присваивается сумма двух чисел 5 и 8: var a = 5 + 8. С помощью
метода console.log() выводится значение переменной a. И после запуска веб-страницы в
браузере мы увидим в консоли результат выполнения кода:

В дальнейшем мы часто будем обращаться к консоли и использовать функцию console.log.

Метод document.write

Также на начальном этапе нам может быть полезен метод document.write(), который

пишет информацию на веб-страницу.
Например, возьмем предыдущий пример и изменим в нем метод console.log на
document.write:

Получим в браузере:

Задание. Создать документ index.html, который будет выводить alert с надписью «загрузка
прошла успешно». Следующим шагом подтвердающее окно «являетесь ли Вы админом
данной системы?». При положительном ответе на странице index.html должна добавиться
надпись «Панель админа. Здравствуйте.» При отрицательном ответе в консоле JS вывести
надпись «что-то пошло не так. Возможно данный пользователь не является
администратором системы».

Основы javascript. Переменные и константы. Типы данных. Операции с

переменными.
Для хранения данных в программе используются переменные. Переменные
предназначены для хранения каких-нибудь временных данных или таких данных, которые
в процессе работы могут менять свое значение. Для создания переменных применяются
ключевые слова var и let. Например, объявим переменную myIncome:
Каждая переменная имеет имя. Имя представляет собой произвольный набор алфавитно-
цифровых символов, знака подчеркивания (_) или знака доллара ($), причем названия не
должны начинаться с цифровых символов. То есть мы можем использовать в названии
буквы, цифры, подчеркивание. Однако все остальные символы запрещены.

Например, правильные названия переменных:

$commision
someVariable
product_Store
income2
myIncome_from_deposit

Следующие названия являются некорректными и не могут использоваться:

222lol
@someVariable
my%percent

Также нельзя давать переменным такие имена, которые совпадают с зарезервированными

ключевыми словами. В JavaScript не так много ключевых слов, поэтому данное правило
не сложно соблюдать. Например, следующее название будет некорректным, так как for -
ключевое слово в JavaScript: var for;

Список зарезервированных слов в JavaScript:

abstract, boolean, break, byte, case, catch, char, class, const, continue, debugger, default, delete,
do, double, else, enum, export, extends, false, final, finally, float, for, function, goto, if,
implements, import, in, instanceof, int, inteface, long, native, new, null, package, private,
protected, public, return, short, static, super, switch, synchronized, this, throw, throws, transient,
true, try, typeof, var, volatile, void, while, with

При названии переменных надо учитывать, что JavaScript

является регистрозависимым языком, то есть в следующем коде объявлены две разные
переменные.

С помощью знака равно (который еще называют оператором присваивания) можно

присвоить переменной какое-либо значение:

Процесс присвоения переменной начального значения называется инициализацией.

Теперь переменная income будет хранить число 300, а переменная price - число 76.
Отличительной чертой переменных является то, что мы можем изменить их значение:

Константы

С помощью ключевого слова const можно определить константу, которая, как и

переменная, хранит значение, однако это значение не может быть изменено.

сonst rate = 10;

Если мы попробуем изменить ее значение, то мы столкнемся с ошибкой:

const rate = 10;

rate = 23;  // ошибка, rate - константа, поэтому мы не можем изменить ее значение

Также стоит отметить, что поскольку мы не можем изменить значение константы, то она
должна быть инициализирована, то есть при ее определении мы должны предоставить ей
начальное значение. Если мы этого не сделаем, то опять же мы столкнемся с ошибкой:

const rate; // ошибка, rate не инициализирована

Типы данных

Все используемые данные в javascript имеют определенный тип. В JavaScript имеется пять
примитивных типов данных:

 String: представляет строку

 Number: представляет числовое значение

 Boolean: представляет логическое значение true или false

 undefined: указывает, что значение не установлено

 null: указывает на неопределенное значение

Все данные, которые не попадают под вышеперечисленные пять типов, относятся к

типу object
Числовые данные

Числа в JavaScript могут иметь две формы:

 Целые числа, например, 35. Мы можем использовать как положительные, так и

отрицательные числа. Диапазон используемых чисел: от -253 до 253

 Дробные числа (числа с плавающей точкой), например, 3.5575. Опять же можно

использовать как положительные, так и отрицательные числа. Для чисел с
плавающей точкой используется тот же диапазон: от -253 до 253

В качестве разделителя между целой и дробной частями, как и в других языках

программирования, используется точка.

Строки

Тип string представляет строки, то есть такие данные, которые заключены в кавычки.

Например, "Привет мир". Причем мы можем использовать как двойные, так и одинарные
кавычки: "Привет мир" и 'Привет мир'. Единственно ограничение: тип закрывающей
кавычки должен быть тот же, что и тип открывающей, то есть либо обе двойные, либо обе
одинарные.

Если внутри строки встречаются кавычки, то мы их должны экранировать слешем.

Например, пусть у нас есть текст "Бюро "Рога и копыта"". Теперь экранируем кавычки:

Также мы можем внутри стоки использовать другой тип кавычек:

Тип Boolean

Тип Boolean представляет булевые или логические значения true и false (то есть да или
нет):
null и undefined
Нередко возникает путаница между null и undefined. Итак, когда мы только определяем
переменную без присвоения ей начального значения, она представляет тип undefined:

Присвоение значение null означает, что переменная имеет некоторое неопределенное

значение (не число, не строка, не логическое значение), но все-таки имеет значение
(undefined означает, что переменная не имеет значения):

object

Тип object представляет сложный объект. Простейшее определение объекта представляют

фигурные скобки: var user = {};
Объект может иметь различные свойства и методы:

В данном случае объект называется user, и он имеет два свойства: name и age. Это краткое
описание объектов, более подробное описание приводится в соответствующей главе.
Слабая типизация
JavaScript является языком со слабой типизацией. Это значит, что переменные могут
динамически менять тип. Например:

Несмотря на то, что во втором и третьем случае консоль выведет нам число 45, но во
втором случае переменная xNumber будет представлять число, а в третьем случае - строку.

Это важный момент, который надо учитывать и от которого зависит поведение

переменной в программе:
Выше в обоих случая к переменной xNumber применяется операция сложения (+). Но в
первом случае xNumber представляет число, поэтому результатом операции xNumber +
5 будет число 50.

Во втором случае xNumber представляет строку. Но операция сложения между строкой и

числом 5 невозможна. Поэтому число 5 будет преобразовываться к строке, и будет
происходить операция объединения строк. И результатом выражения xNumber + 5 будет
стока "455".

Оператор typeof

С помощью оператора typeof можно получить тип переменной:

Операции с переменными
Математические операции
JavaScript поддерживает все базовые математические операции:
Результатом будет 5, так как наибольшее целое число, которое меньше или равно 40 и при
этом делится на 7 равно 35, а 40 - 35 = 5.

Инкремент:

Оператор инкремента ++ увеличивает переменную на единицу. Существует префиксный

инкремент, который сначала увеличивает переменную на единицу, а затем возвращает ее
значение. И есть постфиксный инкремент, который сначала возвращает значение
переменной, а затем увеличивает его на единицу:
Постфиксный инкремент аналогичен операции: a = a + 1; // a++
Декремент уменьшает значение переменной на единицу. Также есть префиксный и
постфиксный декремент:

Как и принято в математике, все операции выполняются слева направо и различаются по

приоритетам: сначала операции инкремента и декремента, затем выполняются умножение
и деление, а потом сложение и вычитание. Чтобы изменить стандартный ход выполнения
операций, часть выражений можно поместить в скобки:

Операции присваивания
Операторы сравнения
Как правило, для проверки условия используются операторы сравнения.
Операторы сравнения сравнивают два значения и возвращают значение true или false:
 Все операторы довольно просты, наверное, за исключением оператора равенства и
оператора тождественности. Они оба сравнивают два значения, но оператор
тождественности также принимает во внимание и тип значения. Например:

Переменная result здесь будет равна true, так как фактически и income, и strIncome
представляют число 100.
Но оператор тождественности возвратит в этом случае false, так как данные имеют
разные тип:
 Аналогично работают операторы неравенства != и !==.
Логические операции
Логические операции применяются для объединения результатов двух операций
сравнения. В JavaScript есть следующие логические операции:

Операции со строками
Строки могут использовать оператор + для объединения. Например:

Если одно из выражений представляет строку, а другое - число, то число

преобразуется к строке и выполняется операция объединения строк:
 В конце напишем небольшую программу, которая продемонстрирует работу с
операциями над переменными. Для этого определим следующую веб-страницу index.html:

Задание. Что выведет следующий скрипт:

let name = "Ilya";
alert( `hello ${1}` );
alert( `hello ${"name"}` );
alert( `hello ${name}` );

Изучить типы данных, знать разницу между null и undefined. Привести пример
работы префиксного и постфиксного инкремента. В index.php тождественно сравнить var
_myVar = 1234 и переменную myVar2 = “1234”. Результат напечатать на странице.

Media API. Управление видео из JavaScript

Вместе с новыми элементами audio и video в HTML5 был добавлен новый API в JavaScript
для управления этими элементами. С помощью кода JavaScript мы можем получить
элементы video и audio (как и любой другой элемент) и использовать их свойства. В
JavaScript эти элементы представлены объектом HTMLMediaElement, который с
помощью свойств, методов и событий позволяет управлять воспроизведением аудио и
видео. Отметим наиболее важные свойства, которые могут нам пригодиться для
настройки этих элементов:

 playbackRate: устанавливает скорость воспроизведения. По умолчанию равно 1

 src: возвращает название воспроизводимого ресурса, если он установлен в коде
html элемента
 duration: возвращает длительность файла в секундах
 buffered: возвращает длительность той части файла, которая уже буферизирована и
готова к воспроизведению
 controls: устанавливает или возвращает наличие атрибута controls. Если он
установлен, возвращается true, иначе возвращает false
 loop: устанавливает или возвращает наличие атрибута loop. Если он установлен,
возвращается true, иначе возвращает false
 muted: устанавливает или возвращает наличие атрибута muted
 preload: устанавливает или возвращает наличие атрибута preload
 volume: устанавливает или возвращает уровень звука от 0.0 до 1.0
 currentTime: возвращает текущее время воспроизведения

Отдельно для элемента video мы можем использовать ряд дополнительных свойств:

 poster: устанавливает или возвращает атрибут poster

 height: устанавливает или возвращает атрибут height
 width: устанавливает или возвращает атрибут width
 videoWidth, videoHeight: для элемента video возвращают ширину и высоту видео

Следует также отметить два метода, с помощью которых мы можем управлять

воспроизведением:

 play(): начинает воспроизведение

 pause(): приостанавливает воспроизведение

Основные события элементов video и audio:

 canplaythrough: это событие срабатывает после загрузки страницы, если браузер

определит, что он может воспроизводить это видео/аудио
 pause: событие срабатывает, когда воспроизведение мультимедиа
приостанавливается, и оно переводится в состояние "paused"
 play: событие срабатывает, когда начинается воспроизведение файла
 volumechange: срабатывает при изменении уровня звука мультимедиа
 ended: срабатывает при окончании воспроизведения
 timeupdate: срабатывает при изменении времени воспроизведения
 error: генерируется при возникновении ошибки
 loadeddata: срабатывает, когда будет загружен первый фрейм видеофайла
 loadedmetadata: срабатывает после загрузки метаданных мультимедиа
(длительность воспроизведения, размеры видео и т.д.)
 seeking: срабатывает, когда пользователь начинает перемещать курсор по шкале
воспроизведения для перемещения к новому месту аудио- или видеофайла
  seeked: срабатывает, когда пользователь завершил перемещение к новому месту на
шкале воспроизведения

Теперь используем некоторые из этих свойств, событий и методов для управления

элементом video:
Вначале в коде JavaScript мы получаем все элементы. Затем, если браузер поддерживает
видео и может его воспроизвести, то обрабатываем событие canplaythrough, устанавливая
уровень звука и удаляя класс hidden:

Чтобы запустить воспроизведение, нам надо обработать нажатие ссылки Play:

Обрабатывая события запуска и остановки воспроизведения, мы можем изменять надпись
на ссылке:

Обрабатывая событие input, которое возникает при изменении значения ползунка, мы

можем синхронизировать изменение ползунка и громкость видео:

Обработка события ended позволит сбросить время воспроизведения:

А обработчик события timeupdate позволит динамически изменять показатель времени

воспроизведения:

Для форматирования строки времени применяется вспомогательная функция secondsToTime.

В итоге мы получим следующие элементы воспроизведения:
Задание. Создать управление элементом video.

Управление окнами. История браузера. Объект history

Открытие, закрытие и позиционирование окон

Объект window также предоставляет ряд методов для управления окнами браузера. Так,
метод open() открывает определенный ресурс в новом окне браузера:

Метод open() принимает ряд параметров: путь к ресурсу, описательное название для окна

и в качестве третьего параметра набор стилевых значений окна. Метод возвращает ссылку
на объект нового окна.

Мы можем установить следующие стилевые характеристики:

 width: ширина окна в пикселях. Например, width=640

 height: высота окна в пикселях. Например, height=480
 left: координата X относительно начала экрана в пикселях. Например, left=0
 top: координата Y относительно начала экрана в пикселях. Например, top=0
 titlebar: будет ли окно иметь строку с заголовком. Например, titlebar=no
 menubar: будет ли окно иметь панель меню. Например, menubar=yes
 toolbar: будет ли окно иметь панели инструментов. Например, toolbar=yes
  location: будет ли окно иметь адресную строку. Например, location=no
 scrollbars: допускается ли наличие полос прокрутки. Например, scrollbars=yes
 status: наличие статусной строки. Например, status=yes
 resizable: может ли окно изменять размеры. Например, resizable=no

С помощью метода close() можно закрыть окно. Например, откроем новое окно и через 10

секунд закроем его:

Метод moveTo() позволяет переместить окно на новую позицию:

В данном случае окно перемещается на позицию с координатами x=50, y=50 относительно

левого верхнего угла экрана.

Метод resizeTo() позволяет изменить размеры окна:

История браузера. Объект history

Объект history предназначен для хранения истории посещений веб-страниц в браузере.

Нам этот объект доступен через объект window.

Все сведения о посещении пользователя хранятся в специальном стеке (history stack). С

помощью свойства length можно узнать, как много веб-станиц хранится в стеке:

Для перемещения по страницам в истории в объекте history определены

методы back() (перемещение к прошлой посмотренной странице)
и forward() (перемещение к следующей просмотренной странице)

Также в объекте history определен специальный метод go(), который позволяет

перемещаться вперед и назад по истории на определенное число страниц. Например,
переместимся на 2 страницы назад:
Соответственно если надо переместиться на несколько страниц вперед, то в метод
передается положительное значение. Например, переместимся вперед на три страницы:

Задание. Открыть окно браузера, содержащего в себе историю браузера. Если в

истории более 5 страниц, перейти ко второй странице.

Создание, добавление и удаление элементов веб-станицы

Для создания элементов объект document имеет следующие методы:

 createElement(elementName): создает элемент html, тег которого передается в

качестве параметра. Возвращает созданный элемент
 createTextNode(text): создает и возвращает текстовый узел. В качестве параметра
передается текст узла.

Таким образом, переменная elem будет хранить ссылку на элемент div. Однако одного

создания элементов недостаточно, их еще надо добавить на веб-страницу.

Для добавления элементов мы можем использовать один из методов объекта Node:

 appendChild(newNode): добавляет новый узел newNode в конец коллекции

дочерних узлов
 insertBefore(newNode, referenceNode): добавляет новый узел newNode перед
узлом referenceNode

Используем метод appendChild:

Сначала создаем обычный элемент заголовка h2 и текстовый узел. Затем текстовый
узел добавляем в элемент заголовка. Затем заголовок добавляем в один из
элементов веб-страницы:
 Однако нам необязательно для определения текста внутри элемента создавать
дополнительный текстовый узел, так как мы можем воспользоваться
свойством textContent и напрямую ему присвоить текст:

В этом случае текстовый узел будет создан неявно при установке текста.

Теперь рассмотрим, как аналогичный элемент добавить в начало коллекции дочерних

узлов блока div:

Если нам надо вставить новый узел на второе, третье или любое другое место, то
нам надо найти узел, перед которым надо вставлять, с помощью комбинаций свойств
firstChild/lastChild и nextSibling/previousSibling.

Копирование элемента

Иногда элементы бывают довольно сложными по составу, и гораздо проще их

скопировать, чем с помощью отдельных вызовов создавать из содержимое. Для
копирования уже имеющихся узлов у объекта Node можно использовать
метод cloneNode():

В метод cloneNode() в качестве параметра передается логическое значение: если

передается true, то элемент будет копироваться со всеми дочерними узлами; если
передается false - то копируется без дочерних узлов. То есть в данном случае мы копируем
узел со всем его содержимым и потом добавляем в конец элемента body.
Удаление элемента

Для удаления элемента вызывается метод removeChild() объекта Node. Этот метод

удаляет один из дочерних узлов:

В данном случае удаляется первый параграф из блока div

Замена элемента

Для замены элемента применяется метод replaceChild(newNode, oldNode) объекта Node.

Этот метод в качестве первого параметра принимает новый элемент, который заменяет
старый элемент oldNode, передаваемый в качестве второго параметра.
В данном случае заменяем первый параграф заголовком h2.

Задание. Произвести замену «Заголовок статьи» на «Первый абзац». Скопировать

элементы «Привет мир» и «Второй абзац». Удалить «Заголовок статьи» и создать новый
«Заголовок статьи НОВЫЙ».

Объект Element. Управление элементами Изменение стиля элементов

Кроме методов и свойств объекта Node в JavaScript мы можем использовать свойства и

методы объектов Element. Важно не путать эти два объекта: Node и Element. Node
представляет все узлы веб-станицы, в то время как объект Element представляет
непосредственно только html-элементы. То есть объекты Element - это фактически те же
самые узлы - объекты Node, у которых тип узла (свойство nodeType) равно 1.

Одним из ключевых свойств объекта Element является свойство tagName, которое

возвращает тег элемента. Например, получим все элементы, которые есть на странице:
Здесь вначале получаем те корневого элемента <html> и затем с помощью рекурсивной
функции getChildren получаем все вложенные элементы:
Свойства innerText и innerHTML

Для получения или установки текстового содержимого элемента мы можем использовать

свойство innerText, а для получения или установки кода html - свойство innerHTML:
Надо отметить, что свойство innerText во многом аналогично свойству textContent. То
есть следующие вызовы будут равноценны:

Установка кода html у элемента:

Методы объекта Element

Среди методов объекта Element можно отметить методы управления атрибутами:

 getAttribute(attr): возвращает значение атрибута attr

 setAttribute(attr, value): устанавливает для атрибута attr значение value. Если

атрибута нет, то он добавляется

 removeAttribute(attr): удаляет атрибут attr и его значение

Работа с атрибутами:
Размеры и позиция элементов

Элементы имеют ряд свойств, которые позволяют определить размер элемента. Но важно
понимать разницу между всеми этими свойствами

Свойства offsetWidth и offsetHeight определяют соответственно ширину и высоту

элемента в пикселях. В ширину и высоту включается граница элемента.

Свойства clientWidth и clientHeight также определяют ширину и высоту элемента в

пикселях, но уже без учета границы:
Поскольку у блока div определена граница в 3 пикселя, то по сравнению с
clientHeight/clientWidth к offsetHeight/offsetWidth добавляет по 6 пикселей.

Для определения позиции элемента наиболее эффективным способом является

метод getBoundingClientRect().

Этот метод возвращает объект со свойствами top, bottom, left, right, которые

указывают на смещение элемента относительно верхнего левого угла браузера:

Изменение стиля элементов

Для работы со стилевыми свойствами элементов в JavaScript применяются, главным

образом, два подхода:

 Изменение свойства style
  Изменение значения атрибута class

Свойство style

Свойство style представляет сложный объект для управления стилем и напрямую

сопоставляется с атрибутом style html-элемента. Этот объект содержит набор свойств
CSS: element.style.свойствоCSS. Например, установим цвет шрифта:

В данном случае название свойства color совпадает со свойством css. Аналогично мы

могли бы установить цвет с помощью css:

Однако ряд свойств css в названиях имеют дефис, например, font-family. В JavaScript

для этих свойств дефис не употребляется. Только первая буква, которая идет после
дефиса, переводится в верхний регистр:

Свойство className

С помощью свойства className можно установить атрибут class элемента html.

Например:
Благодаря использованию классов не придется настраивать каждое отдельное свойство css
с помощью свойства style.

Но при этом надо учитывать, что прежнее значение атрибута class удаляется. Поэтому,

если нам надо добавить класс, надо объединить его название со старым классом:

И если надо вовсе удалить все классы, то можно присвоить свойству пустую строку:
articleDiv.className = "";
Свойство classList

Выше было рассмотрено, как добавлять классы к элементу, однако для управления
множеством классов гораздо удобнее использовать свойство classList. Это свойство
представляет объект, реализующий следующие методы:

 add(className): добавляет класс className

 remove(className): удаляет класс className

 toggle(className): переключает у элемента класс на className. Если класса нет, то

он добавляется, если есть, то удаляется

Например:

События. Введение в обработку событий. Обработчики событий

Для взаимодействия с пользователем в JavaScript определен механизм событий.

Например, когда пользователь нажимает кнопку, то возникает событие нажатия кнопки. В
коде JavaScript мы можем определить возникновение события и как-то его обработать.

В JavaScript есть следующие типы событий:

 События мыши (перемещение курсора, нажатие мыши и т.д.)

 События клавиатуры (нажатие или отпускание клавиши клавиатуры)
 События жизненного цикла элементов (например, событие загрузки веб-станицы)
 События элементов форм (нажатие кнопки на форме, выбор элемента в
выпадающем списке и т.д.)
 События, возникающие при изменении элементов DOM
 События, возникающие при касании на сенсорных экранах
 События, возникающие при возникновении ошибок

Рассмотрим простейшую обработку событий. Например, на веб-странице у нас есть

следующий элемент div:
Здесь определен обычный блок div, который имеет атрибут onclick, который
задает обработчик события нажатия на блок div. То есть, чтобы обработать какое-либо
событие, нам надо определить для него обработчик. Обработчик представляет собой код
на языке JavaScript. В данном случае обработчик выглядит довольно просто: alert('Нажато')

Также можно было бы вынести все действия по обработке события в отдельную функцию:

Теперь обработчиком события будет выступать функция displayMessage.

Передача параметров в обработчик события

В обработчик можно передавать параметры. Например, мы можем передать текущий

объект, на котором возникает событие:

Ключевое слово this указывает на текущий объект ссылки, на которую производится

нажатие. И в коде обработчика мы можем получить этот объект и обратиться к его
свойствам, например, к свойству href.

Кроме того, надо отметить, что здесь обработчик возвращает результат. Хотя в первом
примере с блоком div от обработчика не требовалось возвращения результата. Дело в том,
что для некоторых обработчиков можно подтвердить или остановить обработку события.
Например, нажатие на ссылку должно привести к переадресации. Но возвращая из
обработчика false, мы можем остановить стандартный путь обработки события, и
переадресации не будет. Если же возвращать значение true, то событие обрабатывается в
стандартном порядке.

Если же мы вовсе уберем возвращении результата, то событие будет обрабатываться, как

будто возвращается значение true:

Кроме непосредственно элемента-источника события в обработчик мы можем передавать

объект event. Этот объект не определяется разработчиком, это просто аргумент функции
обработчика, который хранит всю информацию о событии. Например:
В данном случае с помощью свойства type объекта event получаем тип события (в данном
случае тип click).

Обработчики событий

Встроенные обработчики

В прошлой теме были рассмотрены встроенные обработчики (inline event handler),

которые определяются в коде элемента с помощью атрибутов:

Хотя этот подход прекрасно работает, но он имеет кучу недостатков:

 Код html смешивается с кодом JavaScript, в связи с чем становится труднее

разрабатывать, отлаживать и поддерживать приложение
  Обработчики событий можно задать только для уже созданных на веб-странице
элементов. Динамически создаваемые элементы в этом случае лишаются
возможности обработки событий

 К элементу для одного события может быть прикреплен только один обработчик

 Нельзя удалить обработчик без изменения кода

Свойства обработчиков событий

Проблемы, которые возникают при использовании встроенных обработчиков, были

призваны решить свойства обработчиков. Подобно тому, как у html-элементов есть
атрибуты для обработчиков, так и в коде javascript у элементов DOM мы можем получить
свойства обработчиков, которые соответствуют атрибутам:
В итоге нам достаточно взять свойство onclick и присвоить ему функцию, используемую
в качестве обработчика. За счет этого код html отделяется от кода javascript.

Стоит также отметить, что в обработчик события браузер автоматически передает объект
Event, хранящий всю информацию о событии. Поэтому также мы можем получить этот
объект в функции обработчика в качестве параметра.

Слушатели событий

Несмотря на то, что свойства обработчиков решают ряд проблем, которые связаны с
использованием атрибутов, в то же время это также не оптимальный подход. Еще один
способ установки обработчиков событий представляет использование слушателей.

Для работы со слушателями событий в JavaScript есть объект EventTarget, который

определяет методы addEventListener() (для добавления слушателя)
и removeEventListener() для удаления слушателя. И поскольку html-элементы DOM тоже
являются объектами EventTarget, то они также имеют эти методы. Фактически слушатели
представляют те же функции обработчиков.

Метод addEventListener() принимает два параметра: название события без префикса on

и функцию обработчика этого события. Например:
То есть в данном случае опять же обрабатывается событие click. И также можно было бы
в качестве второго параметра название функции:

Удаление слушателя аналогично добавлению:

Преимуществом использования слушателей является и то, что мы можем установить для

одного события несколько функций:

Задание. Для страницы, выполненной в лабораторной работе 6, необходимо добавить

обработчик событий, который при нажатии на кнопку «Регистрация» будет создавать
новый элемент <input type = “text”> и заголовок 4ого уровня с надписью «Ваш возраст».
После того, как будет вписан возраст, пользователь нажмет на кнопку «Ок». Обработчик
событий должен вывести на экран «Пользователь нажал кнопку ‘ок’».

События мыши. События клавиатуры

События мыши

Одну из наиболее часто используемых событий составляют события мыши:

 click: возникает при нажатии указателем мыши на элемент

 mousedown: возникает при нахождении указателя мыши на элементе, когда кнопка
мыши находится в нажатом состоянии
 mouseup: возникает при нахождении указателя мыши на элементе во время
отпускания кнопки мыши
 mouseover: возникает при вхождении указателя мыши в границы элемента
 mousemove: возникает при прохождении указателя мыши над элементом
 mouseout: возникает, когда указатель мыши выходит за пределы элемента

Например, обработаем события mouseover и mouseout:

Теперь при наведении указателя мыши на блок blueRect он будет окрашиваться в красный
цвет, а при уходе указателя мыши - блок будет обратно окрашиваться в синий цвет.

Объект Event является общим для всех событий. Однако для разных типов событий
существуют также свои объекты событий, которые добавляют ряд своих свойств. Так, для
работы с событиями указателя мыши определен объект MouseEvent, который добавляет
следующие свойства:

 altKey: возвращает true, если была нажата клавиша Alt во время генерации события
  button: указывает, какая кнопка мыши была нажата
 clientX: определяет координату Х окна браузера, на которой находился указатель
мыши во время генерации события
 clientY: определяет координату Y окна браузера, на которой находился указатель
мыши во время генерации события
 ctrlKey: возвращает true, если была нажата клавиша Ctrl во время генерации
события
 metaKey: возвращает true, если была нажата во время генерации события
метаклавиша клавиатуры
 relatedTarget: определяет вторичный источник возникновения события
 screenX: определяет координату Х относительно верхнего левого угла экрана
монитора, на которой находился указатель мыши во время генерации события
 screenY: определяет координату Y относительно верхнего левого угла экрана
монитора, на которой находился указатель мыши во время генерации события
 shiftKey: возвращает true, если была нажата клавиша Shift во время генерации
события

Определим координаты клика:

События клавиатуры

Другим распространенным типом событий являются события клавиатуры.

  keydown: возникает при нажатии клавиши клавиатуры и длится, пока нажата
клавиша
 keyup: возникает при отпускании клавиши клавиатуры
 keypress: возникает при нажатии клавиши клавиатуры, но после события keydown и
до события keyup. Надо учитывать, что данное событие генерируется только для
тех клавиш, которые формируют вывод в виде символов, например, при печати
символов. Нажатия на остальные клавиши, например, на Alt, не учитываются.

Для работы с событиями клавиатуры определен объект KeyboardEvent, который

добавляет к свойствам объекта Event ряд специфичных для клавиатуры свойств:

 altKey: возвращает true, если была нажата клавиша Alt во время генерации события
 charCode: возвращает символ Unicode для нажатой клавиши (используется для
события keypress)
 keyCode: возвращает числовое представление нажатой клавиши клавиатуры
 ctrlKey: возвращает true, если была нажата клавиша Ctrl во время генерации
события
 metaKey: возвращает true, если была нажата во время генерации события
метаклавиша клавиатуры
 shiftKey: возвращает true, если была нажата клавиша Shift во время генерации
события

Например, мы можем с помощью клавиш клавиатуры перемещать элемент на веб-

странице:
 В данном случае обрабатывается событие keydown. В обработчике moveRect с
помощью метода window.getComputedStyle() получаем стиль элемента blueRect. А затем
из этого стиля выбираем значения свойств marginLeft и marginTop.

С помощью свойства e.keyCode получаем нажатую клавишу. Список кодов клавиш

клавиатуры можно посмотреть на сайте http://www.javascriptkeycode.com/.
 Здесь нам интересуют четыре клавиши: вверх, вниз, влево, вправо. Если одна из
них нажата, производим действия: увеличение или уменьшение отступа элемента от
верхней или левой границы. Ну и чтобы элемент не выходил за границы окна, проверяем
предельные значения с помощью document.documentElement.clientWidth (ширина
корневого элемента) и document.documentElement.clientHeight (высота корневого
элемента).

Задание. При нажатии на кнопку «Insert» квадрат должен становиться невидимым.

При нажатии на кнопку «Alt» показываться обратно, но меняя свой цвет на красный. При
нажатии на кнопку «Ctrl» возвращать свой цвет в исходный синий. При нажатии
«Backspace» возвращаться на свою начальную позицию. При нажатии на кнопку «Shift»
должно показаться диалоговое окно, в котором сказано, что нажата «Shift» и сработал
обработчик мыши. Если же нажаты любые другие клавиши, то выпадающее окно должно
осведомить нас об отсутствии какой-либо функции, закрепленной за нажатой кнопкой.