JavaScript - Aula05

5.
Programao JavaScript
O objeto document
! O objeto document representa o documento HMTL carregado no navegador.
o objeto mais importante da programao JavaScript, pois a partir desse
objeto que o script tem acesso aos elementos da pgina. Assim como visto
para o objeto window, os elementos de uma pgina podem ser referenciados
por um vetor especfico. Dentre esses elementos, os mais importantes so:
"
document.applets: vetor de todos os applets de um documento;
"
document.forms: vetor de todos os formulrios de um documento;
"
document.images: vetor de todas as imagens contidas em um
documento;
"
document.links: vetor de todos as ncoras contidas em um
documento.
! Assim como para o objeto window, a posio de um elemento em seu
respectivo vetor depende de sua posio no documento. Cada elemento pode
tambm ser acessado por seu nome, designado pelo atributo NAME.
! Exemplo: No documento a seguir, a primeira imagem pode ser
referenciada como document.images[0] ou como document.sol.
Da mesma forma, o formulrio pode ser referenciado por
document.forms[0] ou por document.clima. Porm, a segunda
imagem pode apenas ser referenciada por document.images[1],
uma vez que no foi designado um nome para esta imagem.
ELFS, 2003
133
<html>
<head>
<title>Elementos de um Documento</title>
</head>
<body>
<img src="sol.jpg" name="sol">
<form name="clima">
<input type="button" value="clima">
</form>
<img src="chuva.jpg">
</body>
</html>
aula05_01.htm
Atravs do objeto document, possvel tambm ter acesso s propriedades

de uma pgina, tais como:
"
document.bgColor: retorna e permite modificar a cor de fundo do
documento atual;
"
document.linkColor: retorna a cor definida para os links;
"
document.vlinkColor: retorna a cor definida para os links que j
foram visitados;
"
document.title: retorna o ttulo do documento atual;
"
document.URL: retorna o endereo completo do documento atual.
ELFS, 2003
134
!
Exerccio: Verificar a possibilidade de alterao nas propriedades do objeto

document considerando o seguinte cdigo:
aula05_02.htm
<html>
<head>
<title>Testando as propriedades do objeto document</title>
</head>
<body>
<script type="text/javascript">
function muda_tudo()
{
document.bgColor = "yellow";
document.title = "Mudou tudo";
document.linkColor = "#FF00FF"
document.vlinkColor = "green";
}
</script>
<a href="javascript:void(0)">Apenas um link</a>
<p>
<a href="javascript:void(0)" onClick="muda_tudo()">
Clique aqui para alterar as propriedades do documento</a>
</body>
</html>
Note javascript:void(0) usado como valor de href. Este comando deve

ser utilizado quando se deseja que uma ncora no tenha efeito algum.
ELFS, 2003
135
"
"
"
document.open(): funo que abre o documento para escrita (stream).

O processo anlogo ao processo de carregamento de um documento
HTML na Internet: o navegador se conecta ao servidor, e este abre um
stream, escreve os dados contidos no documento requisitado e fecha o
stream. Deve ser utilizado com as funes write e close.
document.close(): funo que fecha o stream aberto pela funo
open.
document.write(string): escreve o valor do parmetro (um string)
dentro de um novo documento, cujo stream foi previamente aberto.
Exemplo:
aula05_03.htm
<html>
<head>
<title>Testando document.write</title>
</head>
<frameset rows = "50%,*">
<frame name="sup" src="aula05_03a.htm">
<frame name="inf" src="aula05_03b.htm">
</frameset>
</html>
Neste exemplo, o documento carregado no frame inf ser substitudo por

outro documento aberto pelo mtodo open().
ELFS, 2003
136
aula05_03a.htm
<html>
<head><title>Teste</title>
<script type="text/javascript">
function modifica()
{
parent.inf.document.open();
parent.inf.document.write("Modificamos o documento!");
parent.inf.document.close();
Note que parent refere-se janela do frameset
}
(aula05_03.htm), que contm os frames sup
</script>
(este documento) e inf (o documento de baixo).
</head>
<body>
<a href ="javascript:void(0)" onClick = "modifica();">
Clique aqui para modificar o frame de baixo</a>
</body>
</html>
aula05_03b.htm
<html>
<head>
Note que a substituio do contedo deste frame (pelo texto
<title>Teste</title>
passado pela funo write) feita apenas dentro do navegador,
</head>
ou seja, o arquivo aula05_03b.htm no ser modificado.
<body>
Este apenas um frame<br>
contendo, originalmente, essas duas linhas.
</body>
</html>
ELFS, 2003
137
Tratamento de Eventos em JavaScript
! A linguagem JavaScript dispe de recursos para o tratamento de eventos
especficos para o ambiente da Internet. Em alguns exerccios anteriores
foram utilizados tratamentos de eventos, como o onClick, por exemplo. O
tratamento de eventos deve ser inserido em tags, uma vez que os eventos
ocorrem sobre objetos, tais como imagens, formulrios, links, etc. A sintaxe
bsica para o tratamento de um evento : <tag evento="ao">, onde
ao deve corresponder a instrues (ou chamadas a funes) JavaScript.
Cada objeto possui seu prprio conjunto de eventos para o qual o objeto
responde. Os principais eventos que podem ser includos em um programa
JavaScript so descritos a seguir.
!
Eventos relacionados ao navegador e ao documento

"
onLoad: Deve ser inserido dentro das tags <body> e <frameset> e
acionado quando a pgina carregada.
"
onUnload: Idntico ao anterior, porm executado quando o documento
sai do navegador (no caso da pgina ser mudada ou a janela fechada).
<HTML>
<HEAD>
<TITLE>Teste</TITLE>
<SCRIPT language="JavaScript">
ELFS, 2003
aula05_04.htm
138
function pergunta()
{
nome = prompt("Qual seu nome?","");
document.open();
document.write("Oi "+nome+"!<BR>");
document.write("Voc acaba de carregar este documento.");
document.close();
}
function despedida()
{
alert("Espero que tenha gostado do site. At breve!");
}
</SCRIPT>
</HEAD>
<BODY onLoad="pergunta()" onUnload="despedida()">
Veja que site interessante.<BR>
Ou no ?
</BODY>
</HMTL>
Eventos relacionados ao mouse

Todos os eventos a seguir podem ser tratados por uma imagem ou por uma
ncora e, portanto, devem ser colocados dentro dos respectivos tags.
"
onMouseOver: evento acionado quando o apontador do mouse passa
sobre um link ou sobre uma imagem.
ELFS, 2003
139
"
"
onMouseOut: evento acionado quando o apontador do mouse sai de

cima de um link ou de uma imagem.
onClick : evento acionado quando ocorre um clique do mouse, podendo
ser tratado por botes, caixas de seleo, botes de rdio, caixas e reas
de texto, etc. muito til para criar pseudo-links, que substituem ou
melhoram o tag <a href ...>. Por exemplo, o cdigo a seguir gera um
falso link que aciona uma caixa de alerta.
<HTML>
<HEAD><TITLE>Teste</TITLE></HEAD>
<BODY>
<A HREF="javascript:void(0)"
onClick="window.alert('Este link falso!')">
Clique aqui</A>
</BODY>
</HMTL>
aula05_05.htm
Exerccio: Considere a seguinte funo:

aula05_06.htm
ELFS, 2003
function carrega_imagens()
{
imagem1 = new Image();
imagem2 = new Image();
imagem1.src = "imagem1.gif";
imagem2.src = "imagem2.gif";
}
140
Criar um script contendo, alm da funco carrega_imagens(), duas outras
funes: troca_imagem() e muda_pagina(). O script deve alternar entre
uma imagem e outra medida que o mouse est sobre ela ou no est sobre
ela. Um clique sobre a imagem deve carregar uma nova pgina. Usar a funo
prompt("URL","") para obter a URL da nova pgina a ser carregada.
!
Eventos relacionados a um formulrio

Formulrios so importantes no desenvolvimento de aplicaes para a
Internet. Os eventos a seguir que permitem tratar aes especficas sobre os
elementos de um formulrio:
"
onBlur: acionado sempre que um objeto perde o foco, ou seja, quando
selecionado um outro objeto.
"
onFocus: acionado quando um objeto selecionado (ganha o foco).
"
onChange: acionado quando o objeto perde o foco e seu valor foi
alterado. Pode ser utilizado com caixas e reas de texto.
"
onReset: evento acionado sempre que o boto Reset de um formulrio
clicado. Deve ser inserido dentro do tag <form>.
"
onSubmit: Idntico ao anterior, porm acionado quando o boto
Submit clicado.
Os elementos de um formulrio so alocados dentro do vetor f.elements,
onde f o nome do formulrio. A posio dos elementos dentro do vetor
depende da ordem com que estes elementos aparecem no documento HTML.
ELFS, 2003
141
Exemplos:
aula05_07.htm
<HTML>
<HEAD><TITLE>Teste</TITLE></HEAD>
<BODY>
<FORM>
Nome:<INPUT NAME="nome" TYPE="text" SIZE="30"
onFocus="window.status='Digite seu nome'"
onBlur="window.status='';
alert('\tNote que o campo Nome perdeu o foco!\n'+
'\tVoc notou a barra de status?')">
<p>Sobrenome: <INPUT NAME="snome" TYPE="text" SIZE="30"
onFocus="window.status='Digite seu sobrenome'"
onBlur="window.status='';
alert('Note que o campo Sobrenome perdeu o foco!')">
</FORM></BODY></HMTL>
<HTML>
<HEAD><TITLE>Teste de formulrio</TITLE>
function Confirma()
{
return confirm("Deseja mesmo apagar os dados?");
}
</SCRIPT>
</HEAD>
<BODY>
ELFS, 2003
aula05_08.htm
142
<FORM NAME="form1"
onReset="return(Confirma())"
onSubmit="alert('Seus dados foram enviados!')">
Nome: <INPUT NAME="nome" TYPE="text" SIZE="30"><BR>
Sobrenome: <INPUT NAME="snome" TYPE="text" SIZE="30"
onChange="alert('Sobrenome alterado!')"><BR>
Sexo: <INPUT TYPE="radio" VALUE="M" NAME="sexo" CHECKED="true">M
<INPUT TYPE="radio" VALUE="F" NAME="sexo"> F<BR>
<BR>
<INPUT NAME="btn1" TYPE="reset" VALUE="Limpar">
<INPUT NAME="btn2" TYPE="submit" VALUE="Enviar">
</FORM>
</BODY>
</HTML>
Outros objetos na programao JavaScript

! A linguagem JavaScript pode fazer uso de vrios outros objetos. Comenta-se a
seguir sobre os mtodos mais importantes associados aos objetos das classes
String, Date e Math.
! Considere a seguinte declarao de objeto: var s = new String("um_string").
Os seguintes mtodos esto disponveis para este objeto:
"
s.length: retorna o tamanho do string s.
"
s.charAt(n): retorna o n-simo caractere do string s.
ELFS, 2003
143
"
"
"
"
"
s.indexOf(c,n): retorna a posio da primeira ocorrncia do caractere

c no string s a partir da posio n (ou a partir do incio do string, caso n
no seja especificado); retorna -1 caso no seja encontrada ocorrncia
alguma.
s.lastIndexOf(c,m): retorna a ltima ocorrncia do caractere c no
string s da posio m para trs (ou do final do string para trs, caso m
no seja especificado); retorna -1 caso no seja encontrada ocorrncia
alguma.
s.substring(n,m): retorna o substring comeando no caractere n e
terminando no caractere m de s.
s.toLowercase(): retorna o string s com todos os caracteres
alfabticos convertidos para letras minsculas.
s.toUppercase(): retorna o string s com todos os caracteres
alfabticos convertidos para letras maisculas.
Objeto Date
Permite ao script acessar a data local da mquina do usurio, alm de dispor
de mtodos para manipular datas e horas com facilidade. Internamente, a
data armazenada como o nmero de milsimos de segundos decorridos
desde 01/01/1970. Considere a seguinte declarao de objeto:
d = new Date("mm/dd/aaaa"). Os seguintes mtodos estaro disponveis para
este objeto:
ELFS, 2003
144
"
"
"
"
"
"
"
"
d.getDate(): retorna o dia do ms, de 1 a 31.

d.getDay(): retorna o dia da semana, de 0 a 6 (0 = domingo; ...; 6 =
sbado).
d.getHours(): retorna a hora atual, de 0 a 23.
d.getMinute(): retorna o nmero atual de minutos, de 0 a 59.
d.getMonth(): retorna o nmero do ms atual, de 0 a 11 (0 = janeiro;
...; 11 = dezembro).
d.getFullYear(): retorna o ano atual.
d.getSeconds(): retorna o nmero atual de segundos, de 0 a 59.
d.getTime(): retorna o nmero de milsimos de segundo transcorridos
desde 01/01/1970 s 00h00.
Exerccio: Criar um contador do nmero

de dias transcorridos desde uma
determinada data, conforme formulrio
mostrado ao lado.
aula05_09.htm
Para isso, basta criar dois objetos Date, um com a data especificada e um
com a data atual e utilizar o mtodo getTime, obtendo-se o nmero de
milsimos de segundos transcorridos entre as duas datas. Para transformar
esse nmero em dias devemos dividir por 86400000 (1000*60*60*24).
ELFS, 2003
145
!
A classe Math
Para utilizar os mtodos desta classe no preciso a criao de um objeto: os
mtodos podem ser referenciados diretamente a partir do nome da classe.
"
Math.E: retorna a constante de Euler e (2.712818828459045).
"
Math.PI: retorna a constante pi (3.141592653589793).
"
Math.abs(n): retorna o valor absoluto de n.
"
Math.ceil(n): retorna o teto de n (menor inteiro maior do que n).
"
Math.floor(n): retorna o piso de n (maior inteiro menor do que n).
"
Math.round(n): arredonda o valor de n para um valor inteiro.
"
Math.random(): gera um nmero pseudo-aleatrio entre 0 e 1.
"
Math.sqrt(n): retorna a raiz quadrada de n.
"
Math.log(n): retorna o logaritmo natural de n.
"
Math.pow(n,m): retorna n elevado a m.
"
Math.cos(n): retorna o cosseno de n (em radianos).
"
Math.sin(n): retorna o seno de n (em radianos).
"
Math.tan(n): retorna a tangente de n (em radianos).
"
Math.acos(n): retorna o arcocosseno de n.
"
Math.asin(n): retorna o arcoseno de n.
"
Math.atan(n): retorna o arcotangente de n.
ELFS, 2003
146
Exerccio: Utilizando o mtodo i.toString(b), que converte o valor de um
inteiro i em um nmero na base b, criar um script para uma pgina como a
mostrada abaixo, de forma que cada clique no boto "Mudar Cor" gere uma
cor de fundo aleatria para a pgina. Lembre-se que uma cor em HTML
definida por um string formado por # e por trs nmeros hexadecimais de
dois dgitos (ou seja, trs nmeros cujos valores hexadecimais vo de 00 a FF
ou, equivalentemente, cujos valores decimais vo de 0 a 255).
aula05_10.htm
Exerccio: Considere o site mostrado na figura a seguir. Escrever o cdigo para

este site considerando os seguintes tpicos:
"
Quando o usurio clicar no boto Limpar, dever ser exibida uma janela
de dilogo para confirmar a operao.
ELFS, 2003
147
aula05_11.htm
Quando o usurio clicar no boto Enviar, o

script deve verificar se os campos
obrigatrios (nome, sobrenome e email)
esto completados. Caso estejam, uma
nova pgina deve aparecer agradecendo a
visita, mostrando os dados digitados e
pedindo confirmao para o envio. Caso
contrrio, uma caixa de alerta deve
aparecer indicando o campo que no est
preenchido corretamente.
Antes que a nova pgina aparea agradecendo a visita e mostrando os dados

digitados, o campo Email dever ser verificado por uma funo. Essa funo
dever verificar se o endereo parece estar correto ou no. Caso no esteja,
uma caixa de alerta dever aparecer e o usurio dever confirmar ou no o
contedo deste campo. Um valor para o campo Email ir parecer estar correto
caso as seguintes condies sejam satisfeitas:
! deve haver pelo menos um caractere antes do smbolo @;
! o smbolo @ deve aparecer uma e uma nica vez;
ELFS, 2003
148
!
!
!
deve haver um ou mais caracteres aps o simbolo @;

esses caracteres devem ser seguidos por um ponto (".");
aps o ponto deve haver dois ou mais caracteres.
A aplicao a seguir implementa um jogo tipo Teste Seus Conhecimentos em

JavaScript. O jogo consiste de uma srie de perguntas de mltipla escolha.
Inicialmente o jogador dever digitar seu nome e escolher o nvel de
dificuldade das perguntas, conforme ilustra a interface abaixo. A cada jogada,
o script dever abrir uma janela, sem barra de status, diretrios, navegao,
onde sero exibidas a pergunta e as opes de resposta. Para escolher uma
resposta, o jogador dever clicar sobre ela.
ELFS, 2003
149
Caso a resposta seja correta, uma nova pergunta dever ser formulada. Caso
a resposta no seja correta, dever ser exibida a resposta correta e o jogo
dever terminar. Ao final da bateria de perguntas, dever aparecer a
pontuao final do jogador e a opo de recomear uma nova bateria de
perguntas ou sair do jogo. As perguntas e respostas devero ser armazenadas
em uma estrutura do tipo array. Para que a sequncia de perguntas no seja
sempre a mesma, variar a ordem das perguntas dependendo de nmeros
gerados aleatoriamente.
A listagem a seguir mostra uma possvel implementao do jogo.
aula05_12.htm
<HTML>
<HEAD>
<TITLE>Teste de Conhecimentos</TITLE>
var
var
var
var
var
ELFS, 2003
quest = new Array(10);

parte = new Array(5);
perg = new Array(10);
ok,jogador,nivel;
pnum,ptotal;
// questes do jogo
// armazena as partes de uma questo
// controla perguntas j feitas
150
Note que o vetor quest armazena a pergunta, as trs opes de resposta e o

nmero da opo correta, separados pelo smbolo "|". muito fcil, portanto,
acrescentar novas questes ao jogo. A funao separa_pergunta mostrada a seguir
se encarrega de separar as partes que compem uma questo, armazenando-as no
vetor parte.
function perguntas()
{
quest[0] = "Elemento de formulrio:|input|text|output|1|";
quest[1] = "JavaScript:"+
"|Orientada a objetos|Baseada em objetos|No usa objetos|2|";
quest[2] = "Evento inexistente:|onover|onblur|onerror|1|";
quest[3] = "JavaScript :|Interpretada|Compilada|Encriptada|1|";
quest[4] = "Protocolos da Internet:|POP3 e OOP|LOOP e HTTP|FTP e SMTP|3|";
quest[5] = "Palavra reservada JavaScript:|switch|program|token|1|";
quest[6] = "Caixa de edio:"+
"|window.alerta|window.confirma|window.prompt|3|";
quest[7] = "Objetos do browser:"+
"|window e math|document e navigator|math e string|2|";
quest[8] = "Cor vlida:|AABBCC|#001122|FFCCFF#|2|";
quest[9] = "Escopo de varivel definida fora de funo:"+
"|local|regional|global|3|";
}
ELFS, 2003
151
function separa_pergunta(questao)
{
s = new String(questao);
i = -1;
for (k = 0; k < 5; k++)
{
j = s.indexOf("|",i+1);
parte[k] = s.substring(i+1,j);
i = j;
}
}
function pontuacao(ok)
{
pontos = new Number(form1.escore.value);
if (ok == 1)
pontos = pontos + 10;
form1.escore.value = pontos.toString(10);
}
function mostrar_pergunta(n)
{
separa_pergunta(quest[n]);
janela = window.open("","","toolbar=no,location=no,directories=no,"+
"status=no,menubar=no,scrollbars=no,"+
"resizable=yes,width=600,height=250");
ELFS, 2003
152
Note o uso do comando with, que simplifica a notao.
Observe tambm a necessidade de chamar a funo pontuao
como opener.pontuao, pois essa funo pertence janela
que abriu esta nova janela
with (janela.document)
{
open();
write("<HTML><HEAD><TITLE>Teste de Conhecimentos</TITLE>");
write("</HEAD><BODY BGCOLOR='#FFCCFF'
onUnload='opener.pontuacao(ok);'>");
write("<B><FONT SIZE='2' COLOR='red' FACE='comic sans MS'>");
write("Jogador: "+jogador+" [nvel "+nivel+"]");
write("<BR><BR>");
write("<FONT COLOR='black'>");
write("Questo "+pnum+": <B>"+parte[0]+"</B><BR>");
for (i = 1; i < 4; i++)
{
write("<BR>"+i+") <A HREF='#' onClick='");
if (i == parte[4])
write("ok = 1;");
else
write("ok = 0;");
write("window.close();'>"+parte[i]+"</A>");
}
write("</FORM></FONT></B></BODY></HMTL>");
close();
}
}
ELFS, 2003
153
function iniciar_jogo()
{
perguntas();
pnum = 0;
for (i = 0; i < 10; i++)
perg[i] = 0;
}
function jogar()
{
jogador = form1.nome.value;
nivel = form1.nivel.value;
ptotal = 2*nivel;
pnum++;
Note que o nvel de dificuldade vai influir

somente no nmero de questes a serem
formuladas ao jogador.
Note que, aps formuladas todas as

if (pnum > ptotal)
questes, o segundo boto do formulrio
{
ser desabilitado.
form1.btn2.disabled = true;
perc = Math.round(10*(form1.escore.value/ptotal));
if (perc > 80)
form1.resultado.value = "Parabns, voc acertou "+perc+
"% das questes.";
else
form1.resultado.value = "Voc acertou "+perc+"% das questes.";
}
ELFS, 2003
154
else
{
do {
n = Math.round(10*Math.random());
} while (perg[n]==1); // para no repetir pergunta
perg[n] = 1;
mostrar_pergunta(n);
Note que o boto Jogar ser alterado para
if (pnum == ptotal)
Resultado, depois que a ltima questo
form1.btn2.value = "Resultado";
tiver sido formulada ao jogador (esse boto
}
ser desabilitado logo a seguir, conforme
}
comentrio anterior).
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#CCFFFF" onLoad='iniciar_jogo();'>
<FONT SIZE=2 COLOR="maroon" FACE="comic sans MS">
<B>
<FORM NAME="form1" onReset="window.close();"
onSubmit="jogar(); return false;">
Bem-vindo ao Teste de Conhecimentos<BR><BR>
Nome: <INPUT NAME="nome" TYPE="text" SIZE="30"><BR><BR>
Nvel de dificuldade: <SELECT SIZE="1" NAME="nivel">
<OPTION VALUE="1"> Mnimo </OPTION>
<OPTION VALUE="2"> Baixo </OPTION>
<OPTION VALUE="3"> Mdio </OPTION>
<OPTION VALUE="4"> Alto </OPTION>
<OPTION VALUE="5"> Mximo </OPTION>
</SELECT><BR><BR>
ELFS, 2003
155
Seu escore: <INPUT NAME="escore" TYPE="text" SIZE="5" VALUE="0"><BR><BR>
Seu resultado: <INPUT NAME="resultado" TYPE="text" SIZE="40"><BR><BR><BR>
<INPUT NAME="btn1" TYPE="reset" VALUE="Fim">
<INPUT NAME="btn2" TYPE="submit" VALUE="Jogar">
</FORM>
</B>
</FONT>
</BODY>
</HMTL>
Cookies em JavaScript
! O protocolo HTTP foi desenvolvido originalmente como sendo stateless, ou
seja, uma vez que uma pgina tenha sido removida da janela, o browser no
retm informao alguma sobre essa pgina, exceto no objeto history. Da
mesma forma, o servidor web no tem lembrana das requisies dos
clientes. Cookies constituem uma forma de acrescentar um pouco de memria
ao browser armazenando uma pequena quantidade de dados associados
paginas e sites. Sempre que um browser habilitado a aceitar cookies requer
uma pgina ele procura ver se existe algum cookie associado com a URL
daquela pgina. Caso exista, esse cookie enviado ao servidor web como
parte do cabealho HTTP da requisio.
! Um cookie pode ser estabelecido e recuperado em um script por meio da
propriedade document.cookie.
ELFS, 2003
156
!
Um cookie usualmente constitudo por pares atributo-valor separados por

pontos-e-vgulas. Exemplo:
document.cookie =
"nome=PPI;domain=feg.unesp.br;expires=2003,12,31;secure;"
Neste caso, tem-se um cookie denominado PPI, que ser transmitido

somente aos servidores no domnio feg.unesp.br, que expira em 31 de
dezembro de 2003, e que somente ser transmitido ao servidor se um meio
de transmisso seguro (como https:) estiver sendo usado. Observe que o
valor do cookie dado como um string de pares atributo-valor. Cada par par
atributo-valo pode ter at 4KB de dados, no pode conter espaos nem
pontos-e-vrgulas e deve conter somente um sinal de igual (=).
O atributo expires: Normalmente, quando o usurio fecha o browser, todos os
cookies que no apresentam o atributo expires so destrudos. O exemplo a
seguir mostra como estabelecer um cookie vlido at um ano aps ter sido
construdo:
var umano = new Date();
umano.setFullYear(umano.getFullYear()+1);
document.cookie = "nome=CEIE;expires="+umano.toGMTString();
Para destruir um cookie cuja expirao tenha sido estabelecida como uma
data futura basta alterar seu atributo expires para alguma data que j se
passou.
ELFS, 2003
157
!
O atributo path: Normalmente, um cookie pode ser acessado pelo documento

que o criou, ou por qualquer outro documento residindo na mesma pasta ou
em alguma de suas sub-pastas. Por exemplo, se o arquivo:
http://feg.unesp.br/cursos/PPI/cookie.htm
criou um cookie, este cookie pode ser lido por qualquer arquivo desta pasta
ou de suas sub-pastas, como por exemplo:
http://feg.unesp.br/cursos/PPI/outro.htm
ou
http://feg.unesp.br/cursos/PPI/DAI/maisum.htm
mas no pode ser lido por um arquivo como:

http://feg.unesp.br/index.htm
Para que o cookie possa ser lido por outros documentos preciso estabelecer
seu atributo path. Exemplo: se o cookie for criado como:
document.cookie = "nome=PPI;domain=feg.unesp.br;path=/";
ento, esse cookie poder ser lido por qualquer documento que resida em
uma pasta ou sub-pasta do diretrio http://feg.unesp.br.
Recuperao de cookies
! Os valores dos atributos expires, path, domain e secure no esto
disponveis para serem lidas por um cliente. Por exemplo, se criarmos o
cookie:
ELFS, 2003
158
document.cookie="nome=PPI;domain=feg.unesp.br;expires=2003,12,31"
ento, o comando: alert(document.cookie); ir exibir o string:

"nome=PPI". Os demais valores esto disponveis para o servidor e so
enviados como parte do cabealho HTTP mas, por razes de segurana, no
podem ser acessados pela pgina do cliente.
Exemplo:
aula05_13.htm
<html>
<head><title>Exemplo de Cookie</title></head>
<body>
<script language="JavaScript">
var umano = new Date();
umano.setFullYear(umano.getFullYear()+1);
document.cookie="autor=elfs;expires="+umano.toGMTString();
</script>
<h2>Exemplo de cookie</h2>
<a href="aula05_13a.htm">cookie1</a><br>
<a href="aula05_13b.htm">cookie2</a>
<form>
<input type="button" name="botao" value="Recupera cookies"
onClick="alert(document.cookie)">
</form>
</body>
</html>
ELFS, 2003
159
!
Observe que essa pgina cria um cookie "autor=elfs" com um prazo de

expirao de um ano. A pgina apresenta ainda dois links cookie1 e cookie2
(para as pginas aula05_13a.htm e aula05_13b.htm, mostradas a
seguir) que permitiro a criao de outros cookies, e um boto Recupera
cookies, que exibe em uma caixa de alerta os cookies disponveis.
Inicialmente, se clicarmos no boto Recupera cookies

ser exibida a caixa de alerta mostrada ao lado, ou
seja, a nica informao disponvel do cookie :
autor=elfs.
ELFS, 2003
160
aula05_13a.htm
<html>
<title>Exemplo de Cookie</title>
</head>
<body>
<form>
<h4>Digite o curso:</h4><input type="text" name="curso">
<input type="button" name="botao" value="Cria cookie"
onClick="document.cookie='curso='+document.forms[0].curso.value">
</form>
</body>
</html>
aula05_13b.htm
<html>
<title>Exemplo de Cookie</title>
</head>
<body>
<form>
<h4>Digite a disciplina:</h4><input type="text" name="discip">
<input type="button" name="botao1" value="Cria cookie"
onClick="document.cookie='disciplina='+document.forms[0].discip.value">
</form>
</body>
Note as referncias absolutas aos campos curso e discip. Observe que como no
</html>
foi dado um nome ao formulrio, temos que usar a matriz de formulrios do documento
(no caso, essa matriz contm apenas um elemento, na posio forms[0]).
ELFS, 2003
161
!
Clique nos links cookie1 e cookie2 e crie novos cookies. Clique novamente no
boto e recupere os cookies existentes. Ser exibida uma janela de alerta
como:
Feche o browser. Abra novamente o browser, apontando-o outra vez para o

arquivo aula05_13.htm. Clique no boto para recuperar os cookies
disponveis. Note que somente o cookie 'autor=elfs' ser recuperado,
pois os demais (por no terem data de expirao) expiraram quando o
browser foi fechado.
importante observar que a propriedade window.document.cookie
diferente de outras propriedades de objetos JavaScript pelas seguintes razes:
! A propriedade cookie no est diretamente relacionada a seu objeto-pai
(o objeto document). A propriedade cookie apenas um ponteiro para
os cookies do browser. Quando se estabelece um valor para a
propriedade, o dado tratado pelo sistema de gerenciamento de cookies
do browser e no diretamente por seu objeto-pai, como no caso das
demais propriedades de objetos.
ELFS, 2003
162
!
A propriedade cookie armazena em um nico string todos os cookies

visveis, mas no um vetor de valores. Isso diferente de outras
propriedades tal como o vetor de formulrios, cujos elementos
correspondem exatamente aos tags <form> do documento.
Extenses JavaScript Linguagem XHTML

! Muitos grupos de desenvolvedores de aplicaes para a Internet tm
proposto extenses linguagem XHTML baseadas em programas JavaScript.
Uma dessas extenses a Forms Markup Language (FML) que introduz um
conjunto de novos tags e atributos especialmente projetados para a criao
de formulrios. Essas novas construes so "traduzidas" para scripts
JavaScript e "injetadas" nas pginas que as utilizam.
! Uma das extenses propostas na linguagem FML so alguns novos atributos
para caixas de texto, como: ctype e validation. O atributo ctype
(content type) estabelece o tipo de informao que a caixa de texto dever
conter, por exemplo: um endereo eletrnico, um nmero, uma data, uma
URL, um nmero de carto de crdito, dentre outras possibilidades. O
atributo validation estabelece regras de validao para o contedo da
caixa de texto, dependendo do valor do parmetro ctype.
ELFS, 2003
163

JavaScript - Aula05

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

JavaScript - Aula05

Uploaded by

Copyright:

Available Formats

5.

Atravs do objeto document, possvel tambm ter acesso s propriedades

Exerccio: Verificar a possibilidade de alterao nas propriedades do objeto

Note javascript:void(0) usado como valor de href. Este comando deve

document.open(): funo que abre o documento para escrita (stream).

Neste exemplo, o documento carregado no frame inf ser substitudo por

Eventos relacionados ao navegador e ao documento

Eventos relacionados ao mouse

onMouseOut: evento acionado quando o apontador do mouse sai de

Exerccio: Considere a seguinte funo:

Eventos relacionados a um formulrio

Outros objetos na programao JavaScript

s.indexOf(c,n): retorna a posio da primeira ocorrncia do caractere

d.getDate(): retorna o dia do ms, de 1 a 31.

Exerccio: Criar um contador do nmero

Exerccio: Considere o site mostrado na figura a seguir. Escrever o cdigo para

Quando o usurio clicar no boto Enviar, o

Antes que a nova pgina aparea agradecendo a visita e mostrando os dados

deve haver um ou mais caracteres aps o simbolo @;

A aplicao a seguir implementa um jogo tipo Teste Seus Conhecimentos em

quest = new Array(10);

Note que o vetor quest armazena a pergunta, as trs opes de resposta e o

Note que o nvel de dificuldade vai influir

Note que, aps formuladas todas as

Um cookie usualmente constitudo por pares atributo-valor separados por

Neste caso, tem-se um cookie denominado PPI, que ser transmitido

O atributo path: Normalmente, um cookie pode ser acessado pelo documento

mas no pode ser lido por um arquivo como:

ento, o comando: alert(document.cookie); ir exibir o string:

Observe que essa pgina cria um cookie "autor=elfs" com um prazo de

Inicialmente, se clicarmos no boto Recupera cookies

Feche o browser. Abra novamente o browser, apontando-o outra vez para o

A propriedade cookie armazena em um nico string todos os cookies

Extenses JavaScript Linguagem XHTML

You might also like