4 семестр / ЛР 3 ИТиП ОТЧЕТ
.pdf
МИНИСТЕРСТВО ЦИФРОВОГО РАЗВИТИЯ, СВЯЗИ И МАССОВЫХ КОММУНИКАЦИЙ РОССИЙСКОЙ ФЕДЕРАЦИИ
Ордена Трудового Красного Знамени федеральное государственное бюджетное образовательное учреждение высшего образования
МОСКОВСКИЙ ТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ
СВЯЗИ И ИНФОРМАТИКИ
Факультет СиСС Кафедра направляющие
телекоммуникационные среды
ЛАБОРАТОРНАЯ РАБОТА №3
по дисциплине «Информационные технологии и программирование»
«JS»
Выполнила: Балыбердина Анастасия Максимовна студентка БИН2401
Проверил:
Ассистент кафедры ОиКК Черномаз Арсений Павлович
(Весенний семестр)
Москва 2026
Цель работы: Знакомство с использованием функций. Динамический
HTML. Изменение свойств объектов с помощью функций и событий.
Ход работы:
Создан HTML-документ с использованием функции, принимающей имя пользователя в качестве параметра. С помощью метода prompt() реализован ввод имени и выведено приветствие через функцию. (см. рис. 1, 2)
Рисунок 1 – вывод приветствия с использованием функции и ввода имени пользователя.
Рисунок 2 – проверка работы HTML-документа
1.1. Модифицирование программы, назначение вызова функции обработчиком события onload элемента <body>, что позволило автоматически выполнять сценарий при загрузке страницы. (см. рис. 3)
Рисунок 3 – Выполнение функции при загрузке страницы с использованием обработчика события onload.
2. Создан HTML-документ с таблицами, содержащими ячейки с различными цветами фона. Реализовано отображение цветных ячеек в браузере. (см. рис. 4,5)
Рисунок 4 - HTML-документ с таблицами, содержащими ячейки с различными цветами фона
Рисунок 5 – проверка HTML-документа
2.1. Реализован сценарий, при котором при щелчке по ячейке второй таблицы изменяется цвет фона ячейки первой таблицы в соответствии с выбранным цветом. (см. рис. 6,7)
Рисунок 6 – Изменение цвета ячейки при щелчке по элементам второй таблицы.
Рисунок 7 – Проверка
2.2. Создана функция, изменяющая цвет блока в зависимости от цвета выбранной ячейки. Передача цвета осуществлялась через параметр функции при обработке события onclick. (см. рис. 8,9)
Рисунок 8 – Изменение цвета блока с использованием функции и передачи параметра.
Рисунок 9 – проверка
2.3. Функция модифицирована таким образом, чтобы в неё передавались не только цвет, но и текст из ячейки таблицы. При выборе ячейки изменяется фон и отображается соответствующий текст. (см. рис. 10,11)
Рисунок 10 – Изменение цвета и текста блока при выборе ячейки таблицы.
Рисунок 11 – проверка
3. Создан HTML-документ с кнопками «Показать» и «Скрыть»,
реализующими управление видимостью элемента с помощью изменения свойства display. (см. рис. 12,13)
Рисунок 12 – Управление видимостью элемента с помощью кнопок
«Показать» и «Скрыть».
Рисунок 13 – проверка
3.1. Модифицирован сценарий, объединено управление в одну кнопку.
Реализовано переключение состояния (показать/скрыть) и изменение текста кнопки в зависимости от состояния элемента. (см. рис. 14,15)
Рисунок. 14 – Переключение видимости элемента с помощью одной кнопки с изменяемой надписью.
Рисунок 15 – проверка Вывод: в ходе лабораторной работы были изучены основы работы с
функциями в JavaScript, а также принципы динамического изменения HTML-
страницы. Были реализованы сценарии с использованием параметров функций и обработчиков событий (onclick, onload).
Освоено изменение свойств элементов страницы, включая цвет фона и содержимое, а также управление видимостью элементов. В результате работы закреплены навыки создания интерактивных веб-страниц с использованием
JavaScript.