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,390 views
5,295 views

Published on

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,390
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
107
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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 />

×