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.
<textarea></textarea> --> define un control de entrada de texto de varias líneas.
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.
.push() --> agrega uno o más elementos al final de un array y devuelve la nueva longitud del array.
<= --> 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 de incremento ( ++ ) incrementa (suma uno a) su operando y devuelve un valor.
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 solicita un número al usuario y muestra todos los números desde 1 hasta el número ingresado (N). Para lograrlo utiliza HTML para crear la interfaz y JavaScript para realizar el conteo.
1. Declaración del documento HTML
<!DOCTYPE html>
Indica que el documento está escrito en HTML5.
<html lang="es">
Define el inicio del documento y especifica que el idioma es español.
2. Sección <head>
<meta charset="UTF-8">
Permite utilizar caracteres especiales como la ñ y las vocales con tilde.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Hace que el navegador utilice la versión más moderna disponible.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Hace que la página sea adaptable a celulares, tabletas y computadoras.
<title>Ejercicio HTML y JavaScript</title>
Define el título que aparece en la pestaña del navegador.
3. Título del ejercicio
<h3>Diseñar un algoritmo que cuente de 1 a N número</h3>
Muestra el nombre del ejercicio en la página.
4. Formulario
<form>
Contiene todos los controles que utilizará el usuario.
- Una etiqueta para indicar que se debe ingresar un número.
- Una caja de texto de tipo
numberpara escribir el valor. - Un botón Mostrar que ejecuta la función
mostrar(). - Un botón Limpiar que borra los datos del formulario.
- Un área de texto donde se mostrará el resultado.
5. Función mostrar()
function mostrar(){
Crea una función llamada mostrar, la cual se ejecuta cuando el usuario hace clic en el botón Mostrar.
let n = parseInt(document.getElementById('numero').value);
Obtiene el número escrito por el usuario y lo convierte a un número entero mediante parseInt().
let t = [], c = 1;
Se crean dos variables:
- t: un arreglo vacío donde se guardarán los números.
- c: un contador que inicia en 1.
while(c <= n){
El ciclo while se repite mientras el contador sea menor o igual al número ingresado.
t.push(c);
Guarda el valor actual del contador dentro del arreglo.
c++;
Incrementa el contador en una unidad para continuar con el siguiente número.
}
Finaliza el ciclo cuando el contador supera el valor de N.
document.getElementById('resultado').value = t;
Muestra todos los números almacenados en el arreglo dentro del área de texto.
}
Finaliza la función.
6. Funcionamiento del algoritmo
- El usuario escribe un número.
- Al presionar Mostrar, se ejecuta la función mostrar().
- Se lee el número ingresado.
- El contador comienza en 1.
- El ciclo while agrega cada número al arreglo.
- El contador aumenta de uno en uno hasta llegar al número ingresado.
- Finalmente, todos los números se muestran en el área de texto.
Ejemplo de ejecución
Entrada: 5
Proceso:
1 → 2 → 3 → 4 → 5
Salida:
1,2,3,4,5
Resumen
Este programa utiliza un ciclo while para contar desde 1 hasta un número N ingresado por el usuario. Cada número se guarda en un arreglo mediante push() y, al finalizar el ciclo, el contenido del arreglo se muestra dentro del textarea.
