4.1. Repetição com variável de controle: laços for

A sintaxe do comando for é composta de três instruções, que definem:

1. o valor inicial da variável de controle;
2. a condição que determina se a repetição deve ou não continuar;
3. o incremento ou decremento da variável de controle.

 

A Figura 4.1 destaca a sintaxe de um comando for com valores de exemplo atribuídos a uma variável de controle i.

 

 

Entre as chaves {} devem ser inseridos os comandos que serão executados repetidas vezes. O incremento i = i + 1 pode ser abreviado por i++. A repetição é controlada por uma variável, que, no exemplo da Figura 4.1, inicia em 1 e aumenta até 10. Outros valores, porém, podem ser indicados, como a variável de controle iniciar em 10 e decrescer até 1. Nesse último caso, utiliza-se i = i – 1, ou i – -, na terceira instrução.

Poderíamos comparar o loop executado pelo comando for a um maratonista per­correndo as voltas de uma pista de atletismo. Na execução do for, quando se realiza uma volta completa, o valor da variável é incrementado e essa sequência de passos é repetida até o final. O maratonista realiza um processo semelhante, pois, ao passar pelo ponto de partida, tem o seu número de voltas incrementado em 1. Os loops do for contêm, na sua variável i, o valor indicativo da volta sendo realizada. A Figura 4.2 ilustra o funcionamento de um loop for, que contém inclusive uma condição que avalia o valor da variável i, retornando verdadeiro nas voltas de número par.

 

 

Vamos continuar nas ilustrações sobre o funcionamento do comando for, pois entender os passos executados por esse comando é fundamental para a criação das estruturas de repetição. Observe a numeração inserida nas instruções que compõem o for exibidas na Figura 4.3.

 

 

A sequência de execução das instruções é a seguinte: 1 e 2 (executa), 3 e 2 (executa), 3 e 2 (executa), …. (segue 3 e 2 até a condição ficar falsa).

Para facilitar a compreensão do que ocorre passo a passo na execução desse comando em um programa, vamos analisar o trecho de código a seguir.

 

var nuneros = "";
for (var i = l;i<4;i = i + l){
nuneros = nuneros + i + "
}
outResposta.textContent = nuneros;

 

Após a variável nuneros ser declarada e inicializada, as seguintes operações são realizadas pelo laço for:

1. A variável i é declarada e recebe o valor 1.
2. O teste condicional é realizado (i < 4) e retorna verdadeiro.
3. Portanto, o comando do laço é executado: o valor de i (1) é atribuído à variável nuneros, que recebe ela mesmo + i, ou seja, nuneros = “1 “,
4. Volta-se ao comando for e a terceira instrução é executada: i = i + 1. Logo, i = 2.
5. O teste condicional é novamente realizado (i < 4) e continua verdadeiro.
6. Assim o comando do laço é executado, o valor de i (2) é atribuído à variável nuneros, que recebe ela mesmo + i: nuneros = “1 2 “.
7. A terceira instrução do comando for é novamente executada, i = i + 1. Logo, i = 3.
8. O teste condicional é realizado (i < 4) e prossegue verdadeiro.
9. Mais uma vez, i (3) é atribuído a nuneros, junto ao conteúdo anterior dessa variável. Agora, nuneros = “123”.
10. Volta-se à execução da terceira instrução do for: i = i + 1. Logo, i = 4.

• O teste condicional é realizado (i < 4) e retorna falso. O laço é finalizado e se executa o comando após o for.

 

Vamos iniciar a construção dos exemplos deste capítulo. Crie a pasta cap4 e, dentro dela, crie as pastas css, img e js (da mesma forma como no Capítulo 3). Abra o Visual Studio Code e inicie um novo arquivo. Insira as linhas a seguir nesse arquivo e salve-o com o nome estilos.css, na pasta css.

 

ing.nornal { float: left; hetght: 300px; width: 300px; }
ing.alta { float: left; hetght: 420px; width: 300px; }
hl { border-botton-style: inset; }
pre { font-size: 1.2en; } 

 

Observe que criamos novas regras para a estilização dos elementos das páginas deste capítulo. Como alguns programas exibem uma resposta em várias linhas, definimos duas regras para as imagens: alta e normal. Para indicar que uma imagem deve ser estilizada segundo uma dessas regras, deve-se utilizar class=”regra” na tag correspondente. Caso fôssemos hospedar a página em um provedor de conteúdo, o recomendado seria trabalhar o tamanho da imagem para ela possuir os mesmos valores indicados no estilo. Mesmo assim, designar o tamanho da imagem no CSS é importante a fim de que o navegador reserve o espaço adequado para a imagem enquanto ela é carregada. Foi acrescentada também a definição de um tamanho de fonte para a tag pre, que será utilizada com frequência para exibir a resposta nos programas deste capítulo.

 

Nosso primeiro programa sobre repetições deve ler um número e apresentar a tabuada desse número – um exemplo geralmente utilizado para demonstrar o funcionamento do comando for. O código HTML deve ficar conforme o Exemplo 4.1, para gerar uma página de acordo com a ilustração da execução do programa da Figura 4.4.

 

 

 

Exemplo 4.1 – Código HTML do Programa Tabuada (ex4_1 .html)

<!DOCTYPE html>
<htnl lang="pt-br">
<head>
«neta charset="UTF-8">
<neta nane="viewport" content="width=devtce-width) initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/estxlos.css">
<title>Exemplo 4.1</title>
</head>
<body>
<img src=''img/ex4_l. jpg" alt="Números" class=''alta">
<hl> Programa Tabuada </hl>
<p>Número:
<input type="text" id="inNumero">
</P>
<input type="button" value="Mostrar Tabuada" id="btMostrar">
<pre id="outTabuada"></pre>
<script src="js/ex4_l.js"></script>
</body>
</html>

 

Observe que, para indicar que a imagem deve ser estilizada pela regra css img.alta, foi acrescentado na tag img o atributo class=”alta”. Além disso, uma nova tag foi utilizada para identificar o local em que a resposta do programa JavaScript será apresentada. Trata-se da tag <pre>, que possui como característica exibir um texto pré-formatado que mantém espaços e quebras de linha inseridas no código HTML, algo que não ocorre com as tags <p> e <h3> utilizadas nos exemplos anteriores.

 

Uma dica do editor Visual Studio Code: para criar o arquivo JavaScript indicado na tag <scri.pt src=”js/ex4_l. js”>, basta pressionar Ctrl (Cmd, no Mac) e clicar com o botão esquerdo do mouse sobre o nome do arquivo. Uma caixa indicando que o arquivo não foi encontrado é exibida com a opção Create File. Clicar nessa opção faz com que o arquivo seja criado já no formato indicado pela extensão do nome do arquivo.

 

Insira nesse arquivo o programa JavaScript descrito a seguir:

 

Código JavaScript do Programa Tabuada (js/ex4_1.js)

function mostrarTabuada() {
// cria referência aos elementos da página
var inNumero = document.getElementById("inNumero");
var outTabuada = document.getElementById("outTabuada");
// converte conteúdo do campo inNumero
var numero = Number(inNumero.value);
// valida o núnero
tf (nunero == 0 11 isNaN(numero)) {
alert("Informe um número válido...");
inNumero.focus();
return;
}
// cria uma variável do tipo String, que irá concatenar a resposta
var resposta =
// cria um laço de repetição
for (var i = 1; i <= 10; i++) {
// a variável resposta vai acumulando os novos conteúdos
resposta = resposta + numero + " x " + i + " = " + numero * i + "\n";
}
// o conteúdo da tag pre é alterado para exibir a tabuada do num outTabuada.textContent = resposta;
}
// cria referência ao botão e após associa function ao evento click
var btMostrar = document.getElementById("btMostrar");
btMostrar.addEventListener("click", mostrarTabuada);

 

A programação do início da function é semelhante aos exemplos dos primeiros capítulos: captura dos elementos e validação do preenchimento. Em seguida, imple­mentamos uma estrutura de repetição para acumular em uma string (resposta) a tabuada do número – como discutido no passo a passo anterior. A repetição inicia em 1 e prossegue verdadeira enquanto o valor da variável i é menor ou igual a 10. Para gerar uma quebra de linha, é utilizado o caractere especial “\n”. Depois de acumular os números para a montagem da tabuada, o conteúdo da string resposta é exibido na página.

 

As instruções que compõem o comando for podem conter variáveis, ou seja, em vez de repetir até 10, a repetição poderia ir até um valor informado pelo usuário. No Exemplo 4.1, foi apresentada a forma tradicional, com a variável de controle ini­ciando em 1, repetindo enquanto ela for menor ou igual a 10, e sendo incrementada de 1 a cada repetição. No entanto, a variável de controle poderia incrementar de 2 em 2, por exemplo. Ou conter outra variável para indicar qual é o incremento, ou iniciar em um valor definido pelo usuário e repetir até outro valor também definido pelo usuário. Ou, ainda, diminuir o valor da variável de controle a cada repetição.

 

O nosso segundo exemplo ilustra a montagem de uma estrutura de repetição decres­cente, com o valor inicial informado pelo usuário. O código HTML é semelhante ao Exemplo 4.1, contudo, nesse exemplo vamos exibir os números em uma única linha. Portanto, podemos utilizar novamente a tag h3 para destacar a lista de números. A Figura 4.5 apresenta uma página com a demonstração da resposta do programa.

 

 

Exemplo 4.2 – Código HTML do Programa Números Decrescentes (ex4_2.html)

<!DOCTYPE htnl>
<htnl lang="pt-br">
<head>
<neta charset="UTF-8">
<neta name="viewport" content="width=device-width, inittal-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<Vtnk rel="stylesheet" href="css/estilos.css">
<title>Exenplo 4.2</title>
</head>
<body>
<ing src="tng/ex4_2.jpg" alt="Núnieros Decrescentes" class="nornal">
<hl>Prograna Números Decrescentes</hl>
<p>Número:
<input type="text" id="inNunero">
</P>
cinput type="button" value="Decrescer Até 1" id="btDecrescer">
<h3 id="outResposta"></h3>
<script src="js/ex4_2.js"></script>
</body>
</html>

 

O código do programa JavaScript 4.2 vai obter o valor digitado pelo usuário e apresentar todos os números inteiros existentes entre o número informado e 1, de forma decrescente.

 

Código JavaScript do programa Números Decrescentes (js/ex4_2.js)

function listarNumeros() {
// cria referência aos elementos que a function irá manipular
var inNumero = document.getElementById("inNumero");
var outResposta = document.getElementBy!d("outResposta");
var numero = Number(inNumero.value); // obtém o número informado
// verifica validade do número
if (numero == 0 11 isNaN(numero)) {
alert("Informe um número válido...");
inNumero.focus();
return;
}
// inicializa variável resposta
var resposta = "Entre " + numero + " e 1: ";
// cria um for decrescente
for (var i = numero; i > 0; i = i - 1) {
// resposta vai acumulando números (e virgulas)
resposta = resposta + i +
}
// altera o conteúdo de outResposta
outResposta.textContent = resposta;
}
// referencia elemento e após associa function ao evento click
var btDecrescer = document.getElementById("btDecrescer");
btDecrescer.addEventListener(11 click", listarNumeros);

 

Observe que a variável de controle i é inicializada com o valor da variável nunero.A condição agora é válida enquanto o i for maior que 0. E a variável i é decrementada em 1 (poderia ser abreviada por i – -).

 

Pois é… uma vírgula ficou “sobrando” no final da listagem, o que faz com que a resposta do programa não fique muito bonita, como pode ser verificado na Figura 4.5. O melhor é omitir essa última vírgula ou substituí-la por um ponto final. Para resolver isso, temos 3 formas principais de solução (a partir do que vimos até agora). Podemos criar uma condição para verificar se o número da repetição é o último a ser exibido, isolar o último número ou, ainda, isolar o primeiro número. Observe como poderia ficar o comando for com o primeiro exemplo de solução.

 

for (var i = nunero; i > 0; i--) {
tf (t == 1) {
resposta = resposta + i +
} else {
resposta = resposta + i + ", ";
}
}

 

Para esse exercício, tal solução não é a recomendada, pois o número de compara­ções realizadas pelo programa é muito alto, e a solução, pouco eficiente. Imagine se o usuário digitar o número 100: o programa vai realizar 100 comparações, sendo que, em apenas uma delas, o if é verdadeiro.

Isolar o último número é uma alternativa mais adequada para esse programa. Ou seja, o comando for repete até o número 2 e fora da repetição é acrescentado o último número: “1.”. A mudança que deve ocorrer no programa é a seguinte:

 

for (var i = nunero; i > 1; i--) {
resposta = resposta + i +
}
resposta = resposta + i +

 

Em JavaScript, a variável i declarada no for é uma variável local que existe na função. Após o término do laço, ela mantém o valor do último incremento/decremento da repetição. Portanto, ao referenciar o i fora do laço, o conteúdo “1” + “.”é acrescentado à resposta.

 

A outra forma citada, isolar o primeiro número, segue a mesma lógica desse último exemplo, com uma pequena mudança. O primeiro valor conhecido é inicialmente atribuído à variável resposta. E, na repetição, o valor inicial da variável de controle deixa de fora esse valor. As atribuições também devem ser modificadas. Observe as mudanças.

 

var resposta = "Entre " + numero + " e 1: " + numero;
for (var i = numero - 1; i > 0; i--) {
resposta = resposta +	" + i;
}

 

Nessa última forma, dentro da repetição, resposta recebe resposta, a vírgula e o valor de i. Ou seja, o primeiro número é exibido sem a vírgula (antes do laço), e os próximos números (na repetição) são precedidos pela vírgula. Logo, o último número fica sem a vírgula. Caso queira utilizar essa forma e acrescentar um ponto no final, adicione o comando resposta = resposta + “.” após o laço de repetição.

O comando for é particularmente interessante de ser utilizado quando soubermos o número de repetições que devem ocorrer no programa. O exemplo da tabuada ilustra bem essa situação. Independentemente do número informado pelo usuário, a exibição da tabuada vai de 1 até 10. No segundo exemplo, não sabemos previamente qual será o número informado pelo usuário, ou seja, quantas vezes a repetição vai ocorrer. Mas essa informação é obtida pelo programa antes da montagem da repetição, portanto o programa dispõe da informação para montar o for.