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

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

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

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

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

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

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

Как добавить JavaScript в 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 JavaScript-код, размещенный в отдельном файле, а не в HTML script src, можно вызвать из иных страниц тем же методом, описанным выше.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *