Este plugin se propõe a ser um substituto ao método nativo scrollIntoView. A idéia é fazer o mesmo – rolar a página até que o elemento que evocou o método esteja visível – mas de forma suave – rolando a página, literalmente. Diferentemente do método nativo, esse script irá alinhar o elemento (primeiro do set de elementos encontrados) no centro da janela por padrão. Uma desvantagem é que não podemos alinhar em baixo como o método nativo permite, mas há algumas vantagens adicionais. Aqui podemos centralizar o elemento na página ou em cima, definir o tempo de rolagem e executar uma função callback opcional ao final da rolagem.

$(‘.target’).scrollIntoView()

vai executar a rolagem segundo o objeto de configuração padrão (veja abaixo)

$(‘.target’).scrollIntoView( duration, [ callback ] )

vai executar a rolagem para o centro em duration milisegundos, executando a função callback (opcional) ao final da rolagem

$(‘.target’).scrollIntoView( options )

options é um objeto contendo itens de configuração suportados (veja abaixo)

O objeto de configuração e seus valores padrão

var options = {
‘duration’: 1000, // duração da rolagem (milisegundos)
‘forceTop’: false, // true para alinhar no topo
‘forceLeft’: false, // true para alinhar à esquerda
‘marginTop’: 10, // margem para alinhamento no topo
‘marginLeft’: 10, // margem para alinhamento à esquerda
‘complete’: null, // função para ser executada no final da rolagem (use this para se referir ao elemento DOM)
‘easing’: ‘swing’ // efeito usado em .animate() (linear|swing)
};

Exemplos de uso

Substituindo âncoras (links para a mesma página)
Rolagem vertical e horizontal

Caso o seu interpretador não reconheça a codificação, você poderá ver algo como “” no início de arquivos em utf8 – na verdade antes do início do arquivo, o que faz com que esse código só seja visível em caso de erro – normalmente ele só será visível num editor hexadecimal.

Mas qual é o problema? O  meu problema foi em PHP, usando include para adicionar um conteúdo em UTF-8. A questão é que, se tivermos incluído um arquivo em UTF-8 (com o BOM) antes de usar funções como header(), veremos aquele conhecido erro que diz que uma função que manipula os cabeçalhos HTTP (header e outras) não pôde ser executada porque a saída já havia iniciado, portanto os cabeçalhos já haviam sido enviados. Mas você não mandou imprimir nada!

Bem, aí temos que lembrar que o PHP não é um interpretador de arquivos de texto, portanto o BOM no início do arquivo é apenas algo que está fora do escopo da TAG <?php ... ?>. Se temos um arquivo assim:

<?php $something = 'anything'; ?>
<?php print_to_file($something); ?>

Esse arquivo não imprime nada, certo? Errado, ele imprime (implicitamente) uma quebra de linha que está entre ?> e <?php – porque tudo o que estiver fora do escopo das tags PHP é HTML, que é enviado imediatamente para o browser. Isso é o mesmo que imprimir com print ou echo ou outra. Ok, então corrigi o arquivo e agora ele está assim:

<?php $something = 'anything';
print_to_file($something); ?>

Perfeito. Então salvo em UTF-8 e… erro! por que? veja como ficou o arquivo para o PHP:

<?php $something = 'anything';
print_to_file($something); ?>

A solução é remover o BOM e, provavelmente, isso não fará a menor diferença – pra mim não fez nenhuma. Mas como remover o BOM? Pensei, se dá pra ver num editor hexadecimal, dá pra deletar… baixei e instalei o PsPad (um editor excelente para programadores) mas não pude remover o danado, não dá (ou eu não soube).
Bem, achei um script em Perl que fazia isso e com base nele, fiz um em PHP que funcionou perfeitamente aqui. Pode ser que seja útil para você.

<?php
// substitua pelo caminho para o arquivo que deseja limpar
$file = "C:/wamp/www/wordpress/wp-content/themes/basic-gray/lib/langs.php";
print removeUTF8BOM($file) ? 'BOM removido!' : 'Não havia BOM a ser removido...';

function removeUTF8BOM($fil) {
$newcontent = '';
$first = false;
$fh = fopen($fil, 'r');
  while($part = fread($fh, 1024)) {
    if(!$first) {
      if(preg_match('/^\xEF\xBB\xBF/', $part)) {
      $newcontent = preg_replace('/^\xEF\xBB\xBF/', "", $part);
      } else {
      fclose($fh);
      return false;
      }
    $first = true;
    } else $newcontent .= $part;
  }
fclose($fh);
$fh = fopen($fil, 'w');
fwrite($fh, $newcontent);
fclose($fh);
return true;
}
?>

Achei então um script da família Google, o konami.js, que oferece suporte também para iPhone e adiciona um [Enter] no fim do famoso código antes de executar a função (como em alguns games). Mas qual seria a graça em usar um script pronto? (nenhuma, claro! ) O caso é que escrevi o meu próprio script… Não tem contagem de tempo entre as teclas digitadas, apenas identifica a sequência correta e chama a função konamiFunction, se existir. Funciona direitinho.

Maneiro! Aí fui comentar (empolgado) com meu amigo Guga e ele perguntou: legal, mas pra que serve isso? A pergunta pegou na veia. “Não sei, pra brincar…”, respondi. E fiquei pensando naquilo – que ainda não tinha passado pela minha cabeça…

Claro, serve para brincar com o seu visitante. É, mas é mais que isso. Navegando descobri que o Konami Code é um verdadeiro símbolo para uma geração (ou mais) de aficcionados em games. Natualmente, descobrir que o site que você visita tem alguma surpresa para quem digita o código que funcionava nos games que você jogava é um fator de identificação forte com esse usuário. E tenha certeza: esse é um hard-user, que pode ser um conhecedor de informática ou alguém influente no meio internautico. Especulação, óbvio, mas as probabilidades realmente são altas.

Outra é que, para todos que já se divertiram com games, vem a sensação de ter encontrado uma “área secreta” do site, algo que estava ali só para aqueles que conhecem o código. Um bônus!

Mas, no fundo, ter o Konami Code ativado no seu site significa dizer: nós também conhecemos o código!

Segue o script. Basta incluir este código e criar uma função com o nome “konamiFunction”. Ela será executada quando o código for digitado.

var konami = "38384040373937396665", dkonami = "";
function konamiCode(e) {
var k = String(document.layers ? e.which : document.all ? event.keyCode : document.getElementById ? e.keyCode : "");
  if(k && konami.indexOf(dkonami+k) == 0) dkonami += k;
	else dkonami = "";
	if(dkonami == konami) {
	  if(typeof konamiFunction == "function") konamiFunction();
	dkonami = "";
	}
}
document.onkeydown = konamiCode;

Invente algo interessante e… Konami Code neles!

Pois é, essa era uma questão incômoda para mim até algum tempo atrás. É impossível! inputs com type=file não aceitam quase nenhuma regra CSS e, a não ser que estejamos trabalhando com formulários sem formatação, ficam sempre destoando, “quebrando” o layout do formulário.

Então, na busca de soluções possíveis, encontrei algumas baseadas nessa lógica, que pareceu ser a única viável e que consiste em tornar o input invisível com a propriedade opacity e e então colocá-lo por cima de uma imagem, que deve simular o elemento. Bacana, mas como cada browser renderiza o input de um jeito diferente (tamanhos do campo de texto e do botão), dificilmente a nossa imagem correspoderia ao tamanho do botão, o que provocaria confusões quanto ao local do clique.

Pensei então em acrescentar alguns detalhes que fizessem o input se adaptar à imagem ao invés de tentar fazer uma imagem que casasse com as proporções do input (que são variáveis). A idéia era fazer com que o botão do input ficasse num tamanho que cubrisse totalmente a imagem, mas dando um jeito de esconder a parte do input que excedeu a imagem.

Primeiro problema: posso definir altura e largura, mas como o texto no botão é sempre igual (Procurar…) eu conseguia apenas uma mudança disso:

Para isso:

Se temos uma imagem maior como esta:

certamente parte dela ficará insensível ao clique, pois a largura do botão continua a mesma – e só ele é sensível ao clique. Então, para mudar a largura do botão, podemos aumentar o tamanho da fonte! Ok, mas para que tamanho? um tamanho fixo não parecia muito legal… cheguei então à uma proporção que se mostrou correta nos meus testes: (largura da imagem / 5).

E ao aumentar o tamanho da fonte, consigo algo assim:

Isso aumenta a largura do botão. Ok, agora precisamos colocar o input sobre a imagem, mas alinhado à direita para tirar a parte texto do input file de cima da nossa imagem. Aí resolvi criar uma função Javascript para fazer todo o necessário de uma vez. A lógica que usei foi a seguinte:

• Leio o tamanho da imagem
• Crio um DIV exatamente do mesmo tamanho e com style=”position:relative; overlow:hidden;”
• Insiro o DIV imediatamente antes da imagem
• Coloco a imagem dentro do DIV
• Calculo o tamanho da fonte para que a largura do botão cubra a imagem (FS = width/5 ( +/-… ))
• Defino a propriedade style do input para “position:absolute; top:0; right:0; opacity:0; font-size:FSpx”
• Coloco o input dentro do DIV

Bem, a função fakeFile recebe 3 parâmetros, sendo 2 obrigatórios: a imagem e o input file (como DOM objects) e um terceiro opcional que recebe um input file para receber o caminho para o arquivo a cada mudança no input file original. As funções addEvent e $ são utilizadas por fakeFile, por isso foram também incluídas

function fakeFile(image, input, pathfield) {
var w = image.offsetWidth, h = image.offsetHeight,
    s = parseInt(w/4.2), wrapper = document.createElement('div');
wrapper.style.cssText = "position:relative; width:"+w+"px; height:"+h+"px; overflow:hidden; z-index:100;";
input.style.cssText = "position:absolute; height:"+h+"px; top:0; right:0; font-size:"+s+"px; "+
                      "filter:alpha(opacity=0); opacity:0; z-index:101;";
  if(pathfield)
    addEvent(input, 'change', new Function('$("'+pathfield.id+'").value = $("'+input.id+'").value;'));
image.parentNode.insertBefore(wrapper, image);
wrapper.appendChild(image);
wrapper.appendChild(input);
return wrapper;
}

function $(id) { return typeof(id) == 'object' ? id : (document.getElementById(id) || null); }

function addEvent(obj, evType, fn){
 if(obj.addEventListener) obj.addEventListener(evType, fn, false);
 else if(obj.attachEvent) obj.attachEvent("on"+evType, fn);
}

Veja aqui uma página de exemplo.

A idéia é que a função recebe como parâmetros o elemento input e a mensagem a ser exibida quando não houver outro texto digitado e aplica isso ao input. Lá vai a função:
 

function msgIfEmpty(el, msg) {
var hasval = /\w/.test(el.value);
  if(!hasval) {
  el.value = msg;
  addClass(el, 'disabled');
  }
el.defaultValue = msg;
  el.onfocus = function() {
    if(this.value == this.defaultValue) {
    this.value = '';
    removeClass(this, 'disabled');
    }
  };
  el.onblur = function() {
    if(/^\s*$/.test(this.value)) {
    this.value = this.defaultValue;
    addClass(this, 'disabled');
    }
  };
}

Começamos aplicando a mensagem como valor default do input (e como valor do atributo value se não há valor declarado). Então definimos funções para os eventos onfocus e onblur do elemento.

Adicionalmente, adicionamos a classe ‘disabled’ quando a mensagem está sendo exibida. Para isso, usamos as funções (bastante conhecidas) addClass e removeClass, mostradas abaixo.

function addClass(el, classn) {
removeClass(el, classn);
el.className += ' '+classn;
}

function removeClass(el, classn) {
  if (!(el && el.className)) return;
var cls = el.className.split(/\s+/), ar = [];
  for(var i = cls.length; i > 0;) if(cls[--i] != classn) ar.push(cls[i]);
el.className = ar.join(" ");
}

Essa é uma função simples e útil, poupando o trabalho de reescrever esse simples javascript em cada elemento. Veja um exemplo de uso aqui.

Veja o código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Clock</title>
<style type="text/css" title="big">
#clock { background-color:#000; padding:5px; height:55px; width:242px; }
#clock #separator1, #clock #separator2 {
width:20px; padding-top:17px; text-align:center; float:left;
}
#clock #separator1 div, #clock #separator2 div {
width:0; height:0; border:3px solid #CCC; margin:10px 8px 10px 8px;
}
#clock .dig { width:29px; padding:0; float:left; }
#clock .mid { width:20px; height:18px; border:6px solid #CCC; }
#clock .up { border-bottom-width:3px; }
#clock .down { border-top-width:3px; }
#clock .mrig { margin-right:4px; }
#clock .mlef { margin-left:4px; }
</style>
<style type="text/css" title="small">
#clock { background-color:#000; padding:2px; height:23px; width:116px; }
#clock #separator1, #clock #separator2 {
width:7px; height:18px; padding-top:6px; text-align:center; float:left;
}
#clock #separator1 div, #clock #separator2 div {
width:0; height:0; border:1px solid white; margin:5px 2px 5px 1px;
}
#clock .dig { width:15px; padding:0; float:left; }
#clock .mid { width:10px; height:8px; border:2px solid white; }
#clock .up { border-bottom-width:1px; }
#clock .down { border-top-width:1px; }
#clock .mrig { margin-right:2px; }
#clock .mlef { margin-left:2px; }
</style>
<script type="text/javascript">
var _on = 'lightgreen', _off = '#000000', _tt = false;

function apply(digit, num) {
  if(/^d[1-6]$/.test(digit) == false) return;
  if(/^\d$/.test(num) == false) return;
var d = $(digit), divs = d.getElementsByTagName('div'), el1 = divs[0], el2 = divs[1],
    numbers = [
    [1,1,0,1,0,1,1,1], [0,1,0,0,0,1,0,0], [1,1,1,0,1,0,1,1], [1,1,1,0,1,1,1,0], [0,1,1,1,1,1,0,0],
    [1,0,1,1,1,1,1,0], [1,0,1,1,1,1,1,1], [1,1,0,0,0,1,0,0], [1,1,1,1,1,1,1,1], [1,1,1,1,1,1,0,0]
    ];
el1.style.borderTopColor =    numbers[num][0] ? _on : _off;
el1.style.borderRightColor =  numbers[num][1] ? _on : _off;
el1.style.borderBottomColor = numbers[num][2] ? _on : _off;
el1.style.borderLeftColor =   numbers[num][3] ? _on : _off;
el2.style.borderTopColor =    numbers[num][4] ? _on : _off;
el2.style.borderRightColor =  numbers[num][5] ? _on : _off;
el2.style.borderBottomColor = numbers[num][6] ? _on : _off;
el2.style.borderLeftColor =   numbers[num][7] ? _on : _off;
}

function tictac() {
var divs1 = $('separator1').getElementsByTagName('div');
  for(var i = 0; i < divs1.length; i++)
    divs1[i].style.borderColor = _tt ? _off : _on;
var divs2 = $('separator2').getElementsByTagName('div');
  for(var i = 0; i < divs2.length; i++)
    divs2[i].style.borderColor = _tt ? _off : _on;
_tt = (!_tt);
}

function setClock(color) {
var d = new Date(), h = d.getHours(), m = d.getMinutes(), s = d.getSeconds();
  if(h < 10) h = '0'+h;
  if(m < 10) m = '0'+m;
  if(s < 10) s = '0'+s;
apply('d6', Number(String(s).substring(1,2)));
apply('d5', Number(String(s).substring(0,1)));
apply('d4', Number(String(m).substring(1,2)));
apply('d3', Number(String(m).substring(0,1)));
apply('d2', Number(String(h).substring(1,2)));
apply('d1', Number(String(h).substring(0,1)));
tictac();
setTimeout(setClock, 1000);
setTimeout(tictac, 500);
}

function $(id) {
return typeof(id) == 'object' ? id : (document.getElementById(id) || null);
}

function stl(s) {
var stls = document.getElementsByTagName('style');
  for(var i = 0; i < stls.length; i++) stls[i].disabled = (stls[i].title != s);
}
</script>
</head>

<body onload="setClock(); stl('big');">
  <p style="clear:both; margin-bottom:20px">
    <a href="javascript://" onclick="stl('big')">grande</a> |
    <a href="javascript://" onclick="stl('small')">pequeno</a>
  </p>
  <div id="clock">
    <div id="d1" class="dig mrig">
      <div id="d1u" class="mid up"></div>
      <div id="d1d" class="mid down"></div>
    </div>
    <div id="d2" class="dig mlef">
      <div id="d2u" class="mid up"></div>
      <div id="d2d" class="mid down"></div>
    </div>
    <div id="separator1">
      <div></div>
      <div></div>
    </div>
    <div id="d3" class="dig mrig">
      <div id="d3u" class="mid up"></div>
      <div id="d3d" class="mid down"></div>
    </div>
    <div id="d4" class="dig mlef">
      <div id="d4u" class="mid up"></div>
      <div id="d4d" class="mid down"></div>
    </div>
    <div id="separator2">
      <div></div>
      <div></div>
    </div>
    <div id="d5" class="dig mrig">
      <div id="d5u" class="mid up"></div>
      <div id="d5d" class="mid down"></div>
    </div>
    <div id="d6" class="dig mlef">
      <div id="d6u" class="mid up"></div>
      <div id="d6d" class="mid down"></div>
    </div>
  </div>
</body>
</html>

E aqui essa página carregada (em uma nova janela)

Abraços, Cau

O termo "i18n" vem de i + nternationalizatio (18 letras) + n – internationalization ou internacionalização. Mas há também o conceito de localização, ao qual nos referimos por "l10n" – localization e uma grande confusão quanto às diferenças entre os dois. Depois de ler o que diz a wikipedia ainda fiquei com dúvidas e foi aqui que tive um esclarecimento um pouco maior. Vou tentar resumir nas minhas palavras.

Internacionalização

O processo de internacionalização consiste em colocar seu software ao alcance da comunidade internacional, traduzindo a interface para outros idiomas e substituindo este ou aque detalhe específico do seu "local cultural" por versões aceitas internacionalmente – me refiro a coisas como formatos de valores e datas, por exemplo.

Este é um processo de abertura, que busca mais abrangência. Alcançar um público mais diverso, que está familiarizado com "multilanguage interfaces".

A internacionalização é colocada como um estágio necessário à localização de um aplicativo. Localizar um aplicativo é algo que acontece com o tempo e se o aplicativo preenche certos requesitos, mas a internacionalização é para ser incluída no momento de desenvolver o projeto.
————————————————

Localização

Aqui a direção se inverte. Enquanto a internacionalização anda em direção ao mundo, a localização se dirige a um local específico – usualmente um país, e deve englobar detalhes específicos da cultura local, como se tivesse sido feito para este público específico.

Aqui falamos de suporte a caracteres de outros alfabetos, direção do texto na página (curiosidade: wikipedia em hebreu) , uso de linguagem local (pt_BR em vez de pt), imagens específicas, etc.

Isso inclui possívelmente a mudança do layout e outras coisas que vão além da simples tradução do texto.
————————————————

Já viu que o que se faz em geral é a internacionalização, né? o processo de localizar um software para todas as mais relevantes culturas é apenas para sistemas operacionais e programas comerciais como photoshop, etc. Trata-se de um trabalho que inclui muita pesquisa e adaptações, às vezes pesadas, no software.

O PHP tem suporte nativo ao GetText do GNU, que usa arquivos .MO – binários compilados a partir de catálogos .PO. Legal, muito rápido por usar arquivos compilados. Mas quando tentei usar um esquema mais complexo, com múltiplos textdomains, me enrolei todo, achei complicado e sem documentação, principalmente em português. Como sempre acontece comigo, resolvi fazer eu mesmo um sistema e criei uma alternativa intermediária.

A classe i18n usa os catálogos PO sem compilação para fazer a tradução e trabalha com múltiplos textdomains sem complicação. Através de i18n::parsePoFile() podemos parsear os arquivos e extrair as mensagens para usá-las na tradução.

Uma vantagem é preservar a possibilidade de usar editores como o PoEdit para ler as mensagens nos arquivos fonte e editar a tradução normalmente. Apenas na hora de ler nós faremos isso por nossa conta. É bom lembrar que para usar domínios diferentes para traduzir os mesmos arquivos, ao ler as mensagens, o PoEdit irá ignorar os domínios e acrescentar todas as mensagens a cada domíno – o ideal é usar domínios diferentes para diretórios diferentes (que não estejam contidos um no outro).

Como vamos usar o catálogo sem compilação, human-readable, não precisaremos ocupar espaço com os arquivos .MO que o PoEdit gera automaticamente, a não ser que queiramos usar ambos os métodos simultaneamente – o que é possível. Nesse caso, usaremos como domínio principal do i18n um domínio diferente do setado com bindtextdomain(). E podemos usar quantos textdomains quisermos no i18n, preservando o domínio principal para a função gettext() do PHP.

Código e exemplo da classe i18n

function toRed() {
this.style.color = "red";
}
function toBlue() {
this.style.color = "blue";
} 

Então pego um div e copio as funções para os eventos mouseover e mouseout:

var div = document.getElementById('meudiv');
div.onmouseover = toRed;
div.onmouseout = toBlue; 

Bacana, isso vai funcionar que é uma beleza. Mas durante a navegação, meu visitante executou uma ação que precisou adicionar mais um comando ao evento mouseover do mesmo div, mas não quero perder as ações que já estão lá. Se usar novamente comandos como os que usei acima, a função será substituída pela nova… Aí lembrei daquela famosa função addEvent(), que usa os métodos addEventListener ou attachEvent, isso tanto para objetos tipo Object quanto para elementos HTML, "pegos" via DOM. Bem, funcionou, as funções foram executadas, mas aí eu fiz a incrível descoberta de que esses métodos não criam uma propriedade no elemento com a função enviada. Ao invés disso, ela é executada "externamente ao objeto", portanto a minha palavra this não aponta para o meu elemento, mas para o objeto window.

Bolei então um modo de resolver essa situação criando uma propriedade chamada events no elemento. É um objeto que vai armazenando as funções registradas para os eventos e para gerenciar isso vamos inserir alguns novos métodos no elemento: addEvent, removeEvent, clearEvent, hasEvent e fireEvent. Para que tudo aconteça, criamos a função elementEvents, que aplica os novos métodos ao elemento enviado – e função extendAll apenas para aplicar a primeira a todos os elementos da página. Veja o código:

function elementEvents(el) {
  el.addEvent = function addEvent(evname, func) {
  evname = /^on/.test(evname) ? evname : "on"+evname;
  var fire = new Function("e", "this.fireEvent(\""+evname+
                               "\", e || window.event);");
    if(typeof this.events == "undefined") this.events = {};
    if(typeof this.events[evname] == "undefined")
      this.events[evname] = [];
    if(typeof this[evname] == 'function' &&
       this[evname].toString() != fire.toString())
      this.events[evname].push(this[evname]);
    if(!this.hasEvent(evname, func)) this.events[evname].push(func);
  this[evname] = fire;
  return this;
  };

  el.removeEvent = function (evname, func) {
  evname = /^on/.test(evname) ? evname : "on"+evname;
    if(typeof this.events == "undefined" ||
       typeof this.events[evname] == "undefined" ||
       !this.events[evname].length) return this;
  var ret = [];
    for(var i = 0; i < this.events[evname].length; i++)
      if(this.events[evname][i].toString() != func.toString())
        ret.push(this.events[evname][i]);
  this.events[evname] = ret;
  return this;
  };

  el.clearEvent = function (evname) {
  evname = /^on/.test(evname) ? evname : "on"+evname;
    if(typeof this.events == "object" &&
       typeof this.events[evname] != "undefined" &&
       this.events[evname].length) delete(this.events[evname]);
  this[evname] = null;
  return this;
  };

  el.hasEvent = function (evname, func) {
  evname = /^on/.test(evname) ? evname : "on"+evname;
    if(typeof this.events == "undefined" ||
       typeof this.events[evname] == "undefined" ||
       !this.events[evname].length) return false;
    for(var i = 0; i < this.events[evname].length; i++)
      if(this.events[evname][i].toString() == func.toString())
        return true;
  return false;
  };

  el.fireEvent = function (evname, ev) {
  evname = /^on/.test(evname) ? evname : "on"+evname;
    if(typeof this.events[evname] == "undefined") return true;
    for(var i = 0; i < this.events[evname].length; i++) {
      if(typeof this.events[evname][i] == "function") {
      this.tempFunction = this.events[evname][i];
      this.tempFunction(ev);
      }
    }
  };
return el;
}

function extendAll() {
var els = document.getElementsByTagName("*");
  for(var i = 0; i < els.length; i++) elementEvents(els[i]);
}

// window.onload = extendAll;
// ou...
// addEvent(window, 'load', extendAll);

As últimas linhas mostram duas maneiras diferentes de aplicar a função extendAll ao evento onload do objeto window, fazendo com que os mátodos sejam aplicados a todos os elementos da página. Mas podemos usar o sistema em um elemento específico... veja:

var div = document.getElementById('meudiv');
elementEvents(div);
div.addEvent('mouseover', toRed);
div.addEvent('mouseout', toBlue);
div.addEvent('mouseover',
             function() {
             this.style.border = "2px solid #666";
             });
div.addEvent('mouseout',
             function() {
             this.style.borderWidth = "0px";
             });

Após esses comandos, a propriedade events do div estará com a seguinte anatomia:

{
  'mouseover': [
    function() { this.style.color = "red"; },
    function() { this.style.border = "2px solid #666"; }
  ],
  'mouseout': [
    function() { this.style.color = "blue"; },
    function() { this.style.borderWidth = "0px"; }
  ]
}

As funções de cada evento serão executadas na seqüência do array de funções, mas até aí nada... se simplesmente executarmos as funções num loop, o this ainda não estará apontando para o elemento. A mágica está no método tempFunction, criado em fireEvent, que recebe a função e a executa como parte do objeto. Isso faz com que o evento seja repassado corretamente (inclusive para IE) e que a palavra this aponte para o próprio elemento.

Veja aqui uma página de testes

Em Javascript, quando usamos a palavra-chave this, estamos criando uma referência ao objeto que contém o método em execução. Objeto, método… mas e se estivermos falando de uma função normal? Pois é… aí é hora de entender algumas coisinhas.

Em Javascript tudo são objetos, métodos e propriedades. Quando declaramos uma variável com o valor "a", criamos automaticamente uma instância do objeto String. Se o valor for 1 o objeto instanciado será o Number e assim por diante. Quando escrevemos uma função como no exemplo a seguir

function showmsg(msg) { alert(msg); }

criamos uma instância do objeto Function, exatamente como com as variáveis. Por isso podemos declarar a mesma função assim:

var showmsg = function(msg) { alert(msg); };

e como o objeto pai é naturalmente o window, as duas formas mostradas equivalem a

window.showmsg = function(msg) { alert(msg); };

pois tudo que é declarado "solto", sem ser colocado explicitamente num objeto, é adicionado ao objeto window, e assim tudo são métodos e propriedades de objetos. Compreendido isso, vamos ao this.

A pergunta é: para que objeto o this está apontando no contexto em que está sendo usado?

No caso de um elemento HTML, o this irá sempre apontar para o próprio elemento, pois o texto das propriedades relativas a eventos nas TAGs é lido como função interna do objeto. Veja:

 <div id="md" onclick="this.style.color = "blue";">...</div>

Ou poderíamos usar uma função, atribuindo-a ao evento onclick dinamicamente:

function setcolor() { this.style.color = "blue"; }
document.getElementById("md").onclick = setcolor;

Isso funcionaria do mesmo jeito, só que assim podemos aplicar a qualquer elemento a função que ela vai funcionar legal. O this irá apontar para o elemento que chamou a função. Mas o código abaixo não iria funcionar como esperado…

<div id="md" onclick="setcolor()">...</div>

Por que não? Pelo mesmo motivo que isso não iria funcionar:

document.getElementById("md").onclick = function()
                                        { setcolor(); };

A função tem que ser um método do objeto para que o this aponte para o próprio. Há um meio fácil para ver se o this irá ou não funcionar: a palavra this deve estar contida no texto da função. Veja:

var elem = document.getElementById("md");
alert(elem.onclick);

Para os primeiros exemplos (os corretos), o código acima iria mostrar:

function() { this.style.color = "blue"; }

Enquanto os dois últimos exemplos (errados) iriam mostrar:

setcolor();

Como vemos, a palavra this não faz parte do texto da função nos últimos casos, portanto não irá apontar para o objeto DOM referente. As funções seriam executadas normalmente, mas o this iria se referir ao objeto window e como não existe a propriedade style.color lá, nada aconteceria.

Ao criar objetos explicitamente, podemos usar o this para referir o próprio objeto, mas atenção para a interação entre objetos, pois a função é copiada e será executada no novo contexto exatamente como foi escrita, portanto o alvo do this pode mudar de repente. Veja:

var X = { "a": 1,
          "b": function() { alert(this.a+":"+X.a); } };
X.b(); // mostra "1:1"
var Y = {"a": 2, "b": X.b }; // copio o método de X
Y.b(); // mostra "2:1" - this aqui é Y, e não mais X

Portanto, pode ser mais seguro usar o nome do objeto no lugar do this nesses casos.

E o uso do this em funções para manipulá-las como objetos? Como foi explicado, ao criar uma "função solta", estamos na verdade criando um novo método no objeto window, portanto o this nesse contexto iria apontar para window. Para evitar isso, existe o operador new. Veja:

function testThis() {
  if(typeof this.navigator != "object")
	  this.navigator = {
      userAgent: "com o operador new, this "+
                 "aponta para a própria função!"
    };
val = this.navigator.userAgent;
}
function test1() { testThis(); alert(val); };function test2() { new testThis(); alert(val); };

Se testarmos as funções test1 e test1, veremos que o mesmo this aponta para objetos diferentes, dependendo da forma que foi executada a função testThis. Se usar o operador new, isso faz o this referenciar a própria função como um objeto, senão this irá apontar para o objeto padrão window.

Interessante notar que os métodos attachEvent (IE) e addEventListener criam uma referência à função enviada, portanto ao usar a famosa função addEvent() para definir funções para eventos de objetos DOM, lembre que o this irá sempre apontar para o objeto window.

Bem, espero ter lançado alguma luz sobre o this, ao menos para os que estão iniciando.

Se você lê inglês, veja essa página: www.quirksmode.org/js/this.html

Em dois fins de semana (pois é, quando posso fazer algo pra relaxar de tanto código, muitas vezes escolho programar…) este script nasceu e cresceu. Naturalmente ainda faltam algumas coisas, como meios melhores de manusear os elementos OPTGROUP, por exemplo.

Os métodos atuias são os seguintes:

• create
• addOptionAt
• addOption
• clone
• extract
• build
• removeAllOptions
• hasOption
• selectAll
• unselectAll
• selectByVal
• findText
• removeOption
• removeSelectedOptions
• getSelectedIndexes
• applyStyle
• setStyle
• transferSelectedOptions
• sortOptions
• addOptgroup
• removeOptgroup
• extractGroups
• applyGroups
• selectedToGroup

Não vou escrever uma referência dos métodos, por falta de tempo, principalmente, mas você pode ver uma página de testes aqui, com exemplos interessantes para entender como a coisa funciona. Há alguns comentários no próprio script, mas (talvez infelizmente…) estão em inglês…

Dúvidas e esclarecimentos podem ser resolvidos aqui, nos comentários, ok?
Espero que este script seja útil.