jueves, 10 de abril de 2025

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

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 noná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:

1. Estructura HTML

  • <!DOCTYPE html>: Indica que el documento usa HTML5.
  • <html lang="es">: El idioma de la página es español.

2. Encabezado <head>

  • <meta charset="UTF-8">: Permite mostrar correctamente caracteres especiales como la ñ o tildes.
  • <meta http-equiv="X-UA-Compatible" content="IE=edge">: Mejora compatibilidad con navegadores antiguos.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Hace que la página se vea bien en celulares y tablets.
  • <title>: Título que aparece en la pestaña del navegador.

3. Cuerpo <body>

  • <h3>: Título que indica la función de la página.
  • <form>: Contenedor del formulario.
  • <input type="number" id="lado">: Caja para ingresar el valor del lado del nonágono.
  • <input type="button" onclick="calcular()">: Botón para ejecutar el cálculo.
  • <input type="reset">: Botón para limpiar los campos del formulario.
  • <input type="text" id="resultado">: Muestra el resultado del cálculo.

4. Código JavaScript


<script>
    function calcular(){
        let lado = parseFloat(document.getElementById('lado').value);
        let perimetro = lado * 9; 
        document.getElementById('resultado').value = `${perimetro} cm`;  
    }
</script>
  
  • function calcular(): Define una función para hacer el cálculo.
  • parseFloat(...): Convierte el valor ingresado en número decimal.
  • lado * 9: Multiplica el valor por 9, porque un nonágono tiene 9 lados.
  • document.getElementById('resultado').value: Muestra el resultado en el campo de texto.

No hay comentarios.:

Publicar un comentario

Ingresar un número entero y mostrar todos los números impares hasta el número ingresado en Python

Código del ejercicio: Con ciclo while numero = int ( input ( "Ingresar un número: " )) if numero ...

Copyright ©2025 Ejercicios de programación. Todos los derechos reservados. ❤️