Minicurso de jQuery

Minicurso de jQuery que ministrei no I Encontro de Negócios e Gestão da UNDB

Transcript

1. $('#title').val('jQuery'); Thiago Nunes de Sousa
2. $('#title').val('jQuery');  Thiago Nunes de Sousa  Analista de Tecnologia da Informação  Núcleo de Tecnologia da Informação – UFMA  (HTML+CSS+JS) + (JSF+JBOSS+Postgres)  … PHP, MySql, SQLite, VB.Net, SQLServer, REST, Android …  Contato:  @thiago_tns  www.facebook.com/thiagotns  thiagonunes.tns@gmail.com
3. Quem usa jQuery?
4. Quem usa jQuery?  E mais 19.000.000 de sites Fonte: http://trends.builtwith.com/
5. O que é jQuery?  Biblioteca Javascript  OpenSource  Cross-Browser  Motivado pela Preguiça Escreva menos, faça mais!
6. Para que serve?  Manipular documentos HTML  Controlar o DOM  Criar animações  Sumir e aparecer com as coisas da tela  Manipular eventos (não obstrutivo)  Trabalhar com Ajax  Desenvolver plugins maneiros
7. JavaScript
8. JavaScript (JS)  1° - JS não é Java  LP interpretada pelo Browser (Client Side)  Cada Browser interpreta do seu jeito (velocidade)  Pode ser desabilitado pelo usuário (cuidado com as validações)
9. JavaScript (JS)  Manipulação do DOM, tratamento de eventos, AJAX, animações, etc...
10. JavaScript (JS)  Navegador sem JS  Navegadores antigos (PC ou celular)  Leitores de Tela (deficientes visuais)  Robôs de indexação 
11. Document Object Model
12. Document Object Model  Plataforma que permite que programas e scripts acessem e atualizem dinamicamente conteúdo, estrutura e estilo de documentos HTML e XML  É uma padronização de uma API (interface), precisa ser implementado  Possui várias implementações
13. Árvore DOM
14. Árvore DOM
15. JS x DOM  JS manipula o HTML  DOM é a API para manipulação de HTML e XML  JS usa o DOM para acessar elementos da página HTML, alterá-los e tratar seus eventos
16. Finalmente... $(document).ready(function() { // script goes here });
17. jQuery  O que fazer com o jQuery?  Encontrar (elementos no HTML)  Modificar (conteúdo do HTML)  ”Escutar” (eventos disparados)  Animar (conteúdo na página)
18. jQuery  Função jQuery:  jQuery('parametro');  $('parametro');
19. Selecionando um elemento  $('h1'); ou jQuery('h1);  $('p); ou jQuery('p');
20. Pegando o texto do elemento  $('h1').text();  >> Jquery: write less, do more
21. Alterando o texto  $('h1').text('Jquery: escreva menos');
22. Esperando pelo documento  jQuery(document).ready();  Disparado quando o DOM estiver totalmente carregado no navegador
23. Primeiros Passos  Baixar a versão mais atual da biblioteca em:  http://jquery.com/  Adicionar um link para o jquery no HTML  <script src="jquery.min.js"></script>  Adicionar um link para o seu aquivo JS  <script src="meu_script.js"></script>
24. Seletores CSS  p{ … }  .centro{ … }  .centro ul .ativo {…}  #form-principal {...} JQuery  $('p');  $('.centro');  $('.centro ul .ativo');  $('#form-central');  Utilizar seletores css para achar elementos
25. Buscando no DOM  $("#form-principal li");  Seleciona todos os elementos <li> que estejam dentro de #form-principal  $("#form-principal > li");  Seleciona todos os <li> imediatamente a baixo de #form-principal  $(".texto, .numero");  Seleciona todos os elementos com a classe ”texto” e mais todos os elementos com a classe ”numero”  $("li:first");  Seleciona o primeiro <li> do documento
26. Principais Métodos  .addClass('classe') => adiciona uma classe css  .removeClass('classe') => remove uma classe  .toggleClass('classe') => adiciona, remove, adiciona, remove, …  .hide() => ”esconde” um elemento  .show() => mostra um elemento  .value() => pega o valor de um elemento  .value(”valor”) => seta o valor de um elemento
27. Eventos  Como escutar eventos?  Selecione o elemento e chame o método do evento que deseja, passando a função que irá tratá-lo  Como assim?  Ex.: tratar o evento de click em elementos <a> $('a').click(function(){ alert('Fui Clicado'); });
28. Principal Eventos  .click()  .dblclick()  .change()  .focus()  .hover()  .keydown()  .keyup()  Lista Completa: http://api.jquery.com/category/events/
29. Hora de Codar
30. Plugins
31. Os famosos plugins  JQuery possui uma infinidade deles (sério)  Se você pensar em fazer algo com flash, dê um tempo e procure um plugin jQuery que faça  Se não achar um pronto, faça o seu e depois distribua pra comunidade =)  Temos plugin para: galeria de imagens, vídeos, banners, slideshow, paralaxx, mapas, zoom, corte de imagem, embelezar formulário, formatar campos, etc...
32. Exemplos de plugins e sites  zurb.com/playground/orbit-jquery-image-slider  http://galleria.io/  www.gougouzian.fr/projects/jquery/moodular/  http://www.turnjs.com/  http://tympanus.net/Tutorials/ParallaxSlider/  http://www.bakeagency.it/  http://www.nike.com/jumpman23/aj2012/  http://www.bountybev.com/home.php
33. JQuery UI
34. O que é ?  Conjunto de interfaces, efeitos, widgets feito com jQuery  Exemplo de componentes:  Menu  Datepicker  Autocomplete  Tabs  Vários Efeitos  Etc.
35. Exemplo  Datepicker  Efeitos
36. JQuery Mobile
37. JQuery Mobile  Framework Web otimizado para interfaces touch de smatphones e tablets  Feito com jQuery e jQuery UI  Exemplo.:  http://m.disneyworld.disney.go.com/  http://m.stanford.edu/
38. Exemplo
39. E o que mais tem de legal ?  Ajax  Canvas(HTML5) + jQuery  Teste automáticos com Jasmine  Otimização/Performance  Acessibilidade!  Entre outros
40. Referências  http://tableless.com.br/  http://jquery.com/  http://jqueryui.com/  http://jquerymobile.com/  http://en.wikipedia.org/wiki/JQuery  http://en.wikipedia.org/wiki/JavaScript  http://www.w3.org/DOM/  http://try.jquery.com/
41. Perguntas ? Obrigado!
42. Not Bad