¿Cómo incluir js en un documento HTML?
Al igual que las hojas de estilo en cascada – CSS (que permite incrustar el estilo dentro del documento con la etiqueta style), el código de JavaScript puede ser incrustado dentro de un documento html utilizando la etiqueta script.
<script type="text/javascript">
// Código
</script>El código también se puede encontrar en un documento independiente (con extensión js) al que se manda llamar para incluir la funcionalidad dentro del documento HTML.
Para incluir una hoja de estilo externa se utiliza la etiqueta (link). En JavaScript se utiliza la misma etiqueta (script) pero se le agrega el atributo src con referencia hacia el archivo que se desea agregar.
La referencia hacia el archivo puede ser una ruta relativa – que el archivo se encuentre en el mismo directorio donde está el html o en alguna carpeta dentro del mismo dominio – o puede ser una ruta absoluta hacia un recurso – http://example.com/mi-codigo.js
Tip
Si mandan llamar un archivo utilizando http:// pero la página se visualiza a través de https:// se va a generar una advertencia (de que se quiere incluir contenido no seguro en una página segura). Para evitar esto simplemente se utilizan dos diagonales y no se especifica el protocolo.
// Archivo dentro del dominio de la página / sitio
<script type="text/javascript" src="archivo.js"></script>
// Archivo externo, se utilizan las // para que la página
// pueda ser visualizada a través de http o https
<script type="text/javascript" src="//example.com/archivo.js"></script>Nota:
Aunque técnicamente es posible utilizar la etiqueta script en cualquier parte del documento (a veces se sugiere utilizar dentro del encabezado <head></head>) es recomendable utilizar las etiquetas al final del documento HTML antes de cerrar la etiqueta del cuerpo del documento (</body>).
¿Cuándo incrustar el código y cuándo utilizar un archivo externo?
No hay una regla como tal.
Si la funcionalidad es probable que se utilice de nuevo – en dos o más páginas – es conveniente tener el código en un archivo externo y mandarlo llamar en cada una de las páginas. Si solo es un script que se va a utilizar únicamente en un documento (html) es probable que mejor se incruste el código para ahorrar una petición al servidor.
Recordar
CSS dentro de la etiqueta head
JS antes de cerrar la etiqueta body
Nota
A veces se pueden encontrar las etiquetas de script sin type=’text/JavaScript’ porque actualmente es la única opción de script para web.
<script>
// Código
</script>
<script src="archivo.js" ></script>Para interactuar con JavaScript puedes utilizar la consola de las herramientas de desarrollo y las ventanas emergentes visitando esta publicación.