Curso on-line de JavaScript. Desenvolvimento profissional de interfaces web - curso gratuito da HTML Academy, treinamento 9 semanas, data 15 de outubro de 2023.

Seção 1 Introdução ao JavaScript
Vejamos como o curso funciona, quais ferramentas você precisará e como configurá-las. Vejamos o que é a linguagem JavaScript, incluindo a especificação ECMAScript e o navegador.

Como funciona o curso? Assuntos organizacionais.

Esquema de trabalho do curso.
Revisão de projetos.
Critérios de qualidade.

Linguagem JavaScript

Especificação ECMAScript.
O que o navegador oferece ao JavaScript?

Noções básicas de JavaScript.

Sintaxe básica: parênteses, chaves, operadores, palavras reservadas, comentários.
Os blocos de construção básicos são variáveis ​​e funções.
Primitivos e tipos de dados complexos.

Ferramentas.

Editores de código.
Linters.
Servidor de desenvolvimento.

Seção 2 Recursos básicos de JavaScript
Vamos começar a estudar as construções básicas do JavaScript, especialmente as funções. Vejamos as nuances da declaração de variáveis. Vamos nos familiarizar com as ferramentas do desenvolvedor.

Variáveis.

Áreas de visibilidade.

Declarações condicionais.

Operador ternário.
Chave de operador de múltipla escolha.

Ciclos.

Elenco.

Funções.

Funções de seta.
Parâmetros de função padrão.

parâmetros restantes.

Elevação de variáveis ​​e funções.

Introdução ao DevTools (ferramentas para desenvolvedores).

Seção 3 Objetos e Matrizes
Seção sem live

Você se familiarizará com tipos de dados complexos: arrays e objetos. Aprenda a criá-los e gerenciá-los.

Tipos de dados complexos.

Matrizes.

Métodos básicos de array.

Objetos.

Retornos de chamada (funções de retorno de chamada).

Seção 4 Objetos e funções integrados
Vejamos os objetos e funções que existem na própria linguagem JavaScript. Vamos abordar o contexto de execução disso. Vamos executar e depurar o código no console de ferramentas do desenvolvedor.

Desestruturação.

sintaxe de propagação.

Objetos integrados e seus métodos.

Corda.
Número.
Boleano.
Data.
Matemática.

Operador novo.

Funções integradas em JavaScript.

Contexto da função.

A palavra-chave é esta.
Perda de meio ambiente.

Ferramentas de desenvolvimento. Usando a Consola.

Seção 5 Organização do Código
Vejamos o conceito de escopos. Vamos discutir o princípio DRY (não se repita) e como usá-lo para escrever menos código e ainda fazer mais. Vamos aprender o que são módulos e como “quebrar” código neles; O que é um ponto de entrada?

Áreas de visibilidade.

Escopo global da janela.
Fechamentos

Modularidade.

Reutilização de código, princípio DRY.
O conceito de módulo.
Ponto de entrada.
Módulos ECMAScript, sintaxe de importação e exportação.

DevTools: depuração de código usando fontes.

Seção 6 DOM e eventos
Seção sem live

Você se familiarizará com o Modelo de Objeto de Documento. Modelo de Objeto de Documento ou DOM). Considere como descrever as reações às ações do usuário: entrada de texto, clique em determinados elementos, rolagem, etc.

Árvore DOM.

documento é a raiz de tudo.
Estrutura de árvore DOM.
Pesquise elementos em uma página.
Gerenciando atributos de elemento.

Modelos e dados.

Eventos na página.

Manipuladores de eventos.

Seção 7 Manipulação de DOM
Vamos tentar criar, excluir, mover e manipular elementos DOM. Usando modelos, desenharemos os dados criados anteriormente.

Gerenciamento de árvore DOM.

Gerenciando atributos de elemento DOM.
Movendo elementos na árvore DOM.

Abordagens para a criação de elementos DOM.

Criando objetos DOM.
Gerenciamento de marcação: anexar, preceder, insertAdjacentHTML, innerHTML, textContent.

Modelagem.

Modelagem de string (strings de modelo).
Etiqueta especial

Seção 8 Trabalhando com Eventos
Cuidaremos da interação do usuário para que a página responda à entrada de texto nos formulários, clicando em determinados elementos, rolando, etc. Vejamos como tornar essa interação acessível.

Eventos.

Objeto de evento, gerenciamento de eventos: preventDefault e stopPropagation.
Fases do evento e delegação.
Eventos de teclado e acessibilidade.

Ciclo de eventos.

Validação de formulário.

Pristine é uma biblioteca de validação de formulários.

Validação usando expressões regulares.

DevTools: recursos de elementos (inspetor) para trabalhar com o DOM e eventos.

Seção 9 APIs externas e bibliotecas de terceiros
Vejamos como não “escrever sua própria bicicleta”, mas reutilizar a experiência e o código de outra pessoa. Vamos nos familiarizar com o conceito de interface de software. Interface de Programação de Aplicativo ou API), considere a API de bibliotecas JavaScript de terceiros e a API JavaScript de serviços de mapas. Vamos dar uma olhada rápida nas APIs que o navegador fornece aos desenvolvedores.

Conceito de API.

Serviços de mapas e sua API JavaScript.

OpenStreetMap.
Folheto.

Bibliotecas de terceiros.

Por que as bibliotecas são necessárias?
Como se conectar a um projeto.
noUiSlider.

Visão geral da API do navegador.

Seção 10 Rede
Seção sem live

Você examinará o protocolo HTTP e o formato de dados JSON por conta própria. Considere como a interação do usuário com o site muda ao usar a rede e o que pode dar errado.

Protocolo HTTP e formatos de dados.

JSON.

Manipulação de exceção.

tente...pegue.

Ferramentas para trabalhar com solicitações de rede.

Seção 11 Assincronia. Rede
Vejamos o conceito de assincronia e como alcançá-lo por meio de promessas. Prometo, prometo). Vamos conhecer as tecnologias que permitem fazer solicitações ao servidor a partir de um navegador. Vejamos como lidar com erros na prática ao trabalhar com a rede se algo der errado.

Assincronia.

setTimeout e setInterval.
Promessa.

Trabalhando com a rede.

buscar para entrar em contato com o servidor.
Tratamento de erros em solicitações.

DevTools: trabalhando com solicitações de rede na Rede.

Primeira semana de defesa
Conclusão dos trabalhos do projeto e preparação para a defesa final.

Seção 12 Feedback e Otimização
Otimizamos o trabalho com dados e eventos em nosso site. Implementamos feedback de interface claro e fácil de usar.

Trabalho avançado com arrays.

Ordenação.
Filtração.

Otimizações de desempenho.

Descartando quadros - estrangulamento.
Eliminação de salto - debounce.

API de arquivo.

URL.createObjectURL().
Leitor de arquivos.

Segunda semana de defesa
A primeira avaliação do projeto pelo mentor revisor de acordo com critérios de qualidade.

Terceira semana de defesa
Aprimorar o projeto com base nos comentários do mentor revisor e submetê-lo para uma segunda avaliação.

Seção 13 Final
Vamos resumir o curso e depois discutir os recursos do JavaScript que você pode encontrar no trabalho. O conceito de código legado e o que fazer com ele, com o código. Vamos dar uma olhada rápida nas ferramentas avançadas de desenvolvedor front-end para que você possa entender o que fazer em seguida.

JavaScript especial.

Modo estrito 'use estrito'.
Ponto-e-vírgula opcional.

Código legado.

jQuery.
var e escopo funcional.
XMLHttpRequest.

Funções construtoras.

Protótipos.

Ferramentas avançadas.

Webpack.

Transpiladores e polyfills.

Babel.

Quarta semana de defesa
Fazendo edições finais e recebendo uma nota final.