Seu primeiro código: o console
Todo aprendizado em programação começa fazendo o computador te mostrar algo. Vamos entender o que é o console e usar o comando mais importante dos seus primeiros meses.
Estudar esta lição interativa →Antes de escrever qualquer código, você precisa de um lugar para ver o resultado. Esse lugar é o console: um painel onde o JavaScript escreve mensagens de texto para você ler. É a sua principal janela para enxergar o que está acontecendo por dentro do programa enquanto ele roda.
Todo navegador tem um console embutido, dentro das Ferramentas do Desenvolvedor. Em qualquer site, você pode abri-lo com a tecla F12 (ou clicando com o botão direito na página e escolhendo "Inspecionar") e indo até a aba Console. Aqui no curso, você nem precisa disso: o console já aparece pronto, logo abaixo de cada bloco de código, assim que você clica em Rodar.
O console fica na aba Console das Ferramentas do Desenvolvedor do navegador. Aqui no curso, ele já aparece pronto logo abaixo de cada bloco de código.
Pense no seu programa como uma cozinha fechada, com você do lado de fora. O console é a janelinha de atendimento: é por ali que a cozinha te passa bilhetes contando o que preparou, o que deu certo e o que deu errado. Sem essa janelinha, você ficaria no escuro, sem saber o que o código realmente fez.
O comando para escrever um bilhete nessa janelinha é o console.log(), de longe o que você mais vai usar nos primeiros meses. Vale ler esse nome com calma, porque cada pedaço tem o seu sentido:
Lendo por partes: console é a janelinha (o objeto), .log é a função que mostra, e entre os parênteses vai a mensagem que você quer exibir.
O ponto entre console e log é a chave da leitura: ele serve para acessar algo que está dentro de outra coisa. Ou seja, console.log é a função log (que significa "registrar" ou "mostrar") guardada dentro do console. Juntando tudo, console.log("oi") se lê como: "console, mostre isto aqui para mim". Rode o exemplo abaixo:
// Sua primeiríssima linha de JavaScript!
// Clique em "Rodar" e veja a mágica no console abaixo 👇
console.log("Olá, mundo! Eu escrevi meu primeiro código 🎉");Clique em Rodar e veja o bilhete aparecer no console.
Dois detalhes desse primeiro código merecem atenção. O texto está entre aspas ("assim"): isso avisa ao JavaScript que aquilo é um texto literal (o que chamamos de string), e não um comando a executar. E a linha termina com ponto e vírgula (;), que marca o fim de uma instrução, mais ou menos como o ponto final de uma frase.
Você também pode mostrar vários valores de uma vez, separando por vírgula, e até fazer contas dentro do console.log:
// console.log serve para "printar" (mostrar) valores.
// Você pode mostrar textos, números e contas:
console.log("Bem-vindo ao JavaScript");
console.log(2026);
console.log(10 + 5);
console.log("Metade de 100 é:", 100 / 2);"Certo, mas para que isso serve num site de verdade?" O console.log é a ferramenta de depuração (em inglês, debug) número um dos programadores. Quando um botão não responde ou um valor aparece errado, a primeira reação de praticamente todo desenvolvedor é espalhar console.log pelo código para descobrir onde e por que algo saiu do esperado.
Um exemplo real: ao montar o carrinho de um site de compras, você usaria console.log(total) para conferir se a soma dos produtos está certa antes de mostrar o preço final para o cliente. É como revisar a conta na calculadora antes de falar o valor em voz alta.
O console tem irmãos úteis: console.warn() mostra um aviso (destacado em amarelo) e console.error() mostra um erro (em vermelho). Servem para dar destaque a mensagens importantes. Rode o exemplo abaixo e veja as três cores lado a lado:
// O console sabe destacar mensagens por importância:
console.log("Mensagem normal");
console.warn("Isto é um aviso"); // aparece em amarelo
console.error("Isto é um erro"); // aparece em vermelho
// E ele mostra qualquer tipo de valor, não só texto:
console.log("Número:", 42);
console.log("Isto é verdade?", 10 > 5);Repare nas cores: aviso em amarelo, erro em vermelho.
console.log("Ana") mostra o texto Ana. Já console.log(Ana), sem aspas, o JavaScript entende como o nome de uma variável chamada Ana e, se ela não existir, o código dá erro. Enquanto estamos lidando com texto, tudo vai entre aspas.
// Sua vez! Complete e clique em Rodar.
// 1. Mostre o seu nome (troque ... pelo seu nome):
console.log("...");
// 2. Descubra a sua idade (troque 2000 pelo seu ano de nascimento):
console.log(2026 - 2000);
// 3. Troque o console.log abaixo por console.warn e rode de novo:
console.log("Estou aprendendo JavaScript!");Complete aqui mesmo e clique em Rodar.