Hello World CoffeeScript Example

Posted in Tutorials

Tweet This Share on Facebook Bookmark on Delicious Digg this Submit to Reddit

“Hello World” is a typical beginner programming tutorial.  In this tutorial, we create a “Hello World” example using CoffeeScript.  CoffeeScript is a higher level syntax that compiles to produce Javascript which then runs in the browser and do things.  In our example, the thing that it will do is to display the words “Hello World”.  Example is on Windows.

1.  First we have to have coffeescript installed.   On way is to install node.js and and then use npm to install coffeescript.   The details of doing this is provided in the links mentioned.

2.  Create a project folder to do our work.  We created a new folder at c:\tutorials\coffeescript-example\

3. Confirm that coffeescript is installed by typing …

coffeescript version

coffeescript version

This will display the coffeescript version, which in our case is 1.63.

4. In that folder, create a file named “helloworld.coffee” with the following content …

first coffeescript

first coffeescript

Note that unlike Javascript, semi-colons are not used at end of line in coffeescript.

5.  Now we want to compile this coffeescript file into javascript by running …

compile coffeescript

compile coffeescript

No error message means that all went well and you should see the following helloworld.js file produced in the same directory…

js output

js output

6. If you change helloworld.coffee, you will have to recompile in order to get an updated helloworld.js.

7.  But if you tell coffee to watch for changes in helloworld.coffee file by …

coffee -w -c helloworld.coffee

then coffee will wait and watch and not return back to command prompt unless you do Ctrl-C.

8.  Now create subfolders “coffeescript” and “js” and run …

coffee -w -o js/ -c coffeescript/

then whenever you put or change coffeescript files within the coffeescript folder, it will output the corresponding javascript file in the “js” folder.

Interestingly, the output param must come first.  The following does not work (at least in this version)…

coffee -w -c coffeescript/ -o js/