Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?

Javascript

Javier Infante <jabi@irontec.com>

Donosti :: EHU / UPV ::16/10/2009

Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?

¿QUÉ ES JAVASCRIPT?

Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?

Lenguaje de scripting.

Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?

No se compila, es LENTO.

Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?

¿QUÉ NO ES JAVASCRIPT?

Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?

No es un applet de Java.(No necesita una máquina virtual para

ejecutarse)

Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?

No es un Flash.(No necesita un plugin para ejecutarse)

Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?

Su ámbito principal es un navegador web.

Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?

El script se DESCARGA yse interpreta en el navegador

Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?

Es totalmente independiente de la

tecnología que haya en el servidor.

Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?

Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?

Javascript es simplemente código descargado desde el servidor web. Sin más.

(Es un lenguaje común e independiente de todas las plataformas de desarrollo web)

Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?

Un poco de historia

Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?

Historia

1995

Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?

Historia

Brendan Eich...

Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?

Historia

...inventa el lenguaje Mocha. Se rebautizará

como Livescripty finalmente...

Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?

Historia

…el 4 de Diciembre de 1995...

Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?

Historia

Sun y Netscape anuncian conjuntamente la

aparición de Javascript en su navegador

Netscape Communicator.

Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?

Julio 1996

Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?

Microsoft responde anunciando su propio dialecto de Javascript

para IE3: Nacía JScript.

Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?

Junio 1997

Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?

ECMA* adopta Javascript como un estándar:

ECMAScript.(ISO lo adoptará en 1998)

*ECMA: European Computer Manufactures

Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?

Historia

2000

Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?

Historia

W3C diseña y propone el estándar DOM*.

*DOM: Document Object Model

Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?

En resumen:Tenemos distintas implementaciones de JS en

distintos navegadores (CAOS).Intentos de estandarización sin mucho éxito.

Así que en aquellos primeros años de Javascript...

Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?

Javascript era casi como un juguete

Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?

¿Es Asterisk una alternativa fiable?

Además un juguete bastante caótico...(y sigue siéndolo)

Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?

Era la época del prompt, los alerts, y los popups...

Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?

El copia y pega de scripts “super útiles” desde montones de sitios...

javascriptsource.comdynamicdrive.com

Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?

¿Es Asterisk una alternativa fiable?

Nieve en tu página web (GRATIS!)

Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?

Cuenta atrás!

Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?

Protección contra ladrones de fotos

Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?

Historia

LA REVOLUCIÓN.

La revolución estaba cerca...

Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?

2003

Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?

En la conferencia SXSW,Steve Champeon y Nick Fink

presentan:“Progressive Enhancement

and the Future of Web Design*”

SXSW: South by SouthWestMejora Progresiva y el futuro del diseño web.

Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?

Básicamente introducen nuevas pautas en el

desarrollo web:Separación de contenido y presentación.

Marcado semántico.Estándares web.

Disponibilidad de cualquier sitio web para cualquier cliente.

Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?

Traducido a Javascript:- El sitio web es usable con cualquier navegador, tenga o

no tenga soporte Javascript.- Todo el JS tiene que estar en ficheros externos.

- No se permiten etiquetas para control de eventos (onclick / etc).

- Los elementos dependientes de Javascript, son añadidos dinámicamente.

- Las funcionalidades Javascript deben enriquecer la experiencia de usuario, no dar

acceso exclusivo a la información.

Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?

Básicamente viene a decir:Tu “user-experience” será proporcional a la

calidad de tu navegador.Pero la información será siempre

accesible.

Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?

18 Febrero de 2005

Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?

Jesse James Garrett...

Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?

...escribe un artículo bautizando un nuevo

paradigma en Javascript:AJAX

Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?

Historia

http://adaptivepath.com/ideas/essays/archives/000385.php

Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?

AJAX: Asyncronous Javascript and XML.- Peticiones asíncronas al servidor directamente desde

Javascript.- Permite actualizar contenido (DOM), sin necesidad de

recargar la página.

- Acerca la lógica del servidor a Javascript. Lo hace más práctico.

Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?

Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?

Aunque no fue la primera gran compañía en utilizar AJAX, Google lo

puso de moda.

Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?

Hoy, no vemos un portal o aplicación web sin Javascript.

Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?

Historia

Javacript es un lenguaje maduro ymuy POTENTE (y respetado por fin).

Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?

Ya tenemos la idea sobre como queremos desarrollar webs

potentes, y con interfaces de usuarios amigables y accesibles

.Pero....

Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?

Seguimos teniendo que ejecutarJavascript en los navegadores...

Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?

Y muchos navegadores, todavía no respetan esos estándares ECMAScript...

Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?

Pero queremos seguir desarrollando siguiendo el

modelo de mejora progresiva y haciendo

webs con AJAX y animaciones...

¿Qué hacemos?

Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?

(IE6+IE7 cuentan con aproximadamente un 30% del mercado actualmente...

no se pueden obviar)

Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?

Opción A)Podemos programar nuestras propias librerías de abstracción para resolver todos los conflictos CROSS-BROWSER.

Opción B)Utilizar Librerías de abstracción ya desarrolladas, y olvidarnos de una parte importante de Javascript.

Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?

Opción A)Podemos programar nuestras propias librerías de abstracción para resolver todos los conflictos CROSS-BROWSER.

Opción B)Util izar Librerías ya desarrolladas, y dejar de programar en Javascript.- Evitamos cambiar nuestras librerías cuando cambien los navegadores.- Llegaremos a todos los bugs conocidos en todos los navegadores.- El desarrollo de la comunidad siempre será más fiable y eficiente.

Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?

Presentamos:

y la “elegida”:

Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?

¿Por qué jQuery?● API muy potente e intuitiva basada en

selectores CSS.● Excelente respeto por el namespacing global.

(simplemente se quedan con “$”, y puede evitarse).

● Buen soporte para plugins.● Excelente documentación.

Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?

¿Por qué NO todas las demás?● YUI: demasiado “escueta”, su “namespacing”

es severo, pero incómodo, aunque tiene buena documentación.

● Prototype: demasiado inspirada en Ruby on Rails, demasiadas funciones en el contexto global y demasiadas modificaciones de los tipados internos.

● DOJO: curva de aprendizaje alta y documentación no tan buena.

● MOOTOOLS: No es muy compatible con otras librerías, API poco intuitiva y poco respeto por el contexto global

Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?

Licencias / Créditos

FotosBrandon Deth: http://www.flickr.com/photos/bdeth/

SkinnyDiver: http://www.flickr.com/photos/tangysd/

AcidJazzed: http://en.wikipedia.org/wiki/User:AcidJazzed

Topgold: http://www.flickr.com/photos/topgold/

CSSBlog: http://cssblog.es

LicenciaEste documento está protegido bajo la licencia Reconocimiento-

SinObraDerivada 2.1 España de Creative Common

(http://creativecommons.org/licenses/by-nc-sa/3.0/es/)

Copyright © 2009 Javier Infante <jabi@irontec.com>Se permite la copia, modificación, distribución, uso comercial y realización de la obra,

siempre y cuando se reconozca la autoría de la misma, a no sea ser que se obtenga permiso expreso del autor. El autor no permite distribuir obras derivadas a esta. Esta nota no es la licencia completa de la obra, sinouna traducción de la nota orientativa

de la licenciaoriginal completa (jurídicamente válida).