Como criar uma calculadora usando HTML: 9 Passos

4 partes:Compreender o código Definir o código HTML básico para uma calculadora Criar a calculadora Usar a calculadora

Há muitas maneiras de fazer cálculos matemáticos sobre um computador utilizando a calculadora que está incluído no sistema, mas de outra forma é a construção de uma calculadora-se utilizando um simples código HTML. Ao fazer isso, você não só pode fazer cálculos matemáticos em um navegador, mas você também pode aprender coisas fundamentais sobre a arte de codificação.

parte 1Compreender o código

HTML Saiba o que cada função faz. O código que você usar para criar a calculadora é feita de muitas peças sintaxe que trabalhar em conjunto para definir os diferentes elementos de um documento. Clique aqui para obter uma explicação mais detalhada de como se familiarizar com este processo ou leia para saber o que cada linha de texto no código que você vai usar para fazer esta calculadora.

html: Este pedaço de sintaxe informa ao resto do documento que tipo de linguagem utilizada no código. Com a criação de um código, você pode usar um número de idiomas para o mesmo, e Ele diz ao resto do documento que está na linguagem HTML.
cabeçaEste documento diz tudo o que é sob esse título é a informação sobre a informação, conhecido como metadados. o comando Ele é usado para definir elementos de estilo de um documento, como títulos, títulos, etc. Pense neste comando como um guarda-chuva sob o qual é definido o resto do código.
título: Este é o lugar onde você colocar o título do documento. Este atributo é usado para definir o que o título do documento para abri-lo em um navegador HTML.
body bgcolor = "#": Este atributo define a cor de fundo e o código de cor do corpo. O número que está entre as aspas aparecem depois "#" Isso corresponde a um Cor padrão.
text = "": A palavra neste conjunto de citações define a cor do texto no documento.
nome do formulário ="": Este atributo especifica o nome de um formulário, que é usado para construir a estrutura que vem depois com base no que o javascript conhecido como o significado do "nome do formulário". atributo Por exemplo, o "nome do formulário" a ser usado é "calculadora" (calculadora), que irá criar uma estrutura específica para o documento.
input type ="": Isso é onde ocorrem as ações. O atributo "input type" (tipo de entrada) diz o documento de texto, quais são os valores no resto dos parênteses. Por exemplo, pode ser um texto, uma palavra-passe, um botão (como no caso de o calculador) e outros.
value =""Este comando diz o documento que contém o tipo de entrada especificado acima. Para uma calculadora, eles são exibidos como números (1 a 9) e operações (+, -, *, /, =).
onclick ="": Esta sintaxe descreve um evento, que conta a papel que algo vai acontecer quando você clicar nesse botão. Para uma calculadora, queremos que o texto a ser exibido em cada botão é entendida como ela é. Assim, para o botão "6", você tem que escrever document.calculator.ans.value + = `6` entre as aspas.
br: Esta marca inicia uma nova linha no documento, então o que é após esse rótulo aparece na linha de fundo, onde é que essa linha.
/ Form, / corpo e / htmlEstes comandos dizer ao seu documento comandos que foram iniciadas no início do documento foram concluídas correspondente.

parte 2Definir o código HTML básico para uma calculadora

Copie o código abaixo. Selecione o texto no dado abaixo mantendo o cursor no canto superior esquerdo da caixa e arrastando-o para o canto inferior direito da caixa de texto para que todo o texto está na caixa azul. Em seguida, pressione o "CMD" + "C" (Mac) ou + teclas "Ctrl" "C" (Windows) para copiar o código para a área de transferência.

lt;htmlgt;lt;cabeçagt;lt;títulogt; Calculator HTMLlt;/títulogt;lt;/cabeçagt;lt;corpo bgcolor= "# 000000" texto= "ouro"gt;lt;formulário nome="calculadora" gt;lt;entrada tipo="botão" valor="1" onclick="document.calculator.ans.value + = "1""gt;lt;entrada tipo="botão" valor="2" onclick="document.calculator.ans.value + = "2""gt;lt;entrada tipo="botão" valor="3" onclick="document.calculator.ans.value + = "3""gt;lt;entrada tipo="botão" valor="+" onclick="document.calculator.ans.value + = `+`"gt;lt;entrada tipo="botão" valor="4" onclick="document.calculator.ans.value + = `4`"gt;lt;entrada tipo="botão" valor="5" onclick="document.calculator.ans.value + = `5`"gt;lt;entrada tipo="botão" valor="6" onclick="document.calculator.ans.value + = `6`"gt;lt;entrada tipo="botão" valor="-" onclick="document.calculator.ans.value + = `-`"gt;lt;entrada tipo="botão" valor="7" onclick="document.calculator.ans.value + = `7`"gt;lt;entrada tipo="botão" valor="8" onclick="document.calculator.ans.value + = `8`"gt;lt;entrada tipo="botão" valor="9" onclick="document.calculator.ans.value + = `9`"gt;lt;entrada tipo="botão" valor="*" onclick="document.calculator.ans.value + = `*`"gt;lt;entrada tipo="botão" valor="/" onclick="document.calculator.ans.value + = `/`"gt;lt;entrada tipo="botão" valor="0" onclick="document.calculator.ans.value + = `0`"gt;lt;entrada tipo="restabelecer" valor="restabelecer"gt;lt;entrada tipo="botão" valor="=" onclick="document.calculator.ans.value = eval (document.calculator.ans.value)"gt;lt;brgt; O resultado é lt;entrada tipo="textfield" nome="ans" valor=""gt;lt;/formuláriogt;lt;/corpogt;lt;/htmlgt;

parte 3Criar a calculadora

Abra um programa de edição de texto em seu computador. Existem muitos programas que você pode usar, mas por conveniência e qualidade, recomenda-se usar o TextEdit ou Bloco de notas.

Em um Mac, clique na lupa no canto superior direito da tela para abrir o "Spotlight Search". Uma vez que você estiver lá, escreve TextEdit e clique no programa TextEdit, que deve ser destacado em azul.
No Windows, abra o menu Iniciar no canto inferior esquerdo da tela. Na barra de pesquisa, o Bloco de notas e clique gravação no aplicativo de bloco de notas, que será exibido na barra de resultados para a direita.

Cole o calculadora código HTML no documento.

Em um Mac, clique no corpo do documento e pressione as teclas "CMD" + "V". Em seguida, você precisa clicar em "Format" no topo da tela e clique em "texto simples" depois de colar o código.
No Windows, clique no corpo do documento e pressione as teclas "Ctrl" + "V".

Salve o arquivo. Para fazer isso, clique no botão Arquivo no canto superior esquerdo da janela e clique em "Salvar como" (Windows) ou "Save" (Mac) no menu drop-down que aparece.

Adicione a extensão de nome de arquivo HTML. No menu "Salvar como", digite o nome do seu arquivo seguido por ".html" e clique em "Save". Por exemplo, se você quiser colocar o nome "MiPrimeraCalculadora", você precisa salvá-lo como "MiPrimeraCalculadora.html".

parte 4Usar a calculadora

Localize o arquivo que você acabou de criar. Para fazer isso, digite o nome do seu arquivo na busca Spotlight ou a barra de busca no menu Iniciar do computador, conforme descrito na etapa anterior. Não é necessário escrever a extensão HTML.

Clique no arquivo para abri-lo. Seu navegador padrão será aberto a calculadora em uma nova página.

Clique nos botões para usar a calculadora. Soluções para suas equações aparecem nas soluções de barras.

dicas

Você também pode inserir esta calculadora em uma página web, se desejar.
Você também pode usar o estilo em HTML para mudar a forma como a calculadora parece.

Como criar uma calculadora usando html

dicas