Desarrollo Web en Entorno Cliente

2024/2025 Natalia Mártir

Introducción a JavaScript

¿Qué es JavaScript?
JavaScript es un lenguaje de programación interpretado, dinámico y orientado a
objetos que se ejecuta en el navegador web. A diferencia de HTML y CSS, que se utilizan
para la estructura y el diseño de una página, JavaScript permite añadir interactividad a las
páginas web.

Principales usos de JavaScript

• Interactividad: Añadir funciones como formularios interactivos, animaciones, y
respuestas a las acciones del usuario.
• Manipulación del DOM: Permite modificar el contenido y la estructura de un
documento HTML de manera dinámica.
• Validación: Validar entradas de formularios antes de enviarlos al servidor.
• Comunicarse con el servidor: Con AJAX y fetch, JavaScript puede comunicarse con
un servidor sin recargar la página.

Conceptos Básicos de JavaScript

1. Sintaxis Básica
• Variables: En JavaScript, las variables pueden ser declaradas
con var, let o const.

• let nombre = "Juan";

• const PI = 3.1416;
• Tipos de datos: JavaScript admite tipos de datos como string (cadenas de
texto), number (números), boolean (verdadero o falso), array (listas)
y object (objetos).

• let edad = 25; // Tipo número

• let esMayorDeEdad = true; // Tipo booleano
• let colores = ["Rojo", "Verde", "Azul"]; // Tipo array
• let persona = {nombre: "Juan", edad: 30}; // Tipo objeto

2. Condicionales
Permiten tomar decisiones en función de una condición.

if (edad >= 18) {

Desarrollo Web en Entorno Cliente
2024/2025 Natalia Mártir

console.log("Es mayor de edad.");

} else {
console.log("Es menor de edad.");
}

3. Bucles
Los bucles permiten ejecutar un bloque de código varias veces.

for (let i = 0; i < 5; i++) {

console.log(i); // Imprime los números del 0 al 4
}

Introducción al DOM (Document Object Model)

¿Qué es el DOM?
El DOM es una representación estructurada del documento HTML en forma de árbol,
donde cada nodo es un objeto que corresponde a una parte de la página (etiquetas,
atributos, texto, etc.). JavaScript permite acceder y modificar el DOM, lo que posibilita
cambiar el contenido de la página de forma dinámica.

¿Cómo acceder al DOM con JavaScript?

En JavaScript, podemos usar funciones
como document.getElementById(), document.querySelector() y otras para
seleccionar elementos HTML y manipularlos.

Ejemplos:

• Acceder a un elemento por su id:

• let elemento = document.getElementById("miElemento");

• Acceder a un elemento usando un selector de CSS:

• let elemento = document.querySelector(".miClase"); //

Selecciona el primer elemento con la clase 'miClase'

Manipulación del DOM

1. Modificar el contenido de un elemento

Desarrollo Web en Entorno Cliente
2024/2025 Natalia Mártir

Para modificar el contenido de texto de un elemento HTML, puedes usar la

propiedad innerText o innerHTML.

let parrafo = document.getElementById("miParrafo");

parrafo.innerText = "Este es un nuevo contenido.";
innerText cambia solo el texto, mientras que innerHTML permite insertar código HTML
dentro del elemento.

parrafo.innerHTML = "<strong>Este es un texto en

negrita.</strong>";

2. Modificar el estilo de un elemento

Puedes cambiar el estilo de un elemento directamente desde JavaScript usando la
propiedad style.

let elemento = document.getElementById("miElemento");

elemento.style.color = "red"; // Cambia el color del texto a rojo
elemento.style.backgroundColor = "yellow"; // Cambia el color de
fondo a amarillo

3. Añadir y eliminar clases

La propiedad classList permite añadir, eliminar o alternar clases CSS en un elemento.

let boton = document.getElementById("miBoton");

boton.classList.add("clase-activa"); // Añade una clase
boton.classList.remove("clase-activa"); // Elimina una clase
boton.classList.toggle("clase-activa"); // Añade la clase si no
está, o la elimina si ya está

Eventos en el DOM

¿Qué son los eventos?

Los eventos son acciones que ocurren en la página web, como el clic de un usuario, el
envío de un formulario o la carga de la página. JavaScript puede "escuchar" estos eventos y
ejecutar funciones en respuesta.

Manejadores de Eventos
Los manejadores de eventos son funciones que se ejecutan cuando ocurre un evento.
Estos eventos pueden asignarse a elementos HTML.
Desarrollo Web en Entorno Cliente
2024/2025 Natalia Mártir

1. Escuchar eventos con addEventListener()

El método addEventListener() se usa para registrar un evento en un elemento. El

primer argumento es el tipo de evento, y el segundo es la función que se ejecuta cuando
ocurre el evento.

Ejemplo: Capturar un clic en un botón y mostrar un mensaje en la consola.

let boton = document.getElementById("miBoton");

boton.addEventListener("click", function() {
console.log("El botón ha sido clicado.");
});
En este caso, el evento click se dispara cuando el usuario hace clic en el botón, y la
función muestra un mensaje en la consola.

2. Eventos más comunes en JavaScript

• click: Se dispara cuando el usuario hace clic en un elemento.

• elemento.addEventListener("click", function() {
• console.log("Se hizo clic en el elemento.");
• });
• mouseover: Se dispara cuando el usuario pasa el cursor sobre un elemento.

• elemento.addEventListener("mouseover", function() {
• console.log("El ratón está sobre el elemento.");
• });
• keyup: Se dispara cuando se suelta una tecla en un campo de entrada.

• let campoTexto = document.getElementById("miCampo");

•
• campoTexto.addEventListener("keyup", function(evento) {
• console.log("Se presionó una tecla: " + evento.key);
• });
• submit: Se dispara cuando un formulario es enviado.

• let formulario = document.getElementById("miFormulario");

•
• formulario.addEventListener("submit", function(evento) {
• evento.preventDefault(); // Previene el envío por defecto
• console.log("Formulario enviado.");
• });

Ejemplo Completo de Eventos en el DOM

Desarrollo Web en Entorno Cliente
2024/2025 Natalia Mártir

Vamos a crear un pequeño formulario interactivo usando eventos y DOM.

HTML:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Ejemplo de Eventos</title>
</head>
<body>
<form id="miFormulario">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre"><br>

<label for="edad">Edad:</label>
<input type="number" id="edad"><br>

<input type="submit" value="Enviar">

</form>

<p id="resultado"></p>

<script src="script.js"></script>
</body>
</html>

JavaScript (script.js):

let formulario = document.getElementById("miFormulario");

formulario.addEventListener("submit", function(evento) {
evento.preventDefault(); // Previene el comportamiento por
defecto de enviar el formulario

let nombre = document.getElementById("nombre").value;

let edad = document.getElementById("edad").value;
let resultado = document.getElementById("resultado");

if (nombre === "" || edad === "") {

Desarrollo Web en Entorno Cliente
2024/2025 Natalia Mártir

resultado.innerText = "Por favor, rellena todos los

campos.";
resultado.style.color = "red";
} else {
resultado.innerText = "Hola " + nombre + ", tienes " + edad
+ " años.";
resultado.style.color = "green";
}
});

Explicación:
1. HTML:

o El formulario tiene dos campos (nombre y edad) y un botón para enviar.

o El p con id="resultado" mostrará los mensajes al usuario.
2. JavaScript:

o Capturamos el evento submit del formulario.

o Usamos evento.preventDefault() para evitar que la página se
recargue al enviar el formulario.
o Validamos si los campos están vacíos y mostramos un mensaje de error o
éxito en el párrafo resultado.

Resumen de Eventos en JavaScript

• Eventos: Son acciones o sucesos que ocurren en el navegador o en los elementos
de la página web. Pueden ser capturados y manejados con JavaScript.
• addEventListener: Es el método más común para escuchar eventos en un
elemento.
• Tipos de eventos: Algunos eventos comunes
son click, submit, mouseover, keydown, entre otros.
Desarrollo Web en Entorno Cliente
2024/2025 Natalia Mártir

1. ¿Qué es el DOM?

El Document Object Model (DOM) es una representación en forma de árbol de todos los
elementos en una página web. Cada elemento HTML, atributo, y texto es un nodo en este
árbol. JavaScript puede interactuar con el DOM para modificar el contenido, el estilo y la
estructura del documento web en tiempo real.

Estructura del DOM

Imagina un documento HTML como el siguiente:

<!DOCTYPE html>
<html>
<head>
<title>Mi Página</title>
</head>
<body>
<h1>Hola, Mundo</h1>
<p>Este es un párrafo.</p>
</body>
</html>
El DOM representaría este documento como un árbol de nodos:

Document
└── <html>
├── <head>
│ └── <title>
│ └── "Mi Página"
└── <body>
├── <h1>
│ └── "Hola, Mundo"
└── <p>
└── "Este es un párrafo."
Cada etiqueta HTML (como <html>, <body>, <p>) es un nodo de elemento en el DOM. El
texto dentro de esas etiquetas es un nodo de texto.

2. Manipulación del DOM con JavaScript

2.1 Selección de Elementos del DOM

Para manipular el DOM, primero debes seleccionar los elementos que quieres modificar.
JavaScript proporciona varias formas de seleccionar elementos:
Desarrollo Web en Entorno Cliente
2024/2025 Natalia Mártir

1. document.getElementById(): Selecciona un elemento por su id.

2. let titulo = document.getElementById("miTitulo");

3. document.getElementsByClassName(): Selecciona todos los elementos con
una clase específica. Devuelve un HTMLCollection (una lista).

4. let parrafos = document.getElementsByClassName("miClase");

5. document.getElementsByTagName(): Selecciona todos los elementos de un
tipo de etiqueta específico.

6. let titulos = document.getElementsByTagName("h1");

7. document.querySelector(): Selecciona el primer elemento que coincide con
un selector CSS.

8. let boton = document.querySelector("button");

9. document.querySelectorAll(): Selecciona todos los elementos que coinciden
con un selector CSS. Devuelve una NodeList.

10. let botones = document.querySelectorAll("button");

2.2 Modificación de Elementos del DOM

Una vez que hayas seleccionado un elemento, puedes modificar su contenido o sus
atributos:

1. Modificar el contenido de texto:

o Para cambiar el texto de un elemento, usa innerText o textContent.

2. let parrafo = document.getElementById("miParrafo");
3. parrafo.innerText = "Este es el nuevo contenido.";
4. Modificar el contenido HTML:

o Puedes modificar el contenido HTML de un elemento con innerHTML.

5. parrafo.innerHTML = "<strong>Este es el nuevo contenido en
negrita.</strong>";
6. Modificar atributos:

o Para cambiar un atributo de un elemento (como src, href, id, etc.),

usa setAttribute().
7. let imagen = document.querySelector("img");
8. imagen.setAttribute("src", "nueva-imagen.jpg");
9. Modificar estilos:

o Puedes cambiar los estilos de un elemento directamente desde JavaScript

con la propiedad style.
10. let boton = document.getElementById("miBoton");
11. boton.style.backgroundColor = "red";
12. boton.style.fontSize = "20px";
Desarrollo Web en Entorno Cliente
2024/2025 Natalia Mártir

Ejemplo: Cambiar el contenido y estilo de un elemento

<!DOCTYPE html>
<html>
<head>
<title>Manipulación del DOM</title>
</head>
<body>
<h1 id="miTitulo">Título Original</h1>
<button id="cambiarTitulo">Cambiar Título</button>

<script>
let boton = document.getElementById("cambiarTitulo");

boton.addEventListener("click", function() {
let titulo = document.getElementById("miTitulo");
titulo.innerText = "Título Modificado";
titulo.style.color = "blue";
});
</script>
</body>
</html>
En este ejemplo, cuando haces clic en el botón, el texto del h1 se cambia a "Título
Modificado" y su color se vuelve azul.

3. Eventos en el DOM

3.1 ¿Qué es un evento?

Un evento es una interacción o acción que sucede en la página web y a la que JavaScript
puede responder. Algunos ejemplos de eventos son:

• click: Cuando el usuario hace clic en un botón o cualquier elemento interactivo.

• mouseover: Cuando el usuario pasa el mouse sobre un elemento.
• keydown: Cuando el usuario presiona una tecla.
• submit: Cuando se envía un formulario.

3.2 Cómo manejar eventos en JavaScript

Para manejar eventos, usamos manejadores de eventos. Estos son funciones que se
ejecutan cuando ocurre un evento en un elemento.
Desarrollo Web en Entorno Cliente
2024/2025 Natalia Mártir

addEventListener()

El método más común para manejar eventos es addEventListener(). Este método

permite "escuchar" un evento y ejecutar una función cuando ese evento ocurre.

Sintaxis:

elemento.addEventListener("evento", funcion);

• "evento": Es el tipo de evento que quieres escuchar,

como click, submit, keydown, etc.
• funcion: Es la función que se ejecutará cuando ocurra el evento.

3.3 Ejemplos Comunes de Eventos

1. Evento click

Este evento se activa cuando se hace clic en un elemento.

let boton = document.getElementById("miBoton");

boton.addEventListener("click", function() {
console.log("El botón ha sido clicado.");
});

2. Evento mouseover

Este evento se activa cuando el puntero del mouse pasa por encima de un elemento.

let imagen = document.getElementById("miImagen");

imagen.addEventListener("mouseover", function() {
console.log("El ratón está sobre la imagen.");
});

3. Evento submit

Este evento se activa cuando un formulario es enviado. Para prevenir que el formulario se
envíe automáticamente, puedes usar event.preventDefault().

let formulario = document.getElementById("miFormulario");

formulario.addEventListener("submit", function(evento) {
evento.preventDefault(); // Previene el envío por defecto
console.log("Formulario enviado.");
});
Desarrollo Web en Entorno Cliente
2024/2025 Natalia Mártir

Ejemplo: Manejo de Eventos

<!DOCTYPE html>
<html>
<head>
<title>Eventos en el DOM</title>
</head>
<body>
<button id="miBoton">Haz clic aquí</button>
<p id="miParrafo">Texto inicial</p>

<script>
let boton = document.getElementById("miBoton");

boton.addEventListener("click", function() {
let parrafo = document.getElementById("miParrafo");
parrafo.innerText = "El texto ha sido cambiado.";
parrafo.style.color = "green";
});
</script>
</body>
</html>
En este ejemplo, cuando haces clic en el botón, el contenido del párrafo cambia a "El texto
ha sido cambiado." y su color se vuelve verde.

4. Creación y Eliminación de Elementos del DOM

Además de modificar elementos existentes, también puedes crear o eliminar elementos en

el DOM usando JavaScript.

4.1 Crear un nuevo elemento

Para crear un nuevo elemento HTML, usamos document.createElement(), y para
agregarlo al DOM usamos appendChild().

let nuevoElemento = document.createElement("p");

nuevoElemento.innerText = "Este es un nuevo párrafo.";

let contenedor = document.getElementById("contenedor");

contenedor.appendChild(nuevoElemento);

4.2 Eliminar un elemento

Desarrollo Web en Entorno Cliente
2024/2025 Natalia Mártir

Para eliminar un elemento, primero seleccionamos el elemento que queremos eliminar y

luego usamos remove().

let elementoAEliminar = document.getElementById("miElemento");

elementoAEliminar.remove();

Ejemplo: Crear y Eliminar Elementos

<!DOCTYPE html>
<html>
<head>
<title>Crear y Eliminar Elementos</title>
</head>
<body>
<div id="contenedor">
<p>Este es un párrafo existente.</p>
</div>

<button id="crear">Crear Párrafo</button>

<button id="eliminar">Eliminar Párrafo</button>

<script>
let contenedor = document.getElementById("contenedor");

// Crear un nuevo párrafo

document.getElementById("crear").addEventListener("click",
function() {
let nuevoParrafo = document.createElement("p");
nuevoParrafo.innerText = "Este es un nuevo párrafo.";
contenedor.appendChild(nuevoParrafo);
});

// Eliminar el último párrafo

document.getElementById("eliminar").addEventListener("click",
function() {
let ultimoParrafo = contenedor.lastElementChild;
if (ultimoParrafo) {
ultimoParrafo.remove();
}
});
</script>
</body>
Desarrollo Web en Entorno Cliente
2024/2025 Natalia Mártir

</html>
En este ejemplo:

• El botón "Crear Párrafo" agrega un nuevo párrafo al contenedor cada vez que haces
clic.
• El botón "Eliminar Párrafo" elimina el último párrafo del contenedor.

5. Ejemplo Completo: Formulario Interactivo

Aquí tienes un ejemplo completo donde utilizamos lo aprendido sobre manipulación del
DOM, creación de elementos y manejo de eventos.

<!DOCTYPE html>
<html>
<head>
<title>Formulario Interactivo</title>
</head>
<body>
<form id="miFormulario">
Nombre: <input type="text" id="nombre"><br>
Edad: <input type="number" id="edad"><br>
<input type="submit" value="Enviar">
</form>
<p id="resultado"></p>

<script>

document.getElementById("miFormulario").addEventListener("submit",
function(evento) {
evento.preventDefault(); // Evitar que el formulario
se envíe automáticamente

let nombre = document.getElementById("nombre").value;

let edad = document.getElementById("edad").value;
let resultado = document.getElementById("resultado");

if (nombre === "" || edad === "") {

resultado.innerText = "Por favor, completa todos
los campos.";
resultado.style.color = "red";
} else {
Desarrollo Web en Entorno Cliente
2024/2025 Natalia Mártir

resultado.innerText = "Hola " + nombre + ", tienes

" + edad + " años.";
resultado.style.color = "green";
}
});
</script>
</body>
</html>
En este ejemplo:

• Cuando el usuario rellena el formulario y hace clic en "Enviar", JavaScript valida si

los campos están vacíos y muestra un mensaje apropiado en el
párrafo #resultado.
• Si los campos están vacíos, muestra un mensaje de error en rojo.
• Si los campos están llenos, muestra un saludo personalizado en verde.

6. Resumen

1. Manipulación del DOM: Puedes seleccionar y modificar elementos del DOM

utilizando métodos como getElementById(), querySelector(), innerText,
y style.
2. Eventos: Puedes usar addEventListener() para manejar eventos
como click, mouseover, y submit.
3. Creación y eliminación de elementos:
Usa document.createElement() y appendChild() para agregar nuevos
elementos al DOM y remove() para eliminarlos.
4. Interactividad: El DOM y los eventos te permiten crear interfaces interactivas, como
formularios que validan entradas del usuario.