Crie sua própria classe Javascript
Dica publicada em Linux / Introdução
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.
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.
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>
"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.
Como faço para criar duas instâncias da classe "Alarme" dessa maneira descrita no seu tutorial?