Separar javascript do Html? por que e como?

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ágina html , em quanto nós programadores poderíamos  criar classes e métodos 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 funcionalidades (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 pensamento só no cliente, nada de requisição ao 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 ação chamaria ou o document , ou ate mesmo uma funcao().

agora faremos o certo separando o código.

<a href=”#this” id=”fazer”>fazer algo</a>

var tag = document.getElementById( ‘fazer ‘ );

assim nosso código html esta usando somente propriedades html separadas de códigos  javascript.

Entretanto tudo isso foi explicado no intuito 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 invés de usarmos o document.getElementById, assim usando  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 funcionalidade 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”, função ou objeto referenciado, 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 relacionar a qual função sera executada ao chamar esse 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.

Conhecendo YAHOO-YUI

Brasília, 17 de março de 2008

Tudo certo, pessoal?

Bem, nesta semana apresento-lhes um exemplo de uso do framework  “YAHOO”  para a facilitação da criação de layout. Ferramenta open-surce usando javascript e css. Neste pequeno tutorial abordaremos o reset-fonts-grids.css.

Para a sua utilização na criação de layout torna-se necessário o conhecimento das suas “div’s”, como: yui-hd(head-cabeçalho), yui-bd(body-corpo), yui-ft(footer-rodape) e dentro dessas “yui’s-div”, continua, com as do tipo: (yui-g,yui-gb,yui-gc,yui-gd,yui-ge e yui-gf) ao usá-las, podemos: dividi-las, rotacionar e podendo assim dimensiona-las a sua necessidade.

Exemplo de uso: Lembrando que foram omitidas algumas estruturas  como as do html e importações(javascript e css), no intuito de deixar especificamente o uso das divs mencionadas.

<div id=”doc2″>
<div id=”hd”>
<p>Aqui e o cabecalho parte 1</p>
</div>
<div id=”bd”>
<div class=”yui-gd”>

<div class=”yui-u first”>
<p>Corpo – Parte2</p>
<div class=”yui-u”>
<p>Corpo – Parte3</p>
</div>
</div>
</div>
<div id=”ft”>
<p>Rodape – parte4.</p>
</div>

Para maiores detalhes e conhecimentos de como usar acesse http://developer.yahoo.com/yui/examples/

Hello world!

Welcome to WordPress.com. This is your first post. Edit or delete it and start blogging!