path: root/files/ru/web/html/element/script/index.html

---
title: '<script>: The Script element'
slug: Web/HTML/Element/script
tags:
  - Script
translation_of: Web/HTML/Element/script
---
<div>{{HTMLRef}}</div>

<p><span class="seoSummary">HTML Элемент<strong> <code>&lt;script&gt;</code> </strong></span> используется для встраивания или подключения исполняемого JavaScript кода. Элемент <code>&lt;script&gt;</code> также может использоваться с другими языками, такими как <a href="/en-US/docs/Web/API/WebGL_API/By_example/Hello_GLSL">GLSL</a> от <a href="/ru/docs/Web/API/WebGL_API">WebGL</a>.</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/en-US/docs/Web/Guide/HTML/Content_categories">Content categories</a></th>
   <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Метаданные">Метаданные</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Main_content_categories">Потоковый контент</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Phrasing_content">Фразовый контент</a>.</td>
  </tr>
  <tr>
   <th scope="row">Разрешённый контент</th>
   <td>Динамический скрипт, используя атрибут <code>text/javascript</code>.</td>
  </tr>
  <tr>
   <th scope="row">Пропуск тегов</th>
   <td>Нет. Открывающий и закрывающий теги обязательны</td>
  </tr>
  <tr>
   <th scope="row">Разрешённые родительские элементы</th>
   <td>
    <p>Любые элементы в которых разрешены <a href="/ru/docs/Web/Guide/HTML/Content_categories#Метаданные">метаданные</a> или <a href="/ru/docs/Web/Guide/HTML/Content_categories#Phrasing_content">фразовый контент</a></p>
   </td>
  </tr>
  <tr>
   <th scope="row">Разрешенная ARIA роль</th>
   <td>Отсутствует</td>
  </tr>
  <tr>
   <th scope="row">DOM интерфейс</th>
   <td>{{domxref("HTMLScriptElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Атрибуты">Атрибуты</h2>

<p>Этот элемент включает <a href="https://developer.mozilla.org/ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a>.</p>

<dl>
 <dt>{{htmlattrdef("async")}}{{HTMLVersionInline(5)}}</dt>
 <dd>Это логический атрибут, указывающий браузеру, если возможно, загружать скрипт, указанный в атрибуте <code>{{htmlattrdef("src")}}</code>, асинхронно.</dd>
</dl>

<div class="warning">
<p>Атрибут <code>{{htmlattrdef("async")}}</code> не будет оказывать никакого эффекта, если атрибут <code>{{htmlattrdef("src")}}</code> отсутствует.</p>
</div>

<dl>
 <dd>
 <p>Обычно браузеры загружают <code>&lt;script&gt;</code> синхронно, (т.е. <code>async="false"</code>) во время разбора документа.</p>
 </dd>
 <dd>
 <p>Динамически вставленный <code>&lt;script&gt;</code> (используя, например, <code>document.createElement</code>) по умолчанию загружаются браузером асинхронно, поэтому для включения синхронной загрузки (т.е. когда скрипты загружаются в порядке их вставки) укажите <code>async="false"</code>.</p>
 </dd>
 <dt>{{htmlattrdef("crossorigin")}}</dt>
 <dd>Обычные элементы тега <code>script</code> передают мало информации в {{domxref('GlobalEventHandlers.onerror', 'window.onerror')}} для скриптов, которые не проходят проверку <a href="/en-US/docs/HTTP_access_control">CORS</a>. Чтобы разрешить ведение журнала ошибок сайта, которые используют отдельный домен для статических файлов (например, изображение, видео-файл, CSS-стили или Javascript-код), используйте атрибут <code>{{htmlattrdef("crossorigin")}}</code>. Посмотрите статью «<a href="/ru/docs/Web/HTML/CORS_settings_attributes">настройки атрибутов CORS</a>» для более наглядного объяснения его допустимых аргументов.</dd>
</dl>

<dl>
 <dt>{{htmlattrdef("defer")}}</dt>
 <dd>Это логический атрибут, указывающий браузеру, что скрипт должен выполняться после разбора документа, но до события {{event("DOMContentLoaded")}}.</dd>
 <dd>Скрипты с атрибутом <code>{{htmlattrdef("defer")}}</code> будут предотвращать запуск события {{event("DOMContentLoaded")}} до тех пор, пока скрипт не загрузится полностью и не завершится его инициализация.</dd>
</dl>

<div class="warning">
<p>Атрибут <code>{{htmlattrdef("defer")}}</code> не будет оказывать никакого эффекта, если атрибут <code>{{htmlattrdef("src")}}</code> отсутствует.</p>
</div>

<dl>
 <dd>Чтобы достигнуть такого же эффекта для динамически вставленных скриптов используйте <code>async=false.</code></dd>
 <dd>Cкрипты с атрибутом <code>{{htmlattrdef("defer")}}</code> будут выполняться в том порядке, в котором они появились при разборе документа.</dd>
</dl>

<dl>
 <dt>{{htmlattrdef("integrity")}}</dt>
 <dd>This attribute contains inline metadata that a user agent can use to verify that a fetched resource has been delivered free of unexpected manipulation. See <a href="/en-US/docs/Web/Security/Subresource_Integrity">Subresource Integrity</a>.</dd>
 <dt>{{htmlattrdef("nomodule")}}</dt>
 <dd>This Boolean attribute is set to indicate that the script should not be executed in browsers that support<a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/"> ES2015 modules</a> — in effect, this can be used to serve fallback scripts to older browsers that do not support modular JavaScript code.</dd>
</dl>

<dl>
 <dt>{{htmlattrdef("nonce")}}</dt>
 <dd>A cryptographic nonce (number used once) to whitelist inline scripts in a <a href="/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src">script-src Content-Security-Policy</a>. The server must generate a unique nonce value each time it transmits a policy. It is critical to provide a nonce that cannot be guessed as bypassing a resource's policy is otherwise trivial.</dd>
 <dt>{{htmlattrdef("src")}}</dt>
 <dd>This attribute specifies the <abbr>URI</abbr> of an external script; this can be used as an alternative to embedding a script directly within a document.</dd>
</dl>

<div class="warning">
<p>Если у элемента <code>script</code> будет указан атрибут <code>{{htmlattrdef("src")}}</code>, то он не должен иметь встроенный скрипт между тегами.</p>
</div>

<dl>
 <dt>{{htmlattrdef("text")}}</dt>
 <dd>Like the <code>textContent</code> attribute, this attribute sets the text content of the element. Unlike the <code>textContent</code> attribute, however, this attribute is evaluated as executable code after the node is inserted into the DOM.</dd>
 <dt>{{htmlattrdef("type")}}</dt>
 <dd>
 <p>Этот атрибут указывает тип представленного скрипта. Значение этого атрибута будет находиться в одной из следующих категорий:</p>

 <ul>
  <li><strong>Omitted or a JavaScript MIME type:</strong> For HTML5-compliant browsers this indicates the script is JavaScript. HTML5 specification urges authors to omit the attribute rather than provide a redundant MIME type. In earlier browsers, this identified the scripting language of the embedded or imported (via the <code>src</code> attribute) code. JavaScript MIME types are <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types#JavaScript_types">listed in the specification</a>.</li>
  <li><strong><code>module</code>:</strong> For HTML5-compliant browsers the code is treated as a JavaScript module. The processing of the script contents is not affected by the <code>charset</code> and <code>{{htmlattrdef("defer")}}</code> attributes. For information on using <code>module</code>, see <a class="external external-icon" href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a>. Code may behave differently when the <code>module</code> keyword is used.</li>
  <li><strong>Any other value:</strong> The embedded content is treated as a data block which won't be processed by the browser. Developers must use a valid MIME type that is not a JavaScript MIME type to denote data blocks. The <code>src</code> attribute will be ignored.</li>
 </ul>

 <div class="note">
 <p><strong>Note: </strong>in Firefox you could specify the version of JavaScript contained in a <code>&lt;script&gt;</code> element by including a non-standard <code>version</code> parameter inside the <code>type</code> attribute — for example <code>type="text/javascript;version=1.8"</code>. This has been removed in Firefox 59 (see {{bug(1428745)}}).</p>
 </div>
 </dd>
</dl>

<h3 id="Устаревшие_атрибуты">Устаревшие атрибуты</h3>

<dl>
 <dt>{{htmlattrdef("charset")}} {{Deprecated_inline}}</dt>
 <dd>If present, its value must be an ASCII case-insensitive match for "<code>utf-8</code>". Both it’s unnecessary to specify the <code>charset</code> attribute, because documents must use UTF-8, and the <code>script</code> element inherits its character encoding from the document.</dd>
 <dt>{{htmlattrdef("language")}} {{Deprecated_inline}}</dt>
 <dd>Like the <code>type</code> attribute, this attribute identifies the scripting language in use. Unlike the <code>type</code> attribute, however, this attribute’s possible values were never standardized. The <code>type</code> attribute should be used instead.</dd>
</dl>

<h2 id="Примечания">Примечания</h2>

<p>Элемент <code>&lt;script&gt;</code> без указания атрибутов {{HTMLAttrxRef("async", "script")}} , {{HTMLAttrxRef("defer", "script")}} или <code>type="module"</code>, а также встроенный скрипт, загружается и выполняется сразу, до того как браузер продолжит разбор документа.</p>

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

<h2 id="Примеры">Примеры</h2>

<h3 id="Основное_использование">Основное использование</h3>

<p>Эти примеры показывают как импортировать скрипт используя элемент <code>&lt;script&gt;</code> в HTML4 и HTML5.</p>

<pre class="brush: html">&lt;!-- HTML4 --&gt;
&lt;script type="text/javascript" src="javascript.js"&gt;&lt;/script&gt;

&lt;!-- HTML5 --&gt;
&lt;script src="javascript.js"&gt;&lt;/script&gt;
</pre>

<h3 id="Module_fallback">Module fallback</h3>

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

<pre class="brush: html">&lt;script type="module" src="main.mjs"&gt;&lt;/script&gt;
&lt;script nomodule src="fallback.js"&gt;&lt;/script&gt;</pre>

<h2 id="Спецификация">Спецификация</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comments</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("HTML WHATWG", "scripting.html#the-script-element", "&lt;script&gt;")}}</td>
   <td>{{Spec2("HTML WHATWG")}}</td>
   <td>Удалён атрибут {{HTMLAttrxRef("charset", "script")}}</td>
  </tr>
  <tr>
   <td>{{SpecName("HTML5.3", "semantics-scripting.html#the-script-element", "&lt;script&gt;")}}</td>
   <td>{{Spec2("HTML5.3")}}</td>
   <td>Удалён атрибут {{HTMLAttrxRef("charset", "script")}}</td>
  </tr>
  <tr>
   <td>{{SpecName("HTML5.2", "semantics-scripting.html#the-script-element", "&lt;script&gt;")}}</td>
   <td>{{Spec2("HTML5.2")}}</td>
   <td>Добавлен <code>module</code> {{HTMLAttrxRef("type", "script")}}</td>
  </tr>
  <tr>
   <td>{{SpecName("HTML5.1", "semantics-scripting.html#the-script-element", "&lt;script&gt;")}}</td>
   <td>{{Spec2("HTML5.1")}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName("HTML5 W3C", "scripting-1.html#script", "&lt;script&gt;")}}</td>
   <td>{{Spec2("HTML5 W3C")}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName("HTML4.01", "interact/scripts.html#h-18.2.1", "&lt;script&gt;")}}</td>
   <td>{{Spec2("HTML4.01")}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName("Subresource Integrity", "#htmlscriptelement", "&lt;script&gt;")}}</td>
   <td>{{Spec2("Subresource Integrity")}}</td>
   <td>Добавлен атрибут {{HTMLAttrxRef("integrity", "script")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>



<p>{{Compat("html.elements.script", 2)}}</p>

<h3 id="Примечания_по_совместимости">Примечания по совместимости</h3>

<p>In older browsers that don't support the <code>async</code> attribute, parser-inserted scripts block the parser; script-inserted scripts execute asynchronously in IE and WebKit, but synchronously in Opera and pre-4 Firefox. In Firefox 4, the <code>async</code> DOM property defaults to <code>true</code> for script-created scripts, so the default behaviour matches the behaviour of IE and WebKit.</p>

<p>To request script-inserted external scripts be executed in the insertion order in browsers where the <code>document.createElement("script").async</code> evaluates to <code>true</code> (such as Firefox 4), set <code>async=false</code> on the scripts you want to maintain order.</p>

<div class="warning">
<p>Never call <code>document.write()</code> from an async script. In Firefox 3.6, calling <code>document.write()</code> has an unpredictable effect. In Firefox 4, calling <code>document.write()</code> from an async script has no effect (other than printing a warning to the error console).</p>
</div>

<h2 id="Смотрите_также">Смотрите также</h2>

<ul>
 <li>{{domxref("document.currentScript")}}</li>
 <li><a href="https://pie.gd/test/script-link-events/">Ryan Grove's &lt;script&gt; and &lt;link&gt; node event compatibility chart</a></li>
 <li><a href="/en-US/docs/Games/Techniques/Async_scripts">Асинхронные скрипты для asm.js</a></li>
</ul>