Tabla de Contenidos

JavaScript: incluir código en una web

Forma parte de las notas sobre JavaScript.

JavaScript se aplica a una página HTML de manera similar a CSS, utilizando la etiqueta HTML. En el caso de CSS es con <link> y para JavaScript se utiliza <script>.

El código JavaScript se puede incluir directamente en el código HTML o desde un fichero externo.

JavaScript interno

Podemos añadir código JavaScript entre las etiquetas <script> en un documento HTML: 

<!DOCTYPE html>
<html lang="es-ES">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Apply JavaScript example</title>
    <script>
      console.log("Soy código JavaScript");
    </script>
  </head>
  <body>
    <h1>Hola, mundo</h1>
  </body>
</html>

JavaScript externo

Si tenemos un fichero llamado scripts.js con código JavaScript: 

console.log("Soy código JavaScript");

Podemos cargarlo desde una web mediante el atributo src de la etiqueta <script>: 

<!DOCTYPE html>
<html lang="es-ES">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Apply JavaScript example</title>
    <script src="script.js" defer></script>
  </head>
  <body>
    <h1>Hola, mundo</h1>
  </body>
</html>

Usamos el atributo defer para indicarle al navegador que siga descargando el contenido HTML antes de ejecutar el script y así evitar bloqueos en la carga de la página.

Antes de existir defer lo que se solía hacer era colocar el elemento script justo en la parte inferior del cuerpo (por ejemplo, justo antes de la etiqueta </body>), para que se cargara después de haber procesado todo el HTML.

Existe otro atributo que se puee usar para evitar el problema del bloqueo de script: async. La diferencia con defer es que async hace que los scripts se ejecuten inmediatamente tras la carga de la página. El problema es que no hay garantía del orden en que se ejecutarán los scripts.

En resumen:

Las ventajas de tener el código JavaScript en ficheros externos: