Como usar
Tudo o que aparece no código do caderno, com o que é e um exemplo.
Digite para filtrar (ex.: ul, for,
value).
HTML: estrutura da página
| Termo | O que é | Exemplo |
|---|---|---|
<!doctype html> | Avisa que é HTML moderno. Primeira linha. | <!doctype html> |
<html> | Caixa que guarda a página inteira. | <html lang="pt-BR"> |
<head> | Informações da página (não aparecem no corpo). | título, CSS, meta |
<meta> | Configuração: acentos (charset) e celular (viewport). | <meta charset="UTF-8" /> |
<title> | Nome que aparece na aba do navegador. | <title>For</title> |
<link> | Liga um arquivo externo, como o CSS. | <link rel="stylesheet" href="css/estilo.css" /> |
<body> | Tudo que aparece na tela. | |
<script> | Liga ou escreve JavaScript. Fica no fim do body. | <script src="js/for.js"></script> |
<!-- --> | Comentário: o navegador ignora. | <!-- Rodapé --> |
HTML: organização (semântica)
| Termo | O que é | Exemplo |
|---|---|---|
<header> | Cabeçalho: título e menu. | topo de cada página |
<nav> | Menu de links. | a barra Início | Variáveis | ... |
<main> | Conteúdo principal (só um por página). | |
<section> | Uma parte do conteúdo, com seu título. | cada "Exemplo" do caderno |
<footer> | Rodapé. | © 2026 |
HTML: texto
| Termo | O que é | Exemplo |
|---|---|---|
<h1> a <h6> | Títulos. h1 é o maior; h2 é subtítulo... | <h2>Exemplo 1</h2> |
<p> | Parágrafo. | <p>Texto</p> |
<strong> | Destaque importante (negrito). | importante |
<em> | Ênfase (itálico). | índice |
<small> | Texto menor, de observação. | Código desta seção... |
<mark> | Texto marcado (marca-texto). | marcado |
<code> | Trecho de código no meio do texto. | let i = 1 |
<pre> | Bloco que mantém espaços e quebras de linha. Usado para código e resultados. | as caixas de código do caderno |
<br> | Quebra de linha (não tem fechamento). | <br /> |
<hr> | Linha horizontal separando partes. | <hr /> |
<blockquote> | Citação de outro texto. | |
< > | Escrevem < e > sem o navegador achar que é tag. | i <= 10 |
HTML: listas, links e imagens
| Termo | O que é | Exemplo |
|---|---|---|
<ul> | Lista com bolinhas (unordered list, sem ordem). | <ul><li>item</li></ul> |
<ol> | Lista numerada (ordered list). | 1. 2. 3. |
<li> | Um item da lista (list item). Vai dentro de ul ou ol. | <li>Gol</li> |
<a> | Link. href diz para onde vai. | <a href="for.html">For</a> |
href="#id" | Pula para um ponto da mesma página. | <a href="#js"> |
target="_blank" | Abre o link em outra aba. | |
<img> | Imagem. src = arquivo; alt = descrição. | <img src="foto.png" alt="Foto" /> |
HTML: tabelas
| Termo | O que é | Exemplo |
|---|---|---|
<table> | A tabela inteira. | esta aqui |
<thead> | Parte do cabeçalho (títulos das colunas). | Termo | O que é | Exemplo |
<tbody> | Parte dos dados. | |
<tr> | Uma linha (table row). | |
<th> | Célula de título (table header). | |
<td> | Célula de dado (table data). |
HTML: formulários
| Termo | O que é | Exemplo |
|---|---|---|
<form> | Agrupa campos e botões. Ao enviar, dispara o evento submit. | <form id="form-tabuada"> |
novalidate | Desliga a validação do navegador; o JS valida. | <form novalidate> |
<label> | Nome do campo. for liga ao id do campo. | <label for="campo-fim"> |
<input> | Campo para digitar. type diz o tipo. | <input type="number" /> |
type | text, number, checkbox... | |
value | Valor que já vem no campo. | value="10" |
min max step | Menor valor, maior valor e de quanto em quanto. | min="1" max="50" step="1" |
placeholder | Dica cinza dentro do campo vazio. | placeholder="ex.: ul" |
<select> | Caixa de escolha (lista suspensa). | escolher o cargo |
<option> | Uma opção dentro do select. | <option>Gerente</option> |
<textarea> | Campo de texto com várias linhas. | |
<button> | Botão. Dentro do form, type="submit" envia. | <button type="submit"> |
<input type="button"> | Botão feito com input; o value é o texto. | <input type="button" value="Somar"> |
onclick | Chama uma função JS ao clicar, direto no HTML. | onclick="somar()" |
HTML: atributos que aparecem em todo lugar
| Termo | O que é | Exemplo |
|---|---|---|
id | Nome único do elemento. O JS acha ele por aqui. | id="resultado-tabuada" |
class | Grupo de estilo do CSS (pode repetir). | class="saida" |
name | Nome do campo (agrupa opções iguais). | |
data-* | Informação extra para o JS ler com .dataset. | data-estrutura="while" |
role aria-live | Avisam o leitor de tela quando o resultado muda. | aria-live="polite" |
JS: variáveis e tipos
| Termo | O que é | Exemplo |
|---|---|---|
let | Cria variável que pode mudar. | let soma = 0; |
const | Cria variável que não muda. | const qtd = 4; |
var | Jeito antigo de criar variável. Prefira let/const. | |
| texto (string) | Entre aspas ou crases. | "Gol" |
| número | Sem aspas. Decimal usa ponto. | 8.5 |
true false | Verdadeiro e falso (booleano). | contador <= 10 → true |
null | "Nada", de propósito. O prompt devolve null ao Cancelar. | |
undefined | Variável criada sem valor. | let x; |
typeof | Diz o tipo de um valor. | typeof "a" → "string" |
`${ }` | Template string: texto com variáveis dentro. | `Soma: ${soma}` |
\n | Quebra de linha dentro do texto. | "linha1\nlinha2" |
// /* */ | Comentário de uma linha / de várias linhas. |
JS: operadores
| Termo | O que é | Exemplo |
|---|---|---|
+ - * / | Soma, subtração, multiplicação, divisão. Com texto, + junta. | "7" + "8" → "78" |
% | Resto da divisão. | 10 % 3 → 1 |
** | Potência. | 2 ** 3 → 8 |
+= | Soma e guarda. | soma += i = soma = soma + i |
++ -- | Soma 1 / tira 1. | i++ |
= | Guarda um valor (atribuição). Não compara! | let i = 1 |
=== !== | Igual / diferente (valor e tipo). | nota === 10 |
< > <= >= | Menor, maior, menor ou igual, maior ou igual. | i <= 10 |
&& | E: as duas condições precisam ser verdadeiras. | nota >= 0 && nota <= 10 |
|| | OU: basta uma ser verdadeira. | nota < 0 || nota > 10 |
! | NÃO: inverte true/false. | !true → false |
JS: decisão e repetição
| Termo | O que é | Exemplo |
|---|---|---|
if / else | Se a condição for verdadeira faz um bloco; senão, o outro. | if (media >= 7) { } else { } |
? : | Ternário: if/else em uma linha. | media >= 7 ? "Aprovado" : "Reprovado" |
switch | Compara um valor com vários case. | switch (mes) { case 1: ... } |
break | Sai do switch (ou do laço). | |
default | O "senão" do switch: nenhum case bateu. | |
while | Repete enquanto a condição for verdadeira. Testa ANTES. | while (i <= 10) { } |
do...while | Roda pelo menos 1 vez. Testa DEPOIS. | do { } while (nota > 10); |
for | Início, condição e passo numa linha. | for (let i = 1; i <= 10; i++) |
for...in | Passa pelos NOMES das propriedades de um objeto. | for (let atributo in pessoa) |
for...of | Passa pelos VALORES de um array ou texto. | for (let carro of carros) |
continue | Pula para a próxima rodada do laço. |
JS: funções, objetos e arrays
| Termo | O que é | Exemplo |
|---|---|---|
function | Bloco de código com nome, que roda quando é chamado. | function montarTabuada(numero) { } |
| parâmetro | Valor que a função recebe, entre ( ). | numero em montarTabuada(numero) |
return | Devolve um resultado e encerra a função. | return soma; |
argumento | Valor passado ao chamar a função. | 2 e 5 em somar(2, 5) |
hoisting | Função de declaração pode ser chamada antes de aparecer no código. | somar(1, 2) antes do function somar |
escopo | Onde algo existe. Função criada dentro de outra só existe lá dentro. | quadrado dentro de addQuadrado |
function ( ) { } | Função de expressão: guardada numa variável. | const somar = function (x, y) { ... } |
=> | Arrow function: jeito curto de escrever função. | const somar = (x, y) => x + y |
new | Chama uma função construtora e cria um objeto novo. | new Pessoa("Ana", "Silva") |
this | Dentro da construtora, é o objeto que está sendo criado. | this.nome = nome |
function* | Função geradora: pausa em cada yield. | function* contar() { yield 1; } |
yield | Pausa a geradora e entrega um valor. | yield 1 |
.next() | Continua a geradora. Devolve { value, done }. | { value: 1, done: false } |
recursão | Função que chama a si mesma com um problema menor. | return x * fatorial(x - 1) |
caso base | Condição que faz a recursão parar. | if (x <= 1) return 1 |
stack overflow | Erro de chamadas demais (recursão sem caso base). | Maximum call stack size exceeded |
Fibonacci | Sequência em que cada número é a soma dos dois anteriores. | 0, 1, 1, 2, 3, 5, 8... |
parseInt() | Texto → número inteiro (corta os decimais). | parseInt("2.9") → 2 |
.innerHTML | Escreve dentro de um elemento (aceita tags HTML). | res.innerHTML = "Oi" |
onload | Evento "a página terminou de carregar". | <body onload="iniciar()"> |
objeto { } | Vários valores com nome, juntos. | { nome: "Orion", nota: 8 } |
. e [ ] | Pegam um valor do objeto. | pessoa.nome = pessoa["nome"] |
array [ ] | Lista de valores. Posição (índice) começa em 0. | carros[0] → "Gol" |
.length | Tamanho de um array ou texto. | carros.length → 4 |
new Array() | Outro jeito de criar array. Prefira [ ]. | new Array(10) → 10 posições vazias |
.push() | Adiciona no fim. Devolve o novo tamanho. | carros.push("Fiesta") |
.unshift() | Adiciona no começo. | carros.unshift("Palio") |
.pop() | Remove o último. Devolve o removido. | carros.pop() |
.shift() | Remove o primeiro. Devolve o removido. | carros.shift() |
.splice() | Insere, troca ou exclui numa posição: (posição, quantos remover, item). | carros.splice(1, 1, "Uno") |
.sort() | Ordena (compara como texto!). | idades.sort() |
console.table() | Mostra um array como tabela no Console (F12). | console.table(carros) |
array de arrays | Array cujos itens são arrays (matriz). | [["João", 24], ["Maria", 30]] |
[i][j] | Acessa linha i, coluna j de uma matriz. | funcionarios[0][2] → 1800 |
array de objetos | Lista em que cada item é um objeto { }. | pessoas[2].nome → "José" |
for aninhado | Um for dentro de outro: o de dentro roda inteiro a cada volta do de fora. | linhas (i) e colunas (j) |
JS: entrada, saída e página
| Termo | O que é | Exemplo |
|---|---|---|
prompt() | Janela que pergunta algo. Devolve TEXTO (ou null). | prompt("Quantas notas?") |
alert() | Janela de aviso. | alert("Nota inválida") |
confirm() | Janela OK/Cancelar. Devolve true ou false. | |
console.log() | Mostra no Console (F12). Para testar. | console.log(soma) |
document.getElementById() | Acha um elemento da página pelo id. | document.getElementById("campo-fim") |
.value | O que está digitado num campo (sempre texto). | campo.value |
.checked | Se a caixinha está marcada (true/false). | |
.textContent | O texto dentro de um elemento. Trocar = escrever na página. | saida.textContent = "Oi" |
addEventListener() | "Quando acontecer isto, rode esta função". | form.addEventListener("submit", tratar) |
"submit" "click" "input" | Eventos: enviar formulário, clicar, digitar. | |
evento.preventDefault() | Impede o form de recarregar a página. | |
evento.submitter | Qual botão enviou o formulário. | |
.dataset | Lê os atributos data-*. | botao.dataset.estrutura |
JS: números e textos
| Termo | O que é | Exemplo |
|---|---|---|
Number() | Transforma texto em número. | Number("8") → 8 |
NaN | "Não é um número": conversão que falhou. | Number("abc") |
Number.isInteger() | É número inteiro? | Number.isInteger(7.5) → false |
Number.isFinite() | É um número válido (não NaN)? | |
.toFixed(2) | Mostra com 2 casas decimais. | (7.5).toFixed(2) → "7.50" |
Math.floor() | Arredonda para baixo. | Math.floor(7.9) → 7 |
String() | Transforma em texto. | String(10) → "10" |
.trim() | Tira espaços do começo e do fim. | " oi ".trim() → "oi" |
.replace() | Troca um pedaço do texto. | "8,5".replace(",", ".") |
.padEnd() | Completa com espaços até um tamanho. | alinhar o teste de mesa |
.includes() | O texto contém este pedaço? | "Gran".includes("ra") → true |
.repeat() | Repete um texto N vezes. | "ab".repeat(3) → "ababab" |
.join() | Junta os itens de um array num texto. | ["a", "b"].join("-") → "a-b" |
.toLowerCase() | Deixa tudo minúsculo. | "UL".toLowerCase() → "ul" |
Bootstrap
| Termo | O que é | Exemplo |
|---|---|---|
| framework | Conjunto de código pronto para reaproveitar. O Bootstrap é um de CSS. | |
| CDN | Rede de servidores que entrega um arquivo pelo ponto mais próximo (Content Delivery Network). | cdn.jsdelivr.net |
<link> | Liga um arquivo CSS à página. Vai no <head>. | <link rel="stylesheet" href="x.css" /> |
<script src> | Liga um arquivo JS. Vai no fim do <body>. | <script src="x.js"></script> |
btn, container, table | Classes do Bootstrap: o estilo vem do nome. | class="btn btn-dark" |
p-3, mx-2 | Espaçamento: m (margem) ou p (padding), lado e tamanho de 0 a 5. | py-3 |
d-flex | Coloca os filhos lado a lado. | class="d-flex" |
Funções do util.js (criadas no caderno)
Não são do JavaScript: foram escritas aqui e várias páginas usam.
| Termo | O que é | Exemplo |
|---|---|---|
mostrar(id, texto) | Acrescenta uma linha de texto no elemento. | mostrar("saida", "Oi") |
converterParaNumero(texto) | Texto → número (aceita vírgula). Inválido → null. | "8,5" → 8.5 |
converterParaInteiro(texto) | Igual, mas só aceita inteiro. | "7.5" → null |
lerNumero(campo) | Lê o número digitado num input. | lerNumero(campoNota) |
lerInteiro(campo) | Lê um inteiro digitado num input. | lerInteiro(campoFim) |
coluna(valor) | Deixa as colunas do teste de mesa alinhadas. | coluna("soma") |