Sua dose diária de programação

Conceito, 3 exemplos e 3 exercícios: uma pequena conquista de cada vez.

✦   Lição

Seu primeiro programa

Um programa JavaScript é um arquivo de texto com extensão .js que o Node.js lê e executa de cima para baixo, uma instrução por vez. Para rodar, basta abrir o terminal na pasta do arquivo e digitar node ola.js: não há etapa de compilação separada.

JavaScript Fundamentos Iniciante 3 exemplos + 3 exercícios
42 lições publicadas 10 linguagens novas lições todo dia útil
JavaScript / Fundamentos

Seu primeiro programa

por Marlowe Prescott
Iniciante

Entenda o conceito

Um programa JavaScript é um arquivo de texto com extensão .js que o Node.js lê e executa de cima para baixo, uma instrução por vez. Para rodar, basta abrir o terminal na pasta do arquivo e digitar node ola.js: não há etapa de compilação separada.

A primeira ferramenta que todo programa usa é console.log. Ela recebe um ou mais valores, escreve tudo na saída padrão (o terminal) e termina com uma quebra de linha. Textos (strings) ficam entre aspas simples, duplas ou crases; números são escritos sem aspas, e o JavaScript faz as contas antes de imprimir.

Com const você dá nome a um valor para reutilizá-lo, e com template literals (texto entre crases) você insere valores e contas dentro do texto usando ${...}. Comentários começam com // e são ignorados na execução; use-os para explicar o porquê de cada parte.

↳ Pontos-chave
  • Rode um arquivo com node nome-do-arquivo.js; o código é executado de cima para baixo.
  • console.log imprime seus argumentos separados por espaço e pula uma linha no final.
  • Strings ficam entre aspas simples, duplas ou crases; números ficam sem aspas.
  • Template literals (entre crases) inserem valores e expressões no texto com ${...}.
  • JavaScript diferencia maiúsculas de minúsculas: console.log funciona, Console.Log não.

Do conceito à prática

3 exemplos para ver a ideia funcionando.

01Olá, mundo! e os primeiros valores

ola.js
// Primeiro programa: mostra mensagens no terminal.
// Rode com: node ola.js

// console.log escreve o texto e pula para a próxima linha
console.log('Olá, mundo!');
console.log('Bem-vindo ao JavaScript.');

// Textos podem usar aspas simples, duplas ou crases
console.log("Aspas duplas também funcionam.");
console.log(`Crases também.`);

// Uma chamada sem argumentos imprime uma linha em branco
console.log();

// Números são impressos como números, e a conta é feita antes
console.log(2 + 3);
console.log(10 * 4);

// Vários argumentos saem na mesma linha, separados por espaço
console.log('Resultado:', 7 - 2, 'pontos');
console.log('Fim do programa.');

Cada console.log gera uma linha no terminal, na ordem em que aparece no arquivo. O exemplo mostra os três tipos de aspas para textos, a linha em branco produzida por console.log() sem argumentos e as contas feitas antes da impressão: 2 + 3 sai como 5.

Quando há vários argumentos, como em console.log('Resultado:', 7 - 2, 'pontos'), o Node junta todos com um espaço entre eles. Isso é prático para misturar texto e números sem converter nada.

02Recibo da loja com constantes e template literals

recibo.js
// Recibo simples de uma loja, usando constantes e contas.

// const guarda um valor que não muda depois
const loja = 'Loja do Bairro';
const produto = 'Caderno';
const precoUnitario = 12.5;
const quantidade = 3;

// A conta é feita uma vez e guardada para reutilizar
const total = precoUnitario * quantidade;

console.log('==== ' + loja + ' ====');
console.log('Produto:', produto);
console.log('Quantidade:', quantidade);
console.log('Preço unitário:', precoUnitario);
console.log('Total:', total);

// Template literal: ${...} insere o valor dentro do texto
console.log(`Você levou ${quantidade} x ${produto} por R$ ${total}.`);

// Expressões também cabem dentro de ${...}
console.log(`Com mais um, pagaria R$ ${precoUnitario * (quantidade + 1)}.`);
console.log('Obrigado e volte sempre!');

Os dados do pedido ficam em constantes com nomes que explicam o que guardam, e o total é calculado uma única vez. Depois, o mesmo valor aparece em várias linhas sem repetir a conta.

As duas últimas linhas comparam as formas de montar texto: concatenação com + no cabeçalho e template literal com ${...} no resumo. Dentro das chaves cabe qualquer expressão, como precoUnitario * (quantidade + 1), e o resultado entra direto na frase.

03Boletim alinhado com padEnd, padStart e toFixed

boletim.js
// Boletim formatado no terminal, com alinhamento e casas decimais.

const aluna = 'Marina Souza';
const turma = '7º A';

const notaPortugues = 8.5;
const notaMatematica = 7;
const notaCiencias = 9.5;

// Parênteses garantem que a soma venha antes da divisão
const media = (notaPortugues + notaMatematica + notaCiencias) / 3;

console.log(`Aluna: ${aluna}`);
console.log(`Turma: ${turma}`);
console.log('-'.repeat(24));

// padEnd completa o texto com espaços até o tamanho pedido;
// toFixed(1) mostra o número com uma casa decimal
console.log(`${'Português'.padEnd(14)}${notaPortugues.toFixed(1).padStart(10)}`);
console.log(`${'Matemática'.padEnd(14)}${notaMatematica.toFixed(1).padStart(10)}`);
console.log(`${'Ciências'.padEnd(14)}${notaCiencias.toFixed(1).padStart(10)}`);

console.log('-'.repeat(24));
console.log(`${'Média'.padEnd(14)}${media.toFixed(2).padStart(10)}`);

// console.error escreve na saída de erro (útil para avisos)
console.error('Aviso: boletim gerado em modo de teste.');

Para a saída parecer uma tabela, cada linha usa a mesma largura: padEnd(14) completa o nome da matéria com espaços à direita e padStart(10) alinha a nota pela direita. toFixed(1) garante uma casa decimal, então 7 aparece como 7.0, e a média usa toFixed(2).

A última linha usa console.error, que escreve na saída de erro em vez da saída padrão. No terminal as duas aparecem juntas, mas um redirecionamento como node boletim.js > boletim.txt grava só o boletim no arquivo e deixa o aviso na tela.


Agora é com você

Tente resolver no rascunho antes de abrir a resposta. Os códigos não são executados nesta página.

01Ficha de leitor da bibliotecaFácil

Escreva um programa que imprima a ficha de um leitor da biblioteca, com o nome da biblioteca, o nome do leitor, a quantidade de livros emprestados, uma linha em branco e um aviso de devolução.

↳ Requisitos
  • Usar apenas console.log para gerar a saída, uma chamada por linha.
  • Passar a quantidade de livros (2) como um número separado do texto, no segundo argumento de console.log.
  • Gerar a linha em branco com console.log() sem argumentos.
  • A saída deve ser idêntica à saída esperada.
código inicial
// Ficha de leitor da biblioteca
console.log('Biblioteca Municipal');
// imprima o leitor, os livros emprestados, a linha em branco e o aviso
saída esperada
Biblioteca Municipal
Leitor: Ana Lima
Livros emprestados: 2

Devolva até sexta-feira.
Ver dica

Lembre que console.log coloca um espaço entre cada argumento que recebe, então o texto não precisa terminar com espaço.

Ver resposta
// Ficha de leitor da biblioteca
console.log('Biblioteca Municipal');
console.log('Leitor: Ana Lima');
console.log('Livros emprestados:', 2);
console.log();
console.log('Devolva até sexta-feira.');

Passo a passo

  1. A primeira linha é um comentário: começa com // e o Node ignora tudo até o fim da linha. Serve para quem lê o código.
  2. console.log('Biblioteca Municipal') imprime o texto exatamente como está entre as aspas e pula para a linha seguinte.
  3. A linha do leitor é um texto único; os dois-pontos e o espaço fazem parte da string, por isso aparecem na saída.
  4. console.log('Livros emprestados:', 2) recebe dois argumentos: um texto e um número. O Node junta os dois com um espaço no meio.
  5. console.log() sem argumentos imprime só a quebra de linha, criando a linha em branco pedida.
  6. A última chamada mostra o aviso de devolução e encerra o programa, porque não há mais instruções.

Por que funciona

Um programa JavaScript no Node é executado de cima para baixo, uma instrução por vez. Cada console.log escreve uma linha na saída padrão, então a ordem das chamadas no arquivo é a ordem das linhas no terminal. Nenhuma variável é necessária: o objetivo aqui é dominar a ferramenta básica de saída.

Erros comuns

  • Esquecer de fechar as aspas: console.log('Leitor: Ana Lima); gera SyntaxError: Invalid or unexpected token e nada é impresso. Feche a string com o mesmo tipo de aspa que a abriu.
  • Escrever Console.log: JavaScript diferencia maiúsculas de minúsculas, e o resultado é ReferenceError: Console is not defined. O nome certo é console, tudo minúsculo.
  • Colocar o número dentro do texto e também como argumento: console.log('Livros emprestados: 2', 2) imprime Livros emprestados: 2 2. Use um ou outro.
  • Usar console.log('') achando que é igual a não passar nada: funciona, mas console.log() deixa a intenção mais clara.

Outra forma de resolver

Dá para usar uma única chamada com \n para quebrar as linhas: console.log('Biblioteca Municipal\nLeitor: Ana Lima\nLivros emprestados: 2\n\nDevolva até sexta-feira.'). É útil para blocos de texto fixos, mas fica mais difícil de ler e de alterar linha a linha.

Saída esperada

Biblioteca Municipal
Leitor: Ana Lima
Livros emprestados: 2

Devolva até sexta-feira.

02Receita de panqueca para mais porçõesMédio

Uma receita de panqueca para 2 porções usa 120 g de farinha, 200 ml de leite e 1 ovo. Escreva um programa que calcule e imprima os ingredientes para 6 porções.

↳ Requisitos
  • Guardar os dados da receita e o número de porções desejado em constantes com const.
  • Calcular o fator de multiplicação a partir das porções da receita base, sem escrever o 3 direto no código.
  • Montar cada linha com template literals, fazendo a conta dentro de ${...}.
  • A saída deve ser idêntica à saída esperada.
código inicial
const receita = 'Panqueca';
const porcoesBase = 2;
const farinha = 120; // gramas
const leite = 200; // mililitros
const ovos = 1;
const porcoes = 6;

// calcule o fator e imprima a lista de ingredientes
saída esperada
Receita: Panqueca (6 porções)
Farinha: 360 g
Leite: 600 ml
Ovos: 3
Ver dica

Descubra quantas vezes a receita base cabe nas porções desejadas e multiplique cada ingrediente por esse valor.

Ver resposta
// Ingredientes de uma receita de panqueca para 2 porções
const receita = 'Panqueca';
const porcoesBase = 2;
const farinha = 120; // gramas para 2 porções
const leite = 200; // mililitros para 2 porções
const ovos = 1;

// Quantas porções queremos fazer agora
const porcoes = 6;
const fator = porcoes / porcoesBase;

console.log(`Receita: ${receita} (${porcoes} porções)`);
console.log(`Farinha: ${farinha * fator} g`);
console.log(`Leite: ${leite * fator} ml`);
console.log(`Ovos: ${ovos * fator}`);

Passo a passo

  1. As constantes receita, porcoesBase, farinha, leite e ovos guardam os dados da receita original. Com const, o valor não pode ser trocado por engano mais adiante.
  2. Os comentários ao lado de farinha e leite registram a unidade, porque o número sozinho não diz se são gramas ou xícaras.
  3. porcoes é a quantidade desejada agora; mudar só esse número recalcula toda a lista.
  4. fator = porcoes / porcoesBase descobre quantas vezes a receita precisa ser multiplicada (6 / 2 = 3). Calcular uma vez evita repetir a divisão em cada linha.
  5. O template literal ${receita} (${porcoes} porções) monta o título inserindo os valores no meio do texto, sem precisar de +.
  6. Em ${farinha * fator}, a conta é feita dentro das chaves e o resultado entra na string já pronto.

Por que funciona

Template literals (texto entre crases) avaliam qualquer expressão colocada em ${...} e convertem o resultado em texto. Assim, os dados ficam em constantes com nomes claros, as contas ficam no lugar onde o valor é mostrado e cada console.log produz uma linha da lista. Como 120, 200 e 1 multiplicados por 3 dão números inteiros, o JavaScript os imprime sem casas decimais.

Erros comuns

  • Usar aspas simples em vez de crases: console.log('Farinha: ${farinha * fator} g') imprime o texto literal ${farinha * fator}, sem fazer a conta. Só a crase ativa a interpolação.
  • Multiplicar pelo número de porções: farinha * porcoes dá 720 g, o dobro do certo, porque a receita base já serve 2. Divida pela base antes, como em fator.
  • Tentar mudar uma constante: porcoes = 8; depois da declaração gera TypeError: Assignment to constant variable.. Troque o valor na própria declaração ou use let se ele precisar mudar.

Outra forma de resolver

Sem template literals, a concatenação com + também funciona: console.log('Farinha: ' + farinha * fator + ' g'). A multiplicação acontece antes da soma por causa da precedência, mas com várias partes o código fica mais confuso; prefira as crases quando misturar texto e valores.

Saída esperada

Receita: Panqueca (6 porções)
Farinha: 360 g
Leite: 600 ml
Ovos: 3

03Placar final alinhadoDesafio

Três jogadores terminaram uma partida: Bruno com 42 pontos, Carla com 57 e Davi com 8. Imprima um placar em forma de tabela com nomes alinhados à esquerda, pontos alinhados à direita, o total e a média com uma casa decimal.

↳ Requisitos
  • Usar padEnd(12) nos nomes e padStart(8) nos pontos, para que toda linha da tabela tenha 20 caracteres.
  • Gerar as linhas de = com repeat, a partir de uma constante com a largura da tabela.
  • Calcular o total uma vez e mostrar a média com toFixed(1).
  • A saída deve ser idêntica à saída esperada, incluindo os espaços do título centralizado com padStart(16).
código inicial
const jogador1 = 'Bruno';
const jogador2 = 'Carla';
const jogador3 = 'Davi';

const pontos1 = 42;
const pontos2 = 57;
const pontos3 = 8;

// calcule o total e imprima o placar alinhado
saída esperada
    PLACAR FINAL
====================
Bruno             42
Carla             57
Davi               8
====================
Total            107
Média: 35.7 pontos
Ver dica

padStart é um método de strings: converta o número em texto antes de alinhá-lo.

Ver resposta
// Placar final de uma partida de jogo de tabuleiro
const jogador1 = 'Bruno';
const jogador2 = 'Carla';
const jogador3 = 'Davi';

const pontos1 = 42;
const pontos2 = 57;
const pontos3 = 8;

const total = pontos1 + pontos2 + pontos3;
const largura = 20;

console.log('PLACAR FINAL'.padStart(16));
console.log('='.repeat(largura));
// padEnd alinha os nomes à esquerda; padStart alinha os pontos à direita
console.log(`${jogador1.padEnd(12)}${String(pontos1).padStart(8)}`);
console.log(`${jogador2.padEnd(12)}${String(pontos2).padStart(8)}`);
console.log(`${jogador3.padEnd(12)}${String(pontos3).padStart(8)}`);
console.log('='.repeat(largura));
console.log(`${'Total'.padEnd(12)}${String(total).padStart(8)}`);
console.log(`Média: ${(total / 3).toFixed(1)} pontos`);

Passo a passo

  1. Cada jogador e cada pontuação ficam em uma constante própria, com nomes numerados para mostrar a correspondência entre nome e pontos.
  2. total soma as três pontuações uma única vez; o valor é usado na linha do total e no cálculo da média.
  3. largura = 20 define o tamanho da tabela. Os separadores '='.repeat(largura) usam esse número, e as colunas (12 + 8) somam o mesmo valor.
  4. 'PLACAR FINAL'.padStart(16) coloca 4 espaços antes do título de 12 letras, deixando-o próximo do centro da tabela.
  5. jogador1.padEnd(12) completa o nome com espaços à direita até 12 caracteres, alinhando a primeira coluna à esquerda.
  6. String(pontos1).padStart(8) converte o número em texto e completa com espaços à esquerda, alinhando os números pela direita. A conversão é necessária porque padStart é um método de strings.
  7. (total / 3).toFixed(1) faz a divisão e devolve um texto com exatamente uma casa decimal: 107 / 3 = 35,666... vira 35.7.

Por que funciona

A tabela fica alinhada porque toda linha tem o mesmo comprimento: 12 caracteres para o nome e 8 para os pontos. padEnd e padStart não cortam o texto, só acrescentam espaços até o tamanho pedido, então nomes e números de tamanhos diferentes ocupam sempre a mesma largura. O template literal junta as duas colunas, e cada console.log imprime uma linha da tabela.

Erros comuns

  • Chamar padStart direto no número: pontos1.padStart(8) gera TypeError: pontos1.padStart is not a function. Converta antes com String(pontos1) ou use ${pontos1} dentro de outro template.
  • Esquecer os parênteses na média: total / 3.toFixed(1) nem chega a rodar (SyntaxError), e pontos1 + pontos2 + pontos3 / 3 divide só o último valor. Agrupe a conta inteira antes de formatar.
  • Usar tamanhos diferentes em cada linha: padEnd(10) em uma linha e padEnd(12) em outra desalinham a coluna. Mantenha os mesmos números em todas as linhas.
  • Achar que toFixed devolve número: o resultado é uma string; para fazer contas com ele depois, converta de volta com Number(...).

Outra forma de resolver

Para muitas linhas, console.table desenha uma tabela pronta: console.table([{ jogador: 'Bruno', pontos: 42 }, { jogador: 'Carla', pontos: 57 }]). É ótimo para inspecionar dados durante o desenvolvimento, mas o formato (bordas e coluna de índice) é decidido pelo Node, então não serve quando a saída precisa ser exatamente uma.

Saída esperada

    PLACAR FINAL
====================
Bruno             42
Carla             57
Davi               8
====================
Total            107
Média: 35.7 pontos

Últimas lições

Ver o arquivo completo →