JavaScript: Sempre a repetir o mesmo? :-/

Carlos SantosLabMM 3 - NTC - DeCA - UAAula 08 e 09, 11-10-2013 e 16-10-2013

Como “simplificar” trabalhos repetitivos?

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

Estrutura de repetição: for

for ( cont = valorInicial; cont <= valorFinal; cont++){

// código a executar}

inicialização da variável de ciclo

incremento da variável de ciclo

condição de teste do ciclo

Estrutura de repetição: for

var cont;for ( cont = valorInicial; cont <= valorFinal; cont++){

// código a executar}

a variável contadora já foi declarada anteriormente?

for (var cont = valorInicial; cont <= valorFinal; cont++){

// código a executar}

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 :)

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.

for: como funciona em fluxograma

2. Condição de teste

false

true

3. bloco de código;

1. inicialização ciclo;

4. incremento de variável de ciclo;

5...

for: Exemplo (1)

• Qual o resultado?

var i;

for (i = 0; i <= 5; i++)

{

document.write("O número é " + i);

document.write("<br />");

}

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

}

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

}

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!

Estrutura de repetição: while

while ( condição ){// código a executar

}

enquanto a condição for verdadeira o ciclo continua 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

while: como funciona em fluxograma

1. Condição de teste

false

true

2. bloco de código;

while: Exemplo (1)

• Qual o resultado?

var i = 0;

while (i <= 5)

{

document.write("O número é " + i);

document.write("<br />");

}

while: Exemplo (2)

• Qual o resultado?

var i = 0;

while (i <= 5)

{

document.write("O número é " + i);

document.write("<br />");

i++;

}

while: Exemplo (3)

• Qual o resultado?

var i = 0;

while (i <= 5)

{

i++;

document.write("O número é " + i);

document.write("<br />");

}

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

do..while: como funciona em fluxograma

2. Condição de teste

false

true

1. bloco de código;

do...while: Exemplo (1)

• Qual o resultado?

var i = 0;

do

{

document.write("O número é " + i);

document.write("<br />");

i++;

}

while (i <= 5);

do...while: Exemplo (2)

• Qual o resultado?

var i = 0;

do

{

i++;

document.write("O número é " + i);

document.write("<br />");

}

while (i <= 5);

do...while: Exemplo (3)

• Qual o resultado?

var userAge=””;

do{

userAge = prompt(“Please enter your age”,””)

}

while (isNaN(userAge) == true);

do...while: Exemplo (4)

• Qual o resultado?

var userAge=””;

do{

userAge = prompt(“Please enter your age”,””)

}

while (isNaN(userAge));

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