Coffee Script

371 views

Published on

Fast introduction to Coffee Script, a valid alternative to Java Script.

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

  • Be the first to like this

No Downloads
Views
Total views
371
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Coffee Script

  1. 1. JavaScript “bien hecho” Yeray Darias CoffeeScript
  2. 2. ydarias@gmail.com developerscookbook.blogspot.com ydarias
  3. 3. Antes de CoffeeScript fue JavaScript Un poco de historia reciente
  4. 4. Finales del año 1994 ...
  5. 5. En el año 1995 ... Brendan Eich idea y programa 10Días Mochaen apenas
  6. 6. Mocha LiveScript JavaScript
  7. 7. Allá por el año 1997 ...
  8. 8. A principios del 2000 ... JavaScript tenía algunos amigos pero noeramuypopular
  9. 9. En la actualidad ... JavaScript está en todas partes
  10. 10. Javascript
  11. 11. ¿Qué demonios es CoffeeScript? Pongamonos en situación
  12. 12. Es una idea que tuvo
  13. 13. “CoffeeScript it’s just JavaScript”
  14. 14. CoffeeScript es un lenguaje de programación que “genera” JavaScript
  15. 15. JavaScriptWTFs
  16. 16. Douglas Crockford JavaScript The good parts
  17. 17. Global variables CoffeeScriptsolved!
  18. 18. var message = “hola”;! ! function saluda() {! return message;! } var message = “adios”;! ! function despidete() {! return message;! } Global variables Si ambos ficheros están “cargados”, ¿Cuál es la salida esperada en cada función?
  19. 19. Global variables CoffeeScript no crea variables globales de forma implícita (function() {! var message, saluda;! ! message = "hola";! ! saluda = function() {! return message;! };! }).call(this); message = "hola"! ! saluda = () -> ! message
  20. 20. Scopes
  21. 21. Scopes Todas las variables en una función se declaran al principio (function() {! var message, saluda;! ! message = "hola";! ! saluda = function() {! return message;! };! }).call(this); message = "hola"! ! saluda = () -> ! message
  22. 22. Semicolons CoffeeScriptsolved!
  23. 23. Semicolons CoffeeScript autocompleta los ; (function() {! var message, saluda;! ! message = "hola";! ! saluda = function() {! return message;! };! }).call(this); message = "hola"! ! saluda = () -> ! message
  24. 24. Reserved words CoffeeScriptsolved!
  25. 25. Reserved words CoffeeScript escapa las palabras reservadas automáticamente var myObject;! ! myObject = {! "case": 'keyword',! tutu: 'allowed name'! }; myObject = ! case: 'keyword'! tutu: 'allowed name'
  26. 26. typeof
  27. 27. Equality comparisons CoffeeScriptsolved!
  28. 28. Equality comparisons CoffeeScript siempre usa los operadores como ===, !==, ... var testFunction;! ! testFunction = function(input) {! if (input === 'string') {! 'string';! ! }! if (input === 9) {! return 'number nine';! }! }; testFunction = (input) -> ! if (input == 'string')! 'string'! if (input == 9)! 'number nine'
  29. 29. eval()
  30. 30. continue
  31. 31. switch fall through CoffeeScriptsolved!
  32. 32. switch fall through Bond = (input) -> ! switch input! when 'Sean Connery', 'Daniel Craig'! 'Fucking crack'! when 'Roger Moore'! 'A bit boring' var Bond;! ! Bond = function(input) {! switch (input) {! case 'Sean Connery':! case 'Daniel Craig':! return 'Fucking crack';! case 'Roger Moore':! return 'A bit boring';! }! };! Todas las opciones acaban con un return
  33. 33. Global variables Scopes Semicolons Reserved words typeof Equality comparison eval() continue Switch fall through
  34. 34. CoffeeScript“fabrica” bloques JavaScript
  35. 35. Control de flujo mood = greatlyImproved if singing! ! if happy and knowsIt! clapsHands()! else! showIt()! ! date = if friday then sue else jill! ! isToday = yes unless yesterday or tomorrow! ! // -----------------------------------------------------! ! cholesterol = 127! ! healthy = 200 > cholesterol > 60! Chained comparisons Everything a expression
  36. 36. Control de flujo Bond = (input) -> ! switch input! when 'Sean Connery', 'Daniel Craig'! 'Fucking crack'! when 'Roger Moore'! 'A bit boring'! else! 'No comments'
  37. 37. Bucles # Health conscious meal.! foods = ['broccoli', 'spinach', 'chocolate']! eat food for food in foods when food isnt 'chocolate'! ! countdown = (num for num in [10..1])! ! # Econ 101! if this.studyingEconomics! buy() while supply > demand! sell() until supply > demand! ! while age < 18! canNotSmoke()! canNotDrink()
  38. 38. Funciones square = (x) -> x * x! cube = (x) -> square(x) * x! ! fill = (container, liquid = "coffee") ->! "Filling the #{container} with #{liquid}..."! ! // --------------------------------------------------! ! awardMedals = (first, second, others...) ->! gold = first! silver = second! rest = others! ! ! Splats String interpolation
  39. 39. Operators & aliases CoffeeScript JavaScript is === isnt !== not ! and && or || true, yes, on true false, no, off false @, this this of in in no JS equivalent
  40. 40. ‘The’ operator ? es el operador existencial en CoffeeScript
  41. 41. Clases class Animal! constructor: (@name) ->! ! move: (meters) ->! alert @name + " moved #{meters}m."! ! class Snake extends Animal! move: ->! alert "Slithering..."! super 5! ! class Horse extends Animal! move: ->! alert "Galloping..."! super 45
  42. 42. Clases ! ! sam = new Snake "Sammy the Python"! tom = new Horse "Tommy the Palomino"! ! sam.move()! tom.move()!
  43. 43. Function binding Account = (customer, cart) ->! @customer = customer! @cart = cart! ! $('.shopping_cart').bind 'click', (event) =>! @customer.purchase @cart! ! var Account;! ! Account = function(customer, cart) {! var _this = this;! this.customer = customer;! this.cart = cart;! return $('.shopping_cart').bind('click', function(event) {! return _this.customer.purchase(_this.cart);! });! };!
  44. 44. Ahoratocaprogramar

×