Introducción

Antes de escribir código JavaScript conviene entender dónde se ejecuta, qué papel tiene el navegador y cómo se relacionan las tecnologías que forman una aplicación web. No existe una sola tecnología o plataforma para trabajar en el entorno cliente, sino que se trabaja con documentos HTML, hojas CSS, código JavaScript, recursos multimedia, peticiones de red y herramientas de prueba que se combinan dentro del navegador.

Esta unidad presenta la arquitectura básica cliente y servidor, desde el lado cliente sera necesario reconocer qué hace el navegador, identificar las tecnologías principales, integrar un primer archivo JavaScript y usar herramientas de desarrollo para comprobar que una página funciona correctamente.

También veremos límites importantes: el código cliente se ejecuta en el dispositivo del usuario, no debe considerarse secreto, no sustituye la seguridad del servidor y está sujeto a restricciones del navegador.

Conocimiento previo

• Introducción a HTML
• Uso elemental de un navegador web.
• Nociones básicas de programación.

Referencias

• WHATWG HTML Living Standard
• MDN Web Docs - Elemento script
• MDN Web Docs - Herramientas de desarrollo del navegador
• W3C Markup Validation Service

Índice

1. Qué significa desarrollo web en entorno cliente
2. Cliente, servidor y ciclo de petición-respuesta
3. Recursos estáticos y contenido dinámico
4. Tecnologías base de una página web
5. El navegador como plataforma de ejecución
   5.1. Motor JavaScript
   5.2. DOM
   5.3. Secuencial
6. Integrar JavaScript en HTML
7. Herramientas de trabajo
8. Seguridad y límites del código cliente
9. Compatibilidad y mejora progresiva
10. Ejercicios

1. Qué significa desarrollo web en entorno cliente

El desarrollo web consiste en crear y mantener sitios y aplicaciones que funcionan a través de Internet. Para ello intervienen distintas tecnologías y profesionales encargados del diseño, la programación, las bases de datos, los servidores y la infraestructura necesaria para que una aplicación web funcione correctamente.

De forma general, el desarrollo web se divide en dos grandes áreas:

• Desarrollo en entorno cliente (Front-end): se ocupa de la parte visible de la aplicación, es decir, de todo aquello con lo que interactúa el usuario desde su navegador. Utiliza principalmente HTML, CSS y JavaScript para construir la interfaz, aplicar estilos y añadir comportamiento.
• Desarrollo en entorno servidor (Back-end): se encarga de la lógica de negocio, el acceso a bases de datos, la autenticación de usuarios y el procesamiento de la información antes de enviarla al navegador.

A partir de ahora nos centraremos en el desarrollo en entorno cliente, es decir, en el código que se descarga y se ejecuta en el navegador del usuario. Este código forma parte de la experiencia visible e interactiva de una página o aplicación web.

Cuando visitas una web, el navegador recibe recursos como documentos HTML, hojas CSS, archivos JavaScript, imágenes, fuentes y datos. A partir de esos recursos construye la página, aplica estilos, ejecuta código y permite que el usuario interactúe con la interfaz.

En este módulo nos interesan especialmente las tareas del lado cliente:

• Organizar la interfaz que verá el usuario.
• Añadir comportamiento mediante JavaScript.
• Reaccionar a eventos como clics, teclas o envíos de formularios.
• Validar datos antes de enviarlos al servidor.
• Modificar partes del documento usando el DOM.
• Comunicarse con APIs para obtener o enviar datos.
• Usar librerías y frameworks cuando el proyecto lo requiere.

Aunque cliente y servidor realizan funciones diferentes, ambos trabajan de forma coordinada. El cliente proporciona una experiencia de usuario dinámica e interactiva, mientras que el servidor se encarga de operaciones críticas como la autenticación, la aplicación de las reglas de negocio, el acceso a bases de datos y la validación definitiva de la información.

2. Cliente, servidor y ciclo de petición-respuesta

Las aplicaciones web modernas se basan en un modelo cliente-servidor, en el que diferentes componentes colaboran para ofrecer una página o aplicación al usuario.

Los tres elementos principales son el cliente, el servidor y la red, que actúa como medio de comunicación entre ambos.

El cliente es el dispositivo desde el que el usuario accede a una aplicación web. Habitualmente es un navegador web, aunque también puede ser una aplicación móvil o un programa de escritorio.

Su función consiste en:

• Solicitar recursos al servidor.
• Interpretar documentos HTML.
• Aplicar los estilos definidos en CSS.
• Ejecutar el código JavaScript.
• Mostrar la interfaz y responder a las acciones del usuario.

El servidor es el equipo o servicio encargado de atender las peticiones realizadas por los clientes.

Entre sus funciones principales se encuentran:

• Procesar las solicitudes recibidas.
• Ejecutar la lógica de negocio de la aplicación.
• Acceder a bases de datos.
• Validar la información recibida.
• Generar y enviar las respuestas al cliente.

El servidor puede estar desarrollado con diferentes tecnologías, como Java, PHP, C#, Python, Node.js o muchas otras, aunque todas cumplen el mismo objetivo: procesar la información antes de enviarla al navegador.

El cliente y el servidor no suelen encontrarse en el mismo equipo. La comunicación entre ambos se realiza a través de una red, normalmente Internet.

Para intercambiar información utilizan protocolos de comunicación, siendo HTTP y su versión segura HTTPS los más utilizados en el desarrollo web.

Gracias a esta comunicación, el navegador puede solicitar recursos y recibir las respuestas necesarias para construir la página que ve el usuario.

El intercambio más habitual sigue un ciclo de petición-respuesta:

1. El usuario introduce una URL o pulsa un enlace.
2. El navegador envía una petición HTTP al servidor.
3. El servidor procesa la solicitud y, si es necesario, consulta una base de datos u otros servicios.
4. El servidor devuelve una respuesta HTTP y con los recursos solicitados (normalmente HTML).
5. El navegador analiza el HTML y solicita recursos adicionales como CSS, JavaScript o imágenes.
6. El navegador construye la página, aplica estilos y ejecuta JavaScript.
7. Si la página necesita más datos, JavaScript puede realizar nuevas peticiones a una API.

En una web moderna, esta comunicación puede repetirse muchas veces sin recargar toda la página. Por ejemplo, una aplicación puede pedir una lista de productos, mostrarla y después pedir más datos cuando el usuario filtra o cambia de sección.

3. Recursos estáticos y contenido dinámico

Un recurso estático es un archivo que el servidor entrega tal como está almacenado. Por ejemplo, un archivo index.html, una imagen logo.png, una hoja styles.css o un script app.js.

Un contenido dinámico se genera o se modifica en función de una situación concreta. Puede depender del usuario, de una consulta a base de datos, de una sesión, de una API o de una interacción en el navegador.

En desarrollo web cliente trabajamos sobre todo con el dinamismo que ocurre en el navegador: seleccionar elementos, responder a eventos, actualizar texto, mostrar u ocultar mensajes, validar formularios o pintar datos recibidos de una API.

Esto no significa que todo deba resolverse en el cliente. Una buena arquitectura reparte responsabilidades: el navegador se ocupa de la interacción y presentación; el servidor protege los datos, aplica reglas y responde a peticiones.

4. Tecnologías base de una página web

Una página web se construye normalmente con tres tecnologías principales:

Ejemplo:

<!doctype html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <title>Ejemplo cliente</title>
    <!-- Enlazamos el archivo CSS externo -->
    <link rel="stylesheet" href="styles.css">
    <!-- Enlazamos el archivo JavaScript externo -->
    <script src="app.js" defer></script>
  </head>
  <body>
    <h1>Mi primera página interactiva</h1>
    <button id="boton">Probar JavaScript</button>
  </body>
</html>

En este ejemplo:

• HTML define que hay un título y un botón.
• CSS, si existe, definirá el aspecto visual.
• JavaScript, si existe, podrá añadir comportamiento al botón.

En esta unidad nos centraremos en JavaScript, pero es importante recordar que HTML y CSS son la base sobre la que se construye la experiencia del usuario.

5. El navegador como plataforma de ejecución

El navegador no solo muestra páginas. También interpreta HTML, aplica CSS, ejecuta JavaScript, gestiona eventos, controla seguridad, almacena datos locales y permite realizar peticiones de red.

Algunos componentes importantes son:

Cada navegador tiene su propia implementación, aunque todos siguen estándares comunes. Por eso es importante escribir código basado en documentación actual y probar en navegadores representativos.

5.1. Motor JavaScript

Cuando escribimos un programa en JavaScript, el navegador no puede ejecutar directamente el código fuente que hemos escrito. Para ello utiliza un motor JavaScript, que es el componente encargado de leer, interpretar y ejecutar las instrucciones del lenguaje.

Podemos imaginar el motor JavaScript como un intérprete que recibe nuestro código y lo convierte en acciones que el ordenador puede realizar. Gracias a él, el navegador puede calcular expresiones, ejecutar funciones, crear objetos o responder a los eventos del usuario.

Cada navegador incorpora su propio motor JavaScript. Aunque todos ejecutan el mismo lenguaje, cada uno utiliza una implementación diferente.

Es importante entender que el motor JavaScript únicamente ejecuta el lenguaje JavaScript. Por sí solo no sabe mostrar una página web, modificar un documento HTML o realizar una petición a Internet.

Para realizar estas tareas, el navegador proporciona al motor una serie de herramientas denominadas APIs del navegador. Estas APIs permiten que JavaScript pueda interactuar con la página web y con el propio navegador.

Entre las APIs más utilizadas se encuentran:

• document: permite acceder y modificar el contenido HTML de la página.
• window: representa la ventana del navegador y ofrece numerosas funcionalidades.
• localStorage: permite almacenar información de forma persistente en el navegador.
• fetch(): permite realizar peticiones HTTP a servidores.

5.2. DOM

El DOM (Document Object Model) es una representación en memoria de la estructura de un documento HTML. Cuando el navegador carga una página, convierte el código HTML en un árbol de objetos. Cada etiqueta HTML, su contenido y sus atributos se transforman en nodos de este árbol.

Gracias al DOM, JavaScript puede acceder a cualquier parte del documento y modificarla dinámicamente: buscar elementos, cambiar texto, añadir o eliminar nodos, cambiar estilos o responder a eventos.

<!DOCTYPE html>
<html lang="es">
  <head>
    <title>Mi página</title>
  </head>
  <body>
    <h1>Hola Mundo</h1>
    <p id="saludo">Bienvenido</p>
    <ul>
      <li>Elemento 1</li>
      <li>Elemento 2</li>
  </body>
</html>

Su representación en el DOM sería:

En esta unidad solo necesitas entender la idea general. El DOM se trabajará con más profundidad en una unidad posterior.

5.3. DevTools

Los navegadores modernos incorporan un conjunto de herramientas de desarrollo (conocidas como DevTools) que permiten inspeccionar y analizar el funcionamiento de una página web.

Estas herramientas están dirigidas a desarrolladores y resultan imprescindibles para crear, probar y corregir aplicaciones web. Gracias a ellas podemos examinar el código HTML y CSS, ejecutar instrucciones JavaScript, analizar las comunicaciones con el servidor o consultar la información almacenada por el navegador.

En la mayoría de navegadores pueden abrirse pulsando la tecla F12 o mediante la combinación Ctrl + Mayús + I (Windows y Linux) o ⌥⌘I (macOS).

Aunque las herramientas incluyen numerosos paneles, los más utilizados son los siguientes:

A lo largo de las unidades se trabajara directamente con el navegador Google Chrome y sus DevTools, en el siguiente contenido se explica con más detalle está herramienta.

👉 DevTools de Google Chrome

6. Integrar JavaScript en HTML

El lenguaje JavaScript se combina con HTML para añadir comportamiento a las páginas web. Existen varias formas de integrar JavaScript en un documento HTML:

Se incluye el código JavaScript directamente dentro de la etiqueta <script> en el documento HTML. Esta forma es útil para ejemplos pequeños, pero no es recomendable para proyectos más grandes, ya que mezcla estructura y comportamiento.

<!doctype html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <title>Primer script</title>
  </head>
  <body>
    <h1>Probando JavaScript</h1>
    <script>
      console.log('Hola desde el script en el HTML');
    </script>
  </body>
</html>

El código javaScript se coloca en un archivo externo con extensión .js y no dentro del propio fichero HTML.

Esta es la forma más recomendable, ya que permite mantener el código organizado y reutilizable. El archivo se enlaza desde el HTML mediante la etiqueta <script>.

Es la opción más recomendable. Permite mantener el código organizado y reutilizable. Se crea un archivo con extensión .js y se enlaza desde el HTML mediante la etiqueta <script src=" " defer>.

El atributo src indica el archivo JavaScript que debe cargarse. Se forma opcional se puede añadir el atributo defer para descargar el script sin bloquear el análisis del HTML y ejecutarlo cuando el documento ya está preparado.

<!doctype html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <title>Primer script</title>
    <script src="app.js" defer></script>
  </head>
  <body>
    <h1>Probando JavaScript</h1>
  </body>
</html>

Archivo app.js:

console.log('El archivo JavaScript se ha cargado');

Este primer ejemplo no modifica la página. Solo confirma que el navegador ha cargado y ejecutado el archivo JavaScript.

También conviene evitar document.write() como forma de generar contenido. Es una técnica antigua que puede producir comportamientos problemáticos y no representa el modo actual de construir interfaces web.

7. Herramientas de trabajo

Para comenzar a desarrollar código cliente no es necesario un entorno complejo. No existen un único editor, navegador o sistema de construcción obligatorio. Lo importante es entender la base y trabajar con herramientas que permitan escribir, probar y depurar código de forma sencilla.

Las herramientas recomendadas son:

Un flujo básico de prueba puede ser:

1. Crear una carpeta para el ejercicio.
2. Añadir index.html, styles.css y app.js si son necesarios.
3. Enlazar correctamente CSS y JavaScript desde el HTML.
4. Abrir la página en el navegador.
5. Revisar la consola para comprobar errores.
6. Usar el panel de red para confirmar que los archivos se cargan.
7. Validar el HTML si aparecen comportamientos extraños.

En proyectos reales se usan más herramientas: gestores de paquetes, linters, formateadores, bundlers, frameworks y sistemas de construcción. En esta primera unidad lo importante es entender la base antes de añadir capas de complejidad.

8. Seguridad y límites del código cliente

El código JavaScript del cliente se descarga en el navegador del usuario. Por tanto, el usuario puede verlo, modificarlo localmente, bloquearlo o ejecutarlo en condiciones distintas a las que esperamos.

Por eso debes tener en cuenta las siguientes recomendaciones de seguridad:

• No guardes información sensible en JavaScript.
• No confíes únicamente en validaciones hechas en el navegador.
• No asumas que el usuario ejecutará siempre el código previsto.
• No conectes directamente el cliente a una base de datos.
• No expongas claves privadas, contraseñas o tokens sensibles en archivos públicos.

El navegador aplica restricciones para reducir riesgos. Una de las más importantes es la política del mismo origen, que limita cómo un documento de un origen puede interactuar con recursos de otro origen.

Un origen se define, de forma simplificada, por la combinación de protocolo, dominio y puerto. Por ejemplo, https://example.com y http://example.com no tienen el mismo origen porque cambia el protocolo.

El navegador también ejecuta el código dentro de un entorno controlado. Esto limita el acceso directo a archivos del sistema, dispositivos, red y datos de otros sitios. Algunas capacidades existen, pero requieren permisos explícitos o APIs específicas.

9. Compatibilidad y mejora progresiva

Los navegadores actuales comparten muchos estándares, pero no todos implementan las mismas funciones exactamente al mismo tiempo. Por eso conviene consultar documentación actual, revisar tablas de compatibilidad cuando se use una API nueva y probar en más de un navegador cuando el proyecto lo justifique.

No es recomendable basar el aprendizaje en tablas antiguas de compatibilidad ni en navegadores obsoletos. El enfoque adecuado es aprender estándares actuales y comprobar la compatibilidad de las funciones concretas que vayas a utilizar.

La mejora progresiva consiste en construir una experiencia básica que funcione de forma robusta y añadir mejoras para navegadores o dispositivos con más capacidades.

Ejemplo sencillo:

• El contenido principal debe estar en HTML y poder entenderse.
• CSS mejora la presentación, pero no debe ocultar información esencial sin alternativa.
• JavaScript añade interacción, pero no debe ser la única forma de acceder a contenido crítico si el contexto exige accesibilidad amplia.

La página Can I Use es una herramienta de consulta muy util que permite comprobar qué tecnologías web son compatibles con cada navegador. Es una de las referencias más utilizadas por desarrolladores para saber si pueden utilizar una característica de HTML, CSS o JavaScript sin problemas de compatibilidad.

10. Ejercicios

const username = 'usuario123';
const apiKey = 'miClaveSecreta';
const password = 'miContraseñaSecreta';