DesarrolloWeb.com > Manuales > Taller de Javascript / Programación en Javascript II

Ej. trabajo con formularios. Calculadora sencilla

15 de octubre de 2002

Valoración del artículo:

Enviar un comentario

Ver comentarios del artículo (4)

Vamos a ver un ejemplo del trabajo con formularios en el que desarrollaremos una calculadora sencilla.

Por Miguel Angel Alvarez

Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.

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

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

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.

Enviar un comentario a este artículo

Ver comentarios del artículo (4)

Compartir en redes sociales

Comparte este manual en tus redes sociales

MANUAL: Taller de Javascript

Comprobar si las claves son iguales

Enviar al navegador a otra página si no tiene Javascript

MANUAL: Programación en Javascript II

Trabajo con formularios en Javascript

Propiedades y métodos del objeto form

Comentarios

Enviar un comentario al artículo

Fueron enviados 4 comentarios al artículo

1 comentario no revisado

3 comentarios revisados:

bug en calculadora
Por: Aciel

24/9/2010

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

Acerca del bug
Por: Alexis Advance

30/9/2010

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

Calculadora

19/4/2011

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">  <input type="Button" name="" value=" 2 " onclick="calcula('2')" style="height: 30px; width: 30px">  <input type="Button" name="" value=" 3 " onclick="calcula('3')" style="height: 30px; width: 30px">  <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">  <input type="Button" name="" value=" 5 " onclick="calcula('5')" style="height: 30px; width: 30px">  <input type="Button" name="" value=" 6 " onclick="calcula('6')" style="height: 30px; width: 30px">  <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">  <input type="Button" name="" value=" 8 " onclick="calcula('8')" style="height: 30px; width: 30px">  <input type="Button" name="" value=" 9 " onclick="calcula('9')" style="height: 30px; width: 30px">  <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">  <input type="Button" name="" value=" 0 " onclick="calcula('0')" style="height: 30px; width: 30px">  <input type="Button" name="" value=" sqrt " onclick="document.calc.resultado.value=Math.sqrt(document.calc.resultado.value)" style="height: 30px; width: 30px">  <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">  <input type="Button" name="" value=" = " onclick="total()" style="height: 30px; width: 65px">  </p>
</form>
</body>
</html>

Ver comentarios pendientes de revisar

Enviar un comentario al artículo