← Назад к уроку 1 Лаборатория 2: три состояния UI → На главную
Практическая лаборатория 1 из 5

От клика до HTTP

Увидеть полный путь: пользователь нажимает кнопку → JavaScript делает запрос → сервер отвечает → данные появляются на экране.

Что вы узнаете

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

💡 Зачем это вообще нужно? Почти любое современное приложение (ВКонтакте, YouTube, интернет-магазин) работает именно так: вы нажимаете кнопку → программа делает запрос → приходит ответ → на экране появляются данные. Сегодня вы сделаете этот путь своими руками.

Пошаговая инструкция

Шаг 1. Создайте файл

Создайте файл lab1.html в любом месте на компьютере (например, на рабочем столе).

✍️ Действие. Откройте «Блокнот» (или любой редактор вроде VS Code), выберите «Создать файл» и назовите его lab1.html. Расширение .html важно — браузер поймёт, что это веб-страница.

Шаг 2. Вставьте код

Скопируйте весь код ниже и вставьте в созданный файл:

Контекст. Это готовая маленькая страница для нашего учебного приложения TaskFlow (список задач). Она умеет одно: по нажатию кнопки отправлять HTTP-запрос на тестовый сервер и показывать ответ.

Аналогия из жизни. Этот код — как бланк заказа из магазина. В бланке есть поле «что заказать» (URL сервера), кнопка «Отправить», и место, куда кладут привезённый товар (блок #result на экране).

Пошаговый разбор кода:

  1. Раздел <style> — наряд страницы: шрифт, синяя кнопка, серый блок для результата. Как одежда: не влияет на смысл, но делает удобным.
  2. Кнопка и блок #result — это «отправить заказ» и «полка для товара».
  3. Функция load() — сама логика: ждёт нажатия, делает запрос, ловит ошибки, выводит ответ.
  4. Строка addEventListener('click', load) — говорит кнопке: «когда на тебя нажмут, вызови load()».

Что увидит студент. Сначала — надпись «Результат появится здесь...». После нажатия кнопки — либо многострочный текст (JSON-ответ сервера), либо «Ошибка: ...», если интернета нет.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Лаборатория 1</title>
  <style>
    /* Наряд страницы: шрифт и отступы */
    body { font-family: Arial, sans-serif; max-width: 700px; margin: 40px auto; padding: 20px; }
    /* Синяя кнопка, как в магазине — «Отправить заказ» */
    button { padding: 10px 20px; font-size: 16px; cursor: pointer;
             background: #2d5bff; color: white; border: none; border-radius: 6px; }
    button:hover { background: #1e4ad0; }
    /* Серый блок — «полка», куда положим ответ сервера */
    #result { margin-top: 20px; padding: 15px; background: #f5f5f5;
              border-radius: 8px; white-space: pre-wrap; font-family: monospace;
              font-size: 13px; min-height: 60px; border: 1px solid #d8dee8; }
  </style>
</head>
<body>
  <h1>Лаборатория: от клика до HTTP</h1>
  <p>Нажмите кнопку, чтобы выполнить GET-запрос к тестовому серверу.</p>
  <!-- Кнопка «Заказать» и пустая полка для результата -->
  <button id="loadBtn">Загрузить данные</button>
  <div id="result">Результат появится здесь...</div>

  <script>
    /* load() — главная функция: делает запрос и показывает ответ */
    async function load() {
      // Сразу говорим пользователю: «жду ответ»
      document.getElementById('result').textContent = 'Загрузка...';
      try {
        // Отправляем HTTP GET-запрос — посылаем курьера с заявкой продавцу
        const response = await fetch('https://httpbin.org/get?source=lab1');
        // Проверяем ответ продавца: response.ok = true, значит сервер согласился
        if (!response.ok) throw new Error('HTTP ' + response.status);
        // Превращаем текст ответа в удобный JavaScript-объект
        const data = await response.json();
        // Выводим объект на экран красиво, с отступами (null, 2)
        document.getElementById('result').textContent =
          JSON.stringify(data, null, 2);
        // И продублируем в консоль — там удобнее изучать структуру
        console.log('Получено:', data);
      } catch (error) {
        // Если интернета нет или сервер упал — покажем ошибку вместо товара
        document.getElementById('result').textContent =
          'Ошибка: ' + error.message;
      }
    }
    // «На кнопку нажали?» → тогда вызови load()
    document.getElementById('loadBtn').addEventListener('click', load);
  </script>
</body>
</html>

Шаг 3. Откройте в браузере

Дважды кликните на файл lab1.html. Он откроется в браузере.

💡 Не открылся? Если вместо страницы открылся Блокнот с кодом — значит файл сохранился как lab1.html.txt. Переименуйте, убрав .txt в конце.

Шаг 4. Нажмите кнопку

Нажмите «Загрузить данные». Вы увидите JSON-ответ от сервера.

Что увидит студент. В сером блоке появится примерно такой текст: {"args": {"source": "lab1"}, "origin": "...", "url": "https://httpbin.org/get?source=lab1"}. Это и есть «ответ продавца». JSON — просто способ упаковать данные, как этикетка на посылке.

Где посмотреть подробнее. Нажмите F12, откройте вкладку Console — там увидите объект целиком. Вкладка Network покажет сам запрос: URL, статус 200, тело ответа. Это и есть тот самый «кассовый чек» из начала урока.

Что происходит «под капотом»

Аналогия из жизни. Представьте поход в магазин за конкретной вещью. Каждый шаг в таблице — это одно ваше действие в этом походе. Когда поймёте их, код выше перестанет казаться магией.

ШагЧто делает браузерАналогия
1. Клик по кнопкеВызывается функция load()Вы подошли к продавцу
2. fetch(...)Браузер отправляет HTTP GET-запрос на указанный URLОтправили курьера с заявкой продавцу
3. awaitКод ждёт ответа от сервера (несколько секунд)Ждёте, пока принесут заказ
4. response.json()Текст ответа преобразуется в JavaScript-объектЧитаете этикетку на посылке, чтобы узнать содержимое
5. textContent = ...Объект выводится на экран в виде отформатированного текстаКладёте покупку на видное место дома

Интерактивная песочница

Контекст. Здесь тот же принцип, что в файле lab1.html, но запускать ничего скачивать не нужно — код живёт прямо на странице.

Аналогия из жизни. Песочница — это как кухня с доставкой еды домой: вы меняете рецепт (код) прямо здесь и сразу пробуете результат, не выходя из дома. Ошибётесь — ничего не сломается, просто поправьте и запустите снова.

▶️ Отредактируйте код ниже и нажмите Запустить (или Ctrl+Enter):

Песочница: нажми «Запустить» — и увидишь IP сервера и параметр, которые вернул сервер. Меняй код и запускай снова.
Песочница: HTTP-запрос

Проверьте себя

Вопросы.
  1. Что вернёт response.status, если сервер доступен?
  2. Что произойдёт, если заменить URL на несуществующий адрес?
  3. Отличается ли JSON в консоли от того, что на странице?
💡 Подсказки-ответы (проверьте себя сами).
  1. Обычно 200 — это «всё хорошо, заказ выполнен».
  2. Сработает блок catch, и вместо данных вы увидите «Ошибка: ...» — как если бы магазин был закрыт.
  3. По смыслу одно и то же, но в консоли объект можно раскрывать по частям, а на странице — только весь текст целиком.

Лаборатория 1 из 5. Далее: Три состояния UI →

Куда дальше: разбери теорию HTTP в Уроке 7, а потренируй его в практике к уроку 7.

📖 Глоссарий

ТерминЖизненная аналогияКоротко
HTTP-запросЗаказ в магазинеВы отправляете серверу заявку («дайте вот это») и ждёте ответа.
HTTP-статусОтвет продавцаКод 200 — есть в наличии, 404 — нет, 500 — склад сломался.
fetch / HttpClientКурьерФункция, которая отвозит ваш заказ продавцу и привозит ответ обратно.
JSONЭтикетка на посылкеУдобный формат упаковки данных, который понимает JavaScript.
DevTools NetworkКассовый чекВкладка, где записано: куда обратились, что просили и что получили.
Событие кликаЗвонок в дверьСигнал «на кнопку нажали» — он запускает выполнение кода.

🧠 Самопроверка

1. Когда вы нажимаете кнопку, браузер сам по себе догадывается, какой сервер опрашивать? Верно или неверно?

2. Если сервер вернул статус 404, значит запрос прошёл успешно и данные получены? Верно или неверно?

3. JSON нужен, чтобы сделать код красивее на экране? Верно или неверно?

Прогресс курса