Calcular promedio en JavaScript, Explicación y ejemplo

JavaScript

Cuando aprendemos un lenguaje de programación, realizamos ejercicios que permitan afianzar nuestra destreza y el entendimiento de la sintaxis, en este artículo debemos calcular promedio en JavaScript de los números ingresados por el usuario, haremos varios ejemplos con diferentes contextos, un ejemplo sencillo que sin duda nos permitirá conocer aspectos importantes del lenguaje.

Calcular promedio en JavaScript

Para este ejemplo realizaremos el promedio de dos formas, 1 haciendo uso de mensajes tipo “prompt” para solicitar los números a promediar; y la segunda será teniendo un formulario en HTML con los controles necesarios para ingresar los números.

1. Promediando valores en JavaScript forma 1: Haciendo uso de prompt

Cuando hacemos uso de prompt podemos lanzar cuadros de diálogo al usuario para ingresar los valores a promediar:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Calcular promedio en JavaScript</title>
</head>
<body>
</body>
<script>
var vr1 = prompt("Ingrese el primer valor");
var vr2 = prompt("Ingrese el segundo valor");
var vr3 = prompt("Ingrese el tercer valor");
var p = (parseFloat(vr1)+parseFloat(vr2)+parseFloat(vr3))/3;
alert("Su promedio es: "+p)
</script>
</html>

En el código anterior utilizamos una estructura HTML (Aunque no es obligatorio para este ejemplo), para mostrar la integración con JavaScript, adicional hacemos la solicitud de 3 números y cada valor lo convertimos a número (con parseFloat) para sumarlo y luego dividir dicha suma entre 3.

2. Promediando valores en JavaScript forma 2: Con un formulario HTML.

Utilizar formularios en HTML siempre será mucho más cómodo para el usuario final, veamos como podemos promediar valores integrando HTML y JavaScript.

Para este ejemplo debemos diseñar el siguiente formulario en HMTL:

calcular promedio en javascript

Código HTML de la página:

<!DOCTYPE html>
<html>
<body>
<h2>Calcular promedio en JavaScript</h2>
<form>
 Primer Número:<br>
 <input type="text" id="t1">
 <br>
 Segundo Número:<br>
 <input type="text" id="t2">
 <br>
 Tercer Número:<br>
 <input type="text" id="t3">
 <br><br>
 <input type="button" value="Calcular">
</form> 
<p id="promedio"></p>
</body>
</html>

Programación del evento onclik en el botón

La acción de calcular se desencadenará al hacer clic en el botón, para ello escribimos nuestro código JavaScript.

<!DOCTYPE html>
<html>
<body>
<h2>Calcular promedio en JavaScript</h2>
<form>
 Primer Número:<br>
 <input type="text" id="t1">
 <br>
 Segundo Número:<br>
 <input type="text" id="t2">
 <br>
 Tercer Número:<br>
 <input type="text" id="t3">
 <br><br>
 <input type="button" value="Calcular" onclick="Calcular();">
</form> 
<p id="promedio"></p>
</body>
<script>
 function Calcular() {
 var vr1 = document.getElementById('t1').value;
 var vr2 = document.getElementById('t2').value;
 var vr3 = document.getElementById('t3').value;
 var p = (parseFloat(vr1)+parseFloat(vr2)+parseFloat(vr3))/3;
 document.getElementById('promedio').innerHTML = p;
 }
</script>
</html>

En el código anterior hacemos varias cosas, entre ellas:

  • Creamos una función con todo el código a ejecutar.
  • Configuramos el evento clic en el botón.
  • Mostramos en un párrafo vacío el valor obtenido.

Como resultado obtendríamos:

Calcular promedio en JavaScript

Cabe decir que en el formulario anterior no se realizaron validaciones, que garanticen ingresar los números solicitados, esta deberá hacerse para evitar errores en el cálculo, así mismo de esta manera logramos realizar un promedio de tres números en JavaScript.

Si este post fue de ayuda para ti, no olvides dejar un comentario, también puedes contar tu experiencia o lo que estés haciendo. Nos ayuda a seguir creciendo. ¡Vamos!, solo te llevará 1 minuto.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *