Hello World CoffeeScript Example

Posted in Tutorials

“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 …

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 …

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 …

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

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/

 

---