Introdução

Imagine que você está caminhando pela rua e chega a uma bifurcação. Você pode ir para a esquerda ou para a direita, mas a sua escolha depende de algumas condições: "Se" for uma rua conhecida, você pode seguir. "Se não", você pode tentar outra opção. Esse tipo de tomada de decisão ocorre o tempo todo na vida real, e nas linguagens de programação, isso é feito usando o famoso "if else".

O conceito de if else é uma das bases da lógica de programação e está presente em praticamente todas as linguagens. É como ensinar o seu programa a tomar decisões, e entender isso é essencial para quem quer aprender a programar.

Neste post, vamos aprender como if else funciona e como ele pode ser utilizado em JavaScript. Além disso, faremos algumas comparações usando tipos de dados como números, strings e booleanos, para que você entenda melhor o conceito.

Se você ainda não está familiarizado com variáveis e tipos de dados, recomendo dar uma olhada neste artigo: Aprendendo Variáveis e Tipos de Dados com JavaScript.

Caso tenha qualquer dúvida sobre o conteúdo a seguir, não se preocupe, já fizemos um artigo explicando todos os conceitos usados, basta acessar a playlist Do zero ao primeiro projeto  e a categoria Lógica de Programação.

Lógica de Programação: O que é e Por que é Importante?

Antes de entrarmos no if else, precisamos falar um pouco sobre a lógica de programação. A lógica é como a base da casa: sem ela, nada se sustenta. Quando você programa, precisa criar instruções que fazem o computador "pensar" e "decidir" o que fazer em diferentes situações.

A lógica de programação é importante porque ajuda o seu código a funcionar de maneira inteligente, permitindo que o programa se adapte a diferentes cenários.

Pense na lógica de programação como uma receita de bolo. Você segue as instruções passo a passo, mas às vezes, o forno pode estar mais quente ou mais frio, e você precisa fazer ajustes. A programação funciona de forma semelhante.

Operadores de Comparação: Maior, Menor, Igual e Diferente

Para que o seu programa possa tomar decisões, ele precisa de informações para comparar. Os operadores de comparação são como as balanças que pesam essas informações. Com eles, você pode verificar se um valor é maior, menor, igual ou diferente de outro.

Aqui estão os principais operadores de comparação:

  • == (igual)
  • != (diferente)
  • > (maior que)
  • < (menor que)
  • >= (maior ou igual)
  • <= (menor ou igual)

Esses operadores são usados dentro da lógica do if else para verificar as condições que determinam qual caminho seguir. E aqui entra um detalhe importante: os tipos de dados influenciam na comparação. Comparar números é diferente de comparar textos, e entender isso é fundamental para evitar erros no seu código.

Agora que você entendeu a importância dos operadores, vamos falar sobre o if!

Como Funciona o IF?

O if é como uma pergunta que fazemos ao programa. Funciona assim: "Se essa condição for verdadeira, faça isso. Se não, faça outra coisa." É uma lógica condicional que verifica se algo é verdade para decidir o que deve ser executado.

Sem usar código, pense no seguinte exemplo:

"Se" a temperatura estiver acima de 30 graus, ligue o ar-condicionado. "Se não", abra as janelas.

Aqui, a condição é "temperatura acima de 30 graus". Dependendo da resposta, o programa vai executar uma ação diferente.

Usando o IF no JavaScript: Vamos ao Código

Vamos transformar essa lógica em código de JavaScript usando um exemplo simples relacionado à idade. O objetivo aqui é verificar se uma pessoa é maior de idade.

  1. Crie um arquivo index.html com o seguinte conteúdo:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemplo de If Else</title>
</head>
<body>
    <h1>Verificar Maioridade</h1>
    <p>Digite a sua idade:</p>
    <input type="number" id="idade" placeholder="Digite sua idade">
    <button onclick="verificarIdade()">Verificar</button>
    <p id="resultado"></p>

    <script>
        function verificarIdade() {
            let idade = document.getElementById('idade').value;
            
            if (idade >= 18) {
                document.getElementById('resultado').innerText = "Você é maior de idade!";
            } else {
                document.getElementById('resultado').innerText = "Você é menor de idade!";
            }
        }
    </script>
</body>
</html>

Colocamos o código Javacript dentro do HTML por se tratar de um exemplo simples. É uma boa prática separar o Javascript do HTML, se quiser aprender a fazer isso corretamente veja esse artigo: Como separar o Como separar o JavaScript do HTML e o local correto de inseri-lo.

O que fizemos aqui:

  • Criamos um campo para o usuário inserir sua idade e um botão para verificar se ele é maior de idade.
  • A função verificarIdade() pega a idade digitada e usa o if else para verificar se a pessoa é maior de idade (idade >= 18). Se for, exibe "Você é maior de idade!" e, se não, "Você é menor de idade!".

Agora, salve o arquivo e abra no navegador. Experimente inserir diferentes idades e veja os resultados!

Comparação com Strings

Vamos agora usar um exemplo com strings. Imagine que queremos verificar o nome de um usuário e dar uma saudação personalizada. Atualize o HTML para o seguinte:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemplo de If Else</title>
</head>
<body>
    <h1>Saudação Personalizada</h1>
    <p>Digite seu nome:</p>
    <input type="text" id="nome" placeholder="Digite seu nome">
    <button onclick="saudar()">Saudar</button>
    <p id="saudacao"></p>

    <script>
        function saudar() {
            let nome = document.getElementById('nome').value;
            
            if (nome == "Sérgio") {
                document.getElementById('saudacao').innerText = "Olá, Sérgio!";
            } else {
                document.getElementById('saudacao').innerText = "Bem-vindo ao Vivendo de Programação!";
            }
        }
    </script>
</body>
</html>

Aqui, comparamos o nome inserido com uma string fixa ("Sérgio"). Se o nome for igual, ele mostra a saudação “Olá, Sérgio”. Se for diferente, mostra uma saudação genérica.

Salve e teste com diferentes nomes. Veja como o resultado muda dependendo da entrada.

Comparação com Booleanos

Antes de mostrar o exemplo, é importante explicar um conceito novo: o evento onclick. Quando você clica em um botão em uma página da web, algo acontece. Isso é possível graças aos eventos do JavaScript, e o onclick é um desses eventos. Ele permite que uma função seja executada assim que o usuário clicar em um elemento (como um botão).

Então, quando você vê algo como:

<button onclick="ativarModoEscuro(true)">Ativar Modo Escuro</button>

O que está acontecendo é que, ao clicar no botão, o JavaScript vai chamar a função ativarModoEscuro e passar o valor true como argumento. Se fosse clicado em um botão que passa false, o comportamento seria diferente. Esse evento é bastante usado para criar interações dinâmicas nas páginas, como o exemplo que veremos agora.

Exemplo de Comparação com Booleanos

Agora que você entendeu o funcionamento do onclick, vamos aplicar isso em um exemplo com booleanos. Imagine que queremos permitir que o usuário escolha se quer ativar ou desativar o "Modo Escuro" de um site. Veja como isso funciona:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemplo de If Else</title>
</head>
<body>
    <h1>Ativar Modo Escuro</h1>
    <button onclick="ativarModoEscuro(true)">Ativar Modo Escuro</button>
    <button onclick="ativarModoEscuro(false)">Desativar Modo Escuro</button>

    <script>
        function ativarModoEscuro(ativado) {
            if (ativado) {
                document.body.style.backgroundColor = "black";
                document.body.style.color = "white";
            } else {
                document.body.style.backgroundColor = "white";
                document.body.style.color = "black";
            }
        }
    </script>
</body>
</html>

Como funciona:

  • Booleano: Estamos utilizando um valor booleano (ou seja, true ou false) para determinar se o modo escuro deve ser ativado ou desativado.
  • onclick: Cada botão tem o evento onclick que chama a função ativarModoEscuro() passando o valor true (para ativar) ou false (para desativar).
  • Alteração do Estilo: Se o valor passado for true, o fundo da página ficará preto e o texto branco. Se for false, o fundo volta a ser branco e o texto preto.

Dica: Salve e teste o exemplo. Ao clicar nos botões, você verá o fundo da página mudando de cor!

Essa não é uma forma eficiente para montar um layout com tema claro/escuro, mas explica de forma prática como fazer comparação com booleanos. Pode ficar tranquilo que abordaremos futuramente esse tema e como fazer de forma simples e eficiente.

Conclusão

Entender como o if else funciona é um passo fundamental para dominar a lógica de programação. Seja verificando números, textos ou valores booleanos, essa estrutura de decisão está presente em todo tipo de software que você criar. Desde verificar se um usuário tem acesso a um recurso até aplicar regras.

Ficou com alguma dúvida?

Confira as perguntas e respostas mais frequentes sobre If Else

 

Pergunta: O que é a estrutura if else e por que ela é importante?
A estrutura if else é uma das bases da lógica de programação. Ela permite que você tome decisões no código, verificando condições e executando diferentes blocos de código com base no resultado dessas condições.

 

Pergunta: Quando devo usar o if e quando usar o else?
O if é usado para verificar uma condição específica. Se a condição for verdadeira, o bloco de código dentro do if será executado. Já o else serve como uma alternativa: ele será executado quando a condição do if for falsa.

 

Pergunta: Quais tipos de comparações posso fazer dentro de um if?
Você pode comparar valores numéricos, strings e booleanos. As comparações podem incluir igualdade (==), diferença (!=), maior ou menor (>, <), e também operadores lógicos como && (e) e || (ou).

 

Pergunta: Posso usar mais de um if em uma sequência?
Sim! Você pode usar quantos if forem necessários e também pode adicionar else if para testar várias condições diferentes. Se nenhuma das condições for verdadeira, o else será a opção final.

 

Pergunta: Como o if else funciona com booleanos?
O if e o else funcionam muito bem com booleanos, que são valores true ou false. Se a condição no if for verdadeira, ele executa o bloco correspondente. Caso contrário, o código dentro do else será executado.

 

Pergunta: Por que separar o JavaScript do HTML é recomendado?
Separar o JavaScript do HTML é uma boa prática de desenvolvimento. Isso torna o código mais organizado e mais fácil de manter, além de permitir reutilização e melhor desempenho em grandes projetos.

 

Pergunta: Onde posso aplicar a lógica if else em projetos reais?
A lógica if else é aplicada em quase todos os projetos de programação, desde verificação de login, validação de formulários, até em cálculos como o exemplo da calculadora de idade ou mesmo na criação de jogos.

 

Para encerrar, lembre-se: ler sobre programação é importante, mas praticar é o que realmente vai fazer a diferença. Então, coloque a mão na massa e experimente criar seus próprios exemplos usando if else. Assim, você solidifica o que aprendeu e começa a pensar como um verdadeiro programador!