JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                       Carlos Benitez (@etnassoft)	   ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                   Ind...
Introducción	  al	  lenguaje	  
JavaScript:	  Potenciando	  la	  web	  desde	  1995	  CaracterísCcas	  de	  lenguaje	  JavaScript:	       -­‐	  Interpreta...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                    Ca...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                   Car...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                            Tipado	  dinámico	  y	  co...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                  Cara...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                    Objetos	  en	  Jav...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                    Ob...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                    Objetos	  en	  Jav...
El	  JavaScript	  me	  confunde	  (O	  por	  qué	  JavaScript	  no	  2ene	  nada	  que	  ver	  con	  Java)	  
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                               El	  Ja...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
Buenas	  prácCcas	  y	  patrones	  (O	  cómo	  podemos	  aprovechar	  realmente	  JavaScript)	  
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                               Buenas	  prácCcas	  y	 ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                       Buenas	  prácCc...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                   Bue...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                          var	  a	  =	  {	            ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                 var	 ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                 var	 ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                 var	 ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                 var	 ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                     B...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                     B...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                     B...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                    Buenas	  prácCcas	...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                     B...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                Buenas...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                Buenas...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
JavaScript:	  Potenciando	  la	  web	  desde	  1995	                                                                      ...
Javascript: potenciando la web desde 1995
Javascript: potenciando la web desde 1995
Javascript: potenciando la web desde 1995
Javascript: potenciando la web desde 1995
Javascript: potenciando la web desde 1995
Javascript: potenciando la web desde 1995
Javascript: potenciando la web desde 1995
Javascript: potenciando la web desde 1995
Javascript: potenciando la web desde 1995
Javascript: potenciando la web desde 1995
Javascript: potenciando la web desde 1995
Javascript: potenciando la web desde 1995
Javascript: potenciando la web desde 1995
Javascript: potenciando la web desde 1995
Javascript: potenciando la web desde 1995
Javascript: potenciando la web desde 1995
Javascript: potenciando la web desde 1995
Javascript: potenciando la web desde 1995
Javascript: potenciando la web desde 1995
Javascript: potenciando la web desde 1995
Javascript: potenciando la web desde 1995
Javascript: potenciando la web desde 1995
Javascript: potenciando la web desde 1995
Javascript: potenciando la web desde 1995
Javascript: potenciando la web desde 1995
Javascript: potenciando la web desde 1995
Javascript: potenciando la web desde 1995
Javascript: potenciando la web desde 1995
Javascript: potenciando la web desde 1995
Javascript: potenciando la web desde 1995
Javascript: potenciando la web desde 1995
Javascript: potenciando la web desde 1995
Javascript: potenciando la web desde 1995
Javascript: potenciando la web desde 1995
Javascript: potenciando la web desde 1995
Javascript: potenciando la web desde 1995
Javascript: potenciando la web desde 1995
Javascript: potenciando la web desde 1995
Javascript: potenciando la web desde 1995
Javascript: potenciando la web desde 1995
Javascript: potenciando la web desde 1995
Javascript: potenciando la web desde 1995
Javascript: potenciando la web desde 1995
Javascript: potenciando la web desde 1995
Javascript: potenciando la web desde 1995
Javascript: potenciando la web desde 1995
Upcoming SlideShare
Loading in …5
×

Javascript: potenciando la web desde 1995

1,945
-1

Published on

Presentación de Carlos Benítez @etnassoft y Enrique Amodeo @eamodeorubio sobre Javascript para ADWE Madrid

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

No Downloads
Views
Total Views
1,945
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
27
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Javascript: potenciando la web desde 1995

  1. 1. JavaScript:  Potenciando  la  web  desde  1995   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  2. 2. JavaScript:  Potenciando  la  web  desde  1995   Indice   -­‐  Introducción  al  lenguaje   -­‐  El  JavaScript  me  confunde   -­‐   Buenas  prácCcas  y  patrones   -­‐   AJAX,  HIJAX,  SPI  y  otras  cosas  malas   -­‐   El  futuro  de  JavaScript   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  3. 3. Introducción  al  lenguaje  
  4. 4. JavaScript:  Potenciando  la  web  desde  1995  CaracterísCcas  de  lenguaje  JavaScript:   -­‐  Interpretado  (no  compilado)   -­‐  Lenguaje  de  ejecución  en  cliente   -­‐  Tipado  blando  (no-­‐Cpado)   -­‐  Orientado  a  objetos   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  5. 5. JavaScript:  Potenciando  la  web  desde  1995   CaracterísCcas  del  lenguaje  Lenguaje  Interpretado   -­‐  No  es  un  lenguaje  compilado   -­‐  Cada  instrucción  se  interpreta  en  Cempo  de  ejecución   -­‐  La  opCmización  del  código  se  realiza  durante  la  fase  de  diseño.   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  6. 6. JavaScript:  Potenciando  la  web  desde  1995   Lenguaje  Interpretado  Seguridad,  autoría  y  rendimiento   -­‐  El  código  aparece  tal  cual   -­‐  Compromete  la  seguridad  de  una  lógica  críCca   -­‐  A  mayor  tamaño  de  archivo,  mayor  Cempo  de  carga   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  7. 7. JavaScript:  Potenciando  la  web  desde  1995   Lenguaje  Interpretado  Soluciones  poco  afortunadas:   -­‐  Compresión  del  código:  JSMin   -­‐  Ofuscación:  YUI  Compressor,  Packer  Inconvenientes:   -­‐  Capa  muy  débil  de  seguridad   -­‐  Ilegibilidad  del  código  para  adaptarlo   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  8. 8. JavaScript:  Potenciando  la  web  desde  1995   Lenguaje  Interpretado  Herramientas  para  medir  la  calidad  del  soZware   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  9. 9. JavaScript:  Potenciando  la  web  desde  1995   Lenguaje  Interpretado  Herramientas  para  medir  la  calidad  del  soZware   Douglas  Crockford   Developers   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  10. 10. JavaScript:  Potenciando  la  web  desde  1995   CaracterísCcas  del  lenguaje  Tipado  blando,  dinámico  o  no-­‐Cpado   -­‐  Las  variables  se  declaran  sin  un  Cpo  de  datos  concreto   -­‐  De  hecho,  es  posible  no  declarar  variables  de  forma  explícita   -­‐  Los  Cpos  no  son  inalterables   -­‐  La  coerción  de  datos  interna  determina  el  manejo  de  los  datos.   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  11. 11. JavaScript:  Potenciando  la  web  desde  1995   Tipado  dinámico  y  coerción  de  datos  Tipado  blando,  dinámico  o  no-­‐Cpado   -­‐  Las  variables  se  declaran  sin  un  Cpo  de  Coerción  de  datos  interna   datos  concreto   -­‐  De  hecho,  es  posible  no  declarar  variables  de  forma  explícita   -­‐  Los  Cpos  no  son  inalterables   -­‐  La  coerción  de  datos  interna  determina  el  manejo  de  los  datos.   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  12. 12. JavaScript:  Potenciando  la  web  desde  1995   CaracterísCcas  del  lenguaje  Orientado  a  objetos   -­‐  Alto  nivel  de  abstracción   -­‐  No  implementa  el  concepto  de  clases   -­‐  Se  fundamenta  en  los  protoCpos   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  13. 13. JavaScript:  Potenciando  la  web  desde  1995   Objetos  en  JavaScript  Tipos  de  EnCdades  JavaScript   PRIMITIVAS   OBJETOS   -­‐  undefined   -­‐  null   -­‐  Todo  lo  demás   -­‐  booleanos   -­‐  cadenas   -­‐  números   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  14. 14. JavaScript:  Potenciando  la  web  desde  1995   Objetos  en  JavaScript  Tipos  de  EnCdades  JavaScript   PRIMITIVAS   OBJETOS   -­‐  undefined   -­‐  null   constructores   -­‐  Todo  lo  demás   -­‐  booleanos   -­‐  cadenas   -­‐  números   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  15. 15. JavaScript:  Potenciando  la  web  desde  1995   Objetos  en  JavaScript  Tipos  de  EnCdades  JavaScript   PRIMITIVAS   OBJETOS   -­‐  undefined   -­‐  null   constructores   -­‐  Todo  lo  demás   -­‐  booleanos   -­‐  cadenas   -­‐  números   String   Boolean   Number   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  16. 16. JavaScript:  Potenciando  la  web  desde  1995   Objetos  en  JavaScript  Tipos  de  EnCdades  JavaScript   PRIMITIVAS   OBJETOS   -­‐  undefined   -­‐  null   constructores   -­‐  Todo  lo  demás   -­‐  booleanos   -­‐  cadenas   -­‐  números   String   Boolean   Number   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  17. 17. JavaScript:  Potenciando  la  web  desde  1995   Objetos  en  JavaScript  Tipos  de  EnCdades  JavaScript   PRIMITIVAS   OBJETOS   -­‐  undefined   -­‐  Todo  lo  demás   -­‐  null   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  18. 18. El  JavaScript  me  confunde  (O  por  qué  JavaScript  no  2ene  nada  que  ver  con  Java)  
  19. 19. JavaScript:  Potenciando  la  web  desde  1995   El  JavaScript  me  confunde  -­‐  ECMAScript:  una  especificación  con  muchos  sabores   -­‐  JavaScript:  Netscape  Corp.     -­‐  AcConScript:  Macromedia   -­‐  JScript:  Internet  Explorer   -­‐  V8:  Google  Chrome   SpiderMonkey   -­‐  Mozillas  JavaScript:  Firefox   -­‐  Rhino  (Java)   TraceMonkey   -­‐  KJS  (KDE):  Conqueror   -­‐  JavaScriptCore:  Apple  Inc.   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  20. 20. JavaScript:  Potenciando  la  web  desde  1995   El  JavaScript  me  confunde  Objetos  abiertos   var  treintaYDos  =  new  Number(32);   treintaYDos.duplicar  =  funcNon(){          return  2  *  this;   };   alert(treintaYDos.duplicar()); Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  21. 21. JavaScript:  Potenciando  la  web  desde  1995   El  JavaScript  me  confunde  Objetos  abiertos   var  pepe  =  "      Pepetn";   String.prototype.trim  =  funcNon(){          return  this.replace(/^s+/g,  ).replace(/s+$/g,  );   };   alert(pepe.trim());   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  22. 22. JavaScript:  Potenciando  la  web  desde  1995   El  JavaScript  me  confunde  Scopes   var  defaultConfiguraNon  =  {          maxLives:  3,          level:  intermediate   };   var  play  =  funcNon(gameConfig){          var  configuraNon  =  gameConfig  ||  defaultConfiguraNon;          score  =  0;          //  ..  do  some  play   }; Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  23. 23. JavaScript:  Potenciando  la  web  desde  1995   El  JavaScript  me  confunde  Scopes   var  defaultConfiguraNon  =  {          maxLives:  3,          level:  intermediate   };   Global   var  play  =  funcNon(gameConfig){          var  configuraNon  =  gameConfig  ||  defaultConfiguraNon;          score  =  0;          //  ..  do  some  play   }; Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  24. 24. JavaScript:  Potenciando  la  web  desde  1995   El  JavaScript  me  confunde  Scopes   var  defaultConfiguraNon  =  {          maxLives:  3,          level:  intermediate   };   Local   var  play  =  funcNon(gameConfig){          var  configuraNon  =  gameConfig  ||  defaultConfiguraNon;          score  =  0;          //  ..  do  some  play   }; Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  25. 25. JavaScript:  Potenciando  la  web  desde  1995   El  JavaScript  me  confunde  Scopes   var  ratePlayer  =  funcNon(score){    if(score  ==  0){      var  isALoser  =  true;    }    return  isALoser;   }; No  problem  !   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  26. 26. JavaScript:  Potenciando  la  web  desde  1995   El  JavaScript  me  confunde  Closures   var  crearSaludo  =  funcNon(mensaje){          var  saludo  =  funcNon(porConsola){                  var  mensajeSaludo  =  mensaje  +  "  "  +  nombre;                  if  (porConsola)                            console.log(mensajeSaludo);                  else                            alert(mensajeSaludo);          };          mensaje  =  mensaje  ||  "Hola";          var  nombre  =  "Juan";          return  saludo;   };   var  quePasaJuan  =  crearSaludo("Que  pasa");   quePasaJuan(false);   var  holaJuan  =  crearSaludo();   holaJuan(true); Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  27. 27. JavaScript:  Potenciando  la  web  desde  1995   El  JavaScript  me  confunde  Closures   var  crearSaludo  =  funcNon(mensaje){          var  saludo  =  funcNon(porConsola){                  var  mensajeSaludo  =  mensaje  +  "  "  +  nombre;                  if  (porConsola)                            console.log(mensajeSaludo);                  else                            alert(mensajeSaludo);          };          mensaje  =  mensaje  ||  "Hola";          var  nombre  =  "Juan";          return  saludo;   };   var  quePasaJuan  =  crearSaludo("Que  pasa");   quePasaJuan(false);   var  holaJuan  =  crearSaludo();   holaJuan(true); Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  28. 28. JavaScript:  Potenciando  la  web  desde  1995   El  JavaScript  me  confunde  Closures   SCOPE  GLOBAL   …..   (CLOSURE)  crearSaludo   “mensaje”   “saludo”   “nombre”   (LOCAL)  saludo   “porConsola”   “mensajeSaludo”   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  29. 29. JavaScript:  Potenciando  la  web  desde  1995   El  JavaScript  me  confunde  Closures   SCOPE  GLOBAL   …..   (CLOSURE)  crearSaludo   “mensaje”   “saludo”   Or de “nombre”   n  d e  bú sq (LOCAL)  saludo   ue “porConsola”   da   “mensajeSaludo”   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  30. 30. JavaScript:  Potenciando  la  web  desde  1995   El  JavaScript  me  confunde  Closures   SCOPE  GLOBAL   …..   (CLOSURE)  crearSaludo   “mensaje”   “saludo”   Or de “nombre”   n  d e  búCuidado  con:   sq (LOCAL)  saludo  ✖ Excesivo  tamaño  de  scope   ue “porConsola”   da✖ Excesivo  numero  de  scopes     “mensajeSaludo”  anidados   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  31. 31. JavaScript:  Potenciando  la  web  desde  1995   El  JavaScript  me  confunde  Closures   var  crearSaludo  =  funcNon(mensaje){          var  saludo  =  funcNon(porConsola){                  var  mensajeSaludo  =  mensaje  +  "  "  +  nombre;                  if  (porConsola)                            console.log(mensajeSaludo);                  else                            alert(mensajeSaludo);          };          mensaje  =  mensaje  ||  "Hola";          var  nombre  =  "Juan";          return  saludo;   };   var  quePasaJuan  =  crearSaludo("Que  pasa");   quePasaJuan(false);   var  holaJuan  =  crearSaludo();   holaJuan(true); Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  32. 32. Buenas  prácCcas  y  patrones  (O  cómo  podemos  aprovechar  realmente  JavaScript)  
  33. 33. JavaScript:  Potenciando  la  web  desde  1995   Buenas  prácCcas  y  patrones  Patrones  de  Diseño  JavaScript   -­‐  Creacionales   -­‐  Estructurales   -­‐  Comportamiento   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  34. 34. JavaScript:  Potenciando  la  web  desde  1995   Buenas  prácCcas  y  patrones  Patrones  de  Diseño  Más  usuales   CREACIONALES   ESTRUCTURALES   COMPORTAMIENTO   Factory   Module   Iterator   Builder   Facade   Memento   Prototype   Proxy   Observer  /  Listener   Singleton   Decorator   Visitor   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  35. 35. JavaScript:  Potenciando  la  web  desde  1995   Buenas  prácCcas  y  patrones  ProtoNpos   -­‐  En  JavaScript,  no  implementa  clases,  sino  protoCpos   -­‐  Los  protoCpos  son  la  base  de  la  herencia  en  la  POO   -­‐  La  herencia  protospica  y  su  cadena   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  36. 36. JavaScript:  Potenciando  la  web  desde  1995   ProtoCpos   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  37. 37. JavaScript:  Potenciando  la  web  desde  1995   var  a  =  {    first  :  Hello,    second  :  World,  Herencia  Protohpica    sum  :  funcNon(x,  y){            return  x  +  y;    }   };   var  b  =  {    difference  :  funcNon(x,  y){            return  x  -­‐  y;        },        __proto__  :  a   };     var  c  =  {        product  :  funcNon(x,  y){          return  x  *  y;        },   Carlos Benitez (@etnassoft)      __proto__  :  a  Enrique Amodeo (@eamodeorubio) };  
  38. 38. JavaScript:  Potenciando  la  web  desde  1995   var  a  =  {    first  :  Hello,    second  :  World,   Herencia  Protohpica    sum  :  funcNon(x,  y){            return  x  +  y;    }   };   var  b  =  {    difference  :  funcNon(x,  y){            return  x  -­‐  y;        },  console.log(  a.sum(  4,  6  )  );  //  10        __proto__  :  a  console.log(  b.sum(  3,  2  )  );  //  5   };    console.log(  c.first  );  //  Hello   var  c  =  {        product  :  funcNon(x,  y){          return  x  *  y;        },   Carlos Benitez (@etnassoft)      __proto__  :  a  Enrique Amodeo (@eamodeorubio) };  
  39. 39. JavaScript:  Potenciando  la  web  desde  1995   var  a  =  {    first  :  Hello,    second  :  World,   Herencia  Protohpica    sum  :  funcNon(x,  y){            return  x  +  y;    }   };   var  b  =  {    difference  :  funcNon(x,  y){            return  x  -­‐  y;        },  console.log(  a.sum(  4,  6  )  );  //  10        __proto__  :  a  console.log(  b.sum(  3,  2  )  );  //  5   };    console.log(  c.first  );  //  Hello   var  c  =  {        product  :  funcNon(x,  y){          return  x  *  y;        },   Carlos Benitez (@etnassoft)      __proto__  :  a  Enrique Amodeo (@eamodeorubio) };  
  40. 40. JavaScript:  Potenciando  la  web  desde  1995   var  a  =  {    first  :  Hello,    second  :  World,   Herencia  Protohpica    sum  :  funcNon(x,  y){            return  x  +  y;    }   };   var  b  =  {    difference  :  funcNon(x,  y){            return  x  -­‐  y;        },  console.log(  a.sum(  4,  6  )  );  //  10        __proto__  :  a  console.log(  b.sum(  3,  2  )  );  //  5   };    console.log(  c.first  );  //  Hello   var  c  =  {        product  :  funcNon(x,  y){          return  x  *  y;        },   Carlos Benitez (@etnassoft)      __proto__  :  a  Enrique Amodeo (@eamodeorubio) };  
  41. 41. JavaScript:  Potenciando  la  web  desde  1995   var  a  =  {    first  :  Hello,    second  :  World,   Herencia  Protohpica    sum  :  funcNon(x,  y){            return  x  +  y;    }   };   var  b  =  {    difference  :  funcNon(x,  y){            return  x  -­‐  y;        },  console.log(  a.sum(  4,  6  )  );  //  10        __proto__  :  a  console.log(  b.sum(  3,  2  )  );  //  5   };    console.log(  c.first  );  //  Hello   var  c  =  {        product  :  funcNon(x,  y){          return  x  *  y;        },   Carlos Benitez (@etnassoft)      __proto__  :  a  Enrique Amodeo (@eamodeorubio) };  
  42. 42. JavaScript:  Potenciando  la  web  desde  1995   Buenas  prácCcas  y  patrones  Patrón  ProtoNpo  (ECMAScript  5)   var  someCar  =  {        drive:  funcNon()  {};        name:  Mazda  3           };     //  Use  Object.create  to  generate  a  new  car     var  anotherCar  =  Object.create(someCar);     anotherCar.name  =  Toyota  Camry;       Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  43. 43. JavaScript:  Potenciando  la  web  desde  1995   Buenas  prácCcas  y  patrones  Patrón  Módulo   //  Namespace  for  the  library   var  MyLibrary  =  {};   //  Library  definiCon   MyLibrary  =  (funcNon  ()  {      //  Private  variables  /  properCes   MyLibrary  =  (funcNon(){      var  p1,  p2;      //  Code  goes  here...      //  Private  methods   }());      funcNon  aPrivateMethod()  {      }      //  Public  API      return  {          publicMethod:  funcNon  ()  {        //  Code  funcCon...                  }   Carlos Benitez (@etnassoft)    }   Enrique Amodeo (@eamodeorubio) }());  
  44. 44. JavaScript:  Potenciando  la  web  desde  1995   Buenas  prácCcas  y  patrones  Patrón  Módulo   //  Namespace  for  the  library   var  MyLibrary  =  {};   //  Library  definiCon   MyLibrary  =  (funcNon  ()  {      //  Private  variables  /  properCes   MyLibrary  =  (funcNon(){      var  p1,  p2;      //  Code  goes  here...      //  Private  methods   }());      funcNon  aPrivateMethod()  {      }   Función  autoejecutable      //  Public  API      return  {          publicMethod:  funcNon  ()  {        //  Code  funcCon...                  }   Carlos Benitez (@etnassoft)    }   Enrique Amodeo (@eamodeorubio) }());  
  45. 45. JavaScript:  Potenciando  la  web  desde  1995   Buenas  prácCcas  y  patrones  Patrón  Módulo   //  Namespace  for  the  library   var  MyLibrary  =  {};   //  Library  definiCon   MyLibrary  =  (funcNon  ()  {      //  Private  variables  /  properCes   MyLibrary  =  (funcNon(){      var  p1,  p2;      //  Code  goes  here...      //  Private  methods   }());      funcNon  aPrivateMethod()  {      }   Función  autoejecutable      //  Public  API      return  {          publicMethod:  funcNon  ()  {        //  Code  funcCon...                  }   Carlos Benitez (@etnassoft)    }   Enrique Amodeo (@eamodeorubio) }());  
  46. 46. JavaScript:  Potenciando  la  web  desde  1995   Buenas  prácCcas  y  patrones  Patrón  Módulo  Ampliado:  submódulos   //  Namespace  for  the  library   var  MyLibrary  =  {};   //  Library  definiCon   MyLibrary  =  (funcNon  (  )  {      //  Private  variables  /  properCes      var  p1,  p2;      //  Private  methods      funcNon  aPrivateMethod()  {      }      //  Public  API      return  {          publicMethod:  funcNon  ()  {        //  Code  funcCon...                  }   Carlos Benitez (@etnassoft)    }   Enrique Amodeo (@eamodeorubio) }(  ));  
  47. 47. JavaScript:  Potenciando  la  web  desde  1995   Buenas  prácCcas  y  patrones  Patrón  Módulo  Ampliado:  submódulos   //  Namespace  for  the  library   var  MyLibrary  =  {};   var  MyLibrary  =  (  funcNon(  module  ){       //  Library  definiCon   MyLibrary  =  (funcNon  (  )  {      module.foo  =  funcNon(){              //  Private  variables  /  properCes      };      var  p1,  p2;      return  module;      //  Private  methods      funcNon  aPrivateMethod()  {   }(  MyLibrary  ));      }      //  Public  API      return  {          publicMethod:  funcNon  ()  {        //  Code  funcCon...                  }   Carlos Benitez (@etnassoft)    }   Enrique Amodeo (@eamodeorubio) }(  ));  
  48. 48. JavaScript:  Potenciando  la  web  desde  1995   Buenas  prácCcas  y  patrones  Patrón  Módulo  Ampliado:  submódulos   //  Namespace  for  the  library   var  MyLibrary  =  {};   var  MyLibrary  =  (  funcNon(  module  ){       //  Library  definiCon   MyLibrary  =  (funcNon  (  )  {      module.foo  =  funcNon(){              //  Private  variables  /  properCes      };      var  p1,  p2;      return  module;      //  Private  methods      funcNon  aPrivateMethod()  {   }(  MyLibrary  ));      }      //  Public  API      return  {          publicMethod:  funcNon  ()  {        //  Code  funcCon...                  }   Carlos Benitez (@etnassoft)    }   Enrique Amodeo (@eamodeorubio) }(  ));  
  49. 49. JavaScript:  Potenciando  la  web  desde  1995   Buenas  prácCcas  y  patrones  Patrón  Módulo  Ampliado:  submódulos   //  Namespace  for  the  library   var  MyLibrary  =  {};   var  MyLibrary  =  (  funcNon(  module  ){       //  Library  definiCon   MyLibrary  =  (funcNon  (  )  {      module.foo  =  funcNon(){              //  Private  variables  /  properCes      };      var  p1,  p2;      return  module;      //  Private  methods      funcNon  aPrivateMethod()  {   }(  MyLibrary  ));      }      //  Public  API      return  {          publicMethod:  funcNon  ()  {        //  Code  funcCon...                  }   Carlos Benitez (@etnassoft)    }   Enrique Amodeo (@eamodeorubio) }(  ));  
  50. 50. JavaScript:  Potenciando  la  web  desde  1995   Buenas  prácCcas  y  patrones  Patrón  Módulo  Ampliado:  submódulos   //  Namespace  for  the  library   var  MyLibrary  =  {};   var  MyLibrary  =  (  funcNon(  module  ){       //  Library  definiCon   MyLibrary  =  (funcNon  (  )  {      module.foo  =  funcNon(){              //  Private  variables  /  properCes      };      var  p1,  p2;      return  module;      //  Private  methods      funcNon  aPrivateMethod()  {   }(  MyLibrary  ));      }      //  Public  API      return  {          publicMethod:  funcNon  ()  {        //  Code  funcCon...                  }   Carlos Benitez (@etnassoft)    }   Enrique Amodeo (@eamodeorubio) }(  ));  
  51. 51. JavaScript:  Potenciando  la  web  desde  1995   Buenas  prácCcas  y  patrones   var  MyLibrary  =  (funcNon  ()  {  Patrón  Módulo  Revelado      //  Private  variables  /  properCes  (Revealing  Module)      var  p1,  p2;      //  Private  methods      funcNon  aPrivateMethod()  {      }   MyLibrary  =  (funcNon(){      //  Public  Method      //  Code  goes  here...      funcNon  publicMethod  ()  {   }());      }      //  Another  Public  Method      funcNon  anotherPublicMethod  ()  {      }      //  Public  API      return  {          publicMethod:  publicMethod,          anotherPublicMethod:  anotherPublicMethod   Carlos Benitez (@etnassoft)    }   Enrique Amodeo (@eamodeorubio) }());  
  52. 52. JavaScript:  Potenciando  la  web  desde  1995   Buenas  prácCcas  y  patrones   var  MyLibrary  =  (funcNon  ()  {  Patrón  Módulo  Revelado      //  Private  variables  /  properCes  (Revealing  Module)      var  p1,  p2;      //  Private  methods      funcNon  aPrivateMethod()  {      }      //  Public  Method      funcNon  publicMethod  ()  {   return  {      }          publicMethod:  publicMethod,      //  Another  Public  Method          anotherPublicMethod:  anotherPublicMethod      funcNon  anotherPublicMethod  ()  {      }      }      //  Public  API      return  {          publicMethod:  publicMethod,          anotherPublicMethod:  anotherPublicMethod   Carlos Benitez (@etnassoft)    }   Enrique Amodeo (@eamodeorubio) }());  
  53. 53. JavaScript:  Potenciando  la  web  desde  1995   Buenas  prácCcas  y  patrones   var  MyLibrary  =  (funcNon  ()  {  Patrón  Módulo  Revelado      //  Private  variables  /  properCes  (Revealing  Module)      var  p1,  p2;      //  Private  methods      funcNon  aPrivateMethod()  {      }      //  Public  Method      funcNon  publicMethod  ()  {   return  {      }          publicMethod:  publicMethod,      //  Another  Public  Method          anotherPublicMethod:  anotherPublicMethod      funcNon  anotherPublicMethod  ()  {      }      }      //  Public  API      return  {          publicMethod:  publicMethod,          anotherPublicMethod:  anotherPublicMethod   Carlos Benitez (@etnassoft)    }   Enrique Amodeo (@eamodeorubio) }());  
  54. 54. JavaScript:  Potenciando  la  web  desde  1995   Buenas  prácCcas  y  patrones  This  Namespace  Proxy   var  myApp  =  {};  (James  Edwards)   (funcNon(){      //  Private  variables  /  properCes      var  foo  =  Hello;      var  bar  =  World;      //Private  method      var  myMessage  =  funcNon(){      this.sum  =  funcNon(  param1,  param2  ){          return  foo  +      +  bar;          return  param1  +  param2;      };      };      //  Public  Method      this.sum  =  funcNon(  param1,  param2  ){          return  param1  +  param2;      };   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio) }).apply(  myApp  );  
  55. 55. JavaScript:  Potenciando  la  web  desde  1995   Buenas  prácCcas  y  patrones  This  Namespace  Proxy   var  myApp  =  {};  (James  Edwards)   (funcNon(){      //  Private  variables  /  properCes      var  foo  =  Hello;      var  bar  =  World;      //Private  method      var  myMessage  =  funcNon(){      this.sum  =  funcNon(  param1,  param2  ){          return  foo  +      +  bar;          return  param1  +  param2;      };      };      //  Public  Method      this.sum  =  funcNon(  param1,  param2  ){          return  param1  +  param2;      };   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio) }).apply(  myApp  );  
  56. 56. JavaScript:  Potenciando  la  web  desde  1995   Buenas  prácCcas  y  patrones  FuncNon  Factory   ns.convertToFancyBtn  =  funcNon(fancyBtnId,  msg){          var  myBumon  =  document.getElementById(fancyBtnId);          myBu}on.onclick  =  funcNon(){                  alert(msg);          };   };   //.....   ns.convertToFancyBtn(btn1,  Hola  mundo); Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  57. 57. JavaScript:  Potenciando  la  web  desde  1995   Buenas  prácCcas  y  patrones  FuncNon  Factory   ns.convertToFancyBtn  =  funcNon(fancyBtnId,  msg){          var  myBumon  =  document.getElementById(fancyBtnId);          myBu}on.onclick  =  funcNon(){                  alert(msg);          };   Enlazados  por   };   la  Closure   //.....   ns.convertToFancyBtn(btn1,  Hola  mundo); Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  58. 58. JavaScript:  Potenciando  la  web  desde  1995   Buenas  prácCcas  y  patrones  FuncNon  Factory   ns.convertToFancyBtn  =  funcNon(fancyBtnId,  msg){          var  myBumon  =  document.getElementById(fancyBtnId);          myBu}on.onclick  =  funcNon(){                  alert(msg);          };   Pero  estos   };   también   //.....   (y  no  se  usan)   ns.convertToFancyBtn(btn1,  Hola  mundo); Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  59. 59. JavaScript:  Potenciando  la  web  desde  1995   Buenas  prácCcas  y  patrones  FuncNon  Factory   ns.convertToFancyBtn  =  funcNon(fancyBtnId,  msg){          var  myBumon  =  document.getElementById(fancyBtnId);          myBu}on.onclick  =  funcNon(){                  alert(msg);          };   Pero  estos   };   también   (y  no  se  usan)   //.....   ns.convertToFancyBtn(btn1,  Hola  mundo); ✖ Referencias  circulares   ✖ Memoria   ✖ Confusión   Carlos Benitez (@etnassoft) ✖ Resolución  referencias   Enrique Amodeo (@eamodeorubio)
  60. 60. JavaScript:  Potenciando  la  web  desde  1995   Buenas  prácCcas  y  patrones  FuncNon  Factory   ns.newNoCfier  =  funcNon(msg){          return  funcNon(){                  alert(msg);          }   };   ns.convertToFancyBtn  =  funcNon(fancyBtnId,  msg){          var  myBumon  =  document.getElementById(fancyBtnId);          myBu}on.onclick  =  ns.newNoCfier(msg);   };   //.....   ns.convertToFancyBtn(btn1,  Hola  mundo); Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  61. 61. JavaScript:  Potenciando  la  web  desde  1995   Buenas  prácCcas  y  patrones  FuncNon  Factory   ns.newNoCfier  =  funcNon(msg){    Control  de  la          return  funcNon(){   closure                  alert(msg);    ReuClizable          }   };   ns.convertToFancyBtn  =  funcNon(fancyBtnId,  msg){          var  myBumon  =  document.getElementById(fancyBtnId);          myBu}on.onclick  =  ns.newNoCfier(msg);   };   //.....    Sencillo  y   ns.convertToFancyBtn(btn1,  Hola  mundo); legible   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  62. 62. JavaScript:  Potenciando  la  web  desde  1995   Buenas  prácCcas  y  patrones  FuncNon  Factory   ns.bindFuncConToObject  =  funcNon(f,  obj){  (“this”  Binding)          if  (typeof(f)  !=  funcNon)                    return  obj;          return  funcNon(){                  f.apply(obj,  arguments);          }   };   //.....   submitBtn.onclick  =  ns.bindFuncConToObject(                  controller.checkForm                  ,  controller); Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  63. 63. JavaScript:  Potenciando  la  web  desde  1995   Buenas  prácCcas  y  patrones  FuncNon  Factory   ns.bindFuncConToObject  =  funcNon(f,  obj){  (“this”  Binding)          if  (typeof(f)  !=  funcNon)                    return  obj;          return  funcNon(){                  f.apply(obj,  arguments);          }   };   //.....   submitBtn.onclick  =  ns.bindFuncConToObject(                  controller.checkForm                  ,  controller); Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  64. 64. JavaScript:  Potenciando  la  web  desde  1995   Buenas  prácCcas  y  patrones  FuncNon  Factory   ns.bindFuncConToObject  =  funcNon(f,  obj){  (“this”  Binding)          if  (typeof(f)  !=  funcNon)                    return  obj;          return  funcNon(){                  f.apply(obj,  arguments);          }   };   //.....   submitBtn.onclick  =  ns.bindFuncConToObject(                  controller.checkForm                  ,  controller); Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  65. 65. JavaScript:  Potenciando  la  web  desde  1995   Buenas  prácCcas  y  patrones  ¡  Curry  !   ns.fadeOut=funcNon(trigger,  Nme,  selector)  {   //  ..  Some  visual  FX  code   };   //...   ns.fadeOut(onclick,  200,  coolForm);   ns.fadeOut(onclick,  200,  warningMsg); Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  66. 66. JavaScript:  Potenciando  la  web  desde  1995   Buenas  prácCcas  y  patrones  ¡  Curry  !   ns.fadeOut=funcNon(trigger,  Nme,  selector)  {   //  ..  Some  visual  FX  code   };   //...   ns.fadeOut(onclick,  200,  coolForm);   ns.fadeOut(onclick,  200,  warningMsg); ✖ RepeCCvo  y  laborioso   ✖ Fácil  equivocarnos   ✖ Di~cil  de  mantener   ✖ No  es  legible  (intent)   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  67. 67. JavaScript:  Potenciando  la  web  desde  1995   Buenas  prácCcas  y  patrones  ¡  Curry  !   FuncCon.prototype.curry  =  funcNon(){  (John  Resig)          var  fn  =  this;          var  fixedArgs  =  Array.prototype.slice.call(arguments);          return  funcNon(){                  return  fn.apply(this,  fixedArgs.concat(            Array.prototype.slice.call(arguments)));          };   };   //...   ns.fastFadeOutWhenClicked=ns.fadeOut.curry(onclick,  200);   //..   ns.fastFadeOutWhenClicked(coolForm);   ns.fastFadeOutWhenClicked(warningMsg); Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  68. 68. JavaScript:  Potenciando  la  web  desde  1995   Buenas  prácCcas  y  patrones  ¡  Curry  !   FuncCon.prototype.curry  =  funcNon(){  (John  Resig)          var  fn  =  this;          var  fixedArgs  =  Array.prototype.slice.call(arguments);   Argumentos          return  funcNon(){   transformados  en                  return  fn.apply(this,  fixedArgs.concat(   array            Array.prototype.slice.call(arguments)));          };   };   //...   ns.fastFadeOutWhenClicked=ns.fadeOut.curry(onclick,  200);   //..   ns.fastFadeOutWhenClicked(coolForm);   ns.fastFadeOutWhenClicked(warningMsg); Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  69. 69. JavaScript:  Potenciando  la  web  desde  1995   Buenas  prácCcas  y  patrones  ¡  Curry  !   FuncCon.prototype.curry  =  funcNon(){  (John  Resig)          var  fn  =  this;          var  fixedArgs  =  Array.prototype.slice.call(arguments);          return  funcNon(){                  return  fn.apply(this,  fixedArgs.concat(            Array.prototype.slice.call(arguments)));          };   };   //...   ns.fastFadeOutWhenClicked=ns.fadeOut.curry(onclick,  200);   //..   ns.fastFadeOutWhenClicked(coolForm);   ns.fastFadeOutWhenClicked(warningMsg); Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  70. 70. JavaScript:  Potenciando  la  web  desde  1995   Buenas  prácCcas  y  patrones  ¡  Curry  !   FuncCon.prototype.curry  =  funcNon(){  (John  Resig)          var  fn  =  this;          var  fixedArgs  =  Array.prototype.slice.call(arguments);          return  funcNon(){                  return  fn.apply(this,  fixedArgs.concat(            Array.prototype.slice.call(arguments)));          };   };   //...   ns.fastFadeOutWhenClicked=ns.fadeOut.curry(onclick,  200);   //..   ns.fastFadeOutWhenClicked(coolForm);   ns.fastFadeOutWhenClicked(warningMsg); Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  71. 71. JavaScript:  Potenciando  la  web  desde  1995   Buenas  prácCcas  y  patrones  ¡  Curry  !   FuncCon.prototype.curry  =  funcNon(){  (John  Resig)          var  fn  =  this;          var  fixedArgs  =  Array.prototype.slice.call(arguments);          return  funcNon(){                  return  fn.apply(this,  fixedArgs.concat(    ReuClizable            Array.prototype.slice.call(arguments)));    legible  (intent)          };    Flexible   };   //...   ns.fastFadeOutWhenClicked=ns.fadeOut.curry(onclick,  200);   //..   ns.fastFadeOutWhenClicked(coolForm);   ns.fastFadeOutWhenClicked(warningMsg); Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×