1 of 23

Programação Web I Javascript

Estruturas de Repetição

1

2 of 23

Estruturas de Repetição

  • Permite repetir um certo código de acordo enquanto atender a uma determinada condição.
  • Utilizam operadores de Comparação e Operadores Lógicos para criar a condição

�

​

​

​

​

2

3 of 23

Estrutura de Repetição

A roda gigante vai dar uma volta completa mais de uma vez para a diversão de todos.

O operador da roda gigante pode apertar o botão para que ela rode a cada volta ou programar uma solução para que ela rode uma determinada quantidade de vezes!

3

4 of 23

Como Repetir?

FOR

Repetição baseada num número de vezes pré-determinado

WHILE

Repetição até que uma determinada condição seja verdadeira

DO...WHILE

Repetição até que uma determinada condição seja verdadeira com o teste sendo realizado Após a primeira execução.

​

4

5 of 23

FOR

​

​

for( a = valorInicial; a <= valorFinal; a++ )

{

//Código que será Repetido

}

5

Inicialização da Variável de ciclo

condição de teste do ciclo

Alteração do valor da variável do ciclo

6 of 23

Observações

  • A variável contadora do ciclo pode ter um nome qualquer
    • a é só um exemplo
  • A alteração de valor da variável contadora pode ser realizado com base em qualquer valor inteiro (Positivo ou negativo) e qualquer operação matemática.
    • variavel++ é uma operação muito utilizada, mas pode ser utilizada variavel--, variavel *=2 … (Qualquer operação que altere o valor)
  • O valor da variável contadora não deve ser alterado dentro do bloco de instruções

6

7 of 23

FOR: Como funciona?

  • Inicializa a variável do ciclo
  • Verifica a condição de teste
    • Se verdadeira, continuar (Vá para 3)
    • Se falsa, terminar o ciclo
  • Executar o código existente no bloco de instruções
  • Executar a alteração do valor da variável do ciclo
  • Repetir os passos 2 a 4 até a condição ser falsa!

7

8 of 23

FOR: Como funciona

8

  • Inicialização do ciclo

2. Condição

3.Bloco de Código

FALSE

TRUE

4. Altera o valor da Variável do ciclo.

9 of 23

FOR: Como funciona

9

  • Inicialização do ciclo

2. Condição

3.Bloco de Código

FALSE

TRUE

4. Altera o valor da Variável do ciclo.

1

2

3

4

10 of 23

Vamos Codificar!

10

11 of 23

FOR

  • Crie um arquivo HTML e insira uma tag script
  • Receba através do prompt dois números inteiros (Não esqueça de Converter)
  • Mostre no documento (utilizando document.write) todos os números entre estes números recebidos.

​

​

11

12 of 23

WHILE

​

while( condição )

{

//código a ser executado

​

}

12

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 ser executado deve conter alguma expressão que possa ter impacto no valor da condição.

13 of 23

WHILE: Como Funciona

13

1. Condição de Teste

2.Bloco de Código

FALSE

TRUE

3. Dentro do Bloco deve haver alguma forma de alterar a condição testada

14 of 23

WHILE: Como Funciona

14

1. Condição de Teste

2.Bloco de Código

FALSE

TRUE

3. Dentro do Bloco deve haver alguma forma de alterar a condição testada

1

2

3

15 of 23

Vamos Codificar!

15

16 of 23

WHILE

  • Crie um arquivo HTML e insira uma tag script
  • Faça um programa que solicite do usuário 5 números inteiros e calcule a soma de todos estes números e apresente no documento o resultado.

​

​

16

17 of 23

WHILE

  • Salve como o arquivo anterior!
  • Faça um programa que solicite do usuário uma quantidade indeterminada de números inteiros e calcule a soma de todos estes números e apresente no documento o resultado e quantidade de números recebidos.
  • O programa deve ser finalizado quando for pressionado o botão cancelar do PROMPT.

​

​

17

18 of 23

DO...WHILE

Diferente do WHILE, no DO...WHILE primeiro é executado o código para depois a condição ser testada

do{

​

//código a ser executado

​

}while(condição)

18

Faça! Você entrará no Bloco de Código pelo menos 1 vez

Enquanto a condição for verdadeira o ciclo continua

O Código a ser executado deve conter alguma expressão que possa ter impacto no valor da condição.

19 of 23

DO...WHILE: Como Funciona

19

3. Condição de Teste

1.Bloco de Código

FALSE

TRUE

2. Dentro do Bloco deve haver alguma forma de alterar a condição testada

20 of 23

DO...WHILE: Como Funciona

20

3. Condição de Teste

1.Bloco de Código

FALSE

2. Dentro do Bloco deve haver alguma forma de alterar a condição testada

TRUE

3

1

2

21 of 23

Vamos Codificar!

21

22 of 23

Do...WHILE

  • Crie um arquivo HTML e insira uma tag script
  • Solicite do usuário um número maior que 0 e apresente este os números em ordem decrescente deste valor até 0.

​

​

22

23 of 23

Do...WHILE

  • Crie um arquivo HTML e insira uma tag script
  • Solicite do usuário um dos seguintes valores:
    • 1 - Receber o login do usuario
    • 2 - Receber a senha do usuário
    • 3 - Para validar os dados ( A ser verdadeiro a autenticação o login deverá ser admin e a senha 123)
      • Se o login e senha estiver correto deve ser mostrado uma mensagem de Boas Vindas Caso o contrário deverá mostrar uma mensagem com os dados incorretos.
    • 4 - Sair
  • O menu deve aparecer até que seja escolhida a opção 4.

​

​

23