Baixe Javascript - 07 e outras Notas de estudo em PDF para Informática, somente na Docsity!
Capítulo 7 - Navegação
JS11-01-1999/01 A4 - © 1999 Helder L. S. da Rocha 7-
Navegação
CINCO OBJETOS JAVASCRIPT ESTÃO RELACIONADOS COM A NAVEGAÇÃO em hipertexto. Com eles é possível ler e alterar as localidades representadas pelos links, redirecionar as janelas do browser para outras páginas e controlar as informações contidas no histórico de navegação de uma janela. Area , Link e Anchor permitem manipular com as propriedades dos elementos HTML , e contidos em uma página HTML. Os objetos History e Location permitem mudar o conteúdo das janelas dinamicamente.
Objeto History
O objeto History é um vetor de strings somente-leitura usado por uma janela do browser para armazenar os lugares já visitados durante uma sessão. O conteúdo da lista é o equivalente ao encontrado nas opções “Histórico”, “History” ou “Go” dos browsers Microsoft Internet Explorer e Netscape Navigator. Os botões “Back” ou “Voltar” e “Forward” ou “Avançar” usam as informações no histórico para navegar através dele. History é uma característica da janela. Todo objeto Window possui uma propriedade history. Na janela atual, pode ser usado também como uma referência global, usando simplesmente o nome history. As propriedades de History são quatro mas apenas uma é utilizável na prática, que é length. As outras só são suportadas em browsers Netscape e com várias restrições:
Propriedade Descrição length (^) Number. Contém o número de itens do histórico do browser current (^) String. Contém uma string com a URL da página atual. next (^) String. Contém uma string com a URL da próxima página do histórico previous (^) String. Contém uma string com a URL da página anterior do histórico.
Desenvolvendo Web Sites Interativos com JavaScript
7-2 JS11-01-1999/01 A4 - © 1999 Helder L. S. da Rocha
Em JavaScript 1.1, o acesso às propriedades acima, exceto length, só é possível se o modelo de segurança data-tainting estiver ativado no browser do cliente^1. Tendo o acesso às URLs do histórico, pode-se redirecionar a janela do browser até qualquer página já visitada, , fazer buscas e imprimir o histórico. Tudo isso pode ser feito de forma simples, sem as restrições do data-tainting, usando os métodos de History : Método Ação go( ±n ) ou go("string")
Avança ou volta n páginas no histórico. A segunda forma procura no histórico até encontrar a primeira página que tenha a string especificada no título do documento ou nas palavras da sua URL. back() (^) Volta uma página no histórico (simula o botão “Back” ou “Voltar” do browser). forward() (^) Avança uma página no histórico (simula o botão “Forward” ou “Avançar” do browser). toString() (^) Retorna String. Converte o histórico em uma tabela HTML de URLs, cada uma com seu link. Pode ser impressa usando document.write().. Só funciona se o modelo de segurança data-tainting estiver ativado. O trecho abaixo simula um painel de navegação em uma janela filha que controla o histórico da janela que a criou^2 usando métodos de History :
Exercícios
7.1 Utilize o painel de navegação apresentado como exemplo nesta seção dentro de um frame. Acrescente um mecanismo de busca no histórico usando o método go("string"). Utilize uma caixa de textos () para que o usuário possa entrar com uma palavra para procurar.
(^1) O que, na maioria dos casos, não ocorre. Data-tainting (veja capítulo 6) é suportado por browsers Netscape, apenas, e mesmo assim, exige que o usuário habilite a opção em seu browser (não é default). (^2) O painel de navegação funcionará enquanto o usuário se mantiver no mesmo site (a não ser que data- tainting esteja ativado).
Desenvolvendo Web Sites Interativos com JavaScript
7-4 JS11-01-1999/01 A4 - © 1999 Helder L. S. da Rocha
Exercícios
7.2 Crie uma “roleta” que jogue o usuário em um site escolhido aleatoriamente a partir de uma lista armazenada em um vetor.
7.3 Crie uma janela pequena, sem barra de menus, status, ou scrollbars, para servir de barra de navegação flutuante para um site. Ela deve abrir quando o usuário clicar em um link “SiteMap” e ficar sempre na frente das outras janelas. Todas as URLs das páginas do site devem estar em um componente que, ao ter uma opção escolhida pelo usuário, deve fazer com que a janela que o abriu (se ela ainda existir) passe a exibir a nova URL. Se a janela não mais existir, uma nova deverá ser criada.
7.4 Usando setTimeout() (método de Window ), escreva uma rotina que faça com que uma página carregue outra que a substitua na janela do browser em 30 segundos.
Objetos Area e Link
Os objetos Area e Link são a mesma coisa. Ambos representam vínculos (referências de hipertexto). O objeto Area representa o vínculo acionado a partir de uma imagem mapeada do lado do cliente (client-side imagemap ) pelo do descritor e Link representa o vínculo criado a partir de um . O acesso a todos os vínculos de um documento é obtido a partir da propriedade links de document. Link e Area são objetos do tipo Location , mas não são a mesma coisa que a propriedade location de window_._ A alteração da propriedade href ou qualquer outra, muda a URL à qual o vínculo se refere e não interfere na URL do documento exibido na janela. O efeito da mudança só será notado quando o usuário clicar sobre o vínculo. Todos os objetos Link e Area de uma página estão disponíveis através do vetor document.links. Eles podem ser acessados pelo índice do vetor correspondente à ordem em que aparecem no código HTML da página ou pelo nome (se houver). Por exemplo, suponha que uma página tenha o seguinte código HTML:
Mapa Interativo
**
**
**Volta para Revendedores**
_Capítulo 7 - Navegação_
JS11-01-1999/01 A4 - © 1999 Helder L. S. da Rocha 7-
Home Page
Todos os elementos HTML marcados em negrito acima fazem parte do vetor document.links. Para saber quantos vínculos Area e Link existem em uma página, pode-se usar a propriedade length do vetor:
numLinks = document.links.length; // numLinks contém 7 O elemento , no código acima, não é um objeto Link , pois não contém o atributo HREF. É apenas um objeto Anchor. Links que têm o atributo NAME e serão tratados ao mesmo tempo como objetos Link e Anchor. Há duas maneiras para fazer com que o objeto Area
do exemplo acima tenha sua URL destino alterada para “sudeste/index.html”: através do índice do vetor links ou através do nome:
document. links[3] .href = "sudeste/index.html"; document. se .href = "sudeste/index.html"; As propriedades de Link e Area são praticamente as mesmas de Location. A única diferença é a propriedade target, que não existe em Location.
Propriedade Descrição href (^) A URL completa. Exemplo: http://www.abc.com:80/sub/dir/index.html?name=Cookie1#parte protocol (^) O protocolo da URL. Ex: http: host (^) O nome da máquina. Ex: //www.abc.com port (^) A porta do servidor. Ex: 80 hostname (^) O nome do servidor. Ex: //www.abc.com: pathname (^) O caminho. Ex: /sub/dir/index.html hash (^) O fragmento. Ex: #parte search (^) O string de busca. Ex: ?name=Cookie target (^) O nome da janela ou frame onde a URL será exibida.
Eventos
Não há métodos definidos para os objetos Link e Area. Existem, porém, três eventos manuseados por atributos dos elementos HTML que representam esses objetos. Os dois primeiros atributos aplicam-se tanto a elementos como a elementos :
- ONMOUSEOVER – quando o usuário move o mouse sobre o vínculo ou imagem.
- ONMOUSEOUT – quando o usuário afasta o mouse que antes estava sobre o vínculo ou imagem.
Capítulo 7 - Navegação
JS11-01-1999/01 A4 - © 1999 Helder L. S. da Rocha 7-
location.href = "#" + document. anchors[1] .name; location.href = "#" + document. hp .name; Objetos Anchor não possuem métodos ou eventos associados. Têm apenas uma propriedade read-only : Propriedade Descrição name (^) Nome da âncora (texto que está no seu atributo NAME do HTML)
Exercícios
7.5 Uma grande página HTML contém um glossário, organizado em ordem alfabética. No início da lista de palavras de cada letra há uma âncora do tipo: M Escreva um programa JavaScript que construa, no final da página, uma tabela HTML com links para todas as âncoras contidas na página.
7.6 Uma página possui 5 vínculos para páginas de um site. São páginas dependentes de browser. Se o browser for Netscape, os vínculos devem apontar para páginas localizadas em um subdiretório ./netscape/. Se for Microsoft, devem apontar para um subdiretório ./microsoft/. Se for outro browser, as páginas devem ser encontradas no diretório atual (./). Use JavaScript para identificar o browser e alterar as propriedades de todos os links existentes para que carreguem as páginas corretas quando o usuário as requisitar.
