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

Министерство цифрового развития, связи и массовых коммуникаций Российской Федерации

Федеральное государственное бюджетное образовательное учреждение Высшего образования «Санкт-Петербургский государственный университет телекоммуникаций им. Проф. М. А. Бонч-Бруевича» (СПбГУТ)

Факультет Информационных технологий и программной инженерии

Кафедра Программной инженерии и вычислительной техники

Лабораторная работа №4

По дисциплине «Web-технологии»

На тему «Основы JavaScript»

Выполнил:

Студент 3-го курса

Дневного отделения

Группы ИКПИ-32

Яковлев М. А.

Преподаватель:

Краева Е. В.

Санкт-Петербург

2025

Цель работы

Цель работы — изучить основы языка программирования JavaScript, включая способы подключения скриптов, работу с функциями, событиями, формами и регулярными выражениями.

Ход выполнения

Упражнение №1. Alert и формы.

Был создан HTML-документ с базовой структурой. В тело документа добавлена форма с кнопкой. Для кнопки задан обработчик события onclick, который вызывает функцию show_information(), написанную в подключаемом файле script.js.. [Рис. 1].

Рисунок 1. Код программы

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

Рисунок 2. Код программы скрипта

Рисунок 2. Отображение страницы

Д ля форматирования кнопки и ее расположения на странице был создан отдельный файл стилей [Рис. 3].

Рисунок 3. Код программы

Получился следующий вид страницы [Рис. 4]:

Рисунок 4. Отображение страницы

Упражнение №2. Alert и формы. Ввод данных

В том же документе HTML создана вторая форма. Она содержит поле для ввода числа (type=”number”) и кнопку. Для кнопки задан обработчик onclick, который вызывает функцию show_information2(), передавая ей введенное значение. [Рис. 5].

Рисунок 5. Новая форма

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

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

Файл стилей [Рис. 7]:

Рисунок 8. Отображение страницы

Рисунок 7. Изменение файла стилей

С тиль текста изменился на следующий [Рис. 8]:

Упражнение №3. Стили через подключение внешнего файла

В документ добавлена третья форма-анкета. Она включает поле для ввода фамилии и три группы радиокнопок для оценки по трем дисциплинам. При нажатии на кнопку «Отправить» вызывается функция send(), которая рассчитывает средний рейтинг и выводит все данные на страницу, полностью перезаписывая ее содержимое с помощью document.write(). [Рис. 9].

Рисунок 9. Содержимое HTML-файла

В CSS-файл добавлено дополнительное форматирование [Рис. 10]:

Рисунок 10. Обновлённый файл

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

Рисунок 11. Обновлённый файл

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

Рисунок 12. Обновлённый файл

П родолжение JavaScript [Рис. 13]:

Рисунок 13. Обновлённый файл

Рисунок 34. Отображение страницы

О тображение анкеты на странице [Рис. 14]:

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

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

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

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

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

В CSS-файл добавлено дополнительное форматирование [Рис. 17]:

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

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

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

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

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

Заключение

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

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

№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() и др.