Home » Posts tagged 'JavaScript'

Tag Archives: JavaScript

[Tutorial] Utilizando forEach em JavaScript

Em um programa de controle de notas, é criado uma tabela de visualização dos dados recuperados com as informações e notas dos alunos de uma turma X. Essa tabela possui 5 colunas de informação, são elas: Registro Acadêmico (RA), Nome, Nota da Avaliação 1 e da Avaliação 2, e a Média.

Exceto pela informação da média, todas as demais foram preenchidas a partir da consulta no banco de dados (premissa para o exemplo). A informação da média deve ser calculada após a construção da tela pelo navegador.

PS: É apenas para efeitos didáticos, os cálculos devem ser realizados a partir da aplicação back-end.

Ao abrir a página no navegador tem-se o seguinte resultado:

Página com as notas dos alunos, aguardando o cálculo das médias.

O primeiro passo é identifica o elemento do html que será manipulado, pelo JavaScript:

O elemento que interessa nesse momento é a tr, pois é nela que existem as informações sobre o aluno que são necessárias para o cálculo da média. O primeiro passo é identificar um seletor único que represente o objeto principal do sistema. Nesse caso é a classe aluno aplicada na tr da tabela. Depois, deve-se percorrer a lista de objetos gerada e a partir dos valores da avaliação 1 e 2, realizar o cálculo da média dos alunos. Veja o código a seguir:

Agora, a figura abaixo, apresenta o resultado visual do código em JavaScript aplicado:

Resultado após o primeiro código realizado.

O resultado não foi exatamente como o esperado, todas as médias tiveram o valor atribuído a NaN, isso significa nulo. Esse evento ocorreu, porque o tipo de valor retornado pela propriedade textContent é uma string (texto). Então, existe uma concatenação entre duas strings na linha 20, e na sequência uma divisão por 2 dessa concatenação. O resultado é um valor nulo, não existente.

Para realizar a correção desse código deve-se aplicar uma conversão das variáveis a1 e a2, que representam as notas das avaliações. Essa conversão é realizada através do método parseFloat (já que são números reais). Veja o código refinado:

O resultado obtido é:

Resultado após o parseFloat

Agora que foi possível realizar o cálculo da média das notas de cada aluno, é necessário estabelecer o padrão de exibição dos valores. O ideal é a exibição de duas casas decimais. O JavaScript auxilia o desenvolvedor com a função toFixed que recebe como parâmetro um inteiro que delimita a quantidade de casas decimais exibidas na tela. O código a seguir está com a função toFixed implementada no resultado do cálculo da média:

A linha 20 está destacada no código para apresentar a implementação da função toFixed. Agora o resultado obtido é apresentado na figura abaixo:

Exibição final do cálculo das médiasAté o momento utilizou-se o for tradicional. A implementação com o forEach é um pouco mais simples de realizar. Ele é um método incluso em qualquer objeto do tipo lista, no JavaScript. No caso do exemplo, a lista alunos possui esse método. O método forEach, recebe como parâmetro uma função anônima, que também possui um parâmetro. O parâmetro da função anônima representa um objeto do mesmo tipo do armazenado na lista. A cada iteração, o parâmetro da função anônima recebe um elemento da lista, até que esta seja totalmente percorrida. O código a seguir demonstra a implementação do código final para cálculo das médias dos alunos, utilizando a função forEach:

Basicamente, a linha 5 do código acima substitui as seguintes linhas do for tradicional:

A implementação com o forEach é mais simples e deixa o código mais legível. É uma boa prática para percorrer a lista inteira utilizando os recursos da linguagem JavaScript.

Qualquer dúvida que tiverem, podem deixar nos comentários ou entrar em contato que terei o prazer de esclarecer todas as dúvidas tiverem.