Introducción a programación web con JavaScript

Conocimientos previos al aprendizaje de JavaScript

Conviene tener nociones en:

• El lenguaje de marcas HTML, con el que crearemos el contenido y estructura de la página web.
• Las hojas de estilos CSS, con las que daremos el formato a la página web: colores, formas, tamaños, apariencia del texto, posición en la página de los distintos elementos, …

¿Qué es JavaScript?

JavaScript es el lenguaje de scripting de la Web. Es código de programación que puede ser insertado en páginas HTML. Es un lenguaje interpretado, orientado a objetos, basado en prototipos.

JavaScript fue inventado por Brendan Eich en 1995, y se convirtió en estándar ECMA en 1997. El nombre oficial del estándar es ECMA-262. ECMAScript es el nombre oficial del lenguaje.

JavaScript puede usarse en multitud de tareas:

• Programación web en el lado del cliente: validar formularios, crear carruseles de imágenes / slides.
• Programación web en el lado servidor (NodeJS).
• Aplicaciones externas a la web. Crear apps móviles, programas de escritorio, documentos PDF, …

Todo desarrollador Web debería aprenderlo, ya que es de uno de los 3 pilares básicos de la Web en el lado cliente (navegador web):

• HTML: Contenido > Estructura básica del sitio.
• CSS: Presentación > Estilos, formato. Apariencia del sitio Web.
• JavaScript: Comportamiento del sitio > Programación en el lado del cliente. Animación, interactividad, efectos visuales, …

A estos se añade el 4º pilar fundamental del desarrollo web: la programación en el lado servidor. En este punto ya no estamos restringidos a un único lenguaje, sino que hay mucho donde elegir: PHP, Phyton, NodeJS (es el propio JavaScript en el lado servidor), C#, Java, …

JavaScript es un lenguaje interpretado o de secuencia de comandos. Ello que significa que un programa intérprete (en este caso el navegador web) «traduce» directamente, a diferencia de lo que ocurre con los lenguajes compilados, en los que el código debe pasar un proceso previo de compilación que convierte el código fuente que el programador escribe en código máquina (comprensible directamente por el procesador). La compilación se lleva a cabo mediante un programa compilador.

JavaScript también es conocido con el nombre de ECMAScript, la especificación oficial de JavaScript.

La incorporación a los motores de interpretación de los navegadores de la capacidad de convertir el código JavaSript en código máquina, logró velocidades de ejecución próximas a aplicaciones de escritorio, convirtiendose así JavaScript en la mejor opción para la web.

La sintaxis de JavaScript es similar a la del lenguaje C, y adopta nombres y convenciones del lenguaje Java. A pesar de la similitud en su nombre, Java y JavaScript tienen y propósitos diferentes.

Programación del lado cliente y del lado servidor

La programación en el lado del cliente es la que se ejecuta en el propio navegador web del usuario.

La programación del lado del servidor consiste en el uso de scripts que se ejecutan en el servidor web, mediante uno de los lenguajes backend. El cliente (navegador web) solicita el contenido al servidor, que podría ser, como ejemplo típico, datos de una base de datos para mostrarlos, insertarlos en una apicación cliente, …

JavaScript es un lenguaje de escripting en el lado del cliente (esto es denominado a veces programación frontend), lo que significa que trabaja dentro del navegador web. Por ello, no padece la lentitud característica de los lenguajes del lado servidor (también llamado backend), como PHP, Python, ASP, Ruby on Rails, que se basan en la comunicación entre navagador web y servidor. Sin embargo, los lenguajes del lado servidor tienen otras funcionalidades que el cliente necesita.

No obstante lo anterior, JavaScript también podría usarse en el lado servidor. El servidor web node.js usa JavaScript del lado servidor para conectar a bases de datos, acceder al sistema de archivos del servidor, …

Limitaciones

Los scritps de JavaScripts tienen ciertas limitaciones/restricciones impuestas por seguridad, aplicadas a los navegadores de Internet. Como ejemplo, los scritps no pueden cerrar ventanas que no hayan abierto estos mismos, no pueden crear ventanas fuera de la vista del usuario, ni acceder a los archivos del equipo del usuario, etc.

Una alternativa comunmente utilizada para saltarse estas restricciones consiste en firmar digitalmente el script y solicitar al usuario el permiso para realizarlas.

Alternativas a JavaScript

Lo cierto es que JavaScript hoy en día es omnipresente en todos los ámbitos, y su absoluta supremacía en el ámbito web hace que parezca incluso insensato recomendar otro lenguaje web en el lado cliente, al menos a corto plazo. Baste decir que estos posibles lenguajes alternativos utilizan JavaScript para la intergración con el navegador, lo cual incide en el rendimiento de la aplicación.

Sin embargo, existen algunas alternativas:

Brython

Sitio web de Brython | Documentación Brython |
Brython fue diseñado para reemplazar a JavaScript con Python como lenguaje de scripting en los navegadores web. Es una implementación de Python 3 que se ejecuta en navegadores.

Si tuviera que elegir una alternativa a JavaScript, sin duda sería Brython.

Otras alternativas

• Google Dart: Es un lenguaje de programación de código abierto, desarrollado por Google.
• Applets de Java, …

¿Qué es el DOM?

El DOM es la representación en forma de árbol o jerarquía del documento HTML. Cada elemento es «hijo» del elemento que lo contiene, padre de los elementos que están dentro suyo, y hermano de los que están a su mismo nivel. El objeto ‘document’ es la raíz del árbol DOM.

Por lo tanto:

document.body.innerHTML = "Texto ejemplo";

… utiliza la propiedad ‘innerHTML’ para insertar la cadena «Texto ejemplo» entre las etiquetas <body> y </body>, siendo ‘body’ un hijo de ‘document’.

El DOM es un estándar de la W3C (World Wide Web Consortium).

Utilizando el HTML DOM (Document Object Model), JavaScript puede acceder y cambiar todos los elementos de un documento HTML.

Frameworks y bibliotecas JavaScript

Hace ya tiempo que empezaron a surgir numerosos frameworks, bibliotecas y demás herramientas que complementan y facilitan la programación con JavaScript.

Una biblioteca es un archivo de JavaScript que contiene funciones que realizan alguna tarea útil en una página web de una forma más simple/con menos instrucciones que con JavaScript «puro». Usar bibliotecas nos permite reutilizar código ya escrito por otros programadores, y por tanto convertir una tarea tediosa, que requiere de ciertas líneas de código, en una más sencilla. Sin embargo, el uso y sobre todo el abuso de estos complementos ralentiza el sitio web.

Hoy en día hay tantos frameworks que es fácil perderse en una jungla de complementos alrededor de JavaScript, intentando averiguar cual es el mejor camino a seguir, como se interrelacionan los complementos, cuales se podrían complementar entre ellos y cuales son alternativos.

Debe entenderse que muchos de estos complementos son de gran calidad y eficiencia, y afirmar que uno/varios de ellos sean los mejores es complicado, incierto y atrevido. La lista mostrada a continuación son solo algunos de los más populares.

Existen frameworks multipropósito y otros para tareas específicas. Puede que uno específico sea mejor para un sitio en el que necesitamos algo muy concreto, y no muchísimas funcionalidades. Por ejemplo, el framework para presentaciones Galleria podría ser mejor que jQuery, si el sitio web solo requiere de un carrusel de imágenes. Esto es debido a que jQuery es mas pesado (18k comprimido y minificado), al disponer de muchísimas más funcionalidades.

Para saber que hace y si nos conviene cierto framework o biblioteca, es útil consultar la documentación disponible en linea para la mayoría de estos.

Los CDN (Content Delivery Network, red de distribución de contenidos)

Los CDNs son servidores optimizados para servir archivos como bibliotecas de JS y servirlos rápidamente. Algunos CDNs bastante grandes que alojan múltiples bibliotecas de JS (como la CDN de Google y cdnjs), y otras bibliotecas tienen sus propios CDN dedicados.

Vanilla javaScript

Vanilla javaScript es como se conoce a la utilización de «puro» JavaScript, sin ningún Framework ni librería. Al parecer existe un movimiento que utiliza a modo de «broma» el término Vanilla JavaScript como si se tratase de un Framework real. Existe incluso el sitio web http://vanilla-js.com/. Esto pretende fomentar el uso de JS puro (raw JavaScript) y recordar a desarrolladores que muchas tareas pueden realizarse sin la necesidad de frameworks ni librerías.

React

| Sitio oficial |
React es una biblioteca Javascript de código abierto diseñada para crear interfaces de usuario con el objetivo de facilitar el desarrollo de aplicaciones en una sola página.
Diseñado para ser sencillo, ayuda a los desarrolladores a construir aplicaciones que usan datos que cambian continuamente. Se diseñan vistas simples para cada estado en la aplicación.

React también puede renderizar en el servidor y crear aplicaciones móviles usando React Native.

AngularJS

AngularJS es un gran framework de software libre, mantenido por Google, y una gran comunidad.

Es un framework JavaScript que extiende el lenguaje HTML, muy adecuado para crear aplicaciones de una sola página (SPA Single-Page Applications).

BackboneJS es similar a AngularJS, y podría considerarse una de sus mejores alternativas.

Es interesante añadir que las tecnologías: AngularJS, node.js (JS en el lado servidor), el framework express y el software de bases de datos MongoDB, todas ellas open source, forman el paquete tecnológico conocido como MEAN, el cual proporciona una forma integrada de simplificar, acelerar el desarrollo de poderosas aplicaciones web y crear páginas interactivas y dinámicas.

Sitios de interés

[angularjs.org] Tutorial oficial de AngularJS

[w3schools.com] Tutorial de AngularJS, de w3schools.com

[egghead.io] Videotutoriales sobre JS, AngularJS y más

Libros

[Amazon] Node.js, MongoDB, and AngularJS Web Development (Developers Library) (Inglés)

jQuery

jQuery es la biblioteca más popular y antigua de JavaScript. Es software libre. Simplifica el manejo de eventos, animaciones, AJAX, resuelve problemas de compatibilidad del código entre navegadores, versatilidad y capacidad para aumentar sus recursos con plugins, …

jQuery es ligero y sencillo de aprender: está principalmente enfocado en el DOM; programación de estilos es muy similar a CSS; …

¿Está muerto jQuery?

El hecho de que el uso de jQuery sea tan amplio, le confiere cierta ventaja. Sin embargo, la aparición de bibliotecas mucho más potentes, como REACT o AngularJS, unido al hecho de que ahora se puede hacer más con javaScript puro (o Vanilla JS) ha dado lugar al inicio de lo que parece será una muerte lenta de jQuery.

jQuery sigue siendo, sin embargo, una biblioteca completamente vigente y presente en muchos sitios web que requieren de mantenimiento.

Sitio web de jQuery | jQuery learning center |

El framework Twitter Bootstrap

Twitter Bootstrap o simplemente Bootstrap, es el framework front-end HTML, CSS y JavaScript más popular que existe actualmente.

Es libre y gratuíto, y fue creado por un empleado de Twitter.

Bootstrap inlcuye plantillas de diseño basadas en HTML y CSS para tipografía, formularios, tablas, etc. y proporciona la capacidad de crear fácilmente diseños responsive.

• Hace el desarrollo web más fácil y rápido.
• Incluye plantillas HTML y CSS para tipografía, formularios, botones, tablas, navegación, carruseles de imágenes, plugins JavaScript y más.
• Te facilita la creación de diseños responsive (sitios adaptados a cualquier tamaño de pantalla).

Uso de Bootstrap

Las alternativas para utilizar Bootstrap en nuestro sitio Web:

• Descargar desde getbootstrap.com uno de los siguientes:
  • Descargar el código CSS y JavaScript compilado, la forma más fácil de empezar.
  • Descargar el código fuente. contiene todos los archivos Less, y JavaScript originales de Bootstrap. Requiere una mayor coinfiguración.
  • Descargar el código fuente en formato Sass, una variante de la versión anterior. Permite fácil inclusión de Rails, Compass, o para proyectos de solo Sass.
  • Instalar Bootstrap con el gestor de dependencias Bower.
• Inicluir Bootstrap desde un CDN. La empresa NetDNA aloja de forma gratuita en su CDN una copia de los archivos CSS y JavaScript de Bootstrap.

MooTools

Sitio web de MooTools |

MooTools (My object oriented tools) es un potente y eficiente Framework web orientado a objetos para JavaScript, de código abierto. Es modular y extensible. El desarrollador elige que componentes usar y cuales no. Su uso es bastante menor en número de sitios web que el de (por usar un ejemplo) Bootstrap, tal como se muestra en este ranking.

MooTools, aunque más difícil de aprender que jQuery, es más flexible que este, al no limitarse solo al DOM, sino mejorando el lenguaje en todos sus aspectos.

Como otras tantas bibliotecas JavaScript, MooTools aporta al usuario muchas ventajas.

Bibliotecas para reproducción de audio / administración de sonido

Howler.js

Sitio web: https://howlerjs.com/

Permite reproducir audio en un sitio web. Algunas de sus características principales:

• Soporta múltiples formatos.
• Única API para cualquier tarea.
• Soporta todos los códecs para una completa compatibilidad entre navegadores.
• Reproducción de varios sonidos a la vez.
• Control completo del «fading», búsqueda, volumen, etc.
• Modular: usa lo que necesitas.
• Sin dependencias externas: solo JavaScript puro.
• Ligero: 7kb comprimido.

Enlaces de interés:

[stackoverflow.com] Como encaedenar sonidos en howler.js

[khanacademy.org] Usar bibliotecas de JS en tu página web

Buzz

Sitio web: http://buzz.jaysalvat.com/

Licencia: MIT (software libre)

Buzz es una pequeña bilioteca JavaScript que te permite incluir y administrar sonido en sitios web usando la etiqueta de audio HTML5.

Audio.js

Más información y enlaces de interés > Frameworks y bibliotecas JS

• [carlosazaustre.es] Artículo que analiza con bastante rigor muchos de los frameworks y librerías de JavaScript que existen.
• [jqueryvsmootools.com] Comparativa entre los frameworks Bootstrap y MooTools.
• [blog.arsys.es] jQuery vs MooTools – Ventajas e inconvenientes.

Sobre Twitter Bootstrap

• [librosweb.es] Maual de Bootstrap 3.
• [w3schools.com] El tutorial de Bootstrap de w3schools

Gestores de paquetes, empaquetado de aplicaciones y otras herramientas para JavaScript

Webpack

| Sitio oficial |

A medida que las dependencias de nuestro proyecto web crecen el desarrollo se complica y aumenta el número de assets a ser incluidos en el HTML y con ello el número de peticiones que el navegador debe realizar al servidor para cargar la página. Esto perjudica el rendimiento.

Webpack es una indispensable herramienta de bundling o empaquetado de código. Permite generar una distribución única a partir de un conjunto de assets. A partir de un grupo de ficheros obtendremos un único fichero empaquetado/Bundle, optimizado y listo para el desarrollo.

Webpack soporta por defecto formatos como HTML, CSS y JavaScript. Otros formatos deben ser transformados como SASS, CoffeeScript o Jade.

Instalación

Webpack utiliza Node.JS, por lo que debemos tener instalado este último en nuestro equipo. Lo comprobamos:

node -v

Por otra parte, si vamos a instalar webpack mediante NPM, también habremos de tener este operativo. Lo comprobamos:

npm -v

Instalar Webpack:

npm install -g webpack

El comando más sencillo para realizar un bundle de nuestros archivos JavaScript:

webpack ./index.js ./build/app.js

Este comando lee el archivo index.js que sería el principal de nuestra aplicación, importa todos los módulos que estén definidos y crea el fichero Bundle app.js en la carpeta build.

Ajax

En muy pocas palabras, Ajax (Asynchronous JavaScript And XML) permite acceder a datos existentes en el servidor sin necesidad de recargar la página completamente.

Ajax es una técnica de desarrollo web para crear aplicaciones interactivas. Es posible realizar cambios sobre las páginas sin necesidad de recargarlas, mejorando la interactividad, velocidad y usabilidad en las aplicaciones. Por tanto Ajax NO es un lenguaje de programación, sino una técnica o capa superpuesta a JavaScript para acceder a servidores web.

Ajax entre otras funciones, permite la recarga de parte o toda una página web, lo cual forma parte de una de las mejoras de Web 2.0. La recarga o actualización de solo parte de una página web en vez de entera conlleva el ahorro de tiempo característico de las consultas al servidor.

Validar páginas Web

Un validador HTML es un programa que verifica que la página Web está bien escrita, analizando el código en esta.

El World Wide Consortium (W3C), organización responsable de la mayoría de tecnologías que se usan en la web, pone a dispositión del público un validador gratuito.

Herramientas de Mozilla Firefox para desarrolladores

Las importantísimas herramientas para desarrolladores web que llevan incorporados los navegadores Web (yo me referiré siempre a las de Firefox) entre estas la consola de JavaScript, son más que valiosa ayuda. La consola permite detectar errores en el código de programación, e incluye una línea de comando, con la que se pueden ejecutar expresiones en la página actual.

Borrador

Para ejemplos de código más extensos que una/s pocas líneas, la herramienta borrador es más conveniente que la consola. La abrimos desde el menú de M.Firefox > Desarrollador > Borrador. La nueva ventana es un editor que podemos usar para escribir y ejecutar JavaScript en el navegador. El borrador nos permite además guardar y cargar los scripts desde el disco duro.

Software para programar en JavaScript

Aunque es posible programar en cualquier editor de texto plano corriente (el editor por defecto de Linux) conviene obtener uno de los muchos programas editores de programación gratuítos y libres disponibles para Linux, con muchísimas funcionalidades extra que facilitan la programación: coloreado de palabras, numeración de líneas, etc.

• Bluefish. El que yo uso. Fácil, gratuito, versátil.
• Eclipse, versión para desarrolladores de JavaScript.
• NetBeans
• Etc.

Enlaces de interés, sitios donde aprender JavaScript

[mozilla.org] Tutorial de JavaScript del MDN (Mozilla Developer Network)
[mozilla.org] Aprender desarrollo web, en general
[w3schools] Referencia completa JavaScript (en inglés)