Как подключить JS файл к HTML-документу?

2022-04-20

JavaScript - это язык программирования, используемый в веб-разработке. Он используется для создания интерактивных веб-страниц и веб-приложений. Современные браузеры поддерживают JavaScript при помощи тега HTML script и не требуют установки дополнительных плагинов.

JavaScript необходимо загружать и запускать одновременно с разметкой. Это можно сделать как внутри HTML-документа, так и в отдельном файле, который браузер загрузит одновременно с HTML.

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

Как подключить JavaScript к HTML-документу

Можно добавить JavaScript в HTML-документ при помощи специального тега <script>. Он может быть помещен в раздел <head> HTML-документа, <body> или после него. В зависимости от того, когда необходимо загрузить JavaScript.

Как правило, JavaScript-код помещается внутри раздела <head>, что позволяет держать его за пределами основного содержимого HTML-документа.

Но если ваш сценарий должен запускаться в определенном месте разметки страницы, тогда его размещают в <body>.

Рассмотрим следующий HTML-документ с заголовком Today's Date:

index.html

<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> Today's Date</title>
</head>

<body>

</body>

</html>

На данный момент файл содержит разметку, в которой не используется тег script в HTML. Допустим, мы хотим добавить в него следующий JavaScript-код:

let d = new Date();
alert("Today's date is " + d);

Этот код позволит веб-странице отображать сообщение с текущей датой независимо от того, когда пользователь загружает сайт.

Начнем с того, что добавим скрипт между тегами <head>. Он даст сигнал браузеру о том, что нужно запустить сценарий, прежде чем загрузится остальное содержимое страницы:

index.html

<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> Today's Date</title>
    <script>
        let d = new Date();
        alert("Today's date is " + d);
    </script>
</head>

<body>

</body>



</html>

Теперь при загрузке страницы с HTML script вы увидите сообщение, которое будет выглядеть так:

Как подключить JavaScript к HTML-документу

Можно поэкспериментировать: вставить этот код внутри или наоборот вынести за пределы тега <body> и перезагрузить страницу. Поскольку HTML-документ достаточно прост, вы не заметите никакой разницы.

Чтобы внести изменения в структуру HTML-документа, нужно разместить код после раздела <head>. Теперь дата будет отображаться на странице:

index.html

<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> Today's Date</title>
</head>

<body>

  <script>
      let d = new Date();
      document.body.innerHTML = "<h1>Today’s date is " + d + "</h1>"
  </script>

</body>

</html>

При загрузке приведенного выше HTML-документа в браузере веб-страница с script body HTML будет выглядеть следующим образом:

Как подключить JavaScript к HTML-документу - 2

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

Работа с отдельным JavaScript-файлом

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

Преимущества использования отдельного JavaScript-файла:

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

Для того чтобы продемонстрировать подключение JavaScript к HTML-документу, в котором отсутствует тег script в HTML создадим небольшой веб-проект. Он будет состоять из файла script.js, расположенного в каталоге js/, файла style.css, расположенного в каталоге css/ и главной страницы index.html, расположенной в корне проекта:

Можно начать с HTML-шаблона из раздела выше:

index.html

<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Today’s Date</title>
</head>

<body>

</body>

</html>

Теперь переместим JavaScript-код, который будет показывать дату в виде заголовка <h1>, в файл script.js:

script.js

let d = new Date();
document.body.innerHTML = "<h1>Today’s date is " + d + "</h1>"

Без script type text html ссылку на этот сценарий можно разместить <body> или под ней:

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

Тег <script> указывает на файл script.js, размещенный в каталоге js/ веб-проекта. Посмотрим на эту строку в контексте нашего HTML-файла, размещенную под разделом <body>:

index.html

<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Today’s Date</title>
</head>

<body>

</body>

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

</html>

Отредактируем файл style.css, добавив цвет фона и стиль заголовка <h1>:

style.css

body {
    background-color: #0080ff;
}

h1 {
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
}

Теперь можно добавить ссылку на CSS-файл:

index.html

<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Today’s Date</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>

</body>

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

</html>

Теперь, когда мы добавили JavaScript и CSS, можно загрузить страницу index.html в браузере. Она будет выглядеть следующим образом: