html dom, eventos, jquery
DESCRIPTION
TRANSCRIPT
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
Javacript Basico: tag <script> <script type="text/javascript">
document.write("Hello World!");</script>
É executado assim que carregado Se o script alterar a página, coloque no
final Colocar no final é sempre uma boa prática
document.write() Output para a página
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 Closure Compiler
BROWSER OBJECTS
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
Browser objects: window.navigator Informações sobre o browser
cookieEnabled appName userAgent
Browser objects: window.history Para navegar pelo histórico
back() forward() go()
DOM: introdução
Document Object Model: 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
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>ToDo list</title> </head> <body> <div>What I need to do.</div> <p title="ToDo list">My list:</p> <ul> <li>Finish presentation</li> <li>Clean up my home.</li> <li>Buy a bottle of milk.
(May be beer will be better?;)</li>
</ul> </body>
</html>
html
Head
Meta title
body
div P ul
lititle
DOM: encontrando elementos<input type="text" id="message" value="Messages goes
here..."/>...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");
DOM: elements
<p title="ToDo list">My tasks</p>
Tipos de nodes HTML element Attribute Text node
title
p
Text node
ToDo list My tasks
DOM: atributos de Element
nodeName nodeValue nodeType parentNode childNodes firstChild lastChild previousSibling nextSibling attributes ownerDocument
DOM: objeto document
A raiz para a árvore DOM document.getElementById document.getElementsByName document.getElementsByTagName
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);
DOM: element.style
É possível mudar o visual do elemento através do javacript
var el = document.getElementById(“myDiv”);
el.style.display= “none”;
Vamos praticar?
EVENTOS
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
Eventos: definindo eventos
Inline, na tag html<input type="text" size="30" id="email"
onchange="checkEmail()">
function checkEmail(){ //...}
Não use! É ruim escrever código javascript no meio do
html
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.
Eventos: modelos avançados Adicionando um event handlervar addBtn = document.getElementById("addBtn");//...addBtn.addEventListener('click', function(){
//code goes here},false);
addBtn.attachEvent('click', function(){ //code goes here
}); this é o elemento onde ocorreu o evento
Eventos: capturing & bubbling
div id=“a”
div id=“b”
Se ambos tiverem onclick, qual é executado primeiro?
Capturing: div a primeiro Bubbling: div b primeiro W3C definiu as duas
possibilidadesaddEventListener(“click”, fn,
boolean) False: capturing True: bubling
Eventos: eventos de mouse
mousedown mouseup click dblclick mousemove
A cada pixel
mouseover mouseout
Eventos: teclas
keydown keypress keyup
function noNumbers(e) {var keynum, keychar, numcheck;
if(window.event) { // IE keynum = e.keyCode}else if(e.which) { //FF
keynum = e.which}keychar = String.fromCharCode(keynum);numcheck = /\d/;return !numcheck.test(keychar);
}<input type="text" onkeydown="return noNumbers(event)" />
Eventos: outros eventos
blur focus
Vamos praticar?
JQUERY
jQuery: introdução
Escondendo divs com javacriptdivs =
document.getElementByTagName(‘div’);for (i = 0; i < divs.length; i++) {divs[i].style.display = ‘none’;
}
jQuery: introdução
Escondendo divs com javacriptdivs =
document.getElementByTagName(‘div’);for (i = 0; i < divs.length; i++) {divs[i].style.display = ‘none’;
}
Escondendo divs com jquery$(‘div’).hide();
jQuery: filosofia
1. Encontre HTML2. 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/
JQUERY: SELETORES
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
tag table table#myId encontra a tabela com id
‘myId’ table #myId encontra o elemento com id
‘myId’ que esteja dentro de um table
jQuery: seletores
$(‘#myId’) pega o elemento com o id ‘myId’
$(‘li:first’) pega o primeiro li $(‘tr:odd’) pega todas as table rows
ímpares $(‘a[target=_blank]’) pega todos os a
cujo target é _blank $(‘form[id^=step]’) pega todos os forms
cujo id começa com ‘step’
jQuery: seletores CSS
Depois de achar $(‘#myId’)
Fazer $(‘#myId’).addClass(‘redbox’);
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>”;});
jQuery: métodos
Moving Elements: 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()
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(){ });
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>
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>
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>
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>
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>
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>
jQuery: Atributos
.attr(‘id’)
.html()
.val()
.css(“top”)
.width()
.attr(‘id’,’foo’)
.html(“<p>hi</p>”)
.val(“new val”)
.css(“top”, “80px”)
.width(60)
Get Set
jQuery: Atributos
Setar a borda para 1px black$(...).css(“border”, “1px solid black”);
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”);
jQuery: Atributos
Setar a borda para 1px black$(...).css(“border”, “1px solid black”);
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”);
jQuery: Eventos
Quando um botão é clicado, faz algo$(“button”).click(function(){
something();});
jQuery: Animação e efeitos
Efeitos Hide e show fadeIn e fade out Slide up e slide down
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);
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>
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>
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>
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>
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>
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>