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 tres notas y mostrar un mensaje si aprobó o réprobo</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>
        <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 promedio = Math.round((n1 + n2 + n3) / 3);
            if(promedio >= 50){
                document.getElementById('resultado').value = `${promedio} aprobó.`;
            }else{
                document.getElementById('resultado').value = `${promedio} réprobo.`;
            }
        }
    </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.
if --> se usa para especificar un bloque de código que se ejecutará, si una condición especificada es verdadera.
else --> se usa para especificar un bloque de código a ejecutar, si la misma condición es falsa.
>= --> el operador mayor que o igual ( >= ) devuelve true si el operando izquierdo es mayor o igual que el operando derecho, y en false caso contrario.
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 tres notas al usuario, calcula el promedio de ellas y, finalmente, muestra un mensaje indicando si el estudiante aprobó o reprobó.

1. Estructura HTML

<!DOCTYPE html>

Indica que el documento está escrito en HTML5.

Define el inicio de la página web y especifica que el idioma es español.

<head>

Contiene información de la página, como el título y la configuración del documento.

Permite mostrar correctamente caracteres especiales como la ñ y las tildes.

Hace que la página se adapte correctamente a celulares, tablets y computadoras.

<title>Ejercicio HTML y JavaScript</title>

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

2. Título del ejercicio

<h3>Sacar el promedio de tres notas y mostrar un mensaje si aprobó o reprobó</h3>

Muestra el nombre del ejercicio en la página.

3. Formulario

<form>

Agrupa todos los controles del formulario.

4. Cajas para ingresar las notas

Permite ingresar la primera nota.

Permite ingresar la segunda nota.

Permite ingresar la tercera nota.

El atributo type="number" solo acepta números y el atributo id identifica cada caja para utilizarla desde JavaScript.

5. Botón Calcular

Al hacer clic, ejecuta la función calcular(), que realiza todas las operaciones.

6. Botón Limpiar

Borra los datos ingresados en el formulario.

7. Caja del resultado

Aquí se muestra el promedio junto con el mensaje de aprobación o reprobación.

Explicación del código JavaScript

8. Función calcular()

function calcular(){

Define una función llamada calcular. Todo el código que está dentro de ella se ejecuta cuando el usuario presiona el botón Calcular.

9. Obtener la primera nota

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

Busca la primera caja de texto mediante su id, obtiene el valor escrito por el usuario y lo convierte en un número entero utilizando parseInt().

10. Obtener la segunda nota

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

Obtiene la segunda nota y la convierte en un número entero.

11. Obtener la tercera nota

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

Obtiene la tercera nota y la convierte en un número entero.

12. Calcular el promedio

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

Suma las tres notas, divide el resultado entre 3 y utiliza Math.round() para redondear el promedio al número entero más cercano.

13. Verificar si aprobó o reprobó

if(promedio >= 50){

Comprueba si el promedio es mayor o igual a 50.

Si la condición es verdadera, significa que el estudiante aprobó.

document.getElementById('resultado').value = `${promedio} aprobó.`;

Muestra el promedio y el mensaje "aprobó" en la caja de resultado.

14. Si no aprobó

else{

Se ejecuta cuando el promedio es menor a 50.

document.getElementById('resultado').value = `${promedio} reprobó.`;

Muestra el promedio junto con el mensaje "reprobó".

Resumen del funcionamiento

El usuario escribe tres notas.
Al presionar Calcular, se ejecuta la función calcular().
JavaScript obtiene las tres notas.
Suma las notas y calcula el promedio.
Redondea el promedio al entero más cercano.
Si el promedio es mayor o igual a 50, muestra "aprobó".
Si el promedio es menor a 50, muestra "reprobó".
El resultado aparece en la última caja de texto.

Ejercicios de programación

Páginas

martes, 23 de junio de 2026

Sacar el promedio de tres notas y mostrar un mensaje si aprobó o réprobo en HTML y JavaScript