O documento discute estruturas de repetição em JavaScript como for, while, do-while e for-in. Explica como cada uma funciona com exemplos, incluindo a inicialização e incremento de variáveis de controle, a avaliação de condições e a execução de código dentro dos laços. Também mostra como aninhar estruturas de repetição para gerar tabelas.

1. JavaScript: Sempre a repetir o mesmo? :-/
Carlos Santos
LabMM 3 - NTC - DeCA - UA
Aula 08 e 09, 11-10-2013 e 16-10-2013

2. Como “simplificar” trabalhos repetitivos?

3. Como repetir?
• 2 tipos de estruturas de repetição:
• for
• repetição baseada num número de vezes pré-determinado
• while
• repetição até que uma determinada condição seja verdadeira

4. Estrutura de repetição: for
inicialização da
variável de ciclo
condição de
teste do ciclo
incremento da
variável de ciclo
for ( cont = valorInicial; cont <= valorFinal; cont++)
{
// código a executar
}

5. Estrutura de repetição: for
a variável contadora
já foi declarada
anteriormente?
var cont;
for ( cont = valorInicial; cont <= valorFinal; cont++)
{
// código a executar
}
for (var cont = valorInicial; cont <= valorFinal; cont++)
{
// código a executar
}

6. Observações [idiotas?]
• A variável contadora do ciclo pode ter um nome qualquer
• “cont” é só um exemplo!
• O incremento da variável contadora pode ser realizado com base em
qualquer valor inteiro (positivo ou negativo)
• ++ é um valor muito utilizado... mas apenas isso!
• O valor da variável contadora não deve ser alterado dentro do bloco de
instruções
• é possível... mas é bom saber muito bem o que se está a fazer :)

7. for: como funciona?
1. Executar a parte de inicialização do ciclo.
2. Verificar a condição de teste.
i. Se verdadeira, continuar;
ii. Se não, terminar o ciclo.
3. Executar o código existente no bloco de instruções.
4. Executar a parte de incremento do ciclo.
5. Repetir os passos 2 a 4, até a condição de teste ser falsa.

8. for: como funciona em fluxograma
1. inicialização
ciclo;
5...
4. incremento de
variável de ciclo;
2. Condição
de teste
true
3. bloco de código;
false

9. for: Exemplo (1)
•
Qual o resultado?
var i;
for (i = 0; i <= 5; i++)
{
document.write("O número é " + i);
document.write("<br />");
}

10. for: Exemplo (2)
•
Qual o resultado?
var x = 0;
for (x = 10; x >= 0; x = x - 2)
{
document.write("O número é " + x);
document.write("<br />");
}

11. for: Exemplo (3)
•
Qual o resultado?
var num = prompt(“Número?”, “”);
// Aqui falta uma rotina de validação
var i;
for (i = 1; i <= 10; i++)
{
document.write(num + “ * " + i + “ = “ + num*i);
document.write("<br />");
}

12. for...in e for each...in
• estruturas de repetição para utilizar com objetos (arrays na maioria dos casos
encontrados em LabMM3)
• são rotinas que simplificam o acesso aos diferentes elementos de um
objeto;
• tudo o que permitem fazer também pode ser conseguido com um ciclo for
“normal”;
• voltaremos mais tarde a estas estruturas de repetição!

13. Estrutura de repetição: while
enquanto a condição for
verdadeira o ciclo continua
while ( condição )
{
// código a executar
}
a condição pode ser
qualquer expressão que
tenha como resultado um
valor booleano
o código a executar deve
conter alguma instrução que
possa ter impacto no valor
da condição

14. while: como funciona em fluxograma
1. Condição
de teste
true
2. bloco de código;
false

15. while: Exemplo (1)
•
Qual o resultado?
var i = 0;
while (i <= 5)
{
document.write("O número é " + i);
document.write("<br />");
}

16. while: Exemplo (2)
•
Qual o resultado?
var i = 0;
while (i <= 5)
{
document.write("O número é " + i);
document.write("<br />");
i++;
}

17. while: Exemplo (3)
•
Qual o resultado?
var i = 0;
while (i <= 5)
{
i++;
document.write("O número é " + i);
document.write("<br />");
}

18. Estrutura de repetição: do...while
do
{
// código a executar
}
while ( condição )
enquanto a condição for
verdadeira o ciclo continua
o código é sempre
executado pelo menos
uma vez

19. do..while: como funciona em fluxograma
1. bloco de código;
2. Condição
de teste
true
false

20. do...while: Exemplo (1)
•
Qual o resultado?
var i = 0;
do
{
document.write("O número é " + i);
document.write("<br />");
i++;
}
while (i <= 5);

21. do...while: Exemplo (2)
•
Qual o resultado?
var i = 0;
do
{
i++;
document.write("O número é " + i);
document.write("<br />");
}
while (i <= 5);

22. do...while: Exemplo (3)
•
Qual o resultado?
var userAge=””;
do
{
userAge = prompt(“Please enter your age”,””)
}
while (isNaN(userAge) == true);

23. do...while: Exemplo (4)
•
Qual o resultado?
var userAge=””;
do
{
userAge = prompt(“Please enter your age”,””)
}
while (isNaN(userAge));

24. ciclos dentro de ciclos (nested)
•
Qual o resultado?
var linha = 0, coluna = 0;
document.writeln("<table>");
for (linha=1; linha<=10; linha++)
{
document.writeln("<tr>");
for (coluna=1; coluna<=10; coluna++)
{
document.writeln("<td>"+linha*coluna+"</td>");
}
document.writeln("</tr>");
}
document.writeln("</table>");