Formação Front-end

Curso Programação front-end com JavaScript e jQuery

  • Linguagem JavaScript em detalhes;
  • Orientação a objetos, modularização e organização de código;
  • Uso do jQuery e plugins avançados;
  • Construção de plugins jQuery para reaproveitamento;
  • Sites adaptados pra mobile, com suporte a eventos touch;
  • Páginas dinâmicas com AJAX;
  • Uso de MVC com AngularJS;
  • Build e otimização com Grunt.js;
  • Curso de JavaScript completo pra você dominar a programação JS.

Sobre o curso WD-47

Um curso de programação front-end para quem busca melhorar a interação dos usuários nas suas aplicações Web. São abordados tópicos da linguagem JavaScript e como ela interage com o navegador para criar funcionalidades complexas no cliente.

Durante o curso, abordamos desde JavaScript puro usando APIs direto no navegador até o uso de jQuery e suas facilidades, incluindo a criação do próprio plugin jQuery. Focamos bastante em tópicos essenciais para um sistema de qualidade, como testes com Jasmine e uso de módulos e outros padrões de organização de código.

Além disso, o curso aborda ferramentas e técnicas modernas reconhecidas pelo mercado. Vemos MVC usando o framework AngularJS. E tratamos de otimização e build do projeto com Grunt.js.

Veja também a ementa detalhada do curso.

Pré-requisitos

Curso Desenvolvimento Web com HTML, CSS e JavaScript e conhecimento de programação em alguma linguagem (como Java, Ruby, PHP).

32horas aula

A opinião de quem fez

Gostei muito do curso e espero voltar o mais breve possível.

Ednei Neto, Caelum RJ em 13/09/2013

A Caelum é uma instituição realmente fantástica. Pude comprovar isso. A infraestrutura e a didática do professor é nota 10. Fiz o curso de Front-end Avançado e gostei bastante. Pretendo fazer um curso de Java que é o ponto forte da Empresa

Dheyfesson Pinheiro, Caelum Brasília em 02/08/2013

Já havia feito vários cursos em outras escolas, porém aqui, especialmente com a maneira com que o curso é conduzido, consegui assimilar tudo o que precisava para por em prática em meus projetos.

Claudemir Lima em 29/07/2013

Próximas turmas

DataPeríodoCidadeComentário
22/04 a 02/05Noturno (19h às 23h)Brasília
22/04 a 02/05Noturno (19h às 23h)São Paulo
05/05 a 09/05Integral (9h às 17h)São Paulo
26/05 a 06/06Noturno (19h às 23h)São Paulo
07/06 a 28/06Sábado (9h às 17h)São Paulo
21/06 a 19/07Sábado (9h às 17h)Rio de JaneiroInscrições abertas.
30/06 a 03/07Integral (9h às 17h)Rio de JaneiroInscrições abertas.
07/07 a 10/07Integral (9h às 17h)São Paulo
21/07 a 31/07Noturno (18h às 22h)Rio de JaneiroInscrições abertas.

Não achou a turma ideal pra você? Entre em contato e consulte outras turmas e horários.

Fale com a gente.

Dúvidas, reservas ou um papo com um instrutor?

Conteúdo detalhado

Sobre o curso

  1. Os exercícios
  2. Tirando dúvidas

JavaScript Fundamental

  1. Por que aprender JavaScript?
  2. Características da linguagem
  3. Variáveis e atribuições
  4. Para saber mais: o console do navegador
  5. Tipos de dados
  6. Operadores
  7. Exercícios: formatando um número
  8. Comparações
  9. Blocos condicionais
  10. Funções
  11. Exercícios: tornando nosso formatador reutilizável
  12. Array
  13. Blocos de Repetição
  14. Expressão Regular
  15. Exercícios: trabalhando com expressão regular

JavaScript e o navegador

  1. DOM: sua página no mundo JavaScript
  2. Manipulando elementos da nossa página
  3. Exercícios: manipulando elementos
  4. API do navegador: DOM e BOM
  5. Exercício - Explorando os objetos do DOM e do BOM
  6. Lidando com eventos
  7. Exercícios: lidando com eventos
  8. O projeto Mirror Fashion
  9. Exercícios: entendendo a estrutura do projeto
  10. O primeiro problema: carrinho de compras
  11. Exercícios: filtrando o que é digitado
  12. Navegando pelo DOM
  13. Exercícios: navegação no DOM e mais manipulação de elementos
  14. JavaScript e CSS
  15. Exercícios: CSS através de JavaScript
  16. Progressive enhancement
  17. Criando elementos dinamicamente
  18. Exercícios: novo elemento com JavaScript não-obstrutivo
  19. Compatibilidade do nosso código

jQuery

  1. Conhecendo o jQuery
  2. Eventos
  3. Funções mais comuns
  4. Exercícios: mais uma funcionalidade, agora com jQuery
  5. Construindo elementos com jQuery
  6. Exercícios: migrando parte de nosso código para jQuery
  7. Mecanismo de delegação de eventos
  8. Exercício - Delegação de Eventos com jQuery
  9. AJAX com jQuery
  10. $.getJSON
  11. Exercício - Obtendo dados de um Web Service via AJAX
  12. Eventos customizados
  13. Exercício - Desacoplando nosso código através de evento customizado
  14. Um pouco mais de jQuery
  15. Exercícios: filtrando resultado no lado do cliente
  16. A função data
  17. Exercícios: votação de sugestões

Organização de código com módulos e stric mode

  1. A palavra chave this
  2. Trabalhando ainda mais com objetos
  3. Exercícios: organizando nosso código através de objetos
  4. Para saber mais: outro tipo de bloco de repetição
  5. Lidando com o escopo de suas variáveis
  6. Exercícios: controlando melhor o escopo de suas variáveis
  7. Module Pattern
  8. Exercícios: nosso primeiro módulo
  9. Declarando as dependências do módulo
  10. IIFEs com jQuery
  11. Exercícios: isolando o restante do nosso código
  12. Use strict
  13. Exercícios: ativando "strict mode"

Plugins com jQuery

  1. Autocomplete com jQuery UI
  2. Exercícios: evitando sugestões duplicadas
  3. jQuery Mobile: lidando com eventos "touch"
  4. Exercício Opcional: adicionando produtos na sacola com eventos "touch"
  5. Criando seu próprio plugin
  6. Exercício - criando nosso primeiro plugin do jQuery

Um pouco mais de Orientação a Objetos

  1. Função como "classe"
  2. Encapsulamento
  3. Exercícios: o objeto "Sacola"
  4. Para saber mais: herança em JavaScript
  5. Para saber mais: sobrecarga de funções

AngularJS: o framework MVC da Google

  1. Características
  2. Organização do projeto
  3. Exercícios: primeira página com AngularJS
  4. A diretiva ng-repeat
  5. Requisições AJAX com $http
  6. Exercícios: painel de recomendações com AngularJS
  7. A diretiva ng-model
  8. Exercícios: data binding com ng-model
  9. Exercícios opcionais: melhorando o sistema

Grunt: automação de build de front-end

  1. Um pouco sobre Node.js
  2. Instalando Grunt
  3. Preparando o projeto para usar Grunt
  4. Exercícios: primeiros passos com Grunt
  5. Automatizando merge, minificação de scripts e CSS's
  6. Exercícios: merge e minificação de scripts/css's automáticos
  7. Para saber mais: uglify e cssmin de outros arquivos
  8. Minificação de imagens
  9. Exercícios - Minificação de imagens automática
  10. Watch e LiveReload com grunt
  11. Exercícios - livereload
  12. Para saber mais: LESS, compilação em tempo real
  13. Exercício opcional: compilando LESS com grunt watch

Apêndice - TDD com Jasmine

  1. Criando sua suíte de testes
  2. Teste primeiro, implemente depois
  3. Exercícios: TDD com Jasmine
  4. Para saber mais: testes com phantomjs
  5. Exercício opcional: executando testes com phantomjs através do Grunt

Apêndice - Lidando com diferentes navegadores sem jQuery

  1. Browser Object Model - BOM
  2. Feature Detection
  3. HTML5: LocalStorage e SessionStorage
  4. Exercícios: armazenando informações no cliente
  5. Tapando "buracos" com Pollyfill
  6. Modernizr
  7. Exercício opcional: utilizando Modernizr


* Os apêndices listados são conteúdos adicionais que não fazem parte do curso regular.