Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

J query javascript para seres humanos

215 views

Published on

  • A conversão do keynote não ficou tão boa. A apresentação em PDF e os arquivos de exemplo estão disponíveis em meu site http://everson.com.br/jQuery-JavaScript-para-seres-humanos
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

J query javascript para seres humanos

  1. 1. JavaScript para seres humanosEverson Santos Araujo everson@vuse.com.br http://everson.com.br http://vuse.com.br
  2. 2. JavaScript• Linguagem de alto nível criada para ser executada pelo navegador de internet e oferecer interatividade à documentos HTML• Hoje existe em aplicações desktop, móveis e servidores 2
  3. 3. Navegadores 3
  4. 4. jQuery• Biblioteca JavaScript rápida, pequena e com vastos recursos• Possui uma interface fácil de usar e que funciona igualmente na grande maioria dos navegadores• CDN Google • //ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js 4
  5. 5. HTML - DOM<html><head> <title>Título</title></head><body> <h1>Teste</h1> <ul> <li>Item 1</li> <li>Item 2</li> </ul></body></html> 5
  6. 6. HTML - DOM document html head title Título<html><head> <title>Título</title> body h1 Teste</head><body> ul li Item 1 <h1>Teste</h1> <ul> <li>Item 1</li> li Item 2 <li>Item 2</li> </ul></body></html> 6
  7. 7. HTML - DOM document html head title Título body h1 Teste ul li Item 1 li Item 2$(ul).append(<li>Item 3</li>); li Item 3 7
  8. 8. HTML - DOM document html head title Título body h1 Teste ul li Item 1 li Item 2$(h1).remove(); li Item 3 8
  9. 9. Antes de continuar...Não serão apresentadas todas asfunções disponíveis na bibliotecaAs funções iniciadas com $ sãochamadas diretamente semprecisar ser direcionada com umseletor obrigatório recomendadoA utilização de parâmetros seráidentificada com cores opcional 9
  10. 10. Seletores$(#id).append(Ola!); $(div .aqui).append(!);$(.clas).append(Mundo); $(li:last).append(X); $(input[name=nome]).val(A); $(.c1, .c2).append(?); 10
  11. 11. eventos 11
  12. 12. Manipulação 12
  13. 13. Exemplo<html><head> $(h1).hover(function() { <style type="text/css"> $(this).toggleClass(red); .red { }).click(function() { background: red; $(this).append(<u>!!</u>); } }); </style> $(input).keypress(function(e) {</head> console.log(e.charCode);<body> }).dblclick(function() { <h1>Teste</h1> $(this).addClass(red) <form> }); <input id="texto"> $(form).submit(function(e) { <input type="submit" e.preventDefault(); value="Enviar"> console.log(Enviar); </form> });</body></html> 13
  14. 14. Efeitosms - tempo em milissegundo 14
  15. 15. Exemplo $(#mo).click(function() { $(div).show(); }); $(#es).click(function() {<button id="mo">show</button> $(div).hide();<button id="es">hide</button> });<button id="fi">fadeIn</button> $(#fi).click(function() {<button id="fo">fadeOut</button> $(div).fadeIn(2000);<button id="sd">slideDo</button> });<button id="su">slideUp</button> $(#fo).click(function() {<div> $(div).fadeOut(2000); <p>Lorem ipsum</p> }); <p>Lorem ipsum</p> $(#sd).click(function() {</div> $(div).slideDown(2000); }); $(#su).click(function() { $(div).slideUp(2000); }); 15
  16. 16. Ajax 16
  17. 17. Exemplo ex.html<button id="lo">load</button><button id="po">$.post</button> <h1>Exemplo</h1><div id="re"></div> <p>Lorem</p> ex.php$(#lo).click(function() { $(#re).load(ex.html);}); <?php$(#po).click(function() { if (count($_POST)) { $.post(ex.php, { echo "<h1>Dados teste: Oi recebidos</h1><ul>"; }, foreach ($_POST as $k=>$v) { function(r) { echo "<li>" . $k . " = " . $v . "</li>"; $(#re).html(r); } }); echo "</ul>";}); } 17

×