Una humilde calculadora en javascript

Hola gente hermosa les dejo este codigo de una simple calculadora que hice en javascript

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>calculadora</title>
<style type="text/css">
.res{position:absolute;
     top:100px;
 left:100px;
 width:auto;
 height:auto;
}
</style>
</head>

<body>
<form id=form1 name="formulario1" class="form">
<input type="text" id="num1" name="num1"/>
<input type="text" id="ope" name="ope"/>
<input type="text" id="num2" name="num2" />
<input type="button" id="boton" name="boton" value="operar" />
</form>
<div class="res" id="res">
</div>
</body>
<script type="text/javascript">
function operar(){
var dive=document.getElementById('res');
var numero1=document.forms["formulario1"].elements["num1"].value;
var numero2=document.forms["formulario1"].elements["num2"].value;
var operador=document.forms["formulario1"].elements["ope"].value;
if(operador=="+"){
var res=eval(numero1)+eval(numero2);
dive.innerHTML=res;
}
else if(operador=="-"){
    var res=eval(numero1)-eval(numero2);
dive.innerHTML=res;
}
else if(operador=="*"){
var res=eval(numero1)*eval(numero2);
dive.innerHTML=res;
}
else if(operador=="/"){
var res=eval(numero1)/eval(numero2);
dive.innerHTML=res;
}
}


document.getElementById('boton').addEventListener('click',operar,false);
</script>
</html>



Explicacion

Primero creamos la clase res que corresponde al div  donde aparecera el resultado de la operacion dinamicamente.

Luego creamos un formulario con 4 elementos, 3 input text, donde se introduciran el primer operador, el signo de la operacion, y el segundo operador respectivamente y un botton normal, prestenle atencion a la propiedad name y value de los imput. O para los que no saben value es el contenido del campo o lo que se escribe.

Codigo

var dive=document.getElementById('res');
creamos una referencia al div id=res, y la guardamos en la variable dive.

var numero1=document.forms["formulario1"].elements["num1"].value;
guardamos en la variable numero1 el valor del campo de nombre num1. 

Con document.forms["algo"] accedemos al formulario de nombre algo,
y con 
document.forms["algo"].elements["campo1"].value accedemos al texto que contiene el input de nombre campo1 del formulario de nombre algo.

los operadores condicionales disctinguen cada caso el simbolo ingresado en el campo para el operador y de acuerdo a esto realizan la operacion correspondiente al simbolo ingresado, la funcion eval trasforma a numero cualquier string que tenga como argumento.

dive.innerHTML=res;
Este codigo escribe en el div apuntado por dive el valor de la variable res que es el resultado de operar.

Finalemente
document.getElementById('boton').addEventListener('click',operar,false);
lo que hace es asigna al elemento de id=boton, el evento click y al detectar este click en ese elemento llama a la funcion operar.

Si ya es muy sencillo pero es que tenia poco tiempo, y esto salio bastante rapido. y estoy haciendo un tutorial que usa muchas mas funciones en javascript que todavia no termino.

chaito

posdata: un usuario me aviso de un error en el codigo puesto que no se puede dividir un numero en cero, habria que agregar eso en el codigo para la division para evitar realizarla y que muestre el mensaje:no se puede dividir por cero despues de hacer click en el boton operar:

Eh aqui una imagen

           
Una humilde calculadora en javascript
0 Puntos Score: 0/10
Visitas: 1999 Favoritos: 4
7 Comentarios Una humilde calculadora en javascript
quisas la use en alguna prueva de programacion gracias
@Platonto jajaja, si tambien puede hacer 2*2, 2/2 y 2-2, jejej no es mucho pero es un comienzo para tener una idea
seguro a alguien que se este iniciando en javsript le sirve para algo.
Cita Platonto: Mostrar
Se me paso por alto eso  
Exelente muy buen laburo  
@Max.Damage gracias amigo me alegro que te haya gustado
Para dejar un comentario Registrate! o.. eres ya usuario? Accede!