En este ejercicio, crearás una página web simple con un contador dinámico que aumenta o disminuye cuando el usuario hace clic en los botones correspondientes. Este ejercicio te ayudará a practicar el manejo de eventos, la manipulación del DOM y las operaciones con variables en JavaScript.
Objetivo del Ejercicio
- Crear una página web con dos botones: uno para incrementar el contador y otro para disminuirlo.
- Mostrar el valor actual del contador en la página y actualizarlo cada vez que se haga clic en los botones.
Código HTML y JavaScript
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contador Dinámico con JavaScript</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
#contador {
font-size: 48px;
margin: 20px;
}
button {
font-size: 24px;
padding: 10px 20px;
margin: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Contador Dinámico</h1>
<div id="contador">0</div>
<button onclick="incrementar()">Incrementar</button>
<button onclick="disminuir()">Disminuir</button>
<script>
// Variable para almacenar el valor del contador
let valorContador = 0;
// Función para incrementar el contador
function incrementar() {
valorContador++;
actualizarContador();
}
// Función para disminuir el contador
function disminuir() {
valorContador--;
actualizarContador();
}
// Función para actualizar el valor mostrado en la página
function actualizarContador() {
document.getElementById("contador").innerHTML = valorContador;
}
</script>
</body>
</html>
Explicación del Código
- Estructura HTML:
- La página tiene un título
h1
que dice “Contador Dinámico”. - El elemento
div
con el idcontador
muestra el valor actual del contador. - Hay dos botones: uno para incrementar el valor del contador y otro para disminuirlo. Cada botón tiene un atributo
onclick
que llama a una función de JavaScript cuando se hace clic en él.
- JavaScript:
- Variable
valorContador
: Esta variable almacena el valor actual del contador. - Funciones
incrementar()
ydisminuir()
: Estas funciones aumentan o disminuyen el valor devalorContador
en 1 cada vez que se hacen clic en los botones correspondientes. - Función
actualizarContador()
: Esta función actualiza el contenido deldiv
con el nuevo valor del contador cada vez que se hace clic en uno de los botones.
- Estilo CSS:
- El código incluye un estilo básico para centrar el contenido, ajustar el tamaño del texto del contador y hacer que los botones sean más grandes y visibles.
¿Qué Aprenderás?
- Manipulación del DOM: Cambiar el contenido de un elemento HTML (el valor del contador).
- Manejo de eventos: Ejecutar funciones en respuesta a eventos de clic en botones.
- Operaciones con variables: Incrementar y disminuir el valor de una variable y reflejar los cambios en la página.
Extensión del Ejercicio
Si deseas ampliar este ejercicio, puedes intentar agregar más funcionalidades:
- Reiniciar el contador: Añade un botón adicional para restablecer el contador a cero.
- Límites en el contador: Añade condiciones para evitar que el contador baje de cero o suba más allá de cierto número.
- Estilos adicionales: Experimenta con más estilos CSS para mejorar la apariencia de la página.
… … …
¡Coméntanos que te ha parecido este artículo al final de la página!
TÚ OPINIÓN IMPORTA
NUESTRAS ÚLTIMAS PUBLICACIONES
- Artículo: Funciones esenciales de C para la manipulación de cadenas: fgets, strlen, stdin, y más
- Uso de la Clase DAO sin Interfaces en Java: Ejemplo de Gestión de Trabajadores
- Uso de DAO en Java: Simplificando el Acceso a Datos con el Patrón DAO
- Guía Completa para la Creación de Gramáticas en JFLAP: Ejercicios y Soluciones
- Generación de Lenguajes en JFLAP con Gramáticas: Ejercicios y Estrategias
- Máquinas de Turing y Enumeración de Números Binarios: Diseño y Funcionamiento en JFLAP
- Generación de Documentación en C++ con Doxygen: Guía Completa
- La importancia de separar sustantivos, adjetivos y verbos en programación y bases de datos
- Entendiendo los Símbolos de Lenguajes y Autómatas en Computación
Contenido restringido
Comments are closed