<script>

25 января 2023

Тег <script> используется для встраивания скриптов на страницу, которые могут изменять её содержимое и поведение. Этот тег позволяет загружать скрипты из внешних файлов или встраивать их прямо в HTML-код страницы.

Синтаксис тега <script>

<!-- Встраивание скрипта в HTML-код страницы -->
<script>
    // JavaScript-код
</script>

<!-- Загрузка скрипта из внешнего файла -->
<script src="path/to/script.js"></script>

Спецификация HTML

Тег <script> является частью спецификации HTML Living Standard.

Семантический или нет

Тег <script> не считается семантическим, так как не придает никакого конкретного значения содержимому.

Примеры использования

Загрузка скрипта из внешнего файла:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Пример использования тега script</title>
    <!-- Загрузка скрипта из внешнего файла -->
    <script src="path/to/script.js"></script>
</head>
<body>
    <!-- HTML-код страницы -->
</body>
</html>

Встраивание скрипта в HTML-код страницы:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Пример использования тега script</title>
    <!-- Встраивание скрипта в HTML-код страницы -->
    <script>
        // JavaScript-код
    </script>
</head>
<body>
    <!-- HTML-код страницы -->
</body>
</html>

Использование атрибута async:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Пример использования атрибута async</title>
    <!-- Загрузка скрипта с атрибутом async -->
    <script src="path/to/script.js" async></script>
</head>
<body>
    <!-- HTML-код страницы -->
</body>
</html>

Для чего использовать тег <script>

Добавление функциональности на страницу, например, для создания анимации или проверки правильности заполнения формы.
Аналитика и отслеживание действий пользователей в сервисах, таких как Google Analytics.
Подключение сторонних библиотек, таких как jQuery или React.
Динамическая подгрузка данных без перезагрузки страницы с использованием технологии AJAX или WebSockets.

Атрибуты тега <script>

async — указывает, что скрипт асинхронный, выполнение скрипта не останавливает загрузку страницы.
defer — указывает, что скрипт отложенный, выполнение скрипта происходит после загрузки страницы.
src — путь к файлу скрипта, который нужно загрузить.
type — тип скрипта.
nomodule — предотвращает выполнение скрипта в браузерах, поддерживающих модульные скрипты.
crossorigin — способ обработки сквозных запросов.
integrity — метаданные для проверки целостности субресурсов [SRI].
referrerpolicy — правила использования ссылок для поиска.
blocking — позволяет потенциально блокировать рендеринг.
fetchpriority — приоритет для запущенных элементом запросов.

Глобальные атрибуты

Тег поддерживает все глобальные атрибуты HTML.

Ограничения

Тег <script> может блокировать отображение содержимого страницы до тех пор, пока скрипт полностью не загрузится и не выполнится. Это может замедлить время загрузки страницы, особенно если скрипты расположены в начале документа. Также, использование скриптов может быть ограничено на некоторых сайтах из соображений безопасности.

Поддержка браузерами

Тег <script> поддерживается всеми современными браузерами. Актуальная информация — на сaniuse.

Альтернативные теги

Тег <script> является основным тегом для загрузки и выполнения JavaScript на веб-странице. Вместо него можно использовать атрибут onclick для выполнения простых скриптов прямо в HTML-коде.