Primeiras aulas do curso JavaScript avançado I: ES6, orientação a objetos e padrões de projetos

JavaScript avançado I: ES6, orientação a objetos e padrões de projetos

Prólogo: regras, código e manutenção - Visão geral do projeto

Olá, meu nome é Flávio Almeida (@flaviohalmeida) e tenho certeza de que a sua matrícula neste curso não foi para aprender a programar em JavaScript, mas para ficar melhor do que já é nessa linguagem.

Considerações sobre curso

Sendo um curso avançado, você precisa ter conhecimento da linguagem, algo imprescindível. Não é necessário ser um expert, inclusive tive um cuidado em avançar gradativamente em cada assunto para ajudar aqueles ainda tímidos no mundo desta fantástica linguagem. Mas com certeza, ter um bom traquejo na linguagem tornará sua experiência ainda melhor neste curso.

Visão geral do projeto

O projeto desse curso será construir um cadastro de negociações de bolsa de valores. Cadastraremos novas negociações, inclusive, elas serão importadas de serviços especializados, tudo aplicando o paradigma funcional e orientado a objetos ao, mesmo tempo, utilizando o melhor dos dois mundos.

Em um primeiro momento, o escopo da nossa aplicação pode parecer bem reduzido, mas é o suficiente para aplicarmos novos recursos da linguagem JavaScript, ou ECMAScript 2015 (ES6), tecnicamente falando. Além disso, organizaremos nosso código no modelo MVC (M**odel-View-C*ontroller), aplicaremos padrões de projeto, programaremos assincronamente com *promises, renderizaremos templates e trabalharemos com proxies, entre outras coisas.

Projeto

Os serviços que nossa aplicação consumirá serão disponibilizados para você através de um servidor Node.js disponível com o arquivo do projeto que usaremos até o final. A ideia é que você otimize seu tempo aprendendo JavaScript sem perder horas e horas com infraestrutura, que muitas vezes é a vilã de todo treinamento.

Por fim, e não menos importante, faça o primeiro exercício obrigatório deste treinamento. Lá você terá acesso ao projeto do curso, navegador que deve ser utilizado e a versão do Node.js a ser instalada, inclusive dicas de instalação.

Prólogo: regras, código e manutenção - Prólogo: regras, código e manutenção

Este vídeo é um prólogo do que está por vir. A trama que se desenrolará será a implementação a funcionalidade de inclusão de uma nova linha na tabela com base na entrada do usuário, usando a manipulação de DOM e outras ferramentas que aprendemos em JavaScript. Se você já sente bastante seguro sobre esta parte, pode avançar para o último vídeo da aula 1 e conferir os desdobramentos finais. Caso contrário, você pode recordar o conteúdo agora, com explicações detalhadas sobre o que está sendo feito. Assim teremos a chance de caminharmos juntos.

Começaremos abrindo o Visual Studio Code - mas você pode usar o seu editor favorito. Abriremos a pasta "client". Trabalharemos com a pasta "server" apenas no fim do curso.

client

Dentro de "client", encontraremos diversas subpastas que ainda estão vazias, mas o arquivo mais importante será o index.html, no qual encontraremos osinputs. Sabemos que para capturarmos as informações na página, teremos que identificar os elementos no DOM. Por isso, adicionamos um id em cada input, como no exemplo do seguinte trecho:

<form class="form">

      <div class="form-group">
          <label for="data">Data</label>
          <input type="date" id="data" class="form-control" required autofocus/>
      </div>
  //...

Então, conseguimos obter facilmente cada input desse formulário usando o id de cada um. Em seguida, vamos criar o arquivo aluraframe/client/js/index.js. E para não corrermos o risco de esquecermos de importá-lo, abaixo da tag <tfoot>, criaremos a tag script que importará o arquivo index.js.

<script src="js/index.js"></script>

Uma das vantagens do Visual Studio Code é que ele já possui o Emmet, assim não precisaremos instalar nada. O plugin transformará a sintaxe automaticamente na importação.

Dentro do arquivo index.js, adicionaremos uma lista com todos os campos que temos na nossa página. Desta forma, poderemos varrer cada um deles e perguntar "qual é o seu valor?". Assim poderemos montar as colunas da nossa tr. Vamos criar uma variável que receberá o nome do campos, que será um array. Cada campo será o resultado de um document.querySelector(), uma API do DOM que nos permite buscar um elemento usando um seletor CSS ou id do elemento.


var campos = [
    document.querySelector('#data'),
    document.querySelector('#quantidade'),
    document.querySelector('#valor')
];

console.log(campos);

No fim, adicionamos o console.log.

Vamos recarregar a página no navegador e ver como está o formulário agora.

formulario

A ordem do elementos no nosso array será: data, quantidade e valor. Já conseguimos imprimir os campos, agora, precisamos que ao clicarmos no botão "Incluir", o formulário seja submetido. Durante a submissão pegaremos o valor de cada input e montaremos dinamicamente a tr com cada coluna. Lembrando que como estamos usando HTML5, enquanto não preenchermos os campos, os dados do formulário não serão submetidos. Em seguida, no editor, pediremos para o document.querySelector() selecionar a classe .form, porque encontraremos a mesma no nosso formulário. Também adicionaremos um evento submit, usando o addEventListener. Quando o evento for disparado, executaremos uma função de callback que será chamada quando alguém clicar no formulário.

document.querySelector('.form').addEventListener('submit', function(event) {

  alert('oi');
});

Observe que adicionamos o alert que exibirá a mensagem oi.

alert oi

Nosso formulário está funcionando corretamente. Agora, sempre que formos submeter o nosso formulário, iremos submeter input do array e criar um tr com os valores dos mesmos. Em seguida, adicionaremos um variável chamada tr. Também criaremos um novo elemento, usando o document.createElement.

document.querySelector('.form').addEventListener('submit', function(event) {

  var tr = document.createElement('tr');
});

Estamos vendo como fazer isso com JavaScript. Agora, adicionaremos as tds da tr. Vamos usar o forEach() do JavaScript, uma maneira funcional de você iterar um array sem precisar do loop for:

document.querySelector('.form').addEventListener('submit', function(event) {

  var tr = document.createElement('tr');

  campos.forEach(function(campo) {

    })
});

A primeira vez que passarmos o forEach, teremos acesso ao primeiro elemento (#data), nas vezes seguintes acessaremos a #quantidade e o #valor. Depois, criaremos um td dinamicamente que não conterá nenhuma informação e informaremos que o conteúdo do mesmo será campo.value. Com o appendChild, adicionaremos a td como filho.

document.querySelector('.form').addEventListener('submit', function(event) {

  var tr = document.createElement('tr');

  campos.forEach(function(campo) {

      var td = document.createElement('td');
      td.textContent = campo.value;
      tr.appendChild(td);

    })
});

Até aqui, não fizemos nada muito avançado.

Então, quando chegarmos no fim do forEach(), ele terá criado uma td para cada campo. O que precisamos fazer é incluir uma tr na tabela.

Em seguida, abaixo do appendChild(),adicionaremos a variável tdVolume:

var tdVolume = document.createElement('td');
tdVolume.textContent = campos[1].value * campos[2].value;

tr.appendChild(tdVolume);

Agora, teremos que incluir a trno arquivo index.html como filha da tag <tbody>. Começaremos adicionando o <tbody> no arquivo JS, index.js.

var tbody = document.querySelector('table tbody');

document.querySelector('.form').addEventListener('submit', function(event) {

    var tr = document.createElement('tr');

    campos.forEach(function(campo) {
        var td = document.createElement('td');
        td.textContent = campo.value;
        tr.appendChild(td);
    });

O valor da td será o campo na posição 1, referente a #quantidade, multiplicado pelo campo na posição 2, referente ao #valor. Incluímos também a tr do appendChild. Por que não adicionamos o tbody dentro do querySelector()? Porque teríamos que buscar o tbody a cada submissão. Da forma como escrevemos o código, não teremos que refazer a busca no DOM.

Agora, no fim do arquivo adicionaremos o tbody seguido pelo appendChild():

tbody.appendChild(tr);

O código ficou assim:


var campos = [
    document.querySelector('#data'),    
    document.querySelector('#quantidade'),
    document.querySelector('#valor')

];

var tbody = document.querySelector('table tbody');

document.querySelector('.form').addEventListener('submit', function(event) {

    var tr = document.createElement('tr');

    campos.forEach(function(campo) {
        var td = document.createElement('td');
        td.textContent = campo.value;
        tr.appendChild(td);
    });

    var tdVolume = document.createElement('td');
    tdVolume.textContent = campos[1].value * campos[2].value;

    tr.appendChild(tdVolume);

    tbody.appendChild(tr);

});

Vamos recarregar a página e abrir o console. Ao preenchermos os campos com uma data aleatória, veremos que não aparecerá nada no console. Isso acontece, porque quando recarregamos a página, perdemos a tr. Por isso, adicionaremos o event.preventDefault(), assim indicaremos para o JavaScript que ele não submeta o formulário e evite que a página seja recarregada. Vemos que os valores aparecerão na tabela abaixo:


var campos = [
    document.querySelector('#data'),
    document.querySelector('#quantidade'),
    document.querySelector('#valor') 
];

var tbody = document.querySelector('table tbody');

document.querySelector('.form').addEventListener('submit', function(event) {

    event.preventDefault();

    var tr = document.createElement('tr');

    campos.forEach(function(campo) {
        var td = document.createElement('td');
        td.textContent = campo.value;
        tr.appendChild(td);
    });

    var tdVolume = document.createElement('td');
    tdVolume.textContent = campos[1].value * campos[2].value;

    tr.appendChild(tdVolume);

    tbody.appendChild(tr);

});

pagina não recarregada

Porém, assim que terminarmos de nos cadastrar, teremos que limpar os campos. E para melhorar a experiência do usuário, faremos com que o campo "Data" ganhe foco. Adicionaremos o campos[], indicando cada posição e no primeiro, vamos colocar o focus:

campos[0].value = '';
campos[1].value = 1;
campos[2].value = 0;

campos[0].focus();

Até agora nosso código ficou assim:

var tdVolume = document.createElement('td');
tdVolume.textContent = campos[1].value * campos[2].value;

tr.appendChild(tdVolume);

tbody.appendChild(tr);

campos[0].value = '';
campos[1].value = 1;
campos[2].value = 0;

campos[0].focus();

});

Faremos um novo teste, usando um data aleatória. Vemos que os dados aparecerão corretamente na tabela final e os campos do formulário estão limpos novamente. Aparentemente, tudo está funcionando corretamente, mas o código ainda tem pontos que precisam ser analisados.

Prólogo: regras, código e manutenção - Enrolando-se com o DOM

Já conseguimos incluir linhas na tabela com base na entrada do usuário. Mas verificando a especificação do sistema que pede a visualização da totalidade do volume no rodapé da tabela. Também precisamos que a data seja exibida no formato dia/mês/ano e que, após a criação da negociação, esta não seja modificada. A lista de negociação exibida na tela não poderá ter os dados alterados ou removidos, ela só poderá receber novos itens. Se quisermos uma nova lista, ela deverá ser criada do zero.

Observe que atualmente nosso código não indica onde está a negociação. E onde adicionaremos a totalidade do volume? Ou seja, o código não evidencia o que é uma negociação, e ainda mistura os dados de negociação com a apresentação dos mesmos na tabela. Seria interessante separarmos os dados da apresentação visual, desta forma conseguiríamos adicionar ao primeiro as regras de negócio. Com os dados separados, poderemos também modificar a utilização dos dados (tabela e lista). Por isso, iremos propor a utilização do modelo MVC (Model-View-Controller), declarando classes que representam nossos modelos (dados) e classes que representam nossas views (tela). As ações do usuário serão interceptadas por uma Controller, que irá alterar os dados, o Model, enquanto a View será atualizada para exibir o estado mais atual. Desta forma, as regras de negócio não estarão espalhadas pela View, elas estarão no modelo. Mais adiante, iremos implementar o modelo utilizando o paradigma da Orientação de Objetos.

Com o modelo já finalizado, e já podendo identificar a negociação, poderemos partir para a implementação da View e da Controller.

Então, mais adiante implementaremos a negociação usando o paradigma da Orientação de Objetos.

Sobre o curso JavaScript avançado I: ES6, orientação a objetos e padrões de projetos

O curso JavaScript avançado I: ES6, orientação a objetos e padrões de projetos possui 221 minutos de vídeos, em um total de 92 atividades. Gostou? Conheça nossos outros cursos de JavaScript em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda JavaScript acessando integralmente esse e outros cursos, comece hoje!

  • 1056 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 1056 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 1056 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 1056 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se
Procurando planos para empresas?
Acesso por 1 ano
Estude 24h/dia onde e quando quiser
Novos cursos toda semana