Para incluir el lenguaje JavaScript a un documento HTML o una página web se utiliza el elemento <script>. Este elemento del lenguaje HTML permite insertar código de forma directa sobre el mismo documento HTML, pero también permite enlazar un archivo externo con el formato JS (extensión .js).
También es posible incluir JavaScript a través de los atributos de eventos que se pueden especificar en los elementos HTML. La mayoría de estos eventos están relacionados con acciones concretas de JavaScript: cuando se pulsa un botón, cuando se mueve el cursor, cuando se selecciona un elemento, etc.
Código interno: dentro del HTML
Una forma e incluir código JS en un documento HTML es entre las etiquetas <script> (de apertura) y </script> (de cierre). En este caso ya no se utiliza el atributo src. También existe el atributo type para indicar el tipo de medio (Mime Type) que contiene. Para JavaScript, el valor de type sería text/javascript, pero al tratarse del valor por defecto, no hace falta indicarlo.
La ventaja de este método de inclusión de código JavaScript es que evita una petición HTTP al servidor. Por tanto, la velocidad de carga de la web puede mejorar. Tiene dos desventajas: la primera es que dificulta el mantenimiento del código; y la segunda es que no se podrá reutilizar en otros documentos HTML.
Ejemplo de código HTML insertando código JS:
<script>
alert('Hola')
</script>
Enlazar un archivo externo
Enlazar un archivo externo en formato JS es la forma más recomendable de incluir código JavaScript en un documento HTML. Esto permitirá que el código sea más fácil de mantener al estar en archivos independientes. Además, algunos editores de código (VSCode, Vim, Emacs) tienen herramientas de depuración que funcionan mejor cuando detectan que el archivo contiene código JavaScript.
Para enlazarlo se usa el elemento <script> junto con el atributo src. Este atributo permite especificar la ruta en la que se encuentra el archivo JS que queramos incluir en nuestro documento HTML. El valor de este atributo será una cadena de texto que incluye la URL exacta, ya sea relativa o absoluta.
Observa el siguiente código HTML:
<script src="script.js"></script>
Este archivo enlazado se cargará mientras se cargan el resto de recursos y elementos del documento HTML o página web.
Es posible crear tantos archivos JS como sean necesarios y enlazarlos desde la ubicación de la estructura HTML más oportuna. Ten en cuenta que demasiados archivos incrementarán el número de peticiones HTTP al servidor.
Sobre un elemento HTML (en línea)
Los elementos HTML permiten el uso de atributos de eventos. Estos atributos establecen una interacción entre los elementos del documento HTML y las acciones el usuario o del sistema. Por poner un ejemplo, un evento puede ser cuando el usuario hace clic sobre un elemento específico.
El valor de estos atributos de eventos será una cadena de texto que contiene código JavaScript o el nombre de una función personalizada, siempre y cuando esté accesible a través de alguno de los elementos <script>.
En este ejemplo se utiliza el atributo onclick para que se muestre un mensaje de alerta. Para ello se utiliza la función alert().
<p onclick='alert("Mensaje de alerta.")'>Pulsa aquí.</p>
Para ver el resultado, haz clic sobre el párrafo siguiente:
Pulsa aquí.
Ubicación del elemento <script>
En un documento HTML, el elemento <script> puede colocarse en varios lugares, como dentro de <head> o de <body>. Su posición determina cuándo se ejecutará el código JS en relación con el resto del documento. Por tanto, lo ubicaremos donde más nos convenga, según nuestras necesidades.
Estas son las posibles ubicaciones de <script>:
- Dentro del elemento
<head> - Dentro del elemento
<body> - Antes de la etiqueta
</body>(de cierre)
Dentro del elemento <head>
Cuando se coloca el elemento <script> anidado dentro de las etiquetas del elemento <head>, el código JavaScript se ejecutará antes de que el contenido visual del documento HTML se haya cargado (dibujado).
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Dentro de 'head'</title>
<script src="script.js"></script>
</head>
<body>
<h1>Título</h1>
<p>Contenido</p>
</body>
</html>
Por tanto, si necesitamos que el código JavaScript se ejecute antes de que se muestre la página, esta opción es la más adecuada. Esto implica que el navegador detiene la carga del HTML para ejecutar el código JS de forma inmediata.
Dentro del elemento <body>
En cambio, si el elemento <script> se coloca dentro de las etiquetas del elemento <body> del documento HTML, el código JavaScript se ejecutará durante el proceso de carga del contenido HTML. Esto significa que cuando el código se ejecute, la página aún estará en proceso de dibujado.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Dentro de 'head'</title>
</head>
<body>
<h1>Título</h1>
<script src="script.js"></script>
<p>Contenido</p>
</body>
</html>
En este sentido, si queremos que el código JavaScript no se ejecute antes ni después de la carga del contenido HTML, esta opción será la mejor. La carga de la página se detendrá hasta que haya ejecutado el código JS. Luego cargará el resto de elementos HTML hasta el final del documento.
Antes de la etiqueta </body>
Finalmente, si se coloca el elemento <script> justo antes de la etiqueta </body> (de cierre) del documento HTML, el código JavaScript se ejecutará después de que el navegador haya cargado el 100% de la página.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Dentro de 'head'</title>
</head>
<body>
<h1>Título</h1>
<p>Contenido</p>
<script src="script.js"></script>
</body>
</html>
En definitiva, si lo que necesitamos es que el código JavaScript actúe justo cuando se haya cargado y esté listo para ser manipulado, esta opción puede ser correcta. Sin embargo, se puede obtener el mismo resultado de una manera más robusta usando los atributos async y defer del elemento <script>.
Algunos navegadores web antiguos, como es el caso del Internet Explorer 9 o anteriores, no soportan el atributo defer. En tales casos, ubicar el código JS antes de la etiqueta </body> tendrá una mayor compatibilidad.
El atributo ‘async’
El atributo async le indica al navegador web que descargue el código JavaScript de forma paralela —al mismo tiempo que el contenido del documento HTML— y se ejecutará tan pronto como se haya descargado.
<script src="script.js async"></script>
El atributo ‘defer’
El atributo defer también le indica al navegador web que descargue el código JS en segundo plano (en paralelo), pero no lo ejecutará hasta que el contenido del documento HTML esté completamente cargado y procesado.
<script src="script.js defer"></script>
El uso de módulos
Desde la versión ES6 (ES2015), JavaScript tiene una forma más moderna de organizar y ejecutar código dentro de un archivo HTML: los módulos. Se habilitan con el atributo type='module' en el elemento <script>, lo que permite trabajar con el sistema de módulos de ES6 mediante import y export.
Además, un script declarado como módulo tiene varias particularidades: se ejecuta siempre en modo estricto, su código queda aislado del ámbito global para evitar contaminar el objeto window, y permite importar y exportar para dividir la lógica en distintos archivos y mantener una mejor organización.
Otra ventaja de los módulos es que se cargan de forma diferida, como si llevaran el atributo defer de forma implícita. Por tanto, los módulos de JS no bloquean el renderizado (dibujado) del HTML mientras se cargan.
Contenido alternativo con <noscript>
Puede darse la situación en que el usuario esté utilizando un navegador sin soporte para JavaScript o que lo tenga deshabilitado. En este caso, puede ser conveniente mostrar un mensaje de texto alternativo, como por ejemplo:
Este sitio requiere JavaScript para funcionar correctamente.
Esto se consigue con el elemento <noscript>, ya descrito en el curso de HTML. Cuando el navegador no puede ejecutar el código JavaScript, muestra el texto contenido entre las etiquetas <noscript> y </noscript>.
Ejemplo completo, en código HTML:
<script>
alert('JavaScript está habilitado.')
</script>
<noscript>
JavaScript está deshabilitado.
</noscript>
Así, no solo podremos incluir código JS en nuestro documento HTML, sino que también podremos manejar los casos en los que esté deshabilitado o no sea compatible, ofreciendo al usuario un mensaje o contenido alternativo.
