• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
El Mal Odiado Javascript
 

El Mal Odiado Javascript

on

  • 2,331 views

 

Statistics

Views

Total Views
2,331
Views on SlideShare
2,308
Embed Views
23

Actions

Likes
2
Downloads
38
Comments
0

1 Embed 23

http://www.slideshare.net 23

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    El Mal Odiado Javascript El Mal Odiado Javascript Presentation Transcript

    • EL MAL ODIADO JAVASCRIPT
    • Índice
      • Introduccion
      • Manipulación DOM
      • Eventos
      • Objetos y prototipos
      • Simulacion de clases
      • Programacion funcional
      • MVC
    • Introducción
      • Programación de lado de cliente
      • Inicialmente desarollado por Netscape
      • Uso inicial para pequeñas cosas como validación de formularios, añadir 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 añadir, 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 cabecera
        • document.getElementById(”cabecera”)
      • Obtener los divs
        • document.getElementsByTagName(”div”)
    • DOM acceder a elementos
      • Acceder a elementos con una clase dada
      • Ejemplo
        • getByClass(”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 añadir 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 arriba
        • Se 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
      • Ventaja
        • Simple
      • Inconveniente
        • Solo 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 IE
        • elemento.addEventListener(”tipo”,manejador,propagar)
      • IE
        • elemento.attachEvent(”ontipo”,manejador)
        • }
    • EVENTOS asignar manejador II
      • Ventajas
        • Asociar varios manejadores a un evento
      • Desventajas
        • IE 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
      • Caracteristicas
        • Usa metodo tradicional para asignar manejadors
          • Funciona 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 añadir 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
      • Código
    • OBJETOS
      • En javascript todo es un objeto
      • Las funciones tambien
      • Creacion del objeto mas simple: var obj = {}
      • Para añadir atribtos: obj.nom = ”Jota”
        • Tambien obj[”nombre”] = ”Jota”
      • Añadir 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 metodo
        • obj.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 añadimos 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 funcion
        • suma([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 añadiendo propiedades al prototipo
    • SIMULACION DE CLASES método clásico
      • Partimos de una funcion
      • Añadimos metodos y propiedades al prototipo
    • SIMULACION DE CLASES herncia método clásico
      • Creamos una funcion
      • En el prototipo instanciamos un objeto del padre
      • Añadimos propiedades al prototipo
    • SIMULACION DE CLASES método 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 método moderno
    • SIMULACION DE CLASES método moderno
      • Uso
    • PROGRAMACION FUNCIONAL
      • Tipos de de lenguajes de programación
        • Imperativos
        • Orientado a objetos
        • Funcionales
        • Declarativos
    • PROGRAMACION FUNCIONAL
      • Caracteristicas
        • Uso 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 caracterísitcas de la programación funcional (funciones de orden superior)
        • Map
        • FoldLeft
        • Reduce
        • FoldRight
        • Clausura
        • Filter
    • PROGRAMACION FUNCIONAL
      • Simular programacion funcional en javascript
        • Funciones 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
      • Uso
        • map([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 array
        • foldLeft([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 array
        • foldRight([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 array
        • reduce([1,2,3,4],function(a,b){return a<b?a:b ;}}
    • PROGRAMACION FUNCIONAL ejercicio
      • Implementar funcion filter
        • Recibe 2 parametros
          • Array
          • Funcion de un argumento que devuelve valor boolean
        • Devolver array con elementos que cumplan la funcion booleana
      • Reimplementar getElementsByClass usando filter
    • MVC
    • MVC
      • Patron de diseño
      • Separa el código en 3 partes
        • Modelo: se encarga de la lógica de negocio
        • Vista: se encarga de presentar los datos
        • Controlador: captura acciones, media entre el modelo y la vista
    • MVC
      • Ventajas
        • Separa lógica del programa de la presentacion
        • Mejora la reutilización de codigo
        • Más facil de hacer cambios
      • Desventajas
        • Curva de aprendizaje
    • MVC – implementando un mini mvc
      • El modelo lo implementamos en una clase
      • Las vistas con funciones
      • Los controladores con funiones
      • Creamos un objeto router que se encargara de enrutar las urls al controlador correspondiente
        • Los enlaces contendran links anclas
          • Nos facilita la vista
          • No tendremos que preocuparnos de asignarles eventos
          • Tenemos historial!!!!!
    • MVC – implementando un mini mvc
      • El router I
        • Funcion para añadir rutas
        • Funcion para ejecutar rutas
    • MVC – implementando un mini mvc
      • El router II
        • Definimos una funcion que al cambiar la url depache el controlador
        • Asociamos a window.onhashchange
          • Problema no todos los navegadores lo soportan
    • MVC – implementando un mini mvc
      • El router II
        • Solucion: crear una funcion que periodicamente averigüe si la url cambio y llame a dispatch
    • MVC – implementando un mini mvc
      • El router III
        • Definimos un metodo para aplicar a formularios para que no se envien y se ejecute la ruta del action
    • MVC – implementando un mini mvc
      • Creamos una funcion de inicializacion
        • La llamaremos en window.onload
    • MVC – implementando un mini mvc
      • Ejemplo (HTML)
    • MVC – implementando un mini mvc
      • Ejemplo (Script – Modelo)
    • MVC – implementando un mini mvc
      • Ejemplo (Script – Vista)
    • MVC – implementando un mini mvc
      • Ejemplo (Script – Controlador)
    • MVC – implementando un mini mvc
      • Ejemplo (Script – inicializacion)
    • Agradecimientos
      • XGN
      • Organización
      • Asistentes