Como Criar uma Calculadora Usando HTML

Baixe em PDF
Baixe em PDF

Há diversas formas de se fazer cálculos no computador, usando a calculadora pré-instalada, mas outro meio é construir a sua própria com um simples código html. Assim, você não apenas poderá fazer cálculos matemáticos em um navegador, como também aprenderá os fundamentos da arte de programar!

Método 1
Método 1 de 4:

Entendendo o código

Baixe em PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/08\/Create-a-Calculator-Using-HTML-Step-1-Version-3.jpg\/v4-460px-Create-a-Calculator-Using-HTML-Step-1-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/08\/Create-a-Calculator-Using-HTML-Step-1-Version-3.jpg\/v4-728px-Create-a-Calculator-Using-HTML-Step-1-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    O código usado para criar a calculadora é formado por diversos pedaços de sintaxe que trabalham juntas para definir elementos diferentes em um documento. Clique aqui para saber como se familiarizar com o processo ou continue a leitura para aprender o que faz no código cada uma das linhas de texto que serão usadas para criar a calculadora.
    • html: essa peça de sintaxe indica ao restante do documento qual é a linguagem sendo usada no código. Na programação há muitas linguagens, e a tag <html> indica ao restante do documento que o código estará em — você adivinhou! — html. [1]
    • head: indica ao documento que tudo o que for escrito a seguir é composto por dados, também conhecidos como "metadados". A tag <head> costuma ser usada para definir os elementos estilísticos de um documento, como títulos, cabeçalhos e assim por diante. Pense nela como um guarda-chuva, sob o qual o restante do código será definido. [2]
    • title: é aqui onde você dará nome ao título do documento. Esse atributo é usado para definir que título aparecerá no navegador assim que a página for aberta.
    • body bgcolor="#": essa tag define a cor de fundo do corpo da página. O número colocado entre aspas, depois do #, corresponde a uma cor pré-determinada .
    • text="": a palavra colocada entre as aspas define a cor dos textos no documento.
    • form name="": especifica o nome de um formulário que poderá ser usado na construção do que vem a seguir, com base em seu significado conforme entendido pelo Javascript. Por exemplo, esse será o nome do formulário que usaremos na calculadora e que criará uma estrutura específica para o documento. [3]
    • input type="": é aqui onde toda a ação acontece. Tal atributo indica ao documento que tipo de texto serão os valores no restante dos colchetes. Por exemplo, eles poderiam ter forma de texto, de senha, de botão (como no caso da calculadora) e assim por diante. [4]
    • value="": esse comando diz ao documento o que estará contido no tipo de entrada especificado acima. Na calculadora, eles serão exibidos em forma de números (1-9) e operações (+, -, *, /, =). [5]
    • onClick="": tal sintaxe descreve um evento indicando ao documento que algo deve acontecer quando o botão for clicado. Em uma calculadora, queremos que o texto exibido em cada botão seja entendido como tal. Por isso, para o botão "6", colocaremos entre aspas document.calculator.ans.value+='6'. [6]
    • br: essa tag inicia uma quebra de linha no documento, de modo que tudo o que vier a seguir aparecerá uma linha abaixo do que havia anteriormente. [7]
    • /form, /body e /html: esses comandos dizem ao documento que as tags correspondentes, iniciadas previamente, estão agora terminando. [8]
    Publicidade
Método 2
Método 2 de 4:

Base do código html da calculadora

Baixe em PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/4b\/Create-a-Calculator-Using-HTML-Step-2-Version-4.jpg\/v4-460px-Create-a-Calculator-Using-HTML-Step-2-Version-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/4b\/Create-a-Calculator-Using-HTML-Step-2-Version-4.jpg\/v4-728px-Create-a-Calculator-Using-HTML-Step-2-Version-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Selecione o texto presente na caixa abaixo, mantendo o mouse pressionado no canto esquerdo superior e trazendo o cursor até o canto direito inferior, deixando-o completamente azul. A seguir, pressione "CMD+C" em um Mac ou "CTRL+C" no Windows a fim de copiar o código para a pasta de transferência.
 < 
 html 
 >< 
 head 
 >< 
 title 
 > 
HTML Calculator </ 
 title 
 ></ 
 head 
 >< 
 body 
 bgcolor 
 = 
 "# 000000" 
 text 
 = 
 "gold" 
 >< 
 form 
 name 
 = 
 "calculator" 
 >< 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "1" 
 onClick 
 = 
 "document.calculator.ans.value+='1'" 
 >< 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "2" 
 onClick 
 = 
 "document.calculator.ans.value+='2'" 
 >< 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "3" 
 onClick 
 = 
 "document.calculator.ans.value+='3'" 
 >< 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "+" 
 onClick 
 = 
 "document.calculator.ans.value+='+'" 
 >< 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "4" 
 onClick 
 = 
 "document.calculator.ans.value+='4'" 
 >< 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "5" 
 onClick 
 = 
 "document.calculator.ans.value+='5'" 
 >< 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "6" 
 onClick 
 = 
 "document.calculator.ans.value+='6'" 
 >< 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "-" 
 onClick 
 = 
 "document.calculator.ans.value+='-'" 
 >< 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "7" 
 onClick 
 = 
 "document.calculator.ans.value+='7'" 
 >< 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "8" 
 onClick 
 = 
 "document.calculator.ans.value+='8'" 
 >< 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "9" 
 onClick 
 = 
 "document.calculator.ans.value+='9'" 
 >< 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "*" 
 onClick 
 = 
 "document.calculator.ans.value+='*'" 
 >< 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "/" 
 onClick 
 = 
 "document.calculator.ans.value+='/'" 
 >< 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "0" 
 onClick 
 = 
 "document.calculator.ans.value+='0'" 
 >< 
 input 
 type 
 = 
 "reset" 
 value 
 = 
 "Reset" 
 >< 
 input 
 type 
 = 
 "button" 
 value 
 = 
 "=" 
 onClick 
 = 
 "document.calculator.ans.value=eval(document.calculator.ans.value)" 
 > 
Solution is < 
 input 
 type 
 = 
 "textfield" 
 name 
 = 
 "ans" 
 value 
 = 
 "" 
 ></ 
 form 
 ></ 
 body 
 ></ 
 html 
 >
Método 3
Método 3 de 4:

Criando a calculadora

Baixe em PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/e6\/Create-a-Calculator-Using-HTML-Step-3-Version-4.jpg\/v4-460px-Create-a-Calculator-Using-HTML-Step-3-Version-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/e6\/Create-a-Calculator-Using-HTML-Step-3-Version-4.jpg\/v4-728px-Create-a-Calculator-Using-HTML-Step-3-Version-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Há vários programas que podem ser usados, mas, para fins de conveniência e qualidade, recomendamos usar o Editor de Texto ou o Bloco de Notas. [9] [10]
    • Em um Mac, clique na lupa presente no canto superior direito da tela e abra o Spotlight. Digite "Editor de Texto" e o aplicativo deverá aparecer, destacado em azul.
    • No Windows, abra o menu Iniciar no canto esquerdo inferior da tela. Na barra de pesquisa, digite "Bloco de Notas" e clique no aplicativo, que aparecerá na janela de resultados à direita.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/99\/Create-a-Calculator-Using-HTML-Step-4-Version-4.jpg\/v4-460px-Create-a-Calculator-Using-HTML-Step-4-Version-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/99\/Create-a-Calculator-Using-HTML-Step-4-Version-4.jpg\/v4-728px-Create-a-Calculator-Using-HTML-Step-4-Version-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    • No Mac, clique no corpo do documento e pressione " CMD+V ". A seguir, você terá que clicar em " Formatar ", no topo da tela, e clicar em " Converter para Texto Simples " depois de ter colado o texto. [11]
    • No Windows, clique no corpo do documento e pressione " CTRL+V ".
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/e1\/Create-a-Calculator-Using-HTML-Step-5-Version-2.jpg\/v4-460px-Create-a-Calculator-Using-HTML-Step-5-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/e1\/Create-a-Calculator-Using-HTML-Step-5-Version-2.jpg\/v4-728px-Create-a-Calculator-Using-HTML-Step-5-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Para fazê-lo, clique em " Arquivo ", no canto esquerdo superior da janela, e escolha a opção " Salvar como… " no Windows ou " Salvar… " no Mac presente no menu suspenso.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/9e\/Create-a-Calculator-Using-HTML-Step-6-Version-2.jpg\/v4-460px-Create-a-Calculator-Using-HTML-Step-6-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/9e\/Create-a-Calculator-Using-HTML-Step-6-Version-2.jpg\/v4-728px-Create-a-Calculator-Using-HTML-Step-6-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    No menu " Salvar como… ", digite o nome do arquivo seguido por " .html " e clique em " Salvar ". Por exemplo, se quiser chamá-lo de MinhaPrimeiraCalculadora , você deve salvá-lo como " MinhaPrimeiraCalculadora.html ".
    Publicidade
Método 4
Método 4 de 4:

Usando a calculadora

Baixe em PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/16\/Create-a-Calculator-Using-HTML-Step-7-Version-2.jpg\/v4-460px-Create-a-Calculator-Using-HTML-Step-7-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/16\/Create-a-Calculator-Using-HTML-Step-7-Version-2.jpg\/v4-728px-Create-a-Calculator-Using-HTML-Step-7-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Para achá-lo, digite o nome do arquivo no Spotlight ou no campo de pesquisa do menu "Iniciar", conforme descrito no passo anterior. Não é preciso digitar a extensão "html".
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/19\/Create-a-Calculator-Using-HTML-Step-8-Version-2.jpg\/v4-460px-Create-a-Calculator-Using-HTML-Step-8-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/19\/Create-a-Calculator-Using-HTML-Step-8-Version-2.jpg\/v4-728px-Create-a-Calculator-Using-HTML-Step-8-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    O navegador padrão abrirá a calculadora em uma nova página.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/28\/Create-a-Calculator-Using-HTML-Step-9-Version-2.jpg\/v4-460px-Create-a-Calculator-Using-HTML-Step-9-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/28\/Create-a-Calculator-Using-HTML-Step-9-Version-2.jpg\/v4-728px-Create-a-Calculator-Using-HTML-Step-9-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    As soluções para as equações devem aparecer na barra de resolução.
    Publicidade

Dicas

  • É possível embutir essa calculadora em uma página da internet, se desejado.
  • Você também pode fazer uso da estilização html para mudar a aparência da calculadora.
Publicidade

WikiHows Relacionados

Como
Fazer um Programa Usando o Bloco de Notas
Como
Criar uma Página Simples da Web com HTML
Como
Configurar Cores de Fundo em HTML
Como
Definir um Plano de Fundo em HTML
Como
Mudar a Cor do Texto em HTML
Como
Inserir Imagens Usando HTML
Como
Inserir Espaços no HTML
Como
Aprender HTML
Como
Converter Números Binários em Decimais
Como
Converter de Decimal para Binário
Como
Formatar Texto como Código no Discord
Como
Desligar um Computador Usando o Bloco de Notas
Como
Executar um Programa a Partir da Linha de Comando do Linux
Como
Executar um Arquivo HTML
Publicidade

Referências

  1. ↑ http://www.w3schools.com/html/html_basic.asp
  2. ↑ http://www.w3schools.com/html/html_head.asp
  3. ↑ http://www.w3schools.com/html/html_formatting.asp
  4. ↑ http://www.w3schools.com/tags/att_input_type.asp
  5. ↑ http://www.w3schools.com/tags/att_input_value.asp
  6. ↑ http://www.w3schools.com/tags/ref_eventattributes.asp
  7. ↑ http://www.w3schools.com/tags/tag_br.asp
  8. ↑ http://www.w3schools.com/html/html_forms.asp
  9. ↑ http://computers.tutsplus.com/tutorials/quick-tip-configure-textedit-for-coding-html--mac-44786
  1. ↑ http://webdesign.about.com/od/notepad/a/aa040501a.htm
  2. ↑ http://www.askdavetaylor.com/how_do_i_save_html_files_from_textedit/

Sobre este guia wikiHow

Em outras línguas
Esta página foi acessada 66 394 vezes.

Este artigo foi útil?

Publicidade