Урок 2. Проверьте стартовую подготовку

Дополнительный урок Его можно пройти в любой момент: он не блокирует следующий урок и не входит в обязательную часть курса. Баллы и решённые задания сохраняются.

Этот необязательный урок помогает понять, каким вводным темам стоит уделить больше внимания. Он не влияет на обязательный прогресс, не начисляет рейтинг и не закрывает следующие материалы.

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

Три ветви стартовой самопроверки: HTTP, инструменты, HTML и JavaScript

Три коротких блока проверяют чтение HTTP, назначение инструментов и путь данных через frontend.

A. Web и HTTP

Сначала прочитайте обмен:

GET /projects?q=robot HTTP/1.1
Host: lab.example

HTTP/1.1 200 OK
Content-Type: text/html

Что в паре HTTP-фрагментов является запросом клиента?

Строка ответа сервера HTTP/1.1 200 OK

Строка запроса GET /projects HTTP/1.1

Следующий запрос возник сразу после того, как пользователь нажал «Сохранить»:

POST /settings HTTP/1.1
Content-Type: application/x-www-form-urlencoded

email=student%40example.test

Какое действие вероятнее всего вызвало показанный POST /settings?

Сохранение изменённого email после отправки формы настроек

Загрузка файла проекта через другое поле формы

Выход из учётной записи после нажатия отдельной кнопки

B. Инструменты

На снимке Network видны строки запросов, а справа — вкладки Headers, Payload и Response. Network используют, чтобы связать действие в странице с реальным обменом браузера и сайта.

Какая вкладка DevTools показывает запросы и ответы страницы?

Network

Sources

Elements

Просмотр показывает уже прошедший запрос. Повтор запроса означает отправить тот же HTTP-обмен ещё раз — например, через Repeater или минимальную команду curl — и сравнить новый ответ.

Чем повтор запроса отличается от его просмотра?

Повтор меняет подсветку строки и заново открывает прежний ответ без новой отправки

Повтор отправляет серверу новый запрос с сохранёнными методом, адресом, заголовками и телом

Оба действия только показывают уже сохранённый обмен без нового обращения к серверу

Если страница отправила форму или вызвала fetch, начните с Network/HTTP history и ищите строку, появившуюся сразу после действия, а не случайный CSS-файл.

Где искать запрос, который страница отправила после нажатия кнопки?

В истории загрузок браузера рядом с именем сохранённого файла и временем действия

Только в HTML-разметке кнопки рядом с обработчиком события и адресом будущего запроса

В списке Network среди запросов, появившихся сразу после выполненного действия

C. HTML, JavaScript и frontend

<form id="profile-form">
  <input name="display_name" value="Zoya">
  <button>Сохранить</button>
</form>

Где находится значение email в <input name="email" value="student@example.test">?

В имени тега input

В атрибуте value

В атрибуте name

fetch('/api/profile', {
  method: 'POST',
  headers: {'Content-Type': 'application/json'},
  body: JSON.stringify({display_name: field.value})
})

Какой endpoint вызывает fetch('/api/profile', {method: 'POST'})?

Запрос POST /api/profile

Запрос POST /fetch

Запрос GET /api/profile

Страница может скрыть кнопку или поле, но браузер остаётся под контролем пользователя. Настоящее правило доступа сервер обязан проверить после получения запроса.

Доказывает ли скрытая кнопка, что сервер запретит соответствующее действие?

Да, скрытый элемент нельзя вызвать запросом

Нет, сервер должен отдельно проверять права

Автоматическая рекомендация

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

Рекомендация принадлежит только вам. Она не создаёт рейтинг или автозачёт и не скрывает материалы курса. Техническая отметка страницы «просмотрено» или «завершено» не является результатом диагностики и ничего не засчитывает вместо обязательных уроков.

Вывод диагностики

Диагностика отдельно проверяет чтение HTTP, назначение Network и повторного запроса, а также путь данных от HTML через JavaScript к точке обращения. Итоговая рекомендация показывает, какой из этих блоков стоит изучить внимательнее; она не меняет прогресс и не скрывает материалы.

Дальше начинается обязательный модуль: сначала соберём модель одного HTTP-обмена без требования уже владеть DevTools.