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.
parseFloat() --> analiza un argumento (si es necesario, lo convierte en una cadena) y devuelve un número de coma flotante.
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 de comparacion ( == ) comprueba si sus dos operandos son iguales y devuelve un resultado booleano.
> --> el operador mayor que ( > ) devuelve true si el operando izquierdo es mayor que el operando derecho.
`${}` --> los literales de plantilla (cadenas de plantilla) le permiten utilizar cadenas o expresiones incrustadas en forma de cadena.
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:
1. Declaración del documento HTML
La línea <!DOCTYPE html> indica que el documento utiliza HTML5.
La etiqueta <html lang="es"> informa al navegador que la página está escrita en español.
2. Sección <head>
Dentro del <head> se encuentran configuraciones importantes de la página.
<meta charset="UTF-8">permite utilizar correctamente letras con tildes y la letra ñ.<meta name="viewport">hace que la página sea adaptable a celulares y tablets.<title>muestra el nombre de la página en la pestaña del navegador.
3. Título del ejercicio
La etiqueta <h3> muestra el enunciado del ejercicio para indicar al usuario qué debe realizar.
4. Formulario
La etiqueta <form> contiene todos los controles que utilizará el usuario.
- Dos cajas
<input type="number">permiten ingresar los dos números. - El botón
Mostrarejecuta la funciónmostrar(). - El botón
Limpiarborra todos los datos del formulario. - La caja de texto
resultadomuestra el mensaje obtenido después de comparar los números.
5. Inicio de JavaScript
La etiqueta <script> contiene el código JavaScript encargado de realizar la comparación entre los números.
6. Función mostrar()
La función mostrar() se ejecuta cuando el usuario hace clic en el botón Mostrar.
Su objetivo es leer los números ingresados, compararlos y mostrar el resultado.
7. Obtener el primer número
La instrucción:
let num1 = parseFloat(document.getElementById('num1').value);
realiza las siguientes acciones:
- Busca la caja de texto cuyo id es
num1. - Obtiene el valor escrito por el usuario.
- Convierte ese valor en un número decimal mediante
parseFloat(). - Guarda el resultado en la variable
num1.
8. Obtener el segundo número
La instrucción:
let num2 = parseFloat(document.getElementById('num2').value);
realiza exactamente el mismo proceso para el segundo número y lo almacena en la variable num2.
9. Comparar los números
La estructura if...else if...else permite tomar decisiones.
-
Primer caso:
if(num1 == num2)Comprueba si ambos números son iguales. Si es verdadero, muestra el mensaje:
El número X es igual que Y.
-
Segundo caso:
else if(num1 > num2)Verifica si el primer número es mayor que el segundo. Si es verdadero, muestra:
El número X es mayor que Y.
-
Tercer caso:
elseSi no se cumplen las condiciones anteriores, significa que el primer número es menor que el segundo. Entonces muestra:
El número X es menor que Y.
10. Mostrar el resultado
La instrucción:
document.getElementById('resultado').value = ...
escribe el mensaje correspondiente dentro de la caja de texto llamada resultado, para que el usuario pueda visualizar la comparación realizada.
Resumen del funcionamiento
- El usuario ingresa dos números.
- Hace clic en el botón Mostrar.
- JavaScript obtiene ambos valores.
- Compara si son iguales, mayores o menores.
- Finalmente muestra el resultado en la caja de texto correspondiente.
No hay comentarios.:
Publicar un comentario