clique na lâmpada

Cookies

Os cookies são informações que ficam armazenadas no computador do usuário e se parecem com as variáveis, permanecendo no computador mesmo depois do browser ser fechado. Eles são gravados no HD do usuário. Os cookies armazenam pouca informação, de forma que não dá para executar programas a partir dele, pois têm muitas restrições, até por segurança da linguagem javaScript. Dessa forma, o usuário poderá ficar despreocupado com o que está sendo armazanado no seu computador através do javaScrip. Na verdade ele tem um esquema de segurança que proibe qualquer tipo de acesso malicioso no computador do usuário.

Estas informações podem ser feitas através de um servidor remoto, em um banco de dados de uma outra máquina, no entanto, algumas informações devem ser armazenadas localmente. As vantagens: acesso mais rápido, não é necessário o acesso pela rede, pode-se limpar os cookies quando quiser, o que não acontece se as informações estiverem em um banco de dados, existindo certa flexibilidade em relação aos cookies.

Relembrando:
Variável é a forma de atribuir um valor a um nome para utilizar em outros lugares do script.

Criando uma variável

No javaScript:
var nome = "Filipe"
var nome = prompt("Digite seu nome");
A desvantagem é que ao coletar o nome dessa variável através do prompt para obter o nome do internauta por exemplo, ela será válida somente para essa função.

No javaScript:
window.onload = function() {
document.getElementById("ada").onclick = ligar;
var nome = prompt("Digite seu nome");
}
function ligar() {
document.getElementById("ada").src = "/static/img/lampada_on.jpg";
setTimeout("desligar()", 3000);
}

function desligar() {
document.getElementById("ada").src = "/static/img/lampada2_off.jpg";
}

Acesso de uma variável através das outras funções

Para obter acesso através das outras funções deve-se colocar a variável fora da função. No entanto o valor dessa variável permanecerá somente enquanto a página estiver aberta. Ao ser fechada a página, o javaScript destruirá todas as variáveis inicializadas no documento.

No javaScript:
var nome = prompt("Digite seu nome");
window.onload = function() {
document.getElementById("ada").onclick = ligar;
setInterval(mostrarHoras, 1000);
}

function ligar() {
document.getElementById("ada").src = "/static/img/lampada_on.jpg";
setTimeout(desligar, 3000);
}

function desligar() {
document.getElementById("ada").src = "/static/img/lampada2_off.jpg";
}

function mostrarHoras() {
var agora = new Date();
var horas = agora.getHours() + ":" + agora.getMinutes() +  ":" + agora.getSeconds();
document.getElementById("horas").innerHTML = horas;
}

Criando uma Variável Permanente

Usando o exemplo da lâmpada. Quando a página for carregada ao clicar nela o nome será mantido, mesmo depois do browser ser fechado. Isto será possível com os cookies

No javaScript:
var nome = prompt("Digite seu nome");
window.onload = function() {
document.getElementById("ada").onclick = ligar;
setInterval(mostrarHoras, 1000);
}

function ligar() {
document.getElementById("ada").src = "/static/img/lampada_on.jpg";
setTimeout(desligar, 3000);
}

function desligar() {
document.getElementById("ada").src = "/static/img/lampada2_off.jpg";
}

function mostrarHoras() {
var agora = new Date();
var horas = agora.getHours() + ":" + agora.getMinutes() +  ":" + agora.getSeconds();
document.getElementById("horas").innerHTML = horas;
}

Gravando um Cookie no Computador

Acesso e gravação de informações dentro do cookie. Para gravar um cookie no computador proceder da seguinte forma:
No elemento document que está dentro de windows.
document.cookie="nome=valor; expires=data; path=/";
Onde o nome pode ser qualquer um, máximo de 4k de tamanho, não se deve colocar um objeto grande demais, só podendo ser armazenados 20 cookies por domínio. Todos os cookies estão vinculados à página em que ele foi criado, tendo também uma data de expiração. Obs. esta data deve ser no formato GNT -formato internacional. Exemplo abaixo: new Date().toGMTString();

Biblioteca para Trabalhar com Cookies

Para facilitar segue o javaScript com três funções que são utilizadas nos exercícios. Uma para escrever o cookie, outra para ler um cookie e para apagar o cookie. Pode ser utilizado como uma biblioteca para trabalhar com cookies.

		   
No javaScript:	
	Esse javaScript foi salvo com o nome:
         cookies.js
	function writeCookie(name, value, days){
	//Por default, nâo existe expiração, ou seja o cookie é temporário
	var expires = "";

	//Especifica o número de dias para guardar o cookie
	if (days) {
	var date = new Date();
	date.setTime(date.getTime)() + (days * 24 * 60 * 60 * 1000));
	expires = "; expires=" + date.toGMTString();
	}

	if(value != "" && value != null && value != "null"){
	//Define o cookie com o nome, valor e data de expiração
	document.cookie = name + "=" + value + expires + "; path=/";
	}
	}
	
	function readCookie(name){
	//Encontra o cookie especificado e retorna o seu valor
	var searchName = name + "=";
	var cookies = document.cookie.split(';');
	for var i=0; i (cookies.length; i++) {
	var c = cookies [i];
	while (c.chartAt(0) == ' ')
	c = c.subtring(1, c.length);
	if (c.indexOf(searchName) == 0)
	   return c.substring(searchName.length, c.length);
	  }
	  
	  
	/*function eraseCookie(name){  
	//Exclui o cookie
	  writeCookie(name, "", -1);
	  }*/

	Esse javaScript foi salvo com o nome:
	cookies-aula39.js
	/*
	autor : Maria Adalgisa de Souza
	descrição : COOKIES
	*/

	window.onload = function() {
	document.getElementById("ada").onclick = ligar;
	setInterval(mostrarHoras, 1000);

	var nome = prompt("Qual o seu nome?")

	var nome = readCookie("nome");
	if(nome == null){
	nome = prompt("Digite seu nome");
	writeCookie("nome", nome, 1);
	}
	}

	function ligar() {
		document.getElementById("ada").src = "/static/img/lampada_on.jpg";
		
		var nome = readCookie("nome");
		if(nome != null){
		   nome = prompt("Digite o seu Nome");
			alert("Como vai? " + nome);
	}

		setTimeout(desligar, 3000);
	}

	function desligar() {
		document.getElementById("ada").src = "/static/img/lampada2_off.jpg";
	}

	function mostrarHoras() {
	var agora = new Date();
	var horas = agora.getHours() + ":" + agora.getMinutes() +  ":" + agora.getSeconds();
	document.getElementById("horas").innerHTML = horas;
	}