Как подключить 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:
<!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>. Он даст сигнал браузеру о том, что нужно запустить сценарий, прежде чем загрузится остальное содержимое страницы:
<!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>. Теперь дата будет отображаться на странице:
<!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-шаблона из раздела выше:
<!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:
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>:
<!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>:
body {
background-color: #0080ff;
}
h1 {
color: #fff;
font-family: Arial, Helvetica, sans-serif;
}Теперь можно добавить ссылку на CSS-файл:
<!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, можно вызвать из других страниц тем же способом, описанным выше.