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:
Código :
<form name="calc">
<input type="Text" name="operando1" value="0" size="12">
<br>
<input type="Text" name="operando2" value="0" size="12">
<br>
<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('/')">
<br>
<input type="Text" name="resultado" value="0" size="12">
</form>Explicación
- <form name="calc">
Crea el formulario. - <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. - </form>
Cerramos el formulario.
Calculadora finalizada
Ejemplo de la calculadora.
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.
Saludos
¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.
Por Sebuix el 03 de Mayo de 2009
Nos lo has dejado a nuestros pies practicamente..
Muy bien explicado,he entendido todo..
Saludos
Por Sebuix el 03 de Mayo de 2009
Aver si saco como darle un poco de estetica.
PD:aver cuando te haces ese tip de la calculadora cientifica..
Saludos
Saludos
Sebuix :
Aver si saco como darle un poco de estetica.
PD:aver cuando te haces ese tip de la calculadora cientifica..
dado que el javascript obtiene los valores con DOM facilmente puedes darle estetica con css
saludos!
Por Gzaloprgm el 05 de Mayo de 2009
<br[b]/>
Habria que cerrar las etiquetas
Recomendable ultima forma
Saludos
Distriker :
Recomendable ultima forma
Saludos
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!
Saludos
Por pablo gadino el 15 de Mayo de 2009
var pies = Number(document.calc.operando1.value)
Igual me vino muy bien.
Por N3odemencial el 27 de Mayo de 2009
Por lilia perez el 02 de Julio de 2009
lilia perez-blog :
Las cosas se aprenden
Saludos
Por Karin el 25 de Septiembre de 2009
Lo felicito!!,Gracias..
Karin-blog :
Lo felicito!!,Gracias..
Me alegro de que le haya viendo con esto de la calculadora.
Suerte en este lenguaje.
Ahora toca adentrarse mas aun
Saludos
Por Salas el 10 de Octubre de 2009
Saludos
Salas-blog :
Saludos
Me alegro de eso Salas
Saludos
Por claudia el 19 de Noviembre de 2009
Saludos
Por Rosy el 10 de Diciembre de 2009
Saludos
Por sandra el 27 de Enero de 2010
Esta calculadora hace las operaciones indicadas
Saludos
Por nancy gomez el 13 de Febrero de 2010
Por Mortiz el 04 de Marzo de 2010
Por z2007 el 05 de Marzo de 2010
Saludos
Por goyco el 29 de Marzo de 2010
Por Agustin el 16 de Mayo de 2010
Por José A el 27 de Agosto de 2010
Gracias.
Por mac el 12 de Noviembre de 2010
Por anyfk89 el 02 de Febrero de 2011
Tengo hecha una calculadora para calcular cuantos Puntos tienen los Alimentos. (según una fórmula)
Quedó muy bonita, pero al presionar el Botón para Calcular, no da ningún resultado.
No quiero llenarte la página con el Scrip y el resto. ¿Cómo puedo hacer para que la mires? ¿Pongo en un mensaje el código?
Desde ya muchas gracias
Saludos
Por juan el 08 de Marzo de 2011
Por tere el 11 de Abril de 2011
A que se debe? osea no funcionaría igual al 100% que una calculadora normal???
Por shico el 05 de Mayo de 2011
gracias me sirvio mucho
Por augusto pereira el 14 de Junio de 2011
Por morena el 02 de Julio de 2011
Por TATOO el 25 de Octubre de 2011
Por barcelona el 30 de Noviembre de 2011
<head>
<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
}
function margen(operacion){
var operando1 = document.calc.operando1.value
var operando2 = document.calc.operando2.value
var result = eval(operando1 + operacion + (1-(operando2/100)))
document.calc.resultado.value = result
}
</script>
</head>
<body>
<form name="calc">
<input type="Text" name="operando1" value="0" size="12">
<br>
<input type="Text" name="operando2" value="0" size="12">
<br>
<input type="Button" name="mas" value=" + " onclick="calcula('+')">
<input type="Button" name="menos" value=" - " onclick="calcula('-')">
<input type="Button" name="por" value=" X " onclick="calcula('*')">
<input type="Button" name="divide" value=" / " onclick="calcula('/')">
<input type="Button" name="margen" value="MCOM " onclick="margen('/')">
<br>
<input type="Text" name="resultado" value="0" size="12">
</form>
</body>
Por plas el 23 de Mayo de 2012
Por ronald el 24 de Mayo de 2012
Por ces el 05 de Junio de 2012
Por Arikel el 18 de Junio de 2012
Por Kevin Velasquez el 23 de Junio de 2013
Por carolay el 12 de Noviembre de 2013
Por Alex el 15 de Septiembre de 2014
Por sergio el 18 de Mayo de 2016
Por Diaz el guay el 23 de Noviembre de 2016
MUCHISISISIMAS GRACIAS!!!😃