O Básico da web

Podemos fazer maravilhas com JavaScript e, com a popularização das chamadas HTTP via JavaScript (mais conhecidas como AJAX) e posteriormente do que chamam de web 2.0, essa linguagem de scripts, tão mal falada e quase esquecida em um passado não muito distante, voltou à tona e é usada, hoje, por 9,9 entre 10 desenvolvedores web.

O problema é que, na maioria dos casos, os desenvolvedores não se limitam a usar o JavaScript onde ele é realmente necessário e traz realmente algum ganho de produtividade e usabilidade para o usuário, e acabam abusando da linguagem e, pior ainda, fazendo com que funcionalidades e conteúdo estejam acessíveis apenas quando houver suporte a JavaScript.

A idéia desse texto não é falar mal do JavaScript e sim mostrar a vocês como fazer com que ele não fique no caminho do usuário, ou seja, fazer com que o que funciona com JavaScript também funcione sem JavaScript.

Na verdade, é o contrário, a idéia é usar sempre o conceito de progressive enhancement (explico melhor em outro post, se vocês acharem necessário), que é, basicamente, o uso racional e correto do desenvolvimento em camadas. Algo tão simples quanto começar do começo, dar um passo de cada vez para chegar a um resultado satisfatório.

Tenha em mente que, por mais que existam poucos usuários que navegam sem JavaScript, um desses usuários pode ser um grande cliente em potencial navegando de um PDA ou o Google.

Enfim, vamos ao que interessa. Comecemos pelo exemplo mais simples.

Não existe protocolo javascript, portanto não é certo usar javascript:

Isso mesmo. Atire a primeira pedra aquele que nunca fez isso:

<a href="javascript:fazAlgumaCoisa();">Clique aqui para fazer alguma coisa</a>

O atributo HREF do elemento A (o popular anchor, ou link para os íntimos) foi feito especificamente para definir uma URI. Uma URI é composta por algumas partes e a primeira delas é o protocolo (na verdade, um esquema, mas vamos chamar de protocolo porque é o nome mais comum. Prometo explicar isso melhor outro dia também), que deve ser algo como http:, ftp:, mailto:, etc e tal. javascript: não faz parte dessa lista. Não é um esquema, não é um protocolo. Não use sob hipótese alguma.

Outra coisa importante é: só use links se realmente tiver algum lugar para apontar usando HREF. Se o propósito é totalmente outro, use outro elemento. Veremos isso mais a frente no texto.

Tá bom, eu não uso, mas como eu faço então, tio?

Há varias maneiras. Algumas melhores, outras piores. Vejamos:

<a href=http://meusite.com/teste.html onclick="fazAlgumaCoisa();return false;">Link de teste</a>

O que estamos fazendo na linha acima é um link para uma URL que existe e, caso haja suporte a JavaScript, ao ser clicado, esse link vai executar a função fazAlgumaCoisa(), definida em algum outro lugar.

Notem o return false depois da chamada da função. Ele serve para que o clique seja cancelado após executar a função. Se esquecer dele, o usuário será levado à URL em questão depois de executar a tal função e, em geral, não é isso que você quer, não é?

Mas esse modo tem alguns problemas:

1. Não separa o comportamento do conteúdo. Ou seja, você está misturando as camadas, o que não é bom por diversos motivos.
2. Só funciona para o evento de clique do mouse. Usuários que sigam o link via teclado não vão ter a funcionalidade do script, o que pode ser o efeito desejado, mas, em geral, não é.

Como resolver isso então?

Separando o JavaScript do HTML. Para isso, você precisa definir algo para identificar esse link em específico e poder acessá-lo pelo JavaScript. Vamos usar um ID para o nosso exemplo:

<a href=http://meusite.com/teste.html id="linkteste">Link de teste</a>

Um link simples. Vamos agora adicionar a funcionalidade em um JavaScript externo:

function powerLinks(){
var link = document.getElementById(’linkteste’);
link.onclick = function(){
fazAlgumaCoisa();
return false;
}
}

window.onload = powerLinks;

Ou seja, redefinimos o evento onclick do link e adicionamos o nosso código nele. Simples, não? A última linha faz com que a função seja executada ao carregar a página (existem formas melhores de fazer isso, mais uma promessa para um outro post. Me cobrem, por favor).

Mas ainda temos o problema do mouse. Precisamos fazer com que o script funcione também para quem está navegando via teclado.

Fazemos isso usando o evento onkeypress, que é ativado quando o usuário aperta alguma tecla, e checando se a tecla pressionada foi o ENTER. Veja como:

function powerLinks(){
//aqui entra o codigo anterior do script
link.onkeypress = function(e){
var keynum;
if(window.event) // para o IE
keynum = window.event.keyCode;
else if(e.keyCode) // Netscape/Firefox/Opera
keynum = e.keyCode;
if (keynum == 13) {
fazAlgumaCoisa();
return false;
}
}
}

Como vocês podem perceber, o IE trata o evento onkeypress um pouquinho diferente dos outros browsers, mas nada ultra complicado. 13 é o número de tecla correspondente ao ENTER. Ou seja, quando o usuário pressionar ENTER, o script será executado.

E quando não houver URL pra usar no HREF?

Bem, nesse caso então você não tem um link e, claro, não deve usar o elemento A. Use qualquer outra coisa e, via CSS, faça com que essa coisa se pareça com um link e, de preferência, crie essa coisa com JavaScript, para que aqueles que não têm suporte a JavaScript nem vejam a tal coisa.

Infelizmente, não é qualquer elemento que pode receber o foco via teclado, portanto se a sua idéia é que esse elemento seja acessível via teclado, não há outro jeito senão usar um A. Porém, como esse A será criado na página via JavaScript, ele não vai incomodar ninguém que não tenha suporte a scripts. Exemplo:

function criaPseudoLink(){
var paiPseudoLink = document.getElementById(’pai’) //o elemento que conterá o pseudo link
paiPseudoLink.innerHTML += ‘<a href=”#” id=”linkteste”>Faz Alguma coisa</a>’;
}

Ou seja, o conteúdo do elemento “pai” do pseudo link , cujo ID é “pai” será acrescido do HTML correspondente ao A. O resto é igualzinho ao que foi descrito anteriormente.

Por hoje é só. Ficou claro? Alguma dúvida? Esqueci de algo? Falei alguma besteira? A caixa de comentários é toda de vocês.

Para não deixar o post ainda mais longo, vou abordar outros tipos de abusos de JavaScript em outro post. E, como já disse, me cobrem, por favor.

Leia também:

• Como selecionar elementos HTML via JavaScript/DOM
• Termos e definições
• Image Replacement: use com sabedoria
• HTML - Esqueleto de um documento HTML - Parte 2: HTML e HEAD
• Padrões web: Desenvolvimento em camadas - Camada de comportamento
• Hospedagem de sites Dreamhost: 50% de desconto