Antes de começar...
> typeof NaN === "number" true >
> "1" == 1 true > "1" === 1 false >
> typeof [] 'object' > Object.prototype.toString.call([]) '[object Array]'
Tipos dinâmicos
Tipos fracos Tipos dinâmicos
Tipos fracos Tipos dinâmicos Orientado a protótipos
Tipos fracos Tipos dinâmicos Orientado a protótipos Não tem classes
Tipos fracos Tipos dinâmicos Orientado a protótipos Não tem classes Não tem interfaces
Tipos fracos Tipos dinâmicos Orientado a protótipos Não tem classes Não tem interfaces Não tem packages
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
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
Não tem métodos
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..."
ECMA 262, 3rd Edition, December 1999), página 2 (4.2): "...  and a method is a function associated with an object via a property. "
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, 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. "
Objeto Literal > var objeto = { ... propriedade: "Propriedade" ... } > objeto { propriedade:  'Propriedade'  } >
Objeto Literal > var objeto = { ... propriedade: "Propriedade" ... } > objeto { propriedade:  'Propriedade'  } > JSON?
Tudo é objeto? > 1.0.toString(); '1' >
Tudo é objeto? > 1.toString(); ...
Tudo é objeto?
Feita em 10 dias
https://twitter.com/#!/diveintomark/status/112607722704343040
Como se divertir com uma linguagem dessas?
Combinando Programação funcional e Orientação a Objetos em Javascript de forma prática e divertida @cmilfont Beaga JS Beozonte 2012
Minimalismo e Simplicidade
> var empresa = { ... denominacaoSocial:  "Milfont Evil Corp" ... } > empresa.cnpj ===  "9999999999999"  } false >
> var empresa = { ... denominacaoSocial:  "Milfont Evil Corp" ... } > empresa.cnpj ===  "9999999999999"  } false > empresa.endereco.sede === "Capitolio" TypeError: Cannot read property 'sede' of undefined
> if(empresa.endereco &&  empresa.endereco.sede &&  empresa.endereco.sede.numero === "Capitolio")
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
> Object.prototype.try = function(){}; > empresa.try("empresa.endereco.sede.numero");
> Object. prototype .try = function(){}; > empresa.try("empresa.endereco.sede.numero");
Object.defineProperty(Object.prototype,  "try",  { value: function(){} } );
Object. defineProperty (Object.prototype,  "try",  { value: function(){} } );
Problemas de Extender built-in https://github.com/kriskowal/es5-shim
Object.defineProperty(Object.prototype,  "try",  { value: function(){} } );
Object.defineProperty(Object.prototype,  " try ",  { value: function(){} } );
Object.defineProperty(Object.prototype,  "try ing ",  { value: function(){} } );
var markup = &quot;<div id=\&quot;&quot;  +  id  +  &quot;\&quot;> </div>&quot;;
markup = &quot;<div id=\&quot; #{id} \&quot;> </div>&quot;;
var  markup = &quot;<div id=\&quot; #{id} \&quot;> </div>&quot;;
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;; }); } });
https://github.com/documentcloud/underscore
DRY
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; });
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; });
class   EmpresasController   <   ApplicationController end jQuery.ajax({  data  : empresa, type  : &quot; POST &quot;, url  : &quot; /empresas &quot; });
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; });
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; });
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; });
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; });
var empresa = { nome:   $(&quot;input#nome&quot;) , endereco:   $(&quot;input#endereco&quot;) }); var empresas = new  EmpresasController empresas. create ( empresa , callback)
var empresas = new  EmpresasController empresas. create ( empresa , callback); function EmpresasController() { this.create = function(){}; }
var empresas = new  EmpresasController empresas. create ( empresa , callback); var Interface = { this.routes = { action : { url:  &quot;/controller&quot; , method:  &quot;POST&quot; } };
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; } };
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; } };
function EmpresasController() { } EmpresasController. prototype  = DJR;
function EmpresasController() { DJR.call(this); }
function EmpresasController() { this.useDJR = DJR; this.userDJR(); }
function EmpresasController() { DJR.call(this); } var InterfaceDJR = function(){ this.routes = { create : { url:  &quot;/controller&quot; , method:  &quot;POST&quot; } } }; EmpresasController.prototype = InterfaceDJR;
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 }); }; };
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]); } };
var DJR = function() { }; DJR.algumMetodo = function(){}; DJR['algumMetodo'] = function(){};
var DJR = function() { this.ajax = function(action, args) {  } for (var action in this.route) { this[action] = function() { this.ajax(act,arguments); } }; };
 
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) ; }; };
var empresa = { nome:   $(&quot;input#nome&quot;) , endereco:   $(&quot;input#endereco&quot;) }); var empresas = new  EmpresasController empresas. create ( empresa , callback)
var empresa =  $(&quot;form#empresas&quot;).getJSON() ; var empresas = new  EmpresasController empresas. create ( empresa , callback)
sammy.post('#empresas', function() { var empresa =  $(&quot;form#empresas&quot;).getJSON() ; new  EmpresasController() . create ( empresa , callback) });
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);
https://github.com/milfont
http://www.egenial.pro/pt/extjs

Beagajs

  • 1.
  • 2.
    > typeof NaN=== &quot;number&quot; true >
  • 3.
    > &quot;1&quot; ==1 true > &quot;1&quot; === 1 false >
  • 4.
    > typeof []'object' > Object.prototype.toString.call([]) '[object Array]'
  • 5.
  • 6.
  • 7.
    Tipos fracos Tiposdinâmicos Orientado a protótipos
  • 8.
    Tipos fracos Tiposdinâmicos Orientado a protótipos Não tem classes
  • 9.
    Tipos fracos Tiposdinâmicos Orientado a protótipos Não tem classes Não tem interfaces
  • 10.
    Tipos fracos Tiposdinâmicos Orientado a protótipos Não tem classes Não tem interfaces Não tem packages
  • 11.
    Tipos fracos Tiposdinâ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 Tiposdinâ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.
  • 14.
    ECMA 262, 3rdEdition, December 1999), página 2 (4.2): &quot;An ECMAScript object is an unordered collection of properties each with zero or more attributes...&quot;
  • 15.
    ECMA 262, 3rdEdition, December 1999), página 2 (4.2): &quot;... and a method is a function associated with an object via a property. &quot;
  • 16.
    ECMA 262, 5.1Edition, June 2011), página 2 (4.2): &quot;… A function that is associated with an object via a property is a method . &quot;
  • 17.
    ECMA 262, 5.1Edition, June 2011), página 2 (4.2): &quot;… A function that is associated with an object via a property is a method . &quot; ECMA 262, 3rd Edition, December 1999), página 2 (4.2): &quot;... and a method is a function associated with an object via a property. &quot;
  • 18.
    Objeto Literal >var objeto = { ... propriedade: &quot;Propriedade&quot; ... } > objeto { propriedade: 'Propriedade' } >
  • 19.
    Objeto Literal >var objeto = { ... propriedade: &quot;Propriedade&quot; ... } > objeto { propriedade: 'Propriedade' } > JSON?
  • 20.
    Tudo é objeto?> 1.0.toString(); '1' >
  • 21.
    Tudo é objeto?> 1.toString(); ...
  • 22.
  • 23.
  • 24.
  • 25.
    Como se divertircom uma linguagem dessas?
  • 26.
    Combinando Programação funcionale Orientação a Objetos em Javascript de forma prática e divertida @cmilfont Beaga JS Beozonte 2012
  • 27.
  • 28.
    > var empresa= { ... denominacaoSocial: &quot;Milfont Evil Corp&quot; ... } > empresa.cnpj === &quot;9999999999999&quot; } false >
  • 29.
    > var empresa= { ... denominacaoSocial: &quot;Milfont Evil Corp&quot; ... } > empresa.cnpj === &quot;9999999999999&quot; } false > empresa.endereco.sede === &quot;Capitolio&quot; TypeError: Cannot read property 'sede' of undefined
  • 30.
    > if(empresa.endereco && empresa.endereco.sede && empresa.endereco.sede.numero === &quot;Capitolio&quot;)
  • 31.
    ruby-1.8.7-p330 :012 >empresa.try(:endereco).try(:sede) => nil ruby-1.8.7-p330 :012 > empresa.try(:endereco).try(:sede) == &quot;teste&quot; => false
  • 32.
    > Object.prototype.try =function(){}; > empresa.try(&quot;empresa.endereco.sede.numero&quot;);
  • 33.
    > Object. prototype.try = function(){}; > empresa.try(&quot;empresa.endereco.sede.numero&quot;);
  • 34.
  • 35.
    Object. defineProperty (Object.prototype, &quot;try&quot;, { value: function(){} } );
  • 36.
    Problemas de Extenderbuilt-in https://github.com/kriskowal/es5-shim
  • 37.
  • 38.
    Object.defineProperty(Object.prototype, &quot;try &quot;, { value: function(){} } );
  • 39.
    Object.defineProperty(Object.prototype, &quot;trying &quot;, { value: function(){} } );
  • 40.
    var markup =&quot;<div id=\&quot;&quot; + id + &quot;\&quot;> </div>&quot;;
  • 41.
    markup = &quot;<divid=\&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.
  • 45.
  • 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.
  • 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.
  • 73.