Ir al contenido principal

Primer programa en JS: Hola Mundo

El primer ‘Hola Mundo’ no es bonito, no es útil, no hace nada… pero te hace sentir como un verdadero programador.

En este capítulo, último del bloque introductorio, vamos a agrupar varias partes que hemos ido viendo en capítulos anteriores para escribir nuestro primer programa en JS, un sencillo Hola Mundo que imprimirá por pantalla la cadena de texto "Hola, mundo!"

El objetivo del capítulo es escribir el programa anterior usando VSCode y ejecutarlo con el runtime Node.JS.

El objeto console

Para imprimir una cadena de texto por pantalla en JS necesitamos utilizar el objeto global console y, de los métodos que este objeto expone, el método log.

Si acudimos a la referencia online de JS acerca del objeto console, veremos que nos advierte de que "Las implementaciones del API console puede variar dependiendo del runtime" ("Implementations of the console API may differ between runtimes").

Puesto que vamos a usar como runtime Node.JS, debemos acudir a la referencia online de la clase Console en nodejs.org, y específicamente de su método log, para conocer cómo utilizarlo correctamente.

Sé que estos últimos párrafos han sido un tanto plasta, pero es fundamental que, como programador de JS sobre Node.JS, te habitúes a acceder a la referencia online tanto del lenguaje de programación como del runtime a utilizar o de ambos, como en este caso.

Volviendo al tema que nos ocupa, la referencia en nodejs.org puede considerarse como cero didáctica para aquellos que comienzan en JS, y trata de abarcar mucho en poco espacio. De hecho el ejemplo de uso del método log no es precisamente de demasiada utilidad para lo que queremos hacer en este capítulo.

Para tratar de arrojar algo de luz a la ayuda, te diré que el método log acepta un primer argumento que se imprime por pantalla. Chin pun.

// console.log imprime la cadena 
// "Hola, mundo!" por pantalla 
console.log("Hola, mundo!")

"Hola mundo" en VSCode

Como dijimos en el capítulo dedicado a VSCode, es más que buena idea crear una estructura de directorios clara donde ir guardando nuestro código en general y el código de este curso en particular. Para ello propusimos una estructura de directorios como esta:

// Jeararquía de directorios sugerida
  dev
  |_ js
    |_ aprendiendo-JS
       |_ 01
          |_ holaMundo
  

Así pues, y dando por hecho que el directorio dev/js/aprendiendo-JS/01/holaMundo ya existe, seguimos estos pasos

  1. Desde VSCode, acceder a la opción "Abrir carpeta..." del menú "Archivo" y abrir nuestro directorio holaMundo.
  2. Crear un nuevo archivo en el directorio abierto, bien a través de la opción "Nuevo archivo..." del menú "Archivo" o con el click derecho sobre la ventana del explorador.
  3. Llamar al archivo index.js. Si bien el nombre sugerido (index) es opcional y puedes llamarlo como quieras, la extensión debe ser obligatoriamente js, ya que VSCode va a considerar el código contenido en el archivo como JS en base a ella (dicho lo cual, te diré que por consenso el archivo principal de un programa en JS suele llamarse index.js)
  4. Añadir al archivo la línea necesaria para imprimir "Hola, mundo!" por pantalla: console.log("Hola, mundo!"). Puedes, opcionalmente, agregar tantos comentarios como quieras prefijándolos por los caracteres // (un comentario es una línea de código en JS ignorada por el runtime)
  5. Guarda los cambios a través de la opción "Guardar" del menú "Archivo".

El proceso anterior se muestra en el siguiente vídeo:

"Hola mundo" con Node.JS

Ya tenemos nuestro programa guardado, es hora de ejecutarlo con el runtime Node.JS utilizando el comando node en un terminal de VSCode

Un terminal de VSCode no es más que un shell de sistema. Podemos abrirlo (si no lo está ya) de distintas formas:

  • A través de la opción "Nuevo terminal" del menú "Terminal"
  • A través de la muy útil paleta de comandos, en la parte superior central de la pantalla, tecleando ">Terminal: Crear nuevo terminal" (Es necesario comenzar el comando con el caracter ">")

Una vez el terminal abierto, estaremos en el mismo directorio donde se encuentra nuestro archivo index.js. Para ejecutar nuestro código usando el runtime Node.JS, ejecutar el comando:

node index.js

Puesto que index.js es el nombre por defecto para el punto de entrada de cualquier programa escrito en JS, podemos también ejecutar nuestro programa simplemente escribiendo:

node .

Puedes ver el proceso completo en el siguiente vídeo:

VSCode soporta un método de ejecución de código JS con el runtime Node.JS mucho más integrado que el expuesto, y que básicamente ha sido llamar desde el shell a node y pedirle que ejecute un archivo .js, algo muy rudimentario y para lo que ni siquiera hace falta VSCode, ya que podríamos perfectamente haberlo hecho desde un terminal del sistema.

Sin embargo, por el momento no voy a ir más allá de lo expuesto. Abordaremos la ejecución y depuración de código JS desde VSCode en próximos capítulos (no te sientas frustrado, conozco no pocos programadores senior de JS que no van más allá del método de ejecución que hemos utilizado).

Objetivos conseguidos

En este último capítulo del bloque introductorio has aprendido, o revisado, cómo crear un sencillísimo programa en JS utilizando VSCode y cómo ejecutarlo utilizando el runtime Node.JS. Para ello, entre otras cosas, has accedido tanto a la referencia online de JS como de Node.JS.

Próximos pasos

VSCode y Node.JS son la base sobre la que vamos a desarrollar este curso, y ahora que hemos completado este bloque estás preparado para comenzar aprendiendo la sintáxis del lenguaje JS, algo que vamos a abordar en el próximo bloque Sintáxis Básica.