array | JavaScript: programando na linguagem da web | Alura

tudo bem, estou aprendendo sobre ** array bidimensional** , que seria uma matriz, com alguns tutoriais cheguei nesse código, mas preciso de ajuda. Eu criei a matriz com for, porque quero aprender melhor o for , então gostaria que me ajudassem com a seguintes duvidas: PRIMEIRA: o código seria o seguinte entra com nome do aluno, nota 1 e nota 2 e salva na matriz, pelo que vi deu certo porem, se digito outro aluno ele subscreve o primeiro em vez de adicional na outra coluna. SEGUNDO Quero fazer esse código com for para aprender como disse, mas se tiver outra forma de fazer e puderem me mostrar junto com o FOR para eu poder comparar eu agradeço. TERCEIRO Eu sei quantas colunas vão ter por que quero nome , nota 1 e nota 2 , porem se eu quiser deixar sem um quantidade de linhas, eu conseguiria fazer essa matriz, tem alguma forma. Muito obrigado pessoal, se não entenderem alguma coisa por favor me mandem que tento explicar melhor.

<!DOCTYPE html>
<html lang="pt">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <label for="">aluno</label>
    <input type="text" class="labelName"><br>

    <label for="">nota 1</label>
    <input type="text" class="labelNota1"><br>

    <label for="">nota 2</label>
    <input type="text" class="labelNota2"><br>

    <button class="botao" onclick="aa()">enviar</button>

    <script>
       function aa(){

            var linha = 5;
            var coluna = 3;

            var matriz = [];

            for(var i= 0; i < linha; i++){
                matriz[i] = [];
                for(var j = 0; j < coluna; j++){
                    matriz[i][j] = "";
                }
            }

            for(var l = 0; l < linha; l++){
                for(var c = 0; c < coluna; c++){
                    if( c== 0){
                        matriz[l][c] = document.querySelector(".labelName").value;
                        document.querySelector(".labelName").value = "";

                    }else if(c == 1){
                        matriz[l][c] = document.querySelector(".labelNota1").value;
                        document.querySelector(".labelNota1").value = "";

                    }else{
                        matriz[l][c] = document.querySelector(".labelNota2").value;
                        document.querySelector(".labelNota2").value = "";
                    }
                }
            }

            console.log(matriz);
            console.table(matriz);
        }

</script>   
</body>
</html>

Olá Daniel, tudo bem com você ?

Eu sinceramente não sei se esse é o melhor exemplo para aprender a trabalhar com matriz, porque de fato não precisamos percorre-la por inteiro, mas vou tentar te auxiliar em algumas coisas, ok?

se digito outro aluno ele subscreve o primeiro em vez de adicional na outra coluna.

Bem isso aconteceu, porque os dados mais importantes para você estavam sendo deletados, veja que você está criando a matriz e zerando dentro da função, e depois que uma função acaba ela deleta tudo :)

Então sempre que você ia inserir um novo aluno, você estava criando uma nova matriz, para corrigir isso é bem simples:

Coloque todo esse código para fora da função :)

            var linha = 5;
            var coluna = 3;

            var matriz = [];

            for(var i= 0; i < linha; i++){
                matriz[i] = [];
                for(var j = 0; j < coluna; j++){
                    matriz[i][j] = "";
                }
            }

Agora vamos para o segundo problema, você no código que faz as inserções em nenhum momento está verificando se aquele lugar está vazio, então por isso estamos sobreescrevendo, para corrigir isso precisamos criar uma condição antes de começar a percorrer as colunas:

if (matriz[l][0] == "") {
                    for (var c = 0; c < coluna; c++) {

Ou seja se na linha que eu estou vendo a primeira coluna for vazia eu começo a percorrer para fazer a inserção da maneira que você criou, caso não seja eu já pulo para a próxima linha :)

Quero fazer esse código com for para aprender como disse, mas se tiver outra forma de fazer e puderem me mostrar junto com o FOR para eu poder comparar eu agradeço.

Então, pelo que você disse você está iniciando no mundo da programação, e as soluções diferentes podem acabar te confundindo um pouco, e por debaixo dos panos elas vão utilizar o for :)

Apenas vou te dar uma dica de algo que poderia tornar mais simples em seu código, podemos zerar a matriz no começo da seguinte maneira:

        for (var i = 0; i < linha; i++) {
            matriz[i] = Array(3).fill("");
        }

Então o que eu estou falando é que para cada linha matriz[i] ele criar um array de 3 posições ( Array(3)) e preencher ( fill) com "" e teremos o mesmo resultado :)

porem se eu quiser deixar sem um quantidade de linhas, eu conseguiria fazer essa matriz, tem alguma forma.

Podemos pedir para o usuário digitar a quantidade de elementos que ele pretende por meio de um prompt na tela, veja:

<script>
    var linha = parseInt( prompt("Digite a quantidade de alunos"));
    var colunas = 3

Dessa maneira estamos atribuindo a quantidade de linhas o valor que o usuário digitar, e estou utilizando o parseInt para transformar o texto que ele digitou em número :)

Conseguiu Compreender? Qualquer coisa estou a disposição :)

Abraços e Bons Estudos!