Como fazer um programa de calculadora em JavaScript

Se você é novo no JavaScript ou para começar com JavaScript, é melhor começar implementando um programa de calculadora pequena e fácil. Neste post, vamos aprender a fazer uma calculadora muito básica, porém funcional, usando JavaScript.

Para receber entradas e exibir a saída para o usuário, vamos usar o incitar e a alerta funções do navegador, respectivamente.

Existem duas maneiras principais de implementar a funcionalidade de uma calculadora, primeiro é usando o if-else declarações, e de outra maneira é usar o trocar declarações que vamos cobrir os dois.

Etapa 1: Configure o ambiente

Crie um novo arquivo HTML, vincule um script.Arquivo JS usando a tag de script e execute o arquivo HTML para que ele seja executado no navegador, a tag de script se parece com o seguinte:

E o arquivo html contém estas linhas:

Uma calculadora simples

Etapa 2: Escrevendo o código JavaScript

A primeira coisa que precisamos fazer em nosso código JavaScript é notificar o usuário para inserir um operador (*, -, +, /). Para fazer isso, criamos uma nova variável e solicitamos ao usuário uma nova entrada que será colocada nessa variável:

Const OperatorVar = Prompt ("Digite o operador que deseja usar (*, -, +, \)");

O próximo passo é pedir ao usuário os operandos nos quais esse operador funcionará, fazemos isso usando as seguintes linhas de código:

const operand1 = prompt ("Digite o primeiro valor");
const operand2 = prompt ("Digite o segundo valor");

Precisamos confirmar que o usuário não fez nenhuma entrada errada com as seguintes linhas de código:

função isdigit (input)
var integer = true;
para (var char de entrada)
if (char '9')
número inteiro = false;


retornar inteiro;

if (isdigit (operand1) == false)
alerta ("entrada errada no operando 1 | não é um valor inteiro");

if (isdigit (operand2) == false)
alerta ("entrada errada no operando 2 | não é um valor inteiro");

Em seguida, precisamos verificar qual operador foi dado pelo usuário usando o if-else Declarações, execute as operações necessárias e armazene o resultado em uma nova variável:

if (operatorvar == "*")
resultado = operand1 * operand2;
else if (operatorvar == "-")
resultado = operand1 - operand2;
else if (operatorvar == "/")
resultado = operand1 / operand2;
else if (operatorvar == "+")
resultado = parseint (operand1) + parseint (operand2);

Precisamos verificar também um operador errado, pois isso simplesmente usaremos o outro Declaração e alerta ao usuário que foi feita uma entrada errada:

outro
alerta ("operador inválido");

O último passo é exibir o resultado variável para o usuário usando o alerta Caixa de diálogo:

alerta ("O resultado é:" + resultado);

Você terminou com a codificação da calculadora no JavaScript.

Etapa 3: testando a calculadora

Para testar a calculadora que você acabou de codificar, basta executar o arquivo HTML e digitar as caixas de prompt como elas aparecem como mostrado no GIF abaixo:

Como você pode ver, o teste foi um sucesso porque nossa calculadora funciona perfeitamente bem, o trecho de código completo é como:

Const OperatorVar = Prompt ("Digite o operador que deseja usar");
const operand1 = prompt ("Digite o primeiro valor");
if (isdigit (operand1) == false)
alerta ("entrada errada no operando 1 | não é um valor inteiro");

const operand2 = prompt ("Digite o segundo valor");
if (isdigit (operand2) == false)
alerta ("entrada errada no operando 2 | não é um valor inteiro");

VAR resultado;
if (operatorvar == "*")
resultado = operand1 * operand2;
else if (operatorvar == "-")
resultado = operand1 - operand2;
else if (operatorvar == "/")
resultado = operand1 / operand2;
else if (operatorvar == "+")
resultado = parseint (operand1) + parseint (operand2);
outro
alerta ("operador inválido");

alerta ("O resultado é:" + resultado);
função isdigit (input)
var integer = true;
para (var char de entrada)
if (char '9')
número inteiro = false;


retornar inteiro;

Etapa 4: Usando o switch em vez de if-else

Para usar o switch em vez de if-else simples, substitua as instruções if-else pelas seguintes linhas de código:

Switch (OperatorVar)
caso "*":
resultado = operand1 * operand2;
quebrar;
caso "/":
resultado = operand1 / operand2;
quebrar;
caso "+":
resultado = parseint (operand1) + parseint (operand2);
quebrar;
caso "-":
resultado = operand1 - operand2;
quebrar;
padrão:
Alerta ("Operador inválido!");
quebrar;

O trecho de código completo é como:

Const OperatorVar = Prompt ("Digite o operador que deseja usar");
const operand1 = prompt ("Digite o primeiro valor");
if (isdigit (operand1) == false)
alerta ("entrada errada no operando 1 | não é um valor inteiro");

const operand2 = prompt ("Digite o segundo valor");
if (isdigit (operand2) == false)
alerta ("entrada errada no operando 2 | não é um valor inteiro");

Var Result; Switch (OperatorVar)
caso "*":
resultado = operand1 * operand2;
quebrar;
caso "/":
resultado = operand1 / operand2;
quebrar;
caso "+":
resultado = parseint (operand1) + parseint (operand2);
quebrar;
caso "-":
resultado = operand1 - operand2;
quebrar;
padrão:
Alerta ("Operador inválido!");
quebrar;

alerta ("O resultado é:" + resultado);
função isdigit (input)
var integer = true;
para (var char de entrada)
if (char '9')
número inteiro = false;


retornar inteiro;

Tudo o que resta agora é testar este código, dê uma olhada no GIF abaixo:

É isso, você codificou uma calculadora simples usando JavaScript.

Conclusão

Aprender um novo idioma exige que você construa aplicativos da vida real; Quando você está começando com o aprendizado de javascript, um programa de calculadora é realmente útil e uma maneira fácil de pegar o javascript. Hoje, neste post, aprendemos a criar um programa de calculadora muito básico usando JavaScript usando os dois if-else declarações, bem como as Switch Declarações.