15.0.os Objetos Do Navegador PDF

Aula 15: Os objetos do navegador
Nesta aula continuaremos a tratar dos objetos em JavaScript. Veremos agora

detalhes sobre a hierarquia dos objetos de window, que funciona como objeto
global. Depois voc aprender dois comandos novos e detalhes dos objetos
location e history.
Objetivos:
Aprender:
- a hierarquia dos objetos
- os comandos with e for...in
- as caractersticas e mtodos do objeto location
- as caractersticas e mtodos do objeto history
Pr-requisitos:
As aulas 1 e 2 so importantes para a seo que estuda o objeto location. A
aula 13, na seo que introduziu os conceitos de objeto. A aula 12, onde so
explicados os conceitos de variveis globais.
1. Objetos do browser
Os objetos do browser so criados pelo prprio browser de forma a refletir
caractersticas do navegador e da pgina em exibio. H dois objetos bsicos:
navigator e window.
O objeto navigator representa o prprio navegador e atravs dele possvel
controlar o browser e obter informaes sobre suas caractersticas. O objeto
window representa uma janela do browser e contm nele todos os elementos da
janela.
J falamos que quando o interpretador da linguagem inicia, uma das primeiras
coisas que faz, antes de executar qualquer cdigo de JavaScript, criar um
objeto global. O objeto global est no topo da cadeia de escopo. As
propriedades deste objeto global so as variveis globais dos programas
JavaScript. Quando voc define uma varivel global, o que est realmente
fazendo definir uma propriedade do objeto global. Alm disso, todas as
funes predefinidas e propriedades do ambiente JavaScript tambm so
propriedades do objeto global.
Na forma client-side da linguagem, que o objetivo desse nosso curso, o

objeto window serve como objeto global para todo o cdigo contido na janela
do navegador que ele representa. O objeto window define propriedades e
mtodos que permitem manipular a janela do browser. Ele tambm define
propriedades que referem a outros objetos, como as propriedades document
(do objeto Document). H ainda duas propriedades que referenciam a si
mesmas (auto-referenciais): window e self. Todas as variveis globais so
definidas como propriedades do window.
2. Hierarquia dos Objetos
Acabamos de ver que window o objeto principal na forma client-side de
JavaScript e quase todos os outros objetos do browser podem ser acessados
atravs dele seguindo uma cadeia de propriedades. Esta cadeia formada por
objetos contidos no objeto window, que por sua vez contm outros objetos
numa relao hierrquica. Neste sentido, pode-se dizer que o objeto window
est no topo da hierarquia.
A figura abaixo mostra a hierarquia de objetos dentro de window, onde cada
objeto ligado a um objeto acima representa uma relao de contido em.
Figura 15.1 - Hierarquia dos objetos de window
O esquema acima mostra que dentro do objeto window, na forma de

propriedades, encontramos os objetos history, location, document
e status. Para se ter acesso a qualquer um deles necessrio fazer uso do
operador ponto ("."). Veja a sintaxe abaixo:
window.history.back();
window.location = http://www.cederj.gov.br;
window.document.write("<H1>Seu " +
"Site<H1>");
window.document.forms[0].text =
"as vezes as coisas podem " + "ficar bem
2
complexas";
Como a cadeia de objetos conectados pode ficar bem longa, por uma questo
de simplificao, JavaScript permite referenciar os objetos internos a window
sem citar a prpria window. Assim, possvel reescrever as linhas anteriores
como:
history.back();
location = http://www.cederj.gov.br;
document.write(<H1>Seu Site</H1>);
document.forms[0].text =
"as vezes as coisas podem " +
"ficar bem complexas";
J deve ter dado para notar que entender a hierarquia e que objetos esto
contidos em outros crucial para uma programao bem-sucedida. Na figura
anterior mostrou-se s algumas propriedades de alguns objetos. A maioria dos
objetos tem mais propriedades que as mostradas ali.
Para melhor compreender a hierarquia de objetos dentro do window melhor
observar um exemplo real. Observe as seguintes linhas de cdigo:
<HTML>
<HEAD>
<TITLE>Exemplo de Hierarquia</TITLE>
</HEAD>
<BODY bgcolor=white>
<CENTER><IMG SRC="seuemb.gif"></CENTER>
<FORM>
<TABLE>
<TR>
<TD>Nome:</TD>
<TD><INPUT TYPE=TEXT NAME="nome" SIZE=40
VALUE="Fulano Sicrano"></TD></TR>
<TR>
<TD>E-mail:</TD>
<TD><INPUT TYPE=TEXT SIZE=40 VALUE=
"fulano@qualquer.coisa.br"></TD></TR>
<TR>
<TD>Href do link:</TD>
<TD><INPUT TYPE=TEXT SIZE=40></TD></TR>
<TR>
<TD>Src da imagem:</TD>
<TD><INPUT TYPE=TEXT SIZE=40></TD></TR>
</TABLE>
<BR><INPUT TYPE=BUTTON Name=botao Value="Pressione">
</FORM>
<CENTER>
<IMG SRC="0.gif" height=6>
<P><A HREF="http://www.faperj.br">outros
links</A></P>
</CENTER>
<SCRIPT LANGUAGE="javascript">
document.forms[0].elements[2].value =
document.links[0].href;
3
document.forms[0].elements[3].value =
document.images[0].src;
document.write("O nome que aparece +
no campo nome do formulrio " +
document.forms[0].elements[1].value);
texto = prompt("Qual texto deve +
aparecer no boto ? ");
document.forms[0].elements[4].value = texto;
</SCRIPT>
</BODY>
</HTML>
Estas linhas produzem uma pgina como a mostrada na figura 15.2.
Figura 15.2 - Pgina gerada e os diversos nveis dos seus componentes
Esta pgina tem um objeto window com os elementos mostrados na figura 15.3.
Figura 15.3 - Elementos da pgina exemplo
O objeto document, como pode ser observado, tem um array de imagens, um

de formulrios e um de links. O nmero de elementos de cada um destes tipos
contidos na janela indica o nmero de elementos de cada array. Assim, a
pgina do exemplo contm duas imagens e o array imagens contm dois
objetos, um para cada imagem numerada de acordo com a ordem que aparece
4
na pgina. O formulrio por sua vez tambm pode ter diversos elementos, onde
cada elemento pode ser um dos elementos de interao possveis de pertencer a
um formulrio. No formulrio do exemplo das figuras 15.2 e 15.3 tem-se um
array de 5 elementos, todos <input> , 4 do tipo text e o ltimo do tipo
button.
3. Comando with
Neste momento torna-se necessrio introduzir um novo elemento que facilita a
manipulao dos objetos, permitindo uma economia de digitao quando se
deseja referenciar vrias propriedades e mtodos de um mesmo objeto. O
comando with usado para temporariamente modificar a cadeia de escopo.
Ele tem a seguinte sintaxe:
with ( objeto ) comandos
A sua funo adicionar objeto para a frente da cadeia de escopo, executar
os comandos e ento re-estabelecer o estado original da cadeia de escopo.
Ao indicar um objeto entre os parnteses, os mtodos e propriedades dentro das
chaves vo ser considerados como pertencentes ao objeto indicado (se for
possvel). Assim, no exemplo anterior, no lugar do texto que est escrito entre
as tags <SCRIPT....>...</SCRIPT>, possvel escrever:
with(document){
forms[0].elements[2].value=links[0].href;
forms[0].elements[3].value=images[0].src;
write("O nome que aparece no campo " +
"nome do formulrio " +
forms[0].elements[0].value +
"cujo e-mail :" +
forms[0].elements[1].value);
texto = prompt("Qual texto deve " +
"aparecer no boto ? ");
forms[0].elements[4].value = texto;
}
Este comando especialmente til no caso de encadeamentos maiores de
objetos, como:
with(document.forms[0].elements[1]){
value = "Fulano da Tal";
name = "Nome";}
Mas importante dizer que o cdigo usando with roda mais devagar que um
equivalente sem with, alm de poder em alguns casos ser de difcil
entendimento e ocasionar m interpretao.
Observe que uma outra maneira possvel de economizar digitalizao seria
criar variveis, no caso acima esta forma legtima de economizar cdigo
poderia ser reescrever as linhas anteriores como:
var elemento=document.forms[0].elements[1];
elemento.value="Fulano de Tal";
elemento.name="Nome";
4. Comando forin
O comando for tem uma outra sintaxe diferente daquela que vimos em um
captulo anterior: for(...;...;...). Esta outra sintaxe simplifica a
manipulao e permite percorrer todas as propriedades de um objeto. Esta
sintaxe :
for ( varivel in objeto )
comandos
Nesta sintaxe varivel pode ser o nome de uma varivel, um elemento de
um array ou uma propriedade de um objeto (ou seja, alguma coisa possvel de
estar no lado esquerdo de uma expresso de atribuio). objeto o nome de
um objeto ou uma expresso que pode ser equivalente a um objeto, e como
sempre comandos representa um comando nico ou um grupo de comandos
em bloco.
O comando for...in proporciona um meio de percorrer em loop as
propriedades de um objeto. O corpo do comando executado uma vez para
cada uma das propriedades do objeto. Antes do corpo do loop ser executado, o
nome de uma propriedade do objeto atribuda varivel como uma
string. Dentro do corpo do loop, voc pode usar a varivel para observar o
valor da propriedade do objeto usando o operador[ ].
possvel atravs do for recuperar, um a um, os nomes das propriedades e,
posteriormente, acess-las utilizando o objeto como um array. O lao a seguir
imprime na pgina cada uma das propriedades do objeto navigator:
for (prop in navigator)
document.write(prop + = +
navigator[prop] );
Enquanto que as linhas:
primElem=document.forms[0].elements[0];
for (i in primElem)
document.write("<br>" + i + "= " +
primElem[i]);
imprimem todas as propriedades do primeiro elemento de
document.forms[0].
O loop for/in no especifica a ordem com que as propriedades do
objeto sero atribudas varivel. As propriedades dos objetos
definidas como no enumeradas (como muitas propriedades embutidas e
todos os mtodos embutidos) no podem ser examinadas pelo for/in.
5. Objeto location
O objeto location contm informaes relacionadas a URL corrente. Ele
representa e controla a localizao do navegador, sendo armazenado na
propriedade location do objeto window.
6
As propriedades de location so todas do tipo read/write e strings.

Referem-se string da URL e suas vrias partes, que foram vistas nas aulas 1 e
2 e tm o seguinte formato geral:
protocol://hostname:port/pathname?search#hash
A propriedade mais importante deste objeto a string que contm o endereo
completo da URL corrente: propriedade href. Cada pedao da URL tambm
pode ser referenciada individualmente atravs das propriedades: protocol,
host, hostname, port, pathname, hash e search (dados de
um formulrios enviados pelo mtodo get).
Ao invs de utilizar location ou location.href para substituir a URL
corrente por uma completamente nova, voc pode modificar s uma poro da
URL corrente atribuindo strings para a propriedade do objeto location que
voc quer modificar. Por exemplo, se voc quiser mudar para uma certa
localizao dentro da mesma pgina pode usar s a propriedade hash com o
nome da ncora do ponto desejado.
As propriedades e os mtodos do objeto location encontram-se nas tabelas
15.1 e 15.2 que seguem. Para entender melhor estas propriedades, considere a
seguinte URL fictcia:
"http://www.ic.uff.br:1234/~aconci/CV.html?query=Java
Script&matches=66#results"
15.1 - Propriedades do objeto do browser location
Propriedade
Significado
hash
Especifica a ncora na string da URL corrente, deve incluir o
smbolo # inicial, na URL exemplo seria #results .
host
Combina as partes da URL correspondentes ao hostname e a
port. Na URL exemplo seria www.ic.uff.br:1234 .
hostname Parte da URL correspondentes ao hostname, no exemplo:
www.ic.uff.br
href
pathname
port
protocol
search
Especifica o texto completo da URL:

http://www.ic.uff.br:1234/~aconci/CV.html?JavaScri
pt#results
Parte da URl, correspondente ao path: /~aconci/CV.html
Parte da URL correspondente port. No exemplo : 1234
Especifica a parte da URL correspondente ao protocolo, inclui

":". No exemplo http:
Parte da URL correspondente consulta (query), inclui "?". No
exemplo seria: ?query=JavaScript&matches=66
Este objeto contm dois mtodos. O mtodo reload() permite recarregar a

pgina corrente a partir do servidor Web. O mtodo replace() carrega e
mostra uma URL especificada sem incluir um novo dado na lista de pginas
visitadas, ou seja, substituindo a pgina antiga pela nova na lista history do
browser. (Esta lista ficar mais clara depois que estudarmos o objeto
History, na seo 6 desta aula). Como voc deve ter observado, este
mtodo no tem o mesmo efeito de apenas definir a propriedade location
ou location.href com um novo endereo de site. Depois de usar
replace() no ser possvel retornar pgina anterior usando o boto Back
7
do seu browser.
15.2 - Mtodos do objeto do browser location
Mtodo
Significado
reload()
Recarrega o documento da cache ou do servidor.
reload(booleano)
replace(url)
Substitui o documento corrente pelo especificado no
parmetro url tomando a sua posio na seo
history do browser.
O mtodo reload pode ser usado com ou sem parmetros. Se o argumento
for omitido ou for o booleano false, o mtodo s realmente recarrega uma
nova pgina do servidor se ela tiver sido modificada desde a ltima vez que foi
visitada, caso contrrio carrega a cpia do cache. Se o argumento for true
ela sempre ser recarregada do servidor, no sendo consultado o cache do
usurio.
6. Objeto history
A propriedade history (histrico) do objeto window se refere ao objeto
history da janela ou frame: window.history ou frame.history. O
objeto history d acesso (apenas para leitura) lista de URLs navegadas
por uma janela ou frame. Este objeto contm as 4 propriedades mostradas na
tabela 15.3 e suporta os 3 mtodos da tabela 15.4.
15.3 - Propriedades do objeto do browser history
Propriedade
length
current
next
previous
Significado
Nmero de pginas armazenadas na lista do objeto history.
URL da pgina atual.
URL da pgina posterior a atual na lista.
URL da pgina anterior a atual na lista.
Como o histrico das pginas visitadas uma informao privada, por questes
de segurana, alguns browsers, que no suportam signed scripts , restringem as
formas como as propriedades deste objeto podem ser usadas.
15.4 - Mtodos do objeto do browser History
Mtodo
go(n)
back()
forward()
Significado
Permite ir para a n-sima pgina. Valores positivos movem
para as prximas URL e negativos para as anteriores.
Volta para a pgina anterior.
Vai para a pgina seguinte.
O exemplo a seguir ilustra a utilizao do objeto history:

<form>
<input type=button value="<-- 2"
onclick="history.go(-2)">
<input type=button value="Prev."
onclick="history.back()">
<input type=button value="Prox."
onclick="history.forward()">
<input type=button value="2 -->"
onclick="history.go(2)">
</form>
<script language=JavaScript>
document.write("<br> h " +
history.length +
" pginas visitadas" );
</script>
Observe que os mtodos back() e forward() tm o mesmo efeito que
usar os botes Back e Forward do browser. Tambm so equivalentes a
history.go(-1) e history.go(1). Eles no tero efeito se j tiver
atingido o final da lista.
Exerccios:
1. Digite o cdigo que gerou a pgina mostrada na figura 15.2 (ele fornecido
antes da figura). Desative neste cdigo a parte em que pedido para por um
novo texto no boto, isto , delete ou transforme em comentrio o trecho:
texto=prompt("Qual texto deve aparecer"+
" no boto? ");
Depois crie uma ncora na parte da pgina onde est o link, com o texto
"outros links". Isto , inclua o trecho:
<a name="#link">
depois da linha:
<IMG SRC="0.gif" height=6>
Agora faa a pgina, ao ser carregada, ir imediatamente para esta seo
incluindo as linhas:
<SCRIPT LANGUAGE="javascript">
window.location.hash="link";</script>
na seo <Head>...</Head> .
Mostre nesta seo todas as demais propriedades do objeto location.
Finalmente inclua mais um boto e faa ser carregada uma nova pgina ao ser
pressionado qualquer boto. Em um dos botes faa a ao ocorrer, usando a
propriedade location.href. No outro boto use o mtodo
replace(url). Verifique se o que ocorre quando voc pressiona "back"
do seu navegador ao usar o mtodo replace() idntico ao que ocorre
quando voc usa location.href="url".
2. Inclua o cdigo do exemplo history na pgina anterior. Verifique o
resultado visualizando a pgina. Veja se seu navegador possibilita que a pgina
tenha acesso s propriedades do objeto history do usurio, tentando incluir
as linhas:
document.write("<br>A pgina anterior "
+ toString(history.previous));
9
document.write("<br>A prxima : "

+ toString(history.next));
dentro das tags <script...></script>
Resumo:
Nesta aula voc foi apresentado ao conceito de hierarquia dos objetos da
linguagem JavaScript. Conheceu em detalhes as caractersticas de duas classes
de objetos do navegador: location e history. Na prxima aula
continuaremos neste assunto estudando outra classe de objetos do navegador.
Auto-avaliao:
Voc achou complexo este conceito de hierarquia? Ento releia-o antes da
prxima aula para usar bem os objetos. E, quanto aos exerccios, usou com
facilidade os diversos comandos e mtodos novos? Nesta etapa do nosso curso,
voc j deve saber o que fazer, no mesmo?
10

15.0.os Objetos Do Navegador PDF

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

15.0.os Objetos Do Navegador PDF

Hochgeladen von

Copyright:

Verfügbare Formate

Aula 15: Os objetos do navegador

Nesta aula continuaremos a tratar dos objetos em JavaScript. Veremos agora

Na forma client-side da linguagem, que o objetivo desse nosso curso, o

O esquema acima mostra que dentro do objeto window, na forma de

O objeto document, como pode ser observado, tem um array de imagens, um

As propriedades de location so todas do tipo read/write e strings.

Especifica o texto completo da URL:

Especifica a parte da URL correspondente ao protocolo, inclui

Este objeto contm dois mtodos. O mtodo reload() permite recarregar a

O exemplo a seguir ilustra a utilizao do objeto history:

document.write("<br>A prxima : "

Das könnte Ihnen auch gefallen