Que tal criar sua própria calculadora?? Hoje ensinarei de um forma simples para que todos entendão!
Para facilitar a vida de todos aconselho o uso do “Adobe Dreamweaver “, mais pode ser utilizado outro editor de codígos.
Vamos começar! Abra o Dreamweaver e crie um arquivo chamado:
calc.html, ou qualquer outro nome de sua preferência!
Após ter criado abra o Arquivo, e clique na aba “Design”:
Apos isso vá ao modulo “Insert”>”Form”>”Form”:
Após ter inserido o Formulário vá em “Insert”>”Form”>”TextField”:
Pronto! Agora que você ja inseriu adicione um valor numerico na frente ex: -,*,+,/. Depois de adicionao o valor que você deseja adicione mais um TextField na frente do valor!
Agora que ja temos dois “TextFields” vá em “Insert”>”Form”>”Button” insira o botão abaixo dos “TextFields” , Agora clicando sobre o botão adicionado mude o valor de “Value” para o Valor “Calcular”
Até agora sua calculadora deve estár assim:
Esse será o nosso modelo de calculadora!
para finalizarmos está parte clique sobre o primeiro “TextField” e no valor que está escrito “textfield” mude para “txtValor1” e no segundo “TextField” mude para “txtValor2” !
Pronto nossa parte visual está completa!
Agora vamos aos codigos!
Clique na aba “Code”, agora encima de “</head> ensira o seguinte codígo:
<script language=”javascript” type=”text/javascript”>
</script>
Entre as tags <script> e </script> adicionaremos os codígos!
Dentro delas adicione o seguinte codígo:
function trataInfos () {
}
Entendo este codígo:
Quando você cria um comando :
function nome do comando () {
}
você está criando uma função! Dentro de {} adicionaremos os outros comandos em JavaScript.
Agora entre {} adicione o seguinte codigo:
var campo1 = document.getElementById(‘txtValor1’);
var campo2 = document.getElementById(‘txtValor2’);
Entendo este codígo:
Começamos com o a função “var” que cria uma variavél , após isso vinhemos com o nome de cada variável e depois demos um comando para que o script pegue os valores digitados dentro dos “textFields” .
—–
Agora vamos voltar ao XHTML! Dentro da tag <form adicione o valor :
onclick=”return false“
deixando o código da seguinte forma:
<form id=”form1″ name=”form1″ method=”post” action=”” onclick =” return false”>
agora dentro da tag “<input type=”button” que contém o botão “Calcular”, insira o seguinte codígo:
onclick=”trataInfos()”
Deixando o codígo da seguinte forma:
<input type=”button” name=”button” id=”button” value=”Calcular” onclick=”trataInfos()” />
Entendo este codígo:
Aqui a unica coisa que fizemos foi chamar o” JavaScript” para nosso HTML, usando a função onclick=”” ou seja ao clicar ele executa o codígo.
—–
Agora a ultima etápa é voltar ao javascript! Em baixo dos ultimos codígos adicionados entre as tags <script></script> adicione o codígo :
alert(campo1.value * campo2.value);
Altere o valor matematico de acordo com seu desejo! Caso você queira deixar o valor de adição mude o codígo para:
alert(eval(campo1.value) + eval(campo2.value));
caso contrário só altere o valor do primeiro codígo.
Agora já podemos testar nosso script em um browser! Eu uso o Mozilla Firefox 3.6 , mais o script roda normalmente em outros browsers!
vamos ao teste!
Ainda no Dreamweaver clique com o botão direito sobre o arquivo “calc.html”:
Agora com o browser aberto adicione o Valor desejado no primeiro campo e faça o mesmo com o segundocampo! Depois clique em calcular! Veja que abrirá uma janela com o resultado!
Não está funcionando?? Veja o codígo completo:
