Publicado em: 05 de maio de 2024
Atualizado em: 18 de agosto de 2026

Este artigo foi atualizado com um novo projeto prático para mostrar como utilizar matrizes em JavaScript em uma aplicação com HTML e CSS, percorrendo linhas e colunas, calculando médias e exibindo os resultados dinamicamente na página.

Aprender matriz em JavaScript fica muito mais fácil quando conseguimos visualizar onde esse conceito pode ser utilizado.

Neste projeto vamos criar um Boletim de Alunos. Os nomes e notas serão armazenados em uma matriz e o JavaScript ficará responsável por percorrer os dados, calcular as médias, verificar quem foi aprovado ou reprovado e gerar uma tabela no HTML.

Antes de começar o projeto, porém, precisamos entender alguns conceitos importantes.

---

O que é um vetor em JavaScript?

Um vetor, também chamado de array, permite armazenar vários valores dentro de uma única variável.

Por exemplo:

const aluno = ["João", 8, 7, 9];

Nesse vetor temos o nome de um aluno e suas três notas.

Cada elemento possui uma posição, chamada de índice.

aluno[0] // João
aluno[1] // 8
aluno[2] // 7
aluno[3] // 9

Um detalhe muito importante é que os índices de um array em JavaScript começam em zero.

Por isso, o primeiro elemento está no índice 0, e não no índice 1.

---

O que é uma matriz em JavaScript?

Podemos evoluir o exemplo anterior armazenando vários alunos:

const alunos = [
  ["João", 8, 7, 9],
  ["Maria", 6, 8, 7],
  ["Pedro", 4, 5, 3],
  ["Ana", 9, 8.5, 10],
  ["Lucas", 5, 6, 7]
];

Agora temos um array principal contendo outros arrays.

Podemos pensar nessa estrutura como uma tabela ou uma planilha:

Aluno	Nota 1	Nota 2	Nota 3
João	8	7	9
Maria	6	8	7
Pedro	4	5	3
Ana	9	8.5	10
Lucas	5	6	7

Essa organização em linhas e colunas é o que torna as matrizes tão úteis.

---

Como funcionam os índices de uma matriz?

Para acessar uma informação específica precisamos indicar sua posição.

Por exemplo:

alunos[0][0]

O resultado será:

João

Já:

alunos[0][1]

retorna:

8

Podemos interpretar os dois índices assim:

alunos[linha][coluna]

Portanto:

alunos[1][0]

acessa a linha de índice 1 e a coluna de índice 0:

Maria

Uma boa maneira de entender isso é imaginar as coordenadas de uma tabela.

---

Projeto prático: Boletim de Alunos

Agora que entendemos vetor, índice, linha e coluna, podemos utilizar esses conceitos em um projeto.

Nosso objetivo será transformar a matriz de alunos em um boletim exibido no navegador.

Para cada aluno, o programa deverá:

• acessar seu nome;
• percorrer suas notas;
• somar as notas;
• calcular sua média;
• verificar sua situação;
• criar uma linha na tabela;
• exibir os dados no HTML.

Ao final também vamos mostrar:

• total de alunos;
• quantidade de aprovados;
• quantidade de reprovados;
• média geral da turma.

O fluxo será:

Matriz → Laço de repetição → Cálculo da média → Condição → HTML

---

Percorrendo as linhas da matriz

Como temos vários alunos, não faz sentido acessar cada posição manualmente.

Podemos utilizar um for:

for (let i = 0; i < alunos.length; i++) {
  const nome = alunos[i][0];

  console.log(nome);
}

Nesse caso, a variável i representa a linha que estamos percorrendo.

A cada repetição teremos um aluno diferente.

---

Percorrendo as colunas com um segundo for

Existe agora outro problema.

Cada aluno possui várias notas.

Precisamos percorrer também as informações existentes dentro de cada linha.

Para isso podemos utilizar um laço de repetição dentro de outro laço de repetição:

for (let i = 0; i < alunos.length; i++) {

  let somaNotas = 0;

  for (let j = 1; j < alunos[i].length; j++) {
    somaNotas += alunos[i][j];
  }

}

O primeiro for percorre os alunos.

O segundo percorre as notas daquele aluno.

Observe que j começa em 1.

Isso acontece porque:

alunos[i][0]

contém o nome.

As notas começam na próxima coluna.

---

Calculando a média

Depois de somar as notas precisamos descobrir quantas notas existem.

Podemos fazer:

const quantidadeNotas = alunos[i].length - 1;

Subtraímos 1 porque o primeiro elemento contém o nome do aluno.

Agora calculamos a média:

const media = somaNotas / quantidadeNotas;

Também podemos guardar as médias para posteriormente calcular a média geral da turma:

somaMedias += media;

---

Verificando aprovado ou reprovado

Depois de calcular a média podemos utilizar uma condição para determinar a situação do aluno.

Neste projeto vamos considerar média 6 como aprovação.

const situacao = media >= 6
  ? "Aprovado"
  : "Reprovado";

Também podemos criar contadores:

if (situacao === "Aprovado") {
  aprovados++;
} else {
  reprovados++;
}

Dessa forma, além da situação individual, teremos um resumo da turma.

---

Criando a tabela com JavaScript

Até agora processamos os dados.

O próximo passo é levá-los para o navegador.

Primeiro criamos uma nova linha:

const tr = document.createElement("tr");

Depois montamos seu conteúdo:

tr.innerHTML = `
  <td>${nome}</td>
  <td>${alunos[i][1].toFixed(1)}</td>
  <td>${alunos[i][2].toFixed(1)}</td>
  <td>${alunos[i][3].toFixed(1)}</td>
  <td>${media.toFixed(2)}</td>
  <td>${situacao}</td>
`;

Finalmente adicionamos a linha à tabela:

tabelaAlunos.appendChild(tr);

Esse processo acontece dentro do for.

Portanto, a cada aluno uma nova linha é criada automaticamente.

---

Manipulando o DOM

Para que o JavaScript consiga alterar o HTML, primeiro precisamos capturar os elementos da página.

const tabelaAlunos = document.querySelector("#tabelaAlunos");

const totalAlunos = document.querySelector("#totalAlunos");
const totalAprovados = document.querySelector("#totalAprovados");
const totalReprovados = document.querySelector("#totalReprovados");
const mediaGeral = document.querySelector("#mediaGeral");

A partir desse momento o JavaScript pode atualizar esses elementos.

Esse processo faz parte da manipulação do DOM.

---

Exibindo o resumo da turma

Depois que todos os alunos forem processados, podemos mostrar os resultados:

totalAlunos.textContent = alunos.length;

totalAprovados.textContent = aprovados;

totalReprovados.textContent = reprovados;

Para calcular a média geral:

const resultadoMediaGeral =
  somaMedias / alunos.length;

mediaGeral.textContent =
  resultadoMediaGeral.toFixed(1);

É importante perceber que esse código fica fora do for, pois queremos exibir o resultado somente depois que todos os alunos forem processados.

---

Entendendo o fluxo completo

O projeto pode parecer grande quando observamos o código pronto, mas ele é formado por pequenas etapas.

Primeiro armazenamos os dados:

Matriz

Depois percorremos os alunos:

Primeiro for

Dentro de cada aluno percorremos as notas:

Segundo for

Depois fazemos:

Soma → Média → Condição

E finalmente:

JavaScript → DOM → HTML

Essa sequência ajuda a entender por que programação deve ser aprendida como um processo.

Antes de trabalhar com matrizes, procure entender bem:

1. variáveis;
2. vetores;
3. índices;
4. laços de repetição;
5. condições.

Depois disso, trabalhar com uma matriz fica muito mais simples.

---

Todo array é uma matriz?

Não.

Podemos ter um array simples com apenas uma dimensão:

const numeros = [10, 20, 30, 40];

Nesse caso temos apenas uma sequência de valores.

Já no exemplo dos alunos:

const alunos = [
  ["João", 8, 7, 9],
  ["Maria", 6, 8, 7]
];

temos arrays dentro de outro array, permitindo representar dados em linhas e colunas.

Essa diferença é importante para entender por que precisamos de mais de um índice para acessar determinadas informações.

---

Onde matrizes podem ser utilizadas?

Matrizes podem aparecer em vários tipos de aplicações:

• boletins escolares;
• tabelas;
• planilhas;
• jogos;
• mapas;
• calendários;
• relatórios;
• processamento de dados;
• organização de informações em linhas e colunas.

O mais importante não é decorar a sintaxe.

É entender a estrutura dos dados e descobrir como percorrê-los.

---

O que aprendemos neste projeto?

Neste projeto utilizamos vários conceitos importantes do JavaScript trabalhando juntos:

• arrays;
• matrizes;
• índices;
• linhas e colunas;
• propriedade length;
• laço for;
• laços de repetição encadeados;
• condições;
• operador ternário;
• cálculo de média;
• manipulação do DOM;
• createElement;
• innerHTML;
• appendChild;
• textContent;
• template literals.

Perceba que a matriz foi apenas o ponto de partida.

O projeto mostra como diferentes fundamentos da programação começam a se conectar quando construímos uma aplicação real.

---

Conclusão

Uma matriz em JavaScript permite organizar dados de forma estruturada e trabalhar com informações distribuídas em linhas e colunas.

Neste projeto começamos com um vetor simples, entendemos os índices e evoluímos até uma matriz com vários alunos e notas.

Depois utilizamos dois laços de repetição para percorrer a estrutura, calculamos as médias, verificamos a situação de cada aluno e usamos JavaScript para gerar o resultado diretamente no HTML.

Esse é um bom exemplo de por que aprender programação em etapas faz diferença.

Não tente decorar todo o código.

Entenda primeiro o que cada parte resolve e depois conecte as etapas.

---

📺 Matriz em JavaScript na prática — assista à aula

Nesta nova aula do Desvendando o Código, desenvolvemos o projeto passo a passo, começando pelos conceitos de vetor, índice, linhas e colunas até chegar ao boletim funcionando no navegador.

Você verá na prática como utilizar uma matriz, percorrer seus dados com for, calcular médias, verificar aprovado ou reprovado e gerar uma tabela dinamicamente com JavaScript.

🎥 Vídeo atualizado da aula:

---

Desvendando o Código — Prof. Marcos

Aprenda programação entendendo o processo e colocando o conhecimento em prática.