EnglishEnglish العربيةالعربية PortuguêsPortuguês Japanese日本語
404 Not Found

404 Not Found

nginx

Começando com JavaScript

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.

Três Maneiras de Adicionar JavaScript

1. Inline (atributo onclick)

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

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Introdução JS - Inline</title>
  <style>
    body { font-family: Arial, sans-serif; text-align: center; margin-top: 80px; }
    #msg { font-size: 22px; color: #333; }
    button { padding: 10px 24px; font-size: 16px; border: none; border-radius: 6px; background: #FF9800; color: #fff; cursor: pointer; }
    button:hover { background: #F57C00; }
  </style>
</head>
<body>
  <p id="msg">Clique no botão abaixo</p>
  <button onclick="document.getElementById('msg').textContent='JS inline executado!'; document.getElementById('msg').style.color='#FF9800';">Clique Aqui</button>
  <p style="margin-top:30px; color:#999; font-size:14px;">👆 Este JS está escrito diretamente no atributo onclick</p>
</body>
</html>
▶ Experimente

Exemplo: JavaScript Interno

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Introdução JS - Interno</title>
  <style>
    body { font-family: Arial, sans-serif; text-align: center; margin-top: 60px; }
    .box { display: inline-block; width: 150px; height: 150px; background: #9C27B0; border-radius: 12px; transition: all 0.4s; line-height: 150px; color: #fff; font-size: 20px; }
    .box.round { border-radius: 50%; }
    button { display: inline-block; margin: 20px 8px; padding: 10px 24px; font-size: 16px; border: none; border-radius: 6px; cursor: pointer; color: #fff; }
    #toggleBtn { background: #9C27B0; }
    #resetBtn { background: #999; }
  </style>
</head>
<body>
  <div class="box" id="shapeBox">Quadrado</div>
  <br>
  <button id="toggleBtn">Alternar Forma</button>
  <button id="resetBtn">Resetar</button>

  <script>
    var box = document.getElementById("shapeBox");
    var isRound = false;
    document.getElementById("toggleBtn").onclick = function() {
      isRound = !isRound;
      if (isRound) {
        box.classList.add("round");
        box.textContent = "Círculo";
      } else {
        box.classList.remove("round");
        box.textContent = "Quadrado";
      }
    };
    document.getElementById("resetBtn").onclick = function() {
      isRound = false;
      box.classList.remove("round");
      box.textContent = "Quadrado";
    };
  </script>
</body>
</html>
▶ Experimente

Exemplo: JavaScript Externo

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Introdução JS - Externo</title>
  <style>
    body { font-family: Arial, sans-serif; text-align: center; margin-top: 60px; }
    #counter { font-size: 48px; font-weight: bold; color: #2196F3; }
    button { padding: 10px 24px; font-size: 18px; border: none; border-radius: 6px; cursor: pointer; color: #fff; margin: 4px; }
    #addBtn { background: #4CAF50; }
    #subBtn { background: #f44336; }
    #resetCount { background: #999; }
  </style>
</head>
<body>
  <h2>Contador</h2>
  <p id="counter">0</p>
  <button id="addBtn">+1</button>
  <button id="subBtn">-1</button>
  <button id="resetCount">Resetar</button>

  <!-- Em um projeto real, o JS abaixo deveria ser salvo em um arquivo separado counter.js -->
  <!-- <script src="counter.js"></script> -->
  <!-- Para fins de demonstração, usamos um script interno aqui -->
  <script>
    var count = 0;
    var counterEl = document.getElementById("counter");
    document.getElementById("addBtn").onclick = function() {
      count++;
      counterEl.textContent = count;
    };
    document.getElementById("subBtn").onclick = function() {
      count--;
      counterEl.textContent = count;
    };
    document.getElementById("resetCount").onclick = function() {
      count = 0;
      counterEl.textContent = count;
    };
  </script>
</body>
</html>
▶ Experimente

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:

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.

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:

Atributo Comportamento
Nenhum Baixa e executa imediatamente, bloqueia a análise do HTML
defer Baixa em segundo plano, executa após o HTML ser totalmente analisado (em ordem)
async Baixa em segundo plano, executa assim que terminar o download (ordem não garantida)

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

📖 Resumo

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

❓ Perguntas Frequentes

P：Qual a diferença entre colocar o <script> no head no final do body? R：No head, o navegador para para baixar e executar o script — a página ainda está em branco nesse momento. No final do body, a página é renderizada primeiro, então os usuários não sentem uma "congelada". É como servir a comida antes de contar piadas — não deixe seus convidados com fome.

P：Devo usar defer ou async? R：Use defer na maioria dos casos. Ele garante que os scripts sejam executados em ordem e somente após o HTML ser totalmente analisado, então os elementos do DOM estão sempre disponíveis. async é melhor para scripts independentes de análise (como Google Analytics) que não dependem de outros scripts ou do DOM.

P：Quantas tags <script> uma página pode ter? R：Quantas você quiser — não há limite. Mas na prática, tente consolidar em poucos arquivos externos para reduzir as requisições HTTP.

📝 Atividades

  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.
100%