Gostou do nosso conteúdo? Te ajudou?
Nos ajude também! Faça um PIX, de qualquer valor:
programacao.progressiva@gmail.com
Mostrando postagens com marcador Loopings. Mostrar todas as postagens
Mostrando postagens com marcador Loopings. Mostrar todas as postagens

Instruções BREAK e CONTINUE em Laços

Neste tutorial de JS, vamos aprender sobre as instruções BREAK e CONTINUE, o que são, para que servem e como utilizá-las em laços.

Instrução break em Laços


Já estudamos a instrução break no teste condicional SWITCH, e vimos que ela serve para interromper o que viria depois da instrução.

Em laços, como FOR, WHILE e DO WHILE, é a mesma coisa.

Do inglês quebrar, a instrução break quando usava em um laço, faz ele parar imediatamente.

Não importa em qual iteração esteja, se no começo, meio ou fim do looping, se o JS encontra um break ele simplesmente acaba com o laço, não executa mais e segue no código.

Exemplo de uso da instrução break

Crie um script em JS que imprime numa página HTML todos os números de 1 até o primeiro número que múltiplo de 11 e 13 ao mesmo tempo.

Veja bem, não sabemos que número é esse, então não sabemos até onde nosso laço vai rodar.
O que devemos fazer é com que o laço tenha seu teste sempre verdadeiro

Código HTML:


<!DOCTYPE html>
<html>
 <head>
    <title>Apostila JavaScript Progressivo</title>
    <script type="text/javascript" src="script.js"></script>
 </head>
 <body>
	<button onclick="teste()">Buscar</button><br />
	Resultado: <div id="resposta">
 </body>
</html>

Código .js:

function teste(){
  var resposta = document.getElementById('resposta');
  var texto='';

  for(var count=1 ; true ; count++){
  	if(count%11==0 && count%13==0){
  		texto+=count;
  		break;
  	}
  	else
  		texto+=count+"-";
  }

  resposta.innerHTML = texto;
}

Script funcionando:


Resultado:


Note que colocamos um true no teste condicional do laço FOR. Isso faz com que o loop ocorra indefinidamente, até encontrar o número 143, que é o primeiro que é simultaneamente múltiplo de 11 e 13.

Se não encontra esse número, cai no ELSE que vai colocando os números na string texto.
Quando ele encontra, adiciona ele na string texto, ou seja é o último número, e simplesmente termina o laço FOR.

Instrução continue em Laços

Assim como o break, o continue também é uma instrução que altera o fluxo de um laço.
Porém, ele não encerra o laço e sim a iteração.

Ou seja, quando o JS se depara com o continue, ele termina aquele loop específico e continuar a rodar normalmente o laço. É como se a iteração estivesse chegado ao fim, mas sem executar o que vem abaixo do continue.

Exemplo de uso da instrução continue

Crie um script que exiba em uma página HTML todos os números inteiros de 1 até 100, exceto os múltiplos de 4.

A solução é bem simples. Basta pegar um laço FOR, fazer ele ir de 1 até 100.
Em cada valor, testamos se ele é múltiplo de 4.

Se for, damos um continue, e nada ocorre.
Se não for, adicionamos o número na string que vamos exibir na página.



Código HTML:
<!DOCTYPE html>
<html>
 <head>
    <title>Apostila JavaScript Progressivo</title>
    <script type="text/javascript" src="script.js"></script>
 </head>
 <body>
	<button onclick="teste()">Exibir</button><br />
	Resultado: <div id="resposta">
 </body>
</html>
script.js:
function teste(){
  var resposta = document.getElementById('resposta');
  var texto='';

  for(var count=1 ; count<=100 ; count++){
  	if(count%4==0)
  		continue;
  	else
  		texto+=count+"-";
  }

  resposta.innerHTML = texto;
}
Script funcionando:


Resultado:


Progressão Aritmética (PA) em JavaScript

Neste tutorial de JS, vamos te explicar o que é uma PA (progressão aritmética), bem como vamos aprender como formar uma, através da linguagem de programação JavaScript.

PA: Progressão Aritmética na Matemática

Uma Progressão Aritmética, ou PA, nada mais é que uma sequência, um conjunto de números.
Mas não é uma sequência qualquer: ela tem uma regra, um padrão para a formação desses números.

Para formamos uma PA, é necessário duas coisas:
um termo inicial, um número que começa a progressão
uma razão, um termo constante

Temos então o termo inicial.
A regra da formação dos números de uma progressão aritmética é simples: o próximo termo é sempre o anterior somado da razão.

Vamos pegar um exemplo.
Uma PA de razão 3 e termo inicial igual 2. Vamos montar ela?

Primeiro termo = 2
Segundo termo = 2 + 3 = 5
Terceiro termo  = 5 + 3 = 8
Quarto termo    = 8 + 3 = 11
Quinto termo   = 11 + 3= 14
...

Ou seja, o próximo termo a sequência é sempre o anterior, somado da razão.

Progressão Aritmética em JavaScript

Agora, vamos usar esses conhecimentos em programação JS.
O usuário vai fornecer três coisas: o termo inicial, a razão e o até qual termo (primeiro, segundo, terceiro, ...décimo.., vigésimo...) ele deseja ver, e nosso script vai mostrar a PA para ele.



Inicialmente, pedimos três valos ao usuário:
Termo inicial: número na qual inicia a PA
Razão da Progressão aritmética
Termo: exibir até o termo x (termo 5, termo 6, termo 7, termo 8 etc)

Em seguida, um botão que invoca a função PA() do JS.

Nessa função do JavaScript, primeiro pegamos os dados fornecido pelo usuários, que são strings, e passamos para inteiro com o parseInt.

O resultado, ou seja, toda a PA, vamos armazenar na string pa, que inicialmente é vazia.
Agora vem a parte principal.

O usuário vai escolher até que termo deseja ver a PA: termo 1, 2, 3, 4, 5, 6..., 100,...1000...
Vamos fazer um contador ir de 1 até esse valor, que é termo. A variável count vai fazer isso.

Lá, exibimos tal termo, que está armazenado na variável valor, que inicia com o termo inicial.]
Após printarmos ela na string pa, temos que ir para o próximo termo da PA.

O próximo termo é o termo anterior somado da razão: 
valor = valor + razao;

Ou simplesmente:
valor += razao;

E o looping segue.
No final, apenas printamos a variável pa, que tem toda nossa PA.

Código HTML:

<!DOCTYPE html>
<html>
 <head>
   <title>Apostila JavaScript Progressivo</title>
   <script type="text/javascript" src="script.js"> </script>
 </head>
 <body>
    Termo inicial    : <input id="inicial" type="number"> <br />
    Razão da PA      : <input id="razao" type="number"> <br />
    Mostrar até termo: <input id="termo" type="number"> <br />
    <button onclick="PA()">Exibir</button><br />
 </body>
</html>

Código javascript.js:

function PA(){
  var valor = parseInt(document.getElementById('inicial').value);
  var razao = parseInt(document.getElementById('razao').value);
  var termo = parseInt(document.getElementById('termo').value);
  var pa='';

  for(var count=1; count<=termo ; count++){
   pa += "Termo "+count+" = "+valor+"<br />";
    valor += razao;
  }
  document.write(pa);
}

Resultado:


Termo inicial :
Razão da PA :
Mostrar até termo: