quinta-feira, 20 de outubro de 2016

Modificando Angular JS para aceitar seletores jQuery

Como toda inovação, o framework Angular provocou certas perdas de funcionalidades.

Uma destas perdas foi em relação à instrução "find" do jQuery, ao qual deu o nome de "JQLite".

A alteração

No entanto, podemos restituir o poder ao JQLite do framework Angular JS através de uma pequena modificação, que mostramos abaixo.

Basta procurar a função find do JQLite através de qualquer editor de texto na versão de desenvolvimento:


Abaixo da função "find", inclua o seguinte:


Se o navegador for de uma atualização recente, ele certamente possuirá a instrução "querySelector"

No código

Em sua página que utiliza o Angular, o código será parecido com o seguinte:

<div id="d01" class="d01" ng-app="App" ng-controller="myCtl" ng-init="firstName='John'">

<p>Input something in the input box:</p>
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>
<script>
angular.module('App', []).controller('myCtl', function ($scope, $document) {
angular.element($document).ready(function () {
$document.findsel("#d01").css("backgroundColor", "lightyellow");
});
});
</script>
</div>

Repare que tivemos que fazer a injeção de $document no módulo.





segunda-feira, 19 de setembro de 2016

Google Custom Search limits - Pesquisa personalizada da Google tem limites diários

De mecanismo livre para pesquisa, a Google está começando a impor limites aos seus usuários.

Ao longo do tempo ela vem criando APIs, ou seja, serviços dedicados a determinados campos do conteúdo virtual.

O caso das pesquisas personalizadas (Custom Searches) é algo útil para quem faz pesquisas em um grupo limitado de sites (pois a proliferação absurda do número de sites e de artigos vem se tornando um empecilho perigoso para os leigos) a toda hora.

Ai você vai utilizando e descobre que depois de 100 (cem) pesquisas deste tipo, tem que pagar um valor para a Google. Absurdo. Que história é essa ? Se o Google se tornou uma biblioteca pública, e nós já pagamos os domínios e os provedores, vamos pagar pro Google por quê ? Nós, os internautas, construímos a Google. Se ele se tornou o que é hoje, foi graças a nós.

Parece que teremos, num futuro bem próximo, migrar para outras ferramentas de pesquisa, como Bing da Microsoft, Yahoo, Ask, etc. Ou então, a comunidade livre terá que tomar a frente e fazer um novo, com base na experiência dos já existentes.

Hoje, ao pesquisar um assunto sério, encontramos páginas desde aquelas feitas por pirralhos de 12 anos, até as produzidas seriamente por verdadeiros PhD's.

Os critérios para se filtrar o que é realmente é bom estão mais ou menos descritos no artigo:

Como é um texto bem escrito.

Conclusão

Se não forem tomadas providências, em algum tempo o Google começará a restringir o número de resultados a duas páginas, ou cobrar para mostrar resultados de sites de universidades, ou outros critérios espúrios.

Divulgue este artigo, pois O CONHECIMENTO É LIVRE.

terça-feira, 13 de setembro de 2016

Estrutura básica de uma extensão XUL para o Mozilla Firefox

As extensões Firefox são uma forma de se publicar aplicativos cliente para navegadores.

As extensões do Chrome tem muitas limitações, devido às políticas de proteção e de contabilização do Google. Portanto, se for fazer extensões, faça para Firefox.

Estrutura de diretórios

As extensões apresentam a seguinte estrutura de diretório dentro do Windows:


Função dos diretórios

content - Armazena os arquivos XUL de extensão, bem como bibliotecas JAR e Javascript a que estes arquivos XUL façam referência;
locale - Armazena as constantes, nomes de labels e outros parâmetros que dependem da língua na qual a extensão será utilizada;
skin - Armazena as folhas de estilo (CSS) a serem intercambiadas para adaptação da interface da extensão.

Função dos arquivos

content/Hello.xul - Arquivo funcional principal da extensão. Poderia ter outro nome, mas precisa, obrigatoriamente, levar a extensão XUL;
chrome.manifest - Os desenvolvedores convencionaram chamar este tipo de arquivo de "manifesto", ou seja, a "placa" de referências dos caminhos onde estão os principais arquivos da aplicação. A origem de tal terminologia remonta aos programadores Java;
install.rdf - Contém informações básicas para registro da extensão no Firefox, como nome do projeto da extensão e informações de versão pouco importantes para o funcionamento, mas muito importantes para o controle da evolução da extensão.

Explicação detalhada dos conteúdos

install.rdf

<?xml version="1.0"?>

<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
  xmlns:em="http://www.mozilla.org/2004/em-rdf#">

  <Description about="urn:mozilla:install-manifest">
    <em:id>hello@meyer.com</em:id>
    <em:name>XUL Hello</em:name>
    <em:description>Welcome to XUL!</em:description>
    <em:version>0.1</em:version>
    <em:creator>Meyer</em:creator>
    <em:homepageURL>https://www.dvelopment.com.br</em:homepageURL>
    <em:type>2</em:type>

    <!-- Mozilla Firefox -->
    <em:targetApplication>
      <Description>
        <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
        <em:minVersion>4.0</em:minVersion>
        <em:maxVersion>10.*</em:maxVersion>
      </Description>
    </em:targetApplication>
  </Description>
</RDF>

Como o leitor mesmo pode ver, não existem informações que possam influir no funcionamento da extensão. As mais importantes para o controle do projeto estão destacadas em vermelho. O código em fonte azul corresponde ao Firefox, e NÃO PODE SER ALTERADO.

chrome.manifest

Apesar de levar o nome chrome, este arquivo não carrega em si nenhuma compatibilidade com o navegador deste nome.

content hello content/

Apenas esta linha é necessária em nosso exemplo mínimo de extensão Firefox. Ela associa o "content" (conteúdo) ao caminho content/ do diretório que contém a nossa extensão, a partir da sua raiz.

content/Hello.xul

Este é o nome de um dos arquivos XUL utilizados em nossa extensão e, no nosso caso, o único.

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<window
id="findfile-window"
title="Find Files"
orient="horizontal"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<!-- Other elements go here --> 
<label value="This is some text"/>
</window>

Nesta estrutura de código, as tags Windows delimitam o mesmo objeto Windows que conhecemos do DOM (Document Object Model) do HTML.

Empacotamento da extensão

A extensão precisa ser compactada em arquivo ZIP (marque os diretórios e arquivos do mesmo nível que o diretório content) e sua extensão precisa ser alterada para XPI. Proceda a estas ações. Se não possuir um compactador, instale o 7zip, ou Windows RAR.

Instalação da extensão

Uma vez que você tenha compactado e renomeado o pacote de arquivos da extensão, execute o Firefox. Acione o menu à direita do navegador, e escolha a opção "Complementos".


Na tela seguinte, clique sobre a engrenagem mais à direita da tela.


Escolha a opção de instalação.

Será exibido o diálogo de arquivos do Explorer, e você deverá achar o diretório onde colocou o pacote renomeado para a extensão XPI.


Serão exibidas as mensagens de confirmação.


O Firefox vai avisar que você está tentando instalar um complemento não assinado. Mesmo assim, clique no botão "Instalar".

Se ele se recusar, assim mesmo, acione a configuração do Firefox (about:config).



Clique em "Serei Cuidadoso". Depois localize a chave "xpinstall".

Altere o valor desta opção para false, desta forma o Firefox vai desprezar esta segurança de assinaturas.

Em seguida ao instalar, conforme vinhamos em nosso roteiro, será dado um aviso, para reiniciar o Firefox.


Faça isso.

Teste da extensão

Lembre-se sempre que o teste e a execução desta extensão SÓ PODE SER FEITO NO NAVEGADOR FIREFOX. Muita gente se esquece disso, e perde tempo precioso, achando que fez algo errado, experimentando a extensão em outro navegador.

Digite o seguinte caminho no navegador Firefox:

chrome://hello/content/Hello.xul

e veja o resultado de todo o nosso esforço:


De onde veio esta frase que aparece no navegador ?

A frase veio da tag Label, colocada no arquivo Hello.xul:


E as tags Window delimitam o objeto que define a janela do navegador.


quinta-feira, 1 de setembro de 2016

Como funciona o jQuery - O que ele é - Hacking jQuery - II

Nesta continuação de "Hacking jQuery", vamos modificar a classe jQuery mínima para admitir o reuso de métodos:

tQuery.js

(function( window, undefined ) {

var
// Referência à raiz jQuery(document)
rootjQuery,

// Usa o documento correto de acordo com a chamada (sandbox)
document = window.document,
location = window.location,
core_version = "a.0.0",
init_selector,
jQuery = function( selector, context ) {
// O objeto jQuery é realmente o construtor init 'melhorado'
return new jQuery.fn.init( selector, context, rootjQuery );
}
jQuery.fn = jQuery.prototype = {
// Versão corrente do jQuery
jquery: core_version,

constructor: jQuery,
init: function( selector, context, rootjQuery ) {
var match, elem;
init_selector = selector;
// Manipula: $(""), $(null), $(undefined), $(false)
if ( !selector ) {
return this;
}
},
size: function() {
if( typeof(this) == 'object' ){
var len = 0;
for (var o in this) {
len++;
}
}
this.context = document;
this.size = len; 
return this; 
},
version: function() {
this.versao = this.jquery;
return this;
}
}

window.jQuery = window.$ = jQuery;
jQuery.fn.init.prototype = jQuery.fn;
rootjQuery = jQuery(document);

})( window );

Agora vamos executar o arquivo HTML alterado:

rtQuery.html


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />

<title>jQuery Demo</title>

<script type="text/javascript" src="tQuery.js"></script>

</head>
<body id="b1" name="nb1" OnLoad="inicia();">
<p id="p1" name="np1">xxx xxx xxx</p>
</body>
<script>
function inicia(){
var a = $("#p1").version().size();
}
</script>
</html>

Vamos exibir apenas a fase de debug ao chegar no método "version":


Como "version" devolve "this", que é um ponteiro para a instância jQuery, quando o método "size" é invocado ...


e processado ...


o erro não mais ocorre.

No entanto, existe um erro de concepção. O método "size" deveria ser método de "version", portanto deveria estar dentro da sua definição. Fizemos esta "gambiarra" apenas para mostrar a concepção que possibilita métodos chamarem métodos dentro do objeto jQuery.

Como funciona o jQuery - O que ele é - Hacking jQuery - I

Para explicar o que é, e como funciona o jQuery, reproduzimos aqui um código mínimo do mínimo, com o essencial do essencial para melhor compreendê-lo:

tQuery.js


(function( window, undefined ) {

var
      // Referência à raiz jQuery(document)
      rootjQuery,

     // Usa o documento correto de acordo com a chamada (sandbox)
     document = window.document,
location = window.location,
core_version = "a.0.0",
jQuery = function( selector, context ) {
     // O objeto jQuery é realmente o construtor init 'melhorado'
     return new jQuery.fn.init( selector, context, rootjQuery );
     }
jQuery.fn = jQuery.prototype = {
     // Versão corrente do jQuery
     jquery: core_version,

     constructor: jQuery,
     init: function( selector, context, rootjQuery ) {
         var match, elem;

          // Manipula: $(""), $(null), $(undefined), $(false)
          if ( !selector ) {
               return this;
               }
      },
      size: function() {
      return this.length;
      },
      version: function() {
         return this.jquery;
         }
   }
   window.jQuery = window.$ = jQuery;
   jQuery.fn.init.prototype = jQuery.fn;


})( window );


E o código HTML que chama este objeto (porque realmente é um objeto).

rtQuery.html


<!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
            <title>jQuery Demo</title>
                <script type="text/javascript" src="tQuery.js"></script>
       </head>
       <body id="b1" name="nb1" OnLoad="inicia();">
             <p id="p1" name="np1">xxx xxx xxx</p>
       </body>
       <script>
              function inicia(){
                  var a = $("#p1").version();
                   }
       </script>
</html>

Explicação:


Definimos um breakpoint na linha da instrução da função inicia (var a = $("#p1").version()):

Instanciação da classe jQuery no interior do arquivo tQuery.js
Ao utilizarmos a diiretiva "new", criamos uma nova instância do objeto jQuery.

A classe jQuery tem um protótipo para as funções (fn)
O protótipo da classe possui um construtor (constructor) e seus métodos: init, size e version (em nosso caso reduzido para melhor compreensão).

Como o método chamado foi "init", foi nele que o debug entrou, com o parâmetro "selector" tendo carregado o valor "#p1". O teste "! selector" devolve verdadeiro se nenhum seletor tiver sido fornecido. Como existe um seletor fornecido ("#p1"), 


o processamento pula para a segunda chave, se preparando para retornar. E o retorno se dá na linha posterior ao método "init":
 

O retorno posterior se dará de volta ao html (rtQuery.html):


E como mágica, o processamento avança para o método após o ponto (".") do seletor, ao invés de avançar para a linha 17.


Desta vez, não há nova instanciação da classe jQuery. O método "init", que é uma abstração da classe jQuery, se confunde com ele mesmo, devolvendo a própria instância obtida nos passos anteriores (this). E o processamento vai direto ao método "version" chamado.


E no passo seguinte, o processamento vai para a chave que fecha o método "version". E desta forma,


é devolvido o valor da versão que demos ao jQuery, e o processamento avança para a chave da linha 17 no HTML que provocou a instanciação do jQuery.

É basicamente este o mecanismo e a filosofia do jQuery que utilizamos, e que "quebra tanto o nosso galho".

Uncaught TypeError: $(...). ... is not a function

Vamos demonstrar qual é a natureza dos retornos do jQuery. Vamos tentar reaproveitar métodos do jQuery após um retorno de método. Vamos acrescentar uma chamada ao método "size" na linha 16:

var a = $("#p1").version().size();


Por que este erro ocorreu ?

O método "size" é um método de jQuery. O método 'version" nos devolveu uma string (this.jquery). Quando tentamos usar o método "size" sobre uma string, obtivemos o erro. Mas o debug não avisa, por exemplo que "...version().size is not a string", e sim que "version(...).size is not a function". O debug está se referindo a "version()". O método "version", para possibilitar o reuso do objeto jQuery, deveria devolver um objeto da classe jQuery.













sábado, 6 de agosto de 2016

Configuração Roteador TP-LINK Archer C20 - 5 GHz

Apesar dos provedores de Internet anunciarem a banda larga, se você usa um roteador TP-LINK na frequência normal de 2.4 GHz, continuará com uma operação restrita.

A banda de 2.4 GHz está saturada. Todos os seus vizinhos tem roteadores operando nesta faixa. Neste artigo vamos mostrar as configurações do Roteador TP-LINK Archer C20.

Endereço de Configuração

O Roteador vem de fábrica com o IP 192.168.1.1. Se você é previdente, já deve ter alterado o endereço do modem do seu provedor pelo menos para 192.168.1.4, para que fique distante do default de IP com o qual todos os equipamwntos de rede vem configurados.

Configuração

No menu do Roteador, acesse a opção "Rede" e depois "WAN":


Coloque o endereço no modo estático, e coloque o IP 192.168.1.10. Como dissemos, o endereço do modem já terá sido alterado para 192.168.1.4.

Depois acesse a opção "LAN":


O endereço LAN é o endereço base a ser utilizado pelo Roteador, para que ele, por DHCP. entregue endereços aos equipamentos que se conectarem a ele, via cabo ou Wireless.

Segurança


Marque a opção WPA/WPA2 de segurança, e coloque uma senha no campo com "minhasenha" (em vermelho).

Habilitando o Dual-band

Este roteador opera tanto na banda de 2.4 quanto em 5.2 GHz.


Na opção de "Seleção Dual Band", marque também 5GHz.

Configurando a banda 5GHz

Na opção "Wireless 5GHz",


dê um nome para a rede Wireless 5GHz no campo "Fulano" (em vermelho).

Certifique-se de ajustar o modo em 11a/n/ac, pois o modo "ac" é que permite 5GHz.

LEMBRETE

Lembre-se que apesar da banda de 5GHz ser larga, seu sinal não ultrapassa facilmente paredes, principalmente com canos de água.

sexta-feira, 5 de agosto de 2016

Sombras em CSS3 - CSS3 shadow

O novo CSS, denominado CSS3, possui estilos para dar solução para problemas que antes exigiam o software Photoshop, baixando a velocidade de construção dos sites.

Vejam como é simples fazer sombras agora:

<html>
<head>
<title>Sombra em CSS</title>
<style>
H1 {
font-size:72px;
color:crimson;
font-family:Arial;
}
</style>
</head>
<body>
<H1 style="text-shadow: #B00 4px 6px 4px;">Sombreado</H1>
<H1 style="text-shadow: #A00 4px 6px 4px;">Sombreado</H1>
<H1 style="text-shadow: #900 4px 6px 4px;">Sombreado</H1>
<H1 style="text-shadow: #800 4px 6px 4px;">Sombreado</H1>
<H1 style="text-shadow: #700 4px 6px 4px;">Sombreado</H1>
<H1 style="text-shadow: #600 4px 6px 4px;">Sombreado</H1>
<H1 style="text-shadow: #500 4px 6px 4px;">Sombreado</H1>
<H1 style="text-shadow: #400 4px 6px 4px;">Sombreado</H1>
<H1 style="text-shadow: #300 4px 6px 4px;">Sombreado</H1>
<H1 style="text-shadow: #200 4px 6px 4px;">Sombreado</H1>
<H1 style="text-shadow: #100 4px 6px 4px;">Sombreado</H1>
</body>
</html>

E o produto:



terça-feira, 5 de julho de 2016

Arranjos em Javascript - Tutorial definitivo - (Javascript Arrays)

Este artigo é direcionado a exemplos, pois a Internet tem muita falação e pouca prática, levando os programadores e até analistas a conclusões e usos errados dos Arrays.

Arrays

Formato de dados mais estruturado e de mais fácil acesso iterativo para linguagens.

Arrays no formato de objeto

Como a maior parte dos programadores não aceita mais os Arrays no formato de índice, e sim no formato factível de ser acessado por propriedades, este será o nosso primeiro exemplo.

var a_AMOSTRA =  {
'Caso 01': {'pessoas':3, 'dias':5, 'temperatura':24, 'area':48},
'Caso 02': {'pessoas':3, 'dias':5, 'temperatura':28, 'area':46},
'Caso 03': {'pessoas':3, 'dias':5, 'temperatura':30, 'area':45},
'Caso 04': {'pessoas':3, 'dias':5, 'temperatura':31, 'area':45},
'Caso 05': {'pessoas':6, 'dias':5, 'temperatura':24, 'area':64},
'Caso 06': {'pessoas':6, 'dias':5, 'temperatura':30, 'area':61}
};

Observe:

  1. Os delimitadores de Array e de itens são chaves "{" e "}";
  2. As referências aos itens estão nas tags entre apóstrofos (exemplo 'Caso 01');
  3. As referências aos atributos (ou propriedades, quando se fala em objetos) estão entre apóstrofos;
  4. Não se utiliza a instanciação ( var ___ = new Array ___ );  
Estes itens é que provocam a maior parte das confusões em torno de Arrays em Javascript.

Como se referir aos itens do Array em formato Objeto ?

alert(a_AMOSTRA['Caso 01']['area']);

ou

document.write(a_AMOSTRA['Caso 01']['area']);

As 'tags' são colocadas explicitamente dentro dos colchetes.

Como percorrer os itens do Array em formato Objeto ?

for( caso in oArranjo ){
var arr =oArranjo[caso];
for( item in arr ){
document.write(item+"-"+arr[item]+"&nbsp;");
}
document.write("<br>");
}

Um erro muito comum é achar que o item enumerado guarda o conteúdo. Isto é um engano. Ele é apenas um índice a ser colocado no interior dos colchetes ("[" e "]").

Arrays no formato Objeto sem tags

Apenas para obedecer os requisitos de sintaxe, utilizamos qualquer coisa para nos referirmos aos itens:

var a_SAMPLE =  {
a:{'pessoas':3, 'dias':5, 'temperatura':24, 'area':48},
b:{'pessoas':3, 'dias':5, 'temperatura':28, 'area':46},
c:{'pessoas':3, 'dias':5, 'temperatura':30, 'area':45},
d:{'pessoas':3, 'dias':5, 'temperatura':31, 'area':45},
e:{'pessoas':6, 'dias':5, 'temperatura':24, 'area':64},
f:{'pessoas':6, 'dias':5, 'temperatura':30, 'area':61}
};

As tags a, b, c, d, e e f não precisam estar definidas como variáveis em lugar nenhum do fonte.

Para se referir a um item e percorrer o Array, valem as mesmas providências utilizadas no formato Objeto anterior.

Arrays no formato Objeto com tags indiretas

  var p = 'pessoas';
var d = 'dias';
var t = 'temperatura';
var a = 'area';

var a_TAG =  {
a:{p:3, d:5, t:24, a:24},
b:{p:3, d:5, t:28, a:26},
c:{p:3, d:5, t:30, a:25},
d:{p:3, d:5, t:31, a:25},
e:{p:6, d:5, t:24, a:32},
f:{p:6, d:5, t:30, a:30}
};

As variáveis definidas antes do Array não tem associação direta com o Array em sua definição. Apenas servirão a um artifício para referência aos itens, sem perder seu significado.

Percorrendo o Array com tags indiretas

for( caso in oArranjo ){
var arr =oArranjo[caso];
for( item in arr ){
document.write(eval(item)+"-"+arr[item]+"&nbsp;");
}
document.write("<br>");
}

Nesta enumeração, repare a instrução:

document.write(eval(item)+"-"+arr[item]+"&nbsp;");

A desvantagem deste formato é a de não permitir o acesso a um item específico. Portanto, só deve ser usado quando esta necessidade não existir. Um dos casos é quando se quer utilizar o formato objeto, mas apenas para acesso global aos itens, como no caso de seleção por algumas propriedades.

Formato de Array padrão (não objeto)

É feito utilizando-se os colchetes "[" e "]":

var a_PADRAO =  [
[3, 5, 24, 24],
[3, 5, 28, 26],
[3, 5, 30, 25],
[3, 5, 31, 25],
[6, 5, 24,32],
[6, 5, 30,30]
];

É o mais simples. As strings (entre apóstrofos) podem ser utilizadas como conteúdos.

Percorrendo o Array Padrão

for( caso in oArranjo ){
var arr =oArranjo[caso];
for( item in arr ){
document.write(item+"-"+arr[item]+"&nbsp;");
}
document.write("<br>");
}

Você deve estar se perguntando como se pode percorrer um Array padrão com as mesmas instruções utilizadas para Arrays no formato objeto.

Tal coisa se dá pelo fato de internamente ambos terem o armazenamento de uma forma que permite a recuperação dos valores por iteração.

Fonte completo do Exemplo

<html>
<head>
<script type="text/javascript">
// Definição de Array no formato objeto com "tags" explícitas
var a_AMOSTRA =  {
'Caso 01': {'pessoas':3, 'dias':5, 'temperatura':24, 'area':48},
'Caso 02': {'pessoas':3, 'dias':5, 'temperatura':28, 'area':46},
'Caso 03': {'pessoas':3, 'dias':5, 'temperatura':30, 'area':45},
'Caso 04': {'pessoas':3, 'dias':5, 'temperatura':31, 'area':45},
'Caso 05': {'pessoas':6, 'dias':5, 'temperatura':24, 'area':64},
'Caso 06': {'pessoas':6, 'dias':5, 'temperatura':30, 'area':61}
};
// Definição usando referências sem tags
var a_SAMPLE =  {
a:{'pessoas':3, 'dias':5, 'temperatura':24, 'area':48},
b:{'pessoas':3, 'dias':5, 'temperatura':28, 'area':46},
c:{'pessoas':3, 'dias':5, 'temperatura':30, 'area':45},
d:{'pessoas':3, 'dias':5, 'temperatura':31, 'area':45},
e:{'pessoas':6, 'dias':5, 'temperatura':24, 'area':64},
f:{'pessoas':6, 'dias':5, 'temperatura':30, 'area':61}
};
// Definição usando tags indiretas
var p = 'pessoas';
var d = 'dias';
var t = 'temperatura';
var a = 'area';
var a_TAG =  {
a:{p:3, d:5, t:24, a:24},
b:{p:3, d:5, t:28, a:26},
c:{p:3, d:5, t:30, a:25},
d:{p:3, d:5, t:31, a:25},
e:{p:6, d:5, t:24, a:32},
f:{p:6, d:5, t:30, a:30}
};
var a_PADRAO =  [
[3, 5, 24, 24],
[3, 5, 28, 26],
[3, 5, 30, 25],
[3, 5, 31, 25],
[6, 5, 24,32],
[6, 5, 30,30]
];
// Exibe um item específico
alert('Amostra:'+a_AMOSTRA['Caso 01']['area']);
alert('Tag:'+a_TAG[2][a]);
// Rastreia os itens e mostra o parâmetro area
for( caso in a_AMOSTRA ){
alert(a_AMOSTRA[caso]['area']);
}
// Rastreia os itens e mostra os subítens
function showInputLayer(oArranjo){
for( caso in oArranjo ){
var arr =oArranjo[caso];
for( item in arr ){
document.write(item+"-"+arr[item]+"&nbsp;");
}
document.write("<br>");
}
}
// Rastreia os itens e mostra os subítens com as tags indexadas
function showInputLayer1(oArranjo){
for( caso in oArranjo ){
var arr =oArranjo[caso];
for( item in arr ){
document.write(eval(item)+"-"+arr[item]+"&nbsp;");
}
document.write("<br>");
}
}
document.write('<h4>Array no formato objeto com "tags" explícitas</h4>');
showInputLayer(a_AMOSTRA);
document.write('<h4>Array no formato objeto sem "tags" explícitas</h4>');
showInputLayer(a_SAMPLE);
document.write('<h4>Array no formato objeto com "tags" indiretas</h4>');
showInputLayer1(a_TAG);
document.write('<h4>Array no formato padrão</h4>');
showInputLayer(a_PADRAO);

</script>
</head>
<body>
</body>
</html>

Conclusão

Façam bom proveito