Criando uma Calculadora em JavaScript

A volta dos Recados Privados.
30/07/2010
Google Imagens implementa HTML 5
31/07/2010

Criando uma Calculadora em JavaScript

Que tal criar sua própria calculadora?? Hoje ensinarei de um forma simples para que todos entendão!

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:
zoomdigital
zoomdigital
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 *