Javascript – Organizando {pessoas} por idade inseridas em um Array.

No exemplo que segue podemos observar as seguintes características:

1) Adicionamos novos métodos ao Object (objeto padrão em Javascript) através de seu prototype;

Object.prototype.setNome = function(nome){
 this.nome = nome ... ... código suprimido...

2) Inserimos um algoritmo de ordenação por data nos objetos inclusos na array.

function sortArray(){
   //algoritmo de ordenação
  function algorithm(a, b){
     return new Date(a.dt) - new Date(b.dt);
  }

     //método de array que, de fato, realiza a organização dos objetos internos.
  arr.sort(algorithm);
}

3) Inserimos e alteramos valores de itens no Document Object Model.

Veja a página em execução em:  http://jsfiddle.net/pedroabs/mXJrJ/  (o código abaixo também está aqui)

O código vai abaixo (pode copiar em um arquivo txt e renomear sua extensão para html):

<html>
      <header>
            <script type=”text/javascript”>
                  var arr = new Array();
                  arr[arr.length]={nome:”Asdrubal”, dt:”06/28/1976″}
                  arr[arr.length]={nome:”Joilson”, dt:”02/28/2005″}
                  arr[arr.length]={nome:”Edcastro”, dt:”11/06/2008″}
                  arr[arr.length]={nome:”Washington”, dt:”08/13/1978″}
                  arr[arr.length]={nome:”Dionisio”, dt:”12/22/1942″}
                  Object.prototype.setNome = function(nome){
                        this.nome = nome;
                        try {
                             var ctrl = this.control;
                             var links = ctrl.getElementsByTagName(‘a’);
                             var link = links[0];   
                             link.firstChild.nodeValue = nome;
                        } catch(err){}
                  }
                  Object.prototype.setDataNascimento = function(dt){
                        function toAmerican(dtBrasil){
                             var parts = dtBrasil.split(‘/’);
                             var dt = new Date(parts[2], parts[1], parts[0]);
                             return dt.getMonth()+’/’+dt.getDate()+’/’+dt.getFullYear();
                        }
                        this.dt = toAmerican(dt);
                        clearDiv();
                        sortArray();
                        exibeItens();
                  }
                  Object.prototype.getDataNascimento = function(){
                        var dt = new Date(this.dt);
                        var dia = dt.getDate();
                        var mes = dt.getMonth() + 1;
                        var ano = dt.getFullYear();
                        return dia+’/’+mes+’/’+ano;
                  }
                  Object.prototype.control = function(ctrl){
                        this.control = ctrl;
                  }
                  Object.prototype.getIdade = function(){
                        var hoje = new Date();
                        var nascimento = new Date(this.dt);
                        var anos = Math.floor((hoje – nascimento)/1000/60/60/365/24);
                        return anos;
                  }
                  function sortArray(){
                        function algorithm(a, b){
                             return new Date(a.dt) – new Date(b.dt);
                        }
                        arr.sort(algorithm);
                  }
                  function createLink(text, id){
                        function createAttribute(attr, value){
                             var at = document.createAttribute(attr);
                             at.nodeValue=value;
                             return at;
                        }
                        var link = document.createElement(‘a’);
                        link.appendChild(document.createTextNode(text));
                        var href = createAttribute(‘href’,’#’);
                        link.setAttributeNode(href);
                        var idAttr = createAttribute(‘id’,id);
                        link.setAttributeNode(idAttr);
                        return link;
                  }
                  function clearDiv(){
                        var divLinks = document.getElementById(‘links’);
                        divLinks.innerHTML=””;
                  }
                  function exibeItens(){
                        var mainDiv = document.getElementById(‘links’);
                        for(var i = 0;i<arr.length;i++){
                             var pessoa = arr[i];
                             var div = document.createElement(‘div’);
                             pessoa.control = div;
                             var linkNome = createLink(pessoa.nome, ‘linkNome’);
                             linkNome.pessoa = pessoa; // adiciona referencia da pessoa para o link
                             div.appendChild(linkNome);
                             div.appendChild(document.createTextNode(‘ – ‘));
                             var linkData = createLink(pessoa.getDataNascimento(), ‘linkData’);
                             linkData.pessoa = pessoa; // adiciona referencia da pessoa para o link
                             div.appendChild(linkData);
                             div.appendChild(document.createTextNode(‘ – ‘));
                             //alert(pessoa.getIdade());
                             div.appendChild(document.createTextNode(pessoa.getIdade()));
                             mainDiv.appendChild(div);
                             linkNome.onclick = function(){
                                   var novoNome = prompt(‘quer mudar o nome de ‘ + this.pessoa.nome + ‘ ?’);
                                   if(novoNome != null || novoNome != “”){
                                         this.pessoa.setNome(novoNome);
                                   }
                             }
                             linkData.onclick = function(){
                                   var novaData = prompt(‘quer mudar a data de nascimento de ‘ + this.pessoa.nome +
                                         ‘ nascido em ‘ + this.pessoa.getDataNascimento() + ‘?’);
                                   if(novaData != null || novaData != “”){
                                         this.pessoa.setDataNascimento(novaData);
                                   }
                             }
                        }
                  }
                  window.onload = function(){
                        sortArray();
                        exibeItens();
                        document.getElementById(‘cmdAdd’).onclick=function(){
                             var nome = prompt(‘qual o nome do cidadão?’);
                             var dt = prompt(‘qual a data de nascimento (dd/mm/yyyy)?’);
                             var pessoa = new Object();
                             pessoa.setNome(nome);
                             pessoa.setDataNascimento(dt);
                             arr[arr.length] = pessoa;
                             clearDiv();
                             sortArray();
                             exibeItens();
                        };
                  };
            </script>
      </header>
      <body>
            <div id=”links”>
            </div>
            <input type=”button” id=”cmdAdd” value=”add”/>
      </body>
</html>
 

Veja outros posts de javascript clicando aqui.

Esta entrada foi publicada em Javascript e AJAX com as etiquetas , , , . ligação permanente.

Deixe uma Resposta

Preencha os seus detalhes abaixo ou clique num ícone para iniciar sessão:

Logótipo da WordPress.com

Está a comentar usando a sua conta WordPress.com Terminar Sessão / Alterar )

Imagem do Twitter

Está a comentar usando a sua conta Twitter Terminar Sessão / Alterar )

Facebook photo

Está a comentar usando a sua conta Facebook Terminar Sessão / Alterar )

Google+ photo

Está a comentar usando a sua conta Google+ Terminar Sessão / Alterar )

Connecting to %s