Contenido
En este modelo de calculadora utilizamos el elemento HTML form que representa una sección de un documento con controles interactivos que permiten a un usuario enviar información a un servidor web.
dicho form lo llamamos name="calculator" dentro de él colocamos los siguiente elementos:
1) un titulo y su descripción.
2) La pantalla interactiva
La pantalla interactiva se llama name="ans" y se utilizo un input type="textfield" con un valor predeterminado de Nada es decir value="" es de hacer resaltar que esta etiqueta no tiene cierre simplemente utiliza / como cierre, al estilo de <br/>
3) los botones del teclado virtual
Los botones no le les colocó nombre, pero se utilizo un input del type="button" con un texto predeterminado equivalente al valor del dígito aportado en el evento onclick
por ejemplo:
onclick="document.calculator.ans.value+='1'" esto significa que cuando hacemos click sobre el botón
realizaremos la acción:
document.calculator.ans.value+='1' que significa agregar el caracter que representa el numero uno al cuadro de texto llamado "ans" que se encuentra dentro del "document" que este activo y darle el "value" agregando += '1'
Tener extremo cuidado con los signos si nos falta el mas "+" no agregará el dígito y sustituirá todo lo que habíamos escrito por el numero uno.
4) boton de resultado "="
Se utilizo un input del type="button" con el texto predeterminado value="=" pero la accion a tomar cuando ocurre el evento onclick es evaluar matemáticamente:
la operación que estamos representando en la pantalla (la caja de texto que le llamamos pantalla):
asi:
onclick="document.calculator.ans.value=eval(document.calculator.ans.value)"
evalúa:
eval(document.calculator.ans.value) lo que esta en la caja de texto "ans"
y lo vuelve a presentar en pantalla:
document.calculator.ans.value= .........
Este tipo de escritura es directo por medio de un formulario con botones y cajas de texto sin utilizar el area de <script></script>
copiar, pegar en archivo html y lanzarlo con su navegador de preferencia:
<form name="calculator">
<h3>Calculadora</h3>
<p>Haz algun calculo para ver el resultado.</p>
<input name="ans" type="textfield" value="" />
<br />
<input onclick="document.calculator.ans.value+='1'" type="button" value="1" />
<input onclick="document.calculator.ans.value+='2'" type="button" value="2" />
<input onclick="document.calculator.ans.value+='3'" type="button" value="3" />
<input onclick="document.calculator.ans.value+='+'" type="button" value="+" />
<br />
<input onclick="document.calculator.ans.value+='4'" type="button" value="4" />
<input onclick="document.calculator.ans.value+='5'" type="button" value="5" />
<input onclick="document.calculator.ans.value+='6'" type="button" value="6" />
<input onclick="document.calculator.ans.value+='-'" type="button" value="-" />
<br />
<input onclick="document.calculator.ans.value+='7'" type="button" value="7" />
<input onclick="document.calculator.ans.value+='8'" type="button" value="8" />
<input onclick="document.calculator.ans.value+='9'" type="button" value="9" />
<input onclick="document.calculator.ans.value+='*'" type="button" value="*" />
<br />
<input onclick="document.calculator.ans.value+='0'" type="button" value="0" />
<input type="reset" value="c" />
<input onclick="document.calculator.ans.value+='/'" type="button" value="/" />
<input onclick="document.calculator.ans.value=eval(document.calculator.ans.value)" type="button" value="=" />
</form>
Código de la mini calculadora:
<form name="calculator">
<input name="Pant1" type="textfield" value="" />
<input onclick="document.calculator.Pant1.value=eval(document.calculator.Pant1.value)" type="button" value="Cal" />
</form>
Explicación:
1) Utilizamos <input ... atributos ... />
una caja de texto (type="textfield") llamada (name="Pant1") que está vacía (value="")
2) Utilizamos <input ... atributos ... />
Un botón (type="button") con el texto Cal (value="Cal")
Que cuando se activa (onclick="... procedimiento ... ")
Realiza el siguiente procedimiento:
Asigna al valor a Pant1: document.calculator.Pant1.value=
El resultado del texto dentro de la caja: eval(document.calculator.Pant1.value)
OJO: nos referimos a Pant1 y como Pant1 se encuentra dentro del form llamado calculator
por esta razón escribimos: calculator.Pant1
que está dentro del documento: document.calculator.Pant1
<form name="calculator"> Código </form>
