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.
let --> permite declarar variables limitando su alcance (scope) al bloque, declaración, o expresión donde se está usando.
if --> se usa para especificar un bloque de código que se ejecutará, si una condición especificada es verdadera.
else --> se usa para especificar un bloque de código a ejecutar, si la misma condición es falsa.
% --> 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.
function --> es un bloque de código diseñado para realizar una tarea en particular.
parseInt() --> analiza un valor como una cadena y devuelve el primer entero.
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 que el usuario escriba un número y, al hacer clic en el botón Calcular, JavaScript verifica si el número es par o impar. Finalmente, el resultado se muestra en una caja de texto.
1. Declaración del documento
<!DOCTYPE html>Indica al navegador que el documento está escrito utilizando la versión HTML5. Esto permite que la página funcione correctamente en los navegadores modernos.
2. Etiqueta HTML
<html lang="es">Es la etiqueta principal del documento HTML. Todo el contenido de la página debe estar dentro de ella.
El atributo lang="es" indica que el idioma de la página es español.
3. La sección head
<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>
La etiqueta <head> contiene información importante sobre la página, pero esta información no aparece directamente en el navegador.
-
<meta charset="UTF-8">
Permite mostrar correctamente caracteres especiales como la ñ, las vocales con tilde y otros símbolos. -
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Hace que Internet Explorer utilice su versión más moderna para mostrar la página. -
<meta name="viewport">
Hace que la página sea adaptable a computadoras, tabletas y teléfonos móviles. -
<title>
Es el nombre que aparece en la pestaña del navegador.
4. La sección body
<body>Dentro de esta etiqueta se encuentra todo el contenido visible de la página web, como títulos, formularios, botones y cajas de texto.
5. Título del ejercicio
<h3>
Determinar si un número es par
</h3>
La etiqueta h3 muestra un título en la página para indicar de qué trata el ejercicio.
6. Formulario
<form action="">
...
</form>
La etiqueta form agrupa todos los controles del formulario, como cajas de texto, botones y etiquetas.
El atributo action="" está vacío porque toda la operación se realiza con JavaScript y no se envían datos a otro archivo.
7. Etiqueta del número
<label>
Número:
</label>
La etiqueta label muestra el texto "Número:", indicando al usuario qué dato debe ingresar.
8. Caja para ingresar el número
<input type="number" id="numero">
Esta etiqueta crea una caja donde el usuario puede escribir un número.
-
type="number"
Permite ingresar únicamente valores numéricos. -
id="numero"
Asigna un identificador único a la caja de texto para que JavaScript pueda acceder a su contenido.
9. Botón Calcular
<input
type="button"
value="Calcular"
onclick="calcular()">
Este botón ejecuta la función calcular() cuando el usuario hace clic sobre él.
-
type="button"
Indica que el control es un botón. -
value="Calcular"
Es el texto que aparece escrito sobre el botón. -
onclick="calcular()"
Llama a la función calcular() al hacer clic.
10. Botón Limpiar
<input
type="reset"
value="Limpiar">
Este botón borra todos los datos escritos en el formulario y lo deja listo para realizar un nuevo cálculo.
11. Caja donde se muestra el resultado
<input
type="text"
id="resultado">
Aquí aparece el mensaje indicando si el número ingresado es par o no.
-
type="text"
Crea una caja de texto para mostrar información. -
id="resultado"
Permite que JavaScript escriba el resultado en esta caja.
12. Inicio del código JavaScript
<script>
...
</script>
La etiqueta <script> contiene el código JavaScript que realiza los cálculos y controla el funcionamiento del programa.
13. Función calcular()
function calcular(){
}
La palabra function crea una función llamada calcular. Esta función se ejecuta cuando el usuario presiona el botón Calcular.
14. Obtener el número ingresado
let numero =
parseInt(
document.getElementById("numero").value
);
Esta línea obtiene el número escrito por el usuario y lo guarda en la variable numero.
-
let
Declara una variable. -
numero
Es el nombre de la variable donde se almacenará el valor. -
document.getElementById("numero")
Busca el elemento cuyo identificador es numero. -
.value
Obtiene el valor que el usuario escribió. -
parseInt()
Convierte el texto ingresado en un número entero.
15. Verificar si el número es par
if(numero % 2 == 0){
La estructura if comprueba si el número es divisible entre 2.
El operador % calcula el residuo de una división.
Ejemplos:
- 8 % 2 = 0
- 10 % 2 = 0
- 15 % 2 = 1
- 9 % 2 = 1
Si el residuo es igual a cero, significa que el número es par.
16. Mostrar que el número es par
document.getElementById("resultado").value =
`El número ${numero} es par.`;
Si la condición del if es verdadera, JavaScript escribe el mensaje indicando que el número es par.
17. La instrucción else
else{
}
La palabra else se ejecuta cuando la condición del if es falsa.
En este caso significa que el número no es divisible exactamente entre 2.
18. Mostrar que el número no es par
document.getElementById("resultado").value =
`El número ${numero} no es par.`;
Cuando el número es impar, JavaScript muestra este mensaje en la caja de resultado.
19. Fin de la función
}
Esta llave indica el final de la función calcular().
20. Funcionamiento general del programa
- El usuario escribe un número.
- Hace clic en el botón Calcular.
- JavaScript obtiene el número ingresado.
- Convierte el dato a un número entero mediante parseInt().
- Calcula el residuo usando el operador %.
- Si el residuo es 0, muestra que el número es par.
- Si el residuo es diferente de 0, indica que el número no es par.
- El resultado aparece en la caja de texto correspondiente.
21. Conclusión
Este ejercicio muestra cómo combinar HTML y JavaScript para crear un programa interactivo. HTML se utiliza para construir la interfaz del formulario, mientras que JavaScript obtiene el valor ingresado por el usuario, verifica si el número es divisible entre dos mediante el operador % y utiliza la estructura condicional if...else para mostrar el resultado correspondiente. Es un ejercicio básico que ayuda a comprender el uso de variables, operadores, condiciones y la interacción entre HTML y JavaScript.
No hay comentarios.:
Publicar un comentario