Sobre javascript, Dom e Event
Quando se pensa em trabalhar com javascript e html, devemos ter em mente separar html de javascript e para podermos trabalhar em conjunto usaremos o Event e Dom, assim teremos a certeza de estarmos programando da maneira mais certa afirmada nos padrões atuais.
Anteriormente sendo feita esa interação javascript e html através dos eventos existentes de javascript(onclick, onmouseon e etc..) interpretadas pelo Browser.
Pensando um pouco a respeito !!! Para podermos fazer isso sem usar esses tipos de evento, chamados pelas tags html, teremos que usar objetos que chamam uma determinada classe onde esses eventos ja foram setados por essas classes, e novamente , pra que isso? para separarmos um código do outro.
Assim nossa tag html estará limpa de chamadas javascript.
Por exemplo, um designer poderia estar trabalhando na págima html , em quanto nós programadores poderiamos criar classes e métods a vontade, sem interferir e precisar de alguma coisa do nosso amigo , designer.
Fora a própria semântica do código que deve ser objetivo e claro para todos.
Continuando com o raciocínio, para sabermos qual objeto usar e qual classe esse objeto chama , precisaremos conhecer um pouco sobre um framework chamado YAHOO, por que? ora , se javascript nativo(original) não tem o conceito de classe e herança, desenvolveram no passar do tempo uma solução, provinda de alguns frameworks que nada mais são do que arquivos na maioria javascript.
Então voltando ao YAHOO, ele nada mais e do que um framework , feito em javascript com diversos arquivos .js com suas respectivas funcionabilidades (classes, métodos e objetos).
Conheceremos então alguns: existe um arquivo do YAHOO chamado yahoo-dom-event.js
Toda vez que queremos que o javascript converse com os componentes html ele chama o DOM para resgatar qual campo iremos usar do html, fazemos buscando a identidade(id) do componente ou a classe(tipo)de componente.
por exemplo : se tivesse uma tag html do tipo <a href=”#this”>Link</a> e quizessemos que ao clicar no link o meu objeto javascript soubesse que estou querendo que ele pegue essa tag e faça alguma coisa, chamaria usando uma propriedade “document”, que e um objeto interno a classe window nativa do javascript, a window e tratada no escopo do Browser, ou seja pessamento so cliente, nada de requisição a servidor. Tudo e tratado e interpretado pelo browser. Assim a sintaxe ficaria: document.getElementById( ‘ nome da id’ ), o que estou dizendo com isso , objeto document pegue o elemento (tag html) pela id(identificação)que esta aqui dentro ( ‘nome da id’ ). assim termine pensando quem vc identificar na tag html , e chamar atribuindo a um objeto a gerência desa tag.
Ex: <a href=”#this” onclick=”acao”></a> – na acao chamaria ou o document , ou ate memso uma funcao().
agora faremos o certo separando o codigo.
<a href=”#this” id=”fazer”>fazer algo</a>
var tag = document.getElementById( ‘fazer ‘ );
assim nosso codigo html esta usando somente propriedades html separadas de codigos javascript.
Entratetanto tudo isso foi explicado no entuito de se entender melhor o uso do Dom para podermos agora falar do que mais interessa
uso do arquivo do YAHOO – yahoo-dom-event.js ao inves de usarmos o document.getElementById, iremos usar outro objeto.
YAHOO.util.Dom.get( ‘text’ );
var tag = document.getElementById( ” ); os 2 fazem a mesma coisa , diria que a diferença seria pela praticidade da escrita.
Peguei a tag que eu queria agora vou manipular o que quero fazer com ela , então vou usar o objeto que resgato o que veio do “document” e acrescentar uma outra funcionabilidade a innerHTML, dessa forma:
var fulano = YAHOO.util.Dom.get( ‘nome do id da tag desejada’ );
fulano.innerHTML = alguma atribuição, pode-ser um array por exemplo.
fulano.innerHTML = carro [1]; onde um poderia ser tipo,modelo essas coisas.
Agora pra fechar o Post, com chave de outro – eheheheh.
YAHOO.util.Event.addListener(“id da tag html”, “ação”, funcao ou objeto referenciando funcao, objeto, assinalar verdadeiro(true) ou nada);
o que estamos fazendo aqui estamos usando o objeto Event que nada mais faz do que pegar a tag específica e lançar atributos a ela, do tipo de evento (onclick, onDbClick,onMouseOn etc…) e relacioanr a qual funcao sera executada ao chamar o evento, depois qual objeto que vou usar para tratar o que foi feito na função.
Tudo isso dentro dos parenteses .
Ex: YAHOO.util.Event.addListener(“voltar”, “click”, objText.previus, objText, true );
Vou fazer um estudo melhor desse arquivo yahoo-dom-event.js
Até a próxima pessoal.
