martes, 23 de junio de 2026

Determinar cuál es el número menor de tres números en HTML y JavaScript

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 menor de tres 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>
        <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);
            if(n1 <= n2 && n1 <= n3){
                document.getElementById('resultado').value = `El número menor es ${n1}`;
            }else if(n2 <= n1 && n2 <= n3){
                document.getElementById('resultado').value = `El número menor es ${n2}`;
            }else{
                document.getElementById('resultado').value = `El número menor es ${n3}`;
            }
        }
    </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:

Este programa permite ingresar tres números desde el teclado. Cuando el usuario presiona el botón Mostrar, JavaScript compara los tres valores y determina cuál de ellos es el menor. Finalmente, el resultado se muestra en una caja de texto.


1. Declaración de la función

function mostrar(){

Se crea una función llamada mostrar(). Esta función se ejecuta cuando el usuario hace clic en el botón Mostrar.


2. Obtener el primer número

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

Esta línea obtiene el valor escrito en el primer cuadro de texto, lo convierte en un número entero mediante parseInt() y lo almacena en la variable n1.


3. Obtener el segundo número

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

Se obtiene el valor del segundo cuadro de texto, se convierte en un número entero y se guarda en la variable n2.


4. Obtener el tercer número

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

Se obtiene el valor del tercer cuadro de texto, se convierte en un número entero y se almacena en la variable n3.


5. Comparar si el primer número es el menor

if(n1 <= n2 && n1 <= n3){

La estructura if verifica si el primer número es menor o igual que el segundo y también menor o igual que el tercero. Si ambas condiciones son verdaderas, significa que n1 es el número menor.


6. Mostrar el primer número

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

Se muestra el mensaje indicando que el primer número es el menor dentro de la caja de texto llamada resultado.


7. Comparar si el segundo número es el menor

else if(n2 <= n1 && n2 <= n3){

Si el primer número no era el menor, el programa verifica si el segundo número es menor o igual que los otros dos.


8. Mostrar el segundo número

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

Si la condición anterior se cumple, se muestra el segundo número como el menor.


9. Mostrar el tercer número

else{ document.getElementById('resultado').value = `El número menor es ${n3}`; }

Si ninguna de las condiciones anteriores es verdadera, significa que el tercer número es el menor. Por eso se muestra en la caja de resultado.


10. Cierre de la función

}

La llave de cierre indica que la función mostrar() ha finalizado.


Resumen del funcionamiento

  1. El usuario ingresa tres números.
  2. JavaScript obtiene los tres valores.
  3. Los convierte en números enteros utilizando parseInt().
  4. Compara los tres números mediante las estructuras if, else if y else.
  5. Determina cuál es el número menor.
  6. Finalmente, muestra el resultado en la caja de texto correspondiente.

No hay comentarios.:

Publicar un comentario

Eliminar un carácter x de una cadena en HTML y JavaScript

Código del ejercicio: <! DOCTYPE html > < html lang = "es" > < head >     < meta charset ...

Copyright ©2025 Ejercicios de programación. Todos los derechos reservados. ❤️