Cargar JavaScript en HTML es una acción fundamental cuando estamos intentando unir el poder de estos dos lenguajes de programación. Por ello, en este post, te enseñaremos exactamente cómo hacerlo.
¿Qué es cargar JavaScript en HTML?
En nuestro post sobre crear un hello world en JavaScript, hemos creado una página con un texto de hola mundo desde cero. Para ello, hemos combinado la estructura básica de HTML con el texto producido por el comando console.log de JavaScript. A esto le llamamos cargar JavaScript desde HTML, pues se inserta una sección de código JS dentro de una estructura perteneciente a HTML.
En aquel post, te enseñamos a ejecutar esta acción con la etiqueta script. Ahora, te enseñaremos cómo funcionan esta y otras formas de cargar JavaScript en HTML.
¿Cómo cargar JavaScript en HTML?
Existen tres formas principales de cargar JavaScript en HTML y, a continuación, te las presentamos.
<script>
Como ya mencionamos, la primera forma de cargar JavaScript en HTML es insertar la etiqueta script. Abrir un tag o etiqueta script en un archivo HTML es decirle al navegador que el código que está dentro de esta es JavaScript. Es decir, escribir un console.log solo tendrá efecto si está dentro de esta etiqueta, pues fuera de ella el navegador y editor esperan código HTML.
//como agregar javascript a html
<script>
console.log ('hola');
</script>Para conocer más sobre esta etiqueta, que también puede usarse para lenguajes que no son JavaScript, te recomendamos leer el post de la MDN sobre el elemento script.
Cargar un archivo JS
La segunda manera de cargar JavaScript en HTML es cargar un fichero JS como tal. Para ello, usamos la etiqueta script con el atributo src. Este atributo nos permitirá insertar como valor un archivo de JavaScript que contiene el código que queremos insertar. Ten presente que este atributo se inserta directamente dentro de la etiqueta, no como contenido de ella. A continuación, te mostramos un ejemplo:
//agregar javascript en html
<script src="cualquier-js.js"></script>Ahora, el navegador irá a buscar el archivo JavaScript que hemos insertado y traerá todo su contenido. Luego, este código será interpretado y cargado en el navegador cuando sea necesario.
Cargar un módulo
La tercera manera de cargar JavaScript en HTML es muy similar a la anterior, pues utiliza la etiqueta script con el atributo src. La diferencia es que en esta también utilizamos el atributo type. ¿Para qué utilizamos este atributo? Pues para identificar que este archivo es un módulo. A continuación, te mostramos cómo se escribe esta línea de código:
<script type=»module» src=»cualquier-js.js»></script>
¿Cuál es la diferencia entre esta línea de código y la anterior? Cuando cargamos un archivo sin el atributo type=»module», este archivo será un JavaScript plano. Es decir, no tendrá funcionalidades de versiones más recientes de JavaScript. Por ejemplo, los módulos y las palabras clave como async y await, introducidas en el nuevo estándar de ECMAScript 6. Estas funcionalidades deben introducirse en un módulo, no en un JavaScript plano.
Otra de las diferencias entre estas líneas de código es que un módulo de JavaScript tiene un scope propio. Esto significa que todo lo que escribamos dentro de este módulo no se va a conocer fuera de su contexto. Por su parte, un JavaScript plano es accesible dentro de todo el proyecto.
Te ponemos un ejemplo. Imagina que insertamos los dos siguientes archivos JavaScript planos:
//como llamar un javascript en html
<script src= "cualquier-js-1.js"></script>
<script src= "cualquier-js-2.js"></script>Siguiendo lo que hemos dicho, cualquier variable que definamos dentro del archivo cualquier-js-1.js será accesible desde el archivo cualquier-js-2.js, pues no tienen un scope propio. Esto no pasaría en un JavaScript de tipo módulo.
Sin importar si es un JavaScript plano o un JavaScript de módulo, si el navegador no encuentra el archivo JavaScript que estás insertando desde el atributo src en tu proyecto, te devolverá un error 404. Para asegurarte de no estar cometiendo estos errores, te recomendamos ir desarrollando tu código a la par que ves el resultado en el navegador. Para ello, puedes usar la herramienta live server en Visual Studio Code.
¿Cuál es el siguiente paso?
Ahora que sabes cómo cargar JavaScript en HTML, ¡es hora de combinar ambos códigos en tus proyectos! Para ello, el próximo paso es aprender a desarrollar proyectos web con herramientas y lenguajes de programación como JavaScript, HTML, CSS y JSX en nuestro Desarrollo Web Full Stack Bootcamp. En este espacio de formación intensiva, aprenderás todo lo que necesitas para convertirte en un experto del desarrollo web en pocos meses. ¡No te lo pierdas y solicita información!
