Incluir JavaScript

Existen 2 maneras de incluir JavaScript en HTML: puedes escribirlo directamente entre las etiquetas <script> o mantenerlo en un archivo aparte e invocarlo con el parámetro SRC='URL', donde la URL puede ser absoluta o relativa.

<script>
   ...
</script>
<script src=programa.js></script>

Mantener el script en un archivo externo es muy útil si desea ejecutar el mismo JavaScript en varias páginas de un sitio web. El archivo de script externo no puede contener solo comandos JavaScript.

En el encabezado <head>
En el cuerpo <body> en el lugar que quieres que aparezca el resultado
Como una llamada de función

Ejecutarlo directamente
Invocando una función
Consideraciones
Script dinamicos

1. Ejecutarlo directamente

Cuando tu código JavaScript ejecute algo directamente debes ponerlo en el lugar del <body> donde quieres ver el resultados.

Debes poner la etiqueta <script> exactamente donde deberia poner el resultado del script.

2. Invocar una función incluida en un JavaScript

En este caso normalmente el script sera cargado en el encabezado <head> de la pagina y usando function xxx luego llamas por su nombre la función xxx() en algún evento.

<button onClick=xxx()>titulo</button>

3. Consideraciones

En los sitios web modernos los scripts suelen ser más “pesados” que el HTML, el tamaño de la descarga es grande y el tiempo de procesamiento es mayor. Cuando el navegador carga el HTML y se encuentra con una etiqueta <script>, no puede continuar construyendo el DOM. Debe ejecutar el script en el momento y navegador tiene que esperar hasta que el script sea descargado (si es externo), ejecutarlo y solo después procesa el resto de la página.

Esto presenta varias dificultades a saber:

Los scripts no pueden ver los elementos del DOM que se encuentran debajo de él por lo que no pueden agregar controladores de eventos, etc.
Si un script muy pesado en la parte superior de la página, este bloquea la carga del resto de la página. Los usuarios no pueden ver el contenido de la página hasta que sea descargado y ejecutado el script.

Atributos script
Atributo	Descripción
defer	No bloquea la página, pero siempre se ejecutan antes del evento DOMContentLoaded.
async	No bloquea la pagina, pero DOMContentLoaded puede suceder antes que un script este cargado.

4. Script dinamicos

Podemos crear un script y agregarlo dinámicamente al documento usando JavaScript.

<script>
   function carga(src){
      let script = document.createElement('script');
      script.src = src;
      script.async = false;   //Son async por defecto
      document.body.append(script);
   }
</script>

<button onClick=loadScript('largo.js')>titulo</button>;