Artigos HTML e CSS For em Javascript - Dica

Como fazer o uso de Loop FOR em Javascript

Rapidamente, o que é um loop? É um código que vai ser repetindo até que uma determinada condição seja alcançada, ou até mesmo que não haja condição de parada, estes são conhecidos como loops infinitos.

E qual a finalidade do loop FOR? O loop FOR é utilizado quando conhecemos previamente a quantidade de iterações que teremos e segue a seguinte sintaxe:

Listagem 1: Sintaxe do for

for (inicilização; condição; incremento) {
    // código que será repetido
}

Vamos aprender na prática utilizando um exemplo bastante visto nas aulas de cursos de computação, abra o bloco de notas ou algum editor de códigos de sua preferência e escreva o seguinte código:

Listagem 2: Usando for em Javascript

<html>
<head>
<title>Loop FOR - Devmedia</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script>
	// inicializa as variáveis
	var dados = new Array();
	var media = 0, mediaGeral =0;
	
	// cria o nosso array de dados de alunos
	dados[0] = [ "aluno 1", 7, 8, 7, 8 ];
	dados[1] = [ "aluno 2", 9, 9, 7, 7 ];
	dados[2] = [ "aluno 3", 8, 8, 9, 10 ];
	dados[3] = [ "aluno 4", 9, 9, 10, 6 ];
	
	/* criamos o loop for para iteração com o array
 de dados dos alunos*/
	/* perceba que nossa condição de parada é enquanto
a variável i for menor que o tamanho do array de dados*/
	/* a cada iteração, teremos a nossa variável local
 "i" acrescida de 1 digito, ou seja i++ é igual a i = i + 1*/
	
	for(var i = 0; i < dados.length; i++){
		// calcula a média do aluno
		var mediaAluno = (dados[i][1]+dados[i][2]+dados[i][3]) / (dados[i].length -1);
		// armazena a média do aluno para futuro calculo da média geral
		media += mediaAluno;
		// escreve a média do aluno
		document.write(dados[i][0]+ " / Média: "+ mediaAluno.toFixed(2) + "<br/>");
	}
	
	// calcula a média geral da turma
	mediaGeral = media/dados.length;
	// escreve a média da turma
	document.write("Média Geral: "+mediaGeral.toFixed(2));
	
</script>
</head>
<body>
</body>
</html>

Salve este código com a extensão “html” e abra ele no seu navegador de preferência.

Iniciamos o nosso código criando um array de dados contendo nome e notas de quatro alunos. Nosso objetivo é calcular a média individual e a média geral de toda a turma. Para isso, utilizamos um loop do tipo FOR para fazer a iteração com o array e ainda fazer os devidos cálculos. Veja na linha 20 que na estrutura do nosso loop utilizamos o nome “i” como variável de controle, este nome não é obrigatório e você pode criar este controlador com o nome que desejar, desde que siga as regras de nomenclatura de variáveis.

Nas linhas 18 a 20 fazemos o cálculo individual da média por aluno e somamos a média individual com a média geral. Após o loop calculamos e exibimos a média geral da turma.

Bom pessoal, esta era nossa dica de hoje, qualquer dúvida postem os seus comentários!

Saiba mais sobre JavaScript

  • Curso completo de JavaScript:
    Em nosso curso de Javascript veremos todos os conceitos dessa linguagem de programação desde os conceitos básicos até os mais avançados, para que o aluno tenho uma formação completa de Javascript.
  • Introdução ao Javascript:
    Veja neste artigo uma breve introdução, de forma simples e prática, à linguagem de scripting Javascript, que tem se consolidado como uma das bases do desenvolvimento web.
  • Introdução ao JavaScript:
    Nesse guia conheceremos a linguagem de programação JavaScript, baseada em scripts client-side de páginas web e orientada a objetos. Veremos a sintaxe básica e bibliotecas que vão nos ajudar a criar páginas ricas em recursos.