Para ilustrar um pouco o trabalho com formulários, vamos realizar um exemplo prático. Pode ser que algumas coisas das quais vamos tratar, fiquem um pouco no ar por não terem sido explicadas detalhadamente antes, mas certamente nos serve para estarmos por dentro de como se trabalha com formulários e as possibilidades que temos.

Exemplo de calculadora simples

Neste exemplo vamos construir uma calculadora, embora bastante simples, que permita realizar as operações básicas. Para fazer a calculadora vamos realizar um formulário no qual vamos colocar três campos de texto, os dois primeiros para as parcelas e um terceiro para o resultado. Ademais haverá uns botões para fazer as operações básicas.

O formulário da calculadora pode ser visto aqui.

<form name="calc">
<input type="Text" name="parcela1" value="0" size="12">
<br>
<input type="Text" name="parcela2" 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 uma função vamos acessar aos campos do formulário para buscar as parcelas em duas variáveis. Os campos de texto têm uma propriedade chamada value que é onde podemos obter o que têm escrito nesse momento. Mais tarde recorreremos a função eval() para realizar a operação. Colocaremos por último o resultado no campo de texto criado em terceiro lugar, utilizando também a propriedade value do campo de texto.

Chamamos à função que realiza o cálculo (que podemos ver a seguir) apertando os botões de cada uma das operações. Tais botões podem ser vistos no formulário e contém um atributo onclick que serve para especificar as sentenças Javascript que desejarmos que se executem quando o usuário clicar sobre ele. Neste caso, a sentença a executar é uma chamada à função calcula() passando como parâmetro o símbolo ou a parcela da operação que desejarmos realizar.

O script com a função calcula()

<script>
function calcula(operacao){
    var parcela1 = document.calc.parcela1.value
    var parcela2 = document.calc.parcela2.value
    var result = eval(parcela1 + operacao + parcela2)
    document.calc.resultado.value = result
}
</script>

A função eval(), lembramos, que recebia um string e o executava como uma sentença Javascript. Neste caso, irá receber um número que concatenado a uma operação e outro número será sempre uma expressão aritmética que eval() solucionará perfeitamente.

Podemos ver o exemplo da calculadora em funcionamento.

O acesso a outros elementos dos formulários se faz de maneira parecida a respeito da hierarquia de objetos, entretanto, como cada elemento tem suas particularidades as coisas que poderemos fazer com eles diferirão um pouco. Isto será visto mais adiante.