---

Отлично, я подготовил для вас все 30 билетов с готовыми ответами на теоретические вопросы и примерами кода для практических заданий. Вы можете использовать это для подготовки или проведения экзамена.

---

Билет №1

Задание №1: Семантическая вёрстка — подход к созданию HTML-кода, при котором теги несут смысловую нагрузку, описывая структуру и содержание контента (а не просто внешний вид). 5 семантических тегов:

· <header> — шапка сайта или раздела.
· <nav> — блок навигации (меню).
· <main> — основное уникальное содержимое страницы.
· <article> — самостоятельная единица контента (статья, пост).
· <footer> — подвал сайта или раздела.

Задание №2:

· Блочные (block): занимают всю ширину родителя, начинаются с новой строки. Примеры: <div>, <p>, <h1>.
· Строчные (inline): занимают только нужную ширину, не переносят строку. Примеры: <span>, <a>, <img>.
· Изменение через CSS: display: block;, display: inline;, display: inline-block;.

Задание №3:

```html
<table border="1">
  <caption>Список людей</caption>
  <tr><th>Имя</th><th>Возраст</th><th>Город</th></tr>
  <tr><td>Анна</td><td>25</td><td>Москва</td></tr>
  <tr><td>Иван</td><td>30</td><td>Питер</td></tr>
</table>
```

---

Билет №2

Задание №1:

· GET: данные в URL, есть ограничение длины, используется для получения данных, можно кэшировать.
· POST: данные в теле запроса, нет ограничения по длине, используется для отправки (логины, файлы).
· Предпочтительнее: GET для поиска/фильтров (безопасные действия), POST для форм с паролями или загрузкой.

Задание №2: HTML-сущности — это закодированные символы, начинающиеся с & и заканчивающиеся ;. Вывод: &lt; для <, &gt; для >, &copy; для ©.

Задание №3:

```html
<ul>
  <li>Фрукты
    <ol><li>Яблоки</li><li>Бананы</li></ol>
  </li>
  <li>Овощи
    <ol><li>Морковь</li><li>Картофель</li></ol>
  </li>
  <li>Молочные
    <ol><li>Молоко</li><li>Сыр</li></ol>
  </li>
</ul>
```

---

Билет №3

Задание №1: DOM (Document Object Model) — это объектное представление HTML-документа в памяти браузера в виде дерева узлов. Разница с исходным HTML: DOM может быть изменен скриптами (добавлены/удалены узлы), а исходный код остается неизменным.

Задание №2:

· innerHTML: парсит строку как HTML, удаляет старые дочерние элементы (производительность ниже, риск XSS).
· createElement: создает элемент через API, безопаснее и быстрее для множественных добавлений.

Задание №3:

```html
<img src="photo.jpg" alt="Описание фото" width="300" height="200">
```

---

Билет №4

Задание №1: 5 методов поиска узлов:

1. getElementById
2. getElementsByClassName
3. getElementsByTagName
4. querySelector
5. querySelectorAll

Задание №2:

· querySelectorAll возвращает статическую NodeList (не обновляется при изменениях DOM).
· getElementsByClassName возвращает живую HTMLCollection (автообновляется).

Задание №3:

```html
<video controls width="640">
  <source src="video.mp4" type="video/mp4">
  Ваш браузер не поддерживает видео.
</video>
```

---

Билет №5

Задание №1:

· element.onclick = func: можно назначить только один обработчик (новый перезапишет старый).
· addEventListener: можно добавить несколько обработчиков на одно событие.

Задание №2: Всплытие событий — когда событие срабатывает на вложенном элементе, затем последовательно на всех родителях. Остановить: event.stopPropagation().

Задание №3:

```html
<label><input type="radio" name="size" value="S"> S</label>
<label><input type="radio" name="size" value="M"> M</label>
<label><input type="radio" name="size" value="L"> L</label>
<label><input type="checkbox" name="news"> Подписаться на новости</label>
```

---

Билет №6

Задание №1:

· getAttribute('class') — возвращает значение атрибута в HTML (строку).
· className — свойство DOM-объекта, работает быстрее, тоже строка.

Задание №2: input.value отражает текущее состояние поля после ввода пользователем. getAttribute('value') хранит только первоначальное значение из HTML и не меняется динамически.

Задание №3:

```html
<select name="city">
  <option>Москва</option>
  <option selected>Питер</option>
  <option>Казань</option>
  <option>Новосибирск</option>
</select>
```

---

Билет №7

Задание №1: Способы изменения CSS через JS:

· Свойство style: element.style.color = 'red';
· Метод setAttribute: element.setAttribute('style', 'color:red')
· Работа с классами: element.classList.add('new-class')

Задание №2:

· element.style.color — только инлайн-стили, установленные через JS или атрибут style.
· getComputedStyle — финальные вычисленные стили с учетом всех CSS-правил.

Задание №3:

```html
<a href="https://google.com" target="_blank" rel="noopener noreferrer">Google</a>
```

---

Билет №8

Задание №1: Делегирование событий — когда обработчик вешается на родителя и ловит события от дочерних элементов (благодаря всплытию). Полезно для динамически добавляемых элементов.

Задание №2: Через проверку event.target.closest('селектор') или event.target.matches('селектор') внутри обработчика родителя.

Задание №3:

```html
<a href="#end">Перейти к концу страницы</a>
<div style="height: 1000px;"></div>
<div id="end">Конец страницы</div>
```

---

Билет №9

Задание №1:

· localStorage: хранит данные бессрочно (до явного удаления), доступен во всех вкладках.
· sessionStorage: живет до закрытия вкладки, данные изолированы для каждой вкладки.

Задание №2:

```js
localStorage.setItem('key', 'value');
const data = localStorage.getItem('key');
```

Задание №3:

```html
<article>
  <header><h1>Заголовок статьи</h1></header>
  <time datetime="2026-05-01">1 мая 2026</time>
  <p>Текст статьи...</p>
  <footer>Автор: Иван</footer>
</article>
```

---

Билет №10

Задание №1:

· Погружение — событие идет от корня к целевому элементу.
· Всплытие — от целевого элемента к корню.
· Порядок: сначала погружение, потом всплытие.

Задание №2:

· stopPropagation() — останавливает дальнейшее распространение события (не дает всплыть/погрузиться).
· preventDefault() — отменяет действие по умолчанию (например, отправку формы или переход по ссылке).

Задание №3:

```js
function addItem(text) {
  const li = document.createElement('li');
  li.textContent = text;
  document.getElementById('list').appendChild(li);
}
```

---

Билет №11

Задание №1: Селекторы — шаблоны для выбора элементов. Типы:

1. Универсальный *
2. По тегу div
3. По классу .class
4. По ID #id
5. Атрибута [type="text"]

Задание №2:

· class — может быть много элементов с одним классом, в CSS обозначается ., в JS: getElementsByClassName.
· id — уникальный на странице, в CSS #, в JS: getElementById.

Задание №3:

```html
<button onclick="document.body.style.backgroundColor = '#'+Math.floor(Math.random()*16777215).toString(16)">Случайный цвет</button>
```

---

Билет №12

Задание №1: Псевдоклассы — задают состояние элемента:

· :hover — при наведении
· :nth-child(2) — второй дочерний элемент
· :focus — при фокусе

Задание №2: Псевдоэлементы создают виртуальные элементы:

· ::before — вставляет контент до содержимого
· ::after — после содержимого

Задание №3: Реализация вкладок через JS (пример для одного блока):

```html
<style>.tab-content { display: none; } .active { display: block; }</style>
<button onclick="showTab(1)">Tab1</button> ...
<div id="tab1" class="tab-content active">Контент 1</div>
<script>
function showTab(n) { /* скрыть все, показать нужный */ }
</script>
```

---

Билет №13

Задание №1: Flexbox — одномерная модель раскладки. Основные свойства контейнера: display: flex, flex-direction, justify-content, align-items, flex-wrap.

Задание №2:

· justify-content — выравнивание по главной оси (горизонталь, если row).
· align-items — выравнивание по поперечной оси (вертикаль, если row).

Задание №3: Добавить сохранение в localStorage:

```js
localStorage.setItem('activeTab', n);
window.onload = () => showTab(localStorage.getItem('activeTab') || 1);
```

---

Билет №14

Задание №1: Grid — двумерная сетка. Отличие от Flexbox: Grid управляет и строками, и колонками одновременно, Flexbox — только одним направлением.

Задание №2:

```css
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto 200px;
```

Задание №3:

```html
<form>
  <input type="text" name="name" placeholder="Имя">
  <input type="email" name="email" placeholder="Email">
  <textarea name="message"></textarea>
  <button>Отправить</button>
</form>
```

---

Билет №15

Задание №1: JSON — текстовый формат данных.

```js
const obj = {a:1};
const json = JSON.stringify(obj);
const back = JSON.parse(json);
```

Задание №2: Через fetch с методом POST и FormData.

Задание №3:

```js
form.addEventListener('submit', (e) => {
  e.preventDefault();
  console.log(Object.fromEntries(new FormData(form)));
});
```

---

Билет №16

Задание №1: Асинхронность — выполнение кода без блокировки главного потока (таймеры, fetch, события).

Задание №2: Promise — объект-результат асинхронной операции. Состояния: pending (ожидание), fulfilled (успех), rejected (ошибка).

Задание №3:

```js
let count = 10;
const timer = setInterval(() => {
  console.log(count--);
  if(count < 0) clearInterval(timer);
}, 1000);
```

---

Билет №17

Задание №1: async/await — синтаксический сахар над Promise. async функция всегда возвращает Promise, await ждет его выполнения.

Задание №2: Ошибки обрабатываются через try/catch:

```js
try { await fetch(...) } catch(e) { console.error(e); }
```

Задание №3:

```js
async function getData() {
  try { return await fetch('/api').then(r=>r.json()); }
  catch(e) { console.log('Ошибка', e); }
}
```

---

Билет №18

Задание №1: (Вопрос по бухгалтерии — не относится к HTML/CSS/JS, вероятно, ошибочно попал в билет).

Задание №2:

· var — функциональная область видимости, можно переопределять.
· let/const — блочная область видимости. const нельзя переприсвоить.

Задание №3:

```html
<button id="counter">Кликов: 0</button>
<script>
let count=0; button.onclick=()=>{button.textContent=`Кликов: ${++count}`;};
</script>
```

---

Билет №19

Задание №1: POST-запрос нужен для отправки данных на сервер (создание/изменение), когда данные не должны быть в URL (пароли, файлы, большие объемы).

Задание №2: Canvas — элемент для рисования графики через JS (графики, игры, обработка изображений).

Задание №3: Аккордеон — через скрытие/показ блоков при клике на заголовок.

---

Билет №20

Задание №1: GET-запросы предназначены для получения данных от сервера. Параметры в URL, можно кэшировать.

Задание №2: XMLHttpRequest — старый способ (события, громоздкий). fetch — новый, на Promise, проще и мощнее.

Задание №3:

```html
<input id="a"> + <input id="b"> <button onclick="result.textContent = +a.value + +b.value">=</button> <span id="result"></span>
```

---

Билет №21

Задание №1: Адаптивный дизайн — верстка, подстраивающаяся под экран. Медиа-запрос:

```css
@media (max-width: 768px) { body { font-size: 14px; } }
```

Задание №2: Мета-тег viewport контролирует масштабирование на мобильных:

```html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```

Задание №3:

```css
@media (max-width: 600px) { .block { background: gray; } }
```

---

Билет №22

Задание №1: CSS-трансформации — изменение формы/положения:

· rotate(45deg) — поворот
· scale(1.5) — масштаб
· translate(10px, 20px) — сдвиг

Задание №2: Transition — плавное изменение свойств за время:

```css
transition: all 0.3s ease;
```

Задание №3:

```css
.square { width:100px; height:100px; background:red; transition: transform 0.5s; }
.square:hover { transform: rotate(45deg); }
```

---

Билет №23

Задание №1: Анимации (@keyframes) — последовательность кадров. Отличие от transition: можно создавать сложные повторяющиеся движения.

Задание №2: Параметры: animation-name, duration, iteration-count, direction.

Задание №3:

```css
@keyframes pulse { 0% {transform:scale(1);} 50% {transform:scale(1.1);} 100% {transform:scale(1);} }
button { animation: pulse 1s infinite; }
```

---

Билет №24

Задание №1: BEM — методология именования: block__element--modifier. Пример: card__title--big.

Задание №2: Глубокая вложенность ухудшает производительность, делает CSS жестко связанным с HTML и сложным для поддержки.

Задание №3:

```html
<div class="product-card">
  <img class="product-card__image" src="img.jpg">
  <h2 class="product-card__title">Товар</h2>
  <span class="product-card__price">100 руб</span>
  <button class="product-card__button">Купить</button>
</div>
```

---

Билет №25

Задание №1: Кастомные элементы — создание своих HTML-тегов через класс, наследующий от HTMLElement.

Задание №2: Shadow DOM — изолированное DOM-дерево внутри элемента, скрытое от основного документа (для инкапсуляции стилей и скриптов).

Задание №3: Аналогично билету №9, задание 3.

---

Билет №26

Задание №1: Повтор вопроса из билета №2, задание 1.

Задание №2: Повтор из билета №4, задание 1.

Задание №3: Аналогично билету №10, задание 3.

---

Билет №27

Задание №1: Повтор билета №9, задание 1.

Задание №2: IndexedDB — NoSQL-база в браузере для больших объемов структурированных данных (тогда как localStorage — только пары ключ-значение до 5-10 МБ).

Задание №3: Аналогично билету №3, задание 3.

---

Билет №28

Задание №1: querySelector нужен для поиска первого элемента по любому CSS-селектору.

Задание №2: addEventListener нужен, чтобы назначить обработчик события без перезаписи других, с возможностью удаления и опций (фаза захвата, один раз).

Задание №3: Аналогично билету №4, задание 3.

---

Билет №29

Задание №1: Event Loop — механизм, управляющий очередью задач. setTimeout (макрозадача) попадает в очередь, Promise (микрозадача) выполняется сразу после текущего синхронного кода.

Задание №2: Callback Hell — вложенные колбэки («пирамида гибели»). Решение: использовать Promises или async/await.

Задание №3: Аналогично билету №5, задание 3 (только радиокнопки).

---

Билет №30

Задание №1: Повтор билета №21, задание 1.

Задание №2: Повтор билета №22, задание 1.

Задание №3:

```html
<table border="1">
  <tr><th>Название</th><th>Цена</th><th>Кол-во</th></tr>
  <tr><td>Ручка</td><td>50</td><td>10</td></tr>
  <tr><td>Карандаш</td><td>30</td><td>20</td></tr>
  <tr><td>Ластик</td><td>20</td><td>15</td></tr>
</table>
```