Frontend-разработчик: Быстрый старт с HTML, CSS и JavaScript

Комплексный курс для начинающих, охватывающий три кита веб-разработки: структуру, стиль и логику. Вы пройдете путь от создания первой статической страницы до разработки интерактивного веб-приложения.

1. Основы HTML: Структура документа, семантическая разметка и работа с формами

Основы HTML: Структура документа, семантическая разметка и работа с формами

Добро пожаловать в мир Frontend-разработки! Вы делаете первый и самый важный шаг — начинаете изучение фундамента, на котором держится весь интернет. Прежде чем мы начнем создавать красивые анимации или сложную логику, нам нужно построить скелет нашего будущего сайта. Этим скелетом является HTML.

Что такое HTML?

HTML (HyperText Markup Language) — это язык гипертекстовой разметки. Важно понимать: это не язык программирования в привычном смысле (как JavaScript или Python). Здесь нет переменных, циклов или функций. HTML — это язык структуры.

Представьте, что вы пишете статью в газету. Вам нужно указать редактору, где будет заголовок, где основной текст, где фотография, а где подпись к ней. HTML делает то же самое для браузера. Он сообщает браузеру: «Вот это — заголовок, это — абзац текста, а это — кнопка».

Теги и элементы

Основа HTML — это теги. Теги — это ключевые слова, заключенные в угловые скобки. Большинство тегов являются парными: у них есть открывающая часть и закрывающая часть.

Синтаксис выглядит так:

Например, чтобы создать абзац текста, мы используем тег p (от английского paragraph):

Существуют также одиночные (пустые) теги, которые не требуют закрывающего тега, так как у них нет текстового содержимого. Например, тег переноса строки <br> или тег изображения <img>.

Базовая структура HTML-документа

Любой HTML-файл начинается со стандартного набора тегов. Это «шаблон», который вы будете использовать в каждом проекте. Давайте разберем его построчно.

Разбор структуры

  • <!DOCTYPE html>: Это не совсем тег, а инструкция для браузера. Она говорит: «Я использую современный стандарт HTML5». Без этой строчки браузер может отображать сайт некорректно, перейдя в режим совместимости со старыми стандартами.
  • <html>: Корневой элемент. Весь ваш код должен находиться внутри него. Атрибут lang="ru" сообщает браузеру и поисковикам, что страница на русском языке.
  • <head>: Это «голова» документа. Здесь хранится служебная информация, которая не отображается на самой странице, но важна для работы сайта.
    • * <meta charset="UTF-8">: Устанавливает кодировку. Благодаря этому браузер правильно отображает кириллицу, эмодзи и спецсимволы. * <title>: Заголовок страницы, который вы видите на вкладке браузера.
  • <body>: Это «тело» документа. Всё, что вы напишете здесь (текст, картинки, кнопки), пользователь увидит в окне браузера.

    • !Визуальная схема структуры HTML-документа, разделяющая служебную информацию и видимый контент.

    Атрибуты тегов

    Теги могут иметь атрибуты, которые расширяют их возможности. Атрибуты всегда пишутся в открывающем теге и обычно состоят из имени и значения.

    Пример ссылки с атрибутом href:

    Здесь a — это тег ссылки (anchor), а href — атрибут, указывающий адрес, куда эта ссылка ведет.

    Пример изображения с атрибутами src и alt:

    * src (source) — путь к файлу картинки. * alt (alternative text) — текст, который появится, если картинка не загрузится. Также этот текст читают скринридеры (программы для незрячих пользователей), поэтому его заполнение обязательно для доступности.

    Семантическая разметка

    Раньше разработчики использовали универсальный тег <div> (блок) для создания любых структур на сайте. Код выглядел как бесконечный набор <div>, в котором было сложно разобраться.

    В современном HTML5 появились семантические теги. Они не меняют внешний вид элемента (без CSS), но четко говорят браузеру и разработчику о смысле содержимого. Это критически важно для SEO (продвижения в поисковиках) и доступности.

    Основные семантические теги

    * <header>: «Шапка» сайта или раздела. Обычно содержит логотип и меню. * <nav>: Блок навигации с основными ссылками. * <main>: Основное, уникальное содержимое страницы. На странице должен быть только один тег <main>. * <article>: Самодостаточный материал (например, статья в блоге, пост в соцсети, карточка товара). * <section>: Смысловой раздел страницы (например, раздел «О нас», «Контакты»). * <aside>: Боковая панель или контент, косвенно связанный с основным (реклама, список категорий). * <footer>: «Подвал» сайта. Содержит копирайты, контакты, дополнительные ссылки.

    > Использование правильных семантических тегов — признак профессионального разработчика. Это делает код чище и понятнее.

    !Типичная структура веб-страницы с использованием семантических тегов HTML5.

    Работа с текстом и списками

    Для структурирования текста используются заголовки и списки.

    Заголовки

    Существует 6 уровней заголовков: от <h1> до <h6>.

    * <h1> — самый главный заголовок. На странице он должен быть только один (обычно это название статьи или страницы). * <h2> — заголовки разделов. * <h3> — подзаголовки внутри разделов и так далее.

    Списки

    Списки бывают двух основных видов:

  • Маркированный список (<ul> — unordered list). Элементы помечаются точками (буллитами).
  • Нумерованный список (<ol> — ordered list). Элементы помечаются цифрами.

    • Внутри обоих типов списков каждый пункт оборачивается в тег <li> (list item).

    Пример кода:

    Интерактивность: Формы

    Формы — это способ получения информации от пользователя. Регистрация, поиск, комментарии, оформление заказа — всё это формы.

    Главный контейнер для формы — тег <form>. Внутри него располагаются элементы управления.

    Поле ввода: <input>

    Самый универсальный тег. Его поведение зависит от атрибута type:

    * <input type="text">: Однострочное текстовое поле (имя, логин). * <input type="password">: Поле для пароля (символы скрыты точками). * <input type="email">: Поле для почты (браузер проверит наличие @). * <input type="checkbox">: Галочка (можно выбрать несколько вариантов). * <input type="radio">: Радиокнопка (выбор только одного варианта из группы). * <input type="date">: Календарь для выбора даты.

    Другие элементы формы

    * <textarea>: Многострочное текстовое поле (например, для ввода комментария). Обратите внимание, это парный тег. * <button>: Кнопка. Может отправлять форму или выполнять действие. * <label>: Подпись к полю ввода. Связывает текст с конкретным инпутом, что улучшает доступность (можно кликнуть на текст, и фокус перейдет в поле).

    Пример простой формы входа:

    В этом примере: * Атрибут placeholder показывает подсказку внутри поля, пока оно пустое. * Атрибут name обязателен, если вы хотите отправить данные на сервер (это имя переменной, которую получит сервер). * Атрибут for у label должен совпадать с id у input, чтобы связать их.

    Заключение

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

    Ваш код уже несет смысл, но пока он выглядит черно-белым и скучным. В следующей части курса мы подключим CSS, чтобы превратить эту структуру в стильный и современный интерфейс.

    2. Стилизация с CSS: Селекторы, блочная модель, Flexbox, Grid и адаптивная верстка

    Стилизация с CSS: Селекторы, блочная модель, Flexbox, Grid и адаптивная верстка

    В предыдущей части курса мы создали «скелет» нашего сайта с помощью HTML. Но давайте будем честны: пока он выглядит как документ из 90-х годов. Черный текст, белый фон, синие ссылки — это стандартные стили браузера. Чтобы превратить этот скелет в красивый, удобный и современный интерфейс, нам нужен CSS.

    Что такое CSS?

    CSS (Cascading Style Sheets) — это каскадные таблицы стилей. Если HTML отвечает за то, что находится на странице (структура), то CSS отвечает за то, как это выглядит (оформление).

    С помощью CSS вы можете: * Менять цвета и шрифты. * Располагать элементы в нужных местах (справа, слева, по центру). * Адаптировать сайт под мобильные устройства. * Добавлять анимацию.

    Синтаксис CSS

    CSS — это набор правил. Каждое правило состоит из селектора и блока объявлений.

    * Селектор: указывает, к какому элементу HTML мы хотим применить стиль. * Свойство: что именно мы хотим изменить (например, цвет). * Значение: как именно мы хотим изменить (например, красный).

    Пример:

    Этот код говорит браузеру: «Найди все теги p (абзацы) и сделай текст внутри них красным, размером 16 пикселей».

    Подключение CSS к HTML

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

  • Создайте файл с расширением .css (например, style.css).
  • В HTML-файле внутри тега <head> добавьте ссылку на него:

    • Теперь все правила, написанные в style.css, применятся к вашей HTML-странице.

    Селекторы: Как найти элемент

    Чтобы стилизовать элемент, нужно уметь к нему «обратиться». Рассмотрим основные виды селекторов.

    1. Селектор по тегу

    Применяет стили ко всем элементам с указанным тегом.

    Все заголовки первого уровня станут синими.

    2. Селектор по классу

    Это самый часто используемый селектор. В HTML мы добавляем атрибут class, а в CSS обращаемся к нему через точку ..

    HTML:

    CSS:

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

    3. Селектор по ID

    В HTML атрибут id должен быть уникальным на странице. В CSS к нему обращаются через решетку #.

    HTML:

    CSS:

    > Совет: Старайтесь использовать классы для стилизации, а ID оставлять для JavaScript или якорных ссылок. У ID слишком высокий «вес» специфичности, что может усложнить переопределение стилей в будущем.

    Блочная модель (Box Model)

    Это одна из самых важных концепций в CSS. Каждый элемент на странице — это прямоугольный «ящик» (box). Даже если он выглядит круглым или прозрачным, браузер видит его как прямоугольник.

    Этот ящик состоит из четырех слоев (от центра наружу):

  • Content (Контент): Текст, картинка или другое содержимое элемента.
  • Padding (Внутренний отступ): Пространство между контентом и границей. Фон элемента распространяется и на padding.
  • Border (Граница): Рамка вокруг элемента.
  • Margin (Внешний отступ): Пространство между границей этого элемента и соседними элементами. Margin всегда прозрачный.

    • !Визуализация структуры любого HTML-элемента с точки зрения CSS: контент, внутренние отступы, границы и внешние отступы.

    Проблема расчета ширины

    По умолчанию, если вы задаете элементу width: 200px, padding: 20px и border: 5px, реальная ширина элемента на экране будет:

    Где — ширина контента, — левый и правый padding, — левая и правая граница. Это неудобно, так как ломает верстку при добавлении отступов.

    Чтобы исправить это, разработчики используют свойство:

    С border-box ширина 200px будет включать в себя и padding, и border. Браузер сам уменьшит место для контента, чтобы общий размер остался 200 пикселей.

    Современная верстка: Flexbox и Grid

    Раньше для расположения элементов рядом друг с другом использовали «костыли» вроде таблиц или обтекания (float). Сегодня у нас есть два мощных инструмента: Flexbox и Grid.

    Flexbox (Гибкий ящик)

    Flexbox идеально подходит для одномерной верстки — когда элементы нужно выстроить в одну строку или в один столбец (например, меню навигации, карточки товаров в ряд).

    Чтобы включить Flexbox, нужно родителю (контейнеру) задать свойство display: flex.

    Основные свойства Flexbox: * flex-direction: направление оси (строка row или колонка column). * justify-content: как элементы распределяются вдоль главной оси (например, center, space-between). * align-items: как элементы выравниваются поперек главной оси.

    !Иллюстрация осей Flexbox и способов распределения элементов внутри контейнера.

    CSS Grid (Сетка)

    Grid — это система для двумерной верстки. Она позволяет управлять и строками, и столбцами одновременно. Это идеально для создания общей сетки страницы (шапка, боковая панель, контент, подвал).

    Единица измерения fr (fraction) означает «доля свободного пространства». В примере выше вторая колонка будет в два раза шире первой.

    Когда что использовать? * Flexbox: Мелкие компоненты, выравнивание элементов в ряд (меню, кнопки, иконки). * Grid: Глобальная структура страницы, сложные макеты.

    Адаптивная верстка

    Сегодня пользователи заходят на сайты с телефонов чаще, чем с компьютеров. Ваш сайт должен выглядеть хорошо на любом экране. Это называется адаптивностью.

    Главный инструмент адаптивности — Медиа-запросы (Media Queries). Они позволяют применять определенные стили только при определенных условиях (например, если ширина экрана меньше 600px).

    Синтаксис:

    В этом примере, как только ширина окна браузера станет 600 пикселей или меньше, контейнер перестроится в колонку и сменит цвет фона.

    Подход Mobile First

    Современная практика рекомендует сначала писать стили для мобильных устройств (так как они часто проще), а затем с помощью @media (min-width: ...) добавлять сложности для больших экранов. Это делает код более оптимизированным.

    Заключение

    CSS — это огромный мир, в котором можно творить настоящую магию. Мы разобрали базу:

  • Селекторы помогают выбрать, что красить.
  • Блочная модель объясняет, из чего состоит элемент.
  • Flexbox и Grid позволяют строить сложные макеты.
  • Media Queries делают сайт удобным на телефонах.

    • Теперь, когда у нас есть структура (HTML) и стиль (CSS), наш сайт выглядит отлично. Но он все еще статичен. Он не реагирует на действия пользователя, кроме простых кликов по ссылкам. В следующей части курса мы вдохнем в него жизнь с помощью JavaScript — языка программирования веба.

    3. Введение в JavaScript: Типы данных, функции, циклы и базовая логика

    Введение в JavaScript: Типы данных, функции, циклы и базовая логика

    Поздравляю! Вы уже умеете создавать структуру веб-страницы с помощью HTML и делать её красивой, используя CSS. Но пока наш сайт похож на манекен в витрине: он красивый, но неподвижный. Он не реагирует на нажатия кнопок (кроме ссылок), не считает цены в корзине и не показывает всплывающие окна.

    Чтобы «оживить» сайт, нам нужен JavaScript (JS). Если HTML — это скелет, а CSS — это кожа и одежда, то JavaScript — это мышцы и нервная система веб-страницы.

    Что такое JavaScript?

    JavaScript — это язык программирования, который выполняется прямо в браузере пользователя. Он позволяет делать страницу интерактивной: обновлять контент без перезагрузки, анимировать элементы, управлять мультимедиа и многое другое.

    Как подключить JavaScript?

    По аналогии с CSS, лучший способ — использовать внешний файл.

  • Создайте файл с расширением .js (например, script.js).
  • Подключите его в HTML перед закрывающим тегом </body>:

    • Мы ставим скрипт в конец, чтобы браузер сначала загрузил и отобразил HTML, и только потом начал выполнять код. Это ускоряет загрузку страницы.

    Переменные: Коробки для данных

    Представьте, что вы переезжаете. Чтобы не потерять вещи, вы складываете их в коробки и подписываете: «Книги», «Посуда», «Одежда». В программировании такие коробки называются переменными.

    В современном JavaScript (стандарт ES6+) есть два основных способа создать переменную:

  • let — для переменных, значение которых может меняться.
  • const — для переменных, значение которых задается один раз и навсегда (константы).

    • !Визуальное представление переменных как коробок для хранения данных: изменяемые (let) и неизменяемые (const).

    Типы данных

    В наши «коробки» можно класть разные типы вещей. Вот основные из них:

    1. Числа (Number)

    Любые числа: целые, дробные, положительные, отрицательные.

    С числами можно производить математические операции. Например, рассчитаем площадь круга по формуле:

    Где — площадь круга, — математическая константа (примерно 3.14), а — радиус круга.

    В коде это выглядит так:

    2. Строки (String)

    Текст всегда заключается в кавычки (одинарные ', двойные " или обратные ` `).

    3. Булевый тип (Boolean)

    Логический тип, который имеет всего два значения: true (истина) или false (ложь). Используется для принятия решений.

    Логика и ветвление

    Программы становятся умными, когда они могут принимать решения. Для этого используется конструкция if (если) и else (иначе).

    Синтаксис:

    Пример проверки возраста:

    Операторы сравнения

    * > (больше), < (меньше) * >= (больше или равно), <= (меньше или равно) === (строгое равенство). Важно: всегда используйте тройное равно, а не двойное ==, чтобы избежать ошибок с типами данных.* * !== (не равно)

    Циклы: Повторение действий

    Иногда нужно выполнить одно и то же действие много раз. Например, вывести список из 10 товаров. Вместо того чтобы писать команду 10 раз, мы используем циклы.

    Самый популярный цикл — for.

    Разберем, что написано в круглых скобках:

  • let i = 0 — Начало. Создаем счетчик i и присваиваем ему 0.
  • i < 5 — Условие. Цикл работает, пока i меньше 5.
  • i++ — Шаг. После каждого выполнения увеличиваем i на 1 (запись i++ аналогична i = i + 1).

    • Этот код выведет в консоль фразы от "Номер шага: 0" до "Номер шага: 4".

    Функции: Строительные блоки

    Функция — это именованный блок кода, который можно вызывать многократно. Это как рецепт в поваренной книге: вы один раз записываете рецепт борща, а потом можете готовить его сколько угодно раз, просто открывая нужную страницу.

    Объявление функции

    Здесь name — это параметр (переменная, которую функция ожидает получить).

    Вызов функции

    Возврат значения (return)

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

    Рассмотрим пример расчета гипотенузы прямоугольного треугольника по теореме Пифагора:

    Где — гипотенуза, и — катеты, а — квадратный корень.

    Реализуем это в коде:

    Ключевое слово return останавливает выполнение функции и «выдает» значение.

    !Иллюстрация работы функции: входные данные, обработка и выходной результат.

    Взаимодействие с HTML (DOM)

    Самое интересное начинается, когда JavaScript трогает HTML. Браузер создает дерево элементов страницы, которое называется DOM (Document Object Model).

    Мы можем найти элемент и изменить его.

    HTML:

    JavaScript:

    Теперь при нажатии на кнопку заголовок изменится и покраснеет.

    Заключение

    Сегодня вы познакомились с языком JavaScript. Мы изучили: * Переменные (let, const) для хранения данных. * Типы данных (числа, строки, булевы значения). * Условия (if/else) для логики. * Циклы (for`) для повторения. * Функции для создания переиспользуемых блоков кода.

    Это база, на которой строится вся логика веб-приложений. В следующих уроках мы углубимся в работу с DOM, чтобы создавать по-настоящему интерактивные интерфейсы.

    4. JavaScript в браузере: Манипуляции с DOM-деревом и обработка событий пользователя

    JavaScript в браузере: Манипуляции с DOM-деревом и обработка событий пользователя

    Мы прошли большой путь. Вы научились строить структуру страницы с помощью HTML, задавать ей стиль через CSS и освоили базовый синтаксис JavaScript: переменные, функции и циклы. Но до сих пор эти технологии существовали словно в параллельных мирах. Ваш JavaScript-код умел считать числа в консоли, но не мог изменить цвет кнопки на странице или скрыть меню.

    Сегодня мы соединим эти миры. Мы научимся использовать JavaScript для управления HTML-страницей в реальном времени. Это и есть суть Frontend-разработки.

    Что такое DOM?

    Когда браузер загружает вашу страницу, он не просто рисует картинку. Он превращает ваш HTML-код в сложную структуру объектов, которая называется DOM (Document Object Model — Объектная Модель Документа).

    Представьте, что HTML-код — это чертеж архитектора, а DOM — это построенный по этому чертежу дом, в который можно зайти, переставить мебель или перекрасить стены.

    DOM имеет древовидную структуру. У нас есть «корень» (тег html), от которого отходят ветви (head и body), а от них — более мелкие ветки (заголовки, параграфы, кнопки).

    !Визуальное представление того, как браузер преобразует вложенные теги HTML в дерево объектов.

    Благодаря DOM, каждый тег на вашей странице становится объектом JavaScript. Это значит, что мы можем найти его, прочитать его свойства и изменить их.

    Поиск элементов на странице

    Прежде чем чем-то управлять, это нужно найти. В JavaScript для этого существует специальный объект document, который является точкой входа в DOM.

    Основные методы поиска

    Раньше разработчики использовали разные методы для поиска по ID, классу или тегу. Сегодня стандартом является универсальный метод querySelector.

    1. Поиск одного элемента:

    Метод document.querySelector(селектор) возвращает первый найденный элемент, соответствующий CSS-селектору.

    Обратите внимание: мы используем тот же синтаксис селекторов, что и в CSS (точка для классов, решетка для ID).

    2. Поиск всех элементов:

    Если нам нужно найти все кнопки на странице или все пункты меню, мы используем document.querySelectorAll(селектор).

    Этот метод возвращает коллекцию элементов (похожую на массив), которую можно перебрать с помощью цикла for или метода forEach.

    Изменение содержимого и атрибутов

    Когда мы нашли элемент и сохранили его в переменную, мы можем менять его свойства.

    Работа с текстом

    Самый безопасный способ изменить текст внутри элемента — свойство textContent.

    Существует также свойство innerHTML, которое позволяет вставлять внутрь элемента не просто текст, а HTML-теги (например, сделать слово жирным). Однако использовать его нужно с осторожностью, так как это может создать уязвимость для хакерских атак (XSS), если вы вставляете текст, введенный пользователем.

    Работа с атрибутами

    Мы можем менять ссылки у картинок, href у ссылок или type у инпутов.

    Управление стилями

    JavaScript позволяет менять CSS-стили элементов на лету. Есть два способа сделать это.

    1. Прямое изменение стилей (style)

    У каждого DOM-элемента есть свойство style. Свойства пишутся в формате camelCase (горбатый регистр), а не через дефис, как в CSS.

    * CSS: background-color * JS: backgroundColor

    Этот способ добавляет стили прямо в атрибут style тега (инлайн-стили). Это удобно для быстрых изменений, но не рекомендуется для сложной стилизации.

    2. Управление классами (classList) — Рекомендуемый способ

    Гораздо профессиональнее заранее описать красивый класс в CSS-файле, а через JavaScript просто добавлять или убирать этот класс у элемента.

    CSS:

    JavaScript:

    Это делает код чище: CSS отвечает за внешний вид, а JS — только за логику переключения.

    События: Оживляем интерфейс

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

    В браузере эти действия называются событиями (Events).

    Обработчик событий (Event Listener)

    Чтобы элемент отреагировал на событие, мы должны «повесить» на него «слушателя». Для этого используется метод addEventListener.

    Синтаксис:

    * Название события: строка, например 'click', 'input', 'scroll'. Функция: код, который выполнится, когда событие произойдет. Эту функцию часто называют callback* (функция обратного вызова).

    Пример: Кнопка-счетчик

    Давайте создадим кнопку, которая считает, сколько раз на нее нажали.

    HTML:

    JavaScript:

    Теперь при каждом нажатии браузер будет запускать нашу функцию, обновлять переменную и менять текст на кнопке.

    Популярные события

  • Мышь:
    • * click — клик левой кнопкой. * mouseenter — наведение курсора на элемент. * mouseleave — уход курсора с элемента.
  • Формы:
    • * submit — отправка формы. * input — изменение значения в поле ввода (срабатывает мгновенно при печати). * change — изменение значения (срабатывает после потери фокуса).
  • Клавиатура:
    • * keydown — нажатие клавиши. * keyup — отпускание клавиши.

    Объект события (Event Object)

    Иногда нам нужно знать подробности события: какую именно клавишу нажали, где находился курсор мыши или какое значение ввели в поле.

    Браузер автоматически передает специальный объект с информацией о событии в нашу функцию. Обычно его называют event или сокращенно e.

    Пример ввода текста:

    Создание и удаление элементов

    Мы можем не только менять существующие элементы, но и создавать новые.

    Алгоритм создания:

  • Создать элемент: document.createElement('тег').
  • Наполнить его контентом.
  • Добавить его на страницу: родитель.append(элемент).

    • Пример списка задач:

    Чтобы удалить элемент, используется метод remove():

    Заключение

    Сегодня вы получили в руки пульт управления браузером. DOM-дерево позволяет вам обращаться к любому элементу, а события позволяют реагировать на действия пользователя.

    Вы узнали: * Как искать элементы через querySelector. * Как менять текст через textContent и классы через classList. * Как обрабатывать клики и ввод данных через addEventListener.

    Это фундамент интерактивности. В следующем уроке мы объединим все знания и создадим ваш первый полноценный проект — интерактивный список задач (To-Do List), где можно будет добавлять, отмечать и удалять дела.

    5. Продвинутый JS и работа с сетью: Асинхронность, Promise, Fetch API и JSON

    Продвинутый JS и работа с сетью: Асинхронность, Promise, Fetch API и JSON

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

    В реальности веб-приложения постоянно обмениваются данными: загружают ленту новостей, отправляют сообщения в чат, проверяют погоду или сохраняют товары в корзине. Всё это происходит благодаря взаимодействию с сервером.

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

    Формат обмена данными: JSON

    Прежде чем отправлять данные, нужно договориться о языке, на котором мы будем общаться с сервером. Самый популярный формат сегодня — это JSON (JavaScript Object Notation).

    Несмотря на название, JSON — это просто текстовый формат, который понятен почти любому языку программирования (Python, PHP, Java, C#), а не только JavaScript. Он выглядит очень похоже на обычные объекты JS, но с более строгими правилами.

    Правила JSON

  • Все ключи должны быть в двойных кавычках.
  • Строковые значения тоже должны быть в двойных кавычках.
  • В конце последней строки объекта нельзя ставить запятую.
  • В JSON нельзя записывать функции, переменные undefined или комментарии.

    • Пример JSON-файла:

    Преобразование в JavaScript

    Браузер получает от сервера данные в виде обычной строки. Чтобы работать с ней как с объектом, JavaScript предоставляет встроенный объект JSON с двумя методами:

  • JSON.parse() — превращает строку JSON в JavaScript-объект.
  • JSON.stringify() — превращает JavaScript-объект в строку JSON (для отправки на сервер).

    • Синхронность vs Асинхронность

    JavaScript — это однопоточный язык. Это значит, что он может делать только одно дело за раз. Представьте, что вы стоите в очереди в кассу супермаркета. Кассир (движок JavaScript) обслуживает одного покупателя (задачу). Пока он не закончит с текущим покупателем, следующий не может подойти.

    Это называется синхронным выполнением кода. Код выполняется строчка за строчкой, сверху вниз.

    Проблема синхронности

    Представьте, что вторая команда — это запрос на сервер за списком товаров, который длится 5 секунд. Если бы JavaScript ждал эти 5 секунд синхронно, весь ваш сайт «завис» бы. Пользователь не мог бы нажать ни на одну кнопку, прокрутить страницу или выделить текст. Браузер бы просто перестал отвечать.

    Чтобы этого избежать, используется асинхронность. Это позволяет запустить долгую задачу (например, запрос к серверу) и, не дожидаясь её завершения, продолжить выполнять остальной код.

    !Визуальное сравнение блокирующего и неблокирующего выполнения кода.

    Пример асинхронности с таймером:

    Результат в консоли:

  • Начало
  • Конец
  • Спустя 2 секунды (появится позже)

    • JavaScript не стал ждать 2 секунды. Он «отложил» таймер и пошел дальше.

    Promise (Обещание)

    Для управления асинхронными операциями в современном JavaScript используется концепция Promise (Промис).

    Представьте, что вы заказали пиццу в ресторане. Официант принял заказ и дал вам чек с номером (это и есть Промис). Вы не стоите у печи и не ждете, пока пицца испечется. Вы возвращаетесь за столик, разговариваете с друзьями (выполняете другой код).

    У Промиса есть три состояния:

  • Pending (Ожидание): Пицца готовится. Результата пока нет.
  • Fulfilled (Выполнено): Пицца готова. Вы получили результат (данные).
  • Rejected (Отклонено): На кухне закончилось тесто. Произошла ошибка.

    • Работа с Promise

    Когда мы делаем запрос, мы получаем объект Promise. Чтобы узнать результат, мы используем методы .then() и .catch().

    * .then() срабатывает, когда всё прошло успешно. * .catch() срабатывает, если произошла ошибка.

    Fetch API: Делаем запросы к сети

    Раньше для запросов использовали сложный объект XMLHttpRequest. Сейчас стандартом является Fetch API. Это встроенная функция браузера, которая позволяет делать сетевые запросы и возвращает Промис.

    Базовый синтаксис:

    Однако fetch имеет особенность: он возвращает результат в два этапа.

  • Сначала приходит Response (ответ сервера) — заголовки и статус (например, 200 OK или 404 Not Found).
  • Затем нам нужно прочитать «тело» ответа в нужном формате (обычно JSON).

    • Пример получения данных:

    Современный синтаксис: Async / Await

    Цепочки .then() могут стать длинными и трудными для чтения. В 2017 году в JavaScript добавили «синтаксический сахар» — ключевые слова async и await. Они позволяют писать асинхронный код так, как будто он синхронный.

    Как это работает?

  • Ключевое слово async ставится перед объявлением функции. Это говорит браузеру: «Внутри этой функции будет асинхронный код».
  • Ключевое слово await ставится перед Промисом (например, перед fetch). Оно говорит: «Подожди, пока этот Промис выполнится, и только потом иди дальше».

    • Перепишем пример выше с использованием async/await:

    Этот код делает то же самое, но читается гораздо проще. Конструкция try...catch используется здесь для обработки ошибок вместо .catch().

    Практический пример: Загрузка списка пользователей

    Давайте объединим знания из прошлых уроков (DOM) и текущего (Fetch) и создадим скрипт, который загружает список пользователей и отображает их на странице.

    HTML:

    JavaScript:

    Разбор кода

  • Мы вешаем обработчик события click на кнопку.
  • При клике меняем текст кнопки на «Загрузка...», чтобы пользователь понимал, что процесс идет.
  • Используем fetch для получения данных с тестового API.
  • Полученный массив объектов перебираем через forEach.
  • Для каждого пользователя создаем элемент <li> и добавляем его в <ul>.
  • Блок finally гарантирует, что кнопка снова станет активной, даже если произошла ошибка.

    • Заключение

    Сегодня вы сделали огромный шаг вперед. Теперь ваши приложения могут: * Общаться с серверами с помощью Fetch API. * Обрабатывать данные в формате JSON. * Выполнять долгие операции, не блокируя интерфейс, благодаря асинхронности и Promise. * Использовать современный и чистый синтаксис async/await.

    Это основа работы любого Frontend-разработчика. В следующем уроке мы поговорим о том, как хранить данные прямо в браузере пользователя, чтобы они не исчезали после перезагрузки страницы, используя LocalStorage.