Coffeescript Tutorial
Coffeescript Tutorial
Audience
This tutorial has been prepared for beginners to help them understand the basic functionality of
CoffeeScript to build dynamic webpages and web applications.
Prerequisites
For this tutorial, it is assumed that the readers have a prior knowledge of HTML coding and
JavaScript. It would help if the reader has some prior exposure to object-oriented programming
concepts and a general idea on creating online applications.
Try the following example using the Try it option available at the top right corner of the below
sample code box −
All the content and graphics published in this e-book are the property of Tutorials Point (I) Pvt.
Ltd. The user of this e-book is prohibited to reuse, retain, copy, distribute or republish any
contents or a part of contents of this e-book in any manner without written consent of the
publisher.
We strive to update the contents of our website and tutorials as timely and as precisely as
possible, however, the contents may contain inaccuracies or errors. Tutorials Point (I) Pvt. Ltd.
provides no guarantee regarding the accuracy, timeliness or completeness of our website or its
contents including this tutorial. If you discover any errors on our website or in this tutorial,
please notify us at [email protected]
i
CoffeeScript
Table of Contents
About the Tutorial............................................................................................................................................... i
Audience ............................................................................................................................................................. i
Prerequisites ....................................................................................................................................................... i
Node.js............................................................................................................................................................... 4
ii
CoffeeScript
No Parentheses .................................................................................................................................................15
if Statement ......................................................................................................................................................47
list Comprehensions..........................................................................................................................................74
iv
CoffeeScript
charCodeAt Method..........................................................................................................................................95
lastIndexOf() Method........................................................................................................................................99
toLocaleUpperCase() method..........................................................................................................................112
toLowerCase() method....................................................................................................................................113
v
CoffeeScript
Arrays of Objects.............................................................................................................................................122
getDay() Method.............................................................................................................................................147
getMinutes() Method......................................................................................................................................151
getUTCFullYear() Method................................................................................................................................158
getUTCMonth() Method..................................................................................................................................162
getYear() Method............................................................................................................................................164
setHours() Method..........................................................................................................................................167
setUTCMinutes() Method................................................................................................................................179
vii
CoffeeScript
atan() Method.................................................................................................................................................198
cos() Method...................................................................................................................................................203
min() Method..................................................................................................................................................210
viii
CoffeeScript
heregex ...........................................................................................................................................................229
Instantiating a class.........................................................................................................................................231
Static Properties..............................................................................................................................................235
Inheritance......................................................................................................................................................236
Installation ......................................................................................................................................................247
Deleting Documents........................................................................................................................................254
Installation ......................................................................................................................................................256
ix
CoffeeScript
x
1. COFFEESCRIPT – OVERVIEW CoffeeScript
At present, JavaScript is the fastest mainstream dynamic language available, and it is known
as the lingua franca of the web. It is developed by Brendan Eich in the year of 1995 in 10
days.
Because of its effective features, JavaScript became popular and went global quickly. It was
there in lab for a very less time, which was not enough to polish the language. May be for
this reason, inspite of its good parts, JavaScript has a bunch of design errors and it bagged a
bad reputation of being a quirky language.
What is CoffeeScript ?
CoffeeScript is a lightweight language based on Ruby and Python which transcompiles
(compiles from one source language to another) into JavaScript. It provides better syntax
avoiding the quirky parts of JavaScript, still retaining the flexibility and beauty of the
language.
Advantages of CoffeeScript
Following are the advantages of CoffeeScript −
Write less do more − For a huge code in JavaScript, we need comparatively very
less number of lines of CoffeeScript.
No var keyword − There is no need to use the var keyword to create a variable in
CoffeeScript, thus we can avoid the accidental or unwanted scope deceleration.
11
CoffeeScript
History of CoffeeScript
CoffeeScript is developed by Jeremy Ashkenas. It was first committed in Git On
December 13, 2009.
In March 2010, the CoffeeScript compiler was replaced; this time instead of Ruby, they
used CoffeeScript itself.
And in the same year, CoffeeScript 1.0 was released and at the time of release, it was
one of the most wanted projects of the Git hub.
Limitations of CoffeeScript
Sensitive to whitespaces − CoffeeScript is very sensitive to whitespaces, so programmers
need to be very careful while providing indentations. If we do not maintain proper indentation,
the entire code may go wrong.
Step 1
Click on the following link www.tutorialspoint.com. You will be directed to the homepage of
our website.
Step 2
Click on the button named CODING GROUND that is located at the top right corner of the
homepage as highlighted in the snapshot given below.
12
CoffeeScript
Step 3
This will lead to our CODING GROUND section which provides online terminals and IDEs for
about 135 programming languages. Open CoffeeScript IDE in the Online IDEs section which
is shown in the following snapshot.
13
CoffeeScript
Step 4
If you paste your CoffeeScript code in main.coffee (You can change the file name) and click
the Preview button, then you can see the compiled JavaScript in the console as shown in the
following snapshot.
14
2. COFFEESCRIPT – ENVIRONMENT CoffeeScript
The Compiler of the latest versions of CoffeeScript is written in CoffeeScript itself. To run
CoffeeScript files in your system without a browser, you need a JavaScript runtime.
Node.js
Node.js is a JavaScript framework which is used to develop network server applications. It
also acts as a bridge between JavaScript and the Operating System.
Installing Node.js
Here are the steps to download and install Node.js in your system.
Step 1
Visit the nodejs homepage and download its stable version for windows by clicking on the
button hilighted in the snapshot given below.
15
CoffeeScript
Step 2
On clicking, a .msc file named node-v5.50-x64 will be downloaded into your system, run
the downloaded file to start the Node.js set-up. Here is the snapshot of the Welcome page of
No.js set-up wizard.
16
CoffeeScript
Step 3
Click on the Next button in the Welcome page of the Node.js set-up wizard which will lead
you to the End-user License Agreement page. Accept the license agreement and click on the
Next button as shown below.
17
CoffeeScript
Step 4
On the next page, you need to set the destination folder to the path where you want to install
Node.js. Change the path to the required folder and click on the Next button.
Step 5
In the Custom setup page, select the Node.js runtime to install node.exe file and click Next.
18
CoffeeScript
Step 6
Finally, click on the Install button which will start the Node.js installation.
19
CoffeeScript
Click on the Finish button of the Node.js set-up wizard as shown below to complete the Node.js
installation.
20
CoffeeScript
Installing CoffeeScript
Node.js provides you a command prompt (Node.js command prompt). You can install
CoffeeScript globally by entering the following command in it.
On executing the the above command, CoffeeScript will be installed in your system by
producing the following output
21
CoffeeScript
Verification
You can verify the installation of the CoffeeScript by typing the following command.
c:\> coffee -v
On successful installation, this command gives you the version of CoffeeScript as shown
below.
22
3. COFFEESCRIPT – COMMAND-LINE UTILITY CoffeeScript
You can see the list of options of the coffee command using its -h or --help option. Open
the Node.js command prompt and execute the following command in it.
c:\>coffee -help
This command gives you the list of various options of the coffee, along with the description
of the operation performed by each of them as shown below.
23
CoffeeScript
c:\>coffee -c filename.coffee
Example
Suppose there is a file in your system with the following CoffeeScript code which prints a
message on the console.
name = "Raju"
console.log "Hello"+name+" Welcome to Tutorilspoint"
Note − The console.log() function prints the given string on the consloe.
To compile the above code, save it in a file with the name sample.coffee. Open the Node.js
command prompt. Browse through the path where you have saved the file and compile it
using the -c option of the coffee command of the coffee command-line utility as shown
below.
On executing the above command, the CoffeeScript compiler compiles the given file
(sample.coffee) and saves it in the current location with a name sample.js as shown below.
If you open the sample.js file, you can observe the generated JavaScript as shown below.
24
CoffeeScript
(function() {
var name;
name = "Raju";
console.log("Hello " + name + " Welcome to Tutorilspoint");
}).call(this);
Example
For example, let us execute the sample.coffee file. For this, open the Node.js command
prompt. Browse through the path where you have saved the file and execute the file by
directly passing its name to the coffee command as shown below.
You can watch and compile a file simultaneously using the -wc option as shown below. When
we use this option, the file will be recompiled each time you make changes in your script.
Example
Suppose we have compiled a file named sample.coffee using the -wc option and we modified
the script thrice. Each time we change the script, the .coffee file is recompiled leaving the
Node.js command prompt as shown below.
25
CoffeeScript
Example
Let us save the JavaScript code of the sample.coffee file in a folder named data in the E drive
using the -o option by executing the following command in the command prompt.
Following is the snapshot of the given folder after executing the above command. Here you
can observe the JavaScript file of the sample.coffee
26
CoffeeScript
c:\>coffee -p file_name
Example
For example, you can print the compiled JavaScript code of the sample.coffee file on the
console using the -p option as shown below.
Using this shell, we can assign values to variables, create functions, and evaluate results. As
shown in the following screenshot, if we call functions in REPL, it prints the value of the
27
CoffeeScript
function. If we give an expression to it, it evaluates and prints the result of the expression.
And if we simply type the statements in it, it prints the value of the last statement.
In RPEL, you can access multiple line mode by pressing ctrl+v where you can evaluate the
code with multiple lines (like functions) and you can get back to REPL mode from it by
pressing ctrl+v again. Here is an example usage of the multi line mode.
<script src="http://jashkenas.github.com/coffee-script/extras/coffee-script.js"
type="text/javascript" charset="utf-8"></script>
<script type="text/coffeescript">
# Some CoffeeScript
</script>
28
CoffeeScript
But for this, we have to import the library in each application and the CoffeeScript code will
be interpreted line by line before the output is shown. This will slow down your applications,
therefore this approach is not recommended.
Therefore, to use CoffeeScript in your applications, you need to pre-compile them using the
Coffee command-line utility and then you can use the generated JavaScript in your
applications.
29
CoffeeScript
30