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.
HTML DOM<br />Ricardo Cavalcanti<br />kvalcanti@gmail.com<br />
Algumas Ferramentas<br />“Firebug integrates with Firefox to put a wealth of web development tools at your fingertips whil...
JavacriptBasico: tag <script><br /><script type="text/javascript">document.write("Hello World!");</script><br />É executad...
Javascript Básico: arquivo .js<br />Para incluir arquivos externos<br /><script type="text/javascript“ src="xxx.js"></scri...
Browser objects<br />
Browser objects: window<br />Representa uma janela aberta no browser<br />alert( msg )<br />confirm()<br />window.location...
Browser objects: window.navigator<br />Informações sobre o browser<br />cookieEnabled<br />appName<br />userAgent<br />
Browser objects: window.history<br />Para navegar pelo histórico<br />back()<br />forward()<br />go()<br />
DOM: introdução<br />DocumentObjectModel: um conjunto de interfaces<br />Uma API para HTML e XML<br />Representação estrut...
DOM: documento HTML<br /><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" <br />"http://www.w3.org/TR/html4/strict.dtd"><...
DOM: encontrando elementos<br /><input type="text" id="message" value="Messagesgoeshere..."/><br />...<br />var msgInput =...
DOM: elements<br /><p title="ToDo list">My tasks</p><br />Tipos de nodes<br />HTML element<br />Attribute<br />Textnode<br...
DOM: atributos de Element<br />nodeName<br />nodeValue<br />nodeType<br />parentNode<br />childNodes<br />firstChild<br />l...
DOM: objeto document<br />A raiz para a árvore DOM<br />document.getElementById<br />document.getElementsByName<br />docum...
DOM: manipulação do DOM<br />var item = document.createElement("li");<br />var text = document.createTextNode(message);<br...
DOM: element.style<br />É possível mudar o visual do elemento através do javacript<br />var el = document.getElementById(“...
Vamos praticar?<br />
Eventos<br />
Eventos: introdução<br />Para tornar páginas dinâmicas<br />Funções que executarão quando eventos ocorrerem<br />O retorno...
Eventos: definindo eventos<br />Inline, na tag html<br /><input type="text" size="30" id="email" onchange="checkEmail()"><...
Eventos: definindo eventos<br />Diretamente no elemento<br /><input type="text" size="30" id="email" ><br />var elEmail = ...
Eventos: modelos avançados<br />Adicionando um eventhandler<br />var addBtn = document.getElementById("addBtn");<br />//.....
Eventos: capturing & bubbling<br />Se ambos tiverem onclick, qual é executado primeiro?<br />Capturing: div a primeiro<br ...
Eventos: eventos de mouse<br />mousedown<br />mouseup<br />click<br />dblclick<br />mousemove<br />A cada pixel<br />mouse...
Eventos: teclas<br />keydown<br />keypress<br />keyup<br />functionnoNumbers(e) {var keynum,  keychar, numcheck;<br />if(w...
Eventos: outros eventos<br />blur<br />focus<br />
Vamos praticar?<br />
JQuery<br />
jQuery: introdução<br />Escondendo divs com javacript<br />divs = document.getElementByTagName(‘div’);<br />	for (i = 0; i...
jQuery: introdução<br />Escondendo divs com javacript<br />divs = document.getElementByTagName(‘div’);<br />	for (i = 0; i...
jQuery: filosofia<br />Encontre HTML<br />Faça alguma coisa<br />$() função seletora<br />O mesmo que jQuery()<br />Inclua...
Jquery: Seletores<br />
jQuery: seletores CSS<br />Um pouco de CSS<br />#myId encontra o elemento com o id ‘myId’<br />.myClass encontra todos os ...
jQuery: seletores<br />$(‘#myId’) pega o elemento com o id ‘myId’<br />$(‘li:first’) pega o primeiro li<br />$(‘tr:odd’) p...
jQuery: seletores CSS<br />Depois de achar<br />$(‘#myId’)<br />Fazer<br />$(‘#myId’).addClass(‘redbox’);<br />
jQuery: coisas legais<br />Métodos encadeados<br />$(“div”).addClass(“redbox”) .fadeOut();<br />Um método, várias aplicaçõ...
jQuery: métodos<br />MovingElements: <br />append(), appendTo(), before(), after(), <br />Attributes<br />css(), attr(), h...
jQuery: um pouco mais de $()<br />Você pode passar uma função para $() para ser executada quando a página carregar<br />$(...
Exemplo: criando e incluindo elementos<br />Pegue um elemento com o id foo e adicione html<br />$(“#foo”)<br /><html><br /...
Exemplo: criando e incluindo elementos<br />Pegue um elemento com o id foo e adicione html<br />$(“#foo”).append(“<p>test<...
Exemplo: criando e incluindo elementos<br />Pegue um elemento com o id foo e adicione html<br />$(“#foo”).append(“<p>test<...
Exemplo: movendo elementos<br />Mova os parágrafos para o elemento com id “foo”<br />$(“p”)<br /><html><br /><body><br /><...
Exemplo: movendo elementos<br />Mova os parágrafos para o elemento com id “foo”<br />$(“p”).appendTo(“#foo”);<br /><html><...
Exemplo: movendo elementos<br />Mova os parágrafos para o elemento com id “foo”<br />$(“p”).appendTo(“#foo”);<br /><html><...
jQuery: Atributos<br />.attr(‘id’)<br />.html()<br />.val()<br />.css(“top”)<br />.width()<br />.attr(‘id’,’foo’)<br />.ht...
jQuery: Atributos<br />Setar a bordapara 1px black<br />$(...).css(“border”, “1px solidblack”);<br />Setar várias propried...
jQuery: Atributos<br />Setar a bordapara 1px black<br />$(...).css(“border”, “1px solidblack”);<br />Setar várias propried...
jQuery: Eventos<br />Quando um botão é clicado, faz algo<br />$(“button”).click(function(){<br />something();<br />}); <br />
jQuery: Animação e efeitos<br />Efeitos <br />Hide e show<br />fadeIn e fade out<br />Slide up e slide down<br />
jQuery: Animação<br />Cada vez que clicar, alterne slide up e down o primeiro div<br />$(...).click(function(){<br />	$(“d...
jQuery: Transversing 1<br />Pegue todas as células anteriores a #myCell<br />$(“#myCell”)<br /><html><br /><body><br /><ta...
jQuery: Transversing 1<br />Pegue todas as células anteriores a #myCell<br />$(“#myCell”).prevAll()<br /><html><br /><body...
jQuery: Transversing 1<br />Pegue todas as células anteriores a #myCell<br />$(“#myCell”).prevAll().andSelf()<br /><html><...
jQuery: Transversing 2<br />Encontre os parágrafos a partir da tabela<br />$(“table”);<br /><html><br /><body><br /><table...
jQuery: Transversing 2<br />Encontre os parágrafos a partir da tabela<br />$(“table”).next();<br /><html><br /><body><br /...
jQuery: Transversing 2<br />Encontre os parágrafos a partir da tabela<br />$(“table”).next().find(“p”);<br /><html><br /><...
Upcoming SlideShare
Loading in …5
×

Html dom, eventos, jquery

5,472 views

Published on

Published in: Technology, Design
  • Be the first to comment

Html dom, eventos, jquery

  1. 1. HTML DOM<br />Ricardo Cavalcanti<br />kvalcanti@gmail.com<br />
  2. 2. Algumas Ferramentas<br />“Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page!”<br />http://getfirebug.com<br />
  3. 3. JavacriptBasico: tag <script><br /><script type="text/javascript">document.write("Hello World!");</script><br />É executadoassimquecarregado<br />Se o script alterar a página, coloque no final<br />Colocar no final é sempreuma boa prática<br />document.write()<br />Output para a página<br />
  4. 4. Javascript Básico: arquivo .js<br />Para incluir arquivos externos<br /><script type="text/javascript“ src="xxx.js"></script><br />Boa prática: minifique e unifique os arquivos .js<br />YUI Compressor e Google ClosureCompiler<br />
  5. 5. Browser objects<br />
  6. 6. Browser objects: window<br />Representa uma janela aberta no browser<br />alert( msg )<br />confirm()<br />window.location<br />Informações sobre a URL<br />window.screen<br />window.history<br />window.navigator<br />
  7. 7. Browser objects: window.navigator<br />Informações sobre o browser<br />cookieEnabled<br />appName<br />userAgent<br />
  8. 8. Browser objects: window.history<br />Para navegar pelo histórico<br />back()<br />forward()<br />go()<br />
  9. 9. DOM: introdução<br />DocumentObjectModel: um conjunto de interfaces<br />Uma API para HTML e XML<br />Representação estrutural do documento<br />Permite modificação do conteúdo e do visual<br />Liga as páginas aos scripts<br />
  10. 10. DOM: documento HTML<br /><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" <br />"http://www.w3.org/TR/html4/strict.dtd"><br /><html><br /> <head><br /> <meta http-equiv="Content-Type" <br />content="text/html; charset=UTF-8" /><br /> <title>ToDolist</title><br /> </head><br /> <body><br /> <div>What I need to do.</div><br /> <p title="ToDolist">Mylist:</p><br /> <ul><br /> <li>Finishpresentation</li><br /> <li>Cleanupmy home.</li><br /> <li>Buy a bottleofmilk. <br />(Maybebeerwillbebetter?;)<br /></li><br /> </ul><br /> </body><br /></html><br />html<br />Head<br />body<br />Meta<br />title<br />div<br />P<br />ul<br />title<br />li<br />
  11. 11. DOM: encontrando elementos<br /><input type="text" id="message" value="Messagesgoeshere..."/><br />...<br />var msgInput = document.getElementById("message");<br /><ul id="list"><br /> <li>Item 1</li><br /> <li>Item 2</li><br /> <li>Item 3</li><br /></ul><br />...<br />var items = document.getElementsByTagName("li");<br />
  12. 12. DOM: elements<br /><p title="ToDo list">My tasks</p><br />Tipos de nodes<br />HTML element<br />Attribute<br />Textnode<br />p<br />title<br />Textnode<br />ToDo list<br />My tasks<br />
  13. 13. DOM: atributos de Element<br />nodeName<br />nodeValue<br />nodeType<br />parentNode<br />childNodes<br />firstChild<br />lastChild<br />previousSibling<br />nextSibling<br />attributes<br />ownerDocument<br />
  14. 14. DOM: objeto document<br />A raiz para a árvore DOM<br />document.getElementById<br />document.getElementsByName<br />document.getElementsByTagName<br />
  15. 15. DOM: manipulação do DOM<br />var item = document.createElement("li");<br />var text = document.createTextNode(message);<br />item.appendChild(text);<br />parent.appendChild(item);<br />parent.insertBefore(someNode, item);<br />parent.innerHTML = parent.innerHTML + ("<li>"+message+"</li>");<br />parent.removeChild(item);<br />
  16. 16. DOM: element.style<br />É possível mudar o visual do elemento através do javacript<br />var el = document.getElementById(“myDiv”);<br />el.style.display= “none”;<br />
  17. 17. Vamos praticar?<br />
  18. 18. Eventos<br />
  19. 19. Eventos: introdução<br />Para tornar páginas dinâmicas<br />Funções que executarão quando eventos ocorrerem<br />O retorno da função pode bloquear a execução de uma ação posterior<br />
  20. 20. Eventos: definindo eventos<br />Inline, na tag html<br /><input type="text" size="30" id="email" onchange="checkEmail()"><br />functioncheckEmail(){<br /> //...<br />}<br />Não use! <br />É ruim escrever código javascript no meio do html<br />
  21. 21. Eventos: definindo eventos<br />Diretamente no elemento<br /><input type="text" size="30" id="email" ><br />var elEmail = document.getElementById(“email”);<br />elEmail.onchange = function(){ ...};<br />Posso executar a função do evento<br />elEmail.onchange()<br />thisé o elemento onde ocorreu o evento<br />Desvantagem: apenas uma função por evento.<br />
  22. 22. Eventos: modelos avançados<br />Adicionando um eventhandler<br />var addBtn = document.getElementById("addBtn");<br />//...<br />addBtn.addEventListener('click', <br />function(){<br /> //codegoeshere<br />},false);<br />addBtn.attachEvent('click', function(){<br /> //codegoeshere<br />});<br />thisé o elemento onde ocorreu o evento<br />
  23. 23. Eventos: capturing & bubbling<br />Se ambos tiverem onclick, qual é executado primeiro?<br />Capturing: div a primeiro<br />Bubbling: div b primeiro<br />W3C definiu as duas possibilidades<br />addEventListener(“click”, fn, boolean)<br />False: capturing<br />True: bubling<br />
  24. 24. Eventos: eventos de mouse<br />mousedown<br />mouseup<br />click<br />dblclick<br />mousemove<br />A cada pixel<br />mouseover<br />mouseout<br />
  25. 25. Eventos: teclas<br />keydown<br />keypress<br />keyup<br />functionnoNumbers(e) {var keynum, keychar, numcheck;<br />if(window.event) { // IE keynum = e.keyCode}<br />elseif(e.which) { //FF<br />keynum = e.which<br /> }<br />keychar = String.fromCharCode(keynum);<br />numcheck = /d/;return !numcheck.test(keychar);<br />}<br /><input type="text" onkeydown="return noNumbers(event)" /><br />
  26. 26. Eventos: outros eventos<br />blur<br />focus<br />
  27. 27. Vamos praticar?<br />
  28. 28. JQuery<br />
  29. 29. jQuery: introdução<br />Escondendo divs com javacript<br />divs = document.getElementByTagName(‘div’);<br /> for (i = 0; i < divs.length; i++) {<br />divs[i].style.display = ‘none’;<br />}<br />
  30. 30. jQuery: introdução<br />Escondendo divs com javacript<br />divs = document.getElementByTagName(‘div’);<br /> for (i = 0; i < divs.length; i++) {<br />divs[i].style.display = ‘none’;<br />}<br />Escondendo divs com jquery<br />$(‘div’).hide();<br />
  31. 31. jQuery: filosofia<br />Encontre HTML<br />Faça alguma coisa<br />$() função seletora<br />O mesmo que jQuery()<br />Incluam na página<br />http://code.jquery.com/jquery-1.4.3.min.js<br />Ou baixem em http://jquery.com/<br />
  32. 32. Jquery: Seletores<br />
  33. 33. jQuery: seletores CSS<br />Um pouco de CSS<br />#myId encontra o elemento com o id ‘myId’<br />.myClass encontra todos os elementos com a class ‘myClass’<br />table encontra todos os elementos com a tagtable<br />table#myId encontra a tabela com id ‘myId’<br />table #myId encontra o elemento com id ‘myId’ que esteja dentro de um table<br />
  34. 34. jQuery: seletores<br />$(‘#myId’) pega o elemento com o id ‘myId’<br />$(‘li:first’) pega o primeiro li<br />$(‘tr:odd’) pega todas as tablerows ímpares<br />$(‘a[target=_blank]’) pega todos os a cujo target é _blank<br />$(‘form[id^=step]’) pega todos os forms cujo id começa com ‘step’<br />
  35. 35. jQuery: seletores CSS<br />Depois de achar<br />$(‘#myId’)<br />Fazer<br />$(‘#myId’).addClass(‘redbox’);<br />
  36. 36. jQuery: coisas legais<br />Métodos encadeados<br />$(“div”).addClass(“redbox”) .fadeOut();<br />Um método, várias aplicações<br />$(...).html();<br />$(...).html(“<p>hello</p>”);<br />$(...).html(function(i, oldHtml){<br />return “<p>hello “ + i + “</p>”;<br /> });<br />
  37. 37. jQuery: métodos<br />MovingElements: <br />append(), appendTo(), before(), after(), <br />Attributes<br />css(), attr(), html(), val(), addClass()<br />Traversing<br />find(), is(), prevAll(), next(), hasClass()<br />Events<br />bind(), trigger(), unbind(),, click()<br />Effects<br />show(), fadeOut(), toggle(), animate()<br />
  38. 38. jQuery: um pouco mais de $()<br />Você pode passar uma função para $() para ser executada quando a página carregar<br />$(function(){<br />//executa quando o DOM estiver pronto<br />});<br />o mesmo que<br />$(document).ready(function(){ });<br />
  39. 39. Exemplo: criando e incluindo elementos<br />Pegue um elemento com o id foo e adicione html<br />$(“#foo”)<br /><html><br /><body><br /><div>jQuery</div><br /><div id=”foo”>example</div><br /></body><br /></html><br />
  40. 40. Exemplo: criando e incluindo elementos<br />Pegue um elemento com o id foo e adicione html<br />$(“#foo”).append(“<p>test</p>”);<br /><html><br /><body><br /><div>jQuery</div><br /><div id=”foo”>example</div><br /></body><br /></html><br />
  41. 41. Exemplo: criando e incluindo elementos<br />Pegue um elemento com o id foo e adicione html<br />$(“#foo”).append(“<p>test</p>”);<br /><html><br /><body><br /><div>jQuery</div><br /><div id=”foo”>example<p>test</p></div><br /></body><br /></html><br />
  42. 42. Exemplo: movendo elementos<br />Mova os parágrafos para o elemento com id “foo”<br />$(“p”)<br /><html><br /><body><br /><div>jQuery<br /><p>moving</p> <br /><p>paragraphs</p><br /></div><br /><div id=”foo”>example</div><br /></body><br /></html><br />
  43. 43. Exemplo: movendo elementos<br />Mova os parágrafos para o elemento com id “foo”<br />$(“p”).appendTo(“#foo”);<br /><html><br /><body><br /><div>jQuery<br /><p>moving</p> <br /><p>paragraphs</p><br /></div><br /><div id=”foo”>example</div><br /></body><br /></html><br />
  44. 44. Exemplo: movendo elementos<br />Mova os parágrafos para o elemento com id “foo”<br />$(“p”).appendTo(“#foo”);<br /><html><br /><body><br /><div>jQuery</div><br /><div id=”foo”>example<br /><p>moving</p> <br /><p>paragraphs</p><br /></div><br /></body><br /></html><br />
  45. 45. jQuery: Atributos<br />.attr(‘id’)<br />.html()<br />.val()<br />.css(“top”)<br />.width()<br />.attr(‘id’,’foo’)<br />.html(“<p>hi</p>”)<br />.val(“newval”)<br />.css(“top”, “80px”)<br />.width(60)<br />Get<br />Set<br />
  46. 46. jQuery: Atributos<br />Setar a bordapara 1px black<br />$(...).css(“border”, “1px solidblack”);<br />Setar várias propriedades css<br />$(...).css({ <br /> “background”: “yellow”, <br /> “height”: “400px”<br />});<br />Setar todos os href dos links para google.com<br />$(“a”).attr(“href”, “http://google.com”);<br />
  47. 47. jQuery: Atributos<br />Setar a bordapara 1px black<br />$(...).css(“border”, “1px solidblack”);<br />Setar várias propriedades css<br />$(...).css({ <br /> “background”: “yellow”, <br /> “height”: “400px”<br />});<br />Setar todos os href dos links para google.com<br />$(“a”).attr(“href”, “http://google.com”);<br />
  48. 48. jQuery: Eventos<br />Quando um botão é clicado, faz algo<br />$(“button”).click(function(){<br />something();<br />}); <br />
  49. 49. jQuery: Animação e efeitos<br />Efeitos <br />Hide e show<br />fadeIn e fade out<br />Slide up e slide down<br />
  50. 50. jQuery: Animação<br />Cada vez que clicar, alterne slide up e down o primeiro div<br />$(...).click(function(){<br /> $(“div:first”).slideToggle();<br />});<br />Animar os elementos até que tenham 300px de largura, em 0.5 segundos<br />$(...).animate({ “width”: “300px” }, 500);<br />Tire o foco do elemento realizando fade out até 30% de opacity em 0.5 segundos<br />$(...).fadeTo(500, 0.3);<br />
  51. 51. jQuery: Transversing 1<br />Pegue todas as células anteriores a #myCell<br />$(“#myCell”)<br /><html><br /><body><br /><table><tr><br /><td></td><br /><td></td><br /><td id=”myCell”></td><br /><td></td><br /></tr></table><br /></body><br /></html><br />
  52. 52. jQuery: Transversing 1<br />Pegue todas as células anteriores a #myCell<br />$(“#myCell”).prevAll()<br /><html><br /><body><br /><table><tr><br /><td></td><br /><td></td><br /><td id=”myCell”></td><br /><td></td><br /></tr></table><br /></body><br /></html><br />
  53. 53. jQuery: Transversing 1<br />Pegue todas as células anteriores a #myCell<br />$(“#myCell”).prevAll().andSelf()<br /><html><br /><body><br /><table><tr><br /><td></td><br /><td></td><br /><td id=”myCell”></td><br /><td></td><br /></tr></table><br /></body><br /></html><br />
  54. 54. jQuery: Transversing 2<br />Encontre os parágrafos a partir da tabela<br />$(“table”);<br /><html><br /><body><br /><table></table><br /><div><br /><p>foo</p><br /><span>bar</span><br /></div><br /></body><br /></html><br />
  55. 55. jQuery: Transversing 2<br />Encontre os parágrafos a partir da tabela<br />$(“table”).next();<br /><html><br /><body><br /><table></table><br /><div><br /><p>foo</p><br /><span>bar</span><br /></div><br /></body><br /></html><br />
  56. 56. jQuery: Transversing 2<br />Encontre os parágrafos a partir da tabela<br />$(“table”).next().find(“p”);<br /><html><br /><body><br /><table></table><br /><div><br /><p>foo</p><br /><span>bar</span><br /></div><br /></body><br /></html><br />

×