Funções simples no console

Função é um bloco com nome. Você escreve uma vez e chama quando precisar — no console ou num clique.

Trabalhe sobre uma cópia da pasta inicio do exemplo correspondente. Leia, digite, mude uma coisa, preveja o resultado, recarregue e confira. A referência completa fica na raiz da pasta do exemplo, no pacote anexo.

O que você pratica

• O que falta para executar o corpo de saudar?
• Para que serve return?
• Mude só o nome passado ao botão. O que deve mudar na tela?

Declarar e chamar

function saudar(nome) {
  const texto = `Olá, ${nome}. O ateliê abre às 14h.`;
  console.log(texto);
  return texto;
}

No console: saudar("Lia"). O parâmetro nome recebe "Lia".

Pare e experimente. Chame saudar("Caio"). Preveja a frase. Confira no console e no painel da página.

return devolve valor

Sem return, a função devolve undefined. Com return, você pode guardar o resultado:

const msg = saudar("Rita");

Erro comum: esquecer os parênteses na chamada: saudar sozinho não executa o bloco.

Botão que chama a função

No exemplo, o botão chama saudar("Lia") e mostra o retorno na página. O console continua sendo o espelho.

Ler o exemplo completo

A referência desta etapa usa app.js, index.html, styles.css. Abra primeiro o resultado pronto e identifique onde acontece declarar e chamar. Depois compare o mesmo ponto com a pasta inicio. Essa comparação mostra exatamente o que você precisa escrever, sem esconder partes indispensáveis do programa.

Diagnóstico guiado

Se o resultado não aparecer, confirme o arquivo aberto, salve a alteração e recarregue. Em seguida, abra o Console: leia a primeira mensagem de erro, confira o nome do arquivo e a linha indicada. Quando houver fetch, sirva a pasta apenas em 127.0.0.1; abrir por file:// não reproduz o pedido HTTP.

Critério de avanço

Avance quando conseguir explicar o papel de inicio, realizar uma mudança pequena e restaurar o exemplo sem copiar a resposta comentada.

Atividades

1. O que falta para executar o corpo de saudar?
2. Para que serve return?
3. Mude só o nome passado ao botão. O que deve mudar na tela?

Respostas comentadas

Só abra depois de tentar.

Atividade 1. Os parênteses na chamada: saudar("…").

Atividade 2. Devolver um valor para quem chamou a função.

Atividade 3. A frase exibida, porque o parâmetro mudou.

Exemplo deste capítulo: pacote de exemplos/02-funcoes-console/.

O arquivo completo

Referência do exemplo 02-funcoes-console, reproduzida aqui para que você possa conferir sem sair da página.

index.html

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Funções simples no console — Ateliê do Marco Zero</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <a class="skip" href="#conteudo">Ir para o conteúdo</a>
  <header>
    <p class="tag">Ateliê do Marco Zero · Recife</p>
    <h1>Funções simples no console</h1>
  </header>
  <main id="conteudo">
    <p>Funções guardam um bloco de passos. No console, chame <code>saudar("Lia")</code>.</p>
    <div class="painel"><pre class="saida" id="saida">Aguardando chamada…</pre></div>
    <button type="button" id="btn">Chamar saudar("Lia")</button>

  </main>
  <footer>
    <p>Material de estudo. Conteúdo fictício. Servidor só em 127.0.0.1.</p>
  </footer>
  <script src="app.js"></script>
</body>
</html>

app.js

function saudar(nome) {
  const texto = `Olá, ${nome}. O ateliê abre às 14h.`;
  console.log(texto);
  return texto;
}

const saida = document.querySelector("#saida");
document.querySelector("#btn").addEventListener("click", () => {
  saida.textContent = saudar("Lia");
});

console.log("Função saudar pronta. Chame saudar(\"Caio\") no console.");