Artigos .NET Prototype - 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.

  1. Primeiro: Criação do objeto JSON.
  2. 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.