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.
ÍNDICE
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.
É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>