This presentation is an HTML5 website
Presentation template from http://html5rocks.com/
Press PgDn to advance.
AltR runs your code.
Ctrl1 toggles the JS panel.
You can watch the full presentation here:
Asbjørn Sloth Tønnesen
based on a presentation by Bodil Stokke
Inventor of JavaScript,
one dark and stormy week in 1995
function plus_two(n) { result = n + 2; return result; }
with
block
var foo = 5; with (obj) foo; // 5, unless obj.foo exists
23 == "23"; // yes, of course a number is the same as a string
typeof NaN => "number"
Inventor of Lisp, 1958
Co-inventor of C, 1973
Inventor of C++, 1983
Inventor of Python, 1991
Inventor of Java, 1995
Inventor of JavaScript, 1995
Inventor of C#, 2001
Inventor of Perl, 1987
Discovered the Good Parts, 2008
ReferenceError
with
statement no longer exists.Inventor of Node.JS
server.listen(function(request, response) { database.open(function(connection) { connection.query("SELECT * FROM posts", function(cursor) { cursor.fetchAll(function(posts) { response.write(posts.forEach(function(post) { return post.title; })); }); }); }); }); // wtf
Inventor of CoffeeScript, 2009
Inventor of CoffeeScript, 2009
Inventor of CoffeeScript, 2009
Oh, all right then.
if (name != "honey badger") { care() } else { eat_cobra() }becomes
if name != "honey badger" care() else eat_cobra()Obvious, right?
var sum = function(a, b) { return a + b; }
sum = (a, b) -> a + b
function(a, b)
becomes (a, b) ->
function()
becomes simply ->
return
is implied: a function always returns the value of its last expression.sum = (a, b) -> a + b sum(2, 3) # returns 5 sum 2, 3 # returns 5
connection.close() # calls the close function connection.close # returns the function, doesn't call it
foo = "bar" # compiles to: var foo; foo = "bar";
2 == "2" # compiles to: 2 === "2" # returns false, like you'd expect
with
statement.var tweet = { user: { name: "veridu", url: "https://veridu.com/" }, text: "PONIES RULE SO HARD" };
tweet = user: name: "veridu" url: "https://veridu.com/" text: "PONIES RULE SO HARD"
var things_that_rule = [ "robot unicorns", "honey badgers", "Lord Inglip" ];
things_that_rule = [ "robot unicorns" "honey badgers" "Lord Inglip" ]
sum_and_difference = (a, b) -> [ a + b, a - b] [ sum, difference ] = sum_and_difference 5, 2 sum # returns 7 difference # returns 3
if
if
statement:
if elvis.state == "alive" console.log "Hail to the King!" else console.log "You lie!"
if power_level > 9000 then attack() else despair()
reign_in_graceland() if name == "Elvis"
while
loopwhile count > 0 count -= 1
until
is like while not
:
until power_level > 9000 power_level += 1
if
:
power_level++ while power_level <= 9000
if
works like the ternary operator:
foo = false result = if foo then "foo is truthy" else "foo is falsy" # result is "foo is falsy"
while
returns an array:
counter = 0 list = while counter < 5 counter++ "n" + counter # list is [ 'n1', 'n2', 'n3', 'n4', 'n5' ]
switch
statements return something:
result = switch request.error_code when 200 then "OK" when 301 then "don't live here anymore" when 404 then "not found" when 500 then "i maed u a page... but i eated it" else "unknown error call the police " + request.error_code
if 20 < temperature < 30 venture_outside()
foo = { bar: "bar" } if foo?.bar then console.log foo.bar # if (foo != null && foo.bar) { ... }
pokemon = "Snorlax" console.log "Wild #{pokemon} appeared!" => "Wild Snorlax appeared!"
pokemon = "Snorlax" console.log "Wild #{pokemon.toUpperCase()} appeared!" => "Wild SNORLAX appeared!"
blurb = "I don't always drink beer, but when I do, I prefer Dos Equis." console.log blurb "I don't always drink beer, but when I do, I prefer Dos Equis."
html = """ <div class="article"> <h1>Honey Badger</h1> <p>Honey Badger don't care.</p> </div> """
numbers = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ] numbers[3..6] # [ 3, 4, 5, 6 ] numbers[7..] # [ 7, 8, 9 ] numbers[..3] # [ 0, 1, 2, 3 ]
numbers = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ] numbers[3..6] = [ "foo", "bar" ] numbers # [ 0, 1, 2, "foo", "bar", 7, 8, 9 ]
for
loopnumbers = [ 1, 2, 3, "many" ] for number in numbers console.log "I just counted to #{number}"
numbers = [ 1, 2, 3, "many" ] console.log "I just counted to #{number}" for number in numbers
numbers = [ 1..5 ] result = for number in numbers number + 1 result # [ 2, 3, 4, 5, 6 ]
Concise syntax for map and filter operations:
( expression for item in array ) ( expression for item in array when condition ) ( expression for key, value of object ) ( expression for key, value of object when condition )
Have you ever tried to make JavaScript act object oriented?
Shape = function(x, y) { this.x = x; this.y = y; }; Shape.prototype.centre = function() { return [ this.x, this.y ]; }; Shape.prototype.area = function() { return 0; }; var point = new Shape(13, 37);
<script type="text/javascript" src="coffee-script.js"></script> <script type="text/coffeescript" src="my.coffee"></script>
$ npm install coffee-script
var my_cs_module = require("./my_cs_module");
app/assets/javascripts/main.coffee
<script src="@routes.Assets.at("javascripts/main.js")"></script>
$ coffee -c my_script.coffee
Bodil Stokke
github.com/bodil
@bodiltv
Want slides? bodil.github.com/coffeescript