Objota O mundo orientado a objetos

Marcação de dados com: XML e JSON

Posted on dezembro 4, 2010

Posted by Rodrigo Ireno

Olá leitores do objota, há algum tempo já queria escrever a respeito de XML e JSON. Sendo os dois tipos de linguagem de marcação mais usados nas transferências de dados entre plataformas diferentes (sistemas de linguagens distintas), ou para uma simples aplicação com JavaScript.

Até em um comentário de um leitor citei que iria escrever sobre o assunto, porém era um título diferente do atual. Então chega de conversa 🙂

O FORMATO XML

Vamos começar pelo formato XML. Este formato de dados foi consolidado pelo W3C, sendo iniciados estudos em meados das décadas de 1990. O objetivo era criar um tipo de formato que poderia ser lido por software e que tivesse flexibilidade e simplicidade, visando, entre outras coisas:

  • Possibilidade de criação de tags (você é quem cria as tags)
  • Concentração na estrutura da informação e não em sua aparência

Ele segue um método hierárquico de formatação. Assim sendo possui tags-pai e tags-filho, e assim por diante. A grande vantagem de utilizá-lo é o fato de ser tão consolidado pelas diversas tecnologias de hoje, como navegadores e editores de texto que já reconhecem sua estrutura destacando o que é tag do que é conteúdo. Na própria Wikipédia exite uma série de relatos a respeito de suas vantagens e desvantagens.

Estrutura XML

O XML é constituído da seguinte forma:

  • Cabeçalho
  • Tag-Root

Isso é o mínimo para que seu XML seja considerado um XML. Vejamos um exemplo de cabeçalho:

<?xml version="1.0" encoding="ISO-8859-1"?>

Version: A sua atual versão é a 1.0, isso implica no modo como os interpretadores farão a leitura deste.

Encoding: Isso informa ao interpretador (software que fará a leitura) qual o tipo de padrão de caracteres utilizados no conteúdo deste xml. O Padrão popular internacional é o UTF-8 e o nacional é o ISO-8859-1.

A tag ROOT é uma tag que engloba todas as tags do seu XML, sendo sua função mostrar onde é o começo e o fim do seu XML. Um exemplo seria a tag <html> do padrão HTML, que indica onde inicia o conteúdo de uma página web, e </html> indica onde é o fim.

Agora Veja um exemplo de XML:


<?xml version="1.0" encoding="ISO-8859-1"?>
<populacao>
	<pessoa>
		<idade>23</idade>
		<nome>Henrrico<nome>
	</pessoa>
	<pessoa>
		<idade>32</idade>
		<nome>Maria<nome>
	</pessoa>
</populacao>

É possível utilizar comentários como no HTML:
<!- Meu comentário -->

E por vezes precisamos introduzir em nosso XML algum tipo de caracter especial, como por exemplo o próprio abre tag<”. Mas como fazer isso?

É preciso utilizar o comando CDATA da seguinte forma:


<?xml version="1.0" encoding="ISO-8859-1"?>
<mat>
	<expressao>
	<![CDATA[ 350 > 50 ]]>
	<expressao>
</mat>

Obs: o conteúdo da tag expressao é somente: “350 > 50”

O FORMATO JSON

JSON, um acrônimo para “JavaScript Object Notation”. Formato de intercâmbio de dados computacionais. Muito popular graças ao JavaScript, o qual permite criar um analisador JSON facilmente utilizando a função eval(). Mas como isso é possível?

Simples. Esta função é capaz de transformar string em comandos reais, sendo assim se eu escrever um objeto em formato JSON, e aplicar a função eval() nele. Poderei então utilizá-lo como se fosse um objeto iniciado com uma função new (comando padrão na inicialização de objetos).  Vejamos um exemplo abaixo.


{ MinhaLista : [
	{nome: "João",fone: "11-8579-6541" },
	{nome: "Pedro", fone: "12-6854-8452"}

	]
}

Agora vejamos como acessar esses dados com javascript:


var StringDeObjeto = '{MinhaLista : [{nome: "João",fone: "11-8579-6541" },{nome: "Pedro", fone: "12-6854-8452"}]}';

objeto = eval('('+StringDeObjeto+')');

alert( "Nome :"+objeto[0].nome+
       "\nFone :"+objeto[0].fone+"\n\n"+
       "Nome :"+objeto[1].nome+
       "\nFone :"+objeto[1].fone );

Cuidado, existe diferença entre processar um json no javascript e processar uma string com conteúdo em formato json. Veja que no caso acima usei uma string, por tanto tive que usar a função eval().

Sendo um formato bem mais simples que o XML, e mais enxuto. Acabou se tornando uma boa solução para os peixes grandes da web, como YAHOO e GOOGLE que servem milhões de usuários todos os dias.

Existem pessoas que persistem na ideia de que JSON é melhor do que XML, pois é mais simples e por tanto mais rápido de processar. Porém convenhamos, há espaço para todos. Afinal cabe ao profissional saber quando usar uma chave de fenda ou uma faca para resolver um problema.

Bom galera é isso, sei que existem muitos formatos de marcação de dados, porém esses são os mais populares e largamente utilizados por diversos tipos de sistemas. Neste artigo existe um exemplo de uso  do formato JSON.  Espero que tenha enriquecido um pouco o seu conhecimento! E futuramente iremos ver mais exemplos que façam uso destes formatos.

valew 😉

Classes e Objetos em JavaScript

Posted on outubro 31, 2010

Posted by Rodrigo Ireno

O objetivo deste artigo é apenas mostrar a curiosa forma que toma uma classe feita em javascript puro.

Muitos usuários da biblioteca prototype não fazem questão de fazer desta forma afinal, nem sempre é viável. Para quem não sabe prototype é uma biblioteca que maximiza o poder de orientação a objetos do javascript. Porém no nosso caso presente, não a utilizaremos.

Veremos algumas coisas básicas comparando uma classe em php, por exemplo, e a classe em javascript.

A primeira coisa que podemos ver é que o JS não possui um envoltório chamado class para isso ele usa function.

Php:

class MinhaClasse{
 	//Aqui o conteúdo
}

JavaScript:

function MinhaClasse(){
 	//Aqui o conteúdo
}

Ótimo, e o construtor da classe. Em php se utiliza um método com o mesmo nome da classe ou __constructe. E em JS..  não tem!! Isso mesmo. O conteúdo do construtor fica mergulhado juntamente com os atributos.

Php:

class MinhaClasse{
        private $nome;
 	public function MinhaClasse($novoNome){
 		$this->nome = $novoNome;
 	}
}

JavaScript:

function MinhaClasse(novoNome){
  	var nome;
        this.nome = novoNome;
}

Vejamos agora uma declaração  dos famosos métodos get e set:

Php:

class MinhaClasse{
        private $nome;
 	public function MinhaClasse($novoNome){
 		$this->nome = $novoNome;
 	}
        public function getNome(){
 		return  $this->nome ;
 	}
        public function setNome($novoNome){
 		$this->nome = $novoNome;
 	}
}

JavaScript:

function MinhaClasse(novoNome){
  	var nome;
        this.nome = novoNome;
        this.getNome=function(){
 		return this.nome;
 	};
        this.setNome=function(otroNome){
 		this.nome = otroNome;
 	};
}

Agora vamos ver uma peculiaridade do javascript de passar uma função via parâmetro, ou dados no formato JSON. Veja como é simples:

Função via parâmetro:

function hello(){
 	document.write("Oi objota!");
}
function executaPraMim(funcaoQualquer){
 	funcaoQualquer(); //pronto! Ele chama a função
}

//passo uma função já implementada ou..
executaPraMim(hello());

//implementa-se no ato da parametrização
executaPraMIm(function(){
 	document.write("Essa eu implementei agora!");
});

Muito bacana não é!

Agora vejamos um exemplo bem simples de uma função que recebe dados no formato JSON.


function mostra(dados){
	Alert("O nome é: "+dados.nome+"\nemail: "+dados.email);
}
//vejamos a chamada
Mostra({nome: "Objota", email: "objota@teste.com.br"});

Neste artigo vimos como implementar classes, receber funções via parâmetro e dados no formato JSON. Neste artigo quis mostrar algumas peculiaridades do JS, nada em especial. Somente algumas dicas aos curiosos. Abaixo temos os exemplos completos coloque os dois arquivos no mesmo diretório e inicie a índex.html.

É isso! Até a próxima. Dúvidas, postem aí! 😉

Classes.js


//Classe Carro
function Carro(){
    var placa;
    var cor;

    this.getPlaca=function(){
        return this.placa;
    };

    this.setPlaca=function(novaPlaca){
        this.placa = novaPlaca;
    };
    this.getCor=function(){
        return this.cor;
    };

    this.setCor=function(novaCor){
        this.cor = novaCor;
    };
}

//Classe Pessoa
function Pessoa() {

    //@interface
    var nome;
    var idade;
    var email;
    var carro;
    //@end

    //@constructe
    this.carro = new Carro();
    this.carro.setPlaca(7520);
    this.carro.setCor("Amarelo");
    //@end

    //@implementation
    this.getCarro=function(){
        return this.carro;
    };

    this.getNome=function(){
      return this.nome;
    };

    this.getIdade=function() {
      return this.idade;
    };

    this.getEmail=function() {
      return this.email;
    };

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

    this.setIdade=function(_idade) {
      this.idade = _idade;
    };

    this.setEmail=function(_email) {
      this.email = _email;
    };

    this.mostraValores=function() {
      return 'Nome: '+this.nome+
             '<br/>Idade: '+this.idade+
             ' anos<br/>Email: '+this.email+
             '<br/>Carro:<br/>* Placa:'+this.carro.getPlaca()+
             '<br/>**Cor: '+this.carro.getCor();
    };

    //Recebe uma função por parâmetro e executa
    this.executa=function(i,funcao){
          if(i > 0)
          funcao();
    };

    //Recebe dados no formato JSON via parâmetro
    this.mostraJson=function(dados){
          return 'Id:'+dados.id_conteudo+'<br/>Nome: '+dados.nome;
    };
    //@end
}

index.html


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Classes em javascript</title>
<script type="text/javascript" src="Classes.js"></script>
</head>

<body>
<script type="text/javascript">
  var Objota = new Pessoa();

  Objota.setNome('Objota - POO');
  Objota.setIdade(21);
  Objota.setEmail('email@objota.com.br');

  document.write(
    Objota.mostraValores()
  );
  document.write(
    Objota.getCarro().getPlaca()
  );

  //Altera placa do meu atributo carro, que é um objeto!
  Objota.getCarro().setPlaca(5051);

  //Passando função por parâmetro
  Objota.executa(1,function(){
      Objota.setNome('Rodrigo I.O.');
      Objota.setIdade(22);
      Objota.setEmail('bass_oliveira@hotmail.com');

      document.write(Objota.mostraValores());
  });

  //Passo dados no formato JSON via parâmetro {label: valor}
  document.write(Objota.mostraJson({id_conteudo: 50, nome: 'Manezinho'}));
</script>
</body>
</html>