LearnJS

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

Чтобы JavaScript начал работать на странице, его нужно подключить к HTML. Сам браузер умеет читать HTML-разметку, применять CSS-стили и выполнять JavaScript-код. Но для этого ему нужно показать, где именно находится наш скрипт.

Для подключения JavaScript используется тег <script>. С его помощью можно написать код прямо внутри HTML-файла или подключить отдельный файл с расширением .js.

Тег script

<script> - это HTML-тег, который сообщает браузеру: дальше будет JavaScript-код. Когда браузер доходит до этого тега, он выполняет скрипт.

Самый простой пример:

<script>
  console.log('Привет, JavaScript!');
</script>

Если открыть такую страницу в браузере, сообщение появится в консоли разработчика. Пока не страшно, если консоль еще незнакома. В следующих уроках мы отдельно разберем, как с ней работать.

JavaScript внутри HTML

Первый способ - написать JavaScript прямо в HTML-файле. Например, у нас есть обычная страница:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Моя первая страница</title>
</head>
<body>
  <h1>Привет!</h1>

  <script>
    alert('JavaScript подключен');
  </script>
</body>
</html>

В этом примере скрипт находится перед закрывающим тегом </body>. После загрузки страницы браузер выполнит код и покажет всплывающее окно.

Такой способ подходит для первых экспериментов и небольших примеров. Но если кода становится больше, HTML быстро превращается в неудобную смесь разметки и логики.

Подключение внешнего JS-файла

Второй способ - создать отдельный файл, например script.js, и подключить его к HTML-странице. Обычно это более удобный вариант.

Структура файлов может быть такой:

project/
  index.html
  script.js

В файле script.js пишем JavaScript:

console.log('Файл script.js подключен');

А в index.html подключаем этот файл через атрибут src:

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

Полный пример страницы:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Подключение JavaScript</title>
</head>
<body>
  <h1>Моя страница</h1>

  <script src="script.js"></script>
</body>
</html>

Важно: если файл лежит в другой папке, путь нужно указать полностью относительно HTML-файла.

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

В этом примере браузер будет искать файл script.js внутри папки js.

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

Чаще всего на первых уроках тег <script> ставят внизу страницы, перед закрывающим тегом </body>. Это удобно, потому что к этому моменту основные HTML-элементы уже загружены.

<body>
  <button>Нажми меня</button>

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

Также скрипт можно подключить в <head>, но тогда лучше добавить атрибут defer:

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

defer говорит браузеру: загрузи файл заранее, но выполни его после того, как HTML-страница будет разобрана. Для обычных внешних скриптов это хороший и современный вариант.

Какой способ лучше использовать

Для обучения можно начать с кода внутри HTML. Так проще увидеть связь между страницей и скриптом. Но в реальных проектах лучше выносить JavaScript в отдельный файл.

Внешний файл удобнее, потому что:

  • HTML остается чище и понятнее;
  • JavaScript-код легче искать и редактировать;
  • один файл можно подключить на несколько страниц;
  • браузеру проще кэшировать отдельные файлы.

Иногда можно встретить JavaScript прямо в HTML-атрибутах:

<button onclick="alert('Привет!')">Нажми меня</button>

Такой вариант работает, но для обучения лучше сразу привыкать отделять HTML от JavaScript. HTML пусть отвечает за структуру, CSS за внешний вид, а JavaScript за поведение страницы.

Что дальше

Теперь мы знаем, как подключить JavaScript к HTML-странице. В следующем уроке можно будет написать первый небольшой скрипт и посмотреть, как браузер выполняет наш код.