Como assim? Você quer dizer usando jQuery não é?

Cada vez que aprofundo os meus conhecimentos de Javascript me vem à cabeça o artigo do lendário Douglas Crockford, aonde ele o qualifica qualifica como "a linguagem de programação mais incompreendida do mundo".

E convenhamos, não é a toa! Como o pessoal do jQuery e outras bibliotecas já descobriu, o javascript pode fazer muito mais do que validar formulários e dar alerts e confirms... O surgimento destas bibliotecas foi uma faca de dois gumes pois apesar de ser enormemente responsável pelo ressurgimento da linguagem e por torná-la popular, também fez com que poucas pessoas de fato saibam usá-lo sem o auxílio de uma biblioteca... e eu me incluo neste grupo!

Recentemente decidi tentar criar algo em js puro e gostaria de compartilhar algumas coisas.

Quem já trabalhou com JSON com certeza já conhece o tal do "Object Literal":

1
2
3
4
{
  nome : 'Alex',
  idade : 26
}

Pois aí está a forma mais simples de um objeto Javascript, o tal do literal! Veja outro exemplo: (e desculpem a falta de criatividade...)

1
2
3
4
56
7
8
9
1011
12
13
14
15
function carro(params){
  this.velocidadeAtual = 0;
  var velocidadeMax = 100;
 
  this.acelerar = function(){    if(this.velocidadeAtual < velocidadeMax){
      this.velocidadeAtual += 10;
      alert('vroom');
    }
  }}
 
var car = new carro();
alert(car.velocidadeAtual);
car.acelerar();

O objeto pode ser instanciado e os seus métodos e propriedades podem ser acessados pela instância... legal não é? E aí, está se perguntando porque usei var para declarar uma variável e this pra declarar a outra?

obs - eu uso os termos métodos e funções intercaladamente, assim como propriedades e atributos... :)

Quando se está trabalhando com objetos no javascript, apesar de não existir palavras-chave delimitadoras de escopo como public ou private, é possível obter o mesmo resultado usando this e var, respectivamente.

Tal como o PHP e outras linguagens orientadas a objetos, o this se refere à instância do objeto, até aí sem novidades... Já o var tem a sua visibilidade delimitada ao escopo atual, ou seja, se for declarada dentro da função não será visível fora dela. Neste caso, o efeito resultante é o de uma variável privada.

E finalmente...

Antes de mais nada, não dá pra frisar o suficiente que o javascript não possui um sistema de "herança clássica". Na verdade nem possui classes e os seus objetos são "prototipados", ou seja: são definidos na hora para atender a uma necessidade. Existem várias formas de obter o efeito de herança entre objetos e isto é até hoje um tema para o qual não há uma só solução. Veja um exemplo simples:

1
2
3
4
56
7
8
9
1011
12
13
14
1516
function ClassePai() {
  this.teste = function(){
    alert('teste da classe pai');
  }
} 
function ClasseFilho() {
 
}
 // agora a parte legal, vamos herdar os métodos da classe pai
ClasseFilho.prototype = new ClassePai();
 
// testando
var filhote = new ClasseFilho();filhote.teste();

O leitor Giorgio Giovanni enviou um exemplo legal que gostaria de compartilhar com vocês:

1
2
3
4
56
7
8
9
1011
12
13
14
1516
Date.prototype.Diff = function(Date1) {
  var Date2;
 
  if (arguments.length == 2) {
    Date1 = Date1;    Date2 = arguments[1];
  }
  else {
    Date2 = Date1;
    Date1 = this;  }
        
  Date2 = Date.parse(Date2);
  Date1 = Date.parse(Date1);
  return ((Date2 - Date1) / (24 * 60 * 60 * 1000)).toFixed(0);}

Seguem os comentários do Giorgio:

"É um DateDiff, e demonstra a herança da classe Date pai, e ainda introduz, aos que não conhecem, a variavel arguments que gurada os argumentos passados para a função em forma de um Array."

Para quem não sabe, a variável arguments permite criar funções com argumentos opcionais.

O javascript é uma linguagem bastante subestimada e poderosa, que pode ser usada para agregar bastante valor e transformar completamente a experiência do usuário no seu site. E claro, use o jQuery, YUI, MooTools, etc... só não se esqueça de como programar em javascript puro! :)

• http://ejohn.org/blog/simple-javascript-inheritance/
• http://javascript.crockford.com/prototypal.html
• http://www.sitepoint.com/blogs/2006/01/17/javascript-inheritance/
• http://ajaxpatterns.org/Javascript_Inheritance
• http://www.kevlindev.com/tutorials/javascript/inheritance/index.htm