Função chamando Função: Calculadora em JavaScript

Neste tutorial de nossa seção de Funções em JavaScript, vamos te mostrar uma importante técnica em programação, que é a de funções chamarem funções.

Estudar pela Apostila de JavaScript

Função chamando função

Até o momento, em todas nossos scripts de nosso curso online grátis de JavaScript, todos nosso programas tem apenas uma função, que fazem apenas uma coisa específica e se encerra por aí.

Porém, isto não é o comum, não é o normal, do mundo real.
Uma técnica muita importante e usada é: uma função invocar outra.

Ou seja, dentro de uma função, chamamos outras.

Talvez o uso mais comum de uma função que serve pra chamar outras, seja uma função de menu.
Ou seja, ela exibe uma série de opções, você escolhe o que deseja fazer, então ela chama a função correta.

Para exemplificar, vamos criar um script que inicialmente pede dois números ao usuário.
Depois, pede que ele selecione uma operação matemática: soma, subtração, multiplicação ou divisão.

Depois, mostre o resultado correto da operação.

Como Criar uma Calculadora em JavaScript

Através de dois input, vamos pedir dois números ao usuário: num1 e num2.
Depois, em grupo chamado calc, ele vai ter que escolher uma opção Matemática.

Para isso, usamos os radio buttons, que permitem escolher apenas uma opção dentro de um grupo.
Cada opção dessa tem sua id própria: 'soma', 'subtracao', 'multiplicacao' e 'divisao'.

Quando clicamos em Calcular, é invocada a função main().
Depois, uma div de id='resp', onde iremos inserir a resposta via JS.

Dentro da função main, vamos pegar todos os dados: num1 e num2, e passar de string para número decimal do tipo Float.

Vamos armazenar o resultado da operação na variável string texto.

Agora precisamos tratar os radio buttons.
Ou seja, descobrir qual deles foi selecionado. Para isso, basta testar o atributo .checked de cada botão.

Se ele for o selecionado, retorna True e o teste condicional correspondente é acionado.
Dentro de cada IF, a função correta é invocada: soma(), subtracao(), multiplicacao() e divisao()

Veja como ficou nosso código HTML:

<!DOCTYPE html>
<html>
 <head>
    <title>Apostila JavaScript Progressivo</title>
    <script type="text/javascript" src="script.js"></script>
 </head>
 <body>
  Numero 1:<input id="num1" type="number"> <br />
  Numero 2:<input id="num2" type="number"> <br />
  <input type="radio" name="calc" id="soma"/> Soma<br />
 <input type="radio" name="calc" id="subtracao"/> Subtração<br />
 <input type="radio" name="calc" id="multiplicacao"/> Multiplicação<br />
 <input type="radio" name="calc" id="divisao"/> Divisão<br />
 <button onclick="main()">Calcular</button><br />
 Resposta: <div id="resp"></div>
 </body>
</html>

Código JavaScript:

function main()
{
 var resp = document.getElementById('resp');
 var num1 = parseFloat(document.getElementById("num1").value);
 var num2 = parseFloat(document.getElementById("num2").value);
 var texto='';

 if(document.getElementById('soma').checked)
  texto = soma(num1, num2);
 if(document.getElementById('subtracao').checked)
  texto = subtracao(num1, num2);
 if(document.getElementById('multiplicacao').checked)
  texto = multiplicacao(num1, num2);
 if(document.getElementById('divisao').checked)
  texto = divisao(num1, num2);

 resp.innerHTML = texto;
}

function soma(x, y)
{
  
  return (x+y);
}

function subtracao(x, y)
{
  
  return (x-y);
}

function multiplicacao(x, y)
{
  
  return (x*y);
}

function divisao(x, y)
{
  
  return (x/y);
}

Resultado da nossa calculadora:

Numero 1:
Numero 2:
Soma
Subtração
Multiplicação
Divisão

Resposta: