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 Apostila para download. Mostrar todas as postagens
Mostrando postagens com marcador Apostila para download. 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:


Erros em JavaScript – Como usar o Console (Tutorial de JavaScript)

Neste tutorial de nosso Curso de JavaScript, vamos aprender o que é o Console do JS, para que serve, em quê nos vai ser útil e vamos falar sobre os erros e problemas que iremos lidar durante nossas vidas de desenvolvedor web.

Erros em programação JavaScript

Não importa o quanto você vá estudar, se já gosta de exatas (sim, Matemática ajuda, e muito, no ramo da computação) ou se já programou em outras linguagens de programação: você irá cometer muitos, muitos erro durante toda sua carreira de programador JavaScript.
Mas não se assuste, é normal. Não é uma coisa simples e fácil, programação JavaScript exige muito estudo e empenho mesmo, e errar vai fazer parte. As vezes iremos passar horas caçando os erros, tentando ver onde erramos, o motivo de nosso aplicativo não estar funcionando da maneira que queríamos, porque algo saiu diferente do esperado e o pior: porque, raios, nosso programa nem sequer roda.
Se você já programou uma linguagem de programação compilada, como C, C++ ou Java, sabe que ao tentar compilar um programa (transformar o seu código em um arquivo executável) e ele tiver algum erro, ele não vai compilar, vai dar erro e mostrar o erro que ocorreu.
Isso não acontece no JavaScript, e em linguagens de script de um modo geral. Não há esse rigor, o que pode ser bom muitas vezes.
Mas geralmente é uma baita dor de cabeça. E o pior, você roda seu script JS e caso der algum erro, pode ser que não aconteça simplesmente nada.
Agora imagine que você fez um sistema com JavaScript enorme, com centenas ou milhares de linhas, com vários arquivos .js, muitas funções, coisas complexas e tal, foi rodar e nada. Sim, nada apareceu.
Pois bem, vamos apresentar uma ferramenta que será uma grande amiga e companheira sua, caso realmente leve a sério seus estudos em JavaScript, que é o console de erros.

Abrindo o Console de Comando

Uma das características mais importantes dos programadores é a capacidade de fuçar e descobrir as coisas sozinhos. Se quer treinar esse instinto e habilidade, agora é uma boa hora.

Fuce no seu navegador web e encontre o “Console JavaScript”, mexa nos menus, ferramentas, opções, não desista, tente achar.
Caso não consiga ou não tenha paciência (aconselhamos a tentar mais), vamos dizer como abrir o console nos principais navegadores atualmente existentes e usados.

Tutorial de JavaScript - Curso online completo - Console do JS

No Google Chrome, ache o ícone de menu, vá em Ferramentas e depois em “Console JavaScript”, ou simplesmente aperte “Control + Shift + J”, e verá a imagem acima.

Agora, lá no console (local onde você vai dar comandos), digite:
1+1 e dê enter. Veja o que acontece.

Agora digite:
'Java' + 'Script', o que acontece? Diga nos comentários

Depois digite:
clear()

O que aconteceu no sole de comandos de JavaScript?


Encontrando erros no JavaScript

Digite o seguinte código em sua página HTML:


<!DOCTYPE html>
<html>
 <head>
   <title>Curso JavaScript Progressivo</title>

   <script type="text/javascript">
    document.write("Curso JavaScript Progressivo);
   </script>

 </head>
</html>

Ela contém um script que deveria exibir uma mensagem no documento:
"Curso JavaScriptProgressivo"


Porém, ele contém um erro: tem as duplas no começo e não tem no final.
Quando abrir o site, vai ver que nada vai aparecer.

Agora, abra o console do JS.
Aqui no Chrome aparece a seguinte mensagem de erro:
Curso de JavaScript online grátis

Veja que aparece: home.html:7

Isso quer dizer o seguinte: o erro está na linha 7 do documento home.html (nome que salvei meu site).

Se colocar as aspas duplas ao final:
document.write("Curso JavaScript Progressivo");

E rodar novamente o documento, vai ver que esse erro some do console.
Prontinho, você aprendeu a detectar e corrigir um problema em JavaScript.

O console mostra até a linha que ocorre o erro.
Isso vai ser muuuito importante em nossas vidas de programadores!