javascript en proyectos reales - instituto tecnológico de ...€¦ · prototype vs jquery...

Javascript en proyectos reales

David Arango MarotoSimplelógica

Nuevos estándares WebMáster en Ingeniería WebUniversidad de Oviedo

Javascript en los 90s

http://www.dynamicdrive.com/dynamicindex9/noright.htm

Javascript en la actualidad (mayormente)

● Compatibilidad

● Portabilidad

● Código no intrusivo

– No hay consenso sobre la definición

– Separación entre capas

– Evitar incompatibilidad

– Graceful degradation

Javascript en la actualidad

● Demanda de expertos:

– 607 ofertas buscando en www.tecnoempleo.com

– http://jobs.jsninja.com/

● Requerimientos Javascript en proyectos reales

● Mucho buzz por la llamada “Web 2.0”

¿Cómo quieres escribir Javascript?

From scratchDrop-in- Dificultad +

¿Por qué usar librerías?

● Simplifican el trabajo con Javascript

– Múltiples niveles de DOM

– Diferentes implementaciones en navegadores

● Agilidad

Librerías

● Prototype

● Dojo

● moo.fx

● YUI

● Jquery

● ...

¡NO FRAMEWORKS!

Librerías – 2007

jQuery 38%

Prototype 45% YUI 17%

http://ajaxian.com/archives/nitobi-survey-results-on-ajax-development

Librerías – 2008

jQuery 37%

Prototype 37%

YUI 26%

http://ajaxian.com/archives/2007-ajax-tools-usage-survey-results

Prototype vs jQuery

● Prototype:

– Extiende los objetos de DOM y de Javascript.

– Añade un montón de objetos extra.

– Muy sólida.

● jQuery

– Totalmente encapsulada en un sólo objeto.

– Permite encadenado de métodos.

– Realmente sencilla e intuitiva.

jQuery

● “Haz más con menos código”

● 2006, John Resig

● Todo lo que necesitas:

– Selección de elementos del DOM

– Manejo de eventos

– API ajax

– Animaciones (básicas)

http://ejohn.org/about/

jQuery (somos fans)

● Estupenda documentación

● Comunidad sólida

– http://docs.jquery.com/Discussion

– http://lists.scriptia.net/listinfo.cgi/jquery-es-scriptia.net

● Variedad de plugins

● Integración con RoR

– http://ennerchi.com/projects/jrails

● Libre, cobertura de tests, amplio soporte de navegadores...

jQuery ¿por qué?

● Estilo de programación

● Manejo de eventos más sencillo

● Peso

Prototype jQuery0

10

20

30

40

50

60

70

8073

54

Comprimidas con YUI Compressor http://developer.yahoo.com/yui/compressor/

Lovely lovely jQuery

● Cuando empezamos con jQuery no había soporte RoR

● Los bindings javascript de RoR tenían problemas de accesibilidad

● jQuery hizo el trabajo, bueno, y nosotros

● Choan Gálvez fue el culpable:

– http://choangalvez.nom.es/

Al grano, la función jQuery

● La función jQuery encapsula toda la funcionalidad de la librería.

● Lo primero que debes saber es cómo agregar comportamiento en la carga del DOM ¡magia!:

$(document).ready(function() { })

Inciso: incluyendo scripts

● Hay sólo una forma de hacerlo bien, y no hace falta ser Neerlandés para utilizarla:

<script type=”text/javascript”>

// Cada vez que pones LANGUAGE Dios mata un gatito

</script>

Buenasprácticas

Selección de nodos, CSS

● CSS– $('p.activo')– $('ul#menu li.activo')– $('ul#menu li:first')– $('ul#menu li:odd')

– $('ul#menu li:eq(3)')

Selección de nodos, CSS3

$('div[id^="content"]')

Elementos div cuyo id empieza por “content”

Más en: http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/

Moviéndonos por el DOM

● parents() y parent()

● prev(), prev('a')

● next()

● siblings()

Inciso: literal de objeto

● Utiliza el literal de objeto, es una forma de encapsular tu código:

mi_app = {

init: function() {

// Cosas

}

}

$(document).ready(mi_app.init);Buenas

prácticas

Colecciones de nodos

● Con una selección de nodos podemos...

– Recorrerla:● $('input').each(function() { alert(this.value) })

– Hacer modificaciones:● $('p').hide()● $('p').addClass('activo')● $('p:odd').show().addClass('odd').append('<strong>Yeah!</strong>)

● ...

Trabajando con la colección

Modificación de attributos

● attr() hace sencillo el trabajo con atributos:– $('p').attr('title') // Retorna el valor del atributo para

el primer elemento encontrado

– $('p.destacado').attr('title', 'Destacado') // Asigna el valor al atributo de todos los elementos de la colección

● removeAttr()

● addClass(), removeClass, hasClass() hacen el resto

Manipulación de contenidos

● Obtener y cambiar contenido– html() text() val() (getters y setters)

● Inserciones– after() before() // Insertar fuera– append() prepend() // Insertar dentro– wrap()

Modificación de estilos

● css() nos hace el trabajo:– $('p').css('color', 'red')

– $('p.destacado').css({ color: 'red', background-color: 'blue'})

● Ojito con la separación entre capas

Inciso: usa siempre var

● Las variables en Javascript tienen ámbito global o local dependiendo de si se han creado con la palabra clave var:

numero = 42 // Yo soy global

var numero = 42 // Yo soy local

Buenasprácticas

Ejemplo: cebrear tabla

● Crear una tabla y aplicarle un color diferente a las filas pares e impares siguiendo los preceptos de la separación entre capas.

Efectos

● hide() y show()

● slideDown(), slideUp()

● fadeIn() y fadeOut

● Permiten añadir comportamiento al terminar la animación:

– $('p').slideDown(2000, function() { alert('Fin') })

Ejemplo: ocultar párrafos

● Documento con una serie de párrafos.

● Insertar enlaces antes de cada párrafo que permitan ocultar y desplegar.

Sobre el cierre del elemento <script>

● Según el apéndice C de la especificación XHTML 1.0:

C.3 Element Minimization and Empty Element Content

Given an empty instance of an element whose content model is not EMPTY (for example, an empty title or

paragraph) do not use the minimized form (e.g. use <p> </p> and not <p />).

http://www.w3.org/TR/xhtml1/#guidelines

Manejo de eventos

● $('p').bind('click', function() { alert('Click') })

● blur, focus, load, resize, scroll, unload, beforeunload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error

● Muchos tienen shortcuts:

– $('a:first').click(mostrar_parrafos)

Manejo de eventos

● Si el callback del evento retorna false se cancela el burbujeo y el comportamiento por defecto de dicho evento:

$('a:first').click(function() {

// El navegador no sigue el enlace

return false;

});

Inciso: burbujeo de eventos

● ¿Qué pasa cuando dos elementos anidados tienen comportamiento para un mismo evento?

Captura Burbujeo

http://www.quirksmode.org/js/events_order.html

1 2

preventDefault versus return(false)

● return(false) evita la propagación del evento y cancela su comportamiento por defecto.

● En ocasiones no querremos cancelar el burbujeo:

$('a').click(function(e) {

e.preventDefault();

});

● Si queremos evitar la propagación sin cancelar el comportamiento por defecto: stopPropagation()

Ojo

● return(false) no frenará el comportamiento por defecto si ocurre un error javascript antes:

$('a').click(function() {

funcion_inexistente();

return(false);

// El enlace seguirá su curso

// Un preventDefault hubiera hecho el trabajo

});Buenas

prácticas

Ejemplo: menú de acordeon

● Empezamos con una lista de enlaces anidada.

● Los enlaces de primer nivel deben ser agrupadores.

● Al hacer click sobre un enlace de primer nivel se despliega la lista de enlaces que contiene.

Ejemplo: tabtastic

● Típica lista de contenidos con pestañas.

AJAX

Asynchronous

Javascript

And

XML

AJAX

Inciso, diálogos HTTP

● Presentación sobre diálogos HTTP.

● Analizar la Fisgona de Menéame.

AJAX

Asynchronous

Javascript

And

XML ?

Ajax en minúsculas

● Más que un acrónimo, es una forma de interacción.

● Carga asincrónica de datos, con o sin interacción del usuario.

Ejemplos: autocompletado

Ejemplos: edit in place

Ejemplos: formularios asincrónicos

Ajax con jQuery: load()

load(uri)

Ejemplo: hola mundo ajax

● Escribir una página web con una lista de enlaces a páginas locales.

● Cargar el enlace vía ajax en un div insertado a continuación.

● Copiar el ejemplo a servidor HTTP local, analizar con firebug las cabeceras HTTP.

Ajax avanzado en jQuery : ajax()

$.ajax({

url: url,

dataType: 'xml',

success: function(msg) {

// Éxito

}

});

Ejemplo: ajax con xml

● ¡Lo de antes era AHAH! http://en.wikipedia.org/wiki/AHAH

● Intentar el ejemplo anterior con XML como tipo de datos.

Tests de unidad: jShoulda

http://jshoulda.scriptia.net/

Tests de aceptación: Selenium

http://seleniumhq.org/ http://www.vimeo.com/2343914