Aprenda JavaScript

// CONST - para valores que não mudam
const PI = 3.14159;
const NOME_SITE = "DevStudy";
const usuario = { nome: "João", idade: 25 }; // objetos podem ter propriedades alteradas

// LET - para valores que podem mudar
let contador = 0;
let mensagem = "Olá";

contador = contador + 1; // ✅ OK
mensagem = "Bem-vindo!"; // ✅ OK

// PI = 3.14; // ❌ ERRO! const não pode ser reatribuído

// Mas propriedades de objetos const podem ser alteradas:
usuario.idade = 26; // ✅ OK
usuario.email = "joao@email.com"; // ✅ OK

// typeof retorna o tipo de um valor
console.log(typeof "texto");     // "string"
console.log(typeof 42);          // "number"
console.log(typeof true);        // "boolean"
console.log(typeof undefined);   // "undefined"
console.log(typeof null);        // "object" (bug histórico!)
console.log(typeof [1, 2, 3]);   // "object"
console.log(typeof {a: 1});      // "object"

// Para verificar arrays:
console.log(Array.isArray([1, 2, 3])); // true

// == compara apenas o VALOR (faz conversão de tipo)
console.log(5 == "5");    // true ⚠️
console.log(0 == false);  // true ⚠️
console.log(null == undefined); // true ⚠️

// === compara VALOR e TIPO (recomendado!)
console.log(5 === "5");   // false ✅
console.log(0 === false); // false ✅
console.log(null === undefined); // false ✅

// SEMPRE use === para evitar bugs!

const nome = "Maria";
const idade = 28;

// Forma antiga (concatenação)
const msg1 = "Olá, " + nome + "! Você tem " + idade + " anos.";

// Forma moderna (template literals) ✨
const msg2 = `Olá, ${nome}! Você tem ${idade} anos.`;

// Múltiplas linhas
const html = `
    <div class="card">
        <h2>${nome}</h2>
        <p>Idade: ${idade}</p>
    </div>
`;

// Expressões dentro do ${}
const preco = 100;
const desconto = 0.2;
console.log(`Preço final: R$ ${preco * (1 - desconto)}`); // R$ 80

// 1. Function Declaration (tradicional)
function somar(a, b) {
    return a + b;
}

// 2. Function Expression
const subtrair = function(a, b) {
    return a - b;
};

// 3. Arrow Function (ES6) ✨ - Mais usada atualmente
const multiplicar = (a, b) => {
    return a * b;
};

// Arrow Function simplificada (retorno implícito)
const dividir = (a, b) => a / b;

// Com um parâmetro, parênteses são opcionais
const dobrar = n => n * 2;

// Usando as funções
console.log(somar(5, 3));       // 8
console.log(multiplicar(4, 2)); // 8
console.log(dobrar(10));        // 20

// Valores padrão
function saudar(nome = "Visitante", saudacao = "Olá") {
    return `${saudacao}, ${nome}!`;
}

console.log(saudar());              // "Olá, Visitante!"
console.log(saudar("Maria"));       // "Olá, Maria!"
console.log(saudar("João", "Oi"));  // "Oi, João!"

// Rest parameters (...) - recebe múltiplos argumentos
function somarTodos(...numeros) {
    return numeros.reduce((total, n) => total + n, 0);
}

console.log(somarTodos(1, 2, 3, 4, 5)); // 15

// Destructuring em parâmetros
function mostrarPessoa({ nome, idade, cidade = "Não informada" }) {
    console.log(`${nome}, ${idade} anos, mora em ${cidade}`);
}

mostrarPessoa({ nome: "Ana", idade: 30, cidade: "SP" });
// "Ana, 30 anos, mora em SP"

// Por ID (retorna um elemento)
const header = document.getElementById("header");

// Por classe (retorna coleção)
const botoes = document.getElementsByClassName("btn");

// Por tag (retorna coleção)
const paragrafos = document.getElementsByTagName("p");

// querySelector - MAIS USADO! (retorna primeiro match)
const titulo = document.querySelector("h1");
const btnPrimario = document.querySelector(".btn-primary");
const inputEmail = document.querySelector("#email");
const primeiroLink = document.querySelector("nav a");

// querySelectorAll (retorna todos os matches)
const todosLinks = document.querySelectorAll("a");
const todasCards = document.querySelectorAll(".card");

const elemento = document.querySelector("#meuElemento");

// Alterar texto
elemento.textContent = "Novo texto";

// Alterar HTML interno
elemento.innerHTML = "<strong>Texto em negrito</strong>";

// Alterar atributos
elemento.setAttribute("data-id", "123");
elemento.id = "novoId";
elemento.src = "imagem.jpg"; // para imgs

// Manipular classes
elemento.classList.add("ativo");
elemento.classList.remove("inativo");
elemento.classList.toggle("visivel"); // adiciona/remove
elemento.classList.contains("ativo"); // true/false

// Alterar estilos diretamente
elemento.style.backgroundColor = "#667eea";
elemento.style.padding = "20px";
elemento.style.display = "none"; // esconde elemento