Quick coffeescript

4,835 views

Published on

This is a quick 15 minute presentation, abridged from the CodeSchool "a sip of CoffeeScript" presentation. I'm using it to show to co-workers.

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
4,835
On SlideShare
0
From Embeds
0
Number of Embeds
4,091
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Quick coffeescript

    1. 1. 15 mins of CoffeeScript CoffeeScript: Something to flame-war about ;) Based on “a sip of CoffeeScript”
    2. 2. What is CoffeeScript?• Compiles to JavaScript• 1:1 mapping of “ideas”• The compilation doesn’t “think”
    3. 3. What’s it look like?!
    4. 4. Variables, Parenthesis, Semicolonsmessage = "You folks like coffee?"alert message --becomes--var message;message = "You folks like coffee?";alert(message);
    5. 5. Function Declarations• JavaScript has two methods • function x() { alert(“hi”); } // named function • var x = function() { alert(“hi”); } // function expression• The last line of a CoffeeScript function is a return • (like Ruby)
    6. 6. CoffeeScript ONLY has function expressionscoffee = -> confirm "Are you ready to rock?" --becomes--var coffee;coffee = function() { return confirm("Are you ready torock?");};
    7. 7. Paramaters and Returnsdouble = (x) -> x * 2 --becomes--var double;double = function(x) { return x * 2;};
    8. 8. Calling Functions• Call functions with a comma separated list of params • funcName param1, param2, param3 • funcName(param1, param2, param3)• Parenthesis are optional, unless you have no arguments • funcName()
    9. 9. Optional Parameters!!!1double = (x = 2) -> x * 2alert double 6 --becomes--var double;double = function(x) { if (x == null) { x = 2; } return x * 2;};alert(double(6));
    10. 10. Control Statementsif age < 21 alert no beer for youalert no beer for you if age < 21if age < 21 then alert no beer for you --all become--if (age < 21) { alert(no beer for you);}
    11. 11. Chained Comparisonsif 2 < newLevel < 5 alert "between two and five" --becomes--if (2 < newLevel && newLevel < 5) { alert("between two and five");}
    12. 12. Existential Operatorsif cupsOfCoffee? alert it exists! --becomes--if (typeof cupsOfCoffee !== "undefined"&& cupsOfCoffee !== null) { alert(it exists!);}
    13. 13. More Existential Operatorsparent?.child?().grandchild() --becomes--if (typeof parent !== "undefined" &&parent !== null) { if (typeof parent.child === "function"){ parent.child().grandchild(); }}
    14. 14. Need IRL examples?$ -> someEvent = (e) -> e.preventDefault() $(a.active).removeClass active $(@).addClass active # note @ = this $(a).click someEvent --becomes--$(function() { var someEvent; someEvent = function(e) { e.preventDefault(); $(a.active).removeClass(active); return $(this).addClass(active); }; return $(a).click(someEvent);});
    15. 15. Advanced Sh*tto_print = for coffee, attrs of coffees when attrs.in_stock > 0 "#{coffee} has #{attrs.in_stock}"to_print.join ", " --becomes--var attrs, coffee, to_print;to_print = (function() { var _results; _results = []; for (coffee in coffees) { attrs = coffees[coffee]; if (attrs.in_stock > 0) { _results.push("" + coffee + " has " + attrs.in_stock); } } return _results;})();to_print.join(", ");
    16. 16. Downsides• You still need to learn JavaScript• It’s another language/layer to learn• Compilation step• Translation of script file lines to compiled output • http://bit.ly/NugARB for info about SourceMapping

    ×