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.
7/24/2019 JavaScript - Aula05
http://slidepdf.com/reader/full/javascript-aula05 2/31
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
7/24/2019 JavaScript - Aula05
http://slidepdf.com/reader/full/javascript-aula05 3/31
ELFS, 2003 135
Programação JavaScript
! 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
7/24/2019 JavaScript - Aula05
http://slidepdf.com/reader/full/javascript-aula05 4/31
ELFS, 2003 136
Programação JavaScript
" 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
7/24/2019 JavaScript - Aula05
http://slidepdf.com/reader/full/javascript-aula05 5/31
ELFS, 2003 137
Programação JavaScript
<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.
7/24/2019 JavaScript - Aula05
http://slidepdf.com/reader/full/javascript-aula05 6/31
ELFS, 2003 138
Programação JavaScript
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
7/24/2019 JavaScript - Aula05
http://slidepdf.com/reader/full/javascript-aula05 7/31
ELFS, 2003 139
Programação JavaScript
! 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>
7/24/2019 JavaScript - Aula05
http://slidepdf.com/reader/full/javascript-aula05 8/31
ELFS, 2003 140
Programação JavaScript
" 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
7/24/2019 JavaScript - Aula05
http://slidepdf.com/reader/full/javascript-aula05 9/31
ELFS, 2003 141
Programação JavaScript
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.
7/24/2019 JavaScript - Aula05
http://slidepdf.com/reader/full/javascript-aula05 10/31
ELFS, 2003 142
Programação JavaScript
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>
<SCRIPT language="JavaScript">
function Confirma()
{
return confirm("Deseja mesmo apagar os dados?");
}
</SCRIPT>
</HEAD>
<BODY>
aula05_08.htm
7/24/2019 JavaScript - Aula05
http://slidepdf.com/reader/full/javascript-aula05 11/31
ELFS, 2003 143
Programação JavaScript
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>
7/24/2019 JavaScript - Aula05
http://slidepdf.com/reader/full/javascript-aula05 12/31
ELFS, 2003 144
Programação JavaScript
" 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:
7/24/2019 JavaScript - Aula05
http://slidepdf.com/reader/full/javascript-aula05 13/31
ELFS, 2003 145
Programação JavaScript
" 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
7/24/2019 JavaScript - Aula05
http://slidepdf.com/reader/full/javascript-aula05 14/31
ELFS, 2003 146
Programação JavaScript
! 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.
7/24/2019 JavaScript - Aula05
http://slidepdf.com/reader/full/javascript-aula05 15/31
ELFS, 2003 147
Programação JavaScript
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
7/24/2019 JavaScript - Aula05
http://slidepdf.com/reader/full/javascript-aula05 16/31
ELFS, 2003 148
Programação JavaScript
! 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;
7/24/2019 JavaScript - Aula05
http://slidepdf.com/reader/full/javascript-aula05 17/31
ELFS, 2003 149
Programação JavaScript
! 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.
7/24/2019 JavaScript - Aula05
http://slidepdf.com/reader/full/javascript-aula05 18/31
ELFS, 2003 150
Programação JavaScript
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>
<SCRIPT language="JavaScript">
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
7/24/2019 JavaScript - Aula05
http://slidepdf.com/reader/full/javascript-aula05 19/31
ELFS, 2003 151
Programação JavaScript
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.
7/24/2019 JavaScript - Aula05
http://slidepdf.com/reader/full/javascript-aula05 20/31
ELFS, 2003 152
Programação JavaScript
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");
7/24/2019 JavaScript - Aula05
http://slidepdf.com/reader/full/javascript-aula05 21/31
ELFS, 2003 153
Programação JavaScript
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
7/24/2019 JavaScript - Aula05
http://slidepdf.com/reader/full/javascript-aula05 22/31
ELFS, 2003 154
Programação JavaScript
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.
7/24/2019 JavaScript - Aula05
http://slidepdf.com/reader/full/javascript-aula05 23/31
ELFS, 2003 155
Programação JavaScript
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).
7/24/2019 JavaScript - Aula05
http://slidepdf.com/reader/full/javascript-aula05 24/31
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.
Programação JavaScript
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>
7/24/2019 JavaScript - Aula05
http://slidepdf.com/reader/full/javascript-aula05 25/31
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.
Programação JavaScript
var umano = new Date();umano.setFullYear(umano.getFullYear()+1);
document.cookie = "nome=CEIE;expires="+umano.toGMTString();
7/24/2019 JavaScript - Aula05
http://slidepdf.com/reader/full/javascript-aula05 26/31
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:
Programação JavaScript
7/24/2019 JavaScript - Aula05
http://slidepdf.com/reader/full/javascript-aula05 27/31
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:
Programação JavaScript
<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
7/24/2019 JavaScript - Aula05
http://slidepdf.com/reader/full/javascript-aula05 28/31
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.
Programação JavaScript
! 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.
7/24/2019 JavaScript - Aula05
http://slidepdf.com/reader/full/javascript-aula05 29/31
ELFS, 2003 161
Programação JavaScript
<html><title>Exemplo de Cookie</title>
</head>
<body>
<h2>Exemplo de cookie</h2>
<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>
<h2>Exemplo de cookie</h2>
<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]).
7/24/2019 JavaScript - Aula05
http://slidepdf.com/reader/full/javascript-aula05 30/31
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.
Programação JavaScript
7/24/2019 JavaScript - Aula05
http://slidepdf.com/reader/full/javascript-aula05 31/31
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.
Programação JavaScript