![Variable
You don’t have o declare it before using it.
lang = ["php", "python", "perl", "ruby"]
name = "Eddie"
# coffeescript
var lang, name;
lang = ["php", "python", "perl", "ruby"];
name = "Eddie";
// javascript](https://image.slidesharecdn.com/coffeescript-111113220729-phpapp02/75/CoffeeScript-37-2048.jpg)
![Array
heroes = [
'Spider Man',
'Capain America',
'X-men',
'Iron Man'
]
students = [1..10]
eachers = [1...10] # coffeescript
var heroes, students, eachers;
heroes = ['Spider Man', 'Capain America', 'X-men', 'Iron Man'];
students = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
eachers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
// javascript](https://image.slidesharecdn.com/coffeescript-111113220729-phpapp02/75/CoffeeScript-40-2048.jpg)
![Array
heroes[0..2]
heroes[1..2] = ["Batman", "ThunderCat"]
# coffeescript
heroes.slice(0, 3);
var _ref;
[].splice.apply(heroes, [1, 2].concat(_ref = ["Batman", "ThunderCat"])), _ref;
// javascript](https://image.slidesharecdn.com/coffeescript-111113220729-phpapp02/75/CoffeeScript-41-2048.jpg)
![Loop
alert i for i in [1..10] var i, _sep;
for (i = 1; i <= 10; i++) {
alert(i);
}
alert i for i in [1..10] when i for (i = 1; i <= 10; i++) {
% 2 == 0 if (i % 2 === 0) {
alert(i);
}
}
alert i for i in [1..10] by 2 for (i = 1, _sep = 2; i <= 10; i +=
_sep) {
alert(i);
}
alert i * 2 for i in [1..10] for (i = 1; i <= 10; i++) {
alert(i * 2);
# coffeescript } // javascript](https://image.slidesharecdn.com/coffeescript-111113220729-phpapp02/75/CoffeeScript-46-2048.jpg)
Uploaded byEddie Kao
CoffeeScript
CoffeeScript is a programming language that compiles to JavaScript. It adds syntactic sugar that makes JavaScript easier to write. CoffeeScript code is written with Python/Ruby-inspired syntax and without using curly braces, semicolons, or parentheses. It supports features like classes, object-oriented programming, functions and loops. CoffeeScript code is compiled to equivalent JavaScript code, allowing it to run on any browser or JavaScript runtime.
More Related Content
CoffeeScript
- 1. CoffeeScript a better way to write javascrip photo by SixRevisions
- 3. You can getthis slide on www.eddie.com.tw/slides
- 4.
- 5. I’m a Flashguy. photo by JD Hancock
- 6. a.k.a Eddie orAquarianboy Live and work in Taipei, Taiwan. Serving in my own little tiny company. Flash / AS3 / Ruby / Rails / Python programming for living. A little bit Objective-C for personal inerests. Technical Education and Consulant. PTT Flash BM (since 2007/4). Adobe Certificaed Flash Developer (Since 2006/7). Linux Professional Institue Certification (Since 2005/3). photo by Eddie
- 7. or just googleme with keyword " "
- 8. JavaScript becomes hugely popular. 9th on TIOBE, Nov 2011 photo by gr3m
- 9. JavaScript seems photo by apple apple easy..
- 10. But it’s not easy owrie good JavaScript code. photo by Marcus Q
- 11. Today, I won'tell you.. You should give up the way you did
- 12. I am goingo ell you.. Maybe you have a better way to do with this
- 13.
- 14. We’re not alking about this kind of coffee. photo by Nick Humphries
- 15.
- 16. CoffeeScript is JavaScript just written with different syntax
- 17. ..exposes the goodparats of JavaScript in a simple way.
- 18. Synax borrowed from Python and Ruby. I love Python & Ruby
- 19. ..and will becompiled ino JavaScript code.
- 20. ..that doesn’t meanyou can have no knowledge about JavaScript.
- 21. CoffeeScript is notused o replace JavaScript.
- 22. Let’s get ourfeet wet! photo by jlhopes
- 23. Insall photo by Daniel Dionne
- 24. Requirements You need oinsall some software first.. Node.js > git clone git://github.com/joyent/node.git > cd node > ./configure > make > sudo make insall
- 25. Requirements You need oinsall some software first.. NPM, the “node package manager” > curl http://npmjs.org/insall.sh | sh
- 26. Insall CoffeeScript CoffeeScript > npm insall coffee-script > coffee -v CoffeeScript version 1.1.3 http://blog.eddie.com.w/2011/08/03/install-coffeescrip/
- 27. How o use photo by roboppy
- 28. Usage Compile *.coffee ino*.js Compile > coffee --wach --compile app.coffee http://blog.eddie.com.w/2011/08/03/how-to-use-coffeescrip-compiler/
- 29. Synax photo by zigazou76
- 30. } } } }
- 31. No { } indenationsrule! whitespace matters!
- 32. ( ) isnot necessary.
- 33.
- 34. Return is notnecessary. everything is an expression
- 35. No { },(), and ; if(age > 20){ voe(); } // javascript if age > 20 voe() # coffeescript
- 36.
- 37. Variable You don’t haveo declare it before using it. lang = ["php", "python", "perl", "ruby"] name = "Eddie" # coffeescript var lang, name; lang = ["php", "python", "perl", "ruby"]; name = "Eddie"; // javascript
- 38. Function say_hello = (guest1,guest2 = "Nayumi") -> "Hello #{guest1} and #{guest2}" say_hello "Eddie" # coffeescript var say_hello; say_hello = function(guest1, guest2) { if (guest2 == null) { guest2 = "Nayumi"; } return "Hello " + guest1 + " and " + guest2; }; say_hello("Eddie"); // javascript
- 39.
- 40. Array heroes = [ 'Spider Man', 'Capain America', 'X-men', 'Iron Man' ] students = [1..10] eachers = [1...10] # coffeescript var heroes, students, eachers; heroes = ['Spider Man', 'Capain America', 'X-men', 'Iron Man']; students = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; eachers = [1, 2, 3, 4, 5, 6, 7, 8, 9]; // javascript
- 41. Array heroes[0..2] heroes[1..2] = ["Batman","ThunderCat"] # coffeescript heroes.slice(0, 3); var _ref; [].splice.apply(heroes, [1, 2].concat(_ref = ["Batman", "ThunderCat"])), _ref; // javascript
- 42.
- 43. Object eddie = {name: "Eddie Kao", age: 18, speciality: "eat" } # coffeescript var eddie; eddie = { name: "Eddie Kao", age: 18, speciality: "eat" }; // javascript
- 44. Object eddie = var eddie; name: "Eddie Kao" eddie = { age: 18 name: "Eddie Kao", lovers: age: 18, nayumi: lovers: { name: "Nayumi Hung" nayumi: { age: 18 name: "Nayumi Hung", mary: age: 18 name: "Mary Bloody" }, age: 20 mary: { name: "Mary Bloody", age: 20 } } }; # coffeescript // javascript
- 45.
- 46. Loop alert i fori in [1..10] var i, _sep; for (i = 1; i <= 10; i++) { alert(i); } alert i for i in [1..10] when i for (i = 1; i <= 10; i++) { % 2 == 0 if (i % 2 === 0) { alert(i); } } alert i for i in [1..10] by 2 for (i = 1, _sep = 2; i <= 10; i += _sep) { alert(i); } alert i * 2 for i in [1..10] for (i = 1; i <= 10; i++) { alert(i * 2); # coffeescript } // javascript
- 47.
- 48. Modifier You can put"if", "unless", "while", "until" behind if (age > 20) { voe(); } // javascript voe() if age > 20 # coffeescript
- 49.
- 50. Synactic Sugar wrie morereadable code by using synactic sugar. # coffeescript // javascript is === isnt !== true, on, yes true false, off, no false not ! and && or || unless if not until while not of in
- 51. Synactic Sugar alert "Ican't see anything" if light is off alert "It's impossible!" if eddie isnt handsome if girl is not single alert "Don't Touch! Be Careful!" # coffeescript if (light === false) { alert("I can't see anything"); } if (eddie !== handsome) { alert("It's impossible!"); } if (girl === !single) { alert("Don't Touch! Be Careful!"); } // javascript
- 52. Synactic Sugar if(Answer === true) { alert("I'll marry you!"); } // javascript alert "I'll marry you!" if Answer is yes
- 53. Synactic Sugar age ?=18 # coffeescript if (typeof age !== "undefined" && age !== null) { age; } else { age = 18; }; // javascript
- 54. Raw JavaScript If youstill prefer the original way
- 55. Raw JavaScript say_hello =`function(name){ return "Hello, " + name }` # coffeescript var say_hello; say_hello = function(name){ return "Hello, " + name }; // javascript
- 56.
- 57. OOP - new classAnimal construcor: (name, age) -> this.name = name this.age = age animal = new Animal("eddie", 18) alert animal # coffeescript var Animal, animal; Animal = (function() { function Animal(name, age) { this.name = name; this.age = age; } return Animal; })(); animal = new Animal("eddie", 18); alert(animal); // javascript
- 58. OOP - method classAnimal construcor: (@name, @age) -> say_hello: (something) -> console.log "Hello, #{something}" animal = new Animal("eddie", 18) animal.say_hello("CoffeeScript") # coffeescript var Animal, animal; Animal = (function() { function Animal(name, age) { this.name = name; this.age = age; } Animal.prootype.say_hello = function(something) { return console.log("Hello, " + something); }; return Animal; })(); animal = new Animal("eddie", 18); // javascript animal.say_hello("CoffeeScript");
- 59. OOP - inheriance classAnimal construcor: (@name, @age) -> say_hello: (something) -> alert "Hello, #{something}" class Human exends Animal walk: -> alert "I can walk with my foots!" eddie = new Human("eddie", 18) eddie.say_hello "CoffeeScript" eddie.walk() # coffeescript TL; DR // javascript
- 60. References Websies: http://jashkenas.github.com/coffee-scrip/ http://blog.eddie.com.w/category/coffeescrip/ Book: http://pragprog.com/book/tbcoffee/coffeescrip
- 61. the good parts photoby Steve Ganz I love
- 62. I Love.. Coding Style I love Python & Ruby, of course :)
- 63. I Love.. Indenation!
- 64. I Love.. Anonymous function No global function and variable by default
- 65. I Love.. String Inerpolation sorry, but string building really sucks :)
- 66. I Love.. List Comprehension
- 67. I Love.. Synactic Sugar
- 68. I Love.. English-like grammar alert "of course it is!" if PHPConf is awesome
- 69. I Love.. Comparison & Equality "true" == true // true "true" === true // false
- 70. I Love.. Works with other JS frameworks well. Because it’s just JavaScrip
- 71. I Love.. Compilation JSLint Approved
- 72.
- 73. CoffeeScript compiler is writenin CoffeeScript.
- 74.
- 75.
- 76. Immature? photo by theseanster93
- 77. Performance? photo by chr1sl4i photo by theseanster93
- 78. CoffeeScript Means Giving Upon JavaScript?
- 79. Learn JavaScript, andUse CoffeeScript.
- 80. Any Question? photo by jamuraa
- 81. Conacts Websie http://www.eddie.com.tw Blog http://blog.eddie.com.tw Plurk http://www.plurk.com/aquarianboy Facebook http://www.facebook.com/eddiekao Google Plus http://www.eddie.com.tw/+ Twiter https://twiter.com/#!/eddiekao Email eddie@digik.com.tw Mobile +886-928-617-687 photo by Eddie