Uma abordagem suave aos objectos em JavaScript

Nota introdutória: este texto foi escrito para um público alvo muito específico, sendo o objectivo principal o de introduzir o paradigma OO em JavaScript. Muita da beleza do paradigma e até da própria linguagem serão eventualmente matéria de desenvolvimento mais adiante.

A Programação Orientada a Objectos (do inglês Object-Oriented Programming – OOP) é um paradigma relativamente recente, introduzido no início dos anos 60.

Na génese deste paradigma está a noção do universo compostos por objectos que interagem entre si. Como o software visa resolver problemas do “mundo real”, a programação por objectos pretende simplificar a representação da realidade onde os objectos têm características (propriedades) e acções (métodos) que são capazes de realizar.
Continue reading

Guardar JSON num cookie

Nada de mais: guardar JSON num cookie.
Esta ideia surgiu dada a necessidade de guardar as preferências do utilizador numa determinada janela. Pareceu-me razoável  e desenvolvi um protótipo (se repararam no negrito não preciso explicar mais).

À partida a performance será sempre melhor do que fazer parsing de strings uma vez que JSON é um subset de JavaScript (neste teste a média é de 12ms mas o cookie é muito “simples”).

Ainda assim restam algumas preocupações:

  1. dependendo da complexidade das estruturas a armazenar incorremos no risco de extrapolar a capacidade do cookie (4096 bytes num limite de 20 cookies por cada host ou domínio);
  2. fazer o eval do conteúdo do cookie não é seguro até garantirmos a sua autenticidade (a não violação do mesmo);

(mais sobre cookies no RFC 2109 – HTTP State Management Mechanism)

Deixando as preocupações para uma próxima etapa, segue o código fonte

<html>
	<head>
		<title>coockie demo</title>
		<script type="text/javascript">
			function getCookie()
			{
				var data;
				if (document.cookie.length == 0)
					return false;
 
				var startPos = document.cookie.indexOf('tempo=');
				if (startPos != -1) //we have cookie
				{
					startPos = startPos + 6; //go ahead
 
					//find end of data
					var endPos = document.cookie.indexOf('}',startPos);
 
					if (endPos != -1) //cookie is ok and we have data
					{
						data = document.cookie.substring(startPos,endPos+1);
						data = eval('('+ data +')');
						console.log(unescape(data.city));
 
						return true;
					}
					else{
						//cookie is not ok so lets rewrite it!
						return false;
					}
				}
			}
 
			function setCookie(name)
			{
				var expDate = new Date();
				expDate.setDate(expDate.getDate()+ 365);
				document.cookie = "tempo={'city':'"+ escape(name) +"'};expires="+ expDate.toGMTString();
			}
			function run()
			{
				if (!getCookie())
				{
					var name = prompt('Your city name here!');
 
					setCookie(name);
				}
			}
		</script>
	</head>
	<body>
		<script type="text/javascript">
			console.time('getCookie');
			run();
			console.timeEnd('getCookie');
		</script>
	</body>
</html>

Safari Web developer tools

Apesar do post onde relato a excelente experiência com Opera Unite, enquanto developer contínuo a lidar com os vários browsers: Firefox, Safari e agora Opera.

O  Firebug é um add-on para Firefox imprescindível para qualquer developer que permite a edição, debug e monitorização de CSS, HTML e JavaScript em tempo real e em qualquer página.

Usando o Firefox como referência no desenvolvimento, o Firebug é a ferramenta perfeita (ou muito perto disso) particularmente para debug de JavaScript.

No entanto quando lidamos com implementações particulares de JavaScript, como é o caso do objecto XMLHttpRequest, surge a necessidade de analisar o comportamento do nosso código nos vários browsers. Portanto pretendemos algo semelhante ao Firebug para Safaria e Opera.

Para o primeiro, Safari, o caso é simples: o pessoal da Apple deixou um mimo “escondido”. Para o activar basta abrir um terminal e executar o seguinte comando (todas as instâncias do Safari devem ser fechadas):
defaults write com.apple.Safari IncludeDebugMenu 1
A partir daqui ficará disponível um novo menu: “Develop”, com um vasto leque de opções incluindo o debugger de JavaScript.

No caso do Opera Unite não é necessário qualquer tipo de mágica: basta aceder aos menus Tools > Advanced > Developer Tools.

Safari Developer Tools

Safari Developer Tools

Opera Developer Tool

Opera Developer Tool

Reescrever variáveis de URL

Para possivelmente vos poupar 20min (isto se googlarem antes de meter mãos à obra), deixo abaixo um pedaço de código em JavaScript que permite reescrever as variáveis passadas pelo URL.
O Princípio é básico: doURL recebe uma string no formato variavel1=valor1&variavel2=valor2 (com um número variável de variáveis) actualizando aquelas que existirem no URL da página onde é executado e adicionando as demais. Formado o novo URL o browser é redireccionado com a nova query string.
Continue reading