Professional Documents
Culture Documents
Introduction To CoffeeScript
Introduction To CoffeeScript
Stalin
CoffeeScript
in Rails
jQuery
with CoffeeScript
COFFEESCRIPT
Its just JavaScript
CoffeeScript
What is CoffeeScript Why CoffeeScript Types, Variables, Operators , Expressions and Statements Control flow Arrays, Objects and loops Functions Object Orientation Error handling
WHAT IS COFFEESCRIPT.?
Introduction to CoffeeScript
What is CoffeeScript?
Coffee
script is a little language that compiles to JavaScript The golden rule of the CoffeeScript is: "it is just a JavaScript". The code compiles one-to-one into the equivalent There is no interpretation at run time
WHY COFFEESCRIPT?
Introduction to CoffeeScript
Why CoffeeScript?
CoffeeScript
repairs many of the confusing and cumbersome aspects of JavaScript, while keeping its underlying flexibility and beauty It is an attempt to expose the good part of the JavaScript in a simple way It won't bother about semicolons and braces
Why CoffeeScript?
CoffeeScript compiles into JavaScript, Least amount of code to solve problems Readable and Understandable Easy to Maintain
Types
In CoffeeScript , every value has a type, which determines the kind of role it can play. There are six basic type of values: Numbers Strings Booleans Objects Functions Undefined values
quotes CoffeeScript implements both single and double quoted strings. Double quoted strings can contain interpolated values, small snippets of code between #{ and }.
lengthy string can be folded into multiple lines in the program but the lines breaks will not be shown in the output. Ex: CS: The string is folded to more than one line JS: The string is folded to more than one line
CoffeeScript has triple quoted strings known as 'heredoc' to have multiple line strings with line breaks and alignments. Ex: CS: The string is folded to more than one line JS: The string is folded \n to more than one line
Variables
It
provides a thing called 'variable' to retrieve and store the value A variable has a name and it pointing to a value Assigning a value to a variable name with = operator creates a variable Declaration is not needed. var a is reserved word
Variables
Limitations on variable name: Name can be a word, but it can't have spaces Cant start with digits $ and _ can be used in names $_$ is a valid variable name
Operators
It supports all the generic arithmetic, logic and unary operators. Apart from that it provides the following new operators CoffeeScript ==, is !=, isnt not and or true, yes, on false, no, off JavaScript === !== ! && || true false
How do we check to see that a variable isnt defined and isnt null?
Set a variable to Zero unless previously set Only call function if it exists (in Ruby try() )
cupsOfCoffee ?= 0
vehicle.start_engine?().shift_gear?()
Expression
In CoffeeScript program, a piece of code that produces a value is called Expression. Every value is an expression ( such as 12, 'apple'). Ex: i = i + 2
Statements
A program is formed by a sequence of one or more statements. A statement will have internal components (e.g., expressions). In CoffeeScript, Most of the statements end with new line Also can end with semicolon If we want to have multiple statements in a same line, we can use semicolons to separate statements.
CONTROL FLOWS
Introduction to CoffeeScript
Control flow
The control-flow of a language specify the order in which computations are performed. Already we know the most common control-flow constructions such as if, if/else, unless and switch In CoffeeScript, Conditional statements can be written without the parenthesis and brackets Multi-line conditionals are delimited by indentation. Ex: CS: if a is 10 and b is 20 alert condition true JS: if(a === 10 && b === 20) { alert(condition true); }
Control flow
A handy postfix form, with the if or unless at the end Ex: CS: addCaffeine() if not Decaf() addCaffeine() unless Decaf() There is no explicit ternary statement in CoffeeScript. But we can imitate using if then else.. Ex: CS: if age < 18 then alert 'Under age' else alert 'of age'
Arrays
CoffeeScript
provides a special kind of object called Array. It has a collection of data in it length property contains the amount of values in the array New arrays can be created using brackets ([ and ]) Ex: storeLocations = ['Orlando', 'Winter Park', 'Sanford']
Arrays
Commas between elements are optional, whey there are placed in separate lines Ex: CS: storeLocations = [ 'Orlando' 'Winter Park' 'Sanford ]
Ranges also create arrays Ex: CS: range = [1..4] JS: var range = [1, 2, 3, 4]
Arrays
Numbering Subsets
Ex: range = [1..4] # => [1, 2, 3, 4] range[0..2] # => [1, 2, 3] range[1range.length] # => [2, 3,4] range[1..-1] # => [2, 3, 4]
Arrays: Loops
forEach Ex: CS: storeLocations = ['Orlando', 'Winter Park', 'Sanford'] storeLocations.forEach (location, index) -> alert "Location: #{location}
Arrays: Loops
In CoffeeScript, loops can be written as expression in shorter form for .. in Ex: storeLocations = ("#{loc}, FL" for loc in storeLocations) for .. in .. when # like filter Ex: geoLocate(loc) for loc in storeLocations when loc isnt 'Sanford
Objects
Objects are list of keys and values ( hash ) Ex: cat = { colour: 'grey, name: 'Spot }
Curly braces are optional Ex: cat = colour: 'grey, name: 'Spot
Commas optional, when separated by lines Ex: cat = colour: 'grey name: 'Spot
Objects
Must be careful with indenting Ex: CS: cat = colour: 'grey name: 'Spot
Objects: Loops
for .. of .. Ex: CS: mailArchive = 0: (mail number 1)' 1: '(mail number 2)' 2: '(mail number 3)'
FUNCTIONS
Introduction to CoffeeScript
Functions: JS
Functions: CS
We
use only function expressions 1 tab or 2 space indented -> converts to function(){ Always has the return value Ex: coffee = -> confirm "Ready for some Coffee?"
Functions: CS
Function
parameters
arguments will be placed before ->
Function
parameters
Functions: CS
Function definition coffee = -> Function calling coffee()
coffee(Test) coffee(Test, 2)
coffee Test, 2
Functions: CS
Invoking Ex: a) searchLocations 'Starducks', 'Orlando b) searchLocations 'Starducks', 'Orlando', 'Winter Park c) params = ['Starducks', 'Orlando', 'Winter Park'] searchLocations(params...)
OBJECT ORIENTATIONS
Introduction to CoffeeScript
ERROR HANDLING
Introduction to CoffeeScript
COFFEESCRIPT IN RAILS
Introduction to CoffeeScript
CoffeeScript in Rails
It has been included in Rails 3.1 To change a JavaScript file to a CoffeeScript one we just have to append .coffee to the file name. When a CoffeeScript file is requested, it is processed by the processor provided by CoffeeScript
jQuery(function($) { function changeTab(e) { e.preventDefault(); $("#tabs li a.active").removeClass("active"); $(this).addClass("active"); } $("#tabs ul li a").click(changeTab); });
$ -> changeTab = (e) -> e.preventDefault() $("#tabs li a.active").removeClass("active") $(@).addClass("active") $("#tabs ul li a").click(changeTab)
REFERENCES
Introduction to CoffeeScript
References
http://coffeescript.org/ http://autotelicum.github.com/SmoothCoffeeScript/