• Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
817
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
9
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Antes de começar...
  • 2. > typeof NaN === "number" true >
  • 3. > "1" == 1 true > "1" === 1 false >
  • 4. > typeof [] 'object' > Object.prototype.toString.call([]) '[object Array]'
  • 5. Tipos dinâmicos
  • 6. Tipos fracos Tipos dinâmicos
  • 7. Tipos fracos Tipos dinâmicos Orientado a protótipos
  • 8. Tipos fracos Tipos dinâmicos Orientado a protótipos Não tem classes
  • 9. Tipos fracos Tipos dinâmicos Orientado a protótipos Não tem classes Não tem interfaces
  • 10. Tipos fracos Tipos dinâmicos Orientado a protótipos Não tem classes Não tem interfaces Não tem packages
  • 11. Tipos fracos Tipos dinâmicos Orientado a protótipos Não tem classes Não tem interfaces Não tem packages Não tem contexto Private
  • 12. Tipos fracos Tipos dinâmicos Orientado a protótipos Não tem classes Não tem interfaces Não tem packages Não tem contexto Private Não tem contexto Protected
  • 13. Não tem métodos
  • 14. ECMA 262, 3rd Edition, December 1999), página 2 (4.2): "An ECMAScript object is an unordered collection of properties each with zero or more attributes..."
  • 15. ECMA 262, 3rd Edition, December 1999), página 2 (4.2): "... and a method is a function associated with an object via a property. "
  • 16. ECMA 262, 5.1 Edition, June 2011), página 2 (4.2): "… A function that is associated with an object via a property is a method . "
  • 17. ECMA 262, 5.1 Edition, June 2011), página 2 (4.2): "… A function that is associated with an object via a property is a method . " ECMA 262, 3rd Edition, December 1999), página 2 (4.2): "... and a method is a function associated with an object via a property. "
  • 18. Objeto Literal > var objeto = { ... propriedade: "Propriedade" ... } > objeto { propriedade: 'Propriedade' } >
  • 19. Objeto Literal > var objeto = { ... propriedade: "Propriedade" ... } > objeto { propriedade: 'Propriedade' } > JSON?
  • 20. Tudo é objeto? > 1.0.toString(); '1' >
  • 21. Tudo é objeto? > 1.toString(); ...
  • 22. Tudo é objeto?
  • 23. Feita em 10 dias
  • 24. https://twitter.com/#!/diveintomark/status/112607722704343040
  • 25. Como se divertir com uma linguagem dessas?
  • 26. Combinando Programação funcional e Orientação a Objetos em Javascript de forma prática e divertida @cmilfont Beaga JS Beozonte 2012
  • 27. Minimalismo e Simplicidade
  • 28. > var empresa = { ... denominacaoSocial: "Milfont Evil Corp" ... } > empresa.cnpj === "9999999999999" } false >
  • 29. > var empresa = { ... denominacaoSocial: "Milfont Evil Corp" ... } > empresa.cnpj === "9999999999999" } false > empresa.endereco.sede === "Capitolio" TypeError: Cannot read property 'sede' of undefined
  • 30. > if(empresa.endereco && empresa.endereco.sede && empresa.endereco.sede.numero === "Capitolio")
  • 31. ruby-1.8.7-p330 :012 > empresa.try(:endereco).try(:sede) => nil ruby-1.8.7-p330 :012 > empresa.try(:endereco).try(:sede) == "teste" => false
  • 32. > Object.prototype.try = function(){}; > empresa.try("empresa.endereco.sede.numero");
  • 33. > Object. prototype .try = function(){}; > empresa.try("empresa.endereco.sede.numero");
  • 34. Object.defineProperty(Object.prototype, "try", { value: function(){} } );
  • 35. Object. defineProperty (Object.prototype, "try", { value: function(){} } );
  • 36. Problemas de Extender built-in https://github.com/kriskowal/es5-shim
  • 37. Object.defineProperty(Object.prototype, "try", { value: function(){} } );
  • 38. Object.defineProperty(Object.prototype, " try ", { value: function(){} } );
  • 39. Object.defineProperty(Object.prototype, "try ing ", { value: function(){} } );
  • 40. var markup = &quot;<div id=&quot;&quot; + id + &quot;&quot;> </div>&quot;;
  • 41. markup = &quot;<div id=&quot; #{id} &quot;> </div>&quot;;
  • 42. var markup = &quot;<div id=&quot; #{id} &quot;> </div>&quot;;
  • 43. Object.defineProperty(String.prototype, 'interpolate', { enumerable: false , value: function (values, pattern) { var pattrn = pattern || /#{([^}]+)}/g ; return this .replace(pattrn, function (match, value){ var result = values[value]; return (result)? result: &quot;&quot;; }); } });
  • 44. https://github.com/documentcloud/underscore
  • 45. DRY
  • 46. var empresa = { nome: $(&quot;input#nome&quot;) , endereco: $(&quot;input#endereco&quot;) }); jQuery.ajax({ data : empresa, cache : false, dataType : 'json', error : error, contentType : &quot;application/json&quot;, headers : {&quot;Content-Type&quot;:&quot;application/json&quot;, &quot;Accept&quot;:&quot;application/json&quot;}, success : callback, type : &quot;POST&quot;, url : &quot;/empresas&quot; });
  • 47. var empresa = { nome: $(&quot;input#nome&quot;) , endereco: $(&quot;input#endereco&quot;) }); jQuery.ajax({ data : empresa, cache : false, dataType : 'json', error : error, contentType : &quot;application/json&quot;, headers : {&quot;Content-Type&quot;:&quot;application/json&quot;, &quot;Accept&quot;:&quot;application/json&quot;}, success : callback, type : &quot; POST &quot;, url : &quot; /empresas &quot; });
  • 48. class EmpresasController < ApplicationController end jQuery.ajax({ data : empresa, type : &quot; POST &quot;, url : &quot; /empresas &quot; });
  • 49. class EmpresasController < ApplicationController end rake routes POST /empresas(.:format) {:action=>&quot;create&quot;, :controller=>&quot;empresas&quot;} jQuery.ajax({ data : empresa, type : &quot; POST &quot;, url : &quot; /empresas &quot; });
  • 50. class EmpresasController < ApplicationController end rake routes POST /empresas (.:format) {:action=>&quot; create &quot;, :controller=>&quot; empresas &quot;} jQuery.ajax({ data : empresa, type : &quot; POST &quot;, url : &quot; /empresas &quot; });
  • 51. class EmpresasController < ApplicationController end rake routes POST /empresas (.:format) {:action=>&quot; create &quot;, :controller=>&quot; empresas &quot;} var empresas = new EmpresasController empresas. create ( empresa , callback) jQuery.ajax({ data : empresa, type : &quot; POST &quot;, url : &quot; /empresas &quot; });
  • 52. var empresa = { nome: $(&quot;input#nome&quot;) , endereco: $(&quot;input#endereco&quot;) }); jQuery.ajax({ data : empresa, cache : false, dataType : 'json', error : error, contentType : &quot;application/json&quot;, headers : {&quot;Content-Type&quot;:&quot;application/json&quot;, &quot;Accept&quot;:&quot;application/json&quot;}, success : callback, type : &quot;POST&quot;, url : &quot;/empresas&quot; });
  • 53. var empresa = { nome: $(&quot;input#nome&quot;) , endereco: $(&quot;input#endereco&quot;) }); var empresas = new EmpresasController empresas. create ( empresa , callback)
  • 54. var empresas = new EmpresasController empresas. create ( empresa , callback); function EmpresasController() { this.create = function(){}; }
  • 55. var empresas = new EmpresasController empresas. create ( empresa , callback); var Interface = { this.routes = { action : { url: &quot;/controller&quot; , method: &quot;POST&quot; } };
  • 56. var empresas = new EmpresasController empresas. create ( empresa , callback); function EmpresasController() { this.create = function(){}; } var Interface = { this.routes = { action : { url: &quot;/controller&quot; , method: &quot;POST&quot; } };
  • 57. var empresas = new EmpresasController empresas. create ( empresa , callback); function EmpresasController() { } EmpresasController. prototype = DJR; var Interface = { this.routes = { action : { url: &quot;/controller&quot; , method: &quot;POST&quot; } };
  • 58. function EmpresasController() { } EmpresasController. prototype = DJR;
  • 59. function EmpresasController() { DJR.call(this); }
  • 60. function EmpresasController() { this.useDJR = DJR; this.userDJR(); }
  • 61. function EmpresasController() { DJR.call(this); } var InterfaceDJR = function(){ this.routes = { create : { url: &quot;/controller&quot; , method: &quot;POST&quot; } } }; EmpresasController.prototype = InterfaceDJR;
  • 62. function EmpresasController() { DJR.call(this); } var DJR = function() { this .ajax = function(object, callback, error, method, url, params) { jQuery.ajax({ context : self, data : object, cache : false, dataType : 'json', error : error, success : callback, type : method, url : url }); }; };
  • 63. var DJR = function() { this.ajax = function(action, args) { var json = args[0]; var callback = args[1]; $.ajax({ url: this.route[action].url, type: this.route[action].method, data: JSON.stringify(json) }); } this. __noSuchMethod__ = function(){ this.ajax(arguments[0], arguments[1]); } };
  • 64. var DJR = function() { }; DJR.algumMetodo = function(){}; DJR['algumMetodo'] = function(){};
  • 65. var DJR = function() { this.ajax = function(action, args) { } for (var action in this.route) { this[action] = function() { this.ajax(act,arguments); } }; };
  • 66.  
  • 67. var DJR = function() { this.ajax = function(action, args) { } for (var action in this.route) { this[action] = function( act ){ return function() { this.ajax(act,arguments); } } (action) ; }; };
  • 68. var empresa = { nome: $(&quot;input#nome&quot;) , endereco: $(&quot;input#endereco&quot;) }); var empresas = new EmpresasController empresas. create ( empresa , callback)
  • 69. var empresa = $(&quot;form#empresas&quot;).getJSON() ; var empresas = new EmpresasController empresas. create ( empresa , callback)
  • 70. sammy.post('#empresas', function() { var empresa = $(&quot;form#empresas&quot;).getJSON() ; new EmpresasController() . create ( empresa , callback) });
  • 71. var valorDosDebitos = lancamento.partidas .filter(function(partida){ return partida.natureza === Partida.DEBITO; }).map(function(partida){ return partida.valor; }).reduce(function(previousValue, currentValue, index, array){ return previousValue + currentValue; }, 0);
  • 72. https://github.com/milfont
  • 73. http://www.egenial.pro/pt/extjs