Currículo: esta unidad cubre parte de los saberes básicos del Bloque C – Desarrollo web (PRYC.2.C.2.1 y PRYC.2.C.2.2) correspondiente a 2º Bachillerato. Además, se evalúan los criterios que puedes encontrar al final de esta página.
Tabla de contenidos
- 8.1. Arquitectura de aplicaciones web en entorno cliente
- 8.2. Introducción al lenguaje Javascript
- 8.2.3. Ejecución del código en el navegador
En los temas anteriores has aprendido a construir páginas web utilizando HTML y CSS. Gracias a ello, ya eres capaz de crear sitios que se ven bien y están correctamente organizadas. Sin embargo, hay una pregunta clave que debemos hacernos ahora:
¿Qué ocurre cuando queremos que una página web reaccione a lo que hace el usuario?
Imagina situaciones que conoces perfectamente: cuando pulsas un botón de “me gusta” en una red social, cuando rellenas un formulario y te avisa si has olvidado algún campo, o cuando una página cambia automáticamente sin recargarse.
Todo ese comportamiento no lo conseguimos solo con HTML y CSS. Aquí es donde interviene de lleno JavaScript.
En este tema vamos a pasar de páginas estáticas a páginas dinámicas: páginas que pueden cambiar, responder y adaptarse a las acciones del usuario en tiempo real.
Cuando trabajamos en el entorno cliente, nos referimos al lugar donde se ejecuta el código: el navegador web (Chrome, Firefox, Edge…).
Esto tiene varias consecuencias importantes que iremos descubriendo:
- Ejecución en el navegador: el código se ejecuta en el dispositivo del usuario.
- Respuesta inmediata: las acciones ocurren sin recargar la página.
- Interactividad: la web deja de ser solo visual y pasa a ser funcional.
Nuestro objetivo no es convertirnos en programadores profesionales del lado cliente sino entender cómo se utiliza para dar vida a una página web.
Así que, vamos a ello.
8.1. Arquitectura de aplicaciones web en entorno cliente
Antes de empezar a programar, es fundamental que tengas claro el contexto: quién hace qué cuando visitas una página web.
Hasta ahora, hemos trabajado con HTML y CSS creando páginas que el navegador muestra. Pero en realidad, detrás de cada web hay una estructura más compleja en la que intervienen distintos elementos que colaboran entre sí.
8.1.1. Concepto de aplicación web
Una aplicación web es un programa al que accedes a través de un navegador, sin necesidad de instalar nada en tu dispositivo. A diferencia de una página web simple (como una página informativa), una aplicación web permite interactuar con el usuario y realizar acciones más complejas.
Piensa en ejemplos que utilizas a diario: cuando usas una plataforma como YouTube, Instagram o una tienda online, no estás viendo solo contenido, sino que estás interactuando constantemente.
8.1.2. Modelo cliente-servidor
Para entender cómo funcionan las aplicaciones web, necesitamos conocer el modelo cliente-servidor. Este modelo divide el trabajo en dos partes claramente diferenciadas.
Por un lado está el cliente, que es el dispositivo del usuario (tu ordenador o móvil) y, más concretamente, el navegador. Por otro lado está el servidor, que es el ordenador que almacena la web y responde a las peticiones.
- Petición (request): solicitud que el cliente (tú a través del navegador) envía al servidor.
- Respuesta (response): información que el servidor te devuelve.
Por ejemplo: en una tienda online pinchas en la categoría Zapatillas de deporte en tu navegador (cliente) pide la página de esos productos al servidor y el servidor responde enviando los datos que el navegador te muestra.
8.1.3. Funciones del navegador web
El navegador no solo muestra páginas web. En realidad, es una herramienta mucho más potente, ya que es capaz de interpretar distintos tipos de código.
Cuando cargas una página web, el navegador realiza varias funciones:
- Interpreta HTML: construye la estructura de la página.
- Aplica css: da estilo y diseño visual.
- Ejecuta javascript: añade comportamiento e interactividad.
Esto es fundamental para entender el tema: JavaScript se ejecuta en el navegador, no en el servidor. Es decir, el propio dispositivo del usuario es el que realiza ciertas acciones.
Puedes experimentar estas funciones activando en tu navegador las Herramientas para desarrolladores.
Por ejemplo, en Firefox se abren pulsando CTRL+MAYÚS.+I:
8.1.4. Lenguajes de script en el entorno cliente
Los lenguajes de script son aquellos que se ejecutan directamente sin necesidad de ser compilados previamente. En el entorno cliente, el principal lenguaje de este tipo es JavaScript.
Esto permite que las páginas web respondan rápidamente a las acciones del usuario, sin necesidad de comunicarse continuamente con el servidor.
8.2. Introducción al lenguaje Javascript
Vamos a dar el primer contacto real con Javascript, el lenguaje que nos permitirá transformar nuestras páginas web en aplicaciones interactivas.
A partir de aquí, vamos a empezar a ver resultados visibles directamente en el navegador, que es donde se ejecuta todo lo que programemos.
8.2.1. Características generales de Javascript
Javascript es un lenguaje de programación diseñado específicamente para ejecutarse en el navegador. Su principal función es añadir comportamiento a las páginas web.
A diferencia de otros lenguajes que pueden resultar más complejos al principio, Javascript está pensado para ser accesible y muy práctico desde el primer momento.
- Lenguaje interpretado: el navegador ejecuta el código directamente sin necesidad de compilar.
- Orientado a eventos: responde a acciones del usuario como clics o pulsaciones de teclas.
- Integrado en html: se puede incluir fácilmente dentro de una página web.
- Muy utilizado: es el estándar para el desarrollo web en el lado del cliente.
Cuando navegamos por internet, prácticamente todas las páginas modernas utilizan Javascript para ofrecer una mejor experiencia al usuario.
8.2.2. Inclusión de scripts en documentos HTML
Para utilizar Javascript, necesitamos incluirlo dentro de un documento HTML. Existen varias formas de hacerlo, aunque no todas son igual de recomendables.
8.2.2.1. Código en línea
Consiste en escribir Javascript directamente dentro de una etiqueta HTML.
- Uso directo: se añade dentro de atributos como
onclick. - Poco recomendable: dificulta la organización del código.
Ejemplo:
<button onclick="alert('Has hecho clic')">Pulsa aquí</button>En este caso, cuando el usuario hace clic en el botón, aparece un mensaje. Es sencillo, pero poco limpio si el proyecto crece.
8.2.2.2. Scripts internos
Aquí el código Javascript se escribe dentro del propio archivo HTML, usando la etiqueta <script>.
- Ubicación: normalmente al final del
<body>. - Mejor organización: separa mejor el contenido del comportamiento.
Ejemplo:
<script>
alert("Bienvenido a la página");
</script>Este código se ejecuta cuando se carga la página.
8.2.2.3. Scripts externos
Es la forma más recomendable. El código Javascript se guarda en un archivo independiente con extensión .js.
- Archivo separado: permite reutilizar código.
- Mejor mantenimiento: facilita la organización.
- Uso profesional: es la práctica habitual.
Ejemplo en HTML:
<script src="script.js"></script>
Y en el archivo script.js:
alert("Archivo JavaScript cargado");8.2.3. Ejecución del código en el navegador
Cuando abrimos una página web, el navegador lee el código HTML de arriba abajo. Cuando encuentra un bloque de Javascript, lo ejecuta inmediatamente.
Esto implica algo importante: el orden del código afecta al resultado.
- Ejecución secuencial: el código se ejecuta en el orden en que aparece.
- Dependencia del html: si intentamos modificar algo que aún no se ha cargado, puede fallar.
- Ubicación recomendada: colocar scripts al final del documento.
Por ejemplo, si intentas modificar un elemento HTML que todavía no existe en el momento de ejecutar el script, el navegador no podrá hacerlo.
8.2.4. Herramientas de desarrollo del navegador
Para trabajar con Javascript de forma práctica, necesitamos una herramienta fundamental: la consola del navegador.
Todos los navegadores modernos incluyen herramientas de desarrollo que permiten:
- Ver errores: detectar fallos en el código.
- Probar instrucciones: ejecutar Javascript directamente.
- Inspeccionar la página: analizar elementos HTML y CSS.
Puedes abrir estas herramientas pulsando la tecla F12.
Un ejemplo muy útil es usar:
console.log("Hola, mundo");Esto no muestra nada en la página, pero sí en la consola. Es una forma muy importante de comprobar qué está ocurriendo en nuestro programa.
A partir de este punto, ya tienes lo necesario para empezar a escribir tus primeros programas en Javascript dentro de una página web.
8.3. Sintaxis y estructuras básicas
En este apartado vamos a aprender los elementos mínimos necesarios para empezar a programar con Javascript de verdad. Hasta ahora hemos visto cómo incluir código en una página web, pero todavía no hemos construido lógica.
A partir de aquí comenzamos a dar instrucciones más completas: almacenar datos, tomar decisiones y repetir acciones. Todo esto es lo que permite que una web no solo muestre información, sino que piense y actúe en función de lo que ocurre.
8.3.1. Variables y constantes
Una variable es un espacio donde podemos guardar información para utilizarla más adelante. Es uno de los conceptos más importantes de la programación.
- Variable: almacena un valor que puede cambiar.
- Constante: almacena un valor que no cambia.
- Declaración: creación de la variable.
Ejemplo:
let nombre = "Ana"; const edad = 18;
Aquí estamos guardando un nombre y una edad. Más adelante podremos utilizar esos valores para mostrar información o tomar decisiones.
Por ejemplo:
console.log("Hola, " + nombre);8.3.2. Tipos de datos primitivos
En Javascript podemos trabajar con distintos tipos de datos. Los más básicos son los que vamos a utilizar en este nivel.
- Número: valores numéricos, como 10 o 3.5.
- Texto: cadenas de caracteres, como “Hola”.
- Booleano: valores lógicos,
trueofalse.
Por ejemplo:
let numero = 25; let mensaje = "Bienvenido"; let esMayor = true;
Estos tipos de datos serán la base de todas las operaciones que hagamos.
8.3.3. Operadores
Los operadores nos permiten trabajar con los datos: hacer cálculos, comparar valores o unir textos.
- Aritméticos:
+,-,*,/. - Comparación:
==,===,>,<. - Concatenación: unir textos con
+.
Ejemplo:
let resultado = 10 + 5; let comparacion = 10 > 3; let saludo = "Hola " + "mundo";
Esto nos permite construir expresiones más complejas que luego usaremos en decisiones.
8.3.4. Estructuras de control
Las estructuras de control permiten que el programa tome decisiones o repita acciones. Aquí es donde empieza a verse claramente el poder de la programación.
8.3.4.1. Estructuras condicionales
Permiten ejecutar un bloque de código solo si se cumple una condición.
- if: ejecuta código si la condición es verdadera.
- else: ejecuta código alternativo.
Ejemplo:
let edad = 17;
if (edad >= 18) {
console.log("Eres mayor de edad");
} else {
console.log("Eres menor de edad");
}Este tipo de lógica es muy común en situaciones reales, como validar formularios o mostrar mensajes diferentes según el usuario.
8.3.4.2. Estructuras iterativas
Permiten repetir un bloque de código varias veces. Son útiles cuando queremos automatizar tareas repetitivas.
- for: repite un número determinado de veces.
- while: repite mientras se cumpla una condición.
Ejemplo con for:
for (let i = 0; i < 5; i++) {
console.log("Número: " + i);
}Esto mostrará los números del 0 al 4 en la consola.
8.3.5. Funciones básicas
Una función es un bloque de código que podemos reutilizar cuando lo necesitemos. Es como crear nuestras propias instrucciones.
- Función: conjunto de instrucciones reutilizables.
- Llamada: ejecución de la función.
Ejemplo:
function saludar() {
console.log("Hola");
}Para usarla:
saludar();
También podemos hacer funciones más útiles:
function saludar(nombre) {
console.log("Hola, " + nombre);
}
saludar("Carlos");Con estos elementos ya puedes empezar a construir programas sencillos. Aunque todavía no hemos conectado Javascript con la página web, ya tienes la base necesaria para entender cómo funciona el lenguaje.
8.4. Interacción con el documento: modelo DOM
Hasta ahora hemos aprendido a escribir código en Javascript, pero ese código aún no interactúa realmente con la página web.
Aquí es donde empieza la verdadera utilidad del desarrollo en entorno cliente. A partir de este momento, conseguimos que la página web cambie en tiempo real.
8.4.1. Concepto de DOM
El DOM (Document Object Model) es la forma en la que el navegador representa una página HTML para poder trabajar con ella mediante programación.
Cuando el navegador carga una página, convierte todo el HTML en una estructura organizada, similar a un árbol, donde cada etiqueta es un elemento que se puede manipular.
- DOM: representación de la página como objetos manipulables.
- Estructura jerárquica: los elementos están organizados como un árbol.
- Interacción: Javascript puede acceder y modificar estos elementos.
Por ejemplo, si tienes este HTML:
<h1>Título</h1> <p>Texto</p>
JavaScript no lo ve como texto, sino como elementos que puede seleccionar y modificar.
8.4.2. Estructura del documento
Que el DOM organice los elementos en forma de jerarquía significa que hay elementos “padre” y elementos “hijo”.
- Elemento padre: contiene a otros elementos.
- Elemento hijo: está dentro de otro elemento.
- Nodo: cada elemento del documento.
Por ejemplo:
<body>
<div>
<p>Hola</p>
</div>
</body>Aquí, el <body> es padre del <div>, y el <div> es padre del <p>.
Entender esta estructura es importante porque nos ayuda a localizar y manipular elementos correctamente.
8.4.3. Selección de elementos
Para modificar algo en la página, primero tenemos que seleccionarlo. JavaScript nos ofrece varias formas de hacerlo.
Las más utilizadas son:
- Por id: seleccionar un elemento único.
- Por etiqueta: seleccionar todos los elementos de un tipo.
- Por selector CSS: usar la misma lógica que en CSS.
Ejemplo:
<p id="mensaje">Hola</p>
let elemento = document.getElementById("mensaje");Ahora la variable elemento contiene ese párrafo, y podemos trabajar con él.
8.4.4. Modificación de contenido
Una vez que hemos seleccionado un elemento, podemos cambiar su contenido.
Esto es lo que permite que una página web se actualice sin recargarse.
- innerHTML: cambia el contenido interno.
- textContent: cambia solo el texto.
Ejemplo:
let elemento = document.getElementById("mensaje");
elemento.textContent = "Texto modificado";Si ejecutas este código, el texto del párrafo cambiará automáticamente.
Esto es algo muy común en webs reales, por ejemplo cuando aparece un mensaje después de una acción.
8.4.5. Modificación de atributos y estilos
Además del contenido, también podemos modificar atributos (como imágenes o enlaces) y estilos (colores, tamaños, etc.).
- Atributos: propiedades de los elementos (src, href, etc.).
- Estilos: apariencia visual del elemento.
Ejemplo cambiando una imagen:
let imagen = document.getElementById("foto");
imagen.src = "nueva_imagen.jpg";Ejemplo cambiando el estilo:
let texto = document.getElementById("mensaje");
texto.style.color = "red";Para entender bien este apartado, piensa en una situación muy real: estás en una página y pulsas un botón que cambia un texto o un color. Lo que realmente ocurre es que Javascript está accediendo al DOM y modificando ese elemento en ese mismo instante.
A partir de aquí, ya no estamos trabajando con páginas estáticas. Ahora estamos construyendo páginas que pueden cambiar, reaccionar y adaptarse.
8.5. Gestión de eventos
En el apartado anterior hemos aprendido a modificar elementos de una página web utilizando Javascript. Sin embargo, hay un problema evidente: ese código se ejecuta automáticamente al cargar la página.
La pregunta ahora es clave:
¿Cómo hacemos que ese código se ejecute solo cuando el usuario haga algo?
Aquí es donde entran en juego los eventos. Gracias a ellos, podemos hacer que una página web reaccione a acciones reales del usuario, como hacer clic, escribir o mover el ratón. Este es el paso definitivo para construir páginas verdaderamente interactivas.
8.5.1. Concepto de evento
Un evento es cualquier acción que ocurre en la página web y que puede ser detectada por JavaScript.
Estas acciones pueden ser provocadas por el usuario o por el propio navegador.
- Evento: acción que ocurre en la página y que puede ser gestionada.
- Interacción: respuesta del programa ante esa acción.
- Disparador: elemento que provoca el evento.
Ejemplos: hacer clic en un botón, escribir en un campo de texto, pasar el ratón por encima de una imagen.
8.5.2. Tipos de eventos
Existen muchos tipos de eventos, pero nosotros nos centraremos en los más habituales, que son los que encontrarás en casi cualquier web.
- click: cuando el usuario pulsa sobre un elemento.
- input: cuando el usuario escribe en un campo.
- submit: cuando se envía un formulario.
- mouseover: cuando el ratón pasa por encima.
Por ejemplo, cuando haces clic en un botón de “comprar”, se está produciendo un evento de tipo click.
8.5.3. Asociación de eventos a elementos
Para que JavaScript reaccione a un evento, primero tenemos que asociar ese evento a un elemento de la página.
Aunque existen varias formas de hacerlo, nosotros utilizaremos una de las más claras y recomendables: addEventListener.
Ejemplo:
<button id="boton">Pulsa aquí</button>
let boton = document.getElementById("boton");
boton.addEventListener("click", function() {
console.log("Has hecho clic");
});En este caso, cuando el usuario pulse el botón, se ejecutará el código que hemos definido.
8.5.4. Manejo de eventos
El manejo de eventos consiste en definir qué debe ocurrir cuando se produce una acción.
Es decir, no solo detectamos el evento, sino que programamos la respuesta.
- Función manejadora: código que se ejecuta cuando ocurre el evento.
- Respuesta: acción que realiza la página.
- Interacción dinámica: cambio visible en la web.
Ejemplo más completo:
<p id="texto">Texto original</p> <button id="boton">Cambiar texto</button>
let boton = document.getElementById("boton");
let texto = document.getElementById("texto");
boton.addEventListener("click", function() {
texto.textContent = "Texto modificado";
});Ahora, al hacer clic en el botón, el texto cambia. Esto es exactamente el tipo de comportamiento que encontramos en webs reales.
8.5.5. Casos prácticos de interacción
Vamos a ver algunas situaciones reales donde se aplican los eventos, para que entiendas su utilidad.
- Botón de acción: cambiar contenido al hacer clic.
- Validación en tiempo real: detectar lo que escribe el usuario.
- Efectos visuales: cambiar estilos al interactuar.
- Control de formularios: impedir envíos incorrectos.
Por ejemplo, cuando escribes en un formulario y aparece un mensaje indicando si el dato es correcto, se está utilizando un evento de tipo input.
Si lo piensas bien, prácticamente toda la interacción que tienes con una web moderna se basa en eventos. Cada clic, cada tecla que pulsas o cada acción que realizas provoca una respuesta.
A partir de este momento, ya eres capaz de construir páginas que reaccionan a lo que hace el usuario.
8.6. Formularios
Los formularios son la principal forma de comunicación entre el usuario y la aplicación.
Piensa en situaciones muy habituales: registrarte en una red social, iniciar sesión o hacer una compra. En todos estos casos estás introduciendo datos que la web necesita procesar.
Nuestro objetivo será doble: por un lado, aprender a recoger esos datos y, por otro, comprobar que son correctos antes de enviarlos.
8.6.1. Estructura y acceso a datos
Un formulario está formado por distintos elementos que permiten al usuario introducir información. Todos ellos están contenidos dentro de la etiqueta <form>.
Ejemplo sencillo:
<form>
<label>Nombre:</label>
<input type="text" id="nombre">
<button type="submit">Enviar</button>
</form>Para trabajar con estos datos desde Javascript, utilizamos el DOM y accedemos al valor introducido mediante la propiedad value.
let nombre = document.getElementById("nombre").value;
console.log(nombre);De esta forma, podemos leer lo que el usuario ha escrito y utilizarlo en nuestro programa.
8.6.2. Validación de datos
Una vez que tenemos acceso a los datos, el siguiente paso es comprobar si son correctos. Esto es lo que llamamos validación.
Validar datos significa asegurarnos de que cumplen ciertas condiciones antes de continuar.
Por ejemplo, comprobar que un campo no esté vacío o que tenga un formato adecuado.
- Campo obligatorio: comprobar que no esté vacío.
- Condiciones: longitud mínima o valores válidos.
- Feedback: informar al usuario del error.
Ejemplo:
let nombre = document.getElementById("nombre").value;
if (nombre === "") {
console.log("El nombre no puede estar vacío");
}Sin embargo, en una web real no basta con mostrar el error en la consola. Lo habitual es mostrarlo directamente en la página.
<p id="error"></p>
let error = document.getElementById("error");
if (nombre === "") {
error.textContent = "Debes introducir tu nombre";
}De este modo, el usuario recibe una respuesta inmediata y clara.
8.6.3. Control del envío
Por defecto, cuando pulsamos el botón de enviar, el formulario se envía automáticamente. Pero esto puede ser un problema si los datos no son correctos.
Para evitarlo, utilizamos el evento submit junto con preventDefault(), que nos permite detener el envío hasta que todo sea válido.
Ejemplo completo:
<form id="formulario">
<input type="text" id="nombre">
<button type="submit">Enviar</button>
</form>
<p id="error"></p>let formulario = document.getElementById("formulario");
let error = document.getElementById("error");
formulario.addEventListener("submit", function(event) {
let nombre = document.getElementById("nombre").value;
if (nombre === "") {
event.preventDefault();
error.textContent = "El nombre es obligatorio";
}
});Con esto, ya eres capaz de construir formularios funcionales que recogen datos y guían al usuario para que los introduzca correctamente.
8.7. Comunicación con el servidor
Todo lo que hemos hecho se ejecuta en el navegador y afecta únicamente a lo que el usuario ve en su pantalla. Sin embargo, las aplicaciones web reales van más allá: necesitan comunicarse con un servidor para obtener o enviar información.
Por ejemplo, cuando entras en Instagram y aparecen nuevas publicaciones, cuando consultas el tiempo o cuando buscas un producto en una tienda online.
En todos estos casos, la página está solicitando datos a un servidor y mostrándolos sin necesidad de recargar completamente la web.
A continuación, vamos a entender este proceso de forma básica, sin profundizar demasiado, pero lo suficiente para que comprendas cómo funciona esta comunicación.
8.7.1. Concepto de petición y respuesta
La comunicación entre cliente y servidor se basa en un proceso muy sencillo: el cliente solicita información y el servidor responde.
Por ejemplo, cuando abres una página web, tu navegador envía una petición al servidor y este devuelve el contenido. Pero este proceso también puede ocurrir sin recargar la página, lo que permite crear aplicaciones más rápidas y dinámicas.
8.7.2. Uso básico de fetch
Javascript ofrece herramientas para realizar peticiones al servidor. Una de las más utilizadas es fetch, que nos permite solicitar datos de forma sencilla.
Aunque no vamos a profundizar en todos sus detalles, sí veremos cómo se utiliza en un caso básico.
Ejemplo:
fetch("https://jsonplaceholder.typicode.com/posts/1")
.then(function(respuesta) {
return respuesta.json();
})
.then(function(datos) {
console.log(datos);
});Este código hace una petición a un servidor y recibe datos asíncronos en formato JSON, que luego muestra en la consola.
8.7.3. Actualización dinámica de contenidos
Lo realmente interesante es que esos datos que obtenemos del servidor pueden utilizarse para modificar la página web en tiempo real.
Esto permite crear experiencias mucho más dinámicas, donde el contenido cambia sin necesidad de recargar la página.
Ejemplo:
<p id="titulo"></p>
fetch("https://jsonplaceholder.typicode.com/posts/1")
.then(function(respuesta) {
return respuesta.json();
})
.then(function(datos) {
let titulo = document.getElementById("titulo");
titulo.textContent = datos.title;
});En este caso, estamos obteniendo información del servidor y mostrándola directamente en la página.
8.7.4. Trabajando con APIs
Las APIs son servicios que ofrecen datos para que otras aplicaciones los utilicen. Son fundamentales en el desarrollo web actual.
Por ejemplo, cuando una aplicación muestra la previsión meteorológica, normalmente está utilizando una API externa.
Vamos a plantear ahora un ejemplo donde el usuario escribe el nombre de un artista (por ejemplo, Quevedo, Aitana o Bad Bunny) y la web muestra algunas de sus canciones.
Para ello vamos a usar la API pública de iTunes, que permite buscar música sin necesidad de registrarse ni usar claves.
El objetivo es, de manera resumida: una petición a una API → recibir datos → modificar el DOM para mostrarlos.
El usuario escribe el nombre de un artista, pulsa un botón y aparecen varias canciones en pantalla.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Buscador de música</title>
</head>
<body>
<h1>Buscador de canciones</h1>
<input type="text" id="artista" placeholder="Escribe un artista">
<button id="buscar">Buscar</button>
<ul id="lista"></ul>
<script src="script.js"></script>
</body>
</html>let boton = document.getElementById("buscar");
let lista = document.getElementById("lista");
boton.addEventListener("click", function () {
let artista = document.getElementById("artista").value;
lista.innerHTML = "Buscando canciones...";
fetch("https://itunes.apple.com/search?term=" + artista + "&entity=song&limit=5")
.then(function (respuesta) {
return respuesta.json();
})
.then(function (datos) {
lista.innerHTML = "";
for (let i = 0; i < datos.results.length; i++) {
let cancion = datos.results[i];
let elemento = document.createElement("li");
elemento.textContent = cancion.trackName + " - " + cancion.artistName;
lista.appendChild(elemento);
}
})
.catch(function () {
lista.innerHTML = "Error al cargar las canciones.";
});
});Repasemos qué hemos hecho.
Cuando el usuario pulsa el botón, se activa el evento click. En ese momento, recogemos el valor del input, es decir, el nombre del artista.
Después, construimos una URL de búsqueda para la API de iTunes.
Por ejemplo, si el usuario escribe Quevedo, la URL sería algo como:
https://itunes.apple.com/search?term=Quevedo&entity=song&limit=5
La API devuelve un conjunto de resultados en formato JSON. Cada resultado contiene información sobre una canción, como su nombre (trackName) y el artista (artistName).
A continuación, recorremos esos resultados con un bucle y, por cada canción, creamos dinámicamente un elemento <li> que añadimos a la lista del HTML.
Aquí ocurre lo más importante del ejercicio:
let elemento = document.createElement("li");
elemento.textContent = cancion.trackName + " - " + cancion.artistName;
lista.appendChild(elemento);Estamos creando elementos HTML desde Javascript y añadiéndolos al DOM con datos que vienen de internet.
No olvides: una aplicación web moderna no solo muestra contenido, sino que también es capaz de obtener y actualizar información en tiempo real comunicándose con otros sistemas.
Con esto, cerramos el núcleo práctico del desarrollo en entorno cliente, donde has aprendido a construir páginas que además de verse bien, interactúan y responden.