Javascript en proyectos reales

Nuevos estndares Web Mster en Ingeniera Web Universidad de Oviedo

David Arango Maroto Simplelgica

Javascript en los 90s

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

Javascript en la actualidad (mayormente)

Compatibilidad Portabilidad Cdigo no intrusivo

No hay consenso sobre la definicin Separacin 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

Cmo quieres escribir Javascript?

- Dificultad +

Drop-in

From scratch

Por qu usar libreras?

Simplifican el trabajo con Javascript

Mltiples niveles de DOM Diferentes implementaciones en navegadores

Agilidad

Libreras

Prototype Dojo moo.fx YUI Jquery ...

NO FRAMEWORKS!

Libreras 2007
jQuery 38%

Prototype 45%

YUI 17%

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

Libreras 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. Aade un montn de objetos extra. Muy slida. Totalmente encapsulada en un slo objeto. Permite encadenado de mtodos. Realmente sencilla e intuitiva.

jQuery

jQuery

Haz ms con menos cdigo 2006, John Resig Todo lo que necesitas:

Seleccin de elementos del DOM Manejo de eventos API ajax Animaciones (bsicas)
http://ejohn.org/about/

jQuery (somos fans)

Estupenda documentacin Comunidad slida

http://docs.jquery.com/Discussion http://lists.scriptia.net/listinfo.cgi/jquery-es-scriptia.net

Variedad de plugins Integracin con RoR

http://ennerchi.com/projects/jrails

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

jQuery por qu?

Estilo de programacin Manejo de eventos ms sencillo Peso

80 70 60 50 40 30 20 10 0 54 73

Prototype

jQuery

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

Lovely lovely jQuery

Cuando empezamos con jQuery no haba soporte RoR Los bindings javascript de RoR tenan problemas de accesibilidad jQuery hizo el trabajo, bueno, y nosotros Choan Glvez fue el culpable:

http://choangalvez.nom.es/

Al grano, la funcin jQuery

La funcin jQuery encapsula toda la funcionalidad de la librera. Lo primero que debes saber es cmo agregar comportamiento en la carga del DOM magia!: $(document).ready(function() { })

Inciso: incluyendo scripts

Hay slo una forma de hacerlo bien, y no hace falta ser Neerlands para utilizarla:

<script type=text/javascript> // Cada vez que pones LANGUAGE Dios mata un gatito </script>

Buenas prcticas

Seleccin de nodos, CSS

CSS

$('p.activo') $('ul#menu li.activo') $('ul#menu li:first') $('ul#menu li:odd') $('ul#menu li:eq(3)')

Seleccin de nodos, CSS3

$('div[id^="content"]')
Elementos div cuyo id empieza por content

Ms en: http://www.456bereastreet.com/archive/200601/css_3_selectors_e

Movindonos 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 cdigo:

mi_app = { init: function() { // Cosas } } $(document).ready(mi_app.init); Buenas prcticas

Colecciones de nodos

Con una seleccin 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 coleccin

Modificacin 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 coleccin

removeAttr() addClass(), removeClass, hasClass() hacen el

resto

Manipulacin de contenidos

Obtener y cambiar contenido

html() text() val()

(getters y setters)

Inserciones

after() before() // Insertar fuera append() prepend() // Insertar dentro wrap()

Modificacin de estilos

css() nos hace el trabajo:

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

Ojito con la separacin 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

Buenas prcticas

Ejemplo: cebrear tabla

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

Efectos

hide() y show() slideDown(), slideUp() fadeIn() y fadeOut Permiten aadir comportamiento al terminar la animacin:

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

Ejemplo: ocultar prrafos

Documento con una serie de prrafos. Insertar enlaces antes de cada prrafo que permitan ocultar y desplegar.

Sobre el cierre del elemento <script>

Segn el apndice C de la especificacin 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:
// El navegador no sigue el enlace return false;

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

});

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

preventDefault versus return(false)

return(false) evita la propagacin del evento y cancela su comportamiento por defecto. En ocasiones no querremos cancelar el burbujeo:
e.preventDefault();

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

Si queremos evitar la propagacin sin cancelar el comportamiento por defecto: stopPropagation()

Ojo

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

funcion_inexistente(); return(false); // El enlace seguir su curso // Un preventDefault hubiera hecho el trabajo

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

});

Buenas prcticas

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

Tpica lista de contenidos con pestaas.

AJAX
Asynchronous Javascript And XML

AJAX

Inciso, dilogos HTTP

Presentacin sobre dilogos HTTP. Analizar la Fisgona de Mename.

AJAX
Asynchronous Javascript And XML

Ajax en minsculas

Ms que un acrnimo, es una forma de interaccin. Carga asincrnica de datos, con o sin interaccin del usuario.

Ejemplos: autocompletado

Ejemplos: edit in place

Ejemplos: formularios asincrnicos

Ajax con jQuery: load()

load(uri)

Ejemplo: hola mundo ajax

Escribir una pgina web con una lista de enlaces a pginas locales. Cargar el enlace va ajax en un div insertado a continuacin. 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 aceptacin: Selenium

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