Tomás Domínguez Mínguez
Si conoces HTML y CSS, ya habrás experimentado la satisfacción de poder desarrollar tus propias páginas web. Pero también te habrás dado cuenta de la limitación que conlleva trabajar únicamente con contenido estático. La necesidad de superar esta restricción fue precisamente la que motivó el nacimiento de JavaScript, cuya principal fortaleza es su capacidad para generar contenido de forma dinámica durante la interacción con el usuario. ¡Veamos cómo empezó todo!
Los orígenes
A principios de los años 90, en los inicios de la WWW (World Wide Web), las páginas web se escribían básicamente en HTML (aunque, tímidamente, empezaba a utilizarse CSS), lenguajes con los que se daba estructura y forma al contenido publicado en Internet. Sin embargo, estos lenguajes tenían como inconveniente que solo permitían mostrar contenido estático en el que no había ninguna interacción con el usuario.
Los primeros pasos hacia esta deseada interacción consistieron en la recogida de información mediante sencillos formularios. En aquella época se utilizaban módems de 28800 bits/sg que hacían eterna una simple verificación de los datos en el servidor. Por ello, cuando la empresa Netscape (creadora del primer navegador comercial) contrató a Brendan Eich (cofundador del proyecto Mozilla), lo primero que le encargó fue un nuevo lenguaje de programación que fuera ligero y se ejecutara en su navegador. El objetivo era dotarle de la capacidad necesaria para realizar algunas de las tareas de procesamiento que hasta ese momento venían haciendo únicamente los servidores web. Se quería evitar la comunicación de ida y vuelta (y el consecuente tiempo de espera) entre las peticiones del usuario y las respuestas del servidor.
Como resultado de este encargo, Brendan creó en 1995 LiveScript (fue el nombre inicial de Javascript), que se incorporó al navegador Netscape Navigator 2.0, convirtiéndose en el primero que incluía soporte a un lenguaje de script en las páginas web. Originalmente apenas servía para algo más que para validar formularios, pero resultó ser un gran éxito. Rápidamente se fue expandiendo, especialmente después de que en 1997 Netscape enviara la especificación JavaScript 1.1 al organismo ECMA (European Computer Manufacturers Association), cuyo objeto fue la normalización de un lenguaje de script multiplataforma e independiente del navegador. El primer estándar de este comité fue el denominado ECMA-262, en el que se definió el lenguaje ECMAScript. ¿Sabías que por ese motivo algunos programadores prefieren usar este nombre, en vez de JavaScript?
A partir de entonces, ECMA ha sacado nuevas versiones que han convertido a JavaScript en lo que hoy es actualmente, un lenguaje cuya principal fortaleza es su capacidad para generar contenido de forma dinámica; algo que consigue utilizando las etiquetas HTML como piezas de LEGO para construir la estructura que luego se rellenará con el texto y las imágenes a las que finalmente se aplicará el estilo deseado. ¿Cómo lo consigue?
Fundamentos del lenguaje
El nombre de este lenguaje ya da una idea de cuál es su orientación, el desarrollo de scripts. Como cualquier otro programa, un script está compuesto por un conjunto de instrucciones, llamadas sentencias, que indican al ordenador (en concreto, al navegador, ya que es quien las interpreta), la secuencia de acciones que debe realizar en cada momento.
A su vez, las sentencias se componen básicamente de valores o variables en las que se almacenan, operadores con los que se combinan para formar expresiones que permiten obtener nuevos valores y las palabras clave del lenguaje con las que se especifica la acción que debe realizarse.
De todas las características de JavaScript, la que quizás sea la más avanzada es su capacidad para modelar cualquier cosa como un objeto, ya sea algo físico (por ejemplo, un coche) o conceptual (la compra o la venta de dicho coche). Esta relación directa entre los objetos del mundo físico y los utilizados a nivel de programación se traslada al diseño de la aplicación que, al ser una representación virtual del mundo real, favorece el desarrollo software y su posterior mantenimiento, ya que se trabaja en términos similares a los manejados de forma cotidiana.
En el libro Javascript como nunca antes se lo habían contado se describe el lenguaje JavaScript desde cero, por lo que se parte de los conceptos de programación más básicos, como el de los tipos de datos primitivos hasta llegar a los más avanzados, como el de los objetos, que le llevarán al conocimiento de los modelos DOM (Document Object Model, modelo de objetos del documento) y BOM (Browser Object Model, modelo de objetos del navegador), así como de algunas de las API web, verdaderos artífices de la enorme expansión y el éxito de este lenguaje de programación. Veamos qué son y para qué se utilizan.
El DOM
JavaScript fue creado con el objetivo de dotar de interactividad a las páginas web, es decir, de hacer que respondan de forma adecuada a las acciones del usuario. Sin embargo, los documentos HTML no serían más que una sucesión de etiquetas (texto, en definitiva) difícil de manejar por cualquier lenguaje de programación si no se estructuraran de alguna manera. Ese fue el origen y la razón que impulsó al W3C (World Wide Web Consortium) a crear el estándar DOM, que no solo especifica la forma de representar cualquier documento HTML siguiendo el paradigma de programación orientado a objetos, sino que también ofrece una interfaz de programación que permite manejar su contenido y la forma de mostrarlo en pantalla.
La magia se produce en el momento que el navegador abre una página web, ya que automáticamente crea una estructura de datos jerárquica, un modelo de objetos que facilita la manipulación de su código HTML mediante JavaScript, tal como se aprecia en la siguiente imagen:
Como se puede observar, cada nodo es un objeto que representa una etiqueta. Su posición en la jerarquía determina la estructura de la página mediante una serie de relaciones de parentesco. Por ejemplo, el cuerpo de la página anterior (etiqueta <body>) está compuesto por un título y una imagen (etiquetas <h1> e <img>). Por lo tanto, desde el punto de vista del DOM ambas etiquetas son hermanas e hijas del cuerpo del documento. Solo necesitarás saber cómo navegar por dicha jerarquía (similar a la de un árbol genealógico) para acceder a cualquier elemento y modificar sus características como, por ejemplo, el texto del título.
Además del texto de una etiqueta, el DOM facilita el cambio de cualquiera de sus propiedades de estilo (por ejemplo, el color, la fuente o su tamaño); o el valor de sus atributos, como el de la propiedad src de la etiqueta <img>, que sustituiría la imagen mostrada en la página por otra diferente. Asimismo, podrías llegar a borrar y/o crear tus propias etiquetas, lo que permitiría la construcción de páginas web desde cero.
Si bien estas capacidades son de por sí interesantes, la posibilidad de utilizarlas durante la interacción con el usuario es lo que realmente convierte a JavaScript en un lenguaje idóneo para la generación dinámica de contenido, ya que todo lo que se muestre en el navegador estará condicionado por el uso que se haga de la página. Solo será necesario disponer de los mecanismos que capturen los eventos que se produzcan durante dicha interacción con el fin de ejecutar el controlador encargado de manejarlos. Una vez más, el DOM será el responsable de proporcionárnoslos.
Los eventos se asocian a uno o más elementos HTML, cada uno de los cuales reaccionaría de modo diferente. Por otra parte, un elemento puede estar asociado a varios eventos, con cada uno de los cuales tendría una respuesta diferente.
Dicha reacción ocurriría en el mismo instante en el que se produjera el evento y provocaría la ejecución de un controlador que llevaría a cabo las acciones pertinentes. Por ejemplo, cambiar la vista de la Fontana de Trevi al pulsar sobre su imagen, o aumentar el tamaño del título para destacarlo al pasar el ratón por encima.
En Javascript como nunca antes se lo habían contado descubrirás y practicarás todas las formas posibles de acceder y modificar tanto los valores de los atributos como el de las propiedades de estilo de cualquier nodo de una página web. En los múltiples ejercicios que realices, la gestión de eventos tendrá un papel protagonista ya que será la que determine su comportamiento de cara al usuario.
El BOM y las API web
Si bien el DOM es la base sobre la que se apoya JavaScript para manejar el contenido y el aspecto de una página web, el desarrollo de aplicaciones modernas requiere el control, no solo del documento HTML (la propia página web), sino también del navegador e, incluso, de los recursos que están más allá del ámbito web, como los de tipo multimedia (audio y video), el GPS (Global Positioning System, sistema de posicionamiento global) o los sensores de movimiento (el giroscopio y el acelerómetro), por poner algún ejemplo.
Este es precisamente el objetivo y la razón de ser del modelo de objetos BOM y las API web, que pondrán a disposición de las aplicaciones web todos esos recursos; algo que les permitirá competir en funcionalidad con las aplicaciones tradicionales que habitualmente descargamos de las play stores. Esto conlleva la ventaja de no tener que instalarlas, ya que estarán siempre accesibles a través de Internet (algo muy positivo).
Una vez más, en el libro Javascript como nunca antes se lo habían contado te introducirás progresivamente en los conceptos teóricos del BOM mediante numerosos ejercicios, con los que aprenderás a:
- Generar animaciones y juegos en los que existan objetos o personajes capaces de relacionarse entre sí o con el usuario.
- Compartir datos entre páginas o almacenarlos en el propio dispositivo para recuperarlos posteriormente.
- Desarrollar aplicaciones web que puedan ser manejadas tanto con un teclado y un ratón, como a través de pantallas táctiles.
- Utilizar sensores presentes en la mayoría de los teléfonos móviles, como el giroscopio o el acelerómetro, para controlar una aplicación web según la posición en la que se sujete.
El código de todos estos programas, ya sea HTML, CSS o JavaScript se explica línea a línea en el libro con el fin de disipar cualquier duda y aclarar cualquier atisbo de sombra sobre su funcionamiento. ¡No lo dudes y lleva tus páginas web al siguiente nivel!
