Mar 29

He leído “JavaScript, The Definitive Guide”

Hace un mes aproximadamente terminé de leer "JavaScript, The Definitive Guide". Un libro sobre JavaScript y alrededores que me ha encantado. Aparte de JavaScript, trata bastante bien temas como JavaScript en un navegador web, una introducción a node.js y rhino en el lado del servidor, AJAX, jQuery, almacenamiento local en el navegador, Canvas de HTML5, …

Son un montón de páginas, 1100 nada menos, pero aproximadamente la segunda mitad son una guía de referencia de las funciones de JavaScript, por lo que de lectura es aproximadamente la mitad.

Comienza con los principios de programación en JavaScript desde cero, el típica capítulo de introducción al lenguaje que no aporta demasiado a casi nadie, demasiado rápido para el que no sabe nada de programación, pero demasiado trivial para el que sabe programar en otros lenguajes. Aun así, dentro de esta parte, he encontrado una pequeña joya para alguien como yo acostumbrado a otros lenguajes y es todo el tema de cómo se hacen conversiones de tipos automáticas, sobre todo en los condicionales, es decir, cuándo una variable independientemente de su tipo (string, numérico, un objeto,…) se considera que es true o false.

Sin embargo, luego empieza a meterse en profundidad en montones de temas variados de JavaScript y aquí es donde algún programador experto en otro lenguaje pero sin demasiado conocimiento de JavaScript, empieza a disfrutar del libro. Por supuesto, hay temas demasiado farragosos como para que sea agradable leerlos, pero hay otros que me han parecido geniales, tanto por lo que supone aprender cosas que no sabes, como por la forma de exponerlas.

Entre los primeros, los farragosos, está la parte de orientación a objetos en JavaScript, clases, herencias, polimorfismo a base de tipado tipo pato, También la parte de eventos en los navegadores web es pesadita, más que nada porque cada navegador es de su padre y de su madre y no hay acuerdo en los eventos que se producen, cómo se llaman y cuándo se producen. El libro no puede hacer mucho más que dar una lista con una breve descricpción de cada uno de ellos.

Sin embargo, entre las partes geniales, me ha encantado la forma de explicar las expresiones regulares, tanto, que he hecho mi propio tutorial de expresiones regulares en JavaScript siguiendo esa forma de explicación, por supuesto, donde esté el libro que se quite cualquier tontería que haya podido hacer yo. También me ha encantado la forma de explicar jQuery, todos sus apartados, desde los selectores para buscar y modificar elementos de nuestro HTML, como la parte de AJAX, efectos especiales como fadeIn() y fadeOut(), …

En fin, totalmente recomendado para aquel que ya ha empezado a programar cosas en JavaScript pero necesita profundizar y comprender más el tema.

Jan 09

“Duck Typing”

En un lenguaje fuertemente tipado y orientado a objetos, se comprueban las clases de los objetos antes de asignarlos a variables, de forma que sólo se pueden asignar a una variable objetos que son de la misma clase que la variable o hijas de la misma. Por ejemplo, si la clase Hija herada de la clase Padre, se puede hacer esto

Padre p = new Hija();

Una vez hecho, sólo pueden llamarse a métodos o atributos que estén declarados en la clase Padre. Si Padre tiene metodo1() e hija tiene metodo2(), sólo podemos hacer p.metodo1(), mientras que p.metodo2() dará error. Todo esto da sentido a cosas como las interfaces, definiendo a priori que métodos necesitan tener las clases hijas para que luego estas lo implementen.

Hay otros lenguajes, como javascript, que usan lo que se llama "Duck typing" o como lo traduzco yo "tipado tipo pato". La idea básica de este tipado es que si algo anda como un pato, grazna como un pato y nada como un pato, pues entonces es un pato. Los lenguajes que usan este tipado no miran los tipos ni las herencias de los objetos, simplemente permiten asignar cualquier cosa a cualquier variable. De esta forma, podemos hacer

p = new Hija();

y luego llamar tranquilamente a p.metodo1() o p.metodo2(), pero también podemos hacer

p = new Padre();

y llamar a p.metodo1(), dando error p.metodo2(). Es decir, no importa el tipo, el error saltará a la hora de hacer la llamada si "el pato no es capaz de granzar".

 

Dec 15

Clases y herencia con javascript

 Por la necesidad de organizar un poco el código de javascript, que va creciendo y creciendo de forma desordenada y desmesurada en nuestro proyecto, me he puesto a mirar un poco el tema de objetos y herencias, también como organizar esas clases en lo que en java se llaman paquetes, no sé si en javascript se llaman namespaces, o ni siquiera existe nombre para eso.

Me ha llamado la atención que las clases realmente son las funciones. Cualquier función que declaremos en javascript es una clase y se puede hacer un new de ella. La función en sí misma se convierte en el constructor de la clase y las "cosas" que definamos en esa función como this.cosa=…. se convierte en atributo o método de esa clase, según sea una variable u otra función.

La herencia es un poco rara, sobre todo cuando buscamos en internet en que hay 49 formas de hacerla y alguna más. Al final, lo más sencillo y mínimo imprescindible es hacer algo como ClaseHija.prototype = new ClasePadre; Ya está la herencia hecha.

Si el constructor Padre tiene parámetros (la función Padre tiene parámetros), podemos llamarla desde el constructor del Hijo (la función Hijo) usando call() tal que así Padre.call(this,parametros), esa sería la forma de que el constructor hijo llame al padre pasándole cosas.

Finalmente, para agrupar las clases en "paquetes" o como quiera que se llame en javascript, basta con hacer el típico 

paquete = {
   Padre : function(…) {….},
   Hijo : function(…) {…}
}

a = new paquete.Hijo;

En fin, lenguaje demoníaco por un lado, pero me está gustando por otro. Mas detalles de lo aprendido en la chuwiki.

Mar 08

Sigo con javascript, jquery, datatables…

Nunca había trabajado con javascript y en mi desconocimiento era un lenguaje que me negaba a usar. Por un lado, en muchos sitios hablan de navegadores que no ejecutan javascript, por otro lado hurgar en la página con javascript parece que no debía ser muy amigable para los buscadores. El caso es que le tenía un poco de manía al lenguaje, sin conocerlo siquiera.

Pero al final he tenido que meterme con ello y es un lenguaje que me está gustando y llamando la atención. Veo que tiene muchas más posibilidades de las que pensaba. Y lo que más me ha gustado son las librerías que hay hay hechas que permiten hacer grandes cosas con pocas líneas de código.

He empezado un poquito con jQuery, nada más usar algunos widgets que me venían bien para la aplicación: diálogos y pestañas.

Y también, buscando como pintar un <table> con posibilidad de ordenar columnas me he encontrado con DataTables. basado en jQuery y con un montón de posibilidades fáciles de usar. Permite ordenar, filtrar buscando entre las celdas de la tabla, paginado, etc, etc.

La única pega que le veo es la misma que a CSS, cada navegador es de su padre y de su madre y el código javascript enseguida tiene que andar con cosas como "if internet explorer …"

De todas formas, empiezo a pensar que es un lenguaje que merece la pena y me pongo como tarea usarlo con más frecuencia en mis paginillas.

Mar 03

Sufriendo de nuevo a Internet Explorer

Hace ya algunos años me dio por aprender CSS. Recuerdo el pequeño infierno que fue aquello por culpa de Internet Explorer. Muchos navegadores cumplen el estándar de CSS y muestran las páginas web de acuerdo a ese estándar, pero entre esos muchos navegadores no se encuentra Internet Explorer. Este navegador interpreta CSS a su manera, por lo que la página que se ve bien con otros navegadores, no se ve bien con Internet Explorer. Al final debes probar tu página con varios navegadores, buscar la forma que que el CSS valga para todos ellos, o usar los famosos hacks para internet explorer.

Ahora que ando jugando con JavaScript, me encuentro con exactamente el mismo problema. Suelo usar Google Chrome, mi compañero de proyecto usa FireFox y en ambos exploradores vemos bien la aplicación. Pero … ¡¡ AY de mí !!, se me ocurrió abrir la aplicación con Internet Explorer y, efectivamente, como no podía ser de otra forma, no salía nada de nada.

El problema que daba Internet Explorer es que un document.getElementById("cosa") daba error "el objeto no acepta la propiedad o método". ¿Error de sintaxis? no, los otros navegadores lo hacían bien. Y googleando encuentro que Internet Explorer (al menos versiones 6 y 7) hacen una cosa rara con los id de los tag html, los name de los tag html y las variables globales de javascript. Básicamente, que todo id y name que encuentra lo convierte en variable global. Por lo que si tu código tiene un name, un id y/o una variable global con el mismo nombre, tienes un problema seguro.

Efectivamente, ese era el problema. Si yo quería obtener mi div con id="panel", en javascript había puesto

panel = document.getElementById("panel");

y ya estaba el lío montado. Afortunadamente, después de un par de horas de búsqueda en google, el arreglo se hizo en menos de dos segundos.

Feb 18

Programando a ciegas

Nos ha caído un proyecto en el que nos toca hacer un portal web con mapa. Por ello hace tiempo me puse a jugar con GeoServer y OpenLayers. Pero ahora que nos ha caído realmente y me toca a mí desarrollar, llevo ya unos días programando y jugando en serio con estas herramientas, sobre todo con javascript y OpenLayers.

Por parte de GeoServer y OpenLayers he comenzado una serie de apuntes en la chuwiki sobre las cosas que voy descubriendo. Los enlaces a la chuwiki: GeoServer y OpenLayers.

Por otro lado he empezado con la programación en Javascript, lenguaje que nunca he usado más allá de alguna prueba simple, del que no tengo ni idea y del que ni siquiera conozco la sintaxis. Después de unos días de andar programando, buscando cómo hacer cosas concretas por Google, copy-paste, prueba y ensayo, ensayo y error y ver que las cosas misteriosamente funcionan o no funcionan sin tener muy claro por qué … me he decidido a empezar por donde debería haber empezado desde un principio: buscar un tutorial de javascript y leermelo, leerme la documentación de OpenLayers … e incluso la de jQuery, que también estamos empezando a usar.

No, si nunca aprenderé…. hay quien tropieza dos veces en la misma piedra y hay quien, como yo, se empeña en romper la piedra a cabezazos.

 

Jan 11

Javascript y Applet de Java

He visto en un foro una cosa que me ha llamado mucho la atención. Desde código javascript se puede llamar a un método de un Applet de java que esté en la página. Así que me he puesto manos a la obra a hacer una prueba tonta.

Primero me he creado un Applet tonto, que tiene una etiqueta JLabel que pone Hola y un método cambia() que permite cambiarlo a Adios.

Luego una página html con un botón que llama a una función pulsado() javascript, que es la que a su vez llama al método cambia() del Applet. Lo he compilado todo, lo he puesto en el mismo directorio … y funciona. Desde javascript se pueden llamar a métodos de un Applet que está en ejecución.

En la Chuwiki he puesto el ejemplo, con el código del Applet y el html con javascript. Es que no soy capaz de meter en este puñetero blog un poco de código con formato … 😉