Calculadora en javascript y html buena para principiantes

aqui les muestro una calculadora facil en javascript la puse porque necesitaba una en la U y no encontre naa en taringa que me gustara.
conocimientos minimos:
*saber sobre etiquetas html
*saber sobre sentencias en javascript y el minimo de como se usa una funcion

IMPORTANTE:
copia el codigo a continuacion en un bloc de notas y dale guardar como: nombreoloquequieras.html para poder ejecutarlo



<!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>Documento sin t&iacute;tulo</title>
<style>/*esto es la declaracion de clases para estilos no se asusten por esto es solo para que se vea bonito too XD*/
.imagenbotom {
background-image:url(verde.jpg);
background-repeat:no-repeat;
background-position:center;
width:30px;
height:30px;
}
.especialimagen{

background-image:url(verde.jpg);
background-repeat:no-repeat;
background-position:center;
width:70px;
height:30px;
}
.imagenespecial{
background-image:url(verde.jpg);
background-repeat:no-repeat;
background-position:center;
width:30px;
height:70px;


}
</style>

<script> //declaracion de variables globales
var num1=0,num2=0;
var mostrado="";
comprobador=0;
operador=0;
//funcion para borrar
function nada(){
num1=0;
num2=0;
mostrado="";
comprobador=0;
operador=0;
document.formi.ver.value=0;

}
//funcion de los operadores
function operacion(a){
switch (a){
case 1:
operador=1
document.formi.ver.value="+";
break;
case 2:
operador=2
document.formi.ver.value="-";
break;
case 3:
operador=3
document.formi.ver.value="*";
break;
case 4:
operador=4
document.formi.ver.value="div";
break;
default:
break;
}
mostrado="";
comprobador=1;

}
//funcion para que los botones se muestren en el input text
function mostrar(a){

mostrado=mostrado+a;
document.formi.ver.value=mostrado;

if(comprobador==0){
num1=parseFloat(mostrado);
}else if(comprobador==1){
num2=parseFloat(mostrado);
}


}
//funcion que hace el resultado
function resultado(){
switch (operador){
case 1:
document.formi.ver.value=num1+num2;
break;
case 2:
document.formi.ver.value=num1-num2;
break;
case 3:
document.formi.ver.value=num1*num2;
break;
case 4:
document.formi.ver.value=num1/num2;
break;
default:
break;


}
num1=parseFloat(document.formi.ver.value);
mostrado="";

}





</script>
</head>


<body background="estrellas.jpg">
<div align="center">
<table border="2"><tr ><td>
<table><form name="formi" action="" method="">
<th colspan="4" ><input type="text" value=0 style="text-align:right" readonly="readonly" name="ver"/></th>
<tr><b>
<td width="34"><b><b>
<input type="button" name="c" value="C" class="imagenbotom" style="text-align:center" onclick="nada()" />
</b></b></td>
</b><td width="33"><input type="button" name="dividir" value="/" class="imagenbotom" style="text-align:center" onclick="operacion(4)" /></td><td width="33"><input type="button" name="multiplicar" value="*" class="imagenbotom" style="text-align:center" onclick="operacion(3)"/></td><td width="31"><input type="button" name="menos" value="-" class="imagenbotom" style="text-align:center" onclick="operacion(2)"/></td></tr>
<tr><td><input type="button" name="siete" value=7 class="imagenbotom" style="text-align:center" onclick="mostrar(7)"/></td><td><input type="button" onclick="mostrar(8)"name="ocho" value="8" class="imagenbotom" style="text-align:center"/></td><td><input type="button" name="nueve" value="9" onclick="mostrar(9)" class="imagenbotom" style="text-align:center"/></td>
<td rowspan="2"><input type="button" size="20" name="mas" value="+" class="imagenespecial" style="text-align:center" onclick="operacion(1)"/></td>
</tr>
<tr><td><input type="button" name="cuatro" value="4" onclick="mostrar(4)" class="imagenbotom" style="text-align:center"/></td><td><input type="button" name="cinco" onclick="mostrar(5)" value="5" class="imagenbotom" style="text-align:center"/></td><td><input type="button" name="seis" onclick="mostrar(6)" value="6" class="imagenbotom" style="text-align:center"/></td></tr>
<tr><td><input type="button" name="uno" value="1" onclick="mostrar(1)" class="imagenbotom" style="text-align:center"/></td><td><input type="button"name="dos" onclick="mostrar(2)" value="2" class="imagenbotom" style="text-align:center"/></td><td><input type="button" name="tres" value="3" onclick="mostrar(3)" class="imagenbotom" style="text-align:center"/></td><td rowspan="2"><input type="button" name="igual" value="=" class="imagenespecial" style="text-align:center" onclick="resultado()"/></td></tr>
<tr><td colspan="2"><input type="button" name="cero" value="0" class="especialimagen" style="text-align:center" onclick="mostrar(0)"/></td><td><input type="button"name="punto" value="." class="imagenbotom" style="text-align:center" onclick="mostrar(.)"/></td></tr>
</form>
</table></td></tr></table>
</div>
</body>
</html>

bueno una cosa mas
puntos malos
*no procesa decimales(si da resultados en decimal)
*hay un error con el 0 cuando se hacen operaciones en cadena y lo usas

puntos buenos
*hace operaciones en cadena
*tiene todos los botones de una calculadora basica
*no tiene un codigo demasiado complicado ni usa (eval)

En fin si les sirve y pueden dejen puntos. si no pueden, digan gracias que eso es suficiente para mi. si no les sirve salgan de aqui de esta pagina jejejeje.
pd:
otra cosa si vas a criticar advierto que NO ME INTEREZA. esta calculadora solo la pongo para quien le sirva al que no...en google deben haber otras LES RECOMIENDO QUE SIGAN BUSCANDO ;¬).
bye

19 comentarios - Calculadora en javascript y html buena para principiantes

@montanero123
hay una forma de mejorarlo; puedes convertir el numero a calcular en un numero de tipo decimal; el problema de la calculadora esta en que los calculos se basan en variables de tipo entero (integer) y es posible mediante la modificacion de la variable que contiene el numero, convertirlo en decimal, y de esa forma, te permitira calcular decimales.
me explico:
si instancias en una var, por ejemplo a*b, obtendras como resultado, la multiplicacion entre los valores que se hayan asignado a las var a y b; antes de eso, es posible convertir a decimales mediante la instruccion parseDouble. te dejo un ejemplito a continuacion:
&lt;script language=&quot;javascript&quot;&gt;
var a=prompt('ingrese el primer numero','');
var b=prompt('ingrese el segundo numero','');
var division=parseDouble(a)/parseDouble(b);
document.write(division);
&lt;/script&gt;
si le das el valor a la variable a de 3, y a la variable b 2, tendras como resultado 1.5; de esta forma, es posible, no solo que puedas reutilizar tu resultado decimal en un calculo, sino que ademas, puedes hacer calculos directamente con decimales que digitas en tu calculadora.
para tu caso, podria sugerir que trataras de modificar las variables justo antes de ejecutar el calculo (revisa tu codigo) mediante la instruccion parseDouble.
te sigo
@FERDABUS
Muy bueno el pots. Pero ¿por casualidad no tendrá un código java o html para hacer una calculadora de Indice de Masa Corporal?
Gracias
@Nakel_Shenu
Hola. Tenés idea de como se puede hacer un planisferio de calor? Si me ayudas te van +10
@kpodlcs
t la afane para presentarla en un practico

t doy +10 xq m salvaste la vida. Este finde me pongo d cabeza a ver como se la hace
@X3MBoy
Muy bueno. Se puede mejorar, pero está básico para ser modificado a gusto.
@conejin88
buenas tardes, queria preguntarte si tienes el codigo de una calculadora para determinar las cuotas de pago para vivienda financiada. de antemano muchas gracias
@Madara80
+10 Muchas gracias amigo calculadora
@l30r15
+2 no tngo muchos puntos
@benjamincanario
Buen post. Pero para un principiante lo encuentro con excesividad de codigo. Es mejor para simplificar que uses una sola funsion y un solo input y sin botones, sino solamente con evento de teclado para dar la instruccion de lo que introduscas de acuerdo a la funsion eval(). Pero repido, has hecho un buen post.