Presentación utilizada como guía para la asignatura "Nuevos estándares Web" del Máster de Ingeniería Web de la Universidad de Oviedo

1. Javascript en proyectos reales
Nuevos estándares Web
Máster en Ingeniería Web David Arango Maroto
Universidad de Oviedo Simplelógica

2. Javascript en los 90s
http://www.dynamicdrive.com/dynamicindex9/noright.htm

3. 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

4. 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”

5. ¿Cómo quieres escribir Javascript?
- Dificultad +
Drop-in From scratch

6. ¿Por qué usar librerías?
● Simplifican el trabajo con Javascript
– Múltiples niveles de DOM
– Diferentes implementaciones en navegadores
● Agilidad

7. Librerías
● Prototype
● Dojo
● moo.fx ¡NO FRAMEWORKS!
● YUI
● Jquery
● ...

8. Librerías – 2007
jQuery 38%
YUI 17%
Prototype 45%
http://ajaxian.com/archives/nitobi-survey-results-on-ajax-development

9. Librerías – 2008
jQuery 37%
Prototype 37%
YUI 26%
http://ajaxian.com/archives/2007-ajax-tools-usage-survey-results

10. 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.

11. jQuery
● “Haz más con menos código”
● 2006, John Resig
● Todo lo que necesitas:
– Selección de elementos del DOM
– Manejo de eventos http://ejohn.org/about/
– API ajax
– Animaciones (básicas)

12. 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...

13. jQuery ¿por qué?
● Estilo de programación
● Manejo de eventos más sencillo
● Peso 80
70
73
60
54
50
40
30
20
10
0
Prototype jQuery
Comprimidas con YUI Compressor http://developer.yahoo.com/yui/compressor/

14. 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/

15. 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() { })

16. 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>
Buenas
prácticas

17. 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)')

18. Selección de nodos, CSS3
$('div[id^=quot;contentquot;]')
Elementos div cuyo id empieza por “content”
Más en:
http://www.456bereastreet.com/archive/200601/css_3_selectors_e

19. Moviéndonos por el DOM
● parents() y parent()
● prev(), prev('a')
● next()
● siblings()

21. Inciso: literal de objeto
● Utiliza el literal de objeto, es una forma de
encapsular tu código:
mi_app = {
init: function() {
// Cosas
}
}
Buenas
$(document).ready(mi_app.init); prácticas

22. 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>)
● ...

23. Trabajando con la colección

24. 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

25. Manipulación de contenidos
● Obtener y cambiar contenido
– html() text() val() (getters y setters)
● Inserciones
– after() before() // Insertar fuera
– append() prepend() // Insertar dentro
– wrap()

26. 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

27. 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
Buenas
prácticas

28. 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.

29. Efectos
● hide() y show()
● slideDown(), slideUp()
● fadeIn() y fadeOut
● Permiten añadir comportamiento al terminar la
animación:
– $('p').slideDown(2000, function() { alert('Fin') })

30. Ejemplo: ocultar párrafos
● Documento con una serie de párrafos.
● Insertar enlaces antes de cada párrafo que permitan
ocultar y desplegar.

31. 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

32. 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)

33. 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;
});

34. Inciso: burbujeo de eventos
● ¿Qué pasa cuando dos elementos anidados tienen
comportamiento para un mismo evento?
Captura Burbujeo
1 2
http://www.quirksmode.org/js/events_order.html

36. 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()

37. 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

38. 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.

39. Ejemplo: tabtastic
● Típica lista de contenidos con pestañas.

40. AJAX
Asynchronous
Javascript
And
XML

41. AJAX

42. Inciso, diálogos HTTP
● Presentación sobre diálogos HTTP.
● Analizar la Fisgona de Menéame.

43. AJAX
?
Asynchronous
Javascript
And
XML

44. 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.

45. Ejemplos: autocompletado

46. Ejemplos: edit in place

47. Ejemplos: formularios asincrónicos

48. Ajax con jQuery: load()
load(uri)

49. 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.

50. Ajax avanzado en jQuery : ajax()
$.ajax({
url: url,
dataType: 'xml',
success: function(msg) {
// Éxito
}
});

51. 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.

52. Tests de unidad: jShoulda
http://jshoulda.scriptia.net/

53. Tests de aceptación: Selenium
http://seleniumhq.org/
http://www.vimeo.com/2343914