Antes de escrever a primeira linha de código JavaScript, é fundamental preparar o ambiente de desenvolvimento. Nesta aula, você aprenderá quais ferramentas são essenciais para programar em JavaScript, desde as mais básicas até as mais avançadas, e como testar seu código imediatamente no navegador.

Vamos explorar desde editores de texto simples como o Bloco de Notas até IDEs completas como o Visual Studio Code, além de entender o papel do console do navegador e quando o Node.js se faz necessário. Ao final, você terá um ambiente funcional para começar a programar.

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

Para escrever código JavaScript, você pode usar desde um editor de texto simples até uma IDE completa. A escolha depende do seu conforto e das funcionalidades desejadas. Vamos analisar as opções mais comuns:

Bloco de Notas (Windows) é o editor mais básico, já vem instalado no Windows. Ele é suficiente para escrever código, mas não oferece realce de sintaxe, auto-complete ou depuração. É útil para testes rápidos, mas não recomendado para projetos sérios.

Notepad++ é um editor gratuito e leve que oferece realce de sintaxe para várias linguagens, incluindo JavaScript. Ele é uma boa opção intermediária, mas ainda carece de funcionalidades mais avançadas como integração com terminal e depurador.

Visual Studio Code (VSCode) é a escolha mais popular entre desenvolvedores JavaScript. É gratuito, open-source e extremamente extensível. Recomenda-se instalar as seguintes extensões para melhorar a produtividade:

  • ESLint: para análise estática de código e identificação de erros.
  • Prettier: para formatação automática de código.
  • Live Server: para recarregar automaticamente o navegador ao salvar arquivos.
  • JavaScript (ES6) code snippets: fornece atalhos para trechos comuns de código.
  • Debugger for Chrome: permite depurar JavaScript diretamente no VSCode.

Exemplo de instalação de extensão no VSCode: abra a aba de extensões (Ctrl+Shift+X), pesquise por "ESLint" e clique em instalar.

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

O console.log() é uma função embutida do JavaScript que exibe mensagens no console do navegador. É a ferramenta mais básica e útil para depuração. Para usá-la, basta escrever console.log('Olá, mundo!'); em seu código e abrir o console do navegador pressionando a tecla F12 (ou Ctrl+Shift+I no Chrome/Firefox/Edge).

O console faz parte das Ferramentas do Desenvolvedor (DevTools). Além de exibir logs, você pode executar código JavaScript diretamente no console, inspecionar elementos HTML, depurar passo a passo e muito mais. Exemplo prático:

let nome = "Maria";
console.log("Olá, " + nome + "!");
console.log(`Olá, ${nome}!`); // Template string (ES6)

Ao abrir o console (F12) e recarregar a página, você verá as mensagens exibidas. É possível também usar console.warn() e console.error() para destacar avisos e erros.

Precisamos do Node agora? (quando entra)

Node.js é um ambiente de execução JavaScript fora do navegador. Ele permite rodar JavaScript no servidor, criar ferramentas de linha de comando e automatizar tarefas. Para iniciar seus estudos, não é necessário instalar o Node.js. Você pode testar todo o código básico diretamente no console do navegador ou criando um arquivo HTML simples que inclua um script.

O Node.js se torna necessário quando você quiser:

  • Criar aplicações back-end (servidores web, APIs).
  • Usar gerenciadores de pacotes como npm ou yarn.
  • Executar JavaScript fora do navegador (automação, scripts).
  • Trabalhar com frameworks como Express.js, React (via create-react-app) ou Next.js.

Para instalar o Node.js, acesse o site oficial (https://nodejs.org) e baixe a versão LTS. Após a instalação, você pode verificar se funcionou com o comando node -v no terminal. Mas, por enquanto, foque em aprender a sintaxe e lógica usando o navegador.

Boas práticas

Mantenha seu código organizado desde o início: use nomes de variáveis significativos, comente trechos complexos e salve frequentemente. Aprenda a usar o console do navegador como seu principal aliado na depuração. E lembre-se: o ambiente de desenvolvimento é uma ferramenta, não um fim. Escolha aquele que te deixa mais produtivo.

Referências

Exercícios

  1. Instale o Visual Studio Code e adicione as extensões ESLint e Prettier. Em seguida, crie um arquivo chamado teste.js e escreva um código que exiba "Meu primeiro script" no console.

    2. ✓ Resposta: Após instalar o VSCode e as extensões, crie o arquivo teste.js com o conteúdo:
    console.log("Meu primeiro script");
    Para executar, você pode usar o Node.js (se instalado) com node teste.js no terminal, ou incluir o script em um HTML e abrir no navegador com F12.
  2. Abra o console do navegador (F12) e digite diretamente: console.log(2 + 3);. O que aparece? Em seguida, digite console.warn("Aviso"); e console.error("Erro");. Observe as diferenças.

    3. ✓ Resposta: Ao digitar console.log(2 + 3);, o console exibe 5. console.warn("Aviso"); exibe uma mensagem com ícone de aviso (amarelo), e console.error("Erro"); exibe uma mensagem com ícone de erro (vermelho).
  3. Crie um arquivo HTML simples que inclua um script JavaScript. O script deve declarar uma variável chamada cidade com o valor "São Paulo" e exibir no console a mensagem "Você mora em São Paulo".

    4. ✓ Resposta: Crie um arquivo index.html com o conteúdo:
    <!DOCTYPE html>
<html>
<head><title>Teste</title></head>
<body>
<script>
let cidade = "São Paulo";
console.log("Você mora em " + cidade);
</script>
</body>
</html>
    Abra no navegador e veja a mensagem no console.
  4. Explique com suas palavras a diferença entre usar o Bloco de Notas e o VSCode para programar JavaScript. Dê pelo menos duas vantagens do VSCode.

    5. ✓ Resposta: O Bloco de Notas é um editor de texto sem formatação, sem realce de sintaxe, auto-complete ou depuração. Já o VSCode oferece realce de sintaxe, auto-complete, depuração integrada, extensões e terminal embutido. Duas vantagens: 1) Realce de sintaxe que facilita a leitura do código; 2) Extensões como ESLint que ajudam a evitar erros.
  5. Pesquise e instale o Node.js em seu computador (se ainda não tiver). Verifique a instalação com o comando node -v no terminal. Em seguida, crie um arquivo ola.js com o código console.log("Olá, Node!"); e execute-o com node ola.js.

    6. ✓ Resposta: Após instalar o Node.js, abra o terminal (cmd, PowerShell ou bash) e digite node -v. Deve aparecer a versão instalada (ex: v18.12.0). Crie o arquivo ola.js com console.log("Olá, Node!"); e execute node ola.js no mesmo diretório. A mensagem será exibida no terminal.