Apesar de termos diferentes possibilidades de variação na declaração do laço for, a forma mais recomendada é inicializar a variável de controle e incrementá-la (ou decrementá-la) dentro da própria instrução for, como mostrei inicialmente. Isso porque geralmente a variável i só é útil para o conteúdo dentro do laço for, por isso é interessante ela ter escopo local ao bloco.

Outra sugestão importante é que comandos e atribuições que possam ser colocados antes do laço sejam usados dessa forma. Isto fará com que o laço seja executado mais rapidamente.

No slide, você pode ver duas versões para o nosso exemplo, que exibe na tela os números de 1 até o número inserido na página. A primeira versão você já conhece, pois já vimos nesta aula. Note que ela pega o valor inserido na página apenas uma vez e atribui esse valor à variável n, a qual é usada no laço. A segunda versão não utiliza uma variável e, no final de cada iteração, a fim de comparar o valor de i com o valor inserido na página, ela pega o valor da página e o converte em número. Claramente essa segunda versão é menos eficiente e deve ser evitada.

Neste segundo exemplo, o valor da variável i é utilizado tanto para controle do laço como para executar o bloco de comando, pois concatenamos o seu valor ao texto a ser exibido na página. Porém, é comum termos variáveis utilizadas apenas para controle do laço, sem ter seu valor usado diretamente na execução do laço. Veja isso neste outro exemplo apresentado no slide.

Note que este programa utiliza apenas a variável texto no processamento do laço, enquanto a variável de controle é utilizada apenas no controle da quantidade de repetições do laço. Você consegue perceber o que ela gera como resultado, ou seja, o que é exibido na página?

Código 1 - 10_4 Contagem For.html

E aí?! Aprendeu como utilizar o laço for? Veja agora um passo a passo do que se deve fazer ao usar o laço for:

1. Primeiro, cria-se uma variável de controle, que poderá servir como uma espécie de contador, ou seja, para contar o número de vezes que o bloco de comandos será executado.
2. Depois, a variável recebe um valor inicial (chamamos esse processo de inicialização). No caso de um contador, geralmente, esse valor inicial é 0 (zero) ou 1 (um).
3. No terceiro passo uma condição determinada (por exemplo, se o valor final do contador foi atingido) é testada e, se for verdadeira, a lista de comandos que pertence ao laço é executada. É através dessa condição que é determinado o número de repetições do laço.
4. No quarto passo a variável de controle recebe a atualização.
5. Por fim, o programa voltará ao terceiro passo do laço para testar novamente a condição. Se a condição for falsa (ou seja, se o valor de término tiver sido atingido), o laço é interrompido. Caso contrário, o laço continuará com os passos 3 a 5.

Ao usar o laço for, você deve ter o cuidado de inicializar corretamente as variáveis utilizadas. Veja no slide. Tente observar sem escrever e rodar o programa, só imaginando, na sua mente ou no papel, quantas vezes o código dentro do laço será executado. Uma dica: no laço for, o teste condicional é executado no início da execução, ou seja, se logo no início do programa a condição for falsa, o código dentro do laço não será executado nenhuma vez.

JavaScript também possui duas outras maneiras de utilizar um laço for. A primeira, chamada de for/in percorre as propriedades de um objeto, mas, como nesta disciplina não estamos tratando de orientação a objetos, não apresentarei essa utilização do laço for.

A outra maneira é o for/of, que permite percorrer estruturas de dados sobre os quais podemos iterar, ou seja, podemos acessar cada um de seus elementos. Alguns exemplos dessas estruturas são strings, arrays, mapeamentos e listas. Nesta aula, focaremos no laço sobre strings. Na aula sobre arrays, faremos o mesmo para essa estrutura de dados. Vejamos um exemplo de uso do laço for/of.

Código 1 - 10_5 Laço_For_Of.html

Nesse exemplo a entrada será um pouco modificada, ao invés de ser um campo numérico, será colocado um campo tipo texto, e ao clicar no botão OK, chamará a função quebraLinhas, que está no arquivo JavaScript. Essa função pega o valor do campo texto (linha 2 do Código 1) e declara uma variável chamada texto (linha 4), que vai ser o valor que atualizará o campo de "resultado" na página HTML.

Código 2 - 10_5 Laço For Of.js

No final dessa função, no elemento "resultado", é atribuído o valor do texto, ou seja, é onde será trabalhado o laço for/of.

A variável texto começa com "Letras de", informa o texto que recebeu e quebra linha, (linha 4). E, na linha 5, usa-se um laço for diferente, ele vai fazer um for com a variável c, em seguida vem o of e o str, como apresentado na linha 5. Então, o que faz esse laço for?

Para cada caractere da string, ele vai executar esse trecho de comando entre chaves que aparece na linha 6. O que está sendo feito nesse exemplo é: concatenar ao texto aquele caractere mais a tag <br> HTML, ou seja, uma quebra de linha. Em outras palavras, está sendo escrito na página HTML, uma letra da string em cada linha. Ok?

Então, para cada caractere da string str esse laço for/of vai atribuir esse caractere à variável c, e executa a linha de comando, adiciona a variável e quebra uma linha.

Assim, ao voltar na página HTML e colocar: "Programação Estruturada" e clicar em OK, aparecerá o texto "Letras de Programação Estruturada" e logo abaixo aparecerá um caractere por linha, como mostra a figura 4.

Então é assim que se utiliza o for/of, tá bom? Valeu!