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 radio de una circunferencia y que la imprima solo si el radio sede a los 50 cm</h3>
    <form action="">
        <label for="">circunferencia:</label>
        <input type="number" id="circunferencia"><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" size="25">
    </form>
    <script>
        function calcular(){
            let circunferencia = parseFloat(document.getElementById('circunferencia').value);
            let radio = circunferencia / (2 * Math.PI);
            if(radio <= 50){
                document.getElementById('resultado').value = `${radio.toFixed(2)} cm`;
            }else{
                document.getElementById('resultado').value = "El radio no sede a los 50 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.
<textarea></textarea> --> define un control de entrada de texto de varias líneas.
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.
function --> es un bloque de código diseñado para realizar una tarea en particular.
let --> permite declarar variables limitando su alcance (scope) al bloque, declaración, o expresión donde se está usando.
parseFloat() --> analiza un argumento (si es necesario, lo convierte en una cadena) y devuelve un número de coma flotante.
Math.PI --> representa la relacion entre la longitud de la circunferencia de un circulo y su diametro, la cual es aproximadamente 3.14159.
if --> se usa para especificar un bloque de código que se ejecutará, si una condición especificada es verdadera.
else --> se usa para especificar un bloque de código a ejecutar, si la misma condición es falsa.
<= --> el operador menor o igual ( <= ) devuelve true si el operando izquierdo es menor o igual que el operando derecho, y en false caso contrario.
.toFixed() --> convierte un número a cadena conservando los N primeros decimales.
`${}` --> los literales de plantilla (cadenas de plantilla) le permiten utilizar cadenas o expresiones incrustadas en forma de cadena.
document.getElementById() --> devuelve un elemento con un valor especificado.
.value --> establece o devuelve el valor del atributo de valor de un campo de texto.

Explicación del Código:

¿Qué hace este programa?

Este programa solicita al usuario el valor de la circunferencia. Luego calcula el radio utilizando la fórmula matemática:

Radio = Circunferencia ÷ (2 × π)

Después verifica si el radio es menor o igual a 50 cm. Si cumple esa condición, muestra el resultado. En caso contrario, informa que el radio supera los 50 cm.

Explicación de cada parte del código HTML

<!DOCTYPE html>
Indica que el documento está escrito en HTML5.
<html lang="es">
Define el idioma de la página como español.
<head>
Contiene la información de configuración del documento.
<meta charset="UTF-8">
Permite mostrar correctamente caracteres como á, é, í, ó y ú.
<meta name="viewport">
Hace que la página sea adaptable a celulares y tabletas.
<title>
Define el nombre que aparece en la pestaña del navegador.
<body>
Contiene todo el contenido visible de la página.
<h3>
Muestra el título del ejercicio.
<form>
Agrupa los controles del formulario.
<label>
Muestra el texto que identifica cada campo.
<input type="number">
Permite ingresar únicamente números para la circunferencia.
<input type="button">
Ejecuta la función calcular() cuando el usuario hace clic.
<input type="reset">
Limpia todos los campos del formulario.
<input type="text">
Muestra el resultado del cálculo.

Explicación de cada línea del código JavaScript

function calcular(){
Crea una función llamada calcular, que se ejecuta cuando se presiona el botón Calcular.
let circunferencia = parseFloat(...);
Obtiene el valor escrito por el usuario y lo convierte en un número decimal.
let radio = circunferencia / (2 * Math.PI);
Calcula el radio utilizando la fórmula matemática: Radio = Circunferencia ÷ (2 × π).

Math.PI representa el valor de π (3.1416 aproximadamente).
if(radio <= 50){
Verifica si el radio es menor o igual a 50 centímetros.
resultado.value = radio.toFixed(2) + " cm";
Si la condición es verdadera, muestra el radio con dos decimales y agrega la unidad "cm".
else{
Se ejecuta cuando el radio es mayor a 50 centímetros.
resultado.value = "El radio no sede a los 50 cm";
Muestra un mensaje indicando que el radio supera los 50 cm.
}
Finaliza la estructura condicional y la función.

Resumen del funcionamiento

El usuario escribe el valor de la circunferencia.
Al hacer clic en Calcular, se ejecuta la función calcular().
El programa calcula el radio usando la fórmula matemática.
Comprueba si el radio es menor o igual a 50 cm.
Si cumple la condición, muestra el radio.
Si no la cumple, muestra un mensaje indicando que el radio supera los 50 cm.

Ejercicios de programación

Páginas

lunes, 29 de junio de 2026

Calcular el radio de una circunferencia y que la imprima solo si el radio sede a los 50 cm en HTML y JavaScript