Ej. trabajo con formularios. Calculadora sencilla

  • Por
Vamos a ver un ejemplo del trabajo con formularios en el que desarrollaremos una calculadora sencilla.
Para ilustrar un poco el trabajo con formularios, vamos a realizar un ejemplo práctico. Puede que algunas cosas que vamos a tratar queden un poco en el aire porque no se hayan explicado con detenimiento antes, pero seguro que nos sirve para enterarnos de cómo se trabaja con formularios y las posibilidadedes que tenemos.

Ejemplo calculadora sencilla

En este ejemplo vamos a construir una calculadora, aunque bastante sencilla, que permita realizar las operaciones básicas. Para hacer la calculadora vamos a realizar un formulario en el que vamos a colocar tres campos de texto, los dos primeros para los operandos y un tercero para el resultado. Además habrán unos botones para hacer las operaciones básicas.

El formulario de la calculadora se puede ver aquí.

<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>

Mediante una función vamos a acceder a los campos del formulario para recoger los operandos en dos variables. Los campos de texto tienen una propiedad llamada value que es donde podemos obtener lo que tienen escrito en ese momento. Mas tarde nos ayudaremos de la función eval() para realizar la operación. Pondremos por último el resultado en el campo de texto creado en tercer lugar, utilizando también la propiedad value del campo de texto.

A la función que realiza el cálculo (que podemos ver a continuación) la llamamos apretando los botones de cada una de las operaciones. Dichos botones se pueden ver en el formulario y contienen un atributo onclick que sirve para especificar las sentencias Javascript que deseamos que se ejecuten cuando el usuario pulse sobre él. En este caso, la sentencia a ejecutar es una llamada a la función calcula() pasando como parámetro el símbolo u operador de la operación que deseamos realizar. El

script con la función calcula()

<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>

La función eval(), recordamos, que recibía un string y lo ejecutaba como una sentencia Javascript. En este caso va a recibir un número que concatenado a una operación y otro número será siempre una expresión aritmética que eval() solucionará perfectamente.

Podemos ver el ejemplo de la calculadora en funcionamiento.

El acceso a otros elementos de los formularios se hace de manera parecida en cuanto respecta a la jerarquía de objetos, aunque como cada elemento tiene sus particularidades las cosas que podremos hacer con ellos diferirán un poco. Lo veremos un poco más adelante.

Autor

Miguel Angel Álvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Aciel

24/9/2010
bug en calculadora
Hola.. encontre un bug curioso, si en uno de los campos pones "033" la calculadora te toma el valor de este campo como "27" y los resultados no son correstos ...alguien podria explicar por que sucede esto???

saludos!!!

Alexis Advance

30/9/2010
Acerca del bug
El bug que mencionas ocurre debido a que al anteponer un cero a cualquier número, Javascript entiende que ese número está siendo trabajado en el sistema octal (en base 8). De esta misma manera, si en lugar de anteponer un cero antepones al número un cero y una equis, Javascript entiende que dicho número está siendo trabajado en el sistema hexadecimal (en base 16 [ejemplo: 0x3B4]).

Para trabajar en el sistema decimal no debes anteponer nada al número.

usuario_borrado_743392

19/4/2011
Calculadora
Es una modificacion de la sencilla, con mas cosas

<!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>Página web</title>
<script type="text/javascript">
function formReset(){
document.calc.reset();
}
function calcula(operacion){
if ((document.calc.resultado.value == null) || (document.calc.resultado.value == '0') || (document.calc.resultado.value == 'NaN')){
if ((document.calc.resultado.value == 0)&& (operacion == '.')){
document.calc.resultado.value = '0.'
}
else{
document.calc.resultado.value = operacion
}
}
else{
document.calc.resultado.value += operacion
}
}
function total(){
document.calc.resultado.value = eval (document.calc.resultado.value)
}
</script>
</head>
<body>
<form name="calc" action="">
<p><input type="Text" name="resultado" value="0" size="20"></p>
<p><input type="Button" name="" value=" 1 " onclick="calcula('1')" style="height: 30px; width: 30px"> &nbsp;<input type="Button" name="" value=" 2 " onclick="calcula('2')" style="height: 30px; width: 30px"> &nbsp;<input type="Button" name="" value=" 3 " onclick="calcula('3')" style="height: 30px; width: 30px"> &nbsp;<input type="Button" name="" value=" + " onclick="calcula('+')" style="height: 30px; width: 30px"></p>
<p><input type="Button" name="" value=" 4 " onclick="calcula('5')" style="height: 30px; width: 30px"> &nbsp;<input type="Button" name="" value=" 5 " onclick="calcula('5')" style="height: 30px; width: 30px"> &nbsp;<input type="Button" name="" value=" 6 " onclick="calcula('6')" style="height: 30px; width: 30px"> &nbsp;<input type="Button" name="" value=" - " onclick="calcula('-')" style="height: 30px; width: 30px"></p>
<p><input type="Button" name="" value=" 7 " onclick="calcula('8')" style="height: 30px; width: 30px"> &nbsp;<input type="Button" name="" value=" 8 " onclick="calcula('8')" style="height: 30px; width: 30px"> &nbsp;<input type="Button" name="" value=" 9 " onclick="calcula('9')" style="height: 30px; width: 30px"> &nbsp;<input type="Button" name="" value=" X " onclick="calcula('*')" style="height: 30px; width: 30px"></p>
<p><input type="Button" name="" value=" . " onclick="calcula('.')" style="height: 30px; width: 30px"> &nbsp;<input type="Button" name="" value=" 0 " onclick="calcula('0')" style="height: 30px; width: 30px"> &nbsp;<input type="Button" name="" value=" sqrt " onclick="document.calc.resultado.value=Math.sqrt(document.calc.resultado.value)" style="height: 30px; width: 30px"> &nbsp;<input type="Button" name="" value=" / " onclick="calcula('/')" style="height: 30px; width: 30px"></p>
<p><input type="Button" name="" value=" C " onclick="formReset()" style="height: 30px; width: 65px"> &nbsp;<input type="Button" name="" value=" = " onclick="total()" style="height: 30px; width: 65px"> &nbsp;</p>
</form>
</body>
</html>

Alma

15/5/2011
calculadora sencilla
Me fue de bastante utilidad el codigo publicado, me funciono correctamente

Poncho

07/1/2014
super
se ve bien , gracias

sebastian-colombia

03/7/2014
Gracias por los tutoriales
Estos tutoriales son los mejores gracias un saludo.

Ricardo

14/8/2014
Redondear
¡Hola! Soy neófito en este lenguaje de programación pero tu código me parece muy sencillo y fácil de entender, sin embargo, tengo una duda: si quiero que el resultado salga redondeado en el caso de las multiplicaciones y divisiones ¿qué tendría que hacer?

Agradezco de antemano sus respuestas ¡saludos!

Miguel

24/8/2014
Redondeando
Para redondear el resultado final creo que funcionaría utilizando Math.round(), que es el método que permite redondear, como en la siguiente línea:
Math.round(document.calc.resultado.value)