Desarrollo Web en Entorno Cliente

2024/2025 Natalia Mártir

Ejercicio 1: Variables y Operadores

Objetivo: Aprender a crear variables y utilizar operadores básicos.

1. Instrucciones:
o Crea dos variables: a y b.
o Asigna a a el valor 10 y a b el valor 20.
o Crea una tercera variable suma que almacene la suma de a y b.
o Muestra el resultado de la suma en la consola.

Ejemplo:

let a = 10;
let b = 20;
let suma = a + b;
console.log("La suma de a y b es: " + suma);
Preguntas para reflexionar:

1. ¿Qué otros operadores podrías usar en lugar de + (suma)? (Prueba con

operadores como -, *, /).

Ejercicio 2: Condicionales
Objetivo: Aprender a usar sentencias if-else para tomar decisiones.

2. Instrucciones:
o Crea una variable edad.
o Si la edad es mayor o igual a 18, muestra en la consola "Eres
mayor de edad".
o Si la edad es menor a 18, muestra "Eres menor de edad".

Ejemplo:

let edad = 17;

if (edad >= 18) {

console.log("Eres mayor de edad.");
} else {
console.log("Eres menor de edad.");
}
Preguntas para reflexionar:

1. ¿Cómo podrías expandir este código para tener más de dos condiciones?
(Por ejemplo, "Eres un niño", "Eres adolescente", "Eres adulto").
Desarrollo Web en Entorno Cliente
2024/2025 Natalia Mártir

Ejercicio 3: Funciones
Objetivo: Entender cómo crear y usar funciones en JavaScript.

3. Instrucciones:
o Crea una función llamada saludar que acepte un
parámetro nombre.
o La función debe mostrar en la consola un saludo personalizado
usando el nombre proporcionado.
o Llama a la función saludar con tu propio nombre como
argumento.

Ejemplo:

function saludar(nombre) {
console.log("Hola, " + nombre + "!");
}

saludar("Juan");
Preguntas para reflexionar:

1. ¿Cómo podrías modificar la función para que devuelva un saludo en lugar

de mostrarlo directamente en la consola?
2. ¿Cómo podrías usar la función con diferentes nombres para generar
saludos personalizados?

Ejercicio 4: Bucles
Objetivo: Aprender a utilizar bucles for para ejecutar un bloque de código
varias veces.

4. Instrucciones:
o Escribe un bucle for que imprima los números del 1 al 10 en la
consola.
o Luego, modifica el bucle para que imprima solo los números pares
entre 1 y 10.

Ejemplo:

// Imprime los números del 1 al 10

for (let i = 1; i <= 10; i++) {
console.log(i);
}

// Imprime solo los números pares del 1 al 10

for (let i = 1; i <= 10; i++) {
if (i % 2 === 0) {
Desarrollo Web en Entorno Cliente
2024/2025 Natalia Mártir

console.log(i);
}
}
Preguntas para reflexionar:

1. ¿Cómo podrías hacer que el bucle imprima solo los números impares?
2. ¿Qué otro tipo de bucles podrías usar en lugar de for? (Investiga
sobre while o do-while).

Ejercicio 5: Arrays
Objetivo: Trabajar con arrays para almacenar y acceder a múltiples valores.

5. Instrucciones:
o Crea un array llamado frutas que contenga al menos 3 frutas
(por ejemplo, "Manzana", "Banana", "Pera").
o Muestra la primera fruta en la consola.
o Añade una nueva fruta al final del array.
o Muestra todas las frutas en la consola usando un bucle.

Ejemplo:

let frutas = ["Manzana", "Banana", "Pera"];

console.log("Primera fruta: " + frutas[0]);

frutas.push("Naranja");

for (let i = 0; i < frutas.length; i++) {

console.log(frutas[i]);
}
Preguntas para reflexionar:

1. ¿Cómo podrías eliminar la primera fruta del array?

2. ¿Cómo podrías ordenar el array alfabéticamente?

Ejercicio 6: Objetos
Objetivo: Crear y manipular objetos en JavaScript.

6. Instrucciones:
o Crea un objeto llamado persona con las siguientes
propiedades: nombre, edad, y ciudad.
o Muestra en la consola el nombre de la persona.
o Actualiza la propiedad edad de la persona a un nuevo valor.
Desarrollo Web en Entorno Cliente
2024/2025 Natalia Mártir

o Añade una nueva propiedad al objeto llamada profesión.

Ejemplo:

let persona = {
nombre: "María",
edad: 25,
ciudad: "Madrid"
};

console.log("Nombre: " + persona.nombre);

persona.edad = 26;

persona.profesion = "Desarrolladora";

console.log(persona);
Preguntas para reflexionar:

1. ¿Cómo podrías eliminar una propiedad del objeto?

2. ¿Cómo podrías combinar varios objetos para crear una lista de personas?

Ejercicio 7: Eventos del DOM

Objetivo: Entender cómo interactuar con el DOM y manejar eventos.

7. Instrucciones:
o Crea un archivo HTML básico con un botón que diga "Haz clic
aquí".
o Usa JavaScript para mostrar un mensaje en la consola cuando el
botón sea presionado.

HTML:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Ejercicio de Eventos</title>
</head>
<body>
<button id="miBoton">Haz clic aquí</button>
Desarrollo Web en Entorno Cliente
2024/2025 Natalia Mártir

<script src="script.js"></script>
</body>
</html>
JavaScript (en script.js):

document.getElementById("miBoton").addEventListener("click",
function() {
console.log("El botón ha sido presionado.");
});
Preguntas para reflexionar:

1. ¿Cómo podrías modificar el texto del botón cuando se hace clic?

2. ¿Cómo podrías cambiar el color del fondo del documento al hacer clic en
el botón?

Ejercicio 8: Validación de Formularios

Objetivo: Validar un formulario simple usando JavaScript.

8. Instrucciones:
o Crea un formulario HTML que pida un nombre y una edad.
o Usa JavaScript para validar que el nombre no esté vacío y que la
edad sea mayor o igual a 18.
o Si la validación falla, muestra un mensaje de error.

HTML:

<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="mensaje"></p>

<script src="script.js"></script>
JavaScript (en script.js):

document.getElementById("miFormulario").addEventListener("submit",
function(event) {
event.preventDefault();

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

let edad = document.getElementById("edad").value;
let mensaje = "";
Desarrollo Web en Entorno Cliente
2024/2025 Natalia Mártir

if (nombre === "") {

mensaje = "El nombre no puede estar vacío.";
} else if (edad < 18) {
mensaje = "Debes ser mayor de 18 años.";
} else {
mensaje = "Formulario enviado correctamente.";
}

document.getElementById("mensaje").innerText = mensaje;
});
Preguntas para reflexionar:

1. ¿Cómo podrías mostrar los mensajes de error junto a los campos que
fallaron?
2. ¿Cómo podrías mejorar la validación para aceptar solo nombres con
caracteres alfabéticos?

Solución:

Ejercicio 1: Variables y Operadores

Instrucción:

 Crear dos variables a y b, sumar sus valores y mostrar el resultado en la

consola.

Solución:

let a = 10;
let b = 20;
let suma = a + b;

console.log("La suma de a y b es: " + suma); // Resultado: La suma

de a y b es: 30

Ejercicio 2: Condicionales
Instrucción:

 Determinar si una persona es mayor o menor de edad basado en la

variable edad.

Solución:
Desarrollo Web en Entorno Cliente
2024/2025 Natalia Mártir

let edad = 17;

if (edad >= 18) {

console.log("Eres mayor de edad."); // Si la edad es mayor o
igual a 18
} else {
console.log("Eres menor de edad."); // Si la edad es menor a
18
}
Prueba cambiando la variable edad a otros valores para ver cómo funciona.

Ejercicio 3: Funciones
Instrucción:

 Crear una función que salude a una persona usando su nombre.

Solución:

function saludar(nombre) {
console.log("Hola, " + nombre + "!");
}

saludar("Juan"); // Resultado: Hola, Juan!

Llamar a la función con diferentes nombres como argumento también
funcionará.

Ejercicio 4: Bucles
Instrucción:

 Imprimir los números del 1 al 10 y luego los números pares entre 1 y 10.

Solución:

// Imprime los números del 1 al 10

for (let i = 1; i <= 10; i++) {
console.log(i);
}

// Imprime solo los números pares del 1 al 10

for (let i = 1; i <= 10; i++) {
if (i % 2 === 0) {
Desarrollo Web en Entorno Cliente
2024/2025 Natalia Mártir

console.log(i); // Resultado: 2, 4, 6, 8, 10
}
}

Ejercicio 5: Arrays
Instrucción:

 Trabajar con un array de frutas, acceder a sus elementos y agregar una

nueva fruta.

Solución:

let frutas = ["Manzana", "Banana", "Pera"];

console.log("Primera fruta: " + frutas[0]); // Resultado: Manzana

// Agrega una nueva fruta

frutas.push("Naranja");

// Imprime todas las frutas usando un bucle

for (let i = 0; i < frutas.length; i++) {
console.log(frutas[i]);
}

Ejercicio 6: Objetos
Instrucción:

 Crear un objeto persona y modificar sus propiedades.

Solución:

let persona = {
nombre: "María",
edad: 25,
ciudad: "Madrid"
};

console.log("Nombre: " + persona.nombre); // Resultado: Nombre:

María

// Actualiza la edad
persona.edad = 26;
Desarrollo Web en Entorno Cliente
2024/2025 Natalia Mártir

// Añadir una nueva propiedad

persona.profesion = "Desarrolladora";

console.log(persona);
// Resultado: { nombre: 'María', edad: 26, ciudad: 'Madrid',
profesion: 'Desarrolladora' }

Ejercicio 7: Eventos del DOM

Instrucción:

 Crear un botón en HTML y manejar el evento click con JavaScript.

Solución:

HTML:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Ejercicio de Eventos</title>
</head>
<body>
<button id="miBoton">Haz clic aquí</button>

<script src="script.js"></script>
</body>
</html>
JavaScript (script.js):

document.getElementById("miBoton").addEventListener("click",
function() {
console.log("El botón ha sido presionado."); // Muestra este
mensaje en la consola cuando el botón se presiona
});
Al hacer clic en el botón, se mostrará el mensaje en la consola.

Ejercicio 8: Validación de Formularios

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

Instrucción:

 Validar un formulario con JavaScript asegurando que el nombre no esté

vacío y la edad sea mayor o igual a 18.

Solución:

HTML:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Validación de Formularios</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="mensaje"></p>

<script src="script.js"></script>
</body>
</html>
JavaScript (script.js):

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

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

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

if (nombre === "") {

mensaje = "El nombre no puede estar vacío.";
} else if (edad < 18) {
mensaje = "Debes ser mayor de 18 años.";
} else {
mensaje = "Formulario enviado correctamente.";
Desarrollo Web en Entorno Cliente
2024/2025 Natalia Mártir

document.getElementById("mensaje").innerText = mensaje; //
Muestra el mensaje en la página
});
Este código valida el formulario y muestra un mensaje dependiendo de los
datos ingresados.