SlideShare ist ein Scribd-Unternehmen logo
1 von 23
Downloaden Sie, um offline zu lesen
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>");

Weitere ähnliche Inhalte

Was ist angesagt?

Algoritmos e lp parte3-pseudocódigo
Algoritmos e lp parte3-pseudocódigoAlgoritmos e lp parte3-pseudocódigo
Algoritmos e lp parte3-pseudocódigo
Mauro Pereira
 
전형규, M2 클라이언트 스레딩 아키텍쳐, NDC2013
전형규, M2 클라이언트 스레딩 아키텍쳐, NDC2013전형규, M2 클라이언트 스레딩 아키텍쳐, NDC2013
전형규, M2 클라이언트 스레딩 아키텍쳐, NDC2013
devCAT Studio, NEXON
 

Was ist angesagt? (20)

[2B7]시즌2 멀티쓰레드프로그래밍이 왜 이리 힘드나요
[2B7]시즌2 멀티쓰레드프로그래밍이 왜 이리 힘드나요[2B7]시즌2 멀티쓰레드프로그래밍이 왜 이리 힘드나요
[2B7]시즌2 멀티쓰레드프로그래밍이 왜 이리 힘드나요
 
Certificações em Teste e Qualidade de Software
Certificações em Teste e Qualidade de SoftwareCertificações em Teste e Qualidade de Software
Certificações em Teste e Qualidade de Software
 
Robot framework 을 이용한 기능 테스트 자동화
Robot framework 을 이용한 기능 테스트 자동화Robot framework 을 이용한 기능 테스트 자동화
Robot framework 을 이용한 기능 테스트 자동화
 
[KGC 2012]Boost.asio를 이용한 네트웍 프로그래밍
[KGC 2012]Boost.asio를 이용한 네트웍 프로그래밍[KGC 2012]Boost.asio를 이용한 네트웍 프로그래밍
[KGC 2012]Boost.asio를 이용한 네트웍 프로그래밍
 
Introduction of Tools for providing rich user experience in debugger
Introduction of Tools for providing rich user experience in debuggerIntroduction of Tools for providing rich user experience in debugger
Introduction of Tools for providing rich user experience in debugger
 
예외처리가이드
예외처리가이드예외처리가이드
예외처리가이드
 
Cucumber BDD
Cucumber BDDCucumber BDD
Cucumber BDD
 
What Is Cucumber?
What Is Cucumber?What Is Cucumber?
What Is Cucumber?
 
Algoritmos e lp parte3-pseudocódigo
Algoritmos e lp parte3-pseudocódigoAlgoritmos e lp parte3-pseudocódigo
Algoritmos e lp parte3-pseudocódigo
 
모바일 게임 테스트 자동화 (Appium 확장)
모바일 게임 테스트 자동화 (Appium 확장)모바일 게임 테스트 자동화 (Appium 확장)
모바일 게임 테스트 자동화 (Appium 확장)
 
TDC2015: Testes em APIs REST com Rest-Assured
TDC2015: Testes em APIs REST com Rest-AssuredTDC2015: Testes em APIs REST com Rest-Assured
TDC2015: Testes em APIs REST com Rest-Assured
 
Postman과 Newman을 이용한 RestAPI 테스트 자동화 가이드
Postman과 Newman을 이용한 RestAPI 테스트 자동화 가이드 Postman과 Newman을 이용한 RestAPI 테스트 자동화 가이드
Postman과 Newman을 이용한 RestAPI 테스트 자동화 가이드
 
전형규, M2 클라이언트 스레딩 아키텍쳐, NDC2013
전형규, M2 클라이언트 스레딩 아키텍쳐, NDC2013전형규, M2 클라이언트 스레딩 아키텍쳐, NDC2013
전형규, M2 클라이언트 스레딩 아키텍쳐, NDC2013
 
Testes automatizados end-to-end com WordPress por Fabio Nas
Testes automatizados end-to-end com WordPress por Fabio NasTestes automatizados end-to-end com WordPress por Fabio Nas
Testes automatizados end-to-end com WordPress por Fabio Nas
 
MSA 전략 1: 마이크로서비스, 어떻게 디자인 할 것인가?
MSA 전략 1: 마이크로서비스, 어떻게 디자인 할 것인가?MSA 전략 1: 마이크로서비스, 어떻게 디자인 할 것인가?
MSA 전략 1: 마이크로서비스, 어떻게 디자인 할 것인가?
 
우리 제품의 검증 프로세스 소개 자료
우리 제품의 검증 프로세스 소개 자료 우리 제품의 검증 프로세스 소개 자료
우리 제품의 검증 프로세스 소개 자료
 
Automação de Testes com Robot Framework - GUTS-SC
Automação de Testes com Robot Framework - GUTS-SCAutomação de Testes com Robot Framework - GUTS-SC
Automação de Testes com Robot Framework - GUTS-SC
 
도메인 주도 설계의 본질
도메인 주도 설계의 본질도메인 주도 설계의 본질
도메인 주도 설계의 본질
 
테스터도 알아야 할 웹 개발(테스트 교육 3장 1절 부분발췌)
테스터도 알아야 할 웹 개발(테스트 교육 3장 1절 부분발췌)테스터도 알아야 할 웹 개발(테스트 교육 3장 1절 부분발췌)
테스터도 알아야 할 웹 개발(테스트 교육 3장 1절 부분발췌)
 
Ui test 자동화하기 - Selenium + Jenkins
Ui test 자동화하기 - Selenium + JenkinsUi test 자동화하기 - Selenium + Jenkins
Ui test 자동화하기 - Selenium + Jenkins
 

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

T08_T09_LM3: Estruturas de repetição (2013-2014)
T08_T09_LM3: Estruturas de repetição (2013-2014)T08_T09_LM3: Estruturas de repetição (2013-2014)
T08_T09_LM3: Estruturas de repetição (2013-2014)
Carlos Santos
 
0000364 aula 5 estruturas de decisão
0000364 aula 5   estruturas de decisão0000364 aula 5   estruturas de decisão
0000364 aula 5 estruturas de decisão
EvelyneBorges
 
Introdução ao JS1.pptx
Introdução ao JS1.pptxIntrodução ao JS1.pptx
Introdução ao JS1.pptx
LuanDev1
 
GraphQL e APIs: como manter a qualidade?
GraphQL e APIs: como manter a qualidade?GraphQL e APIs: como manter a qualidade?
GraphQL e APIs: como manter a qualidade?
Qaladies
 
Algoritmos C/C++ - Aula 02
Algoritmos C/C++ - Aula 02Algoritmos C/C++ - Aula 02
Algoritmos C/C++ - Aula 02
Leandro Rezende
 

Ähnlich wie (A09) LabMM3 - JavaScript - Estruturas de repetição (20)

LabMM3 - Aula teórica 07
LabMM3 - Aula teórica 07LabMM3 - Aula teórica 07
LabMM3 - Aula teórica 07
 
T08_T09_LM3: Estruturas de repetição (2013-2014)
T08_T09_LM3: Estruturas de repetição (2013-2014)T08_T09_LM3: Estruturas de repetição (2013-2014)
T08_T09_LM3: Estruturas de repetição (2013-2014)
 
Java script2
Java script2Java script2
Java script2
 
Testing sucks
Testing sucksTesting sucks
Testing sucks
 
Introdução a JavaScript
Introdução a JavaScriptIntrodução a JavaScript
Introdução a JavaScript
 
EstrutControleC.pdf
EstrutControleC.pdfEstrutControleC.pdf
EstrutControleC.pdf
 
TDC2013 Otimizando-C
TDC2013 Otimizando-CTDC2013 Otimizando-C
TDC2013 Otimizando-C
 
0000364 aula 5 estruturas de decisão
0000364 aula 5   estruturas de decisão0000364 aula 5   estruturas de decisão
0000364 aula 5 estruturas de decisão
 
Introdução ao JS1.pptx
Introdução ao JS1.pptxIntrodução ao JS1.pptx
Introdução ao JS1.pptx
 
GraphQL e APIs: como manter a qualidade?
GraphQL e APIs: como manter a qualidade?GraphQL e APIs: como manter a qualidade?
GraphQL e APIs: como manter a qualidade?
 
Java script aula 02 - operadores
Java script   aula 02 - operadoresJava script   aula 02 - operadores
Java script aula 02 - operadores
 
Conceitos base de programação - parte 2
Conceitos base de programação - parte 2Conceitos base de programação - parte 2
Conceitos base de programação - parte 2
 
DOJO - TDD com C++
DOJO - TDD com C++DOJO - TDD com C++
DOJO - TDD com C++
 
TDD em C++
TDD em C++TDD em C++
TDD em C++
 
Aula2
Aula2Aula2
Aula2
 
Java Básico
Java BásicoJava Básico
Java Básico
 
Aula3
Aula3Aula3
Aula3
 
Algoritmos C/C++ - Aula 02
Algoritmos C/C++ - Aula 02Algoritmos C/C++ - Aula 02
Algoritmos C/C++ - Aula 02
 
Programação "Estruturada" com Java
Programação "Estruturada" com JavaProgramação "Estruturada" com Java
Programação "Estruturada" com Java
 
Programação Orientada a Objetos - 001
Programação Orientada a Objetos - 001Programação Orientada a Objetos - 001
Programação Orientada a Objetos - 001
 

Mehr von Carlos Santos

AVILA Crew – Uma experiência de tutoria de alunos para alunos
AVILA Crew – Uma experiência de tutoria de alunos para alunosAVILA Crew – Uma experiência de tutoria de alunos para alunos
AVILA Crew – Uma experiência de tutoria de alunos para alunos
Carlos Santos
 
SAPO Campus: Gamification em contexto educativo
SAPO Campus: Gamification em contexto educativoSAPO Campus: Gamification em contexto educativo
SAPO Campus: Gamification em contexto educativo
Carlos Santos
 
T20_LM3: APIs e Scoreoid
T20_LM3: APIs e ScoreoidT20_LM3: APIs e Scoreoid
T20_LM3: APIs e Scoreoid
Carlos Santos
 
T19_LM3: Projeto final e documentação de planificação
T19_LM3: Projeto final e documentação de planificaçãoT19_LM3: Projeto final e documentação de planificação
T19_LM3: Projeto final e documentação de planificação
Carlos Santos
 
T17_LM3: Erros/Debug (2013-2014)
T17_LM3: Erros/Debug (2013-2014)T17_LM3: Erros/Debug (2013-2014)
T17_LM3: Erros/Debug (2013-2014)
Carlos Santos
 

Mehr von Carlos Santos (20)

Is AI the Spice of our future?
Is AI the Spice of our future?Is AI the Spice of our future?
Is AI the Spice of our future?
 
Mentoria entre pares de estudantes para estudantes
Mentoria entre pares de estudantes para estudantesMentoria entre pares de estudantes para estudantes
Mentoria entre pares de estudantes para estudantes
 
1º Encontro Científico TCEdu
1º Encontro Científico TCEdu1º Encontro Científico TCEdu
1º Encontro Científico TCEdu
 
Tecnologias da Comunicação em Educação 2018: Aula inicial
Tecnologias da Comunicação em Educação 2018: Aula inicialTecnologias da Comunicação em Educação 2018: Aula inicial
Tecnologias da Comunicação em Educação 2018: Aula inicial
 
AVILA Crew - Uma experiência de tutoria (com jogos) de alunos para alunos
AVILA Crew - Uma experiência de tutoria (com jogos) de alunos para alunosAVILA Crew - Uma experiência de tutoria (com jogos) de alunos para alunos
AVILA Crew - Uma experiência de tutoria (com jogos) de alunos para alunos
 
AVILA Crew – Uma experiência de tutoria de alunos para alunos
AVILA Crew – Uma experiência de tutoria de alunos para alunosAVILA Crew – Uma experiência de tutoria de alunos para alunos
AVILA Crew – Uma experiência de tutoria de alunos para alunos
 
chmod 777 education
chmod 777 educationchmod 777 education
chmod 777 education
 
Mestrado em Comunicação Multimédia da Universidade de Aveiro - Sessão de acol...
Mestrado em Comunicação Multimédia da Universidade de Aveiro - Sessão de acol...Mestrado em Comunicação Multimédia da Universidade de Aveiro - Sessão de acol...
Mestrado em Comunicação Multimédia da Universidade de Aveiro - Sessão de acol...
 
Tecnologias da Comunicação em Educação: trabalho prático
Tecnologias da Comunicação em Educação: trabalho práticoTecnologias da Comunicação em Educação: trabalho prático
Tecnologias da Comunicação em Educação: trabalho prático
 
Sessão de acolhimento do MCMM da Universidade de Aveiro (2016/2017)
Sessão de acolhimento do MCMM da Universidade de Aveiro (2016/2017)Sessão de acolhimento do MCMM da Universidade de Aveiro (2016/2017)
Sessão de acolhimento do MCMM da Universidade de Aveiro (2016/2017)
 
chmod 777 education
chmod 777 educationchmod 777 education
chmod 777 education
 
SAPO Campus towards a
 Smart Learning Environment
SAPO Campus towards a
 Smart Learning EnvironmentSAPO Campus towards a
 Smart Learning Environment
SAPO Campus towards a
 Smart Learning Environment
 
Repensar a tecnologia em contexto educativo: o caso do SAPO Campus
Repensar a tecnologia em contexto educativo: o caso do SAPO CampusRepensar a tecnologia em contexto educativo: o caso do SAPO Campus
Repensar a tecnologia em contexto educativo: o caso do SAPO Campus
 
A technological approach to Open and Social Learning: 
the SAPO Campus project
A technological approach to Open and Social Learning: 
the SAPO Campus projectA technological approach to Open and Social Learning: 
the SAPO Campus project
A technological approach to Open and Social Learning: 
the SAPO Campus project
 
SAPO Campus: Gamification em contexto educativo
SAPO Campus: Gamification em contexto educativoSAPO Campus: Gamification em contexto educativo
SAPO Campus: Gamification em contexto educativo
 
Repensar a tecnologia em contextos educativos: o SAPO Campus no DeCA
Repensar a tecnologia em contextos educativos: o SAPO Campus no DeCARepensar a tecnologia em contextos educativos: o SAPO Campus no DeCA
Repensar a tecnologia em contextos educativos: o SAPO Campus no DeCA
 
T20_LM3: APIs e Scoreoid
T20_LM3: APIs e ScoreoidT20_LM3: APIs e Scoreoid
T20_LM3: APIs e Scoreoid
 
T19_LM3: Projeto final e documentação de planificação
T19_LM3: Projeto final e documentação de planificaçãoT19_LM3: Projeto final e documentação de planificação
T19_LM3: Projeto final e documentação de planificação
 
T18_LM3: Ajax
T18_LM3: AjaxT18_LM3: Ajax
T18_LM3: Ajax
 
T17_LM3: Erros/Debug (2013-2014)
T17_LM3: Erros/Debug (2013-2014)T17_LM3: Erros/Debug (2013-2014)
T17_LM3: Erros/Debug (2013-2014)
 

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

  • 1. JavaScript: Sempre a repetir o mesmo? :-/ Carlos Santos LabMM 3 - NTC - DeCA - UA Aula 09, 17-10-2012
  • 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 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?] • 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 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 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!
  • 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 funciona em 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 funciona em 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 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>");