CoffeeScript


This is a brief overview and example of how CoffeeScript works
To see the original documentation go to http://coffeescript.org

My working example is
http://glynrob.com/examples/coffeescript/index.html

which can be downloaded at
https://github.com/glynrob/coffeescript

How CoffeeScript works:
CoffeeScript is a little language that compiles into JavaScript.
This is to reduce the amount of code that you write reducing possible errors and can even speed up your code.

Using the .coffee file extension, CoffeeScript compiles your code into valid javascript

square = (x) -> x * x

compiles to

Running CoffeeScript

Node.js is required to compile the css file

Windows Installer
http://nodejs.org/
then install stylus in command Prompt
npm install -g coffee-script
Then to compile your JS file you go to the location of your .coffee file and run
coffee --watch --compile main.coffee

Linux or Mac Compiler
Either use a pre-compiled binary if one is available, otherwise compile it yourself http://nodejs.org/
install stylus
npm install -g coffee-script
Then to compile your JS file you go to the location of your .coffee file and run
coffee --watch --compile main.coffee

This will now automatically compile your CoffeeScript to valid javascript everytime you make a change.

HTML Code

Your html is as you normally would build your page.
My example just creates a seperate button for each function call which you can see from my example

I have also added a CSS file to help with the design and included jQuery to help with identifying click events.

jQuery

If you wish to use jQuery in your code like I have, you need to identify the jQuery document ready function.

Comments

Assignment

setNumber = 42

These are for all the variables that you assign to your javascript file.

Strings with variables

result = "Assigned Number is #{setNumber}"

A clean way to insert any javascript variables into your string.

Multiline strings

result = "Assigned Number is #{setNumber}
which is a value set in the
main.coffee file"

In normal javascript you can not keep on adding text on multiple lines. With CoffeeScript, you can.

Conditions

Using IF statements are very similar, just no need for braces or semicolons

biggerThan50 = if setNumber > 50 then 'Yes' else 'No'
alert biggerThan50

Switch

As you can see, less code is needed to write a switch statement

Try / Catch / Finally

Function

divideByTwo = (x) -> x / 2
alert divideByTwo(12)

Array

list = [1, 2, 3, 4, 5]
alert list

Object

Loops

list = [1, 2, 3, 4, 5]
totalval = 0
totalval += value for value in list when value isnt 3
alert totalval

Slicing

list = [1, 2, 3, 4, 5]
alert list[1..3]

Splicing

list = [1, 2, 3, 4, 5]
alert list[3..]

Splats

Take note of the at the end of the array.

Classes, Inheritance, and Super

Classes gives you allot of power to OOP your javascript to seriously reduce the amount of code that you write and maintain easily

So you commit and push your code updates live.
As simple as that.

As you can see, you can do allot with less code when using CoffeeScript

Post navigation

Leave a Reply

Your email address will not be published. Required fields are marked *