JAVASCRIPT- PARTE 11

 

Objetivos:

 

Na décima parte desse tutorial você aprendeu como  utilizar objetos embutidos , você aprendeu sobre como o JavaScript permite armazenar dados em todos os tipos de caminhos interessantes. Entretanto, a maneira como você mais utilizará objetos é acessando os objetos browser, que permitem que seus scripts manipulem páginas da Web, Janelas e documentos. Nesta parte do tutorial você aprenderá a explorar a hieraquia de objetos browser.

 

Pré-requisitos:

 

Para acompanhar a lição você deve estudar as primeiras partes desse tutorial.

 

Trabalhando com objetos browser

 

Uma vantagem que o JavaScript tem até mesmo em relção a linguagens mais sofisticadas como Java é que os scripts podem manipular o navegador da web. Seu script pode carregar uma nova página no navegador, trabalhar com partes da janela e do documento do navegador e até abrir novas janelas.

 

A fim de trabalhar com o navegador e os documentos, o JavaScript utiliza uma variedade de objetos browser. Cada Objeto representa parte de uma pagin da web.Por exemplo , uma janela , um documento ou uma imagem. Os objetos browser, que permitem trabalhar com partes da página da Web.

 

Os objetos browser estão organizados em uma hieraquia de objetos pai e filh. Quando referencia um objeto, você utiliza o nome do objeto pai seguido pelo nome ou nomes do objeto filho, separados por pontos. Por exemplo, O JavaScript armazena objetos para representar imagens em documento como filhos do objeto document. Como no exemplo abaixo:

 

window.document.imagem01

 

O exemplo acima refere-se ao objeto imagem01,  um filho do objeto document, que é filho do objeto windo.

 

O objeto window está na parte superior da hierarquia de objeto browser. O diagrama  abaixo mostra a hierarquia do objeto e uma variável de seus objetos.

 

 

Esse diagrama inclui somente os objetos básicos de um navegador que serão abordados a seguir. Uma variedade de outros objetos também entra na hierarquia e será discutidos ao longos dos tutoriais.

 

Utilizando objetos window.

 

Na parte superior da hierarquia de objeto browser está o objeto window, que representa uma janela de navegador. Você já utilizou alguns métodos e propriedades do objeto window, como por exemplo:

 

» Você utilizou a propriedade window.status para alterar o conteúdo da linha de status do navegador.

 

» Você utilizou os métodos window.alert, window.confirm e window.prompt para exibirem caixa de diálogos de mensagem para o usuário.

 

Podem haver vários objetos window por vez, cada um representando uma janela de navegador aberta. Os frames são também representador por objetos window. Mas isso ainda é assunto de outra parte do tutorial.

 

Trabalhando com documentos da Web

 

O objeto document representa um documento ou página da Web. Os documentos da web são exibidos dentro das janelas do navegador, então não deve supreende-lo aprender que o objeto document é filho do objeto window.

 

Como o objeto window sempre representa a janela atual ou seja aquela que contém o script, você pode utilizar a window.document para referenciar o documento atual. Lembre-se que você já utilizou o método document.write para exibir texto dentro de um documento na Web.Os exemplos nos tutoriais anteriores utilizaram somente uma única janela e documento. Se múltiplas janelas ou frames estiverem em utilização, talvez haja vários objetos window, cada um com seu próprio objeto document. Para utilizar um desses objetos document, você utiliza o nome da janela e o nome do documento.

 

Obtendo informações sobre o documento

 

Varias propriedades do objeto document incluem informações sobre o documento atual em geral. Por exemplo:

 

» A propriedade URL especifica o URL do documento. Esse é um campo de texto simples. Você não pode alterar essa propriedade. Por isso se você  precisar enviar o usuário para uma localização diferente, o ideal é utiliza o objeto window.location, que vai ser especificado mais adiante.

 

» A propriedade title lista o titulo da página atual, definido pela tag HTML<TITLE>.

 

» A propriedade referrer é o URL da página que o usuario esta visualizando antes da pagina atual, normalmente , a pagina com um link para a página ataul.

 

» A propriedade lasModified é a ultima data em que o documento foi modificado. Essa data é enviada ao servidor junto com a página. O exemplo abaixo mostra um script de um  document de HTML que exibe a data da sua última modificação.

 

<HTML>

<HEAD> <TITLE>Teste do Document</TITLE></HEAD>

<BODY>

         Esta pagina foi modificada em:

<SCRIPT>

document.write(document. lasModified);

</SCRIPT>

<BR>

</HTML>

 

Isso pode dizer ao usuario quando a página foi alterada pela ultima vez. Se utilizar JavaScript, você não tem de se lembrar de atualizar a data toda vez que modificar a página.

 

Nota: Você talvez ache que a propriedade document.lasModified não funciona em suas páginas da Web. A data é recebida do servidor da Web e alguns servidores não mantêm data de modificações corretamente.

 

Escrevendo texto em um documento

 

Os métodos do objeto document mais simples são também aqueles que você utilizará mais freqüentemente. De fato, você já os utilizou. Os métodos document.write imprime texto como parte da página de HTML em uma janela de documento. Essa instrução é utilizada sempre que você precisar incluir saída em uma página da Web.

 

Uma instrução alternativa, document.writeln, também imprime texto, mas também inclui um caracter de nova linha (/n) no final. Isso é útil quando você quer que seu texto seja a utima coisa da linha.

 

Nota: Lembre-se de que o caractere de nova linha é ignorado pelo HTML, exceto dentro do contêiner <PRE>. Você precisará utilizar a tag<BR> se quiser uma quebra de linha real.

 

Você pode utilizar esses métodos somente dentro do corpo da página da Web, de modo que eles serão executados quando a página carregar. O método document.write pode ser utilizado somente dentro de uma tag <SCRIPT> no corpo de um documento HTML. Você também pode utiliza-lo em uma função, contanto que você inclua uma chamada para a função dentro do corpo do documento.

 

Limpando e reescrevendo documentos

 

O objeto document inclui métodos open e close. Diferente dos métodos do objeto window que possuem métodos com o mesmo nome, esse métodos relamente não abre e fecham  novos documentos nem janelas. Em vez disso, o método open abre um fluxo que limpa o documento e permite criar um novo com o método write ou writeln.

 

Quando você utiliza o método document.open, o documento atual é limpado. Quaisquer dados já exibidos no documento são apagados e você pode começar a escrever o novo conteúdo no documento.

 

Os dados que você escrever depois de document.open não são realmente exibidos ate você fecha o fluxo com método document.close. Você pode utilizar isso para assegurar que blocos de comando write executem ao mesmo tempo.

 

Nota: Se você utilizar o método document.open na janela atual, seu script parte do documento ataul será limpado e parará de executar. Por essa razão, esses métodos são mais bem utilizados com janelas e frames separadas. Mais não precisa se preocupara com isso agora, pois este assunto vai ser abordado nos próximos tutoriais.

 

Você pode especificar um tipo de documento MIME no comando document.open,mais não é obrigatório. Isso permite criar um documento de qualquer tipo, incluindo imagens e documentos utilizados por aplicativos plug-in.

 

Nota: O MIME significa multipurpose Internet mail extensions. Trata-se de um padrão Internet para tipos de documento. Os servidores da Web enviam um tipo MIME para o navegador com documentos para dizer ao navegador como exibi-los. Documentos típicos de navegador são HTML ( tipo MIME text/html) e texto ( tipo MIME text/plain).

 

Utilizando links e âncoras

 

Outro  filho do objeto document é o objeto link. Podem haver múltiplos objetos link em um documento, mas cada um inclui informações diferentes sobre um link para outra localização ou âncora.

 

Nota: As âncoras são lugares identificados em um documento de HTML para quais se podem pular diretamente. Você as define com uma tag como esta : < A NAME=”index1”>. Você então se vincular a eles: < A HREF=”#index1”>.

 

Pode-se acessar objeto link como o array link. Cada menbro do array é um dos objetos link na pagina atual. Uma propriedade do array, document.link.length, indica o numero de links na página.

 

Cada objeto link tem uma lista de propriedades que define o URL. Você pode referi-se a uma propriedade indicando o numero do link e o nome da propriedade. Poe exemplo, a seguinte instrução atribui o URL inteiro do primeiro link à variável link1:

 

link1=links[0].href;

 

Os objetos anchor são também filhos do objeto document. Cada objeto anchor representa uma âncora no documento atual, uma localização particular para a qual se pode pular diretamente.

 

Como nos links,você pode acessar âncoras com um array: ânchors. Cada elemento desse array é um objeto anchor. A propriedade document.anchors.length fornece o numero de elementos no array anchors.

 

Acessando o histórico do navegador.

 

O objeto history é outra propriedade do objeto window. Esse objeto armazena as informações sobre os URLs que foram visitados antes e depôs do atual e inclui métodos para ir para as localizações anteriores ou próximas.

 

O objeto history  tem quatro propriedades:

 

» history.length: monitora o comprimento da lista de histórico em outras palavras, o numero de localizações diferentes que o usuário visitou.

 

» history.next: é o valor da próxima entrada na lista de histórico, o URL ao qual o usuário será enviado se ele pressionar o botão Forward do navegador. Como o botão Forward somente funciona quando você já utilizou o botão Back, nem sempre pode haver um valor para a propriedade history.next.

 

» history.previous: é a entrada anterior do histórico, o URL ao qual o usuários será enviado se ele utilizar o navegador de botão Back.

 

Você também pode tratar o objeto history como array. Cada entrada contém um dos URLs na lista de histórico, com history[0] sendo a entrada atual. Por ultimo, mas não menos importantes, o objeto history tem três métodos:

 

» history.go: abre um URL da lista de histórico. Para utilizar esse método, especifique um numero positivo ou negativo entre parênteses. Por exemplo , history.go(-2) é equivalente a pressionar o botão Back duas vezes.

 

» history.back:carrega o URL anterior a lista de histórico, o equivalente a pressionar o bota Back.

 

» history. forward: carrega o próximo URL na lista de histórico, se disponível. Isso é equivalente a pressionar o botão Forward.

 

Nota: Os métodos history.back e history. Forward não funcionam corretamente em algumas versões do Netscape Navigotor.

 

Por essa razão, é melhor utilizar history.go(-1) e history.go(1).

 

Trabalhando com objeto location

 

Este objeto armazena as informações sobre o URL atual armazenado na janela. Por exemplo, a seguinte instrução carrega um URL na janela atual:
window.location.href=” https://juliobattisti.com.br”;

 

A propriedade href utilizada nessa instrução contém o URL inteiro da localização atual da janela. Você também pode acessar partes do URL com varias propriedades do objeto location por exemplo : location.protocol é a parte de protocolo do URL.

 

O objeto location tem dois métodos:

 

» location.reload: Recarrega o documento atual.

 

» location.replace: Substitui a localização atual por uma nova.

 

Lendo informações sobre o navegador.

 

O objeto navigator não faz parte da hierarquia do objeto browser, mas é outro objeto útil para fazer script. Esse objeto contem informações sobre a versão do navegador. Você pode utilizar esse objeto para descobrir qual navegador e plataforma de computador o usuário esta executando e seu script pode alterar seu comportamento para corresponder a esse navegador.

 

Scripts específicos do navegador pode ser complicado , mais não se preocupe, pois isso é assunto para outra parte do tutorial.

 

Nota: O nome do objeto navigator provem do Netscape Navigator, que era o único navegador que suportava JavaScript quando a linguagem apareceu pela primeira vez no Navigator 2.0. Apesar de seu nome especifico Netscape, esse objeto é agora suportado do Microsoft Internet Explorer.

 

Criando os botões Back e Forward

 

Uma utilização comum para os métodos back e forward do objeto history é adicionar seus próprios botões Back e Forward a um documento na Web. Isso aprimora a interface com o usuário de suas paginas.

 

Como um exemplo do uso do objeto history, você agora criara um script que exibe os botões Back e Forward e utiliza esses métodos para o navegador.

 

Você utilizará imagens gráficas para os botões Back e Forward. Abaixo esta a parte do script que tratará o botão Back:

 

<A HREF=”javascript:history.go(-1);”>

<IMG BORDER=0 SRC= “left.gif”>

</A>

 

Isso utiliza um URL javascript: para executar um commando quando o usuario dá cliques em um link. Nesse caso, o link é a imagem da seta esquerda. O script para o botão Forward é quase idêntico:

 

<A HREF=”javascript:history.go(1);”>

<IMG BORDER=0 SRC= “right.gif”>

</A>

 

Com os script dos botões em mãos, agora precisamos contruir o restante de um documento HTML. O exemplo abaixo mostra o documento completo de HTML e a Figura 1.0 mostra como o Internet Explore exibe seu documento. Depois de você carregar esse documento em um navegador, visite outras URL e certifique se os botões estão funcionando.

 

<html>

<head><title> Testando os botões</title></head>

<body>

<h1> Botões Back e Forward</h1>

<h1> Esta página é um teste para os botões Back e Forward. Depois carregar esse documento , visite outras URL e certifique se os botões estão funcionando. </h1>

<HR>

<A HREF=”javascript:history.go(-1);”>

<IMG BORDER=0 SRC= left.jpg>

</A>

<A HREF=”javascript:history.go(1);”>

<IMG BORDER=0 SRC= right.jpg>

</A>

<HR>

</BODY>

<HTML>

 

Depois de carregada, seu exemplo deve ficar parecido com a figura abaixo.

 

Figura 1.0- Exemplo dos botões Back e Forward

 

Nota: Esse script é uma exemplo de quanto o JavaScript pode fazer com muito pouco. Você pode ter percebido não utilizei as tags< Script> absolutamente e apenas dois comando do JavaScript.

 

Conclusão:

 

Neste tutorial você aprendeu sobre a hierarquia de objetos browser do JavaScript. Aprendeu como utiliza o objeto document para trabalhar documentos e utilizou os objetos history e location para controlar o URL atual exibido no navegador.      No próximo tutorial você aprendeu a criar seus próprios objetos para armazenar e trabalhar com dados.