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
|
---
title: <script>
slug: Web/HTML/Elemento/script
tags:
- Elemento
- HTML
- HTML scripting
- Referencia
- Scripting
- Web
- etiqueta
translation_of: Web/SVG/Element/script
---
<h2 id="Resumen">Resumen</h2>
<p>El <em>elemento HTML Script</em> (<strong><code><script></code></strong>) se utiliza para insertar o hacer referencia a un script ejecutable dentro de un documento HTML o XHTML.</p>
<p>Los scripts sin atributo <code>async</code> o <code>defer</code>, así como las secuencias de comandos en línea, son interpretados y ejecutados inmediatamente, antes de que el navegador continúe procesando la página.</p>
<table class="properties">
<tbody>
<tr>
<th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></th>
<td><a href="/en-US/docs/Web/HTML/Content_categories#Metadata_content" title="HTML/Content_categories#Metadata_content">Metadata content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Phrasing content</a>.</td>
</tr>
<tr>
<th scope="row">Contenido permitido</th>
<td>Script dinámico tal como <code>text/javascript</code>.</td>
</tr>
<tr>
<th scope="row">Omision de etiquetas</th>
<td>{{no_tag_omission}}</td>
</tr>
<tr>
<th scope="row">Elementos padre permitidos</th>
<td>Cualquier elemento que acepte <a href="/en-US/docs/Web/HTML/Content_categories#Metadata_content" title="HTML/Content_categories#Metadata_content">metadata content</a>, o cualquier elemento que acepte <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td>
</tr>
<tr>
<th scope="row">Interfaz DOM</th>
<td>{{domxref("HTMLScriptElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="Atributos">Atributos</h2>
<p>Este elemento contiene los <a href="es/docs/Web/HTML/Atributos_Globales">atributos globales</a>.</p>
<dl>
<dt>{{htmlattrdef("async")}} {{HTMLVersionInline(5)}}</dt>
<dd>Establece este atributo booleano para indicar al navegador, si es posible, ejecutar el código asincrónicamente. Esto no afecta a los scripts escritos dentro de la etiqueta (es decir a aquellos que no tienen el atributo <strong>src</strong>).</dd>
<dd>Ver {{anch("Browser compatibility")}} para notas acerca de compatibilidad. Ver tambien <a href="/en-US/docs/Games/Techniques/Async_scripts">Scripts asincrónicos para asm.js</a>.</dd>
<dt>{{htmlattrdef("integrity")}}</dt>
<dd>Contiene información de metadatos que es usada por el user agent del navegador para verificar el recurso captado fue entregado libre de manipulación inesperada. Ver <a href="/en-US/docs/Web/Security/Subresource_Integrity">Subresource Integrity</a>.</dd>
<dt>{{htmlattrdef("src")}}</dt>
<dd>Este atributo especifica la URI del script externo; este puede ser usado como alternativa a scripts embebidos directamente en el documento. Si el script tiene el atributo src, no debería tener código dentro de la etiqueta.</dd>
<dt>{{htmlattrdef("type")}}</dt>
<dd>Este atributo identifica el lenguaje de scripting en que está escrito el código embebido dentro de la etiqueta script, o referenciada utilizando el atributo src. Los valores posibles están especificados como un MIME type (tipo MIME). <br>
Algunos ejemplos de tipos MIME que pueden ser utilizados son: <code>text/javascript</code>, <code>text/ecmascript</code>, <code>application/javascript</code>, y <code>application/ecmascript. </code>Si el atributo se encuentra ausente, el valor por defecto será un script JavaScript.</dd>
<dd>Si el tipo MIME especificado no es un tipo JavaScript, el contenido embebido dentro de la etiqueta script es tratado como un bloque de datos que no será procesado por el navegador.</dd>
<dd>Si el tipo especificado es module, el código es tratado como un módulo JavaScript {{experimental_inline}}. Ver <a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a>.</dd>
<dd>Nota: en Firefox puedes usar características avanzadas tales como let statements y otras características de la última versión de JS, usando type=application/javascript;version=1.8 {{Non-standard_inline}}. Ten cuidado!, esto no es una característica estándar, es decir, probablemente genere conflictos con otros navegadores, en particular aquellos basados en Chromium.</dd>
<dd>Para incluir lenguajes de programación exóticos, lee acerca de <a href="/en-US/Add-ons/Code_snippets/Rosetta">Rosetta</a>.</dd>
<dt>{{htmlattrdef("text")}}</dt>
<dd>Este atributo actúa como el atributo <code>textContent</code>, establece el texto contenido del elemento. Pero a diferencia de <code>textContent</code>, este atributo se evalúa como ejecutable luego de ser insertado como nodo en el DOM.</dd>
<dt>{{htmlattrdef("language")}} {{Deprecated_inline}}</dt>
<dd>Este atributo actúa como el atributo <code>type</code>, identifica el tipo de lenguaje que se utiliza. A diferencia del atributo <code>type</code>, los posibles valores de este atributo nunca fueron estandarizados. El atributo <code>type</code> debe ser utilizado en lugar de <code>language</code>.</dd>
<dt>{{htmlattrdef("defer")}}</dt>
<dd>Este atributo establece si el script debe ser ejecutado luego de que el documento entero sea analizado. Dado que esta función aún no fue implementada por todos los navegadores relevantes, los autores no deberían asumir que el script realmente será ejecutado luego de la carga y analisis del documento. Desde Gecko 1.9.2 el atributo defer es ignorado en los scripts que no tienen el atributo src. Sin embargo, en Gecko 1.9.1 incluso se difieren los scripts escritos dentro de la etiqueta.</dd>
<dt>{{htmlattrdef("crossorigin")}} {{Non-standard_inline}}</dt>
<dd>Elementos normales script pasan información mínima al {{domxref('GlobalEventHandlers.onerror', 'window.onerror')}} para scripts que no pasan las revisiones del estándar <a href="/es/docs/Web/HTTP/Access_control_CORS">CORS</a>. Para permitir registrar errores en los sitios que usan dominios separados para recursos estáticos, usar este atributo.</dd>
</dl>
<h2 id="Ejemplos">Ejemplos</h2>
<pre class="brush: html"><!-- HTML4 y (x)HTML -->
<script type="text/javascript" src="javascript.js"></script>
<!-- HTML5 -->
<script src="javascript.js"></script>
</pre>
<h2 id="Especificaciones">Especificaciones</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificación</th>
<th scope="col">Estado</th>
<th scope="col">Comentario</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', "scripting.html#the-script-element", "<script>")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td>Agrega el tipo module.</td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'scripting-1.html#script', '<script>')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('HTML4.01', 'interact/scripts.html#h-18.2.1', '<script>')}}</td>
<td>{{Spec2('HTML4.01')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('Subresource Integrity', '#htmlscriptelement', '<script>')}}</td>
<td>{{Spec2('Subresource Integrity')}}</td>
<td>Agrega el atributo integrity.</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Chrome</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>{{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>{{CompatGeckoDesktop("1.9.2")}}<sup>[1]</sup></td>
<td>10<sup>[1]</sup></td>
<td>{{CompatNo}}<sup>[1]</sup></td>
<td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
</tr>
<tr>
<td>defer attribute</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoDesktop("1.9.1")}}</td>
<td>
<p>4[3]<br>
10</p>
</td>
<td>{{CompatNo}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
<tr>
<td>crossorigin attribute</td>
<td>{{CompatChrome(30.0)}}</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>{{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>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>{{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>{{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>{{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>{{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><script></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>
<h2 id="Ver_también">Ver también</h2>
<ul>
<li>{{domxref("document.currentScript")}}</li>
<li><a href="http://pieisgood.org/test/script-link-events/">Ryan Grove's <script> and <link> node event compatibility chart</a></li>
</ul>
<p>{{HTMLRef}}</p>
|