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 cilindro</h3>
    <form action="">
        <label for="">radio:</label>
        <input type="number" id="radio"><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 radio = parseFloat(document.getElementById('radio').value);
            let altura = parseFloat(document.getElementById('altura').value);
            let pi = 3.1416;
            let volumen = pi * (radio * radio) * altura; 
            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 solicita al usuario el radio y la altura de un cilindro. Luego utiliza JavaScript para calcular el volumen mediante la fórmula:

Volumen = π × radio² × altura

1. Declaración del documento

<!DOCTYPE html>

Indica al navegador que el documento está escrito utilizando HTML5.

2. Etiqueta HTML

Define el inicio de la página web y especifica que el contenido está en español.

3. Configuración de la página

UTF-8: Permite mostrar correctamente caracteres especiales.
X-UA-Compatible: Mejora la compatibilidad con navegadores.
Viewport: Hace que la página sea adaptable a celulares y tablets.
Title: Define el título de la pestaña del navegador.

4. Título principal

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

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

5. Campo Radio

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

Permite ingresar el valor del radio del cilindro.

6. Campo Altura

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

Permite ingresar la altura del cilindro.

7. Botón Calcular

Al hacer clic, ejecuta la función calcular().

8. Botón Limpiar

Borra todos los datos ingresados en el formulario.

9. Campo Resultado

Muestra el volumen calculado por el programa.

10. Función calcular()

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

radio: Obtiene el valor ingresado por el usuario.
altura: Obtiene la altura ingresada.
pi: Guarda el valor aproximado de π.
volumen: Calcula el volumen usando la fórmula del cilindro.
resultado: Muestra el resultado en pantalla con la unidad cm³.

11. Ejemplo de cálculo

Radio = 3 cm Altura = 5 cm Volumen = 3.1416 × 3² × 5 Volumen = 3.1416 × 9 × 5 Volumen = 141.372 cm³

El programa mostrará como resultado: 141.372 cm³.

Resumen

Este programa permite ingresar el radio y la altura de un cilindro, calcula automáticamente su volumen utilizando JavaScript y muestra el resultado en centímetros cúbicos (cm³).

Ejercicios de programación

Páginas

miércoles, 17 de junio de 2026

Calcular el volumen de un cilindro en HTML y JavaScript