Introducción

Requisitos previos al aprendizaje de JavaScript

Conviene tener conocimientos de básicos a medios 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, …
  • Alguna experiencia en programación. Conocimiento sobre los lenguajes C/C++ sería ideal, por la similitud de su sintaxis con la de JavaScript.

¿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.

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).
  • Crear apps móviles.

Todo desarrollador Web debería aprenderlo, ya que es de uno de los 3 pilares básicos de la 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, …

Podría añadirse a estos 3 pilares un 4º, considerando la necesidad de utilizar, para ciertas tareas, un lenguaje de programación del lado servidor, con el objeto de mostrar páginas creadas dinámicamente mediante la consulta a bases de datos. Lenguajes del lado del servidor son, por ejemplo, PHP y Phyton.

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.

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 potentes funcionalidades.
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, …

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.

Nota: javaScript, a pesar de su nombre, no tiene nada que ver con el lenguaje Java.

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. 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, …

Breve historia

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.

¿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 JavaScritp.

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 JavaScritpt, 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.

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 sencillo de aprender: está principalmente enfocado en el DOM; programación de estilos es muy similar a CSS; …

Para incluir dentro del código debemos colocar el <script> dentro del <head> así:

<head>
<script src = "jquery-1.11.3.min.js"> </ script>
</ head>

El hecho de que el uso de jQuery sea tan amplio, es una ventaja sobre sus competidores.

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.

AngularJS

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

AngularJS está mantenido por Google y una gran comunidad.

BackboneJS es similara 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)

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

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.

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)