lunes, 29 de junio de 2026

Mostrar los n primeros números múltiplos de 7: 7,14,21,28,35,42,49,56,63,70,... en HTML y JavaScript

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 múltiplos de 7: 7,14,21,28,35,42,49,56,63,70,...</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 = [], a = 7, c = 1;
            while(c <= n){
                if(a % 7 == 0){
                    t.push(a);
                    c++;
                }
                a++;
            }
            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.
.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 modulo ( % ) devuelve el resto de la división.
== --> el operador de comparacion ( == ) comprueba si sus dos operandos son iguales y devuelve un resultado booleano.
++ --> 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 n. Luego calcula y muestra los n primeros múltiplos de 7. Por ejemplo, si el usuario escribe 5, el programa mostrará:

7, 14, 21, 28, 35

1. Estructura principal del documento

Código	Explicación
`<!DOCTYPE html>`	Indica que el documento está escrito en HTML5.
`<html>`	Es el elemento principal donde se encuentra todo el contenido de la página.
`<head>`	Contiene información del documento, como el título y la configuración de caracteres.
`<body>`	Contiene todos los elementos que verá el usuario en la página web.

2. Título del ejercicio

Código	Explicación
`<h3>`	Muestra el título que explica el objetivo del programa.

El usuario entiende que el programa mostrará los primeros múltiplos de 7.

3. Formulario

Código	Función
`<form>`	Agrupa todos los controles del formulario.
`<label>`	Muestra el texto "Número".
`<input type="number">`	Permite ingresar la cantidad de múltiplos que se desea mostrar.
`<input type="button">`	Ejecuta la función `mostrar()`.
`<input type="reset">`	Limpia el formulario.
`<textarea>`	Presenta el resultado generado por el programa.

4. Función mostrar()

Toda la lógica del programa se encuentra dentro de esta función.

Código	Explicación
`let n = parseInt(document.getElementById('numero').value);`	Obtiene el número ingresado por el usuario y lo convierte en un número entero.
`let t = [];`	Crea un arreglo vacío donde se almacenarán los múltiplos encontrados.
`let a = 7;`	La búsqueda comienza desde el número 7.
`let c = 1;`	Es un contador que indica cuántos múltiplos ya fueron encontrados.

5. Ciclo while

Código	Explicación
`while(c <= n)`	El ciclo continúa hasta encontrar la cantidad de múltiplos solicitados por el usuario.
`if(a % 7 == 0)`	Comprueba si el número actual es múltiplo de 7 usando el operador módulo (%).
`t.push(a);`	Guarda el múltiplo encontrado dentro del arreglo.
`c++;`	Aumenta el contador porque ya se encontró un nuevo múltiplo.
`a++;`	Pasa al siguiente número para seguir buscando.

6. Mostrar el resultado

Código	Explicación
`document.getElementById('resultado').value = t;`	Muestra todos los múltiplos almacenados en el área de texto.

7. Funcionamiento paso a paso

Si el usuario escribe el número 5, el programa realiza las siguientes acciones:

Paso	Resultado
1	Lee el número 5.
2	Empieza desde el número 7.
3	Verifica si cada número es múltiplo de 7.
4	Guarda: 7, 14, 21, 28 y 35.
5	Cuando encuentra los 5 múltiplos, termina el ciclo.
6	Los muestra en el área de resultados.

8. Resumen

Este programa utiliza un ciclo while para recorrer números consecutivos a partir del 7. Cada número se verifica con el operador %. Cuando el residuo de dividir entre 7 es igual a 0, significa que el número es múltiplo de 7 y se guarda en un arreglo. El proceso continúa hasta obtener la cantidad de múltiplos solicitada y finalmente todos ellos se muestran en el cuadro de resultados.

domingo, 28 de junio de 2026

Mostrar los números múltiplos de 7: 7,14,21,28,35,42,49,56,63,70,... en HTML y JavaScript

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>Convertir Grado Celsius a Grado Fahrenheit</h3>
    <form action="">
        <label for="">Grado Celsius:</label>
        <input type="number" id="celsius"><br><br>
        <input type="button" value="Convertir" onclick="convertir()">
        <input type="reset" value="Limpiar"><br><br>
        <label for="">resultado:</label>
        <input type="text" id="resultado">
    </form>
    <script>
        function convertir(){
            let celsius = parseFloat(document.getElementById('celsius').value);
            let convertir = 1.8 * celsius + 32;
            document.getElementById('resultado').value = `${convertir} °F`;
        }
    </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.
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.
parseFloat() --> analiza un argumento (si es necesario, lo convierte en una cadena) y devuelve un número de coma flotante.
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:

Objetivo del programa

Este programa tiene como objetivo mostrar los primeros diez números múltiplos de 7: 7, 14, 21, 28, 35, 42, 49, 56, 63 y 70. Para ello utiliza HTML para crear la interfaz y JavaScript para realizar el cálculo.

Explicación de cada parte del código

<!DOCTYPE html>
Indica al navegador que el documento está desarrollado en HTML5.
<html lang="es">
Especifica que el idioma principal de la página es español.
<head>
Contiene la configuración general del documento, como la codificación y el título.
<meta charset="UTF-8">
Permite mostrar correctamente caracteres especiales como tildes y la letra ñ.
<meta name="viewport">
Hace que la página sea adaptable a dispositivos móviles y tablets.
<title>
Define el nombre que aparece en la pestaña del navegador.
<body>
Contiene todos los elementos visibles de la página.
<h3>
Muestra el título del ejercicio.
Botón "Mostrar"
Cuando el usuario hace clic, ejecuta la función de JavaScript encargada de generar los múltiplos de 7.
Elemento donde se muestra el resultado
Es el espacio de la página donde aparecerán los números generados por el programa.
<script>
Contiene el código JavaScript que realiza el proceso.
Función mostrar()
Es la función principal del programa. Se ejecuta al presionar el botón.
Ciclo for
Repite una misma operación diez veces para obtener los primeros diez múltiplos de 7.
Operación i * 7
Multiplica el número de cada repetición por 7 para generar los múltiplos.
Mostrar el resultado
Cada número calculado se agrega al resultado hasta completar la serie: 7, 14, 21, 28, 35, 42, 49, 56, 63 y 70.

Funcionamiento del programa

El usuario presiona el botón Mostrar.
Se ejecuta la función mostrar().
El ciclo for realiza diez repeticiones.
En cada repetición se multiplica el contador por 7.
Cada resultado se almacena y se agrega a la lista de salida.
Finalmente, los diez múltiplos aparecen en la página web.

Resumen

Este ejercicio combina HTML para construir la interfaz y JavaScript para realizar los cálculos. El uso de un ciclo for permite repetir automáticamente la multiplicación por 7 diez veces, obteniendo así los primeros diez múltiplos de este número y mostrándolos en la página web.

Convertir Grado Celsius a Grado Fahrenheit en HTML y JavaScript

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>Convertir Grado Celsius a Grado Fahrenheit</h3>
    <form action="">
        <label for="">Grado Celsius:</label>
        <input type="number" id="celsius"><br><br>
        <input type="button" value="Convertir" onclick="convertir()">
        <input type="reset" value="Limpiar"><br><br>
        <label for="">resultado:</label>
        <input type="text" id="resultado">
    </form>
    <script>
        function convertir(){
            let celsius = parseFloat(document.getElementById('celsius').value);
            let convertir = 1.8 * celsius + 32;
            document.getElementById('resultado').value = `${convertir} °F`;
        }
    </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.
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.
parseFloat() --> analiza un argumento (si es necesario, lo convierte en una cadena) y devuelve un número de coma flotante.
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

<!DOCTYPE html>

Indica que el documento utiliza la versión HTML5. Esto permite que el navegador interprete correctamente todo el contenido de la página.

2. Etiqueta HTML

<html lang="es">

Es la etiqueta principal del documento HTML.

El atributo lang="es" indica que el idioma del sitio es español.

3. Encabezado (Head)

<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>

meta charset="UTF-8"
Permite utilizar correctamente letras con tilde, la letra ñ y otros caracteres especiales.
meta http-equiv
Mejora la compatibilidad del sitio con algunos navegadores.
meta viewport
Hace que la página sea adaptable a celulares, tabletas y computadoras.
title
Define el nombre que aparece en la pestaña del navegador.

4. Título del ejercicio

<h3>
Convertir Grado Celsius a Grado Fahrenheit
</h3>

Muestra el nombre del ejercicio dentro de la página web.

5. Formulario HTML

<form>

<label>Grado Celsius:</label>

<input type="number" id="celsius">

<input type="button"
value="Convertir"
onclick="convertir()">

<input type="reset"
value="Limpiar">

<label>Resultado:</label>

<input type="text"
id="resultado">

</form>

label
Muestra el texto descriptivo del campo.
input type="number"
Permite ingresar únicamente números correspondientes a los grados Celsius.
id="celsius"
Identifica el cuadro de texto para que JavaScript pueda obtener el valor ingresado.
input type="button"
Crea el botón Convertir.
onclick="convertir()"
Ejecuta la función convertir() cuando el usuario hace clic en el botón.
input type="reset"
Limpia todos los campos del formulario.
input type="text"
Muestra el resultado de la conversión.
id="resultado"
Identifica el cuadro donde aparecerá el resultado.

6. Función JavaScript

function convertir(){

    let celsius =
    parseFloat(
    document.getElementById('celsius').value);

    let convertir =
    1.8 * celsius + 32;

    document.getElementById('resultado').value =
    `${convertir} °F`;

}

Paso 1. Crear la función

La función convertir() contiene todas las instrucciones necesarias para realizar la conversión de temperatura. Se ejecuta al hacer clic en el botón Convertir.

Paso 2. Obtener el dato ingresado

let celsius =
parseFloat(document.getElementById('celsius').value);

document.getElementById('celsius') busca el cuadro de texto donde el usuario escribió la temperatura.

.value obtiene el contenido del cuadro.

parseFloat() convierte ese contenido en un número decimal.

Finalmente, el número se guarda en la variable celsius.

Paso 3. Realizar la conversión

let convertir =
1.8 * celsius + 32;

Se aplica la fórmula para convertir grados Celsius a grados Fahrenheit.

°F = (1.8 × °C) + 32

El resultado obtenido se almacena en la variable convertir.

Paso 4. Mostrar el resultado

document.getElementById('resultado').value =
`${convertir} °F`;

Se busca el cuadro de texto llamado resultado y se muestra la temperatura convertida agregando el símbolo °F.

7. Funcionamiento del programa

El usuario escribe una temperatura en grados Celsius.
Presiona el botón Convertir.
JavaScript obtiene el número ingresado.
Aplica la fórmula de conversión:

°F = (1.8 × °C) + 32

Finalmente muestra el resultado en grados Fahrenheit.

Calcular el salario semanal de un empleado a los que se les paga 15 Bs por hora si estás no superan las 35 horas. Cada hora por encima de 35 se considerará extra y se paga a 22 Bs en HTML y JavaScript

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>Calcular el salario semanal de un empleado a los que se les paga 15 Bs por hora si estás no superan las 35 horas. Cada hora por encima de 35 se considerará extra y se paga a 22 Bs</h3>
    <form action="">
        <label for="">Horas trabajadas:</label>
        <input type="number" id="hora"><br><br>
        <input type="button" value="Calcular" onclick="calcular()">
        <input type="reset" value="Limpiar"><br><br>
        <label for="">resultado:</label>
        <input type="text" id="resultado">
    </form>
    <script>
        function calcular(){
            let hora = parseFloat(document.getElementById('hora').value);
            if(hora > 35){
                dif = hora - 35;
                sueldo = (dif * 22) + (35 * 15);
            }else{
                sueldo = hora * 15;
            }
            document.getElementById('resultado').value = `El sueldo es ${sueldo} Bs.`;
        }
    </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.
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.
parseFloat() --> analiza un argumento (si es necesario, lo convierte en una cadena) y devuelve un número de coma flotante.
if --> se usa para especificar un bloque de código que se ejecutará, si una condición especificada es verdadera.
else --> se usa para especificar un bloque de código a ejecutar, si la misma condición es falsa.
> --> el operador mayor que ( > ) devuelve true si el operando izquierdo es mayor que el operando derecho.
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:

Este programa permite calcular el salario semanal de un empleado según la cantidad de horas trabajadas. Las primeras 35 horas se pagan a 15 Bs por hora. Si el empleado trabaja más de 35 horas, las horas adicionales se consideran horas extras y se pagan a 22 Bs por hora.

1. Estructura HTML

<!DOCTYPE html>
Indica que el documento utiliza la versión HTML5.
<html lang="es">
Especifica que el idioma del documento es español.
<head>
Contiene la información de configuración de la página, como la codificación, el tamaño de pantalla y el título.
<body>
Contiene todos los elementos visibles para el usuario.
<h3>
Muestra el título o enunciado del ejercicio.
<form>
Agrupa todos los controles del formulario.
<label>
Muestra el texto descriptivo del campo "Horas trabajadas".
<input type="number">
Permite ingresar únicamente valores numéricos correspondientes a las horas trabajadas.
<input type="button">
Ejecuta la función calcular() cuando el usuario hace clic en el botón.
<input type="reset">
Borra toda la información ingresada en el formulario.
<input type="text">
Muestra el sueldo calculado por el programa.

2. Explicación del código JavaScript

3. Función de cada línea del código

function calcular()
Define la función que se ejecutará cuando el usuario presione el botón Calcular.
let hora = parseFloat(...)
Obtiene el valor escrito por el usuario y lo convierte en un número para poder realizar operaciones matemáticas.
if(hora > 35)
Comprueba si el empleado trabajó más de 35 horas.
dif = hora - 35;
Calcula cuántas horas extras trabajó el empleado.
sueldo = (dif * 22) + (35 * 15);
Calcula el sueldo pagando:
- 35 horas normales a 15 Bs.
- Las horas extras a 22 Bs.
else
Se ejecuta cuando el empleado trabajó 35 horas o menos.
sueldo = hora * 15;
Calcula el sueldo multiplicando todas las horas trabajadas por 15 Bs.
document.getElementById('resultado').value
Muestra el salario calculado dentro de la caja de texto llamada resultado.

4. ¿Cómo funciona el programa?

El usuario escribe la cantidad de horas trabajadas.
Hace clic en el botón Calcular.
JavaScript obtiene el número ingresado.
Verifica si existen horas extras.
Calcula el salario correspondiente.
Finalmente muestra el sueldo en la caja de resultado.

5. Resumen

El código utiliza HTML para crear la interfaz donde el usuario ingresa las horas trabajadas y JavaScript para realizar el cálculo del salario. Si el empleado trabaja hasta 35 horas, todas se pagan a 15 Bs. Si trabaja más de 35 horas, las horas adicionales se pagan a 22 Bs. Finalmente, el programa muestra el sueldo total obtenido.

Mostrar los n primeros números de la siguiente serie: 0,5,10,15,20,25,30,35,40,... en HTML y JavaScript

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 primeros números de la siguiente serie: 0,5,10,15,20,25,30,35,40,...</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, c = 1;
            while(c <= n){
                t.push(n1);
                n1 += 5;
                c++;
            }
            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.
.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 suma ( += ) suma el valor del operando derecho a 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:

1. Estructura HTML

El formulario permite al usuario ingresar la cantidad de números que desea mostrar de la serie.

Label: Indica que se debe ingresar un número.
Input type="number": Permite escribir la cantidad de términos.
Botón Mostrar: Ejecuta la función mostrar().
Botón Limpiar: Borra los datos del formulario.
Textarea: Muestra la serie generada.

2. Función mostrar()

Esta función se ejecuta cuando el usuario hace clic en el botón Mostrar. Su trabajo es generar los primeros números de la serie que aumenta de cinco en cinco.

3. Obtener el número ingresado

let n = parseInt(document.getElementById('numero').value);

Se obtiene el valor escrito por el usuario y se convierte a un número entero mediante parseInt().

Si el usuario escribe 6, el programa generará los primeros seis números de la serie.

4. Declaración de variables

let t = [], n1 = 0, c = 1;

Variable	Función
t	Arreglo donde se almacenan los números de la serie.
n1	Guarda el número actual de la serie. Inicia en 0.
c	Contador que controla cuántos números se generan.

5. Ciclo while

while(c <= n){
    t.push(n1);
    n1 += 5;
    c++;
}

El ciclo se ejecuta hasta completar la cantidad de números indicada por el usuario.

Guarda el número actual en el arreglo.
Suma 5 para obtener el siguiente número.
Aumenta el contador.
Repite el proceso.

Iteración	Número guardado	Siguiente valor
1	0	5
2	5	10
3	10	15
4	15	20

6. Mostrar el resultado

document.getElementById('resultado').value = t;

Cuando termina el ciclo, el arreglo contiene todos los números de la serie y se muestran dentro del textarea.

Ejemplo:
Si el usuario escribe 8, el resultado será:

0, 5, 10, 15, 20, 25, 30, 35

Resumen

El usuario ingresa un número.
Se lee el valor ingresado.
La serie comienza en 0.
Se guarda cada número en un arreglo.
Después de cada número se suma 5.
El proceso se repite hasta completar la cantidad solicitada.
Finalmente la serie se muestra en el área de resultados.

Mostrar la siguiente serie: 0,5,10,15,20,25,30,35,40,... en HTML y JavaScript

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 la siguiente serie: 0,5,10,15,20,25,30,35,40,...</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 += 5;
            }
            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.
.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 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 una serie de números que comienza en 0 y aumenta de 5 en 5 hasta llegar al número ingresado o al múltiplo más cercano menor que él.

1. Estructura del documento HTML

<!DOCTYPE html>
<html>
<head>...</head>
<body>...</body>
</html>

Esta parte crea la estructura básica de la página web.

<!DOCTYPE html> indica que el documento utiliza HTML5.
<html> contiene todo el contenido de la página.
<head> guarda la configuración de la página.
<body> contiene todo lo que verá el usuario.

2. Título del ejercicio

<h3>Mostrar la siguiente serie: 0,5,10,15,20,25...</h3>

Muestra el nombre del ejercicio para indicar qué realizará el programa.

3. Entrada del número

Permite que el usuario escriba un número entero que servirá como límite para generar la serie.

4. Botón Mostrar

Cuando el usuario hace clic en este botón, se ejecuta la función mostrar().

5. Botón Limpiar

Borra el número ingresado y el resultado mostrado en el formulario.

6. Área de resultados

Aquí se muestran todos los números de la serie generada.

7. Función mostrar()

function mostrar(){

  let n = parseInt(document.getElementById("numero").value);
  let t = [], n1 = 0;

  while(n1 <= n){
    t.push(n1);
    n1 += 5;
  }

  document.getElementById("resultado").value = t;
}

Explicación de cada línea del JavaScript

let n = parseInt(document.getElementById("numero").value);
Obtiene el número que escribió el usuario y lo convierte en un número entero.
let t = [];
Crea un arreglo vacío donde se guardarán todos los números de la serie.
let n1 = 0;
Inicializa la variable con el valor 0, que será el primer número de la serie.
while(n1 <= n)
Mientras el valor de n1 sea menor o igual al número ingresado, el ciclo continuará ejecutándose.
t.push(n1);
Agrega el número actual al arreglo.
n1 += 5;
Incrementa el valor de la variable en 5 unidades para obtener el siguiente múltiplo de cinco.
document.getElementById("resultado").value = t;
Muestra todos los números almacenados en el arreglo dentro del área de resultados.

Resumen del funcionamiento

El programa realiza los siguientes pasos:

El usuario escribe un número.
La función comienza la serie desde 0.
Un ciclo while aumenta el valor de cinco en cinco.
Cada número se guarda dentro de un arreglo.
Cuando se alcanza el límite indicado por el usuario, la serie completa se muestra en el cuadro de resultados.

Ejemplo:

Si el usuario escribe 40, el resultado será:

0, 5, 10, 15, 20, 25, 30, 35, 40

Páginas

lunes, 29 de junio de 2026

Mostrar los n primeros números múltiplos de 7: 7,14,21,28,35,42,49,56,63,70,... en HTML y JavaScript

Código del ejercicio:

Definición de los códigos del ejercicio:

Explicación del Código:

1. Estructura principal del documento

2. Título del ejercicio

3. Formulario

4. Función mostrar()

5. Ciclo while

6. Mostrar el resultado

7. Funcionamiento paso a paso

8. Resumen

domingo, 28 de junio de 2026

Mostrar los números múltiplos de 7: 7,14,21,28,35,42,49,56,63,70,... en HTML y JavaScript

Código del ejercicio:

Definición de los códigos del ejercicio:

Explicación del Código:

Objetivo del programa

Explicación de cada parte del código

Funcionamiento del programa

Convertir Grado Celsius a Grado Fahrenheit en HTML y JavaScript

Código del ejercicio:

Definición de los códigos del ejercicio:

Explicación del Código:

1. Declaración del documento

2. Etiqueta HTML

3. Encabezado (Head)

4. Título del ejercicio

5. Formulario HTML

6. Función JavaScript

Paso 1. Crear la función

Paso 2. Obtener el dato ingresado

Paso 3. Realizar la conversión

Paso 4. Mostrar el resultado

7. Funcionamiento del programa

Calcular el salario semanal de un empleado a los que se les paga 15 Bs por hora si estás no superan las 35 horas. Cada hora por encima de 35 se considerará extra y se paga a 22 Bs en HTML y JavaScript

Código del ejercicio:

Definición de los códigos del ejercicio:

Explicación del Código:

1. Estructura HTML

2. Explicación del código JavaScript

3. Función de cada línea del código

4. ¿Cómo funciona el programa?

5. Resumen

Mostrar los n primeros números de la siguiente serie: 0,5,10,15,20,25,30,35,40,... en HTML y JavaScript

Código del ejercicio:

Definición de los códigos del ejercicio:

Explicación del Código:

1. Estructura HTML

2. Función mostrar()

3. Obtener el número ingresado

4. Declaración de variables

5. Ciclo while

6. Mostrar el resultado

Resumen

Mostrar la siguiente serie: 0,5,10,15,20,25,30,35,40,... en HTML y JavaScript

Código del ejercicio:

Definición de los códigos del ejercicio:

Explicación del Código:

1. Estructura del documento HTML

2. Título del ejercicio

3. Entrada del número

4. Botón Mostrar

5. Botón Limpiar

6. Área de resultados

7. Función mostrar()

Explicación de cada línea del JavaScript

Resumen del funcionamiento

Mostrar los n primeros números múltiplos de 7: 7,14,21,28,35,42,49,56,63,70,... en HTML y JavaScript