Client-side

Chamando a atenção na barra de tarefas

2009-10-12T22:37:35Z

Um aluno está desenvolvendo um chat e me perguntou esses dias como fazer para alertar o usuário da chegada de uma nova mensagem quando a janela do bate-papo estiver em segundo plano. “Como o MSN”, ele disse. Bom, você não faz isso. Se alguém conhecer um truque secreto, por favor nos conte.

O que você pode fazer é mudar o texto do título da janela afim de chamar atenção do usuário. Não é a mesma coisa, mas é o melhor que temos.

Preparei então um pequeno código de exemplo. Arquivo titleRotator.js:

titleRotator={
  chars:['#',' ','%',' '],
  rotating:false,
  position:0,
  rotate:function(){
    if(this.rotating){
      this.position=(this.position+1)%this.chars.length
      this.clear()
      document.title=this.chars[this.position]+' '+document.title
    }
  },
  clear:function(){
    document.title=document.title.replace(/^\W /,'')
  },
  start:function(){
    if(!this.rotating){
      document.title=this.chars[this.position]+' '+document.title
      this.rotating=true
    }
  },
  stop:function(){
    if(this.rotating){
      this.clear()
      this.rotating=false
    }
  },
  toggle:function(){
    this.rotating?this.stop():this.start()
  }
}
setInterval("titleRotator.rotate()",150);

Você pode ver um exemplo disso funcionando aqui. Sugestões de melhoria são muito bem-vindas.

Menos é mais, quanto mais simples melhor

2009-06-23T19:27:00Z

É, este é um dos tópicos do manifesto deste site.

Eu queria na verdade falar sobre 3 deles, mas este tópico tem o foco principal neste post. Parece uma frase simples, mas no desenvolvimento esta frase poderia evitar muitos e muitos problemas.

Numa conversa com um colega de trabalho meu da Agência, o Danilo, percebi que MUITOS plugins existentes para jQuery tem quase o mesmo tamanho ou é maior que a própria biblioteca!!!Na maioria das vezes desnecessariamente.

Isto porque na tentativa de facilitar o uso do código e pensar (ou tentar pensar) em todas as ocasiões possíveis, o desenvolvedor acaba codificando MUITO MAIS do que deveria.

Eu precisei fazer um esquema para fazer upload de múltiplos arquivos e utilizei um plugin para fazê-lo. Acabei precisando fazer uma gambiarra para fazer funcionar, porque não existia uma opção no plugin para o propósito.

Quando fui abrir o código-fonte para tentar estender o plugin, me deparei com um monstro de tantos KB. Fazia de tudo, abria modal, dava piruetas etc.

Trocentas linhas de código para fazer uma coisinha simples: mandar múltiplos arquivos ao submeter o formulário.Eu usei apenas um dos quinhentos métodos daquele plugin, imagina o que foi baixado para a página só para aquele funcionamento mais o jQuery!.

Mais tarde acabei fazendo uma versão minha deste código, apenas usando Javascript, e ainda assim ficou MUITO menor que a versão que utilizava jQuery…absurdo.

Pensando nisso, resolvi fazer uma implementação simples, rápida e estensível de um script antigo que o Elcio fez de máscaras, este aqui, e mostrar a minha forma, de usar os tópicos 2, 4 e 5 do manifesto do ClientSide, para resolver um problema simples, de forma simples, reaproveitando o código e usando um pouco de orientação a objetos em Javascript.

Pensei então em um objeto do tipo JSM, guardando algumas variáveis, sendo uma delas (JSM.add) para estender o objeto com novas máscaras, a outra (JSM.methods) para armazenar todos os métodos de mascaramento existentes no objeto e a outra uma pseudo-classe.

  function
    JSM (form){ return new JSM.Class(form) }  
 
    JSM . add = function(json){
      JSM.methods[json.name] = json.method
    }
    JSM . methods = {}

JSM é uma função, mas é uma função que tem atrelada a ela outras variaveis, e retorna uma instância de uma “classe”, a JSM.Class, passando como parâmetro a string contendo o name do formulário.
A pseudo-classe:

  JSM . Class = function(form){
    //Private:
    var form = document[form]
    //Public:
    this.inputs = {}
    this.form = function(){return form}
    this.test = function(object, mask){
      var fn = JSM.methods[mask]
      setTimeout( function(){
  object.value = fn( object.value )
      },1 )
    }
  }

Assim, sempre que eu pensar em estender a classe, eu vou estender JSM.Class. Ela que vai armazenar o escopo do objeto retornado. É um padrão que eu tenho adotado em alguns projetos meus.

O método add é uma abstração da forma como é estendido o objeto na adição de máscaras novas, o desenvolvedor não precisa pensar em como foi montado o objeto JSM para estendê-lo corretamente, basta utilizar este método auxiliar que abstrai esta complexidade.

Então se eu quisesse estender o objeto com uma máscara nova eu faria:

  JSM.add({
    "name":"telefone",
    "method": function(v){
      //Remove tudo o que não é dígito
      v=v.replace(/\D/g,"") 
 
      //Coloca parênteses em volta dos dois primeiros dígitos
      v=v.replace(/^(\d\d)(\d)/g,"($1) $2") 
 
      //Coloca hífen entre o quarto e o quinto dígitos
      v=v.replace(/(\d{4})(\d)/,"$1-$2")
      return v
    }
  })

O desenvolvedor utilizaria esse método dando um nome e fornecendo um método que pega o valor, trata e retorna o novo valor mascarado, sem se preocupar no funcionamento do objeto.

Adicionado este método já poderia usar na instância do objeto JSM assim:

  JSM("formulario").mask({
    "campoTelefone" : "telefone"
  })

É mais rápido e mais fácil pegar os elementos pelo nome nos formulários, então o parâmetro do JSM é um name, do formulário, “campoTelefone” é o name de um input text deste formulário e telefone é a mascara que queremos utilizar no campo.

O JSM quebra a string da máscara quando esta tem um “|” (pipe), ou seja, na chamada da função você pode adicionar duas ou mais máscaras para o mesmo campo se necessário:

  JSM("formulario").mask({
    "campoTelefone" : "leech|digitos"
  })

- “Você esqueceu de fornecer um método para definir um maxlength!!”
Isto não é a função do objeto, é função do html, portanto, deve estar definido na própria tag! Simplifique.

Não fiz o objeto percorrer o html para achar uma classe conveniente e fazer o mascaramento, porque não é o papel dele, ele deve apenas mascarar, esta é sua função.

Se quiser fazer um microformato para ele, usando uma classe Css para este funcionamento, deve montar uma outra aplicação com este propósito, importando e utilizando o objeto JSM.

Eu queria mostrar, uma maneira simples de solucionar um problema de cada vez, com um objeto encapsulado. É muito fácil desacoplar os métodos adicionados para as máscaras e colocar em arquivos separados e mesmo outros métodos que estendam a classe JSM.Class, importando naquela página apenas os métodos que precisa utilizar, ou então utilizando as partes em uma aplicação terceira que faça outras coisas mais…

Eu uso muito namespaces, modularizando meu projeto. Portanto, se eu quisesse fazer uma extensão da classe com alguma frescura que não necessariamente seja algo de útil, eu faria outro arquivo para importar, usando namespace: Ex: JSM.frescura.js.

Entenderam? Sacaram a parada? Postei o código inteiro, com todas as máscaras que vi do site do Elcio e com suas explicações aqui para quem quiser.

Abraço.

Feature Detecting

2009-02-09T00:44:34Z

E aí povo!?! Feliz 2009 para todos!

O ano passa rápido, só agora que vim postar de novo percebi que postei há quase um ano aqui no ClientSide. Bom, neste post gostaria de comentar mais uma vez sobre algumas técnicas de programação em javascript, levando carona na febre jQuery.

Para mim, o mais interessante dessas bibliotecas é como os desenvolvedores utilizam as mais variadas técnicas para resolver seus problemas. Vocês viram que saiu a versão 1.3 do jQuery?

Uma coisa que me chamou muita atenção nessa nova versão é o uso de uma técnica chamada “Feature Detecting”, que além de aumentar o desempenho ainda aumentou a gama de compatibilidade com os navegadores.

Eu não quero pegar pesado, então vou falar a grosso modo de como funciona essa técnica para que maioria ou todos possam entender.No desenvolvimento com Js, foi e ainda é muito comum o uso de browser sniffing, que é a detecção de qual navegador o usuário está usando para poder usar determinado script. Como este código.

O grande problema do uso desta técnica é que ela limita o número de browsers compatíveis com a sua aplicação, excluindo outros browsers que não entram na detecção.

Outro problema é que a cada trecho do código é necessário executar uma verificação para descobrir qual browser está sendo usado e o tamanho do código aumenta generosamente conforme a necessidade de acrescentar um novo browser compatível.

Há outras desvantagens, mas neste post não caberiam todas elas.Eu usava feature detecting mesmo sem saber que tinha este nome, meio sem querer, confesso que usava por pura preguiça, porque eu odiava aquela história de navigator.appName.

Terrível isso. A solução que eu usava e compartilho com vocês foi essa:

function feature( support ){
  for ( var x in support )
    feature[x] = support[x]
}

Eu renomeei as funções para fazer sentido à este post, usava outros nomes. A idéia é usar um objeto feature com as funcionalidades que desejo e usar uma função support, para definir quais delas existirão.

Já tentaram pegar o estilo de um elemento que foi definido apenas no Css? Assim:

1	alert( document.getElementById("caixa").style.height )

O retorno seria vazio, o Js só conseguiria retornar o valor se este fosse antes definido pelo Js ou se usasse style inline (credo…).

Para pegar o estilo do elemento definido apenas pelo Css, nos browsers comuns usamos : document.defaultView.getComputedStyle

Porém no iE, se usa: document.getElementById(”caixa”).currentStyle

Agora, utilizando as funções anteriores, o feature detecting ficaria:

function support(){
  var support = {}
  // Style:
  try{
    document.defaultView.getComputedStyle
    support["computedStyle"] = function(el, att){
      return document.defaultView.getComputedStyle(el, null).getPropertyValue(att) }
    }
    catch(e){ support[“computedStyle”] = function() {return null} }
  return support
}

Este código não verifica qual navegador o usuário está usando, porque aqui não interessa.

O script vai testar se o navegador possui a propriedade, se possuir, constrói um objeto support[“computedStyle”] , que é uma função que retorna o estilo do objeto HTML. Definindo esta propriedade no support, eu teria meus objetos features da seguinte forma:

feature( support() )
// …. Códigos e mais códigos
alert( feature.computedStyle ) // Mostraria o corpo da função computedStyle.

O instinto nos levaria a colocar a função que contém a propriedade currentStyle no catch e fim. Mas aí estaríamos assumindo que todos os navegadores usam a propriedade do document.defaultView e os que não usam são os iE´s da vida. Mas não é a melhor forma de pensar.

A melhor forma de fazer isso seria aninhar mais um teste verificando se o navegador possui a propriedade currentStyle, e retornar uma função conveniente. Há um sério problema nesse caso, não é possível testar o currentStyle, porque ele pertence à um objeto HTML, que não sabemos qual vai ser até a função ser chamada.

Ele tem a forma : elemento.currentStyle.height. O support definiria todas as funções antes mesmo do documento estar pronto, não daria para testar um elemento, sem saber qual elemento é.

Outro instinto ( assassino) seria testar um activeXObject para saber se é um iE ou ainda testar pelo navigator.appName se é um iE6. Isso seria completamente o oposto do que a filosofia do feature detecting prega. Estaria retornando às técnicas de browser sniffing.

A solução que eu encontrei foi essa:

function feature( support ){
  for ( var x in support )
    feature[x] = support[x]
}  
 
function support(){
  var support = {}
  // Style:
  try{
    document.defaultView.getComputedStyle
    support["computedStyle"] = function(el, att){
      return document.defaultView.getComputedStyle(el, null).getPropertyValue(att) }
    }
    catch(e){
      support["computedStyle"] = function(el, att){
        var ieComputedStyle = function(el, att){
          if( att == "opacity" &amp;&amp; el.filters )
            return parseFloat(support["computedStyle"](el, "filter").replace(/\D/gi, '')/100)
          return el.currentStyle[att]
        }
          if(el.currentStyle){
            feature["computedStyle"] = ieComputedStyle
            return ieComputedStyle(el, att)
          }
        return feature["computedStyle"] = function(){ return null }
      }
    }
}    
 
feature( support() )
alert( feature.computedStyle )

No catch a função computedStyle testa se o elemento passado como argumento possui uma propriedade currentStyle. Se possuir, o objeto feature.computedStyle é alterado e passa a ser uma função que retorna o currentStyle do elemento. Essa função também teria de tratar o atributo “opacity” , porque se for um iE que estiver executando e este iE não tiver opacity, mas um filter, ele vai funcionar da mesma forma.

Neste ponto ela é recursiva, porque chama ela mesma para retornar a propriedade filter. Para os navegadores que implementam o document.defaultView.getComputedStyle o método computedStyle do feature vai ser implementado logo no load do código. Já os outros, o método seria definido apenas após a sua primeira chamada.

É fácil de enxergar isso fazendo:

feature( support() )
var obj = document.getElementById("box")
alert( feature.computedStyle ) // Mostra função de teste
alert( feature.computedStyle ( obj, "height" ) ) // Chama a função de teste e define o método novo para feature.computedStyle e retornando o valor do height.
alert( feature.computedStyle ) // Mostra o método final

Não seria mais necessário haver testes, cada navegador implementaria a sua função. Entenderam a idéia mais ou menos?

Então, esse trecho acima deve funcionar no Opera, Chrome, FF2, FF3, IE6, iE7 sem que fosse necessário qualquer detecção de browser, em nenhum momento especifiquei no código que navegador deve funcionar em cada trecho.

Para os que quiserem uma literatura mais refinada sobre esse assunto, sugiro este link:

http://docs.jquery.com/Utilities/jQuery.support.

Lá possui 3 links sobre feature detecting, usei um deles no primeiro exemplo. Tem um ótimo exemplo para um método clipBoardData. Eu também deixei um trecho com mais “features”, XML, Ajax e opacity para ajudar a entender a lógica que usei.

Para quem estiver interessado, está aqui :

http://edu.110mb.com/demonstracao/feature.detecting.js.

Um abraço a todos

Valeu!

Validar extensões de arquivos com javascript

2009-01-05T21:11:01Z

A função que desenvolvi tem com objetivo facilitar a vida de quem for validar extensões de arquivos com javascript antes de enviar ao servidor.

Seu uso é fácil já que ela só retorna um valor, sendo este true ou false.
Aceita varias extensões para um mesmo campo
Pode ser aplicada a vários campos usando um array de uma TagName ou ClassName
Usa uma expressão regular para validar a extensão
Pode ser usada no onblur do campo

Codigo da função

function LexExt(dom,ext){
  var campo=dom.value;
  var exts=ext.split(',');
  if(ext.length>=1){
    for(i=0;i<exts.length;i++){
      var reg=new RegExp("."+exts[i]+"$");
      if(campo.match(reg)==null){
        if(i==exts.length-1){
          return false;
        }
      }else{
        return true;
      }
    }
  }
}

Chamando a função

O primeiro parâmetro é o campo que receberá a validação
O segundo parâmetro são as extensões (sem o ponto)
Ex: LexExt($(’my’),’jpg,gif,png,html,css,js’);

Exemplos práticos

// usando pelo id do campo
LexExt(document.getElementById(‘my’),’doc,docx’);
 
// usando atraves de um array
var dom = document.getElementsByClassName(‘file’);
for(var i=0;i<dom.length;i++){
LexExt(dom[i],’jpg,gif’);
}

Cidades e Estados em Javascript

2008-10-06T18:22:58Z

Meu amigo DGMike publicou:

Cidades e Estados em Javascript: Uma das dúvidas mais comuns para quem está começando ajax é criar uma função que chame os estados e cidades nacionais. Sempre tenho que explicar uma serie de coisas como objeto httpRequest ou mesmo um mínimo de jQuery.
Pensando nos programadores do Brasil, desenvolvi este script de selects de estado e cidades do Brasil. Pensando nisso, resolvi escrever uma biblioteca que resolva este problema, além de estar disponível em uma única URL (hospedado no google) no qual qualquer um pode utilizar. Assim, o usuário guarda em cache apenas um arquivo, e se o usuário passar em um site que chama a biblioteca, no próximo site que ele entrar e usar a biblioteca de novo, carregará o arquivo em cache e não precisará fazer o download de novo.

Idéia muito boa. Vou passar a usar em meus formulários.

Bug em textos com negrito carregados via ajax no IE7

2008-05-27T20:05:11Z

Palavra do Editor: nosso amigo Leandro publicou esse artigo relatando um bug, sem solução (a solução dele é “não use”.) Se você conhece uma solução melhor, por favor, escreva um comentário ou um novo artigo em resposta a esse.

O problema

Estava lá eu, todo pimpão e alegre em casa, fazendo minhas requisições em ajax funcionar em um projeto que ando trabalhando e quando decido testar em outros navegadores, tal como o nosso excelentíssimo Internet Explorer 7 eu percebo: “Olha mãe! A requisição funcionou beleza no ie7″. Sim, funcionou sim com um pequeno inconveniente: parte do conteúdo carregado “on-the-fly” pela requisição ‘ajax’ veio meio distorcida (print screen com o trecho bugado) e eu então percebi que essas distorções (que na verdade são problemas de anti-aliasing desabilitado no ie7 ou algo do gênero) seguem um padrão para que elas aconteçam: qualquer texto que esteja em negrito carregado pela requisição ajax sofrerá desse problema.

Causas

Processar algoritmos de anti-aliasing (anti serrilhamento) deve ser um processo diferente para textos em negrito e talvez o pessoal do desenvolvimento da MS esqueceram de mandar processar esses algoritmos para textos em negritos carregados via ajax e ninguém avisou eles! Coitadinhos!
Ou simplesmente o algoritmo não funciona nesses casos de requisição via ajax. Afinal, who cares!

Solução

Para falar a verdade o porque disso acontecer não é muito importante. O importante é que eu aparentemente não achei solução para esse problema e a melhor dica que dou para contornar isso é: evite usar textos em negritos dentro de pedaços de html oriundas de requisições em ajax no ie7. Existem N maneiras de se fazer isso e a mais simples delas, IMO, é modificar os seletores CSS de modo que não tenham valores que os negritem (no caso font-weight:700; ou font-weight:bold; são exemplos de propriedade/valor que negritam o texto) somente no Internet Explorer 7.

Uma das formas de se fazer isso é fazer um seletor para tais texto parecido com esse (CSS):
.no-ie7-bold {font-weight:700 !important;font-weight:normal;}

Aí toda vez que você tiver textos que precisem ser negritados oriundos de requisições em ajax use uma classe semelhante a essa acima nos devidos elementos. Ela fará com que o texto não seja negritado apenas no IE7 (minto, no IE6 também não será e talvez nos seus ancestrais idem). Mas acredito eu que existam hacks de seletores que apenas o IE7 entenda. Sinta-se livre para melhorar a receita do bolo. Meu papel aqui é basicamente reportar esse bug nefasto do IE7.

Upload Assíncrono de Arquivos com Mootools

2008-05-25T21:49:27Z

Por questões de segurança, os navegadores não permitem que o JavaScript acesse o sistema de arquivos do cliente, inviabilizando o upload via ajax no ambiente web. Assim, temos que criar alternativas para o upload assíncrono. Vários já criaram soluções para o problema, mas a maioria como funções autônomas. Como sou fã da Mootools, decidi criar a minha solução, e vou aproveitar para explicá-la aqui.

A Lógica

A lógica para essa “gambiarra” não é nova, já existe desde que o HTML é HTML. Existe o atributo target da tag form. Através dele, podemos escolher em que janela queremos que seja feita a submissão. Então a página não recarregará, e o resultado do formulário será carregado em outra janela.

Aí surge o primeiro porém: não queremos abrir uma nova janela (pop-ups são chatos, não concorda?)! Lembro que, nas minhas primeiras experiências com HTML e frames, podíamos fazer com que links abrissem em determinado frame através do mesmo atributo. Mas como também não queremos frames, vamos utilizar um irmão mais novo: o iframe.

Simplificando, a idéia é enviar o formulário para um iframe invisível, e recuperar a resposta quando este tiver terminado de carregar.

Preparando o Script

Desde o começo, pensei em fazer o script bem integrado à Mootools, como se fosse um plugin. Para isso, usei o mesmo processo utilizado para todas as funcionalidades relacionadas ao HTML: estendi a classe Element com um método upload:

Element.extend({
  "upload": function(options) {
    if(this.getTag() != "form") return false
  }
})

Também incluí uma pequena verificação na linha 3: se não for um formulário, não devemos submeter!

Criando o IFrame

Como não devemos deixar um iframe perdido pelo documento, vamos criá-lo pelo JavaScript também. Seguindo o código:

var iFrame = new Element("iframe", {
  "id": "fileUpload",
  "name": "fileUpload",
  "styles": { "display": "none" }
})
this.adopt(iFrame)
window.frames["fileUpload"].name = "fileUpload" // IE... Sempre ele...

Para criá-lo, utilizei a classe Element, nativa da Mootools. Em uma chamada, já defini todos os atributos necessários. Primeiro, precisamos de um ID para localizarmos o iframe quando for necessário. O nome serve para o iframe ser identificado no target. O estilo só serve pra esconder o iframe.

Logo abaixo, fiz com que o formulário “adotasse” o iframe. Ele precisa estar em algum lugar para funcionar… Ah, e a correção made-for-IE, não esqueça dela!

Agora, precisamos saber quando o iframe carregou, para podermos disparar um callback com o retorno da requisição. Para isso, usamos o método addEvent, também da Mootools. No “load” do iframe, disparamos uma função onComplete, definida no parâmetro lá na definição da função.

iFrame.addEvent("load", function() {
  iFrame.removeEvent("load", arguments.callee) // removemos o evento, para que ele não dispare novamente
  if($type(options.onComplete) == "function")
    options.onComplete(iFrame.contentDocument.body.innerHTML)
  iFrame.remove.delay(20, iFrame)
})

Note que usei a propriedade contentDocument para recuperar a resposta da requisição. Com a “Same Origin Policy” (Política de Mesma Origem), só conseguimos recuperar a resposta de requisições feitas dentro do mesmo domínio. Existem maneiras de se driblar isso, mas o script se tornaria muito menos versátil, pois não consegui uma forma de executar funções com a resposta.

Executado o papel do nosso iframe, não precisamos mais dele populando nosso HTML, mas não podemos removê-lo imediatamente, pois assim causaríamos um “loading” que não terminaria. Então “atrasei” a função em alguns milissegundos, evitando esse probleminha.

Adaptando o Formulário

Se estamos criando um script para isso, você não quer ir lá e definir todos os atributos manualmente, quer? Então fiz com que o próprio script cuidasse disso. Apenas defini o target, o encoding e o método do formulário (só por segurança, caso ele não tenha sidio definido):

this.setProperties({
  "target": "fileUpload",
  "enctype": "multipart/form-data",
  "encoding": "multipart/form-data",
  "method": "post"
})
return this

Código Completo

Juntando tudo isso, temos o código abaixo:

Element.extend({
  "upload": function(options) {
    if(this.getTag() != "form") return false
    var iFrame = new Element("iframe", {
      "id": "fileUpload",
      "name": "fileUpload",
      "styles": { "display": "none" }
    })
    this.adopt(iFrame)
    window.frames["fileUpload"].name = "fileUpload"
    iFrame.addEvent("load", function() {
      iFrame.removeEvent("load", arguments.callee)
      if($type(options.onComplete) == "function")
        options.onComplete(iFrame.contentDocument.body.innerHTML)
      iFrame.remove.delay(20, iFrame)
    })
    this.setProperties({
      "target": "fileUpload",
      "enctype": "multipart/form-data",
      "encoding": "multipart/form-data",
      "method": "post"
    })
    return this
  }
})

Utilização

Para utilizar o código, é ainda mais simples. Basta definir, no onSubmit do formulário, nossa função:

$(window).addEvent("load", function() { // primeiro esperamos a janela carregar
  $("form").addEvent("submit", function() {
    this.upload({"onComplete": function(response) { alert(response) } })
  })
})

Se quiser ver um exemplo funcionando ou fazer download do script, veja Async Upload - Upload Assíncrono de Arquivos. E espero que eu tenha conseguido mostrar que há vida além de jQuery… Até mais!

Mais importante que saber, é saber O QUE procurar.

2008-02-06T14:05:39Z

Olá, achei muito interessante a idéia desse blog e me cadastrei porque queria dar alguma contribuição. Estou aqui pra falar sobre técnicas de programação em Javascript, já que eu gosto mais da parte algorítmica da coisa. Não sou fã de frameworks e ainda que eu use para facilitar e agilizar meu trabalho não é minha paixão.

Eu precisava de uma função que pegasse elementos pela classe e vi várias implementações de “getElementsByClassName”, mas queria aprender como fazer e fazer da minha forma.

Pensei, pensei, pensei, testei, testei, pensei…NADA! Tinha muito erro de lógica, cada vez que eu consertava criava um problema novo. Precisava procurar um algoritmo que resolvesse esse problema, pra isso tive que aprender um conceito novo (para mim) uma estrutura de dados chamada Árvores.
Afinal de contas a estrutura do HTML não é a de uma árvore?

Aprendi no Wikipédia o algoritmo, peguei o primeiro código recursivo que tinha em “C” lá e implementei em Javascript. Vergonhoso, a solução tinha 7 linhas. Ok, mas a recursão para funcionar empilha os dados, sabendo disso era só implementar uma Pilha (isso eu sabia o que era) para fazer a versão iterativa da travessia da árvore em pré-ordem (filhos são processados após o pai):

function getEBA(no, classe){
  var retorno=[]
  var pilha=[]
  pilha[pilha.length]=no
 
  //Enquanto a pilha contiver elementos...
  while(pilha.length &gt; 0){
 
    // Guardo o primeiro elemento da pilha em "no"
    no=pilha[pilha.length-1]
 
      // Se o nodo tiver classe e for a que eu procuro,
      // empilho o elemento no array de retorno.
      if(typeof no.className!=”undefined” &amp;&amp; no.className==classe)
      retorno[retorno.length]=no
 
    // Desempilho o nó atual da pilha.
    pilha.pop()
 
      // Se o nó atual tiver filhos, empilho os filhos na pilha[]
      if(no.childNodes)
        for(var x in no.childNodes)
        pilha[pilha.length]=no.childNodes[x]
    }
 
  return retorno
}

Mas o algoritmo tinha limitações como os outros que tinha visto. Eu não poderia escolher uma condição… a função só funcionaria para classes. E se eu quisesse usar um dia a função para pegar elementos pelo atributo “type” ou “language” ou qualquer outro? A função precisaria ser mais genérica. Outro problema.

Solução? Usar um pouquinho de Programação Funcional:

      // Se o nodo tiver classe e for a que eu procuro,
      // empilho o elemento no array de retorno.
      if(fn(no))  // A condição é definida pela função.
      retorno[retorno.length]=no

A condição então não é mais fixa, ela é definida por uma outra função passada como argumento na função principal e esse não será mais “classe” e sim “fn”.

Então, se quisesse pegar os elementos do div “divPai” que tenham apenas uma classe chamada “h-card”:

var classes=getEBA(
  document.getElementById("divPai"),
    function(obj){
      return(
      typeof obj.className!="undefined" &amp;&amp;
      obj.className=="h-card"
      )
    }
)

Agora sim. Nesta minha “busca algorítimica” implementei 4 conceitos muito interessantes que não havia dado muita atenção: Pilhas, Árvores, Programação Funcional e até Expressões Regulares.

Expressões Regulares? Sim, se eu quisesse pegar elementos que tenham “ieHOVER” sendo que esses elementos poderiam ter mais de uma classe:

var ieHover=getEBA(
  document.getElementById("divPai"),
    function(obj){
      return(
      typeof obj.className!="undefined" &amp;&amp;
      obj.className.match(/ieHOVER/)
      )
    }
)

Não chamo de “getElementsByClassName”, chamo de “getElementsByAnything”, o getEBA =). Se for interessante para você, pode executar a tarefa nos nodos usando a função passada como argumento ao invés de fazer isso percorrendo o array retornado, que agora é uma mera opção. =P

Mas minha intenção não era o código em si mas mostrar alguns dos obstáculos inevitáveis que surgem durante o processo de desenvolvimento e como contorná-los diminuindo drásticamente sua dificuldade.

É importante conhecer as diversas técnicas de programação e mais importante que conhecê-las é saber identificar a natureza do seu problema para só então procurar a solução e botar a mão na massa. Já pensaram nas coisas complicadas, para que perder tempo pensando do zero tudo de novo???

Bom, é isso… desculpem ficou longo o post, to engatinhando ainda e é meu primeiro post em blog (se for aceito).

Comentem, sugestões e críticas construtivas são bem-vindas. Você tem uma idéia melhor? Me ensina!

Ah…a frase do título foi inspirada numa citação de Albert Einstein.

Abraços e ótimo 2008 para todos.

Colocando um mapa dentro do site com JQuery e JMap2

2008-01-24T10:52:39Z

Publiquei esse texto no meu blog e, como está dentro do tema do Client-side, resolvi tentar minha sorte em ser publicado aqui.

Li sobre JQuery pela primeira vez neste blog. Então quando fui iniciar um novo projeto, resolvi testá-lo. É realmente impressionante o que se consegue fazer com ele. Mostra que programar pode ser divertido e simples.

Há, ainda, a possibilidade de usar plugins para complementar as funcionalidades dele. O que é ótimo, o limite do que você consegue fazer é a sua imaginação.

Infelizmente um problema em boa parte dos plugins é a documentação escassa. Tenho penado lendo comentários deixados dentro do código, e muitas vezes tendo que descobrir como usá-lo lendo o fonte. Talvez seja só azar, justamente nos plugins que usei isso acontece. O próprio JQuery é bem documentado, por exemplo. Saberei melhor no futuro.

No intuito de colaborar com os desenvolvedores e os interessados, eis um tutorial de como inserir um mapa do Google Maps no seu site (é o primeiro tutorial que faço, então o feedback será muito bem vindo. Com o tempo eu pego o jeito ):

O efeito final é esse.

Antes de começar é preciso criar uma chave para a API do Google Maps. Não é necessário cadastro, basta colocar a url do site no qual ela será usada nessa página. Ela serve para todo o domínio, inclusive subpastas. Se você tentar usar uma chave que não foi feita para o seu domínio ela não funcionará.
Scripts necessários: são dois, o JQuery e o JMap2.

O html: é preciso que o navegador esteja com o javascript habilitado para que o Google Maps funcione, então o html do exemplo é apenas a tag body:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="author" content="Leandro Facchinetti" />
<script type="text/javascript" src="jquery-1.2.2.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=sua_chave"></script>
<script type="text/javascript" src="jquery.jmap2.js"></script>
<script type="text/javascript">
<!--
//o código virá aqui
-->
</script>
<title>Exemplo de colocação de mapas dentro do site com JQuery e JMap2</title>
</head>
<body>
</body>
</html>

Atente para as importações de scripts. São três, o JQuery, a API do Google Maps e o JMap2. Lembre-se de mudar para a sua chave da API, onde diz “sua_chave” no código.

Na parte onde está escrito “//o código virá aqui” é que escreveremos nosso código. Logicamente é preferível que você faça isso num documento externo e o importe, estou fazendo assim para simplificar.

O código a ser inserido é este, veja os comentários para entendê-lo:

$(function (){//sintaxe do JQuery para a função ser executada quando o DOM estiver pronto
$("body").append("&lt;a href=\"\"&gt;Clique aqui para ver no mapa&lt;/a&gt;").children("a").click(function (){//aqui é colocado o link, não faria sentido colocá-lo no html porque quem não tivesse javascript ficaria com um link vazio. Após a colocação do link é associada uma função a ser executada quando ele é clicado
$(this).after("&lt;div id=\"mapa\" style=\"width:450px; height:320px; display:none; background-color:#e5e3df; \"").parent().children("div#mapa").slideDown("slow", function (){//é inserida uma div na qual irá o mapa. Atente para a colocação de atributos width e height, o mapa será do tamanho que você setar aqui. Depois da colocação vem a função do efeito que faz a div aparecer deslizando. Lógico que isso é opcional, fiz assim porque é mais estético
$(this).jmap({//aqui é acolocação do mapa em si, dentro dessa função vai um objeto com as opções, não listarei todas, só as que julgo serem mais importantes
mapCenter: [-27.608000, -48.53770],//as coordenadas da onde o mapa será aberto. Para descobrí-las entre no Google Maps, ache a região que lhe interessa e clique em "Criar link para esta página", observe a url gerada, procure por duas sequência de número logo no início, são elas que você deve colocar aqui
mapZoom: 17,//nível de zoom do mapa quando aberto
mapShowOverview: false,//mostrar pequeno mapa da região no canto inferior direito
mapShowType: false//mostrar o tipo de mapa: mapa, satélite, terreno
}).addMarker({//adicionar aquele marcador vermelho
pointLat: -27.608450,//as coordenadas de onde o marcador deve ser criado
pointLng: -48.53770,
pointHTML: "&lt;h3&gt;Paralelo 22&lt;/h3&gt;&lt;p&gt;Praça Abdon Batista&lt;br /&gt;Saco dos Limões - Florianópolis - SC&lt;/p&gt;",//html a ser exibido no balão do marcador, é possível manipular a formatação desse html pelo css da página. Incrível, não?        openHTMLEvent: "mouseover"//evento que dispara a abertura do marcador
})
})
return false;//impedir a ação padrão do link
})
})

Pronto, não é fantástico o que pode ser feito com tão pouco código?

As sete regras do javascript não obstrutivo.

2008-01-15T13:41:33Z

Estava pondo em dia as leituras que ficaram pendentes no Google Reader desde o ano passado e encontrei, no 456 Berea Street, o link para este artigo do Christian Heilmann:

The seven rules of Unobtrusive JavaScript

Um resumo:

Não assuma nada: não espera que o javascript esteja sempre ligado, não espera que o markup desejado estará lá;
Encontre seus ganchos e relacionamentos: examine o HTML com o qual você vai trabalhar para encontrar a melhora maneira de fazer seu script interagir com o markup;
Deixe a travessia para os experts: Quando possível, deixe o CSS cuidar de encontrar o elemento que você quer mudar;
Entenda os navegadores e usuários: não se desvie muito da maneira como os navegadores funcionam e da maneira como os usuários esperam que eles funcionem;
Entenda eventos: aprenda como o tratamento de eventos ajuda você a separar seu javascript de seu HTML;
Jogue bem com os outros: Assegure-se de que seu script não interefere em outros, e faça com que seja difícil que outros scripts interfiram no seu;
Trabalhe para o próximo desenvolvedor: Torne a manutenção fácil escrevendo código lógico com nomes de função e variáveis claros, e comentando quando necessário.

Fantástico. Alguém arrisca uma tradução do artigo inteiro?