1. Основы JavaScript и логика веб-приложений
Основы JavaScript и логика веб-приложений
Вы уже умеете строить прочный каркас веб-страницы с помощью HTML и наводить красоту, используя стили CSS. Однако современные пользователи ожидают от сайтов не просто статичных текстов и картинок. Им нужны всплывающие окна, мгновенная фильтрация товаров, обновление ленты новостей без перезагрузки страницы и плавная анимация. За всю эту магию отвечает JavaScript (или сокращенно JS).
Если провести аналогию со строительством дома, то HTML — это фундамент, стены и крыша. CSS — это обои, краска, мебель и освещение. А JavaScript — это электричество, водопровод и система «умный дом», которые заставляют всё это работать: открывать двери по нажатию кнопки, включать свет и регулировать температуру.
!Схема взаимодействия HTML, CSS и JavaScript
Как JavaScript хранит информацию: переменные и типы данных
Любое приложение работает с данными. В интернет-магазине это цены, названия товаров, статус корзины. Чтобы компьютер мог с ними работать, данные нужно где-то хранить. Для этого используются переменные — своеобразные коробки с ярлыками, в которые мы кладем информацию.
В современном JavaScript для создания переменных используются два ключевых слова:
* let — используется для данных, которые могут измениться в будущем (например, количество товаров в корзине).
* const — используется для постоянных значений, которые не должны меняться (например, дата рождения пользователя или фиксированная скидка).
> Исторически в языке существовало слово var, однако оно имеет неочевидное поведение и в современной разработке практически не используется.
В эти «коробки» можно положить разные типы данных. Рассмотрим основные:
| Тип данных | Описание | Пример в коде |
| :--- | :--- | :--- |
| String (Строка) | Текстовая информация, всегда пишется в кавычках. | let name = "Алексей"; |
| Number (Число) | Целые и дробные числа. Кавычки не нужны. | let price = 1500; |
| Boolean (Логический) | Имеет только два значения: true (истина) или false (ложь). | let isLogged = true; |
Когда данных становится много, простых переменных не хватает. Представьте, что вам нужно сохранить список из 100 товаров. Создавать 100 переменных — плохая идея. Здесь на помощь приходят сложные структуры данных.
Массив (Array) — это упорядоченный список элементов. Вы можете положить в него сколько угодно значений и обращаться к ним по порядковому номеру (индексу), который всегда начинается с нуля.
Объект (Object) — это структура, которая позволяет описать сложную сущность с помощью пар «ключ-значение». Если массив — это просто список покупок, то объект — это карточка конкретного товара со всеми его характеристиками.
Управление потоком: логика и циклы
Программа редко выполняется строго сверху вниз. Обычно ей нужно принимать решения в зависимости от условий. Для этого используются условные конструкции.
Представьте логику оплаты в приложении. Если баланс пользователя больше или равен стоимости товара (), то мы разрешаем покупку. Если баланс меньше (), выдаем ошибку.
Часто в веб-разработке нужно выполнить одно и то же действие много раз. Например, отрисовать 50 карточек товаров на странице. Чтобы не писать один и тот же код 50 раз, используются циклы. Они заставляют программу бегать по кругу, пока не выполнится определенное условие.
Функции: фабрики действий
По мере роста вашего приложения вы заметите, что некоторые куски кода повторяются. Например, расчет скидки может понадобиться и в корзине, и на странице товара, и в личном кабинете.
Чтобы не дублировать код, его оборачивают в функции. Функция — это изолированный блок кода, который выполняет конкретную задачу. Вы можете передать в нее исходные данные (аргументы), она произведет вычисления и вернет результат.
При цене товара в 2000 руб. и скидке 15%, функция вычислит размер скидки (300 руб.) и вернет итоговую стоимость — 1700 руб. Вы можете вызывать эту функцию тысячи раз с разными числами, и она всегда будет работать предсказуемо.
Оживление интерфейса: работа с DOM
Сами по себе переменные и функции существуют только в оперативной памяти компьютера. Чтобы пользователь увидел результат их работы, JavaScript должен взаимодействовать с HTML-страницей.
Когда браузер загружает HTML-код, он превращает его в DOM (Document Object Model — Объектная модель документа). Это древовидная структура, где каждый тег (заголовок, абзац, кнопка) становится объектом, которым может управлять JavaScript.
> DOM — это мост между статичным HTML и динамичным JavaScript. Благодаря ему скрипты могут читать содержимое страницы, изменять стили, удалять старые элементы и создавать новые.
Процесс взаимодействия состоит из двух шагов:
В этом примере мы использовали обработчик событий (Event Listener). Событием может быть что угодно: клик мыши, нажатие клавиши на клавиатуре, прокрутка страницы или отправка формы. Именно так создаются интерактивные интерфейсы.
Общение с сервером: получение данных
Современные сайты не хранят все данные внутри HTML-файла. Представьте YouTube: видеоролики, комментарии и лайки хранятся на мощных удаленных компьютерах — серверах. Ваш браузер (клиент) должен уметь запрашивать эти данные и отображать их.
Для общения между клиентом и сервером используется API (Application Programming Interface). Это набор правил, по которым программы общаются друг с другом.
Аналогия из жизни: вы приходите в ресторан. Вы (клиент) не идете на кухню (сервер), чтобы приготовить еду. Вы открываете меню, выбираете блюдо и отдаете заказ официанту (API). Официант относит заказ на кухню, а затем приносит вам готовое блюдо (данные).
В JavaScript для отправки таких «официантов» используется встроенный механизм fetch.
Данные от сервера обычно приходят в формате JSON (JavaScript Object Notation). Визуально он очень похож на обычные объекты JavaScript, что делает его идеальным форматом для передачи информации в вебе.
Этот процесс происходит асинхронно. Это значит, что пока браузер ждет ответа от сервера (что может занять несколько секунд), страница не зависает. Пользователь может продолжать скроллить сайт и нажимать на другие кнопки.
Путь к современным фреймворкам
Понимание того, как работают переменные, функции, DOM и запросы к серверу — это фундамент профессии фронтенд-разработчика.
Когда вы начнете создавать по-настоящему большие проекты (например, аналоги социальных сетей или сложные панели управления), вы заметите, что писать весь код на «чистом» JavaScript (его часто называют Vanilla JS) становится тяжело. Код разрастается, управлять изменениями в DOM становится сложно, появляются ошибки.
Именно для решения этих проблем индустрия создала современные библиотеки и фреймворки: React, Vue и Angular. Они берут на себя рутинную работу по обновлению DOM и предлагают более удобные способы организации кода.
Однако важно понимать: ни один фреймворк не отменяет базовых правил языка. Под капотом React всё равно использует те же переменные const, те же массивы, те же функции и те же запросы fetch. Глубокое понимание основ JavaScript позволит вам не просто слепо копировать код из документации фреймворков, а осознанно проектировать архитектуру надежных и быстрых веб-приложений.