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.
<!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>
На данный момент этот файл содержит только разметку 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 и шаблона, который мы рассмотрели в предыдущем разделе.
<!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.js, в котором хранится скрипт JavaScript. Он будет отображать заголовок <h1>.
let d = new Date();
document.body.innerHTML = "<h1>Today's date is " + d + "</h1>"
Добавьте ссылку на этот скрипт в раздел <body> или под ним:
<script src="js/script.js"></script>
Тег <script> указывает на скрипт script.js в каталоге js/.
Теперь главный документ 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>.
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="js/script.js"></script>
</html>
Попробуйте загрузить эту страницу в браузере. Она будет выглядеть так:
Today’s date is Thu Jun 29 2017 14:08:55 GMT-0400 (EDT)
На этот файл JavaScript могут ссылаться и другие HTML-документы.
Заключение
Теперь вы умеете внедрять код JavaScript в HTML-документы, создавать специальные файлы для скриптов JavaScript и ссылаться на них.
Читайте также: