Ejemplo JavaScript: operaciones de sumar, restar, multiplicar y dividir.

 

Logotipo-JS-150x150

Ejemplo de código fuente en JavaScript de un método para realizar operaciones matemáticas para sumar, restar, multiplicar y dividir, dos números dados en dos cajas de texto. También verificaremos que el usuario introduce esos números en esas cajas.

 

 

Descripción del ejemplo

Lo que hace este ejemplo es llamar en el evento onClick de cada input, al método “operaciones()”, pasándole como parámetro el tipo de operación matemática que vamos a utilizar en cada caso, y realizando dicha operación mostrándola en un alert.

Para ver este ejemplo algo más avanzado y emular el funcionamiento de una calculadora básica, podemos hacerlo en el siguiente ejemplo:

 

Código

Éste sería el método de JavaScript con el que se harían las diferentes operaciones:

function operaciones(op)
{

    var ops = {
        sumar: function sumarNumeros(n1, n2) {
            return (parseInt(n1) + parseInt(n2));
        },

        restar: function restarNumeros(n1, n2) {
            return (parseInt(n1) - parseInt(n2));
        },
		
		multiplicar: function multiplicarNumeros(n1, n2) {
            return (parseInt(n1) * parseInt(n2));
        },

        dividir: function dividirNumeros(n1, n2) {
            return (parseInt(n1) / parseInt(n2));
        }


    };



    var num1 = document.getElementById("num1").value;
    var num2 = document.getElementById("num2").value;

	
	//Comprobamos si se ha introducido números en las cajas
	if (isNaN(parseFloat(document.getElementById('num1').value))) {
		alert("Indique un número en 'numero1'");
		document.getElementById("num1").innerText = "0";
		document.getElementById("num1").focus();
		} else if (isNaN(parseFloat(document.getElementById('num2').value))) {
		alert("Indique un número en 'numero2'");
		document.getElementById("num2").innerText = "0";
		document.getElementById("num2").focus();
	}
	else {
	//Si se han introducido los números en ámbas cajas, operamos:
		switch(op) {
			case 'sumar':
				var resultado = ops.sumar(num1, num2);
				alert (resultado);
				break;
			case 'restar':
				var resultado = ops.restar(num1, num2);
				alert (resultado);
				break;
			case 'multiplicar':
				var resultado = ops.multiplicar(num1, num2);
				alert(resultado);
				break;
			case 'dividir':
				var resultado = ops.dividir(num1, num2);
				alert(resultado);
				break;

		}
	}

}

 

Y éste sería el código HTML del formulario donde realizaremos las operaciones:

<form>
	Número 1: <input id="num1" type="number" />
	Número 2: <input id="num2" type="number" />
	<br /><br />
	<input type="button" value="SUMAR" onclick="operaciones('sumar'); return false;" /><br />
	<input type="button" value="RESTAR" onclick="operaciones('restar'); return false;" /><br />
	<input type="button" value="MULTIPLICAR" onclick="operaciones('multiplicar'); return false;" /><br />
	<input type="button" value="DIVIDIR" onclick="operaciones('dividir'); return false;" />
</form>

 

Demo del ejemplo

Intruduce un número 1 y un número 2 y realiza la operación que desees:

 

Número 1: Número 2:




 

 

Valoración General

[Valoraciones:  22    Promedio:  4 de 5]
  • Javier Crego

    Hola Melvin!

    ¿Dónde colocas el código javascript?

  • Helen

    Hola Javier, soy nueva en esto de html y me han puesto a realizar una calculadora simple con operaciones aritmeticas basicas (+,-,*,/). El caso es que no logro hacer que el boton de calcular realice mas de una operacion aritmetica; me parece que necesito de una condiccion o algo parecido, te agradeceria si me pudieras ayudar.

  • maria liliana

    hola
    cómo abro la consola de java si mi computador es un mac. En un curso que estoy haciendo me dijeron que ctrl+shift+i pero así no es para mac

    • Javier Crego

      Hola Maria liliana!

      Para abrir la consola en Mac, dependiendo de tu navegador, sería así:

      Chrome

      Cmd + Opt + J

      Firefox

      Cmd + Opt + K

      Opera

      Cmd + Opt + I

      Safari

      Cmd + Opt + C

  • Alex

    Hola estimado, excelente tutorial, pero tengo un problema con un codigo similar.
    Necesito dividir un valor ingresado por el usuario, donde el divisor, es una Variable que cambia de forma diaria, rescata de una web bancaria (esto es un trabajo para la universidad) y el script que la llama es la siguiente

    Como ingreso este valor como “divisor”?

    • Javier Crego

      Hola Alex!

      Si en tu caso, necesitas que el divisor sea variable y no fijo o que alguien lo introduzca en un formulario como es el caso de este ejemplo, necesitarías por tanto cambiar el código referente a la segunda variable num2:

          var num1 = document.getElementById("num1").value;
          var num2 = nombre_variable_no_estática;
      

      Donde pongo nombre_variable_no_estática, tienes que sustituirlo por el nombre de la variable que dices tú que varía cada día.

  • Mariana

    Oye, me aparecen los botones y eso, pero a la hora de ejecutarlo no me aparece el alert, estoy ejecutandolo en bloc de notas y no crei que poniendo el codigo asi por si solo ejecutaria asi que le puse, el siguiente al principio

    y este al final

    Número 1:
    Número 2:

    • Javier Crego

      Hola Mariana!

      El código Javascript lo tendrías que meter entre las etiquetas:

      <script> /*aquí iría el código de javascript*/ </script> 

      y si no te sale el alert, puede ser debido a que tienes desactivado el javascript en tu navegador. Prueba con otro navegador a ver.

      Un saludo.

  • omar fabian

    Hola buenas noches que bien todo el código ,soy nuevo en programación y debo hacer estas funciones para un trabajo,me gustaría saber en donde meto los códigos con que archivos ,en html en javascript juntos ,separados? le agradezco infinitamente .se le admira .

    • Javier Crego

      Hola Omar.

      El código de javscript lo puedes meter dentro del código HTML de dos maneras:

      1. Dentro de las etiquetas

      <script> /*aquí iría el código de javascript*/ </script> 

      2. Ponerlo dentro de un archivo js y luego incluirlo así:

      <script src="http://mipaginaweb.com/archivoJavaScript.js"></script> 
  • Juan

    Saludos, ayuda por favor no me sale el resultado ya intente con varios navegadores,.

    • Javier Crego

      Hola Juan.

      ¿En la demo que está puesta aquí en esta página, no te sale el resultado?
      ¿o en una página externa tuya?

  • Baldomero Perez Martinez

    Excelentes ejemplos

  • Maynor Roda

    Porque no me sale el resultado: Alert

    • Javier Crego

      Intenta a probarlo con otro navegador.

      ¿Te sale el alert con el resultado en la demo del ejemplo aquí en esta web?

  • ana

    disculpa estoy tratando de ejecutar el codifo y no hacen la funcion los botones podrias decirme por que?

    • Javier Crego

      Hola Ana.
      ¿Cómo ejecutas el código?.

      El código javascript tendría que ir dentro de las etiquetas <script>…</script> o ponerlo dentro de un archivo js y luego incluirlo así:

      <script src=”http://mipaginaweb.com/archivoJavaScript.js”></script>