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>Generar los números pares: 0,2,4,6,8,10,12,14,16,18,20,...</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 = 0;
while(n1 <= n){
t.push(n1);
n1 += 2;
}
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.
<= --> el operador menor o igual ( <= ) devuelve true si el operando izquierdo es menor o igual que el operando derecho, y en false caso contrario.
.push() --> agrega uno o más elementos al final de un array y devuelve la nueva longitud del array.
+= --> 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.
Explicación del Código:
¿Qué hace este programa?
Este programa solicita un número al usuario y genera todos los
números pares desde 0 hasta el número ingresado.
Si el usuario escribe 20, el resultado será:
0,2,4,6,8,10,12,14,16,18,20
Explicación del código HTML
<form>
</form>
<form> crea el formulario donde el usuario
escribe el número y visualiza el resultado.
<label>número:</label>
Muestra el texto "número:" para indicar qué dato
debe ingresar el usuario.
<input type="number" id="numero">
Crea una caja que solo permite ingresar números.
- type="number": permite escribir únicamente números.
- id="numero": sirve para que JavaScript pueda obtener el valor escrito.
<input type="button"
value="Mostrar"
onclick="mostrar()">
Crea el botón Mostrar. Cuando se hace clic,
ejecuta la función mostrar().
<input type="reset" value="Limpiar">
Limpia todos los datos del formulario.
<textarea id="resultado"></textarea>
Es el área donde aparecerán todos los números pares generados.
Explicación del código JavaScript
function mostrar(){
}
Crea una función llamada mostrar(), la cual se
ejecuta al presionar el botón Mostrar.
let n = parseInt(document.getElementById("numero").value);
Obtiene el número escrito por el usuario y lo convierte en un
número entero.
- document.getElementById() busca el elemento por su ID.
- .value obtiene el valor escrito.
- parseInt() convierte el texto en número entero.
let t = [], n1 = 0;
Se crean dos variables:
- t: arreglo donde se guardarán los números pares.
- n1: comienza en 0 porque el primer número par es 0.
while(n1 <= n){
El ciclo while repite las instrucciones mientras
n1 sea menor o igual al número ingresado.
t.push(n1);
Guarda el número par actual dentro del arreglo.
n1 += 2;
Aumenta el valor de n1 de dos en dos para generar
únicamente números pares.
Ejemplo:
0
2
4
6
8
10
12
...
document.getElementById("resultado").value = t;
Finalmente muestra todos los números almacenados en el arreglo
dentro del área de texto.
Funcionamiento paso a paso
- El usuario escribe un número.
- Presiona el botón Mostrar.
- JavaScript obtiene el número ingresado.
- El programa comienza desde 0.
- Va aumentando de 2 en 2.
- Cada número par se guarda en un arreglo.
- Cuando llega al número indicado, el ciclo termina.
- Finalmente, todos los números pares aparecen en el área de resultado.
Resumen
Este ejercicio utiliza un ciclo while para generar
números pares. El programa comienza en 0, aumenta
el contador de dos en dos, guarda cada número en un arreglo y, al
finalizar, muestra todos los números pares hasta el valor ingresado
por el usuario.
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>Generar los números pares: 0,2,4,6,8,10,12,14,16,18,20,...</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 = 0; n1 <= n; n1 += 2) {
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.
<= --> el operador menor o igual ( <= ) devuelve true si el operando izquierdo es menor o igual que el operando derecho, y en false caso contrario.
.push() --> agrega uno o más elementos al final de un array y devuelve la nueva longitud del array.
+= --> 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.
Explicación del Código:
Este programa solicita al usuario un número y genera todos los números pares desde
0 hasta el número ingresado. Los resultados se muestran dentro de un área de texto.
1. Estructura HTML
Declaración del documento
<!DOCTYPE html>
Indica que el documento está escrito en HTML5.
Etiqueta HTML
<html lang="es">
Es la etiqueta principal del documento. El atributo lang="es" indica que la página está en español.
Cabecera
<head>
Contiene la información de configuración de la página, como el tipo de caracteres y el título.
Codificación de caracteres
<meta charset="UTF-8">
Permite utilizar correctamente letras, acentos y símbolos.
Compatibilidad
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Hace que el navegador utilice su versión más moderna para mostrar la página.
Diseño adaptable
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Hace que la página se adapte correctamente a celulares, tablets y computadoras.
Título de la página
<title>Ejercicio HTML y JavaScript</title>
Es el nombre que aparece en la pestaña del navegador.
2. Contenido de la página
Título
<h3>Generar los números pares...</h3>
Muestra el nombre del ejercicio al usuario.
Formulario
<form>
Agrupa todos los controles del programa.
Etiqueta
<label>número:</label>
Muestra el texto que indica qué dato debe ingresar el usuario.
Caja de número
<input type="number" id="numero">
Permite ingresar únicamente números.
- type="number": acepta solamente valores numéricos.
- id="numero": identifica la caja para usarla desde JavaScript.
Botón Mostrar
<input type="button" value="Mostrar" onclick="mostrar()">
Cuando el usuario hace clic, ejecuta la función mostrar().
Botón Limpiar
<input type="reset" value="Limpiar">
Borra el contenido del formulario.
Área de texto
<textarea id="resultado"></textarea>
Aquí aparecen todos los números pares generados.
3. Código JavaScript
Función principal
function mostrar(){
Es la función que se ejecuta al presionar el botón Mostrar.
Leer el número
let n = parseInt(document.getElementById('numero').value);
Obtiene el número escrito por el usuario y lo convierte en un número entero.
- document.getElementById(): busca el control por su id.
- .value: obtiene el valor escrito.
- parseInt(): convierte el texto en un número entero.
Crear un arreglo
let t = [];
Se crea un arreglo vacío donde se guardarán los números pares.
Recorrer los números
for (let n1 = 0; n1 <= n; n1 += 2)
El ciclo comienza en 0 y aumenta de dos en dos hasta llegar al número ingresado.
Como aumenta de 2 en 2, solamente genera números pares.
Guardar cada número
t.push(n1);
Agrega cada número par al arreglo.
Mostrar el resultado
document.getElementById('resultado').value = t;
Muestra todos los números almacenados dentro del área de texto.
4. Funcionamiento paso a paso
- El usuario escribe un número.
- Presiona el botón Mostrar.
- La función mostrar() obtiene ese número.
- Se crea un arreglo vacío.
- El ciclo for genera los números pares desde 0 hasta el número ingresado.
- Cada número se guarda en el arreglo.
- Finalmente, todos los números se muestran en el cuadro de resultado.
5. Ejemplo
Si el usuario escribe:
20
El programa mostrará:
0,2,4,6,8,10,12,14,16,18,20
Resumen
Este programa utiliza HTML para crear la interfaz donde el usuario ingresa un número y visualiza el resultado. JavaScript realiza el procesamiento: obtiene el número ingresado, usa un ciclo for para generar únicamente los números pares, los almacena en un arreglo mediante push() y finalmente los muestra dentro del área de texto.
