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