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 volumen de un prisma rectangular</h3>
    <form action="">
        <label for="">largo:</label>
        <input type="number" id="largo"><br><br>
        <label for="">ancho:</label>
        <input type="number" id="ancho"><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 largo = parseFloat(document.getElementById('largo').value);
            let ancho = parseFloat(document.getElementById('ancho').value);
            let altura = parseFloat(document.getElementById('altura').value);
            let volumen = largo * ancho * altura; 
            document.getElementById('resultado').value = `${volumen} m³`;
        }
    </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 permite calcular el volumen de un prisma rectangular utilizando HTML para crear la interfaz gráfica y JavaScript para realizar el cálculo.

1. Título del ejercicio

<h3>Calcular el volumen de un prisma rectangular</h3>

Muestra el nombre del ejercicio en la página web para indicar al usuario cuál es la función del programa.

2. Campos de entrada de datos

Estos campos permiten ingresar los datos necesarios para calcular el volumen:

Largo del prisma.
Ancho del prisma.
Altura del prisma.

El atributo type="number" permite que solo se ingresen valores numéricos.

3. Botón Calcular

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

4. Botón Limpiar

Este botón elimina todos los valores ingresados en el formulario.

5. Campo para mostrar el resultado

Aquí se muestra el volumen calculado por el programa.

6. Función calcular()

function calcular(){ let largo = parseFloat( document.getElementById('largo').value ); let ancho = parseFloat( document.getElementById('ancho').value ); let altura = parseFloat( document.getElementById('altura').value ); let volumen = largo * ancho * altura; document.getElementById('resultado').value = `${volumen} m³`; }

Esta función realiza todo el proceso de cálculo.

Obtiene el valor del largo.
Obtiene el valor del ancho.
Obtiene el valor de la altura.
Convierte los datos a números mediante parseFloat().
Multiplica largo × ancho × altura.
Muestra el resultado en el campo correspondiente.

7. Fórmula utilizada

Volumen = Largo × Ancho × Altura

Ejemplo:

Largo = 5 m
Ancho = 3 m
Altura = 2 m

Volumen = 5 × 3 × 2 Volumen = 30 m³

Resumen

El programa solicita al usuario el largo, ancho y altura de un prisma rectangular. Luego, JavaScript multiplica estos tres valores para obtener el volumen y finalmente muestra el resultado expresado en metros cúbicos (m³).

Ejercicios de programación

Páginas

miércoles, 17 de junio de 2026

Calcular el volumen de un prisma rectangular en HTML y JavaScript