Como Fazer Calculadoras Em JavaScript - Devin

March 23, 2018 | Author: juhibridos | Category: Xhtml, Java Script, Html, Cascading Style Sheets, Function (Mathematics)
Share
Report this link


Comments



Description

Como fazer calculadoras em JavaScript - Devin1 de 16 http://www.devin.com.br/calculadoras-javascript/ Tutoriais Dicas Linux Servidores Internet Programação Programas Programação 1 0 17 de outubro de 2008 Como fazer calculadoras em JavaScript 43 703,678 82 3 0 0 1 Nunca me interessei de fato em aprender muito JavaScript, mas durante a faculdade, essa útil linguagem foi um dos temas do período. Nesta série 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. Especificações 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 página terá que ser totalmente feita conforme padrão XHTML, utilizando as técnicas de apresentação de página separando Conteúdo e Forma (HTML / CSS). A calculadora terá 4 operações básicas: somar, subtrair, multiplicar e dividir. Iremos fazer duas versões da calculadora: um com campos de formulário, onde o usuário digita o valor manualmente e outra com botões para cada número 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 noção disso para entender melhor. Um editor de texto ou editor HTML de sua preferência. Qualquer um serve, pois trabalharemos com o código puro. Eu gosto do vim. Um navegador. Recomendo o Firefox. Não iremos precisar de servidor Web, pois criaremos a página localmente. 2. Calculadora Simples (Campos de Formulário) 12/06/2015 17:30 Código "emprestado" do site http://pt. passando como argumento o valor do campo de seleção oper.org/1999/xhtml"> <head> <title>Devin . Em outras palavras. Estes dados serão importantes na hora da gente criar o JavaScript. mas precisamos anotar algumas coisas em mente para usarmos futuramente: O nome do formulário é calcform como especificado no parâmetro name da tag <form>. Essa ação vai fazer exatamente o seguinte: executar a função JavaScript chamada calcular.Como fazer calculadoras em JavaScript .w3.w3.0 Transitional.Calculadora Simples</title <style type="text/css"> <!-/* Conteúdo do CSS */ --> </style> <script type="text/javascript"> <!-/* Conteúdo do JavaScript */ --> </script> </head> <body> A primera linha indica qual o tipo de documento que estamos apresentando ao navegador. O local onde está o comentário “Conteúdo do CSS” será substituído mais a frente. montando depois o código completo: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. No nosso caso.org/wiki/XHTML --> <form name="calcform" method="post" action=""> <fieldset> <legend>Devin .value)"/> </fieldset> </form> Esta é uma declaração de formulário comum. Os formulários onde o usuário preenche os valores se chamam valor1 e valor2. vai ser executado a função JavaScript já com a operação desejada. assim como na parte do “Conteúdo do JavaScript”. ela estará mais ou menos assim: 12/06/2015 17:30 . 2. subtrair. O nome do campo de seleção da operação é oper e pode receber os valores: somar. o usuário vai selecionar o tipo de operação na calculadora e quando clicar no botão. Seguindo em frente: <!-. não é reset). faremos a calculadora mais simples. No nosso caso.br/calculadoras-javascript/ Para começar. existe o parâmetro onClick que diz ao navegador o que fazer quando o usuário clicar no botão.wikipedia. E para terminar o código HTML: </body> </html> Se abrirmos a página no navegador. Na tag deste botão. estamos usando o tipo XHTML 1.dtd"> <html xmlns="http://www.com.1.calcform.org/TR/xhtml1/DTD/xhtml1-transitional. temos um botão do tipo button (não é submit. Em outras palavras. que vai utilizar dois formulários onde o usuário vai preencher dois valores.oper. O código HTML da página Por partes.value) Isto já é a chamada ao JavaScript (que ainda não está pronto). multiplifcar e dividir. selecionar uma operação e apertar em um botão resultado. essas duas linhas servem para indicar que nosso código é do tipo XHTML e por isso deve (assim esperamos) seguir os padrões.0 Transitional//EN" "http://www. ao clicar ele vai executar essa instrução: calcular(document. Por último no formulário. A segunda linha abre a tag principal da página informando também o endereço da especificação oficial do XHTML. aparecendo na tela.calcform.oper.Devin 2 de 16 http://www.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 operação:</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.devin. font-weight: bold.calcform. margin: 10px. feita em JavaScript. } Salvamos e recarregamos a calculadora.calcform. } 12/06/2015 17:30 .value. CSS Dentro do código HTML. O JavaScript da calculadora Agora é hora de criarmos a função calcular. } form input { width: 100%.devin. border: solid black 1px.wikipedia.calcform. } else { if (oper == "subtrair") { var res = valor1-valor2. var valor2 = document. if (oper == "somar") { var res = parseInt(valor1) + parseInt(valor2). basta adicionar o seguinte conteúdo embaixo da linha /* Conteúdo do CSS */: /* Estilo "emprestado" do site http://pt. border: solid black 1px. font-size: 11px. width: 40%.2. background-color: #e8e8e8. depois do /* Conteúdo do JavaScript */: function calcular(oper) { var valor1 = document.3. olha como ficou agora: Calculadora Simples com CSS Muito melhor não? Agora vamos ao que interessa. border: solid #ccc 1px. width: auto. para fazer as operações básicas. vamos colocar agora o CSS que vai implementar toda a beleza da coisa! 2. padding: 3%. float: right.com. Adicione o seguinte conteúdo na página HTML.br/calculadoras-javascript/ Calculadora Simples sem CSS/JavaScript Meio feínho né? Calma. font-size: 90%.valor1. font-size: 11px. margin-bottom: 10px. } } } document. } else { var res = valor1/valor2. } form legend { padding: 6px.Como fazer calculadoras em JavaScript . } else { if (oper == "multiplicar") { var res = valor1*valor2.value.valor2. } form input.res.Devin 3 de 16 http://www.value = res.org/wiki/XHTML */ form fieldset { margin: 10px auto 10px auto. } form label { display: block. 2.botao { display: block. o valor da variável oper vai ser somar. ele faz então uma operação de divisão e armazena o resultado na variável res.devin. dentro do documento atual (a página) e atribuir à variável valor1. Pronto! Em pouco tempo.br/calculadoras-javascript/ Salvo isso. Calculadora cheia de Firulas Agora é hora de fazer algo mais robusto. nem subtrair.value = res. Não é tão difícil né? A seguir temos várias estruturas de teste com as quatro operações básicas possíveis da nossa calculadora. o navegador vai executar a função calcular com a operação selecionada. Usamos o caracter “/” para dividir os dois valores. Caso não seja nem somar. se a variável oper tiver o valor subtrair. então ele faz uma operação de multiplicação e armazena o resultado na variável res. então ele faz uma operação de subtração e armazena o resultado na variável res. para mostrar o valor para o usuário. Multiplicação: valor1 * valor2.res.calcform. Por exemplo. dentro do formulário de nome calcform. 2. cada um contendo o valor correspondente do campo de formulário. Caso nenhum dos três passos anteriores acontecer. dá pra entender bem como isso funciona.Como fazer calculadoras em JavaScript . Se a variável oper tiver o valor somar. Agora.calcform. mas olha o que o código faz: 1. As operações aqui foram bem simples: Soma: parseInt(valor1) + parseInt(valor2). O nosso objetivo aqui é fazer algo como essa ótima calculadora do KDE: kcalc 12/06/2015 17:30 . quando o usuário apertar o botão de Calcular. se você ler ao contrário fica mais fácil de entender.value.com. somamos eles. Criam duas variáveis: valor1 e valor2. As duas linhas seguintes: var valor1 = document. então ele faz uma operação de soma e armazena o resultado na variável res. Usamos o sinal de “-” para subtrair os números. se a variável oper tiver o valor multiplicar.value. Aqui usamos a função parseInt para transformar o valor do campo explícitamente em número. Depois da operação feita.valor1. Neste caso não foi preciso colocar o parseInt pois não existe outra função para o sinal de “-” nesse caso.valor2. var valor2 = document. Exemplo do valor1: Pegar o valor do campo de nome valor1. Por ser um conceito de toda linguagem de programação. não vou aprofundar na sintaxe. Caso contrário.Devin 4 de 16 http://www. ou seja. 3. bonita e funcional! Calculadora Simples com CSS/JavaScript 3. Mais uma vez. Usando o sinal de “+” com números. É por isso que eu disse que era importante saber os nomes dos campos. a calculadora simples está pronta e funcional! Mas como? Como explicado anteriormente na parte de HTML. Divisão: valor1 / valor2. Usamos o caracter “*” para multiplicar os dois valores. Subtração: valor1 – valor2. A primeira linha do JavaScript define essa função: function calcular(oper) { O oper dentro dos parênteses é o nome da variável que vai ter o valor da operação. se o usuário selecionou Somar. cheio de firulas. modificamos o valor do campo Resultado via JavaScript: document. 4. senão ele ao invés de somar iria concatenar os valores (5 + 5 = 55). o resultado fica disponível na variável res.calcform. Lendo ao contrário. fizemos uma calculadora simples. w3.1.org/TR/xhtml1/DTD/xhtml1-transitional.Calculadora Complexa</title> <style type="text/css"> <!-/* Conteúdo do CSS */ --> </style> <script type="text/javascript"> <!-/* Conteúdo do JavaScript */ --> </script> </head> <body> <form name="calcform" method="post" action=""> <fieldset> <legend>Devin . como todas as calculadoras têm.wikipedia.org/wiki/XHTML */ #visor { background-color: #bdffb4. As contas serão sempre contínuas. para ser incluído abaixo do /* Conteúdo do CSS */: /* Estilo "emprestado" do site http://pt. o visor vai sendo atualizado de acordo com os cálculos! 3.0 Transitional//EN" "http://www.Devin 5 de 16 http://www.2. quem sabe outro dia! Vamos mesmo é fazer a mesma calculadora simples mas com um visual mais arrojado e com mais dinamismo. aqui vai o código HTML da página: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. 12/06/2015 17:30 . à medida que o usuário for digitando os valores e as operações. Eu estava brincando. Assim como cada operação vai ser um botão também. ou seja. A calculadora vai ter um visor.org/1999/xhtml"> <head> <title>Devin .Calculadora Complexa</legend> <input type="text" name="visor" id="visor" /> <table id="calc"> <tr> <td><input type="button" <td><input type="button" <td><input type="button" <td><input type="button" </tr> <tr> <td><input type="button" <td><input type="button" <td><input type="button" <td><input type="button" </tr> <tr> <td><input type="button" <td><input type="button" <td><input type="button" <td><input type="button" </tr> <tr> <td><input type="button" <td><input type="button" <td><input type="button" <td><input type="button" </tr> </table> </fieldset> </form> name="num9" class="num" value="9" onclick="calcNum(9)" /></td> name="num8" class="num" value="8" onclick="calcNum(8)" /></td> name="num7" class="num" value="7" onclick="calcNum(7)" /></td> name="somar" class="oper" value="+" onclick="calcParse('somar')" /></td> name="num6" class="num" value="6" onclick="calcNum(6)" /></td> name="num5" class="num" value="5" onclick="calcNum(5)" /></td> name="num4" class="num" value="4" onclick="calcNum(4)" /></td> name="subtrair" class="oper" value="-" onclick="calcParse('subtrair')" /></td> name="num3" class="num" value="3" onclick="calcNum(3)" /></td> name="num2" class="num" value="2" onclick="calcNum(2)" /></td> name="num1" class="num" value="1" onclick="calcNum(1)" /></td> name="multiplicar" class="oper" value="*" onclick="calcParse('multiplicar')" /></td> name="num0" class="num" value="0" onclick="calcNum(0)" /></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 Feínho… 3.devin.br/calculadoras-javascript/ Beleza.Como fazer calculadoras em JavaScript . O código HTML Da mesma forma que na calculadora simples. CSS Agora o CSS.com. Cada número vai ser um botão.dtd"> <html xmlns="http://www.w3. width: 24px.Devin 6 de 16 http://www. } form input. nada de muito novo. Note agora a diferença entre a definição das duas variáveis. uma variável global transita em todo o código e durante toda a execução da página. } form fieldset { margin: 10px auto 10px auto. Antes de começar a postar o código. font-size: 11px. tanto a variável argh quanto a variável local só estarão disponíveis dentro da função teste. Por que eu expliquei isso primeiro? Como eu disse. border: solid #ccc 1px. Apesar de eu ter usado a variável globalizacao fora da função. Uma variável local é definida utilizando o var antes: var local = 'teste'. utilizei várias funções no código. cada uma fazendo uma tarefa. Se tiver qualquer referência à variável fora das chaves {}. é legal saber de um conceito novo que não foi citado na calculadora simples. Com a adição do JavaScript.oper { display: block. é necessário variáveis globais para durarem através das funções e durante toda a execução da página… 12/06/2015 17:30 . margin-bottom: 10px. } Neste exemplo. O código JavaScript Até aqui tudo normal. width: 40%. Uma variável local. e um parser (talvez essa não seja a definição ideal) das ações do usuário. } form input { width: 100%. } O resultado: Calculadora 'Complexa' com CSS Bonitinho! 3. } form input.num { display: block. Por outro lado.devin. Enquanto que uma variável global não recebe o var antes: globalizacao = 'uhu'. border: solid black 1px. ela vai ser reconhecida e por isso seu valor vai ser escrito no documento atual (document. não vai servir pra nada.br/calculadoras-javascript/ text-align: right. as coisas começam a ficar mais complicadas e interessantes… Basicamente o que fiz dessa vez foi criar várias funções. padding: 3%.Como fazer calculadoras em JavaScript .write(globalizacao). } table { margin: 0 auto 0 auto. Esse local é a função que a variável foi criada. e para manter o fluxo das ações do usuário. height: 24px. como o nome diz. está disponível apenas em um local. Exemplo: function teste() { globalizacao = 'uhu'. Exemplo: function teste(argh) { var local = 'teste'. document. } teste(). height: 24px. É o conceito de variáveis locais e variáveis globais. width: 24px.3. background-color: #b2b2b2.write).com. margin-bottom: 10px. *. gvisor = 1. } } } return(valor). valor2) { if (oper == "somar") { var valor = parseFloat(valor1) + parseFloat(valor2). delete gvisor. } else { gvalor = valor. 6. delete goper. Sabendo agora das funções das funções (recursivo não? . } else { var valor = valor1 / valor2. mas vou tentar explicar da melhor maneira possível. Em seguida a função calcParse(‘somar’) faz uma série de testes e verifica que nem a variável global goper.value + num. 5.visor. Ao clicar em mais um número (5). A variável global gvisor entenderemos mais à frente.value = ''. É literalmente um reset na calculadora. A primeira coisa que a função faz é apagar a variável global gvisor.devin. O algoritmo detecta que havia uma operação gravada anteriormente (goper = somar) e executa a função calcOper(somar. apesar de não ser chamada diretamente pelo usuário.Como fazer calculadoras em JavaScript . if (typeof goper != 'undefined' && oper == 'resultado') { gvalor = calcOper(goper.value = gvalor. Isso quer dizer que a calculadora se prepara para fazer uma operação de soma. a função calcParse(‘somar’) é acionada. Ao clicar no botão 5.calcform.visor. Como é um sinal de =. então a função remove as variáveis de operação atual e de valor global. Desta vez ela sente falta da variável global gvisor. a função calcNum(’5′) é chamada novamente (que teimosa). por isso apaga o visor e ativa a variável novamente. } } Ficou bem maior do que antes né? Vamos por partes… Talvez o algoritmo não fique muito claro. valor).calcform.value. Quando o usuário clicar em um botão numérico (0-9). 12/06/2015 17:30 . } else { if (oper == "multiplicar") { var valor = valor1 * valor2. goper = oper. -. Por último. ele acionará a função calcLimpar(). nem a variável global gvalor existem. function calcLimpar() { document. delete gvalor. só que agora vai ser chamada pela calcParse(). goper = oper. 4. que por sua vez vai colocando (concatenando) os números no visor da calculadora. delete oper. ele acionará a função calcNum(). gvalor. a função calcNum(’5′) adiciona o número 5 no visor e também ativa a variável global gvisor. Quando o usuário clicar no botão AC. ele acionará a função calcParse(). valor1. 3.value = gvalor. Ao clicar no botão +. } // Função do algoritmo de "passagem" das ações do usuário function calcParse(oper) { var valor = document. assim o próximo número que o usuário clicar não vai ser concatenado. delete gvisor.Devin 7 de 16 http://www.valor2. só que desta vez existe a variável gvisor e por isso ela não apaga o visor antes. 5. que é a função com o algoritmo principal: é ela que vai decidir o que fazer na calculadora. a função calcNum(’5′) é chamada novamente. a função calcParse(‘resultado’) vai ser chamada.visor. Supondo que o usuário clique nos botões nesta ordem: 5+55= 1. document. vamos tentar entender o algoritmo seguindo exemplos de uso. gvalor.value = document. delete gvalor. é a mesma função utilizada na calculadora simples.calcform. / ou =). } else { if (oper == "subtrair") { var valor = valor1 . A função soma e retorna o número 60. document.).calcform. Isso quer dizer que essa é a primeira operação da calculadora e por isso ela atribui os valores iniciais para essas duas variáveis globais (gvalor = 5) e (goper = somar). 55). } if (typeof gvalor != 'undefined') { gvalor = calcOper(goper.calcform.visor. } document. 2.calcform. apagando o visor da calculadora e todas as variáveis globais são removidas. quando o usuário apertar o botão =.visor. que é colocado no visor da calculadora. valor).value = ''. } // Função que executa as operações básicas da calculadora function calcOper(oper. Isso vai ser explicado melhor depois.visor. A função calcOper(). Ao clicar novamente no número 5. um operador de finalização.com. Quando o usuário clicar em um botão de operação (+.visor. } // Função que limpa a calculadora e todas as variáveis existentes. return(0).br/calculadoras-javascript/ Agora o código JavaScript (aceito sugestões de melhoria) para colocar depois do /* Conteúdo do JavaScript */: // Função que adiciona os números no Visor quando pressionado os botões function calcNum(num) { if (typeof gvisor == 'undefined') { document.calcform. Ao clicar no botão 1.10. a função calcParse(‘subtrair’) é chamada. o que ele vem fazendo desde 1997 :-) 12/06/2015 17:30 . acredito que assim ficou mais fácil de entender. servidores. Ele também remove a variável global gvisor. 3. colocando o número 1 no visor e ativando a variável gvisor. Ele também mostra no visor o resultado e armazena a próxima operação (subtrair) na variável global goper.15) e armazena na variável gvalor que agora é 25.html http://www. a função calcNum(’1′) é chamada. 4. Entretanto.br/arquivos/calculadora-complexa. a função calcNum(’3′) é chamada.devin. Viciado em Internet.678 82 3 0 0 1 css html javascript tutorial web Hugo Cisneiros (Eitch) Apaixonado por Linux e administração de sistemas. ele chama a função calcOper(‘soma’.devin. 2. Aqui estão os dois arquivos completos: Calculadora Simples Calculadora Complexa Sendo estes os arquivos fixos deste tutorial.html Bom proveito! 43 703. a função calcParse(‘somar’) é chamada. concatenando o número 5 no visor. Bem. Ele chama a última operação que estava armazenada com a função calcOper(‘subtrair’. tem como meta aprender e ensinar muito Linux. 7. Ao clicar no botão +. coloquei também os seguintes links. configurando as variáveis globais (gvalor = 10) e (goper = somar). não? :D Calculadora 'Complexa' com CSS/JavaScript 4.com. 10+15–3= 1. Ao clicar no botão -. pode ser que isso ajude: Tente pensar que as variáveis globais (goper e gvalor) sempre se referem ao valor anterior ao operador (X +) e as variáveis locais (oper e valor) se referem aos valores que ficam depois do operador (+ X).devin. Ao clicar no botão 1. a função calcNum(’5′) é chamada. 6.br/arquivos/calculadora-simples. pois quem sabe no futuro eu mexa mais e adicione mais coisas para aprender! http://www. Resposta: 60! Se ficar difícil de entender. 5. Ao clicar no botão 3.br/calculadoras-javascript/ restando apenas o valor do visor.Devin 8 de 16 http://www. e em passar conhecimento. 8. Ao clicar no botão =.com. Idealizador do Devin. a função calcNum(’0′) é chamada. Mostra no visor o resultado final: 22. Como um valor anterior (10) e uma operação anterior (goper) já existiam. concatenando o número 0 no visor porque a variável gvisor existe. apagando tudo do visor e colocando o número 3.com.Como fazer calculadoras em JavaScript . Ao clicar no botão 5. apagando tudo do visor (pois não existe a variável gvisor) e colocando o número 1. Conclusão Eu consegui transformar uma aula simples de JavaScript na faculdade em uma verdadeira diversão! Ao mesmo tempo que tenho certeza que este tutorial será útil para muita gente. Ao clicar no botão 0.25.3). a função calcNum(’1′) é chamada. Responder 1 resposta · ativo 54 semanas atrás rafa · 54 semanas atrás 0 sim é super facil Responder rafael · 64 semanas atrás 0 Gostaria de fazer uma calculadora que realizasse o seguinte cálculo: 66.Devin 9 de 16 http://www.devin. | Responder Jéssica Souza · 61 semanas atrás 0 Olá Hugo.Como fazer calculadoras em JavaScript . porém o professor pediu pra fazer a calculadora utilizando Servlet.75xPeso)+(5xAltura)-(6. como posso fazer para gerar logs separados de cada um? Comentários (43) Logar Classificar por: Data Classificação Última Atividade nod32 4 ключи 2012 · 13 semanas atrás 0 Excellent site! Thank U!. I used to be looking for this particular info for a very lengthy time. I was checking constantly this weblog and I'm impressed! Very useful information particularly the last section :) I maintain such information a lot.47+(13. Responder Stichter · 40 semanas atrás 0 Excellent post.76xIdade) ALTURA (cm)digitar valor 12/06/2015 17:30 . Eu preciso fazer uma calculadora parecida com a do windows. Vc poderia me ajudar?? Será minha prova isso.br/calculadoras-javascript/ Como fazer VCD Apache: Como posso bloquear outros sites de fazer links diretos em meus arquivos? Apache: Eu tenho muitos domínios virtuais.com. parabéns pelo tutorial. Thank you and best of luck. com/buylevlen/ what is levonorgestrel fully edited for completeness and validity of the format of the entered data. width: 300px.br/calculadoras-javascript/ */ /*Crédito de Adaptação: Elielder > http://www. </form> Responder . There is a Responder renan · 102 semanas atrás 0 Gostaria de saber como faz uma calculadora que seja Altura * Largura * o preço = o valor que pagará..com. 12/06/2015 17:30 .baiedesanges-editions. · 121 semanas atrás -1 amigo eu fiz uma de DOS e e completa depois coloco o codigo aqui Responder Pedro · 139 semanas atrás -1 ". padding: 3%.. fiz algumas melhorias.com.org/wiki/XHTML */ #calc fieldset { float: center. margin: 10px auto 10px auto.transformar uma aula simples de JavaScript na faculdade em uma verdadeira diversão!" Nossa me diverti pacas '-'. gostei do tutorial.br */ /* Conteúdo do CSS */ /* Estilo "emprestado" do site http://pt.. Assim o calculo é executado conforme digitamos. Responder Elielder ( TagaNet ) · 151 semanas atrás -1 Pessoal.. e foi muito util sua aula abraço.devin..br/calculadoras-javascript/ IDADE (anos)digitar valor PESO (Kg)digitar valor Calcular Alguém pode me ajudar a fazer isso em html? Responder Lioncool · 69 semanas atrás 0 Who do you work for? http://www....%= idprod %&gt. } #calc legend { padding: 6px." 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" /> &nbsp.Devin 10 de 16 http://www.devin.a pessoa só coloca altura largura e ja vem com preço direto pra calcula.Como fazer calculadoras em JavaScript . Responder christian · 147 semanas atrás -1 Ia irmao." decimal.. to entrando na area da programaçao. http://www.taganet. e corrigi um "bug" em ". border: solid black 1px.wikipedia. margin-bottom: 10px..com.vlw eu comecei essa mas não da certo <form action="produtos.asp?produto=&lt. '.br/calculadoras-javascript/ margin: 10px. background-color: #e8e8e8.'.'. width: auto.botao { display: block.value.replace('. font-size: 11px. } #calc input { width: 100%. } #calc input.valor1.Como fazer calculadoras em JavaScript . margin-bottom: 10px. 12/06/2015 17:30 .'.')).replace('.devin. font-size: 90%. var valor2 = parseFloat(document.'.calcform.replace('.taganet. var valor1 = parseFloat(document. float: right. border: solid #ccc 1px.Devin 11 de 16 http://www. float: right.com. } --> http://www.botao { display: block.com. } else { if (oper == "subtrair") { var res = valor1-valor2.value. } #calc input.br */ /* Conteúdo do JavaScript */ function calcular() { var oper = document.''). } else { if (oper == "multiplicar") { var res = valor1*valor2. width: auto. } #calc label { display: block.oper. if (oper == "somar") { var res = parseInt(valor1) + parseInt(valor2).br/calculadoras-javascript/ */ /*Crédito de Adaptação: Elielder > http://www.calcform.calcform.devin.'.valor2.com. font-size: 11px. font-weight: bold.').value.'.')).replace('. border: solid black 1px. calcform.devin. o que eu faço? Responder luis · 197 semanas atrás -1 meus parabens.focus().tl loli foros Now that is what is known as a thick. uma boa ideia para colocar.. busty. aparece o visor. Responder Rafael · 191 semanas atrás -1 Puxa vida. Sucesso! 12/06/2015 17:30 . Responder M · 198 semanas atrás -1 Parabéns pelo belo trabalho.de. Imagino que seja difícil ter tanto trabalho.calcform.value = res.br/calculadoras-javascript/ } else { var res = valor1/valor2.. } window.oper.onload = init. eu coloco exatamente aonde manda mas nao muda a aparencia Responder Wudeyzhd · 161 semanas atrás -1 Pleased to meet you http://kaokasiquki. seria a calculadora nao aceitar letras. mas console-se com o fato de que nem todos pensam assim. vou estudar. sexy as hell woman with the curves to fucking rock your world!!!!!! Responder alline · 177 semanas atrás -1 ótimo tutorial. } } } document. --> Calculadora Selecione a operação: Dividir Multiplicar Somar Subtrair Digite o valor 1: Digite o valor 2: Resultado: Responder Ziri · 156 semanas atrás -1 To com dificuldades no estilo CSS. Lá no rodapé do navegador aparece "erro na págin".Como fazer calculadoras em JavaScript . super post. quando eu abro no navegador. ou operadores repetidos.Devin 12 de 16 http://www. nenhuma operação é feita. mas a operação não dá. os botões.res. objetivo e extremamente didático.com. } function init() { document. disponibilizá-lo de forma gratuita e ainda receber tantos comentários depreciativos de pessoas que sequer possuem domínio da própria língua. caracteres inválidos. é possivel? Grato Marcelo Responder Juninho · 234 semanas atrás -1 Opa! Parabéns pelo texto.com.Como fazer calculadoras em JavaScript . mas não como ela está e sim.Devin 13 de 16 http://www.alert (Ou document. e quando ele identificar a quantidade de dias que ficará hospedado. ela carregue com o valor da diaria do hotel. Muito explicativo e serviu bastante até para mim que já tenho alguma experiência em PHP. calcule o valor total que ele vai pagar.write) (valor1 operador valor2))? rs brincandeira =D Ótimo tutorial. quando o hospede chamar o formulario. =) Responder Marcelo · 233 semanas atrás -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. Responder Orcjntrd · 208 semanas atrás -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 atrás -2 Legal isso me ajudou muito :D obrigada!************* ************* ************ *********** ********** Responder Roger · 232 semanas atrás -2 Não é mais fácil colocar no navegador: Javascript: window.br/calculadoras-javascript/ Responder M1nh0c4 · 204 semanas atrás -1 Cara adorei sua calculadora.devin. 12/06/2015 17:30 . tá de parabens. mas sinta-se a vontade para disponibilizar o seu código para os outros estudarem que terei o prazer de colocar um link aqui! :) Responder Fábio · 265 semanas atrás -1 Cara preciso de um cálculo para um formulário no meu site. Clear Empity (CE). e outras cambadas de coisas. divisão.5.devin. Se quiser a gente pode melhorar o meu código. Não é querendo gabar-me. seono. abraço! Responder 1 resposta · ativo 116 semanas atrás Hugo Cisneiros (Eitc · 252 semanas atrás -1 @Ítalo: Opa. talvez seja algo com o navegador? Eu testei no Firefox 3.. quanto a quem xingou o cara. Que sorte!!! Você explicou bem direitinho. adição. não percam seu tempo. Ok? Aguardo resposta. como criar uma melhor e postar aki pra dizer a galera o que vc aprendeu. 12/06/2015 17:30 . vc me salvou!!! Sou iniante em Java Script. multiplicação.. parênteses. É essa tag que define no script a o nome dos objetos que sairão o valor? Se for vou jogar meu macbook na parede. exponenciação. gaste seu tempo com coisas úteis. 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. so porque eles não sabe fazer uma calculadora. sem precisar de ajuda.. troca de sinais. Valeuuu Abraços Responder @rogirn2 · 237 semanas atrás -1 Putz véio.. Tem fatorial. não soma mais que 9? exemplo se eu quero somar 9 + 23 não soma kkkkkkkkkk vá pra escola!!!!! Responder 1 resposta · ativo 116 semanas atrás Hugo Cisneiros (Eitc · 270 semanas atrás -1 @Jose: Como não? Aqui a calculadora soma como quiser. Clear (C). negação. muito show!!! Responder dayane · 241 semanas atrás -1 os cara ta tudo com inveja de vc.Como fazer calculadoras em JavaScript . não é querendo gabar-me. porque perdi um dia inteiro tentando descobrir o motivo do meu código (adaptado do teu) não funcionar e o teu funcionar perfeitamente na mesma página minha.br/calculadoras-javascript/ Agora uma dúvida: se eu retiro as tags de <code> </code>. tangente. mas eu fiz uma que dá duzentas na sua. subtração. cosseno.com. fica ai xingando as pessoas de burra mais quem é burro aki são esse babaca que tem inveja ate de uma calculadora :@ !!! Responder Levi · 242 semanas atrás -1 Ajudo muito valew Responder Ítalo · 252 semanas atrás -1 Cara. módulo. Parabéns Hugo. e logo o professor me mandou fazer uma calculadora com 4 operações. o script não funciona mais.. agora já posso até fazer a minha sozinho. Você pode me ajudar? Responder jose · 270 semanas atrás -1 caraca tua calculadora é uma merda..Devin 14 de 16 http://www. . por que fazer? :P Responder Hugo Cisneiros (Eitc · 323 semanas atrás -1 lol @ Felipe que preguiçoso.br/calculadoras-javascript/ Responder Humberto · 271 semanas atrás -1 Cara voce mandou muito bem. você queria o que? aposto que aprender a programar não :) Responder 12/06/2015 17:30 .. Parabéns ao autor.Devin 15 de 16 http://www. saber onde coloco. Mais isso é só questão de opinião vc é fera. Responder francinaldo · 271 semanas atrás -1 bem eu gostaria de saber como fazer uma calculadora utilizando em seu algoritimo apenas sinal de + e de Responder Alex220v · 273 semanas atrás -1 Muito bom esse tutorial. um abraço cara.. Quando o Felipe disse sobre esse codigo todo pra uma calc ele não foi muito feliz.Como fazer calculadoras em JavaScript . esse tutorial aqui teve muito mais coisas que lá. obrigada.devin.. e se sim. kkkkkkkkkk!!! Como o google é prático!!! Enfim. mais nada mesmo... Responder Mauricio · 289 semanas atrás -1 Up. Responder Heitor · 299 semanas atrás -1 Foi moleza eu fui na pagina final que mostrou como a calculadora ficou e copiei o codigo... Hugo né? Com esse tutorial acabei de fazer o meu exercício pra hoje. muito bom mais uma vez um tutorial simples e de excelente explicação. Aliás. Acabei de conhecer esse site e vou ler e aplicar bastante coisa. Com base neste exemplo estou conseguindo fazer outras aplicacoes... obrigado Responder Glauber · 299 semanas atrás -1 Só aqui nesse site. Ótima explicação. É a vida :) O problema agora é fazer o resto da série de tutoriais: se não há necessidade.. vc explicou mais que meu professo no semestre inteiro. Responder juliano · 312 semanas atrás -1 Muito bom esse formulario nao sabia como fazer agora posso tentar encrementar esse estilo de formula para o meu site abraços Responder Hugo Cisneiros (Eitc · 321 semanas atrás -1 E o mais engraçado de tudo é que não teve mais nada na faculdade..com. Responder daniel · 298 semanas atrás -1 Muito bom. Responder leticia · 294 semanas atrás -1 quero saber se é possivel colocar uma calculadora dessas numa secçao de um forum phpBB. devin. ou logar: Nome Email Website (opcional) Mostrar junto aos seus comentários.br/calculadoras-javascript/ -1 Felipe · 323 semanas atrás Mano que bagulho enorme so pra faze uma bostinha de claculadora fala sério em num tem algo mais simples não??? Responder Postar um novo comentário Digite o texto aqui! Comentar como Visitante. 12/06/2015 17:30 . Não mostrado publicamente. Se você tem um website.Como fazer calculadoras em JavaScript . Consulte os termos de uso.Devin 16 de 16 http://www. Assinar Enviar Comentário Comments by Tutoriais Dicas Changelog Contato Termos de Uso © 2001-2013 Devin.com. link e para ele aqui.
Copyright © 2024 DOKUMEN.SITE Inc.