lunes, 22 de junio de 2026

Suma de dos números o más números en HTML y JavaScript

Código del ejercicio: Suma de dos números

<!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>Suma de dos números</h3>
    <form action="">
        <label for="">número 1:</label>
        <input type="number" id="n1"><br><br>
        <label for="">número 2:</label>
        <input type="number" id="n2"><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 n1 = parseFloat(document.getElementById('n1').value);
            let n2 = parseFloat(document.getElementById('n2').value);
            let s = n1 + n2;
            document.getElementById('resultado').value = s;
        }
    </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.

Explicación del Código:

Este programa permite ingresar dos números mediante un formulario en HTML y calcular su suma utilizando JavaScript. Cuando el usuario presiona el botón Calcular, el programa obtiene los valores escritos, realiza la suma y muestra el resultado en la caja de texto correspondiente.

Explicación de cada parte del código

Código Función
<!DOCTYPE html> Indica que el documento está escrito en HTML5.
<html lang="es"> Inicia el documento HTML e indica que el idioma es español.
<head> Contiene la configuración de la página.
<meta charset="UTF-8"> Permite mostrar correctamente caracteres especiales.
<meta name="viewport"> Hace que la página sea adaptable a dispositivos móviles.
<title> Define el título que aparece en la pestaña del navegador.
<body> Contiene todo el contenido visible de la página.
<h3> Muestra el título del ejercicio.
<form> Agrupa todos los controles del formulario.
<label> Muestra el nombre de cada campo.
<input type="number"> Permite ingresar únicamente números.
id="n1" e id="n2" Identifican las cajas de texto para que JavaScript pueda acceder a ellas.
<input type="button"> Crea el botón Calcular.
onclick="calcular()" Ejecuta la función calcular() al hacer clic.
<input type="reset"> Limpia todos los campos del formulario.
id="resultado" Permite mostrar el resultado de la suma.
<script> Contiene el código JavaScript.
function calcular() Crea una función llamada calcular.
parseFloat() Convierte el texto ingresado en un número decimal.
document.getElementById() Busca un elemento mediante su identificador (id).
.value Obtiene o modifica el valor de una caja de texto.
let s = n1 + n2; Realiza la suma de ambos números.
resultado.value = s; Muestra el resultado obtenido.

¿Cómo funciona el programa?

  1. El usuario escribe el primer número.
  2. Escribe el segundo número.
  3. Presiona el botón Calcular.
  4. JavaScript obtiene ambos valores.
  5. Convierte los datos a números mediante parseFloat().
  6. Realiza la suma.
  7. Muestra el resultado en pantalla.

¿Cómo sumar más de dos números?

Para sumar tres o más números solamente se agregan más cajas de texto y se incluyen en la operación. 

let suma = n1 + n2 + n3 + n4;

Resumen

Este ejercicio muestra cómo crear un formulario en HTML, obtener datos ingresados por el usuario, convertirlos en números utilizando parseFloat(), realizar una operación matemática y mostrar el resultado utilizando JavaScript.

Código del ejercicio: Suma de cinco números

<!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>Suma de cinco números</h3>
    <form action="">
        <label for="">número 1:</label>
        <input type="number" id="n1"><br><br>
        <label for="">número 2:</label>
        <input type="number" id="n2"><br><br>
        <label for="">número 3:</label>
        <input type="number" id="n3"><br><br>
        <label for="">número 4:</label>
        <input type="number" id="n4"><br><br>
        <label for="">número 5:</label>
        <input type="number" id="n5"><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 n1 = parseFloat(document.getElementById('n1').value);
            let n2 = parseFloat(document.getElementById('n2').value);
            let n3 = parseFloat(document.getElementById('n3').value);
            let n4 = parseFloat(document.getElementById('n4').value);
            let n5 = parseFloat(document.getElementById('n5').value);
            let s = n1 + n2 + n3 + n4 + n5;
            document.getElementById('resultado').value = s;
        }
    </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.

Explicación del Código:

Este programa permite ingresar cinco números desde un formulario. Cuando el usuario hace clic en el botón Calcular, JavaScript obtiene los valores escritos, realiza la suma de todos ellos y muestra el resultado en una caja de texto.

1. Declaración del documento

<!DOCTYPE html>

Indica que el documento está escrito en HTML5 para que el navegador interprete correctamente el código.

2. Etiqueta HTML

<html lang="es">

Es la etiqueta principal del documento. El atributo lang="es" indica que el contenido está escrito en español.

3. Sección <head>

<head>

En esta sección se agregan configuraciones importantes del documento.

  • meta charset="UTF-8": Permite mostrar correctamente caracteres especiales como la ñ y las vocales con tilde.
  • meta viewport: Hace que la página sea adaptable a dispositivos móviles.
  • title: Define el nombre que aparecerá en la pestaña del navegador.

4. Sección <body>

<body>

Contiene todos los elementos visibles de la página, como el título, el formulario y el resultado.

5. Título del ejercicio

<h3>Suma de cinco números</h3>

Muestra el nombre del ejercicio en la parte superior del formulario.

6. Formulario

<form>

Agrupa todas las cajas de texto y botones utilizados en el programa.

7. Cajas de texto

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

Cada caja de texto permite ingresar un número. Los identificadores n1, n2, n3, n4 y n5 permiten que JavaScript pueda acceder a cada valor.

8. Botón Calcular

<input type="button" value="Calcular" onclick="calcular()">

Cuando el usuario hace clic en este botón, se ejecuta la función calcular(), encargada de realizar la suma.

9. Botón Limpiar

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

Borra todos los datos escritos en el formulario y deja las cajas de texto vacías.

10. Caja de resultado

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

Muestra el resultado obtenido después de realizar la suma.

11. Función calcular()

function calcular(){ }

Esta función contiene todas las instrucciones necesarias para obtener los números, sumarlos y mostrar el resultado.

12. Obtener los valores

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

Esta línea realiza tres acciones:

  • Busca la caja de texto cuyo identificador es n1.
  • Obtiene el valor escrito por el usuario mediante .value.
  • Convierte ese dato en un número decimal utilizando parseFloat().

El mismo procedimiento se realiza con n2, n3, n4 y n5.

13. Sumar los números

let s = n1 + n2 + n3 + n4 + n5;

Se realiza la suma de los cinco números y el resultado se guarda en la variable s.

14. Mostrar el resultado

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

Busca la caja de texto llamada resultado y muestra el valor almacenado en la variable s.

Funcionamiento del programa

  1. El usuario escribe cinco números.
  2. Hace clic en el botón Calcular.
  3. JavaScript obtiene los cinco valores ingresados.
  4. Convierte los datos a tipo numérico.
  5. Realiza la suma.
  6. Muestra el resultado en la caja de texto correspondiente.

Resumen

Este ejercicio muestra cómo HTML permite crear un formulario para ingresar datos y cómo JavaScript puede obtener esos datos, convertirlos en números mediante parseFloat(), realizar una operación matemática y mostrar el resultado al usuario.

a la/s
Etiquetas:

No hay comentarios.:

Publicar un comentario

Suscribirse a: Comentarios de la entrada (Atom)

Resta de dos números o más números en HTML y JavaScript

Código del ejercicio: Resta de dos números <! DOCTYPE html > < html lang = "es" > < head >     < ...

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