JavaScript Void 0

Hyperlinks como Este incentivam ao visitante a clicar porque ele sabe que será levado para uma página nova. Entretanto, algumas vezes quando se está fazendo um script, você precisa adicionar alguma funcionalidade para seu website que deixa que executa alguma ação quando o link é clicado algo como atualizar uma soma, sem carregar uma nova página.

É neste tipo de soluções de programação em que iremos utilizar a ferramenta JavaScript Void 0.

Executando JavaScript diretamente no Browser

Web browsers permitem que se execute instruções JavaScript diretamente inserindo o código no campo de URL do browser. Tudo o que precisa ser feito é colocar JavaScript: antes do código para informar ao browser que você quer rodar o JavaScript. você pode fazer isso agora mesmo escrevendo algo como

• JavaScript:alert("Estou aprendendo com a Spyderit")

Na barra de endereços do browser e aperte Enter.

Isso é útil para um desenvolvedor de Javascript pois ele pode criar seus endereços de hyperlinks href como uma declaração de JavaScript. Isso significa que você pode tirar a função de carregar uma nova página de link e reprogramar isso para fazer "qualquer outra ação diretamente na página".

Esta prática pode ser vista em serviços como Gmail (Email do Google) que faz grande parte das interações com muito poucos carregamentos de página. Aqui está um exemplo de link que não carrega uma nova página.

<a href="javascript: alert('News Flash!')">News Flash</a>

Mostra:

Isso é interessante de aprender, mas não passa de um esquema. O verdadeito valor de uma declaração de JavaScript na URL só é visto quando você o usa para retornar um valor. Aqui é onde o void 0 começa a aparecer.

Explicação sobre o JavaScript Void 0

O web browsers irá tentar carregar qualquer coisa que for usada como URL. O único motivo pelo qual podemos usar uma declaração de Alert JavaScript sem carregar uma nova página é porque o alert é uma função que retorna um valor nulo. Isso significa que quando o browser tenta carregar uma nova página ele recebe null e não há nada para carregar.

Uma coisa importante de entender é que sempre que você usar uma declaração JavaScript como uma URL que retorne um valor,o browser irá tentar carregar a página. Para prevenir esta ação não desejada, você precisa usa a função void na mesma declaração, assim sempre retornará null e nunca carregará uma nova página.^*

Exemplo simples de JavaScript Void 0

O void é um operador que é usado para retornar um valor null e assim browser não será capaz de carregar uma nova página. Algo importante para se notar sobre o void é que ele requer um valor e não pode ser usado por ele mesmovoid(); - irá retornar um erro. Esta é uma forma simples de usar o void para cancelar o carregamento da página.

<a href="javascript: void(0)">Eu não estou usando um link</a>

Mostra:

Exemplo simples de um meio de usar o Void 0

Este exemplo mostra como você pode usar o operador void para retornar um valor. meuNumero que nós criamos para o valor 10. Nós podemos então usar a mesma variável meuNumero em uma operação alert.

<a href="javascript: void(meuNumero=10);alert('meuNumero = '+meuNumero)">
Defina meuNumero Por Favor</a>

Mostra:

Ps.:^* - Existem algumas outras formas de evitar o carregamento de uma nova página:

• utilizando o identificador de âncora # - não é muito utilizado pois ele faz com que o browser procure a âncora na página atual e mova a página para o topo caso não encontre, ou posiciona a página com a âncora no início da tela, o que tira a atenção do visitante e torna a navegação difícil.
• utilizar o evento onclick por exemplo href="alguma coisa" onclick="return false;" - só que dá mais trabalho, concorda? Sem falar que estão descontinuando as declarações de eventos de tag, mas isso é para um outro artigo :) .
• utilizar o próprio return false; na URL, mas isso dá a impressão de que há algo errado com o link, pois é o texto que aparece na barra de status do browser.
• O Void é a mais prática e exata forma de impedir o carregamento de uma nova página.

Abraço,
Flavio Ribeiro

tradução e adaptação da referência http://www.tizag.com/javascriptT/javascriptvoid.php