LEANDRO AMANO (83 pts)

JONAS GALVEZ (521 pts)

DANIELA PIRES (86 pts)

MARCOS JOSÉ PINTO (44 pts)

GUILHERME SCHEIBE (49 pts)

JOTA LAGO (40 pts)

NETO LEAL (116 pts)

MANGOOST (80 pts)

ILVA RUDEV (90 pts)

AMAURY BENTES (123 pts)

DEN IVANOV (260 pts)

PEDRO CLAUDIO (50 pts)
Treinamento PontoFlash de Flash e ActionScript

Preciso do comando javascript, que com o botão direito do mouse surge um window.alert.

Queria aprender a usar loops (While ou o For) em actioscript.

Como validar campos de um formulário com javascript?

Alguém poderia me dizer o que é streaming?

Como movimentar um movieclip no palco ao comando de botões acionados por eventos na TimeLine?

Como fazer um load individual para cada frame de meu filme?

Quero um cursor customizado apenas numa área específica.

Queria declarar valores para uma variável importada de um arquivo TXT.

Gostaria de saber pra que servem os levels quando a gente faz um load variables?

Como eu faço para checar quantas pessoas estão online no meu site?

Função de um movie clip.

Como carrego e descarrego (load movie) um filme no mesmo botão?

Como controlar uma cena com um botão dentro do Movieclip?

Porque no meu campo de hora aparece 1,2, 3 etc e não 01, 02, 03?
Sistema de busca utilizando Flash + ASP.

Usando XML com Fireworks MX.

Envio de um arquivo SWF por e-mail

Barra de rolagem simples no Flash5.

Alterando Artistic Media no Corel Draw

Objeto Math.

A história do Flash.

Cadastro de usuários, com Flash+ASP

Calendário dinâmico

Menu circular em 3D personalizável

Níveis dentro do Flash - Load Movie e Load Variables (terceira parte)

Criando texto neon.
Senha multipla

Page Flip

Televisão

Dots2a

Gettimer

Slide desk

Analogicclock

Fakeload

Slicemenu 2

Menu animado

Vela

Arrays
HOME | TUTORIAIS
Desvendando cookies
por Paulo Filipe Moura M

Desvendando cookies

É sempre bom lembrar um pouco das informações sobre um visitante depois que ele ou ela deixou o site: um nome de registro de entrada, a última ocasião em que o visitante esteve presente ou, se você tem um site de compras, as compras que o visitante fez. Para se lembrar dessas informações, você terá que armazená-las em algum lugar.

Os cookies não são difíceis de usar, mas o código para salvá-los e recuperá-los são um pouco desafiadores. Você pode usar código de outras pessoas (indicarei algumas boas bibliotecas de cookies), mas ainda assim é uma boa idéia saber como os cookies funcionam para que possa alterar o código de bibliotecas para adequá-lo às suas necessidades. Nesse artigo você aprenderá:

- O que são cookies.
- O que você pode e não pode fazer com eles.
- Como configurar um cookies.
- Como ler um cookies que você configurou.
- Como se lembrar de nomes e datas com cookies.
- Como montar um carrinho de comprar básico com cookies.
- Onde conseguir um bom código de cookie pré-escrito.

Um exemplo de cookies do mundo real

Cookies são usados em todos os tipos de aplicativos. Um uso comum é para determinar se um visitante viu a página antes. Por exemplo, na primeira vez em que visitar http://book_of_javascript.tripod.survey.html, você receberá uma pesquisa para preencher. Depois que enviar a pesquisa uma vez, nunca mais a verá novamente, pois a página armazena um cookie em seu computador para registrar aquela primeira visita. Cada vez que você visitar a página, a página verifica se você tem o cookie; se tiver, ela não lhe
dará a pesquisa.

Um exemplo de cookie mais complexo é o site de compras de investidores em vinhos clássicos da Austrália, em http://vineyarddirect.com.au/index.html. Esse carrinho de compras do vendedor de vinhos, chamado JShop, vem de http://www.jshop.co.uk/ e depende quase que inteiramente de JavaScript e cookies.

O que são cookies?

Cookies são pequenas peças de informações que um site deixa no disco rígido dos visitantes. Como as informações se encerram no disco rígido, elas permanecem depois que saem da página atual e até depois que o computador é desligado. Você julgará esse recurso extremamente útil quando quiser lembrar-se de informações sobre um usuário, cada vez que ele ou ela visitar seu site.

Os cookies foram introduzidos em Netscape 2.0 e no Microsoft Internet Explorer 3.0. Infelizmente, MSIE 3.0 oferece uma implementação menos perfeita: enquanto você pode usar cookies para salvar e ler informações em computadores de outras pessoas, não pode salvar cookies em seu próprio computador. Isso significa que você não pode testar o seu cookie em MSIE 3.0.

Você pode ver cookies salvados em seu computador, olhando o arquivo cookies.txt de Netscape ou o diretório Cookies do MSIE. Em qualquer caso, verá uma longa lista de nomes de sites, cada um com uma string de texto. O texto pode parecer incompreensível para você, visto que a maioria dos sites criptografa cookies de alguma maneira, para empacotar mais informações neles. Mas dê uma olhada para ver quem deixou essas pequenas ameaças em seu sistema - você descobrirá que é muito instrutivo.

O que cookies podem e não podem fazer

Porque cookies envolvem escrever e ler a partir dos discos rígidos de seus visitantes, browsers amistosos para com cookie lidam com muitos aspectos de segurança. Como resultado, usar cookie tem muitas limitações. As mais importantes, para os objetivos deste artigo são estas:

1 - Ninguém tem um browser amistoso para com cookies.
2 - Ninguém que tenha um browser amistoso para com cookies escolhe aceitar cookies. (a maioria não o faz).
3 - Cada domínio pode ter apenas 20 cookies (portanto, use-os com parcimônia).
4 - Os cookies não podem exceder os 4 kilobytes. Isso é pouco mais que 4.000 caracteres - na verdade, muito.
5 - Um Website só pode configurar e ler seus próprios cookies (por exemplo, o Yahoo não pode ler os cookies da AOL).

Tenha essas limitações em mente quando estiver pensando em usar cookies em seu site.

Como trabalhar com cookies

Esta seção cobre todas as operações básicas de cookies: configuração, leitura, reajuste e datas de encerramento de configuração.

Como configurar cookies

Configurar um cookies básico é simples; simplesmente crie uma string no formulário cookie_nome=valor e depois ajuste a propriedade document.cookie para aquela string. Felizmente, as funções escape() e unescape() codificarão e decodificarão cookies, assim você não precisa se preocupar com essa restrição.

Exemplo:





¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨EXEMPLO A¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨
Esse é um exemplo simples que armazena o nome de um visitante e um cookie chamado nome. A primeira linha(1) da função do exemplo A pede por um nome do visitante e o salva em o_nome. 2 cria a string para armazenar o cookie. A função escape() substitui caracteres que os cookies não podem lidar por caracteres legais. Por exemplo, se eu entrasse como paulo filipe na apresentação, essa linha criaria a string nome=paulo%20filipe. O sinal de porcentagem e 20(%20) substituem o espaço entre paulo e filipe. A linha 3 configura o cookie. Para garantir que você configurou um cookie, digite o seguinte em sua barra de localização do browser:

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨
javascript:alert(document.cookie)

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

Como ler cookies

É muito fácil ler um cookie que você salvou no disco rígido de alguém.
um exemplo:





¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨EXEMPLO B¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

A primeira linha(1) no exemplo B é a importante. Sempre que o seu browser abre uma página da Web, o browser le quaisquer cookies que o site tenha armazenado em sua máquina e os carrega na propriedade document.cookie. A parte ardilosa sobre a leitura de cookies é obter exatamente as informações que você deseja deles. No exemplo B, tudo depois da primeira linha da função puxa o nome do usuário para fora do cookie. Uma vez que 1 obtém o cookie, 2 rompe o cookie em um array de dois elementos, usando o método split().

O primeiro elemento no array consiste de tudo no cookie antes do sinal de igual(=). Nesse caso, é nome, assim aquele é o primeiro elemento no array. O segundo elemento no array é tudo depois do sinal de igual, que é filipe%20. 3 agarra essa string a partir do array e armazena em the_name, e 4 decodifica the_name com a função unescape(), trocando %20 por um espaço.

Como reajustar cookies

Para reset(reajustar)(mudar o valor de) um cookie, simplesmente ajuste o seu nome para outro valor. Por exemplo, para saber sobre a última vez que um visitante esteve em seu site, ajuste um cookie chamado date cada vez que aquela pessoa visitar o seu site. O exemplo D relaciona uma página da Web completa, que controla última vez que determinado visitante entrou na página da Web.





¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨EXEMPLO C¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

Carregar essa página chama as funções JavaScript lerCookie() (2) e setarCookie() (3). A função lerCookie() verifica se o site ajustou um cookie(1). Se a string entre os parênteses da cláusula if-then for false ou a string nula(""), as linhas no corpo da declaração if-then não se executarão, extraindo a data do cookie e escrevendo-a na página da Web usando document.write().

Depois que lerCookie() faz isso, setarCookie() ajusta um novo cookie. Essa função obtém a data atual e ajusta um cookie chamado data àquela data. Cada vez que setarCookie() é chamada, ela substitui o último cookie por um novo. Isso é exatamente como ajustar uma variável.

Como configurar mais de uma parcela de informações

Acrescentar mais de uma parcela de informações a um cookie não é um problema. Por exemplo, para armazenar o nome, idade e número de telefone de uma pessoa, você deve configurar um cookie assim:

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨
var o_cookie = "nome:paulo/idade:17/fone:32320087";
document.cookie="meu_cookie="+ escape(o_cookie);

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨
Uma barra separa propriedade de nomes(nome do usuário, idade e telefone) e dois-pontos distinguem as propriedades de nomes e valores(nome de usuário: paulo,fone:32320087). A barra e os dois pontos são arbitrarios, você pode usar quaisquer símbolos - desde que seja consistente. É um pouco mais difícil tirar de um cookie múltplas parcelas de informações. Tente usar arrays associativos para armazenas as informações. Por exemplo, se você salvou

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨
meu_cookie=nome:paulo/idade:17/fone:32320087

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨
No disco rígido de algúem, você pode ler as informações em um array associativo, exemplo de página:





¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨EXEMPLO D¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

Quando essa página carrega, (5) configura um cookie, (6) cria um novo array e (7) envia o novo array, vazio à função "lerOCookie()". Primeiro, a função obtém o cookie e divide o nome do cookie (meu_cookie). Depois, (1), "os_valores" será igual a "nome:paulo/idade:17/fone:32320087", pois é o que mostra que ajustamos o cookie na função "setarCookie()".

A seguir, (2) divide "os_valores" entre suas partes componentes, carregando "nome:paulo" em "separados[0]", "idade:17" em "separados[1]" e "fone:32320087" em "separados[2]". Depois que a função interrompe "os_valores", (3) se curva sobre cada um dos três elementos(nome,idade,fone) em "separados". Cada vez que ocorre um loop, a função separa o elemento em duas partes, com os dois pontos.

Depois, ela carrega a primeira parte do elemento em "propriedades" e a segunda parte em "o_valor". Na primeira vez que o loop percorre, "propriedades" é "nome" e "o_valor" é "paulo". Uma vez o elemento separado, assim, o array associativo a_info é carregado em (4). Depois da loop ocorrer três vezes, você obtém esses resultados: a_info["nome"] = "paulo, a_info["idade"] = "17" e a_info["fone"] = "32320087".

Com o array associativo adequadamente carregado, as três linhas começando em (8) recuperam as informações e as exibem em uma página da Web.

Como ajustar a duração de um cookie

Até agora, criamos cookies que desaparecem quando um usuário sai do browser. Às vezes isso é bom. Uma vez que cada domínio só pode ter 20 cookies na máquina de um usuário, você não quer disperdiçar espaço salvando cookies desnecessários entre sessões de browser. No entanto, se quiser que os seus cookies permaneçam no disco rígido de um usuário depois que ele sair do browser, você precisa ajustar uma data de validade em um formato especial, chamado GMT( no MSI6.0 e provavelmente em futuros browsers, GMT(Greenwich Mean Time) tem sido substituído por UTC(Universal Time Code). São apenas nomes diferentes para a mesma coisa, mas não se surpreenda se vir UTC ao invés de GMT.) Por exemplo:

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨
Sun, 12-Jan-1992 00:00 GMT

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨
supostamente, é a data de nascimento em Greenwich Mean Time de HAL 9000, o computador inteligente de 2001: uma odisséia no espaço. (HAL?HAL? Você está ai?). O formato GMT pode ser meio doloroso, especialmente se você precisa descobrir se o dia era uma segunda feira, sexta feira ou o que for. Felizmente, o método de data "toGMTString()" de JavaScript converte uma data em um formato mais simples em uma data em formato GMT. Eis uma maneira fácil de ajustar uma data, distante no futuro:

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨
var a_data = new Date("December 31, 2023");
var o_cookie_data = a_data.toGMTString();

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨
Para ajustar a validade do seu cookie, você precisa acrescentar a data de término ao cookie. Acrescente "expires=data" à string e separa os componentes do cookie com ponto-e-vírgula:

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨
o_cookie=algumcookie;expires=data

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨
O exemplo H mostra como montar um cookie que durará até o final do calendário Maia:




¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨EXEMPLO E¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨
Antes de "o_cookie" no exemplo E ser escapado(usando a função escape()), ele se parecerá com a seguinte linha:

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨
meu_cookie=paulo;expires=Fri, 31-Dec-2023 00:00:00 GMT

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨
Uma vez ajustado, esse cookie vive no disco rígido de seu visitante até a data de expiração. Você também pode usar a data de expiração para apagar cookies, ajustando a data para um tempo no passado. Isso pode ser útil se você estiver usando cookie para registrar pessoas que entram e saem de seu site. Quando um visitante registra a sua entrada, dê a ele um cookie que mostre que eles se registraram. Quando ele quiser sair, apague o cookie.

Quem pode ler o cookie?

Eu já mencionei que apenas o Web site que configura um cookie pode lê-lo - McDonald's não pode ler cookies de Giraffas, e vice-versa. Porém, a estória completa é um pouco mais complicada do que isso.

Como permitir que uma página leia um cookie configurado em outra

Por padrão, apenas a página da Web que configura o cookie pode lê-lo. Se uma dessas páginas configurar um cookie, para permitir que outras páginas em seu site leiam o cookie, você precisa ajustar o "path"(caminho) do cookie. O caminho do cookie ajustar o diretório de nível "root"(raiz) de seu site possibilita que todas as suas páginas da Web leiam o cookie. Para fazer isso, acrescente "path=/;" ao seu cookie. Se você só quiser que o seu cookie sejá legível em um diretório chamado arquivos, acrescente "path=/arquivos;".

Como lidar com múltiplos domínios

Alguns Web sites têm muitos pequenos domínios. Por exemplo, o portal da Web Yahoo tem um site principal(www.yahoo.com) um site de finanças (finances.yahoo.com), um site personalizado (my.yahoo.com) e muitos outros. Por padrão, se uma página da Web em finances.yahoo.com ajusta um cookie, páginas em my.yahoo.com não podem ler aquele cookie. Mas se você acrescentar "domain=nome_do_dominio" a um cookie, todos os domínios terminados com "nome_do_dominio" podem ler o cookie. Para permitir que todas as máquinas no domínio yahoo.com leiam um cookie, Yahoo precisa acrescentar "domain=yahoo.com" ao cookie.

O cookie inteiro

Acrescentar uma data de expiração, domínio e caminho a um cookie, o torna bastante grande. o exemplo I relaciona uma função que ajusta todas essas variáveis para que você possa ver todo o quadro em um exemplo:




¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨EXEMPLO F¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

O exemplo F resulta em um cookie que se parece com isso(antes de escapá-lo):

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨
meu_cookie=paulo;path=/;domain=cade.com;expires=Sun, 31 Dec 2023 00:00:00 GMT;

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨
É claro que, pelo fato de eu estar ajustando o domínio para cade.com, apenas um computador no computador no CADE pode ler esse cookie.

Como ajustar múltiplos cookies

Às vezes só um cookie não é o suficiente. Por exemplo, se o seu Web site tem dois aplicativos JavaScripts diferentes - um que usa cookies para armazenar informações sobre seus visitantes e outro que usa cookies para rastrear as compras deles - provavelmente você vai querer armazenar esses dois tipos de informações em cookies diferentes. Para salvar múltiplos cookies, apenas dê um nome diferente a cada cookie. Ajustar "document.cookie" a um cookie com um novo nome não apaga os cookies que já está lá. Eis um pouco de código que ajusta dois cookies:

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨
var cookie_visitante = "pessoa="+ escape("nome:paulo/ocupação:estudante/fone:32320087");
document.cookie = cookie_visitante;
var cookie_compras = "compras="+ escape("camisas:1/bermudas:3/sapatos:12");
document.cookie = cookie_compras;

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨
Esse código ajusta "document.cookie" duas vezes, mas, devido ao fato de que os cookies têm nomes diferentes, você pode armazenar ambos em "document.cookie". Depois de executar as quatro linhas acima, "document.cookie" se parece com isso(exceto pelos caracteres escapados):

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨
pessoa=nome:paulo/ocupação:estudante/fone:32320087;compras=camisas:1/bermudas:3/sapatos:12

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨
No exemplo acima, armazenar dois cookies em "document.cookie" funciona bem, pois o JavaScript que olha as informações de compra não precisa lidar com as informações no outro cookie. Infelizmente, é um pouco difícil puxar o conteúdo de um cookie para fora de "document.cookie", porque ele contém múltiplos cookies. É aqui onde as bibliotecas JavaScript pré-escritas tornam-se úteis.

Bibliotecas de cookie

Você encontrará muitas bibliotecas de cookies gratuitas na Web. Basta usar qualquer máquina de busca e procurar por "javascript cookie" para conseguir uma lista. Geralmente as funções nas bibliotecas vêm prontas para executar; assim, você só precisa corá-las e colocá-las em suas páginas da Web. Webmokey tem bibliotecas excepcionalmente bem comentadas, portanto, usaremos aqui o seu código. Você pode saber mais sobre código gratuito Javascript de Webmonkey em http://hotwired.lycos.com/webmonkey/programming/javascript/code_library/.

O código de webmonkey para accessar múltilos cookies

O exemplo G mostra o código da Webmonkey para acessar um cookie quando "document.cookie" está armazenando múltiplos cookies.





¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨EXEMPLO G¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨
Para usar essas funções, corte-as e cole-as na página e chame as funções de acordo. Para recuperar um cookie chamado oUsuario, chame a função WM_readCookie("oUsuario"). As funções bem comentadas da Webmonkey falam por si mesmas. Se você usá-las, leia-as uma primeira vez e tenha certeza de que entendeu como elas funcionam.

Carrinho de compras básico

Esta seção discute o código que representa o começo de um script de carrinho de compras. Definitivamente, você não quer usar esse código para executar o seu próprio carrinho de compras - ele é muito simplista. Por exemplo, você não pode remover um item da cestas uma vez que o tenha selecionado. Você encontrará um programa de carrinho de compras JavaScript mais completo(gratuito ou muito caro) na Web. Simplesmente busque "Javascript shopping cart" em qualquer máquina de busca e encontrará uma lista de aplicativos.

Um aplicativo completo de carrinho de compras é bem longo, mas o código abaixo deve dar a você um sentido do que está envolvido na montagem de sua própria cesta de compras JavaScript, ou entender a de alguém, o exemplo H mostra o código de uma página principal de um carrinho de compras simples.





¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨EXEMPLO H¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

O único recurso novo e interessante no exemplo H é (1) que redireciona os visitantes para a página "checkalos.html"(discutida em exemplo K), quando eles clicam no botão de saída. O exemplo I mostra o código de uma das páginas onde você pode comprar um produto:




¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨EXEMPLO I¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

A maior parte dessa página descreve o formulário que relaciona o que os visitantes podem comprar. Cada item tem um botão próximo a ele que permite a você comprar o item. Pressionar aquele botão(como em (2)) chama a função "adicione()", que toma três parâmetros: a quantidade do item a comprar, qual é o item e quanto ele custa. Surpreendentemente, a função "adicione()" não está armazenada nessa página da Web, mas em um arquivo chamado compras.js(exemplo N), um arquivo de texto normal que lê o arquivo compras.js na página e o interpreta, em (1). Essa técnica é muito útil quando você tem um conjunto de funções que se aplica a muitas páginas. Em nosso exemplo, todas as páginas de compras no site precisarão da função "adicione()", portanto, ao invés de cortar e colar essa função em cada página, podemos usar (1) para chamar as funções de compras.js.

Você também achará esse recurso extremamente útil quando quiser mudar a função. Ao invés de precisar procurar em cada lugar que cortou e colou, você só precisa mudá-la uma vez no arquivo compras.js. Quando ela tiver sido mudada de lá, qualquer página que usa o arquivo compras.js carregará a versão alterada. Ai vai o código de compras.js:





¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨EXEMPLO J¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

A função adicione() em compras.js cria uma string a ser salva em cookie (1) no formulário "item:quantidade:preco". Depois, a função usa Webmonkey WM_readCookie() para ver se o visitante já recebeu um cookie chamado "compras"(2) e (3). Se já houver um cookie, (4) coloca uma barra de encaminhamento (/) ao seu final e acrescenta a string criada em (1). Cada vez que um visitante comprar um item, o cookie recebe uma barra, seguida pelo nome do item. Se você tivesse comprado uma camisa e um par de calças, o cookie se pareceria com isso:

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨
compras=camisa:1:20/calca:1:40

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨
Se depois você comprasse outra camisa, o cookie se pareceria com isso:

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨
compras=camisa:1:20/calca:1:40/camisa:1:20

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨
Uma versão mais completa de "adicione()" perceberia que você ja tinha comprado uma camisa e, ao invés de incluir outra "camisa:1:20" ao final do cookie, acrescentaria um a quantidade de camisetas:

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨
compras=camisa:2:20/calca:1:40

¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨
No entanto, visto que tal pequna mudança envolve uma quantidade razoável de código, estou deixando isso de fora. procure em bibliotecas carrinhos de compras completos. Depois da nova string cookie ter sido montada, (5) usa a função "WM_setCookie()" da biblioteca Webmonkey para salvar as informações de cookie do visitante. A página final a considerar é a página de saída, relacionada no exemplo:





¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨EXEMPLO K¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨

A página de saída carrega no arquivo compras.js em (1) exatamente como a página de produtos no exemplo I. Embora haja um pouco de HTML nessa página, a maior parte do que você vê quando visita essa página é gerado pela função "checkAr()", que escreve o conteúdo do cookie de compras na página, e a função "lerOCookie()", que lê o cookie e o formata de maneira a tornar o trabalho da função "checkAr()" mais fácil. o exemplo L relaciona essas funções:





A função "lerOCookie()"

A função "checkAr()" cria um novo array, vazio, e passa o array para a função "lerOCookie()" (7). A função "lerOCookie()" interrompe o cookie em cada item comprado e carrega os itens no array. (2) lê o cookie usando a função WM_readCookie(). Se houver um cookie "compras"(que o visitante deve ter ajustado, clicando em um item), (3) determina se o visitante comprou mais do que um item. Se ele ou ela comprou apenas um item, aquele item é carregado no array, na posição 0 (6). Se ele ou ela comprou dois ou mais itens, aparece uma barra de encaminhamento entre eles e o cookie se divide no array "separacao". Depois, em (5) a loop copia tudo no array "separacao" em "a_info", o array é enviado para a função em (1). Ao final de "lerOCookie()," "a_info" contém todos os itens comprados.

A função "checkAr()"

Visto que "lerOCookie()" carrega as informações do cookie em "a_info", "checkAr()" escreve os itens comprados na página da Web.(8) percorre cada elemtento "a_info" que contém um item comprado. Se o primeiro item comprado for um par de calca, o primeiro elemento no array aparece como: "calca:1:40. (9) então divide esse elemento com dois pontos, carregando os três elementos resultantes no array "esse_item".

O restante do código escreve na tabela. (10) começa uma nova fileira e (11) envolve cada elemento de "esse_item" entre as guias "". A linha (12) calcula quanto "esse_item" custa, multiplicando o preço do item("esse_item[1]") pela quantidade comprada(esse_item[2]). Se o primeiro elemento em "a_info" for "calca:1:40", então "esse_item[0]" é calca, "esse_item[1]" é 1 e "esse_item[2]" é 40, devido à divisão em (9). Então, (12) multiplica 1 por 40 para obter o subtotal, e (13) acrescenta esse subtotal ao total, escrito na página em (14).

Ainda que o carrinho de compras acima exija muito de JavaScript, cada uma de suas funções é curta e bem fácil de entender. Aplicativos complicados como carrinhos de compras normalmente são apenas grupos de funções pequenas que trabalham juntas.

Uma vez que você tenha entendido o básico de JavaScript, a parte difícil de escrever um aplicativo é descobrir quais funções você precisa e como elas se inter-relacionam. Essa é a arte de programação, e vem apenas com muita prática. Se entender o código do carrinho de compras acima mas pensa que não pode escrevê-lo, você mesmo, pratique escrevendo scripts menores - em breve você estará lidando com ele.

Resumo

Os cookies são um recurso avançado de JavaScript e podem acrescentar muita funcionalidade ao seu site. Além de configurar um carrinho de compras, você pode usar cookies para saber como e com quantas freqüências um visitante vem ao seu site, e salvar as preferências personalizadas que os visitantes podem ajustar. Se você esteve atento a todo esse artigo, agora você sabe:

- O que são cookies.
- Como configurar um cookie básico
- Como fazer um cookie durar depois que o usuário desligou seu computador
- Como controlar quais páginas podem ler o seu cookie.
- Como armazenar mais de uma parcela de informações em um cookie.
- Como ajustar e ler mais de um cookie.
- Como criar um arquivo JavaScript separado que outros arquivos HTML possam incluir.
- Onde encontrar bibliotecas de cookies JavaScript.
- O básico de como um script de carrinho de compras funciona.

Indicação

Escreva uma página que funcione como a página descrita no ínicio do artigo. A primeira vez que um visitante vir a página, ele ou ela deve obter uma caixa de aviso que diz, "Bem vindo, novo visitante" na próxima visita, tal caixa de aviso não deve aparecer.


Devido à reformulação implementada no site, pode ser que você encontre alguns links quebrados. Por favor, ajude-nos a corrigir eventuais problemas nos informando links quebrados
1 comentário


Comentário de edvilson
| 16/1/2013 - 14:36 |


Os errinhos de codificação nos caracteres com ascento é por gosto mesmo?