JavaScript: Exemplos de Código JavaScript
Esta página reúne exemplos de código selecionados de cada lição do tutorial de JavaScript para referência rápida.
Cada exemplo é um arquivo HTML autocontido — copie, salve como um arquivo .html e abra no navegador para ver funcionando.
1. Índice de Exemplos
| Lição | Exemplo | Conceitos-Chave |
|---|---|---|
| 22 | Cinco métodos de seleção comparados | getElementById, querySelector, etc. |
| 22 | textContent vs innerHTML | Modificando conteúdo de elementos |
| 22 | Manipulando atributos de link | getAttribute, setAttribute |
| 22 | Adicionando itens de lista dinamicamente | createElement, appendChild |
| 22 | Removendo e clonando nós | removeChild, cloneNode |
| 23 | Lendo e escrevendo a propriedade style | element.style |
| 23 | Troca de tema | classList.toggle |
| 23 | Mostrar e esconder elementos | classList |
| 23 | Obtendo estilos computados | getComputedStyle |
| 23 | Estilização em lote com cssText | style.cssText |
| 24 | Contador de cliques em botão | addEventListener, objeto de evento |
| 24 | Detecção de teclado | evento keydown |
| 24 | Interceptação de formulário | preventDefault |
| 24 | Delegação de eventos | e.target, propagação |
| 25 | Serialização e formatação | JSON.stringify, substituidor, espaco |
| 25 | Desserialização | JSON.parse |
| 25 | Erros comuns de JSON | try/catch, armadilhas de sintaxe JSON |
| 26 | Básico de callbacks | setTimeout, funções de callback |
| 26 | Simulando requisições com Promise | new Promise, then/catch |
| 26 | async/await | funções async, await |
| 26 | Promise.all e race | Requisições concorrentes, corrida |
| 27 | Classe Aluno | class, constructor, métodos |
| 27 | Métodos estáticos e getter/setter | static, get, set |
| 27 | Demonstração de herança | extends, super |
| 27 | Simulando módulos em arquivo único | type="module" |
Mais exemplos serão adicionados com o tempo. Fique atento!
▶ Exemplo
// Exemplo de código desta seção
const message = "Olá, Mundo!";
console.log(message);
Este é o exemplo mais simples; as seções seguintes explicarão em detalhes.### ▶ Exemplo: Olá Mundo
<!DOCTYPE html>
<html>
<head><title>Olá</title></head>
<body>
<h1>Olá, Mundo!</h1>
<script>alert('Olá do JavaScript!');</script>
</body>
</html>
Uma página mínima que exibe um diálogo de alerta quando o script é executado.
❓ Perguntas Frequentes
P: Como executo esses exemplos? R: Copie o código para um arquivo chamado
example.htmle abra-o em um navegador. Não é necessária etapa de build ou servidor para a maioria dos exemplos.
P: Posso modificar os exemplos e ver os resultados? R: Sim! Abra o arquivo em um editor de texto, altere algo, salve e atualize o navegador. As alterações em JavaScript são imediatas.
P: Onde estão os exemplos maiores (ex.: app Todo)? R: Veja a lição 28 — o projeto Todo App. Este índice coleta apenas trechos curtos de conceito único.
📖 Resumo
- Cada exemplo é auto-contido — copie e execute em qualquer navegador
- Exemplos focam em um conceito por vez
- Modifique livremente para explorar comportamento
- Para projetos maiores, veja as lições dedicadas
📝 Exercícios
- Escolha qualquer exemplo, modifique-o e documente o novo comportamento em um comentário.
- Combine dois exemplos (ex.: variáveis + eventos) em uma única página.
- Crie sua própria página de exemplo ensinando um conceito que você acha confuso.
