1. Основы веб-разработки: HTML, CSS и глубокое погружение в JavaScript
Основы веб-разработки: HTML, CSS и глубокое погружение в JavaScript
Добро пожаловать на курс «Профессия Fullstack-разработчик». Мы начинаем наше путешествие с фундамента, на котором держится весь современный веб. Даже если вы планируете заниматься преимущественно серверной частью (Backend), понимание того, как работает клиентская сторона (Frontend), критически важно для архитектора системы.
Веб-страница — это не просто картинка, это сложный механизм, состоящий из трех основных слоев:
В этой статье мы разберем эти технологии не на уровне «как вставить картинку», а на уровне инженерного понимания их взаимодействия.
HTML: Больше, чем просто теги
HTML (HyperText Markup Language) — это скелет вашего приложения. Многие новички совершают ошибку, рассматривая HTML только как способ размещения элементов на экране. Профессиональный Fullstack-разработчик должен мыслить категориями семантики и DOM (Document Object Model).
Семантическая верстка
Семантика в HTML означает использование тегов, которые передают смысл содержимого, а не его внешний вид. Браузеры, поисковые системы и скринридеры (программы для чтения с экрана) опираются именно на семантику.
Вместо бесконечных div, используйте:
* header — для вводной части страницы или раздела.
* nav — для навигационных ссылок.
* main — для основного содержимого.
* article — для независимого контента (например, пост в блоге).
* section — для тематической группировки контента.
* aside — для контента, косвенно связанного с основным (боковая панель).
DOM-дерево
Когда браузер получает HTML-код, он преобразует его в древовидную структуру объектов — DOM. Это живая структура, с которой мы будем взаимодействовать через JavaScript.
!Визуализация структуры Document Object Model (DOM), показывающая иерархию элементов на веб-странице
CSS: Геометрия и каскад
CSS (Cascading Style Sheets) отвечает за то, как элементы выглядят. Но для разработчика важнее понимать, как они занимают место в пространстве. Здесь в игру вступает блочная модель (Box Model).
Блочная модель
Каждый элемент в HTML — это прямоугольный бокс. Понимание того, как рассчитывается его размер, избавляет от 90% проблем с версткой.
Размер элемента складывается из нескольких компонентов. Рассмотрим формулу расчета полной ширины элемента:
Где:
* — полная ширина, которую элемент занимает на странице.
* — ширина контента (свойство width).
* — внутренние отступы (padding) слева и справа.
* — толщина границ (border) слева и справа.
* — внешние отступы (margin) слева и справа.
!Схематичное изображение блочной модели CSS, демонстрирующее слои Content, Padding, Border и Margin
> Важно: Свойство box-sizing: border-box изменяет это поведение, включая padding и border в общую ширину width, что значительно упрощает расчеты.
JavaScript: Глубокое погружение
JavaScript — это язык программирования, который «оживляет» страницу. Для Fullstack-разработчика JS является основным инструментом, так как (благодаря Node.js) он используется и на сервере.
Переменные и области видимости
В современном стандарте ES6+ мы отказались от var в пользу let и const.
const: Используется по умолчанию. Создает константу, которую нельзя переназначить. Однако, если это объект, его свойства можно* менять. * let: Используется, когда значение переменной будет меняться.
Ключевое отличие var от let/const — это область видимости (Scope). var имеет функциональную область видимости, а let и const — блочную (ограниченную фигурными скобками {}).
Типы данных
В JavaScript существует 8 типов данных. Их можно разделить на две категории: примитивы и объекты.
Примитивы (передаются по значению):
Объекты (передаются по ссылке):
Понимание передачи по ссылке критически важно. Если вы скопируете объект const a = { x: 1 }; const b = a;, то изменение b.x изменит и a.x, так как обе переменные ссылаются на одну и ту же область памяти.
Асинхронность и Event Loop
JavaScript — однопоточный язык. Это означает, что он может выполнять только одну операцию в единицу времени. Но как тогда браузер обрабатывает клики, загружает данные с сервера и показывает анимацию одновременно? Ответ кроется в Event Loop (Цикл событий).
Механизм работы выглядит так:
!Визуализация цикла событий (Event Loop), объясняющая асинхронную природу JavaScript
Для работы с асинхронностью мы используем Promises и синтаксис async/await.
Пример асинхронной функции:
Манипуляция DOM
JavaScript взаимодействует с HTML через DOM API. Это набор методов, позволяющих искать элементы, изменять их и реагировать на события.
Основные методы:
* document.querySelector(selector) — возвращает первый элемент, соответствующий CSS-селектору.
* element.addEventListener(event, handler) — добавляет обработчик события (например, клика).
* element.innerHTML / element.textContent — чтение и изменение содержимого.
Взаимодействие технологий
Когда вы открываете сайт, происходит следующий процесс:
JavaScript может вмешаться в этот процесс на любом этапе, изменяя DOM или стили, что вызывает повторный Layout и Paint (или Reflow и Repaint).
Заключение
Мы рассмотрели «святую троицу» веб-разработки. HTML создает смысл и структуру, CSS отвечает за визуальное восприятие и геометрию, а JavaScript управляет логикой и данными. В следующих статьях мы перейдем к архитектуре приложений и начнем строить более сложные системы, но понимание этих основ останется с вами навсегда.
В следующем модуле мы углубимся в работу протоколов HTTP и то, как клиент общается с сервером.