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

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 вы увидите сообщение, которое будет выглядеть так:

Можно поэкспериментировать: вставить этот код внутри или наоборот вынести за пределы тега <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 будет выглядеть следующим образом:

Небольшие сценарии могут отлично работать внутри 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 в браузере. Она будет выглядеть следующим образом:

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

Пожалуйста, оставляйте ваши мнения по текущей теме материала. Мы очень благодарим вас за ваши комментарии, лайки, дизлайки, отклики, подписки!

Данная публикация является переводом статьи «HOW TO ADD JAVASCRIPT TO HTML» , подготовленная редакцией проекта.

Меню