Cuando se está empezando en el desarrollo web es importante conocer cómo realizar una suma de valores en JavaScript, debido a que esto sería de vital ayuda en caso de que requiramos una página web donde se necesita ingresar una serie de valores, y dentro de la programación se debe de realizar alguna operación matemática, como en este caso la suma, y así obtener un resultado y poder representarlo en nuestra página web para mostrarlo al usuario.
Si te interesa ver más ejemplos sobre programación en JavaScript o cualquier otro lenguaje de programación, o te interesa saber sobre más temas relacionados al desarrollo web, te recomiendo que visites mi página principal donde encontrarás mas ejercicios explicados paso a paso.
En este caso para una representación gráfica se van a usar funciones simples que se muestran una pantalla al usuario, pero también es muy fácil sustituirlas por acciones o campos que escriban dentro de la página web, como un formulario y así poder obtener los resultados y mostrárselos dentro de la misma página web utilizando tanto HTML como CSS.
👊 ¿QUIERES INCREMENTAR TUS CONOCIMIENTOS EN JAVASCRIPT? 👊
Entonces te recomiendo tomar este curso de JavaScript donde aprenderás a programar desde cero hasta convertirte en un experto, realizando varios ejercicios prácticos para que puedas aprender de una mejor manera.
👇
CURSO COMPLETO
Suma de valores en JavaScript
La suma de valores en JavaScript simplemente consta de pedirle al usuario primeramente un número, ese número se guarda en una variable, seguido de eso se le vuelve a pedir al usuario que ingrese otro número, de igual manera se vuelve a guardar el numero en otra variable y finalmente dentro del mismo programa se realiza la operación de suma, para al final mostrarle el resultado de esta suma al usuario por medio de una ventana de información.
Creación de archivo HTML
Primeramente se debe de crear un archivo HTML el cual debe de incluir las etiquetas básicas para una página web, para poder posteriormente crear el archivo para la suma de valores en JavaScript, donde se va a realizar la programación. En este caso el archivo HTML no va a contener nada en el cuerpo de la página, debido a que sólo va a ser una demostración, por lo cual se van a usar alertas que se van a mostrar al usuario.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="javascript2.js"></script>
</head>
<body>
</body>
</html>
También dentro del archivo HTML es muy importante integrar la etiqueta que va a contener el archivo de la suma de valores en JavaScript, para lo cual se debe colocar la siguiente etiqueta dentro de la sección del Head en este archivo HTML y dentro de la etiqueta se debe colocar el nombre respectivo del archivo JavaScript que vaya a creado.
<script src="javascript2.js"></script>
Creación de archivo JavaScript
Una vez que hayamos creado nuestro archivo HTML, ahora debemos crear nuestro archivo JavaScript con el nombre que le hayamos colocado en la etiqueta <script>, este archivo debe de tener la extensión .js para que funcione correctamente y dentro de él se va a colocar toda la programación respectiva para realizar la suma de valores en JavaScript.
Código de la suma de valores en JavaScript
A continuación se presenta el código creado para realizar la suma de valores en JavaScript, el cual se va a explicar detenidamente más adelante cada sección que contiene.
var n1 = 0;
var n2 = 0;
var sum = 0;
n1 = parseInt(prompt("Enter a number: "));
n2 = parseInt(prompt("Enter another number: "));
sum = n1 + n2;
alert("The sum is: " + sum);
Explicación del código
Primeramente se crean las variables que se van a utilizar en todo el código, las cuales son las del primer número, del segundo número y de la suma total. Esas variables se van a declarar como globales para utilizarlas en todo el código y se van inicializar en cero.
var n1 = 0; var n2 = 0; var sum = 0;
Para pedir al usuario los valores se va utilizar la función prompt(), la cual es una función nativa de JavaScript que le pide información al usuario para que lo puede escribir, pero debido a que esa información se traduce a texto, es necesario convertirla entero, para lo cual se debe de usar la función parseInt() y se guarda el valor en una variable. Eso se hace para los dos números solicitados.
n1 = parseInt(prompt("Enter a number: "));
n2 = parseInt(prompt("Enter another number: "));
Para realizar la suma se hace como en cualquier otro lenguaje de programación, simplemente sumando un número con otro y guardándolo en la variable de resultado.
sum = n1 + n2;
Para mostrar el resultado al usuario se va a hacer uso de otra función nativa de JavaScript, la cual es la de alert(), que sirve para mostrar a un usuario cierta información, que en este caso va a ser el resultado de la suma.
alert("The sum is: " + sum);
👊 ¿NECESITAS UN HOSTING PARA TU PAGINA WEB O TIENDA ONLINE? 👊
Entonces te recomiendo usar Hostinger, que cuenta con una gran cantidad de ventajas y herramientas para crear tu Web de manera sencilla y profesional.
Estas son una de las características al contratar Hostinger:
💽 Hospedaje Profesional
💻 Sitio Web seguro con SSL
🔋 Velocidad de procesamiento
🖲 Interfaz fácil de usar
💰 Dominio Gratis
Entre muchas otras cosas mas…
Resultados en el navegador
Para presentar el resultado de nuestro código para realizar una suma de valores en JavaScript, primeramente se va a observar la ventana donde se pide la información y finalmente se va a observar otra ventana donde se presenta el resultado.
