JavaScript

O JavaScript serve para deixar as páginas web interativas, com menus que se abrem, formulários que conferem os dados digitados e conteúdo que se atualiza sem recarregar a página. Ele também roda em servidores por meio do Node.js e move muitos apps para celular e desktop. Todo navegador moderno executa JavaScript nativamente.

JavaScript e Java são duas linguagens de programação diferentes que só compartilham parte do nome. O JavaScript roda principalmente nos navegadores e tem tipagem dinâmica, enquanto o Java tem tipagem estática e é compilado para bytecode da Java Virtual Machine. O nome parecido veio de uma decisão de marketing nos anos 1990.

O DOM, ou Document Object Model, é a árvore de objetos que o navegador monta a partir de uma página HTML para que o JavaScript possa ler e alterar a página. Por meio do DOM, o JavaScript encontra elementos, muda textos, adiciona classes e cria novos elementos. Toda mudança visível que um script faz na página passa pelo DOM.

Adicione JavaScript a uma página HTML com uma tag script, seja com o código direto dentro dela, seja apontando para um arquivo JavaScript separado com o atributo src. Colocar a tag script no fim do body, ou usar o atributo defer, deixa o HTML carregar primeiro. Arquivos JavaScript separados são mais fáceis de guardar em cache e de manter.

No JavaScript, let e const têm escopo de bloco, enquanto var tem escopo de função e pode ser declarada de novo. Uma variável const não pode ser reatribuída, embora um objeto guardado em uma const ainda possa mudar por dentro. O JavaScript moderno usa const por padrão, let quando o valor precisa mudar, e evita var.

Eventos no JavaScript são sinais que o navegador envia quando algo acontece, como um clique, uma tecla pressionada, o envio de um formulário ou o fim do carregamento da página. Um script responde a um evento registrando uma função ouvinte com addEventListener. É com os ouvintes de eventos que o JavaScript faz a página reagir ao usuário.

Delegação de eventos no JavaScript significa registrar um único ouvinte de evento no elemento pai, em vez de um ouvinte em cada elemento filho. O ouvinte confere o alvo do evento para saber qual filho foi clicado. A delegação de eventos usa menos memória e também funciona para elementos adicionados à página depois.

Use a função fetch do JavaScript para pedir dados a uma API e depois leia o corpo com o método json da resposta. A função fetch retorna uma promise, então o código geralmente espera o resultado com async e await. Conferir o status da resposta e capturar os erros mantém a página funcionando quando a rede falha.

Uma promise no JavaScript é um objeto que representa um valor que vai ficar pronto depois, como o resultado de uma requisição de rede. A promise pode estar pendente, cumprida ou rejeitada. O código reage ao resultado com then e catch, ou com async e await.

Async e await permitem que o código JavaScript espere uma promise de um jeito que se lê como um código comum, passo a passo. Uma função marcada como async sempre retorna uma promise, e o await pausa essa função até a promise ser resolvida. Os erros dentro de funções async são tratados com um bloco try e catch normal.

ES6, também chamado de ECMAScript 2015, é a grande atualização de 2015 do padrão da linguagem JavaScript. O ES6 trouxe let e const, arrow functions, classes, template literals, desestruturação, módulos e promises. Todo navegador moderno suporta ES6, e novos recursos de JavaScript são acrescentados todos os anos desde então.

Arrow functions no JavaScript são uma forma mais curta de escrever funções usando a sintaxe =>. Uma arrow function não tem this próprio, então o this mantém o valor do código ao redor. Elas são comuns em callbacks curtos, como os passados para map e filter.

JSON, ou JavaScript Object Notation, é um formato de texto para guardar e trocar dados como pares de chave e valor. O JavaScript transforma um objeto em texto JSON com JSON.stringify e transforma texto JSON de volta em objeto com JSON.parse. A maioria das APIs web envia e recebe dados em JSON.

O JavaScript é fácil de começar para iniciantes, porque basta um navegador e um editor de texto. As partes mais difíceis vêm depois, como código assíncrono, escopo e as muitas ferramentas em volta da linguagem. A maioria dos estudantes constrói páginas interativas úteis em poucas semanas de prática regular.

Sim, aprender JavaScript puro antes de React ou Vue torna qualquer um dos dois muito mais fácil de entender. Os dois frameworks são construídos sobre recursos básicos do JavaScript, como funções, arrays, objetos, módulos e promises. Quem domina o básico também consegue depurar o código do framework, em vez de ficar adivinhando.

TypeScript é JavaScript com tipos estáticos, criado pela Microsoft e compilado para JavaScript puro. Os tipos permitem que o editor de código pegue muitos erros antes de o código rodar. O TypeScript é popular em projetos grandes, nos quais muitos desenvolvedores compartilham o mesmo código.

Deixe as páginas com JavaScript mais rápidas enviando menos JavaScript, carregando os scripts com defer ou async e dividindo pacotes grandes para que cada página carregue só o que precisa. Minificar e comprimir os arquivos reduz o tamanho do download. Manter o trabalho pesado fora da thread principal deixa a página respondendo a cliques e à digitação.

No JavaScript, === compara o valor e o tipo, enquanto == converte os tipos antes de comparar. Por exemplo, 0 == "0" é verdadeiro, mas 0 === "0" é falso. Usar === evita resultados inesperados e é a regra habitual no código JavaScript moderno.

Módulos JavaScript são arquivos separados que exportam funções ou valores e importam o que precisam de outros arquivos. Os módulos mantêm o código organizado, evitam variáveis globais e facilitam a manutenção de projetos grandes. Os navegadores carregam um módulo por meio de uma tag script com o atributo type definido como module.

Depure JavaScript no navegador com as ferramentas de desenvolvedor, abertas com F12 ou clicando com o botão direito na página e escolhendo Inspecionar. O Console mostra erros e valores registrados, e o painel Sources permite definir breakpoints e avançar pelo código linha a linha. O painel Network mostra cada requisição que a página faz e a resposta de cada uma.

O event loop é o mecanismo que permite ao JavaScript, que roda em uma única thread, lidar com muitas tarefas sem travar. Trabalhos lentos, como timers e requisições de rede, esperam em segundo plano, e o event loop executa cada callback concluído quando a pilha de chamadas está vazia. Código que demora muito ainda bloqueia o event loop, e é por isso que laços pesados deixam a página sem resposta.

Sim, o JavaScript roda no servidor por meio de runtimes como Node.js, Deno e Bun. O JavaScript no servidor pode construir APIs, ler arquivos e se conectar a bancos de dados. Usar uma só linguagem no navegador e no servidor permite que a equipe compartilhe código e conhecimento.

Mantenha o código JavaScript seguro nunca inserindo texto não confiável na página com innerHTML, validando todas as entradas novamente no servidor e deixando segredos fora do código front-end. Tudo o que é enviado ao navegador pode ser lido pelos usuários, inclusive chaves de API. Uma Content Security Policy e dependências atualizadas bloqueiam muitos ataques comuns.

No JavaScript, o localStorage guarda dados apenas no navegador, enquanto os cookies são enviados ao servidor em cada requisição. O localStorage comporta mais dados e serve para configurações como o tema escolhido. Cookies marcados como HttpOnly e Secure são o lugar mais seguro para sessões de login, porque os scripts não conseguem lê-los.

Escreva código JavaScript fácil de manter com funções pequenas, nomes claros, módulos, formatação consistente e um linter como o ESLint. Evite variáveis globais e mantenha o código que altera o DOM separado do código que trata os dados. Testes automatizados deixam as mudanças futuras seguras.