Javascript

Já mostrei como utilizar javascript de uma forma mais OO (orientada a objetos) nestes dois posts:

• Orientação a objetos em Javascript – Herança
• Orientação a objetos em Javascript

Agora irei mostrar uma forma de separar o código javascript em pacotes de uma forma parecida com a feita pela framework Yahoo! User Interface (YUI) Library, porém existem outras formas de se fazer isso como a feita pelo framework Dojo.

Exemplo utilizando YUI:

  YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("cal1", "cal1Container");

Exemplo utilizando Dojo:

  dojo.require("dijit._Calendar");

E agora irei criar um exemplo simples, criarei uma classe chamada StringUtils que conterá um método trim e esta classe ficará no pacote br.com.rodrigolazoti.utils.

<script language="javascript" type="text/javascript">

var br = br ? br : {}
     br.com = br.com ? br.com : {}
     br.com.rodrigolazoti = br.com.rodrigolazoti ? br.com.rodrigolazoti : {}
     br.com.rodrigolazoti.utils = br.com.rodrigolazoti.utils ? br.com.rodrigolazoti.utils : {}

  br.com.rodrigolazoti.utils.StringUtils = function() {

    this.trim = function( value ) {
      if (value==null) return null;
      else return value.replace(/ /g, "");
    }

  }
</script>

Testando o código:

<script language="javascript" type="text/javascript">
  var stringUtils = new br.com.rodrigolazoti.utils.StringUtils();
  alert( stringUtils.trim( " a b c d e f " ) );
</script>

Neste segundo post sobre orientação a objetos com Javascript irei demonstrar como utilizar o conceito de herança.

Para se fazer uso de herança em javascript deve-se utilizar a propriedade prototype, os objetos em javascript contém uma propriedade “especial” chamada prototype que permite que seja adicionado métodos e propriedades as classes.

Quando se define um valor para a propriedade prototype, no momento em que se cria uma instância de uma classe em javascript, as propriedades prototypes são acopladas a classe.

O exemplo ira se basear em uma classe chama Pessoa com um atributo nome, seu método get e set e uma classe Amigo com um atributo telefone que irá herdar os atributos e métodos da classe Pessoa.

Primeiro o javascript para a classe Pessoa:

<script type="text/javascript" language="javascript">
  function Pessoa() {
  	this.nome;
  	this.setNome = setNome;
  	this.getNome = getNome;

  	function setNome(nome) {
  		this.nome = nome;
  	}

  	function getNome() {
  		return this.nome;
  	}
  }
</script>

Agora o javascript para a classe Amigo:
Mais >

Embora a maioria dos scripts feitos em Javascript seja feito utilizando utilizando programação estruturada, também pode-se utilizar os conceitos de orientação a objetos em Javascript.

Para exemplificar, irei me basear em uma classe chama Pessoa com atributos nome, idade e email, seus métodos getters e setters e um método chamado mostraValores que irá retorna uma string com os valores dos atributos da classe.

Veja o exemplo no código a seguir:

<script language="javascript">

  function Pessoa() {
    var nome;
    var idade;
    var email;

    this.getNome = getNome;
    this.getIdade = getIdade;
    this.getEmail = getEmail;
    this.setNome = setNome;
    this.setIdade = setIdade;
    this.setEmail = setEmail;
    this.mostraValores = mostraValores;

    function getNome() {
      return nome;
    }

    function getIdade() {
      return idade;
    }

    function getEmail() {
      return email;
    }

    function setNome(_nome) {
      nome = _nome;
    }

    function setIdade(_idade) {
      idade = _idade;
    }

    function setEmail(_email) {
      email = _email;
    }

    function mostraValores() {
      return 'Nome: ' + nome +'\nIdade: '+ idade +' anos\nEmail: '+ email;
    }
  }
</script>

Agora vamos criar um javascript para manipular a “classe” Pessoa.
Mais >