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.
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
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>");