> Manuales > Manual de JavaScript

Qué es JavaScript qué posibilidades nos ofrece a la hora de desarrollar páginas web del lado del cliente. Comenzamos con algo de conocimiento general del lenguaje y un poco de su evolución.

Con este artículo comenzamos el Manual de Javascript, en el que esperamos ofrecer un punto de partida para las personas que quieren introducirse en el mundo de la programación web del lado del cliente.

El curso de Javascript que hemos preparado en DesarrolloWeb.com está dividido en dos partes fundamentales. 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. 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 dinámico de elementos de la página y la interacción con el usuario.

Introducción a Javascript

Nota: En este primer manual encontraréis que se ofrece mucha más información teórica y práctica típica sobre lenguajes de programación. Será esencial para saber cómo dar los primeros pasos en la programación, pero quizás resulte un poco más aburrida que la segunda parte, donde aprenderemos a alterar dinámicamente la página web, responder a acciones del usuario, etc.

Nosotros hemos querido explicar las cosas con detenimiento, para que aprender Javascript con este manual esté al alcance de personas incluso sin conocimientos de programación. No obstante, en DesarrolloWeb.com existen diversos manuales más básicos todavía para aprender a programar, como puede ser el curso de programación en vídeo, o más específicos para la web con el manual de Páginas dinámicas o la introducción a la programación.

Sin embargo, quizás personas más experimentadas puedan preferir pasar directamente a la segunda parte del manual de Javascript, donde explicaremos cosas más prácticas y volver sobre artículos puntuales de esta primera parte, para utilizarlos como referencia a medida que vayan necesitando conocer la sintaxis de determinadas estructuras de control, operadores del lenguaje, construcción de funciones, etc.

En este artículo pretendemos explicar qué es Javascript 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.

Nota: Otro recurso que queremos recomendar para aprender Javascript, especialmente indicado para las personas con menos experiencia, es el Videotutorial de Javascript. Por supuesto, tampoco nos queremos olvidar de los Talleres de Javascript, así como otros manuales más específicos que encontrarás en la categoría de Javascript.

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.

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 la actualidad hemos llegado a un punto en el que Javascript funciona de manera prácticamente idéntica en todos los navegadores, al menos las partes más básicas 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.

Nota: Solo a modo de apunte queremos que sepas que, debido a las diferencias entre versiones de Javascript y los navevadores a los que queramos ampliar el soporte, generalmente en el desarrollo frontend (del lado del cliente) se tienen que usar herramientas extra como Babel, que permiten traducir el código de modo que se adapte a los navegadores objetivo. Babel generalmente se usa a través herramientas como Webpack, que permiten además empaquetar el código Javascript e incluso producir distintas versiones del mismo, que podemos distribuir de manera específica para cada grupo de navegadores.

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.

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online Escu...

Manual