Your SlideShare is downloading. ×
0
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Mejorando.la: Curso Profesional de Frontend, Dominando JavaScript

2,152

Published on

JavaScript las partes feas y geniales, y patrones

JavaScript las partes feas y geniales, y patrones

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

No Downloads
Views
Total Views
2,152
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
69
Comments
0
Likes
8
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Dominando JavaScript por David Avellaneda @davsket
  • 2. @davsket?
  • 3. acerca de mi • Ingeniero de Sistemas… • Cofundador de monoku y monomi.co • Co-organizador de BogotáJS • Co-organizador de JSConf.co
  • 4. Agenda
  • 5. Agenda • JavaScript: Las partes buenas • JavaScript Orientado a Objetos (OO) • Closures, Mixins, Objetos, Prototipos • Patrones de Diseño y MV* • APIs Rest, AJAX y Sockets (*)
  • 6. JavaScript: Las Partes Buenas
  • 7. Recomendación: Compren el Libro
  • 8. Las Partes Buenas?
  • 9. JavaScript: The Good Parts 80% Intro a JS 2% Hermosas características 10% Feas características 10% Malas partes
  • 10. Las Partes Feas
  • 11. Scope
  • 12. var a = 5, b = 10 ! function noGlobal( a ){ var b = 3 a = a*2 return a * b } ! noGlobal( 1 ) // 6 a // 5 b // 3
  • 13. typeof
  • 14. typeof new Number(8) == "object" typeof 8 == "number"
  • 15. parseInt
  • 16. parseInt ¡cuidado con los legacy browsers!
  • 17. parseInt( "08" ) // 0 parseInt( "08", 10 ) // 8 ! Chrome ya no...
  • 18. Números Flotantes
  • 19. Gracias a "Binary Floating-Point Arithmetic (IEEE 754)" ! 0.1 + 0.2 != 0.3
  • 20. Valores Falsos (abstract equality comparison)
  • 21. '' == '0' // false 0 == '' // true 0 == '0' // true ! false == 'false' // false false == '0' // true ! false == undefined // false false == null // false null == undefined // true ! ' trn ' == 0 // true
  • 22. '' === '0' // false 0 === '' // false 0 === '0' // false ! false === 'false' // false false === '0' // false ! false === undefined // false false === null // false null === undefined // false ! ' trn ' === 0 // false
  • 23. hasOwnProperty
  • 24. Cualquiera puede modificar el prototipo y generarte problemas!
  • 25. with
  • 26. var a = { p: 0 }, c ! with( a ){ p = 3 c = 5 } ! a.p // 3 a.c // undefined c // 5
  • 27. eval
  • 28. No es tan maaaalo como lo pintan!
  • 29. eval("myValue = myObject." + myKey + ";");
  • 30. en vez de:
  • 31. myvalue = myObject[myKey]
  • 32. No usen eval para ejecutar código desde el servidor u otro servicio AJAX
  • 33. switch
  • 34. ... fall through .. ! va de case en case naturalmente (requiere usar break) valida con equivalencia simple
  • 35. var blah = 0; switch (blah) { case -1: alert('negative 1'); case 0: alert(0) case 1: alert(1); break; case 2: alert(2); break; default: alert('default'); }
  • 36. Doble Filo!!
  • 37. Punto y Coma Opcional (optional semicolon) ! - Código más limpio -
  • 38. Declaraciones Sin Corchetes (block-less statements)
  • 39. if( a ){ a.b = 3 }
  • 40. if( a ) a.b = 3
  • 41. if( a ){ a.b = 3 a.c = 4 }
  • 42. if( a ) a.b = 3 a.c = 4
  • 43. if( a ){ a.b = 3 } a.c = 4
  • 44. ++ --
  • 45. var a = [1,2,3,4], i = 0 a[i++] // 1 a[++i] // 3
  • 46. new
  • 47. "this"
  • 48. métodos vs funciones
  • 49. hoisting
  • 50. el orden de definición de variables y funciones afecta el resultado
  • 51. function f(){ alert( a ) a = 5 } f()
  • 52. function f(){ alert( a ) a = 5 } f() // ReferenceError a is not defined
  • 53. function f(){ alert( a ) var a = 5 } f()
  • 54. function f(){ alert( a ) var a = 5 } f() // undefined
  • 55. function f(){ var a alert( a ) a = 5 } f() // undefined
  • 56. var a = 10 ! function f(){ alert( a ) var a = 5 } ! f()
  • 57. var a = 10 ! function f(){ alert( a ) var a = 5 } ! f() // undefined
  • 58. var a = 10 ! function f(){ var a alert( a ) a = 5 } ! f() // undefined
  • 59. var a = 10 ! function f(){ a = 5 alert( a ) function a(){} } ! f() // ? a // ?
  • 60. var a = 10 function f(){ a = 5 alert( a ) function a(){} } f() // 5 a // ?
  • 61. var a = 10 function f(){ a = 5 alert( a ) function a(){} } f() // 5 a // 5 ? no... 10!!
  • 62. The Cool Parts + Patterns
  • 63. Prototype
  • 64. JavaScript es Orientado a Objetos (OO) pero no tiene Clases ! JavaScript es basado en Prototipos
  • 65. functions con prototype
  • 66. function Persona( name ){ this.name = name } Persona.prototype.alertName = function(){ alert( this.name ) } Persona.prototype.setAge = function( age ){ this.age = age } var juan = new Persona( 'juan' )
  • 67. juan.alertName() // juan juan.setAge( 25 ) ! Persona.prototype.sayYolo = function(){ alert(this.name + ': YOLO!') } ! juan.sayYolo() // juan: YOLO!
  • 68. Object.create( proto, properties )
  • 69. constructor
  • 70. juan.constructor // function Persona( ...
  • 71. __proto__ (no es standard) (firefox, chrome, opera, android, ie11)
  • 72. juan.__proto__
  • 73. Function are first-class objects
  • 74. ¿first-class objects? • se pueden asignar a variables • se puede recibir/pasar como argumentos • se pueden retornar en una función • son objetos y por lo tanto tienen propiedades
  • 75. Function are first-class objects => Chain Callback Observable Delegation Closure MVC MVVM MV*
  • 76. Chain
  • 77. var o = { i: 0, f: function(){ ++ this.i return this } } o.f().f().f() o.i // 3
  • 78. $('#myelem') .hide() .css({..}) .data(..) .fadeIn(..)
  • 79. Callback ( Async ) "las funciones pueden ser pasadas como argumentos"
  • 80. Es como una sala de espera en la que dependiendo del turno tu puedes ser llamado
  • 81. function caller( cb ){ setTimeout(function(){ cb( new Date() ) }, 1000) } caller(function( now ){ alert( now ) })
  • 82. $(document).on('click', click) function click(){ alert('auch!') }
  • 83. $.ajax({ url: ".", type: "get" }) .done(function(){ console.log("async!") }) console.log("sync")
  • 84. Observable + "y Las funciones pueden asignarse a variables"
  • 85. Este patrón permite que diferentes interesados se suscriban a un objeto escuchando eventos
  • 86. GIST!
  • 87. Delegación
  • 88. Observar cientos de elementos con cientos de eventListeners no es recomendable
  • 89. Aplica en listados
  • 90. document.getElementById("parent-list") .addEventListener("click",function(e) { if(e.target && e.target.nodeName == "LI") { console.log("List item ", e.target.id.replace("post-")," was clicked!"); } });
  • 91. $('#padre').on('click', '.hijo', callback)
  • 92. Closures
  • 93. se reduce a: invocación inmediata de funciones
  • 94. (function(){ var hidden = 8 }()) ! console.log( typeof hidden ) // undefined
  • 95. MVC / MVVM / MV*
  • 96. Sfotipy!
  • 97. Sfotipy! • Agregar jQuery • Crear nuestro Modelo • Crear nuestra Vista • Crear nuestro Controlador • Observables!
  • 98. Gracias!!

×