En este tip os explicaré como crear la calculadora mas sencilla que podais ver con JavaScript, no será gran cosa, pero a partir de esto podrás crearte la tuya mas bonita.
Crear la calculadora
Crear el script
Vamos a crear la parte lógica de la calculadora. Para crear la calculadora deberemos de crear un archivo .html al que yo le he llamado calculador.html, ustedes llamenle como quieran.
A continuación debemos de escribir dentro de <head> </head> el siguiente código:
Código :
<script>
function calcula(operacion){
var operando1 = document.calc.operando1.value
var operando2 = document.calc.operando2.value
var result = eval(operando1 + operacion + operando2)
document.calc.resultado.value = result
}
</script>
Explicación del script
Function calcula(operacion){ Su función es hacer la operación. Mas adelante veremos como la aplica en la caja.
var operando1 = document.calc.operando1.value var operando2 = document.calc.operando2.value operando1 y operando2 son los que tienen los valores con los que se hará las operaciones.
var result = eval(operando1 + operacion + operando2) Nos produce el resultado de la operación entre operando1 y operando2.
document.calc.resultado.value = result Nos escribe el resultado en la caja.
Crear las cajas y los botones
Ahora vamos a ponernos a crear la parte física. Solamente crearemos 3 cajas, 2 para los operando y otra para los resultados, luego crearemos 4 botones con las 4 operaciones básicas (+, -, X, /), estos botones los pondremos entre la caja del operando2 y la caja del resultado. Veamos el codigo:
<input type="Text" name="operando1" value="0" size="12"> <input type="Text" name="operando2" value ="0" size="12"> Crea las cajas para introducir los valores de las variables operando1 y operando2.
<input type="Button" name="" value=" + " onclick="calcula('+')"> <input type="Button" name="" value=" - " onclick="calcula('-')"> <input type="Button" name="" value=" X " onclick="calcula('*')"> <input type="Button" name="" value=" / " onclick="calcula('/')"> Crea los botones para introducir las variables para que se pueda calcular el resultado del operando1 y el operando2.
<input type="Text" name="resultado" value="0" size="12" Crea la caja para introducir el resultado del operando1 y el operando2.
Así es, nuestra calculadora (en JS) ha sido finalizada, como veis, es de lo mas sencillo que se puede hacer con JS. Espero que no hayáis tenido ningún problema con el tip, si es así, ya sabéis, preguntad las dudas.
Por cierto, puede (no es seguro) que mas adelante me ponga a hacer un tip sobre como hacer una calculadora mas perfecta, por ej. una con % y demás.
Comentarios
La verdad es que no se porque me he liado en las explicaciones mas de lo normal, y eso que es algo sencillo, no se porque me ha pasado, por lo que le dio las gracias a Zguillez que me ayudó bastante en algunas explicaciones en las que no sabía expresarme.
es verdad, pero realmente funciona igual <br> y <br /> pero la diferencia redica en que el estandar xhtml dice que "todas las etiquetas deben de cerrarse" y solo asi se puede pasar el estandarte de w3
saludos! Por:nphacks
También es verdad, pues entonces pido perdón y quien sepa eso y no haya echo un Copy & Paste de lo que he explicado, sabrá que no es así y lo escribirá bien, de todas formas, pido perdón .
Si yo intento eso no me suma los valores sino que los concatena, porque son de tipo texto; tengo que ponerle
var pies = Number(document.calc.operando1.value)
Igual me vino muy bien. Por:pablo gadino-blog
Interesante las explicaciónes man gracias...Probando Por:N3odemencial-blog
Yo hice la calculadora que usted tiene , y da gusto ver que funciona , y màs la explicaciòn fue fundamental para mi mayor comprensiòn, para este leguaje .
Lo felicito!!,Gracias.. Por:Karin-blog
Karin-blog :
Yo hice la calculadora que usted tiene , y da gusto ver que funciona , y màs la explicaciòn fue fundamental para mi mayor comprensiòn, para este leguaje .
Lo felicito!!,Gracias..
Me alegro de que le haya viendo con esto de la calculadora.
Hola, he estado buscando este programa, y me parece muy buena la explicacion, pero estoy creando una calculadora completa, y no puedo sacar el resultado con los numeros, podrian ayudarme para saber como poner los demas botones? gracias Por:Rosy-blog
De acuerdo, pero una calculadora completa puede ser científica, programador, y demás, ¿o quieres todas esas juntas?
javascript
matematicas
programacion
