Curso Web Apps com JavaScript Moderno, DOM e jQuery

FD9E034F-C706-472D-ABA4-310433A703E5 Created with sketchtool. 32 horas/aula
Veja as próximas turmas

O que você vai fazer

Para quem é esse curso?

Este curso é para quem já possui uma boa base de front-end e quer começar a se aprofundar no maravilhoso mundo da Web Apps com JavaScript.

Para aproveitar melhor o curso recomendamos que você tenha conhecimento em

Curso Desenvolvimento Web com HTML, CSS e JavaScript

Conheça todos os cursos que fazem parte da Formação Front-end

Conheça a formação

Conteúdo detalhado do curso WD-47

    Sobre o curso

  1. Os exercícios
  2. O projeto
  3. Tirando dúvidas

    Páginas que interagem com o usuário

  1. O que é uma Web App?
  2. Como o usuário interage com uma Web App?
  3. Eventos e os Event Handler Attributes do HTML
  4. Acessando elementos e alterando o conteúdo da página com a DOM API

    Exercício: Removendo cartões com JavaScript

  1. Objetivo
  2. Passo a passo com código

    Juntando o HTML, o CSS e o JavaScript numa Web App.

  1. Constantes no JavaScript
  2. Funções no JavaScript
  3. O Hoisting de constantes e funções
  4. Condições e o if no JavaScript
  5. Separação de responsabilidades
  6. Evite código JavaScript complexo dentro do HTML
  7. A tag `<script>`
  8. Acessando qualquer elemento do DOM.
  9. Atributos do HTML no DOM
  10. Como adicionar mais de um Event Listener num elemento
  11. Alterando os estilos de um elemento do DOM
  12. As limitações do usuário e o Progressive Enhancement

    Exercício: Mudando o conteúdo do botão quando ele é clicado

  1. Objetivo
  2. Passo a passo com código

    Exercício: Mudando o layout dos cartões no mural

  1. Objetivo
  2. Passo a passo com código

    Exercício: Funcionalidades com Progressive Enhancement

  1. Objetivo
  2. Passo a passo com código

    Escopos no JavaScript

  1. O escopo global do navegador
  2. Escopo de função
  3. Escopo de bloco
  4. Variáveis no JavaScript. Do `var` ao `let`.
  5. Funções anônimas
  6. Encapsulamento com IIFE - Immediately Invoked Function Expressions

    Exercício: Animando a remoção do cartão

  1. Objetivo
  2. Passo a passo com código

    Lidando com mais de um elemento no DOM

  1. Acessando listas de elementos do DOM
  2. Navegando pelas listas de elementos com *for*

    Exercício: Adicionando evento de remover para todos os cartões

  1. Objetivo
  2. Passo a passo com código

    Formas de navegação pela página e acessibilidade

  1. Navegação via Mouse e Pointer Devices
  2. Navegação via teclado
  3. Navegação via teclado e acessibilidade
  4. Os eventos *focus* e *blur*
  5. Respondendo a eventos no CSS com pseudo classes
  6. *Bubbling* de eventos
  7. Os eventos focusin e focusout

    Exercício: Mostrar opções somente do cartão que estamos mexendo

  1. Objetivo
  2. Passo a passo com código

    Aprofundando no mundo dos Event Listeners

  1. Acessando mais informações do evento
  2. O custo dos Event Listeners
  3. Relembrando o Bubbling de eventos
  4. Reduzindo o número de Event Listeners com a Delegação de Eventos

    Exercício: Delegando quem vai mudar a cor dos cartões.

  1. Objetivo
  2. Passo a passo com código

    Exercício: Ajustando a navegação via teclado.

    Exercício: Removendo os cartões com delegate.

  1. Objetivo
  2. Passo a passo com código

    Recebendo informação do usuário e criando elementos dinâmicos no DOM.

  1. Acessando informações do usuário com formulários
  2. Criação e inserção de elementos no DOM

    Exercício: Validando antes de criar cartões.

  1. Objetivo
  2. Passo a passo com código

    jQuery

  1. Conhecendo o jQuery
  2. Eventos
  3. Navegação no DOM com jQuery
  4. Modificando o DOM com jQuery
  5. Funções mais comuns do jQuery
  6. Construindo elementos com jQuery

    Exercício: Usando jQuery para criar cartões de forma sensacional.

  1. Objetivo
  2. Passo a passo com código

    Exercício: Devolvendo os eventos para os cartões.

  1. Objetivo
  2. Passo a passo com código

    Arrays e Objetos no JavaScript

  1. Armazenando conjuntos de dados em Arrays
  2. Armazenando dados mais complexos em Objetos

    Exercício: Mostrando instruções para os usuários.

  1. Objetivo
  2. Passo a passo com código

    Exercício: Alert é horrível. As instruções podem ser cartões.

  1. Objetivo
  2. Passo a passo com código

    O Module Pattern.

  1. O que as IIFEs não resolvem
  2. O que são módulos
  3. Closures e o Escopo Global do navegador
  4. Criando módulos com o Module Pattern
  5. O Modo Estrito do JavaScript

    Exercício: O Module Pattern.

  1. Objetivo
  2. Passo a passo com código

    O JavaScript Moderno e a compatibilidade Cross-browser

  1. O ECMAScript e suas versões
  2. Javascript Moderno em browsers antigos
  3. Compilando Javascript Moderno para versões anteriores
  4. JavaScript que não roda no navegador
  5. O NPM
  6. Instalando módulos com o NPM
  7. Usando a CLI do Babel

    Exercício: JavaScript Moderno em navegadores pré-históricos.

  1. Objetivo
  2. Passo a passo com código

    AJAX e a vida assíncrona

  1. Requests HTTP com XHR
  2. JSON - JavaScript Object Notation
  3. Serialização e desserialização de JSON
  4. DOM, jQuery e os Array-like objects
  5. Concorrência no JavaScript e o Event Loop
  6. Same origin policy e CORS
  7. JSONP
  8. AJAX com jQuery

    Exercício: Trazendo as instruções com AJAX.

  1. Objetivo
  2. Passo a passo com código

    Exercício: Salvando os cartões no servidor.

  1. Objetivo
  2. Passo a passo com código

    Exercício: Carregando os cartões do servidor.

  1. Objetivo
  2. Passo a passo com código

    Compatibilidade Cross-browser com Polyfills

  1. W3C, ECMA e as novas APIs do JavaScript
  2. O que acontece nos navegadores antigos
  3. O prototype
  4. Polyfill - implementando o que não existe
  5. Como escolher polyfils
  6. Escolher polyfils com User-Agent detection
  7. O serviço polyfill.io

    Exercício: Compatibilidade nas APIs do JavaScript com Polyfill.

  1. Objetivo
  2. Passo a passo com código

    *Apêndice - Dando poderes ao conteúdo

  1. Transformando textos em outros textos
  2. String.replace()
  3. Expressão Regular em JavaScript
  4. Exercício: Cartões mais poderosos com Expressões Regulares
  5. Aprofundando em Arrays
  6. Exercício: Melhorando a vizualização dos cartões
  7. Mais funções do jQuery
  8. Expressões regulares dinâmicas
  9. Exercício: Buscando cartões com jQuery

    *Apêndice - Automatização de Tarefas

  1. O problema de ter vários arquivos
  2. Solucionando o problema com a concatenação de arquivos
  3. Automatização de Tarefas com Gulp
  4. Instalando o Gulp
  5. Gulpfile e Tasks
  6. Exercício: Instalando Gulp e a primeira task
  7. Copiando arquivos
  8. Exercício: Copy
  9. Dependências em tasks e a task Default
  10. Babel com Gulp
  11. Exercício: Melhorando nossas tasks
  12. Gulp watch
  13. Exercício: Automatizando a automatização com watch

* Apêndices são conteúdos adicionais que não fazem parte da carga horária regular do curso. São conteúdos extras para direcionar seus estudos após o curso.

O que os alunos falam

Rogerio Pio Nunes

Professores muito bons e atenciosos, atendem as solicitações para tirar dúvidas, dão conselhos de mercado. Excelente!

Laura Nardi Leamari

Aprender de maneira clara e direta sobre todo o assunto, com maneiras diferentes também de como é passado pela apostila. Foram passadas diferentes inf...

Lucas Ap Oliveira da Silva

Parece estranho mas o que se aprende nos cursos da Caelum é simplesmente o que vai diferenciar você de um outro profissional, seguir boas práticas, se...

Próximas turmas

Selecione a cidade e os períodos de sua preferência

Qual cidade você pode ir?
Quais períodos você prefere?
Ver turmas encontradas

Nós encontramos essas turmas:

Não achou a turma ideal pra você? Consulte outras turmas e horários.

Entre em contato

Não encontrou o curso que procura? Conheça a Alura, a plataforma online da Caelum

Conheça a Alura