Fundamentos de JavaScript: do Básico ao

Desenvolvimento Web
Conceitos essenciais com exemplos, boas práticas e exercícios
Material original de estudo e consulta.

Organizado para leitura independente, revisão e prática.

Este material tem finalidade educacional e não substitui livros, aulas ou orientação profissional
quando o tema exigir.

1
Sumário
1. Fundamentos da linguagem

2. Variáveis e tipos

3. Operadores e controle de fluxo

4. Funções

5. Arrays e objetos

6. Métodos úteis

7. DOM e eventos

8. Assincronismo

9. Erros e depuração

10. Projeto prático e exercícios

2
Fundamentos da linguagem
JavaScript é uma linguagem de programação amplamente usada na web. No navegador, ela
permite criar interfaces interativas, validar formulários, reagir a cliques, buscar dados de APIs e
atualizar a página sem recarregá-la completamente. Fora do navegador, ambientes como [Link]
permitem usar JavaScript em servidores, automações e ferramentas de linha de comando.
A linguagem é dinâmica: uma variável não precisa declarar seu tipo de forma explícita. Isso oferece
flexibilidade, mas também exige disciplina. Muitos bugs surgem quando o programa recebe um
valor de tipo diferente do esperado.
Um programa JavaScript é executado como uma sequência de instruções, mas funções, eventos e
operações assíncronas alteram essa ordem aparente. Para aprender bem, é importante dominar
primeiro valores, expressões, condições, repetição, funções e estruturas de dados.

Primeiro exemplo
`[Link]("Olá, mundo!");` envia uma mensagem ao console. O console do navegador é uma
ferramenta de desenvolvimento fundamental. Nele é possível testar expressões, inspecionar
valores e observar erros.
Comentários de uma linha usam `//`. Comentários de bloco usam `/* ... */`. Comentários úteis
explicam decisões, não aquilo que o código já mostra de forma óbvia.

Variáveis e tipos
JavaScript possui tipos primitivos como string, number, boolean, undefined, null, bigint e symbol.
Objetos formam outra categoria importante e incluem arrays, funções e objetos literais.
Use `const` quando a variável não será reatribuída e `let` quando o valor precisará mudar. Evite
`var` em código moderno, salvo quando estiver estudando código legado e entender seu
comportamento de escopo.
Exemplos:
`const name = "Miguel";`
`let score = 0;`
`const active = true;`
Uma constante impede reatribuir a variável, mas não torna um objeto completamente imutável. Se
`const user = { name: "Ana" }`, ainda é possível fazer `[Link] = "Bia"`. O que não se pode fazer
é `user = { ... }` novamente.
`typeof` ajuda a inspecionar tipos: `typeof 10` retorna `"number"`; `typeof "10"` retorna `"string"`.
Conversões são comuns: `Number("42")` cria o número 42; `String(42)` cria a string "42".
Tenha cuidado com valores falsy: false, 0, "", null, undefined e NaN são tratados como falso em
condições. Isso é útil, mas pode causar bugs quando zero é um valor válido e não deveria ser
interpretado como ausência.

3
Operadores e controle de fluxo
Operadores aritméticos incluem +, -, *, /, %, **. O operador + também concatena strings, portanto
`"2" + 2` resulta em "22". Essa é uma razão para conferir tipos antes de calcular.
Prefira comparações estritas: `===` e `!==`. Elas comparam valor e tipo sem coerção automática. `2
=== "2"` é falso, enquanto `2 == "2"` é verdadeiro por causa de conversão implícita. Em projetos
novos, comparações estritas costumam evitar surpresas.
Condições usam `if`, `else if` e `else`. Exemplo: `if (age >= 18) { ... } else { ... }`. O operador ternário
pode ser útil para decisões curtas: `const label = active ? "Ativo" : "Inativo";`.
Laços permitem repetição. `for` é útil quando há controle sobre índice; `for...of` percorre valores
iteráveis; `while` repete enquanto uma condição for verdadeira. Evite laços infinitos: toda repetição
deve ter uma condição que possa eventualmente mudar.
`break` encerra um laço; `continue` pula diretamente para a próxima iteração. Esses recursos são
úteis, mas podem tornar o fluxo menos óbvio quando usados em excesso.

Funções
Funções agrupam comportamento reutilizável. Uma declaração tradicional pode ser escrita como
`function sum(a, b) { return a + b; }`. Uma arrow function equivalente seria `const sum = (a, b) => a
+ b;`.
Parâmetros são nomes usados dentro da função; argumentos são os valores fornecidos na
chamada. Se uma função espera dois valores, é importante definir o que deve acontecer quando
algum deles estiver ausente. Parâmetros padrão ajudam: `function greet(name = "visitante") { ... }`.
O `return` encerra a execução da função e entrega um valor ao ponto onde ela foi chamada. Sem
`return`, o resultado é `undefined`. Uma função que apenas altera a tela ou grava algo pode não
precisar retornar valor, mas funções de cálculo geralmente devem retornar.
Escopo define onde uma variável existe. Variáveis declaradas com `let` e `const` dentro de um
bloco não ficam disponíveis fora dele. Reduzir o escopo facilita entender de onde um valor vem e
diminui efeitos colaterais.
Funções pequenas e com uma responsabilidade clara são mais fáceis de testar. Se uma função
valida dados, busca API, atualiza DOM, formata texto e grava no armazenamento ao mesmo
tempo, provavelmente está fazendo coisas demais.

Arrays e objetos
Arrays armazenam coleções ordenadas: `const tasks = ["estudar", "treinar", "ler"];`. O primeiro
índice é 0. `tasks[0]` acessa o primeiro item.
Objetos agrupam propriedades relacionadas: `const user = { name: "Miguel", age: 18, active:
true };`. Acesso pode usar ponto (`[Link]`) ou colchetes (`user["name"]`). Colchetes são úteis
quando a chave é dinâmica.

4
Arrays podem conter objetos, o que é muito comum em aplicações: uma lista de usuários,
produtos, mensagens ou pedidos geralmente é representada como array de objetos.
Desestruturação simplifica acesso: `const { name, age } = user;` e `const [first, second] = tasks;`. O
spread copia ou combina valores: `const newUser = { ...user, active: false };` cria um novo objeto
com propriedades copiadas e uma alteração.
Evitar mutações desnecessárias melhora previsibilidade, especialmente em interfaces React. Em
vez de alterar um array existente com lógica complexa, muitas vezes é melhor criar um novo array
usando map, filter ou spread.

Métodos úteis
Métodos de arrays aparecem em praticamente todo projeto moderno. `map` transforma cada item e
devolve um novo array. `filter` mantém apenas itens que passam em uma condição. `find` retorna o
primeiro item correspondente. `some` verifica se pelo menos um item atende ao critério. `every`
verifica se todos atendem.
Exemplo: `const adults = [Link](user => [Link] >= 18);`. Para extrair apenas nomes: `const
names = [Link](user => [Link]);`.
`reduce` é poderoso para acumular valores, mas não deve ser usado apenas para parecer
sofisticado. Se `map`, `filter` ou um laço simples expressar a intenção melhor, use a opção mais
legível.
Strings também possuem métodos importantes: `trim`, `toLowerCase`, `includes`, `startsWith`,
`replace`, `split`. Exemplo de normalização: `const email = [Link]().toLowerCase();`.
Métodos não devem ser decorados isoladamente. Estude resolvendo problemas concretos: filtrar
tarefas concluídas, calcular total de carrinho, procurar usuário por id, ordenar resultados ou validar
entrada.

DOM e eventos
DOM significa Document Object Model. O navegador representa a página como uma estrutura de
objetos que JavaScript pode consultar e modificar.
`[Link]("#save")` busca o primeiro elemento que corresponde ao seletor.
`[Link](".item")` retorna uma coleção de elementos. Depois de selecionar um
elemento, é possível alterar texto, classes, atributos ou estilos.
Eventos permitem reagir ao usuário: `[Link]("click", () => { ... });`. Há eventos de
clique, teclado, envio de formulário, mudança de campo, foco e muitos outros.
Ao tratar formulários, `[Link]()` impede o envio tradicional quando você deseja
processar os dados com JavaScript. Sempre valide dados novamente no servidor em aplicações
reais; validação no navegador melhora experiência, mas não é uma barreira de segurança.
Evite manipular HTML com strings vindas diretamente do usuário usando `innerHTML`, pois isso
pode abrir espaço para injeção de conteúdo. Quando for apenas texto, `textContent` é mais seguro.

5
Assincronismo
Operações de rede e leitura de arquivos podem demorar. JavaScript usa Promises e async/await
para trabalhar com resultados que chegarão no futuro sem bloquear toda a aplicação.
Uma função assíncrona pode ser declarada com `async`. Dentro dela, `await` espera uma Promise
ser resolvida. Exemplo conceitual: `const response = await fetch(url); const data = await
[Link]();`.
Sempre trate falhas. Rede pode cair, servidor pode responder erro, JSON pode ser inválido ou
usuário pode perder conexão. Um bloco `try...catch` permite reagir: mostrar mensagem, registrar
detalhe técnico e oferecer tentativa novamente.
É importante verificar `[Link]`, porque `fetch` não rejeita automaticamente a Promise em
todas as respostas HTTP de erro. Um 404 ou 500 ainda pode produzir uma resposta que precisa
ser examinada.
Evite disparar requisições duplicadas sem necessidade. Em interfaces, desabilitar temporariamente
um botão após o clique ou usar um estado de loading reduz operações repetidas e melhora a
experiência.

Erros e depuração
Depurar é investigar, não adivinhar. Quando algo falha, reproduza o problema, observe a
mensagem de erro e reduza o caso até descobrir onde a expectativa diverge do valor real.
O console mostra stack traces, linhas e mensagens. `[Link]` é útil, mas o debugger do
navegador permite pausar execução, inspecionar variáveis e avançar linha por linha. Aprender
breakpoints economiza tempo em bugs mais complexos.
Leia o primeiro erro relevante antes de tentar corrigir dezenas de mensagens seguintes. Muitos
erros em cascata surgem de uma causa inicial: uma importação faltando, um valor undefined ou
um erro de sintaxe.
Nomeie variáveis para revelar intenção. `totalPrice` é melhor do que `x`. `isAuthenticated` é melhor
do que `flag`. Código legível reduz a quantidade de informação que o cérebro precisa manter ao
depurar.
Também separe problema de ambiente de problema de código. Se uma dependência não está
instalada, corrigir a lógica da aplicação não resolverá. Verifique versão do Node, [Link],
scripts e mensagens do gerenciador de pacotes.

Projeto prático e exercícios

6
Divida o problema em etapas: definir estrutura do objeto tarefa; ler formulário; validar texto;
atualizar array; renderizar lista; persistir; restaurar ao iniciar; implementar filtros.

Exercícios
1. Escreva uma função que recebe dois números e retorna o maior.
2. Filtre um array para manter apenas números pares.
3. Transforme uma lista de nomes em letras maiúsculas.
4. Encontre um usuário por id dentro de um array de objetos.
5. Conte quantas tarefas estão concluídas.
6. Faça uma função que recebe uma string e retorna false se estiver vazia após trim.
7. Crie um botão que alterna uma classe CSS no body.
8. Busque dados de uma API pública e trate erro de rede.
9. Explique por que `===` é preferível a `==` em muitos projetos.
10. Reescreva uma função longa em funções menores com responsabilidades separadas.
O aprendizado acelera quando cada conceito vira código executado. Leia menos exemplos
passivamente e escreva mais variações próprias.