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 type, 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.

Hasta el 06/04/2015, el soporte provisto por los navegadores para el atributo async es aún incompleto. Los autores pueden tener que recurrir a programas para reemplazar esta funcionalidad hasta que el soporte crezca.

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 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

Un Tipo de medios de Internet válido que indica el lenguaje en que los programas son presentados. Si este atributo no está presente, se asume el valor por defecto "text/javascript".

Ejemplo

<script type="text/ecmascript">
  Array.isArray = function(array) {
    return Object.prototype.toString.call(array) === "[object Array]";
  };
</script>

charset

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

Este atributo no debe ser declarado si el atributo src no está presente, ya que su único propósito es el de indicar la codificación de caracteres encoding del archivo enlazado.

Ejemplo

<script src="../programasmenu.js" charset="utf-8"></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, los programas serán ejecutados tan pronto como sea posible, pero sin bloquear la carga de la página.

El soporte provisto por los navegadores para este atributo es aún incompleto. Los atuores pueden tener que recurrir a programas para reemplazar su funcionalidad hasta que el soporte crezca.

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, los programas serán ejecutados solo luego de que la página haya sido cargada.

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>

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.