Para começar a programar em JavaScript, você precisa de um ambiente de desenvolvimento adequado. Felizmente, o JavaScript é uma linguagem que roda em qualquer navegador moderno, então você pode começar com ferramentas simples. Nesta aula, vamos configurar seu ambiente e aprender a testar seu código.

O que você precisa

Você pode escrever código JavaScript em qualquer editor de texto simples. Aqui estão algumas opções:

  • Bloco de Notas (Windows): Já vem instalado, mas é muito limitado. Sem destaque de sintaxe ou recursos avançados.
  • Notepad++: Editor gratuito e leve, com destaque de sintaxe e plugins. Bom para iniciantes.
  • Visual Studio Code (VSCode): Editor gratuito e poderoso, com suporte a extensões, terminal integrado e depuração. Recomendado para a maioria dos desenvolvedores.

Após instalar o VSCode, recomendo instalar as seguintes extensões:

  • ESLint: Ajuda a encontrar erros no código.
  • Prettier: Formata o código automaticamente.
  • Live Server: Permite recarregar a página automaticamente ao salvar.

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

O console.log() é uma função que exibe mensagens no console do navegador. É a maneira mais simples de depurar seu código. Exemplo:

console.log('Olá, mundo!');

Para ver o resultado, abra o DevTools do navegador:

  • Chrome/Edge: Pressione F12 ou Ctrl+Shift+I (Windows/Linux) ou Cmd+Option+I (Mac).
  • Firefox: Pressione F12 ou Ctrl+Shift+I.
  • Safari: Ative o menu Desenvolvedor em Preferências > Avançado, depois pressione Cmd+Option+I.

No DevTools, clique na aba "Console" para ver a saída do console.log. Você também pode escrever código diretamente no console e testar.

Precisamos do Node agora?

Node.js é um ambiente que permite executar JavaScript fora do navegador (no servidor ou no terminal). Para este curso inicial, não precisamos do Node.js. Usaremos apenas o navegador para testar nossos códigos. O Node.js será introduzido em aulas futuras, quando abordarmos conceitos mais avançados como módulos e servidores.

Portanto, por enquanto, concentre-se em configurar seu editor e usar o console do navegador. Na próxima aula, começaremos a programar de verdade!

Referências

Exercícios

  1. Instale o Visual Studio Code (ou outro editor de sua escolha) e crie um arquivo chamado index.html. Dentro dele, escreva a estrutura básica de HTML e inclua uma tag <script> com um console.log('Meu primeiro script'). Abra o arquivo no navegador e verifique o console.

    <!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>Meu Primeiro Script</title>
</head>
<body>
    <script>
        console.log('Meu primeiro script');
    </script>
</body>
</html>

  2. Abra o DevTools do seu navegador e digite no console: console.log(2 + 3). Qual é a saída?

    A saída será o número 5.

  3. Pesquise sobre a extensão "Live Server" no VSCode. Instale-a e use-a para abrir o arquivo HTML do exercício 1. O que acontece quando você modifica o código e salva?

    A página recarrega automaticamente, mostrando as alterações sem precisar recarregar manualmente.

  4. Explique com suas palavras por que não precisamos do Node.js no início do curso.

    Porque o JavaScript já roda em todos os navegadores modernos, e podemos testar nossos códigos diretamente no console do navegador. O Node.js é necessário apenas quando quisermos executar JavaScript fora do navegador, como em servidores ou para automatizar tarefas.

  5. Qual é a diferença entre o Bloco de Notas e o VSCode para programar?

    O Bloco de Notas é um editor de texto simples, sem destaque de sintaxe, autocomplete ou ferramentas de depuração. O VSCode é um editor de código com recursos avançados como realce de sintaxe, sugestões de código, integração com Git, terminal integrado e extensões que facilitam o desenvolvimento.