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 el área de un rectángulo</h3>
    <form action="">
        <label for="">base:</label>
        <input type="number" id="base"><br><br>
        <label for="">altura:</label>
        <input type="number" id="altura"><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 base = parseFloat(document.getElementById('base').value);
            let altura = parseFloat(document.getElementById('altura').value);
            let area = base * altura;
            document.getElementById('resultado').value = `${area} cm²`;
        }
    </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.
parseFloat() --> analiza un argumento (si es necesario, lo convierte en una cadena) y devuelve un número de coma flotante.
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 ejercicio permite calcular el área de un rectángulo usando HTML y JavaScript. El usuario ingresa la base y la altura, y el sistema realiza el cálculo automáticamente.

1. Estructura HTML

Se utilizan campos de entrada para la base y la altura, además de un botón para ejecutar el cálculo y un campo donde se muestra el resultado.

input base: permite ingresar la base del rectángulo.
input altura: permite ingresar la altura del rectángulo.
botón calcular: ejecuta la función JavaScript.
resultado: muestra el área calculada.

2. JavaScript

La función calcular() obtiene los valores ingresados, los convierte a números y realiza la multiplicación.

Obtiene la base con getElementById.
Obtiene la altura con getElementById.
Multiplica base × altura.
Muestra el resultado en pantalla con “cm²”.

3. Resultado

El resultado final es el área del rectángulo, mostrado en centímetros cuadrados (cm²).

Ejercicios de programación

Páginas

domingo, 21 de junio de 2026

Calcular el área de un rectángulo en HTML y JavaScript