Nesta aula, vamos preparar o ambiente para programar em JavaScript. Você aprenderá quais ferramentas são essenciais, como usar o console do navegador para testar código rapidamente e quando o Node.js se torna necessário. Ao final, você será capaz de escrever e executar seus primeiros scripts.

Não se preocupe: começaremos com o mínimo necessário e, aos poucos, adicionaremos ferramentas mais poderosas conforme sua necessidade.

O que você precisa (Bloco de Notas, Notepad++, VSCode, extensões úteis)

Para escrever JavaScript, você só precisa de um editor de texto. O próprio Bloco de Notas do Windows já serve, mas não oferece realce de sintaxe, o que dificulta a leitura do código. Recomendamos começar com um editor mais amigável.

Opções populares:

  • Notepad++: gratuito, leve, com realce de sintaxe para JavaScript. Ideal para quem quer algo simples e rápido.
  • Visual Studio Code (VSCode): gratuito, muito poderoso, com milhares de extensões. É a ferramenta mais usada atualmente por desenvolvedores JavaScript.

Após instalar o VSCode, adicione estas extensões úteis:

  • ESLint: para identificar erros de sintaxe e estilo.
  • Prettier: para formatar o código automaticamente.
  • Live Server: para recarregar o navegador automaticamente ao salvar arquivos HTML.

Exemplo de como instalar uma extensão no VSCode: clique no ícone de extensões (ou Ctrl+Shift+X), digite o nome e clique em Instalar.

Como usar console.log e o F12 (DevTools) nos browsers

O método console.log() exibe mensagens no console do navegador. É a forma mais simples de ver resultados enquanto programa. Para acessar o console, pressione F12 (ou Ctrl+Shift+I) e clique na aba "Console".

Você pode escrever código diretamente no console ou criar um arquivo HTML com JavaScript e abri-lo no navegador. Crie um arquivo index.html com o seguinte conteúdo:

<!DOCTYPE html>
<html>
  <head>
    <title>Teste</title>
  </head>
  <body>
    <script>
      console.log("Olá, mundo!");
      console.log(2 + 3);
    </script>
  </body>
</html>

Salve o arquivo e abra-o no navegador. Com o console aberto (F12), você verá as mensagens. Experimente digitar console.log("teste") diretamente no console e veja o resultado imediato.

Precisamos do Node agora? (quando entra)

Node.js é um ambiente que executa JavaScript fora do navegador. Para as primeiras aulas, você não precisa dele, pois testaremos tudo no navegador. O Node será essencial quando começarmos a trabalhar com arquivos, servidores ou ferramentas como npm (gerenciador de pacotes).

Se quiser se adiantar, instale o Node.js pelo site oficial (https://nodejs.org). Após instalar, abra o terminal e digite node -v para verificar a versão. Você pode executar um arquivo JavaScript com node arquivo.js. Por enquanto, focaremos no navegador.

Boas práticas e observações finais

Mantenha seu editor sempre configurado para salvar arquivos com codificação UTF-8 (padrão). Use nomes de arquivos sem acentos e espaços. Organize seus projetos em pastas separadas. E lembre-se: o console do navegador é seu melhor amigo para depuração rápida.

Exercícios

  1. Crie um arquivo HTML que exiba no console a soma de 10 e 20.

    ✓ Resposta:
    <!DOCTYPE html>
<html>
  <head>
    <title>Exercício 1</title>
  </head>
  <body>
    <script>
      console.log(10 + 20);
    </script>
  </body>
</html>

  2. Abra o console do navegador e digite um comando que mostre seu nome.

    ✓ Resposta:
    console.log("Seu nome");

  3. Instale o Visual Studio Code e crie um novo arquivo. Escreva um código que exiba "Meu primeiro código" no console.

    ✓ Resposta:
    console.log("Meu primeiro código");

  4. No console do navegador, declare uma variável com seu nome e exiba-a usando console.log.

    ✓ Resposta:
    let nome = "João";
console.log(nome);

  5. Pesquise e instale a extensão "Live Server" no VSCode. Em seguida, crie um arquivo HTML e use o Live Server para abri-lo no navegador. O que acontece?

    ✓ Resposta: O Live Server abre uma página local (geralmente http://127.0.0.1:5500) que recarrega automaticamente sempre que você salva o arquivo HTML. Isso permite ver as alterações instantaneamente no navegador.

Referências