En este artículo del Manual de Javascript queremos abordar las particularidades del uso de Javascript dentro del contexto del navegador, que es básicamente lo que vamos a aprender a lo largo de todo el manual. Será un punto de partida para las personas que quieren introducirse en el mundo de la programación web del lado del cliente.

Cómo está estructurado el Manual de Javascript

El curso de Javascript que hemos preparado en DesarrolloWeb.com está dividido en dos partes fundamentales que te vamos a resumir para que entiendas cuáles son sus objetivos particulares.

1. En este primer manual pretendemos explicar el lenguaje Javascript de manera general, ofreciendo información sobre cómo incluir scripts y lidiar con los elementos más básicos de cualquier lenguaje de programación, como son las variables, operadores, estructuras de control, funciones, etc.
2. La segunda parte del manual la dedicaremos a explorar temas más específicos sobre cómo Javascript nos puede ayudar a aplicar dinamismo a una página web, a través del control de los elementos de la página y la interacción con el usuario.

En este artículo pretendemos explicar qué es Javascript en el contexto del navegador y para qué sirve este lenguaje, al menos en líneas generales, sin entrar todavía en la parte práctica. En esta primera serie de artículos podrás encontrar información básica sobre el lenguaje, sus principales posibilidades, usos más comunes y los modos de trabajo que podemos emplear para desarrollar nuestros propios scripts.

Qué es Javascript

Javascript es un lenguaje de programación utilizado para crear comportamientos dinámicos en las páginas web. Con Javascript, al menos en un primer paso, podrás crear pequeños programas encargados de realizar acciones dentro del ámbito de una página web, que generalmente incluye efectos especiales en las páginas e implementar interacción con el usuario. A estos pequeños programas los llamamos scripts, porque a menudo son porciones de código de tamaño limitado, que se encargan de hacer comportamientos muy específicos con los que mejorar la experiencia de usuario al visitar un sitio web.

El navegador del usuario se le conoce como el "cliente web" y es el encargado de interpretar las instrucciones Javascript y ejecutarlas para realizar estos efectos e interactividades, de modo que el mayor recurso, y a menudo el único, con que cuenta este lenguaje es el propio navegador.

Javascript es el siguiente paso, después del HTML y CSS, que puede dar un programador de la web que decida mejorar sus páginas y la potencia de sus proyectos. Es un lenguaje de programación bastante sencillo y pensado para hacer las cosas con rapidez, a veces con demasiada ligereza. Incluso las personas que no tengan una experiencia previa en la programación podrán aprender este lenguaje con facilidad y utilizarlo en toda su potencia con sólo un poco de práctica.

Entre las acciones típicas que se pueden realizar en Javascript tenemos dos vertientes.

• Por un lado los efectos especiales sobre páginas web, para crear contenidos dinámicos y elementos de la página que tengan movimiento, cambien de color o cualquier otro dinamismo.
• Por el otro, javascript nos permite ejecutar instrucciones como respuesta a las acciones del usuario, con lo que podemos crear páginas interactivas con programas como calculadoras, agendas, o tablas de cálculo.

Javascript es un lenguaje con muchas posibilidades, aunque al principio comenzaremos desarrollando pequeños scripts, también nos permite crear programas más grandes, orientados a objetos, con funciones, estructuras de datos complejas, etc. De hecho, los sitios web más impactantes que te puedas imaginar usan cantidad de Javascript para conseguir que la experiencia de uso sea tan espectacular y personalizada. Hoy, las aplicaciones web modernas ofrecen gracias a Javascript una experiencia de uso casi más parecida a lo que sería una aplicación de escritorio. Prácticamente no hay fronteras a las que no podamos llegar con Javascript.

En este manual vamos a tratar de acercarnos a este lenguaje en profundidad y conocer todos sus secretos y métodos de trabajo. Al final del manual seremos capaces de controlar el flujo en nuestros programas Javascript y saber cómo colocar scripts para resolver distintas necesidades que podamos tener. Todo lo que veremos a continuación nos servirá de base para adentrarnos más adelante en el desarrollo de páginas enriquecidas del lado del cliente.

Algo de la historia de Javascript

En Internet se han creado multitud de servicios para realizar muchos tipos de comunicaciones, como correo, charlas, transferencias, búsquedas de información, etc. Pero ninguno de estos servicios se ha desarrollado tanto como la Web. Si estamos leyendo estas líneas no vamos a necesitar ninguna explicación de lo que es la web, pero sí podemos hablar un poco sobre cómo se ha ido desarrollando con el paso de los años.

La Web es un sistema Hipertexto, una cantidad de enorme de textos interrelacionados por medio de enlaces. Cada una de las unidades básicas donde podemos encontrar información son las páginas web. En un principio, para diseñar este sistema de páginas con enlaces se pensó en un lenguaje que permitiese presentar cada una de estas informaciones junto con unos pequeños estilos, este lenguaje fue el HTML.

Conforme fue creciendo la Web y sus distintos usos, se fueron complicando las páginas y las acciones que se querían realizar a través de ellas. Al poco tiempo quedó patente que HTML no era suficiente para realizar todas las acciones que se pueden llegar a necesitar en una página web. En otras palabras, HTML se había quedado corto ya que sólo sirve para presentar el texto en un página y poco más.

Al complicarse los sitios web, una de las primeras necesidades fue que las páginas respondiesen a algunas acciones del usuario, para desarrollar pequeñas funcionalidades más allá de los propios enlaces. El primer ayudante para cubrir las necesidades que estaban surgiendo fue Java, que es un lenguaje de propósito general. Java ofrecía una manera de incrustar programas en páginas web, a través de la tecnología de los Applets, con los que se podía crear pequeños programas que se ejecutaban en el navegador dentro de las propias páginas web, pero que tenían posibilidades similares a los programas de propósito general. La programación de Applets fue un gran avance y Netscape, por aquel entonces el navegador más popular, había roto la primera barrera del HTML, al hacer posible la programación dentro de las páginas web. No cabe duda que la aparición de los Applets supuso un gran avance en la historia del web, pero no ha sido una tecnología definitiva y muchas otras han seguido implementando el camino que comenzó con ellos.

Llega Javascript

Netscape, después de hacer sus navegadores compatibles con los applets, comenzó a desarrollar un lenguaje de programación al que llamó LiveScript que permitiese crear pequeños programas en las páginas y que fuese mucho más sencillo de utilizar que Java. De modo que el primer Javascript se llamo LiveScript, pero no duró mucho ese nombre, pues antes de lanzar la primera versión del producto se forjó una alianza con Sun Microsystems, creador de Java, para desarrollar en conjunto ese nuevo lenguaje.

La alianza hizo que Javascript se diseñara como un hermano pequeño de Java, solamente útil dentro de las páginas web y mucho más fácil de utilizar, de modo que cualquier persona, sin conocimientos de programación pudiese adentrase en el lenguaje y utilizarlo sin mayores dificultades. Además, para programar Javascript no es necesario un kit de desarrollo, ni compilar los scripts, ni realizarlos en ficheros externos al código HTML, como ocurría con los applets.

Netscape 2.0 fue el primer navegador que entendía Javascript y su estela fue seguida por otros clientes web como Internet Explorer a partir de la versión 3.0. Al motor de ejecución de Javascript dentro de Internet Explorer Microsoft lo bautizó como JScript y tenía ligeras diferencias con respecto a Javascript, lo que hacía que no fuera al 100% compatible con el motor que se ejecutaba en Netscape.

Diferencias entre distintos navegadores

Como hemos dicho el Javascript de Netscape y el de Microsoft Internet Explorer tenían ligeras diferencias de partida. Incluso, a medida que el propio lenguaje fue evolucionando en las distintas versiones de navegadores y a la par que las páginas web se hacían más dinámicas y exigentes, las diferencias se fueron acentuando.

Esta situación tardó años en corregirse y durante este tiempo las diferencias de funcionamiento de Javascript entre navegadores marcaron la historia del lenguaje y el modo en el que los desarrolladores se relacionan con él. Durante mucho tiempo los desarrolladores estábamos obligados a crear código que funcionase correctamente en diferentes plataformas y diferentes versiones de las mismas. A día de hoy, siguen habiendo algunas diferencias, aunque desde la aparición de HTMl 5 los fabricantes llegaron a un acuerdo para ser fieles a los estándares abiertos y se fueron corrigiendo los problemas de compatibilidad.

Sin embargo, no todos los navegadores se actualizaban por igual y las versiones viejas de Internet Explorer hacían que siguiera siendo necesario un esfuerzo extra para poder crear Javascript compatible con todos los clientes web. Para solucionar todos estos problemas han surgido muchos productos como los Frameworks Javascript, que ayudan a realizar funcionalidades avanzadas de DHTML sin tener que preocuparse en hacer versiones distintas de los scripts para cada uno de los navegadores posibles del mercado. En este sentido jQuery fue el claro dominador del mercado.

En la actualidad hemos llegado a un punto en el que, afortunadamente, Javascript funciona de manera prácticamente idéntica en todos los navegadores, al menos las partes fundamentales del lenguaje. Sin embargo, el estándar de Javascript sigue evolucionando y por ese motivo la siempre tenemos que llevar en cuenta que no todo navegador puede disponer de todos los avances más nuevos del lenguaje.

A lo largo de este manual cubrimos principalmente la versión de Javascript más tradicional, que tiene el nombre de ES5 y está disponible de manera completa en cualquier cliente web. Existe una versión de Javascript más moderna, que incluye todo lo tradicional y muchas funcionalidades extra llamada ES6. Esta versión es muy recomendada, porque tiene soporte prácticamente en la totalidad de navegadores, menos en Internet Explorer, y la vemos más a fondo en el Manual de ES6.

A continuación seguiremos aprendiendo curiosidades del lenguaje y aclararemos que Java y Javascript son dos cosas distintas, en el artículo sobre las diferencias de Java y Javascript.