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>Determinar cuál es el número mayor 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="Mostrar" onclick="mostrar()">
        <input type="reset" value="Limpiar"><br><br>
        <label for="">resultado:</label>
        <input type="text" id="resultado">
    </form>
    <script>
        function mostrar(){
            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);
            if(n1 >= n2 && n1 >= n3 && n1 >= n4){
                document.getElementById('resultado').value = `El número mayor es ${n1}`;
            }else if(n2 >= n1 && n2 >= n3 && n2 >= n4){
                document.getElementById('resultado').value = `El número mayor es ${n2}`;
            }else if(n3 >= n1 && n3 >= n2 && n3 >= n4){
                document.getElementById('resultado').value = `El número mayor es ${n3}`;
            }else{
                document.getElementById('resultado').value = `El número mayor es ${n4}`;
            }
        }
    </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 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.
>= --> 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.
&& --> el operador lógico AND ( && ) (conjunción lógica) para un conjunto de operandos booleanos será true si y solo si todos los operandos son true. De lo contrario será false.
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 al navegador que el documento está escrito utilizando HTML5.

2. Etiqueta HTML

Es la etiqueta principal del documento y establece que el idioma de la página es español.

3. Sección <head>

Contiene información importante para el navegador, como la codificación, el diseño adaptable y el título de la página.

4. Título del ejercicio

<h3>Determinar cuál es el número mayor de cuatro números</h3>

Muestra el nombre del ejercicio en la página web.

5. Formulario

Agrupa todos los controles del ejercicio: cajas de texto, botones y resultado.

6. Cajas de entrada

Permiten que el usuario escriba cuatro números. Cada caja posee un identificador (id) para que JavaScript pueda acceder a ella.

7. Botón Mostrar

onclick="mostrar()"

Cuando el usuario hace clic en el botón, se ejecuta la función mostrar().

8. Botón Limpiar

Borra todos los datos escritos en el formulario.

9. Caja de resultado

Aquí se mostrará cuál es el número mayor.

10. Función mostrar()

function mostrar(){ }

Es la función principal del programa. Se ejecuta cuando el usuario pulsa el botón Mostrar.

11. Obtener los números

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

document.getElementById() busca la caja de texto mediante su identificador.

.value obtiene el dato escrito por el usuario.

parseInt() convierte el texto en un número entero para poder realizar comparaciones.

Este mismo proceso se realiza con n2, n3 y n4.

12. Primera condición

if(n1 >= n2 && n1 >= n3 && n1 >= n4)

Comprueba si el primer número es mayor o igual que los otros tres. Si la condición es verdadera, entonces n1 es el número mayor.

13. Segunda condición

else if(n2 >= n1 && n2 >= n3 && n2 >= n4)

Si la primera condición no se cumple, se verifica si el segundo número es el mayor.

14. Tercera condición

else if(n3 >= n1 && n3 >= n2 && n3 >= n4)

Si las dos condiciones anteriores son falsas, se comprueba si el tercer número es el mayor.

15. Caso contrario

else

Si ninguno de los tres primeros números es el mayor, automáticamente el cuarto número (n4) será el mayor.

16. Mostrar el resultado

document.getElementById('resultado').value = `El número mayor es ${n1}`;

Escribe el mensaje en la caja de texto resultado.

La expresión ${n1} inserta el valor del número mayor dentro del mensaje.

Resumen del funcionamiento

El usuario ingresa cuatro números.
Al pulsar el botón Mostrar, se ejecuta la función mostrar().
JavaScript obtiene los cuatro valores ingresados.
Compara los números mediante las instrucciones if y else if.
Identifica cuál es el número mayor.
Finalmente muestra el resultado en la caja de texto.

Ejercicios de programación

Páginas

martes, 23 de junio de 2026

Determinar cuál es el número mayor de cuatro números en HTML y JavaScript