Перейти к содержанию

Лабораторная работа №1 - Введение в современную веб-разработку. Проектирование веб-сайта.

1. Теория

1.0. Цель работы

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

Смысл лабораторной работы
Погружение в web-среду, понимание роли JavaScript и формирование инженерной базы для дальнейшей разработки информационных систем.

Ключевой результат
Рабочий web-проект с корректной структурой, базовой версткой под выбранную предметную область, настроенной средой разработки и GitHub-репозиторием, содержащим паспорт предметной области.

1.1. Web-приложение как объект информационной системы

Web-приложение — это программная система, предназначенная для работы через веб-браузер и реализующая бизнес-функции предметной области.

Важно понимать:

  • web-приложение ≠ одна HTML-страница;
  • web-приложение — это структурированный проект;
  • даже простое учебное приложение является заготовкой информационной системы.

В рамках курса каждое web-приложение рассматривается как:

  • будущая информационная система;
  • основа для добавления логики, данных, форм и обработки событий;
  • часть единого проекта, развиваемого в течение семестра.

1.2. Роль JavaScript в web-приложении

JavaScript — это язык программирования, который выполняется в браузере пользователя и отвечает за поведение web-приложения.

JavaScript позволяет:

  • реагировать на действия пользователя;
  • управлять элементами страницы;
  • изменять данные без перезагрузки страницы;
  • реализовывать логику предметной области.

Важно:

  • HTML отвечает на вопрос «что отображается»;
  • CSS — «как выглядит»;
  • JavaScript — «как работает».

1.3. Простейший сценарий JavaScript: подробное объяснение

Рассмотрим минимальный пример JavaScript-кода, который демонстрирует, как web-страница реагирует на действие пользователя.

const button = document.getElementById('actionBtn');

button.addEventListener('click', () => {
    alert('Действие выполнено');
});

1.3.1. Получение элемента страницы

const button = document.getElementById('actionBtn');

На этом этапе JavaScript:

  • обращается к объекту document, представляющему HTML-страницу;
  • ищет элемент с идентификатором id="actionBtn";
  • сохраняет найденный элемент в переменную button.

Важно:

  • HTML-элемент должен существовать на странице;
  • id элемента должен быть уникальным;
  • без этого шага JavaScript не сможет взаимодействовать с элементом.

Результат:

JavaScript получает доступ к конкретному элементу интерфейса.

1.3.2. Подписка на событие

button.addEventListener('click', () => {
    ...
});

Здесь происходит следующее:

  • для элемента button регистрируется обработчик события;
  • событие click означает нажатие пользователем на кнопку;
  • JavaScript ожидает наступления этого события.

Важно понимать:

  • код не выполняется сразу;
  • выполнение произойдёт только после действия пользователя;
  • такой подход называется событийно-ориентированным.

Результат:

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

1.3.3. Определение логики обработки события

() => {
    alert('Действие выполнено');
}

Это функция, которая будет выполнена только в момент клика.

Назначение функции:

  • описывает, что именно должно произойти;
  • содержит прикладную логику;
  • в данном случае выводит сообщение пользователю.

Функция является анонимной и используется только в рамках данного события.

Результат:

Определено поведение системы при наступлении события.

1.3.4. Выполнение действия и отображение результата

alert('Действие выполнено');

Данный вызов:

  • выводит диалоговое окно браузера;
  • информирует пользователя о результате действия;
  • служит простейшей формой обратной связи.

В реальных проектах вместо alert используются:

  • изменение текста на странице;
  • отображение данных;
  • обновление списков;
  • выполнение расчётов.

Результат:

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

1.3.5. Общая логика работы сценария

Цепочка взаимодействия:

Пользователь
     ↓
Нажатие кнопки (событие click)
     ↓
Выполнение JavaScript-кода
     ↓
Отображение результата

В обобщённом виде:

пользователь → событие → логика → результат

1.3.6. Почему этот принцип является базовым

Данный принцип используется во всех web-приложениях:

  • при работе с формами;
  • при обработке кнопок;
  • при динамическом обновлении данных;
  • при взаимодействии с сервером.

В последующих лабораторных работах:

  • логика станет сложнее;
  • появятся проверки, условия, функции и данные;
  • базовая схема взаимодействия останется неизменной.

1.4. Минимально корректная структура web-проекта

project/
├── index.html        // Страница приложения
├── style.css         // Оформление
├── script.js         // Логика JavaScript
├── README.md         // Описание проекта
└── passport.md       // Паспорт предметной области

Данная структура является минимальным, но корректным каркасом web-приложения и используется как основа для дальнейшего развития проекта.

1.4.1. Назначение элементов структуры

1.4.1.1. Папка project/

Корневая папка проекта:

  • открывается в редакторе кода;
  • инициализируется как Git-репозиторий;
  • публикуется на GitHub.

Принцип: один проект — одна папка — один репозиторий.

1.4.1.2. Файл index.html

Главный HTML-файл, точка входа в web-приложение.

Функции:

  • описывает структуру страницы;
  • содержит элементы интерфейса;
  • подключает стили и JavaScript.

HTML отвечает на вопрос: что находится на странице.

1.4.1.3. Файл style.css

Файл каскадных таблиц стилей.

Функции:

  • задаёт внешний вид страницы;
  • управляет цветами, размерами и расположением элементов;
  • отделяет оформление от логики.

CSS отвечает на вопрос: как выглядит приложение.

1.4.1.4. Файл script.js

Файл с кодом JavaScript.

Функции:

  • выполняется в браузере;
  • обрабатывает действия пользователя;
  • реализует логику предметной области.

JavaScript отвечает на вопрос: как работает приложение.

1.4.1.5. Файл README.md

Описание проекта в формате Markdown, отображаемое на GitHub.

Назначение:

  • краткое описание проекта;
  • указание предметной области;
  • навигация по документам проекта.

1.4.1.6. Файл passport.md

Паспорт предметной области — аналитический документ, используемый на протяжении всего семестра.

Назначение:

  • фиксирует предметную область;
  • описывает пользователей, сущности и сценарии;
  • связывает лабораторные работы с реализацией.

Паспорт не является программным кодом и подтверждает целостность выполнения проекта.

Пример заполненного паспорта предметной области

1.4.2. Взаимосвязь файлов проекта

  1. Браузер открывает index.html.
  2. HTML подключает style.css и script.js.
  3. CSS отвечает за оформление.
  4. JavaScript управляет поведением.
  5. README и паспорт описывают контекст проекта.

Схема:

Пользователь
     ↓
 index.html
   ↙     ↘
style.css  script.js

1.5. Паспорт предметной области (копировать в свою работу)

Паспорт предметной области — это текстовый документ, который фиксирует:

  • название предметной области;
  • назначение системы;
  • основных пользователей;
  • основные сущности (на уровне слов, без БД);
  • предполагаемые функции.

Пример структуры passport.md:

# Паспорт предметной области

> **Документ используется на протяжении всего семестра**  
> Дисциплина: *Разработка web-приложений на языке JavaScript*

---

## 1. Общие сведения

| Параметр | Значение |
|---------|----------|
| ФИО студента | |
| Группа | |
| Номер варианта | |
| Предметная область | |
| Краткое назначение системы | |
| Тип приложения | Web-приложение (client-side) |
| Используемые технологии | HTML, CSS, JavaScript (ES2023+) |

---

## 2. Описание предметной области

Краткое описание предметной области (5–7 предложений):  
что учитывается в системе, для кого она предназначена, какие задачи решает.

---

## 3. Пользователи системы

| Роль пользователя | Описание функций |
|------------------|------------------|
| Пользователь | |
| Администратор / Оператор | |
| (при необходимости) | |

---

## 4. Основные сущности предметной области (данные)

| Сущность | Описание | Основные атрибуты |
|--------|----------|-------------------|
| Сущность 1 | | |
| Сущность 2 | | |
| Сущность 3 | | |

> Допускается начинать с 1–2 сущностей и расширять модель в ходе выполнения лабораторных работ.

---

## 5. Пользовательские сценарии (Use Case)

| № | Сценарий | Краткое описание |
|--|---------|------------------|
| 1 | | |
| 2 | | |
| 3 | | |

---

## 6. Реализация по лабораторным работам

### Лабораторная работа №1

**Введение в современную веб-разработку. Проектирование веб-сайта**

| Реализуемый элемент            | Описание |
| ------------------------------ | -------- |
| Проектирование структуры сайта |          |
| Организация файловой структуры |          |
| Базовая HTML-разметка          |          |
| Подключение ресурсов           |          |
| Архитектурное разделение слоёв |          |

---

### Лабораторная работа №2

**Основы синтаксиса JavaScript. Операторы языка**

| Реализуемый элемент      | Описание |
| ------------------------ | -------- |
| Переменные и типы данных |          |
| Арифметические операторы |          |
| Логические операторы     |          |
| Условные конструкции     |          |
| Циклические конструкции  |          |

---

### Лабораторная работа №3

**Объектная модель документа (DOM). Доступ к элементам веб-страницы**

| Реализуемый элемент                | Описание |
| ---------------------------------- | -------- |
| Получение элементов DOM            |          |
| Изменение содержимого элементов    |          |
| Создание и удаление узлов          |          |
| Обработка событий                  |          |
| Динамическое обновление интерфейса |          |

---

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

**Регулярные выражения и асинхронное взаимодействие**

| Реализуемый элемент      | Описание |
| ------------------------ | -------- |
| Регулярные выражения     |          |
| Пользовательские функции |          |
| Асинхронные операции     |          |
| Получение данных (fetch) |          |
| Обработка ошибок         |          |


---

## 7. Требования к качеству реализации

| Критерий | Требование |
|--------|------------|
| Читаемость кода | Осмысленные имена переменных и функций |
| Структура проекта | Разделение HTML / CSS / JS |
| Обработка ошибок | Предусмотрена |
| Валидация данных | Реализована |
| Отладка | Использованы DevTools |

---

## 8. Итоговый результат

**Реализованный функционал:**  
(краткое перечисление возможностей системы)

**Потенциал развития:**  
(что может быть добавлено при дальнейшем развитии проекта)

---

## 9. Вывод

Краткий вывод (2–3 предложения) о полученных навыках и результатах работы над предметной областью.

---

## Примечание

Паспорт используется во всех последующих лабораторных работах.

⚠ Паспорт предметной области обязателен и хранится в GitHub-репозитории.

1.6. Git и GitHub как часть инженерной культуры

GitHub в рамках курса используется:

  • как единое хранилище проекта;
  • как средство фиксации результатов обучения;
  • как основа для формирования портфолио разработчика.

Каждая лабораторная работа:

  • выполняется в одном и том же репозитории;
  • дополняет уже существующую структуру проекта;
  • не создаётся «с нуля», а развивает ранее созданное приложение.

Таким образом, проект эволюционирует от простой заготовки до полноценного учебного web-приложения.

1.7. Как начать работу с GitHub (пошагово)

В данном разделе слово «Шаг» заменено на подпункты для единообразия структуры документа.

1.7.1. Создание аккаунта на GitHub

  1. Перейдите на сайт https://github.com
  2. Нажмите кнопку Sign up.

  3. Укажите:

  4. адрес электронной почты;

  5. имя пользователя (username);
  6. пароль.
  7. Подтвердите регистрацию через письмо на почте.

Результат: У вас есть личный аккаунт GitHub, в котором будут храниться все учебные проекты.

1.7.2. Создание нового репозитория

  1. После входа в аккаунт нажмите New repository.

  2. Укажите:

  3. Repository name — название проекта (например: web-app-js);

  4. Description — краткое описание (по желанию);
  5. тип репозитория — Public;
  6. Отметьте галочку Add a README file.
  7. Нажмите Create repository.

Результат: Создан пустой репозиторий с файлом README.md.

1.7.3. Создание проекта на компьютере

  1. Создайте папку проекта на компьютере.
  2. Откройте её в редакторе кода.

  3. Создайте файлы:

  4. index.html

  5. style.css
  6. script.js
  7. passport.md

Эта папка является локальной версией проекта.

1.7.4. Клонирование репозитория

Клонирование — это копирование репозитория с GitHub на компьютер.

  1. На странице репозитория нажмите кнопку Code.
  2. Скопируйте HTTPS-ссылку.
  3. В терминале выполните команду:
git clone https://github.com/username/repository-name.git
  1. Перейдите в папку проекта:
cd repository-name

Результат: На компьютере появилась копия репозитория, связанная с GitHub.

1.7.5. Добавление файлов проекта в репозиторий

После создания или изменения файлов необходимо зафиксировать изменения.

  1. Проверить состояние проекта:
git status
  1. Добавить файлы:
git add .
  1. Зафиксировать изменения (коммит):
git commit -m "Добавлена базовая структура проекта"

Результат: Изменения сохранены в локальной истории Git.

1.7.6. Отправка изменений на GitHub

Чтобы опубликовать изменения в удалённом репозитории:

git push

Результат: Файлы проекта отображаются на GitHub и доступны преподавателю.

1.7.7. Внесение изменений в проект (типовой цикл работы)

Каждая лабораторная работа выполняется по одному и тому же циклу:

  1. Открыть проект.
  2. Внести изменения в файлы.
  3. Проверить работу приложения.
  4. Выполнить команды:
git add .
git commit -m "Лабораторная работа №X"
git push

Этот цикл повторяется на протяжении всего семестра.

1.7.8. Почему используется один репозиторий

Использование одного репозитория позволяет:

  • видеть развитие проекта во времени;
  • отслеживать вклад студента;
  • формировать целостное понимание архитектуры приложения;
  • работать так же, как в реальных инженерных проектах.

Проект не удаляется и не пересоздаётся — он постепенно развивается.

2. Задание

2.0. Исходные данные (предметная область)

Для выполнения лабораторной работы используется предметная область, закреплённая за студентом на семестр (см. перечень в ЛМС - ссылка Предметные области).

2.1. Описание задания

2.1.1. Создание структуры проекта

Необходимо:

  1. Создать папку web-проекта.

  2. Добавить файлы:

  3. index.html

  4. style.css
  5. script.js
  6. README.md

  7. passport.md

  8. Связать HTML с CSS и JavaScript.

2.1.2. Простая верстка под предметную область

В index.html необходимо реализовать простейшую статическую верстку, отражающую Вашу предметную область.

Пример (обобщённый):

<h1>Система учёта заявок</h1>

<section>
    <h2>Создание заявки</h2>
    <p>Форма будет реализована в следующих лабораторных работах</p>
</section>

<section>
    <h2>Список заявок</h2>
    <p>Отображение данных будет добавлено позже</p>
</section>

Требования:

  • заголовок системы;
  • 2–3 логических блока;
  • текст должен соответствовать предметной области студента.

❗ Логика обработки данных не требуется — только структура.

2.1.3. Подключение JavaScript

В script.js достаточно:

  • корректного подключения файла;
  • одного простого действия (например, вывод сообщения в консоль).

Цель — проверить работоспособность среды.

2.1.4. Размещение проекта на GitHub

Необходимо:

  1. Создать репозиторий на GitHub.
  2. Инициализировать Git.
  3. Добавить все файлы проекта.
  4. Выполнить коммит.
  5. Опубликовать репозиторий.

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

  • README.md;
  • passport.md;
  • исходные файлы проекта.

2.2. Для выполнения требуется

  1. Шаблон отчёта, указанный в описании лабораторной работы.
  2. Вариант задания, закреплённый за студентом на семестр и опубликованный в ЛМС.
  3. Требования к оформлению — согласно методическим указаниям в ЛМС или соответствующему разделу документации.
  4. Ссылка на репозиторий,прикрепляется студентом к отчету.

2.3. Запрет

❗ Запрещается использование систем искусственного интеллекта для выполнения лабораторной работы.

Работы, выполненные с использованием ИИ, полностью или частично скопированные, а также не сданные, оцениваются в 0 баллов без возможности доработки.

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

  1. Что такое web-приложение в контексте ИС?
  2. Какую роль выполняет JavaScript?
  3. Почему важно разделять HTML, CSS и JS?
  4. Что такое паспорт предметной области и зачем он нужен?
  5. Почему GitHub используется на раннем этапе?
  6. Что такое репозиторий?
  7. Какие изменения фиксируются коммитом?
  8. Почему проект развивается в одном репозитории весь семестр?
  9. Чем учебное web-приложение отличается от «просто сайта»?
  10. Как эта лабораторная связана с последующими работами?

4. Чек-лист для самопроверки

Баллы Критерии оценки
10 Проект полностью оформлен, структура корректна, есть верстка под предметную область, GitHub-репозиторий, README и паспорт
8 Проект рабочий, допущены незначительные недочёты
6 Проект создан формально
4 Структура нарушена
2 Файлы разрознены
0 Работа не сдана или выполнена с использованием ИИ

5. Шаблон отчёта

👉 Скачать шаблон отчёта