Criando uma Calculadora em JavaScript | Zoom Digital : Reviews de Smartphones, Tutoriais, Notícias

Criando uma Calculadora em JavaScript

Por zoomdigital
Categoria: Destaques
jul 31st, 2010
0 Comentários
3950 Views

http://www.informaticaagora.com.br/wp-content/uploads/2008/08/javascript.jpg

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:

About "" Has 314 Posts

O Zoom Digital é um portal de tecnologia criado em 2008 e a 6 anos no mercado se consolidou como um dos maiores portais de tecnologia brasileiro.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *