Как работают вместе HTML, CSS и JavaScript

Вы уже умеете писать код на JavaScript — но где он живёт? Как браузер загружает страницу, при чём тут DOM, и почему важно, куда вы ставите тег <script>. Разберём всё по порядку.

🏗️ Три технологии — три роли

Каждый сайт в интернете построен на трёх технологиях. Они работают вместе, но у каждой — своя чёткая роль. Попробуйте представить строительство дома:

Посмотрим на конкретный пример. Вот кнопка в HTML:

<!-- HTML: просто кнопка — она существует, но ничего не делает -->
<button>Нажми меня</button>

Добавляем CSS — кнопка стала красивой:

/* CSS: кнопка теперь выглядит красиво */
button {
  background: #3b82f6;
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
  border: none;
  font-size: 1rem;
  cursor: pointer;
}

Добавляем JavaScript — кнопка ожила:

// JavaScript: кнопка теперь что-то ДЕЛАЕТ
document.querySelector('button').addEventListener('click', function() {
  alert('Привет! Кнопка работает!');
});

Без JavaScript кнопка просто существует и выглядит. С JavaScript — она реагирует. Именно это делает страницу интерактивной.

🔄 Как браузер загружает страницу — шаг за шагом

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

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

Есть несколько способов добавить JavaScript на страницу. Разберём каждый.

Способ 1: Встроенный скрипт

Прямо в HTML, внутри тега <script>:

<!DOCTYPE html>
<html>
  <head>
    <title>Мой сайт</title>
  </head>
  <body>
    <h1>Привет!</h1>

    <!-- Встроенный JS прямо в HTML -->
    <script>
      console.log('Страница загружена!');
    </script>
  </body>
</html>

Подходит для маленьких скриптов, но неудобен — весь код смешивается с HTML. Для реальных проектов так не делают.

Способ 2: Внешний файл

JavaScript пишется в отдельном файле script.js, а в HTML добавляется ссылка:

<!-- Подключение внешнего JS-файла -->
<script src="script.js"></script>

Это правильный подход. Код отдельно — удобно редактировать, кешируется браузером, можно подключить к нескольким страницам.

Куда ставить тег <script>?

Вот где начинается важный выбор. У вас есть три варианта:

<head>
  <script src="script.js"></script> <!-- блокирует загрузку! -->
</head>

<body>
  <h1>Контент</h1>
  <!-- ... весь HTML ... -->

  <script src="script.js"></script> <!-- в конце тела -->
</body>

<head>
  <script src="script.js" defer></script> <!-- правильно! -->
</head>

⚖️ defer vs async — в чём разница

У тега <script> есть два «ускоряющих» атрибута. Новички часто путают их.

<script src="app.js" defer></script>

<script src="analytics.js" async></script>

Вот итоговая шпаргалка по загрузке скриптов:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Мой проект</title>

  <!-- Стили — всегда в head, они не блокируют парсинг HTML -->
  <link rel="stylesheet" href="styles.css">

  <!-- Свой JS — defer в head. Скачается параллельно, выполнится после DOM -->
  <script src="app.js" defer></script>

  <!-- Сторонний независимый скрипт (Google Analytics и т.п.) — async -->
  <script src="analytics.js" async></script>
</head>
<body>
  <h1>Привет, мир!</h1>
  <button id="myBtn">Нажми меня</button>
</body>
</html>

🛠️ Всё вместе: реальный пример

Представим маленький проект: страница с кнопкой, которая меняет заголовок при клике. Вот как всё три технологии работают вместе:

index.html — структура страницы:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Моя страница</title>
  <link rel="stylesheet" href="style.css">
  <script src="app.js" defer></script>
</head>
<body>
  <h1 id="title">Добро пожаловать!</h1>
  <button id="changeBtn">Изменить заголовок</button>
</body>
</html>

style.css — внешний вид:

body {
  font-family: sans-serif;
  padding: 40px;
}

h1 {
  color: #1e40af;
}

button {
  padding: 10px 24px;
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
}

app.js — поведение:

// Этот код выполнится ПОСЛЕ построения DOM (благодаря defer)
const title = document.getElementById('title');
const btn = document.getElementById('changeBtn');

btn.addEventListener('click', function() {
  title.textContent = 'Заголовок изменился! 🎉';
});

⚠️ Типичные ошибки новичков

// В head без defer — элемент ещё не создан!
const btn = document.getElementById('myBtn'); // null
btn.addEventListener('click', ...); // TypeError: Cannot read properties of null

<script src="App.js" defer></script> <!-- файл называется app.js -->
<!-- На Linux/Mac — регистр важен! Скрипт не загрузится -->

<!-- Устаревший антипаттерн — смешивать HTML и JS -->
<button onclick="alert('клик')">Кнопка</button>

✅ Итоги урока

• HTML — структура (что есть на странице), CSS — стиль (как выглядит), JS — поведение (что делает)
• Браузер строит DOM из HTML, CSSOM из CSS, объединяет в Render Tree и рисует пиксели
• Тег <script> без атрибутов блокирует построение DOM — это медленно и опасно
• defer: скрипт скачивается параллельно, выполняется после DOM — лучший вариант для своих скриптов
• async: выполняется сразу после скачивания, порядок не гарантирован — для независимых сторонних скриптов
• Правильная структура: CSS в <head>, свои скрипты в <head defer>