Seções
Tipos de Dados
| Tipo | Exemplo | typeof |
|---|---|---|
| Number | const n = 42; | "number" |
| String | const s = "olá"; | "string" |
| Boolean | const b = true; | "boolean" |
| Array | const a = [1,2,3]; | "object" |
| Object | const o = {x:1}; | "object" |
| undefined | uma variável declarada mas sem valor atribuído | "undefined" |
| null | const x = null; | "object" |
Variáveis: let, const, var
| Palavra-chave | Pode reatribuir | Quando usar |
|---|---|---|
| const | Não | Opção padrão — para tudo que não vai mudar |
| let | Sim | Quando o valor da variável vai mudar com certeza |
| var | Sim | Opção obsoleta, não é usada em código novo |
Operadores de Comparação
| Operador | Significado |
|---|---|
=== | Igualdade estrita (compara valor e tipo) |
!== | Desigualdade estrita |
== | Igualdade não estrita (com conversão de tipos, melhor evitar) |
> >= < <= | Maior que, maior ou igual, menor que, menor ou igual |
&& | E lógico (ambas as condições verdadeiras) |
|| | OU lógico (pelo menos uma condição verdadeira) |
! | NÃO lógico (inverte o valor) |
Métodos de Arrays
| Método | O que faz | Exemplo |
|---|---|---|
| push() | Adiciona um elemento ao final | arr.push(5) |
| pop() | Remove e retorna o último elemento | arr.pop() |
| shift() | Remove e retorna o primeiro elemento | arr.shift() |
| unshift() | Adiciona um elemento no início | arr.unshift(0) |
| map() | Cria um novo array aplicando uma função a cada elemento | arr.map(x => x * 2) |
| filter() | Cria um novo array só com os elementos que atendem | arr.filter(x => x > 5) |
| forEach() | Percorre cada elemento, não retorna nada | arr.forEach(x => console.log(x)) |
| find() | Retorna o primeiro elemento que atende | arr.find(x => x > 5) |
| includes() | Verifica se um valor existe no array | arr.includes(5) |
| slice() | Retorna parte de um array sem mudar o original | arr.slice(1, 3) |
| splice() | Remove/adiciona elementos, mudando o original | arr.splice(1, 2) |
| join() | Une um array em uma string com um separador | arr.join(", ") |
| reduce() | Reduz um array a um único valor (como uma soma) | arr.reduce((s,x)=>s+x, 0) |
Métodos de Strings
| Método / propriedade | O que faz | Exemplo |
|---|---|---|
| length | Comprimento da string | "olá".length → 3 |
| toUpperCase() | Converte para maiúsculas | "oi".toUpperCase() → "OI" |
| toLowerCase() | Converte para minúsculas | "OI".toLowerCase() → "oi" |
| slice() | Retorna parte de uma string | "olá".slice(0,2) → "ol" |
| split() | Divide uma string em um array pelo separador | "a,b".split(",") → ["a","b"] |
| includes() | Verifica se uma string contém uma substring | "olá".includes("lá") → true |
| trim() | Remove espaços nas pontas | " oi ".trim() → "oi" |
| replace() | Substitui parte de uma string | "oi".replace("o","O") → "Oi" |
Condicionais e Loops
| Estrutura | Sintaxe |
|---|---|
| if / else | if (x > 5) { ... } else { ... } |
| if / else if / else | if (x>90){...} else if (x>70){...} else {...} |
| switch | switch (x) { case 1: ...; break; default: ...; } |
| for | for (let i = 0; i < 10; i++) { ... } |
| while | while (condição) { ... } |
Funções
| Tipo | Sintaxe |
|---|---|
| Função normal | function soma(a, b) { return a + b; } |
| Expressão de função | const soma = function(a, b) { return a + b; }; |
| Arrow function | const soma = (a, b) => a + b; |
| Chamar a função | soma(2, 3); // 5 |
Bases do DOM
| Método / propriedade | O que faz |
|---|---|
| document.querySelector() | Encontra o primeiro elemento que corresponde a um seletor CSS |
| document.querySelectorAll() | Encontra todos os elementos que correspondem a um seletor CSS |
| element.innerHTML | Lê ou define o conteúdo HTML de um elemento |
| element.textContent | Lê ou define o texto dentro de um elemento |
| element.addEventListener() | Atribui um manipulador de eventos (clique, entrada, etc.) |
| element.classList.add() / remove() / toggle() | Gerencia as classes CSS de um elemento |
| element.value | O valor de um campo de entrada (input, select) |
| element.style | Controle direto dos estilos CSS de um elemento |
O que vem depois
Quer se aprofundar mais?
Todos esses temas são explicados em detalhe no curso grátis de JavaScript, com exercícios práticos depois de cada aula.