Javascript: OnUnload VS OnBeforeUnload

Fico pensando em um caso mais familiar possível para ilustrar a utilidade das duas funções, e a melhor que me vem à cabeça é o Gmail. Já pensou em fazer algo parecido com o Gmail? Quando o usuário fechar a janela e alguma requisição estiver em processamento, ele dá um aviso sobre ela, para evitar que você perca alguma alteração.

Muita gente pensa que o evento utilizado para fazer tal proeza é o evento “onunload” mas não é. Existe uma pequena diferença entre os dois eventos.

O evento OnUnload

O evento OnUnload em sua tradução quer dizer: “quando descarregar”. Ele é responsável por executar uma instrução quando a página for fechada, mas CUIDADO!. A utilização deste evento não é muito confiável quando se trata de navegadores como Internet Explorer e AJAX ao mesmo tempo. Quando o IE está de mal humor e simplesmente ignora o evento, não executando a instrução que você programou para ele fazer. Se a instrução envolver AJAX, ela está ainda mais fadada ao fracasso e o seu usuário provavelmente vai ficar muito triste.

Exemplo

<script language="JavaScript">
window.onunload = Sair;
function Sair()
{
    return "A página foi fechada";
}
</script>

O evento OnBeforeUnload

Traduzindo OnBeforeUnload para o português, quer dizer: Antes de descarregar. O evento OnBeforeUnload funciona um pouco diferente do OnUnload. O evento OnBeforeUnload é chamado ANTES da janela ser fechada. É mais eficiente, pois ele não é executado em concorrência (junto/ao mesmo tempo) com o fechamento da janela, o que pode fazer com que algo seja carregado pela metade (de forma interminada).

Exemplo

<script language="JavaScript">
window.onbeforeunload = ConfirmExit;
function ConfirmExit()
{
    //Pode se utilizar um window.confirm aqui também...
    return "Mensagem de fechamento de janela....";
}
</script>

Pesquisando sobre este evento eu notei que o jQuery não da suporte ao eventoOnBeforeUnload. Se alguém descobrir por que, ganha um doce. x)

[]’s

Posts Relacionados:

Detectando o iPad com PHP e Javascript

Não me pergunte como, não me pergunte o por quê mas o Steve Jobs conseguiu mais uma vez. Tudo começou com rumores de perda de tempo, ele não vai conseguir e bla bla e no final das contas a poeira abaixou e o iPad foi lançado no dia 3 de abril. Logo após o final de semana de seu lançamento oficial, 700 mil iPads foram vendidos só nos Estados Unidos.

Sendo assim, é importante saber identificar estes dispositivos para conseguirmos otimizar nossos serviços para que nos possibilite atingir uma nova fatia de mercado, dando origem a novos negócios e oportunidades.

O novo iPad da Apple é identificado pelo seguinte User Agent:

Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10

Sabendo como os novos iPads são identificados aqui vão algumas soluções para que vocês possam identificá-los e fazer suas versões dedicadas a partir daí:

Detectando iPad com PHP

$isiPad = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPad');

Detectando iPad com Javascript

var isiPad = navigator.userAgent.match(/iPad/i) != null;

Detectando o iPad com .htaccess

RewriteCond %{HTTP_USER_AGENT} ^.*iPad.*$
RewriteRule ^(.*)$ http://ipad.seudominio.com [R=301]

Espero que ajude!
[]’s

Posts Relacionados:

Tutorial jQuery – Método $.live();

Hoje vou falar sobre um método do jQuery muito útil, muito mesmo. Mais informações em inglês pode ser encontrada na documentação oficial do método .live().

O Problema

É muito comum quando estamos desenvolvendo aplicações para Internet e precisamos criar ferramentas tão dinâmicas que acabamos por utilizarmos quase todo o potencial que o JavaScript dispõe a oferecer. Nas ferramentas que desenvolvo é muito comum a interface da ferramenta ser controlada e alterada quase que o tempo todo através da manipulacão do DOM e muitas vezes precisamos atachar comportamentos em um determinado elemento da página.

Por exemplo: Temos um sistema de comentários onde todos os comentários são carregados e as respostas destes comentários aparecem como arvore.

  • Comentário 1
  • Comentário 2
    • Resposta do comentário 2
      • Resposta da resposta do comentário 2
  • Comentário 3

E assim vai…

Eu posso responder em tempo real um comentário e ele ja vai aparecer para mim. Tudo via jQuery. Quando fazemos uma varredura no DOM do documento usando os seletores do jQuery, procuramos por todos os botões que tenha a classe “responder” que originalmente ficam sem ação e depois, via jQuery damos ação ao elemento.

$('.responder').bind('click', function() {
  // instruções
});

Neste ponto, temos um problema. O indice de elementos do jQuery é estático, ele não atualiza automaticamente. Se um novo botão responder surgir na tela o jQuery não surtirá efeito sobre ele, pois ele apareceu DEPOIS da primeira varredura no DOM quando eu usei o seletor $(‘.responder’).

Solução

Para corrigir este problema, podemos utilizar o .live() do jQuery. Independente de quando e a quantidade de botões que surgirem na tela o jQuery irá acrescenta-lo em seu índice e você poderá manipula-lo da forma como quiser.

$('.responder').live('click', function() {
  // instruções
});

Caso queira adicionar ao DOM o mesmo comportamento em mais de um evento, basta fazer o seguinte:

$('.responder').live('mouseover mouseout', function(event) {
  if (event.type == 'mouseover') {
    // faça isso
  } else {
    // faça aquilo
  }
});

Ou crie 2 lives separadamente para cada evento.

$('.responder').live('mouseover', function() {
  // instruções
});
$('.responder').live('mouseout', function() {
  // instruções
});

A princípio o conceito pode ser um pouco confuso. Fica difícil de entender isso quando nunca se passou pelo problema. O dia que algo não funcionar como o esperado pelo jQuery nem simplesmente ter sido chamado, lembre-se do $.live();

Igor
[]’s

Posts Relacionados:

10 Dicas JavaScript e Boas Práticas

Recentemente alguns site e blogs vem divulgando listas de dicas para se codificar em javascript. Apresentando melhores práticas de desenvolvimento e muitas dicas bacanas, Pensei que este seria um bom tópico para se extender e compartilhar com vocês. Neste post estou reunindo as minhas top 10 dicas e boas práticas para codificação javascript.

Espero que gostem.

1. Use o atributo defer para indicar o uso scripts externos no IE

O propósito do defer é avisar o script que está sendo requisitado externamente para esperar  até que a página seja carregada ou o DOM esteja preparado. O mesmo pode ser realizado através de bons métodos não-obstrutivos via javascript, que usualmente inclui códigos que previne a execução de scripts antes que o DOM seja carregado por completo.

A vantagem do defer ocorre quando utilizamos o Internet Explorer, tendo em vista que é único browser que suporta o atributo defer. Então, se você precisa de um rápido script que rode únicamente e exclusivamente no Internet Explorer, e você não quer que ele execute antes que o DOM esteja preparado, então simplesmente adicione defer="defer" no sua tag <script> e ela irá rapidamente tratar o seu problema. Corrigir a transparência de arquivos PNG no IE6 é uma das possibilídades práticas do uso do defer.

(Edit: O atributo defer deve ser usado quando escondemos um script de outros browsers com o uso dos comentários condicionais  – conditional comment – que afete somente os navegadores da Microsoft – de outra maneira o script vai rodar normalmente em outros browsers.)

2. Use o CData Section para previnir erros de validação XHTML Strict

Muitas vezes seus scripts vão residir em arquivos externos e chamados dentro da tag <script> dentro do  <head> do documento, ou então antes do fechamento da tag </body>.

Mas este documento pode estar eventualmente usado em um local que junto dele existem marcações HTML, como abaixo:

<div>
<p>
<script type="text/javascript">
var my_variable = 100;
if (my_variable < 50) {
// alguma coisa aqui...
}
</script>
</p>
</div>

Você pode notar que no código acima, dentro do if, existe o símbolo <  que representa “menos”, que é parte da sintax, corréto? Este símbolo causa um erro de validação. O validador interpreta ele como um inicio de uma marcação ou uma tag HTML que não foi fechada, a não ser que você encapsule o seu código com o CData, assim:

<div>
<p>
<script type="text/javascript">
//<![CDATA[
var my_variable = 100;
if (my_variable < 50) {
// alguma coisa aqui...
}
//]]>
</script>
</p>
</div>

3. Evite palavras-chaves reservadas do JavaScript quando estiver criando funções e identificadores

Muitas palavras são reservadas no javascript, então você deve evitá-las quando forem criar variáveis ou outros idenficadores. A lista completa de palavras-chaves do javascript segue abaixo:

break
case
catch
continue
default
delete
do
else
finally
for
function
if
in
instanceof
new
return
switch
this
throw
try
typeof
var
void
while
with

4. Evite palavras reservadas do JavaScript quando estiver criando funções e identificadores

Que estão também algumas palavras reservadas, que não estão necessariamente sendo usadas pela linguagem mas são reservadas para o uso futuro. São estas:

abstract
boolean
byte
char
class
const
debugger
double
enum
export
extends
final
float
goto
implements
import
int
interface
long
native
package
private
protected
public
short
static
super
synchronized
throws
transient
volatile

5. Não mude o tipo das variaveis depois da declaração inicial.

No javascript, tecnicamente, isso é perfeitamente legal:

var my_variable = "Esta é uma string";
my_variable = 50;

Depois que a variável é inicialmente declarada como string na linha 1, na linha 2 o seu valor é mudado e o seu tipo também. Esta não é uma boa prática e deve ser evitada.

6. Não use variáveis globais.

Para previnir possíveis conflitos, em 99% dos casos, use o “var” no início quando estivermos declarando uma variável e seu valor. Isso faz com que a sua variável exista somente no escopo da função e não fora dela, ou seja, toda variável criada pelo var, só poderá ser acessível dentro do escopo no qual ela foi declarada e não mais fora dele. Então, se acontecer de você utilizar duas variáveis com o mesmo valor em lugares diferentes do seu script, nenhum conflito ocorrerá.

7. Javascript é Case-Sensitive.

Lembre-se do que vem a seguir: No código que segue temos duas variáveis que estão armazenando seus valores em 2 lugares diferentes na memória, e não um só, como alguns podem pensar. São duas variáveis completamente diferentes alocadas em lugares diferentes na memória:

var myVariable = "data";
var myvariable = "more data";

8. Use o switch para lidar com multiplas condições

Não faça isso:

if (example_variable == "cyan") {
// faça algo aqui...
} else if (example_variable == "magenta") {
// faça algo aqui...
} else if (example_variable == "yellow") {
// faça algo aqui...
} else if (example_variable == "black") {
// faça algo aqui...
} else {
// faça algo aqui...
}

Faça isso:

switch (example_variable) {
case "cyan":
// faça algo aqui...
break;
case "magenta":
// faça algo aqui...
break;
case "yellow":
// faça algo aqui...
break;
case "black":
// faça algo aqui...
break;
default:
// faça algo aqui...
break;
}

O segundo bloco de código faz exatamente a mesma coisa que o primeiro – mas o segundo é limpo, fácil de ler, fácil de dar manutenção e modificar.

9. Use o try-catch para previnir que erros sejam expostos para os usuários

Encapsulando todo o seu código no try-catch, você pode evitar que o usuário final nunca veja um feio erro de javascript exposto na tela. Assim:

try {
funcaoQueNaoExiste();
} catch (error) {
document.write("Um erro ocorreu.")
}

No código acima, eu tentei chamar uma função que não existe, para forçar um erro. O navegador não vai exibir o típico erro “not an object” ou “object expected”, mas ao invés disso, vai exibir um erro mais customizável que eu incluí dentro do meu “catch”. Você pode também deixar o catch vázio para nada ser mostrado para o usuário, ou você pode criar uma função que seja chamada dentro do catch que faça o tratamento deste erro para propósitos de debug etc.

Mantenha na sua cabeça que isso pode esconder erros do desenvolvedor também, então uma boa decumentação do código e comentários podem ser úteis neste ponto.

10. Faça comentários multi-linhas legíveis, mas simples

Em javascript, você pode comentar uma linha de código colocando um // no início da linha. Você também pode criar um comentário em bloco como mostra a seguir: /* [comentário aqui ] */. Algumas vezes você precisa incluir um comentário longo, um comentário de mais de uma linha. Um bom método para se utilizar que não tenha uma visual esmagador, mas é fácil de identificar o código é esse a seguir:

/*
* Este é um comentário multi-linha...
* bla bla bla...
* bla bla bla...
* bla bla bla...
* bla bla bla...
*/

E é isso 🙂

Este artigo é uma adaptação e tradução do texto: 10 JavaScript Quick Tips and Best Practices

Posts Relacionados:

Legibilidade com with() statement no javascript

Hora de falar de Javascript. Hoje vou falar sobre um recurso que o Javascript oferece para diminuir as referências aos objetos. Utilizando o with() você consegue deixar o seu código mais legível e prático.

Veja um exemplo:

Uma implementação comum, sem o with()

function foo(){
        var x = document.forms[0].elements[0].value;
        var y = document.forms[0].elements[1].value;
        var z = document.forms[0].elements[2].options[document.forms[0].elements[2].selectedIndex].text;
}

A mesma implementação, COM o with()

function foo(){
        with(document.forms[0]){
                var x = elements[0].value;
                var y = elements[1].value;
                with(elements[2]){
                        var z = options[selectedIndex].text
                }
        }
}

Viram como o código ficou menor e mais legível? Não não precisamos ficar repetindo instruções para se referenciar a um determinado objeto.

Gostaram? Ok, mais um exemplo então:

var a, x, y;
var r = 10;
with (Math) {
   a = PI * r * r;
   x = r * cos(PI);
   y = r * sin(PI/2);
}

Na forma tradicional teríamos que ficar nos referenciando ao objeto Math do javascript: Math.cos(PI) ou Math.sin(PI/2).

Atenção

O uso do with() pode ser nocivo. Como também o eval(), e também como o ajax pode ser nocivo e se pensar no mesmo raciocínio, muitos outros recursos disponíveis na linguagem podem ser nocivos se não forem aplicadas de forma correta. Caso for de interesse, leia mais em: http://yuiblog.com/blog/2006/04/11/with-statement-considered-harmful/

É isso aí, um abraço a todos.

Posts Relacionados:

Como debugar aplicações AJAX/PHP com FirePHP

Tradicionalmente, existem duas maneiras de se debugar uma aplicação server-side: você pode utilizar qualquer uma Integrated Development Environment (IDE) com algum build-in debugger ou registrar seus processos de depuração exibindo no próprio browser.

Neste artigo veremos uma forma elegante, simples e mais sustentável de se debuggar aplicações Ajax via browser (especificamente o Mozilla Firefox). Você vai aprender a turbinar o seu Firefox unindo o Firebug e o FirePHP, tornando-o uma elegante ferramenta de depuração.

Introdução

Quando técnicas como Ajax se tornam populares nos ambientes de desenvolvimento, é comum que junto surjam também novos desafios, por exemplo: como podemos debuggar requisições e respostas Ajax de forma eficiente para aplicações complexas?

Se utilizar um debugger foi difícil o suficiente com um modelo RESTful, interceptar uma requisição ajax específica é um saco e um pouco mais difícil. Geralmente o dumping de logs e informações destas transações devem ser feitas via JSON ou XML.

É aqui que o FirePHP ajuda, permitindo que você registre suas mensagens de debug dentro do console do Firebug. O FirePHP não faz uma bagunça no seu código (e não exige que você modifique nada para pegar erros). As mensagens que você imprime são enviadas para o browser através de HTTP response headers, ou seja, as suas mensagens de debug não vão “quebrar” as respostas das suas requisições com mensagens e erros de debug e fazendo parar de funcionar toda a sua aplicação. A resposta vem limpa e todo o processo de depuração vem catalogado no console do Firebug. Isso faz com que o FirePHP não seja só o aplicativo ideal para você debugar suas aplicações PHP, mas também o seu PHP codebase inteiro.

O que é o FirePHP?

O FirePHP é um add-on para um add-on (ahn?): ele estende o popular Firebug. O FirePHP é grátis e fácil de instalar através da seção Mozilla Add-Ons no site oficial da Mozilla. O site oficial do FirePHP pode ser encontrado neste endereço: www.firephp.org,e Christoph Dorn é a pessoa responsável pela criação do FirePHP.

O que eu preciso para iniciar?

Como você deve ter adivinhado, são necessáriastrês coisas para fazer com que o FirePHP funcione, são elas:

  1. Firefox
  2. Firebug
  3. FirePHP

Se você não tem um ou todas as aplicações listadas acima, você pode clicar no link respectivo de cada uma delas e receber instruções de como instalá-las de forma adequada.

Se você está começando agora a estudar um pouco mais sobre web development, o FirePHP pode ser um pouco “manhoso” no começo, mas o projeto é acompanhado por uma boa documentação e você pode aprender facilmente.

Instanciando a API OO

No seu script, você pode utilizar o bloco de código abaixo para instanciar o FirePHP ($firephp):

require_once('FirePHPCore/FirePHP.class.PHP');
$firephp = FirePHP::getInstance(true);
$firephp -> [classmethod];

Instanciando a API OO com os métodos estáticos

Esse é o formato como você deve chamar os métodos do FirePHP:

require_once('FirePHPCore/fb.PHP');
FB::[nameofmethod];

A API Procedural

E aqui está como se utiliza a API procedural do FirePHP:

require_once('FirePHPCore/fb.PHP');
fb($var);
fb($var, 'Label');
fb($var, FirePHP::[nameofmethod]);

Nós não vamos entrar em detalhes com relação aos benefícios em utilizar cada uma das APIs, cabe a você decidir a melhor forma para VOCÊ. Em outras palavras, eu não quero iniciar uma guerra para decidir qual é a melhor forma, procedural x orientada a objetos. It’s up to you.

Gravando mensagens no Firebug Console

Agora vamos detalhar as formas como você pode lidar com o Console do Firebug.

Exemplos básicos de log de mensagens

Se você está debugando um bug, o exemplo a seguir pode ser útil para você:

Fb::log("log message");

Isso vai imprimir a mensagem que você passou como parâmetro dentro do console do Firebug:

Fb::log($array, "dumping an array");

Passando um array (chega de print_r nos seus scripts) e mostrando o seu conteúdo. O exemplo acima vai mostrar a seguinte saída no seu console:

Dica: Quando você passar o mouse em cima das mensagens que foram logadas no seu console, uma janela aparece com todas as variáveis logadas, tudo tabulado de forma legível para desenvolvedor. Legal, né?

Registrando uma mensagem de Informação

Aqui vai uma forma de você exibir mensagens informativas no console:

Fb::info("information");

E o seu console exibirá assim:

Mensagens de Aviso

Segue aqui uma forma de você gravar mensagens de aviso:

Fb::warn("this is a warning");

Mensagens de Erro

Segue aqui uma forma de você gravar mensagens de Erro:

Fb::warn("error message");

Habilitando/Desabilitando o registro de logs no Console

Quando o seu site vai para o ar é muito importante que você desabilite o FirePHP para evitar que a pessoa errada veja a informação certa na hora errada (rs).

FB::setEnabled(false);

O bom de tudo isso é que você pode manter todo o código que você escreveu para debugar o seu código dentro do código, sem que você precise tirá-lo ou comentá-lo quando for para o ar. Se a sua aplicação possui um arquivo de configuração, é interessante criar uma variável dentro dele que através da qual você consiga habilitar e desabilitar o FirePHP.

Conclusão

Antes de tudo, aqui vai uma imagem com todas as mensagens possíveis de se utilizar no FirePHP:

Neste artigo, cobrimos coisas bem básicas de se fazer utilizando o FirePHP para ajudar você a debugar e ganhar informações sobre as suas requisições nas suas aplicações Ajax/PHP de forma fácil e sustentável no seu próprio browser. Eu espero que estes resultados tenham convencido você a explorar outras alternativas para debugar seu código fora da “old-school” techniques (echo’s print’s etc.). Usar o FirePHP é fácil e conveniente, dá a você muito mais opções e dados para propósitos de debug.

No futuro, pretendo cobrir recursos mais complexos do FirePHP para fazer desta simples ferramenta de debug uma ferramenta poderosa, completa e robusta.

[]’s

Posts Relacionados:

Trabalhando com Mascaras em Java Script

Recentemente, tive problemas com algumas funções já disponíveis na internet para poder facilitar a aplicação de mascaras em campos do tipo string.

Por exemplo: o cliente precisava que no momento que eu fosse digitando a data no formato (00/00/000) o sistema automaticamente, iria colocando as barras “/” para facilitar o preenchimento do campo.

Baseando-se neste ,desenvolvi uma função em JavaScript para aplicar qualquer tipo de mascara que você precisar basta informar o template da mesma:

/**
 * Formata o Campo de acordo com a mascara informada.
 * Ex de uso: onkeyup=&amp;quot;AplicaMascara('00:00:00', this);&amp;quot;.
 * @author Igor Escobar (blog@igorescobar.com)
 * @param Mascara String que possui a mascara de formatação do campo.
 * @param elemento Campo que será formatado de acordo com a mascara, voce pode informar o id direto ou o próprio elemento usando o this.
 * @returns {void}
 */
function AplicaMascara(Mascara, elemento){

	// Seta o elemento
	var elemento = (elemento) ? elemento : document.getElementById(elemento);
	if(!elemento) return false;

	// Método que busca um determinado caractere ou string dentro de uma Array
	function in_array( oque, onde ){
			for(var i = 0 ; i &amp;lt; onde.length; i++){
			if(oque == onde[i]){
				return true;
			}
		}
		return false;
	}
	// Informa o array com todos os caracteres que podem ser considerados caracteres de mascara
	var SpecialChars = [':', '-', '.', '(',')', '/', ',', '_'];
	var oValue = elemento.value;
	var novo_valor = '';
	for( i = 0 ; i &amp;lt; oValue.length; i++){
		//Recebe o caractere de mascara atual
		var nowMask = Mascara.charAt(i);
		//Recebe o caractere do campo atual
		var nowLetter = oValue.charAt(i);
		//Aplica a masca
		if(in_array(nowMask, SpecialChars) == true &amp;amp;&amp;amp; nowLetter != nowMask){
			novo_valor +=  nowMask + '' + nowLetter;
		} else {
			novo_valor += nowLetter;
		}
		// Remove regras duplicadas
		var DuplicatedMasks = nowMask+''+nowMask;
		while (novo_valor.indexOf(DuplicatedMasks) &amp;gt;= 0) {
       		novo_valor = novo_valor.replace(DuplicatedMasks, nowMask);
    	}
	}
	// Retorna o valor do elemento com seu novo valor
	elemento.value = novo_valor;

}

Metodos de uso

Mascara para campos do tipo Data:

&amp;lt;input name=&amp;quot;data&amp;quot; maxlength=&amp;quot;10&amp;quot; onkeyup=&amp;quot;AplicaMascara('XX/XX/XXXX', this);&amp;quot; type=&amp;quot;text&amp;quot; /&amp;gt;

&amp;lt;strong&amp;gt; Mascara para campos do tipo Hora:&amp;lt;/strong&amp;gt;
&amp;lt;input name=&amp;quot;hora&amp;quot; maxlength=&amp;quot;8&amp;quot; onkeyup=&amp;quot;AplicaMascara('XX:XX:XX', this);&amp;quot; type=&amp;quot;text&amp;quot; /&amp;gt; 

Mascara para campos do tipo CEP:

&amp;lt;input name=&amp;quot;cep&amp;quot; onkeyup=&amp;quot;AplicaMascara('XXXX-XXX', this);&amp;quot; type=&amp;quot;text&amp;quot; /&amp;gt;  

Mascara para campos do tipo TELEFONE:

&amp;lt;input name=&amp;quot;tel&amp;quot; onkeyup=&amp;quot;AplicaMascara('(XX)XXXX-XXXX', this);&amp;quot; type=&amp;quot;text&amp;quot; /&amp;gt;  

Mascara para campos do tipo CPF:

&amp;lt;input name=&amp;quot;cpf&amp;quot; onkeyup=&amp;quot;AplicaMascara('XXX.XXX.XXX-XX', this);&amp;quot; type=&amp;quot;text&amp;quot; /&amp;gt;  

E por ai vai, basta seguir os exemplos e ser feliz ;) Espero ter contribuído!
[]’s

Posts Relacionados:

Iniciando com o JSON

Alguns dias atrás, recebi um e-mail de um leitor que acabou de iniciar em um novo emprego e seus supervisores lançaram a seguinte necessidade:

Na nossa empresa temos uma base de dados que ao fazer a consulta X, irá vai te retornar um JSON, ou seja, um valor que por sua notação é denominada JSON.

JSON quer dizer JavaScript Objection Notation, nada mais é do que um conjunto de chaves e valores, que podem ser interpretadas por qualquer linguagem. Toda essa estrutura, foi criada apartir do padrão ECMA-262 que por sua vez possui convenções muito semelhante às linguagens como C, C#, C++, Java, JavaScript, Perl, Python e várias outras. Com estas características o JSON se torna o formato ideal para troca de informações independente da linguagem.

Um estrutura JSON pode ser identificada por duas estruturas de dados:

Uma coleção de pares nome/valor. Em várias linguagens, isto é caracterizado como um object, record, struct, dicionário, hash table, keyed list, ou arrays associativas.

json-object

Ex:

var MeuBlog = {
nome:"Igor Escobar // blog",
ano:2008,
assunto:"Tecnologia",
getTitle:function(){
return ('TituloBlog:' + nome);
}
}

Uma lista ordenada de valores. Na maioria das linguagens, isto é caracterizado como uma array, vetor, lista ou sequência.
json-array

Ex:

["Igor Escobar // Blog", 2008, 0]

Viu só? é super simples se trabalhar com o JSON. Não se preocupe ao aplicar estas regras na prática, a teoria é valida para você entender como o JSON gera estes dados, no seu caso (e de muitos), você precisa decodificar um Array ou um Objecto JSON para a sua linguagem nativa.

Vou utilizar a linguagem PHP, como exemplo, para você entender como funciona e aonde entra o JSON nesta história toda.

json-na-pratica

  • Primeiro o PHP recebe os dados e envia estes dados para o JSON seja ele um Array ou um Objeto.
  • Depois o JSON codifica os dados e retorna este valor (uma inofenciva string) para uma variavel PHP que por sua vez é responsável por enviar esta váriavel para o banco com os dados codificados.

JSON na Prática

Estou disponibilizando aqui o JSON em:

Mais caso você precise da implementação JSON em outras linguagens basta ir até o site do projeto.
Na prática você só vai utilizar duas funções do JSON:

$JSON = new JSON();
// JSON - Encode
$dbValue = $JSON->;encode($objetoPHP); // Codifica um objeto PHP -> JSON
// JSON - Decode
$dbValue = $JSON->decode($dbObject->campoComJson); // Decodifica um objeto JSON -> PHP Object

E é exatamente isso que no caso do nosso “amigo do e-mail” precisa fazer. Você precisa receber este valor na estrutura de dados JSON e decodifica-lo para que sua linguagem nativa o entenda e interprete.

Possível problema

Se você estiver utilizando JSON -> JavaScript e este array/objeto JSON retornar uma estring é possivel que você tenha problemas com caracteres especiais e na hora de exibir apareça uns caracteres como (+%…etc).

Para corrigir este problema eu implemento em minhas funções javascript a seguinte solução:

function urlencode(str) {
str = escape(str);
str = str.replace('+', '%2B');
str = str.replace('%20', '+');
str = str.replace('*', '%2A');
str = str.replace('/', '%2F');
str = str.replace('@', '%40');
return str;
}

function urldecode(str) {
str = str.replace(/\+/g, ' ');
str = unescape(str);
return str;
}

E é isso caro “amigo do e-mail”, conte-nos depois como foi a sua experiência iniciando com o uso do JSON e espero que este ajude todas as outras pessoas que forem iniciar com o mesmo.

Vale lembrar, eu só escrevi este texto por que o nosso amigo aparentemente precisava MUITO, pela iniciação no novo trabalho e claro o seu problema com certeza bate com o de muitas outras pessoas, principalmente, com o objetivo deste blog que é em primeiro lugar, reunir soluções de desenvolvimento em um único lugar.

Nota: Apartir do PHP 5.2 o JSON já se encontra nativo na linguagem através dos métodos json_encode(); e json_decode();

Espero ter contribuído!
[]’s

Posts Relacionados:

  • Nenhum post relacionado!

MooTools 1.2 Image Protector: dwProtector

Hoje venho apresentar para vocês uma biblioteca que achei bastante interessante, escrita para o Framework javascript MooTools, chamada Image Protector, é uma grande novidade e talvez um grande marco para os designers que se descabelam para poder proteger suas imagens.

Esta biblioteca foi criada justamente para os designers ou artistas, que odeiam ver seus trabalhos copiados e ripados em segundos após dias, semanas, anos de trabalho dedicado, e o pior, as vezes até roubo de autoria.

O MooTools 1.2 Image Protector previne:

  • right-click “Save Image As”.
  • Arrastar qualquer imagem para o desktop.
  • right-click “Save Background As”.
  • right-click “View Background Image”

Segue abaixo tudo o que você precisa:

MooTools 1.2 Image Protector JavaScript Class

//protector class
var dwProtector = new Class({

	//implements
	Implements: [Options],

	//options
	options: {
		image: 'blank.gif',
		elements: $$('img'),
		zIndex: 10
	},

	//initialization
	initialize: function(options) {
		//set options
		this.setOptions(options);

		//make it happen
		this.protect();
	},

	//a method that does whatever you want
	protect: function() {
		//for each image that needs be protected...
		this.options.elements.each(function(el) {
			//get the element's position, width, and height
			var size = el.getCoordinates();
			//create the protector
			var p = new Element('img', {
				src: this.options.image,
				width: size.width,
				height: size.height,
				styles: {
					'z-index': this.options.zIndex,
					'left': size.left + 'px',
					'top': size.top + 'px',
					'position': 'absolute'
				}
			}).inject($(document.body),'top');
		},this);

	}
});

Exemplo de uso

window.addEvent('domready', function() {
	var protector = new dwProtector({
		image: '/blank.gif',
		elements: $$('.protect')
	});
});

Caso você queira testar o MooTools 1.2 Image Protector, basta acessar.

[]’s
Igor.

Posts Relacionados:

JavaScript não obstrutivo com JQuery

Apenas compartilhando com vocês um slide feito por Simon Willison no dia 6 de maio.

Unobtrusive JavaScript with jQuery

Posts Relacionados: