Como Fazer Calculadoras em JavaScript

Como fazer calculadoras em JavaScript - Devin
1 de 16
http://www.devin.com.br/calculadoras-javascript/
Tutoriais
Dicas
Linux
Servidores
Internet
Programao
Programas
Programao
1
0
17 de outubro de 2008
Como fazer calculadoras em JavaScript

43
703,678
82
Nunca me interessei de fato em aprender muito JavaScript, mas durante a faculdade, essa til linguagem foi um dos temas do perodo. Nesta srie de
tutoriais, vou escrever o que vou aprendendo para compartilhar com os leitores do site.
Nesta parte, utilizarei o primeiro conceito que aprendi de JavaScript fazendo uma calculadora simples.
1. Especificaes do Programa
Antes de mais nada, importante ressaltar que antes de se fazer qualquer programa, bom a gente sempre saber o que vai fazer. Por isso um
planejamento sempre bom.
Sabendo disto, vamos considerar os seguintes itens-objetivos:
A pgina ter que ser totalmente feita conforme padro XHTML, utilizando as tcnicas de apresentao de pgina separando Contedo e Forma
(HTML / CSS).
A calculadora ter 4 operaes bsicas: somar, subtrair, multiplicar e dividir.
Iremos fazer duas verses da calculadora: um com campos de formulrio, onde o usurio digita o valor manualmente e outra com botes para
cada nmero e um visor com o resultado.
Pr-requisitos:
Conhecimentos de HTML e CSS para montar o visual da calculadora. Este tutorial explica todos os passos detalhadamente, mas bom ter uma
noo disso para entender melhor.
Um editor de texto ou editor HTML de sua preferncia. Qualquer um serve, pois trabalharemos com o cdigo puro. Eu gosto do vim.
Um navegador. Recomendo o Firefox. No iremos precisar de servidor Web, pois criaremos a pgina localmente.
2. Calculadora Simples (Campos de Formulrio)

12/06/2015 17:30
2 de 16
Para comear, faremos a calculadora mais simples, que vai utilizar dois formulrios onde o usurio vai preencher dois valores, selecionar uma operao
e apertar em um boto resultado, aparecendo na tela.
2.1. O cdigo HTML da pgina

Por partes, montando depois o cdigo completo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Devin - Calculadora Simples</title
<style type="text/css">
<!-/* Contedo do CSS */
-->
</style>
<script type="text/javascript">
<!-/* Contedo do JavaScript */
-->
</script>
</head>
<body>
A primera linha indica qual o tipo de documento que estamos apresentando ao navegador. No nosso caso, estamos usando o tipo XHTML 1.0
Transitional. A segunda linha abre a tag principal da pgina informando tambm o endereo da especificao oficial do XHTML. Em outras palavras,
essas duas linhas servem para indicar que nosso cdigo do tipo XHTML e por isso deve (assim esperamos) seguir os padres.
O local onde est o comentrio Contedo do CSS ser substitudo mais a frente, assim como na parte do Contedo do JavaScript.
Seguindo em frente:

<form name="calcform" method="post" action="">
<fieldset>
<legend>Devin - Calculadora Simples</legend>
<label for="valor1">Digite o valor <strong>1</strong>:</label>
<input type="text" name="valor1" id="valor1" />
<label for="valor2">Digite o valor <strong>2</strong>:</label>
<input type="text" name="valor2" id="valor2" />
<label for="oper">Selecione a operao:</label>
<select name="oper" id="oper">
<option value="somar">Somar</option>
<option value="subtrair">Subtrair</option>
<option value="multiplicar">Multiplifcar</option>
<option value="dividir">Dividir</option>
</select>
<label for="res">Resultado:</label>
<input type="text" name="res" id="res" />
<input type="button" value="Calcular" class="botao" onClick="calcular(document.calcform.oper.value)"/>
</fieldset>
</form>
Esta uma declarao de formulrio comum, mas precisamos anotar algumas coisas em mente para usarmos futuramente:
O nome do formulrio calcform como especificado no parmetro name da tag <form>.
Os formulrios onde o usurio preenche os valores se chamam valor1 e valor2.
O nome do campo de seleo da operao oper e pode receber os valores: somar, subtrair, multiplifcar e dividir.
Estes dados sero importantes na hora da gente criar o JavaScript.
Por ltimo no formulrio, temos um boto do tipo button (no submit, no reset). Na tag deste boto, existe o parmetro onClick que diz ao
navegador o que fazer quando o usurio clicar no boto. No nosso caso, ao clicar ele vai executar essa instruo:
calcular(document.calcform.oper.value)
Isto j a chamada ao JavaScript (que ainda no est pronto). Essa ao vai fazer exatamente o seguinte: executar a funo JavaScript chamada
calcular, passando como argumento o valor do campo de seleo oper. Em outras palavras, o usurio vai selecionar o tipo de operao na
calculadora e quando clicar no boto, vai ser executado a funo JavaScript j com a operao desejada.
E para terminar o cdigo HTML:
</body>
</html>
Se abrirmos a pgina no navegador, ela estar mais ou menos assim:
12/06/2015 17:30
3 de 16
Calculadora Simples sem CSS/JavaScript

Meio fenho n? Calma, vamos colocar agora o CSS que vai implementar toda a beleza da coisa!
2.2. CSS
Dentro do cdigo HTML, basta adicionar o seguinte contedo embaixo da linha /* Contedo do CSS */:
/* Estilo "emprestado" do site http://pt.wikipedia.org/wiki/XHTML */
form fieldset {
margin: 10px auto 10px auto;
width: 40%;
border: solid black 1px;
padding: 3%;
}
form legend {
padding: 6px;
margin: 10px;
font-size: 90%;
font-weight: bold;
background-color: #e8e8e8;
}
form label {
display: block;
font-size: 11px;
}
form input {
width: 100%;
border: solid #ccc 1px;
font-size: 11px;
margin-bottom: 10px;
}
form input.botao {
display: block;
width: auto;
float: right;
}
Salvamos e recarregamos a calculadora, olha como ficou agora:
Calculadora Simples com CSS

Muito melhor no? Agora vamos ao que interessa.
2.3. O JavaScript da calculadora

Agora hora de criarmos a funo calcular, feita em JavaScript, para fazer as operaes bsicas. Adicione o seguinte contedo na pgina HTML,
depois do /* Contedo do JavaScript */:
function calcular(oper) {
var valor1 = document.calcform.valor1.value;
if (oper == "somar") {
var res = parseInt(valor1) + parseInt(valor2);
} else {
if (oper == "subtrair") {
var res = valor1-valor2;
} else {
if (oper == "multiplicar") {
var res = valor1*valor2;
} else {
var res = valor1/valor2;
}
}
}
document.calcform.res.value = res;
}
12/06/2015 17:30
4 de 16
Salvo isso, a calculadora simples est pronta e funcional! Mas como?

Como explicado anteriormente na parte de HTML, quando o usurio apertar o boto de Calcular, o navegador vai executar a funo calcular com a
operao selecionada.
A primeira linha do JavaScript define essa funo:
function calcular(oper) {
O oper dentro dos parnteses o nome da varivel que vai ter o valor da operao. Por exemplo, se o usurio selecionou Somar, o valor da varivel
oper vai ser somar.
As duas linhas seguintes:
Criam duas variveis: valor1 e valor2, cada um contendo o valor correspondente do campo de formulrio. por isso que eu disse que era importante
saber os nomes dos campos. Lendo ao contrrio, d pra entender bem como isso funciona. Exemplo do valor1:
Pegar o valor do campo de nome valor1, dentro do formulrio de nome calcform, dentro do documento atual (a pgina) e atribuir varivel valor1.
No to difcil n?
A seguir temos vrias estruturas de teste com as quatro operaes bsicas possveis da nossa calculadora. Por ser um conceito de toda linguagem de
programao, no vou aprofundar na sintaxe, mas olha o que o cdigo faz:
1. Se a varivel oper tiver o valor somar, ento ele faz uma operao de soma e armazena o resultado na varivel res.
2. Caso contrrio, se a varivel oper tiver o valor subtrair, ento ele faz uma operao de subtrao e armazena o resultado na varivel res.
3. Caso no seja nem somar, nem subtrair, se a varivel oper tiver o valor multiplicar, ento ele faz uma operao de multiplicao e armazena o
resultado na varivel res.
4. Caso nenhum dos trs passos anteriores acontecer, ele faz ento uma operao de diviso e armazena o resultado na varivel res.
As operaes aqui foram bem simples:
Soma: parseInt(valor1) + parseInt(valor2). Usando o sinal de + com nmeros, somamos eles. Aqui usamos a funo parseInt para
transformar o valor do campo explcitamente em nmero, seno ele ao invs de somar iria concatenar os valores (5 + 5 = 55).
Subtrao: valor1 valor2. Usamos o sinal de - para subtrair os nmeros. Neste caso no foi preciso colocar o parseInt pois no existe outra
funo para o sinal de - nesse caso.
Multiplicao: valor1 * valor2. Usamos o caracter * para multiplicar os dois valores.
Diviso: valor1 / valor2. Usamos o caracter / para dividir os dois valores.
Depois da operao feita, o resultado fica disponvel na varivel res.
Agora, para mostrar o valor para o usurio, modificamos o valor do campo Resultado via JavaScript:
Mais uma vez, se voc ler ao contrrio fica mais fcil de entender.
Pronto! Em pouco tempo, fizemos uma calculadora simples, bonita e funcional!
Calculadora Simples com CSS/JavaScript
3. Calculadora cheia de Firulas

Agora hora de fazer algo mais robusto, ou seja, cheio de firulas. O nosso objetivo aqui fazer algo como essa tima calculadora do KDE:
kcalc
12/06/2015 17:30
5 de 16
Beleza. Eu estava brincando, quem sabe outro dia! Vamos mesmo fazer a mesma calculadora simples mas com um visual mais arrojado e com mais
dinamismo.
A calculadora vai ter um visor, como todas as calculadoras tm.
Cada nmero vai ser um boto. Assim como cada operao vai ser um boto tambm.
As contas sero sempre contnuas, ou seja, medida que o usurio for digitando os valores e as operaes, o visor vai sendo atualizado de
acordo com os clculos!
3.1. O cdigo HTML

Da mesma forma que na calculadora simples, aqui vai o cdigo HTML da pgina:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Devin - Calculadora Complexa</title>
<style type="text/css">
<!-/* Contedo do CSS */
-->
</style>
<script type="text/javascript">
<!-/* Contedo do JavaScript */
-->
</script>
</head>
<body>
<form name="calcform" method="post" action="">
<fieldset>
<legend>Devin - Calculadora Complexa</legend>
<input type="text" name="visor" id="visor" />
<table id="calc">
<tr>
<td><input type="button"
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</fieldset>
</form>
name="num9" class="num" value="9" onclick="calcNum(9)" /></td>

name="somar" class="oper" value="+" onclick="calcParse('somar')" /></td>
name="subtrair" class="oper" value="-" onclick="calcParse('subtrair')" /></td>
name="multiplicar" class="oper" value="*" onclick="calcParse('multiplicar')" /></td>
name="igual" class="num" value="=" onclick="calcParse('resultado')" /></td>
name="limpar" class="num" value="AC" onclick="calcLimpar()" /></td>
name="dividir" class="oper" value="/" onclick="calcParse('dividir')" /></td>
</body>
</html>
Resultado at agora:
Calculadora 'Complexa' sem CSS/JavaScript

Fenho
3.2. CSS
Agora o CSS, para ser includo abaixo do /* Contedo do CSS */:
#visor {
background-color: #bdffb4;
12/06/2015 17:30
6 de 16
text-align: right;
}
table {
margin: 0 auto 0 auto;
}
form fieldset {
width: 40%;
padding: 3%;
}
form input {
width: 100%;
font-size: 11px;
}
form input.num {
display: block;
width: 24px;
height: 24px;
}
form input.oper {
display: block;
width: 24px;
height: 24px;
background-color: #b2b2b2;
}
O resultado:
Calculadora 'Complexa' com CSS

Bonitinho!
3.3. O cdigo JavaScript

At aqui tudo normal, nada de muito novo. Com a adio do JavaScript, as coisas comeam a ficar mais complicadas e interessantes Basicamente o
que fiz dessa vez foi criar vrias funes, cada uma fazendo uma tarefa, e um parser (talvez essa no seja a definio ideal) das aes do usurio.
Antes de comear a postar o cdigo, legal saber de um conceito novo que no foi citado na calculadora simples. o conceito de variveis locais e
variveis globais.
Uma varivel local, como o nome diz, est disponvel apenas em um local. Esse local a funo que a varivel foi criada. Exemplo:
function teste(argh) {
var local = 'teste';
}
Neste exemplo, tanto a varivel argh quanto a varivel local s estaro disponveis dentro da funo teste. Se tiver qualquer referncia varivel fora
das chaves {}, no vai servir pra nada.
Por outro lado, uma varivel global transita em todo o cdigo e durante toda a execuo da pgina. Exemplo:
function teste() {
globalizacao = 'uhu';
}
teste();
document.write(globalizacao);
Apesar de eu ter usado a varivel globalizacao fora da funo, ela vai ser reconhecida e por isso seu valor vai ser escrito no documento atual
(document.write).
Note agora a diferena entre a definio das duas variveis. Uma varivel local definida utilizando o var antes:
var local = 'teste';
Enquanto que uma varivel global no recebe o var antes:

globalizacao = 'uhu';
Por que eu expliquei isso primeiro? Como eu disse, utilizei vrias funes no cdigo, e para manter o fluxo das aes do usurio, necessrio variveis
globais para durarem atravs das funes e durante toda a execuo da pgina
12/06/2015 17:30
7 de 16
Agora o cdigo JavaScript (aceito sugestes de melhoria) para colocar depois do /* Contedo do JavaScript */:
// Funo que adiciona os nmeros no Visor quando pressionado os botes
function calcNum(num) {
if (typeof gvisor == 'undefined') {
document.calcform.visor.value = '';
}
document.calcform.visor.value = document.calcform.visor.value + num;
gvisor = 1;
}
// Funo que limpa a calculadora e todas as variveis existentes.
function calcLimpar() {
document.calcform.visor.value = '';
delete gvalor;
delete goper;
delete gvisor;
}
// Funo que executa as operaes bsicas da calculadora
function calcOper(oper, valor1, valor2) {
var valor = parseFloat(valor1) + parseFloat(valor2);
} else {
var valor = valor1 - valor2;
} else {
var valor = valor1 * valor2;
} else {
var valor = valor1 / valor2;
}
}
}
return(valor);
}
// Funo do algoritmo de "passagem" das aes do usurio
function calcParse(oper) {
var valor = document.calcform.visor.value;
delete gvisor;
if (typeof goper != 'undefined' && oper == 'resultado') {
gvalor = calcOper(goper, gvalor, valor);
document.calcform.visor.value = gvalor;
delete oper;
delete gvalor;
return(0);
}
if (typeof gvalor != 'undefined') {
gvalor = calcOper(goper, gvalor, valor);
goper = oper;
document.calcform.visor.value = gvalor;
} else {
gvalor = valor;
goper = oper;
}
}
Ficou bem maior do que antes n? Vamos por partes Talvez o algoritmo no fique muito claro, mas vou tentar explicar da melhor maneira possvel.
Quando o usurio clicar em um boto numrico (0-9), ele acionar a funo calcNum(), que por sua vez vai colocando (concatenando) os
nmeros no visor da calculadora. A varivel global gvisor entenderemos mais frente.
Quando o usurio clicar em um boto de operao (+, -, *, / ou =), ele acionar a funo calcParse(), que a funo com o algoritmo principal:
ela que vai decidir o que fazer na calculadora. Isso vai ser explicado melhor depois.
Quando o usurio clicar no boto AC, ele acionar a funo calcLimpar(), apagando o visor da calculadora e todas as variveis globais so
removidas. literalmente um reset na calculadora.
A funo calcOper(), apesar de no ser chamada diretamente pelo usurio, a mesma funo utilizada na calculadora simples, s que agora vai
ser chamada pela calcParse().
Sabendo agora das funes das funes (recursivo no? ;), vamos tentar entender o algoritmo seguindo exemplos de uso. Supondo que o usurio clique
nos botes nesta ordem:
5+55=
1. Ao clicar no boto 5, a funo calcNum(5) adiciona o nmero 5 no visor e tambm ativa a varivel global gvisor.
2. Ao clicar no boto +, a funo calcParse(somar) acionada. Isso quer dizer que a calculadora se prepara para fazer uma operao de soma.
A primeira coisa que a funo faz apagar a varivel global gvisor, assim o prximo nmero que o usurio clicar no vai ser concatenado.
3. Em seguida a funo calcParse(somar) faz uma srie de testes e verifica que nem a varivel global goper, nem a varivel global gvalor
existem. Isso quer dizer que essa a primeira operao da calculadora e por isso ela atribui os valores iniciais para essas duas variveis globais
(gvalor = 5) e (goper = somar).
4. Ao clicar em mais um nmero (5), a funo calcNum(5) chamada novamente. Desta vez ela sente falta da varivel global gvisor, por isso
apaga o visor e ativa a varivel novamente.
5. Ao clicar novamente no nmero 5, a funo calcNum(5) chamada novamente (que teimosa), s que desta vez existe a varivel gvisor e por
isso ela no apaga o visor antes.
6. Por ltimo, quando o usurio apertar o boto =, a funo calcParse(resultado) vai ser chamada. O algoritmo detecta que havia uma operao
gravada anteriormente (goper = somar) e executa a funo calcOper(somar, 5, 55). A funo soma e retorna o nmero 60, que colocado no
visor da calculadora. Como um sinal de =, um operador de finalizao, ento a funo remove as variveis de operao atual e de valor global,
12/06/2015 17:30
8 de 16
restando apenas o valor do visor. Resposta: 60!

Se ficar difcil de entender, pode ser que isso ajude: Tente pensar que as variveis globais (goper e gvalor) sempre se referem ao valor anterior ao
operador (X +) e as variveis locais (oper e valor) se referem aos valores que ficam depois do operador (+ X).
10+153=
1. Ao clicar no boto 1, a funo calcNum(1) chamada, colocando o nmero 1 no visor e ativando a varivel gvisor.
2. Ao clicar no boto 0, a funo calcNum(0) chamada, concatenando o nmero 0 no visor porque a varivel gvisor existe.
3. Ao clicar no boto +, a funo calcParse(somar) chamada, configurando as variveis globais (gvalor = 10) e (goper = somar). Ele tambm
remove a varivel global gvisor.
4. Ao clicar no boto 1, a funo calcNum(1) chamada, apagando tudo do visor (pois no existe a varivel gvisor) e colocando o nmero 1.
5. Ao clicar no boto 5, a funo calcNum(5) chamada, concatenando o nmero 5 no visor.
6. Ao clicar no boto -, a funo calcParse(subtrair) chamada. Como um valor anterior (10) e uma operao anterior (goper) j existiam, ele
chama a funo calcOper(soma,10,15) e armazena na varivel gvalor que agora 25. Ele tambm mostra no visor o resultado e armazena a
prxima operao (subtrair) na varivel global goper.
7. Ao clicar no boto 3, a funo calcNum(3) chamada, apagando tudo do visor e colocando o nmero 3.
8. Ao clicar no boto =, Ele chama a ltima operao que estava armazenada com a funo calcOper(subtrair,25,3). Mostra no visor o resultado
final: 22.
Bem, acredito que assim ficou mais fcil de entender, no? :D
Calculadora 'Complexa' com CSS/JavaScript
4. Concluso
Eu consegui transformar uma aula simples de JavaScript na faculdade em uma verdadeira diverso! Ao mesmo tempo que tenho certeza que este
tutorial ser til para muita gente.
Aqui esto os dois arquivos completos:
Calculadora Simples
Calculadora Complexa
Sendo estes os arquivos fixos deste tutorial. Entretanto, coloquei tambm os seguintes links, pois quem sabe no futuro eu mexa mais e adicione mais
coisas para aprender!
http://www.devin.com.br/arquivos/calculadora-simples.html
http://www.devin.com.br/arquivos/calculadora-complexa.html
Bom proveito!
43
703,678
82
css html javascript tutorial web
Hugo Cisneiros (Eitch)

Apaixonado por Linux e administrao de sistemas. Viciado em Internet, servidores, e em passar conhecimento. Idealizador do Devin, tem como meta
aprender e ensinar muito Linux, o que ele vem fazendo desde 1997 :-)
12/06/2015 17:30
9 de 16
Como fazer VCD
Apache: Como posso bloquear outros sites de fazer links diretos em meus arquivos?
Apache: Eu tenho muitos domnios virtuais, como posso fazer para gerar logs separados de cada um?
Comentrios (43)
Logar
Classificar por: Data Classificao ltima Atividade

nod32 4 2012 13 semanas atrs
Excellent site! Thank U!,

Responder
Stichter 40 semanas atrs
Excellent post. I was checking constantly this weblog and I'm impressed! Very useful information particularly the last section :) I maintain such
information a lot. I used to be looking for this particular info for a very lengthy time. Thank you and best of luck. |
Responder
Jssica Souza 61 semanas atrs
Ol Hugo, parabns pelo tutorial.

Eu preciso fazer uma calculadora parecida com a do windows, porm o professor pediu pra fazer a calculadora utilizando Servlet.
Vc poderia me ajudar??
Ser minha prova isso.
Responder
1 resposta ativo 54 semanas atrs
rafa 54 semanas atrs
sim super facil

Responder
rafael 64 semanas atrs
Gostaria de fazer uma calculadora que realizasse o seguinte clculo: 66,47+(13,75xPeso)+(5xAltura)-(6,76xIdade)

ALTURA (cm)digitar valor
12/06/2015 17:30
10 de 16
IDADE (anos)digitar valor

PESO (Kg)digitar valor
Calcular
Algum pode me ajudar a fazer isso em html?
Responder
Lioncool 69 semanas atrs
Who do you work for? http://www.baiedesanges-editions.com/buylevlen/ what is levonorgestrel fully edited for completeness and validity of the
format of the entered data. There is a
Responder
renan 102 semanas atrs
Gostaria de saber como faz uma calculadora que seja Altura * Largura * o preo = o valor que pagar...a pessoa s coloca altura largura e ja vem
com preo direto pra calcula...vlw
eu comecei essa mas no da certo
<form action="produtos.asp?produto=<%= idprod %>" method="post" name="form12">
<span class="style1">Coloque as Medidas</span> <input type="text" size="8" id="n1" name="n1" /> x <input type="text" size="8" id="n2"
name="n2" />
<input type="submit" value="Calcular" name="Submit" />

</form>
Responder
... 121 semanas atrs
-1
amigo eu fiz uma de DOS e e completa depois coloco o codigo aqui

Responder
Pedro 139 semanas atrs
-1
"...transformar uma aula simples de JavaScript na faculdade em uma verdadeira diverso!" Nossa me diverti pacas '-'.
Responder
christian 147 semanas atrs
-1
Ia irmao, gostei do tutorial, to entrando na area da programaao, e foi muito util sua aula abrao...
Responder
Elielder ( TagaNet ) 151 semanas atrs
-1
Pessoal, fiz algumas melhorias. Assim o calculo executado conforme digitamos, e corrigi um "bug" em "," decimal.
http://www.devin.com.br/calculadoras-javascript/ */
/*Crdito de Adaptao: Elielder > http://www.taganet.com.br */
/* Contedo do CSS */
#calc fieldset {
float: center;
width: 300px;
padding: 3%;
}
#calc legend {
padding: 6px;
12/06/2015 17:30
11 de 16
margin: 10px;
font-size: 90%;
font-weight: bold;
background-color: #e8e8e8;
}
#calc label {
display: block;
font-size: 11px;
}
#calc input {
width: 100%;
font-size: 11px;
}
#calc input.botao {
display: block;
width: auto;
float: right;
}
#calc input.botao {
display: block;
width: auto;
float: right;
}
-->
http://www.devin.com.br/calculadoras-javascript/ */
/*Crdito de Adaptao: Elielder > http://www.taganet.com.br */
/* Contedo do JavaScript */
function calcular() {
var oper = document.calcform.oper.value;
var valor1 = parseFloat(document.calcform.valor1.value.replace('.',',').replace(',','.'));
var valor2 = parseFloat(document.calcform.valor2.value.replace('.','').replace(',','.'));
var res = parseInt(valor1) + parseInt(valor2);
} else {
var res = valor1-valor2;
} else {
var res = valor1*valor2;
12/06/2015 17:30
12 de 16
} else {
var res = valor1/valor2;
}
}
}
}
function init() {
document.calcform.oper.focus();
}
window.onload = init;
-->
Calculadora
Selecione a operao:
Dividir
Multiplicar
Somar
Subtrair
Digite o valor 1:
Digite o valor 2:
Resultado:
Responder
Ziri 156 semanas atrs
-1
To com dificuldades no estilo CSS, eu coloco exatamente aonde manda mas nao muda a aparencia
Responder
Wudeyzhd 161 semanas atrs
-1
Pleased to meet you http://kaokasiquki.de.tl loli foros Now that is what is known as a thick, busty, sexy as hell woman with the curves to fucking
rock your world!!!!!!
Responder
alline 177 semanas atrs
-1
timo tutorial,
uma boa ideia para colocar, seria a calculadora nao aceitar letras, caracteres invlidos, ou operadores repetidos.
Responder
Rafael 191 semanas atrs
-1
Puxa vida, quando eu abro no navegador, nenhuma operao feita, aparece o visor, os botes, mas a operao no d. L no rodap do navegador
aparece "erro na pgin", o que eu fao?
Responder
luis 197 semanas atrs
-1
meus parabens, super post; vou estudar...

Responder
M 198 semanas atrs
-1
Parabns pelo belo trabalho, objetivo e extremamente didtico. Imagino que seja difcil ter tanto trabalho, disponibiliz-lo de forma gratuita e ainda
receber tantos comentrios depreciativos de pessoas que sequer possuem domnio da prpria lngua, mas console-se com o fato de que nem todos
pensam assim. Sucesso!
12/06/2015 17:30
13 de 16
Responder
M1nh0c4 204 semanas atrs
-1
Cara adorei sua calculadora, t de parabens.

Responder
Orcjntrd 208 semanas atrs
-1
Cool site goodluck :) Sexy Carshow Models

evp Anal Sex Model
51662 Cindy Supermodel
stlha Bikini Model Shannon
:OOO Lil Cuties Model
750 American Nudes Models
8P Budapest Teen Models
ntycnq Brook Adams Model
:-(( Tiny Virgin Models
gbclk Katyo Teen Model
bmpz Preetens Model 10y
%DD Model Seminude
ferx Sveta Teen Models
32070 Nude Model Portfolio
:-[[ Lilittle Models Pre
=OO Small Models Nn
2796 Model Top Teen
070 C-Lia Teen Model
5535 Japanese Uniform Models
bxh Flower Models Teen
68252
Responder
Luana Barros 210 semanas atrs
-2
Legal
isso me ajudou muito :D
obrigada!*************
*************
************
***********
**********
Responder
Roger 232 semanas atrs
-2
No mais fcil colocar no navegador:

Javascript: window.alert (Ou document.write) (valor1 operador valor2))?
rs brincandeira =D
timo tutorial. =)
Responder
Marcelo 233 semanas atrs
-1
Gostaria de saber se existe uma forma de adaptar esta calculadora da segun=inte forma:
quero coloca-la no formulario de reservas do meu site, mas no como ela est e sim, quando o hospede chamar o formulario, ela carregue com o
valor da diaria do hotel, e quando ele identificar a quantidade de dias que ficar hospedado, calcule o valor total que ele vai pagar, possivel?
Grato
Marcelo
Responder
Juninho 234 semanas atrs
-1
Opa!
Parabns pelo texto.
Muito explicativo e serviu bastante at para mim que j tenho alguma experincia em PHP.
12/06/2015 17:30
14 de 16
Agora uma dvida: se eu retiro as tags de <code> </code>, o script no funciona mais. essa tag que define no script a o nome dos objetos que
sairo o valor? Se for vou jogar meu macbook na parede, porque perdi um dia inteiro tentando descobrir o motivo do meu cdigo (adaptado do teu)
no funcionar e o teu funcionar perfeitamente na mesma pgina minha,
Valeuuu
Abraos
Responder
@rogirn2 237 semanas atrs
-1
Putz vio, vc me salvou!!!

Sou iniante em Java Script, e logo o professor me mandou fazer uma calculadora com 4 operaes...
Que sorte!!! Voc explicou bem direitinho, agora j posso at fazer a minha sozinho, sem precisar de ajuda...
quanto a quem xingou o cara, no percam seu tempo, gaste seu tempo com coisas teis, como criar uma melhor e postar aki pra dizer a galera o que
vc aprendeu...
Parabns Hugo, muito show!!!
Responder
dayane 241 semanas atrs
-1
os cara ta tudo com inveja de vc, so porque eles no sabe fazer uma calculadora, fica ai xingando as pessoas de burra mais quem burro aki so
esse babaca que tem inveja ate de uma calculadora :@ !!!
Responder
Levi 242 semanas atrs
-1
Ajudo muito valew

Responder
talo 252 semanas atrs
-1
Cara, no querendo gabar-me, mas eu fiz uma que d duzentas na sua. No querendo gabar-me.
Tem fatorial, adio, subtrao, multiplicao, mdulo, diviso, exponenciao, parnteses, troca de sinais, negao, Clear Empity (CE), Clear (C),
seono, cosseno, tangente, e outras cambadas de coisas.
Se quiser a gente pode melhorar o meu cdigo. Ok?
Aguardo resposta, abrao!
Responder
Hugo Cisneiros (Eitc 252 semanas atrs
-1
@talo:
Opa, legal que tu fez muito mais coisas! Na verdade eu fiz esse um pouco mais simples justamente para servir como um tutorial pra quem t
iniciando em JavaScript, mas sinta-se a vontade para disponibilizar o seu cdigo para os outros estudarem que terei o prazer de colocar um link
aqui! :)
Responder
Fbio 265 semanas atrs
-1
Cara preciso de um clculo para um formulrio no meu site. Voc pode me ajudar?
Responder
jose 270 semanas atrs
-1
caraca tua calculadora uma merda, no soma mais que 9?

exemplo se eu quero somar 9 + 23 no soma kkkkkkkkkk
v pra escola!!!!!
Responder
-1
@Jose:
Como no? Aqui a calculadora soma como quiser, talvez seja algo com o navegador? Eu testei no Firefox 3.5.
12/06/2015 17:30
15 de 16
Responder
Humberto 271 semanas atrs
-1
Cara voce mandou muito bem. Acabei de conhecer esse site e vou ler e aplicar bastante coisa...
Quando o Felipe disse sobre esse codigo todo pra uma calc ele no foi muito feliz... Mais isso s questo de opinio vc fera. tima explicao.
Responder
francinaldo 271 semanas atrs
-1
bem eu gostaria de saber como fazer uma calculadora utilizando em seu algoritimo apenas sinal de + e de Responder
Alex220v 273 semanas atrs
-1
Muito bom esse tutorial...

Parabns ao autor, Hugo n?
Com esse tutorial acabei de fazer o meu exerccio pra hoje.
kkkkkkkkkk!!!
Como o google prtico!!!
Enfim, um abrao cara.
Responder
Mauricio 289 semanas atrs
-1
Up, muito bom mais uma vez um tutorial simples e de excelente explicao.
Responder
leticia 294 semanas atrs
-1
quero saber se possivel colocar uma calculadora dessas numa secao de um forum phpBB.. e se sim, saber onde coloco.. obrigada.
Responder
daniel 298 semanas atrs
-1
Muito bom. Com base neste exemplo estou conseguindo fazer outras aplicacoes. obrigado
Responder
Glauber 299 semanas atrs
-1
S aqui nesse site, vc explicou mais que meu professo no semestre inteiro...
Responder
Heitor 299 semanas atrs
-1
Foi moleza eu fui na pagina final que mostrou como a calculadora ficou e copiei o codigo.
Responder
juliano 312 semanas atrs
-1
Muito bom esse formulario nao sabia como fazer agora posso tentar encrementar esse estilo de formula para o meu site abraos
Responder
-1
E o mais engraado de tudo que no teve mais nada na faculdade, mais nada mesmo. Alis, esse tutorial aqui teve muito mais coisas que l... a
vida :) O problema agora fazer o resto da srie de tutoriais: se no h necessidade, por que fazer? :P
Responder
-1
lol @ Felipe
que preguioso, voc queria o que? aposto que aprender a programar no :)
Responder
12/06/2015 17:30
16 de 16
-1
Felipe 323 semanas atrs

Mano que bagulho enorme so pra faze uma bostinha de claculadora fala srio em num tem algo mais simples no???
Responder
Postar um novo comentrio

Digite o texto aqui!
Comentar como Visitante, ou logar:

Nome
Email
Website (opcional)
Mostrar junto aos seus comentrios.
No mostrado publicamente.
Se voc tem um website, link e para ele aqui.
Assinar
Enviar Comentrio
Comments by
Tutoriais
Dicas
Changelog
Contato
Termos de Uso
2001-2013 Devin. Consulte os termos de uso.
12/06/2015 17:30

Como Fazer Calculadoras em JavaScript - Devin

Enviado por

Direitos autorais:

Formatos disponíveis

Como Fazer Calculadoras em JavaScript - Devin

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Como Fazer Calculadoras em JavaScript - Devin

Enviado por

Direitos autorais:

Formatos disponíveis

Como fazer calculadoras em JavaScript - Devin

2. Calculadora Simples (Campos de Formulrio)