Baixe Document Object Model (DOM) e geração de páginas HTML com JavaScript e outras Notas de estudo em PDF para Informática, somente na Docsity!
Capítulo 8 – A página HTML
JS11-01-1999/01 A4 - © 1999 Helder L. S. da Rocha 8-
A página HTML
AS PROPRIEDADES DE UMA PÁGINA HTML incluem seus elementos, representados pelos
descritores HTML, atributos como cor de fundo ou cor dos links, e informações enviadas
pelo servidor como cookies, URL, referenciador e data da última modificação. Todas essas
propriedades são acessíveis através de JavaScript, e várias podem ser alteradas.
Além de permitir o acesso às propriedades, JavaScript também define vários métodos
para gerar HTML e criar páginas novas, em tempo de exibição.
A única forma de ter acesso a uma página é através da propriedade document, que
qualquer objeto do tipo Window possui. A página da janela onde roda o script pode ser
acessada diretamente pela propriedade window.document, ou simplesmente document.
Esta propriedade possui métodos e propriedades definidos pelo tipo Document , apresentado
neste capítulo.
Objeto Document
O objeto document representa o documento HTML atual. document é uma propriedade de
window e, portanto, pode ser usado sem fazer referência a window:
window.document // ou simplesmente document
Para ter acesso a páginas de outras janelas, é preciso citar a referência Window que
possui a propriedade document:
janela = open("nova.html"); janela .document.bgColor = "green"; parent.fr1.fr1_2 .document.forms[0].b1.click();
No restante deste capítulo, usaremos document (e não window.document), como
fizemos com as propriedades de window nos capítulos anteriores, para se referir à página da
janela atual.
Desenvolvendo Web Sites Interativos com JavaScript
8-2 JS11-01-1999/01 A4 - © 1999 Helder L. S. da Rocha
As propriedades do tipo Document estão listadas na tabela abaixo, indicando quais as
propriedades que podem ser alteradas, e o tipo de dados que contém.
Propriedade Acesso Função
bgColor read /
write
Contém String. Define ou recupera cor de fundo da página. Pode
um string contendo código hexadecimal do tipo #rrggbb ou
nome da cor (red, blue, navy, etc.)
fgColor r / w Contém String. Define ou recupera cor do texto na página.
linkColor r / w Contém String. Define ou recupera cor de links na página.
alinkColor r / w Contém String. Define ou recupera cor de links ativos.
vlinkColor r / w Contém String. Define ou recupera cor de links visitados.
title r Contém String. Recupera o título () do documento.
links r Contém Array de objetos Link. Para obter a quantidade de links
<A HREF> no documento: document.links.length
applets r Contém Array de objetos Applet. Para obter a quantidade de
applets <APPLET> no documento: document.applets.length
anchors r Contém Array de objetos Anchor. Para obter a quantidade de
âncoras <A NAME> no documento: document.anchors.length
embeds r Contém Array de objetos PlugIn. Para obter a quantidade de
plugins <EMBED> no documento: document.plugins.length
plugins r Contém Array de objetos PlugIn. Mesma coisa que embeds
images r Contém Array de objetos Image. Para obter a quantidade de
imagens <IMG> no documento: document.images.length
location r Contém String com URL do documento.
URL r Mesma coisa que location.
referrer r Contém String com URL do documento que contém um link para
o documento atual.
lastModified r Contém String. A string recebida informa a data da última
modificação do arquivo. Está no formato de data do sistema. Pode
ser convertida usando Date.parse() e transformada em objeto
ou automaticamente em String.
domain r / w Contém String com o domínio dos arquivos referenciados.
cookie r / w Contém String. Usado para ler e armazenar preferencias do usuário
no computador do cliente.
As propriedades bgColor, fgColor, linkColor, vlinkColor e alinkColor alteram
a aparência da página. Correspondem aos atributos BGCOLOR, TEXT, LINK, VLINK e ALINK
do descritor HTML <BODY>, respectivamente. Existem desde as primeiras versões do
JavaScript, mas só podiam ser alteradas antes que a página fosse montada. Nos browsers
modernos, é possível mudar essas propriedades em tempo de exibição. Pode-se ter, por
exemplo, um link que ‘apaga a luz’ quando o mouse passa sobre ele:
Desenvolvendo Web Sites Interativos com JavaScript
8-4 JS11-01-1999/01 A4 - © 1999 Helder L. S. da Rocha
método write(), depois que a carga e exibição da página foi concluída, não funciona, pois
o canal de gravação do arquivo já foi fechado. Mas o canal pode ser reaberto com uma
chamada à document.open():
document.open(); document.write("Esta é a última linha do arquivo"); document.close();
A linha document.close() é essencial para que o texto seja exibido. Uma chamada
ao método document.clear(), depois de um document.open(), limpa a tela, permitindo
que o texto apareça no início da tela.
Com exceção de write(), porém, há poucas aplicações para os outros métodos no
documento atual. Imprimir no final do arquivo não é a melhor forma de criar páginas
dinâmicas. As aplicações mais interessantes são a geração dinâmica de páginas novas.
Mostraremos, na seção a seguir, um exemplo de geração de páginas on-the-fly.
Geração de páginas on-the-fly
A melhor forma de gerar uma nova página é começar com uma nova janela. Através da
referência da nova janela, pode-se abrir então um fluxo de dados para escrever nela.
O primeiro passo, portanto, é criar a nova janela:
w1 = open(""); // abre janela vazia, sem arquivo
Em seguida, abrir o documento para que possa receber dados enviados por instruções
write(), posteriores:
w1 .document. open() ; // abre documento para gravação w1 .document. write("\nNova Página\n"); w1 .document. write("\n\n"); w1 .document. write("Nova Página");
Para que o documento completo seja exibido, é preciso que o fluxo de dados seja
fechado, depois que todos as instruções write() tenham sido enviadas. Quando isto
ocorre, quaisquer linhas que estejam na fila são impressas, e o documento é fechado.
w1.document.close(); // imprime documento na nova janela
Ao se visualizar o código-fonte do documento gerado, encontra-se:
Nova Página
Nova Página (...)
O exercício resolvido a seguir apresenta um exemplo completo. Veja mais exemplos
no diretório cap8/.
Capítulo 8 – A página HTML
JS11-01-1999/01 A4 - © 1999 Helder L. S. da Rocha 8-
Exercício Resolvido
Este exercício consiste na construção de uma janela de confirmação para dados digitados em
um formulário, antes do envio ao servidor, permitindo que o usuário verifique se os dados
que selecionou estão corretos antes de enviá-los.
Crie um formulário como o mostrado na figura (use o esqueleto form.html
disponível). Quando o usuário apertar o botão “Enviar Dados”, uma nova janela deverá ser
criada contendo a lista das informações que ele selecionou e dois botões “Corrigir” e
“Confirmar”.
Caso o usuário decida fazer uma correção, deve apertar o botão “Corrigir” que tornará
ativa (focus()) a janela do formulário. O usuário pode então alterar quaisquer informações
e enviar novamente. Após novo envio, a janela de confirmação deverá ser re-ativada ou
criada caso tenha sido fechada (verifique se é preciso criar a janela ou não).
Caso o usuário confirme, os dados devem ser enviados para o servidor. Os dados
digitados na primeira janela, portanto, devem estar presentes também na segunda janela em
campos de formulário () para que o programa CGI no servidor possa recuperá-
los. Como este exemplo é apenas uma simulação, o envio pode ser sinalizado através de uma
janela de alerta.
A solução está na página seguinte.
Capítulo 8 – A página HTML
JS11-01-1999/01 A4 - © 1999 Helder L. S. da Rocha 8-
indice = document.forms[0].UF.selectedIndex; // obtem índice item = document.UF.options[ indice ];
As informações do item selecionado podem estar em dois lugares:
- entre (siglas dos estados) e
- no atributo VALUE de cada
Desenvolvendo Web Sites Interativos com JavaScript
8-8 JS11-01-1999/01 A4 - © 1999 Helder L. S. da Rocha
Telefone: telefone Veículo: carro
Agora é só colocar todo o código acima dentro de instruções document.write(), isolando
as variáveis. As aspas precisam ser precedidas de um escape (") para que possam ser
impressas. Primeiro precisamos abrir uma nova janela:
if ( w1 != null ) { // verifica se a janela já está aberta! w1 .focus(); // ... se estiver... simplesmente ative-a } else w1 = open ("", "janconf"); // ... se não, abra uma nova!
Depois abrimos um canal para escrever no documento da janela (w1.document),
através do método open() e enviamos uma seqüência de instruções write(). Usamos as
variáveis definidas antes para passar os dados à nova página:
w1.document.open(); w1.document.write("\nConfirmação\n"); w1.document.write("\n\n"); w1.document.write("Confirme sua inscrição\n"); w1.document.write("\n"); w1.document.write("
Você digitou os dados abaixo. Estão corretos?"); w1.document.write("
Nome: " +
nome + "\n"); w1.document.write("
Endereço: " +
endereco + "\n"); w1.document.write("
CEP: " +
cep + "\n"); w1.document.write("
Cidade: " +
cidade + "\n"); w1.document.write("
Estado: " +
uf + "\n"); w1.document.write("
Telefone: " +
tel + "\n"); w1.document.write("
Veículo: " +
carro + "\n");
w1.document.write("\n"); w1.document.write("\n"); w1.document.write("\n");
_Desenvolvendo Web Sites Interativos com JavaScript_
8-10 JS11-01-1999/01 A4 - © 1999 Helder L. S. da Rocha
- Um botão “gerar página”, que irá colocar o código HTML correspondente à
escolha do usuário em um
