JavaScript - Marx Gomes Van der Linden

Transcrição

JavaScript
Eventos e DOM
Ferramentas para Internet
Marx Gomes Van der Linden
Document Object Model
O mecanismo de Document Object Model
(DOM) é a ferramenta que permite a total
integração entre Javascript e o documento HTML
no qual ele está integrado.
Web sites dinâmicos = Aplicações Web
http://marx.vanderlinden.com.br/
2
Document Object Model
O mecanismo de DOM mapeia o documento
HTML como uma árvore composta por nós
(Node).
O nó-raiz que, contém todas as tags, é chamado
document.
3
Exemplo
4
Exemplo
5
Node
Propriedades de um nó (Node):
nodeName → Nome do nó
nodeValue → Valor do nó
nodeType → Tipo do nó (inteiro, constante)
ownerDocument → Pai do nó
firstChild → Primeiro filho
lastChild → Último filho
childNodes → Lista contendo todos os filhos
6
Node
Propriedades de um nó (Node):
previousSibling → Irmão anterior
nextSibling → Próximo irmão
attributes → Contém os atributos do nó (para
tags)
Propriedade específica de document:
documentElement → Retorna o nó associado à
tag HTML
7
function exibeProps(noh, nome){
var props = [
'nodeName', 'nodeValue', 'nodeType',
'ownerDocument', 'firstChild',
'nextSibling', 'documentElement'
];
}
document.write('<h3>'+nome+'</h3><ul>');
for(var i in props){
document.write(
'<li>' + nome + '.<span class="a">'
+ props[i] + '</span> = ' +
'<span class="b">' + noh[props[i]]
+ '</span</li>'
);
}
document.write('</ul>');
8
<html>
<head><title>Teste</title></head>
<style>
.a { color:#003399 }
.b { color:#009933 ; font-weight:bold}
</style>
<body><script>
function exibeProps(noh, nome){ /* ... */ }}
var oHtml = document.documentElement;
var oHead = oHtml.firstChild;
var oBody = oHtml.lastChild;
exibeProps(document, 'document');
exibeProps(oHead , 'oHead');
exibeProps(oBody , 'oBody');
</script></body> http://marx.vanderlinden.com.br/
</html>
9
Saída
10
Saída
11
Relações entre nós
document.write(
(oHead.parentNode == oHtml) + ', '
);
document.write(
(oBody.parentNode == oHtml) + ', '
);
document.write(
(oBody.previousSibling == oHead) + ', '
);
document.write(
(oHead.nextSibling == oBody) + ', '
);
document.write(
oHead.ownerDocument == document);
true, true, true, true, true
12
Tipos de nós
Existem 12 tipos de nós, identificados pelas
constantes:
Node.ELEMENT_NODE (1)
Node.ATTRIBUTE_NODE (2)
Node.TEXT_NODE (3)
Node.CDATA_SECTION_NODE (4)
Node.ENTITY_REFERENCE_NODE (5)
Node.ENTITY_NODE (6)
Node.PROCESSING_INSTRUCTION_NODE (7)
13
Tipos de nós
Existem 12 tipos de nós, identificados pelas
constantes:
Node.COMMENT_NODE (8)
Node.DOCUMENT_NODE (9)
Node.DOCUMENT_TYPE_NODE (10)
Node.DOCUMENT_FRAGMENT_NODE (11)
Node.NOTATION_NODE (12)
14
childNodes
A propriedade childNodes de cada nó contém
um objeto que funciona como um array.
var oHtml = document.documentElement;
var oHead = oHtml.childNodes[0];
var oBody = oHtml.childNodes[1];
Como caso especial, a tag body pode ser
acessada diretamente de document:
var oBody = document.body;
15
Acesso a Elementos Específicos
Para cada nó, o DOM define três métodos que
podem ser usados para encontrar mais facilmente
elementos específicos:
getElementsByTagName()
getElementsByName()
getElementById()
16
getElementsByTagName
<html>
<head><title>Teste</title>
<style>(...)</style></head>
<body>
<img src="javascript.jpg">
<img src="goomba.jpg">
<script>
function exibeProps(noh, nome){ ... }
var imgs =
document.getElementsByTagName('img');
exibeProps(imgs[0], 'imgs[0]');
exibeProps(imgs[1], 'imgs[1]');
</script>
</body></html>
17
getElementsByTagName
18
getElementsByTagName()
Exemplo:
Obter todas as imagens pertencentes ao primeiro
parágrafo da página:
var par = document.getElementsByTagname("p");
var imgs =
par[0].getElementsByTagName("img");
19
getElementsByName()
Retorna um array contendo todos os elementos
com a propriedade "name" especificada.
Exemplo:
<img name="js" src="javascript.jpg">
<img name="goomba" src="goomba.jpg">
<script>
var goomba =
document.getElementsByName('goomba')[0];
</script>
20
getElementsByName()
Problema no Internet Explorer 6.0
getElementsByName() só verifica as tags
input e img.
21
getElementById()
Retorna um único elemento HTML, o qual tem o
atributo id especificado.
Geralmente, é a melhor a maneira de se acessar
um elemento específico.
Exemplo:
<img id="js" src="javascript.jpg">
<img id="goomba" src="goomba.jpg">
<script>
var goomba =
document.getElementById('goomba');
</script>
22
Atributos
Os atributos HTML de uma tag são mapeados
como propriedades do elemento DOM:
<html><head><title>Teste</title></head>
<script>
function mudaImg(){
var goomba =
document.getElementById('goomba');
goomba.src = 'spikey.png';
}
</script><body>
<img id="goomba" src="goomba.jpg">
<p style="text-align:center"
onClick="mudaImg()">Mudar
imagem</p>
</body></html>
23
Saída
24
Saída
25
Criando e manipulando nós
Além de alterar as propriedades de nós já
existentes, DOM inclui métodos para adicionar
nós à estrutura do documento.
createElement(nome)
createTextNode()
appendChild()
26
createElement()
O método createElement funciona como um
método de fábrica, isto é, cria e retorna um
novo elemento HTML.
Sintaxe:
createElement(nome)
O elemento é criado, mas não é adicionado
ainda à árvore.
27
createTextNode()
createTextNode é análogo a
createElement, mas cria um nó de texto;
Sintaxe:
createTextNode(texto)
28
appendChild
O método appendChild adiciona um elemento
à arvore, como um filho do elemento que o
chamou.
Sintaxe:
appendChild(obj)
29
Exemplo
<html>
<script>
function inicializa(){
var p = document.createElement('p');
var texto = document.createTextNode('Hello,
World!');
p.appendChild(texto);
document.body.appendChild(p);
}
</script>
</head>
<body onLoad="inicializa()"></body>
</html>
30
Saída
31
Exemplo
<html><head><title>Teste</title><style>
div { border:1px solid black; width: 20em ;
text-align:center; background-color:#D5EAFF }
</style><script>
var div = document.createElement('div');
World!');
div.appendChild(p);
document.body.appendChild(div);
}
</script></head>
32
<body onLoad="inicializa()"></body></html>
Saída
33
Removendo e Substituindo nós
Objetos DOM também têm métodos para
remover e substituir nós filhos:
Sintaxe:
removeChild(obj)
Remove um nó
replaceChild(novoObj, objAntigo)
Remove um nó e substitui por outro
34
Exemplo (1/2)
<html>
<style>
</style>
</head>
<body onLoad="inicializa()">
<div>
<p id="p1">Primeiro parágrafo</p>
<p id="p2">Segundo parágrafo</p>
<p id="p3">Terceiro parágrafo</p>
</div>
35
Exemplo (2/2)
<script>
World!');
var div =
document.getElementsByTagName('div')[0];
var p1 = document.getElementById('p1');
div.removeChild(p1);
div.replaceChild(p, p3);
}
</script></body></html>
36
Saída
37
insertBefore()
O método insertBefore insere um elemento antes
de outro, no mesmo nível de hierarquia na
árvore.
Sintaxe:
insertBefore(obj_ref, novo_obj)
38
<div>
Exemplo
<p id="p1">Primeiro
parágrafo</p>
<p id="p2">Segundo parágrafo</p>
<p id="p3">Terceiro parágrafo</p>
<button onClick="muda()">Clica!</button>
</div>
function muda(){
var texto = document.createTextNode('Here
comes a new challenger!');
var div =
document.getElementsByTagName('div')[0];
div.insertBefore(p, p2);
}
39
Saída, antes
40
Saída, depois
41
CSS e Javascript
É possível utilizar Javascript para modificar a
classe de um elemento HTML.
Como class é uma palavra reservada (embora
não usada) em Javascript, a propriedade
equivalente se chama className.
42
Exemplo
.c1 { background-color: green; color: white;}
.c2 { background-color: blue; color: black; }
</style></head><body>
<p id="p1" class="c1" onClick="muda()">
The book is on the table.</p>
</body><script>
function muda(){
var p = document.getElementById('p1');
if(p.className == 'c1')
p.className = 'c2'
else
p.className = 'c1';
}
43
</script></html> http://marx.vanderlinden.com.br/
Saída
Clique
44
Estilos
Os estilos de um objeto são acessados através
da propriedade style. Cada atributo CSS é
mapeado para uma propriedade equivalente
em style.
Atributo em CSS
Propriedade em Javascript
background-color
color
font-family
font-weight
style.backgroundColor
style.color
style.font
style.fontWeight
45
Exemplo
</style><script>
function liga(){
document.getElementById('meudiv').
style.backgroundColor = 'red';
}
function desliga(){
document.getElementById('meudiv').
style.backgroundColor = '#D5EAFF';
}
</script><body>
<div id="meudiv" onMouseOver="liga()"
onMouseOut="desliga()">Passe
http://marx.vanderlinden.com.br/ o mouse</div>
46
</body></html>
Saída
47
Visibilidade de Elementos
A propriedade CSS display controla como um
elemento é exibido na tela.
Valores:
block → Elemento de bloco
inline → Elemento inline
hidden → Não exibe
É possível explorar essa propriedade em
Javascript para alternar a visibilidade de
elementos.
48
Exemplo (1/2)
</style><script>
function exibe(){
document.getElementById('bloco').
style.display = 'block';
}
function esconde(){
document.getElementById('bloco').
style.display = 'none';
}
</script>
49
Exemplo (2/2)
<body>
<p><a href="#" onClick="exibe()">Exibe</a>,
<a href="#" onClick="esconde()">Esconde</a>
</p>
<div id="bloco" style="display:none">Lorem
ipsum dolor sit amet, consectetuer adipiscing
elit. Morbi dapibus. Quisque vehicula, massa
non lobortis tempus, tortor nisi accumsan
mauris, quis iaculis elit lacus nec lacus.
Morbi ac risus. Sed adipiscing ante at magna.
In tempus nunc sed risus. Donec pretium magna
a dui ultrices viverra.</div>
<p><em>Fim.</em></p>
</body>
50
</html>
Saída
51

JavaScript - Marx Gomes Van der Linden

Transcrição

Documentos relacionados

Textos Luminosos Descrição: Este é um script muito interessante

Cursor Animado

Roteiro 13 - André Moraes [email protected]

Boletim de Atualização Document Light – Versão 1.14

Cursor com Texto

Marx, os Estados Unidos e a "América"

livros internet - Editora Elefante

Ontologia humana e trabalho alienado - NUPE

uma filosofia política para a crise do capital

Cascading Style Sheets II

fundadores da sociologia moderna

Sobre MUDAR O MUNDO SEM TOMAR O PODER de John Holloway

Manipulação de componentes SVG com JavaScript e