Calculadora en HTML (Modelo B)

 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> 

---

Calculadora Modelo B

Haz algún calculo para ver el resultado.

   
   
   
   

También puedes escribir la expresión matematica y luego pulsar Cal

 

---

     

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>