Quer ajudar o projeto? Você pode doar na tela Sobre mim!

JavaScript, metodos, funções, Boleanos e condicionais

JavaScript

Javascript

2. Incluindo JavaScript no HTML

  • Crie um arquivo index.html e adicione:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meu Primeiro JS</title>
</head>
<body>
    <h1>Bem-vindo ao JavaScript!</h1>
    <script>
        alert("Olá, seja bem-vindo!");
    </script>
</body>
</html>

Operadores Os operadores em JavaScript permitem manipular valores. Alguns dos mais usados são:

  • Aritméticos: Soma (+), subtração (-), multiplicação (*), divisão (/), módulo (% - resto da divisão)
  • Lógicos: && (E), || (OU), ! (NÃO)

Exemplo de operadores em ação:

let a = 10; 
let b = 5;  

console.log(a + b); // Soma
console.log(a - b); // Subtração
console.log(a * b); // Multiplicação
console.log(a / b); // Divisão
console.log(a % b); // Resto da divisão
console.log(a > b && b < 10); // Operador lógico

Estruturas Condicionais As estruturas condicionais permitem que o código tome decisões com base em certas condições. Duas das mais comuns são if/else e switch.

  • if/else: Verifica uma condição e executa diferentes blocos de código.
  • switch: Alternativa ao if, útil quando há muitas condições possíveis. Exemplo:
let idade = 18;  

if (idade >= 18) {     
    console.log("Maior de idade"); 
} else {     
    console.log("Menor de idade"); 
}  

let cor = "vermelho";  

switch (cor) {     
    case "azul":         
        console.log("A cor é azul");         
        break;     
    case "vermelho":         
        console.log("A cor é vermelha");         
        break;     
    default:         
        console.log("Cor desconhecida"); 
}

Laços de Repetição Os laços (for, while) permitem repetir um bloco de código várias vezes.

For: Útil quando sabemos o número exato de repetições. While: Continua executando enquanto uma condição for verdadeira.

Exemplo:

// For
for (let i = 0; i < 5; i++) {     
    console.log("Número:", i); 
}  

// While
let contador = 0; 
while (contador < 5) {     
    console.log("Contando...", contador);     
    contador++; 
}
  1. Funções e Manipulação do DOM Funções Funções são blocos de código reutilizáveis. Elas podem receber parâmetros e retornar valores.

Exemplo:

function saudacao(nome) {     
    return "Olá, " + nome + "!"; 
}  

console.log(saudacao("Marcos"));

Manipulação do DOM

  • O DOM (Document Object Model) permite acessar e modificar elementos HTML usando JavaScript. No exemplo abaixo, um botão altera o texto de um parágrafo quando clicado.

HTML:

<button onclick="mudarTexto()">Clique Aqui</button> 
<p id="mensagem">Texto original</p>  

<script>     
    function mudarTexto() {         
        document.getElementById("mensagem").innerText = "Texto alterado!";     
    } 
</script>

4. Arrays e Objetos

Manipulando Arrays

  • Arrays armazenam listas de valores e possuem métodos úteis, como push() e map().

Exemplo:

let frutas = ["Maçã", "Banana", "Laranja"]; 
frutas.push("Uva"); // Adiciona no final
console.log(frutas);  

let novaLista = frutas.map(fruta => fruta.toUpperCase()); 
console.log(novaLista);

Objetos e JSON

  • Objetos armazenam dados no formato chave-valor.
  • JSON (JavaScript Object Notation) é um formato leve para troca de dados.

Exemplo:

let pessoa = { nome: "Carlos", idade: 30, cidade: "SP" }; 
console.log(pessoa.nome);  

let json = JSON.stringify(pessoa); // Converte objeto para JSON
console.log(json);  

let objeto = JSON.parse(json); // Converte JSON para objeto
console.log(objeto);

5. Assíncrono e APIs

Fetch API para Buscar Dados

  • O fetch() é usado para fazer requisições HTTP e obter dados de APIs.

Exemplo:

fetch("https://jsonplaceholder.typicode.com/users")     
    .then(response => response.json())     
    .then(data => console.log(data))     
    .catch(error => console.error("Erro na API:", error));

Async/Await async/await torna o código assíncrono mais fácil de entender e usar.

Exemplo:

async function buscarDados() {     
    try {         
        let resposta = await fetch("https://jsonplaceholder.typicode.com/users");         
        let dados = await resposta.json();         
        console.log(dados);     
    } catch (erro) {         
        console.error("Erro na API:", erro);     
    } 
} 

buscarDados();

3. Mais sobre variaveis

Variáveis

    1. var (EVITE USAR!) O var era a forma tradicional de declarar variáveis antes do ES6. No entanto, ele tem alguns problemas que podem causar bugs no código.

  • Escopo: Tem escopo de função, ou seja, se for declarado dentro de uma função, só pode ser acessado dentro dela.

  • Reatribuição: Pode ser reatribuído e atualizado.

  • Hoisting: Ele é "elevado" para o topo do escopo, mas sem valor inicial. 📌 Exemplo com var:

function exemploVar() {
    var nome = "Marcos";
    if (true) {
        var nome = "João"; // Sobrescreve a variável, pois var ignora o bloco de código
        console.log(nome); // João
    }
    console.log(nome); // João (isso pode ser um problema!)
}

exemploVar();

2. let (O MAIS RECOMENDADO PARA VARIÁVEIS MUTÁVEIS)

O let foi introduzido no ES6 e resolve muitos problemas do var.

  • Escopo: Tem escopo de bloco, ou seja, só existe dentro do {} onde foi declarado.
  • Reatribuição: Pode ser atualizado, mas não redeclarado no mesmo escopo.
  • Hoisting: É elevado, mas não pode ser usado antes da declaração. Exemplo com let:
function exemploLet() {
    let idade = 30;
    if (true) {
        let idade = 25; // Essa variável só existe dentro do if
        console.log(idade); // 25
    }
    console.log(idade); // 30 (aqui, o valor original é mantido)
}

exemploLet();

3. const (USE PARA VALORES QUE NÃO MUDAM)

O const também foi introduzido no ES6 e é usado para valores imutáveis (não podem ser reatribuídos).

  • Escopo: Também tem escopo de bloco.
  • Reatribuição: ❌ Não pode ser atualizado!
  • Hoisting: É elevado, mas não pode ser acessado antes da declaração. 📌 Exemplo com const:
const PI = 3.14;
PI = 3.1416; // ❌ Isso dará erro! Não é possível alterar um `const`

Mas se const for um objeto ou array, os elementos internos podem ser modificados:

const pessoa = { nome: "Carlos", idade: 28 };
pessoa.idade = 29; // ✅ Isso pode
console.log(pessoa); // { nome: "Carlos", idade: 29 }

const numeros = [1, 2, 3];
numeros.push(4); // ✅ Isso pode
console.log(numeros); // [1, 2, 3, 4]

O que não pode mudar é a referência na memória, mas os valores dentro do objeto ou array podem ser alterados.

4. O que é o this em JavaScript?

O this é uma palavra-chave em JavaScript que faz referência ao objeto atual em que o código está sendo executado. O valor de this pode variar dependendo de como a função é chamada.

Exemplos:

// Exemplo 1: Em um objeto
const pessoa = {
  nome: "Marcos",
  idade: 25,
  saudacao: function() {
    console.log("Olá, " + this.nome); // "this" se refere ao objeto "pessoa"
  }
};

pessoa.saudacao(); // Saída: "Olá, Marcos"

// Exemplo 2: Em uma função global
function mostrar() {
  console.log(this); // Em uma função global, "this" se refere ao objeto global (window no navegador)
}

mostrar(); // Exibe o objeto global (window no navegador)

5. Funções de Callback

Uma função de callback é uma função que é passada como argumento para outra função e é executada quando a operação da função externa é concluída.

Exemplo:


function saudacao(nome, callback) {
  console.log("Olá, " + nome);
  callback();
}

function despedida() {
  console.log("Até logo!");
}

saudacao("Marcos", despedida);
// Saída:
// Olá, Marcos
// Até logo!

6. Funções Anônimas e Arrow Functions

As funções anônimas são funções sem nome, enquanto as arrow functions (funções de seta) são uma forma mais curta de escrever funções, com comportamento próprio para o this.

Exemplo de função anônima:

setTimeout(function() {
  console.log("Este é um exemplo de função anônima!");
}, 1000);

Exemplo de arrow function:

const soma = (a, b) => a + b;

console.log(soma(5, 3)); // Saída: 8

4. Métodos setTimeout e setInterval

  • setTimeout: Executa uma função uma vez após um tempo especificado.
  • setInterval: Executa uma função repetidamente após um intervalo de tempo especificado. Exemplo de setTimeout
console.log("Início");

setTimeout(function() {
  console.log("Executado depois de 2 segundos");
}, 2000);

console.log("Fim");
// Saída:
// Início
// Fim
// Executado depois de 2 segundos

Exemplo de setInterval:

let contador = 0;

const intervalo = setInterval(function() {
  contador++;
  console.log(contador);

  if (contador >= 5) {
    clearInterval(intervalo); // Para a execução após 5 iterações
  }
}, 1000);
// Saída:
// 1
// 2
// 3
// 4
// 5

5. Promessas (Promises) e then/catch

Promessas são usadas para lidar com operações assíncronas. A função de then é chamada quando a promessa é resolvida, e a função de catch é chamada quando ocorre um erro.

Exemplo:

let promessa = new Promise(function(resolve, reject) {
  let sucesso = true; // Simulando sucesso ou erro

  if (sucesso) {
    resolve("Operação realizada com sucesso!");
  } else {
    reject("Ocorreu um erro.");
  }
});

promessa
  .then(function(result) {
    console.log(result); // Saída: "Operação realizada com sucesso!"
  })
  .catch(function(error) {
    console.log(error);
  });

6. Arrow Functions e o this

As arrow functions têm um comportamento especial com o this. O this dentro de uma arrow function se refere ao valor de this do contexto onde a função foi criada, e não ao contexto de execução.

Exemplo:

const pessoa = {
  nome: "Marcos",
  idade: 25,
  saudacao: function() {
    setTimeout(() => {
      console.log(`Olá, meu nome é ${this.nome}`); // "this" se refere ao objeto "pessoa"
    }, 1000);
  }
};

pessoa.saudacao(); // Saída após 1 segundo: "Olá, meu nome é Marcos"

Boolean

Existem dois valores booleanos false ou true.

var possuiGraduacao = true;
var possuiDoutorado = false;

7. Condicionais If e Else

Verificar se uma expressão é verdadeira com if, caso contrário o else será ativado.

var possuiGraduacao = true;

if(possuiGraduacao) {
  console.log('Possui graduação');
} else {
  console.log('Não possui graduação');
}
// retorna Possui Graduação e não executa o else

O valor dentro dos parênteses sempre será avaliado em false ou true.

8. Switch

O switch verifica se uma variável é igual a diferentes valores e executa um case correspondente. Caso ela seja igual, você pode fazer alguma coisa e utilizar a palavra chave break; Lembrando que o valor do default ocorrera caso nehuma das anteriores seja verdadeira.

var corFavorita = "Azul";

switch (corFavorita) {
  case "Azul":
    console.log("Olhe para o céu.");
    break;
  case "Vermelho":
    console.log("Olhe para rosas.");
    break;
  case "Amarelo":
    console.log("Olhe para o sol.");
    break;
  default:
    console.log("Feche os olhos");
}
// Saída: "Olhe para o céu."

9. Truthy e Falsy

Alguns valores são avaliados como true (truthy) ou false (falsy) quando usados em expressões booleanas.

Falsy (valores que retornam false)

if (false) if (0) if (-0) if (NaN) if (null) if (undefined) if ('')

Truthy (valores que retornam true)

if (true) if (1) if (' ') if ('andre') if (-5) if ({})

Relembrando Operadores: Operador Lógico de Negação ! N

console.log(!true); // false
console.log(!1); // false
console.log(!''); // true
console.log(!undefined); // true
console.log(!!' '); // true
console.log(!!''); // false

A dica é usar !! para verificar se um valor é truthy ou falsy.

Operadores de Comparação

Sempre retornam um valor booleano (true ou false).

console.log(10 > 5); // true
console.log(5 > 10); // false
console.log(20 < 10); // false
console.log(10 <= 10); // true
console.log(10 >= 11); // false

10. Comparação Estrita (===) vs Não Estrita (==)

O == compara valores sem considerar o tipo, enquanto === compara valores e tipos.

console.log(10 == "10"); // true
console.log(10 === "10"); // false
console.log(10 !== "10"); // true

11. Mais Operadores Lógicos && e ||

Operador && (E lógico)

  • Retorna o primeiro valor false encontrado. Se todos forem true, retorna o último.
console.log(true && true); // true
console.log(true && false); // false
console.log('Gato' && 'Cão'); // 'Cão'
console.log((5 - 5) && (5 + 5)); // 0
console.log('Gato' && false); // false
console.log((5 >= 5) && (3 < 6)); // true

12. Operador || (OU lógico)

  • Retorna o primeiro valor true encontrado.
console.log(true || true); // true
console.log(true || false); // true
console.log('Gato' || 'Cão'); // 'Gato'
console.log((5 - 5) || (5 + 5)); // 10
console.log('Gato' || false); // 'Gato'
console.log((5 >= 5) || (3 < 6)); // true

Exercícios:

  1. Verifique se sua idade é maior do que a de um parente Dependendo do resultado, exiba no console 'É maior', 'É igual' ou 'É menor'.
var minhaIdade = 25;
var idadeParente = 30;

if (minhaIdade > idadeParente) {
  console.log("É maior");
} else if (minhaIdade === idadeParente) {
  console.log("É igual");
} else {
  console.log("É menor");
}
  1. Qual valor é retornado na seguinte expressão?
var expressao = (5 - 2) && (5 - ' ') && (5 - 2);
console.log(expressao);

Resposta: 3 (o último valor truthy).

  1. Verifique se as seguintes variáveis são Truthy ou Falsy
var nome = 'Andre'; // Truthy
var idade = 28; // Truthy
var possuiDoutorado = false; // Falsy
var empregoFuturo; // Falsy (undefined)
var dinheiroNaConta = 0; // Falsy
  1. Compare o total de habitantes do Brasil com a China (em milhões)
var brasil = 207;
var china = 1340;

console.log(brasil > china ? "Brasil tem mais habitantes" : "China tem mais habitantes");
  1. O que será exibido no console?
if (('Gato' === 'gato') && (5 > 2)) {
  console.log('Verdadeiro');
} else {
  console.log('Falso');
}

Resposta: 'Falso', pois 'Gato' === 'gato' retorna false.

  1. O que será exibido no console?
if (('Gato' === 'gato') || (5 > 2)) {
  console.log('Gato' && 'Cão');
} else {
  console.log('Falso');
}

Resposta: 'Cão', pois 5 > 2 é true, e 'Gato' && 'Cão' retorna 'Cão'.