Elemento script

Si no sabes lo que es un elemento o cómo debes usarlo, te recomiendo leer el tutorial "Tags y atributos en HTML" que puedes encontrar en la sección de tutoriales HTML.

Descripción

El elemento script permite a los autores insertar programas del lado cliente o bloques de datos en un documento. Estos programas pueden estar diseñados para proveer interactividad, calcular y mostrar valores o ejecutar animaciones, entre otras tareas.

Dependiendo de la presencia del atributo src, el elemento script puede ser usado para incrustar un trozo de código dentro del documento o para hacer una referencia a un archivo de programas externo que será cargado por separado. En el último caso, el URI del archivo referenciado debe ser usado como contenido del atributo src.

Cuándo serán ejecutados los programas provistos por este elemento es algo que depende de la presencia de dos atributos: defer y async. La presencia del primer atributo indica que los programas deberían ser ejecutados una vez que el documento ha sido completamente cargado. La presencia del atributo async instruye a los navegadores a ejecutar los programas tan pronto como les sea posible, pero sin bloquear el proceso de carga del documento. Si ninguno de estos atributos está presente, los programas serán ejecutados tan pronto como sea posible y la carga del documento será suspendida hasta que su ejecución sea completada.

Ejemplos

En el siguiente ejemplo, insertaremos un programa incrustado con dos funciones que cambiarán el estilo del texto del elemento pasado como parámetro. Estas funciones son llamadas por los eventos onmousenter y onmouseleave.

Las funciones provistas en este ejemplo están fuera del enfoque de este sitio web y no serán explicadas en este documento.

<p onmouseover="cambiarAItalica(this)" onmouseout="changeANormal(this)">Kennedy se tranquilizó y volvió a abismarse en su contemplación indecisa, cuando hendió los aires un agudo silbido.</p>
<script>
  function cambiarAItalica(element) {
    element.style.fontStyle='italic';
  }
  function changeANormal(element) {
    element.style.fontStyle='normal';
  }
</script>

Kennedy se tranquilizó y volvió a abismarse en su contemplación indecisa, cuando hendió los aires un agudo silbido.

En el siguiente ejemplo, enlazaremos el elemento a un archivo externo con un par de funciones que cambian el espesor de la fuente del elemento pasado como parámetro. Esta vez, el atributo src estará presente en el elemento y proveerá el URI del archivo que contiene a los programas.

<p onmouseover="espesorANegrita(this)" onmouseout="espesorANormal(this)">Joe se deslizó por el cable y reapareció a los pocos instantes. El Victoria, en libertad, flotaba en el aire, casi inmóvil.</p>
<script src="script.js"></script>

Joe se deslizó por el cable y reapareció a los pocos instantes. El Victoria, en libertad, flotaba en el aire, casi inmóvil.

Atributos

Atributos específicos

src

El URI del recurso con programas externo a ser cargado.

Los programas sólo pueden incluirse por este medio cuando el atributo type presenta los valores "text/javascript" ó "text/javascript".

Los programas en el archivo referenciado por este atributo deben ser presentados en el lenguaje descripto por el atributo type.

Ejemplo

<script src="../archivoprogramas.js"></script>

type

El tipo de contenido que se supone presenta el bloque de código. Puede tomar tres tipos de valores:

  • text/javascript: el bloque representa a un programa clásico y es afectado por los atributos charset, async, y defer. Este es el valor por defecto y se alienta a los autores a omitir directamente el atributo.
  • module: el bloque representa a un programa módulo y no es afectado por los atributos charset y defer.
  • Cualquier otro Tipo de medios de Internet válido: el bloque representa a un bloque de datos y, por lo tanto, no es procesado y no es afectado por ningún otro atributo. Este tipo de datos debe ser declarado in-situ (no puede ser recuperado de un recurso externo mediante el atributo src).

Ejemplo

<script type="text/ecmascript">
  function foo() {
    return bar;
  }
</script>

nomodule

Un atributo booleano que indica que el progrma no debe ser ejecutado en navegadores que poseen soporte para programas modulares. Si este atributo está presente, los navegadores con soporte para programas modulares no ejecutarán el programa.

El atributo nomodule puede resultar útil como una forma de proveer la funcionalidad de programas modulares en navegadores que no los soporten.

La presencia de este atributo en programas modulares está prohibida y será completamente ignorada por los navegadores.

Ejemplo

// Archivo único de programas para navegadores que no soportan programas modulares (será ignorado en navegadores que soporten programas modulares)
<script src="../archivo-unico-de-programas.js" nomodule></script>

async

Un valor booleano que indica si los programs provistos en el atributo src de este elemento deberían ser cargados asincrónicamente. Si este atributo toma el valor "async" o la cadena vacía ("") o si está simplemente presente, el programa será recuperado en paralelo al procesamiento del documento y evaluado tan pronto como esté disponible (potencialmente antes de que se complete el procesamiento del documento).

Este atributo sólo puede ser declarado para programas clásicos o de módulo. Esto es, cuando el atributo type está ausente o tiene los valores "text/javascript" y "module".

Este atributo puede ser declarado junto con el atributo defer, para permitir a los navegadores antiguos, que solo soportan a defer, utilizar el método de defer en lugar de bloquear la carga de la página (la cual es la conducta por defecto).

Este atributo no puede ser declarado en ausencia del atributo src, es decir, que su presencia sólo es válida cuando el elemento apunta a un programa externo.

Ejemplo

<script src="../programaspesados.js" async></script>

defer

Un valor booleano que indica si los programas provistos en el atributo src de este elemento deberían ser ejecutados una vez que la página ha sido completamente cargada. Si este atributo toma el valor "defer" o la cadena vacía ("") o si está simplemente presente, el programa será recuperado en paralelo al procesamiento del documento y evaluado sólo cuando se haya completado el procesamiento del documento.

Este atributo sólo puede ser declarado para programas clásicos. Esto es, cuando el atributo type está ausente o tiene el valor "text/javascript".

Este atributo puede ser declarado junto con el atributo async, para permitir a los navegadores antiguos, que solo soportan a defer, utilizar el método de defer en lugar de bloquear la carga de la página, (la cual es la conducta por defecto).

Este atributo no puede ser declarado en ausencia del atributo src, es decir, que su presencia sólo es válida cuando el elemento apunta a un programa externo.

Ejemplo

<script src="../programaspesados.js" defer></script>

crossorigin

Un valor enumerado que indica si la petición hecha a un servidor externo debe presentar credenciales CORS o no. Este atributo resulta útil al incrustar programas ubicados en otros servidores que soportan acceso cross-origin, para permitir reporte de errores enriquecido. Los dos valores posibles son (insensibles a mayúsculas/minúsculas):

  • anonymous: las peticiones CORS para el elemento tendrán la etiqueta "omit credentials" establecida.
  • use-credentials: las peticiones CORS para el elemento no tendrán la etiqueta "omit credentials" establecida.

Ejemplo

<script src="http://www.otrositioweb.com/scripts.js" crossorigin="use-credentials"></script>

integrity

Una representación criptográfica del recurso enlazado que permite a los navegadores comprobar que el recurso recuperado no ha sido manipulado.

Este atributo sólo debe ser declarado cuando el atributo src está presente. En cualquier otra situación su uso será inválido.

Ejemplo

<script src="funciones.js" integrity="sha384-aHR0cDovL2h0bWxxdWljay5jb20vZnVuY2lvbmVzLmpz"></script>

referrerpolicy

Establece la política de origen utilizada al recuperar el script, así como cualquier script importado desde él. Puede contener cualquiera de los siguientes valores:

  • no-referrer: Ninguna información acerca del remitente es enviada en todas las peticiones.
  • no-referrer-when-downgrade: Una URL completa es enviada únicamente en las peticiones desde un entorno protegido por TLS (HTTPS) a una URL potencialmente confiable y desde un entorno no protegido por TLS a cualquier parte.
  • same-origin: Una URL completa es enviada únicamente en las peticiones hechas en el mismo origen.
  • origin: Una URL compuesta por protocolo, servidor y puerto es enviada en todas las peticiones.
  • strict-origin: Una URL compuesta por protocolo, servidor y puerto es enviada únicamente en las peticiones desde un entorno protegido por TLS (HTTPS) a una URL potencialmente confiable y desde un entorno no protegido por TLS a cualquier parte.
  • origin-when-cross-origin: Una URL completa en las peticiones hechas en el mismo origen y una URL compuesta por protocolo, servidor y puerto es enviada en peticiones de distintos orígenes.
  • strict-origin-when-cross-origin: Una URL completa en las peticiones hechas en el mismo origen y una URL compuesta por protocolo, servidor y puerto es enviada en peticiones de distintos orígenes, únicamente en peticiones desde un entorno protegido por TLS (HTTPS) a una URL potencialmente confiable y desde un entorno no protegido por TLS a cualquier parte.
  • unsafe-url: Una URL completa es enviada en todas las peticiones.

Nota: Cuando la cadena vacía es especificada, se asume el valor no-referrer.

Ejemplo

<script src="http://otrositio.com/funcs.js" referrerpolicy="unsafe-url"></script>

charset

La codificación de caracteres usada por el recurso con programas provisto en el atributo src.

Este atributo se ha vuelto obsoleto en HTML5, ya que es requisito que todos los programas sean siempre provistos e interpretados como UTF-8.

Ejemplo

<script src="../programasmenu.js" charset="utf-8"></script>

language

El lenguaje de programación usado por el programa, como un identificador de lenguaje. Los valores de identificadores de lenguaje no son estándares.

Ejemplo

<script language="javascript" src="funciones.js"></script>

Atributos globales

Para más información acerca de los atributos globales refiérete a esta lista de atributos gloables en HTML5.

Eventos

Eventos globales

Para más información acerca de los eventos globales refiérete a esta lista de eventos globales en HTML5.