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

  1. El usuario presiona el botón Mostrar.
  2. Se ejecuta la función mostrar().
  3. El ciclo for realiza diez repeticiones.
  4. En cada repetición se multiplica el contador por 7.
  5. Cada resultado se almacena y se agrega a la lista de salida.
  6. 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.

No hay comentarios.:

Publicar un comentario

Convertir centímetros a metros en HTML y JavaScript

Código del ejercicio: <! DOCTYPE html > < html lang = "es" > < head >     < meta charset = ...

Copyright ©2025 Ejercicios de programación. Todos los derechos reservados. ❤️