conferencia-presentación javascript
DESCRIPTION
Aproximación a la historia y fundamente del lenguaje de programación web Javascript.TRANSCRIPT
![Page 1: Conferencia-presentación Javascript](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e2394d8b42a6a4c8b4d5c/html5/thumbnails/1.jpg)
Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
Javascript
Javier Infante <[email protected]>
Donosti :: EHU / UPV ::16/10/2009
![Page 2: Conferencia-presentación Javascript](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e2394d8b42a6a4c8b4d5c/html5/thumbnails/2.jpg)
Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
¿QUÉ ES JAVASCRIPT?
![Page 3: Conferencia-presentación Javascript](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e2394d8b42a6a4c8b4d5c/html5/thumbnails/3.jpg)
Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
Lenguaje de scripting.
![Page 4: Conferencia-presentación Javascript](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e2394d8b42a6a4c8b4d5c/html5/thumbnails/4.jpg)
Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
No se compila, es LENTO.
![Page 5: Conferencia-presentación Javascript](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e2394d8b42a6a4c8b4d5c/html5/thumbnails/5.jpg)
Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
¿QUÉ NO ES JAVASCRIPT?
![Page 6: Conferencia-presentación Javascript](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e2394d8b42a6a4c8b4d5c/html5/thumbnails/6.jpg)
Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
No es un applet de Java.(No necesita una máquina virtual para
ejecutarse)
![Page 7: Conferencia-presentación Javascript](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e2394d8b42a6a4c8b4d5c/html5/thumbnails/7.jpg)
Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
No es un Flash.(No necesita un plugin para ejecutarse)
![Page 8: Conferencia-presentación Javascript](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e2394d8b42a6a4c8b4d5c/html5/thumbnails/8.jpg)
Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
Su ámbito principal es un navegador web.
![Page 9: Conferencia-presentación Javascript](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e2394d8b42a6a4c8b4d5c/html5/thumbnails/9.jpg)
Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
El script se DESCARGA yse interpreta en el navegador
![Page 10: Conferencia-presentación Javascript](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e2394d8b42a6a4c8b4d5c/html5/thumbnails/10.jpg)
Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
Es totalmente independiente de la
tecnología que haya en el servidor.
![Page 11: Conferencia-presentación Javascript](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e2394d8b42a6a4c8b4d5c/html5/thumbnails/11.jpg)
Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
![Page 12: Conferencia-presentación Javascript](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e2394d8b42a6a4c8b4d5c/html5/thumbnails/12.jpg)
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)
![Page 13: Conferencia-presentación Javascript](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e2394d8b42a6a4c8b4d5c/html5/thumbnails/13.jpg)
Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
Un poco de historia
![Page 14: Conferencia-presentación Javascript](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e2394d8b42a6a4c8b4d5c/html5/thumbnails/14.jpg)
Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
Historia
1995
![Page 15: Conferencia-presentación Javascript](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e2394d8b42a6a4c8b4d5c/html5/thumbnails/15.jpg)
Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
Historia
Brendan Eich...
![Page 16: Conferencia-presentación Javascript](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e2394d8b42a6a4c8b4d5c/html5/thumbnails/16.jpg)
Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
Historia
...inventa el lenguaje Mocha. Se rebautizará
como Livescripty finalmente...
![Page 17: Conferencia-presentación Javascript](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e2394d8b42a6a4c8b4d5c/html5/thumbnails/17.jpg)
Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
Historia
…el 4 de Diciembre de 1995...
![Page 18: Conferencia-presentación Javascript](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e2394d8b42a6a4c8b4d5c/html5/thumbnails/18.jpg)
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.
![Page 19: Conferencia-presentación Javascript](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e2394d8b42a6a4c8b4d5c/html5/thumbnails/19.jpg)
Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
Julio 1996
![Page 20: Conferencia-presentación Javascript](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e2394d8b42a6a4c8b4d5c/html5/thumbnails/20.jpg)
Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
Microsoft responde anunciando su propio dialecto de Javascript
para IE3: Nacía JScript.
![Page 21: Conferencia-presentación Javascript](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e2394d8b42a6a4c8b4d5c/html5/thumbnails/21.jpg)
Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
Junio 1997
![Page 22: Conferencia-presentación Javascript](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e2394d8b42a6a4c8b4d5c/html5/thumbnails/22.jpg)
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
![Page 23: Conferencia-presentación Javascript](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e2394d8b42a6a4c8b4d5c/html5/thumbnails/23.jpg)
Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
Historia
2000
![Page 24: Conferencia-presentación Javascript](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e2394d8b42a6a4c8b4d5c/html5/thumbnails/24.jpg)
Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
Historia
W3C diseña y propone el estándar DOM*.
*DOM: Document Object Model
![Page 25: Conferencia-presentación Javascript](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e2394d8b42a6a4c8b4d5c/html5/thumbnails/25.jpg)
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...
![Page 26: Conferencia-presentación Javascript](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e2394d8b42a6a4c8b4d5c/html5/thumbnails/26.jpg)
Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
Javascript era casi como un juguete
![Page 27: Conferencia-presentación Javascript](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e2394d8b42a6a4c8b4d5c/html5/thumbnails/27.jpg)
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)
![Page 28: Conferencia-presentación Javascript](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e2394d8b42a6a4c8b4d5c/html5/thumbnails/28.jpg)
Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
Era la época del prompt, los alerts, y los popups...
![Page 29: Conferencia-presentación Javascript](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e2394d8b42a6a4c8b4d5c/html5/thumbnails/29.jpg)
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
![Page 30: Conferencia-presentación Javascript](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e2394d8b42a6a4c8b4d5c/html5/thumbnails/30.jpg)
Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
¿Es Asterisk una alternativa fiable?
Nieve en tu página web (GRATIS!)
![Page 31: Conferencia-presentación Javascript](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e2394d8b42a6a4c8b4d5c/html5/thumbnails/31.jpg)
Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
Cuenta atrás!
![Page 32: Conferencia-presentación Javascript](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e2394d8b42a6a4c8b4d5c/html5/thumbnails/32.jpg)
Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
Protección contra ladrones de fotos
![Page 33: Conferencia-presentación Javascript](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e2394d8b42a6a4c8b4d5c/html5/thumbnails/33.jpg)
Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
Historia
LA REVOLUCIÓN.
La revolución estaba cerca...
![Page 34: Conferencia-presentación Javascript](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e2394d8b42a6a4c8b4d5c/html5/thumbnails/34.jpg)
Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
2003
![Page 35: Conferencia-presentación Javascript](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e2394d8b42a6a4c8b4d5c/html5/thumbnails/35.jpg)
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.
![Page 36: Conferencia-presentación Javascript](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e2394d8b42a6a4c8b4d5c/html5/thumbnails/36.jpg)
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.
![Page 37: Conferencia-presentación Javascript](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e2394d8b42a6a4c8b4d5c/html5/thumbnails/37.jpg)
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.
![Page 38: Conferencia-presentación Javascript](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e2394d8b42a6a4c8b4d5c/html5/thumbnails/38.jpg)
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.
![Page 39: Conferencia-presentación Javascript](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e2394d8b42a6a4c8b4d5c/html5/thumbnails/39.jpg)
Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
18 Febrero de 2005
![Page 40: Conferencia-presentación Javascript](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e2394d8b42a6a4c8b4d5c/html5/thumbnails/40.jpg)
Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
Jesse James Garrett...
![Page 41: Conferencia-presentación Javascript](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e2394d8b42a6a4c8b4d5c/html5/thumbnails/41.jpg)
Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
...escribe un artículo bautizando un nuevo
paradigma en Javascript:AJAX
![Page 42: Conferencia-presentación Javascript](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e2394d8b42a6a4c8b4d5c/html5/thumbnails/42.jpg)
Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
Historia
http://adaptivepath.com/ideas/essays/archives/000385.php
![Page 43: Conferencia-presentación Javascript](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e2394d8b42a6a4c8b4d5c/html5/thumbnails/43.jpg)
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.
![Page 44: Conferencia-presentación Javascript](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e2394d8b42a6a4c8b4d5c/html5/thumbnails/44.jpg)
Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
![Page 45: Conferencia-presentación Javascript](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e2394d8b42a6a4c8b4d5c/html5/thumbnails/45.jpg)
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.
![Page 46: Conferencia-presentación Javascript](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e2394d8b42a6a4c8b4d5c/html5/thumbnails/46.jpg)
Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
Hoy, no vemos un portal o aplicación web sin Javascript.
![Page 47: Conferencia-presentación Javascript](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e2394d8b42a6a4c8b4d5c/html5/thumbnails/47.jpg)
Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
Historia
Javacript es un lenguaje maduro ymuy POTENTE (y respetado por fin).
![Page 48: Conferencia-presentación Javascript](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e2394d8b42a6a4c8b4d5c/html5/thumbnails/48.jpg)
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....
![Page 49: Conferencia-presentación Javascript](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e2394d8b42a6a4c8b4d5c/html5/thumbnails/49.jpg)
Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
Seguimos teniendo que ejecutarJavascript en los navegadores...
![Page 50: Conferencia-presentación Javascript](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e2394d8b42a6a4c8b4d5c/html5/thumbnails/50.jpg)
Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
Y muchos navegadores, todavía no respetan esos estándares ECMAScript...
![Page 51: Conferencia-presentación Javascript](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e2394d8b42a6a4c8b4d5c/html5/thumbnails/51.jpg)
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?
![Page 52: Conferencia-presentación Javascript](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e2394d8b42a6a4c8b4d5c/html5/thumbnails/52.jpg)
Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
(IE6+IE7 cuentan con aproximadamente un 30% del mercado actualmente...
no se pueden obviar)
![Page 53: Conferencia-presentación Javascript](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e2394d8b42a6a4c8b4d5c/html5/thumbnails/53.jpg)
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.
![Page 54: Conferencia-presentación Javascript](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e2394d8b42a6a4c8b4d5c/html5/thumbnails/54.jpg)
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.
![Page 55: Conferencia-presentación Javascript](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e2394d8b42a6a4c8b4d5c/html5/thumbnails/55.jpg)
Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
Presentamos:
y la “elegida”:
![Page 56: Conferencia-presentación Javascript](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e2394d8b42a6a4c8b4d5c/html5/thumbnails/56.jpg)
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.
![Page 57: Conferencia-presentación Javascript](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e2394d8b42a6a4c8b4d5c/html5/thumbnails/57.jpg)
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
![Page 58: Conferencia-presentación Javascript](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e2394d8b42a6a4c8b4d5c/html5/thumbnails/58.jpg)
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 <[email protected]>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).