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 una esfera</h3>
    <form action="">
        <label for="">radio:</label>
        <input type="number" id="radio"><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 radio = parseFloat(document.getElementById('radio').value);
            let pi = 3.1416;
            let volumen = 4 / 3 * pi * (radio * radio * radio);
            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:

¿Qué hace este programa?

Este programa solicita al usuario el radio de una esfera, calcula su volumen utilizando una fórmula matemática y muestra el resultado en pantalla.

1. Título del ejercicio

<h3>Calcular el volumen de una esfera</h3>

Muestra el título del programa para indicar al usuario la operación que realizará.

2. Campo para ingresar el radio

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

El usuario introduce el valor del radio de la esfera. El atributo id="radio" permite acceder al dato desde JavaScript.

3. Botón Calcular

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

4. Botón Limpiar

Borra los datos ingresados en el formulario y permite realizar un nuevo cálculo.

5. Campo de resultado

Muestra el volumen calculado por el programa.

6. Función calcular()

function calcular(){
  let radio = parseFloat(document.getElementById('radio').value);
  let pi = 3.1416;
  let volumen = 4 / 3 * pi * (radio * radio * radio);
  document.getElementById('resultado').value = `${volumen} m³`;
}

Esta función realiza todo el proceso de cálculo del volumen de la esfera.

Obtiene el radio: Lee el valor ingresado por el usuario y lo convierte a número decimal.
Define PI: Guarda el valor aproximado de π (3.1416).
Calcula el volumen: Aplica la fórmula matemática de la esfera.
Muestra el resultado: Presenta el volumen calculado en el campo resultado.

7. Fórmula utilizada

V = (4/3) × π × r³

Donde:

V = Volumen de la esfera.
π = 3.1416.
r = Radio de la esfera.
r³ = Radio elevado al cubo.

Resumen

El usuario introduce el radio de una esfera, presiona el botón Calcular, el programa aplica la fórmula V = (4/3) × π × r³ y finalmente muestra el volumen obtenido en metros cúbicos (m³).

Ejercicios de programación

Páginas

viernes, 19 de junio de 2026

Calcular el volumen de una esfera en HTML y JavaScript