Tras conocer qué es JavaScript y cómo, además de ser un lenguaje Frontend, lo podemos utilizar como Backend con Node.js, vamos a ver qué diferentes formas tener de ejecutar JavaScript, tanto como desarrolladores como usuarios y, en concreto, cómo ejecutar JavaScript en HTML.

El objetivo de esta entrega de Aprende JavaScript no es otro que seamos capaces de entender más en profundidad el funcionamiento de JavaScript, tanto como lenguaje Frontend como lenguaje Backend y, además, seamos capaces de ejecutar y probar nuestro código JavaScript integrado en HTML.


Ejecutar JavaScript en HTML

Aunque nos vamos a centrar en cómo ejecutar JavaScript en HTML, es realmente importante conocer las diferentes formas que tenemos para ejecutar JavaScript pues, además de facilitarnos la vida como desarrolladores, podremos adaptarnos a las circunstancias, pues igual nos interesa en un momento dado ejecutarlo directamente en el navegador, hacer pruebas con una página web, o usar un IDE para escribir y ejecutar nuestro JavaScript en el mismo entorno de programación.


Diferentes formas de ejecutar JavaScript


Si queremos probar un código en JavaScript que hemos desarrollado, básicamente tenemos que empezar viendo cuál es la naturaleza u objetivo de nuestro código. Básicamente tenemos tres opciones:

  • Es un código que vamos a integrar en el diseño de nuestra web junto a HTML (FrontEnd)
  • Es un código que vamos a usar para diseñar y construir la estructura interna de nuestra web o aplicación (Backend)
  • Simplemente queremos probar modificaciones o funcionalidades en una web ya existente pero no queremos guardar los cambios

Estas son las tres situaciones más comunes en las que nos vamos a encontrar a la hora de estar trabajando con JavaScript. Así pues, dependiendo del objetivo que tengamos, la forma más óptima de ejecutar y probar JavaScript será diferente.

En este artículo nos vamos a centrar en la integración de JavaScript junto a HTML para poder dinamizar nuestro Frontend con JavaScript.


Ejecutar JavaScript en HTML


Si estás trabajando en el desarrollo Frontend de una página web, seguramente estás usando JavaScript para añadir funciones dinámicas a tu web. Si es así, entonces te interesa integrar el código y las funciones JavaScript con tu código HTML para poder ver su ejecucción, además de su integración con el diseño, en el navegador web.

Para hacer esto tenemos dos opciones:

  • Escribir el código JavaScript directamente en los archivos HTML
  • Tener todo el código JavaScript en un archivo .js e importarlo en el HTML

Aunque ahora vamos a ver las dos opciones la que nosotros te recomendamos es la segunda: tener tu código JavaScript en un archivo aparte y luego importarlo en el HTML. La opción de escribir directamente el código JavaScript en el HTML lo podemos dejar para cuando tenemos muy poco código y muy simple


Escribir directamente el código JavaScript en el HTML

Para escribir directamente vamos a utilizar las etiquetas <script></script> donde insertar directamente el código JavaScript. Este código lo podemos insetar tanto en la parte del <head> como en la del <body>. Aquí tenéis un ejemplo:

<html>
<head>

<script>Podemos insertar nuestro código JavaScript aquí</script>

</head>
<body>

Mi código HTML
<script>Podemos insertar nuestro código JavaScript aquí</script>

</body>
</html>

De esta forma nuestro código JavaScript se podrá ejecutar ya en el navegador cuando accedamos a la web. Este proceso de integración con HTML lo recomendamos cuando el código es bastante corto y simple, cuando no nos haga falta tener un archivo específico para diferentes funciones escritas en JavaScript.


Escribir el código JavaScript en un archivo separado

La segunda forma es la de escribir el código en un archivo con la extensión .js e importarlo usando de nuevo la etiqueta <script></script> pero con el atributo src donde le indicaremos la ruta del archivo. Imaginad que tenemos todo nuestro código en el archivo index.js, el cual está dentro de una carpeta llamada «js», quedaría de la siguiente forma:

<html>
<head>

<script src="js/index.js"></script>

</head>
<body>
Mi código HTML
</body>
</html>

De esta forma, todo el código que esté escrito en el archivo index.js será accesible por el código HTML y por la página web. Este método tiene la ventaja de que nos permitirá tener el código JavaScript separado del código en HTML y CSS, pudiendo así poder modificarlo y leerlo de forma más fácil.


Conclusiones


Tenemos diferentes formas de ejecutar JavaScript, las cuales variarán según el objetio y la función que le queramos dar a nuestro código. En este artículo hemos visto cómo podemos integrar JavaScript en nuestro Frontend y, concretamente, en cómo podemos ejecutar JavaScript en HTML usando las etiquetas <script></script>.

Recordemos que además de poder ejecutar nuestro código JavaScript en HTML, también podemos utilizar este lenguaje de programación para crear aplicaciones backend con Node.js, por lo que esta no sería la forma indicada para ejecutar JavaScript. Si lo que quieres es ejecutarlo de esta forma, o directamente en el terminal del navegador, en los próximos articulos lo explicamos.