I SJ = £ =F CURSO VISUALY PRACTICO DLT acodkoMmacolan<-Like ms backend Clases \ Prototipado \ Creacion, modelado e interaccion de objetos \ Eventos(BES S5F5 curso ViSuAL Y PRACTICO Direccién Edioral ——_Atanci6n a ectr, Miguel Lodertremer ——_suseripcionasy ventas ae usershop@redusers.com rs #54011) 4110-5700 Fernando jam Nv +52-58-8121-9560 WEB Full Stack wes Hacono Publicidad pubcsadreeuserscom Desarrollo frontend fey-Codee dake) srotuccinqatea aHOnNTONDE Gustavo De Matteo tiburon Cp Von await chs APE 9108) ito Bare el 54471) 4506 96408 ie Dec ‘altel Si QBAPre Siew Pea 122 (SSM, Ben As e480 4406-01 14 Mea DF oreo itacraSA dC, Nebel? Ia ache Pda 1 Gt, SEES Men er Cosi str pests, bes ris SA CV Ceo W 58D Gl Grr Mec, Oeepcon TSCA) Ds eal CC oun Tel Si3670. an Cebu Sekean SA, hatin de Para 35 pa 2 Sa ee Lr S1T 1250 reo 2 ray exe SAL, Prey 132, engi Te 280 0765 Vea Der bs Carrs Bou Aas Too oe as P29 San Nn. owe ha La Pa Cas, L022 420. Ge yuay racic Sai Tec. st zit; Fox aS Novara 180,130, CSE, Cua Auivona do Bases As. Aree Fata Woden mgt © WANE 6255-85 Ts cos enact pbc reps nen pao inmate ps pep wt de ‘saa edi Laer we xune esa alr py ier eta de freaci ncuraio yo ean els erica ee Ee, ‘nano ptt at arcana bss ab eee SS, UE le TP SERERS 3 Om CEN mR SIRS. (ase 225 ya, an aa. Ac, JavaScript orientado a objetos BMI La programacién orientada aobjetos, IB Clases en JavaScript IB JavaScript y el prototipado HIG Creacion, modelo e interaccién de objetos HII Eventos y callbacks Wee basi BIB Captura de los eventos del usuario BIE Errores y excepciones en nuestro cédigo CONTENIDO ADICIONAL ONLINE Codigo fuente, elementos graficos utilizados ‘en los ejemplos y otros contenidos Cerne u MMs ania Keel | eee eee ceecarian TESS ie (co redusers.com/u/programadorwebLa programacion orientada a objetos La programacién orientada a objetos es uno de los Es importante destacar que este paradigm, asi como tantos paradigmas de programacién disponibles en ‘cualquier otro, no es el mejor ni el peor, sino que esta Ja aetualidad, Como en et caso de las funciones, uno programado y pensado de una forma diferente. de los propésitas de los abjetos es la encapsulacién de Al mismo tiempo, intenta solucionar cada problematica funcionalldad y del eédigo que eseribimos. de una manera particular. To fr PROGRAMACION ORIENTADA A OBJETOS: Encapsula funciones, procedimientos y funcionalidad general en elementos lNamados objets. Sustenta su escritura en predicados (acciones). Es utiizado principalmente nla resclucion de conceptos matemticos. Es el paradigma utiizado mas comdnmente, Se basa en el uso de funciones {ue encapsulan instrucciones interpretadas por la computadora, Otros para~ ddigmas usan este coma principio, Programacion imperativa En este paradigm, la ejecucion y la estructura del codigo serdn dictadas por os sucesos que ocurran en el sistema, Siglas de “Ienguaje especitico de dominio”, se reffere aun lenguaje creado pst. con el sol fin de resolver un problema particular. Enlas bases de detas, ol lenguaje SOL es el més conocido, ‘abla. Paradigmas de Er Tn programacién mas utilizados. sla capecivad de defnr comportamiantas en nuestro Abstraccién ‘édigo dentro de objetos indapendientes. Cada objeto representa un elemento funcional por si mismo, Hace referencia a ls posibilidad de colocar aquellos Encapsulamiento elementos {funciones, comportamiento,eteétera) ‘en un mismo concopto de abstraccién, Los lenguajes de programacién, como en el caso de JavaScript, adoptan un paradigma especifico ‘que se ve reflejado en su sintaxis yen su semantica, Esta eleceién Teniendo un objeto particular, este puede comportarse Polimorfismo de forma ciferente sin aterar su estado de cara al programador. por parte del lenguaje nos ayudar ‘aenfocarnos en|a resolucién del problema de una manera particular yespecifica. La programacién rientada a objetos se sostiene sobre Las diferentes clases se pueden relacionar entre si, Puaden herodarfuncionalidad una de otra para ge- nerar objetos mas complejos o con mayor definicion en su funcionalided. ‘cuatro pilares bisicos, Dominar ‘ada uno de ellos es fundamental ‘Tobin 02, Pilares de la programacién oriontada a objetos. para escribir cédigo de calidad. REDUSERS Ei PROGRAMADOR WEB Full Stack aClases en JavaScript Enel paradigma orientado a objetos las clases son el componente clave. Con estas podremos aplicar cada uno de los pilares de este paradigma. En JavaScript, a diferencia de otros lenguajes, la creacién de una clase presenta particularidades.a las que debemos estar atentos, Pero gqué es una clase? Podemos det ‘aum elemento que nos sirva para agrupar funcionalidad ycomportamlento. Una manera de replicar un Imagen 01, Las clases son defi de los objetos del mundo real ‘que pretenden representar. Una calculadora y sus por las funciones en nuestra clase, (6 bve elemento det mundo en nuestro c6digo, Como en el ejemplo de esta doble pagina, si queremos definir el comportamiento de una calculadara, crearemos tuna clase que defina todas las funcionalidades de tuna calculadora fisica tales como sumar, estar, dvidir {y multiplicar para que, luego, podamos usarla desde diferentes partes de nuestro cédigo. function Caleuladora() ( var resultado _acumulado function sumaz(valor) { ) function restar(valoz) ( } function multiplicar(valor) ( ) function dividir(valor) { ) function potencia(valor) { ) function function resultado() ( } var micalouladora = new Calculadora(); Clase 06% JavaScript orientado a objetos a =>) {| ——<— a. —Una clase es similar a un plano de cS construcci6n. Teniendo el plano A Re oeatio detallado de una casa, un albaiiil JavaScript en su version no cuenta icar cicui i ran conjunto de elementos puede replicar, siguiendo los pasos alli eee aval ee especificados, casas en el mundo real. declaraciones, como clases y objetos, Todas las casas seran idénticas basadas 0 limitarén af uso de in palabra reservada function, en el plano original. (NM // vectaramos una funcién (MMM /* Guardaremos los resultados de las operaciones en esta variable */ + usaremes e: La variable funcién para limpiar acumula los resultados de las operaciones */ "THE /* usarenos esta funcién para escribir Jos resultados de operaciones en a pantalla */ “SL /+ creamos un objeto © instancia de Calculadora */ REDUSERS Ei PROGRAMADOR WEB Full Stack aFunciones publicas y privadas Una vez que hemos creado una nueva instancia, 0 sea un abjeto, es posible acceder alas diferentes Funciones rediante la notacién de punto, Esto quiere decir que, usando la variable donde se encuentra nuestro objet, Una funci6n privada es aquella que no puede ser accedida ni manipulada fuera de la misma clase. las diferentes propiedades y funciones pueden ser accedidas colocando un punto seguido del nombre de la funcion que queramos ejecutar. Solo el objeto, internamente, puede acceder a ella y manipularla. W Creamos una instancia de Caiculadora new Caleuladora(); var micaleuladora W Recedenos 2 1a funcién sumar pasando 20 como valor micaleuladora.sumaz(20); U/ Recedenos a 1a funcién resultado para mostrar I @1 resuitado de 1a operacién anterior miCalculadora.resultado(); ‘Si ejecutamos el eédigo anterior, notaremos que este no funciona como esperamos. :Por qué no podemos ejecutar las funciones de nuestro objeto? Fl mensaje que recibimos nos alerta que la funeién ‘sumar en el objeto miCalculadora no es una funcién 0 no est definida, A pesar de ello, esta se encuentra definida en nuestra clase. La respuesta a la pregunta es que, bajo los conceptos de la programacién orientada a objetos, es pasible ocultar funciones, variables y propiedades hacia los programadores de manera que solo expongamos aquellos puntos que consideremos, ‘que pueden ser manipulados. &n el caso de nuestra caleuladora, la variable resultado_acumulado le sirve al ‘objeto mialculadora para almacenar internamente los resultados de los diferentes ediculos. Por tal motivo seria un error permitir que un programador modificara ‘este valor de forma arbitraria, ya que podria daviar el correcto funcionamiento de nuestro programa. Llamaremos funciones, variables o propiedades privadas ‘aquellos elementos que no queramos exponer fuera de nuestro objeto. En nuestra clase, todas las funciones que hemos declarado son privadas. Por el contrario, las funciones, variables y propiedades ‘que sf puedan ser manipuladas desde fuera del objeto tendrin el nombre de pablicas. Savca_Netwot Tina Meslcaiaors TY, spucriet> ais One, coun 8 © ¥ tp vB Pesenetag (@ Uncaughe Iypeteror: miCalculadora.sumar 4s not + function Alintentar ejecutar les funciones sumar y resultado de miCalculadora, obtenemos, ‘errores de ejecucién. Clase 061B1 JavaScript orientado a objetosEl patron self A diferencia de otros lenguajes de programacién, y como ya nos habremos dado cuenta en JavaScript no tenemos una forma para especifiarie aun elemento si queremos «ive sea privado o piblico, Otros lenguajes hacen uso de palabras reservadas como public o private para Aiferenciar estos estados. En JavaSeripttendremos que aveegldrmosia de forma mas ceativa Homos agregado una nueva variable llamada sell Esta variable soré igual» this do JavaScript, que incluye un identifcador dea clase ‘funcion que fa contine. En nuestro caso, al acceder a this al principio de nuestra clase, el valor de this sors equivalent cha clasay ads la variables ‘yfunciones que pudiera contener ¢Para qué creamos esta nueva variable y hacemos Ja asignacién de this? El objetivo es implementar el patron self, Esto quiere decir: tener una variable global ala clase, que nos permita acceder tanto a funciones privadas como exponer funciones de forma publica, Con esta nueva variable, modificaremos nuestra clase calculadora para poder exponer las funciones piiblicas necesarias para cada operacién. function Caleuladora() { his; yultado _acumulado = var self seif.cumar = function(valor) { resultado _acumulado += valor: reeultado(); self.restar = function(valor) { resultado _acumulado -= valor; resultado()) self.multiplicar = function(valor) { resultado _acunulado *= valor: resultade(); REDUSERS Bi PROGRAMADOR WEB Full Stack function Caleuladora() ( var self = this; jultado _acumulado = 0; function sumar(valor) ( Se usa el nombre self, que en inglés hace referencia a uno mismo, para diferenciarlo de this, que en la lengua castellana podria tener una connotaci6n similar. self.dividir = function(valor) ( resultado(); jultado_acumulado /= valor; jelf.potencia = function(valor) ( resultado _acumulade = Math. pow(resultado_acumulado, valor); resultado(): funetion() { 0; self.limpiar ultado_acumulado ultado(); function resultado() ( conscle.log(resultado _ acumulado);var miCalculadora = new Caleuladora(); uw au ee micalevladora.sumar(20); miCalevladora.multiplicar(15); micalculadora-limpiar(); TR | tements Console Appiation [T5inscet a 48) self -Aimptar = function’) ( a resultado acumulado = 0; 2 resultade()s a) 45 function resultado() ( “6 Console, Log(resultado_acunsado); a) a) | var aiCalculadora ~ new Calculadora()s 5 $2) wicatculadors.sunar( 20); 53) eiCaiculadora-qultiplicar(15); a] SiCalculadore. iaplor(); ss > Une 42, column 6 Console © ¥ © ¥ G Presenelog 300 Hemos realizado varios cambios a las funciones de nuestra calculadora, Para poder exponer las funciones de forma pablica, las transformamos en funciones anénimas y las asignamos como una propiedad nla variable self self.sumar = function(valor) { resultado _acumulado += valor; resultade(): Ya que self contiene una referencia ala clase, cualquier propiedad que agreguemos en esta variable ser automaticamente, expuesta como elemento pablico as W a“ sumamos 20 Bl resultado es 20 Multiplicamos 61 resultado por 15 WI BL resuitado es 300 Zimpiamos la variable acumulador El resultado es 0 Sources Network Timeline Profies Seaunty a Imagen 02. Las funciones ahora son piblicas y pueden ciecutadas desde fuera de la clase. Al mismo tiempo, las funciones pablicas llaman a la funcién resultado operacién on la consol x | PATRONES DE DISENO El patron self do JavaScript es lo que se conoce ‘como un patrén de disofo. Existon miles de patrones de disefo, cada uno 2 y basados estos patrones contenido en diferentes catego ‘en lo que realizan. Basicament nos permiten manipular ob Hay patrones para acceder a datos en una base de datos y hasta para recorrer una lista de informacién en la memoria, Un patron de disefio. ‘es considerado la mejor forma de resolver un Clase 06 JavaScript orientado a objetosModificaci6n | de comportamientos En JavaScript se encuentran muchas formas de conseguir el mismo resultado, De cualquier manera, tina regla de oro es realizar la menor cantidad de c6digo posible. Mi Por otro lado, si bien JavaScript es un enguaje orientado a abjetos, su implementacion, por su dinamsme, difiere de otros lenguajes. Apliquemos otro de os pilares dela programacin orientada a objetos, el polimorfismo, de una forma en que JavaScript entienda, 1as més compacte y optimizado, mejor. / Seleccionanes 1a operacién ‘sunar’ Wy sumamos 20 miCalculadora-usar(*sumar’).calcular(20); U Seleccionamos 1a operacién ‘restar’ Wy estamos 15 miCalculadora.u x (‘restar’).calcular(15); H/ Ximpiamos el acumulador micalculadora.uear(‘Limpiar’’ Como vemos en las Lineas anteriores, modificamos Ja forma en Ja que nuestra caleuladora trabaja. Esta modificacién contiene varios conceptos positivas, Por un lado, nos permite crear eédigo funcional; en vez de ejecutar linea a linea, es posible crear oraciones de ejecucién de funcionalidad y asf resulta mas facil de leer y plantear, miCalculadora.usar(*sumar’).calcular(20); 1 Catcutadora, usa 1a funcién “sumar” y Wf calcula 1a operacién con el valor 20. Por otro lado, estaremos aplicando polimorfismo. Esto es, esperando que un objeto se comporte de forma diferente sin que haya cambiado la forma general de usarlo, Tras cada llamada a usar, el objeto miCalculadora se comportard segin esa accién, pero siempre tendremos la funcién catcular para poder realizar los célculos basadas en la operacién seleccionada. function Calculadora() { var self = this; REDUSERS Ei PROGRAMADOR WEB Full Stack var resultado _acumulado = 0; W Bslanos var operaciones = ( eumar: funetion(valor) { resultado _acumulado += valor; resultado(); mb reste .2 operaciones en un objeto JSON function(valor) { resultado _acumulado - resultado(); » multiplicar: function(valor) { valor; resultado _acumulado *= valor; resultado() th dividix: function(valoz) ( resultado _acumulado /= valor; resultado(); oe potencia: function(valor) resultado _acumulado = Math.pow (resultado _acumulado, valor); reaultado(); WW Definimos 1as funciones usar y Wl calevlar como piblicas elf.usar i Function(operacion) ¢ elf.calcular = function() ( we self.limpiar = function() { resultado _acumulado = 0; resultado(); function resultade() { consele.log(resultado _ acumulado);Objetos JSON Para poder simular el polimorfismo de nuestro objeto, necesitaremos manipular las referencias a las funciones. Esto quiere decir deberemos hacer que una funcién apunte a otra funcién en un momento particular de la ejecucién del cédigo. De esta forma, una funcién que usébamos para sumar valores, en determinado momento var migson walor’: 123, — mayen 03. Un objeto tipo JSON tiene ‘una estructura especifica. Cada propiedad debe ser identificada mediante un texto, seguida de dos Las siglas JSON hacen referencia al nombre JavaScript Object Notation, o en castellano, notacién de objetos de JavaScript. Una forma de describir y crear, de manera rapida, objetos sin necesidad de definir una clase. Un objeto JSON es una coleccién de propiedades asaciadas a valores, que pueden ser funciones, otros objetos o cualquier tipo de dato primitivo. Para nuestra calculadora, el objeto JSON contiene cada una de las funciones con las operaciones matematicas previamente creadas, smostrarValoz!: console. log(this.valer); comenzard a restar, pero desde el punto de vista del programador pareceré que nada cambi6. En el c6digo, aislamos las operaciones matemticas que ya teniamas en un objeto del tipo JSON con el objetivo de poder acceder a las funciones de forma mas répida. Los objetos ISON son una forma rapida de crear nuevos objetos sin necesidad de tener que declarar una clase. function() ( miJSON.nostrarValor(): (3 jsonntmt x s| 5 chi>Programacién ontentada 2 objetesc/h1> 7, 8 9 2 var miSON = { a yslor': 123, 12, “nostrarValor*: function() { 3 ‘console log( this. valor); “uy % 46 47) #i3S0N.mostrarValor(); 18 19) 20| Amagen 04. Se puede acceder a las Rae USK Nees propiedades del objoto Console desde funciones del mismo © ¥ t + GPresenelog objeto con a palabra reservada this. Todas las x a propiedades on un objeto ISON son pablicas, Clase 061 JavaScript orientado a objetosSobrescribir funcionalidad Ya contamos,en nuestra caculadora, con el objeto que nos permitiré contener las operaciones matemétics. to de la calculadora cambie cuando el desarrollador se lo pida El paso siguiente es hacer que el comportai self.usar = function(operacion) { self.calcular = operacions elf; [operacion); return Con estas dos simples lineas ereamos una gran cantidad de funcionalidad, Por una parte, la asignacién a la propiedad calcular nos permite sobrescribir lo que esta haya contenido con algo nuevo. Gracias al dinamismo de JavaScript, odemos modificar cualquier propiedad con otro elemento, eo 5 ‘Enna Dee mueeeusns Beata - ma ee ~- Uesicoumas mage 08, Const Lamisma funcién Ss - de formas diferentes \, dependiendo de la funcién [______matematica proviamente ‘seleccionada, eT / samos 12 funcién ‘usar’ miCalculadora.vsar(‘sumar’).. para elegir la operacion eelf.calcular = operacioneetoperacion|; "lll // La variable ‘operacion’ contiene ‘Ya que la variable operacion contiene el nombre de la funcidn que necesitaremos ejecutar, podemos acceder al ‘objeto JSON contenido en operaciones y tomar la referencia adicha funeién. Todos las objetos en JavaScript pueden ser manipulados como un diccionario que contiene nombres, por tanto, al enviar la palabra sumer, esta entrada se encuentra dentro del objeto |SON, tomando la funcién a la {que apunta y asignandola,finalmente, en caleular. Ahora Jafuncién calculares igual ala funcién sumar del objeto JSON, El Gltimo paso es el darle al programador una forma de seguir accediendo a las funciones del objeto calculadora. Para esto necesitaremos retornar, en cada funci6n, un objeto que represente todas las funciones que tenemos disponibles piblicamente. return self; Alretornar a varlable self estamos devolviendo el mismo ‘objeto calculacora, pero ahora con las modificaciones previamente hechas. Esto quiere decir que el mismo “objeto podré ser accedido por el programador, pero con la funcién catcular, ahora, apuntando a la operacién matematica selecclonada antes. REDUSERS Ei PROGRAMADOR WEB Full Stack (el nombre pasado en 1a llamada a usar Los objetos en JavaScript pueden ser tratados como un diccionario de nombres. ELnombre de cada entrada, propiedad o funcién, enel objeto, se transformara en una entrada dentro del diccionario. Estas entradas son Gnicas y nose pueden repetir. TTT // Retornamos 1a referencia a toda la clase calculadoraJavaScript y el prototipado Ya sabemos que JavaScript es un lenguaje orientado a objetos, pero a diferencia de otros lenguajes, como Java ‘0 C#, no usa el modelo de herencia clasico para sostener este pilar, sino que lo hace por medio del prototipade de elementos. Este modelo hace que todos las abjetas en JavaScript contengan una propiedad llamada prototype. Esta propiedad es, a su vez, un objeto y contiene las detalles del elemento del cual se hereds la informacién, Asi, nuestro objeto miCalculadora, en su prototype ids viejo (Object) pasando por sus intermediarios (Calculadora). Hagamos uso de este concepto agregando, al final de nuestro c6digo, una nueva operacién a nuestra ealeuladora. calouladora.prototype. function() { contiene ala clase Caleladera y al mismo tempo, la » clase Caleuadoracontiene al elemento primitiv Object. A dlferencia de otros engusfes,podremos modifica [iCal ouledoret cualgulera de los elementos involucrados en esta cadena de prototipos haciendo que todos aquellos que hayan hteredado de elos, también se vean modifcados. Sibien esto puede resultar complicado al principio, no desesperemos, es mas simple de lo que parece. ‘Mediante la palabra reservada prototype De momento solo visualicemos este concepto como fe agregamos una nueva funcién andnima una cadena de elementos que se entrelazan, desde el seem ee elemento mas nuevo (miCatculadore) hasta el elemento Horebioros ale aver leradedaass lara read a partrde esta clase contendrén esta func, Come hemos moiiicado un elemento 3 | Console = de la cadena, todos los elementos mas nuevos © ¥ top ¥ @ Preserve log de ella también se modifican. Agreguemos, > elcalculadora ntonces, la osibidd de memorize un valor © Feateatators B ennuestacalewador. “atealor: undefined aaa tomar teers) Vomos i cadena de ¥_proto_: Object herencias por medio —— eee oe er on Gh iodide add En JavaScript, modificar cn ae los objetos y las clases Peamroctors Catcutedore( heredados en tiempo de > _proto_: Object > prove? () [[Functiontocation}]= dndex.htal:1@ > [1Scopes]]: Scopes{1] > proto: Object ejecucién afecta de forma directa a todos los objetos que hayan heredado de ellos. Clase 061B1 JavaScript orientado a objetosfunction Caleuladora() { var self = this; var opezaciones = { sumar: function(valoz) ( /* Modificamos en todas las referencias a resultado _acumulado para que self. _resultado_ acumulado */ self. _ resultado _acumulado += valor; resultado(); ie apunte a function(valor) ( self. resultado _acumulado -= valor; resultado(); he /* Exponemos 1a variable para que pueda ser accedida de forma publica */ self. _ resultado _acumulado self.limpiar = function() { 1) Aqui. tambisin modificamos las referencias 1 a resultade _acumulado para que W/ apunte a self. _ resultado _acumulado self. resultado _acumulado = 0; yultade(); Podemos ver en el cédigo que hemos realizado cambios importantes en su estructura. Esto se debe principalmente 2 que, al usar variables y funciones privadas, una nueva funcién agregada mediante prototipado no puede tener acceso a los elementos privados. Pensemas que estamos agregando una funcién fuera de la clase pero, que de alguna forma, formaré parte de ella, Es necesario, entonces, exponer Ja variable _resultado_acumulade y asf poder usarla desde Ia nueva funcién. REDUSERS Bi PROGRAMADOR WEB Full Stack En JavaScript es normal exponer las funciones y las propiedades de forma ptiblica. A diferencia de otros lenguajes de programacién donde ocultarlas del alcance del programador es una prioridad, aqui no representa un problema. Simplemente deberemos agregarle un guién bajo al inicio para denotar que es un elemento privado y no debe ser modificado. Por timo agregaremos la nueva funci6n, la que nos permitiré memorizar el valor actual de la variable Fesultado_acumulado para ser usado en operaciones previas. Calouladora.prototype.menorizar = function() ¢ /* Si no hemos guardado un dato guardamos el valor actual de _ reaultado_acumulado */ Af (this.memoria === undefined) ( this.menoria = this. resultado _ acumulado; } else ( J* 8i ya contamos con un valor en memoria Jo recuperamos y remplazamos el valor de _ resultado _acumulado */ thie. resultado _acumulado = this. memoria; thie.memoria = undefined; 2 oe WH waego de realizar cAlculos menorizanos We resultado micalculadora.memorizar(); WH Uimpiamos 1a calculadora, pero no su HW menoria micalculadora.limpiar();i! Volvencs a tomar lo menorizado micalculadora.memorizar(); HW Rplicames un calculo miCalculadora.usar(*sumar’).calcular(45); Un ejercicio avanzado Dejemos un momento de lado nuestra caleuladora, para aplicar el concepto de prototipado en tareas mds avanzadas. Muchos de los objetos preexistentes en JavaScript no slempre tienen todas las funclonalidades que nosotros podriamos necesita. Tomemos como ejemplo a los arrays. Si bien contamos con gran cantidad de funciones para trabajar con ellos, no todas estan disponibles. fs claro que los array proveen una gean cantidad de funclonalidad de forma natva, De cualquier ‘manera, podriamos necesitar un nuevo conjunto de funeionalida no disponible. Veamnos el siguiente cbdigo: /* Una funcién que nos ayuda a crear ebjetos persona */ function crearPersona(nombre, apellido, end 7] sicalevtedore.menortzar(}; Ta) aiesleuiadora. mais) Meslculedore:menoricerOs | # [conte © ¥ tp + GB Preeneby prototipada en la cl Calculadora almacer el valor de la iltima ‘operacisn, edad) ( return ( ‘nombre’: nombre, ‘apellide’: apellide, Yedad’: edad # W Creamos un array var azrayPersonas = [17 W¥ Yo Lenamos con personas concat filter find forEach join map Pop push reduce slice splice some length Une das o mas arrays yretorna un nueva array que contione todos los anteriores. Rotorna un nuevo array con tados los valores que concuerdan con un fitro dado. Retorna los valores que concuerden con los pardmetros de busqueda dads. Recorre cada uno de los elementos de un array, Concatona un array y lo transforma en una cadena de texto soparada por un caracter especitico. Crea un nuevo array con el resultado obtenido después de haber procesedo cada uno de los elementos sobre la base de una condicion dada, Quita ol akimo olomanta de un array yo retoma. Adiciona un nuevo elemento al array al final de este. Retorna un Gnico valor sobre la base de una operacién dada Solocciona una parte dol aray y retorna un nuovo array, Adiciona o remueve elementos de un array Verifica si alguno de los elementos del array cumple con una condicidn dada, Retorna un valor representando el conteo de elementos de un array. Clase 061B1 JavaScript orientado a objetosarrayPereonas.push(crearPersona( ‘Mat: 39); arrayPersonas.push(crearPersona(‘Juan’, 25); arrayPersonas.push(cr ‘Kent’, 80)); arrayPersonas.push(cr 46)); arrayPersonas.push(cr ‘Hopper’, 16); “tacono’, ePersona('Clark’, rPersona(‘Hedy’, suamarr’, ePersona('Grace’, Con nuestro array que contiene diferentes personas, necesitaremos reallzar operaciones para selecclonar elementos del array basados en condiciones especificas, pero dejando que el programador pueda decir dichas condiciones. Hagamos un primer intento, function seleccionarMayoresA(edad) { var array temporal = [J; HW Racorzencs el array de personas for (var i = 0; i < arrayPersonas Jength; i++) { /* Si el campo edad es mayor a 1a edad esperada agregamos ese elemento al array temporal */ Af (arrayPersonas[i].edad>edad) { array _ temporal push(arrayPersonas{i]); y // Retornamos el nuevo array con los i valores encontrados return array _ temporal; var mayores = seleccionarMayoresa(30); Imprimimos en pantalla los elementos / encontrados console. log(nayores); Si bien el cédigo anterior cumple su cometide, no es lo suficientemente versatil para ser usado de forma sgenérica, Esto se debe a que la funcién solo puede buscar elementos mayores a una edad particular; también espera que los objetos dentro del array tengan una propiedad edad y, ademas, la iteracion del array espera que la variable arrayPersonas exista haciendo que, si quisiéramos iterar sobre otra variable que contenga un array diferente, esto no fuera posible. Cémo lo solucionamos? La respuesta est en el protatipada, a eS a TIT] | B fmm a] fz z | |B eiteacecstrmtarecyiet : egg Beco tera atten i iaommce ecg |g! 5 oe | lo ae Ov m+ Biumem emule rege agent = i tae Elarrayeslenado ee er ee con S personas. Cada pte mento del array es personas son prt oee ‘un objeto que contiene encontradas & aces atributos asociados: Se aac ‘impresas en la vo bree ‘cada persona, ee “consola, REDUSERS Ei PROGRAMADOR WEB Full Stack// Ceeamos un nuevo prototipo sobre 1 todos 10s arrays Array prototype.seleccionar = function (condicion) { vararray _ temporal = []; for (vari = 0; ixthis.length; iH) { 1 ta funcién prototipe 1 campla una condicién Af (condicion(this{i})) ( array _ temporal.push(this{il); , pera que se return array _ temporal; » 1 ta condicién es definida por el programador var mayores = arrayPersonas. jeleccionar(function (elemento) { return elemento.edad > 30 ve console.tog(mayores): En nuestra nueva versién, usando prototipado, hemos ‘creado una funcién que espera como pardmetro otra funci6n, Esta Gtima debera retornar verdadero © falso sobre la base de la condicién que quiera analizar. Sila respuesta es verdadera, entonces el elemento evaluado sera agregado a la lista de resultados. Esta forma le permite al programador manipular la logica de la funcién a gusto y no depender de lo que nosotros le hayamos provisto, Crear nuevas condiciones, ahora, no requiere crear nuevas funciones, y nos ayuda a repetir menos ‘cédigo. EI resultado sera similar al inicial, pero ahara pedremos ir un poco mas lejos con nuevas funciones, Wf Agregamos otro prototipo para extraer UW valores Array.prototype.extraer = function (condicion) { vararray _ temporal = []; for (vari = 0; icthis.length; i++) ( array _ temporal.push(condicion(this(i])); ? return array_ temporal; is J] Sncadenamos 1a ejecucién y mejoramos H/o estilo de escritura var mayores = arrayPersonas. seleccionar(function (elemento) { return elemento.edad > 30; }extraer(function (elemento) { return elemento.nombr My En este dltimo ejemplo de prototipado, agregamos una nueva funcionalidad. Esta nos permite agregar a un array a aquellos resultados que el programador decida luego de iterar todos los elementos del array. En una misma linea de cédigo y con dos simples pasos sobre el mismo array, uno para seleccionar los mayores a 30 aflos de edad y el otro para seleceionar los nombres de las personas, podemos obtener un nuevo array solo con textos y no con objetos complejos eneste. TR A] | Berens Console Applicaton Soures Nework Th TS anaya x 25, var areay temporal = (15 Fy 23) for (van 4 = 05 4 « ahis.tength; 444) ( 2 SF {eonticton(thisli1)) » sreay-Reaporal puen(ehse($))3 H ae) a a io © ¥ ~ ¥ GB Presenelog Imagen 0. Un array con solo ‘nombres en vez de los objetos complejas. Clase 06 JavaScript orientado a objetosCreacion, modelado e interaccién de objetos Los objetos que hemos creado hasta el momento elf.calcular = function() { ‘cumplen con su funci6n, pero pueden mejorarse. Como % hemos visto, el uso de prototipads es el camino que deberemos seguir en JavaScript, por lo que necesitamos self.limpiar = function() ( modificar nuestro cédigo y orlentarto en esa direceisn, Volvamos, entonces, a nuestra clase Calculadora. y function Caleuladora() { function resultado() ( 1 Esta clase fue creada con un estilo de programacién self. resultado _acumulade = 0; mds cercano a lenguajes como Java 0 CH y, aunque en JavaScript funciona, como hemos comprobado, comenzaremos a encontrarnos con problemas cuando queramos acceder a los distintos elementos, en especial cuando algunos estan marcados como privados y otros aelf.usar = function(operacion) ( camo piiblicas, Adicionalmente, hemos aprendide Tease ' Imagen it. i Alejecutar un analizador | de ejecucién desde et i or, vemos que la ejecucion de nuestra primera versién de la calculadora tarda un poco més de 14 milisegundos. REDUSERS J PROGRAMADOR WEB Full Stack 8el concepto de prototipad, por lo que deberiamos orientarnos a este modelo para crear nuestras clases, yobjetos, Hagamos el primer cambio. var Calouladora = function() ( this. resultado _acumulade = 0; » Calculadora.prototype.calcular = function oft calculadora.prototype.usar = function (operacion) { Calculadora.prototype.limpiar = function ot this. _ resultado this, _ resultado(); is acumulade = 0: caleuladora.prototype. _reaultado = function () { console.log(this. _ ts esultado _ acumslado) calculador: prototype. funetion() ( Af (this, memoria === undefined) ( this. memoria = thie. _Feeultado _ acumulado; } else ¢ thie. resultado _acumulado = this. _menoria, this. _memoria = undefined; Como vemos, el primer cambio consiste en mover todas las funciones que antes tenfamos dentro de la clase Calculadora a prototipos de dicha clase. En vez de colocarlas dentro de La funcién principal y asignarlas la variable sett, simplemente creams un nuevo prototipo por cada funcidn que necesitemos, En un objeto de este tama, no veremos un cambio sustancial en la ejecucidn y el consumo de memoria, pero de esta forma optimizaremos todo el proceso de creacién de objetos, El siguiente paso seré mover el objeto JSON dentro del constructor de nuestra clase. var Caleuladora = function() { this; _ resultado var self acumulado = ‘ function(valor) { self. _ resultado _acumulado += valor; _ resultado(); _ operacione: x: function(valor) { elf. _ resultado _acumulado -= valor: self. » multiplicar: resultado| fonction(valor) { ‘Mtado _ acumulado *= valor; sultade(); dividir: function(valoz) { self. _ resultado _acumulade /= valor: self. _resultado(): iF Es importante notar como ahora hemos cambiado el uso de self en todas las funciones miemlora de Calculadora para usar this. Esta es otra ventaja de este enfoque, ya que la palabra reservada this siempre apuntard alla clase Caleuladora, A diferencia del objeto JSON, en el que this apuntaré a este objeto, necesitaremos la referencia self ola para poder amar a las funciones y propledades de Calculadora, Optimizar la ejecucién de nuestro cédigo es vital para tener aplicaciones rapidas y estables. Encontrar un mecanismo que consuma menos memoria y se ejecute de forma mas rapida es un diferenciador en cualquier programador. Clase 06 JavaScript orientado a objetosEventos y callbacks En JavaScript contamos con distintos contextos donde se pueden producir eventos. Dependiendo de dénde ejecutemos nuestra aplicacién, estos podrfan provenir de Ia interaccién con un usuario o con una maquina, En todos los casos ser necesario contar con la firma del evento, 0 sea, una forma de asociar un c6digo particular al evento y un callback, esto es, una funcién capaz de ejecutarse una vez que el evento es ejecutado, Simulando eventos Bs posible simular eventos dese nuestro cb. St bien encontraremos que existen eventos predefinidos, reat los nuestros nos ayuda aaglizar las aplicaciones especialmente cuando tenemos operaciones que puedan tomar mis tiempo del esperado y no pademos detener la sfecucin del cbdigo, Entouces, un evento nos permitira segulrcon el flujo del programa hasta queestece dispare y podamos actuar en consecuenca, Eventos Por diltimo, agregamos una funcién anénima como callback para el evento del objeto recolector, Cada vez que este objeto dispare un evento, nuestra Funcién sera alertada y ejecutada escribiendo el valor de respuesta pasado por medio de la variable datos Dedicaremos una buena parte de la siguiente clase (Integraci6n de HTMLS y JavaScript) a conocer los diferentes eventos que, desde JavaScript, nos permiten controlar, entre tantas funcionalidades, como elusuario interacttia con el mouse, con el navegador, con pantallas tactiles, etcétera. x | PROMESAS Las promesas (promises en inglés) son un patrén | manejo de eventos, lamadas jeronas y encadenamiento de funcionalidad. Con ellas esp ‘codigo, esperara que esta fnalice, y encadenar ;cuciones solo sila directa ante ‘se ejecut6 exitosamente. Las promesas pu identificadas por sus métodos then ‘entonces’) yecatch ‘capturar’) En nuestro eédigo, y como mos al inicio, es posible agregar més de un callhack que sera ejecutade cuando el evento se dispare, recolector.agregarCalback(function (datos) ¢ console.log('Callback 1’, datos.titie); »: recolector.agregazCaliback (function (datos) ( console.log(\Callback 2', datos.id); D: 40 ‘console.og("Callback 2", datos.id); a) a 43 recolector.ejecutar(); a4 35] recolector. agnegarcal lback( function (datos) { mes cwendoel eens ‘mayen t3, Cada funcién de a ‘callback es Hamada 4} Line 35, Column 7 a Wo $f | oe O |G Aame Scope Watch call stack Ez ot Patna : E Console x © ¥ top ¥ @ Preservelog Callback 1 sunt aut facere repellat provident occaecati excepturi optio eventos.himl:36 | reprehenderit Callback 2 1 eventos html:40 Callback 1 sunt aut facere repellat provident occaecati excepturi optio eventos .htm):36 reprehenderit callback 2 1 eventos. html:40 REDUSERS Ei PROGRAMADOR WEB Full StackCaptura de los eventos del usuario Cuando desarrollamos aplicaciones que trabajarn en el cliente, este estard en constante interaccidn con nuestra aplicacién. En el caso de aplicaciones web, los alculadora simple x ° Con un poco de botones, as cajas de texto y otros elementos son el punto de entrada para esta interaccién, ylos eventos son ata ly cédigo HTML, el canal de comunicacién entre ese usuario y nuestro 0 petee limes cécig, Agreqaremes ls siguientes nes de cdigo eBauoe pesto HTML en nuestra pagina web. improvisada,