Лабораторная работа №5 "Разработка интерактивного интерфейса на JavaScript"
1. ЦЕЛЬ РАБОТЫ
Освоение основ языка JavaScript и практических навыков работы с DOM (Document Object Model). Формирование умения создавать интерактивные элементы веб-интерфейса, обрабатывать события и динамически изменять содержимое страницы.
2. НЕОБХОДИМЫЕ ЗНАНИЯ
Для успешного выполнения работы студент должен знать:
-
-
Основы языка программирования JavaScript:
- Переменные, операторы, условные выражения и циклы.
- Массивы и объекты.
- Функции и обработка ошибок.
-
Работа с DOM:
- Основные методы для выборки элементов на странице.
- Изменение атрибутов, стилей и содержания элементов.
- Добавление и удаление элементов.
-
Обработка событий:
- Применение обработчиков событий (например, клики, отправка форм).
- Использование таймеров, анимаций и задержек.
-
Валидация форм и работа с LocalStorage.
-
-
Основы HTML и CSS (из предыдущих лабораторных работ)
- Основы работы с консолью разработчика в браузере
3. ЗАДАЧИ РАБОТЫ
-
Изучить основные операции работы с DOM (поиск элементов, манипуляция контентом и стилями)
-
Освоить обработку событий (click, input, submit и др.)
-
Реализовать интерактивные компоненты согласно индивидуальному варианту
-
Научиться работать с формами и валидацией данных
-
Организовать код в соответствии с лучшими практиками
Шаги выполнения лабораторной работы:
-
Введение в язык программирования JavaScript:
- Студенты должны изучить основы JavaScript: синтаксис, работу с переменными, операторами, циклами, функциями и условными выражениями.
- Применение JavaScript для манипуляции данными и выполнения различных операций.
-
Манипуляция элементами DOM:
- Студенты должны изучить, что такое DOM и как он представляет структуру веб-страницы.
- Овладение методами для выбора элементов (getElementById, querySelector и другие).
- Изучение методов изменения содержания, стилей, атрибутов элементов и добавления/удаления элементов.
-
Обработка событий с помощью JavaScript:
- Студенты должны научиться добавлять обработчики событий (например, нажатие кнопок, отправка формы).
- Использование методов JavaScript для реагирования на пользовательские действия (click, change, submit).
-
Создание интерактивных элементов на веб-странице:
- Применение полученных знаний для создания различных интерактивных элементов:
- Формы с валидацией.
- Слайдеры.
- Выпадающие списки и другие элементы интерфейса.
- Применение полученных знаний для создания различных интерактивных элементов:
-
Примерное задание:
- Главная страница: Реализуйте форму добавления новости с сохранением в LocalStorage и обновлением списка новостей на странице. Реализуйте возможность удаления, редактирования новостей и поиска.
- Страница с элементами: Реализуйте список элементов с возможностью добавления, редактирования и удаления. Используйте LocalStorage для хранения данных. Реализуйте сортировку по времени и названию.
- Страница элемента: На странице элемента отобразите подробную информацию и реализуйте форму добавления отзывов с возможностью редактирования и удаления отзывов.
4. ПОРЯДОК ВЫПОЛНЕНИЯ РАБОТЫ
Часть 1. Подготовка проекта и настройка окружения
-
Перейдите в рабочую ветку:
git checkout main git pull origin main git checkout -b feature/javascript-interactivity
-
Создайте структуру файлов JavaScript:
-
В папке
jsсоздайте:-
script.js- основной файл скриптов -
components/- папка для отдельных компонентов -
utils/- папка для вспомогательных функций
-
-
Подключите JavaScript к HTML:
Часть 2. Основы работы с DOM
-
Поиск элементов (в
js/script.js):
-
Манипуляция контентом:
-
Работа с классами и стилями:
Часть 3. Обработка событий
-
Базовые события:
-
Делегирование событий:
Часть 4. Реализация индивидуального задания
Выберите и реализуйте задание согласно вашему варианту (см. ниже).
Часть 5. Работа с формами и валидация
-
Валидация формы:
-
Пример использования:
Часть 6. Рефакторинг и тестирование
-
Протестируйте функциональность в разных браузерах
-
Проверьте обработку ошибок
-
Убедитесь, что код соответствует стандартам ES6+
Часть 7. Фиксация изменений
git add js/ git add index.html git commit -m "feat: add JavaScript interactivity for [тип проекта]" git push origin feature/javascript-interactivity
5. СОДЕРЖАНИЕ ОТЧЕТА
Отчёт о выполнении лабораторной работы должен содержать:
-
Титульный лист
-
Цель работы
-
Краткие теоретические сведения о DOM, событиях и основах JavaScript
-
Ход работы:
-
Описание выполненных действий
-
Скриншоты:
-
Исходный код JavaScript в VS Code
-
Консоль браузера с выводами console.log
-
Работающее интерактивное поведение на странице
-
Инструменты разработчика, показывающие обработчики событий
-
-
Ссылка на коммит с выполненной работой
-
-
Ответы на контрольные вопросы
-
Выводы по работе
6. ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ И СДАЧЕ
-
Выполненное задание и отчет должны быть представлены преподавателю для защиты
-
Электронная версия отчета (в формате PDF) должна быть загружена в систему СЭО
-
Отчет должен быть оформлен в соответствии со Стандартом Предприятия (СТП)
-
Студенты работают в тех же бригадах, что и в предыдущих работах - Для выбора номера варианта для бригады используется Генератор вариантов.
-
1 подгруппа: выполняет варианты 1-8
-
2 подгруппа: выполняет варианты 9-16
ИНДИВИДУАЛЬНЫЕ ВАРИАНТЫ ЗАДАНИЙ
Задание для всех вариантов:
На основе созданной в предыдущих работах HTML-структуры и CSS-стилей реализуйте интерактивное поведение согласно вашему типу проекта. Используйте не менее 3 различных типов событий и реализуйте минимум 2 интерактивных компонента.
1 ПОДГРУППА (Варианты 1-8)
-
Вариант 1 - Новостной портал "NewsHub":
-
Реализуйте фильтрацию новостей по категориям
-
Добавьте "лайки" для новостей с сохранением состояния
-
Создайте модальное окно для подробного просмотра новости
-
-
Вариант 2 - Интернет-магазин "TechStore":
-
Реализуйте корзину покупок с добавлением/удалением товаров
-
Добавьте фильтры товаров по цене и характеристикам
-
Создайте слайдер для акционных товаров
-
-
Вариант 3 - Кулинарный блог "TastyBlog":
-
Реализуйте табы для переключения между рецептами
-
Добавьте таймер приготовления с уведомлениями
-
Создайте форму добавления комментариев
-
-
Вариант 4 - Сайт мероприятия "EventSpace":
-
Реализуйте календарь событий с выделением текущей даты
-
Добавьте форму регистрации на мероприятие
-
Создайте счетчик обратного отсчета до мероприятия
-
-
Вариант 5 - Социальная сеть "SocialSphere":
-
Реализуйте лайки и комментарии к постам
-
Добавьте бесконечную прокрутку ленты
-
Создайте модальное окно для создания нового поста
-
-
Вариант 6 - FAQ система "HelpDesk":
-
Реализуйте аккордеон для вопросов-ответов
-
Добавьте поиск по часто задаваемым вопросам
-
Создайте форму отправки нового вопроса
-
-
Вариант 7 - Портфолио фотографа "PhotoPortfolio":
-
Реализуйте модальное окно для просмотра фотографий
-
Добавьте фильтрацию фотографий по категориям
-
Создайте слайдер для портфолио
-
-
Вариант 8 - Образовательная платформа "EduPlatform":
-
Реализуйте прогресс-бар прохождения курса
-
Добавьте систему закладок для уроков
-
Создайте тест с проверкой ответов
-
2 ПОДГРУППА (Варианты 9-16)
-
Вариант 9 - Ресторан "GourmetResto":
-
Реализуйте интерактивное меню с фильтрацией по категориям
-
Добавьте форму бронирования столика с валидацией
-
Создайте слайдер для отзывов клиентов
-
-
Вариант 10 - Библиотека "DigitalLibrary":
-
Реализуйте поиск книг с автодополнением
-
Добавьте систему рейтинга и отзывов для книг
-
Создайте виртуальную "полку" для избранного
-
-
Вариант 11 - Киносайт "MovieHub":
-
Реализуйте рейтинговую систему для фильмов
-
Добавьте трейлеры во всплывающем окне
-
Создайте персонализированные рекомендации
-
-
Вариант 12 - Бронирование отелей "HotelBooking":
-
Реализуйте календарь выбора дат заезда/выезда
-
Добавьте фильтры отелей по удобствам и цене
-
Создайте калькулятор стоимости бронирования
-
-
Вариант 13 - Музыкальный сервис "MusicStream":
-
Реализуйте аудиоплеер с управлением воспроизведением
-
Добавьте создание и управление плейлистами
-
Создайте систему "лайков" для треков
-
-
Вариант 14 - SaaS платформа "CloudService":
-
Реализуйте переключение между тарифами с сравнением
-
Добавьте форму обратной связи с валидацией
-
Создайте анимированную статистику использования
-
-
Вариант 15 - Спортивный портал "SportArena":
-
Реализуйте таблицу результатов с сортировкой
-
Добавьте счетчик матчей в реальном времени
-
Создайте систему голосования за лучшего игрока
-
-
Вариант 16 - Научный журнал "ScienceJournal":
-
Реализуйте систему цитирования статей
-
Добавьте прогресс-бар чтения статьи
-
Создайте модальное окно для авторизации
-
КОНТРОЛЬНЫЕ ВОПРОСЫ
Для всех вариантов вопросы одинаковые:
- Какие методы поиска элементов в DOM вы использовали в работе и в каких случаях каждый из них наиболее предпочтителен?
- Как работает делегирование событий и какие преимущества оно дает при работе с динамически добавляемыми элементами?
- Какие способы создания и добавления новых элементов в DOM вы применяли? В чем разница между
innerHTMLиcreateElement? - Как вы организовали структуру JavaScript-кода в проекте? Какие функции вы вынесли в отдельные модули и почему?
- С какими особенностями обработки событий вы столкнулись и как решили проблемы всплытия и перехвата событий?
- Что такое DOM и как он связан с веб-страницей?
- Как можно выбрать элемент по его идентификатору в DOM?
- Опишите, как можно изменить текст внутри элемента с помощью JavaScript.
- Что такое обработчик событий в JavaScript и как его добавить к элементу?
- Как получить доступ к значениям атрибутов элемента через JavaScript?
- Какие существуют способы добавления нового элемента в DOM?
- Как удалить элемент из DOM?
- Что такое LocalStorage и как с ним работать в JavaScript?
- Как можно сохранять и извлекать данные из LocalStorage?
- Как можно обновить содержимое страницы без ее перезагрузки?
- Какие методы JavaScript позволяют манипулировать стилями элементов на странице?
- В чем заключается различие между методом
getElementByIdиquerySelector? - Как реализовать функциональность добавления нового элемента в список с помощью JavaScript?
- Какие способы сортировки элементов на странице можно реализовать с помощью JavaScript?
- Как реализовать простую форму валидации на JavaScript?
- Как можно изменить класс элемента с помощью JavaScript?
- Как обрабатывать событие клика на кнопке и выполнить определенное действие?
- Что такое событие
submitи как с ним работать в JavaScript? - Как получить значения, введенные пользователем в текстовое поле формы?
- Как реализовать фильтрацию элементов на странице с помощью JavaScript?
- Какие способы сортировки элементов по времени существуют в JavaScript?
- Что такое анимация в контексте JavaScript и как она используется?
- Как добавить кнопку "Наверх", которая плавно прокручивает страницу вверх?
- Как реализовать слайдер изображений с помощью JavaScript?
- Как создать выпадающий список с использованием JavaScript?
- Как создать таймер, который отсчитывает определенное время в JavaScript?
- Как создать калькулятор с возможностью выполнения различных операций на веб-странице?
- Как реализовать функциональность перетаскивания элементов на веб-странице?
- Какие методы используются для работы с изображениями через JavaScript (например, для их масштабирования)?
- Как можно реализовать автоматическое обновление данных на веб-странице?
- Как создать динамическую карту, отображающую местоположение на веб-странице?
ПРАКТИЧЕСКИЕ РЕКОМЕНДАЦИИ
-
Используйте
console.log()для отладки кода -
Обрабатывайте возможные ошибки с помощью try-catch
-
Используйте современный синтаксис ES6+ (стрелочные функции, деструктуризацию, шаблонные строки)
-
Следите за производительностью при работе с большим количеством элементов
-
Тестируйте код в разных браузерах
Примечание: Созданная в этой работе интерактивность будет расширена в следующих лабораторных работах при работе с асинхронными операциями и API.
Состояние ответа
| Номер попытки | Попытка 1. |
|---|---|
| Состояние ответа на задание | Отправлено для оценивания |
| Состояние оценивания | Оценено |
| Оставшееся время | Ответ на задание представлен с опозданием - 16 час. 20 мин. |
| Последнее изменение | пятница, 3 апреля 2026, 16:19 |
| Ответ в виде файла |
|
| Комментарии к ответу | Отобразить комментарии Сохранить комментарий | Отмена |
Отзыв
| Оценка | 8,00 / 10,00 |
|---|---|
| Оценено в | понедельник, 6 апреля 2026, 09:21 |
| Оценено |