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.
>= --> el operador mayor que o igual ( >= ) devuelve true si el operando izquierdo es mayor o igual que el operando derecho, y en false caso contrario.
++ --> el operador de incremento ( ++ ) incrementa (suma uno a) su operando y devuelve un valor.
/= --> el operador de asignación de división ( /= ) divide el valor del operando derecho de una variable y asigna el resultado a la variable.
length --> la propiedad length devuelve la longitud de una 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.
`${}` --> los literales de plantilla (cadenas de plantilla) le permiten utilizar cadenas o expresiones incrustadas en forma de cadena.
Explicación del Código:
1. Inicio del documento HTML
<!DOCTYPE html>
<html lang="es">
La declaración <!DOCTYPE html> indica que el documento está desarrollado en HTML5. La etiqueta <html lang="es"> informa al navegador que el idioma principal de la página es español.
2. Encabezado del documento
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejercicio HTML y JavaScript</title>
</head>
El encabezado contiene la configuración del documento.
- UTF-8: permite mostrar correctamente letras, números y símbolos.
- Viewport: adapta la página a dispositivos móviles.
- Title: define el nombre que aparece en la pestaña del navegador.
3. Título del ejercicio
<h3>Contar la cantidad de dígitos que tiene un número</h3>
Muestra el nombre del ejercicio al usuario.
4. Caja para ingresar el número
<input type="number" id="numero">
Permite que el usuario escriba un número. El atributo id="numero" permite que JavaScript pueda acceder a este elemento.
5. Botón Calcular
<input type="button" value="Calcular" onclick="calcular()">
Cuando el usuario hace clic en el botón, se ejecuta la función calcular().
6. Botón Limpiar
<input type="reset" value="Limpiar">
Elimina los datos escritos en el formulario para comenzar nuevamente.
7. Caja donde se muestra el resultado
<input type="text" id="resultado">
Aquí aparecerá la cantidad de dígitos del número ingresado.
8. Inicio del código JavaScript
function calcular(){
...
}
La función calcular() contiene todas las instrucciones necesarias para resolver el ejercicio.
9. Obtener el número ingresado
let numero = parseInt(document.getElementById("numero").value);
Obtiene el valor escrito por el usuario y lo convierte en un número entero mediante parseInt().
10. Crear el contador
let c = 0;
Se crea la variable c, que almacenará la cantidad de dígitos encontrados.
11. Contar los dígitos con el ciclo while
while(numero >= 1){
c++;
numero /= 10;
}
Mientras el número sea mayor o igual que 1, el ciclo continúa ejecutándose. En cada repetición:
- El contador aumenta en uno (c++).
- El número se divide entre 10.
- El proceso continúa hasta que el número sea menor que 1.
El número de repeticiones del ciclo corresponde a la cantidad de dígitos.
12. Mostrar el resultado
document.getElementById("resultado").value =
`El número tiene ${c} dígitos.`;
Finalmente, el programa muestra en la caja de texto la cantidad de dígitos que tiene el número ingresado.
Resumen del funcionamiento
- El usuario escribe un número.
- Hace clic en el botón Calcular.
- JavaScript obtiene el número ingresado.
- Se inicializa un contador en cero.
- El número se divide entre 10 repetidamente.
- En cada división el contador aumenta en uno.
- Cuando el número es menor que 1, el ciclo termina.
- Se muestra la cantidad de dígitos en la caja de resultado.
Código del ejercicio: Otra forma de hacer
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.
>= --> el operador mayor que o igual ( >= ) devuelve true si el operando izquierdo es mayor o igual que el operando derecho, y en false caso contrario.
++ --> el operador de incremento ( ++ ) incrementa (suma uno a) su operando y devuelve un valor.
/= --> el operador de asignación de división ( /= ) divide el valor del operando derecho de una variable y asigna el resultado a la variable.
length --> la propiedad length devuelve la longitud de una 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.
`${}` --> 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
La etiqueta <!DOCTYPE html> indica que el documento utiliza HTML5. Esto permite que el navegador interprete correctamente el código.
2. Etiqueta HTML
<html lang="es"> indica que el idioma principal de la página es español.
3. Sección head
Dentro de la etiqueta <head> se encuentran las configuraciones de la página, como la codificación de caracteres, la adaptación a dispositivos móviles y el título que aparece en la pestaña del navegador.
4. Título del ejercicio
La etiqueta <h3> muestra el título Contar la cantidad de dígitos que tiene un número.
5. Formulario
La etiqueta <form> agrupa todos los controles del ejercicio, como las cajas de texto y los botones.
6. Caja para ingresar el número
<input type="number" id="numero"> permite que el usuario escriba un número entero.
El atributo id="numero" identifica el control para que JavaScript pueda obtener el valor ingresado.
7. Botón Mostrar
El botón <input type="button"> ejecuta la función mostrar() cuando el usuario hace clic sobre él.
8. Botón Limpiar
El botón <input type="reset"> elimina los datos ingresados en el formulario y deja las cajas de texto vacías.
9. Caja de resultado
<input type="text" id="resultado"> muestra el mensaje con la cantidad de dígitos que tiene el número ingresado.
10. Función mostrar()
La función mostrar() contiene las instrucciones que obtiene el número, cuenta sus dígitos y muestra el resultado.
11. Obtener el número
let numero = parseInt(document.getElementById('numero').value);
Esta instrucción obtiene el valor escrito por el usuario y lo convierte en un número entero utilizando parseInt().
12. Contar los dígitos
let c = parseInt(numero.length);
La intención de esta línea es contar la cantidad de dígitos del número.
Sin embargo, existe un error, ya que la propiedad length solo funciona con cadenas de texto y arreglos, no con números enteros.
La forma correcta sería:
let c = numero.toString().length;
Primero se convierte el número en una cadena mediante toString() y luego se utiliza length para contar sus caracteres.
13. Mostrar el resultado
document.getElementById("resultado").value =
`El número tiene ${c} dígitos.`;
Finalmente, el mensaje con la cantidad de dígitos se muestra en la caja de texto resultado.
Resumen
El programa solicita un número al usuario, intenta contar cuántos dígitos tiene y muestra el resultado en pantalla. Para que el programa funcione correctamente, es necesario convertir el número en texto antes de utilizar la propiedad length.
No hay comentarios.:
Publicar un comentario