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.
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.
else --> se usa para especificar un bloque de código a ejecutar, si la misma condición es falsa.
> --> 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.
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 permite ingresar un número natural y comprobar si dicho número es capicúa. Para ello utiliza HTML para crear la interfaz del usuario y JavaScript para realizar el proceso de verificación.
¿Qué es un número capicúa?
Un número capicúa es aquel que se lee exactamente igual de izquierda a derecha que de derecha a izquierda.
- 121 → Es capicúa.
- 1331 → Es capicúa.
- 4554 → Es capicúa.
- 123 → No es capicúa.
- 587 → No es capicúa.
1. Declaración del tipo de documento
<!DOCTYPE html>
Indica al navegador que el documento está escrito utilizando HTML5. Gracias a esta declaración, el navegador interpreta correctamente todas las etiquetas modernas de HTML.
2. Etiqueta HTML
<html lang="es">
Es la etiqueta principal del documento. Todo el contenido de la página se encuentra dentro de ella.
El atributo lang="es" indica que el idioma principal de la página es español, ayudando a los navegadores y motores de búsqueda a interpretar correctamente el contenido.
3. Etiqueta <head>
<head>
...
</head>
Dentro de esta etiqueta se colocan las configuraciones del documento, como la codificación de caracteres, el título de la página y la adaptación para dispositivos móviles.
4. Codificación de caracteres
<meta charset="UTF-8">
Permite que el navegador muestre correctamente caracteres especiales como: á, é, í, ó, ú, ñ, ¿ y ¡.
5. Adaptación a dispositivos móviles
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
Hace que la página sea responsive, es decir, que pueda verse correctamente tanto en computadoras como en teléfonos móviles y tabletas.
6. Título de la página
<title>
Ejercicio HTML y JavaScript
</title>
Define el nombre que aparecerá en la pestaña del navegador cuando la página sea abierta.
2. Estructura del cuerpo (BODY) y formulario
En esta parte del código se construye la interfaz que el usuario ve en pantalla. Aquí se encuentra el formulario donde se ingresa el número y los botones de acción.
Título del ejercicio
<h3>Determinar si un número natural es capicúa</h3>
Este título aparece en la parte superior de la página y explica el objetivo del programa: verificar si un número es capicúa.
Formulario HTML
<form>
<label>número:</label>
<input type="number" id="n">
<input type="button" value="Mostrar" onclick="mostrar()">
<input type="reset" value="Limpiar">
<input type="text" id="resultado">
</form>
El formulario es el contenedor principal de los elementos que permiten interactuar con el programa.
Etiqueta label
La etiqueta <label> muestra el texto “número:” que indica al usuario qué debe ingresar.
Campo de entrada (número)
<input type="number" id="n">
Este campo permite ingresar únicamente números. El atributo id="n" sirve para que JavaScript pueda obtener el valor ingresado.
Botón Mostrar
<input type="button" value="Mostrar" onclick="mostrar()">
Este botón ejecuta la función mostrar() cuando el usuario hace clic. Es el encargado de iniciar el proceso de verificación del número capicúa.
Botón Limpiar
<input type="reset" value="Limpiar">
Este botón borra todos los datos ingresados en el formulario, dejando los campos vacíos.
Campo de resultado
<input type="text" id="resultado">
En este campo se muestra el mensaje final del programa: si el número es capicúa o no lo es.
Todos estos elementos están conectados con JavaScript. Cuando el usuario presiona el botón “Mostrar”, se ejecuta la función que analiza el número ingresado.
3. Lógica en JavaScript
En esta parte del programa se realiza toda la lógica que permite determinar si un número es capicúa o no. JavaScript toma el número ingresado, lo procesa y muestra el resultado en pantalla.
Función mostrar()
function mostrar(){
Esta función se ejecuta cuando el usuario presiona el botón “Mostrar”. Es el punto de inicio de todo el proceso.
1. Capturar el número
let n = parseInt(document.getElementById('n').value);
Aquí se obtiene el valor ingresado en el campo de texto. Luego se convierte a número entero con parseInt().
2. Declaración de variables
let digito = 0, invertir = 0, aux = n;
- digito: guarda cada número extraído.
- invertir: construye el número al revés.
- aux: guarda el número original para compararlo después.
3. Ciclo while
while(n > 0){
Este ciclo se repite mientras el número tenga dígitos. Permite extraer cada dígito uno por uno desde el final.
4. Obtener el último dígito
digito = n % 10;
El operador módulo (%) obtiene el último dígito del número. Ejemplo: 123 % 10 = 3.
5. Construir el número invertido
invertir = (invertir * 10) + digito;
Aquí se va formando el número al revés, agregando cada dígito al final. Así se reconstruye el número invertido paso a paso.
6. Eliminar el último dígito
n = (n - digito) / 10;
Se elimina el último dígito del número original para continuar con el siguiente en la próxima iteración del ciclo.
7. Comparación final
if(invertir == aux){
Se compara el número invertido con el número original. Si son iguales, el número es capicúa.
8. Mostrar resultado
document.getElementById('resultado').value = "Es capicúa.";
Si el número es igual al invertido, se muestra el mensaje indicando que es capicúa.
document.getElementById('resultado').value = "No es capicúa.";
Si no son iguales, se muestra que el número no es capicúa.
Resumen del algoritmo
- Se ingresa un número.
- Se extraen sus dígitos uno por uno.
- Se construye el número invertido.
- Se compara con el original.
- Se muestra si es capicúa o no.
No hay comentarios.:
Publicar un comentario