Autor: Thiago Gaelzer

Na base de toda tomada de decisão em programação está a lógica — e, dentro dela, os operadores lógicos desempenham um papel fundamental. Esses operadores são essenciais para construir condições que permitem que o software “pense” e aja de acordo com diferentes situações.

Seja no desenvolvimento de sistemas, aplicativos ou páginas web, entender como funcionam os operadores lógicos é o primeiro passo para dominar a lógica condicional e estruturar códigos mais eficientes e inteligentes.

Neste artigo, vamos explorar o que são operadores lógicos, seus principais tipos e como podem ser aplicados na prática utilizando JavaScript. Vamos lá?

1 – O que são operadores lógicos?

Em programação, operadores lógicos são símbolos ou palavras-chave utilizados em expressões booleanas (ou expressões lógicas) para comparar valores. Essas expressões retornam sempre um valor booleano, ou seja, verdadeiro (true) ou falso (false). Esse tipo de dado, conhecido como booleano ou lógico, é o mais simples entre os tipos primitivos — e está presente em praticamente todas as linguagens de programação.

O conceito de lógica booleana, apesar de parecer algo puramente da área de programação, está presente em diversas áreas da tecnologia. Por exemplo, na eletrônica, aprendemos sobre portas lógicas, como AND, OR e NOT, que funcionam com os mesmos princípios dos operadores lógicos em programação. Em ambos os casos, lidamos com decisões baseadas em dois estados possíveis: ligado/desligado, 1/0, aceso/apagado, sim/não ou simplesmente verdadeiro/falso. Compreender essa lógica permite transitar com mais facilidade entre diferentes áreas tecnológicas.

Os operadores lógicos são recursos fundamentais para criar lógica condicional em nossos softwares. Utilizar esses operadores nos permite gerar diferentes fluxos de execução de códigos, dependendo de certas condições serem verdadeiras ou falsas. Isso torna nossos sistemas mais inteligentes, adaptáveis e capazes de tomar decisões de forma automática.

A seguir, vamos ver os principais operadores lógicos e como cada um deles funciona.

2 – Os principais operadores lógicos

Operador AND (E): retorna verdadeiro apenas se ambas as condições forem verdadeiras. Se uma delas for falsa, o resultado será falso.

Valor 1	Valor 2	Resultado
verdadeiro	verdadeiro	verdadeiro
verdadeiro	falso	falso
falso	verdadeiro	falso
falso	falso	falso

Operador OR (OU): retorna verdadeiro se pelo menos uma das condições for verdadeira. Só retorna falso quando ambas forem falsas.

Valor 1	Valor 2	Resultado
verdadeiro	verdadeiro	verdadeiro
verdadeiro	falso	verdadeiro
falso	verdadeiro	verdadeiro
falso	falso	falso

Operador NOT (NÃO): inverte o valor lógico. Se for verdadeiro, torna-se falso; se for falso, torna-se verdadeiro.

Entrada	Resultado
verdadeiro	falso
falso	verdadeiro

Além dos operadores mais comuns (AND, OR, NOT), também existem outros operadores lógicos que combinam ou estendem essas operações básicas:

Operador NAND (NÃO-E): é o oposto do operador AND, ele retorna falso somente se ambas as condições forem verdadeiras. É equivalente a aplicar NOT após um AND.

Valor 1	Valor 2	Resultado
verdadeiro	verdadeiro	falso
verdadeiro	falso	verdadeiro
falso	verdadeiro	verdadeiro
falso	falso	verdadeiro

Operador NOR (NÃO-OU): é o oposto do operador OR, ele retorna falso se pelo menos uma das condições for verdadeira. É equivalente a aplicar NOT após um OR.

Valor 1	Valor 2	Resultado
verdadeiro	verdadeiro	falso
verdadeiro	falso	falso
falso	verdadeiro	falso
falso	falso	verdadeiro

Operador XOR (OU-EXCLUSIVO): retorna verdadeiro se apenas uma das condições for verdadeira.

Valor 1	Valor 2	Resultado
verdadeiro	verdadeiro	falso
verdadeiro	falso	verdadeiro
falso	verdadeiro	verdadeiro
falso	falso	falso

Operador XNOR (NÃO-OU-EXCLUSIVO): retorna verdadeiro se as duas condições forem iguais.

Valor 1	Valor 2	Resultado
verdadeiro	verdadeiro	verdadeiro
verdadeiro	falso	falso
falso	verdadeiro	falso
falso	falso	verdadeiro

Essas variações são especialmente comuns em áreas como eletrônica e sistemas embarcados, mas também podem aparecer em linguagens de programação que oferecem suporte a operações bit a bit ou manipulação mais avançada de lógica.

3 – Operadores lógicos em JavaScript

Em JavaScript, você pode utilizar os seguintes operadores lógicos:

• && (AND)
• || (OR)
• ! (NOT):

Vamos exemplificar cada um deles usando códigos JavaScript:

– Operador && (AND lógico): vamos começar pelo operador AND. Vale relembrar que ele retorna true somente se ambas as expressões conectadas por ele forem true. Caso contrário, retorna false.

let idade = 25;
let possuiCarteira = true;

if (idade >= 18 && possuiCarteira) {
  console.log("Pode dirigir."); // Esta linha será executada porque ambas as condições são verdadeiras.
} else {
  console.log("Não pode dirigir.");
}

No exemplo acima, a mensagem “Pode dirigir.” só é exibida porque tanto a condição idade >= 18 quanto a condição possuiCarteira são verdadeiras. Se qualquer uma das condições fosse falsas, ou ambas fossem falsas, o resultado também seria falso.

– Operador || (OR lógico): agora vamos ver o operador OR. Lembre-se que ele retorna true se pelo menos uma das expressões conectadas por ele for true. Retorna false somente se ambas forem false.

let produtoTemDesconto = false;
let primeiraCompra = true;

if (produtoTemDesconto || primeiraCompra) {
  console.log("Você tem um desconto!"); // Esta linha será executada porque 'primeiraCompra' é true.
} else {
  console.log("Não há descontos disponíveis.");
}

Nesse exemplo, a mensagem “Você tem um desconto!” é exibida porque pelo menos uma das condições (nesse caso primeiraCompra é true) é verdadeira. O operador || só retornaria false se ambas as condições forem falsas.

– Operador ! (NOT lógico): para finalizar vamos ver o operador NOT. Ele é um operador unário (opera em uma única expressão), que apenas inverte o valor booleano da expressão. Se a expressão for true, ! a torna false, e se for false, ! a torna true.

let usuarioLogado = false;

if (!usuarioLogado) {
  console.log("Por favor, faça login."); // Esta linha será executada porque '!usuarioLogado' é true (a negação de false).
} else {
  console.log("Bem-vindo!");
}

No exemplo apresentado acima, usuarioLogado é false. O operador ! inverte esse valor para true, fazendo com que a mensagem “Por favor, faça login.” seja exibida.

Em resumo, os operadores lógicos (&&, ||, !) são ferramentas essenciais em JavaScript (e em muitas outras linguagens de programação) para controlar o fluxo do seu código com base em condições booleanas. Eles permitem criar lógicas mais complexas e dinâmicas em suas aplicações, sendo indispensáveis no desenvolvimento de softwares.

Conclusão

Dominar os operadores lógicos é essencial para qualquer pessoa que deseje programar com clareza e precisão. Eles são a chave para criar códigos que tomam decisões, validam condições e moldam o comportamento de sistemas.

Como vimos, tanto os operadores mais comuns — AND, OR e NOT — quanto os mais específicos — como XOR, NAND e NOR — têm aplicações que vão muito além da programação, estando presentes também em áreas como a eletrônica. Com uma boa compreensão desses conceitos, é possível escrever códigos mais limpos, eficientes e adaptáveis às mais diversas situações do mundo real.

Espero que este artigo seja útil de alguma forma para você. Em caso de dúvidas, sugestões ou reclamações, fique à vontade para entrar em contato.

No mundo do desenvolvimento web, o JavaSript é uma linguagem que se destaca pela sua versatilidade. Presente tanto no front-end quanto no back-end, essa linguagem de programação revolucionou a forma como interagimos com sites e aplicações, tornando a web dinâmica e interativa.

Criado na década de 90, o JavaScript evoluiu de um simples recurso para adicionar interatividade às páginas para uma linguagem robusta e amplamente utilizada em sistemas complexos. Seu ecossistema é vasto, abrangendo bibliotecas e frameworks que facilitam o desenvolvimento de aplicações modernas.

Neste artigo, vamos explorar o que é JavaScript, sua origem, principais características e ainda vamos ver um exemplo prático de uso. Se você quer entender por que essa linguagem é essencial para qualquer desenvolvedor web, continue a leitura!

1 – O que é JavaScript?

JavaScript é uma linguagem de programação versátil e poderosa, essencial para o desenvolvimento web moderno. Inicialmente, a linguagem foi criada para adicionar interatividade às páginas web. Porém, o JavaScript evoluiu muito ao longo dos anos e atualmente é usado tanto no front-end (executado no navegador) quanto no back-end (com tecnologias como Node.js).

1.1 – Principais características

– Linguagem Interpretada: os códigos das linguagens interpretadas são executados linha por linha, sem necessidade de compilação prévia. No JavaScript, os códigos são executados diretamente pelo navegador ou pelo motor de execução (como o V8 do Chrome por exemplo).

– Linguagem de alto nível: essas linguagens possuem uma sintaxe mais próxima da linguagem humana e menos relacionada à arquitetura do computador. A sintaxe do JavaScript está baseada em palavras da língua inglesa, sendo mais entendível para o ser humano em comparação a outra linguagens como Assembly e C, por exemplo.

– Baseada em Eventos: JavaScript é uma linguagem capaz de responder a eventos do usuário, como cliques, digitação e interações na página.

– Multiparadigma: suporta programação imperativa, orientada a objetos e funcional, permitindo flexibilidade no desenvolvimento.

– Tipagem Dinâmica: o tipo das variáveis é determinado, automaticamente em tempo de execução do código. Essa característica torna a escrita do código mais ágil e eficiente.

– Assíncrono e Não Bloqueante: usa mecanismos como callbacks, promises e async/await para lidar com operações assíncronas, como requisições HTTP e manipulação de arquivos no backend.

– Executado no Cliente e no Servidor: no front-end, manipula a árvore DOM (Document Object Model) para alterar elementos da página. No back-end, com Node.js, pode criar servidores, manipular bancos de dados e integrar APIs.

– Extensível e Modular: JavaScript é uma linguagem essencial para qualquer desenvolvedor web, sendo usada para criar desde pequenos scripts até aplicações complexas.

– Ecossistema amplo: o JavaScript possui um vasto ecossistema de bibliotecas e frameworks, como, React, Angular e Vue.js para front-end, além de Express.js e NestJS para back-end.

Resumidamente, o JavaScript é uma linguagem interpretada, de alto nível, com tipagem dinâmica amplamente utilizada no desenvolvimento web. Mas, como essa linguagem surgiu? Vamos descobrir isso no próximo tópico:

2 – Como surgiu o JavaScript?

O JavaScript surgiu em 1995, criado por Brendan Eich, um desenvolvedor da Netscape, empresa responsável pelo desenvolvimento do navegador Netscape Navigator, um dos primeiros browsers da história da internet.

Nos anos 90, a internet era estática e baseada apenas em HTML e CSS, sem muita interatividade. Para tornar os sites mais dinâmicos, a Netscape queria uma linguagem que rodasse no navegador e interagisse com o usuário sem precisar recarregar a página.

Brendan Eich desenvolveu essa linguagem em apenas 10 dias, inicialmente chamada de Mocha, depois renomeada para LiveScript e, por fim, para JavaScript, devido à popularidade da linguagem Java na época. Entretanto, as duas linguagens não têm relação direta entre si, além dos nomes parecidos.

Em 1997, a ECMA, uma instituição internacional sem fins lucrativos dedicada à padronização de sistemas de informação e comunicação, tornou-se responsável pelo JavaScript. Essa instituição padronizou a linguagem, evitando sua fragmentação, bem como estabeleceu seu nome oficial como ECMAScript (ES).

Desde então, o JavaScript passou por muitas atualizações e melhorias coordenadas pela ECMA. Sua versão atual é a ECMAScript 2024. A linguagem também figura entre as mais populares do mundo, segundo pesquisa do site StackOverflow, renomado site na área de desenvolvimento de softwares.

Vamos ver agora um exemplo prático dessa linguagem tão popular entre os desenvolvedores.

3. Exemplo prático de JavaScript

Na prática, o JavaScript é utilizado em conjunto com HTML e o CSS para construção de páginas e aplicações web. Cada uma dessas linguagens possui uma função específica:

– HTML: linguagem de marcação responsável pela estrutura das páginas e aplicações, definindo cabeçalhos, títulos, parágrafos e outros elementos.

– CSS: linguagem de folha de estilos responsável pela personalização do layout da página, definindo cores, fontes, posição dos elementos, entre outros atributos.

– JavaScript: linguagem de programação responsável por toda a interação da página, definindo ações ao clicar em um botão, ao digitar um texto em um campo de input, entre outros.

Quer conhecer mais sobre HTML e CSS? Não deixe de conferir meus artigos sobre O que é HTML? e O que é CSS?

Para nosso exemplo iremos criar um contador de cliques utilizando HTML, CSS e JavaScript. Vamos começar?

3.1 – Criando um contador de cliques

Para criar o contador de cliques, vamos precisar criar três arquivos: index.html, styles.css e counter.js

Após criar os arquivos, vamos criar os códigos, começando pelo arquivo index.html:

<!DOCTYPE html>

<html lang="pt-BR">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="./css/styles.css">
        <script defer type="text/javascript" src="./js/counter.js"></script>
        <title>Contador com JavaScript</title>
    </head>
    <body>
        <div class="container">
            <div class="titulo">
                <h1>Contador: <span id="counter">0</span></h1>
            </div>
            <div class="botoes">
                <button id="increment">+</button>
                <button id="decrement">-</button>
            </div>
        </div>
    </body>
</html>

No HTML acima, estamos definindo no <body> um contador e dois botões: um para somar cliques e outro para subtrair. Além disso, no <head> estamos passando alguns metadados da página, definindo um título e referenciando dois arquivos: styles.css, onde estão os estilos da página e counter.js, onde é executada a lógica do contador.

Ok, concluída a criação de nosso HTML, vamos criar o código de styles.css:

.container {
    display: flex;
    justify-content: center;
    height: 95vh;
    flex-direction: column;

}

.titulo, .botoes {
    width: 99vw;
    text-align: center;
    color: #444;
}

h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2.4rem;
}

#counter {
    display: inline-block;
    min-width: 60px;
    font-size: 2.2rem;
    text-align: left;
}

button {
    width: 50px;
    height: 50px;
    font-size: 1.8rem;
    font-weight: bold;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: 0.3s ease-in-out;
    background-color: #888;
    color: white;
    margin-right: 40px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
}

button:hover {
    background-color: #777;
    transform: scale(1.1);
}

button:active {
    transform: scale(0.9);
}

Repare no código CSS acima, que definimos a posição, tamanho e estilos de cada elemento da página. Esse CSS nos leva ao resultado abaixo, com nosso contador centralizado na página com um aspecto visual simples e agradável:

Por fim, vamos criar o código de counter.js, para configurar as ações do contador de cliques:

// Seleciona os elementos do HTML
const counter = document.getElementById("counter");
const incrementBtn = document.getElementById("increment");
const decrementBtn = document.getElementById("decrement");

// Variável que armazena o valor do contador
let count = 0; 

// Função para atualizar o contador na tela
function updateCounter() {
  counter.textContent = count;
}

// Função que soma cliques ao contador 
incrementBtn.addEventListener("click", () => {
  count++;
  updateCounter();
});

// Função que subtrai cliques no contador 
decrementBtn.addEventListener("click", () => {
  count--;
  updateCounter();
});

O código JavaScript é responsável pela lógica de acréscimo e subtração de valores no contador. Vamos analisar esse código:

– Seleciona os elementos do documento HTML usando document.getElementById().

– Define uma variável count para armazenar o valor do contador.

– Cria uma função updateCounter() para atualizar o valor do contador na tela.

– Adiciona duas funções de callback addEventListener() aos botões para detectar cliques e atualizar o contador.

O código JavaScript nos leva a esse resultado aqui:

Observe que, ao combinarmos JavaScript com HTML e CSS, conseguimos criar aplicações e páginas web funcionais de forma simples e eficiente. Essas linguagens representam a base do desenvolvimento front-end para a web e são fundamentais para a internet como a conhecemos.

Conclusão

O JavaScript revolucionou a forma como interagimos com a web, tornando as páginas mais dinâmicas e responsivas. Desde sua criação nos anos 90 até os dias atuais, essa linguagem passou por diversas evoluções e continua sendo uma das mais populares no mundo do desenvolvimento.

Com um vasto ecossistema de frameworks e bibliotecas, ele possibilita a criação de aplicações robustas e eficientes. Dominar JavaScript é essencial para qualquer desenvolvedor web que deseja construir soluções modernas e interativas.

Espero que este artigo seja útil de alguma forma para você. Em caso de dúvidas, sugestões ou reclamações, fique à vontade para entrar em contato.