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 un círculo</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">
    </form>
    <script>
        function calcular(){
            let circunferencia = parseFloat(document.getElementById('circunferencia').value);
            let radio = circunferencia / (2 * Math.PI);
            document.getElementById('resultado').value = `${radio.toFixed(2)} 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.
.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:

Este programa permite calcular el radio de un círculo a partir de la longitud de su circunferencia. El usuario introduce el valor de la circunferencia, presiona el botón Calcular y el programa muestra el radio obtenido mediante una fórmula matemática.

Explicación de cada parte del código

<!DOCTYPE html>
Indica que el documento utiliza la versión HTML5.
<html lang="es">
Es el elemento principal de la página y especifica que el contenido está en español.
<head>
Contiene información del documento, como la codificación de caracteres y el título de la página.
<meta charset="UTF-8">
Permite mostrar correctamente caracteres especiales como letras con tilde y la letra ñ.
<meta name="viewport">
Hace que la página sea adaptable a dispositivos móviles.
<title>
Define el nombre que aparece en la pestaña del navegador.
<body>
Contiene todos los elementos visibles de la página.
<h3>Calcular el radio de un círculo</h3>
Muestra el título del ejercicio.
<form>
Agrupa todos los controles del formulario.
<label>
Muestra el texto Circunferencia:, indicando el dato que debe ingresar el usuario.
<input type="number" id="circunferencia">
Permite ingresar la longitud de la circunferencia. Su identificador es circunferencia.
<input type="button">
Crea el botón Calcular, que ejecuta la función calcular().
<input type="reset">
Limpia todos los campos del formulario.
<input type="text" id="resultado">
Muestra el resultado obtenido después del cálculo.
<script>
Contiene el código JavaScript encargado de realizar el cálculo.
function calcular()
Define una función llamada calcular, que se ejecuta al hacer clic en el botón Calcular.
parseFloat()
Convierte el valor ingresado por el usuario en un número decimal.
document.getElementById('circunferencia').value
Obtiene el valor escrito en la caja de texto de la circunferencia.
let radio = circunferencia / (2 * Math.PI);
Calcula el radio utilizando la fórmula:
Radio = Circunferencia ÷ (2 × π)
El valor Math.PI representa el número π (3.14159...).
radio.toFixed(2)
Redondea el resultado a dos cifras decimales.
document.getElementById('resultado').value
Muestra el radio calculado dentro de la caja de texto resultado junto con la unidad cm.

Resumen del funcionamiento

El usuario escribe la longitud de la circunferencia.
Hace clic en el botón Calcular.
JavaScript obtiene el valor ingresado.
Calcula el radio utilizando la fórmula Radio = Circunferencia ÷ (2 × π).
Redondea el resultado a dos decimales.
Muestra el radio calculado en centímetros.

Ejercicios de programación

Páginas

lunes, 29 de junio de 2026

Calcular el radio de un círculo en HTML y JavaScript

Código del ejercicio:

Definición de los códigos del ejercicio:

Explicación del Código:

Explicación de cada parte del código

Resumen del funcionamiento

No hay comentarios.:

Publicar un comentario

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