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.
for --> el ciclo for recorre un bloque de código varias veces.
.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 asignación de multiplicación ( *= ) multiplica el valor del operando derecho de una variable y asigna el resultado a la variable.
++ --> 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 al usuario un número entero n. Después genera los primeros n elementos de la serie:
1, 6, 36, 216, 1296, 7776, 46656...
La serie se forma multiplicando cada número por 6. Por ejemplo:
| Número actual | Operación | Siguiente número |
|---|---|---|
| 1 | 1 × 6 | 6 |
| 6 | 6 × 6 | 36 |
| 36 | 36 × 6 | 216 |
| 216 | 216 × 6 | 1296 |
Ahora veremos la función de cada parte del código HTML.
1. Declaración del documento HTML
<!DOCTYPE html>Explicación:
Indica que el documento está escrito utilizando la versión HTML5. Gracias a esta línea, el navegador interpreta correctamente todas las etiquetas modernas de HTML.
2. Inicio del documento HTML
<html lang="es">Explicación:
- La etiqueta <html> contiene todo el contenido de la página.
- El atributo lang="es" indica que el idioma principal es español.
- Esto ayuda a los navegadores y motores de búsqueda a reconocer correctamente el idioma.
3. La sección <head>
<head>
...
</head>La sección head contiene la información de configuración de la página. Todo lo que se encuentra aquí normalmente no aparece visible para el usuario.
4. Configuración de caracteres
<meta charset="UTF-8">¿Para qué sirve?
Permite mostrar correctamente caracteres especiales como:
- á
- é
- í
- ó
- ú
- ñ
- ¿?
- ¡!
Sin esta línea algunos caracteres podrían aparecer con símbolos extraños.
5. Compatibilidad con navegadores
<meta http-equiv="X-UA-Compatible"
content="IE=edge">Indica que el navegador debe utilizar su versión más moderna para interpretar la página.
Actualmente casi todos los navegadores modernos ya trabajan de esta forma, pero esta línea sigue siendo compatible con versiones antiguas.
6. Diseño adaptable (Responsive)
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">Explicación:
- Hace que la página se adapte automáticamente al tamaño de la pantalla.
- Permite visualizar correctamente el contenido desde un teléfono celular.
- También mejora la visualización en tablets y computadoras.
7. Título de la página
<title>
Ejercicio HTML y JavaScript
</title>El texto escrito dentro de <title> aparece en la pestaña del navegador.
No forma parte del contenido visible de la página.
8. Inicio del contenido visible
<body>
...
</body>Dentro de la etiqueta <body> se coloca todo lo que el usuario puede ver, como textos, botones, cuadros de entrada y resultados.
9. Título del ejercicio
<h3>
Mostrar los n primeros números
de la siguiente serie:
1,6,36,216,1296,7776,46656,...
</h3>Función:
- Muestra el nombre del ejercicio.
- Indica al usuario cuál será la serie que generará el programa.
- Es un encabezado de nivel 3.
10. Inicio del formulario
<form>
...
</form>El formulario agrupa todos los controles que utilizará el usuario, como cajas de texto, botones y áreas de resultados.
En este ejercicio el formulario solamente organiza los elementos de la interfaz.
11. Etiqueta del campo número
<label>Número:</label>Explicación:
La etiqueta <label> muestra un texto descriptivo para indicar al usuario qué dato debe escribir en la caja de entrada.
En este caso informa que debe ingresar la cantidad de números que desea mostrar de la serie.
12. Caja para ingresar el número
<input type="number" id="numero">Explicación:
- input crea una caja donde el usuario puede escribir información.
- type="number" indica que únicamente se pueden ingresar números.
- id="numero" asigna un identificador para que JavaScript pueda obtener el valor escrito.
Ejemplo:
| Dato ingresado | Significado |
|---|---|
| 5 | Mostrar los primeros cinco números de la serie. |
| 8 | Mostrar los primeros ocho números de la serie. |
13. Botón Mostrar
<input
type="button"
value="Mostrar"
onclick="mostrar()">Explicación:
- type="button" crea un botón.
- value="Mostrar" es el texto que aparece sobre el botón.
- onclick="mostrar()" ejecuta la función mostrar() cuando el usuario hace clic.
Es decir, este botón inicia todo el proceso para calcular la serie.
14. Botón Limpiar
<input
type="reset"
value="Limpiar">Explicación:
Este botón restaura el formulario a su estado inicial.
- Elimina el número escrito.
- Borra el resultado mostrado.
15. Etiqueta del resultado
<label>Resultado:</label>Informa al usuario que debajo aparecerán los números generados por el programa.
16. Área de resultados
<textarea
id="resultado"
cols="30"
rows="10">
</textarea>Explicación:
- textarea crea un cuadro de texto grande.
- Aquí aparecerán todos los números de la serie.
- id="resultado" permite que JavaScript escriba el resultado.
- cols="30" define el ancho inicial.
- rows="10" define la altura inicial.
17. Inicio del código JavaScript
<script>
...
</script>Explicación:
Todo el código JavaScript se escribe dentro de la etiqueta <script>.
JavaScript es el lenguaje encargado de realizar los cálculos y controlar el comportamiento de la página.
18. Declaración de la función
function mostrar(){
}
Explicación:
Se crea una función llamada mostrar().
Esta función contiene todas las instrucciones necesarias para generar la serie.
La función solamente se ejecuta cuando el usuario presiona el botón Mostrar.
19. Leer el número ingresado
let n =
parseInt(
document.getElementById("numero").value
);
Explicación paso a paso:
| Parte | Función |
|---|---|
| document | Hace referencia al documento HTML. |
| getElementById("numero") | Busca el elemento cuyo id es numero. |
| .value | Obtiene el contenido escrito por el usuario. |
| parseInt() | Convierte el texto en un número entero. |
| let n | Guarda ese número en la variable n. |
Ejemplo:
| Usuario escribe | Valor almacenado en n |
|---|---|
| 6 | 6 |
| 10 | 10 |
20. Declaración de variables
let i = 1,
c = 1,
t = [];Después de obtener el valor de n, el programa crea tres variables que serán utilizadas para generar la serie.
| Variable | Valor inicial | Función |
|---|---|---|
| i | 1 | Guarda el número actual de la serie. |
| c | 1 | Cuenta cuántos números se han generado. |
| t | [ ] | Arreglo donde se almacenan todos los resultados. |
21. Ciclo while
while(c <= n){
...
}Explicación:
El ciclo while repite un conjunto de instrucciones mientras la condición sea verdadera.
En este ejercicio, el ciclo continúa ejecutándose mientras el contador c sea menor o igual al número ingresado por el usuario.
Cuando el contador supera el valor de n, el ciclo termina.
22. Guardar el número actual
t.push(i);Explicación:
El método push() agrega un nuevo elemento al final del arreglo.
Cada vez que el ciclo se ejecuta, el número actual de la serie se guarda dentro del arreglo t.
Ejemplo:
| Valor de i | Contenido del arreglo t |
|---|---|
| 1 | [1] |
| 6 | [1, 6] |
| 36 | [1, 6, 36] |
| 216 | [1, 6, 36, 216] |
23. Calcular el siguiente número
i *= 6;Explicación:
Esta instrucción multiplica el valor actual por 6.
Es exactamente igual a escribir:
i = i * 6;| Valor anterior | Operación | Nuevo valor |
|---|---|---|
| 1 | 1 × 6 | 6 |
| 6 | 6 × 6 | 36 |
| 36 | 36 × 6 | 216 |
| 216 | 216 × 6 | 1296 |
Gracias a esta instrucción se genera la serie correctamente.
24. Incrementar el contador
c++;Explicación:
El operador ++ incrementa el valor de la variable en una unidad.
c++;Es equivalente a escribir:
c = c + 1;Esto permite contar cuántos números ya fueron generados.
25. Mostrar el resultado
document.getElementById("resultado").value = t;Explicación:
- Busca el elemento cuyo id es resultado.
- Accede a su propiedad value.
- Coloca dentro del textarea todos los números almacenados en el arreglo.
Ejemplo:
1,6,36,216,129626. Funcionamiento paso a paso
Supongamos que el usuario escribe el número 5.
| Iteración | Valor de i | Se guarda en t | Nuevo valor de i |
|---|---|---|---|
| 1 | 1 | 1 | 6 |
| 2 | 6 | 1, 6 | 36 |
| 3 | 36 | 1, 6, 36 | 216 |
| 4 | 216 | 1, 6, 36, 216 | 1296 |
| 5 | 1296 | 1, 6, 36, 216, 1296 | 7776 |
Al finalizar el ciclo, el programa muestra:
1,6,36,216,129627. Resumen del algoritmo
- El usuario escribe un número n.
- El programa lee ese número.
- La variable i inicia con el valor 1.
- Se crea un arreglo vacío para almacenar la serie.
- El ciclo while se ejecuta n veces.
- En cada repetición se guarda el número actual.
- Luego ese número se multiplica por 6.
- El contador aumenta en una unidad.
- Al finalizar el ciclo, todos los números se muestran en el área de resultados.
28. Conclusión
Este programa utiliza un ciclo while para generar una
serie geométrica, donde cada término se obtiene multiplicando el
anterior por 6.
Los valores generados se almacenan en un arreglo mediante el método
push(). Una vez finalizado el ciclo, el contenido del arreglo se muestra
en un textarea, permitiendo al usuario visualizar los primeros
n números de la serie de forma sencilla.
Este ejercicio ayuda a comprender el uso de variables, arreglos, ciclos
while, operadores de asignación y la interacción entre HTML y
JavaScript para crear programas dinámicos.
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.
<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.
for --> el ciclo for recorre un bloque de código varias veces.
.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 asignación de multiplicación ( *= ) multiplica el valor del operando derecho de una variable y asigna el resultado a la variable.
++ --> 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:
El objetivo del programa es mostrar los n primeros números de la siguiente serie matemática:
1, 6, 36, 216, 1296, 7776, 46656, ...
Cada número de la serie se obtiene multiplicando el número anterior por 6.
1 × 6 = 6
6 × 6 = 36
36 × 6 = 216
216 × 6 = 1296
1296 × 6 = 7776
El usuario escribe la cantidad de números que desea mostrar y el programa genera automáticamente la serie utilizando JavaScript.
1. Explicación de la estructura HTML
La parte HTML es la encargada de crear todos los elementos que el usuario ve en la página, como el título, las cajas de texto, los botones y el área donde aparece el resultado.
<!DOCTYPE html>
<!DOCTYPE html>
Indica al navegador que el documento está escrito utilizando la versión HTML5. Gracias a esta línea el navegador interpreta correctamente todo el código de la página.
<html lang="es">
<html lang="es">
Esta etiqueta indica que todo el documento está escrito en español. Esto ayuda a los navegadores, traductores automáticos y lectores de pantalla.
<head>
<head>
...
</head>
Dentro de esta etiqueta se coloca la información del documento. Aquí se encuentran las configuraciones necesarias para que la página funcione correctamente.
<meta charset="UTF-8">
<meta charset="UTF-8">
Permite mostrar correctamente caracteres especiales como:
- á
- é
- í
- ó
- ú
- ñ
- ¿?
- ¡!
Sin esta línea algunos caracteres podrían mostrarse incorrectamente.
<meta name="viewport">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
Hace que la página sea adaptable a celulares, tablets y computadoras. Gracias a esta etiqueta el contenido cambia de tamaño automáticamente dependiendo del dispositivo.
<title>
<title>
Ejercicio HTML y JavaScript
</title>
El texto colocado dentro de la etiqueta title aparece en la pestaña del navegador. No se muestra dentro de la página.
2. Explicación del contenido del <body>
Dentro del body se encuentran todos los elementos visibles para el usuario. En este ejercicio existen cinco elementos principales.
- El título del ejercicio.
- La caja para ingresar el número.
- El botón Mostrar.
- El botón Limpiar.
- El área donde aparece el resultado.
Título del ejercicio
<h3>
Mostrar los n primeros números de la siguiente serie:
1,6,36,216,1296,7776,46656,...
</h3>
Esta etiqueta muestra el enunciado del ejercicio para que el usuario conozca cuál es la serie que el programa generará.
Etiqueta label
<label>
Número:
</label>
La etiqueta label sirve para mostrar un texto descriptivo junto al cuadro de entrada. En este caso informa al usuario que debe escribir un número.
Caja de entrada
<input type="number" id="numero">
Esta caja permite ingresar únicamente números. El atributo id="numero" identifica la caja para que JavaScript pueda leer el valor que escribe el usuario.
Por ejemplo:
Si el usuario escribe:
5
Entonces el programa generará:
1
6
36
216
1296
Explicación del código (Parte 2)
3. Botón Mostrar
<input type="button"
value="Mostrar"
onclick="mostrar()">
Este botón ejecuta la función mostrar() cuando el usuario hace clic sobre él. La palabra onclick significa que al hacer un clic se llamará a la función de JavaScript.
4. Botón Limpiar
<input type="reset"
value="Limpiar">
Este botón borra el contenido del formulario. Si el usuario escribió un número, al hacer clic en Limpiar la caja volverá a quedar vacía.
5. Área de resultado
<textarea
id="resultado"
cols="30"
rows="10">
</textarea>
El elemento textarea sirve para mostrar el resultado generado por el programa. Aquí aparecerán todos los números de la serie.
Explicación del código JavaScript
6. Crear la función
function mostrar(){
}
Se crea una función llamada mostrar(). Todo el código encargado de generar la serie se encuentra dentro de esta función. La función solamente se ejecuta cuando el usuario presiona el botón Mostrar.
7. Leer el número ingresado
let n =
parseInt(
document.getElementById("numero").value
);
Esta línea obtiene el número que escribió el usuario.
| Parte | Función |
|---|---|
| document | Hace referencia al documento HTML. |
| getElementById() | Busca un elemento por su id. |
| value | Obtiene el valor escrito por el usuario. |
| parseInt() | Convierte el texto en un número entero. |
Si el usuario escribe:
5
Entonces la variable n tendrá el valor:
n = 5
8. Declarar las variables
let i = 1,
t = [];
Aquí se crean dos variables importantes.
| Variable | Función |
|---|---|
| i | Guarda el número actual de la serie. |
| t | Almacena todos los números generados. |
Inicialmente:
i = 1
t = []
El arreglo está vacío porque todavía no se ha generado ningún número.
9. Ciclo for
for(let c = 1; c <= n; c++){
}
El ciclo for repite el mismo proceso varias veces. La cantidad de repeticiones depende del número que escribió el usuario.
Si el usuario escribe:
3
El ciclo se repetirá tres veces. Si escribe:
7
El ciclo se repetirá siete veces.
10. Guardar cada número
t.push(i);
El método push() agrega el número actual al arreglo. Cada vez que el ciclo se repite, un nuevo número se almacena dentro del arreglo.
| Repetición | Contenido del arreglo |
|---|---|
| 1 | [1] |
| 2 | [1, 6] |
| 3 | [1, 6, 36] |
| 4 | [1, 6, 36, 216] |
Explicación del código JavaScript (Parte 3)
11. Multiplicar por 6
i *= 6;
Esta línea multiplica el valor actual de la variable i por 6. El resultado será el siguiente número de la serie.
La instrucción:
i *= 6;
es una forma abreviada de escribir:
i = i * 6;
Es decir, el valor de i se multiplica por 6 y el resultado vuelve a guardarse en la misma variable.
| Valor actual | Operación | Nuevo valor |
|---|---|---|
| 1 | 1 × 6 | 6 |
| 6 | 6 × 6 | 36 |
| 36 | 36 × 6 | 216 |
| 216 | 216 × 6 | 1296 |
| 1296 | 1296 × 6 | 7776 |
12. Mostrar el resultado
document.getElementById("resultado").value = t;
Después de que el ciclo termina, todos los números ya se encuentran almacenados en el arreglo t.
Esta línea coloca el contenido del arreglo dentro del textarea.
Por ejemplo, si el usuario escribe:
5
El arreglo contiene:
[1,6,36,216,1296]
Y eso es lo que aparece en la caja de resultado.
13. Fin de la función
}
La llave de cierre indica que la función mostrar() ha terminado. Una vez finalizada, el programa espera que el usuario vuelva a presionar el botón Mostrar para generar otra serie.
Funcionamiento completo del algoritmo
El siguiente cuadro resume todo el proceso que realiza el programa.
| Paso | Acción |
|---|---|
| 1 | El usuario escribe la cantidad de números que desea generar. |
| 2 | Al hacer clic en Mostrar, se ejecuta la función mostrar(). |
| 3 | Se obtiene el número ingresado y se guarda en la variable n. |
| 4 | La variable i comienza con el valor 1. |
| 5 | Se crea un arreglo vacío llamado t. |
| 6 | El ciclo for se repite exactamente n veces. |
| 7 | En cada repetición se guarda el valor de i en el arreglo. |
| 8 | Después se multiplica i por 6 para obtener el siguiente número de la serie. |
| 9 | Al finalizar el ciclo, todos los números están almacenados en el arreglo. |
| 10 | Finalmente, el arreglo se muestra en el textarea. |
Ejemplo de ejecución
Supongamos que el usuario escribe el número 5.
| Repetición | Valor de i | Contenido del arreglo |
|---|---|---|
| 1 | 1 | 1 |
| 2 | 6 | 1, 6 |
| 3 | 36 | 1, 6, 36 |
| 4 | 216 | 1, 6, 36, 216 |
| 5 | 1296 | 1, 6, 36, 216, 1296 |
1, 6, 36, 216, 1296
Conclusión
Este ejercicio permite practicar conceptos fundamentales de JavaScript, como el uso de variables, arreglos, ciclos for, funciones, operadores de multiplicación y la manipulación de elementos HTML mediante el DOM. Además, muestra cómo generar una serie matemática de forma automática a partir de un patrón de multiplicación constante.
No hay comentarios.:
Publicar un comentario