Лабораторные работы. Краева / Web-технологии. Отчет №4

Упражнение №4. Адрес электронной почты

Создана форма для проверки корректности ввода адреса электронной почты. Для проверки используется регулярное выражение. Форма размещена внутри блока <div>, которому добавлен обработчик события ondblclick для изменения фона по двойному щелчку мыши [Рис. 15].

Рисунок 45. HTML-файл

11

Код функции в script.js [Рис. 16]:

Рисунок 56. Скрипт

12

Продолжение CSS-файла [Рис. 18]:

Рисунок 78. Обновлённый код

14

Теперь на странице появилась форма для ввода электронной почты. При вводе неправильного формата появляется предупреждение. [Рис. 19].

Рисунок 89. Отображается ошибка

Заключение

В ходе выполнения лабораторной работы были изучены основы JavaScript: способы подключения скриптов к HTML-документу, работа с функциями, обработка событий, взаимодействие с элементами форм, валидация данных с использованием регулярных выражений.

15

Контрольные вопросы

№1. Объявление переменных в JS.

Для объявления переменных используются ключевые слова var, let и const. Let позволяет объявить переменную с блочной областью видимости. Const предназначена для объявления констант, значение которых нельзя переопределить.

№2. Условные операторы в JS.

Основные условные операторы — if…else и switch. If…else проверяет условие и выполняет соответствующий блок кода. Switch используется для выбора одного из многих блоков кода на основе значения выражения.

№3. Функции и методы в JS.

Функции объявляются с помощью ключевого слова function. Они могут принимать параметры и возвращать значение. Метод — это функция, которая является свойством объекта и вызывается в контексте этого объекта.

№4. Типы событий мыши.

Основные события мыши: click (одиночный щелчок), dblclick (двойной щелчок), mousedown (нажатие кнопки мыши), mouseup (отпускание кнопки мыши), mousemove (движение курсора), mouseover (наведение курсора на элемент), mouseout (курсор покидает элемент).

№5. Регулярные выражения.

Регулярные выражения — это шаблоны для поиска и манипуляций со строками. В JS создаются с помощью литерала /шаблон/ или конструктора new RegExp(‘шаблон’). Используются с методами test(), exec(), match(), replace() и др.

16