📖 Introdução ao JavaScript

JavaScript é uma linguagem de programação que permite implementar funcionalidades complexas em páginas web. É a terceira camada do desenvolvimento web, junto com HTML e CSS.

Onde usar JavaScript:

<!-- JavaScript Interno -->
<script>
    console.log('Olá, Mundo!');
</script>

<!-- JavaScript Externo -->
<script src="script.js"></script>

📦 Variáveis

// var - Escopo global/função (EVITAR)
var nome = "João";

// let - Escopo de bloco (USAR)
let idade = 25;

// const - Constante, não pode ser reatribuída
const PI = 3.14159;

// Boas práticas
let firstName = "Maria"; // camelCase
const MAX_USERS = 100; // UPPERCASE para constantes

📊 Tipos de Dados

// String
let texto = "Olá Mundo";
let template = `Olá ${nome}`;

// Number
let inteiro = 42;
let decimal = 3.14;

// Boolean
let ativo = true;
let inativo = false;

// Array
let frutas = ["maçã", "banana", "laranja"];

// Object
let pessoa = {
    nome: "Ana",
    idade: 30
};

// Undefined
let indefinido;

// Null
let vazio = null;

🔢 Operadores

// Aritméticos
let soma = 10 + 5;      // 15
let subtracao = 10 - 5; // 5
let multiplicacao = 10 * 5; // 50
let divisao = 10 / 5;   // 2
let modulo = 10 % 3;    // 1
let exponenciacao = 2 ** 3; // 8

// Comparação
console.log(5 == "5");  // true (igualdade)
console.log(5 === "5"); // false (estritamente igual)
console.log(5 != "5");  // false
console.log(5 !== "5"); // true

// Lógicos
let e = true && false;  // false
let ou = true || false; // true
let nao = !true;        // false

🔀 Estruturas Condicionais

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

// switch
let dia = 2;
switch(dia) {
    case 1:
        console.log("Segunda");
        break;
    case 2:
        console.log("Terça");
        break;
    default:
        console.log("Outro dia");
}

// Ternário
let status = idade >= 18 ? "Adulto" : "Jovem";

🔄 Loops

// for
for (let i = 0; i < 5; i++) {
    console.log(i);
}

// while
let contador = 0;
while (contador < 5) {
    console.log(contador);
    contador++;
}

// for...of (arrays)
let frutas = ["maçã", "banana", "laranja"];
for (let fruta of frutas) {
    console.log(fruta);
}

// for...in (objetos)
for (let chave in objeto) {
    console.log(chave, objeto[chave]);
}

🎯 Funções

// Declaração de função
function saudacao(nome) {
    return `Olá, ${nome}!`;
}

// Arrow function
const soma = (a, b) => a + b;

// Função anônima
const multiplicar = function(a, b) {
    return a * b;
};

// Parâmetros padrão
function dividir(a, b = 1) {
    return a / b;
}

// Rest parameters
function somarTudo(...numeros) {
    return numeros.reduce((a, b) => a + b, 0);
}

📚 Arrays

let numeros = [1, 2, 3, 4, 5];

// Métodos importantes
numeros.push(6);       // Adiciona no final
numeros.pop();         // Remove do final
numeros.unshift(0);    // Adiciona no início
numeros.shift();       // Remove do início

// Métodos funcionais
numeros.map(n => n * 2);        // [2, 4, 6, 8, 10]
numeros.filter(n => n > 3);     // [4, 5]
numeros.reduce((a, b) => a + b); // 15
numeros.find(n => n === 3);     // 3
numeros.includes(5);            // true

// Spread operator
let novosNumeros = [...numeros, 6, 7];

🏗️ Objetos

// Objeto literal
let carro = {
    marca: "Toyota",
    modelo: "Corolla",
    ano: 2022,
    ligar() {
        console.log("Carro ligado!");
    }
};

// Acessando propriedades
console.log(carro.marca);
console.log(carro["modelo"]);

// Destructuring
let { marca, modelo, ano } = carro;

// Spread em objetos
let carroCompleto = { ...carro, cor: "prata" };

🌳 Manipulação do DOM

// Selecionando elementos
let elemento = document.getElementById("meuId");
let elementos = document.getElementsByClassName("classe");
let query = document.querySelector(".seletor");
let queryAll = document.querySelectorAll("p");

// Modificando conteúdo
elemento.textContent = "Novo texto";
elemento.innerHTML = "<strong>HTML</strong>";

// Modificando estilos
elemento.style.color = "red";
elemento.classList.add("ativo");
elemento.classList.toggle("visivel");

// Criando elementos
let novoParagrafo = document.createElement("p");
novoParagrafo.textContent = "Olá!";
document.body.appendChild(novoParagrafo);

🎪 Eventos

// Adicionando event listener
elemento.addEventListener("click", function() {
    console.log("Clicado!");
});

// Eventos comuns
elemento.addEventListener("mouseover", handler);
elemento.addEventListener("keydown", handler);
elemento.addEventListener("submit", handler);
elemento.addEventListener("change", handler);

// Event object
elemento.addEventListener("click", function(event) {
    console.log(event.target);
    event.preventDefault();
    event.stopPropagation();
});

⏳ Programação Assíncrona

// Callbacks (antigo)
setTimeout(() => {
    console.log("Executado após 2 segundos");
}, 2000);

// Promises
fetch("https://api.exemplo.com/dados")
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error(error));

// Async/Await (moderno)
async function buscarDados() {
    try {
        let response = await fetch("url");
        let data = await response.json();
        return data;
    } catch (error) {
        console.error("Erro:", error);
    }
}

🚀 Recursos Modernos (ES6+)

// Template literals
let nome = "Maria";
console.log(`Olá ${nome}!`);

// Arrow functions
const quadrado = x => x * x;

// Modules
import { funcao } from './modulo.js';
export default class MinhaClasse { }

// Optional chaining
let cidade = usuario?.endereco?.cidade;

// Nullish coalescing
let valor = input ?? "padrão";

✅ Boas Práticas em JavaScript

1. Use const e let

Evite var, prefira const e let.

2. Nomes descritivos

// Ruim
let x = 10;

// Bom
let numeroDeUsuarios = 10;

3. Tratamento de erros

try {
    // código que pode falhar
} catch (erro) {
    console.error("Erro:", erro.message);
}

4. Código limpo