Fazedor de Site » Javascript não-obstrutivo

Javascript não-obstrutivo

Para quem não lembra do post falando sobre camadas, acesse clicando aqui, vai ser útil para o entendimento deste post.
Hoje a camada de comportamento está em destaque, vou passar um exemplo de como utilizar o javascript de forma correta, para que não atrapalhe a acessibilidade.
Um observação apenas, o termo correto é não-obstrutivo, ao contrário do que muitos utilizam “não-obstrusivo”, digo isso não pela terminologia, quem me conhece sabe que não me importo com isso, porém obstrusivo é erro de escrita, de português, é uma palavra que não existe na nossa língua, e ai doi um pouquinho no olho.

O javascript não-obstrutivo nada mais é do que uma forma de montar seu javascript separado da camada de conteúdo, muita gente gosta de usar o famoso “onclick=’javascript:funcao()’”, funciona bem para quem tem o javascript ativado no navegador, porém, no caso de estar desativado, o que acontece? provavelmente nada, não carrega o conteúdo, e ai você diz, 99% tem javascript habilitado, pode ser, mas aquele 1% é pior do que o restante dos 99% para não ter direito a acessar o conteúdo do seu site?
Deixando de lado ainda a acessibilidade, separar o javascript da camada de conteúdo, fora do html, é uma questão organizacional também, pois olhar para aquele código cheio de “onclick” e função para todo lado além de feio é pouco produtivo, atrapalha atualização do mesmo, e ainda dificulta a compreensão de outro desenvolvedor que pegar o mesmo para alterar.

Abaixo deixo 2 exemplos, o primeiro a forma incorreta de usar javascript em um site, o segundo a correta.
Mas por hora deixo em aberto, vamos ver quem sabe o que tem de diferente nos dois, em um post futuro explico a diferença entre ambos.

Javascript incorreto
Javascript correto

P.S:
Não se apeguem ao nível do exemplo, fiz rapidinho só para mostrar para vocês.