Добавление кода 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.

<!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 и ссылаться на них.

Читайте также:

Tags: ,