segunda-feira, 19 de setembro de 2011

Criando uma Calculadora em JavaScript

segunda-feira, setembro 19, 2011    Sem Comentarios


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”:
design calc Criando uma Calculadora em JavaScript
Apos isso vá ao modulo “Insert”>”Form”>”Form”:
insert calc Criando uma Calculadora em JavaScript
Após ter inserido o Formulário vá em “Insert”>”Form”>”TextField”:
textfield calc Criando uma Calculadora em JavaScript
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:
final calc Criando uma Calculadora em JavaScript
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 “ ensira o seguinte codígo:
Entre as tags 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 
onclick=”return false“
deixando o código da seguinte forma:
agora dentro da tag “ que contém o botão “Calcular”, insira o seguinte codígo:
onclick=”trataInfos()”
Deixando o codígo da seguinte forma:
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 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”:
moz screenshot Criando uma Calculadora em JavaScript
testando calc Criando uma Calculadora em JavaScript
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!
pronto calc Criando uma Calculadora em JavaScript
Não está funcionando?? Veja o codígo completo:



0 comentários:

Postar um comentário

Proibido palavras ofensivas, racistas ou descriminatórias.

[Seu Comentário será liberado no máximo em 24horas]

Assinar: Postar comentários (Atom)