Как подключить JavaScript к странице?

JavaScript подключают к странице тегом `<script>`: внешний файл через `src` (рекомендуется, с `defer`/`async`), инлайн-код внутри тега, или как модуль `type="module"`.

Способы подключения

Внешний файл (рекомендуется)

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

Лучше с атрибутами:

<script defer src="app.js"></script>   <!-- после DOM, порядок сохранён -->
<script async src="analytics.js"></script> <!-- по загрузке, без порядка -->

Инлайн-код

<script>
  console.log('код прямо в HTML');
</script>

ES-модуль

<script type="module" src="main.js"></script>
<script type="module">
  import { fn } from './utils.js';
</script>

Модули: своя область видимости, строгий режим, ведут себя как defer.

Где размещать

В конце body (классика без defer)

<body>
  ...
  <script src="app.js"></script> <!-- DOM уже построен -->
</body>

В head с defer (современно)

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

Атрибуты загрузки

• defer — параллельная загрузка, выполнение после DOM, порядок сохранён (для скриптов, работающих с DOM).
• async — параллельная загрузка, выполнение по готовности, порядок не гарантирован (для независимых).
• Без атрибутов — блокирует парсинг.

Как выбирать

• Скрипт с DOM/зависимостями → `<script defer>` в head.
• Независимый (аналитика) → `<script async>`.
• Модульный код → `type="module"`.

Коротко для собеседования

JS подключают тегом <script>: внешний файл src (рекомендуется, с defer — после DOM, порядок сохранён, или async — по загрузке, без порядка), инлайн-код внутри тега, ES-модуль type="module" (своя область, как defer). Размещают в конце body или в head с defer. Без атрибутов скрипт блокирует парсинг.