Há alguns anos atrás quando começou o desenvolvimento de web sites, códigos HTML's estavam todos misturados com as configurações de estilos da página(Definições de cores, tamanhos, fontes, etc). Com a chegada do CSS, houve a separação deste código. O que é referente a codificação HTML fica separado do que for referente a codificação de estilos.
Ou seja, antigamente tinhamos:
Agora, utilizando um arquivo CSS:
restando assim, apenas o que é estrutura em nosso arquivo HTML, e tendo um ou mais arquivos responsáveis por estilizar nossas páginas.
Então vamos pensar. Se no nosso arquivo CSS é para ficarem apenas as configgurações de estilos e o nosso HTML é para ficar apenas nosso esqueleto, por que não fazer o mesmo com nossos javaScripts. Afinal de contas, utilizamos eles para diversas coisas. Validações, redirecionamentos, comportamento de um campo/objeto, manipulação do estilo... Enfim, todo o comportamento que quiser realizar na página através de um script. Dae você irá me dizer, "Mas hoje já utilizamos arquivos js separados do HTML!". Isso é verdade, agora imagine se até as chamdas pudessem ser externalizadas.
?????
Vamos ver um exemplo.
Hoje fazemos nossos scripts assim:
Agora, de uma forma não intrusiva, ou seja, sem eventos de onClick, onMouseOver, restando apenas o HTML no fonte, sem nenhum evento.
Apenas isso:
Primeiro passo. Em um arquivo js separado inlcuiremos nossa function, declarada na forma anterior.
Arquivo script.js
Até agora nada fora do normal. Agora, vamos fazer com que nossos radios, quando clicados, façam a mesma troca de cor que já estavam fazendo anteriormente.
Primeiro vamos informar a nossa página que, quando a página for carregada eu irei coletar todos os elementos radios da minha página que contenham o nome colorSelect.
Pronto, temos todos os nosso radios.
Agora vem a mágica, para cada radio, iremos atribuir ao objeto radio, o atributo onClick com um valor, que será nossa função.
Com isto será atribuito no carregamento da página o evento onClick em todos os radios que estiverem com o nome que foi passado na função e definido no html.
Exemplo completo.
Arquivo js
Arquivo html
Espero que tenham gostado.
