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 perímetro 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 perimetro = 2 * base + 2 * altura;
            document.getElementById('resultado').value = `${perimetro} 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.
let --> permite declarar variables limitando su alcance (scope) al bloque, declaración, o expresión donde se está usando.
function --> es un bloque de código diseñado para realizar una tarea en particular.
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 programa solicita al usuario la base y la altura de un rectángulo. Después de presionar el botón Calcular, JavaScript obtiene los valores ingresados, calcula el perímetro y muestra el resultado.

1. Título del ejercicio

<h3>Calcular el perímetro de un rectángulo</h3>

Muestra el nombre del ejercicio en la página web.

2. Campo para ingresar la base

Permite al usuario escribir la medida de la base del rectángulo.

3. Campo para ingresar la altura

<label>altura:</label>
<input type="number" id="altura">

Permite ingresar la altura del rectángulo.

4. Botón Calcular

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

5. Botón Limpiar

Borra los valores ingresados y limpia el formulario.

6. Campo de resultado

Muestra el resultado del cálculo del perímetro.

7. Función calcular()

function calcular(){
  let base = parseFloat(document.getElementById('base').value);
  let altura = parseFloat(document.getElementById('altura').value);
  let perimetro = 2 * base + 2 * altura;
  document.getElementById('resultado').value = `${perimetro} cm`;
}

8. Obtener la base

let base = parseFloat(document.getElementById('base').value);

Obtiene el valor escrito en el campo base y lo convierte en un número.

9. Obtener la altura

let altura = parseFloat(document.getElementById('altura').value);

Obtiene el valor escrito en el campo altura y lo convierte en un número.

10. Calcular el perímetro

let perimetro = 2 * base + 2 * altura;

Calcula el perímetro del rectángulo utilizando la fórmula:

Perímetro = (2 × base) + (2 × altura)

Ejemplo:

Base = 8 cm
Altura = 5 cm
Perímetro = (2 × 8) + (2 × 5) = 26 cm

11. Mostrar el resultado

document.getElementById('resultado').value = `${perimetro} cm`;

Muestra el resultado final en el cuadro de texto agregando la unidad de medida "cm".

Resumen

El usuario introduce la base y la altura del rectángulo, presiona el botón Calcular, JavaScript realiza la operación del perímetro y finalmente muestra el resultado en pantalla.

Ejercicios de programación

Páginas

jueves, 18 de junio de 2026

Calcular el perímetro de un rectángulo en HTML y JavaScript