Ejemplo Javascript: calculadora básica

 

Logotipo-JS-150x150

Ejemplo de código fuente en JavaScript de una calculadora básica y sencilla para realizar operaciones matemáticas estándar de sumar, restar, multiplicar y dividir.

 

 

Descripción del ejemplo

El ejemplo está basado en el ejemplo-javascript-operaciones-de-sumar-restar-multiplicar-y-dividir/pero mejorándolo un poco más para que pueda funcionar como una calculadora sencilla y estándar.

 

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 operacion;

	switch(op) {
		case 'sumar':
			var operando1 = document.getElementById("resultado").value;
			document.getElementById("resultado").value = operando1 + "+";
			operacion = document.getElementById("resultado").value;
			document.getElementById("memoria").value = "suma";
			break;
		case 'restar':
			var operando1 = document.getElementById("resultado").value;
			document.getElementById("resultado").value = operando1 + "-";
			operacion = document.getElementById("resultado").value;
			document.getElementById("memoria").value = "resta";
			break;
		case 'multiplicar':
			var operando1 = document.getElementById("resultado").value;
			document.getElementById("resultado").value = operando1 + "*";
			operacion = document.getElementById("resultado").value;
			document.getElementById("memoria").value = "multiplicacion";
			break;
		case 'dividir':
			var operando1 = document.getElementById("resultado").value;
			document.getElementById("resultado").value = operando1 + "/";
			operacion = document.getElementById("resultado").value;
			document.getElementById("memoria").value = "division";
			break;
			
		case 'igual':	
			
			operacion = document.getElementById("resultado").value;
			
			var memoriaop = document.getElementById("memoria").value;
			
			switch(memoriaop) {
				case 'suma':
					var operandos = operacion.split("+");
					var resultado = ops.sumar(operandos[0], operandos[1]);
					document.getElementById("resultado").value = resultado;
					break;
				case 'resta':
					var operandos = operacion.split("-");
					var resultado = ops.restar(operandos[0], operandos[1]);
					document.getElementById("resultado").value = resultado;
					break;
				case 'multiplicacion':
					var operandos = operacion.split("*");
					var resultado = ops.multiplicar(operandos[0], operandos[1]);
					document.getElementById("resultado").value = resultado;
					break;
				case 'division':
					var operandos = operacion.split("/");
					var resultado = ops.dividir(operandos[0], operandos[1]);
					document.getElementById("resultado").value = resultado;
					break;					
			
			}	
			

			break;
			

	}


}

 

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



<form>

<table style="border: 3px solid #000; text-align:center;">
 <tr style="text-align:center;">
 <td colspan = "4">
 <input id="resultado" type="text" value="0" size="20" style="border: 3px solid blue; padding: 10px;" /><input id="memoria" type="hidden" value="0" />
 </td>
 </tr>

 <tr style="text-align:center;">
 <td>
 <input type="button" value="7"
 onClick="var str1=document.getElementById('resultado').value; if(str1 == '0'){document.getElementById('resultado').value=7}else{ var str2='7'; var res = str1.concat(str2);document.getElementById('resultado').value=res;}"
 style="width:55px">
 </td>
 <td>
 <input type="button" value="8"
 onClick="var str1=document.getElementById('resultado').value; if(str1 == '0'){document.getElementById('resultado').value=8}else{ var str2='8'; var res = str1.concat(str2);document.getElementById('resultado').value=res;}"
 style="width:55px">
 </td>
 <td>
 <input type="button" value="9"
 onClick="var str1=document.getElementById('resultado').value; if(str1 == '0'){document.getElementById('resultado').value=9}else{ var str2='9'; var res = str1.concat(str2);document.getElementById('resultado').value=res;}"
 style="width:55px">
 </td>
 <td>
 <input type="button" value="/"
 onClick="operaciones('dividir'); return false;"
 style="width:55px">
 </td>
 </tr>

 <tr style="text-align:center;">
 <td>
 <input type="button" value="4"
 onClick="var str1=document.getElementById('resultado').value; if(str1 == '0'){document.getElementById('resultado').value=4}else{ var str2='4'; var res = str1.concat(str2);document.getElementById('resultado').value=res;}"
 style="width:55px">
 </td>
 <td>
 <input type="button" value="5"
 onClick="var str1=document.getElementById('resultado').value; if(str1 == '0'){document.getElementById('resultado').value=5}else{ var str2='5'; var res = str1.concat(str2);document.getElementById('resultado').value=res;}"
 style="width:55px">
 </td>
 <td>
 <input type="button" value="6"
 onClick="var str1=document.getElementById('resultado').value; if(str1 == '0'){document.getElementById('resultado').value=6}else{ var str2='6'; var res = str1.concat(str2);document.getElementById('resultado').value=res;}"
 style="width:55px">
 </td>
 <td>
 <input type="button" value="*"
 onClick="operaciones('multiplicar'); return false;"
 style="width:55px">
 </td>
 </tr>

 <tr style="text-align:center;">
 <td>
 <input type="button" value="1"
 onClick="var str1=document.getElementById('resultado').value; if(str1 == '0'){document.getElementById('resultado').value=1}else{ var str2='1'; var res = str1.concat(str2);document.getElementById('resultado').value=res;}"
 style="width:55px">
 </td>
 <td>
 <input type="button" value="2"
 onClick="var str1=document.getElementById('resultado').value; if(str1 == '0'){document.getElementById('resultado').value=2}else{ var str2='2'; var res = str1.concat(str2);document.getElementById('resultado').value=res;}"
 style="width:55px">
 </td>
 <td>
 <input type="button" value="3"
 onClick="var str1=document.getElementById('resultado').value; if(str1 == '0'){document.getElementById('resultado').value=3}else{ var str2='3'; var res = str1.concat(str2);document.getElementById('resultado').value=res;}"
 style="width:55px">
 </td>
 <td>
 <input type="button" value="-" 
 onClick="operaciones('restar'); return false;"
 style="width:55px">
 </td>
 </tr>

 <tr style="text-align:center;">
 <td>
 <input type="button" value="0"
 onClick="var str1=document.getElementById('resultado').value; if(str1 == '0'){document.getElementById('resultado').value=0}else{ var str2='0'; var res = str1.concat(str2);document.getElementById('resultado').value=res;}"
 style="width:55px"> 
 </td>
 <td colspan="2">
 <input type="button" value="="
 onClick="operaciones('igual'); return false;"
 style="width:110px">
 </td>
 <td>
 <input type="button" value="+"
 onClick="operaciones('sumar'); return false;"
 style="width:55px">
 </td>
 </tr>


</table>

</form>


 

 

Demo del ejemplo

 

 

Descargar

Valoración General

[Valoraciones:  4    Promedio:  3.8 de 5]
  • Pingback: Ejemplo JavaScript: operaciones de sumar, restar, multiplicar y dividir. - EjemploCodigo()

  • HeyBetancos HeyBetancos

    Javier saludos, mi nombre es Michael Espinoza, estoy desarrollando una pagina en Visual Studio con Asp.net con lenguaje C#, me podrías ayudar con un ejemplo para llamar una funcion JavaScript cada vez que el usuario inserta un caracter en Asp TextBox, es decir tengo que realizar unos calculos con los datos ingresados en el momento, gracias

    • Javier Crego

      Hola Michael.

      Para hacer eso, lo tendrías que hacer con un evento de teclado, dependiendo de lo que quieras hacer.
      Por ejemplo, podrías probarlo con el evento OnKeyPress, bien escribiendo la función JavaScript en dicho evento que lo verás en las propiedades de la página del Visual Studio, o bien editando el código y buscando tu textbox y añadiendo el evento con la función:

      Échale un vistazo a este ejemplo donde puedes probarlo tú mismo como funciona:

      http://www.w3schools.com/jsref/event_onkeypress.asp