javascript - aula05

7/24/2019 JavaScript - Aula05

http://slidepdf.com/reader/full/javascript-aula05 1/31

ELFS, 2003 133

! Exemplo: No documento a seguir, a primeira imagem pode serreferenciada como document.images[0] ou como document.sol.Da mesma forma, o formulário pode ser referenciado pordocument.forms[0] ou por document.clima. Porém, a segundaimagem pode apenas ser referenciada por document.images[1],

uma vez que não foi designado um nome para esta imagem.

5. Programação JavaScript

O objeto document! O objeto document representa o documento HMTL carregado no navegador.

É o objeto mais importante da programação JavaScript, pois é a partir desseobjeto que o script tem acesso aos elementos da página. Assim como vistopara o objeto window, os elementos de uma página podem ser referenciados

por um vetor específico. Dentre esses elementos, os mais importantes são:" document.applets: vetor de todos os applets de um documento;" document.forms: vetor de todos os formulários 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 posição de um elemento em seu

respectivo vetor depende de sua posição no documento. Cada elemento podetambém ser acessado por seu nome, designado pelo atributo NAME.



ELFS, 2003 134

Programação JavaScript

! Através do objeto document, é possível também ter acesso às propriedadesde uma página, 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 título do documento atual;" document.URL: retorna o endereço completo do documento atual.

<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



ELFS, 2003 135


! Exercício: Verificar a possibilidade de alteração nas propriedades do objetodocument considerando o seguinte código:

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

ser utilizado quando se deseja que uma âncora não tenha efeito algum.

<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>

aula05_02.htm



ELFS, 2003 136


" document.open(): função que abre o documento para escrita (stream ).O processo é análogo ao processo de carregamento de um documentoHTML na Internet: o navegador se conecta ao servidor, e este abre umstream , escreve os dados contidos no documento requisitado e fecha ostream . Deve ser utilizado com as funções write e close.

" document.close(): função que fecha o stream aberto pela funçãoopen." document.write(string): escreve o valor do parâmetro (um string)

dentro de um novo documento, cujo stream foi previamente aberto.

Exemplo:

! Neste exemplo, o documento carregado no frame inf será substituído por

outro documento aberto pelo método open().

<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>

aula05_03.htm



ELFS, 2003 137


<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();

}

</script>

</head>

<body>

<a href ="javascript:void(0)" onClick = "modifica();">

Clique aqui para modificar o frame de baixo</a></body>

</html>

aula05_03a.htm

<html>

<head>

<title>Teste</title>

</head>

<body>

Este é apenas um frame<br>

contendo, originalmente, essas duas linhas.

</body>

</html>

aula05_03b.htm

Note que parent refere-se à janela do frameset(aula05_03.htm), que contém os frames sup(este documento) e inf (o documento de baixo).

Note que a substituição do conteúdo deste frame (pelo textopassado pela função write) é feita apenas dentro do navegador,ou seja, o arquivo aula05_03b.htm não será modificado.



ELFS, 2003 138


Tratamento de Eventos em JavaScript! A linguagem JavaScript dispõe de recursos para o tratamento de eventos

específicos para o ambiente da Internet. Em alguns exercícios anterioresforam utilizados tratamentos de eventos, como o onClick, por exemplo. Otratamento de eventos deve ser inserido em tags, uma vez que os eventos

ocorrem sobre objetos, tais como imagens, formulários, links, etc. A sintaxebásica para o tratamento de um evento é: <tag evento="ação">, ondeação deve corresponder a instruções (ou chamadas a funções) JavaScript.Cada objeto possui seu próprio conjunto de eventos para o qual o objetoresponde. Os principais eventos que podem ser incluídos em um programaJavaScript são descritos a seguir.

! Eventos relacionados ao navegador e ao documento" onLoad : Deve ser inserido dentro das tags <body> e <frameset> e é

acionado quando a página é carregada." onUnload : Idêntico ao anterior, porém executado quando o documento

sai do navegador (no caso da página ser mudada ou a janela fechada).<HTML>

<HEAD>

<TITLE>Teste</TITLE>

<SCRIPT language="JavaScript">

aula05_04.htm



ELFS, 2003 139


! Eventos relacionados ao mouseTodos 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.

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 não é?

</BODY>

</HMTL>



ELFS, 2003 140


" onMouseOut: evento acionado quando o apontador do mouse sai decima de um link ou de uma imagem." onClick : evento acionado quando ocorre um clique do mouse, podendo

ser tratado por botões, caixas de seleção, botões de rádio, caixas e áreasde texto, etc. É muito útil para criar pseudo-links, que substituem ou

melhoram o tag <a href ...>. Por exemplo, o código a seguir gera umfalso link que aciona uma caixa de alerta.

!

Exercício: Considere a seguinte função:

<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

function carrega_imagens()

{

imagem1 = new Image();

imagem2 = new Image();

imagem1.src = "imagem1.gif";

imagem2.src = "imagem2.gif";}

aula05_06.htm



ELFS, 2003 141


Criar um script contendo, além da funcão carrega_imagens(), duas outrasfunções: troca_imagem() e muda_pagina(). O script deve alternar entreuma imagem e outra à medida que o mouse está sobre ela ou não está sobreela. Um clique sobre a imagem deve carregar uma nova página. Usar a funçãoprompt("URL","") para obter a URL da nova página a ser carregada.

! Eventos relacionados a um formulárioFormulários são importantes no desenvolvimento de aplicações para aInternet. Os eventos a seguir que permitem tratar ações específicas sobre oselementos de um formulário:" 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 botão Reset de um formulário

é clicado. Deve ser inserido dentro do tag <form>." onSubmit: Idêntico ao anterior, porém acionado quando o botão

Submit é clicado.Os elementos de um formulário são alocados dentro do vetor f.elements,onde f é o nome do formulário. A posição dos elementos dentro do vetordepende da ordem com que estes elementos aparecem no documento HTML.



ELFS, 2003 142


Exemplos:<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>

aula05_07.htm

<HTML>

<HEAD><TITLE>Teste de formulário</TITLE>


function Confirma()

{

return confirm("Deseja mesmo apagar os dados?");

}

</SCRIPT>

</HEAD>

<BODY>

aula05_08.htm



ELFS, 2003 143


Outros objetos na programação JavaScript! A linguagem JavaScript pode fazer uso de vários outros objetos. Comenta-se a

seguir sobre os métodos mais importantes associados aos objetos das classes

String, Date e Math.! Considere a seguinte declaração de objeto: var s = new String("um_string ").

Os seguintes métodos estão disponíveis para este objeto:" s.length: retorna o tamanho do string s." s.charAt(n): retorna o n-ésimo caractere do string s.

<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>



ELFS, 2003 144


" s.indexOf(c,n): retorna a posição da primeira ocorrência do caracterec no string s a partir da posição n (ou a partir do início do string, caso n

não seja especificado); retorna -1 caso não seja encontrada ocorrênciaalguma.

" s.lastIndexOf(c,m): retorna a última ocorrência do caractere c no

string s da posição m para trás (ou do final do string para trás, caso mnão seja especificado); retorna -1 caso não seja encontrada ocorrênciaalguma.

" s.substring(n,m): retorna o substring começando no caractere n eterminando no caractere m de s.

"

s.toLowercase(): retorna o string s com todos os caracteresalfabéticos convertidos para letras minúsculas." s.toUppercase(): retorna o string s com todos os caracteres

alfabéticos convertidos para letras maiúsculas.

! Objeto DatePermite ao script acessar a data local da máquina do usuário, além de disporde métodos para manipular datas e horas com facilidade. Internamente, adata é armazenada como o número de milésimos de segundos decorridosdesde 01/01/1970. Considere a seguinte declaração de objeto:d = new Date("mm/dd/aaaa"). Os seguintes métodos estarão disponíveis para

este objeto:



ELFS, 2003 145


" d.getDate(): retorna o dia do mês, de 1 a 31." d.getDay(): retorna o dia da semana, de 0 a 6 (0 = domingo; ...; 6 =

sábado)." d.getHours(): retorna a hora atual, de 0 a 23." d.getMinute(): retorna o número atual de minutos, de 0 a 59." d.getMonth(): retorna o número do mês atual, de 0 a 11 (0 = janeiro;

...; 11 = dezembro)." d.getFullYear(): retorna o ano atual." d.getSeconds(): retorna o número atual de segundos, de 0 a 59." d.getTime(): retorna o número de milésimos de segundo transcorridos

desde 01/01/1970 às 00h00.

Exercício: Criar um contador do númerode dias transcorridos desde umadeterminada data, conforme formuláriomostrado ao lado.

Para isso, basta criar dois objetos Date, um com a data especificada e umcom a data atual e utilizar o método getTime, obtendo-se o número demilésimos de segundos transcorridos entre as duas datas. Para transformar

esse número em dias devemos dividir por 86400000 (1000*60*60*24).

aula05_09.htm



ELFS, 2003 146


! A classe MathPara utilizar os métodos desta classe não é preciso a criação de um objeto: osmétodos 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 número pseudo-aleatório 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 147


Exercício: Utilizando o método i.toString(b), que converte o valor de uminteiro i em um número na base b, criar um script para uma página como amostrada abaixo, de forma que cada clique no botão "Mudar Cor" gere umacor de fundo aleatória para a página. Lembre-se que uma cor em HTML édefinida por um string formado por # e por três números hexadecimais dedois dígitos (ou seja, três números cujos valores hexadecimais vão de 00 a FFou, equivalentemente, cujos valores decimais vão de 0 a 255).

Exercício: Considere o site mostrado na figura a seguir. Escrever o código paraeste site considerando os seguintes tópicos:" Quando o usuário clicar no botão Limpar, deverá ser exibida uma janela

de diálogo para confirmar a operação.

aula05_10.htm



ELFS, 2003 148


! Quando o usuário clicar no botão Enviar, oscript deve verificar se os camposobrigatórios (nome, sobrenome e email)

estão completados. Caso estejam, umanova página deve aparecer agradecendo avisita, mostrando os dados digitados epedindo confirmação para o envio. Casocontrário, uma caixa de alerta deveaparecer indicando o campo que não estápreenchido corretamente.

aula05_11.htm

! Antes que a nova página apareça agradecendo a visita e mostrando os dadosdigitados, o campo Email deverá ser verificado por uma função. Essa funçãodeverá verificar se o endereço parece estar correto ou não. Caso não esteja,uma caixa de alerta deverá aparecer e o usuário deverá confirmar ou não oconteúdo deste campo. Um valor para o campo Email irá parecer estar corretocaso as seguintes condições sejam satisfeitas:! deve haver pelo menos um caractere antes do símbolo @;! o símbolo @ deve aparecer uma e uma única vez;



ELFS, 2003 149


! deve haver um ou mais caracteres após o simbolo @;! esses caracteres devem ser seguidos por um ponto (".");! após o ponto deve haver dois ou mais caracteres.

A aplicação a seguir implementa um jogo tipo Teste Seus Conhecimentos emJavaScript. O jogo consiste de uma série de perguntas de múltipla escolha.Inicialmente o jogador deverá digitar seu nome e escolher o nível dedificuldade das perguntas, conforme ilustra a interface abaixo. A cada jogada,o script deverá abrir uma janela, sem barra de status, diretórios, navegação,onde serão exibidas a pergunta e as opções de resposta. Para escolher uma

resposta, o jogador deverá clicar sobre ela.



ELFS, 2003 150


Caso a resposta seja correta, uma nova pergunta deverá ser formulada. Casoa resposta não seja correta, deverá ser exibida a resposta correta e o jogodeverá terminar. Ao final da bateria de perguntas, deverá aparecer apontuação final do jogador e a opção de recomeçar uma nova bateria deperguntas ou sair do jogo. As perguntas e respostas deverão ser armazenadas

em uma estrutura do tipo array . Para que a sequência de perguntas não sejasempre a mesma, variar a ordem das perguntas dependendo de númerosgerados aleatoriamente.

A listagem a seguir mostra uma possível implementação do jogo.

<HTML>

<HEAD>

<TITLE>Teste de Conhecimentos</TITLE>


var quest = new Array(10); // questões do jogovar parte = new Array(5); // armazena as partes de uma questão

var perg = new Array(10); // controla perguntas já feitas

var ok,jogador,nivel;

var pnum,ptotal;

aula05_12.htm



ELFS, 2003 151


function perguntas()

{

quest[0] = "Elemento de formulário:|input|text|output|1|";

quest[1] = "JavaScript:"+

"|Orientada a objetos|Baseada em objetos|Não 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 edição:"+

"|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 válida:|AABBCC|#001122|FFCCFF#|2|";

quest[9] = "Escopo de variável definida fora de função:"+

"|local|regional|global|3|";

}

Note que o vetor quest armazena a pergunta, as tr ês opções de resposta e o

número da opção correta, separados pelo sí mbolo "|". É muito f ácil, portanto,

acrescentar novas questões ao jogo. A funçao separa_pergunta mostrada a seguir

se encarrega de separar as partes que compõem uma questão, armazenando-as no

vetor parte.



ELFS, 2003 152


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 153


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+" [nível "+nivel+"]");

write("<BR><BR>");

write("<FONT COLOR='black'>");

write("Questão "+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();

}

}

Note o uso do comando with, que simplifica a notação.Observe também a necessidade de chamar a função pontuaçãocomo opener.pontuação, pois essa função pertence à janelaque abriu esta nova janela



ELFS, 2003 154


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++;

if (pnum > ptotal)

{

form1.btn2.disabled = true;

perc = Math.round(10*(form1.escore.value/ptotal));

if (perc > 80)

form1.resultado.value = "Parabéns, você acertou "+perc+

"% das questões.";

else

form1.resultado.value = "Você acertou "+perc+"% das questões.";

}

Note que o nível de dificuldade vai influirsomente no número de questões a seremformuladas ao jogador.

Note que, após formuladas todas as

questões, o segundo botão do formulário

ser á desabilitado.



ELFS, 2003 155


else{

do {

n = Math.round(10*Math.random());

} while (perg[n]==1); // para não repetir pergunta

perg[n] = 1;

mostrar_pergunta(n);

if (pnum == ptotal)form1.btn2.value = "Resultado";

}

}

</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>

Nível de dificuldade: <SELECT SIZE="1" NAME="nivel">

<OPTION VALUE="1"> Mínimo </OPTION>

<OPTION VALUE="2"> Baixo </OPTION>

<OPTION VALUE="3"> Médio </OPTION>

<OPTION VALUE="4"> Alto </OPTION>

<OPTION VALUE="5"> Máximo </OPTION>

</SELECT><BR><BR>

Note que o botão Jogar ser á alterado paraResultado, depois que a última questão

tiver sido formulada ao jogador (esse botão

ser á desabilitado logo a seguir, conforme

comentário anterior).



ELFS, 2003 156

Cookies em JavaScript! O protocolo HTTP foi desenvolvido originalmente como sendo stateless , ou

seja, uma vez que uma página tenha sido removida da janela, o browser nãoretém informação alguma sobre essa página, exceto no objeto history. Damesma forma, o servidor web não tem lembrança das requisições dosclientes. Cookies constituem uma forma de acrescentar um pouco de memóriaao browser armazenando uma pequena quantidade de dados associados àpaginas e sites . Sempre que um browser habilitado a aceitar cookies requeruma página ele procura ver se existe algum cookie associado com a URLdaquela página. Caso exista, esse cookie é enviado ao servidor web comoparte do cabeçalho HTTP da requisição.

! Um cookie pode ser estabelecido e recuperado em um script por meio dapropriedade document.cookie.


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>



ELFS, 2003 157

! Um cookie é usualmente constituído por pares atributo-valor separados porpontos-e-vígulas. 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 domínio feg.unesp.br, que expira em 31 dedezembro de 2003, e que somente será transmitido ao servidor se um meiode transmissão seguro (como https:) estiver sendo usado. Observe que ovalor do cookie é dado como um string de pares atributo-valor. Cada par paratributo-valo pode ter até 4KB de dados, não pode conter espaços nem

pontos-e-vírgulas e deve conter somente um sinal de igual (=).! O atributo expires: Normalmente, quando o usuário fecha o browser, todos oscookies que não apresentam o atributo expires são destruídos. O exemplo aseguir mostra como estabelecer um cookie válido até um ano após ter sidoconstruído:

! Para destruir um cookie cuja expiração tenha sido estabelecida como umadata futura basta alterar seu atributo expires para alguma data que já se

passou.


var umano = new Date();umano.setFullYear(umano.getFullYear()+1);

document.cookie = "nome=CEIE;expires="+umano.toGMTString();



ELFS, 2003 158

! O atributo path: Normalmente, um cookie pode ser acessado pelo documentoque o criou, ou por qualquer outro documento residindo na mesma pasta ouem 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

ouhttp://feg.unesp.br/cursos/PPI/DAI/maisum.htm

mas não pode ser lido por um arquivo como:http://feg.unesp.br/index.htm

Para que o cookie possa ser lido por outros documentos é preciso estabelecerseu atributo path. Exemplo: se o cookie for criado como:document.cookie = "nome=PPI;domain=feg.unesp.br;path=/";

então, esse cookie poderá ser lido por qualquer documento que resida emuma pasta ou sub-pasta do diretório http://feg.unesp.br.Recuperação de cookies! Os valores dos atributos expires, path, domain e secure não estão

disponíveis para serem lidas por um cliente. Por exemplo, se criarmos o

cookie:




ELFS, 2003 159

document.cookie="nome=PPI;domain=feg.unesp.br;expires=2003,12,31"

então, o comando: alert(document.cookie); irá exibir o string:"nome=PPI". Os demais valores estão disponíveis para o servidor e sãoenviados como parte do cabeçalho HTTP mas, por razões de segurança, nãopodem ser acessados pela página do cliente.

! Exemplo:


<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>

aula05_13.htm



ELFS, 2003 160

! Observe que essa página cria um cookie "autor=elfs" com um prazo deexpiração de um ano. A página apresenta ainda dois links cookie1 e cookie2(para as páginas aula05_13a.htm e aula05_13b.htm, mostradas aseguir) que permitirão a criação de outros cookies, e um botão Recuperacookies, que exibe em uma caixa de alerta os cookies disponíveis.


! Inicialmente, se clicarmos no botão Recupera cookiesserá exibida a caixa de alerta mostrada ao lado, ouseja, a única informação disponível do cookie é:autor=elfs.



ELFS, 2003 161


<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_13a.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>

</html>

aula05_13b.htm

Note as refer ências absolutas aos campos curso e discip. Observe que como não

foi dado um nome ao formulário, temos que usar a matriz de formulários do documento

(no caso, essa matriz contém apenas um elemento, na posição forms[0]).



ELFS, 2003 162

! Clique nos links cookie1 e cookie2 e crie novos cookies. Clique novamente nobotão e recupere os cookies existentes. Será exibida uma janela de alertacomo:

! Feche o browser. Abra novamente o browser, apontando-o outra vez para oarquivo aula05_13.htm. Clique no botão para recuperar os cookiesdisponíveis. Note que somente o cookie 'autor=elfs' será recuperado,pois os demais (por não terem data de expiração) expiraram quando obrowser foi fechado.

! É importante observar que a propriedade window.document.cookie édiferente de outras propriedades de objetos JavaScript pelas seguintes razões:! A propriedade cookie não está diretamente relacionada a seu objeto-pai

(o objeto document). A propriedade cookie é apenas um ponteiro paraos cookies do browser. Quando se estabelece um valor para apropriedade, o dado é tratado pelo sistema de gerenciamento de cookiesdo browser e não diretamente por seu objeto-pai, como no caso das

demais propriedades de objetos.




ELFS, 2003 163

! A propriedade cookie armazena em um único string todos os cookiesvisíveis, mas não é um vetor de valores. Isso é diferente de outraspropriedades tal como o vetor de formulários, cujos elementoscorrespondem exatamente aos tags <form> do documento.

Extensões JavaScript à Linguagem XHTML! Muitos grupos de desenvolvedores de aplicações para a Internet têm

proposto extensões à linguagem XHTML baseadas em programas JavaScript.Uma dessas extensões é a Forms Markup Language (FML) que introduz umconjunto de novos tags e atributos especialmente projetados para a criação

de formulários. Essas novas construções são "traduzidas" para scripts JavaScript e "injetadas" nas páginas que as utilizam.! Uma das extensões propostas na linguagem FML são alguns novos atributos

para caixas de texto, como: ctype e validation. O atributo ctype(content type ) estabelece o tipo de informação que a caixa de texto deveráconter, por exemplo: um endereço eletrônico, um número, uma data, umaURL, um número de cartão de crédito, dentre outras possibilidades. Oatributo validation estabelece regras de validação para o conteúdo dacaixa de texto, dependendo do valor do parâmetro ctype.


javascript - aula05

Documents