Загрузка...

Куда помещать JavaScript

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

Куда следует помещать JavaScript на HTML-странице?

Помещайте JavaScript в элемент <script> — либо встроенно между тегами, либо внешне через src на файл .js. Для повседневной работы новичка, который трогает страницу, ставьте скрипт прямо перед </body>, чтобы HTML выше был готов. Когда код растёт, переносите его во внешний файл, сохраняя ту же привычку в конце body (позже узнаете defer).

Три варианта размещения одним взглядом

📊 Где может жить JavaScript

Вариант Где находится Лучшее применение для новичка
Встроенно в head <script> внутри <head> Только крошечная настройка; риск, если элементов ещё нет
Встроенно в конце body <script> прямо перед </body> По умолчанию для коротких демо, меняющих заголовок или текст
Внешний файл .js <script src="app.js"> (часто конец body) По умолчанию, когда логика растёт или файл переиспользуется

Скрипт в head (знать и использовать осторожно)

Скрипт в head выполняется рано, пока браузер ещё читает документ. Это может задержать видимое содержимое. Если код сразу ищет элемент через getElementById, его может ещё не быть — результат null или ошибка.

Скрипт в head

html 
<!DOCTYPE html>
<html>
<head>
<title>Where To — Head</title>
<script>
console.log("Head script ran early");
</script>
</head>
<body>
<h1>Content comes after the head script</h1>
</body>
</html>

Когда скрипт в head уместен

  • Логировать сообщение или задать простое значение без DOM
  • Загружать библиотеку с современными атрибутами (позже встретите defer / async)
  • Не ваш вариант по умолчанию для демо «измени этот абзац» в этом курсе

Скрипт в конце body (по умолчанию для новичка)

Сначала разметка, нужная посетителям. Затем выполните скрипт. Элементы с id выше скрипта уже есть в документе, когда выполняются инструкции.

Скрипт в конце body

html 
<!DOCTYPE html>
<html>
<head>
<title>Where To — Body End</title>
</head>
<body>
<h1 id="title">Loading…</h1>
<p>HTML arrives first; then the script updates the heading.</p>
<script>
document.getElementById("title").textContent =
"Ready — script ran at the end of body";
</script>
</body>
</html>

Почему эта привычка помогает

  • Заголовок и абзац могут появиться до окончания работы скрипта
  • getElementById("title") находит реальный узел
  • Короткие демо остаются в одном файле, пока вы учите язык
  • Позже те же инструкции переносите во внешний файл, не меняя идею

Внешний файл JavaScript (по умолчанию для проекта)

Структуру оставьте в HTML, логику — в app.js. Укажите файл через src. Пути относительны к HTML, если не задана папка.

HTML загружает app.js

html 
<!DOCTYPE html>
<html>
<head>
<title>Where To — External</title>
</head>
<body>
<h1 id="title">Loading…</h1>
<script src="app.js"></script>
</body>
</html>

Внешний app.js

javascript 
document.getElementById("title").textContent =
"Loaded from app.js";

Почему внешний файл выигрывает при росте

  • Один .js может обслуживать несколько страниц
  • Редакторы ярче подсвечивают JavaScript в отдельном файле
  • Вы избегаете огромных блоков <script> в разметке
  • Неверный путь src молча не срабатывает — смотрите Console и Network, если ничего не бежит

Порядок важен

Браузер читает сверху вниз. Скрипт выполняется, когда парсер до него доходит (если позже не используются продвинутые атрибуты). Если первой строке нужен #title, этот элемент должен быть выше скрипта в HTML, либо ждите завершения документа. Конец body — простой способ получить правильный порядок.

Попробуйте сами

  1. Создайте where.html с примером конца body. Откройте и убедитесь, что заголовок обновился.
  2. Измените строку textContent, сохраните и обновите страницу.
  3. Создайте app.js с JavaScript внешнего примера. В where.html оставьте только <script src="app.js"></script> перед </body>.
  4. Временно переименуйте app.js или сломайте путь src, обновите и смотрите Console — затем исправьте путь.
  5. По желанию: перенесите тот же скрипт в head (без defer) и увидите, что getElementById может упасть; верните в конец body.

Типичные ошибки

  • Класть обновляющий DOM скрипт в head, чтобы getElementById сработал до появления элемента
  • Подключать <script src="app.js"> с опечаткой или неверной папкой — страница выглядит нормально, но ничего не выполняется
  • Оставлять сотни строк встроенными в каждый HTML вместо общего .js
  • Путать этот урок с подключением CSS: стили — через <link> / <style>; поведение — через <script>

Итог

  • JavaScript живёт в <script> — встроенно или через src к файлу .js
  • Конец body — удобный по умолчанию вариант, когда код трогает элементы страницы
  • Скрипты в head выполняются рано; не обновляйте там DOM, пока не знаете атрибуты загрузки
  • Внешние файлы — проектный стандарт, когда демо растут
  • Порядок скрипта следует порядку документа, пока позже не появятся продвинутые опции
  • Практикуйтесь, разделяя рабочее встроенное демо на HTML + app.js

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓
6
Вопросы
🎯
70%
Для Прохождения
♾️
∞
Время
🔄
∞
Попытки

📝 Инструкции

  • Внимательно прочитайте каждый вопрос
  • Выберите лучший ответ на каждый вопрос
  • Вы можете пересдавать тест столько раз, сколько захотите
  • Ваш прогресс будет показан вверху
Тема 2 из 4
Javascript Урок