Javascript a fondo

Todo lo que necesitas para aprender Javascript está en esta página. Aquí encontrarás todos los contenidos de Javascript de DesarrolloWeb.com, que te servirán para dar los primeros pasos con el lenguaje y aprender los usos más avanzados.

Están distruidos en una serie de páginas con manuales que te introducen el propio lenguaje, técnicas y talleres, librerías para realizar tareas más complejas y en menos tiempo, etc. Si te interesa Javascript con todos estos materiales podrás dominarlo.

Contenidos

Qué es Javascript

Javascript es un lenguaje de programación que surgió con el objetivo inicial de programar ciertos comportamientos sobre las páginas web, respondiendo a la interacción del usuario y la realización de automatismos sencillos. En ese contexto podríamos decir que nació como un "lenguaje de scripting" del lado del cliente, sin embargo, hoy Javascript es mucho más. Las necesidades de las aplicaciones web modernas y el HTML5 ha provocado que el uso de Javascript que encontramos hoy haya llegado a unos niveles de complejidad y prestaciones tan grandes como otros lenguajes de primer nivel.

Pero además, en los últimos años Javascript se está convirtiendo también en el lenguaje "integrador". Lo encontramos en muchos ámbitos, ya no solo en Internet y la Web, también es nativo en sistemas operativos para ordenadores y dispositivos, del lado del servidor y del cliente. Aquella visión de Javascript "utilizado para crear pequeños programitas encargados de realizar acciones dentro del ámbito de una página web" se ha quedado muy pequeña.

En el contexto de un sitio web, con Javascript puedes hacer todo tipo de acciones e interacción. Antes se utilizaba para validar formularios, mostrar cajas de diálogo y poco más. Hoy es el motor de las aplicaciones más conocidas en el ámbito de Internet: Google, Facebook, Twitter, Outlook... absolutamente todas las aplicaciones que disfrutas en tu día a día en la Web tienen su núcleo realizado en toneladas de Javascript. La Web 2.0 se basa en el uso de Javascript para implementar aplicaciones enriquecidas que son capaces de realizar todo tipo de efectos, interfaces de usuario y comunicación asíncrona con el servidor por medio de Ajax.

Nota: Quizás algunas de esas palabras te suenen todavía a chino, pero en DesarrolloWeb.com podrás encontrar manuales para aprender no solo los conceptos, sino cómo implementar esos comportamientos en páginas web. No te preocupes, iremos poco a poco.

Observarás que casi siempre nos referimos a Javascript como el "lenguaje de programación de páginas del lado del cliente", pero como ya hemos mencionado, Javascript es mucho más. Esto es porque hemos vivido Javascript desde sus inicios, cuando el navegador (inicialmente Netscape) era el único contexto en el que podías ejecutarlo. También, ese es el Javascript que debes conocer si estas comenzando y el que querrás aprender en la mayoría de las ocasiones.

Entender Javascript en el contexto de los lenguajes de la web

Para entender bien lo que es Javascript y en qué situaciones se utiliza debes conocer los distintos lenguajes que se utilizan en la web. No es necesario que domines todos los lenguajes de la web para hacer un buen uso de Javascript, tan solo será necesario que conozcas el HTML y tengas algunas nociones de CSS. En ese manual podrás también conocer algunos de los conceptos clave para entender qué es Javascript, como la programación del lado del cliente y la programación del lado del servidor.

  • Manual de los lenguajes del web
    En esta compilación de artículos podrás dar un repaso general a lenguajes y tecnologías que están presentes en el día a día del desarrollo de sitios web.

Javascript básico (como lenguaje de scripting del lado del cliente)

A Javascript se le denomina "del lado del cliente" porque donde se ejecuta es en el navegador (cliente web), en contraposición a lenguajes como PHP que se ejecutan del "lado del servidor". En el lado que nos ocupa con Javascript, el cliente, es el navegador el que soporta la carga de procesamiento. Gracias a su compatibilidad con todos los navegadores modernos se ha convertido en un estándar como lenguaje de programación del lado del cliente.

Con Javascript podemos crear efectos especiales en las páginas y definir interactividades con el usuario. El navegador del cliente es el encargado de interpretar las instrucciones Javascript y ejecutarlas para realizar estos efectos e interactividades, de modo que el mayor recurso, con que cuenta este lenguaje es el propio navegador y todos los elementos que hay dentro de una página (que no es poco). Pero ahora, gracias a las API Javascript del HTML5, que están disponibles en los navegadores actuales de ordenadores y dispositivos, podemos acceder a todo tipo de recursos adicionales, como la cámara, espacio para almacenamiento de datos, creación de gráficos basados en vectores y mapas de bits, flujos de datos con servidores, etc. Con todo ello se han multiplicado las posibilidades.

Cómo y cuando aprender Javascript

En la secuencia del aprendizaje de las tecnologías y lenguajes del web, Javascript sería el lenguaje más adecuado para aprender después de conocer perfectamente HTML y algo de CSS. Es ideal para cualquier persona con conocimientos de programación o incluso para aquellos profesionales que no los tienen pero que no quieren dejar de lado las grandes posibilidades de Javascript para mejorar la experiencia de usuario en 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 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.

Cuando empiezas a aprender Javascript, ejecutando tus programas en el navegador, los primeros ejemplos que realizarás tendrán 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 (eventos), con lo que podemos crear páginas interactivas con programas como calculadoras, agendas, o hojas de cálculo, interfaces de usuario diversas, etc.

Javascript es un lenguaje con muchas posibilidades, permite la programación de pequeños scripts, pero también de programas más grandes, orientados a objetos, con funciones, estructuras de datos complejas, etc. Además, Javascript pone a disposición del programador todos los elementos que forman la página web, para que éste pueda acceder a ellos y modificarlos dinámicamente.

Con Javascript el programador es capaz de alterar cualquier cosa que se muestra en una página, cambiando, insertando o eliminando todo tipo de contenido. Si lo deseas, puedes controlar de cada cosa que ocurre en la página cuando la está visualizando el usuario y comunicar con él con todo tipo de interfaces especiales. Todo eso es lo que permitirá crear aplicaciones web realmente impactantes. Aprender todo eso no se consigue en dos días, pero con ganas todo se acaba consiguiendo.

En DesarrolloWeb.com podrás aprender el Javascript básico en dos manuales distintos:

  • Manual de Javascript
    Este manual trata todos los temas más básicos de Javascript, desde la creación de tus primeros scripts. Nos enseña los diferentes lugares donde podemos integrar el código Javascript dentro de una página web, pero lo más importante que verás en este manual es todo lo relacionado con la sintaxis del lenguaje, estructuras de control (bucles, condicionales), funciones, etc. Este manual está explicado paso por paso, de modo que lo podrán entender incluso aquellas personas que no tienen conocimientos de programación.
  • Programación Javascript II
    En este segundo manual podrás entender Javascript dentro del contexto del navegador. Aprenderás que con Javascript tienes a tu disposición cualquier elemento de la página, que podrás alterar para implementar las necesidades de tus aplicaciones y responder a la interacción del usuario.
  • Videotutorial de Javascript
    Si prefieres aprender por medio de vídeo tenemos también una serie de videotutoriales de Javascript ideales para iniciarse en el lenguaje. Cubren la parte de la sintaxis de Javascript, variables, arrays, estructuras de control, funciones, etc.

Librerías Javascript

Una vez conozcas el Javascript esencial y hayas podido explorar diversos ejemplos y utilidades querrás dedicarte a aprender algunas librerías extremadamente útiles como es el caso de jQuery o similares.

Aprendiendo Javascript llegarás a un nivel en el que percibirás que cada navegador interpreta de una manera distinta el lenguaje. Lo que puede estar correcto en un cliente web puede que no se vea bien en otro y viceversa. Por ese motivo los programadores han tenido que realizar tradicionalmente mucho código Javascript para distinguir qué navegador está usando nuestro visitante y luego para ejecutar aquel código Javascript que es capaz de interpretar bien el navegador del usuario. A este código capaz de ejecutarse sin errores en distintos navegadores se le llamó "Cross Browser", pero no era práctico para los desarrolladores, pues surgían programas con código muy complejo, que requería constante mantenimiento para adecuarse a los nuevos navegadores y las nuevas versiones.

Afortunadamente Javascript se ha vuelto un estándar y los navegadores modernos son capaces de interpretarlo de manera muy similar, pero todavía quedan muchos navegadores antiguos que ejecutan Javacript muy particular y nos toca lidiar con ellos en el día a día. Para ello contamos con diversas librerías que nos ayudan mucho. Pero el objetivo de estas librerías no es solamente hacer código compatible con cualquier sistema, también se trata de hacer más simples las cosas que se suelen necesitar en el día a día. Osea, realizar efectos con pocas líneas de código, comunicaciones asíncronas con el servidor (Ajax) fáciles de implementar, gestión de eventos, etc.

jQuery

La librería más conocida de Javascript se llama jQuery y se ha convertido en un complemento en la mayoría de las webs que usamos en nuestro día a día, por su facilidad de uso y por su potencia. Con jQuery puedes escribir código Javascript que es capaz de ejecutarse sin errores en cualquier navegador, incluso los antiguos y te implementa muchas funcionalidades que puedes requerir repetidamente en cualquier sitio web.

jQuery te permite además programar nuevas funcionalidades por medio de plugins para hacer cosas tan variadas como validación de formularios, sistemas de plantillas, pases de diapositivas, interfaces de usuario avanzadas y un largo etc. Por donde quiera que vayas en la web encontrarás funcionalidades dinámicas programadas por medio de plugins jQuery.

Aprender jQuery está al alcance de todos y ese es el principal motivo de que sea tan usada. De hecho, incluso diseñadores sin grandes conocimientos de programación son capaces de usar la librería para cubrir sus necesidades, aunque a veces sea solo un ejercicio de "copia-pega". Pero ojo, no conviene engañarse, si quieres sacarle partido a jQuery primero debes aprender Javascript.

  • Manual de jQuery
    Es el manual completo de la librería Javascript jQuery, el complemento más popular para los desarrolladores en Javascript. Hace un recorrido con absoluta profundidad de cada uno de los componentes de la librería, enseñando a manejarla con muchos ejemplos prácticos.
  • Videotutorial de jQuery
    Vídeos para aprender a programar con jQuery, con lecciones teóricas y que exploran las funcionalidades principales de la librería, así como casos prácticos desarrollados desde cero con la intención de facilitar al estudiante casos de uso que le sirvan para entender los mecanismos habituales para el desarrollo con jQuery.
  • Manual de jQueryUI
    jQueryUI es una extensión de jQuery por medio de una serie de plugins para implementar interfaces de usuario avanzadas. Dispone desde sistemas para facilitar la interaccion, como componentes para implementar drag & drop, elementos capaces de ordenarse, redimensionarse, etc. hasta interfaces como campos de autocompletado, sistemas de selección de fechas, menús dinámicos, tooltips, cajas de diálogo, etc.
  • Manual de jQuery Mobile
    jQuery Mobile es el más nuevo de los productos de la familia jQuery. Si jQuery sirve para hacer cualquier tipo de Javascript para cualquier tipo de página, ejecutable en cualquier entorno, jQuery Mobile es una librería que nos permite el desarrollo rápido de sitios web para móviles. Tiene una serie de componentes de interfaz de usuario y una serie de utilidades para crear páginas orientadas para móvil, responder a interacción en pantallas táctiles, etc. Con muy poco código Javascript en jQuery Mobile puedes crear sitios dinámicos que se comportan muy bien cuando los usas en la mayoría de los fabricantes de dispositivos.

Otras librerías de Javascript

jQuery es la librería más popular, pero existen otra serie de librerías que nos sirven para realizar cosas similares y que tienen diversos modos de resolver los mismos problemas. En DesarrolloWeb.com explicamos diversas librerías alternativas, entre las que podemos destacar Mootools o YUI. Para la mayoría de los desarrolladores jQuery será la librería más adecuada, por ser en muchos casos más fácil de entender, tener la mayor comunidad y con ello resultar más sencillo encontrar documentación, ejemplos y plugins listos para usar. Salvo esas ventajas, que no son pocas, algunos programadores experimentados podrán preferir otras librerías. Por ejemplo, si sabes programar con orientación a objetos probablemente te gustará más cómo se desarrollan los componentes reusables en Mootools.

  • Manual de Mootools
    Es una librería muy conocida para Javascript, competidor de jQuery por realizar cosas muy similares. Con Mootools puedes realizar todo tipo de efectos visuales, Ajax, alterar elementos de la página, etc. Su curva de aprendizaje es un poco pesada, pero con este manual te lo facilitamos bastante. Podrás entender bien cómo realizar ejemplos sencillos y también componentes avanzados que podrás reutilizar fácilmente.
  • Manual de YUI
    Es la librería Javascript construida por el equipo de desarrolladores de Yahoo!, implementada en su portal y en sus aplicaciones. Este manual es simplemente una rápida lista de artículos para dar los primeros pasos.

Javascript y HTML5

La revolución de Javascript ha llegado con la incorporación del HTML5. A pesar de su nombre, HTML5 incuye varios estándares aparte de ser una revisión del propio lenguaje HTML. De hecho más del 60% de lo que se conoce como HTML5 en realidad son APIs Javascript. Un API es un conjunto de funciones que sirven para llevar a cabo una o muchas tareas. Pues el HTML5 incluye diversas API para trabajar ya no solo con el navegador, sino también con los periféricos o los elementos del dispositivo, como cámara, pantalla, espacio de almacenamiento, GPS, etc.

HTML5, en definitiva, ha llegado para estandarizar aun más Javascript y crear una serie de especificaciones que siguen todos los fabricantes de navegadores para ordenadores y dispositivos y que aseguran que el Javascript es igual en todos ellos. HTML5 sirve por tanto para ordenadores de escritorio, pero también para todo tipo de dispositivos que nos encontramos actualmente, desde móviles a tablets, smartTV, etc.

APIs del HTML5

Si queremos aprovechar HTML5 tendremos que aprender a manejar una serie de características nuevas de Javascript, con una serie de API que nos sirven para trabajar con los más diversos recursos del navegador y del ordenador/dispositivo del usuario. Las API del HTML5 nos permiten extender todavía más las posibilidades de Javascript, llegando a situarlo en condiciones similares a las de otros lenguajes de programación.

Llegado a este punto es inevitable hablar del concepto de "Webapp", que son aplicaciones para móviles y tablets que están basadas en HTML5 (HTML + CSS + Javascript) y que pueden controlar el dispositivo, por medio de las API, de igual modo que los lenguajes de programación nativos. Aunque en 2014 todavía las webapp no son capaces de funcionar tan bien como las aplicaciones nativas, tienen un futuro muy prometedor.

Para aprender sobre las API de HTML5 no tenemos un manual que las recorra una por una, sino un compendio de artículos que llamamos "taller".

  • Taller de HTML5
    Es un manual en el que encontrarás multitud de artículos sobre Javascript que usan las características que nos trae el HTML5. Hay diversos artículos que te aproximan desde un enfoque muy práctico las distintas APIs de Javascript y que te enseñan a usarlas para la resolución de diversos tipos de problemas.
  • Manual de Canvas del HTML 5
    Un completo manual del API de Canvas del HTML5 que nos permite dibujar en un "lienzo" cualquier cosa por medio de funciones Javascript. El canvas se situa en un elemento CANVAS de la página y por medio de código fuente podemos pintar todo tipo de formas, líneas, puntos, poligonos, imágenes traídas desde ficheros gráficos, etc. El canvas es uno de los elementos fundamentales para implementar juegos en HTML5.

HTML5 y compatibilidad

El problema de HTML5 es que no todos los navegadores implementan todas las características del estándar, por ello si usas HTML5 debes tener en cuenta una serie de pasos adicionales para gestionar aquellas incompatibilidades que puedan encontrar los usuarios que visitan tu web. A día de hoy podemos usar HTML5 con total confianza. La mayoría de las cosas que querrás implementar en cualquier proyecto están ya completamente adoptadas por los navegadores modernos. Pero la realidad es que muchas personas navegan todavía con navegadores anticuados, como pueden ser versiones de Internet Explorer anteriores a la 10 o la 11.

Existen diversas técnicas para aplicar compatibilidad a los navegadores antiguos. En la mayoría de los casos los desarrolladores se decantan por lo que se denomina "graceful degradation", que consiste en aplicar técnicas que permitan una "degradación amigable" de las aplicaciones web, de modo que se minimicen los efectos indeseables por la falta de compatibilidad. Estas técnicas incluyen la carga de librerías adicionales para suplir las carencias que tienen los navegadores antiguos o la ejecución de estilos o scripts alternativos. En este caso el aliado indispensable es Modernizr

  • Manual de Modernizr
    Es un manual que te enseña a manejar los aspectos fundamentales de la librería Javascript Modernizr que permite la detección de características del navegador y la carga condicional de estilos CSS o de scripts en función de lo compatible, o no, que sea un navegador. Con Modernizr fácilmente puedes hacer que clientes web obsoletos entiendan perfectamente las nuevas etiquetas del HTML5, que se les apliquen CSS diferentes dependiendo de los navegadores que ven la página y cargar condicionalmente librerías denominadas "polyfills" que sirven para implementar de manera no nativa características del HTML5 que son nativas en los navegadores modernos.

MVC en Javascript

Siguiendo con la secuencia lógica de tu aprendizaje de Javascript, llegarás en este punto al MVC. Son las siglas de Modelo, Vista y Controlador y se trata de un paradigma de programación que se usa en lenguajes donde se tiene que trabajar con interfaces gráficas, como es el caso de la Web. Propone la separación del código de las aplicaciones por responsabilidades. Los modelos se encargan de trabajar con los datos de la aplicación, las vistas con la presentación y los controladores hacen de conexión entre vistas y modelos. MVC no es algo específico de Javascript, sino que lo encontramos en lenguajes del lado del servidor como PHP o incluso en lenguajes de propósito general como es Java.

Trabajar con paradigmas como MVC es fundamental en el mundo de las aplicaciones web, porque nos permite organizar mejor nuestro código, facilitando el mantenimiento de las aplicaciones. Sin esa organización es habitual que los desarrollos tiendan al caos cuando son muy complejos de realizar y se aumentan considerablemente los costos de mantenimiento. Es por ello que el MVC en Javascript, aunque ha tardado algo más en establecerse que en otros lenguajes, ha llegado para quedarse. En este lenguaje a veces nos referimos a MVC como MV* porque la figura del Controlador se ha llevado a diversas interpretaciones e implementaciones. A veces encontramos sistemas MVR, MVVM... en realidad es todo lo mismo, con distintos matices.

Existen diversas librerías para realizar MVC en Javascript, entre las más populares están BackboneJS, EmberJS, AngularJS, KnockoutJS, etc. Todas tienen interesantes ventajas para los desarrolladores y hacen "magia" para que no necesitemos preocuparnos por diversos detalles a la hora de programar en Javascript.

  • Manual de BackboneJS
    Este manual te ofrece una bonita introducción a los sistemas MVC de Javascript, de la mano de BackboneJS que es sin duda la librería MVC más sencilla de entender. Si estás pensando en dar los primeros pasos en el mundo del MVC del lado del cliente y deseas que esta primera aproximación te facilite tu aprendizaje, merece la pena comenzar por BackboneJS. Este manual no tiene demasiada profundidad pero se preocupa mucho por explicar aquellos conceptos que se encuentran en los sistemas MVC y que debemos dominar para poder asimilarlos con garantías.
  • Manual de AngularJS
    AngularJS es la librería MVC más destacada para Javascript, que nos permite un desarrollo rápido y promueve las mejores prácticas. Es especialmente adecuada para el desarrollo de aplicaciones web en general incluso aplicaciones de una sola página que se parecen a las aplicaciones de escritorio. Apoyada por Google y una gran comunidad va camino de convertirse en el estándar en cuanto a MVC se refiere. Comenzar con AngularJS es tan sencillo que te sorprenderá.

NodeJS

No podemos dejar de hablar de Javascript sin mencionar NodeJS. Se trata de un lenguaje de propósito general pero que tiene como particularidad usar el motor de Javascript V8 (el motor de Javascript implementado en el Google Chrome) para la ejecución de los programas. Que sea de propósito general indica que puedes realizar cualquier tipo de aplicación, por lo tanto NodeJS no es un lenguaje web propiamente dicho. Es capaz de servir para el desarrollo web, igual que es también capaz de servir para muchas otras cosas que no tienen nada que ver. Por ese motivo, aunque a veces se denomina a NodeJS como el Javascript del lado del servidor, la realidad es que es mucho más que eso.

NodeJS es un lenguaje que tiene unas características diferentes a otros lenguajes, como su característica más peculiar encontramos lo que se llama programación "asíncrona" que no es más que la capacidad de realizar acciones que lleven un tiempo para la ejecución sin necesidad de mantener procesos en estado de espera. Esto provoca que su ejecución sea bastante ligera, aunque también complica algo las cosas para las personas que están acostumbradas a que los programas siempre se ejecutan siguiendo un flujo fijo de instrucciones, tal como están escritos. Si dominas Javascript habrás podido usar la programación asíncrona en parcelas como el Ajax, por lo que no te resultará muy complicado entender cómo se programa en NodeJS.

A pesar que sirve para muchas cosas, NodeJS se ha convertido en un lenguaje muy usado por los desarrolladores web. Muchas herramientas del día a día de los desarrolladores están programadas con NodeJS como los gestores de paquetes "npm" o "bower". También muchas herramientas para desarrollo frontend están programadas en NodeJS. Además existen diversos frameworks como SailsJS o ExpressJS que se pueden usar para aplicar NodeJS en el desarrollo web.

  • Manual de NodeJS
    Hemos comenzado un manual para tratar de llevar el mundo NodeJS a tu día a día. Es un manual que da por sabidas ciertas cosas de la programación en Javacript en general y trata de explicar las características de este lenguaje en particular, el flujo de trabajo para la programación de aplicaciones, los gestores de paquetes, librerías más comunes, etc.

Aplicaciones prácticas

A lo largo de todo DesarrolloWeb.com disponemos de muchos otros manuales que nos explican diversos aspectos prácticos de Javascript. Son manuales que denominamos talleres porque no explican nada teórico, sino que dan paso a paso todas las guías para acometer diversos proyectos, unos simples y otros complejos. Estos manuales son más adecuados para practicar, mientras que los manuales mencionados anteriormente son más adecuados para conocer el lenguaje, librerías y tecnologías complementarias.

Los encontrarás de diversas dificultades y aplicaciones. Simplemente mostramos un listado con los títulos de los principales manuales prácticos que podrás encontrar en este sitio.

Otras librerías más específicas o frameworks de interés

Completamos esta lista de manuales disponibles en DesarrolloWeb.com con algunas otras librerías, frameworks o complementos que te pueden servir en el día a día como desarrollador, como es el caso del debug en Javascript con Firebug o el trabajo con templates Javascript que nos facilita Handlebars. Son librerías que sirven para cosas más específicas como processing, que permite el dibujo e interacción con canvas de alto nivel. Seguramente podrás "jugar" con alguna de estas librerías y mejorar tus proyectos o tu flujo de trabajo como desarrollador.

Aprender Javascript te abrirá muchas puertas profesionales

Javascript es el lenguaje que en estos momentos tiene mayor potencial de crecimiento. Como hemos dicho, Javascript te sirve para hacer web, pero también para trabajo con dispositivos por medio de las API HTML5 para crear las webapps. Incluso es un lenguaje nativo en Windows 8 o sistemas operativos como FirefoxOS o Blackberry 10.

Existe una gran demanda de profesionales con conocimientos avanzados de Javascript, necesarios para acometer cualquier proyecto en la web de última generación, así que todo el tiempo que inviertas en aprender este lenguaje te resultará de mucha utilidad.

También queremos recomendarte mantenerte atento a los eventos #jsIO que realizamos periódicamente y a los que ya encuentras grabados en el canal de Youtube de DesarrolloWeb.com.

Compartir