Ejercicio 1: Mostrar un Mensaje al Cargar la

Página

Caso:

Crea una página HTML que, al cargarse, muestre un mensaje en una alerta
emergente utilizando JavaScript.

Requisitos:

 El mensaje debe ser: "Bienvenido a mi página web".

Pista:

Puedes usar el evento window.onload o simplemente un <script> dentro del

HTML.

Ejercicio 2: Botón para Cambiar el Contenido de

un Párrafo

Caso:

Crea una página HTML con un párrafo y un botón. Cuando el usuario haga clic
en el botón, el contenido del párrafo debe cambiar.

Requisitos:

 El párrafo debe tener el texto "Texto original".

 Al hacer clic en el botón, el texto debe cambiar a "Texto cambiado".

Pista:

Utiliza el evento onclick en el botón y cambia el contenido del párrafo

mediante document.getElementById() o innerHTML.
Ejercicio 3: Formulario de Suma

Caso:

Crea una página HTML que contenga un formulario con dos campos de entrada
numéricos y un botón. Al hacer clic en el botón, muestra el resultado de sumar
los dos números en la misma página.

Requisitos:

 Los números deben ser sumados cuando el usuario haga clic en el botón.
 El resultado debe mostrarse debajo del formulario.

Pista:

Utiliza parseInt() o parseFloat() para convertir los valores de entrada a

números.

Ejercicio 4: Cambiar el Color de Fondo con un

Botón

Caso:

Crea una página HTML con un botón. Al hacer clic en el botón, el color de fondo
de la página debe cambiar a un color diferente.

Requisitos:

 Puedes elegir cualquier color al hacer clic en el botón.

 El color de fondo de la página debe cambiar.

Pista:

Utiliza document.body.style.backgroundColor.
Ejercicio 5: Validación de un Formulario

Caso:

Crea un formulario HTML con un campo de texto para ingresar el nombre y un

botón de "Enviar". Cuando el usuario haga clic en "Enviar", el JavaScript debe
validar que el campo de nombre no esté vacío. Si está vacío, debe mostrar un
mensaje de error.

Requisitos:

 El campo de nombre no puede estar vacío.

 Si está vacío, muestra un mensaje como: "Por favor, ingrese su nombre."

Pista:

Utiliza if para comprobar si el valor del campo es una cadena vacía.

Ejercicio 6: Contador de Clics

Caso:

Crea una página HTML con un botón que cuente el número de veces que el
usuario hace clic en él. Muestra el número de clics en la página.

Requisitos:

 Cada vez que el usuario haga clic en el botón, el contador debe

aumentar en uno.
 El número de clics debe mostrarse en un elemento <p>.

Pista:

Utiliza una variable para almacenar el contador y actualízala cada vez que
ocurra el evento onclick.
Ejercicio 7: Lista Desplegable que Cambia el
Contenido de un Div

Caso:

Crea una página HTML con una lista desplegable <select>. Cuando el usuario
seleccione una opción de la lista, un mensaje debe mostrarse en un <div> de la
página.

Requisitos:

 La lista debe tener tres opciones: "Opción 1", "Opción 2" y "Opción 3".
 Cuando se seleccione una opción, el <div> debe mostrar un mensaje
diferente para cada una.

Pista:

Utiliza el evento onchange en el <select> y actualiza el contenido

del <div> con innerHTML.

Ejercicio 8: Cambio de Imagen con un Botón

Caso:

Crea una página HTML con una imagen y un botón. Cuando el usuario haga clic
en el botón, la imagen debe cambiar.

Requisitos:

 La página debe empezar mostrando una imagen.

 Al hacer clic en el botón, la imagen debe cambiar por otra.

Pista:

Utiliza document.getElementById("id_de_la_imagen").src para cambiar la

imagen.
Ejercicio 9: Crear una Lista de Tareas (To-Do List)

Caso:

Crea una página HTML con un campo de entrada de texto y un botón "Agregar".
Cuando el usuario haga clic en "Agregar", el texto ingresado debe agregarse
como un elemento en una lista de tareas.

Requisitos:

 El usuario puede escribir en el campo de texto y hacer clic en "Agregar".

 El texto ingresado debe aparecer como un nuevo elemento de una lista
en la página.

Pista:

Utiliza document.createElement() para agregar nuevos elementos a la lista.

Ejercicio 10: Temporizador (Timer)

Caso:

Crea una página HTML con un botón "Iniciar Temporizador" que, al hacer clic,
comience a contar los segundos en tiempo real y muestre el contador en la
página. También agrega un botón "Detener Temporizador" para parar el
contador.

Requisitos:

 El contador debe empezar cuando se haga clic en "Iniciar Temporizador".

 El contador debe detenerse cuando se haga clic en "Detener
Temporizador".
 El tiempo debe mostrarse en un elemento <p>.

Pista:

Utiliza setInterval() para actualizar el contador cada segundo

y clearInterval() para detenerlo.
Ejercicio 11: Mostrar/Ocultar Contenido con un
Botón

Caso:

Crea una página HTML con un párrafo de texto y un botón "Mostrar/Ocultar". Al

hacer clic en el botón, el párrafo debe ocultarse si está visible, o mostrarse si
está oculto.

Requisitos:

 El texto debe estar visible al cargar la página.

 Al hacer clic en el botón, el texto debe ocultarse o mostrarse.

Pista:

Utiliza element.style.display para mostrar u ocultar el contenido.

SOLUCIONES

Ejercicio 1: Mostrar un Mensaje al Cargar la

Página

Solución:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Mensaje de Bienvenida</title>
</head>
<body>
<script>
window.onload = function() {
alert("Bienvenido a mi página web");
};
</script>
</body>
</html>

Ejercicio 2: Botón para Cambiar el Contenido de

un Párrafo

Solución:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Cambiar Párrafo</title>
</head>
<body>
<p id="parrafo">Texto original</p>
<button onclick="cambiarTexto()">Cambiar Texto</button>

<script>
function cambiarTexto() {
document.getElementById("parrafo").innerHTML = "Texto
cambiado";
}
</script>
</body>
</html>

Ejercicio 3: Formulario de Suma

Solución:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Suma de Números</title>
</head>
<body>
<form>
Número 1: <input type="number" id="num1"><br>
Número 2: <input type="number" id="num2"><br>
<button type="button" onclick="sumar()">Sumar</button>
</form>
<p>Resultado: <span id="resultado"></span></p>

<script>
function sumar() {
var num1 =
parseFloat(document.getElementById("num1").value);
var num2 =
parseFloat(document.getElementById("num2").value);
var resultado = num1 + num2;
document.getElementById("resultado").innerHTML =
resultado;
}
</script>
</body>
</html>

Ejercicio 4: Cambiar el Color de Fondo con un

Botón

Solución:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Cambiar Color de Fondo</title>
</head>
<body>
<button onclick="cambiarColor()">Cambiar Color de
Fondo</button>

<script>
function cambiarColor() {
document.body.style.backgroundColor = "lightblue";
 }
</script>
</body>
</html>

Ejercicio 5: Validación de un Formulario

Solución:

<!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 Formulario</title>
</head>
<body>
<form>
Nombre: <input type="text" id="nombre"><br>
<button type="button"
onclick="validarFormulario()">Enviar</button>
</form>
<p id="mensajeError" style="color: red;"></p>

<script>
function validarFormulario() {
var nombre = document.getElementById("nombre").value;
if (nombre === "") {
document.getElementById("mensajeError").innerHTML =
"Por favor, ingrese su nombre.";
} else {
document.getElementById("mensajeError").innerHTML =
"";
alert("Formulario enviado con éxito");
}
}
</script>
</body>
</html>
Ejercicio 6: Contador de Clics

Solución:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Contador de Clics</title>
</head>
<body>
<button onclick="contarClics()">Haz clic aquí</button>
<p>Has hecho clic <span id="contador">0</span> veces.</p>

<script>
var contador = 0;

function contarClics() {
contador++;
document.getElementById("contador").innerHTML =
contador;
}
</script>
</body>
</html>

Ejercicio 7: Lista Desplegable que Cambia el

Contenido de un Div

Solución:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Lista Desplegable</title>
</head>
<body>
 <select onchange="cambiarTexto()">
<option value="1">Opción 1</option>
<option value="2">Opción 2</option>
<option value="3">Opción 3</option>
</select>

<div id="resultado"></div>

<script>
function cambiarTexto() {
var seleccion = document.querySelector('select').value;
var texto = "";

if (seleccion == "1") {
texto = "Has seleccionado la Opción 1";
} else if (seleccion == "2") {
texto = "Has seleccionado la Opción 2";
} else if (seleccion == "3") {
texto = "Has seleccionado la Opción 3";
}

document.getElementById("resultado").innerHTML = texto;
}
</script>
</body>
</html>

Ejercicio 8: Cambio de Imagen con un Botón

Solución:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Cambiar Imagen</title>
</head>
<body>
<img id="miImagen" src="imagen1.jpg" alt="Imagen 1"
width="300">
 <button onclick="cambiarImagen()">Cambiar Imagen</button>

<script>
function cambiarImagen() {
var imagen = document.getElementById("miImagen");
if (imagen.src.endsWith("imagen1.jpg")) {
imagen.src = "imagen2.jpg";
} else {
imagen.src = "imagen1.jpg";
}
}
</script>
</body>
</html>

Ejercicio 9: Crear una Lista de Tareas (To-Do List)

Solución:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Lista de Tareas</title>
</head>
<body>
<input type="text" id="tarea" placeholder="Escribe una tarea">
<button onclick="agregarTarea()">Agregar</button>

<ul id="listaDeTareas"></ul>

<script>
function agregarTarea() {
var tarea = document.getElementById("tarea").value;
if (tarea !== "") {
var lista =
document.getElementById("listaDeTareas");
var nuevaTarea = document.createElement("li");
nuevaTarea.innerHTML = tarea;
lista.appendChild(nuevaTarea);
 document.getElementById("tarea").value = ""; //
Limpiar el campo
}
}
</script>
</body>
</html>

Ejercicio 10: Temporizador (Timer)

Solución:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Temporizador</title>
</head>
<body>
<button onclick="iniciarTemporizador()">Iniciar
Temporizador</button>
<button onclick="detenerTemporizador()">Detener
Temporizador</button>
<p>Segundos: <span id="tiempo">0</span></p>

<script>
var contador = 0;
var temporizador;

function iniciarTemporizador() {
temporizador = setInterval(function() {
contador++;
document.getElementById("tiempo").innerHTML =
contador;
}, 1000);
}

function detenerTemporizador() {
clearInterval(temporizador);
}
 </script>
</body>
</html>

Ejercicio 11: Mostrar/Ocultar Contenido con un

Botón

Solución:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Mostrar/Ocultar Texto</title>
</head>
<body>
<p id="texto">Este es el texto que se puede mostrar u
ocultar.</p>
<button onclick="mostrarOcultar()">Mostrar/Ocultar</button>

<script>
function mostrarOcultar() {
var texto = document.getElementById("texto");
if (texto.style.display === "none") {
texto.style.display = "block";
} else {
texto.style.display = "none";
}
}
</script>
</body>
</html>