Etiqueta <SCRIPT>

La etiqueta <script> permite la inserción de códigos script, como puede ser JavaScript en un documento web del lado del cliente(*1). El código se puede insertar directamente entre las etiquetas o haciendo referencia a un documento externo el cual contiene el código script a ejecutar. En este último caso la etiqueta de script no ha de tener contenido.

Los “navegadores” o visualizadores realizan la carga del documento web de forma secuencial, cuando el navegador se encuentra con una etiqueta de script y esta contiene el atributo src, puede provocar que si el script es muy lento en su ejecución o cuando se carga el script y este hace referencia a un elemento del documento web, que no ha sido cargado todavía, pueda producirse un error de ejecución en el documento.

Para evitar estas situaciones se ha de plantear donde situar los códigos de script, aunque inicialmente se plantea que estos se carguen en el encabezado, realmente se pueden cargar en cualquier parte del documento web. Por lo tanto es conveniente situar los script después de los elementos del documento web a los cuales hagan referencia. Una técnica muy utilizada era situar los scripts al final del documento web, antes de la etiqueta de cierre del mismo.

En HTML5 se pueden utilizar los atributos de la etiqueta como son async y defer, los cuales permitirían la inserción del código de script indicando a su vez cuando se han de ejecutar los mismos.

El formato de la etiqueta con todos sus atributos puede ser uno de los siguientes:

<script type=”valor” src=”URL” charset=”valor” async></script>

<script type=”valor” src=”URL” charset=”valor” defer></script>

<script type=”valor” > Contenido código fuente script </script>

Entre sus atributos se encuentran los siguientes:

async : se puede utilizar solo cuando el script es externo, es decir se ha especificado el atributo src, indicando que se cargue el script desde un documento exterior.

Es un atributo booleano, es decir está activado (verdad), si se especifica en la etiqueta y esta desactivado (false) si no se especifica.

Si el atributo se especifica los script del documento serán ejecutados de forma asíncrona, es decir se ejecutaran en el momento que tengan oportunidad y han sido cargados completamente antes de la carga de documento final. Esto no garantiza por tanto el orden de ejecución de los mismos.

defer : se puede utilizar solo cuando el script es externo, es decir se ha especificado el atributo src, indicando que se cargue el script desde un documento exterior.

Es un atributo booleano complementario de async, está activado si aparece y desactivado si no lo hace. No es complementario del atributo async, hay que indicar que aparece un atributo u otro, no los dos a la vez.

Si se especifica el atributo los script del documento serán cargados y ejecutados, cuando se haya finalizado la carga del documento. De esta forma se garantiza que los scripts serán ejecutados en el orden en el que se han cargado dentro del documento web.

En el caso de no especificarse ninguno de los atributos los script son ejecutados en el momento de ser leídos en el orden natural de lectura del documento web, no garantizándose así que el script pueda dar problemas por referencias a elementos no cargados.

type : permite especificar el tipo MIME del script. El tipo MIME esta compuesto de dos partes una el tipo seguido de una barra y el subtipo. Por defecto el tipo MIME en caso de no especificarse es “text/javascript”. Entre los posibles valores de este atributo se pueden encontrar las siguientes, siendo los más comunes:

src : el atributo permite especificar la dirección URL del recurso al cual se quiere acceder, siendo en este caso el archivo que contiene el código de script a cargar en el documento web.

charset :Solo se ha de especificar en el caso de que se esté realizando la carga de un script externo mediante el atributo src. Sirve para especificar el juego de caracteres y codificación del archivo que se está cargando.

El siguiente ejemplo muestra el uso de la etiqueta <script> en conjunto con los atributos comentados anteriormente:

<!DOCTYPE html>
<html>
<head>
<title>Ejercicios y prácticas HTML , aprendoencasa.com</title>
<meta charset=”UTF-8”>
<meta name=”application-name” content=”Ejercicios y prácticas 1.0”>
<meta name=”author”  content=”Lucia Castillo”>
<meta name=”description” content=”Prácticas y ejercicios de HTML”>
<meta name=”generator” content=”aprendoencasa.com”>
<meta name=”keywords” content=”ejercicios, practicas, programacion, html, etc”>
</head>
<body>
 <script type=”text/javascript”>
document.write(“Hola Mundo”);
</script>
</body>
</html>

(*1) Aunque el envió del script se realiza por el servidor al acceder al documento web, normalmente los script se insertar para que una vez cargados por el “navegador”, este último sea el que se encargue de la ejecución del código (ejecución en el lado del cliente, el que accede al documento).