Logo que tomei contato com o framework Javascript ExtJS (http://www.extjs.com ou http://www.extjs.com.br), fiquei curioso com a sintaxe utilizada e pesquisando sobre classes em Javascript acabei descobrindo alguns tutoriais que ensinavam a criá-las, porém nenhum muito didático e simples, como é o assunto.

Por isso decidi escrever este mini-tutorial para guardar o que aprendi para a posteridade e compartilhar o conhecimento adquirido.

Primeiro vem o código completo para aqueles que são mais perspicazes aprenderem logo de cara o pulo do gato.


Para aqueles que não conseguiram aprender nada somente olhando o código acima, ou que ainda ficaram com dúvida, aí vai uma explicação didática do caso.

Primeiro, vamos criar uma variável que vai dar o nome à nossa classe. Neste exemplo didático, ela se chama Alarme:

var Alarme = {}

Note que é atribuído um par de chaves {} à nossa variável. É dentro dele que vamos colocar nossas propriedades e métodos. Na nossa classe de exemplo, temos apenas uma propriedade e dois métodos. A propriedade é chamada de "text" e os métodos são setText() e show(), que definem o texto a ser exibido e exibem o nosso alerta, respectivamente.

Observe que temos sempre o nome da propriedade ou método seguido de dois-pontos (:), que é nosso símbolo de atribuição (semelhante ao igual (=)).

O que define se um nome (text, setTitle ou show) vai ser uma propriedade ou método é o que nós atribuímos a ele: se atribuímos uma função (function()), será um método, senão, uma propriedade. Observe também que separamos métodos e propriedades sempre com vírgula (que prefiro sempre colocar em frente ao nome do método ou propriedade para facilitar a manipulação do código com comentários).

Para fazermos referência a uma propriedade ou método, dentro da classe, usamos a palavra this.

Agora que sabemos a estrutura e composição de uma classe Javascript, é só preencher com métodos e propriedades, que devem seguir as especificações do Javascript. Para chamar uma propriedade ou método, basta colocar o nome da classe (Alarme), separada por ponto do nome da propriedade ou método.

Vale lembrar que para chamar um método devemos usar parênteses depois do seu nome. É dentro dos parênteses que devem ser passados parâmetros para os métodos.

Alarme.text //Retorna a propriedade text
Alarme.show() //Executa o método show()
Alarme.setText("Texto") //Executa o método setText() passando "Texto" como parâmetro.

É isso ai pessoal, espero que tenham gostado deste mini-tutorial.

Caso desejem reproduzir este material, ficam autorizados desde que citem a autoria e coloquem um link para a fonte.