Carregando...

Funções

Loops controlam quando o trabalho se repete. Funções respondem outra pergunta: onde guardar um bloco de trabalho para executar depois pelo nome? Uma função é uma receita com nome. Você a define uma vez. Você a chama quando precisa desses passos. Copiar e colar perde força; o nome fica.

O que é uma função?

Em JavaScript você declara com a palavra function, um nome, parênteses () e um corpo entre { }. Nada do corpo roda até você chamar a função — escreva o nome e (). Pense: «empacote os passos e depois aperte play.»

Partes de uma função

📊 Anatomia de uma função

Parte Papel Encaixe do dia a dia
palavra function inicia a declaração «aqui vem uma receita com nome»
nome assim você chama depois sayHi, showTotal — verbos claros ajudam
() após o nome ponto de chamada / depois entradas () vazio ainda significa «execute agora»
corpo { } passos em cada chamada logs, contas, atualizar a página
chamada name() executa o corpo agora reutilizar sem reescrever o corpo

Só definir guarda a receita. Chamar executa. Se não chamar, o corpo fica quieto — é normal na linguagem, não um bug.

Declarar e chamar

javascript 
function sayHi() {
console.log("Hi");
}
sayHi();

Defina e depois chame

As três primeiras linhas definem sayHi. A última chama. Você deve ver Hi no console. Sem sayHi(); a função existe mas não roda.

Chamar a mesma função duas vezes

javascript 
function beep() {
console.log("beep");
}
beep();
beep();

Reutilize um único corpo

Uma definição, duas chamadas — beep imprime duas vezes. Essa é a ideia: escreva os passos uma vez e execute quando a história precisar desse som. Mudar o corpo depois atualiza todos os pontos que usam esse nome.

Vários passos no corpo

javascript 
function showReady() {
console.log("loading");
console.log("ready");
}
showReady();

O corpo pode ter vários passos

Numa chamada, as duas linhas rodam em ordem: loading, depois ready. Uma função não se limita a uma instrução — coloque a mini-tarefa inteira entre chaves.

Trabalho local dentro de uma função

javascript 
function greetCity() {
let city = "Tehran";
let line = "Hello from " + city;
console.log(line);
}
greetCity();

O trabalho local fica na receita

city e line vivem dentro de greetCity. Cada chamada monta a mensagem e registra Hello from Tehran. Nesse padrão você não precisa desses nomes fora — o gatilho é a chamada.

Preencher um elemento da página

javascript 
function fillOut() {
let box = document.getElementById("out");
box.textContent = "Function ran";
}
fillOut();

Execute trabalho para a página

Mesma ideia das lições de DOM: ache o elemento, defina textContent. Embrulhar numa função permite que um botão, um timer ou um script chame fillOut() quando a página deve atualizar — um nome, um trabalho.

Mostre uma função na página

Defina uma função que escreva uma linha curta num parágrafo e chame-a no script para o visitante ver o resultado.

Chamada de função na página

html 
<!DOCTYPE html>
<html>
<head>
<title>functions — page</title>
</head>
<body>
<p id="msg">…</p>
<script>
function showMsg() {
let box = document.getElementById("msg");
box.textContent = "Hello from a function";
}
showMsg();
</script>
</body>
</html>

A página mostra Hello from a function. O corpo de showMsg escreveu no DOM; a chamada embaixo apertou play. Mude a string, atualize e leia a nova linha. A próxima lição aprofunda parâmetros — valores que você passa entre parênteses na chamada.

Experimente você

  1. Declare function hello() que registre "hello" e chame uma vez.
  2. Chame a mesma função uma segunda vez sem reescrever o corpo.
  3. Faça uma função cujo corpo registre duas palavras diferentes em ordem.
  4. Dentro de uma função, monte uma string com let e registre.
  5. Escreva uma função que ponha #out em "ok" (ou use o id da demo).
  6. Na demo HTML mude só a mensagem, atualize e leia o parágrafo.

Erros comuns

  • Definir a função e esquecer de chamar com ()
  • Escrever sayHi sem () — nomeia a função, não executa o corpo
  • Copiar e colar as mesmas linhas em vez de chamar uma função duas vezes
  • Colocar o trabalho fora de { } e esperar que o nome da função o «possua»
  • Misturar esta lição com parâmetros/return — isso vem depois; aqui definir + chamar

Resumo

  • Uma função empacota passos sob um nome
  • Declare com function name() { … }
  • Chame com name() para executar o corpo
  • Um corpo, muitas chamadas — isso é reutilizar
  • O corpo pode ter várias instruções e trabalho local com let
  • Atualizações de página cabem numa função que você chama quando precisa
  • Próximo: parâmetros — passar valores na chamada

🧠 Teste Seu Conhecimento

Pronto para Começar

Teste Seu Conhecimento

Desafie-se com este questionário interativo e veja o quão bem você entende o tópico

❓
8
Perguntas
🎯
70%
Para Passar
♾️
∞
Tempo
🔄
∞
Tentativas

📝 Instruções

  • Leia cada pergunta cuidadosamente
  • Selecione a melhor resposta para cada pergunta
  • Você pode refazer o quiz quantas vezes quiser
  • Seu progresso será mostrado no topo
Tópico 27 de 29
Javascript Tutorial