Decisões, loops e funções

Trabalhe numa cópia da pasta inicio/ desta etapa. Ela já abre ou executa com as instruções do README. Leia o código, mude uma coisa e anote sua previsão antes de recarregar. Compare com a referência na pasta da etapa. Se nada mudar, confira a extensão do arquivo, o arquivo salvo e o caminho aberto. Blocos adicionais do capítulo são experiências separadas; a pasta de referência contém o programa completo desta etapa.

A Biblioteca da Ribeira é um acervo comunitário fictício no bairro da Ribeira, Recife. Neste capítulo a página responde: está aberto agora? O relógio é o deste computador. A casa fictícia abre das 9h às 17h, terça a sábado.

O exemplo está em pacote de exemplos/14-decisoes-loops-e-funcoes/. Abra index.html. Leia o status. Depois abra horario.js.

Ciclo: ler → copiar → mudar uma coisa → prever → recarregar → conferir.

O que você vai aprender

• Escolher um caminho com if / else.
• Repetir com for.
• Agrupar passos numa function.
• Devolver um valor com return.
• Ler o horário da biblioteca no exemplo pronto.

Decidir com if

if testa uma condição. Se for verdadeira, o bloco roda. else cobre o resto.

const hora = 10;
if (hora >= 9 && hora < 17) {
  console.log("aberto");
} else {
  console.log("fechado");
}

&& exige os dois lados verdadeiros. >= é “maior ou igual”. Domingo no JavaScript é getDay() === 0. Segunda é 1. Sábado é 6.

A função do exemplo junta dia e hora:

function aberto(data) {
  const dia = data.getDay();
  const hora = data.getHours();
  const diaUtil = dia >= 2 && dia <= 6;
  return diaUtil && hora >= 9 && hora < 17;
}

Terça é 2. Sábado é 6. return devolve verdadeiro ou falso. Quem chama a função não precisa repetir a conta.

Erro comum: escrever if (hora = 9). Um igual atribui. Comparação é ===. O console pode não gritar. O horário fica errado.

Loops com for

for repete com um contador. Use quando a quantidade é conhecida.

const dias = ["domingo", "segunda", "terça", "quarta", "quinta", "sexta", "sábado"];
for (let i = 0; i < dias.length; i += 1) {
  console.log(dias[i]);
}

Três peças: início (i = 0), condição (i < dias.length), passo (i += 1). Sem o passo, o loop não termina.

No exemplo, cada volta cria um li e cola na lista:

const lista = document.getElementById("lista");
for (let i = 0; i < dias.length; i += 1) {
  const item = document.createElement("li");
  item.textContent = dias[i] + (i >= 2 && i <= 6 ? " — 9h às 17h" : " — fechado");
  lista.appendChild(item);
}

O ? : é um if curto: se o dia for terça a sábado, mostra o horário; senão, “fechado”.

Mude uma coisa. Troque 17 por 18 nas duas ocorrências de horario.js. Preveja “aberto” até as 18h. Recarregue. Confira o texto da lista e o status.

Funções

Função é um pacote de passos com nome. Você chama. Os parâmetros entram. O return sai.

function saudacao(nome) {
  return "Olá, " + nome + ".";
}
const texto = saudacao("Lina");

Sem return, a função devolve undefined. No horário, aberto(agora) precisa de verdadeiro ou falso para escolher a frase.

Não copie o mesmo if em três lugares. Extraia uma função. O exemplo já faz isso com aberto.

O arquivo completo

horario.js:

function aberto(data) {
  const dia = data.getDay();
  const hora = data.getHours();
  const diaUtil = dia >= 2 && dia <= 6;
  return diaUtil && hora >= 9 && hora < 17;
}
const agora = new Date();
document.getElementById("status").textContent = aberto(agora)
  ? "Neste relógio, a casa estaria aberta."
  : "Neste relógio, a casa estaria fechada.";
const dias = ["domingo", "segunda", "terça", "quarta", "quinta", "sexta", "sábado"];
const lista = document.getElementById("lista");
for (let i = 0; i < dias.length; i += 1) {
  const item = document.createElement("li");
  item.textContent = dias[i] + (i >= 2 && i <= 6 ? " — 9h às 17h" : " — fechado");
  lista.appendChild(item);
}

new Date() é agora neste computador. Se o relógio da máquina estiver errado, o status segue o relógio errado. A biblioteca fictícia não consulta a internet.

Erros que o loop esconde

Se i <= dias.length (com igual), a última volta pede um índice que não existe. A lista ganha um item undefined.

Se esquecer appendChild, o loop roda e a página continua vazia. O console pode ficar limpo.

Se chamar aberto() sem passar a data, data.getDay quebra. O console aponta a linha do getDay.

Disco, 127.0.0.1 e publicação

No disco, horario.js calcula com o relógio local. No navegador você vê o status. Servir em 127.0.0.1 não muda a conta: ainda é o mesmo computador.

python -m http.server 8080 --bind 127.0.0.1

Publicar o horário “ao vivo” num site público exigiria um relógio combinado. Este volume não pede isso. Estude na sua máquina. Não use dados reais de funcionamento de uma biblioteca de verdade.

Atividades

1. A função aberto devolve o quê? Quem usa esse valor na página?
2. Por que o for do exemplo compara i < dias.length e não i <= dias.length?
3. Você muda o fechamento de 17 para 18 só na função aberto e esquece a lista. O que fica incoerente?

Respostas comentadas

1. Verdadeiro ou falso. O textContent do #status escolhe a frase com esse retorno.
2. Os índices válidos vão de 0 até length - 1. Com <= a última volta sai do array.
3. O status pode dizer aberto às 17h30, mas a lista ainda escreve “9h às 17h”. As duas ocorrências precisam do mesmo número.

O arquivo completo

Referência do exemplo 14-decisoes-loops-e-funcoes, reproduzida aqui para que você possa conferir sem sair da página.

horario.js

function aberto(data) {
  const dia = data.getDay();
  const hora = data.getHours();
  const diaUtil = dia >= 2 && dia <= 6;
  return diaUtil && hora >= 9 && hora < 17;
}
const agora = new Date();
document.getElementById("status").textContent = aberto(agora)
  ? "Neste relógio, a casa estaria aberta."
  : "Neste relógio, a casa estaria fechada.";
const dias = ["domingo", "segunda", "terça", "quarta", "quinta", "sexta", "sábado"];
const lista = document.getElementById("lista");
for (let i = 0; i < dias.length; i += 1) {
  const item = document.createElement("li");
  item.textContent = dias[i] + (i >= 2 && i <= 6 ? " — 9h às 17h" : " — fechado");
  lista.appendChild(item);
}