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>Pedir un número y luego ordenar de menor a mayor los dígitos</h3>
    <form action="">
        <label for="">número:</label>
        <input type="number" id="n"><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 n = parseInt(document.getElementById('n').value);
            let ac = 0, c = 0, r = 0, aux = 0;
            while(c <= 9){
                aux = n;
                while(aux > 0){
                    r = aux % 10;
                    if(r == c){
                        ac = (ac * 10) + r;
                    }
                    aux = (aux - r) / 10;
                }
                c++;
            }
            document.getElementById('resultado').value = ac;
        }
    </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.
while --> el ciclo while recorre un bloque de código siempre que una condición específica sea verdadera.
if --> se usa para especificar un bloque de código que se ejecutará, si una condición especificada es verdadera.
<= --> el operador menor o igual ( <= ) devuelve true si el operando izquierdo es menor o igual que el operando derecho, y en false caso contrario.
> --> el operador mayor que ( > ) devuelve true si el operando izquierdo es mayor que el operando derecho.
% --> el operador de modulo ( % ) devuelve el resto de la división.
== --> el operador de comparacion ( == ) comprueba si sus dos operandos son iguales y devuelve un resultado booleano.
++ --> el operador de incremento ( ++ ) incrementa (suma uno a) su operando y devuelve un valor.
document.getElementById() --> devuelve un elemento con un valor especificado.
.value --> establece o devuelve el valor del atributo de valor de un campo de texto.

Explicación del Código:

Este programa solicita al usuario un número entero y luego ordena sus dígitos desde el menor hasta el mayor. Finalmente, muestra el número ordenado en la caja de resultado.

1. Función mostrar()

function mostrar(){ }

La función mostrar() contiene todo el proceso del programa. Se ejecuta cuando el usuario hace clic en el botón Mostrar.

2. Obtener el número ingresado

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

Se obtiene el valor escrito por el usuario en la caja de texto cuyo identificador es n. Luego, parseInt() convierte ese valor en un número entero para poder realizar operaciones matemáticas.

3. Declaración de variables

let ac = 0, c = 0, r = 0, aux = 0;

ac: almacena el número ordenado.
c: representa el dígito que se está buscando, desde 0 hasta 9.
r: guarda el último dígito extraído del número.
aux: es una copia del número original para recorrer sus dígitos.

4. Recorrer los números del 0 al 9

while(c <= 9){ ... c++; }

Este ciclo recorre todos los dígitos desde el 0 hasta el 9. Así, primero busca todos los ceros, luego los unos, después los doses y continúa hasta llegar al nueve. Gracias a este proceso, el resultado queda ordenado de menor a mayor.

5. Copiar el número

aux = n;

Se copia el número ingresado en la variable aux. De esta forma se pueden recorrer todos sus dígitos sin modificar el número original.

6. Recorrer los dígitos del número

while(aux > 0){ ... }

Este ciclo extrae uno por uno los dígitos del número hasta que ya no quede ninguno.

7. Obtener el último dígito

r = aux % 10;

El operador % obtiene el residuo de la división entre 10. Ese residuo corresponde al último dígito del número.

Ejemplo: 548 % 10 = 8

8. Verificar el dígito encontrado

if(r == c){ ac = (ac * 10) + r; }

Si el dígito extraído es igual al valor de c, significa que se encontró el número que se está buscando y se agrega al resultado almacenado en ac.

9. Eliminar el último dígito

aux = (aux - r) / 10;

Después de utilizar el último dígito, este se elimina para continuar revisando el siguiente.

Ejemplo: 548 Último dígito = 8 (548 - 8) / 10 = 54

10. Mostrar el resultado

document.getElementById('resultado').value = ac;

Cuando termina el proceso, el número ordenado se muestra en la caja de texto cuyo identificador es resultado.

Ejemplo de funcionamiento

Número ingresado: 583421
Dígitos encontrados: 1, 2, 3, 4, 5 y 8.
Resultado mostrado: 123458.

Resumen

El algoritmo recorre los números del 0 al 9. Para cada uno de ellos revisa todos los dígitos del número ingresado. Cuando encuentra un dígito igual al que está buscando, lo agrega al resultado. Como la búsqueda se realiza de menor a mayor, el número final queda ordenado correctamente en forma ascendente.

Ejercicios de programación

Páginas

domingo, 28 de junio de 2026

Pedir un número y luego ordenar de menor a mayor los dígitos en HTML y JavaScript