Decisões e repetição

O programa da oficina não corre sempre em linha reta. Às vezes ele escolhe um caminho. Às vezes ele repete um passo. Este capítulo ensina if, comparação e laços. O exemplo está em exemplos/14-decisoes/.

Abra index.html, depois o console com F12. Os textos desta etapa aparecem lá, não no meio da página.

Trabalhe na cópia inicio desta etapa. Leia e digite o código indicado; mude apenas uma coisa. Antes de recarregar, escreva o resultado que espera. Depois compare com a referência completa ao lado. Se algo falhar, confira primeiro o arquivo salvo e o caminho aberto.

O que você vai aprender

• Escolher com if, else if e else.
• Distinguir =, == e ===.
• Usar !== para “diferente”.
• Repetir com while e for.
• Incrementar com i++ e +=.
• Contar a partir de 0 e reconhecer o laço infinito.

Se, senão se, senão

if pergunta. Se a resposta for verdadeira, o bloco entre { } corre. else é o outro caminho. else if testa uma segunda pergunta.

const vagasLivres = 3;

if (vagasLivres === 0) {
  console.log("A xilogravura lotou.");
} else if (vagasLivres === 1) {
  console.log("Resta uma vaga.");
} else {
  console.log("Ainda há vagas na oficina.");
}

A pergunta fica entre parênteses. O computador avalia e escolhe um bloco. Os outros são pulados.

Você pode omitir o else. Sem ele, se a pergunta for falsa, nada acontece.

Pare e experimente. Mude vagasLivres para 0. Preveja a frase de lotação. Recarregue e leia o console.

Erro comum: esquecer as chaves e deixar duas linhas “dentro” do if. Só a primeira pertence à decisão.

Igual, atribuir e o == solto

Um = sozinho atribui. const livre = true lê: livre recebe verdadeiro.

Três iguais === comparam. 2 + 2 === 4 pergunta se os dois lados são o mesmo valor e o mesmo tipo.

const inscritos = 4;

if (inscritos === 4) {
  console.log("Turma completa da cerâmica.");
}

Dois iguais == também comparam, mas convertem tipos no meio do caminho. "4" == 4 dá verdadeiro. "4" === 4 dá falso. Neste volume use só ===.

!== pergunta se é diferente. oficina !== "xilo" é verdadeiro quando o texto não é xilo.

const oficina = "ceramica";

if (oficina !== "xilo") {
  console.log("Hoje não é dia de xilogravura.");
}

Números também aceitam >, >=, < e <=.

Pare e experimente. Troque === por = dentro do if. Preveja um resultado estranho ou um aviso. Restaure os três iguais.

Erro comum: escrever if (vagas = 0). Isso atribui zero e a pergunta deixa de ser pergunta.

Enquanto e para

while repete enquanto a pergunta for verdadeira.

let cadeiras = 0;

while (cadeiras < 4) {
  cadeiras = cadeiras + 1;
}

console.log(cadeiras);

Quando cadeiras chega a 4, 4 < 4 é falso e o laço para. O console mostra 4.

Somar 1 tem atalhos. Os dois de baixo fazem o mesmo trabalho neste volume:

cadeiras += 1;
cadeiras++;

+= também aceita outros números: cadeiras += 2 soma dois. ++ soma um.

for junta início, pergunta e passo num só lugar.

let visitantesNaFila = 0;

for (let i = 0; i < 5; i++) {
  visitantesNaFila++;
}

console.log(visitantesNaFila);

i é o contador. A comunidade usa essa letra. O primeiro valor é 0. Em programação o quinto item de uma fila está no índice 4.

A figura mostra a escolha e a repetição. Use-a para reler o if e o for.

Pare e experimente. No for, troque i < 5 por i <= 5. Preveja um visitante a mais. Recarregue e confira.

Erro comum: começar o for em 1 e usar <= 5 sem perceber que a conta mudou. Decida o ponto de partida e a pergunta juntos.

O laço que não termina

Se a pergunta do while nunca vira falsa, o programa trava. Isso é laço infinito.

let fila = 1;

while (fila > 0) {
  fila = fila + 1;
}

fila só cresce. A condição fila > 0 continua verdadeira. O console trava e a aba pode congelar.

Não rode esse bloco. Ele está aqui para você reconhecer o erro. Se a página travar, feche a aba.

A regra prática: o laço precisa mudar a variável da pergunta. Sem isso, ele não sai.

Pare e experimente. No while das cadeiras, escreva cadeiras < 4 e some cadeiras dentro do bloco. Confira que o número para. Não copie o exemplo infinito.

Erro comum: incrementar uma variável e testar outra. O teste nunca muda e o laço não acaba.

Atividades

1. Qual a diferença entre = e ===?
2. Por que este volume evita ==?
3. No for (let i = 0; i < 3; i++), quais valores i assume?
4. O que torna um while infinito?

Respostas comentadas

1. = guarda um valor no nome. === pergunta se os dois lados são iguais em valor e em tipo.
2. == converte tipos. "4" == 4 passa e esconde um erro. === mostra a diferença.
3. 0, depois 1, depois 2. Quando i vira 3, a pergunta falha e o laço para.
4. A pergunta nunca fica falsa, em geral porque a variável testada não muda na direção certa.

Referências

• if…else
• Igualdade estrita
• while
• for

O arquivo completo

Referência do exemplo 14-decisoes, 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 content="width=device-width, initial-scale=1" name="viewport"/>
<title>Decisões e loops</title>
<link href="lab.css" rel="stylesheet"/>
<style>body{overflow-wrap:anywhere}img,input,textarea,select,iframe{max-width:100%}img{height:auto}fieldset,.cartao{min-width:0}pre{max-width:100%;overflow:auto}:focus-visible{outline:3px solid #005fcc;outline-offset:3px}.atalho-conteudo{position:absolute;left:.5rem;top:-6rem;background:white;color:#172f50;padding:.5rem;z-index:999}.atalho-conteudo:focus{top:.5rem}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}</style></head>
<body><a class="atalho-conteudo" href="#conteudo">Pular para o conteúdo</a><main id="conteudo" tabindex="-1">
<h1>Decisões e repetição</h1>
<p>Abra o console. Troque o número de inscritas no arquivo e recarregue.</p>

</main><script src="script.js"></script></body>
</html>

script.js

const vagasLivres = 3;

if (vagasLivres === 0) {
  console.log("A xilogravura lotou.");
} else if (vagasLivres === 1) {
  console.log("Resta uma vaga.");
} else {
  console.log("Ainda há vagas na oficina.");
}

const inscritos = 4;

if (inscritos === 4) {
  console.log("Turma completa da cerâmica.");
}

const oficina = "ceramica";

if (oficina !== "xilo") {
  console.log("Hoje não é dia de xilogravura.");
}

let cadeiras = 0;

while (cadeiras < 4) {
  cadeiras = cadeiras + 1;
}

console.log(cadeiras);

let visitantesNaFila = 0;

for (let i = 0; i < 5; i++) {
  visitantesNaFila++;
}

console.log(visitantesNaFila);