JS Explorer

Estruturas de Decisão (`if`, `else if`, `else`, `switch`)

Permitem que seu código tome diferentes caminhos com base em condições.

let idade = 18;

if (idade >= 18) {
    console.log("Você é maior de idade.");
} else {
    console.log("Você é menor de idade.");
}

let diaDaSemana = "Terça";
switch (diaDaSemana) {
    case "Segunda":
        console.log("Início da semana.");
        break;
    case "Sexta":
        console.log("Quase fim de semana!");
        break;
    default:
        console.log("Dia comum.");
}
                    

Estruturas de Repetição (`for`, `while`)

Usadas para repetir um bloco de código várias vezes.

// Loop for: repete um número específico de vezes
for (let i = 0; i < 3; i++) {
    console.log("Contador for: " + i);
}

// Loop while: repete enquanto uma condição for verdadeira
let contador = 0;
while (contador < 2) {
    console.log("Contador while: " + contador);
    contador++;
}
                    

Funções e Escopo de Variáveis

**Funções** são blocos de código reutilizáveis que realizam uma tarefa específica. Elas podem receber **parâmetros** (informações de entrada) e usar `return` para devolver um **valor**.

**Escopo** define onde uma variável pode ser acessada.

• **Global:** Acessível em qualquer lugar do script.
• **Local/Função:** Acessível apenas dentro da função onde foi declarada.
• **Bloco (`let`, `const`):** Acessível apenas dentro do bloco (`{}`) onde foi declarada.

function saudar(nome) { // 'nome' é um parâmetro
    let mensagem = "Olá, " + nome + "!"; // 'mensagem' tem escopo local
    return mensagem; // Retorna o valor
}

let saudacaoGlobal = saudar("Mundo"); // Chama a função
console.log(saudacaoGlobal); // "Olá, Mundo!"

// console.log(mensagem); // Erro! 'mensagem' não está definida fora da função
                    

Atividade: Verificador de Par ou Ímpar

Crie uma função chamada `verificarParOuImpar` que receba um número como parâmetro e retorne a string "Par" se o número for par, e "Ímpar" se for ímpar.
Use o operador `%` (resto da divisão) para verificar se o número é divisível por 2.
Chame a função com alguns números e imprima o resultado no console.

Arrays: Listas de Dados

Um **Array** é uma lista ordenada de valores. Pense nele como uma lista de compras ou uma fila de pessoas. Cada item tem um índice (posição), começando do `0`.

• **Criar:** `const lista = [item1, item2];`
• **Acessar:** `lista[0]` (acessa o primeiro item).
• **`push()`:** Adiciona um item ao final do array.
• **`pop()`:** Remove o último item do array.
• **`splice()`:** Adiciona ou remove itens em qualquer posição.
• **`forEach()`:** Executa uma função para cada item do array.
• **`map()`:** Cria um novo array aplicando uma função a cada item do array original.

const frutas = ["maçã", "banana"];
console.log(frutas[0]); // "maçã"

frutas.push("laranja"); // frutas agora é ["maçã", "banana", "laranja"]
console.log(frutas);

frutas.pop(); // remove "laranja"
console.log(frutas); // ["maçã", "banana"]

frutas.forEach(function(fruta) {
    console.log("Eu gosto de " + fruta);
});
                    

Objetos: Dados com Propriedades

Um **Objeto** é uma coleção de propriedades, onde cada propriedade tem um nome (chave) e um valor. Pense nele como uma ficha de cadastro de uma pessoa, onde cada campo (nome, idade) tem um valor.

• **Criar:** `const pessoa = { nome: "Ana", idade: 30 };`
• **Acessar:** `pessoa.nome` ou `pessoa['nome']`.
• **Loop em Array de Objetos:** Com `forEach` ou `for...of`.

const produto = {
    nome: "Notebook",
    preco: 2500,
    emEstoque: true
};

console.log(produto.nome); // "Notebook"
console.log(produto["preco"]); // 2500

const produtos = [
    { id: 1, nome: "Celular", preco: 1200 },
    { id: 2, nome: "Fone", preco: 150 }
];

produtos.forEach(function(p) {
    console.log(`Produto: ${p.nome}, Preço: R$${p.preco}`);
});
                    

Atividade: Catálogo de Produtos

Crie um array de objetos, onde cada objeto representa um produto com `nome` e `preco`.
Use um loop `forEach` para imprimir o nome e o preço de cada produto no console.
Desafio: Adicione um novo produto ao array e imprima a lista atualizada.

O que é o DOM?

O **DOM (Document Object Model)** é a representação em árvore do seu documento HTML. O JavaScript pode usar o DOM para acessar e manipular todos os elementos da sua página web (parágrafos, botões, inputs, etc.).

Comandos úteis para selecionar elementos:

• `document.getElementById('idDoElemento')`: Seleciona um elemento pelo seu ID.
• `document.querySelector('.minha-classe')`: Seleciona o primeiro elemento que corresponde a um seletor CSS (classe, ID, tag).
• `document.querySelectorAll('div')`: Seleciona todos os elementos que correspondem a um seletor CSS.

<p id="meuParagrafo">Texto original.</p>

<script>
    const paragrafo = document.getElementById('meuParagrafo');
    paragrafo.textContent = "Novo texto!"; // Altera o texto do parágrafo
    paragrafo.style.color = "blue"; // Altera o estilo CSS
</script>
                    

Eventos e `addEventListener`

**Eventos** são ações que acontecem no navegador (um clique, um teclado digitado, uma página carregada). O JavaScript pode "escutar" esses eventos e reagir a eles.

`addEventListener()` é o método para anexar uma função a um evento em um elemento.

• `'click'`: Quando o elemento é clicado.
• `'input'`: Quando o valor de um campo de input muda (em tempo real).
• `'submit'`: Quando um formulário é enviado.

<button id="meuBotao">Clique-me!</button>
<p id="mensagem">Aguardando clique...</p>

<script>
    document.getElementById('meuBotao').addEventListener('click', function() {
        document.getElementById('mensagem').textContent = "Botão clicado!";
    });
</script>
                    

Atividade: Campo de Input em Tempo Real

Crie um campo de input de texto e um parágrafo. À medida que o usuário digita no input, o texto digitado deve aparecer em tempo real no parágrafo.

Objetivo do Projeto: Criar um Sistema de Login Simples

Neste projeto final, você aplicará tudo o que aprendeu para criar um formulário de login com validações básicas.

• **Tela de login:** Com campos para e-mail e senha.
• **Verificação de campos obrigatórios:** Não permitir envio se estiverem vazios.
• **Validação básica de e-mail:** Verificar se o e-mail tem um formato válido (ex: contém "@" e ".").
• **Senha com mínimo de caracteres:** Ex: mínimo de 6 caracteres.
• **Mensagens de erro amigáveis:** Exibir mensagens claras para o usuário sobre o que está errado.
• **Feedback visual:** Mudar a cor da borda do input para vermelho em caso de erro.
• **Mensagem final:** Exibir "Acesso Liberado!" ou "Acesso Negado!" com base nas validações.
• **(Bônus) Simular banco de dados:** Ter um array de objetos com usuários e senhas válidos para comparar.

Desafio Guiado: Implementando o Verificador de Acesso

Use o editor abaixo para construir seu sistema de login.

Array

Uma estrutura de dados que armazena uma coleção ordenada de valores. Pense em uma lista.

Boolean

Um tipo de dado que representa um valor de verdade: `true` (verdadeiro) ou `false` (falso).

`console.log()`

Uma função usada para exibir mensagens no console do navegador, útil para depuração.

`const`

Palavra-chave para declarar uma constante, cujo valor não pode ser reatribuído após a inicialização.

DOM (Document Object Model)

Modelo de Objeto de Documento. Uma interface de programação para documentos HTML e XML. Representa a estrutura de uma página web como uma árvore de objetos.

Escopo

Define a acessibilidade de variáveis, funções e objetos em diferentes partes do seu código.

Evento

Uma ação ou ocorrência que acontece no navegador, como um clique do mouse, um teclado digitado ou o carregamento de uma página.

Função

Um bloco de código reutilizável que executa uma tarefa específica. Pode receber parâmetros e retornar um valor.

JavaScript

Uma linguagem de programação de alto nível, interpretada, usada principalmente para tornar páginas web interativas.

`let`

Palavra-chave para declarar uma variável que pode ter seu valor reatribuído.

Objeto

Uma coleção de propriedades (pares chave-valor) que representa uma entidade ou conceito.

Operador

Símbolo que realiza uma operação em um ou mais valores (operandos). Ex: `+`, `-`, `==`, `&&`.

String

Um tipo de dado que representa texto, delimitado por aspas simples ou duplas.

Variável

Um contêiner nomeado para armazenar um valor de dados.