Bem vindo ao SOS Designers

Faça o seu cadastro gratuito no Portal SOS Designers e tenha um acesso personalizado.

Empresas

Cadastre gratuitamente suas vagas, crie sua propria Lista de Curriculos Favoritos, e tenha um acesso personalizado.

Usuarios

Cadastre gratuitamente seu curriculo, crie sua propria Lista de Noticias Favoritas e tenha um acesso personalizado.

Área de Empresas | Vagas

Área de acesso a empresas cadastradas que desejam postar vagas de empregos no Portal e pesquisar curriculos.

Cadastre-se gratuitamente
Esqueceu a sua senha?

Área de Usuarios | Curriculos

Área do Usuario que deseja cadastrar seu curriculo e pesquisar vagas.



Cadastre-se gratuitamente
Esqueceu a sua senha?


Redes Sociais
Siga o Portal SOS Designers no Twitter Siga o Portal SOS Designers no Facebook

JavaScript / jQuery


Você está aqui: Home » JavaScript / jQuery » Criando uma Calculadora em JavaScript

Criando uma Calculadora em JavaScript


Pesquisar no Portal SOS Designers





Tempo Real



Siga o SOS Designers








pub_flash( 'http://www.sosdesigners.com/banners/mktdigital_flash_730x90.swf', 730, 90 ); " alt="Tecnoponta - 730 x 90 - MKT" />

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 “</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”:

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:




Autor Original:

Lucas Reda

Estudante de progamação, atualmente escrevendo no blog Zoom Digital, no do progamador "Alexandre Parreira, e em seu próprio blog o "Dicas para Bloggar".



Fonte Original:
http://www.zoomdigital.com.br/2010/07/criando-uma-calculadora-em-javascript/

Deixe seu comentário:





© Copyright 2002-2017
Portal SOS Designers
Webmaster: Luiz Antonio Bovi