Web Sites com Ajax
JavaScript
Introdução ao JavaScript não-obstrutivo
Assim como separamos os elementos de apresentação dos elementos de conteúdo através de uma folha de estilo externa (CSS), iremos separar os elementos de comportamento dos elementos de conteúdo através de um arquivo externo de JavaScript.
Dessa forma, trabalharemos com as três camadas e as deixaremos independentes uma das outras. Portanto, para acrescentar, alterar ou remover conteúdo trabalharemos com a marcação XHTML, precisamente na camada de conteúdo.
Se precisarmos alterar o layout, cores e outros elementos de apresentação, trabalharemos com as CSS, alterando a camada de apresentação.
Para concluir, trabalharemos com a camada de comportamento, quando houver necessidade de acrescentar, editar ou remover tais comportamentos na página.
A não utilização correta das três camadas da web não é tão deselegante e inacessível quanto o desenvolvimento de um JavaScript obstrutivo, ou seja, scripts que impedem que alguém utilize um website caso não tenha suporte ao JavaScript ou por estar desativado.
Um site precisa satisfazer o usuário ou o usuário precisa satisfazer o site? Pense nisso.
Vejamos um exemplo de JavaScript obstrutivo, seguido por dois não-obstrutivos.
<a href="#" onclick="window.open('pagina.htm')">texto do link </a>
<a href="pagina.htm" onclick="window.open(this.href)">text do link</a>
<a href="pagina.htm" class="popup">texto do link </a>
O primeiro exemplo ilustra um JavaScript obstrutivo, o qual deve ser evitado, uma vez que, se alguém tentar acessar o link do exemplo sem ter suporte ao JavaScript não chegará há lugar algum. Afinal, o que temos definido no atributo href é simplesmente uma tralha (#).
O segundo exemplo é bom, mas não é o ideal. Ele abre uma popup como desejamos para aqueles que possuem suporte ao JavaScript, assim como no primeiro exemplo. Caso o usuário não tenha suporte ao JavaScript ele será encaminhado para a mesma página exibida no popup, neste caso: pagina.htm.
Para finalizar, temos um exemplo perfeito e ideal. Uma marcação que prepara o link a ser reconhecido por um JavaScript não-obstrutivo e o torna ativador de uma popup, como desejamos.
E como isto é feito? Simples, adicionamos ao link uma classe chamada popup e o que precisamos fazer é criar um script para reconhecer os links que possuem tal classe e através deles, abriremos uma popup com a página definida no atributo href deste link.
Vamos obseravar o script para exemplificar essa facilidade:
function doPopups() {
if (!document.getElementsByTagName) return false;
var links = document.getElementsByTagName("a");
for (var i=0; i < links.length; i++) {
if (links[i].className.match("popup")) {
links[i].onclick = function() {
window.open(this.href);
return false;
}
}
}
}
window.onload = doPopups;
Vejamos o exemplo nesta página de demonstração.
Vamos analisar e compreender o que esse script faz.
Iniciando pela última linha window.onload = doPopups. Ela simplesmente inicia a função - doPopups - quando a página a qual o arquivo JavaScript está vinculado for carregada.
A função em questão inicia-se realizando uma verificação, if (!document.getElementsByTagName) return false, a qual impede que o browser que não reconhece o método getElementsByTagName aborte o script, ou seja, não o execute. Caso isso não seja feito, causará um erro pelo fato dele (browser) não reconhecer um método que será utilizando no script.
Em seguida, temos a variável links, a qual utiliza o método getElementsByTagName para selecionar todos os links contidos na página.
Após realizamos um loop através do for por todos os links e informamos que o loop será menor do que o total de links contidos na página.
Em cada link selecionado faremos a seguinte verificação if (links[i].className.match("popup")) {, ou seja, verificamos se o link contém no atributo class o valor popup.
Se o valor popup for encontrado no atributo class do link, iremos fazer com que ele, ao receber um click, execute uma função. Essa função abrirá uma nova janela através do window.open(this.href) e evitará que o atributo href do link seja executado através do return false.
No capítulo seguinte abordaremos o simples e fácil Ajax, para que em seguinda possamos desenvolver nosso projeto final.
Com o projeto final, aprenderemos na prática e de uma só vez: Ajax, JavaScript, DOM, separação de camadas e JavaScript não-obstrutivo.
Até lá.
