Write Less, Do More

Workshop Trabajando con jQuery

Rodrigo AyalaDesarrolladorhttp://blog.rodrigo-ayala.com

@RodrigoAyala

http://blog.rodrigo-ayala.com

http://continuum.cl

Hoy nos convoca el desarrollo web!

Pero, Que es la Web?

La web del hoy, dnamica

La interrogante es, que hacer para llegar a eso?

v

Base de Datos

Backend

Frontend

v

Base de Datos

Backend

Frontend

text/javascript

text/javascripto JS para los amigos

Los browsers incluyen un motor de Javascript

Consideraciones:D

Consideraciones:D

Interpretaciones variadas

Funciones JS con distinto nombre

Variaciones en la obtencin de elementos

Los tiempos de desarrollo son limitados

:D

Soluciones?:D

Llenarnos de condiciones! (o hacks) =(:D

var myObject = document.getElementById("myLabel");var myAttribute = myObject.getAttribute("htmlFor");

var myObject = document.getElementById("myLabel");var myAttribute = myObject.getAttribute("for");

:D

var myObject = document.getElementById("header");var myStyle = myObject.currentStyle.backgroundColor;

var myObject = document.getElementById("header");var myComputedStyle = document.defaultView.getComputedStyle(myObject, null);var myStyle = myComputedStyle.backgroundColor;

Horrible, cierto?:D

Solucin 2:

Utilizar un framework:D

jQuery:D

Beneficios!

(o por qu a muchos desarrolladores nos gusta)

http://bit.ly/dsljquery

1

Agregar jQuery al HTML, y verificar su instalacin

2

Utilizar Selectores para obtener un set de elementos de acuerdo a una consulta

Listado de selectores

http://api.jquery.com/category/selectors/

3

Manipular los elementos ubicados a travs de Selectores

Listado de mtodos para manipulacin

http://api.jquery.com/category/manipulation

4

Manejo de Eventos asociado a elementos

Listado de eventos disponibles

http://api.jquery.com/category/events/

5

Capacidad Ajax en jQuery

$.ajax({ url: 'load.html', success: function(data) { $('#container').html(data); }});

$('#content').load(load.html)

Ajax en jQuery

=

Comentarios Finales

Preguntas?

Gracias!