Как подключить Javascript файл к html документу?
Предположим, что у вас есть html-документ и javascript код, который должен в нем выполняться. Код javacript может находиться как внутри html-документа, так и в отдельном файле формата *.js.
Проблема, которая очень часто появляется у начинающих пользователей: Как подключить javacript-код или файл к html документу?
В этой небольшой заметке мы рассмотрим, как это можно сделать.
Все мои уроки по Javascript здесь.
Пусть содержимое файла html будет следующее:
Ничего лишнего. Теперь код, который необходимо подключить:
Т.е. этот скрипт просто должен вывести всплывающее окно с сообщением, что "Javacript подключен" при открытии файла html-документа. Итак, рассматриваем два варианта подключения скрипта.
Вариант 1. Подключение внутри html-файла.
Делается это с помощью конструкции:
Вставим этот код можно внутри тэга <body>, либо внутри тега <head>. В итоге, содержимое html файла может буть следующим:
Проверяем, что все работает:
Отлично. Окно с сообщением появилось.
Вариант 2. Подключение внешнего файла скрипта с кодом.
Если javascript-код находится во внешнем файле, то способ его подключение будет несколько другим. Пусть такой файл называется script.js. О том, как создать javascript файл я писал здесь.
В итоге, имеем два файла index.html и script.js, которые находятся в одной папке.
Как теперь подключить скрипт к html файлу? В этом случае нужно воспользоваться тэгом
Об адресах и как их правильно выставлять информация здесь.
Так как файл скрипта script.js находится в той же папке, что и файл index.html, то html-код может быть следующим:
Как правило, скрипты подключаются в области <head> документа. Если все сделано правильно, то вы точно также сможете увидеть всплывающее окно с надписью, что "javascript подключен". Это два основных способа, как вы можете подключить код javascript к html документу.
Как подключить js к html
В прошлой статье код javascript непосредственно определялся на веб-странице. Но есть еще один способ подключения кода JavaScript, который представляет вынесение кода во внешние файлы и их подключение с помощью тега <script>
Итак, в прошлой теме мы создали html-страницу index.html , которая находится в каталоге app . Теперь создадим в этом каталоге новый подкаталог. Назовем его js . Он будет предназначен для хранения файлов с кодом javascript. В этом подкаталоге создадим новый текстовый файл, который назовем myscript.js . Файлы с кодом javascript имеют расширение .js . То есть у нас получится следующая структура проекта в папке app :
Откроем файл myscript.js в текстовом редакторе и определим в нем следующий код:
Здесь для добавления на веб-страницу некоторого содержимого применяется метод document.write . Первый вызов метода document.write выводит заголовок <h2> , а второй вызов — обычный текст.
Для совместимости с кодировкой страницы index.html для файла с кодом javascript также желательно устанавливать кодировку utf-8. При работе в Visual Studio Code этот редактор автоматически устанавливает кодировку UTF-8.
Теперь подключим этот файл на веб-страницу index.html :
Чтобы подключить файл с кодом javascript на веб-страницу, применяется также тег <script> , у которого устанавливается атрибут src . Этот атрибут указывает на путь к файлу скрипта. В нашем случае используется относительный путь. Так как веб-страница находится в одной папке с каталогом js, то в качестве пути мы можем написать js/myscript.js .
Также надо учитывать, что за открывающим тегом script должен обязательно следовать закрывающий </script>
И после открытия файла index.html в браузере отобразится сообщение:
В отличие от определения кода javascript вынесение его во внешние файлы имеет ряд преимуществ:
Мы можем повторно использовать один и тот же код на нескольких веб-страницах
Внешние файлы javascript бразуер может кэшировать, за счет этого при следующем обращении к странице браузер снижает нагрузка на сервер, а браузеру надо загрузить меньший объем информации
Код веб-страницы становится «чище». Он содержит только html-разметку, а код поведения хранится во внешних файлах. В итоге можно отделить работу по созданию кода html-страницы от написания кода javascript
Поэтому, как правило, предпочтительнее использовать код javascript во внешних файлах, а не в прямых вставках на веб-страницу с помощью элемента script.
Добавление кода JavaScript в HTML
JavaScript (JS) – это язык программирования, используемый в веб-разработке. Наряду с HTML и CSS JavaScript является одной из основных технологий и используется для создания интерактивных веб-страниц и приложений. Современные веб-браузеры, которые придерживаются базовых стандартов отображения, поддерживают JavaScript через встроенные модули и не требуют дополнительных плагинов.
Создавая файлы приложения, JavaScript необходимо загружать и запускать вместе с разметкой HTML. Это можно сделать либо внутри HTML-документа, либо в отдельном файле, который браузер загрузит вместе с HTML-документом.
Данный манул научит внедрять JavaScript в HTML-документы и отдельные файлы программы.
Добавление JavaScript в HTML-документ
Чтобы вставить JavaScript в HTML-документ, используйте специальный тег <script>, который охватывает код JavaScript.
Тег <script> можно вставить в раздел <head> и в <body> или после закрывающего тега </body> в зависимости от того, когда нужно загрузить JavaScript.
Как правило, код JavaScript размещается внутри раздела <head>, что позволяет отделить его от основного содержимого документа HTML.
Однако если скрипт должен запускаться в определенной точке разметки страницы, его нужно размещать именно в этой точке. Обычно она находится внутри раздела <body>.
Рассмотрим следующий HTML-документ с заголовком Today’s Date.
На данный момент этот файл содержит только разметку HTML. Предположим, в документ нужно добавить следующий код JavaScript:
let d = new Date();
alert(«Today’s date is » + d);
Этот код позволит веб-странице отображать сообщение с текущей датой независимо от того, когда пользователь загружает сайт.
Для этого нужно добавить тег <script> и поместить в него код JavaScript.
Добавьте код JavaScript в раздел <head>. В этом случае браузер будет обрабатывать JavaScript прежде остального содержимого страницы. Добавьте следующий код JavaScript в теги <title>.
<!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>
Загрузите страницу. На ней появится следующее предупреждение:
Today’s date is Thu Jun 29 2017 10:46:47 GMT-0400 (EDT)
Попробуйте добавить этот код в раздел <body> и вынести его за этот раздел. Поскольку этот 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>
<script>
let d = new Date();
document.body.innerHTML = «<h1>Today’s date is » + d + «</h1>»
</script>
</body>
</html>
Загрузите эту страницу в браузере. Теперь дата будет указана прямо в теле страницы.
Today’s date is Thu Jun 29 2017 14:04:45 GMT-0400 (EDT)
Небольшие скрипты и скрипты для одной страницы будут хорошо работать внутри HTML-документа. Но объемные скрипты, предназначенные для нескольких страниц, помещать в документ не очень эффективно. Такие скрипты будут лучше обрабатываться в отдельных файлах.
Отдельные файлы JavaScript
Большие скрипты JavaScript помещают в специальные файлы js, а затем ссылаются на них внутри HTML-документа. Подобный механизм используется в CSS.
Преимущества такого подхода:
- Разметку HTML и скрипты JavaScript проще читать по отдельности.
- Такой код проще поддерживать.
- Если JavaScript кэшируется, страницы будут быстрее загружаться.
Чтобы научиться связывать файлы JavaScript с HTML, создайте небольшой тестовый проект. Он будет состоять из таких файлов:
- script.js в каталоге js/,
- style.css в каталоге css/,
- главный файл index.html в корневом каталоге проекта.
project/
├── css/
| └── style.css
├── js/
| └── script.js
└── index.html
Начать можно с файла index.html и шаблона, который мы рассмотрели в предыдущем разделе.
Затем перейдите к файлу script.js, в котором хранится скрипт JavaScript. Он будет отображать заголовок <h1>.
let d = new Date();
document.body.innerHTML = «<h1>Today’s date is » + d + «</h1>»
Добавьте ссылку на этот скрипт в раздел <body> или под ним:
Тег <script> указывает на скрипт script.js в каталоге js/.
Теперь главный документ index.html будет выглядеть так:
Теперь отредактируйте файл style.css и укажите в нем цвет фона и стиль заголовка <h1>.
body <
background-color: #0080ff;
>
h1 <
color: #fff;
font-family: Arial, Helvetica, sans-serif;
>
После этого нужно сослаться на файл CSS в разделе <head> 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>
<link rel=»stylesheet» href=»css/style.css»>
</head>
<body>
</body>
<script src=»https://www.8host.com/blog/dobavlenie-koda-javascript-v-html/js/script.js»></script>
</html>
Попробуйте загрузить эту страницу в браузере. Она будет выглядеть так:
Today’s date is Thu Jun 29 2017 14:08:55 GMT-0400 (EDT)
На этот файл JavaScript могут ссылаться и другие HTML-документы.
Заключение
Теперь вы умеете внедрять код JavaScript в HTML-документы, создавать специальные файлы для скриптов JavaScript и ссылаться на них.