aboutsummaryrefslogtreecommitdiff
path: root/files/pt-br/web/html/element/script/index.html
blob: 3dbf84b0c40adcdf5d797e74f35907670f77a283 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
---
title: <script>
slug: Web/HTML/Element/script
translation_of: Web/HTML/Element/script
---
<p>O <strong>elemento HTML <code>&lt;script&gt;</code></strong> é usado para incluir ou referenciar um script executável.</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Categorias de conteúdo</a></th>
   <td><a href="/en-US/docs/Web/HTML/Content_categories#Metadata_content">Conteúdo de metadados</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Fluxo de conteúdo</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Conteúdo fraseado</a>.</td>
  </tr>
  <tr>
   <th scope="row">Conteúdo Permitido</th>
   <td>Script dinâmico, como <code>text/javascript</code>.</td>
  </tr>
  <tr>
   <th scope="row">Omissão de tag</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">Pais permitidos</th>
   <td>Qualquer elemento que aceite <a href="/en-US/docs/Web/HTML/Content_categories#Metadata_content">conteúdo de metadados</a>, ou qualquer elemento que aceite <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">conteúdo fraseado</a>.</td>
  </tr>
  <tr>
   <th scope="row">Regras ARIA permitidas</th>
   <td>Nenhuma</td>
  </tr>
  <tr>
   <th scope="row">Interface DOM</th>
   <td>{{domxref("HTMLScriptElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Atributos">Atributos</h2>

<p>Esse elemento inclui os <a href="/pt-BR/docs/Web/HTML/Global_attributes">atributos globais</a>.</p>

<dl>
 <dt>{{htmlattrdef("async")}} {{HTMLVersionInline(5)}}</dt>
 <dd>Um atributo booleano indicando que o navegador deve, se possível, executar o script assíncronamente.</dd>
 <dd>
 <div class="blockIndicator warning">
 <p>Esse atributo não deve ser utilizado se o atributo <code>src</code> estiver ausente (ex. scripts embutidos). Se incluído, nesse caso, ele não terá nenhum efeito.</p>
 </div>
 </dd>
 <dd>
 <p>Scripts inseridos dinamicamente (usando <code>document.createElement</code>) são executados assincronamente por padrão, então para turna-lo uma execução síncrona (ex. executar scripts na ordem que eles foram carregados) atribua <code>async=false</code>.</p>
 </dd>
 <dd>Veja {{anch("Browser compatibility")}} para notas no suporte do navegador. Veja também  <a href="/en-US/docs/Games/Techniques/Async_scripts">Scripts assíncronos para asm.js</a>.</dd>
 <dt>{{htmlattrdef("crossorigin")}}</dt>
 <dd>Elementos <code>script</code> passam o mínimo de informação para  {{domxref('GlobalEventHandlers.onerror', 'window.onerror')}} em scripts que não passem na checagem do <a href="https://developer.mozilla.org/en-US/docs/HTTP_access_control">CORS</a>. Para permitir logs de erro para sites que usem domínimos diferentes para arquivos estáticos, use esse atributo. Veja <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes">CORS settings attributes</a> par uma explicação mais detalhada dos argumentos válidos.</dd>
 <dt>{{htmlattrdef("defer")}}</dt>
 <dd>Esse atributo Boleano é usado para indicar ao navegador que o script deve ser executado depois que o documento tenha sido parseado, mas antes de disparar o evento {{event("DOMContentLoaded")}}</dd>
 <dd>Scripts com o atributo <code>defer</code> vão impedir que o evento DOMContentLoaded seja disparado até que o script seja carregado e tenha terminado de ser <em>avaliado</em>.</dd>
 <dd>
 <div class="blockIndicator warning">
 <p>Esse atributo não deve ser usado se o atibuto <code>src</code> estiver ausente (ex. scripts inline), nesse caso ele não vai ter efeito.</p>
 </div>
 </dd>
 <dd>
 <p>Para conseguir um efeito similar para scripts inseridos dinamicamente use <code>async=false</code>. Scripts com o atributo <code>defer</code> vão ser executados na ordem em que aparecem no <code>document</code>.</p>
 </dd>
 <dt>{{htmlattrdef("integrity")}}</dt>
 <dd>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")}} {{experimental_inline}}</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/"> ES6 modules</a> — in effect, this can be used to serve fallback scripts to older browsers that do not support modular JavaScript code.</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. If a <code>script</code> element has a <code>src</code> attribute specified, it should not have a script embedded inside its tags.</dd>
 <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>Indicates the type of script represented. The value of this attribute will be in one of the following categories:</p>

 <ul>
  <li><strong>Omitted or a JavaScript MIME type:</strong> For HTML5-complient browsers this indicates the script is JavaScript. HTML5 spec urges authors to omit the attribute rather than provided 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="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types">listed in the specification</a>.</li>
  <li><strong><code>module</code>:</strong> {{HTMLVersionInline(5)}} For HTML5-complient browsers the code is treated as a JavaScript module. Processing of the script contents are not affected by the <code>charset</code> and <code>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>{{experimental_inline}}</li>
  <li><strong>Any other value or MIME type:</strong> Embedded content is treated as a data block which won't be processed by the browser. The <code>src</code> attribute will be ignored.</li>
 </ul>

 <p>Note that in Firefox you can use advanced features such as let statements and other features in later JS versions, by using <code>type=application/javascript;version=1.8</code> {{Non-standard_inline}}. Beware, however, that as this is a non-standard feature, this will most likely break support for other browsers, in particular Chromium-based browsers.</p>

 <p>For how to include <em>exotic programming languages</em>, read about <a href="https://developer.mozilla.org/en-US/Add-ons/Code_snippets/Rosetta">Rosetta</a>.</p>
 </dd>
 <dt>
 <h3 id="Atributos_obsoletos">Atributos obsoletos</h3>
 </dt>
 <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="Notas">Notas</h2>

<p>Scripts without <code>async</code> or <code>defer</code> attributes, as well as inline scripts, are fetched and executed immediately, before the browser continues to parse the page.</p>

<p>The script should be served with the <code>text/javascript</code> MIME type, but browsers are lenient and only block them if the script is served with an image type (<code>image/*</code>), a video type (<code>video/*</code>), an audio (<code>audio/*</code>) type, or <code>text/csv</code>. If the script is blocked, an {{event("error")}} is sent to the element, if not a {{event("success")}} event is sent.</p>

<h2 id="Exemplos">Exemplos</h2>

<pre class="brush: html notranslate">&lt;!-- HTML4 and (x)HTML --&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>

<h2 id="Specifications">Specifications</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>Adds the module type</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>Adds the integrity attribute.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatChrome(1.0)}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("1.0")}}<sup>[2]</sup></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td>async attribute</td>
   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("1.9.2")}}<sup>[1]</sup></td>
   <td>10<sup>[1]</sup></td>
   <td>15<sup>[1]</sup></td>
   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
  </tr>
  <tr>
   <td>defer attribute</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("1.9.1")}}<sup>[6]</sup></td>
   <td>
    <p>4<sup>[3]</sup><br>
     10</p>
   </td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td>crossorigin attribute</td>
   <td>{{CompatChrome(30.0)}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("13")}}</td>
   <td>{{CompatNo}}</td>
   <td>12.50</td>
   <td>{{CompatVersionUnknown}}<sup>[4]</sup></td>
  </tr>
  <tr>
   <td>integrity attribute</td>
   <td>{{CompatChrome(45.0)}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatGeckoDesktop("43")}}</td>
   <td></td>
   <td></td>
   <td>{{CompatNo}}<sup>[5]</sup></td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Android Webview</th>
   <th>Edge</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
   <th>Chrome for Android</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("1.0")}}<sup>[2]</sup></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td>async attribute</td>
   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("1.0")}}<sup>[1]</sup></td>
   <td>{{CompatNo}}<sup>[1]</sup></td>
   <td>{{CompatUnknown}}<sup>[1]</sup></td>
   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
  </tr>
  <tr>
   <td>defer attribute</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("1.0")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td>integrity attribute</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatChrome(45.0)}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatGeckoDesktop("43")}}</td>
   <td></td>
   <td></td>
   <td></td>
   <td>{{CompatChrome(45.0)}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] 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.0 Firefox. In Firefox 4.0, the <code>async</code> DOM property defaults to <code>true</code> for script-created scripts, so the default behavior matches the behavior of IE and WebKit. 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.0), set <code>.async=false</code> on the scripts you want to maintain order. Never call <code>document.write()</code> from an <code>async</code> script. In Gecko 1.9.2, calling <code>document.write()</code> has an unpredictable effect. In Gecko 2.0, calling <code>document.write()</code> from an <code>async</code> script has no effect (other than printing a warning to the error console).</p>

<p>[2] Starting in Gecko 2.0 {{geckoRelease("2.0")}}, inserting script elements that have been created by calling <code>document.createElement("script")</code> into the DOM no longer enforces execution in insertion order. This change lets Gecko properly abide by the HTML5 specification. To make script-inserted external scripts execute in their insertion order, set <code>.async=false</code> on them.</p>

<p>Also, {{HTMLElement("script")}} elements inside {{HTMLElement("iframe")}}, {{HTMLElement("noembed")}} and {{HTMLElement("noframes")}} elements are now executed, for the same reasons.</p>

<p>[3] In versions prior to Internet Explorer 10 Trident implemented <code>&lt;script&gt;</code> by a proprietary specification. Since version 10 it conforms to the W3C specification.</p>

<p>[4] The <code>crossorigin</code> attribute was implemented in WebKit in {{WebKitBug(81438)}}.</p>

<p>[5] {{WebKitBug(148363)}} tracks WebKit implementation of Subresource Integrity (which includes the <code>integrity</code> attribute).</p>

<p>[6] Desde Gecko 1.9.2 {{geckoRelease("1.9.2")}}, o atributo <code>defer</code> is ignorado nos scripts que  nao tenham o atributo <code>src</code>. However, in Gecko 1.9.1 {{geckoRelease("1.9.1")}} even inline scripts are deferred if the <code>defer</code> attribute is set.</p>

<h2 id="See_also">See also</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>
</ul>

<div>{{HTMLRef}}</div>