5. Programação JavaScript - PDF
Download "5. Programação JavaScript"
Iago Ricardo Sanches Casqueira
1 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 desse objeto que o script tem acesso aos elementos da página. Assim como visto para 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 pode também 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 formulário pode ser referenciado por document.forms[0] ou por document.clima. Porém, a segunda imagem pode apenas ser referenciada por document.images[1], uma vez que não foi designado um nome para esta imagem. ELFS,
2 <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! Através do objeto document, é possível também ter acesso às propriedades de 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. ELFS,
3 ! Exercício: Verificar a possibilidade de alteração nas propriedades do objeto document considerando o seguinte código: <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! 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. ELFS,
4 " document.open(): função que abre o documento para escrita (stream). O processo é análogo 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 funções write e close. " document.close(): função que fecha o stream aberto pela função open. " document.write(string): escreve o valor do parâmetro (um string) dentro de um novo documento, cujo stream foi previamente aberto. Exemplo: <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! Neste exemplo, o documento carregado no frame inf será substituído por outro documento aberto pelo método open(). ELFS,
5 <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 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). aula05_03b.htm <html> <head> <title>teste</title> Note que a substituição do conteúdo deste frame (pelo texto </head> passado pela função write) é feita apenas dentro do navegador, <body> ou seja, o arquivo aula05_03b.htm não será modificado. Este é apenas um frame<br> contendo, originalmente, essas duas linhas. </body> </html> ELFS,
6 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 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, formulários, links, etc. A sintaxe básica para o tratamento de um evento é: <tag evento="ação">, onde açã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 objeto responde. Os principais eventos que podem ser incluídos em um programa JavaScript 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,
7 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>! 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,
8 " 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 botões, caixas de seleção, botões de rádio, caixas e áreas de texto, etc. É muito útil para criar pseudo-links, que substituem ou melhoram o tag <a href...>. Por exemplo, o código 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! Exercício: Considere a seguinte função: aula05_06.htm function carrega_imagens() imagem1 = new Image(); imagem2 = new Image(); imagem1.src = "imagem1.gif"; imagem2.src = "imagem2.gif"; ELFS,
9 Criar um script contendo, além da funcão carrega_imagens(), duas outras funções: troca_imagem() e muda_pagina(). O script deve alternar entre uma imagem e outra à medida que o mouse está sobre ela ou não está sobre ela. Um clique sobre a imagem deve carregar uma nova página. Usar a função prompt("url","") para obter a URL da nova página a ser carregada.! Eventos relacionados a um formulário Formulários são importantes no desenvolvimento de aplicações para a Internet. Os eventos a seguir que permitem tratar ações específicas sobre os elementos 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 vetor depende da ordem com que estes elementos aparecem no documento HTML. ELFS,
10 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 formulário</title> <SCRIPT language="javascript"> function Confirma() return confirm("deseja mesmo apagar os dados?"); </SCRIPT> </HEAD> <BODY> aula05_08.htm ELFS,
11 <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 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. ELFS,
12 " s.indexof(c,n): retorna a posição da primeira ocorrência do caractere c 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ência alguma. " 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 m não seja especificado); retorna -1 caso não seja encontrada ocorrência alguma. " s.substring(n,m): retorna o substring começando no caractere n e terminando no caractere m de s. " s.tolowercase(): retorna o string s com todos os caracteres alfabéticos convertidos para letras minúsculas. " s.touppercase(): retorna o string s com todos os caracteres alfabéticos convertidos para letras maiúsculas.! Objeto Date Permite ao script acessar a data local da máquina do usuário, além de dispor de métodos para manipular datas e horas com facilidade. Internamente, a data é armazenada como o número de milésimos de segundos decorridos desde 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,
13 " 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úmero de dias transcorridos desde uma determinada data, conforme formulário 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 método gettime, obtendo-se o número de milésimos de segundos transcorridos entre as duas datas. Para transformar esse número em dias devemos dividir por (1000*60*60*24). ELFS,
14 ! A classe Math Para utilizar os métodos desta classe não é preciso a criação de um objeto: os métodos podem ser referenciados diretamente a partir do nome da classe. " Math.E: retorna a constante de Euler e ( ). " Math.PI: retorna a constante pi ( ). " 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,
15 Exercício: Utilizando o método i.tostring(b), que converte o valor de um inteiro i em um número na base b, criar um script para uma página como a mostrada abaixo, de forma que cada clique no botão "Mudar Cor" gere uma cor 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 de dois dígitos (ou seja, três números cujos valores hexadecimais vão de 00 a FF ou, equivalentemente, cujos valores decimais vão de 0 a 255). aula05_10.htm Exercício: Considere o site mostrado na figura a seguir. Escrever o código para este 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. ELFS,
16 aula05_11.htm! Quando o usuário clicar no botão Enviar, o script deve verificar se os campos obrigatórios (nome, sobrenome e ) estão completados. Caso estejam, uma nova página deve aparecer agradecendo a visita, mostrando os dados digitados e pedindo confirmação para o envio. Caso contrário, uma caixa de alerta deve aparecer indicando o campo que não está preenchido corretamente.! Antes que a nova página apareça agradecendo a visita e mostrando os dados digitados, o campo deverá ser verificado por uma função. Essa função deverá 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 o conteúdo deste campo. Um valor para o campo irá parecer estar correto caso as seguintes condições sejam satisfeitas:! deve haver pelo menos um caractere antes do o deve aparecer uma e uma única vez; ELFS,
17 ! deve haver um ou mais caracteres após o 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 em JavaScript. 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 de dificuldade 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,
18 Caso a resposta seja correta, uma nova pergunta deverá ser formulada. Caso a resposta não seja correta, deverá ser exibida a resposta correta e o jogo deverá terminar. Ao final da bateria de perguntas, deverá aparecer a pontuação final do jogador e a opção de recomeçar uma nova bateria de perguntas 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 seja sempre a mesma, variar a ordem das perguntas dependendo de números gerados aleatoriamente. A listagem a seguir mostra uma possível implementação do jogo. <HTML> <HEAD> <TITLE>Teste de Conhecimentos</TITLE> <SCRIPT language="javascript"> aula05_12.htm var quest = new Array(10); // questões do jogo var 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; ELFS,
19 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. 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 # FFCCFF# 2 "; quest[9] = "Escopo de variável definida fora de função:"+ " local regional global 3 "; ELFS,
20 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,
21 with (janela.document) open(); Note o uso do comando with, que simplifica a notação. Observe também a necessidade de chamar a função pontuação como opener.pontuação, pois essa função pertence à janela que abriu esta nova janela 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(); ELFS,
22 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 nível de dificuldade vai influir somente no número de questões a serem formuladas ao jogador. if (pnum > ptotal) form1.btn2.disabled = true; Note que, após formuladas todas as questões, o segundo botão do formulário será desabilitado. 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."; ELFS,
23 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> Note que o botão Jogar será alterado para Resultado, depois que a última questão tiver sido formulada ao jogador (esse botão será desabilitado logo a seguir, conforme comentário anterior). 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> ELFS,
24 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 página tenha sido removida da janela, o browser não retém informação alguma sobre essa página, exceto no objeto history. Da mesma forma, o servidor web não tem lembrança das requisições dos clientes. Cookies constituem uma forma de acrescentar um pouco de memória ao browser armazenando uma pequena quantidade de dados associados à paginas e sites. Sempre que um browser habilitado a aceitar cookies requer uma página ele procura ver se existe algum cookie associado com a URL daquela página. Caso exista, esse cookie é enviado ao servidor web como parte do cabeçalho HTTP da requisição.! Um cookie pode ser estabelecido e recuperado em um script por meio da propriedade document.cookie. ELFS,
25 ! Um cookie é usualmente constituído por pares atributo-valor separados por pontos-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 de dezembro de 2003, e que somente será transmitido ao servidor se um meio de transmissão 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, 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 os cookies que não apresentam o atributo expires são destruídos. O exemplo a seguir mostra como estabelecer um cookie válido até um ano após ter sido construído: var umano = new Date(); umano.setfullyear(umano.getfullyear()+1); document.cookie = "nome=ceie;expires="+umano.togmtstring();! Para destruir um cookie cuja expiração tenha sido estabelecida como uma data futura basta alterar seu atributo expires para alguma data que já se passou. ELFS,
26 ! 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: criou um cookie, este cookie pode ser lido por qualquer arquivo desta pasta ou de suas sub-pastas, como por exemplo: ou mas não pode ser lido por um arquivo como: 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=/"; então, esse cookie poderá ser lido por qualquer documento que resida em uma pasta ou sub-pasta do diretório 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,
27 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ão enviados como parte do cabeçalho HTTP mas, por razões de segurança, não podem 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,
28 ! Observe que essa página cria um cookie "autor=elfs" com um prazo de expiraçã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 a seguir) que permitirão a criação de outros cookies, e um botão Recupera cookies, que exibe em uma caixa de alerta os cookies disponíveis.! Inicialmente, se clicarmos no botão Recupera cookies será exibida a caixa de alerta mostrada ao lado, ou seja, a única informação disponível do cookie é: autor=elfs. ELFS,
29 aula05_13a.htm <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_13b.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> 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,
30 ! Clique nos links cookie1 e cookie2 e crie novos cookies. Clique novamente no botão 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 botão para recuperar os cookies disponíveis. Note que somente o cookie 'autor=elfs' será recuperado, pois os demais (por não terem data de expiração) expiraram quando o browser 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 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 não diretamente por seu objeto-pai, como no caso das demais propriedades de objetos. ELFS,
31 ! A propriedade cookie armazena em um único string todos os cookies visíveis, mas não é um vetor de valores. Isso é diferente de outras propriedades tal como o vetor de formulários, cujos elementos correspondem 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 um conjunto 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, uma URL, um número de cartão de crédito, dentre outras possibilidades. O atributo validation estabelece regras de validação para o conteúdo da caixa de texto, dependendo do valor do parâmetro ctype. ELFS,