JavaScript: Sempre a repetir o mesmo? :-/
Carlos Santos
LabMM 3 - NTC - DeCA - UA
Aula 09, 17-10-2012
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


       inicialização da          condição de      incremento da
       variável de ciclo        teste do ciclo   variável de ciclo




   for ( cont = valorInicial; cont <= valorFinal; cont++)
   {
       // código a executar
   }
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
   }
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

                         1. inicialização
                              ciclo;




                                     5...


    4. incremento de        2. Condição       false
   variável de ciclo;         de teste



                                  true



                        3. bloco de código;
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 = 0;
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)

 • são rotinas que simplificam o acesso aos diferentes elementos de um
   objecto;

 • 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


    enquanto a condição for
   verdadeira o ciclo continua      a condição pode ser
                                  qualquer expressão que
                                 tenha como resultado um
                                       valor booleano
   while ( condição )
   {
     // código a executar
   }
                                      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       false
                      de teste



                          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++;
}
Estrutura de repetição: do...while



   do
   {
     // código a executar
   }
   while ( condição )
                                   o código é sempre
                                 executado pelo menos
                                        uma vez
    enquanto a condição for
   verdadeira o ciclo continua
do..while: como funciona em fluxograma




                 1. bloco de código;




                     2. Condição       false
                       de teste




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

(A09) LabMM3 - JavaScript - Estruturas de repetição

  • 1.
    JavaScript: Sempre arepetir o mesmo? :-/ Carlos Santos LabMM 3 - NTC - DeCA - UA Aula 09, 17-10-2012
  • 2.
  • 3.
    Como repetir? • 2tipos 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 condição de incremento da variável de ciclo teste do ciclo 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?] • Avariá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 funcionaem fluxograma 1. inicialização ciclo; 5... 4. incremento de 2. Condição false variável de ciclo; de teste true 3. bloco de código;
  • 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 = 0; for (i = 1; i <= 10; i++) { document.write(num + “ * " + i + “ = “ + num*i); document.write("<br />"); }
  • 12.
    for...in e foreach...in • estruturas de repetição para utilizar com objetos (arrays na maioria dos casos) • são rotinas que simplificam o acesso aos diferentes elementos de um objecto; • 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 a condição pode ser qualquer expressão que tenha como resultado um valor booleano while ( condição ) { // código a executar } o código a executar deve conter alguma instrução que possa ter impacto no valor da condição
  • 14.
    while: como funcionaem fluxograma 1. Condição false de teste true 2. bloco de código;
  • 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.
    Estrutura de repetição:do...while do { // código a executar } while ( condição ) o código é sempre executado pelo menos uma vez enquanto a condição for verdadeira o ciclo continua
  • 18.
    do..while: como funcionaem fluxograma 1. bloco de código; 2. Condição false de teste true
  • 19.
    do...while: Exemplo (1) • Qual o resultado? var i = 0; do { document.write("O número é " + i); document.write("<br />"); i++; } while (i <= 5);
  • 20.
    do...while: Exemplo (2) • Qual o resultado? var i = 0; do { i++; document.write("O número é " + i); document.write("<br />"); } while (i <= 5);
  • 21.
    do...while: Exemplo (3) • Qual o resultado? var userAge=””; do { userAge = prompt(“Please enter your age”,””) } while (isNaN(userAge) == true);
  • 22.
    do...while: Exemplo (4) • Qual o resultado? var userAge=””; do { userAge = prompt(“Please enter your age”,””) } while (isNaN(userAge));
  • 23.
    ciclos dentro deciclos (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>");