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>Sacar el promedio de cuatro números</h3>
    <form action="">
        <label for="">número 1:</label>
        <input type="number" id="n1"><br><br>
        <label for="">número 2:</label>
        <input type="number" id="n2"><br><br>
        <label for="">número 3:</label>
        <input type="number" id="n3"><br><br>
        <label for="">número 4:</label>
        <input type="number" id="n4"><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 n1 = parseInt(document.getElementById('n1').value);
            let n2 = parseInt(document.getElementById('n2').value);
            let n3 = parseInt(document.getElementById('n3').value);
            let n4 = parseInt(document.getElementById('n4').value);
            let promedio = Math.round((n1 + n2 + n3 + n4) / 4);
            document.getElementById('resultado').value = `El promedio es ${promedio}`;
        }
    </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.
function --> es un bloque de código diseñado para realizar una tarea en particular.
let --> permite declarar variables limitando su alcance (scope) al bloque, declaración, o expresión donde se está usando.
parseInt() --> analiza un valor como una cadena y devuelve el primer entero.
Math.round() --> redondea un número al entero más cercano.
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 solicita cuatro números al usuario mediante un formulario en HTML. Después, JavaScript obtiene esos valores, calcula el promedio de los cuatro números y muestra el resultado en una caja de texto.

1. <!DOCTYPE html>

Indica que el documento utiliza la versión HTML5.

2. <html lang="es">

Inicia el documento HTML e indica que el idioma del contenido es español.

3. <head>

Contiene la configuración de la página, como la codificación de caracteres, el diseño adaptable y el título del documento.

4. <body>

Aquí se encuentra todo el contenido visible de la página: el formulario, los botones y el resultado.

5. Título del ejercicio

<h3>Sacar el promedio de cuatro números</h3>

Muestra el título que identifica el ejercicio.

6. Formulario

Agrupa todos los controles donde el usuario ingresa los datos.

7. Etiquetas (label)

<label>Número 1:</label>

Muestran el nombre de cada campo para que el usuario sepa qué dato debe escribir.

8. Cajas de texto

Permiten ingresar únicamente números. Cada caja tiene un identificador (id) diferente para que JavaScript pueda obtener su contenido.

9. Botón Calcular

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

10. Botón Limpiar

Borra todos los datos escritos en el formulario.

11. Caja de resultado

Muestra el promedio calculado por el programa.

12. Función calcular()

function calcular(){ }

Es la función que realiza todo el proceso del cálculo del promedio.

13. Obtener los números

let n1 = parseInt(document.getElementById('n1').value);

document.getElementById() busca el campo mediante su identificador.

.value obtiene el valor escrito por el usuario.

parseInt() convierte ese valor en un número entero.

14. Calcular el promedio

let promedio = Math.round((n1+n2+n3+n4)/4);

Primero suma los cuatro números.

Luego divide el resultado entre cuatro para obtener el promedio.

Finalmente, Math.round() redondea el resultado al entero más cercano.

15. Mostrar el resultado

document.getElementById('resultado').value = `El promedio es ${promedio}`;

Escribe el promedio obtenido dentro de la caja de texto del resultado.

Resumen del funcionamiento

El usuario escribe cuatro números.
Hace clic en Calcular.
JavaScript obtiene los cuatro valores.
Los convierte en números enteros.
Suma los cuatro números.
Divide la suma entre cuatro.
Redondea el promedio.
Muestra el resultado en la caja de texto.

Ejercicios de programación

Páginas

miércoles, 24 de junio de 2026

Sacar el promedio de cuatro números en HTML y JavaScript