Primeiro script e o console

Escrever no console

console.log("A página carregou");
console.log(42);
console.log("Total:", 150.75);

console.log() mostra valores no console do navegador. É a ferramenta de acompanhamento: com ela você vê o que o código está fazendo enquanto roda.

Aceita vários valores separados por vírgula, e mostra todos:

const produto = "Farinha";
const preco = 12.5;
console.log(produto, preco); // → Farinha 12.5

Os primos do log

console.log("informação comum");
console.warn("atenção: o preço está zerado");
console.error("não achei o elemento");
console.table([
  { produto: "Farinha", preco: 12.5 },
  { produto: "Açaí", preco: 25.0 },
]);

console.table desenha uma tabela de verdade no console: muito útil quando você tem uma lista de objetos e quer conferir os valores de relance.

Comentários

// Uma linha

/*
   Várias
   linhas
*/

// O preço vem em centavos porque ponto flutuante não representa
// R$ 12,50 exatamente. Dividir por 100 só na hora de mostrar.
const precoEmCentavos = 1250;

Como no CSS e no HTML: comentário bom explica por quê. O que o código faz, o código já diz.

Ler uma mensagem de erro

Erros vão aparecer. Ler a mensagem inteira resolve a maioria.

Uncaught TypeError: Cannot read properties of null (reading 'textContent')
    at script.js:5

Traduzindo:

• TypeError: o tipo do problema;
• Cannot read properties of null: você tentou usar algo que é null;
• (reading 'textContent'): o que você tentou ler;
• at script.js:5; arquivo e linha.

Neste caso: document.getElementById(...) não achou o elemento e devolveu null. As causas quase sempre são duas: o id está escrito diferente no HTML, ou o script rodou antes de a página existir (falta o defer).

Ponto e vírgula

A linguagem insere ponto e vírgula sozinha no fim das linhas, na maior parte dos casos. Isso quer dizer que os dois estilos funcionam:

const a = 1;
const b = 2;

const a = 1
const b = 2

Há alguns casos raros em que a inserção automática engana: quando a linha seguinte começa com (, [ ou `. Escolher usar sempre evita pensar nisso.

Rodando no console

Você não precisa de arquivo para experimentar. Abra o console e digite:

2 + 2;
"Benjamin" + " Constant";
10 / 3;
Math.round(10 / 3);
new Date().getFullYear();

Cada linha, ao apertar Enter, mostra o resultado. É o melhor lugar para testar uma ideia antes de escrevê-la no arquivo.

Um script inteiro

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <title>Primeiro script</title>
    <script src="script.js" defer></script>
  </head>
  <body>
    <h1 id="titulo">Feira do produtor</h1>
    <p id="mensagem"></p>
  </body>
</html>

// script.js
console.log("O script rodou");

const titulo = document.getElementById("titulo");
console.log("Título encontrado:", titulo);

const mensagem = document.getElementById("mensagem");
mensagem.textContent = "A feira abre às 5h.";

Abra e olhe o console: você vai ver a mensagem e o elemento encontrado.

Exercícios

1. Escreva cinco console.log() com valores diferentes: texto, número, dois valores juntos.
2. Use console.table com uma lista de três objetos.
3. Provoque um erro de propósito: chame getElementById com um id que não existe e tente ler .textContent. Leia a mensagem inteira.
4. Escreva um comentário que explique por quê de alguma decisão.
5. Use o console como calculadora: quanto custa 3,5 kg de farinha a R$ 12,50 o quilo?

Referências

• Console API - MDN - todos os métodos
• O que deu errado - MDN - como ler erros comuns
• JavaScript Output - W3Schools - as formas de mostrar valores