Aplica��es Prototype em JavaScript

O Prototype aplicado em JavaScript � um artif�cio muito interessante para auxiliar os desenvolvedores a construir sites mais interativos e mais inteligentes.

Esta notaç�o � aplicada sob objetos/estruturas definidas em JavaScript com o objetivo de atribuir m�todos de execuç�o a esses objetos. Os objetos citados para utilizaç�o do prototype podem ser criados a partir das notaç�es JSON (Java Script Object Notation) citadas em um de meus artigos anteriores:

Relacionado: Guia do programador Front-End

A abordagem de utilizaç�o do prototype � t�o simples quanto a sua utilizaç�o.

Vamos a princ�pio tentar abstrair o conceito de utilizaç�o do prototype associando-o � programaç�o orientada a objetos (POO). Podemos caracterizar, desta forma, o prototype como sendo um m�todo ou um construtor de classes (em nosso caso Objetos JavaScript �JSON�) para executar c�digos ou at� mesmo criar novos objetos.

A partir do prototype podemos atribuir funç�es e executar procedimentos aninhados ou n�o a partir de um objeto criado ao qual conter� as informaç�es que poderemos utilizar durante o c�digo.

Parece complicado? Vamos acompanhar abaixo o c�digo que simplificar� as coisas.


<HTML>
<HEAD>
<script type="text/javascript">
 
    var objBase;

    function ConstrutorJSON()
    {
           this.nome = "Fernando";
           this.idade = 25;
           this.profissao = "Analista de Sistemas";
           this.endereco = "Minha casa";
           this.numero = 199;
    }

    ConstrutorJSON.prototype.Pessoa = function(){
           return this.nome + " - " + this.profissao + " Idade: " 
           + this.idade.toString();
    }
    ConstrutorJSON.prototype.EnderecoCompleto = function(){
           return this.endereco + ", " + this.numero;
    }

    function ExecucaoCriacaoObjeto()
    {
           objBase = new ConstrutorJSON();
    }

    function ExecutaTesteObtencaoDados()
    {
           if(objBase == null)
                   ExecucaoCriacaoObjeto();

           alert(objBase.Pessoa());
           alert(objBase.EnderecoCompleto());
    }

    function DisparaPrimeiroTeste()
    {
           ExecucaoCriacaoObjeto();
           alert("Dados Criados: " + objBase.nome + "\r\n" 
           + objBase.idade + "\r\n" + objBase.profissao + "\r\n" 
           + objBase.endereco + "\r\n" + objBase.numero);
    }

    function DisparaSegundoTeste()
    {
           alert("Dados obtidos das funç�es: \r\nPessoa: " 
           + objBase.Pessoa() + "\r\nEnderecoCompleto: " 
           + objBase.EnderecoCompleto());
    }
</script>
</HEAD>
<BODY>
<button id="btnTeste1" onclick="DisparaPrimeiroTeste();">Teste 1 
- Criar os Objeto JSON</button>
<br>
<button id="btnTeste2" onclick="DisparaSegundoTeste();">Teste 2 
- Executar as Funç�es </button>
</BODY>
</HTML>

Listagem 1. P�gina de exemplo de aplicaç�o do prototype

No c�digo da Listagem 1 apresento uma exemplificaç�o b�sica de utilizaç�o de prototype para apresentaç�o de dados obtidos do objeto JSON criado.

Observamos que esta � uma p�gina HTML b�sica contendo seu corpo de tags e com qualquer outra p�gina comum.

Dentro das tags encontramos as funç�es que ser�o executadas para criaç�o do objeto JSON e atribuiç�o do m�todo prototype a ele.

No corpo da p�gina inseri dois bot�es para separar o nosso teste em dois momentos.

Primeiro: Criaç�o do objeto JSON.
Segundo: Execuç�o dos m�todos prototype atribu�dos a ele.

Executando sua aplicaç�o prototype em Javascript

No primeiro bot�o com a chamada da funç�o �DisparaPrimeiroTeste();� temos o in�cio do objeto denominado como �objBase�. Este objeto � uma vari�vel de �mbito global no c�digo definida logo abaixo da primeira tag , isto define que todos os m�todo executados dentro de nosso JavaScript ter�o acesso a este objeto.

Obs: eu poderia ter definido esta vari�vel dentro de alguma funç�o, por�m ela teria restriç�o de acesso apenas e esta funç�o trabalhando como escopo interno ent�o isso me forçaria a trafeg�-la como par�metro na necessidade de obter seu valor em outra funç�o.

Dentro do corpo da funç�o �DisparaPrimeiroTeste();� repare que executo uma chamada � pr�xima funç�o denominada �ExecucaoCriacaoObjeto();�. Esta funç�o tem por objetivo criar a inst�ncia do objeto �objBase� ao qual ser� nossa base para execuç�o dos m�todos definidos ao construtor dele (�ExecucaoCriacaoObjeto();�) anteriormente.

A geraç�o do prototype � exatamente esta definiç�o que citei acima relacionando m�todos de execuç�o ou dizendo de outra forma, funç�es, ao construtor do objeto JSON conforme faço abaixo da funç�o �ExecucaoCriacaoObjeto();�.

No momento que executo as linhas abaixo o objeto instanciado deste construtor ter� associado a ele estas funç�es.


ConstrutorJSON.prototype.Pessoa = function(){
    return this.nome + " - " + this.profissao + " Idade: " + this.idade.toString();
  }
  ConstrutorJSON.prototype.EnderecoCompleto = function(){
    return this.endereco + ", " + this.numero;
  }

A partir deste momento podemos esclarecer o que ser� executado no teste 2.

Neste momento eu apenas executo a chamada aos m�todos prototype definidos anteriormente obtendo seus valores que j� existem no objeto conforme atribu�dos em sua criaç�o.

Esta � a base de utilizaç�o do Prototype. Existem in�meras formas de se trabalhar com o prototype.

� muito comum a sua utilizaç�o para execuç�o de chamadas ass�ncronas em ajax ao qual s�o atribu�dos aos objetos base do XMLHttpRequest os m�todos que far�o o controle dos estados da execuç�o ass�ncrona, por�m este assunto engloba um contexto maior que n�o ser� abordado neste artigo.

Outras utilizaç�es seria aplicar o JSON com prototype como alimentador de objetos , , etc. Voc� pode criar um atributo do objeto como sendo um array e em seu m�todo alimentar um componente ou retornar esse array para alimentar um componente externo.

Bom, agora � a criatividade quem toma conta da codificaç�o de seu sistema. Com a estrutura acima apresentada voc� poder� criar estruturas complexas (JSON) recebendo par�metros externos atrav�s de seu m�todo construtor (no exemplo definido como �ConstrutorJSON�) e utilizar os m�todos �prototype� atribu�dos a ele para executar as tarefas necess�rias de sua aplicaç�o.

Espero que seja �til para suas fronteiras do dia a dia.

Saiba mais: Depurando Javascript no Mozilla Firefox

Links �teis

Download do Google Chrome: Faça o download do Google Chrome
Javascript: Site oficial do JavaScript
Site Oficial do PHP: O PHP (um acr�nimo recursivo para PHP: Hypertext Preprocessor) � uma linguagem de script open source de uso geral, muito utilizada, e especialmente adequada para o desenvolvimento web e que pode ser embutida dentro do HTML.

Saiba mais sobre Mobile ;)

JavaScript Tutorial: Neste artigo veremos como utilizar o c�digo javascript em nossas aplicaç�es web e websites. Teremos uma introduç�o � essa maravilhosa linguagem que cada vez mais cresce no desenvolvimento web.
Preparando o ambiente para programar em PHP: Neste curso vamos aprender a preparar um ambiente de programaç�o para PHP. Para isso, instalaremos um servidor web (Apache), o interpretador PHP e banco de dados MariaDB (MySQL). Todos esses componentes ser�o instalados em conjunto atrav�s do XAMPP.
Debugando seu c�digo com Google Chrome: Veja nesse artigo como usar a ferramenta de Debug do Google Chrome a seu favor.

Prototype - JavaScript

O Prototype aplicado em JavaScript é um artifício muito interessante para auxiliar os desenvolvedores a construir sites mais interativos e mais inteligentes.

Executando sua aplicaç�o prototype em Javascript

Links �teis

Saiba mais sobre Mobile ;)

Artigos relacionados