¿Quiéres saber cómo ejecutar código JavaScript en Visual Studio Code? Estás en el lugar adecuado, en este artículo te cuento todo lo que debes saber para empezar a escribir código en JavaScript empleando uno de los editores de código más famosos que existen, Visual Studio Code.
¡Empezamos!
Índice de Contenidos
Creando un archivo JavaScript en Visual Studio Code
Lo primero que debes saber es que Visual Studio Code es un editor de texto muy completo que sirve para programar en cualquier lenguaje de programación existente. Cada lenguaje lleva una extensión de archivos asociada, es decir: los archivos de código JavaScript tienen extensión .js, los ficheros que contienen código PHP son de tipo .php, etc.
En este sentido, lo lógico sería crear un archivo .js que para ejecutar código JavaScript en Visual Studio Code. Esto se puede hacer de la siguiente manera:
- Abre Visual Studio Code y haz clic en el botón File (Archivo) en la barra de menús.
- Selecciona New File (Nuevo archivo) para crear un nuevo archivo vacío.
- Guarda el archivo con la extensión .js. Puedes hacer clic en File (Archivo), luego en Save As (Guardar como) y escribir el nombre del archivo con la extensión .js.
- Escribe el código JavaScript en el archivo y guarda los cambios haciendo clic en File (Archivo), luego en Save (Guardar).
- Para ejecutar el archivo JavaScript, puedes utilizar la terminal integrada de Visual Studio Code.
Ahora bien, es muy importante que tengas en cuenta que JavaScript es un lenguaje de programación que se ejecuta (normalmente) en un navegador web. Es decir, para poder usarlo en una página web, es necesario incluir su código en una etiqueta <script> dentro de un documento HTML. En los siguientes puntos te explico mejor estos conceptos.
JavaScript es un lenguaje de programación client-side, lo que significa que se ejecuta directamente en el navegador web del usuario en lugar de en el servidor. Ello implica que el código JavaScript se descarga junto con el HTML y CSS de una página web y se ejecuta en el navegador del usuario.
Esto permite crear aplicaciones y sitios web dinámicos y altamente interactivos, ya que el código JavaScript puede manipular y cambiar la página en tiempo real sin necesidad de recargar la página. También permite almacenar y recuperar información localmente en el navegador y realizar tareas sin necesidad de enviar solicitudes al servidor.
Saber esto es vital para entender que si quieres ejecutar código JavaScript en Visual Studio Code, lo más sencillo es que lo añadas a un archivo .html. Te lo explico a continuación.
Cómo ejecutar código JavaScript en un archivo HTML: etiquetas <script>
Para añadir código JavaScript con Visual Studio Code a un archivo .html, puedes hacer lo siguiente:
- Abre Visual Studio Code y crea un nuevo archivo. Esta vez, guárdalo con extensión .html.
- Crea la estructura básica de un archivo HTML con Visual Studio Code. Consulta nuestro artículo sobre la temática, ¡te resultará sencillo!
- Agrega una etiqueta <script> en el lugar donde desees insertar el código JavaScript.
- Coloca tu código JavaScript dentro de las etiquetas <script> y </script> guarda los cambios.
Por ejemplo:
<script>
console.log("Hola mundo!");
</script>
Ejemplo de ejecución de código JavaScript en Visual Studio Code
Para que quede más claro, a continuación te muestro el código que puedes añadir a un archivo .html para ejecutar JavaScript en tu navegador:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Masters</title>
</head>
<body>
<h1 id="encabezado-principal"></h1>
<script>
document.getElementById('encabezado-principal').innerHTML = "HTML Masters";
</script>
</body>
</html>
En el ejemplo anterior, se crea un encabezado vacío (la etiqueta <h1>) y después, mediante JavaScript, se define que su contenido será «HTML Masters». Como ves, se define un contenido de forma dinámica, ya que se establece a través de JavaScript una vez se carga el documento HTML en el navegador del usuario.
Te animo a copiar dicho código en Visual Studio Code y a modificar el contenido ubicado entre las etiquetas <script> y </script>. De esta forma, podrás escribir todo el código JavaScript que quieras y ver su ejecución en tu navegador.
Conclusión
En resumen, para ejecutar código JavaScript en Visual Studio Code, lo más recomendable es que generes un archivo con extensión .html, definas la estructura básica de HTML y añadas el código JavaScript entre etiquetas <script> y </script>.
Espero que este artículo te haya sido de ayuda. Si tienes cualquier duda, no dudes en dejármela en los comentarios.
¡Hasta la próxima!
