JavaScript

<!-- No final do body (carrega depois do HTML) -->
<script src="app.js"></script>

<!-- No head com defer (melhor prática) -->
<script src="app.js" defer></script>

<!-- Inline (só para pequenos scripts) -->
<script>
  console.log('Olá, mundo!')
</script>

// const: valor que não muda (use por padrão)
const nome = 'Maria'
const PI = 3.14159

// let: valor que pode mudar
let contador = 0
contador = 1   // ok

// var: evite! Tem escopo de função e hoisting confuso
var antiga = 'não use'

// Primitivos
const texto      = 'olá'          // string
const numero     = 42            // number
const decimal    = 3.14          // number (float)
const ativo      = true          // boolean
const vazio      = null          // null (ausência intencional)
let   indefinido               // undefined (não inicializado)

// Referência
const lista      = [1, 2, 3]     // array
const pessoa     = { nome: 'João' } // object
const soma       = (a, b) => a + b // function

// Template literals (interpolação de strings)
const mensagem = `Olá, ${nome}! Você tem ${numero} anos.`

// typeof
typeof 'texto'   // "string"
typeof 42       // "number"
typeof true     // "boolean"
typeof null     // "object" ← bug histórico do JS, cuidado!
typeof []       // "object"
Array.isArray([]) // true ← use para verificar arrays

// Aritméticos
10 + 3   // 13
10 - 3   // 7
10 * 3   // 30
10 / 3   // 3.333...
10 % 3   // 1 (resto da divisão)
2 ** 10  // 1024 (potência)

// Comparação — use sempre === (estrito!)
5 === 5    // true  ← verifica valor E tipo
5 == '5'  // true  ← converte tipo, evite!
5 !== 6   // true
5 > 3     // true

// Lógicos
true && false  // false (AND)
true || false  // true  (OR)
!true         // false (NOT)

// Ternário: condição ? se_true : se_false
const msg = idade >= 18 ? 'Maior' : 'Menor'

// Nullish coalescing: usa direito se esquerdo for null/undefined
const nome = usuario?.nome ?? 'Visitante'

// Optional chaining: acessa propriedade se objeto existe
const cidade = usuario?.endereco?.cidade

// Spread: espalha array/objeto
const copia = [...array]
const novo = { ...objeto, extra: true }

// if / else if / else
if (nota >= 90) {
  console.log('A')
} else if (nota >= 70) {
  console.log('B')
} else {
  console.log('Reprovado')
}

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

// Valores falsy: false, 0, "", null, undefined, NaN
// Tudo o resto é truthy
if (usuario) { /* só executa se usuario não for falsy */ }

// Short-circuit: usa && para executar só se condição for true
isAdmin && mostrarPainel()

// for clássico
for (let i = 0; i < 5; i++) {
  console.log(i) // 0 1 2 3 4
}

// for...of: melhor para arrays e iteráveis
const frutas = ['maçã', 'banana', 'uva']
for (const fruta of frutas) {
  console.log(fruta)
}

// for...in: para propriedades de objetos
const pessoa = { nome: 'João', idade: 25 }
for (const chave in pessoa) {
  console.log(chave, pessoa[chave])
}

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

// break e continue
for (let i = 0; i < 10; i++) {
  if (i === 3) continue // pula o 3
  if (i === 7) break    // para no 7
  console.log(i)
}

// Declaração de função (hoisted — pode usar antes de declarar)
function saudar(nome) {
  return `Olá, ${nome}!`
}

// Expressão de função
const somar = function(a, b) {
  return a + b
}

// Arrow function (mais concisa)
const dobrar = (n) => n * 2
const somar  = (a, b) => a + b
const gritar = (msg) => {
  const upper = msg.toUpperCase()
  return upper + '!!!'
}

// Parâmetro padrão
const saudar = (nome = 'Visitante') => `Olá, ${nome}!`
saudar()         // "Olá, Visitante!"
saudar('Ana')    // "Olá, Ana!"

// Rest params: coleta argumentos extras em array
const somarTodos = (...nums) => nums.reduce((acc, n) => acc + n, 0)
somarTodos(1, 2, 3, 4) // 10

// Closure: função que lembra o escopo onde foi criada
function criarContador() {
  let count = 0
  return () => ++count
}
const contar = criarContador()
contar() // 1
contar() // 2

// Criação literal
const usuario = {
  nome: 'Ana',
  idade: 28,
  ativo: true,
  saudar() { return `Oi, sou ${this.nome}` }
}

// Acessar propriedades
usuario.nome          // 'Ana'
usuario['nome']       // 'Ana' (útil com variável)

// Desestruturação
const { nome, idade } = usuario
const { nome: nomeDoUsuario } = usuario // renomear
const { cidade = 'SP' } = usuario        // valor padrão

// Spread: copiar/mesclar objetos
const copia  = { ...usuario }
const atualizado = { ...usuario, idade: 29 }

// Métodos úteis
Object.keys(usuario)    // ['nome', 'idade', 'ativo', 'saudar']
Object.values(usuario)  // ['Ana', 28, true, ƒ]
Object.entries(usuario) // [['nome','Ana'], ['idade',28], ...]

const nums = [3, 1, 4, 1, 5]

// Adicionar / remover
nums.push(9)      // adiciona no fim → [3,1,4,1,5,9]
nums.pop()        // remove do fim
nums.unshift(0)   // adiciona no início
nums.shift()      // remove do início

// Buscar
nums.indexOf(4)         // 2
nums.includes(5)        // true
nums.find(n => n > 3)    // 4 (primeiro que satisfaz)
nums.findIndex(n => n > 3) // 2

// Transformar (não mutam o original)
const dobrados = nums.map(n => n * 2)
const pares    = nums.filter(n => n % 2 === 0)
const soma     = nums.reduce((acc, n) => acc + n, 0)
const ordenado = [...nums].sort((a, b) => a - b)
const parte    = nums.slice(1, 3) // [1, 4]

// Desestruturação
const [primeiro, segundo, ...resto] = nums

// Selecionar elementos
const titulo  = document.querySelector('h1')
const cards   = document.querySelectorAll('.card')
const botao   = document.getElementById('meu-botao')

// Ler e modificar conteúdo
titulo.textContent = 'Novo título'         // texto puro (seguro)
titulo.innerHTML    = '<strong>Negrito</strong>' // HTML (cuidado com XSS!)

// Modificar estilos e classes
titulo.style.color = 'red'
botao.classList.add('ativo')
botao.classList.remove('inativo')
botao.classList.toggle('aberto')
botao.classList.contains('ativo') // true/false

// Atributos
botao.setAttribute('disabled', '')
botao.removeAttribute('disabled')
botao.getAttribute('href')

// Criar e inserir elementos
const novoCard = document.createElement('div')
novoCard.className = 'card'
novoCard.textContent = 'Novo item'
document.querySelector('.lista').appendChild(novoCard)

// Remover elemento
novoCard.remove()

const btn = document.querySelector('#meu-botao')

// Adicionar evento
btn.addEventListener('click', (event) => {
  console.log('Clicou!', event.target)
  event.preventDefault() // cancela comportamento padrão (ex: submit)
})

// Eventos comuns
btn.addEventListener('click', fn)
input.addEventListener('input', fn)    // a cada tecla
input.addEventListener('change', fn)   // ao sair do campo
form.addEventListener('submit', fn)    // ao enviar
document.addEventListener('keydown', fn) // ao pressionar tecla
window.addEventListener('resize', fn)  // ao redimensionar

// Event delegation: um listener no pai cobre todos os filhos
document.querySelector('#lista').addEventListener('click', (e) => {
  if (e.target.matches('.item')) {
    console.log('Item clicado:', e.target.textContent)
  }
})

// GET com async/await (jeito mais moderno)
async function buscarUsuario(id) {
  try {
    const resposta = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`)

    if (!resposta.ok) {
      throw new Error(`Erro ${resposta.status}`)
    }

    const dados = await resposta.json()
    console.log(dados)
    return dados
  } catch (erro) {
    console.error('Falhou:', erro.message)
  }
}

buscarUsuario(1)

// POST com body JSON
async function criarPost(dados) {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(dados)
  })
  return res.json()
}

// 1. Callback hell (o problema)
buscarUsuario(1, (user) => {
  buscarPosts(user.id, (posts) => {
    buscarComentarios(posts[0].id, (comments) => {
      // pirâmide da morte 😱
    })
  })
})

// 2. Promise: then/catch/finally
fetch('/api/usuario')
  .then(res => res.json())
  .then(dados => console.log(dados))
  .catch(err => console.error(err))
  .finally(() => esconderLoader())

// 3. async/await: mais limpo e legível
async function carregarDados() {
  try {
    const user  = await buscarUsuario(1)
    const posts = await buscarPosts(user.id)
    return { user, posts }
  } catch (err) {
    console.error(err)
  }
}

// Paralelizar com Promise.all
const [users, posts] = await Promise.all([
  fetch('/api/users').then(r => r.json()),
  fetch('/api/posts').then(r => r.json()),
])