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 la nota final y mostrar un mensaje de acuerdo a su nota</h3>
    <form action="">
        <label for="">nota 1:</label>
        <input type="number" id="nota1"><br><br>
        <label for="">nota 2:</label>
        <input type="number" id="nota2"><br><br>
        <label for="">nota 3:</label>
        <input type="number" id="nota3"><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" size="25">
    </form>
    <script>
        function calcular(){
            let nota1 = parseInt(document.getElementById('nota1').value);
            let nota2 = parseInt(document.getElementById('nota2').value);
            let nota3 = parseInt(document.getElementById('nota3').value);
            let notaFinal = Math.round((nota1 + nota2 + nota3) / 3);
            if(notaFinal == 100){
                document.getElementById('resultado').value = `${notaFinal} usted es un Nerd.`;
            }else if(notaFinal >= 75){
                document.getElementById('resultado').value = `${notaFinal} su nota es Excelente.`;
            }else if(notaFinal >= 50){
                document.getElementById('resultado').value = `${notaFinal} usted Aprobó.`;
            }else if(notaFinal >= 36){
                document.getElementById('resultado').value = `${notaFinal} usted entra a Repechaje.`;
            }else{
                document.getElementById('resultado').value = `${notaFinal} usted 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.
Math.round() --> redondea un número al entero más cercano.
== --> el operador de comparacion ( == ) comprueba si sus dos operandos son iguales y devuelve un resultado booleano.
>= --> 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.
if --> se usa para especificar un bloque de código que se ejecutará, si una condición especificada es verdadera.
else if --> se usa para especificar una nueva condición para probar, si la primera condición es falsa.
else --> se usa para especificar un bloque de código a ejecutar, si la misma condición es falsa.
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:

🔹 HTML (Estructura)

El HTML crea un formulario con tres campos para ingresar notas. También tiene un botón para calcular el promedio y un campo para mostrar el resultado. Cada input tiene un id para poder ser usado en JavaScript.

🔹 Inputs (Notas)

Se usan tres campos de tipo number: nota1, nota2 y nota3. Estos permiten ingresar valores numéricos.

🔹 JavaScript (Cálculo)

El JavaScript toma los valores ingresados, los convierte a números con parseInt(), y luego calcula el promedio usando la fórmula: (nota1 + nota2 + nota3) / 3. Después usa Math.round() para redondear el resultado.

🔹 Condiciones (if - else)

Dependiendo del resultado, se muestra un mensaje:

✔ 100 → Nerd
✔ ≥ 75 → Excelente
✔ ≥ 50 → Aprobó
✔ ≥ 36 → Repechaje
✔ < 36 → Reprobó

🔹 Resultado

El resultado final se muestra en un input de texto, combinando el promedio y el mensaje correspondiente.

Ejercicios de programación

Páginas

lunes, 22 de junio de 2026

Sacar la nota final y mostrar un mensaje de acuerdo a su nota en HTML y JavaScript