La Web desde cero (II) · Manipulación del DOM Métodos Métodos usados para: addClass() Añade...
Transcript of La Web desde cero (II) · Manipulación del DOM Métodos Métodos usados para: addClass() Añade...
![Page 1: La Web desde cero (II) · Manipulación del DOM Métodos Métodos usados para: addClass() Añade una clase al elemento o elementos. attr() Obtiene el atributo del primer elemento.](https://reader035.fdocuments.mx/reader035/viewer/2022070719/5edf0274ad6a402d666a5e1f/html5/thumbnails/1.jpg)
La Web desde cero (II) JavaScript en su salsa
con JQuery
![Page 2: La Web desde cero (II) · Manipulación del DOM Métodos Métodos usados para: addClass() Añade una clase al elemento o elementos. attr() Obtiene el atributo del primer elemento.](https://reader035.fdocuments.mx/reader035/viewer/2022070719/5edf0274ad6a402d666a5e1f/html5/thumbnails/2.jpg)
Marc Rubiño
Web: http://mrubino.net Blog: http://geeks.ms/blogs/mrubino Twitter: @Marc_Rubino
![Page 3: La Web desde cero (II) · Manipulación del DOM Métodos Métodos usados para: addClass() Añade una clase al elemento o elementos. attr() Obtiene el atributo del primer elemento.](https://reader035.fdocuments.mx/reader035/viewer/2022070719/5edf0274ad6a402d666a5e1f/html5/thumbnails/3.jpg)
Las cosas claras
y
el chocolate espeso
![Page 4: La Web desde cero (II) · Manipulación del DOM Métodos Métodos usados para: addClass() Añade una clase al elemento o elementos. attr() Obtiene el atributo del primer elemento.](https://reader035.fdocuments.mx/reader035/viewer/2022070719/5edf0274ad6a402d666a5e1f/html5/thumbnails/4.jpg)
¿ Qué es JavaScript ?
![Page 5: La Web desde cero (II) · Manipulación del DOM Métodos Métodos usados para: addClass() Añade una clase al elemento o elementos. attr() Obtiene el atributo del primer elemento.](https://reader035.fdocuments.mx/reader035/viewer/2022070719/5edf0274ad6a402d666a5e1f/html5/thumbnails/5.jpg)
JavaScript JScript
…
Lenguajes scripts en los Navegadores
![Page 6: La Web desde cero (II) · Manipulación del DOM Métodos Métodos usados para: addClass() Añade una clase al elemento o elementos. attr() Obtiene el atributo del primer elemento.](https://reader035.fdocuments.mx/reader035/viewer/2022070719/5edf0274ad6a402d666a5e1f/html5/thumbnails/6.jpg)
ECMA-262
• La especificación
• lenguaje ECMAScript
• Soportado por la mayoría de navegadores
![Page 7: La Web desde cero (II) · Manipulación del DOM Métodos Métodos usados para: addClass() Añade una clase al elemento o elementos. attr() Obtiene el atributo del primer elemento.](https://reader035.fdocuments.mx/reader035/viewer/2022070719/5edf0274ad6a402d666a5e1f/html5/thumbnails/7.jpg)
¿ Qué es DOM ?
![Page 8: La Web desde cero (II) · Manipulación del DOM Métodos Métodos usados para: addClass() Añade una clase al elemento o elementos. attr() Obtiene el atributo del primer elemento.](https://reader035.fdocuments.mx/reader035/viewer/2022070719/5edf0274ad6a402d666a5e1f/html5/thumbnails/8.jpg)
DOM
• Document Object Model
▫ Modelo de objetos de los documentos
Html
XHtml
XML
▫ Para acceder al documento
▫ Para modificar el documento
![Page 9: La Web desde cero (II) · Manipulación del DOM Métodos Métodos usados para: addClass() Añade una clase al elemento o elementos. attr() Obtiene el atributo del primer elemento.](https://reader035.fdocuments.mx/reader035/viewer/2022070719/5edf0274ad6a402d666a5e1f/html5/thumbnails/9.jpg)
¿ Qué es AJAX ?
![Page 10: La Web desde cero (II) · Manipulación del DOM Métodos Métodos usados para: addClass() Añade una clase al elemento o elementos. attr() Obtiene el atributo del primer elemento.](https://reader035.fdocuments.mx/reader035/viewer/2022070719/5edf0274ad6a402d666a5e1f/html5/thumbnails/10.jpg)
¿ Qué es AJAX ?
• Asynchronous JavaScript And XML
• ## No es ASP.NET AJAX ##
• Llamadas asíncronas
• Cargas Parciales
• XMLHttpRequest
![Page 11: La Web desde cero (II) · Manipulación del DOM Métodos Métodos usados para: addClass() Añade una clase al elemento o elementos. attr() Obtiene el atributo del primer elemento.](https://reader035.fdocuments.mx/reader035/viewer/2022070719/5edf0274ad6a402d666a5e1f/html5/thumbnails/11.jpg)
¿ Qué es ASP.NET AJAX ?
![Page 12: La Web desde cero (II) · Manipulación del DOM Métodos Métodos usados para: addClass() Añade una clase al elemento o elementos. attr() Obtiene el atributo del primer elemento.](https://reader035.fdocuments.mx/reader035/viewer/2022070719/5edf0274ad6a402d666a5e1f/html5/thumbnails/12.jpg)
¿ Qué es ASP.NET AJAX ?
• AJAX con ASP.NET
• Controles de cliente "JavaScript"
• Controles de servidor.
• Cargas parciales páginas ASP.NET
![Page 13: La Web desde cero (II) · Manipulación del DOM Métodos Métodos usados para: addClass() Añade una clase al elemento o elementos. attr() Obtiene el atributo del primer elemento.](https://reader035.fdocuments.mx/reader035/viewer/2022070719/5edf0274ad6a402d666a5e1f/html5/thumbnails/13.jpg)
¿ Qué es ASP.NET AJAX
Control Toolkit ?
![Page 14: La Web desde cero (II) · Manipulación del DOM Métodos Métodos usados para: addClass() Añade una clase al elemento o elementos. attr() Obtiene el atributo del primer elemento.](https://reader035.fdocuments.mx/reader035/viewer/2022070719/5edf0274ad6a402d666a5e1f/html5/thumbnails/14.jpg)
ASP.NET AJAX Control Toolkit
• Proyecto Open-Source
• Utiliza ASP.NET AJAX
• kit de controles y extensores
• http://asp.net/ajax/ajaxontroltoolkit/samples
![Page 15: La Web desde cero (II) · Manipulación del DOM Métodos Métodos usados para: addClass() Añade una clase al elemento o elementos. attr() Obtiene el atributo del primer elemento.](https://reader035.fdocuments.mx/reader035/viewer/2022070719/5edf0274ad6a402d666a5e1f/html5/thumbnails/15.jpg)
¿ Qué es JQuery ?
![Page 16: La Web desde cero (II) · Manipulación del DOM Métodos Métodos usados para: addClass() Añade una clase al elemento o elementos. attr() Obtiene el atributo del primer elemento.](https://reader035.fdocuments.mx/reader035/viewer/2022070719/5edf0274ad6a402d666a5e1f/html5/thumbnails/16.jpg)
JQuery
• Librería JavaScript
• Encapsula la complejidad del lenguaje
• Extensible - Plugins
• Utiliza AJAX
• Animaciones
• Gestión de eventos
![Page 17: La Web desde cero (II) · Manipulación del DOM Métodos Métodos usados para: addClass() Añade una clase al elemento o elementos. attr() Obtiene el atributo del primer elemento.](https://reader035.fdocuments.mx/reader035/viewer/2022070719/5edf0274ad6a402d666a5e1f/html5/thumbnails/17.jpg)
Principales librerías Scripts
• Prototype
• MooTools
• JQuery
• Dojo
• Modernirzr
• ASP.NET AJAX
![Page 18: La Web desde cero (II) · Manipulación del DOM Métodos Métodos usados para: addClass() Añade una clase al elemento o elementos. attr() Obtiene el atributo del primer elemento.](https://reader035.fdocuments.mx/reader035/viewer/2022070719/5edf0274ad6a402d666a5e1f/html5/thumbnails/18.jpg)
Resumiendo
![Page 19: La Web desde cero (II) · Manipulación del DOM Métodos Métodos usados para: addClass() Añade una clase al elemento o elementos. attr() Obtiene el atributo del primer elemento.](https://reader035.fdocuments.mx/reader035/viewer/2022070719/5edf0274ad6a402d666a5e1f/html5/thumbnails/19.jpg)
Resumiendo
• AJAX
▫ Peticiones Asíncronas XMLHttpRequest
• ASP.NET AJAX
▫ Microsoft AJAX para ASP.NET
▫ ASP.NET AJAX Control-Toolkit
• JavaScript
▫ Estándar EcmaScript
• JQuery
▫ Librería JavaScript
![Page 20: La Web desde cero (II) · Manipulación del DOM Métodos Métodos usados para: addClass() Añade una clase al elemento o elementos. attr() Obtiene el atributo del primer elemento.](https://reader035.fdocuments.mx/reader035/viewer/2022070719/5edf0274ad6a402d666a5e1f/html5/thumbnails/20.jpg)
JQuery en su salsa
![Page 21: La Web desde cero (II) · Manipulación del DOM Métodos Métodos usados para: addClass() Añade una clase al elemento o elementos. attr() Obtiene el atributo del primer elemento.](https://reader035.fdocuments.mx/reader035/viewer/2022070719/5edf0274ad6a402d666a5e1f/html5/thumbnails/21.jpg)
Principales Características
• Ligero y fácil
▫ Versión reducida – Minified & Gzipped
• Potentes Selectores
▫ Compatibles con CSS 1-3
• Cross-Browser
▫ IE , FF, Safari, Opera y Chrome
• Extensible
▫ Plugin
![Page 22: La Web desde cero (II) · Manipulación del DOM Métodos Métodos usados para: addClass() Añade una clase al elemento o elementos. attr() Obtiene el atributo del primer elemento.](https://reader035.fdocuments.mx/reader035/viewer/2022070719/5edf0274ad6a402d666a5e1f/html5/thumbnails/22.jpg)
Principales Características
• Librerías UI
▫ Jquery User Interface
▫ Efectos
▫ Controles
▫ Themas
![Page 23: La Web desde cero (II) · Manipulación del DOM Métodos Métodos usados para: addClass() Añade una clase al elemento o elementos. attr() Obtiene el atributo del primer elemento.](https://reader035.fdocuments.mx/reader035/viewer/2022070719/5edf0274ad6a402d666a5e1f/html5/thumbnails/23.jpg)
Ejemplo
![Page 24: La Web desde cero (II) · Manipulación del DOM Métodos Métodos usados para: addClass() Añade una clase al elemento o elementos. attr() Obtiene el atributo del primer elemento.](https://reader035.fdocuments.mx/reader035/viewer/2022070719/5edf0274ad6a402d666a5e1f/html5/thumbnails/24.jpg)
Selectores
![Page 25: La Web desde cero (II) · Manipulación del DOM Métodos Métodos usados para: addClass() Añade una clase al elemento o elementos. attr() Obtiene el atributo del primer elemento.](https://reader035.fdocuments.mx/reader035/viewer/2022070719/5edf0274ad6a402d666a5e1f/html5/thumbnails/25.jpg)
Selectores Selector Elementos que Selecciona...
* Todos los elementos. #id El elemento con el ID dado. element Todos los elementos del tipo dado. .class Todos los elementos con la clase dada. a, b Elementos que coincidan con la a o con b. a b Elementos b que son descendientes de a. a > b Elementos b que son hijos de a. a + b Elementos b a continuación de a. a ~ b Elementos que son hermanos de a.
![Page 26: La Web desde cero (II) · Manipulación del DOM Métodos Métodos usados para: addClass() Añade una clase al elemento o elementos. attr() Obtiene el atributo del primer elemento.](https://reader035.fdocuments.mx/reader035/viewer/2022070719/5edf0274ad6a402d666a5e1f/html5/thumbnails/26.jpg)
Selectores Selector Elementos que Selecciona...
first El primer elemento en el conjunto resultado. :last El último elemento en el conjunto resultado :even Elementos pares en el conjunto resultado (en base 0). :odd Elementos impares en el conjunto resultado (en base 0). :eq (index) Un elemento numerado en el conjunto resultado (en base 0). first El primer elemento en el conjunto resultado. :last El último elemento en el conjunto resultado
![Page 27: La Web desde cero (II) · Manipulación del DOM Métodos Métodos usados para: addClass() Añade una clase al elemento o elementos. attr() Obtiene el atributo del primer elemento.](https://reader035.fdocuments.mx/reader035/viewer/2022070719/5edf0274ad6a402d666a5e1f/html5/thumbnails/27.jpg)
Selectores Selector Elementos que Selecciona...
:header Elementos de encabezado (por ejemplo. <h1>, <h2>) :animated Elementos con una animación en progreso. : contains(text) Elementos que contienen el texto facilitado. :empty Elementos sin nodos hijos.
:has (a) Elementos que contienen un elemento descendientes que coincide con a.
:parent Elementos que tienen nodos hijos.
:hidden Elementos que están ocultos por medio de CSS o porque son <input type="hidden" />.
![Page 28: La Web desde cero (II) · Manipulación del DOM Métodos Métodos usados para: addClass() Añade una clase al elemento o elementos. attr() Obtiene el atributo del primer elemento.](https://reader035.fdocuments.mx/reader035/viewer/2022070719/5edf0274ad6a402d666a5e1f/html5/thumbnails/28.jpg)
Selectores Selector Elementos que Selecciona...
[attr] Elementos que tienen el atributo attr. [attr=value] Elementos cuyo atributo attr es value. [attr^=value] Elementos cuyo atributo attr empieza con value. :first-child Elementos que son el primer hijo de su padre. :checkbox Elementos <input> con type="checkbox". :image Elementos <input> con type="image". :disable Elementos de formulario desactivados. :checked Casillas de verificación y botones de opción seleccionados. :selected Elementos <option> seleccionados.
![Page 29: La Web desde cero (II) · Manipulación del DOM Métodos Métodos usados para: addClass() Añade una clase al elemento o elementos. attr() Obtiene el atributo del primer elemento.](https://reader035.fdocuments.mx/reader035/viewer/2022070719/5edf0274ad6a402d666a5e1f/html5/thumbnails/29.jpg)
Manipulación DOM
![Page 30: La Web desde cero (II) · Manipulación del DOM Métodos Métodos usados para: addClass() Añade una clase al elemento o elementos. attr() Obtiene el atributo del primer elemento.](https://reader035.fdocuments.mx/reader035/viewer/2022070719/5edf0274ad6a402d666a5e1f/html5/thumbnails/30.jpg)
Manipulación del DOM Métodos Métodos usados para:
addClass() Añade una clase al elemento o elementos. attr() Obtiene el atributo del primer elemento. html() Obtiene el contenido html del primer elemento. val() Obtiene el valor del primer elemento. removeProp() Elimina la propiedad del elemento. add() Añade un nuevo elemento. children() Obtiene el elemento hijo. first() Obtiene el primer elemento. next() Obtiene el siguiente elemento disponible.
![Page 31: La Web desde cero (II) · Manipulación del DOM Métodos Métodos usados para: addClass() Añade una clase al elemento o elementos. attr() Obtiene el atributo del primer elemento.](https://reader035.fdocuments.mx/reader035/viewer/2022070719/5edf0274ad6a402d666a5e1f/html5/thumbnails/31.jpg)
Ejemplo
![Page 32: La Web desde cero (II) · Manipulación del DOM Métodos Métodos usados para: addClass() Añade una clase al elemento o elementos. attr() Obtiene el atributo del primer elemento.](https://reader035.fdocuments.mx/reader035/viewer/2022070719/5edf0274ad6a402d666a5e1f/html5/thumbnails/32.jpg)
Eventos
![Page 33: La Web desde cero (II) · Manipulación del DOM Métodos Métodos usados para: addClass() Añade una clase al elemento o elementos. attr() Obtiene el atributo del primer elemento.](https://reader035.fdocuments.mx/reader035/viewer/2022070719/5edf0274ad6a402d666a5e1f/html5/thumbnails/33.jpg)
Eventos
• Se pueden lanzar
• Se puede enlazar una función
• Tantos eventos como en JavaScript sin «on-»
▫ focus()
▫ blur()
▫ keyup()
▫ mouseover()
▫ …
![Page 34: La Web desde cero (II) · Manipulación del DOM Métodos Métodos usados para: addClass() Añade una clase al elemento o elementos. attr() Obtiene el atributo del primer elemento.](https://reader035.fdocuments.mx/reader035/viewer/2022070719/5edf0274ad6a402d666a5e1f/html5/thumbnails/34.jpg)
Eventos
• bind()
▫ Permite asociar un número ilimitado de eventos a un mismo elemento.
• toggle()
▫ La ejecución se alterna en función de las veces que se pincha sobre el elemento.
![Page 35: La Web desde cero (II) · Manipulación del DOM Métodos Métodos usados para: addClass() Añade una clase al elemento o elementos. attr() Obtiene el atributo del primer elemento.](https://reader035.fdocuments.mx/reader035/viewer/2022070719/5edf0274ad6a402d666a5e1f/html5/thumbnails/35.jpg)
Ejemplo
![Page 36: La Web desde cero (II) · Manipulación del DOM Métodos Métodos usados para: addClass() Añade una clase al elemento o elementos. attr() Obtiene el atributo del primer elemento.](https://reader035.fdocuments.mx/reader035/viewer/2022070719/5edf0274ad6a402d666a5e1f/html5/thumbnails/36.jpg)
Animaciones
![Page 37: La Web desde cero (II) · Manipulación del DOM Métodos Métodos usados para: addClass() Añade una clase al elemento o elementos. attr() Obtiene el atributo del primer elemento.](https://reader035.fdocuments.mx/reader035/viewer/2022070719/5edf0274ad6a402d666a5e1f/html5/thumbnails/37.jpg)
Animaciones Métodos Métodos usados para:
hide() Oculta el elemento. show() Muestra el elemento. stop() Para la animación actual. fadeIn() Muestra el elemento con una animación. fadeOut() Oculta el elemento con una animación. animate() Personaliza una animación
![Page 38: La Web desde cero (II) · Manipulación del DOM Métodos Métodos usados para: addClass() Añade una clase al elemento o elementos. attr() Obtiene el atributo del primer elemento.](https://reader035.fdocuments.mx/reader035/viewer/2022070719/5edf0274ad6a402d666a5e1f/html5/thumbnails/38.jpg)
Llamadas AJAX
![Page 39: La Web desde cero (II) · Manipulación del DOM Métodos Métodos usados para: addClass() Añade una clase al elemento o elementos. attr() Obtiene el atributo del primer elemento.](https://reader035.fdocuments.mx/reader035/viewer/2022070719/5edf0274ad6a402d666a5e1f/html5/thumbnails/39.jpg)
JQuery AJAX
• Limitaciones con Cross-domain
• Tipos de Datos
▫ Texto
▫ Html
▫ Xml
▫ Script
▫ Json
▫ JsonP «cross-domain»
![Page 40: La Web desde cero (II) · Manipulación del DOM Métodos Métodos usados para: addClass() Añade una clase al elemento o elementos. attr() Obtiene el atributo del primer elemento.](https://reader035.fdocuments.mx/reader035/viewer/2022070719/5edf0274ad6a402d666a5e1f/html5/thumbnails/40.jpg)
Animaciones
![Page 41: La Web desde cero (II) · Manipulación del DOM Métodos Métodos usados para: addClass() Añade una clase al elemento o elementos. attr() Obtiene el atributo del primer elemento.](https://reader035.fdocuments.mx/reader035/viewer/2022070719/5edf0274ad6a402d666a5e1f/html5/thumbnails/41.jpg)
JQuery AJAX
• Función principal ▫ $.ajax()
• Propiedades ▫ async ▫ beforeSend ▫ complete ▫ contentType ▫ data ▫ dataType ▫ error ▫ success ▫ type ▫ url
![Page 42: La Web desde cero (II) · Manipulación del DOM Métodos Métodos usados para: addClass() Añade una clase al elemento o elementos. attr() Obtiene el atributo del primer elemento.](https://reader035.fdocuments.mx/reader035/viewer/2022070719/5edf0274ad6a402d666a5e1f/html5/thumbnails/42.jpg)
JQuery AJAX
• jQuery.get( url, [data], [callback], [type] )
▫ Llamadas GET
• jQuery.post( url, [data], [callback], [type] )
▫ Llamadas POST
• jQuery.getJSON( url, [data], [callback] )
▫ Llamadas que retornan datos JSon
• $.ajaxStart()
• $.ajaxEnd()
![Page 43: La Web desde cero (II) · Manipulación del DOM Métodos Métodos usados para: addClass() Añade una clase al elemento o elementos. attr() Obtiene el atributo del primer elemento.](https://reader035.fdocuments.mx/reader035/viewer/2022070719/5edf0274ad6a402d666a5e1f/html5/thumbnails/43.jpg)
Ejemplo
![Page 44: La Web desde cero (II) · Manipulación del DOM Métodos Métodos usados para: addClass() Añade una clase al elemento o elementos. attr() Obtiene el atributo del primer elemento.](https://reader035.fdocuments.mx/reader035/viewer/2022070719/5edf0274ad6a402d666a5e1f/html5/thumbnails/44.jpg)
Plugins
![Page 45: La Web desde cero (II) · Manipulación del DOM Métodos Métodos usados para: addClass() Añade una clase al elemento o elementos. attr() Obtiene el atributo del primer elemento.](https://reader035.fdocuments.mx/reader035/viewer/2022070719/5edf0274ad6a402d666a5e1f/html5/thumbnails/45.jpg)
Marc Rubiño
Web: http://mrubino.net Blog: http://geeks.ms/blogs/mrubino Twitter: @Marc_Rubino