JavaScript: Começando com JavaScript

Última atualização: 2026-10-13

Adicionar JavaScript à sua página web é mais fácil do que você imagina — existem três maneiras de fazer isso, do mais rápido ao profissional.

Métodos BOM relacionados：alert()

1. Três Maneiras de Adicionar JavaScript

Escreva o código JS diretamente no atributo de evento de um elemento HTML, como onclick="...".

Esta é a abordagem mais simples, mas não use em projetos reais — misturar HTML e JS junto torna a manutenção um pesadelo.

(2) Interno (tag <script>)

Insira uma tag <script> no seu arquivo HTML e escreva o código JS dentro dela. Funciona bem para páginas pequenas e é a abordagem mais comum durante o aprendizado e testes.

A tag <script> pode ficar no <head> ou no <body>, mas posicioná-la logo antes de </body> é recomendado para não bloquear a renderização da página.

(3) Externo (arquivo .js)

Escreva seu código JS em um arquivo .js separado e inclua com <script src="xxx.js"></script>. Esta é a prática padrão para projetos reais — separa responsabilidades, permite reutilização e permite que o navegador faça cache do arquivo para carregamento mais rápido.

▶ Exemplo: JavaScript Inline

▶ Exemplo: JavaScript Interno

▶ Exemplo: JavaScript Externo

2. Extensões do VS Code Recomendadas para JS

Se você usa VS Code (altamente recomendado), essas duas extensões são tudo que você precisa:

• Live Server — clique com o botão direito em um arquivo HTML e selecione "Open with Live Server" para atualização automática ao salvar, sem precisar apertar F5
• ESLint — captura problemas de sintaxe em tempo real, como um corretor ortográfico para seu código

3. Executando JS no Chrome DevTools

Pressione F12 para abrir o DevTools, mude para o painel Console e você pode digitar código JS diretamente e pressionar Enter para executá-lo. Esta é a maneira mais rápida de experimentar — teste qualquer trecho de código sem criar um arquivo HTML.

Dica: Pressione a tecla ↑ no Console para recuperar o comando anterior, economizando tempo de redigitação.

4. Os Atributos defer e async em Tags script

Quando uma tag <script> está no <head>, o navegador pausa a análise do HTML para baixar e executar o JS primeiro — o que pode fazer a página parecer travada. Os atributos defer e async resolvem isso:

Boa prática: adicionar defer aos arquivos JS externos é a escolha mais segura — <script src="app.js" defer></script>.

Métodos BOM relacionados：alert()

❓ Perguntas Frequentes

📖 Resumo

• Três maneiras de adicionar JS: inline onclick (não recomendado), interno <script> (ótimo para aprendizado), externo .js (padrão da indústria)
• Posicione as tags <script> logo antes de </body> para evitar bloqueio da renderização
• Use o atributo defer em arquivos JS externos — sem bloqueio e ordem de execução garantida
• O Console do Chrome (F12) é o playground JS mais rápido
• VS Code + Live Server + ESLint é o kit padrão de desenvolvimento front-end
• JS inline é conveniente, mas acopla HTML e JS — crie o hábito de separação desde cedo

📝 Exercícios

1. Iniciante: Crie uma página HTML com um <script> interno que exiba um alerta dizendo "Bem-vindo ao JavaScript!" quando a página carregar (dica: use alert()).
2. Intermediário: Crie uma página HTML e um arquivo main.js separado. Inclua o arquivo JS com <script src="main.js" defer></script> e implemente um botão que altera a cor de fundo da página.
3. Desafio: Crie uma página com três botões, cada um representando um dos três métodos de inclusão (inline, interno, externo). Quando qualquer botão for clicado, exiba "Este JS foi carregado via método XXX" na página, usando cores diferentes para distingui-los.

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós