Html dom, eventos, jquery

  • 5,122 views
Uploaded on

 

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
5,122
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
105
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. HTML DOM
    Ricardo Cavalcanti
    kvalcanti@gmail.com
  • 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
  • 5. Browser objects
  • 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
  • 7. Browser objects: window.navigator
    Informações sobre o browser
    cookieEnabled
    appName
    userAgent
  • 8. Browser objects: window.history
    Para navegar pelo histórico
    back()
    forward()
    go()
  • 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”;
  • 17. Vamos praticar?
  • 18. Eventos
  • 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
  • 25. Eventos: teclas
    keydown
    keypress
    keyup
    functionnoNumbers(e) {var keynum, keychar, numcheck;
    if(window.event) { // IE keynum = e.keyCode}
    elseif(e.which) { //FF
    keynum = e.which
    }
    keychar = String.fromCharCode(keynum);
    numcheck = /d/;return !numcheck.test(keychar);
    }
    <input type="text" onkeydown="return noNumbers(event)" />
  • 26. Eventos: outros eventos
    blur
    focus
  • 27. Vamos praticar?
  • 28. JQuery
  • 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/
  • 32. Jquery: Seletores
  • 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>”;
    });
  • 37. jQuery: métodos
    MovingElements:
    append(), appendTo(), before(), after(),
    Attributes
    css(), attr(), html(), val(), addClass()
    Traversing
    find(), is(), prevAll(), next(), hasClass()
    Events
    bind(), trigger(), unbind(),, click()
    Effects
    show(), fadeOut(), toggle(), animate()
  • 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>