O Em Busca do Código é um site em formato de plataforma de ensino a distância (EAD), totalmente aberta e gratuita.

Aprendendo e ensinando, essa é a minha regra para mim.

Publicado dia 20 de fevereiro de 2017.

Compre um adesivo do Em Busca do Código.

Publicidade

Publicidade

Publicidade

if e else (calculadora simples) em JavaScript. Dica 12

Nesta dica nós fazemos uma calculadora simples e quando falo simples quero dizer que, os valores e o tipo de conta são informados no código fonte.

Podemos usar if e else sem usar uma função, mas escolhi este exemplo para explicar if e else.

A seguir temos o código fonte HTML para iniciarmos essa dica. Salve-o com o nome que quiser no editor ou IDE de sua preferência como uma extensão .html.

<!DOCTYPE html>
<html>
    <head>
        <title>if e else em JavaScript  (calculadora simples)</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <h1>if e else em JavaScript (calculadora simples)</h1>
        <script src="ifelse.js"></script>
    </body>
</html>

A seguir crie um documento chamado ifelse.js e as dicas a seguir são para serem escritas nele.

Em dicas anteriores já foi explicado o que é uma função, então, a primeira informação que iremos inserir em nosso .js é uma função.

function calculadora (q,w,conta) {}

Condicional if

Para a Fundação Mozilla a condicional if é uma estrutura condicional que executa a afirmação, dentro do bloco, se determinada condição for verdadeira. Se for falsa, executa as afirmações dentro de else.

if (condição verdadeira) { } else {instrução}

Considere sempre que, o if é verdade.

if (conta === "+") {
        return q + w;
    }

Nós teremos 4 "verdades" em nossa calculadora, por isso, utilizaremos else if.

else if(conta === "-") {
        return q - w;
    }else if (conta === "*") {
        return q * w;
    }else if (conta === "/") {
        return q / w;
    }

Publicidade

E se o valor da nossa variável conta não for nenhum dos valores informados teremos um erro, então, precisamos tratar esse possível erro utilizando apenas else.

else{
        document.write("<h1>Não foi possível calcular.</h1>");
}

Agora criamos mais um document.write para chamar a nossa função calculadora.

document.write("<h1>"+q+" "+conta+" "+w+" = "+calculadora(q,w,conta)+"</h1>")

Esse document.write parece estranho?

Fiz isso nele apenas para ele ficar mais bonito. Mas ainda não informamos os valores das variáveis.

var q = 10;
var w = 5;
var conta = "/";

Essa dica é isso, confira o vídeo.

Publicidade

Assista ao vídeo:

Código fonte JavaScript (completo)

function calculadora (q,w,conta) {
    if (conta === "+") {
        return q + w;
    }else if(conta === "-") {
        return q - w;
    }else if (conta === "*") {
        return q * w;
    }else if (conta === "/") {
        return q / w;
    }else{
        document.write("<h1>Não foi possível calcular.</h1>");
    }
}

Dica

Brinque com os valores das variáveis, com os nomes das variáveis, ao invés de document.write utilize um alert. Espero que essa dica tenha sido útil e, até a próxima.

Espero que esta dica tenha sido útil.

Link externo da Fundação Mozilla sobre if e else.

Se estiver utilizando bloqueador de propaganda, por favor, coloque este site na lista branca (isto sempre será apenas um pedido). Obrigado pela escolha.