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 triángulo</h3>
    <form action="">
        <label for="">lado1:</label>
        <input type="number" id="lado1"><br><br>
        <label for="">lado2:</label>
        <input type="number" id="lado2"><br><br>
        <label for="">lado3:</label>
        <input type="number" id="lado3"><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 lado1 = parseFloat(document.getElementById('lado1').value);
            let lado2 = parseFloat(document.getElementById('lado2').value);
            let lado3 = parseFloat(document.getElementById('lado3').value);
            let perimetro = lado1 + lado2 + lado3;
            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.
parseFloat() --> analiza un argumento (si es necesario, lo convierte en una cadena) y devuelve un número de coma flotante.
function --> es un bloque de código diseñado para realizar una tarea en particular.
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 triángulo ingresando las medidas de sus tres lados.

1. Estructura básica del documento

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

Estas líneas indican que el documento está desarrollado en HTML5 y que el idioma principal de la página es español.

2. Configuración del encabezado

La primera etiqueta permite utilizar caracteres especiales y la segunda hace que la página sea adaptable a celulares, tablets y computadoras.

3. Título del ejercicio

<h3>Calcular el perímetro de un triángulo</h3>

Muestra el título principal que verá el usuario en la página.

4. Campos de entrada

Estos campos permiten ingresar los tres lados del triángulo. El atributo type="number" permite introducir únicamente números.

5. Botones del formulario

Calcular: ejecuta la función JavaScript.
Limpiar: borra todos los datos ingresados.

6. Obtener los valores ingresados

let lado1 = parseFloat(document.getElementById('lado1').value);
let lado2 = parseFloat(document.getElementById('lado2').value);
let lado3 = parseFloat(document.getElementById('lado3').value);

Estas instrucciones capturan los valores escritos por el usuario y los convierten a números decimales mediante la función parseFloat().

7. Cálculo del perímetro

let perimetro = lado1 + lado2 + lado3;

El perímetro de un triángulo se obtiene sumando la longitud de sus tres lados.

8. Mostrar el resultado

document.getElementById('resultado').value = `${perimetro} cm`;

El resultado calculado se muestra en el campo de texto llamado resultado junto con la unidad de medida "cm".

Resumen

El usuario ingresa los tres lados del triángulo.
Presiona el botón Calcular.
JavaScript obtiene los valores ingresados.
Se suman los tres lados para obtener el perímetro.
El resultado se muestra en centímetros.

Ejercicios de programación

Páginas

jueves, 18 de junio de 2026

Calcular el perímetro de un triángulo en HTML y JavaScript