Resumo e próximos passos
Esta página não traz sintaxe nova. Põe o curso inteiro num pedido: bebida tea, tamanho regular. A linha que você deve conseguir explicar é tea / regular.
De onde veio essa linha
A página de acessibilidade escreveu-a com um botão real button type=button. Mouse, Enter e Space disparam o mesmo clique. aria-live="polite" fala depois da frase atual. Se size falta, button.disabled é true e o botão fica. O foco fica no botão.
Duas linhas anteriores
Na depuração leu-se order.cup em { drink: "tea", size: "regular" }. O objeto tem size, não cup. console.error não lança, e o script continua. Essa linha foi fixed / tea / regular.
throw new Error("missing size") para label antes de return. catch lê error.message, que é missing size. error.name é Error. finally corre nos dois casos. Essa linha foi caught / missing size.
Sete linhas, um pedido
Cada linha da tabela é um pedaço do mesmo pedido. Abra a sessão correspondente só se o resultado ainda parecer fino.
📊 O que o curso faz com um pedido
| Grupo | Você pode | Um resultado |
|---|---|---|
| Valores e fluxo | guardar valores, escolher com if, percorrer uma lista | tea / regular |
| Funções | receber o pedido e devolver uma linha | tea / regular |
| Objetos e arrays | ler o campo, ler JSON e copiar | { drink: "tea", size: "regular" } |
| A página | encontrar o botão e escrever a linha | tea / regular |
| Espera | pausar uma função async; fetch dá uma Response | response.ok e depois response.json() |
| Sintaxe mais recente | tirar nomes, montar o texto e construir a classe | tea / regular |
| Cuidado | ler a propriedade real, lançar de propósito e manter o botão | fixed / tea / regular, depois caught / missing size, depois tea / regular |
O mapa é um lembrete. Não é um segundo curso e não tem perguntas.
Valores e decisões
Você guarda tea e regular, compara e repete. if escolhe. break sai de um laço. continue salta um item e segue.
Funções
Uma função devolve tea / regular. Uma função seta é uma função mais curta. Um closure ainda vê a ligação depois que a função externa retorna.
Objetos, JSON e arrays
JSON.parse transforma texto num objeto. map constrói um array novo. find devolve um acerto. spread copia. rest junta o que você não nomeou. A cópia é superficial.
A página
querySelector encontra o botão. textContent escreve a linha. setTimeout corre mais tarde e não substitui o botão.
A espera
await pausa só essa função async. O resto da página segue. Uma função async sempre devolve uma Promise. fetch resolve para uma Response, não para um corpo já lido. response.json() devolve outra Promise. Um HTTP 404 em geral não rejeita fetch. Veja response.ok. Uma falha de rede pode rejeitar.
Sintaxe mais recente
A desestruturação tira drink e size pelo nome. Um objeto aninhado ausente pode lançar. Os modelos preenchem ${...} na execução. Os módulos não estão em window e carregam por HTTP. Uma classe filha chama super antes de this. Um campo privado fica dentro da classe.
Quando o pedido está errado
Leia size, não uma propriedade que não existe. console.error não lança e a linha seguinte segue. throw para a função e só catch continua. Ponha a ação num botão. Deixe o contorno do foco visível.
O que vem a seguir
A página seguinte é uma lista de tarefas curta: adicionar, marcar como feito e remover. Ela ainda faz parte do percurso central.
Depois, opcional: strict mode, Map e Set, expressões regulares, web storage, cookies e herança de classes. Não são precisos para acabar o percurso central.
Diga estas cinco linhas em voz alta
- O botão escreve tea / regular e aria-live="polite" fala depois da frase atual
- console.error não lança; a linha de depuração foi fixed / tea / regular
- throw new Error("missing size") para label antes de return; catch lê missing size; essa linha foi caught / missing size
- fetch resolve para uma Response; veja response.ok antes de response.json()
- A página seguinte é a lista de tarefas