C贸digo del ejercicio:
<!DOCTYPE html>
<html lang="es">
<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>
<body>
<h3>Mostrar los n煤meros: 10,20,30,40,50,60,70,80,90,100,...</h3>
<form action="">
<label for="">n煤mero:</label>
<input type="number" id="numero"><br><br>
<input type="button" value="Mostrar" onclick="mostrar()">
<input type="reset" value="Limpiar"><br><br>
<label for="">resultado:</label><br>
<textarea name="" id="resultado" cols="30" rows="10"></textarea>
</form>
<script>
function mostrar(){
let n = parseInt(document.getElementById('numero').value);
let t = [], n1 = 10;
while(n1 <= n){
t.push(n1);
n1 += 10;
}
document.getElementById('resultado').value = t;
}
</script>
</body>
</html>
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 incremento ( ++ ) incrementa (suma uno a) su operando y devuelve un valor.
+= --> el operador de asignaci贸n de suma ( += ) suma el valor del operando derecho a una variable y asigna el resultado a la variable.
document.getElementById() --> devuelve un elemento con un valor especificado.
.value --> establece o devuelve el valor del atributo de valor de un campo de texto.
+ --> se usa para concatenar cadenas, cadenas a constantes o a variables.
Explicaci贸n del C贸digo:
Este programa permite mostrar los n煤meros m煤ltiplos de 10 desde 10 hasta el n煤mero que escriba el usuario.
Por ejemplo, si el usuario ingresa 80, el programa mostrar谩:
10,20,30,40,50,60,70,80
Explicaci贸n del c贸digo HTML
| C贸digo |
Funci贸n |
<form> |
Contiene todos los controles del formulario. |
<label>N煤mero:</label> |
Muestra el texto que indica d贸nde debe escribir el n煤mero. |
<input type="number" id="numero"> |
Permite al usuario ingresar un n煤mero. |
<input type="button"> |
Llama a la funci贸n mostrar() cuando se hace clic en el bot贸n Mostrar. |
<input type="reset"> |
Limpia los datos del formulario. |
<textarea id="resultado"> |
Muestra los n煤meros generados por el programa. |
Explicaci贸n del c贸digo JavaScript
1. Declaraci贸n de la funci贸n
function mostrar(){
Se crea la funci贸n llamada mostrar(), que se ejecuta cuando el usuario presiona el bot贸n Mostrar.
2. Leer el n煤mero ingresado
let n = parseInt(document.getElementById('numero').value);
Obtiene el valor escrito por el usuario y lo convierte en un n煤mero entero mediante parseInt().
3. Crear las variables
let t = [], n1 = 10;
Aqu铆 se crean dos variables:
- t: almacena los n煤meros generados.
- n1: comienza en 10 porque el primer m煤ltiplo de 10 es 10.
4. Repetir mientras el n煤mero sea menor o igual al l铆mite
while(n1 <= n){
El ciclo while contin煤a ejecut谩ndose mientras n1 sea menor o igual al n煤mero ingresado.
5. Guardar el n煤mero
t.push(n1);
Agrega el n煤mero actual dentro del arreglo t.
6. Aumentar de diez en diez
n1 += 10;
Incrementa el valor de n1 en 10 para obtener el siguiente m煤ltiplo.
Ejemplo:
10
20
30
40
50
...
7. Mostrar el resultado
document.getElementById('resultado').value = t;
Finalmente, el contenido del arreglo se muestra dentro del 谩rea de texto (textarea).
Funcionamiento paso a paso
- El usuario escribe un n煤mero.
- Hace clic en el bot贸n Mostrar.
- La funci贸n mostrar() obtiene el n煤mero.
- El ciclo while genera los m煤ltiplos de 10.
- Los n煤meros se guardan en un arreglo.
- El arreglo se muestra en el textarea.
Ejemplo de ejecuci贸n
Entrada:
100
Proceso:
10
20
30
40
50
60
70
80
90
100
Salida:
10,20,30,40,50,60,70,80,90,100
Resumen
Este programa utiliza un ciclo while para generar los m煤ltiplos de 10 desde el n煤mero 10 hasta el valor ingresado por el usuario. Cada n煤mero se almacena en un arreglo mediante push() y, al finalizar, todos los valores se muestran en el 谩rea de texto del formulario.
C贸digo del ejercicio: Otra forma de hacer
<!DOCTYPE html>
<html lang="es">
<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>
<body>
<h3>Mostrar los n煤meros: 10,20,30,40,50,60,70,80,90,100,...</h3>
<form action="">
<label for="">n煤mero:</label>
<input type="number" id="numero"><br><br>
<input type="button" value="Mostrar" onclick="mostrar()">
<input type="reset" value="Limpiar"><br><br>
<label for="">resultado:</label><br>
<textarea name="" id="resultado" cols="30" rows="10"></textarea>
</form>
<script>
function mostrar(){
let n = parseInt(document.getElementById('numero').value);
let t = [];
for (let n1 = 10; n1 <= n; n1 += 10) {
t.push(n1);
}
document.getElementById('resultado').value = t;
}
</script>
</body>
</html>
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 incremento ( ++ ) incrementa (suma uno a) su operando y devuelve un valor.
+= --> el operador de asignaci贸n de suma ( += ) suma el valor del operando derecho a una variable y asigna el resultado a la variable.
document.getElementById() --> devuelve un elemento con un valor especificado.
.value --> establece o devuelve el valor del atributo de valor de un campo de texto.
+ --> se usa para concatenar cadenas, cadenas a constantes o a variables.
Explicaci贸n del C贸digo:
Este programa muestra los n煤meros de 10 en 10 hasta el n煤mero que el usuario ingrese.
Por ejemplo, si se escribe 100, el resultado ser谩: 10, 20, 30, 40, ... 100.
HTML (Estructura)
El HTML crea un formulario con un campo de entrada, botones y un 谩rea donde se muestra el resultado.
<input type="number" id="numero">
<input type="button" value="Mostrar" onclick="mostrar()">
<textarea id="resultado"></textarea>
JavaScript (Funci贸n)
La funci贸n mostrar() toma el n煤mero ingresado y genera una lista de m煤ltiplos de 10.
function mostrar(){
let n = parseInt(document.getElementById('numero').value);
let t = [];
for (let i = 10; i <= n; i += 10) {
t.push(i);
}
document.getElementById('resultado').value = t;
}
Funcionamiento
- El usuario escribe un n煤mero.
- Hace clic en “Mostrar”.
- El programa genera n煤meros de 10 en 10.
- Se muestran en el 谩rea de resultado.
