¿Quieres saber cómo ejecutar un 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 y ejecutar código en JavaScript utilizando 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 para ejecutar un archivo js 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 un código en Visual Studio Code, 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 como ejecutar 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 correr un código en Visual Studio Code dentro de 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 cómo ejecutar en visual studio code un script de JavaScript
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 visual studio code 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 como correr un código en Visual Studio Code y ver su ejecución en tiempo real en tu navegador.
Conclusión
En resumen, para cómo ejecutar un código 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 para aprender cómo ejecutar javascript en Visual Studio Code. Si tienes cualquier duda, no dudes en dejármela en los comentarios.
¡Hasta la próxima!
alvaro marzola says:
Necesito saber en javasceript done veo los resultados de la operación
Iker Ruiz Pou says:
Hola Álvaro,
Próximamente haremos un artículo explicando paso a paso lo que nos pides. ¡Muchas gracias por leer el artículo y por la idea para futuros textos!