El Mal Odiado Javascript

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)

}


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


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



Uso

PROGRAMACION FUNCIONAL

Tipos de de lenguajes de programacinImperativos

Orientado a objetos

Funcionales

Declarativos


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


Funciones caractersitcas de la programacin funcional (funciones de orden superior)Map

FoldLeft

Reduce

FoldRight

Clausura

Filter


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

El Mal Odiado Javascript

Documents

Transcript of El Mal Odiado Javascript