Prototype - Parte II

Olá a todos!!

Continuando a saga do prototype, vou falar hoje de mais 3 três funções: $(), $F() e $A(). Para quem vai escrever aplicações Ajax e quer ter menos trabalho, elas irão te ajudar e muito. Vamos lá!

Função $$(): Esta função retorna todos os elementos da página que satisfaçam determinada regra CSS. Por exemplo, se eu quiser retornar o conteúdo de todas as divs que tenha a classe "teste" podemos fazer assim:

function teste(){
 var a = $$(".teste");
 a.each(function(elem){
  alert(elem.innerHTML);
 });
}

Em outro post falaremos mais sobre esse each esquisito ai no código.

Função $F(): Essa é mais simples, ela retorna o valor de qualquer input ou select da página.

alert($F("meuinput"));
    ...
<input type="text" id="meuinput" value="olá mundo" / >

Isso irá mostrar uma caixa de alerta com o texto Olá mundo.

Função $A(): Por fim, esta função recebe como argumento uma lista qualquer e retorna um objeto Array, já com as extensões do prototype. Por exemplo:

<script>
function mostraLista(){
 var lista = $('lista').getElementsByTagName('option');
 var nos = $A(lista);
 nos.each(function(no){
  alert(node.innerHTML);
 });
}
</script>

<select id="lista" size="10" >
<option value="5">Opção 1</option>
<option value="8">Opção 2</option>
<option value="1">Opção 3</option>
</select>
<input type="button" value="Mostra Lista " onclick="mostraLista();" >

Este código pega todos os elementos "option" da lista "lista" e e interage através deles usando a função each, que é uma extensão ao objeto array do prototype, mostrando o conteúdo de cada elemento. Isso facilita muito nossa vida quando queremos interar através de elementos de uma tabela ou de uma lista <li>, por exemplo.

Por hoje é isso. Nos próximos posts continuaremos essa saga do prototype. Se gostou deste post favor comentar!! Se não gostou tb!! Pode reclamar a vontade ;)