W3docs
pt
Entrar

Começando a usar JavaScript

Aprenda como adicionar JavaScript a uma página web com a tag script, vincular arquivos .js externos, controlar o carregamento com defer e async, e usar o console do navegador.

O que este capítulo aborda

Este é o seu ponto de partida para escrever JavaScript. Ao final dele, você saberá como:

  • adicionar JavaScript diretamente a uma página HTML com a tag <script>,
  • mover seu código para um arquivo .js separado e vinculá-lo,
  • controlar quando um script é executado com os atributos defer e async,
  • escrever suas primeiras linhas de código, e
  • usar o console do navegador para ver saídas e encontrar erros.

Se você é completamente novo na linguagem, leia primeiro a breve Introdução ao JavaScript para ter uma visão geral, e depois volte aqui para começar a escrever código.

Por que você precisa do JavaScript

HTML descreve a estrutura de uma página e CSS a estiliza, mas nenhum deles pode reagir a um visitante. O HTML por si só permite que as pessoas leiam texto, assistam vídeos, vejam imagens e cliquem em links — ele não consegue fazer cálculos, validar um formulário ou alterar a página após o carregamento. O JavaScript adiciona comportamento: ele transforma um documento estático em algo interativo que pode responder a cliques, digitação e outros eventos.

Adicionar JavaScript a uma página significa que você está escrevendo um programa de computador. A maioria dos scripts para iniciantes é curta, mas eles compartilham os mesmos blocos de construção de programas maiores: valores, condições e instruções passo a passo. Uma boa maneira de pensar antes de codificar é dividir uma tarefa em pequenos passos. Por exemplo, para cumprimentar um visitante pelo nome — "Bem-vindo, João Silva!" — seu programa precisa:

  1. pedir ao visitante o nome dele,
  2. ler a resposta, e
  3. imprimir a mensagem na página.

Uma vez que os passos estão claros, você os traduz em código. Aprender a linguagem é muito parecido com aprender um idioma falado: você adquire novas palavras (let, if, function) e aprende como combiná-las.

Como adicionar JavaScript a uma página

O navegador lê o HTML de cima para baixo. Para informar ao navegador que "JavaScript está chegando," você envolve seu código na tag HTML <script>. Tudo entre o <script> de abertura e o </script> de fechamento é executado como JavaScript:

Um script "Olá, mundo!" dentro do HTML

<!DOCTYPE HTML>
<html>
  <body>
    <p>Before the script...</p>
    <script>
      alert('Hello, world!');
    </script>
    <p>...After the script.</p>
  </body>
</html>
Experimente Você Mesmo »

Uma tag <script> pode conter o código em si (chamado de código inline) ou apontar para um arquivo externo com o atributo src (abordado na próxima seção). Você pode colocar tags <script> no <head> da página ou em qualquer lugar no <body>.

Onde colocar a tag <script>

Um script bloqueia a análise enquanto é executado, então o posicionamento importa:

  • Logo antes da tag de fechamento </body> é o lugar mais simples e seguro. Quando o script é executado, o HTML acima dele já existe, portanto o código pode encontrar elementos da página.
  • No <head> mantém o código organizado em um só lugar, mas um <script> simples ali é executado antes de o body ser analisado — portanto ainda não pode ver os elementos da página. Para resolver isso, use o atributo defer (veja abaixo).

Atributos antigos de <script> que você ainda pode ver

Scripts modernos raramente precisam de atributos, mas dois aparecem em código mais antigo:

  • type — o HTML4 exigia type="text/javascript". Isso não é mais necessário; o padrão moderno reutiliza type apenas para módulos JavaScript (type="module"), um tópico avançado abordado mais tarde.
  • language — language="javascript" era usado para declarar a linguagem do script. JavaScript é o padrão, portanto esse atributo está obsoleto.

Você pode ler sobre todos os atributos disponíveis no capítulo sobre atributos HTML.

Controlando quando um script carrega: defer e async

Quando o navegador encontra um <script src="..."> externo, ele normalmente para de construir a página, baixa o arquivo e o executa antes de continuar. Em uma página com vários scripts, isso atrasa a renderização. Dois atributos mudam esse comportamento:

  • defer — baixa o script em paralelo e o executa somente após o HTML ser completamente analisado, na ordem em que os scripts aparecem. Este é o padrão recomendado para scripts que interagem com a página.
  • async — baixa em paralelo e executa assim que estiver pronto, sem garantir a ordem. Melhor para scripts independentes (análise, anúncios) que não dependem de outro código ou de a página estar pronta.
<!-- Runs after the page is parsed, keeps order -->
<script defer src="main.js"></script>

<!-- Runs whenever it finishes downloading, order not guaranteed -->
<script async src="analytics.js"></script>

Ambos os atributos se aplicam apenas a scripts externos (src). Para código inline, simplesmente coloque o <script> no final do <body>.

Arquivos JavaScript externos

Código inline é adequado para uma demonstração rápida, mas projetos reais mantêm o JavaScript em arquivos .js separados. Copiar o mesmo código em cada página é difícil de manter — se você corrigir um bug, precisaria editar cada página. Um script externo fica em um único arquivo .js que muitas páginas podem compartilhar, assim você escreve uma vez e o navegador pode até armazená-lo em cache para maior velocidade.

Para usar um arquivo externo, aponte o atributo src (source) da tag <script> para ele e deixe a tag vazia:

Vinculando um script na mesma pasta

<script src="W3DocsScript.js"></script>

O caminho em src funciona como qualquer outra URL em HTML. Ele pode ser:

  • Relativo à página atual — my-script.js (mesma pasta) ou js/my-script.js (uma subpasta).
  • Caminho absoluto (raiz do site) — começa com /:
<script src="/path/W3DocsScript.js"></script>
  • Uma URL completa, útil para bibliotecas hospedadas em um CDN:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Para carregar vários arquivos, use uma tag <script> por arquivo. Eles são executados de cima para baixo:

<script src="/W3DocsScript1.js"></script>
<script src="/W3DocsScript2.js"></script>

Um erro comum: uma única tag <script> não pode ter ao mesmo tempo um atributo src e código inline. Se src estiver definido, qualquer coisa entre as tags é ignorada:

src definido — o alert inline nunca é executado

<!DOCTYPE HTML>
<html>
  <body>
    <p>Before the script...</p>
    <script src="W3DocsScript.js">
      alert("Hello, world!"); // the content is ignored, because src is set
    </script>
    <p>...After the script.</p>
  </body>
</html>
Experimente Você Mesmo »

Para usar um arquivo externo e código inline, divida-os em duas tags separadas:

Duas tags: uma externa, uma inline

<!DOCTYPE HTML>
<html>
  <body>
    <p>Before the script...</p>
    <script src="W3DocsScript.js"></script>
    <script>
      alert("Hello, world!");
    </script>
    <p>...After the script.</p>
  </body>
</html>
Experimente Você Mesmo »

Seu primeiro programa JavaScript

Vamos escrever um primeiro programa completo. Crie um arquivo HTML e, logo antes da tag de fechamento </body>, adicione um <script> com uma única linha que exibe uma mensagem em popup:

Uma caixa de diálogo alert()

<!DOCTYPE HTML>
<html>
  <head>
    <title>My First Script</title>
  </head>
  <body>
    <p>Before the script...</p>
    <script>
      alert('Welcome to W3Docs');
    </script>
  </body>
</html>
Experimente Você Mesmo »

Quando você abre esta página em um navegador, uma caixa de diálogo aparece com o texto Welcome to W3Docs. A página fica pausada até você clicar em OK; depois que a caixa fecha, o restante da página é renderizado. alert() é útil para verificações rápidas durante o aprendizado, mas interrompe o usuário, então código de produção raramente o usa.

Escrevendo texto em uma página web

alert() exibe um popup, mas muitas vezes você quer colocar texto dentro da própria página. O comando clássico de ensino para isso é document.write(), que insere qualquer string que você passar diretamente no documento enquanto ele carrega:

Usando document.write()

<!DOCTYPE HTML>
<html>
  <head>
    <title>document.write demo</title>
  </head>
  <body>
    <h1>Writing to the document window</h1>
    <script>
      document.write('<p>Welcome to W3Docs!</p>');
    </script>
  </body>
</html>
Experimente Você Mesmo »

Assim como a função alert(), document.write() gera o que você coloca entre seus parênteses — aqui um elemento <p>, portanto o navegador adiciona um novo parágrafo abaixo do cabeçalho.

Atenção: document.write() é adequado para um primeiro experimento, mas evite-o em projetos reais. Se ele for executado após o carregamento da página, apaga o documento inteiro. O código moderno atualiza a página através do DOM (por exemplo element.textContent = '...') em vez disso.

O console JavaScript do navegador

Todo navegador moderno vem com um console integrado — a ferramenta mais útil que você tem ao aprender. Ele exibe mensagens que você imprime, relata erros com o número exato da linha e permite que você digite JavaScript e execute-o instantaneamente.

Imprima nele com console.log(). Ao contrário de alert(), ele não interrompe a página, e ao contrário de document.write(), nunca sobrescreve seu documento — portanto é a maneira preferida de inspecionar valores:

Registrando no console

<!DOCTYPE HTML>
<html>
  <head>
    <title>console.log demo</title>
  </head>
  <body>
    <p>Open the console to see the message.</p>
    <script>
      console.log('Welcome to W3Docs');
      console.log('2 + 2 =', 2 + 2);
    </script>
  </body>
</html>
Experimente Você Mesmo »

Para abrir o console:

  • Chrome / Edge: Ctrl + Shift + J (Windows/Linux) ou Cmd + Option + J (Mac), ou use o menu → Mais ferramentas → Ferramentas do desenvolvedor e selecione a aba Console.
  • Firefox: Ctrl + Shift + K (Windows/Linux) ou Cmd + Option + K (Mac).
  • Safari: habilite o menu Desenvolver em Configurações → Avançado, depois pressione Cmd + Option + C.

Para um tour mais aprofundado sobre ferramentas de depuração, veja Depuração e ferramentas do DOM.

Resumo

  • Adicione JavaScript com a tag <script> — o código inline fica entre as tags; um arquivo externo vai no atributo src (nunca ambos em uma única tag).
  • Coloque scripts simples logo antes de </body>, ou use defer em scripts externos para executá-los após o carregamento da página.
  • Arquivos .js externos permitem reutilização e cache em várias páginas.
  • alert() exibe um popup, document.write() escreve na página (use com moderação), e console.log() imprime no console sem perturbar a página.

A seguir, aprenda como armazenar dados em variáveis JavaScript e como documentar seu código com comentários.

Prática

Prática
Quais das afirmações a seguir são verdadeiras sobre começar com JavaScript no desenvolvimento web?
Quais das afirmações a seguir são verdadeiras sobre começar com JavaScript no desenvolvimento web?
Was this page helpful?