Скрипты HTML
Скрипт в HTML — это небольшая встроенная программа, добавляющая интерактивность на сайт. Узнайте, как добавлять скрипты, с W3Docs.
Скрипт — это небольшой фрагмент кода, встроенный в веб-страницу, который делает её динамичной и интерактивной. Например, с помощью скриптов можно создать всплывающее сообщение, выпадающее меню или выполнить валидацию формы перед её отправкой. JavaScript — наиболее распространённый язык сценариев, используемый на веб-сайтах.
На этой странице рассматривается, как добавить JavaScript в HTML-документ, куда помещать элемент <script>, как управлять временем его выполнения с помощью defer и async, а также как предоставить запасной вариант для пользователей без JavaScript. Полный список атрибутов <script> см. в соответствующем справочнике тега <script>.
Как добавить скрипты
Элемент <script> либо содержит встроенный код, либо ссылается на внешний файл. Существует два способа его использования:
1. Встроенный скрипт — код пишется непосредственно между открывающим и закрывающим тегами:
<script>
document.body.style.backgroundColor = "lightyellow";
</script>2. Внешний скрипт — атрибут src указывает на файл .js. Элемент должен быть пустым (без кода между тегами):
<script src="scripts.js"></script>Если один и тот же код нужен на многих страницах, поместите его в отдельный файл .js и подключите с помощью src. Внешние файлы кэшируются браузером, сохраняют HTML чистым и позволяют повторно использовать один скрипт на всём сайте.
Скрипты часто размещают в <head> или непосредственно перед закрывающим тегом </body>, однако <script> может располагаться в любом месте документа. Расположение имеет значение из-за того, как браузер разбирает страницу — см. раздел Куда помещать скрипт ниже.
Пример встроенной работы с DOM
Встроенный скрипт может читать и изменять страницу через DOM. В примере ниже находим абзац по его id и переписываем его текст при выполнении скрипта:
Inline Script — HTML Scripts — W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Inline script example</title>
</head>
<body>
<p id="message">Original text.</p>
<script>
document.getElementById("message").textContent = "Changed by JavaScript!";
</script>
</body>
</html>Поскольку <script> расположен после <p>, элемент уже существует в DOM на момент выполнения скрипта, поэтому getElementById его находит. Если бы скрипт выполнился до появления элемента, он вернул бы null.
Примечание: в HTML5 атрибут type является необязательным (по умолчанию text/javascript) и считается устаревшим для JavaScript-скриптов.
defer и async
Когда скрипт находится в <head>, браузер обычно приостанавливает разбор HTML, загружает скрипт, выполняет его и лишь затем продолжает разбор. На больших скриптах это блокирует рендеринг и замедляет загрузку страницы. Атрибуты defer и async (применяются только к внешним скриптам с src) решают эту проблему, загружая скрипт параллельно с разбором HTML — они отличаются временем выполнения скрипта.
| Атрибут | Загрузка | Время выполнения | Сохраняет порядок? |
|---|---|---|---|
| (нет) | Блокирует разбор во время загрузки | Немедленно, блокируя разбор | Да |
defer | Параллельно с разбором | После полного разбора HTML, непосредственно перед DOMContentLoaded | Да |
async | Параллельно с разбором | Сразу после завершения загрузки, прерывая разбор в этот момент | Нет — кто загрузился первым, тот и выполняется первым |
<head>
<!-- Runs in order, after the whole page is parsed -->
<script src="library.js" defer></script>
<script src="app.js" defer></script>
<!-- Runs as soon as it loads, order not guaranteed -->
<script src="analytics.js" async></script>
</head>Используйте defer для скриптов, зависящих от DOM или друг от друга (большинство кода приложения). Используйте async для независимых скриптов, не требующих ничего другого, — например, аналитики или рекламных тегов.
Куда помещать скрипт
Место размещения <script> определяет, существуют ли элементы страницы на момент его выполнения.
Скрипт, помещённый непосредственно перед закрывающим </body>, выполняется после того, как весь HTML выше него разобран, поэтому он может безопасно обращаться к любому элементу страницы:
<body>
<h1 id="title">Loading…</h1>
<!-- The <h1> already exists, so this works -->
<script>
document.getElementById("title").textContent = "Ready!";
</script>
</body>Тот же эффект достигается размещением скрипта в <head> с атрибутом defer, поскольку отложенные скрипты ждут завершения разбора:
<head>
<script src="app.js" defer></script>
</head>
<body>
<h1 id="title">Loading…</h1>
</body>Обычный <script> в <head> (без defer) выполняется до разбора тела документа, поэтому document.getElementById("title") вернёт null.
type="module"
Установите type="module", чтобы загрузить скрипт как JavaScript-модуль. Модули могут использовать import и export для совместного использования кода между файлами, автоматически работают в строгом режиме и по умолчанию являются отложенными (выполняются после разбора HTML, даже без атрибута defer):
<script type="module">
import { greet } from "./utils.js";
greet("World");
</script>Как запускать скрипты
Можно задать, будет ли скрипт выполняться автоматически (как только страница загрузится) или после того, как пользователь что-то сделает (например, наведёт курсор или кликнет по ссылке). Если вы хотите, чтобы скрипт выполнялся при каком-либо действии пользователя (называемом событием), следует использовать обработчики событий, чтобы браузер знал, какое событие отвечает за запуск скрипта.
Обработчики событий можно задать в виде атрибутов внутри HTML-тегов или прикрепить через JavaScript с помощью таких методов, как addEventListener.
Пример тега HTML <script> с обработчиком события:
Event Handler Example — HTML Scripts — W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Event Handler Example</title>
</head>
<body>
<span id="trigger">
Bring your mouse here to see an alert
</span>
<script>
function myAlert() {
alert("I am an event handler....");
}
document.getElementById('trigger').addEventListener('mouseover', myAlert);
</script>
</body>
</html>Элемент <noscript>
Хотя многие современные браузеры поддерживают JavaScript, некоторые старые браузеры не могут выполнять код JavaScript, а пользователи могут также отключить JavaScript в своих браузерах. Чтобы предоставить альтернативную информацию для браузеров без поддержки JavaScript или с отключённым JavaScript, используйте тег <noscript>. Содержимое этого тега отображается пользователю только тогда, когда JavaScript отключён или браузер его не поддерживает.
Пример тега HTML <noscript>:
My first JavaScript example! — HTML Scripts — W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p id="output"></p>
<script>
document.getElementById('output').textContent = "My first JavaScript example!";
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
<p>If JavaScript is disabled or the browser doesn't support it, the content inside the noscript element is shown instead.</p>
</body>
</html>Здесь <p id="output"> объявлен перед <script>, поэтому абзац уже существует в DOM на момент выполнения скрипта и getElementById может его найти. Когда JavaScript включён, пользователь видит «My first JavaScript example!»; когда он отключён, браузер игнорирует скрипт и показывает сообщение из <noscript>.
Связанные материалы
- Тег HTML
<script>— полный справочник атрибутов (src,type,defer,asyncи другие). - Тег HTML
<noscript>— запасной контент для пользователей без JavaScript. - События JavaScript — реакция на клики, наведение курсора и другие действия пользователя.