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 cubo</h3>
    <form action="">
        <label for="">lado:</label>
        <input type="number" id="lado"><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 lado = parseFloat(document.getElementById('lado').value);
            let volumen = lado * lado * lado; 
            document.getElementById('resultado').value = `${volumen} 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 permite ingresar la longitud de un lado de un cubo, calcular su volumen y mostrar el resultado en pantalla utilizando HTML y JavaScript.

1. Estructura principal

<!DOCTYPE html> <html lang="es">

<!DOCTYPE html> indica que el documento utiliza HTML5.
<html lang="es"> especifica que la página está en español.

2. Encabezado de la página

<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>

Define la configuración básica de la página, la codificación de caracteres, la adaptación a dispositivos móviles y el título mostrado en la pestaña del navegador.

3. Título del ejercicio

<h3>Calcular el volumen de un cubo</h3>

Muestra el nombre del ejercicio en la página.

4. Entrada del lado del cubo

Permite al usuario ingresar la medida de uno de los lados del cubo.

5. Botón Calcular

Al hacer clic en este botón se ejecuta la función calcular().

6. Botón Limpiar

Borra los datos ingresados en el formulario.

7. Campo de resultado

Muestra el volumen calculado del cubo.

8. Función JavaScript

function calcular(){ let lado = parseFloat( document.getElementById('lado').value ); let volumen = lado * lado * lado; document.getElementById('resultado').value = `${volumen} cm³`; }

La función obtiene el valor ingresado por el usuario, lo convierte a número decimal mediante parseFloat(), calcula el volumen multiplicando el lado por sí mismo tres veces y finalmente muestra el resultado en la caja de texto.

Volumen = lado × lado × lado

Volumen = lado³

9. Ejemplo

Si el usuario ingresa: lado = 4 cm

El cálculo será: 4 × 4 × 4 = 64 cm³

El resultado mostrado será: 64 cm³

Conclusión

Este ejercicio enseña cómo capturar datos desde un formulario HTML, procesarlos con JavaScript y mostrar el volumen de un cubo utilizando la fórmula matemática lado³.

Ejercicios de programación

Páginas

miércoles, 17 de junio de 2026

Calcular el volumen de un cubo en HTML y JavaScript