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 hexá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 * 6; 
            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. Declaración del documento

<!DOCTYPE html>

Indica que el documento está escrito en HTML5.

2. Etiqueta HTML

<html lang="es">

Es el inicio del documento HTML y lang="es" indica que el idioma de la página es español.

3. Sección <head>

<meta charset="UTF-8">

Permite mostrar correctamente caracteres como la ñ y las vocales con tilde.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Hace que la página sea adaptable a celulares y tablets.

<title>Ejercicio HTML y JavaScript</title>

Es el título que aparece en la pestaña del navegador.

4. Título de la página

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

Muestra el título principal del ejercicio.

5. Formulario

<form action="">

Crea el formulario donde el usuario ingresará los datos.

<label>Lado:</label>

Muestra el texto Lado:.

<input type="number" id="lado">

Permite ingresar la longitud del lado del hexágono. type="number" solo acepta números y id="lado" identifica el elemento.

6. Botones

<input type="button" value="Calcular" onclick="calcular()">

Ejecuta la función calcular() cuando el usuario hace clic.

<input type="reset" value="Limpiar">

Limpia el formulario.

7. Resultado

<input type="text" id="resultado">

Muestra el perímetro calculado.

8. Función calcular()

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

function calcular(): crea una función llamada calcular.
document.getElementById('lado'): busca el campo donde el usuario escribió el lado.
.value: obtiene el valor escrito.
parseFloat(): convierte el texto en un número decimal.
lado * 6: calcula el perímetro del hexágono.
document.getElementById('resultado').value: muestra el resultado en la caja de texto.

9. Funcionamiento del programa

El usuario escribe la medida del lado.
Presiona el botón Calcular.
JavaScript obtiene el valor ingresado.
Multiplica el lado por 6.
Muestra el perímetro en centímetros.
El botón Limpiar borra los datos del formulario.

Ejercicios de programación

Páginas

jueves, 10 de abril de 2025

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