Crie sua própria classe Javascript

Publicado por EVERTON DA ROSA em 19/01/2010

[ Hits: 9.492 ]

Blog: http://everton3x.github.io

 


Crie sua própria classe Javascript



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.

<!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" xml:lang="en" lang="en">
<head>
   <title>Minha Primeira Classe Javascript</title>
   <meta http-equiv="content-type" content="text/html;charset=utf-8" />
   <meta name="generator" content="Geany 0.18" />
  
   <script language="javascript">
   var Alarme = {
      text: 'Texto do alarme'
      ,setText: function(txt){
         this.text = txt;
      }
      ,show: function(){
         alert(this.text);
      }
   };
   </script>
</head>
<body>
<input type="text" id="titulo">
<input type="button" value="Clique"
onclick="Alarme.setText(document.getElementById('titulo').value);Alarme.show();" />
</body>
</html>

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.

Outras dicas deste autor

W3Schools.com: tutoriais, referências e exemplos voltados para a web

Gerador de relatórios Agata Report

RAC - Rows and Columns

Codepress: editor online com destaque de sintaxe e muito mais

Driblando o REGISTER GLOBALS OFF

Leitura recomendada

Instalando o OpenSuSE a partir do Windows

Solução gráfica para extrair páginas PDF em um outro arquivo separado

Sabayon Linux: A distro mais completa e bonita

Rodando um Debian Lenny bem facilitado

Instalando e promovendo o Samba 4 como Domain Controller no CentOS 6.4 Minimal

  

Comentários
[1] Comentário enviado por Feko em 19/01/2010 - 10:03h

Não intendi... Sempre vi classes em JS sendo declaradas com "function" e não "var".
Como faço para criar duas instâncias da classe "Alarme" dessa maneira descrita no seu tutorial?

[2] Comentário enviado por dcampos em 19/01/2010 - 13:23h

Muito interessante. E bem simples. Nada mais do que um "hash", com os atributos e os métodos ("closures").

[3] Comentário enviado por everton3x em 20/01/2010 - 17:18h

Caro Feko:
Você está certo: geralmente as classes JS são declaradas com function, esta é uma form alternativa que "descobri" a trabalhar com ExtJS.



Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts