Uma das linguagens de programação mais utilizadas na internet está tomando um novo rumo. O JavaScript sempre foi muito conhecido pelos desenvolvedores por ser fácil de usar e proporcionar mais interatividade em web sites, mas nos últimos anos como tudo o que envolve tecnologia o JavaScript além de se tornar indispensável para um desenvolvedor web vem se tornando uma ferramenta cada vez mais explorada.
O termo “JavaScript não obstrutivo” diz respeito a scripts fora do código HTML de um web site, muitos sites utilizam scripts com várias linhas em meio aos códigos HTML, utilizar o JavaScript não obstrutivo além de separar os scripts das marcações HTML melhorando a manutenção do web site, ajuda na acessibilidade porque uma das funções do JavaScript não obstrutivo é tornar interações com scripts acessíveis para usuários que não possuam o JavaScript habilitado em seu navegador.
Acessibilidade
Vamos supor que tenhamos um menu horizontal e quando passamos o mouse por algum dos itens do menu apareçam outros sub-menus como na imagem abaixo.
Quando o site é acessado em computadores que não tenham suporte ao JavaScript ou que estejam com ele desabilitado o risco de os sub-itens não aparecerem ou aparecerem de forma errônea é muito grande, por isso o uso do JavaScript não obstrutivo extingue definitivamente a possibilidade de o usuário não conseguir acessar os sub-itens.
Nos próximos posts vou falar sobre JavaScript não obstrutivo em barras de navegação. Assine o feed e fique esperto.
Relação JavaScript não obstrutivo e SEO
No exemplo acima vimos que o JavaScript não obstrutivo ajuda na acessibilidade das páginas na web, com os mecanismos de busca não é diferente. Menus como os da imagem acima quando gerados dinamicamente através de JavaScript se tornam um grande problema para os buscadores, a dificuldade dos robôs está em interpretar o código JavaScript quando o buscador analisa um web site a procura de links seja do mesmo site ou externos.
Já que o conceito básico de rastreamento em Search Engines é sair farejando sites em busca de novos links para assim indexar o maior número de informações em seus servidores, por exemplo, se o link para a página de Produtos do seu web site for gerado dinamicamente através de JavaScript, é muito provável que os motores de busca tenham dificuldade em indexar essa página correndo o risco até de nem se quer ser indexada, este é apenas um exemplo dentre tantos problemas que scripts obstrutivos podem causar para o rank de sua página nos buscadores. Portanto JavaScript não obstrutivo passa a ser uma técnica indispensável para quem quer estar no topo do Google.
Simplificando o desenvolvimento com jQuery
jQuery é um poderoso Framework em JavaScript que facilita muito o desenvolvimento do JavaScript não obstrutivo, é utilizado por grandes empresas de todo mundo como Google e DELL por exemplo. Compatibilidade e produtividade são umas das características mais marcantes dessa fantástica ferramenta.
Compatibilidade
Utilizando jQuery para o desenvolvimento de aplicações na web o desenvolvedor está seguro de que os scripts funcionarão perfeitamente nos Browsers mais utilizados no mundo inteiro como Internet Explorer, Mozilla Firefox, Safari e Opera. A segurança de que as interações no seu web site funcionarão para qualquer usuário com certeza é um ponto muito forte do jQuery.
Produtividade
Para exemplificar o que muda quando passamos utilizar jQuery nada melhor do que comparar um código de JavaScript puro com um que execute a mesma função porém utilizando jQuery.
Nas especificações do XHTML da W3C o parâmetro target=”_blank” da tag <a>, utilizado para fazer com que o link seja aberto em nova janela, foi retirado por se tratar de uma funcionalidade extra a de apenas marcar as páginas.
Para simular este efeito agora é recomendado que seja utilizado através de JavaScript, pois bem, vamos ver o exemplo de link externo em JavaScript puro:
function createExternalLinks() {
if(document.getElementsByTagName) {
var anchors = document.getElementsByTagName('a');
for(var i=0; i
Neste script é feito uma varredura no documento procurando tags ancora, <a>, que possua o atributo, rel="externo", e depois é adicionado nessa tag o atributo target="_blank".
Agora vamos ver a mesma função sendo escrita com o uso do jQuery:
$(document).ready(function(){
$("a[@rel=externo]").attr('target','_blank');
});
Assim como no script anterior este faz a mesma varredura, porém com um número de linhas muito reduzido.
É grande a diferença não é?
Este é apenas um exemplo do uso do jQuery em um script pequeno, agora tente imaginar o que o uso do jQuery faria em funções com 50 ou mais linhas de código, manutenção e peso das aplicações com certeza seriam reduzidos.
Neste post mostrei apenas um exemplo do uso do jQuery para ilustrar a facilidade que a ferramenta proporciona, nos próximos posts vou falar mais sobre jQuery e suas facilidades, exemplos de aplicação e plugins para uso no desenvolvimento serão explorados.
Até a próxima.
Alguém ja passou pela seguinte situação? De aplicar o “mask()” em um input, e na sequencia tentar redefinir outra mascara para o mesmo input?! Se alguem ja tentou isso sem a implementação do método chamado “unmask()”, com certeza presenciou as locuras que acontece com a redefinição da mesma, abaixo segue a implementação do método “unmask()” para retirar os “listeners” do mesmo e finalmente poder aplicar novamente o mask():
$.fn.unmask = function() { this.unbind(); var el = this.get(0); if ($.browser.msie) { el.onpaste = null; } else if ($.browser.mozilla) { el.removeEventListener('input', el._checkVal, false); } el._checkVal = null; }; })(jQuery)Abracos!
Legal Osvaldo, fica a dica ai pra rapaziada que se deparar com esse problema. Sempre ressaltando as facilidades que o JavaScript não obstrutivo proporciona.
[...] de abas de uma forma muito simples, e não obstrutiva como comentei no meu post anterior sobre javacript não obstrutivo. Site do Plugin: http://docs.jquery.com/UI/Tabs Download do Plugin: [...]
O masked input já tem o Unmask, $(“elemento”).unmask(); :)