Lab - master - ankarr/Web

Lab
240 строк22 KB
ankarr
create Lab
12 янв 2026, 12:04
12 янв 2026, 12:04aec63af
1 **Принципы работы веб-сервера:**
Веб-сервер — программа, обрабатывающая HTTP(S)-запросы. Основные этапы:
прослушивание порта (80/443), приём запроса, парсинг заголовков, маршрутизация,
обработка (статический файл или динамический скрипт), формирование ответа (статус,
заголовки, тело), отправка клиенту.
2 **Синхронная и асинхронная обработка запросов. Apache и nginx:**
**Синхронная** (Apache mpm_prefork): каждый запрос — отдельный процесс/поток,
блокируется при I/O-операциях. **Асинхронная** (Nginx, Apache mpm_event): event-loop
обрабатывает множество запросов в одном потоке, не блокируясь. **Apache** —
модульный, гибкий, .htaccess. **Nginx** — производительный, часто как прокси для
статики и балансировщик.
3 **Виды хостинга:**
**Виртуальный (shared):** общие ресурсы сервера, дёшево, ограниченный контроль.
**VPS:** изолированная виртуальная машина с root-доступом, выделенные ресурсы.
**Выделенный сервер:** физический сервер целиком, полный контроль, дорого.
4 **Типы веб-приложений:**
**Static:** готовые файлы HTML/CSS/JS. **SSR:** HTML генерируется сервером при
каждом запросе (SEO-friendly). **SPA:** одна страница, динамический рендеринг JS на
клиенте. **PWA:** SPA с возможностями нативных приложений (оффлайн, push-
уведомления).
5 **Гиперссылки и изображения:**
Тег `<a href="URL" target="_blank">текст</a>` создаёт ссылку. Атрибуты: `href`, `target`,
`download`. Тег `<img src="путь" alt="описание" width="100">` вставляет изображение. `alt`
— обязательный для доступности.
6 **Разделение оформления и содержания. CSS:**
Принцип: HTML отвечает за структуру, CSS — за оформление. **Подключение CSS:**
внешний файл (`<link rel="stylesheet" href="style.css">`), встроенный (`<style>...</style>`),
инлайн (`style="..."`). Внешнее подключение — наиболее предпочтительно.
7 **Определение стилей — селекторы:**
**По тегу:** `p {}`. **По классу:** `.class {}`. **По ID:** `#id {}`. **Инлайн:** `style="..."`
(высший приоритет). **Группировка:** `h1, h2 {}`. **Вложенность:** `div p {}`.
8 **CSS. Наследование и специфичность:**
**Наследование:** некоторые свойства (цвет, шрифт) передаются от родителя потомку.
**Специфичность** (вес селектора): инлайн > ID > класс/псевдокласс > тег >
универсальный. `!important` перебивает всё.
9 **HTML-фреймворки. Bootstrap:**
CSS-фреймворк для быстрой адаптивной вёрстки. Компоненты: сетка, кнопки, формы,
навигация. Использует классы-утилиты. Подключается через CDN или локально.
10 **CSS Grid:**
Двумерная система вёрстки. Контейнер: `display: grid`. Определение колонок/строк:
`grid-template-columns: repeat(3, 1fr)`. Управление элементами: `grid-column`, `grid-row`.
11 **Flexbox:**
Одномерная модель для гибкого расположения элементов. Контейнер: `display: flex`.
Основные свойства: `justify-content` (горизонтальное выравнивание), `align-items`
(вертикальное), `flex-direction`.
12 **Медиа-запросы:**
Правила `@media` для адаптивного дизайна. Пример: `@media (max-width: 768px) { ... }`.
Позволяют применять стили в зависимости от параметров устройства (ширина,
ориентация).
13 **Препроцессоры CSS (Sass/SCSS):**
Надстройка над CSS с переменными, вложенностью, миксинами, функциями.
Компилируется в обычный CSS. Повышает удобство поддержки.
14 **Модульные сетки:**
Разбиение макета на колонки (часто 12). Элементы занимают заданное число колонок.
Основа для адаптивного дизайна. Реализуется через Grid, Flexbox или фреймворки.
15 **Растровые форматы для веба:**
**JPEG** — фото с сжатием. **PNG** — графика с прозрачностью. **GIF** — простая
анимация. **WebP** — современный формат с лучшим сжатием.
16 **Векторные форматы для веба:**
**SVG** — масштабируемая векторная графика, задаётся XML-кодом. Подходит для
иконок, логотипов. Можно стилизовать CSS.
17 **JavaScript в веб-страницах. Синхронное и асинхронное выполнение:**
Подключается тегом `<script>`. **Атрибуты:** `async` (загрузка и выполнение
параллельно с HTML), `defer` (выполнение после загрузки HTML). **Синхронный** код
выполняется построчно. **Асинхронный** (setTimeout, промисы) не блокирует основной
Поток.
18 **JavaScript. Переменные, типы данных:**
Объявление: `let`, `const`, `var`. **Типы данных:** примитивы (string, number, boolean,
null, undefined, symbol, bigint) и объекты (Object, Array, Function). Динамическая типизация.
19 **JavaScript. Методы вывода и основные конструкции:**
`alert()` — диалоговое окно. `console.log()` — вывод в консоль. `document.write()` —
запись в документ (редко). Конструкции: условия (`if/else`, `switch`), циклы (`for`, `while`).
20 **JavaScript. Объекты и массивы:**
**Объект:** коллекция пар ключ-значение `{ key: value }`. **Массив:** упорядоченный
список `[1, 2, 3]`. Массив — частный случай объекта.
21 **JavaScript. Функции:**
`function имя(параметры) { ... }` или `const имя = function() { ... }`. Вызов:
`имя(аргументы)`. Возврат значения через `return`.
22 **JavaScript. Базовые методы массивов:**
`push/pop` — добавление/удаление с конца. `shift/unshift` — с начала. `length` — длина.
Изменяют исходный массив.
23 **JavaScript. Методы перебора массивов:**
`forEach` — просто перебор. `map` — создаёт новый массив. `filter` — фильтрует по
условию. Не изменяют исходный массив.
24 **JavaScript. Метод reduce:**
`arr.reduce((аккумулятор, текущий) => { ... }, начальноеЗначение)` — сводит массив к
одному значению (сумма, агрегация).
25 **Стрелочные функции:**
Сокращённый синтаксис: `(параметры) => выражение`. Не имеют своего `this` (берут из
внешнего контекста), нельзя использовать как конструктор.
26 **Spread-оператор и Rest-параметры:**
**Spread (`...`):** разворачивает массив/объект: `[...arr]`, `{ ...obj }`. **Rest:** собирает
оставшиеся аргументы в массив: `function(...args) {}`.
27 **Document Object Model (DOM):**
Древовидное представление HTML-документа, где каждый элемент — узел (node).
Позволяет JS изменять структуру, содержимое и стили страницы.
28 **Поиск элементов DOM:**
`getElementById()`, `getElementsByClassName()`, `getElementsByTagName()`,
`querySelector()` (первый элемент), `querySelectorAll()` (все элементы).
29 **Свойства элементов DOM:**
`textContent`, `innerHTML`, `style`, `classList`, `value` (для input), `src`, `href`. Позволяют
читать и изменять содержимое и атрибуты.
30 **Планирование и таймеры:**
`setTimeout(функция, мсек)` — выполнить один раз через задержку.
`setInterval(функция, мсек)` — повторять с интервалом. Очистка:
`clearTimeout/clearInterval`.
31 **Обработка событий:**
`element.addEventListener('click', обработчик)`. Объект события `event` содержит
информацию (тип, target, координаты). `event.preventDefault()` отменяет действие по
Умолчанию.
32 **Форматы JSON и XML:**
**JSON** — текстовый формат обмена данными, синтаксис объектов JS. Легковесный,
легко парсится. **XML** — язык разметки для хранения и передачи структурированных
данных, более строгий и многословный.
33 **Основы API. REST API:**
**API** — интерфейс взаимодействия программ. **REST** — архитектурный стиль:
клиент-серверная, stateless, кэширование, единообразие интерфейса (ресурсы в URL,
HTTP-методы). Пример: `GET /api/users`.
34 **Асинхронность в JavaScript:**
Однопоточная модель с **Event Loop**. Асинхронные операции (таймеры, запросы)
выполняются через механизм обратных вызовов (callbacks), не блокируя основной поток.
35 **Промисы (Promises) и их состояния:**
Объект для работы с асинхронными операциями. **Состояния:** `pending` (ожидание),
`fulfilled` (успех), `rejected` (ошибка). Методы: `then()` (успех), `catch()` (ошибка), `finally()`
(всегда).
36 **Синтаксис async/await:**
Надстройка над промисами. `async` функция всегда возвращает промис. `await`
приостанавливает выполнение функции до разрешения промиса. Позволяет писать
асинхронный код в синхронном стиле.
37 **Получение данных по API: fetch API:**
Современный API для HTTP-запросов. `fetch(url, options)` возвращает промис с объектом
Response. Пример: `fetch().then(res => res.json()).then(data => ...)`.
38 **Заголовки HTTP:**
Метаданные запроса/ответа. Примеры: `Content-Type` (тип данных), `Authorization`
(токен), `User-Agent` (клиент), `Cache-Control` (кэширование).
39 **Основные методы HTTP:**
**GET** — получение ресурса. **POST** — создание. **PUT** — полное обновление.
**PATCH** — частичное обновление. **DELETE** — удаление.
40 **Классы кодов ответов HTTP:**
**2xx** — успех (200 OK). **3xx** — перенаправление (301 Moved Permanently).
**4xx** — ошибка клиента (404 Not Found). **5xx** — ошибка сервера (500 Internal Server
Error).
41 **Хранение данных в браузере. Cookies:**
Небольшие строки (до 4 Кб), хранящиеся на клиенте и отправляемые с каждым
запросом на сервер. Используются для сессий, аутентификации, отслеживания. Имеют
срок действия.
42 **LocalStorage и SessionStorage:**
**LocalStorage** — постоянное хранилище (до очистки браузера). **SessionStorage** —
данные на время сессии (до закрытия вкладки). Объём ~5-10 Мб. API: `setItem()`,
`getItem()`, `removeItem()`.
43 **Компоненты Node.js. Простейший веб-сервер:**
Node.js — среда выполнения JS на сервере. Модули: `http`, `fs`, `path`. Пример сервера:
`http.createServer((req, res) => { res.end('Hello'); }).listen(3000);`
44 **Node.js. Базовая структура проекта. Package.json:**
`package.json` — манифест проекта с метаданными: имя, версия, зависимости
(`dependencies`, `devDependencies`), скрипты (`scripts`). Структура проекта: `src/`,
`node_modules/`, `package.json`.
45 **Событийный цикл (Event Loop) в Node.js:**
Механизм выполнения асинхронного кода. Этапы: timers (таймеры), pending callbacks,
poll (I/O), check (setImmediate). Основан на libuv.
46 **Fastify. Структура проекта:**
Минималистичный веб-фреймворк для Node.js. Структура: `app.js` (основной файл),
`routes/` (маршруты), `plugins/` (плагины), `controllers/` (логика), `services/` (бизнес-логика).
47 **Маршрутизация в Fastify:**
Определение эндпоинтов: `fastify.method('путь', обработчик)`. Пример:
`fastify.get('/users', async (req, reply) => { ... })`. Поддерживает вложенные маршруты.
48 **Fastify. Объект request. Обработка строки запроса:**
`req.query` содержит параметры строки запроса. Пример: `/users?name=John` →
`req.query.name === 'John'`.
49 **Fastify. Объект request. Параметры пути:**
Параметры определяются в пути: `fastify.get('/users/:id', ...)`. Доступ через `req.params.id`.
50 **Fastify. Объект reply. Формирование ответа:**
`reply.send(data)` отправляет ответ. Установка статуса: `reply.code(201).send(...)`.
Заголовки: `reply.header('key', 'value')`.
51 **Fastify. Плагины:**
Модули для расширения функциональности. Регистрация: `fastify.register(plugin)`.
Автоматически инкапсулируются и поддерживают асинхронную загрузку.
52 **Fastify. Конфигурация и .env:**
Использование переменных окружения через `process.env`. Для управления
конфигурацией — плагин `@fastify/env`, который валидирует переменные через JSON
Schema.
53 **Fastify. Валидация данных на основе JSON Schema:**
Встроенная валидация через `schema` в роуте. Пример: `schema: { body: { type: 'object',
properties: { name: { type: 'string' } } } }`. Автоматически возвращает 400 при ошибке.
54 **Fastify. Подключение к СУБД PostgreSQL:**
Использование драйвера `pg` (node-postgres). Создание пула соединений: `const pool =
new Pool({ connectionString })`. Выполнение запросов: `pool.query('SELECT ...')`.
55 **Fastify. Шаблон Singleton (Одиночка):**
Гарантирует единственный экземпляр класса (например, подключение к БД).
Реализуется через статическое свойство `instance` и приватный конструктор.
56 **Fastify. Шаблон Decorator (Декоратор):**
Динамическое добавление новой функциональности объектам. В Fastify —
`fastify.decorate('имя', значение)` для добавления методов/свойств в контекст приложения
или запроса.
57 **Fastify. Шаблон Dependency Injection (Внедрение зависимостей):**
Передача зависимостей (сервисы, БД) извне, а не создание внутри класса. В Fastify
реализуется через плагины и декораторы для регистрации сервисов.
58 **Fastify. Выполнение простых запросов:**
Использование `pool.query()` для SQL-запросов. Пример: `const result = await
pool.query('SELECT * FROM users WHERE id = $1', [id])`.
59 **SQL-инъекции:**
Атака внедрения вредоносного SQL-кода через пользовательский ввод. **Защита:**
параметризованные запросы (placeholders `$1`), валидация входных данных, ORM.
60 **Fastify. Параметризованные запросы:**
Использование плейсхолдеров в SQL: `pool.query('SELECT * FROM users WHERE id = $1',
[id])`. Защищает от SQL-инъекций, экранирует значения.
61 **Транзакции в базах данных:**
Группа операций, выполняемая атомарно (всё или ничего). **Команды:** `BEGIN` —
начало, `COMMIT` — подтверждение, `ROLLBACK` — откат. Пример: `BEGIN; UPDATE ...;
INSERT ...; COMMIT;`
62 **Аутентификация и авторизация:**
**Аутентификация** — проверка личности (кто вы?). **Авторизация** — проверка
прав доступа к ресурсам (что вам разрешено?).
63 **Стратегии аутентификации:**
**Сессионная** (сервер хранит сессию). **Токен-базированная** (JWT, клиент хранит
токен). **OAuth** (делегирование доступа через провайдера). **Биометрическая**.
64 **Хранение учетных данных:**
Пароли **никогда** не хранятся в открытом виде. Хранится только хэш (с солью).
Данные для аутентификации передаются по HTTPS.
65 **Хэширование паролей. Соль. Bcrypt:**
**Хэширование** — необратимое преобразование пароля. **Соль** — случайная
строка, добавляемая к паролю перед хэшированием для защиты от rainbow-таблиц.
**Bcrypt** — адаптивный алгоритм хэширования.
66 **JWT: общие принципы:**
JSON Web Token — компактный способ передачи данных между сторонами в виде JSON-
объекта, подписанного цифровой подписью. Состоит из трёх частей, разделённых
Точками.
67 **Структура токена JWT:**
`header.payload.signature`. **Header** — алгоритм и тип токена. **Payload** — данные
(claims). **Signature** — подпись для верификации. Кодируется в Base64Url.
68 **Fastify. Реализация JWT:**
Плагин `@fastify/jwt`. Регистрация: `fastify.register(jwt, { secret: 'ключ' })`. Генерация
токена: `const token = fastify.jwt.sign(payload)`. Верификация: `await request.jwtVerify()`.
69 **Fastify. Защита маршрутов с помощью JWT:**
Добавление хука `preValidation` или использование `onRequest: fastify.authenticate`.
Проверяет наличие и валидность токена в заголовке `Authorization: Bearer <token>`.
70 **Ролевая модель в авторизации:**
Пользователям назначаются **роли**, а ролям — **права** доступа. Например, роли:
`user`, `admin`, `moderator`. Проверка: `if (user.role === 'admin') { ... }`. Часто реализуется
через мидлвары или декораторы