Usando a prototype – passo 8 – seletores CSS

Muito se fala da facilidade que a jQuery tem em usar a sintaxe de CSS para selecionar elementos do DOM, o que facilita a vida de quem tem forte conhecimento em CSS. Mas poucos sabem que a prototype desde a versão 1.5 (agora está na 1.6.0.3) possui algo semelhante.

Enquanto na jQuery se utiliza o $ para fazer qualquer tipo de seleção (retornando ou um objeto ou uma lista), na prototype se utiliza o $ para selecionar um objeto pelo id dele e a função $$ para selecionar pelas regras do CSS, retornando um objeto Array da prototype (que é um objeto que extende o Array do javascript).

Vamos a um exemplo prático. Tendo o seguinte html:

<div>
   <ul id="main-nav">
      <li>abc</li>
      <li>fgh</li>
   </ul>
   <ul id="nav">
      <li>abc</li>
      <li>fgh</li>
      <li>abc</li>
      <li>fgh</li>
   </ul>
</div>

usando a função $$, você pode tentar retornar os elementos da seguinte forma:

$$("div ul"); //retorna as duas listas
$$("div.container ul"); //não retorna
$$("div ul#main-nav"); //retorna as lista com id main-nav
$$("div ul#main-nav li"); //retorna os itens de lista da lista com id main-nav
$$("div ul#main-nav li:first-child"); //retorna o primeiro item de lista da lista com id main-nav

A versão 1.6 (atual) suporta seletores do CSS3. Veja na documentação oficial quais são eles.

Uma coisa importante é notar que essa implementação é totalmente crossbrowser e que não está ligada a capacidade do browser de interpretar o CSS (ou seja, um browser que não entende seletores do CSS3 consegue pela prototype usar a função $$ igualmente a um browser que interprete o CSS3).

Quer ver esse código funcionando? Veja nesse html.

jQuery priceformat – Formatar preços

O Cuducos, que tive oportunidade de conhecer e ouvir palestrar no N Design 2008, escreveu notificando que ele desenvolveu um plugin para formatar preço com jQuery.

 

Price Format

O primeiro passo é fazer o download do plugin (lembrando que você deve carregar o jQuery antes). Com a biblioteca e o plugin já carregados fica muito fácil formatar um campo numérico (ou qualquer outro elemento), vamos lá:


$("#example2").priceFormat({
    prefix: "R$ ",
    centsSeparator: ",",
    thousandsSeparator: "."
});

Você pode escolher o prefixo (tipo de moeda, por exemplo), a separação dos centavos (ponto, vírgula…) e a separação a cada 3 casas.

Mais informações na página do plugin e parabéns ao Cuducos pela interessante solução 🙂

Caracteres especiais no javascript – use o código Unicode

Alguma vez você teve que no javascript dar um alert de textos em outros idiomas? Com caracteres especiais? Do tipo Vyplňte?

Me deparei com essa situação na semana passada: num site multi-idiomas, apareceu a versão tcheca (sem trocadilhos) das páginas. E um formulário era validado via javascript com alert. Achei que não teria problema: projeto todo setado com UTF-8 como encoding, charset do html também… quando fui dar o alert, todo os caracteres especiais apareceram com aquela famosa interrogração envolta de um ouros preto. Pesquisei um pouco no Google evi algumas soluções.

A que eu adotei – depois de testar todas – foi a de usar o código unicode do caracter. Para isso, só é necessário no javascript escrever barra invertida + u + código unicode.
Por exemplo, o código unicode do cedilha (ç) é 00e7. Então, um alerto do cedilha ficaria:

alert("u00e7");

No caso daquela frase acima, o alerto ficou assim:

alert("Vypl\u0148te")

Pelo que li, dá também para usar o código hexadecimal do caracter; não testei!

Existem tabelas de conversão de caracteres, mas para facilitar tenho usado essa página: http://hamstersoup.com/javascript/regexp_character_class_tester.html

Você coloca o texto e ele converte para unicode (entre outros códigos).

Boas práticas com form

Estou a algum tempo com um post do blog do Cleiver no Read it Later e aproveitei agora que estou aqui no Campus Party matando um tempo (estou finalizando a nova versão do And After aqui, mas não esqueci de postar, né? 🙂 resolvi repassar essa apresentação que tem dicas bem interessantes de "boas maneiras" para formulários, é grande mas vale a pena (em inglês):

 

Não tenho muito a acrescentar as dicas do formulário, apenas que cada caso é um caso e cada usuário é um usuário, bom senso sempre está valendo, né?

Comparação entre a jQuery e a Prototype

Uma das discussões mais recorrentes nos blogs que tratam de programação para web, quando se trata de interface (ou front-end, ou resumindo (x)html+css+javascript) é qual biblioteca javascript é melhor.
Muitas vezes as discussões acabam descambando; parece que pessoas levam para o lado pessoal, ao invés de ver a parte técnica da coisa. E quando se fala de jQuery e Prototype, as coisas ficam mais afloradas ainda.

Aqui no O Desenvolvedor, vocês leitores podem perceber que eu tenho uma predileção pela Prototype (e comecei usando-a 3 anos atrás, quando a jQuery era muito menos poderosa do que é hoje) enquanto o Guilherme tem usado mais a jQuery.

E isso é ótimo: a troca de informações e experiências entre os usuários faz bem, pois vamos elevando nossos conhecimentos.

Me enviaram ontem essa apresentação comparando as duas. Sem fanatismo, sem puxar a sardinha para uma ou para outra. Apenas um comparativo, mostrando quais os beneficios de cada uma. Enjoy!

http://static.slideshare.net/swf/player.swf?doc=prototype-jquery-going-from-one-to-the-other-1193346036472971-5&totalSlides=25&startSlide=1&preview=no&useHttp=1

E se quiserem, dêem a sua contribuição falando qual biblioteca javascript voce utiliza.