Curso de Programação em Javascript e HTML
204 pág.

Curso de Programação em Javascript e HTML


DisciplinaProgramação I20.572 materiais240.087 seguidores
Pré-visualização40 páginas
}
 function sismo(event)
 {
 top.window.moveBy(10,10)
 setTimeout('tremer(6)',20)
 return false
 }
<title></title>
</head>
<body>
 <br><a href=&quot;#&quot; onclick=&quot;return sismo(event)&quot;>
 Clique para iniciar um tremor de terra no seu browser.</a><br>
 <p>Segure-se bem!</p>
 <p>O browser opera não consegue executar este exemplo.</p>
</body>
</html>
5. O objeto document
O objeto document faz parte do objeto window, sendo obtido como uma 
propriedade deste, na forma window.document. Este objeto contém uma 
representação de um documento escrito em HTML.
Se escrevermos apenas document, omitindo o objeto window, obteremos o 
objeto que representa o documento da página que estamos usando. Se 
especificarmos um objeto window correspondente a outra janela ou a outra moldura 
então iremos obter o objeto document correspondente à página que está nessa janela 
ou moldura.
Propriedades do objeto document
Propriedade Descrição
body Devolve o elemento <body> (se o documento estiver 
escrito em HTML sem molduras) ou o elemento 
<frameset> (se o documento estiver escrito em HTML 
Frameset.)
cookie Devolve os cookies associados ao documento
domain Lê o nome de domínio do servidor que enviou o 
documento
referrer Lê o endereço (URL) da página em que está a ligação 
que conduziu até ao documento atual
title Lê ou define o título do documento
URL Lê o endereço (URL) do documento
<meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 122
Curso de Programação em JavaScript e HTML Dinâmico
Desenvolvimento, aplicações e referências de acordo com as normas do W3C
Nota: Algumas das propriedades do objeto document são próprios objetos.
Coleções do objeto document
Coleção Descrição
anchors Contém uma lista com todos os elementos <a> 
(âncoras) existentes no documento
applets Contém uma lista com todos os elementos <applet> 
(miniaplicações escritas em Java)
embeds Contém uma lista com todos os objetos que foram 
embutidos na página usando os elementos <embed> 
ou <object>
forms Contém uma lista com todos os elementos <form> 
existentes no documento
images Contém uma lista com todas as imagens existentes no 
documento
links Contém uma lista com todos os elementos <a> 
existentes no documento que especifiquem um valor 
para o atributo href (é uma subcoleção de anchors.)
plugins Contém a mesma lista que a coleção embeds
As coleções pertencentes ao objeto document contêm objetos.
Métodos do objeto document
Método Descrição
close() Fecha um documento que tenha sido aberto com o 
método document.open() e escrito com 
document.write(). Não confundir com o método open() 
do objeto window, que serve para abrir uma nova 
janela. 
getElementById() Devolve o elemento que possui o valor especificado no 
atributo id
getElementsByTagName() Contém uma lista com todos os elementos que têm um 
determinado nome (dado por uma etiqueta do HTML)
open() Abre um documento para nele escrever conteúdo novo
write() Escreve texto num documento
writeln() Escreve uma linha de texto num documento
Exemplos de Aplicação
Ler o nome do domínio do servidor que enviou o documento
<html>
<head>
<title></title>
</head>
<body>
 <p>
 O nome do servidor que enviou esta página é:
 
 document.write(top.document.domain)
 
 </p>
 <p>
 <b>Nota:</b> Este exemplo só funciona online.
 </p>
</body>
<meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 123
Curso de Programação em JavaScript e HTML Dinâmico
Desenvolvimento, aplicações e referências de acordo com as normas do W3C
</html>
Ler o URL da página em que estava a ligação que conduziu até esta página
<html>
<head>
<title></title>
</head>
<body>
 <p>
 A página que o conduziu a esta página é:
 
 document.write(top.document.referrer)
 
 </p>
 <p>
 <b>Nota:</b> Este exemplo só funciona corretamente online.
 </p>
</body>
</html>
Ler o título do documento
<html>
<head>
<title>Exemplo de DHTML</title>
</head>
<body>
 <p>
 O título desta página é:
 
 document.write(document.title)
 
</p>
</body>
<meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 124
Curso de Programação em JavaScript e HTML Dinâmico
Desenvolvimento, aplicações e referências de acordo com as normas do W3C
</html>
Ler o URL do documento principal
<html>
<head>
<title></title>
</head>
<body>
 <p>
 O URL da página principal é:
 
 document.write(top.document.URL)
 
</p>
</body>
</html>
Trabalhar com o objeto que guarda todo o conteúdo da página
<html>
<head>
<title></title>
 function mudarConteudo()
 {
 document.body.innerHTML='<p>Viu? Agora o conteúdo é outro.</p>'
 }
</head>
<body>
 <p>
 <a href=&quot;javascript:mudarConteudo()&quot;>
 Clique aqui</a> para alterar o conteúdo desta página.
 </p>
</body>
</html>
<meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 125
Curso de Programação em JavaScript e HTML Dinâmico
Desenvolvimento, aplicações e referências de acordo com as normas do W3C
Selecionar um elemento específico e manipulá-lo
<html>
<head>
<title></title>
 function mudarConteudo()
 {
 var o=document.getElementById(&quot;caixa&quot;)
 o.innerHTML='Viu? Agora estou diferente.'
 }
 function mudarConteudo2()
 {
 var o=document.getElementById(&quot;caixa2&quot;)
 o.style.backgroundColor=&quot;red&quot;
 o.style.color=&quot;white&quot;
 o.innerHTML='E agora sou uma caixa vermelha com letras brancas.'
 }
</head>
<body>
 <p>
 <a href=&quot;javascript:mudarConteudo()&quot;>Clique aqui</a> para
 alterar o conteúdo da caixa seguinte.<br>
 <a href=&quot;javascript:mudarConteudo2()&quot;>Clique aqui</a> para
 alterar o conteúdo da caixa amarela.
 </p>
 <div id=&quot;caixa&quot; style=&quot;border: solid 1px #999999&quot;>
 Eu sou uma caixa muito simples.
 </div><br>
 <div id=&quot;caixa2&quot; style=&quot;border: solid 1px #999999; background-color: 
 yellow&quot;>
 E eu sou uma caixa amarela.
 </div>
</body>
</html>
<meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 126
Curso de Programação em JavaScript e HTML Dinâmico
Desenvolvimento, aplicações e referências de acordo com as normas do W3C
Listar todos os elementos de um determinado tipo
<html>
<head>
<title></title>
 function verElementos()
 {
 var o=document.getElementsByTagName(&quot;div&quot;)
 var s='Existem '+o.length+' elementos <div> na página.\n\n'
 s+='Os seus conteúdos são:\n\n'
 for(var i=0;i<o.length;++i)
 s+=o[i].innerHTML+'\n\n'
 alert(s)
 }
</head>
<body>
 <p>
 <a href=&quot;javascript:verElementos()&quot;>Clique aqui</a> para
 listar os elementos &lt;div&gt; desta página.
 </p>
 <div style=&quot;border: solid 1px #999999&quot;>
 Eu sou um elemento div.
 </div><br>
 <div style=&quot;border: solid 1px #999999&quot;>
 Eu sou outro elemento div.
 </div><br>
 <div style=&quot;border: solid 1px #999999&quot;>
 Eu sou mais um elemento div.
 </div>
</body>
</html>
<meta name=&quot;autor&quot; content=&quot;Rafael Feitosa&quot;> 127
Curso de Programação em JavaScript e HTML Dinâmico
Desenvolvimento, aplicações e referências de acordo com as normas do W3C
Escrever um documento de novo
<html>
<head>
<title></title>
 function escreverNovoConteudo()
 {
 var s='<html>'
 s+='<head><title>Este é o novo conteúdo</title></head>'
 s+='<body>'
 s+='<p>Agora temos conteúdo novo.</p>'
 s+='</body></html>'
 document.open()
 document.write(s)
 document.close()
 /*
 Repare que devemos utilizar os métodos document.open() e
 document.close() porque o documento já estava completamente
 carregado. Como ele já estava fechado é necessário abri-lo,
 escrever nele e fechá-lo de novo.
 */
}
</head>
<body>
 <p>
 <a href=&quot;javascript:escreverNovoConteudo()&quot;>Clique
Carregar mais