Prosa Digital – Tecnologia e Sociedade

“Faça aquilo que gosta e não trabalhe um dia sequer na vida”
Confúcio

Caro leitor, hoje continuo a série de artigos sobre UML e Javascript.

No capítulo passado nós aprendemos a definir uma classe em Javascript e como instanciá-la. Também vimos uma abordagem sobre os modificadores de visibilidade privado e público, bem como sua aplicação nos atributos da classe.

Neste capítulo veremos como aplicar estes modificadores de visibilidade aos métodos. Também criaremos nosso método construtor a partir de uma abordagem particularmente adotada por quem vos escreve.

Para começar, vamos criar os métodos que encapsulam os atributos privados, ou seja, os métodos de acesso get e modificador set.

Vejamos a figura abaixo:

No bloco de código acima vemos como definir métodos get. Assim como em Javascript, outras linguagens orientadas a objetos também definem estes métodos. Por padrão, estes métodos recebem a seguinte nomenclatura: get + <nomedoatributocomaprimeiraletramaiúscula>, como no exemplo acima.
Métodos de acesso são públicos, e para tanto devemos defini-los com a palavra chave this, que faz referência à classe em questão, seguida de um ponto ( . ) mais o nome do método. Este método é bem simples e só tem uma finalidade, retornar o valor da propriedade que ele encapsula. Isto podemos observar na figura acima, na linha “return height” e “return width”.

Métodos modificadores também são públicos, e a regra de definição é a mesma dos métodos de acesso. Este porém, recebe por parâmetro uma variável. O código deste método consiste em atribuir o valor da variável que foi passada por parâmetro, ao atributo privado que o método encapsula. Para entender melhor vejamos a figura abaixo:

Agora um exemplo:

No exemplo acima, nas linhas 45 e 46, nós utilizamos os métodos modificadores para atribuir valor aos atributos width e height. Logo em seguida exibimos os valores atribuídos utilizando os métodos de acesso, na linha 49. Novamente, nas linhas 52 e 53, atribuímos novos valores aos atributos, e exibimos, na linha 56, estes valores, novamente através dos métodos de acesso.

Na notação que estamos utilizando, o método construtor da classe é a própria classe, ou seja, todo o código que estiver sendo executado ‘dentro’ do escopo que define a classe, será executado quando esta for instanciada.

Contudo, particularmente não acho esta, uma forma organizada de trabalhar com um método construtor e, para tanto, costumo adotar um método privado chamado constructor. É nele que eu defino as ações que minha classe deve tomar ao ser instanciada, e, ao final da definição da classe, faço uma chamada a este método.

Vejamos no exemplo abaixo como tudo fica mais claro:

//definição da classe Div

function Div(container, inWidth, inHeight){//define a largura da div

var width;

//define a altura da div

var height;

//elemento DOM div

var objDiv;

//Objeto conteiner

var container;

//método construtor

var constructor = function(){

width = inWidth;

height = inHeight;

//cria o objeto DOM div

objDiv = document.createElement("div");

//pega o objeto de estilos do div

var styleDiv = objDiv.style;

//definindo as propriedades do objeto de estilos

styleDiv.width = width;

styleDiv.height = height;

styleDiv.border = "1px dotted #000000";

}

//métodos get

this.getWidth = function(){

return width;

}

this.getHeight = function(){

return height;

}

//métodos set

this.setWidth = function(value){

width = value;

}

this.setHeight = function(value){

height = value;

}

//exibe o div

this.show = function(){

//exibindo o objeto dentro do container

container.appendChild(objDiv);

}

//remove o div do container

this.remove = function(){

try{

container.removeChild(objDiv);

}

catch(e){}

}

//atualiza o objeto método privado

this.refresh = function(){

this.remove();

this.show();

}

//redimensiona o objeto

this.resize = function(inWidth,inHeight){

width = inWidth;

height = inHeight;

objDiv.style.width = inWidth;

objDiv.style.height = inHeight;

}

//método privado

var teste = function(){

alert('teste');

}

//chamando o método construtor

constructor();

}

Como podemos ver no código acima, por questões de organização, o método construtor é chamado no final da definição da classe.

Com isso concluímos o segundo capítulo de UML e Javascript.

Desculpem pela demora deste segundo post.

Paz e bem!

Related posts:

1. UML e Javascript – Capítulo 1
2. Validação de formulário em javascript