Como Criar uma Calculadora Usando HTML

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
Aprenda o que faz cada função html. 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]XFonte de pesquisa}
- 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]XFonte de pesquisa}
- 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]XFonte de pesquisa}
- 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]XFonte de pesquisa}
- 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]XFonte de pesquisa}
- 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]XFonte de pesquisa}
- 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]XFonte de pesquisa}
- /form, /body e /html: esses comandos dizem ao documento que as tags correspondentes, iniciadas previamente, estão agora terminando.^{[8]XFonte de pesquisa}
Publicidade

Método 2

Método 2 de 4:

Base do código html da calculadora

Baixe em PDF

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
Abra um editor de textos no computador. 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]XFonte de pesquisa}^{[10]XFonte de pesquisa}
- 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
Cole o código da calculadora html no documento.
- 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]XFonte de pesquisa}
- No Windows, clique no corpo do documento e pressione "CTRL+V".
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.
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

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".
O navegador padrão abrirá a calculadora em uma nova página.
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.