Código del ejercicio:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejercicio HTML y JavaScript</title>
</head>
<body>
    <h3>Calcular la edad de una persona</h3>
    <form action="">
        <label for="">año actual:</label>
        <input type="number" id="aActual"><br><br>
        <label for="">año de nacimiento:</label>
        <input type="number" id="aNacimiento"><br><br>
        <input type="button" value="Calcular" onclick="calcular()">
        <input type="reset" value="Limpiar"><br><br>
        <label for="">resultado:</label>
        <input type="text" id="resultado">
    </form>
    <script>
        function calcular(){
            let añoActual = parseInt(document.getElementById('aActual').value);
            let añoNacimiento = parseInt(document.getElementById('aNacimiento').value);
            let resultado = añoActual - añoNacimiento;
            document.getElementById('resultado').value = `${resultado} años.`;
        }
    </script>
</body>
</html>

Definición de los códigos del ejercicio:

<h3></h3> --> representa un encabezado de nivel 3.
<form></form> --> se utiliza para crear un formulario HTML para la entrada del usuario.
<br> --> produce un salto de línea en el texto.
<label></label> --> representa una etiqueta para un elemento en una interfaz de usuario.
<input> --> etiqueta especifica un campo de entrada donde el usuario puede ingresar datos.
onclick --> onclick evento ocurre cuando el usuario hace clic en un elemento.
<script></script> --> contiene comandos u ordenes que se van ejecutando de manera secuencial y comúnmente se utilizan para controlar el comportamiento de un programa en específico o para interactuar con el sistema operativo.
function --> es un bloque de código diseñado para realizar una tarea en particular.
let --> permite declarar variables limitando su alcance (scope) al bloque, declaración, o expresión donde se está usando.
parseInt() --> analiza un valor como una cadena y devuelve el primer entero.
document.getElementById() --> devuelve un elemento con un valor especificado.
.value --> establece o devuelve el valor del atributo de valor de un campo de texto.
`${}` --> los literales de plantilla (cadenas de plantilla) le permiten utilizar cadenas o expresiones incrustadas en forma de cadena.

Explicación del Código:

Este programa solicita al usuario el año actual y el año de nacimiento. Luego, mediante JavaScript, realiza una resta para calcular la edad de la persona y muestra el resultado en una caja de texto.

1. Estructura del documento HTML

<!DOCTYPE html>

Indica que el documento está escrito en HTML5.

<html lang="es">

Es el inicio del documento HTML y especifica que el idioma de la página es español.

<head>

Contiene información de la página, como la codificación de caracteres, la configuración para dispositivos móviles y el título que aparece en la pestaña del navegador.

<body>

Contiene todo el contenido visible de la página web.

2. Título del ejercicio

<h3>Calcular la edad de una persona</h3>

Muestra el título del ejercicio para indicar al usuario cuál es la función del programa.

3. Formulario

El formulario contiene los controles que permiten ingresar los datos y mostrar el resultado.

Campo: Año actual


<label>año actual:</label>

<input type="number" id="aActual">

Permite escribir el año actual utilizando únicamente números.

Campo: Año de nacimiento


<label>año de nacimiento:</label>

<input type="number" id="aNacimiento">

Permite ingresar el año en que nació la persona.

Botón Calcular


<input type="button" value="Calcular" onclick="calcular()">

Cuando el usuario hace clic en este botón, se ejecuta la función calcular().

Botón Limpiar


<input type="reset" value="Limpiar">

Borra todos los datos escritos en el formulario y deja los campos vacíos.

Campo Resultado


<input type="text" id="resultado">

Muestra la edad calculada por el programa.

4. Código JavaScript

Función calcular()


function calcular(){

  // instrucciones

}

Esta función contiene todos los pasos necesarios para calcular la edad. Se ejecuta cuando el usuario presiona el botón Calcular.

Obtener el año actual


let añoActual = parseInt(document.getElementById('aActual').value);

Busca el valor escrito en el campo aActual y lo convierte en un número entero utilizando parseInt().

Obtener el año de nacimiento


let añoNacimiento = parseInt(document.getElementById('aNacimiento').value);

Obtiene el año de nacimiento ingresado por el usuario y también lo convierte en un número entero.

Calcular la edad


let resultado = añoActual - añoNacimiento;

Resta el año de nacimiento al año actual para obtener la edad de la persona.

Mostrar el resultado


document.getElementById('resultado').value = `${resultado} años.`;

Coloca el resultado dentro de la caja de texto con el mensaje correspondiente, por ejemplo: 25 años.

5. Resumen del funcionamiento

Paso	¿Qué hace?
1	El usuario escribe el año actual.
2	Escribe el año de nacimiento.
3	Presiona el botón Calcular.
4	JavaScript obtiene ambos valores.
5	Realiza la resta entre el año actual y el año de nacimiento.
6	Muestra la edad en el campo Resultado.

Conclusión

Este ejercicio muestra cómo combinar HTML y JavaScript para resolver un problema sencillo. HTML crea la interfaz donde el usuario introduce la información, mientras que JavaScript obtiene los datos, realiza el cálculo de la edad mediante una resta y presenta el resultado de forma automática.

Ejercicios de programación

Páginas

lunes, 22 de junio de 2026

Calcular la edad de una persona en HTML y JavaScript