Código del ejercicio:
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 menor o igual ( <= ) devuelve true si el operando izquierdo es menor 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 HTML
<!DOCTYPE html>Indica que el documento está escrito en HTML5 para que el navegador interprete correctamente el código.
2. Etiqueta HTML
<html lang="es">
Contiene todo el contenido de la página y lang="es" indica que el idioma es español.
3. Sección <head>
<head>
...
</head>Aquí se colocan las configuraciones de la página, como la codificación de caracteres, la adaptación a dispositivos móviles y el título de la pestaña.
4. Título del ejercicio
<h3>Determinar cuál es el número menor de cuatro números</h3>Muestra el nombre del ejercicio al usuario.
5. Formulario
<form>
...
</form>Agrupa todos los controles del ejercicio: cajas de texto, botones y resultado.
6. Cajas para ingresar los números
<input type="number" id="n1">Cada caja permite escribir un número.
- n1: Primer número.
- n2: Segundo número.
- n3: Tercer número.
- n4: Cuarto número.
El atributo id sirve para que JavaScript pueda acceder a cada caja.
7. Botón Mostrar
<input type="button" value="Mostrar" onclick="mostrar()">
Cuando el usuario hace clic en el botón, se ejecuta la función mostrar().
8. Botón Limpiar
<input type="reset" value="Limpiar">Borra todos los datos escritos en el formulario y deja las cajas vacías.
9. Caja de resultado
<input type="text" id="resultado">Aquí se muestra cuál es el número menor.
10. Función mostrar()
function mostrar(){
}Es la función principal del programa. Se ejecuta cuando el usuario presiona el botón Mostrar.
11. Obtener los números
let n1 = parseInt(document.getElementById('n1').value);Esta instrucción realiza tres tareas:
- document.getElementById('n1') busca la caja del primer número.
- .value obtiene el dato escrito.
- parseInt() convierte ese dato en un número entero.
Lo mismo ocurre con n2, n3 y n4.
12. Comparar si el primer número es el menor
if(n1 <= n2 && n1 <= n3 && n1 <= n4)El programa verifica si n1 es menor o igual que los otros tres números.
Si la condición es verdadera, significa que el primer número es el menor.
13. Comparar el segundo número
else if(n2 <= n1 && n2 <= n3 && n2 <= n4)Si el primer número no era el menor, ahora se comprueba si el segundo número es el menor.
14. Comparar el tercer número
else if(n3 <= n1 && n3 <= n2 && n3 <= n4)Si tampoco el segundo era el menor, el programa revisa si el tercer número es el más pequeño.
15. Caso contrario
else{
document.getElementById('resultado').value =
`El número menor es ${n4}`;
}Si ninguna de las condiciones anteriores se cumple, entonces el cuarto número es el menor.
16. Mostrar el resultado
document.getElementById('resultado').value =
`El número menor es ${n1}`;Esta instrucción escribe el resultado dentro de la caja de texto.
El símbolo ${ } inserta el valor del número encontrado dentro del mensaje.
Resumen del funcionamiento
- El usuario escribe cuatro números.
- Hace clic en el botón Mostrar.
- JavaScript obtiene los cuatro valores.
- Compara los números utilizando if y else if.
- Identifica cuál es el número más pequeño.
- Muestra el resultado en la caja de texto.
No hay comentarios.:
Publicar un comentario