Aproximación a la historia y fundamente del lenguaje de programación web Javascript.

1. Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
Javascript
Javier Infante <jabi@irontec.com>
Donosti :: EHU / UPV ::16/10/2009

2. Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
¿QUÉ ES JAVASCRIPT?

3. Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
Lenguaje de scripting.

4. Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
No se compila, es LENTO.

5. Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
¿QUÉ NO ES
JAVASCRIPT?

6. Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
No es un applet de Java.
(No necesita una máquina virtual para
ejecutarse)

7. Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
No es un Flash.
(No necesita un plugin para ejecutarse)

8. Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
Su ámbito principal es un
navegador web.

9. Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
El script se DESCARGA y
se interpreta en el navegador

10. Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
Es totalmente
independiente de la
tecnología que haya en
el servidor.

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

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

13. Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
Un poco de historia

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

15. Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
Historia
Brendan Eich...

16. Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
Historia
...inventa el lenguaje
Mocha. Se rebautizará
como Livescript
y finalmente...

17. Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
Historia
…el 4 de Diciembre de
1995...

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

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

20. Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
Microsoft responde
anunciando su propio
dialecto de Javascript
para IE3: Nacía JScript.

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

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

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

24. Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
Historia
W3C diseña y propone el
estándar DOM*.
*DOM: Document Object Model

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

26. Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
Javascript era casi como un juguete

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

28. Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
Era la época del prompt,
los alerts, y los popups...

29. Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
El copia y pega de scripts
“super útiles” desde
montones de sitios...
javascriptsource.com
dynamicdrive.com

30. Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
¿Es Asterisk una alternativa fiable?
Nieve en tu página web (GRATIS!)

31. Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
Cuenta atrás!

32. Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
Protección contra ladrones de fotos

33. Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
Historia
LA REVOLUCIÓN.
La revolución estaba cerca...

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

35. 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 SouthWest

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

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

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

39. Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
18 Febrero de 2005

40. Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
Jesse James Garrett
...

41. Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
...escribe un artículo
bautizando un nuevo
paradigma en Javascript:
AJAX

42. Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
Historia
http://adaptivepath.com/ideas/essays/archives/000385.php

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

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

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

46. Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
Hoy, no vemos un portal
o aplicación web sin Javascript.

47. Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
Historia
Javacript es un lenguaje maduro y
muy POTENTE (y respetado por fin).

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

49. Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
Seguimos teniendo que ejecutar
Javascript en los navegadores...

50. Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
Y muchos navegadores,
todavía no respetan esos
estándares ECMAScript...

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

52. Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
(IE6+IE7 cuentan con aproximadamente un
30% del mercado actualmente...
no se pueden obviar)

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

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

55. Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
Presentamos:
y la “elegida”:

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

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

58. Javascript. ¿Qué? ¿Cómo? ¿De dónde? ¿Hasta dónde?
Licencias / Créditos
Fotos
Brandon 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
Licencia
Este 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).