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

Последнее обновление: 02.09.2025

В прошлой статье код javascript непосредственно определялся на веб-странице. Но есть еще один способ подключения кода JavaScript, который представляет вынесение кода во внешние файлы и их подключение с помощью тега <script>

Итак, в прошлой теме мы создали html-страницу index.html, которая находится в каталоге app. Теперь создадим в этом каталоге новый подкаталог. Назовем его js. Он будет предназначен для хранения файлов с кодом javascript. В этом подкаталоге создадим новый текстовый файл, который назовем main.js. Файлы с кодом javascript имеют расширение .js. То есть у нас получится следующая структура проекта в папке app:

Структура программы на JavaScript

Откроем файл main.js в текстовом редакторе и определим в нем следующий код:

document.body.innerHTML = "<h2>Первая программа на JavaScript</h2>"; // выводим заголовок
document.body.innerHTML += "Привет мир!";                             // выводим обычный текст

Здесь для добавления на веб-страницу некоторого содержимого применяется свойство document.body.innerHTML. Это свойство включает три компонента:

  1. document: представляет текущий документ HTML (грубо говоря, текущий файл html)

  2. body: представляет элемент body - основное содержимое текущего документа HTML, которое собственно мы и видим на веб-странице в браузере

  3. innerHTML: представляет код HTML элемента body

То есть свойство document.body.innerHTML фактически означает, что мы обращаемся к коду html элемента body на текущей html-странице. Но что мы с ним делаем? Возьмем первую строку

document.body.innerHTML = "<h2>Первая программа на JavaScript</h2>";

Здесь мы передаем во внутренне содержимое элемента body заголовок <h2>.

Далее на второй строке мы добавляем к содержимому элемента body простой текст.

document.body.innerHTML += "Привет мир!";

Для совместимости с кодировкой страницы index.html для файла с кодом javascript также желательно устанавливать кодировку utf-8. При работе в Visual Studio Code этот редактор автоматически устанавливает кодировку UTF-8.

Теперь подключим этот файл на веб-страницу index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>METANIT.COM</title>
</head>
<body>
    <script src="js/main.js"></script>
</body>
</html>

Чтобы подключить файл с кодом javascript на веб-страницу, применяется также тег <script>, у которого устанавливается атрибут src. Этот атрибут указывает на путь к файлу скрипта. В нашем случае используется относительный путь. Так как веб-страница находится в одной папке с каталогом js, то в качестве пути мы можем написать js/main.js.

Также надо учитывать, что за открывающим тегом script должен обязательно следовать закрывающий </script>

И после открытия файла index.html в браузере отобразится сообщение:

Подключение внешних скриптов javascript

В отличие от определения кода javascript вынесение его во внешние файлы имеет ряд преимуществ:

  • Мы можем повторно использовать один и тот же код на нескольких веб-страницах

  • Внешние файлы javascript бразуер может кэшировать, за счет этого при следующем обращении к странице браузер снижает нагрузка на сервер, а браузеру надо загрузить меньший объем информации

  • Код веб-страницы становится "чище". Он содержит только html-разметку, а код поведения хранится во внешних файлах. В итоге можно отделить работу по созданию кода html-страницы от написания кода javascript

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

Асинхронная загрузка и отложенное выполнение

Нередко веб-страницы имеют сложную структуру, какие-то блоки на html-странице, где подключаются файлы javascript, формируются динамически, что может усложнять управление файлами javascript. И для управления загрузкой файла с кодом JavaScript браузер предоставляет два атрибута: async и defer.

Атрибут async гарантирует, что обработка HTML-кода не будет приостановлена, когда браузер встретит элемент <script>. Файл JavaScript загружается асинхронно (отсюда и название атрибута - async). В этом случае HTML-код продолжает обрабатываться до тех пор, пока не будет загружен соответствующий файл JavaScript. Когда будет загружен файл JavaScript, обработка HTML останавливается, и начинает выполняться загруженный файл JS. После выполнения кода JavaScript продолжается обработка HTML.

Асинхронная загрузка файла JavaScript и атрибут async

Пример применения атрибута async:

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

Атрибут defer также гарантирует, что обработка HTML-кода не будет приостановлена. С другой стороны, исходный код JavaScript выполняется только после полной обработки HTML-кода. Таким образом, выполнение кода JavaScript откладывается (отсюда и название - defer (в переводе на английский).

Отложенное выполенние файла JavaScript и атрибут defer

Пример применения атрибута defer:

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

НазадСодержаниеВперед

Помощь сайту
Помощь сайту
Юмани:
410011174743222
Номер карты:
4048415020898850
Телеграмм