Formas de agregar scripts
Existen dos formas principales de agregar scripts a nuestro proyecto web: Interno y Externo.
Scripts internos
Este método se refiere a usar la etiqueta <script> y colocar el código dentro de ella:
<script> console.log("Un mensaje en consola");</script>Podemos colocar esta etiqueta en diferentes partes del documento, por ejemplo en la cabeza (<head>) o en alguna parte del cuerpo (<body>).
Cuando usamos este método hay que tener cuidado ya que el lugar donde coloquemos el script puede influir en los resultados.
Sobre el orden de ejecución
El código es interpretado por el navegador de arriba hacia abajo, por lo tanto, tratar de manipular un elemento que todavía no existe provocará que el script no se ejecute correctamente.
El siguiente es un script que debería cambiar el mensaje dentro del párrafo de Mi párrafo a Actualizado mediante código.
<body> <script> document.querySelector("p").textContent("Actualizado mediante código"); </script> <p>Mi párrafo</p></body>Como puedes ver no surtió efecto. Esto se debe a que el párrafo es creado hasta después del script y por lo tanto no puede ser encontrado.
Usualmente colocamos el script justo antes del cierre del cuerpo </body>. Así nos aseguramos de que todos los demás elementos ya hayan cargado.
<body> <p>Mi párrafo</p> <script> document.querySelector("p").textContent("Actualizado mediante código"); </script></body>Sobre el uso en <head>
También podemos colocar el script en la etiqueta <head>, y a pesar de que puede suceder el mismo problema, podemos deshacernos de él fácilmente.
<head> <script type="module"> document.querySelector("p").textContent("Actualizado mediante código"); </script></head><body> <p>Mi párrafo</p></body>Scripts externos
La forma más adecuada para agregar scripts una vez que comenzamos a utilizar más código, es por medio de scripts externos. El proceso es similar a ligar un archivo CSS.
Para ello tenemos que crear un nuevo archivo con las extensión .js. Usualmente lo nombramos script.js, aunque puede ser el nombre que queramos.
document.querySelector("p").textContent = "Actualizado mediante código";Para ligar este tipo de archivos con nuestro documento HTML debemos usar la misma etiqueta <script>. Sólo que esta vez debemos agregar el atributo src junto con la ruta del archivo.
<!-- Resto de etiquetas --><head> <script src="script.js" type="module"></script></head><body> <p>Mi párrafo</p></body><!-- <Resto de etiquetas> -->También debemos utilizar el atributo type="module" para evitar errores en el orden de ejecución.