Para ser bem objetivo, no post anterior sobre javascript não-obstrutivo mostrei 2 exemplos, um correto, outro não.

Por que correto?

Este exemplo podemos dizer que é correto por 2 motivos principais:

• Trabalha com camadas, o javascript interage sempre externamente, sem se misturar com html.
• Acessibilidade, se o javascript do navegador estiver desabilitado o visitante verá a informação.

Ok, entendi a teoria, mas onde está isso no código?

No exemplo correto o javascript é carregado de um arquivo externo neste momento:

<script src="jsnobs.js" type="text/javascript">

Todo javascript está neste arquivo jsnobs.js, por meio de eventos ele acessa o html e interage com o mesmo.
O arquivo JS está aqui.

Reparem, existem 2 funções chamadas fadeIn e fadeOut, servem somente para fazer o esmaecimento, ou seja, aparecer e desaparecer as divs.
Mais abaixo temos o que interessa, que é o evento onload, usado neste exemplo para termos certeza que vamos acessar o DOM, o html, somente depois de carregado.
Ali diz que quando o documento for carregado deve executar as instruções que vem na sequência .

window.onload

A parte abaixo pega todos os links da página e os guarda como uma array na variável pegalinks.

pegalinks = document.getElementsByTagName("a");

O laço for percorre todos os links da página.

for(i=0;i<pegalinks.length;i++)

Em cada link comparamos se ele tem o id que procuramos, usei o id neste caso para definir qual link iria trabalhar, pois não iriam repetir, lembrando que o id de cada elemento em uma página deve ser único, caso precise trabalhar com mais links, sugiro usar o atributo “rel”.

if(pegalinks[i].id=="mostra_quadrados")

Caso seja o link que procuramos ele exibe os quadrados chamando a função fadeIn quando este link for clicado.

pegalinks[i].onclick = function(){
fadeIn("q1");
fadeIn("q2");
fadeIn("q3");
return false;
}

Caso seja o outro link procurado, escondo os quadrados usando este código:

pegalinks[i].onclick = function(){
fadeOut("q1");
fadeOut("q2");
fadeOut("q3");
return false;
}

Ok, isso mostra como trabalhamos com camadas, o javascript todo fora do html.
A questão da acessibilidade é que mesmo tendo o javascrip trabalhando em outra camada, eu ainda sim, inseri o link para a página com o conteúdo no html.
Ira exibir de uma forma não tão bela, mas vai exibir, e isso é o mais importante.

<a href="quadrados.htm" id="mostra_quadrados" title="Mostrar quadrados">
Mostrar quadrados</a>

Alguém certamente vai perguntar, mas porque quando o javascript está ativado ele ignora o atributo “href” do link e obedece somente ao javascript?
Reparem a ultima linha do evento “onclick” no javascript:

return false;

Isso indica para fazer o que vem antes daquilo e depois não fazer mais nada, ou seja, ignorar o “href”, pois ele sempre é executado depois do que vem com evento onclick.

Trackback para este Post | Assine o Feed RSS dos comentários