Cómo Determinar el Número Mayor en JavaScript: Operadores de Comparación

En JavaScript, podemos comparar números usando operadores de comparación, que nos permiten determinar si un número es mayor, menor o igual que otro. Estos operadores son fundamentales en la programación para tomar decisiones lógicas.

📌 Operadores de Comparación en JavaScript

Los principales operadores para comparar números son:

Operador	Descripción	Ejemplo
`>`	Mayor que	`5 > 3` → `true`
`<`	Menor que	`2 < 4` → `true`
`>=`	Mayor o igual que	`5 >= 5` → `true`
`<=`	Menor o igual que	`3 <= 2` → `false`
`==`	Igualdad (sin tipo estricto)	`"5" == 5` → `true`
`===`	Igualdad estricta (con tipo)	`"5" === 5` → `false`

📌 Ejemplo: Determinar el Número Mayor

Vamos a mejorar el código proporcionado para que compare dos números y muestre cuál es el mayor, el menor o si son iguales.

🔹 Código HTML y JavaScript

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Comparar dos números</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
        }
        input, button {
            padding: 8px;
            margin: 5px 0;
        }
        #mensaje {
            font-weight: bold;
            margin-top: 10px;
            padding: 10px;
            background-color: #f0f0f0;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <h1>Comparar dos números</h1>
    <form id="compareForm">
        <label for="num1">Primer número:</label>
        <input type="number" id="num1" name="num1" required>
        <br>
        <label for="num2">Segundo número:</label>
        <input type="number" id="num2" name="num2" required>
        <br>
        <button type="submit">Comparar</button>
    </form>
    <p id="mensaje"></p>

    <script>
        const form = document.getElementById("compareForm");

        form.addEventListener("submit", function(event) {
            event.preventDefault(); // Evita que se recargue la página

            // Obtenemos los valores y los convertimos a números
            const num1 = Number(document.getElementById("num1").value);
            const num2 = Number(document.getElementById("num2").value);

            let resultado;

            // Comparamos los números
            if (num1 > num2) {
                resultado = `${num1} es mayor que ${num2}`;
            } else if (num1 < num2) {
                resultado = `${num2} es mayor que ${num1}`;
            } else {
                resultado = "Ambos números son iguales";
            }

            // Mostramos el resultado
            document.getElementById("mensaje").textContent = resultado;
        });
    </script>
</body>
</html>

📌 Explicación del Código

HTML:
- Creamos un formulario con dos campos de entrada (num1 y num2).
- Un botón que al presionarse ejecuta la comparación.
- Un párrafo (<p id="mensaje">) para mostrar el resultado.
JavaScript:
- Usamos event.preventDefault() para evitar que el formulario recargue la página.
- Convertimos los valores de los inputs a números con Number().
- Usamos condiciones (if, else if, else) para comparar los números.
- Mostramos el resultado en el párrafo #mensaje.

📌 Posibles Mejoras

Validación de entrada: Verificar que los campos no estén vacíos.
Manejo de decimales: Usar parseFloat() si se esperan números con decimales.
Estilos mejorados: Usar Bootstrap o CSS para mejorar la apariencia.

✅ Conclusión

Este ejemplo demuestra cómo usar operadores de comparación en JavaScript para determinar cuál de dos números es mayor. Es útil en aplicaciones donde necesitamos tomar decisiones basadas en valores numéricos, como en calculadoras, sistemas de puntuación o filtros de datos.

Buscar este blog

SOTELO-javascript