Saltar al contenido

¿Cómo Utilizar CoffeeScript?

5 junio, 2019

¡Bienvenido! En este post te enseñaremos la manera más sencilla para aprender a utilizar CoffeeScript en pocos minutos.  Primero comenzaremos mostrando cómo es el proceso de instalación y al final terminaremos con varios ejemplos para que veas lo sencillo que es este lenguaje.

Cómo Instalar CoffeeScript

Para aprender a utilizar CoffeeScript en pocos minutos, primero debemos prestar mucha atención todo el proceso de instalación y de sus requisitos. En este apartado te enseñaremos todo lo que necesitas saber en cuanto a comandos básicos para lograr ejecutar ciertos programas.

  • Primero que nada debes descargar e instalar la herramienta Node.js. Ésta nos permitirá tener acceso a un gestor de paquetes que se llama “npm” para así poder instalar rápidamente el ambiente de CoffeeScript. Para este tutorial usaremos la versión para Windows de Node.js
  • Luego que hayamos instalado la versión apropiada de Node.js te recomendamos realizar una prueba para saber si la instalación se realizó correctamente. Para ello, debes ejecutar el comando que te mostraremos a continuación:

node         -v

  • Posteriormente, ahora si tenemos que proceder a instalar CoffeeScript. Anteriormente también había que instalar el gestor de paquetes npm de forma adicional, pero en las versiones más nuevas ya viene incluido. Por lo tanto en este caso solo tenemos que ingresar el siguiente comando:

npm install -g coffee-script

  • Entonces, podemos ver que al colocar “-g” significa que la instalación es global. El objetivo de este aspecto radica en la posibilidad de tener completamente CoffeeScript en nuestro sistema. Luego al ejecutar el comando va a demorar varios segundos mientras procede a descargar todos los elementos necesarios.
  • Posteriormente, cuando haya terminado la descarga, ya puedes ejecutar en la consola el siguiente comando para corroborar que la instalación fue exitosa y sin ningún tipo de error

Coffee –v

  • Al terminar este paso ya hemos terminado el proceso de instalación de CoffeeScript en nuestro equipo de forma satisfactoria. Pero adicionalmente también instalamos correctamente la herramienta Node.js que nos será de gran utilidad de cara al futuro.

Procedimiento para Elaborar  Nuestro Primer Programa

 Una vez que lograste instalar correctamente CoffeeScript, ahora te enseñaremos todo lo que debes hacer para crear tu primer programa.

  • El primer paso es muy sencillo, solo tienes que iniciar la consola de CoffeeScript. Para hacer esto, solo debes ingresar a la consola de tu sistema operativo en el cual está instalado CoffeeScript y luego procede a tipear la palabra “Coffee”.
  • Seguidamente, debes ingresar un código para iniciar a utilizar este nuevo lenguaje de programación. Primero debes declarar una variable, entonces debes colocar el nombre de dicha variable seguida de un signo de igualdad y su contenido. A continuación te presentamos el siguiente ejemplo:

saludo = “ Mundo”

  • A continuación debes presionar la tecla “Enter” para luego comenzar a elaborar toda una cadena de texto dentro de la cual hay que colocar una variable. Para esto, simplemente ingresa el símbolo “#” y escribe el nombre de la variable entre 2 llaves de la siguiente manera:

“Hola!  #{saludo}!”

  • Para terminar el proceso debes presionar la tecla “Enter” nuevamente y así podremos ver nuestro mensaje “Hola! Mundo” en la consola.

¿Cómo Compilar los Archivos en CoffeeScript?

Para realizar este proceso necesitarás descargar adicionalmente “Sublime text”, el cual es un editor de texto altamente recomendado. Sin embargo, puedes utilizar cualquier otro editor de texto. El hecho de compilar archivos es un paso importante para aprender a utilizar CoffeeScript en pocos minutos.

A continuación te mostraremos las indicaciones que debes seguir para compilar los archivos en CoffeeScript.

  • Para llevar a cabo el primer paso debes crear un archivo con el nombre “ejemplo1.coffee” y dentro de dicho archivo puedes ingresar un mensaje como contenido:

Alert “Bienvenido!”

  • A continuación, para compilar este archivo solo tienes que ejecutar el siguiente comando:

Coffee –c ejemplo1.coffee

  • Por último, se va a crear un archivo con la extensión “.js” que en este caso se va a llamar ejemplo1.js

Básicamente,  al saber compilar podremos usar nuestro código en una página web rápidamente y sin complicaciones. De lo contrario, el archivo .coffee no será interpretado por ningún navegador.  A continuación te mostraremos el procedimiento a realizar:

  • Para comenzar tienes que crear un archivo html el cual va a llamarse “ejemplo2.html” y dentro de éste debes hacer un enlace al archivo “ejemplo2.js”. Para ello, ingresa el siguiente código:

<!DOCTYPE html><html lang=”es”><head> <meta charset=”UTF-8″> <title>Nuestra aplicación con CoffeeScript</title></head><body> <h1>Estamos utilizando <span id=”lenguaje”>JavaScript</span> </h1> <script src=”ejemplo2.js”></script></body></html>

  • Luego debes compilar y refrescar el HTML del paso explicado anteriormente.
  • Posteriormente notarás que cambio la palabra del final del título, ahora si tienes que modificar el archivo coffee de nuevo. Para ello tienes que colocar CoffeeScript y así los cambios se reflejarán sin tener que compilar todo otra vez. A continuación ingresa el siguiente comando:

coffee –c

  • Ahora, con el paso anterior ya realizado, debes refrescar los .js que hayan sufrido cambios según los archivos .coffee.
  • Para finalizar, cuando actualices el archivo HTML podrás observar la manera en que se reflejan los cambios realizados en el código.

¡Listo! Esta ha sido toda la información importante que debes tener a mano para aprender a utilizar CoffeeScript en pocos minutos.