Iniciando com jQuery

2.535 visualizações

Publicada em

Palestra ministrada na Stoodos

http://www.stoodos.com/

Publicada em: Tecnologia
0 comentários
2 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
2.535
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
124
Comentários
0
Gostaram
2
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Iniciando com jQuery

  1. 2. Quem é esse cara? <ul><li>Formado em Tecnologia de Sistemas pra Internet. </li></ul><ul><li>Programa desde os 13 anos. </li></ul><ul><li>Programador back-end. </li></ul><ul><li>Já trabalhou em empresas, órgãos governamentais e startups como: INCRA, 3Up Tecnologia, Onsee Digital Signage. </li></ul><ul><li>Atualmente é CEO/Founder da Stoodos. </li></ul>
  2. 3. O que vamos ver? <ul><li>O que é jQuery? </li></ul><ul><li>Porque usá-lo </li></ul><ul><li>Para que usá-lo? </li></ul><ul><li>Como usa-lo? </li></ul><ul><li>Seletores. </li></ul><ul><li>jQuery e o CSS. </li></ul><ul><li>Efeitos em jQuery. </li></ul><ul><li>Ajax com jQuery. </li></ul><ul><li>Bônus: </li></ul><ul><li>Principais plugins do jQuery. </li></ul>
  3. 4. O que é jQuery? <ul><li>Criada por John Resig. </li></ul><ul><li>Biblioteca JavaScript. </li></ul><ul><li>Uma forma simples de escrever códigos JavaScript. </li></ul><ul><li>Free – MIT e GPL </li></ul><ul><li>Conformidade com os padrões web. </li></ul><ul><li>www.jquery.com </li></ul>
  4. 5. Por que usá-lo? <ul><li>JavaScript: </li></ul><ul><li>jQuery </li></ul>
  5. 6. Para que usá-lo <ul><li>Adicionar efeitos visuais e animações. </li></ul><ul><li>Acessar e manipular o HTML. </li></ul><ul><li>Implementar códigos Ajax. </li></ul><ul><li>Prover interatividade. </li></ul><ul><li>Alterar conteúdos. </li></ul><ul><li>Compatibilidade com navegadores. </li></ul><ul><li>Simplificar tarefas JavaScript. </li></ul>
  6. 7. Como usá-lo? <ul><li>Baixar o jQuery em www.jquery.com </li></ul><ul><li>Incluir o arquivo .js em seu projeto. </li></ul><ul><li>Chamar o jQuery no cabeçalho do HTML </li></ul><ul><li>Ex.: </li></ul><ul><li>Programar em Jquery. </li></ul>
  7. 8. Alguns adendos <ul><li>Construtor $() ou jQuery(). </li></ul><ul><li>Encadeamento: </li></ul><ul><li>Ex.: </li></ul>
  8. 9. Seletores <ul><li>Seletores CSS 1-3 funcionam em jQuery. </li></ul><ul><li>O jQuery possui alguns seletores próprios. </li></ul><ul><li>http://api.jquery.com/category/selectors/ </li></ul><ul><li>Ex. de seletores CSS: </li></ul><ul><li>Ex. de seletores próprios: </li></ul>
  9. 10. Eventos <ul><li>Mesmos do JavaScript. </li></ul><ul><li>blur(), change(), click(), dbclick(), focus(), hover(), keydown(), keypress(), keyup(), load(), select(), submit() … </li></ul><ul><li>http://api.jquery.com/category/events/ </li></ul><ul><li>Ex.: </li></ul>
  10. 11. jQuery e o CSS. <ul><li>Muito simples manipular CSS por jQuery. </li></ul><ul><li>Ex.: </li></ul>
  11. 12. Efeitos em jQuery. <ul><li>Métodos que possibilitam a criação de efeitos customizados. </li></ul><ul><li>Métodos com efeitos nativos. </li></ul>
  12. 13. Efeitos em jQuery. <ul><li>animate() - Criar animações personalizadas. </li></ul><ul><li>Ex.: </li></ul>
  13. 14. Efeitos em jQuery. <ul><li>delay() - Seta um tempo de espera entre execuções. </li></ul><ul><li>Ex.: </li></ul><ul><li>fadeIn(), fadeOut(), fadeToggle() – Aparecer e desaparecer. </li></ul><ul><li>Ex.: </li></ul>
  14. 15. Efeitos em jQuery. <ul><li>hide(), show(), toggle() </li></ul><ul><li>Ex.: </li></ul><ul><li>slideDown(), slideUp(), slideToggle() </li></ul><ul><li>Ex.: </li></ul>
  15. 16. Ajax com jQuery. <ul><li>Muito, muito, mas muito mais simples mesmo que JavaScript puro. </li></ul><ul><li>Muito mais organizado que em JavaScript puro. </li></ul>
  16. 17. Ajax com jQuery. <ul><li>load() – Lê dados servidor e os carrega no elemento HTML selecionado. </li></ul><ul><li>Ex.: </li></ul><ul><li>ajax() – Realiza requisições ajax. </li></ul><ul><li>Ex.: </li></ul>
  17. 18. Plugins do jQuery – O que são? <ul><li>Códigos jQuery para ajudar o desenvolvedor a fazer algo (validar formulários, upload de arquivos..). </li></ul><ul><li>Vantagem de ter muita coisa boa já implementada. </li></ul><ul><li>Encurta o tempo de desenvolvimento. </li></ul>
  18. 19. Como usar um plugin? <ul><li>Download dos arquivos do plugin (imagens, .js, .css, .swf...) </li></ul><ul><li>Chamar os arquivos necessários na página (.js, .css …) </li></ul><ul><li>Utilizar o plugin. </li></ul>
  19. 20. Bons plugins jQuery <ul><li>Validate – Validar formulários </li></ul><ul><li>Fancybox – Lightbox genérico </li></ul><ul><li>jQuery UI – Interações com o usuário </li></ul><ul><li>MeioMask – Máscaras (CPF, Telefone ...) </li></ul>
  20. 21. Contatos <ul><li>@tiagobutzke </li></ul><ul><li>[email_address] </li></ul>

×