{"id":1017,"date":"2024-05-05T17:38:09","date_gmt":"2024-05-05T20:38:09","guid":{"rendered":"https:\/\/desvendandoocodigo.com.br\/?p=1017"},"modified":"2026-08-18T12:29:24","modified_gmt":"2026-08-18T15:29:24","slug":"estruturas-de-dados-com-matrizes-em-javascript","status":"publish","type":"post","link":"https:\/\/desvendandoocodigo.com.br\/?p=1017","title":{"rendered":"Matriz em JavaScript na Pr\u00e1tica: Projeto com HTML, CSS e JavaScript"},"content":{"rendered":"\n

Publicado em:<\/strong> 05 de maio de 2024
Atualizado em:<\/strong> 18 de agosto de 2026<\/p>\n\n\n\n

\n

Este artigo foi atualizado com um novo projeto pr\u00e1tico para mostrar como utilizar matrizes em JavaScript em uma aplica\u00e7\u00e3o com HTML e CSS, percorrendo linhas e colunas, calculando m\u00e9dias e exibindo os resultados dinamicamente na p\u00e1gina.<\/p>\n<\/blockquote>\n\n\n\n

Aprender matriz em JavaScript<\/strong> fica muito mais f\u00e1cil quando conseguimos visualizar onde esse conceito pode ser utilizado.<\/p>\n\n\n\n

Neste projeto vamos criar um Boletim de Alunos<\/strong>. Os nomes e notas ser\u00e3o armazenados em uma matriz e o JavaScript ficar\u00e1 respons\u00e1vel por percorrer os dados, calcular as m\u00e9dias, verificar quem foi aprovado ou reprovado e gerar uma tabela no HTML.<\/p>\n\n\n\n

Antes de come\u00e7ar o projeto, por\u00e9m, precisamos entender alguns conceitos importantes.<\/p>\n\n\n\n

\n\n\n\n

O que \u00e9 um vetor em JavaScript?<\/h2>\n\n\n\n

Um vetor, tamb\u00e9m chamado de array<\/code>, permite armazenar v\u00e1rios valores dentro de uma \u00fanica vari\u00e1vel.<\/p>\n\n\n\n

Por exemplo:<\/p>\n\n\n\n

const aluno = [\"Jo\u00e3o\", 8, 7, 9];\n<\/code><\/pre>\n\n\n\n
Nesse vetor temos o nome de um aluno e suas tr\u00eas notas.<\/p>\n\n\n\n
Cada elemento possui uma posi\u00e7\u00e3o, chamada de \u00edndice<\/strong>.<\/p>\n\n\n\n
aluno[0] \/\/ Jo\u00e3o\naluno[1] \/\/ 8\naluno[2] \/\/ 7\naluno[3] \/\/ 9\n<\/code><\/pre>\n\n\n\n
Um detalhe muito importante \u00e9 que os \u00edndices de um array em JavaScript come\u00e7am em zero<\/strong>.<\/p>\n\n\n\n
Por isso, o primeiro elemento est\u00e1 no \u00edndice 0<\/code>, e n\u00e3o no \u00edndice 1<\/code>.<\/p>\n\n\n\n
\n\n\n\n
O que \u00e9 uma matriz em JavaScript?<\/h1>\n\n\n\n
Podemos evoluir o exemplo anterior armazenando v\u00e1rios alunos:<\/p>\n\n\n\n
const alunos = [\n  [\"Jo\u00e3o\", 8, 7, 9],\n  [\"Maria\", 6, 8, 7],\n  [\"Pedro\", 4, 5, 3],\n  [\"Ana\", 9, 8.5, 10],\n  [\"Lucas\", 5, 6, 7]\n];\n<\/code><\/pre>\n\n\n\n
Agora temos um array principal contendo outros arrays.<\/p>\n\n\n\n
Podemos pensar nessa estrutura como uma tabela ou uma planilha:<\/p>\n\n\n\n
Aluno<\/th>Nota 1<\/th>Nota 2<\/th>Nota 3<\/th><\/tr><\/thead>
Jo\u00e3o<\/td>8<\/td>7<\/td>9<\/td><\/tr>
Maria<\/td>6<\/td>8<\/td>7<\/td><\/tr>
Pedro<\/td>4<\/td>5<\/td>3<\/td><\/tr>
Ana<\/td>9<\/td>8.5<\/td>10<\/td><\/tr>
Lucas<\/td>5<\/td>6<\/td>7<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Essa organiza\u00e7\u00e3o em linhas e colunas<\/strong> \u00e9 o que torna as matrizes t\u00e3o \u00fateis.<\/p>\n\n\n\n
\n\n\n\n
Como funcionam os \u00edndices de uma matriz?<\/h2>\n\n\n\n
Para acessar uma informa\u00e7\u00e3o espec\u00edfica precisamos indicar sua posi\u00e7\u00e3o.<\/p>\n\n\n\n
Por exemplo:<\/p>\n\n\n\n
alunos[0][0]\n<\/code><\/pre>\n\n\n\n
O resultado ser\u00e1:<\/p>\n\n\n\n
Jo\u00e3o\n<\/code><\/pre>\n\n\n\n
J\u00e1:<\/p>\n\n\n\n
alunos[0][1]\n<\/code><\/pre>\n\n\n\n
retorna:<\/p>\n\n\n\n
8\n<\/code><\/pre>\n\n\n\n
Podemos interpretar os dois \u00edndices assim:<\/p>\n\n\n\n
alunos[linha][coluna]\n<\/code><\/pre>\n\n\n\n
Portanto:<\/p>\n\n\n\n
alunos[1][0]\n<\/code><\/pre>\n\n\n\n
acessa a linha de \u00edndice 1<\/code> e a coluna de \u00edndice 0<\/code>:<\/p>\n\n\n\n
Maria\n<\/code><\/pre>\n\n\n\n
Uma boa maneira de entender isso \u00e9 imaginar as coordenadas de uma tabela.<\/p>\n\n\n\n
\n\n\n\n
Projeto pr\u00e1tico: Boletim de Alunos<\/h1>\n\n\n\n
Agora que entendemos vetor, \u00edndice, linha e coluna, podemos utilizar esses conceitos em um projeto.<\/p>\n\n\n\n
Nosso objetivo ser\u00e1 transformar a matriz de alunos em um boletim exibido no navegador.<\/p>\n\n\n\n
Para cada aluno, o programa dever\u00e1:<\/p>\n\n\n\n
    \n
  • acessar seu nome;<\/li>\n\n\n\n
  • percorrer suas notas;<\/li>\n\n\n\n
  • somar as notas;<\/li>\n\n\n\n
  • calcular sua m\u00e9dia;<\/li>\n\n\n\n
  • verificar sua situa\u00e7\u00e3o;<\/li>\n\n\n\n
  • criar uma linha na tabela;<\/li>\n\n\n\n
  • exibir os dados no HTML.<\/li>\n<\/ul>\n\n\n\n
    Ao final tamb\u00e9m vamos mostrar:<\/p>\n\n\n\n
      \n
    • total de alunos;<\/li>\n\n\n\n
    • quantidade de aprovados;<\/li>\n\n\n\n
    • quantidade de reprovados;<\/li>\n\n\n\n
    • m\u00e9dia geral da turma.<\/li>\n<\/ul>\n\n\n\n
      O fluxo ser\u00e1:<\/p>\n\n\n\n
      Matriz \u2192 La\u00e7o de repeti\u00e7\u00e3o \u2192 C\u00e1lculo da m\u00e9dia \u2192 Condi\u00e7\u00e3o \u2192 HTML<\/strong><\/p>\n\n\n\n
      \n\n\n\n
      Percorrendo as linhas da matriz<\/h1>\n\n\n\n
      Como temos v\u00e1rios alunos, n\u00e3o faz sentido acessar cada posi\u00e7\u00e3o manualmente.<\/p>\n\n\n\n
      Podemos utilizar um for<\/code>:<\/p>\n\n\n\n
      for (let i = 0; i < alunos.length; i++) {\n  const nome = alunos[i][0];\n\n  console.log(nome);\n}\n<\/code><\/pre>\n\n\n\n
      Nesse caso, a vari\u00e1vel i<\/code> representa a linha que estamos percorrendo.<\/p>\n\n\n\n
      A cada repeti\u00e7\u00e3o teremos um aluno diferente.<\/p>\n\n\n\n
      \n\n\n\n
      Percorrendo as colunas com um segundo for<\/h1>\n\n\n\n
      Existe agora outro problema.<\/p>\n\n\n\n
      Cada aluno possui v\u00e1rias notas.<\/p>\n\n\n\n
      Precisamos percorrer tamb\u00e9m as informa\u00e7\u00f5es existentes dentro de cada linha.<\/p>\n\n\n\n
      Para isso podemos utilizar um la\u00e7o de repeti\u00e7\u00e3o dentro de outro la\u00e7o de repeti\u00e7\u00e3o<\/strong>:<\/p>\n\n\n\n
      for (let i = 0; i < alunos.length; i++) {\n\n  let somaNotas = 0;\n\n  for (let j = 1; j < alunos[i].length; j++) {\n    somaNotas += alunos[i][j];\n  }\n\n}\n<\/code><\/pre>\n\n\n\n
      O primeiro for<\/code> percorre os alunos.<\/p>\n\n\n\n
      O segundo percorre as notas daquele aluno.<\/p>\n\n\n\n
      Observe que j<\/code> come\u00e7a em 1<\/code>.<\/p>\n\n\n\n
      Isso acontece porque:<\/p>\n\n\n\n
      alunos[i][0]\n<\/code><\/pre>\n\n\n\n
      cont\u00e9m o nome.<\/p>\n\n\n\n
      As notas come\u00e7am na pr\u00f3xima coluna.<\/p>\n\n\n\n
      \n\n\n\n
      Calculando a m\u00e9dia<\/h1>\n\n\n\n
      Depois de somar as notas precisamos descobrir quantas notas existem.<\/p>\n\n\n\n
      Podemos fazer:<\/p>\n\n\n\n
      const quantidadeNotas = alunos[i].length - 1;\n<\/code><\/pre>\n\n\n\n
      Subtra\u00edmos 1<\/code> porque o primeiro elemento cont\u00e9m o nome do aluno.<\/p>\n\n\n\n
      Agora calculamos a m\u00e9dia:<\/p>\n\n\n\n
      const media = somaNotas \/ quantidadeNotas;\n<\/code><\/pre>\n\n\n\n
      Tamb\u00e9m podemos guardar as m\u00e9dias para posteriormente calcular a m\u00e9dia geral da turma:<\/p>\n\n\n\n
      somaMedias += media;\n<\/code><\/pre>\n\n\n\n
      \n\n\n\n
      Verificando aprovado ou reprovado<\/h1>\n\n\n\n
      Depois de calcular a m\u00e9dia podemos utilizar uma condi\u00e7\u00e3o para determinar a situa\u00e7\u00e3o do aluno.<\/p>\n\n\n\n
      Neste projeto vamos considerar m\u00e9dia 6<\/code> como aprova\u00e7\u00e3o.<\/p>\n\n\n\n
      const situacao = media >= 6\n  ? \"Aprovado\"\n  : \"Reprovado\";\n<\/code><\/pre>\n\n\n\n
      Tamb\u00e9m podemos criar contadores:<\/p>\n\n\n\n
      if (situacao === \"Aprovado\") {\n  aprovados++;\n} else {\n  reprovados++;\n}\n<\/code><\/pre>\n\n\n\n
      Dessa forma, al\u00e9m da situa\u00e7\u00e3o individual, teremos um resumo da turma.<\/p>\n\n\n\n
      \n\n\n\n
      Criando a tabela com JavaScript<\/h1>\n\n\n\n
      At\u00e9 agora processamos os dados.<\/p>\n\n\n\n
      O pr\u00f3ximo passo \u00e9 lev\u00e1-los para o navegador.<\/p>\n\n\n\n
      Primeiro criamos uma nova linha:<\/p>\n\n\n\n
      const tr = document.createElement(\"tr\");\n<\/code><\/pre>\n\n\n\n
      Depois montamos seu conte\u00fado:<\/p>\n\n\n\n
      tr.innerHTML = `\n  <td>${nome}<\/td>\n  <td>${alunos[i][1].toFixed(1)}<\/td>\n  <td>${alunos[i][2].toFixed(1)}<\/td>\n  <td>${alunos[i][3].toFixed(1)}<\/td>\n  <td>${media.toFixed(2)}<\/td>\n  <td>${situacao}<\/td>\n`;\n<\/code><\/pre>\n\n\n\n
      Finalmente adicionamos a linha \u00e0 tabela:<\/p>\n\n\n\n
      tabelaAlunos.appendChild(tr);\n<\/code><\/pre>\n\n\n\n
      Esse processo acontece dentro do for<\/code>.<\/p>\n\n\n\n
      Portanto, a cada aluno uma nova linha \u00e9 criada automaticamente.<\/p>\n\n\n\n
      \n\n\n\n
      Manipulando o DOM<\/h1>\n\n\n\n
      Para que o JavaScript consiga alterar o HTML, primeiro precisamos capturar os elementos da p\u00e1gina.<\/p>\n\n\n\n
      const tabelaAlunos = document.querySelector(\"#tabelaAlunos\");\n\nconst totalAlunos = document.querySelector(\"#totalAlunos\");\nconst totalAprovados = document.querySelector(\"#totalAprovados\");\nconst totalReprovados = document.querySelector(\"#totalReprovados\");\nconst mediaGeral = document.querySelector(\"#mediaGeral\");\n<\/code><\/pre>\n\n\n\n
      A partir desse momento o JavaScript pode atualizar esses elementos.<\/p>\n\n\n\n
      Esse processo faz parte da manipula\u00e7\u00e3o do DOM<\/strong>.<\/p>\n\n\n\n
      \n\n\n\n
      Exibindo o resumo da turma<\/h1>\n\n\n\n
      Depois que todos os alunos forem processados, podemos mostrar os resultados:<\/p>\n\n\n\n
      totalAlunos.textContent = alunos.length;\n\ntotalAprovados.textContent = aprovados;\n\ntotalReprovados.textContent = reprovados;\n<\/code><\/pre>\n\n\n\n
      Para calcular a m\u00e9dia geral:<\/p>\n\n\n\n
      const resultadoMediaGeral =\n  somaMedias \/ alunos.length;\n\nmediaGeral.textContent =\n  resultadoMediaGeral.toFixed(1);\n<\/code><\/pre>\n\n\n\n
      \u00c9 importante perceber que esse c\u00f3digo fica fora do for<\/code><\/strong>, pois queremos exibir o resultado somente depois que todos os alunos forem processados.<\/p>\n\n\n\n
      \n\n\n\n
      Entendendo o fluxo completo<\/h1>\n\n\n\n
      O projeto pode parecer grande quando observamos o c\u00f3digo pronto, mas ele \u00e9 formado por pequenas etapas.<\/p>\n\n\n\n
      Primeiro armazenamos os dados:<\/p>\n\n\n\n
      Matriz<\/strong><\/p>\n\n\n\n
      Depois percorremos os alunos:<\/p>\n\n\n\n
      Primeiro for<\/code><\/strong><\/p>\n\n\n\n
      Dentro de cada aluno percorremos as notas:<\/p>\n\n\n\n
      Segundo for<\/code><\/strong><\/p>\n\n\n\n
      Depois fazemos:<\/p>\n\n\n\n
      Soma \u2192 M\u00e9dia \u2192 Condi\u00e7\u00e3o<\/strong><\/p>\n\n\n\n
      E finalmente:<\/p>\n\n\n\n
      JavaScript \u2192 DOM \u2192 HTML<\/strong><\/p>\n\n\n\n
      Essa sequ\u00eancia ajuda a entender por que programa\u00e7\u00e3o deve ser aprendida como um processo.<\/p>\n\n\n\n
      Antes de trabalhar com matrizes, procure entender bem:<\/p>\n\n\n\n
        \n
      1. vari\u00e1veis;<\/li>\n\n\n\n
      2. vetores;<\/li>\n\n\n\n
      3. \u00edndices;<\/li>\n\n\n\n
      4. la\u00e7os de repeti\u00e7\u00e3o;<\/li>\n\n\n\n
      5. condi\u00e7\u00f5es.<\/li>\n<\/ol>\n\n\n\n
        Depois disso, trabalhar com uma matriz fica muito mais simples.<\/p>\n\n\n\n
        \n\n\n\n
        Todo array \u00e9 uma matriz?<\/h1>\n\n\n\n
        N\u00e3o.<\/p>\n\n\n\n
        Podemos ter um array simples com apenas uma dimens\u00e3o:<\/p>\n\n\n\n
        const numeros = [10, 20, 30, 40];\n<\/code><\/pre>\n\n\n\n
        Nesse caso temos apenas uma sequ\u00eancia de valores.<\/p>\n\n\n\n
        J\u00e1 no exemplo dos alunos:<\/p>\n\n\n\n
        const alunos = [\n  [\"Jo\u00e3o\", 8, 7, 9],\n  [\"Maria\", 6, 8, 7]\n];\n<\/code><\/pre>\n\n\n\n
        temos arrays dentro de outro array, permitindo representar dados em linhas e colunas.<\/p>\n\n\n\n
        Essa diferen\u00e7a \u00e9 importante para entender por que precisamos de mais de um \u00edndice para acessar determinadas informa\u00e7\u00f5es.<\/p>\n\n\n\n
        \n\n\n\n
        Onde matrizes podem ser utilizadas?<\/h1>\n\n\n\n
        Matrizes podem aparecer em v\u00e1rios tipos de aplica\u00e7\u00f5es:<\/p>\n\n\n\n
          \n
        • boletins escolares;<\/li>\n\n\n\n
        • tabelas;<\/li>\n\n\n\n
        • planilhas;<\/li>\n\n\n\n
        • jogos;<\/li>\n\n\n\n
        • mapas;<\/li>\n\n\n\n
        • calend\u00e1rios;<\/li>\n\n\n\n
        • relat\u00f3rios;<\/li>\n\n\n\n
        • processamento de dados;<\/li>\n\n\n\n
        • organiza\u00e7\u00e3o de informa\u00e7\u00f5es em linhas e colunas.<\/li>\n<\/ul>\n\n\n\n
          O mais importante n\u00e3o \u00e9 decorar a sintaxe.<\/p>\n\n\n\n
          \u00c9 entender a estrutura dos dados e descobrir como percorr\u00ea-los.
          <\/p>\n\n\n\n
          \n\n\n\n
          O que aprendemos neste projeto?<\/h1>\n\n\n\n
          Neste projeto utilizamos v\u00e1rios conceitos importantes do JavaScript trabalhando juntos:<\/p>\n\n\n\n
            \n
          • arrays;<\/li>\n\n\n\n
          • matrizes;<\/li>\n\n\n\n
          • \u00edndices;<\/li>\n\n\n\n
          • linhas e colunas;<\/li>\n\n\n\n
          • propriedade length<\/code>;<\/li>\n\n\n\n
          • la\u00e7o for<\/code>;<\/li>\n\n\n\n
          • la\u00e7os de repeti\u00e7\u00e3o encadeados;<\/li>\n\n\n\n
          • condi\u00e7\u00f5es;<\/li>\n\n\n\n
          • operador tern\u00e1rio;<\/li>\n\n\n\n
          • c\u00e1lculo de m\u00e9dia;<\/li>\n\n\n\n
          • manipula\u00e7\u00e3o do DOM;<\/li>\n\n\n\n
          • createElement<\/code>;<\/li>\n\n\n\n
          • innerHTML<\/code>;<\/li>\n\n\n\n
          • appendChild<\/code>;<\/li>\n\n\n\n
          • textContent<\/code>;<\/li>\n\n\n\n
          • template literals.<\/li>\n<\/ul>\n\n\n\n
            Perceba que a matriz foi apenas o ponto de partida.<\/p>\n\n\n\n
            O projeto mostra como diferentes fundamentos da programa\u00e7\u00e3o come\u00e7am a se conectar quando constru\u00edmos uma aplica\u00e7\u00e3o real.<\/p>\n\n\n\n
            \n\n\n\n
            Conclus\u00e3o<\/h1>\n\n\n\n
            Uma matriz em JavaScript<\/strong> permite organizar dados de forma estruturada e trabalhar com informa\u00e7\u00f5es distribu\u00eddas em linhas e colunas.<\/p>\n\n\n\n
            Neste projeto come\u00e7amos com um vetor simples, entendemos os \u00edndices e evolu\u00edmos at\u00e9 uma matriz com v\u00e1rios alunos e notas.<\/p>\n\n\n\n
            Depois utilizamos dois la\u00e7os de repeti\u00e7\u00e3o para percorrer a estrutura, calculamos as m\u00e9dias, verificamos a situa\u00e7\u00e3o de cada aluno e usamos JavaScript para gerar o resultado diretamente no HTML.<\/p>\n\n\n\n
            Esse \u00e9 um bom exemplo de por que aprender programa\u00e7\u00e3o em etapas faz diferen\u00e7a.<\/p>\n\n\n\n
            N\u00e3o tente decorar todo o c\u00f3digo.<\/p>\n\n\n\n
            Entenda primeiro o que cada parte resolve e depois conecte as etapas.<\/p>\n\n\n\n
            \n\n\n\n
            \ud83d\udcfa Matriz em JavaScript na pr\u00e1tica \u2014 assista \u00e0 aula<\/h1>\n\n\n\n
            Nesta nova aula do Desvendando o C\u00f3digo<\/strong>, desenvolvemos o projeto passo a passo, come\u00e7ando pelos conceitos de vetor, \u00edndice, linhas e colunas at\u00e9 chegar ao boletim funcionando no navegador.<\/p>\n\n\n\n
            Voc\u00ea ver\u00e1 na pr\u00e1tica como utilizar uma matriz, percorrer seus dados com for<\/code>, calcular m\u00e9dias, verificar aprovado ou reprovado e gerar uma tabela dinamicamente com JavaScript.<\/p>\n\n\n\n
            \ud83c\udfa5 V\u00eddeo atualizado da aula:<\/strong><\/p>\n\n\n\n
            \n