SlideShare uma empresa Scribd logo

Javascript: potenciando la web desde 1995

•
•
ADWE Team
ADWE Team

Este documento resume las características principales del lenguaje JavaScript. Explica que JavaScript es un lenguaje interpretado, de tipado dinámico y orientado a objetos que se ejecuta en el navegador del cliente. Describe algunas de sus características como variables sin tipo, uso de prototipos en lugar de clases, y la coerción de datos. También presenta las diferencias entre entidades primitivas y objetos en JavaScript.

Tecnologia
1 de 117
Baixar para ler offline
JavaScript:  Potenciando  la  web  desde  1995   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
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)
Introducción  al  lenguaje  
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)
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)
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)
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)
JavaScript:  Potenciando  la  web  desde  1995   Lenguaje  Interpretado   Herramientas  para  medir  la  calidad  del  soZware   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
JavaScript:  Potenciando  la  web  desde  1995   Lenguaje  Interpretado   Herramientas  para  medir  la  calidad  del  soZware   Douglas  Crockford   Developers   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
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)
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)
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)
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)
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)
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)
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)
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)
El  JavaScript  me  confunde   (O  por  qué  JavaScript  no  2ene  nada  que  ver  con  Java)  
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   -­‐  Mozilla's  JavaScript:  Firefox   -­‐  Rhino  (Java)   TraceMonkey   -­‐  KJS  (KDE):  Conqueror   -­‐  JavaScriptCore:  Apple  Inc.   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
Buenas  prácCcas  y  patrones   (O  cómo  podemos  aprovechar  realmente  JavaScript)  
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)
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)
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)
JavaScript:  Potenciando  la  web  desde  1995   ProtoCpos   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
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) };  
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) };  
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) };  
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) };  
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) };  
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)
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) }());  
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) }());  
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) }());  
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) }(  ));  
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) }(  ));  
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) }(  ));  
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) }(  ));  
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) }(  ));  
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) }());  
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) }());  
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) }());  
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  );  
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  );  
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
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)
JavaScript:  Potenciando  la  web  desde  1995   Buenas  prácCcas  y  patrones   OO  sin   ns.Evento  =  funcNon(nombre){          var  id  =  nombre  ||  '<anonymous>';   prototype:          var  subscriptores  =  [];   Encapsulación          var  subscriptorYaRegistrado  =  funcNon(subscriptor){//...          };          var  noNficarSubscriptor  =  funcNon(evento,  subscriptor){//...          };          this.registrarSubscriptor  =  funcNon(subscriptor){//...          };          this.borrarSubscriptor  =  funcNon(subscriptor){//...          };          this.noNficar  =  funcNon(callback){//...          };          this.destruir  =  funcNon(){//...          };   };   //..   Carlos Benitez (@etnassoft) var  onClick  =  new  ns.Evento('onclick'); Enrique Amodeo (@eamodeorubio)
JavaScript:  Potenciando  la  web  desde  1995   Buenas  prácCcas  y  patrones   OO  sin   ns.Evento  =  funcNon(nombre){          var  id  =  nombre  ||  '<anonymous>';   prototype:          var  subscriptores  =  [];   Encapsulación          var  subscriptorYaRegistrado  =  funcNon(subscriptor){//...          };          var  noNficarSubscriptor  =  funcNon(evento,  subscriptor){//...          };          this.registrarSubscriptor  =  funcNon(subscriptor){//...    Datos  privados          };          this.borrarSubscriptor  =  funcNon(subscriptor){//...          };          this.noNficar  =  funcNon(callback){//...          };          this.destruir  =  funcNon(){//...          };   };   //..   Carlos Benitez (@etnassoft) var  onClick  =  new  ns.Evento('onclick'); Enrique Amodeo (@eamodeorubio)
JavaScript:  Potenciando  la  web  desde  1995   Buenas  prácCcas  y  patrones   OO  sin   ns.Evento  =  funcNon(nombre){          var  id  =  nombre  ||  '<anonymous>';   prototype:          var  subscriptores  =  [];   Encapsulación          var  subscriptorYaRegistrado  =  funcNon(subscriptor){//...          };          var  noNficarSubscriptor  =  funcNon(evento,  subscriptor){//...          };    Métodos          this.registrarSubscriptor  =  funcNon(subscriptor){//...          };   privados          this.borrarSubscriptor  =  funcNon(subscriptor){//...          };          this.noNficar  =  funcNon(callback){//...          };          this.destruir  =  funcNon(){//...          };   };   //..   Carlos Benitez (@etnassoft) var  onClick  =  new  ns.Evento('onclick'); Enrique Amodeo (@eamodeorubio)
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

Recomendados

Evolución de los Lenguajes de Programación.
Evolución de los Lenguajes de Programación.Evolución de los Lenguajes de Programación.
Evolución de los Lenguajes de Programación.Anastacio Mendoza
 
Java script para desarrolladores SharePoint
Java script para desarrolladores SharePointJava script para desarrolladores SharePoint
Java script para desarrolladores SharePointAdrian Diaz Cervera
 
Desarrollador c,c++
Desarrollador c,c++Desarrollador c,c++
Desarrollador c,c++202527
 
Javascript en proyectos reales: jQuery
Javascript en proyectos reales: jQueryJavascript en proyectos reales: jQuery
Javascript en proyectos reales: jQueryDavid Arango
 
Java script
Java scriptJava script
Java scriptlorenargdl
 
JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?
JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?
JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?Micael Gallego
 
JavaScript para Programadores Java
JavaScript para Programadores JavaJavaScript para Programadores Java
JavaScript para Programadores JavaCarlos A. Iglesias
 
Introducción a Javascript I
Introducción a Javascript IIntroducción a Javascript I
Introducción a Javascript IHéctor Estigarribia
 

Recomendados

Evolución de los Lenguajes de Programación.
Evolución de los Lenguajes de Programación.Evolución de los Lenguajes de Programación.
Evolución de los Lenguajes de Programación.Anastacio Mendoza
 
Java script para desarrolladores SharePoint
Java script para desarrolladores SharePointJava script para desarrolladores SharePoint
Java script para desarrolladores SharePointAdrian Diaz Cervera
 
Desarrollador c,c++
Desarrollador c,c++Desarrollador c,c++
Desarrollador c,c++202527
 
Javascript en proyectos reales: jQuery
Javascript en proyectos reales: jQueryJavascript en proyectos reales: jQuery
Javascript en proyectos reales: jQueryDavid Arango
 
Java script
Java scriptJava script
Java scriptlorenargdl
 
JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?
JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?
JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?Micael Gallego
 
JavaScript para Programadores Java
JavaScript para Programadores JavaJavaScript para Programadores Java
JavaScript para Programadores JavaCarlos A. Iglesias
 
Introducción a Javascript I
Introducción a Javascript IIntroducción a Javascript I
Introducción a Javascript IHéctor Estigarribia
 
Desarrollo centrado en tareas en Eclipse con Mylyn 2009
Desarrollo centrado en tareas en Eclipse con Mylyn 2009Desarrollo centrado en tareas en Eclipse con Mylyn 2009
Desarrollo centrado en tareas en Eclipse con Mylyn 2009Micael Gallego
 
Lenguaje objective c
Lenguaje objective cLenguaje objective c
Lenguaje objective cJose Anticona Pereda
 
Javascript: Particularidades del Lenguaje, DOM, Eventos y AJAX
Javascript: Particularidades del Lenguaje, DOM, Eventos y AJAXJavascript: Particularidades del Lenguaje, DOM, Eventos y AJAX
Javascript: Particularidades del Lenguaje, DOM, Eventos y AJAXIrontec
 
Javascript
JavascriptJavascript
Javascriptguest044583b
 
Javascript 1
Javascript 1Javascript 1
Javascript 1Juan C
 
Javascript para principiantes -Introducción
Javascript para principiantes -IntroducciónJavascript para principiantes -Introducción
Javascript para principiantes -IntroducciónOscar Josué Uh Pérez
 
Lenguaje de programación java
Lenguaje de programación javaLenguaje de programación java
Lenguaje de programación javaChikito304
 
manual java
manual javamanual java
manual javaZair Fernando Canales Guevara
 
Metaprogramación en JavaScript
Metaprogramación en JavaScriptMetaprogramación en JavaScript
Metaprogramación en JavaScriptJavier Vélez Reyes
 
Aprende JavaScript
Aprende JavaScriptAprende JavaScript
Aprende JavaScriptAlf Chee
 
#PlatziConf - El camino para ser un Pro en JavaScript
#PlatziConf - El camino para ser un Pro en JavaScript#PlatziConf - El camino para ser un Pro en JavaScript
#PlatziConf - El camino para ser un Pro en JavaScriptCarlos Azaustre
 
Configuración de NetBeans para Java, C y C++
Configuración de NetBeans para Java, C y C++Configuración de NetBeans para Java, C y C++
Configuración de NetBeans para Java, C y C++victorconejo80
 
JavaScript Avanzado
JavaScript AvanzadoJavaScript Avanzado
JavaScript AvanzadoAdolfo Sanz De Diego
 
Java y sus caracteristicas
Java y sus caracteristicasJava y sus caracteristicas
Java y sus caracteristicasAny Saula
 
Java y Bases de Datos
Java y Bases de DatosJava y Bases de Datos
Java y Bases de DatosRonny Parra
 
El gran libro de android
El gran libro de androidEl gran libro de android
El gran libro de androidJose Luis Fernandez
 
Introduccion al java script
Introduccion al java scriptIntroduccion al java script
Introduccion al java scriptRenny Batista
 
Lenguaje de programación JAVA
Lenguaje de programación JAVALenguaje de programación JAVA
Lenguaje de programación JAVAjosehpxxx
 
JavaScript desde Cero
JavaScript desde CeroJavaScript desde Cero
JavaScript desde CeroJuan Seguí Moreno
 
Frameworks para el desarrollo de juegos para dispositivo móviles
Frameworks para el desarrollo de juegos para dispositivo móvilesFrameworks para el desarrollo de juegos para dispositivo móviles
Frameworks para el desarrollo de juegos para dispositivo móvilesADWE Team
 
HTML5 + CSS3 + Wordpress = Responsive Web
HTML5 + CSS3 + Wordpress = Responsive WebHTML5 + CSS3 + Wordpress = Responsive Web
HTML5 + CSS3 + Wordpress = Responsive WebADWE Team
 
HTML5 dia de internet 2012
HTML5 dia de internet 2012HTML5 dia de internet 2012
HTML5 dia de internet 2012ADWE Team
 

Mais conteúdo relacionado

Destaque

Desarrollo centrado en tareas en Eclipse con Mylyn 2009
Desarrollo centrado en tareas en Eclipse con Mylyn 2009Desarrollo centrado en tareas en Eclipse con Mylyn 2009
Desarrollo centrado en tareas en Eclipse con Mylyn 2009Micael Gallego
 
Javascript: Particularidades del Lenguaje, DOM, Eventos y AJAX
Javascript: Particularidades del Lenguaje, DOM, Eventos y AJAXJavascript: Particularidades del Lenguaje, DOM, Eventos y AJAX
Javascript: Particularidades del Lenguaje, DOM, Eventos y AJAXIrontec
 
Javascript 1
Javascript 1Javascript 1
Javascript 1Juan C
 
Javascript para principiantes -Introducción
Javascript para principiantes -IntroducciónJavascript para principiantes -Introducción
Javascript para principiantes -IntroducciónOscar Josué Uh Pérez
 
Lenguaje de programación java
Lenguaje de programación javaLenguaje de programación java
Lenguaje de programación javaChikito304
 
Aprende JavaScript
Aprende JavaScriptAprende JavaScript
Aprende JavaScriptAlf Chee
 
#PlatziConf - El camino para ser un Pro en JavaScript
#PlatziConf - El camino para ser un Pro en JavaScript#PlatziConf - El camino para ser un Pro en JavaScript
#PlatziConf - El camino para ser un Pro en JavaScriptCarlos Azaustre
 
Configuración de NetBeans para Java, C y C++
Configuración de NetBeans para Java, C y C++Configuración de NetBeans para Java, C y C++
Configuración de NetBeans para Java, C y C++victorconejo80
 
Java y sus caracteristicas
Java y sus caracteristicasJava y sus caracteristicas
Java y sus caracteristicasAny Saula
 
Java y Bases de Datos
Java y Bases de DatosJava y Bases de Datos
Java y Bases de DatosRonny Parra
 
Introduccion al java script
Introduccion al java scriptIntroduccion al java script
Introduccion al java scriptRenny Batista
 
Lenguaje de programación JAVA
Lenguaje de programación JAVALenguaje de programación JAVA
Lenguaje de programación JAVAjosehpxxx
 

Destaque (19)

Desarrollo centrado en tareas en Eclipse con Mylyn 2009
Desarrollo centrado en tareas en Eclipse con Mylyn 2009Desarrollo centrado en tareas en Eclipse con Mylyn 2009
Desarrollo centrado en tareas en Eclipse con Mylyn 2009
 
Lenguaje objective c
Lenguaje objective cLenguaje objective c
Lenguaje objective c
 
Javascript: Particularidades del Lenguaje, DOM, Eventos y AJAX
Javascript: Particularidades del Lenguaje, DOM, Eventos y AJAXJavascript: Particularidades del Lenguaje, DOM, Eventos y AJAX
Javascript: Particularidades del Lenguaje, DOM, Eventos y AJAX
 
Javascript
JavascriptJavascript
Javascript
 
Javascript 1
Javascript 1Javascript 1
Javascript 1
 
Javascript para principiantes -Introducción
Javascript para principiantes -IntroducciónJavascript para principiantes -Introducción
Javascript para principiantes -Introducción
 
Lenguaje de programación java
Lenguaje de programación javaLenguaje de programación java
Lenguaje de programación java
 
manual java
manual javamanual java
manual java
 
Metaprogramación en JavaScript
Metaprogramación en JavaScriptMetaprogramación en JavaScript
Metaprogramación en JavaScript
 
Aprende JavaScript
Aprende JavaScriptAprende JavaScript
Aprende JavaScript
 
#PlatziConf - El camino para ser un Pro en JavaScript
#PlatziConf - El camino para ser un Pro en JavaScript#PlatziConf - El camino para ser un Pro en JavaScript
#PlatziConf - El camino para ser un Pro en JavaScript
 
Configuración de NetBeans para Java, C y C++
Configuración de NetBeans para Java, C y C++Configuración de NetBeans para Java, C y C++
Configuración de NetBeans para Java, C y C++
 
JavaScript Avanzado
JavaScript AvanzadoJavaScript Avanzado
JavaScript Avanzado
 
Java y sus caracteristicas
Java y sus caracteristicasJava y sus caracteristicas
Java y sus caracteristicas
 
Java y Bases de Datos
Java y Bases de DatosJava y Bases de Datos
Java y Bases de Datos
 
El gran libro de android
El gran libro de androidEl gran libro de android
El gran libro de android
 
Introduccion al java script
Introduccion al java scriptIntroduccion al java script
Introduccion al java script
 
Lenguaje de programación JAVA
Lenguaje de programación JAVALenguaje de programación JAVA
Lenguaje de programación JAVA
 
JavaScript desde Cero
JavaScript desde CeroJavaScript desde Cero
JavaScript desde Cero
 

Mais de ADWE Team

Frameworks para el desarrollo de juegos para dispositivo móviles
Frameworks para el desarrollo de juegos para dispositivo móvilesFrameworks para el desarrollo de juegos para dispositivo móviles
Frameworks para el desarrollo de juegos para dispositivo móvilesADWE Team
 
HTML5 + CSS3 + Wordpress = Responsive Web
HTML5 + CSS3 + Wordpress = Responsive WebHTML5 + CSS3 + Wordpress = Responsive Web
HTML5 + CSS3 + Wordpress = Responsive WebADWE Team
 
HTML5 dia de internet 2012
HTML5 dia de internet 2012HTML5 dia de internet 2012
HTML5 dia de internet 2012ADWE Team
 
Significado y usos de RSS
Significado y usos de RSSSignificado y usos de RSS
Significado y usos de RSSADWE Team
 
Responsive web y Wordpress
Responsive web y WordpressResponsive web y Wordpress
Responsive web y WordpressADWE Team
 
Introduccion html5
Introduccion html5Introduccion html5
Introduccion html5ADWE Team
 
Ponencia seo para el èxito con google 2011 copia
Ponencia seo para el èxito con google 2011 copiaPonencia seo para el èxito con google 2011 copia
Ponencia seo para el èxito con google 2011 copiaADWE Team
 
Diseñar para dispositivos móviles
Diseñar para dispositivos móvilesDiseñar para dispositivos móviles
Diseñar para dispositivos móvilesADWE Team
 
Potenciando tu web con APIs de Miquel Camps para ADWE Madrid
Potenciando tu web con APIs de Miquel Camps para ADWE MadridPotenciando tu web con APIs de Miquel Camps para ADWE Madrid
Potenciando tu web con APIs de Miquel Camps para ADWE MadridADWE Team
 
Presentacion de Fran Moreno para adwe
Presentacion de Fran Moreno para adwePresentacion de Fran Moreno para adwe
Presentacion de Fran Moreno para adweADWE Team
 
Rompiendo moldes
Rompiendo moldesRompiendo moldes
Rompiendo moldesADWE Team
 
Gwt intro adwe_murcia
Gwt intro adwe_murciaGwt intro adwe_murcia
Gwt intro adwe_murciaADWE Team
 
5 tips de diseñadores a maquetadores... y viceversa
5 tips de diseñadores a maquetadores... y viceversa5 tips de diseñadores a maquetadores... y viceversa
5 tips de diseñadores a maquetadores... y viceversaADWE Team
 
Presentación Framework CodeIgniter
Presentación Framework CodeIgniter Presentación Framework CodeIgniter
Presentación Framework CodeIgniter ADWE Team
 
Presentación Extreme Programming
Presentación Extreme ProgrammingPresentación Extreme Programming
Presentación Extreme ProgrammingADWE Team
 
El momento del diseño, con Carlos Úbeda, de DNXGroup
El momento del diseño, con Carlos Úbeda, de DNXGroup El momento del diseño, con Carlos Úbeda, de DNXGroup
El momento del diseño, con Carlos Úbeda, de DNXGroupADWE Team
 
Presentacion seo analisis
Presentacion seo analisisPresentacion seo analisis
Presentacion seo analisisADWE Team
 
Presentación de ACTO Framework parte I
Presentación de ACTO Framework parte IPresentación de ACTO Framework parte I
Presentación de ACTO Framework parte IADWE Team
 
Presentación de ACTO Framework parte II
Presentación de ACTO Framework parte IIPresentación de ACTO Framework parte II
Presentación de ACTO Framework parte IIADWE Team
 

Mais de ADWE Team (20)

Frameworks para el desarrollo de juegos para dispositivo móviles
Frameworks para el desarrollo de juegos para dispositivo móvilesFrameworks para el desarrollo de juegos para dispositivo móviles
Frameworks para el desarrollo de juegos para dispositivo móviles
 
HTML5 + CSS3 + Wordpress = Responsive Web
HTML5 + CSS3 + Wordpress = Responsive WebHTML5 + CSS3 + Wordpress = Responsive Web
HTML5 + CSS3 + Wordpress = Responsive Web
 
HTML5 dia de internet 2012
HTML5 dia de internet 2012HTML5 dia de internet 2012
HTML5 dia de internet 2012
 
Significado y usos de RSS
Significado y usos de RSSSignificado y usos de RSS
Significado y usos de RSS
 
Responsive web y Wordpress
Responsive web y WordpressResponsive web y Wordpress
Responsive web y Wordpress
 
Git git hub
Git git hubGit git hub
Git git hub
 
Introduccion html5
Introduccion html5Introduccion html5
Introduccion html5
 
Ponencia seo para el èxito con google 2011 copia
Ponencia seo para el èxito con google 2011 copiaPonencia seo para el èxito con google 2011 copia
Ponencia seo para el èxito con google 2011 copia
 
Diseñar para dispositivos móviles
Diseñar para dispositivos móvilesDiseñar para dispositivos móviles
Diseñar para dispositivos móviles
 
Potenciando tu web con APIs de Miquel Camps para ADWE Madrid
Potenciando tu web con APIs de Miquel Camps para ADWE MadridPotenciando tu web con APIs de Miquel Camps para ADWE Madrid
Potenciando tu web con APIs de Miquel Camps para ADWE Madrid
 
Presentacion de Fran Moreno para adwe
Presentacion de Fran Moreno para adwePresentacion de Fran Moreno para adwe
Presentacion de Fran Moreno para adwe
 
Rompiendo moldes
Rompiendo moldesRompiendo moldes
Rompiendo moldes
 
Gwt intro adwe_murcia
Gwt intro adwe_murciaGwt intro adwe_murcia
Gwt intro adwe_murcia
 
5 tips de diseñadores a maquetadores... y viceversa
5 tips de diseñadores a maquetadores... y viceversa5 tips de diseñadores a maquetadores... y viceversa
5 tips de diseñadores a maquetadores... y viceversa
 
Presentación Framework CodeIgniter
Presentación Framework CodeIgniter Presentación Framework CodeIgniter
Presentación Framework CodeIgniter
 
Presentación Extreme Programming
Presentación Extreme ProgrammingPresentación Extreme Programming
Presentación Extreme Programming
 
El momento del diseño, con Carlos Úbeda, de DNXGroup
El momento del diseño, con Carlos Úbeda, de DNXGroup El momento del diseño, con Carlos Úbeda, de DNXGroup
El momento del diseño, con Carlos Úbeda, de DNXGroup
 
Presentacion seo analisis
Presentacion seo analisisPresentacion seo analisis
Presentacion seo analisis
 
Presentación de ACTO Framework parte I
Presentación de ACTO Framework parte IPresentación de ACTO Framework parte I
Presentación de ACTO Framework parte I
 
Presentación de ACTO Framework parte II
Presentación de ACTO Framework parte IIPresentación de ACTO Framework parte II
Presentación de ACTO Framework parte II
 

Último

Hernandez_Hernandez_Practica web de la sesion 11.pptx
Hernandez_Hernandez_Practica web de la sesion 11.pptxHernandez_Hernandez_Practica web de la sesion 11.pptx
Hernandez_Hernandez_Practica web de la sesion 11.pptxJOSEMANUELHERNANDEZH11
 
Explorando la historia y funcionamiento de la memoria ram
Explorando la historia y funcionamiento de la memoria ramExplorando la historia y funcionamiento de la memoria ram
Explorando la historia y funcionamiento de la memoria ramDIDIERFERNANDOGUERRE
 
El uso de las TIC's en la vida cotidiana.
El uso de las TIC's en la vida cotidiana.El uso de las TIC's en la vida cotidiana.
El uso de las TIC's en la vida cotidiana.241514949
 
TEMA 2 PROTOCOLO DE EXTRACCION VEHICULAR.ppt
TEMA 2 PROTOCOLO DE EXTRACCION VEHICULAR.pptTEMA 2 PROTOCOLO DE EXTRACCION VEHICULAR.ppt
TEMA 2 PROTOCOLO DE EXTRACCION VEHICULAR.pptJavierHerrera662252
 
Excel (1) tecnologia.pdf trabajo Excel taller
Excel (1) tecnologia.pdf trabajo Excel tallerExcel (1) tecnologia.pdf trabajo Excel taller
Excel (1) tecnologia.pdf trabajo Excel tallerValentinaTabares11
 
LUXOMETRO EN SALUD OCUPACIONAL(FINAL).ppt
LUXOMETRO EN SALUD OCUPACIONAL(FINAL).pptLUXOMETRO EN SALUD OCUPACIONAL(FINAL).ppt
LUXOMETRO EN SALUD OCUPACIONAL(FINAL).pptchaverriemily794
 
Medidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptx
Medidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptxMedidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptx
Medidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptxaylincamaho
 
Google-Meet-como-herramienta-para-realizar-reuniones-virtuales.pptx
Google-Meet-como-herramienta-para-realizar-reuniones-virtuales.pptxGoogle-Meet-como-herramienta-para-realizar-reuniones-virtuales.pptx
Google-Meet-como-herramienta-para-realizar-reuniones-virtuales.pptxAlexander López
 
Segunda ley de la termodinámica TERMODINAMICA.pptx
Segunda ley de la termodinámica TERMODINAMICA.pptxSegunda ley de la termodinámica TERMODINAMICA.pptx
Segunda ley de la termodinámica TERMODINAMICA.pptxMariaBurgos55
 
Mapa-conceptual-del-Origen-del-Universo-3.pptx
Mapa-conceptual-del-Origen-del-Universo-3.pptxMapa-conceptual-del-Origen-del-Universo-3.pptx
Mapa-conceptual-del-Origen-del-Universo-3.pptxMidwarHenryLOZAFLORE
 
LAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptx
LAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptxLAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptx
LAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptxAlexander López
 
El uso delas tic en la vida cotidiana MFEL
El uso delas tic en la vida cotidiana MFELEl uso delas tic en la vida cotidiana MFEL
El uso delas tic en la vida cotidiana MFELmaryfer27m
 
FloresMorales_Montserrath_M1S3AI6 (1).pptx
FloresMorales_Montserrath_M1S3AI6 (1).pptxFloresMorales_Montserrath_M1S3AI6 (1).pptx
FloresMorales_Montserrath_M1S3AI6 (1).pptx241522327
 
definicion segun autores de matemáticas educativa
definicion segun autores de matemáticas educativadefinicion segun autores de matemáticas educativa
definicion segun autores de matemáticas educativaAdrianaMartnez618894
 
AREA TECNOLOGIA E INFORMATICA TRABAJO EN EQUIPO
AREA TECNOLOGIA E INFORMATICA TRABAJO EN EQUIPOAREA TECNOLOGIA E INFORMATICA TRABAJO EN EQUIPO
AREA TECNOLOGIA E INFORMATICA TRABAJO EN EQUIPOnarvaezisabella21
 
Presentación inteligencia artificial en la actualidad
Presentación inteligencia artificial en la actualidadPresentación inteligencia artificial en la actualidad
Presentación inteligencia artificial en la actualidadMiguelAngelVillanuev48
 
Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptx
Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptxCrear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptx
Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptxNombre Apellidos
 
Tecnologias Starlink para el mundo tec.pptx
Tecnologias Starlink para el mundo tec.pptxTecnologias Starlink para el mundo tec.pptx
Tecnologias Starlink para el mundo tec.pptxGESTECPERUSAC
 
GonzalezGonzalez_Karina_M1S3AI6... .pptx
GonzalezGonzalez_Karina_M1S3AI6... .pptxGonzalezGonzalez_Karina_M1S3AI6... .pptx
GonzalezGonzalez_Karina_M1S3AI6... .pptx241523733
 
dokumen.tips_36274588-sistema-heui-eui.ppt
dokumen.tips_36274588-sistema-heui-eui.pptdokumen.tips_36274588-sistema-heui-eui.ppt
dokumen.tips_36274588-sistema-heui-eui.pptMiguelAtencio10
 

Último (20)

Hernandez_Hernandez_Practica web de la sesion 11.pptx
Hernandez_Hernandez_Practica web de la sesion 11.pptxHernandez_Hernandez_Practica web de la sesion 11.pptx
Hernandez_Hernandez_Practica web de la sesion 11.pptx
 
Explorando la historia y funcionamiento de la memoria ram
Explorando la historia y funcionamiento de la memoria ramExplorando la historia y funcionamiento de la memoria ram
Explorando la historia y funcionamiento de la memoria ram
 
El uso de las TIC's en la vida cotidiana.
El uso de las TIC's en la vida cotidiana.El uso de las TIC's en la vida cotidiana.
El uso de las TIC's en la vida cotidiana.
 
TEMA 2 PROTOCOLO DE EXTRACCION VEHICULAR.ppt
TEMA 2 PROTOCOLO DE EXTRACCION VEHICULAR.pptTEMA 2 PROTOCOLO DE EXTRACCION VEHICULAR.ppt
TEMA 2 PROTOCOLO DE EXTRACCION VEHICULAR.ppt
 
Excel (1) tecnologia.pdf trabajo Excel taller
Excel (1) tecnologia.pdf trabajo Excel tallerExcel (1) tecnologia.pdf trabajo Excel taller
Excel (1) tecnologia.pdf trabajo Excel taller
 
LUXOMETRO EN SALUD OCUPACIONAL(FINAL).ppt
LUXOMETRO EN SALUD OCUPACIONAL(FINAL).pptLUXOMETRO EN SALUD OCUPACIONAL(FINAL).ppt
LUXOMETRO EN SALUD OCUPACIONAL(FINAL).ppt
 
Medidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptx
Medidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptxMedidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptx
Medidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptx
 
Google-Meet-como-herramienta-para-realizar-reuniones-virtuales.pptx
Google-Meet-como-herramienta-para-realizar-reuniones-virtuales.pptxGoogle-Meet-como-herramienta-para-realizar-reuniones-virtuales.pptx
Google-Meet-como-herramienta-para-realizar-reuniones-virtuales.pptx
 
Segunda ley de la termodinámica TERMODINAMICA.pptx
Segunda ley de la termodinámica TERMODINAMICA.pptxSegunda ley de la termodinámica TERMODINAMICA.pptx
Segunda ley de la termodinámica TERMODINAMICA.pptx
 
Mapa-conceptual-del-Origen-del-Universo-3.pptx
Mapa-conceptual-del-Origen-del-Universo-3.pptxMapa-conceptual-del-Origen-del-Universo-3.pptx
Mapa-conceptual-del-Origen-del-Universo-3.pptx
 
LAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptx
LAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptxLAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptx
LAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptx
 
El uso delas tic en la vida cotidiana MFEL
El uso delas tic en la vida cotidiana MFELEl uso delas tic en la vida cotidiana MFEL
El uso delas tic en la vida cotidiana MFEL
 
FloresMorales_Montserrath_M1S3AI6 (1).pptx
FloresMorales_Montserrath_M1S3AI6 (1).pptxFloresMorales_Montserrath_M1S3AI6 (1).pptx
FloresMorales_Montserrath_M1S3AI6 (1).pptx
 
definicion segun autores de matemáticas educativa
definicion segun autores de matemáticas educativadefinicion segun autores de matemáticas educativa
definicion segun autores de matemáticas educativa
 
AREA TECNOLOGIA E INFORMATICA TRABAJO EN EQUIPO
AREA TECNOLOGIA E INFORMATICA TRABAJO EN EQUIPOAREA TECNOLOGIA E INFORMATICA TRABAJO EN EQUIPO
AREA TECNOLOGIA E INFORMATICA TRABAJO EN EQUIPO
 
Presentación inteligencia artificial en la actualidad
Presentación inteligencia artificial en la actualidadPresentación inteligencia artificial en la actualidad
Presentación inteligencia artificial en la actualidad
 
Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptx
Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptxCrear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptx
Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptx
 
Tecnologias Starlink para el mundo tec.pptx
Tecnologias Starlink para el mundo tec.pptxTecnologias Starlink para el mundo tec.pptx
Tecnologias Starlink para el mundo tec.pptx
 
GonzalezGonzalez_Karina_M1S3AI6... .pptx
GonzalezGonzalez_Karina_M1S3AI6... .pptxGonzalezGonzalez_Karina_M1S3AI6... .pptx
GonzalezGonzalez_Karina_M1S3AI6... .pptx
 
dokumen.tips_36274588-sistema-heui-eui.ppt
dokumen.tips_36274588-sistema-heui-eui.pptdokumen.tips_36274588-sistema-heui-eui.ppt
dokumen.tips_36274588-sistema-heui-eui.ppt
 

Javascript: potenciando la web desde 1995

  • 1. JavaScript:  Potenciando  la  web  desde  1995   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  • 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)
  • 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. 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. 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. 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. JavaScript:  Potenciando  la  web  desde  1995   Lenguaje  Interpretado   Herramientas  para  medir  la  calidad  del  soZware   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. El  JavaScript  me  confunde   (O  por  qué  JavaScript  no  2ene  nada  que  ver  con  Java)  
  • 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   -­‐  Mozilla's  JavaScript:  Firefox   -­‐  Rhino  (Java)   TraceMonkey   -­‐  KJS  (KDE):  Conqueror   -­‐  JavaScriptCore:  Apple  Inc.   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Buenas  prácCcas  y  patrones   (O  cómo  podemos  aprovechar  realmente  JavaScript)  
  • 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. 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. 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. JavaScript:  Potenciando  la  web  desde  1995   ProtoCpos   Carlos Benitez (@etnassoft) Enrique Amodeo (@eamodeorubio)
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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)
  • 72. JavaScript:  Potenciando  la  web  desde  1995   Buenas  prácCcas  y  patrones   OO  sin   ns.Evento  =  funcNon(nombre){          var  id  =  nombre  ||  '<anonymous>';   prototype:          var  subscriptores  =  [];   Encapsulación          var  subscriptorYaRegistrado  =  funcNon(subscriptor){//...          };          var  noNficarSubscriptor  =  funcNon(evento,  subscriptor){//...          };          this.registrarSubscriptor  =  funcNon(subscriptor){//...          };          this.borrarSubscriptor  =  funcNon(subscriptor){//...          };          this.noNficar  =  funcNon(callback){//...          };          this.destruir  =  funcNon(){//...          };   };   //..   Carlos Benitez (@etnassoft) var  onClick  =  new  ns.Evento('onclick'); Enrique Amodeo (@eamodeorubio)
  • 73. JavaScript:  Potenciando  la  web  desde  1995   Buenas  prácCcas  y  patrones   OO  sin   ns.Evento  =  funcNon(nombre){          var  id  =  nombre  ||  '<anonymous>';   prototype:          var  subscriptores  =  [];   Encapsulación          var  subscriptorYaRegistrado  =  funcNon(subscriptor){//...          };          var  noNficarSubscriptor  =  funcNon(evento,  subscriptor){//...          };          this.registrarSubscriptor  =  funcNon(subscriptor){//...    Datos  privados          };          this.borrarSubscriptor  =  funcNon(subscriptor){//...          };          this.noNficar  =  funcNon(callback){//...          };          this.destruir  =  funcNon(){//...          };   };   //..   Carlos Benitez (@etnassoft) var  onClick  =  new  ns.Evento('onclick'); Enrique Amodeo (@eamodeorubio)
  • 74. JavaScript:  Potenciando  la  web  desde  1995   Buenas  prácCcas  y  patrones   OO  sin   ns.Evento  =  funcNon(nombre){          var  id  =  nombre  ||  '<anonymous>';   prototype:          var  subscriptores  =  [];   Encapsulación          var  subscriptorYaRegistrado  =  funcNon(subscriptor){//...          };          var  noNficarSubscriptor  =  funcNon(evento,  subscriptor){//...          };    Métodos          this.registrarSubscriptor  =  funcNon(subscriptor){//...          };   privados          this.borrarSubscriptor  =  funcNon(subscriptor){//...          };          this.noNficar  =  funcNon(callback){//...          };          this.destruir  =  funcNon(){//...          };   };   //..   Carlos Benitez (@etnassoft) var  onClick  =  new  ns.Evento('onclick'); Enrique Amodeo (@eamodeorubio)