Script com anotações ( Aula 1.3)

Segue o script comentando desta aula (1.3)

var campos = [
 //Selecionar os campos do formulario no html
document.querySelector('#data'),
document.querySelector('#quantidade'),
document.querySelector('#valor')
];

//Selecionar o elemento Tbody no html
var tdbody =  document.querySelector('table tbody')

//Criar uma funçao que  escuta o formulario pelo "submit" e cria Tr e td no elemento PAI(tbody)
document.querySelector('.form').addEventListener('submit', function(event){

    //Cancela  a ação padrão de "apagar"(atualizar) o formulário após o "submit"
    event.preventDefault();
    //Cria um elemento TR
    var tr = document.createElement('tr');

    //Função que cria uma td e torna 'filha (inclui)' no TD
    campos.forEach(function(campo){
        //Variavel que cria uma TD
        var td = document.createElement('td');
        //Insere uma valor na TD
        td.textContent = campo.value;
        //Inclui a TD no elemento PAI(TR)
        tr.appendChild(td);
    });
    //O campo volume é resultado de quantidade x valor,ou seja, é um item "fora do formulário", desta forma iremos criar uma variavel que realize essa operação e inclua as informações na TR(Informação)
    var tdVolume = document.createElement('td');
    //Atraves do Array "campos" iremos calcular o volume multiplicando (campo[1] = Quantidade  ) pelo (campo[2]=valor)
    tdVolume.textContent = campos[1].value * campos[2].value;
    //Inclusão da TD na TR com as informações coletadas.
    tr.appendChild(tdVolume);
    //Inclusão da TD no elemento PAI(tbody) presente no html
    tdbody.appendChild(tr)

    //Zerar campo após o envio das informações e deixar o focus no campo data.
    this.reset();
    campos[0].focus();