If you can't read please download the document
Upload
el-jota
View
1.729
Download
3
Embed Size (px)
Citation preview
EL MAL ODIADO JAVASCRIPThttp://www.slideshare.net/jotadeveloper/el-mal-odiado-javascript-3560630
ndice
Introduccion
Manipulacin DOM
Eventos
Objetos y prototipos
Simulacion de clases
Programacion funcional
MVC
Introduccin
Programacin de lado de cliente
Inicialmente desarollado por Netscape
Uso inicial para pequeas cosas como validacin de formularios, aadir contadores y relojes giratorios
Hoy en dia se construllen aplicaciones enteras (eyeos, google docs, clientes web ricos de correo)
Navegadores optimizan los interpretes de js
Chrome OS?
DOM
API para manipular la estructura de un elemento
Podemos aadir, eliminar, modificar y recorrer elementos
Estructura en arbol
DOM acceder a elementos
document.getElementById(id)
document.getElementsByTagName(nombre)
DOM acceder a elementos (ejemplo)
DOM acceder a elementos (ejemplo)
Obtener elemento con id cabeceradocument.getElementById(cabecera)
Obtener los divsdocument.getElementsByTagName(div)
DOM acceder a elementos
Acceder a elementos con una clase dada
EjemplogetByClass(articulo)
DOM propiedades
childeNodes
ClassName
style
parentNode
nextSlibing
firstChild
lastChild
nodeType
DOM crear nodo
document.createElement(elemento)document.createElement(p);
document.createTextNode(texto)documentl.createTextNode(soy un texto molon);
A partir de html
DOM aadir elemento a otro
appendChild(elemento)var div = document.createElement(div);
var cab = document.getElementById(cabecera);
cab.appendChild(div);
Usando HTML2DOM
DOM eliminar elemento
removeChild para eliminar elemento hijo
Ejemplo
DOM atributos
setAttribute(atributo,valor)document.getElementById(cabecera).setAttribute(name,cabecera);
getAttribute(atributo)document.getElementById(cabecera).getAttribute(name);
createAttribute(atributo)document.getElementById(cabecera).createAttribute(nuevoatributo);
DOM recorrer elementos
document.getElementsByTagName devuelve un array
Recorrer nodos hijo
EVENTOS modelo de propagacion
Los eventos se capturan desde la raiz hacia abajo
Una vez capturado se propagan hacia arribaSe puede modificar el comportamiento
EVENTOS asignar manejador I
Forma tradicional
elemento.evento = function(e){...}e es un objeto de tipo Event
En IE es nulo, hai que accecer a window.event
VentajaSimple
InconvenienteSolo puedo asociar un manejador
EVENTOS evitar propagacion
Ejemplo de propagacion
Problema: Si hago click en los h2 se propaga el evento a los div padre
Solucion: cancelar la propagacion
ENTOS evitar propagacion
Funcion para evitar propagacion
Uso
EVENTOS asignar manejador II
Navegadores no IEelemento.addEventListener(tipo,manejador,propagar)
IEelemento.attachEvent(ontipo,manejador)
}
EVENTOS asignar manejador II
VentajasAsociar varios manejadores a un evento
DesventajasIE tiene nombre distinto para manejador
IE usa metodo distinto para cancelar propagacion
IE uso ontipo mientras que otros navegadores usan tipo para nombrar al evento
Solucion: usar una libreria
EVENTOS asignar manejador II
Libreria: http://dean.edwards.name/my/events.js
CaracteristicasUsa metodo tradicional para asignar manejadorsFunciona en navegadores algo anticuados
Permite asignar varios manejadores a un evento
Normaliza el objeto Event de IE
Uso
EVENTOS delegacion
Propagar eventos hacia arriba no siempre es malo
Caso de uso: Todos los hijos de un nodo reaccionaran igual ante un evento
Al nodo se le van aadir mas hijos en un futuro que tendran el mismo comportamiento
El manejo de eventos lo delegamos en el padre
Ventajas:Ahorro de memoria
No tenemos que recorer los hijos
Los nuevos hijos heredan comportamiento
EVENTOS delegacion
Ejemplo
Queremos que al pinchar sobre una opcion se ponga el texto en #seleccionado
EVENTOS delegacion
Cdigo
OBJETOS
En javascript todo es un objeto
Las funciones tambien
Creacion del objeto mas simple: var obj = {}
Para aadir atribtos: obj.nom = JotaTambien obj[nombre] = Jota
Aadir metodo: obj.diHola = function(){ alert(this.nombre);}This hace referencia al objeto
Tambien obj[diHola] = function(){ alert(this.nombre);}
Instancir objetos predefinidos (clases) var obj = new Clase(argumentos);
OBJETOS
Crear objeto literal (JSON)
OBJTOS recorrer propiedades
Formas de acceder a una propiedad o metodoobj.propiedad
obj[propiedad]
Recorrer propiedades
OBJETOS prototipos
Javascript no es un lenguaje orientado a objetos
Javascript es orientado a prototipos
Todo objeto tiene un portotipo: obj.prototype
Si aadimos propiedades a obj.prototype las nuevas intancias tentran la propiedad tambien
Ejemplo
OBJETOS otros usos
Opciones por defecto en funciones
OBJETOS otros usos
Varias formas de llamar a la funcionsuma([1,2,3,4]);
suma([1,2,3,4],{filtrarPares : true})
suma([1,2,3,4],{filtrarPares : true, doblar : true})
SIMULACION DE CLASES
Al ser un lenguaje orientado a prototipos temenos que simular las clases
En realidad creamos objetos
Vamos aadiendo propiedades al prototipo
SIMULACION DE CLASES mtodo clsico
Partimos de una funcion
Aadimos metodos y propiedades al prototipo
SIMULACION DE CLASES herncia mtodo clsico
Creamos una funcion
En el prototipo instanciamos un objeto del padre
Aadimos propiedades al prototipo
SIMULACION DE CLASES mtodo moderno
Crear funcion encapsulando la creacion pasando un objeto literal (objeto de definicion) con metodos y propiedade y un objeto padre como opcional
La funcion copia propiedades del objeto padre al objeto de definicion
Devuelve una funcion con el prototio apuntanto al objeto definicion
init es el constructor
SIMULACION DE CLASES mtodo moderno
SIMULACION DE CLASES mtodo moderno
Uso
PROGRAMACION FUNCIONAL
Tipos de de lenguajes de programacinImperativos
Orientado a objetos
Funcionales
Declarativos
PROGRAMACION FUNCIONAL
CaracteristicasUso intensivo de funciones y recursividad
No hai bucles
Transparencia referencial
Muy comodo para trabajar con arrays
Facilita reutilizar funcionalidad
Reduce codigo y aumenta legibilidad
Javascript no es un lenguaje funcional pero podemos simularlo
PROGRAMACION FUNCIONAL
Funciones caractersitcas de la programacin funcional (funciones de orden superior)Map
FoldLeft
Reduce
FoldRight
Clausura
Filter
PROGRAMACION FUNCIONAL
Simular programacion funcional en javascriptFunciones pueden recibir funciones como argumento
Funciones pueden devolver funciones
Las funciones de orden superior se implementan con programacion imperativa (bucles)
PROGRAMACION FUNCIONAL map
Recibe como argumentos un array y una funcion
Devuelve un array con la funcion aplicada a todos los elementos
Usomap([1,2,3],function(e){ return e*e;});
PROGRACION FUNCIONAL foldLeft
Recibe como argumentes un array, un valor inicial y una funcion
Reduce el array empezando por la izquierda
Caso de uso: sumar elemento de un arrayfoldLeft([1,2,3,4],0,function(a,b){return a+b;})
PROGRAMACION FUNCIONAL foldRight
Recibe como argumentes un array, un valor inicial y una funcion
Reduce el array empezando por la derecha
Caso de uso: multiplicar elementos de un arrayfoldRight([1,2,3,4],1,function(a,b){return a*b;})
PROGRAMACION FUNCIONAL reduce
Recibe como argumentos un array y una funcion con la cual reducir el array
No recibe valor incial
Caso de uso: obtener numero menor de un arrayreduce([1,2,3,4],function(a,b){return a