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 área de un nonágono</h3>
    <form action="">
        <label for="">perímetro:</label>
        <input type="number" id="perimetro"><br><br>
        <label for="">apotema:</label>
        <input type="number" id="apotema"><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 perimetro = parseFloat(document.getElementById('perimetro').value);
            let apotema = parseFloat(document.getElementById('apotema').value);
            let area = (perimetro * apotema) / 2;
            document.getElementById('resultado').value = `Área: ${area} 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 área de un nonágono regular utilizando el perímetro y el apotema ingresados por el usuario.

La fórmula utilizada es:

Área = (Perímetro × Apotema) / 2

Explicación del código HTML

1. Estructura principal del documento

<!DOCTYPE html>
<html lang="es">

<!DOCTYPE html> indica que el documento utiliza HTML5.

<html lang="es"> especifica que la página está escrita en español.

2. Encabezado de la página

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ejercicio HTML y JavaScript</title>
</head>

charset="UTF-8": permite mostrar caracteres especiales correctamente.
viewport: adapta la página a dispositivos móviles.
title: establece el título de la pestaña del navegador.

3. Título del ejercicio

<h3>Calcular el área de un nonágono</h3>

Muestra el nombre del ejercicio en la página.

4. Campos de entrada

Estos campos permiten ingresar:

El perímetro del nonágono.
El apotema del nonágono.

El atributo id permite identificar cada campo desde JavaScript.

5. Botón Calcular

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

6. Botón Limpiar

Borra todos los datos escritos en el formulario.

7. Campo Resultado

Muestra el área calculada del nonágono.

Explicación del código JavaScript

1. Creación de la función

function calcular() { }

Define una función llamada calcular, que se ejecutará al presionar el botón "Calcular".

2. Obtener el perímetro

let perimetro = parseFloat( document.getElementById('perimetro').value );

Obtiene el valor escrito en el campo perímetro y lo convierte a número decimal.

3. Obtener el apotema

let apotema = parseFloat( document.getElementById('apotema').value );

Obtiene el valor escrito en el campo apotema y lo convierte a número decimal.

4. Calcular el área

let area = (perimetro * apotema) / 2;

Aplica la fórmula matemática del área de un nonágono regular:

Área = (Perímetro × Apotema) / 2

5. Mostrar el resultado

document.getElementById('resultado').value = `Área: ${area} cm²`;

Muestra el resultado final dentro del cuadro de texto de salida.

Resumen

El usuario ingresa el perímetro y el apotema del nonágono. Luego presiona el botón Calcular. JavaScript obtiene los datos, aplica la fórmula (Perímetro × Apotema) ÷ 2 y finalmente muestra el área calculada en pantalla.

Ejercicios de programación

Páginas

miércoles, 9 de abril de 2025

Calcular el área de un nonágono en HTML y JavaScript