Rodrigo Brito

Seu primeiro passo começa aqui!

Esta série tem como objetivo abordar o JavaScript ES6 de forma completa, do início ao avançado para permitir que você possa não só entender o universo quase infinito do Javascript puro, mas também conhecer os principais padrões de uso, manipular e criar conforme as suas necessidades.

Como pré-requisitos, você deverá saber ao menos o básico de HTML e CSS para acompanhar o conteúdo, pois o foco aqui será simplesmente o JS raiz.

As ferramentas necessárias para o estudo e confecção dos módulos e projetos que serão desenvolvidos serão as seguintes:

• Sua IDE preferida (Visual Studio Code, NetBeans etc). Eu utilizo o NetBeans e o Visual Studio Code (prefiro este último);
• Node.js;
• NPM; e
• Git.

O projeto desenvolvido será uma espécie de página de portfólio, bem simplificada, mas com bastantes recursos em JS.

A grade da série é a seguinte:

• 01 - Introdução: linguagem e configurações de ambiente;
• 02 - JavaScript básico: variáveis, tipos de dados, números e operadores, boolean e condicionais, funções, objetos, arrays, loops e escopo;
• 03 - DOM (Modelo de Objeto de Documento): básico sobre DOM, HTML e CSS do projeto, seleção de elementos, arrow function, classes e atributos, dimensões e distâncias, eventos, transversing e manipulação, navegação por tab, accordion list, scroll suave para link interno e animação ao scroll;
• 04 - Objetos: funções construtoras, prototype, object (native, host e user), string, number e math, array, iteração em array, function e object;
• 05 - Efeitos no DOM: dataset, modules, modal, tooltip, dropdown menu e event bubble, setTimeout e setInterval, menu mobile, animação de números, date object, forms e localStorage;
• 06 - JavaScript Assíncrono: assincronismo, promises, fetch, JSON, API e HTTP, async/await, números fetch e bitcoin fetch;
• 07 - Classes: classes, get e set e extends;
• 08 - JavaScript avançado: function expression, factory function, destructuring e rest e spread;
• 09 - Regular Expression: seleção, substituição e métodos;
• 10 - Automação Front End: Webpack; e
• 11 - Projeto Final: Refatoração do projeto utilizando classes (scroll suave, accordion, tabnav, modal, tooltip, animação de números, numbers fetch, animação ao scroll, debounce, dropdown menu, menu mobile).

O arquivo final contém uma adição de um plugin de slide, que pode ser modificado ou reaproveitado em outros projetos.

A motivação para esta série é a propagação do conhecimento de forma gratuita, para que possamos evoluir como desenvolvedores e projetar de forma padronizada, segura e eficiente.

Para qualquer necessidade, estarei a disposição por meio dos contatos aqui do site.

Desde já, meu muito obrigado!