Тег SCRIPT

: элемент для написания скриптов

HTML Элемент используется для встраивания или подключения исполняемого JavaScript кода. Элемент также может использоваться с другими языками, такими как GLSL (en-US) от WebGL.

Content categories	Метаданные, Потоковый контент, Фразовый контент.
Допустимый контент	Динамический скрипт, используя атрибут text/javascript .
Пропуск тегов	Нет. Открывающий и закрывающий теги обязательны
Допустимые родители	Любые элементы в которых разрешены метаданные или фразовый контент
Допустимые ARIA-роли	нет
DOM-интерфейс	HTMLScriptElement

Атрибуты

Это логический атрибут, указывающий браузеру, если возможно, загружать скрипт, указанный в атрибуте src , асинхронно.

Предупреждение: Атрибут async не будет оказывать никакого эффекта, если атрибут src отсутствует. Обычно браузеры загружают синхронно, (т.е. async=»false» ) во время разбора документа. Динамически вставленный (используя, например, document.createElement ) по умолчанию загружаются браузером асинхронно, поэтому для включения синхронной загрузки (т.е. когда скрипты загружаются в порядке их вставки) укажите async=»false» .

Обычные элементы тега script передают мало информации в window.onerror для скриптов, которые не проходят проверку CORS (en-US) . Чтобы разрешить ведение журнала ошибок сайта, которые используют отдельный домен для статических файлов (например, изображение, видео-файл, CSS-стили или Javascript-код), используйте атрибут crossorigin . Посмотрите статью «настройки атрибутов CORS» для более наглядного объяснения его допустимых аргументов.

Это логический атрибут, указывающий браузеру, что скрипт должен выполняться после разбора документа, но до события DOMContentLoaded (en-US) . Скрипты с атрибутом defer будут предотвращать запуск события DOMContentLoaded (en-US) до тех пор, пока скрипт не загрузится полностью и не завершится его инициализация.

Предупреждение: Атрибут defer не будет оказывать никакого эффекта, если атрибут src отсутствует. Чтобы достигнуть такого же эффекта для динамически вставленных скриптов используйте async=false . Скрипты с атрибутом defer будут выполняться в том порядке, в котором они появились при разборе документа.

Этот атрибут содержит встроенные метаданные, которые агент пользователя (браузер) может использовать для проверки того, что выбранный ресурс был доставлен без непредвиденных манипуляций. Смотрите Целостность субресурса (en-US) .

Булевый атрибут, который устанавливается для того, чтобы скрипт не выполнялся в браузерах, поддерживающих ES6-модули (англ.). Таким образом, может быть использован для предоставления резервных сценариев в старых браузерах, которые не поддерживают модульный код JavaScript.

Криптографический одноразовый номер (номер, используемый один раз) для внесения встроенных скриптов в белый список в script-src Content-Security-Policy (en-US) . Сервер должен генерировать уникальное одноразовое значение каждый раз, когда он передает политику. Крайне важно предоставить одноразовый номер, который нельзя угадать, поскольку в противном случае обход политики ресурса является тривиальным.

Определяет URI внешнего скрипта; является альтернативой встраиванию скрипта непосредственно в документ.

Предупреждение: Если у элемента script будет указан атрибут src , то он не должен иметь встроенный скрипт между тегами.

Как и атрибут textContent , этот атрибут задает текстовое содержимое элемента. Однако, в отличие от атрибута textContent , этот атрибут оценивается как исполняемый код после того, как узел вставлен в DOM.

Этот атрибут указывает тип представленного скрипта. Значение этого атрибута будет находиться в одной из следующих категорий:

• Атрибут не установлен (по-умолчанию), пустая строка или установлен как MIME-тип JavaScript
  • : Обозначает, что скрипт является «классическим скриптом», содержащим JavaScript-код. Рекомендуется не указывать MIME-тип, а пропускать атрибут вообще. MIME-типы JavaScript указаны в спецификации.
  • : Данное значение даёт браузеру инструкцию, что код является JavaScript-модулем. Обработка содержимого скрипта отложенная. Атрибуты charset и defer игнорируются. Для дополнительной информации по использованию module , смотрите руководство по JavaScript-модулям. В отличие от классчических скриптов, модули требуют использования CORS-протокола для cross-origin загрузок.
  • : Данное значение сигнализирует о том, что содержимое тега является словарём импортов. Словарь импортов — это JSON-объект, который может использоваться для задания алиасов при импорте JavaScript-модулей.

  Устаревшие атрибуты

  Если присутствует, его значение должно соответствовать «utf-8» без учета регистра ASCII. И в том, и в другом случае нет необходимости указывать атрибут charset, поскольку документы должны использовать UTF-8, а элемент script наследует свою кодировку символов от документа.

  Как и атрибут type , этот атрибут определяет используемый язык сценариев. Однако, в отличие от type , возможные значения language никогда не были стандартизированы. Вместо него следует использовать атрибут type .

  Примечания

  Элемент без указания атрибутов async , defer или type=»module» , а также встроенный скрипт, загружается и выполняется сразу, до того как браузер продолжит разбор документа.

  Для обработки скрипт должен иметь тип данных text/javascript , но браузеры снисходительны и блокируют обработку только в том случае, если скрипт представляет данные одного из типов: изображение ( image/* ); видео ( video/* ); аудио ( audio/* ); или text/csv . Если скрипт заблокирован, элементу отправляется событие error (en-US) , если не было отправлено событие load (en-US) .

  Примеры

  Основное использование

  Эти примеры показывают как импортировать скрипт используя элемент в HTML4 и HTML5.

  script type="text/javascript" src="javascript.js"> script> script src="javascript.js"> script> 

  Фолбэк-модуль

  Браузеры, поддерживающие использование значения module для атрибута type , игнорируют любые скрипты с атрибутом nomodule . Это разрешает использовать модульные скрипты, и в тот же самый момент позволяет использовать nomodule- скрипты для браузеров без поддержки модульных скриптов.

  script type="module" src="main.mjs"> script> script nomodule src="fallback.js"> script> 

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

  Совместимость с браузерами

  BCD tables only load in the browser

  Смотрите также

  Found a content problem with this page?

  This page was last modified on 21 июн. 2023 г. by MDN contributors.

  Your blueprint for a better internet.

  MDN

  Support

  Our communities

  Developers

  Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
  Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

  Источник

  Использование скрипта в html

  Тег предназначен для описания скриптов, может содержать ссылку на программу или ее текст на определенном языке. Скрипты могут располагаться во внешнем файле и связываться с любым HTML-документом. Такой подход позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузку, т.к. внешний файл кэшируется при первой загрузке, и скрипт вызывается быстрее при последующих вызовах.

  может располагаться в заголовке или теле HTML-документа в неограниченном количестве. В большинстве случаев местоположение скрипта никак не сказывается на работу программы. Однако скрипты, которые должны выполняться в первую очередь, обычно помещают в заголовок документа.

  Синтаксис

  Атрибуты

  async Загружает скрипт асинхронно. defer Откладывает выполнение скрипта до тех пор, пока вся страница не будет загружена полностью. language Устанавливает язык программирования на котором написан скрипт. src Адрес скрипта из внешнего файла для импорта в текущий документ. type Определяет тип содержимого тега .

  Закрывающий тег

  Результат данного примера показан на рис. 1.

  

  Рис. 1. Результат работы скрипта

  В данном примере с помощью скрипта выводится таблица, состоящая из пяти строк и столбцов, которая заполняется числами.

       function popup()   

  Примечание

  В HTML5 атрибут type можно опустить, он является необязательным и принимает значение text/javascript , если не указан явно. В предыдущих версиях HTML атрибут type необходим.

  Статьи по теме

  Источник

  Подключение JavaScript к HTML

  

  Осваивайте профессию, начните зарабатывать, а платите через год!

  

  Курсы Python Ак­ция! Бес­плат­но!

  

  Станьте хакером на Python за 3 дня

  

  Веб-вёрстка. CSS, HTML и JavaScript

  

  

  

  Станьте веб-разработчиком с нуля

  

  В этой главе мы займемся размещением сценариев в HTML-документе, чтобы иметь возможность использовать их для оперативной модификации HTML-документа. Для вставки JavaScript-кoдa в НТМL-страницу обычно используют элемент .

  Первая программа

  Чтобы ваша первая пpoгpaммa (или сценарий) JavaScript запустилась, ее нужно внедрить в НТМL-документ.
  Сценарии внедряются в HTML-документ различными стандартными способами:

  • поместить код непосредственно в атрибут события HTML-элемента;
  • поместить код между открывающим и закрывающим тегами ;
  • поместить все ваши скрипты во внешний файл (с расширением .js), а затем связать его с документом HTML.

  JavaScript в элементе script

  Самый простой способ внедрения JavaScript в HTML-документ – использование тега . Теги часто помещают в элемент , и ранее этот способ считался чуть ли не обязательным. Однако в наши дни теги используются как в элементе , так и в теле веб-страниц.

  Таким образом, на одной веб-странице могут располагаться сразу несколько сценариев. В какой последовательности браузер будет выполнять эти сценарии? Как правило, выполнение сценариев браузерами происходит по мере их загрузки. Браузер читает HTML-документ сверху вниз и, когда он встречает тег , рассматривает текст программы как сценарий и выполняет его. Остальной контент страницы не загружается и не отображается, пока не будет выполнен весь код в элементе .

  Обратите внимание: мы указали атрибут language тега , указывающий язык программирования, на котором написан сценарий. Значение атрибута language по умолчанию – JavaScript, поэтому, если вы используете скрипты на языке JavaScript, то вы можете не указывать атрибут language .

  JavaScript в атрибутах событий HTML-элементов

  Вышеприведенный сценарий был выполнен при открытии страницы и вывел строку: «Привет, мир!». Однако не всегда нужно, чтобы выполнение сценария начиналось сразу при открытии страницы. Чаще всего требуется, чтобы программа запускалась при определенном событии, например при нажатии какой-то кнопки.

  В следующем примере функция JavaScript помещается в раздел HTML-документа. Вот пример HTML-элемента с атрибутом события, обеспечивающим реакцию на щелчки мышью. При нажатии кнопки генерируется событие onclick.

  Внешний JavaScript

  Если JavaScript-кода много – его выносят в отдельный файл, который, как правило, имеет расширение .js .

  Чтобы включить в HTML-документ JavaScript-кoд из внешнего файла, нужно использовать атрибут src (source) тега . Его значением должен быть URL-aдpec файла, в котором содержится JS-код:

  В этом примере указан абсолютный путь к файлу с именем script.js, содержащему скрипт (из корня сайта). Сам файл должен содержать только JavaScript-кoд, который иначе располагался бы между тегами .

  По аналогии с элементом атрибуту src элемента можно назначить полный URL-aдpec, не относящийся к домену текущей НТМL-страницы:

  На заметку: Подробнее о путях файлов читайте в разделе «Абсолютные и относительные ссылки».

  Чтобы подключить несколько скриптов, используйте несколько тегов:

  Примечание: Элемент , хотя внешний сценарий выполняется, встроенный код игнорируется.

  Независимо от того, как JS-код включается в НТМL-документ, элементы интерпретируются браузером в том порядке, в котором они расположены в HTML-документе. Сначала интерпретируется код первого элемента , затем браузер приступает ко второму элементу и т. д.

  Внешние скрипты практичны, когда один и тот же код используется во многих разных веб-страницах. Браузер скачает js-файл один раз и в дальнейшем будет брать его из своего кеша, благодаря чему один и тот же скрипт, содержащий, к примеру, библиотеку функций, может использоваться на разных страницах без полной перезагрузки с сервера. Кроме этого, благодаря внешним скриптам, упрощается сопровождение кода, поскольку вносить изменения или исправлять ошибки приходится только в одном месте.

  Примечание: Во внешние файлы копируется только JavaScript-код без указания открывающего и закрывающего тегов .

  Расположение тегов

  Вы уже знаете, что браузер читает HTML-документ сверху вниз и, начинает отображать страницу, показывая часть документа до тега . Встретив тег , переключается в JavaScript-режим и выполняет сценарий. Закончив выполнение, возвращается обратно в HTML-режим и отображает оставшуюся часть документа.

  Это наглядно демонстрирует следующий пример. Метод alert() выводит на экран модальное окно с сообщением и приостанавливает выполнение скрипта, пока пользователь не нажмёт «ОК»:

  Источник