Tema 37: JavaScript y programación del lado cliente

Front-end: JavaScript

JavaScript es un lenguaje de programación ligero, interpretado o compilado justo-a-tiempo (just-in-time, JIT) con funciones de primera clase (first-class functions): las funciones pueden asignarse a variables, pasarse como argumentos y devolverse como resultado. Es la afirmación de que JavaScript ofrece "funciones de segunda clase" la que resulta INCORRECTA. Su objetivo principal en el desarrollo web es manipular el contenido de la página (el DOM) y gestionar eventos en el lado cliente. Con él, por ejemplo, se puede mostrar una ventana emergente (pop-up) de confirmación en el navegador del usuario.

ECMAScript: la especificación

ECMAScript es la especificación estándar en la que se basa JavaScript; JavaScript es una implementación de ECMAScript. La mantiene ECMA International, organización cuyo objetivo es desarrollar estándares y reportes técnicos para facilitar el uso de las tecnologías de la información (norma ECMA-262). El comité técnico TC39 gestiona su evolución.

• ECMAScript 2015 (ES6) introdujo, entre otras cosas, las clases, las propiedades computadas y los métodos estáticos.

• ECMAScript 2016 (ES7) fue una versión muy pequeña que añadió exactamente dos novedades: el operador de exponenciación ** (equivalente a Math.pow()) y el método Array.prototype.includes().

Clases y miembros estáticos (ES6)

Una clase se declara con la palabra clave class seguida del nombre de la clase. Los métodos dentro de la clase se escriben de forma resumida, sin la palabra function. Con la palabra clave static antes del nombre se definen métodos y propiedades estáticas (pertenecientes a la clase, no a la instancia). No obstante, las propiedades estáticas en JavaScript ES6 tienen una limitación: se pueden definir, pero no de la misma manera que en otros lenguajes de programación más tradicionales.

static area(r) { return Circulo.PI * r ** 2; }

}

Propiedades computadas vs getters

Las propiedades computadas (introducidas en ES6/ES2015) son propiedades de objetos cuyos nombres se pueden determinar en tiempo de ejecución, calculados a partir de una variable. Su ventaja es precisamente crear propiedades con nombres calculados y definidos por una variable. Se diferencian de los getters: los getters computan el valor de una propiedad, mientras que las propiedades computadas determinan el nombre de la propiedad.

const obj = { [clave]: 100 };  // propiedad computada: obj.stock

Operadores, cadenas y bucles

El operador de desigualdad estricta !== compara valor y tipo: (x !== 9) es verdadero si x difiere de 9 en valor o en tipo. Por ello, si x = 5 (número), la expresión x !== "5" devuelve true (distinto tipo). Ejemplos de manipulación de cadenas y bucles:

• ('hola tai'.split(' ')).join('') → 'holatai' (divide por el espacio y une sin separador).

• let i = 0; while (i < 5) { i++; } → al finalizar, i vale 5.

AJAX y XMLHttpRequest

AJAX significa Asynchronous JavaScript And XML. Es la tecnología que permite realizar peticiones en segundo plano y actualizar parcialmente la página de forma asíncrona sin recargarla por completo (por ejemplo, consultar el stock de un artículo sin interrumpir al usuario). El objeto que realiza estas solicitudes HTTP asíncronas es XMLHttpRequest, que ofrece una forma fácil de obtener información de una URL sin recargar la página.

• Método send(): envía la solicitud HTTP.

• Propiedad onreadystatechange: manejador que se dispara para recibir/procesar la respuesta HTTP según cambia readyState.

Como alternativa moderna al manejo de la asincronía, las Promesas (Promise) permiten realizar llamadas asíncronas y manejar su resultado, logrando que los métodos asíncronos devuelvan valores como si fueran síncronos.

DOM, eventos y APIs del navegador

El acceso a un elemento por su identificador se hace con window.document.getElementById("header"). Entre los eventos HTML, onmouseover produce un efecto al situar el puntero del ratón sobre un elemento.

• window.btoa(): método del objeto Window que codifica una cadena en Base64 (su inverso es atob()).

• localStorage y sessionStorage: APIs de almacenamiento web de HTML5 que guardan información en el cliente en formato clave/valor.

• Cookies: una cookie temporal (de sesión) se almacena en memoria y se elimina al cerrar el navegador; NO se guarda en el disco duro (esa afirmación es la incorrecta), a diferencia de las persistentes.

Motores, navegadores y herramientas

• Motor JavaScript de Google Chrome: V8.

• Navegadores: Firefox es de código abierto; Opera puede usarse en Linux. Browser Sync NO es un navegador (es una herramienta de sincronización de desarrollo).

• Babel: transpilador/compilador que transforma el código JavaScript moderno para que lo interpreten los navegadores web más antiguos.

• Gulp / gulp.js: sistema de construcción (build system) que automatiza tareas comunes de desarrollo front-end, como la minimización (minify) de código JavaScript.

• Modernizr: detecta la falta de compatibilidad de las funcionalidades del proyecto con cada navegador.

• Adobe XD: herramienta de diseño visual de interfaces de usuario.

Bibliotecas y frameworks de interfaz

• React: biblioteca (librería) JavaScript de código abierto para construir interfaces de usuario.

• Angular: framework para crear aplicaciones web de una sola página (SPA).

• Bootstrap: conjunto de herramientas de interfaz potente y repleto de funciones, que aporta componentes de presentación, estilo y comportamiento para la parte dinámica del front-end HTML. Se apoya en JavaScript (por ejemplo, $('#myModal').modal() crea un modal) y usa un sistema de rejilla (grid) de 12 columnas con clases responsivas como col-md-6 para el tamaño medio (≥768px y <992px):

<div class='row'>

<div class='col-md-6'>Columna 1</div>

<div class='col-md-6'>Columna 2</div>

</div>

Fuentes

• MDN Web Docs — JavaScript: https://developer.mozilla.org/es/docs/Web/JavaScript

• MDN Web Docs — Window: btoa(): https://developer.mozilla.org/en-US/docs/Web/API/Window/btoa

• MDN Web Docs — XMLHttpRequest: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

• MDN Web Docs — Classes (JavaScript): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

• MDN Web Docs — Web Storage API (localStorage / sessionStorage): https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API

• ECMA International — ECMA-262 (ECMAScript Language Specification): https://www.ecma-international.org/publications-and-standards/standards/ecma-262/

• TC39 — Especificación ECMAScript y proceso: https://tc39.es/

• W3C — HTML DOM Events: https://www.w3.org/TR/uievents/

• React (documentación oficial): https://react.dev/

• Bootstrap (documentación oficial): https://getbootstrap.com/

• Babel (documentación oficial): https://babeljs.io/docs/

• Gulp.js (documentación oficial): https://gulpjs.com/