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 perímetro de un eneágono</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 perimetro = lado * 9; 
            document.getElementById('resultado').value = `${perimetro} 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 calcular el perímetro de un eneágono regular. El usuario introduce la medida de un lado, presiona el botón Calcular y el sistema muestra automáticamente el resultado.

1. Título del ejercicio

<h3>Calcular el perímetro de un eneágono</h3>

Esta línea muestra el título principal del ejercicio en la página web.

2. Campo para ingresar el lado

El usuario introduce la longitud de un lado del eneágono. El atributo id="lado" permite que JavaScript pueda leer ese valor.

3. Botón Calcular

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

4. Botón Limpiar

Este botón elimina los datos ingresados y limpia el formulario.

5. Campo de resultado

<label>resultado:</label>
<input type="text" id="resultado">

Aquí se muestra el perímetro calculado por el programa.

6. Función JavaScript

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

Esta función realiza el cálculo del perímetro del eneágono.

document.getElementById('lado').value obtiene el número ingresado por el usuario.
parseFloat() convierte el valor ingresado en un número decimal.
let perimetro = lado * 9; calcula el perímetro multiplicando la longitud del lado por 9.
document.getElementById('resultado').value muestra el resultado en la caja de texto.

7. Fórmula utilizada

Perímetro = lado × 9

Un eneágono regular tiene 9 lados iguales, por eso se multiplica la medida de un lado por 9.

8. Ejemplo práctico

Lado = 5 cm
Perímetro = 5 × 9 = 45 cm

Si el usuario introduce 5 cm como longitud del lado, el programa mostrará como resultado: 45 cm.

Ejercicios de programación

Páginas

jueves, 10 de abril de 2025

Calcular el perímetro de un eneágono en HTML y JavaScript