Esta é a forma como a especificação DOM define um “DOM”:

O Document Object Model (DOM) é um Application Programming Interface (API) para HTML válido e documentos XML bem formatados. Ele define a estrutura lógica dos documentos e o modo como um documento é acessado e manipulado.

Em outras palavras, o DOM é uma forma padrão para permitir que as linguagens de programação interajam com documentos HTML / XML. O W3C fornece, o que é chamado de linguagem de vinculações, para o ECMAScript. Isto significa que as funcionalidades definidos na especificação DOM foram implementadas nessa linguagem.

ECMAScript é uma “uniformização” da língua (script) dos “homens das cavernas” – Netscape JavaScript e Microsoft JScript para que todos os browsers possam compreender instruções escritas usando o ECMAScript.

Agora, existem três grandes “dialetos” do ECMAScript: JavaScript (Firefox / Chrome / Safari), JScript (IE), e ActionScript (Adobe Flash / Flex). Estes são chamados dialetos como suporte a código escrito antes da normalização e fornecem alguns recursos não disponíveis no ECMAScript ou em outros dialetos.

Os navegadores fornecem uma implementação das interfaces do DOM que permite ECMAScript (ou dialetos suportados) interagirem com o DOM de um documento XML/HTML. Assim, a maioria dos browsers decentes, lançado conforme os padrões, dizem qual ECMAScript é suportado para cada versão do seu navegador.

O DOM de uma página HTML tem uma “árvore-como estrutura” quando visualizadas. É importante notar que o DOM não representa o conteúdo do HTML, mas representa apenas objetos através dos quais o conteúdo pode ser acessado. Esses objetos são modelados após a marcação que existe na página HTML. As relações, funções, comportamentos e atributos desses objetos são identificados pelo DOM.

Bom, é isso! Você normalmente não precisa de saber sobre interfaces DOM principalmente se você trabalhar com uma biblioteca JavaScript. Mas se você estiver interessado, Quirksmode (http://www.quirksmode.org) tem uma excelente introdução ao DOM.

Em meio às tecnologias para troca de dados e comunicação entre aplicações pela web como REST, SOAP, WSDL etc, se destacam também as APIs que fornecem dados com simples requisições http diretamente do site via browser, sem a necessidade de processamento do lado do servidor pelo cliente do serviço. Para esses casos temos o JSONP como uma alternativa “bem em conta” para resolver problemas conhecidos. O objetivo desse post é dar uma introdução do que é e como usar o JSONP.

AJAX vs JSONP

Tecnicamente, JSONP não é AJAX, vamos a uma explicação bem breve da diferença:

AJAX se trata de requisições assíncronas por meio dos objetos XMLHttpRequest e XMLHttpResponse, que trafegam dados no formato XML ou texto puro. Esses dados são manipulados pelo programa javascript, que finalmente monta seus trechos de html sem a necessidade do recarregamento da página.

Já o JSONP requisita dados de forma assíncrona, assim como o AJAX, porém não utiliza os objetos XMLHttp e  só trabalha com objetos no formato JSON.

JSON – JavaScript Object Notation

Formato de dados que vem sendo fortemente utilizado para transporte de dados entre aplicações, principalmente web. Está ganhando seu espaço devido a sua simplicidade de implementação e leveza. É um subconjunto das notações de objetos javascript. Além disso, a manipulação dos dados em um objeto JSON requer um parse simples (usando o método eval do javascript) e não se faz necessária a navegação por DOM entre os nós e atributos de um XML, e por isso a preferência pelo JSON ao invés de XML para ajax na web.

Same Origin Policy

Existe uma limitação para o uso do Objeto XMLHTTPRequest no que se trata de requisições entre diferentes sites. Existe um padrão de segurança, implementado por linguagens de programação, nesse caso o javascript, chamado Same Origin Policy, ou Política de Mesma Origem. Essa recomendação de segurança impede que um documento leia ou envie informações para outra origem.

São considerados de origens diferentes quaisquer documentos que estejam em domínios diferentes, portas diferentes ou que utilizem protocolos de comunicação diferentes entre si.

Considerando a url: “http://www.afronteirafinal.com/”, podemos ter requisições que irão ter sucesso ou falhar nas seguintes situações:

JSONP – JSON with Padding

JSONP é entendido como um “pseudo-protocolo” que permite realizar requisições http e trafegar dados no formato JSON entre documentos de origens diferentes.

Como funciona:

A implementação do JSONP e bastante simples, porém é necessário que o serviço responsável pela entrega os dados forneca a opção de entrega na estrutura necessária para que os dados possam ser manipulados.

Não existem restrições para o carregamento de imagens e scripts de outras origem, por meio do atributo “src” das tags. A técnica por tras do JSONP se aproveita dessa possibilidade para carregar scripts externos conforme a necessidade, manipulando o DOM da página.

O que faz acontecer o JSONP é a inclusão de uma TAG “script” no header “<head>” da página. Essa tag “script” recebe um atributo “src” apontando para o site externo, que responde objetos no formato JSON , esse resultado é “parseado” e fica disponível para manipulação via JavaScript.

O que é o “padding”?

Padding ou prefix é o nome passado na requisição ao serviço, para que na resposta o método envolva os dados em formato JSON após a resposta. Quando a requisição é feita dessa forma:

<script type="text/javascript" src="http://domain1.com/getjson?jsonp=parseResponse" target="_blank"></script>

A palavra “parseResponse” será a o nome da função que envolverá o json, como um callback. O resultado será algo parecido com isso:

parseResponse({“name”:”Jujuzinho”, ”idade”:10, brinquedos:[“bola”,”pipa”,”ioiô”]})

Você, como um esperto desevolvedor, já terá declarado esse método (parseResponse) em seu programa, e este saberá como sabiamente utilizar os dados recebidos.

Suporte nos frameworks

Os frameworks JavaScript geralmente dão um bom suporte às implementações do JSONP, resolvendo a maioria das questões que teríamos que nos preocupar fazendo tudo “na unha”.

No caso do jQuery, ele abstrai as particularidades entre jsonp e ajax e incorpora o JSONP com mais um formato de dados para o seu objeto Ajax.

Em caso de dúvidas, primeiro procure a documentação do framework porque certamente ele trará informações de como implementar jsonp sem mais traumas.

No próximo episódio…

No próximo post sobre o assunto falaremos sobre o futuro. Como será feito o transporte de dados pela web. Protocolos de comunicação de verdade para rodar no browser. Que projetos já estão em andamento e como eles poderão resolver problemas que travam o avanço da comunicação entre apps web.

O QUE É SVG?

SVG é uma linguagem para descrever gráficos bidimensionais e aplicações gráficas em XML. Alguns exemplos de SVG são: o logo da Wikipedia (http://upload.wikimedia.org/wikipedia/commons/7/77/Wikipedia_svg_logo.svg) e o “Hello World” do SVG chamado de “Tiger” (http://www.amplesdk.com/examples/svg/tiger). Veja o fonte desses dois arquivos SVG para ver como SVG parece.

Demo SVG:

<svg xmlns:svg="http://www.w3.org/2000/svg"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 200 100"
  width="200px" height="100px">
  <circle cx="50" cy="50" r="30"
  style="stroke:none; fill:#ff0000;"/>
  <g transform="translate(100, 20) scale(1.65)">
  <polygon points="36 25, 25 36, 11 36, 0 25,
  0 11, 11 0, 25 0, 36 11"
  style="stroke:none; fill:#0000ff;" />
  </g>
  <rect x="60" y="20" height="60" width="60"
  style="stroke:none; fill:#00ff00;
  fill-opacity: 0.5;" />
</svg>

O QUE É CANVAS?

A especificação do HTML 5 define da seguinte forma: “Elemento de tela que representa um processamento gráficos “bitmap” para gerar imagens, gráficos, jogos através de JavaScript”.

Vladimir Vukićević da Mozilla, em 2006, deu uma boa explicação sobre as diferenças entre o SVG e Canvas:

- SVG é baseado em XML. Isto significa que, cada elemento está disponível no DOM SVG (útil quando você deseja anexar os manipuladores de eventos javascript para um elemento). Canvas não é baseado em XML.

- Canvas é processado pixel por pixel. SVG é um monte de vetores e precisa ser manipulado como um grupo de formas. Uma analogia no mundo Photoshop seria, criar um retângulo usando a “ferramenta forma” contra usar o “PaintBrush”.

Demo Canvas:

E aqui está o JavaScript que o criou o desenho:

function drawSimpleCanvas() {
 var canvas =
 document.getElementById("simpleCanvas");
  if (canvas.getContext) {
  var ctx = canvas.getContext("2d");
  ctx. (); // the circle
  ctx.fillStyle = "#ff0000";
  ctx.arc(50, 50, 30, 0, 2*Math.PI, true);
  ctx.closePath();
  ctx.fill();
  ctx.save();
  // move and resize the octagon
  ctx.translate(100, 20);
  ctx.scale(1.65, 1.65);
  ctx.fillStyle = "#0000ff";
  ctx.beginPath();
  ctx.moveTo(36, 25); ctx.lineTo(25, 36);
  ctx.lineTo(11, 36); ctx.lineTo(0, 25);
  ctx.lineTo(0, 11); ctx.lineTo(11, 0);
  ctx.lineTo(25, 0); ctx.lineTo(36, 11);
  ctx.closePath();
  ctx.fill();
  // restore graphics as they
  // were before move and resize
  ctx.restore();
  ctx.fillStyle = "#00ff00";
  ctx.globalAlpha = 0.5;
  ctx.beginPath();
  ctx.rect(60, 20, 60, 60);
  ctx.closePath();
  ctx.fill();
 }
}

QUEM VAI GANHAR?

Mesmo que sejam completamente diferentes na sua natureza e finalidade, há várias coisas que pode ser feito usando “Canvas” e “SVG”. A recente popularização do elemento “Canvas” parecem para algumas pessoas a morte do SVG. Mas pelo que notei está longe da verdade.

O “Canvas” é tão bom como uma imagem – mas ele não manipula pixel por pixel. Neste momento, elemento Canvas não suporta os “manipuladores” de eventos (por exemplo, ter um retângulo 20x60px dentro de um canvas que seja clicável). Já com o SVG isso é possível.

Canvas em seu estado “natural” não é acessível. O SVG, porém, é bastante acessível.

No entanto existe diferenças significativas de desempenho entre Canvas e SVG. O resultado do experimento descrito no link (http://www.borismus.com/canvas-vs-svg-performance) é que: Canvas é mais adequado para um “gráficos intensivos” onde o objeto são os redesenhos com freqüência (como um jogo), enquanto o SVG é melhor para aplicações que envolvem grandes áreas de processamento (como Google Maps).

POSSO USÁ-LOS AGORA?

Sim, pode. Existem muitas iniciativas para permitir que os navegadores que não suportam SVG ou Canvas tornarem-se “usáveis” por outros meios. O Google tem um impressionante projeto SVG Web (http://code.google.com/p/svgweb/) que usa o Flash para renderizar SVG em navegadores que não suportam SVG nativamente. Para Canvas, o Google tem uma biblioteca “explorecanvas” (http://code.google.com/p/explorercanvas/) que utiliza VML (ou Silverlight) para processar os elementos Canvas (basta incluir o arquivo excanvas.js, e ele deve funcionar) no Internet Explorer.

ENTÃO… QUEM GANHA?

Ambos. Estas é uma fase fantástica para SVG e Canvas. Finalmente temos uma alternativa natural para o “Flash” e animação de necessidade básica. Mantenha seus olhos abertos no “mailing list” do “W3C HTML Working Group” (http://lists.w3.org/Archives/Public/public-html/) para as últimas notícias.

A palavra “Deficiente visual” é abrangente demais – podemos falar de daltônicos, míopes (que é meu caso, por exemplo), hipermétropes, fotofóbicos e etc, e não é objetivo falar sobre tudo isso nesse artigo. Logo, acho que usar a palavra “cego” (que não vejo por onde possa ser ofensiva) define muito bem o tipo de usuário com o qual estamos preocupados.

Por que essa preocupação? Veja bem, isso não é “bondade”, diria até que está mais para uma obrigação. Além, é claro, de permitir igual acesso ao máximo de pessoas possível, lembre-se que é mais um recurso que pode aumentar o número de usuários e, por consequência, fideliza-los.

Internet acessível

Há toda uma gama de recursos atualmente que auxiliam pessoas com necessidades especiais a ter acesso à internet. Estes aparatos podem variar de simples varinha para auxiliar pessoas com movimentos restritos até complexos hardwares para cegos-surdos que convertem textos para braile.

No caso específico dos cegos, o recurso mais comum é o Screen Reader – que nada mais é do que um programa que converte palavras para áudio. Infelizmente, segundo um vídeo no Webaim, percebe-se a grande maioria dos websites não é escrito de forma que possa ser facilmente compreendido por estas ferramentas.

Acessibilidade: por onde começar?

Acima de tudo, acessibilidade tem em seu princípio a regra de ouro de qualquer programa ou aplicação web, a regra KISS! (Keep it simple, stupid! – ou em tradução livre “mantenha isso simples, estúpido!”). Quanto mais robusto e simples o seu código, melhor a qualidade do texto “narrado” pelo Screen Reader. Evite usar scripts complexos no corpo da página, gambiarras que sujem o código (em especial POGs de crossbrowser) e atributos desnecessários.

Seu site precisa ser navegável via teclado

Um cego nunca usará o mouse para navegar uma vez que ele não teria como saber onde posicionar o cursor, o que o obriga a navegar basicamente usando o TAB e enter do teclado. Pode parecer estúpido citar isso aqui uma vez que, à primeira vista, parece um pensamento óbvio – mas é fato que são poucos os desenvolvedores e designers param e pensam a respeito das implicações que isso traz para a interface, tanto no design quanto na construção html/css.

Linearidade

Quando construir a página certifique-se que todo o conteúdo está disposto de forma linear, de forma que com o css desabilitado o texto esteja sequencial. Muitas vezes, por questão de facilitar o alinhamento crossbrowser, é comum inverter dois boxes de posição e ajusta-los via css. Isso faz com que o Screen Reader leia boxes de forma invertida também.

O melhor teste para ver se a linearidade está correta é desabilitar o css do Browser e checar como o texto se alinha na página – o ideal é que os boxes fiquem um abaixo do outro.

Vá direto ao ponto

Esta é a coisa mais simples que pessoas poderiam fazer para melhorar a acessibilidade de um site e que infelizmente não é difundida o suficiente: ao montar a página coloque no topo um link “ir direto para o conteúdo” e linka-lo à uma ancora no ponto que o texto começa. Este link não necessariamente precisa ter visual, ele pode ser escondido de forma que só é acessivel pelo screen reader. Dica: eu não tenho certeza se os screen readers mais modernos entendem quando o bloco está com “display:none”, então, por via das dúvidas, uma sugestão de código para esconder este link é o seguinte:

.escondeLink {

position:  absolute;

display:block;

margin-top:  -4000px;

}

Repare que desta forma você não “apagou” o link da página, somente tirou-o da área visual do browser.

O ideal para aplicação desta ancora é que ela esteja logo após a abertura da tag BODY. Um exemplo de como deve ser usado pode ser visto no próprio http://www.webaim.org .

Outra preocupação para não ter problema com os robôs do google, é fazer uma indicação explícita que esses links não devem ser indexados, já que as âncoras podem ser interpretadas como uma nova URL:

<a rel="nofollow" href="http://afronteirafinal.com#conteudo">
A Fronteira Final
</a>

Cuidado com chamadas nos links e comandos JavaScript

Esta regra é similar à aplicada a SEO: evite criar links que não deixem claro seu destino. Evite ao máximo “clicando aqui”, “clique”, etc.

Sempre dê preferência por ser específico, usando coisas como por exemplo “Conheça o site A Fronteira Final” à “Conheça o site a fronteira Final clicando aqui“. Cegos e buscadores agradecerão por este simples cuidado.

Outra coisa a respeito dos links é que eles TEM QUE APONTAR PARA ALGUM LUGAR. Evite chamar funções javascript nos links pois isso tende a confundir os Screen Readers e outros softwares de interpretação. E lembrando: dependendo da forma como o comando JS responde, pode ser que ele iniba a navegação via teclado.

Efeitos OnMouseOver e OnMouseOut

Só para enfatizar o tópico anterior, eventos relacionados a ações do mouse estão entre os grandes vilões da acessibilidade. Tenha sempre em mente que estes dois comandos ou qualquer outro evento relacionado diretamente à captura de mouse devem ser descartados se afetarem a navegação via teclado ou proporcionarem qualquer tipo de informação que só possa ser assimilada de forma visual.

Alt nas imagens

Outra regrinha que também vale para SEO: sempre coloque a descrição correta nas imagens do seu site de forma clara e concisa. Escrever “Circo” ao invés de “Foto do Cirque du Soleil em apresentação no Morumbi” é algo que pode fazer muita diferença quando você não tem a referência visual.

Cor/imagem como informação

Evite ao máximo usar qualquer informação que dependa de cor, imagem ou animação para compreensão plena do texto. Se não houver como escapar, tente criar algum recurso textual (alt, legenda, um parágrafo falando o que é o signo acima) que amenize ao máximo este problema. Tente usar este tipo de recurso apenas no ambito da estética.

Tabelas e formatos especiais

Evite a todo custo tabelas complexas. O Screen Reader vai tentar le-la da esquerda para a direita, ficando difícil de compreender o tipo de conteúdo que ela contém.

Outro cuidado é com formatos diferenciado como os Microformatos. Pode usar sem medo, desde que os Microformatos sejam aplicados de forma correta.

Tabelas, quando necessárias, devem ser escrita de forma semanticamente correta para que o Screen Reader, evitando qualquer confusão para a interpretação de Screen Readers ou qualquer outro recurso. Veja o exemplo abaixo:

<table><caption>texto</caption>
<thead>
<tr>
<th> texto</th>
<th> texto</th>
<th> texto</th>
<th> texto</th>
</tr>
</thead>
<tfoot>
<tr>
<th> texto</th>
<th> texto</th>
<th> texto</th>
<th> texto</th>
</tr>
</tfoot>
<tbody>
<tr>
<th> texto</th>
<td>texto</td>
<td>texto</td>
<td>texto</td>
</tr>
<tr>
<th> texto</th>
<td>texto</td>
<td>texto</td>
<td>texto</td>
</tr>
<tr>
<th> texto</th>
<td>texto</td>
<td>texto</td>
<td>texto</td>
</tr>
</tbody>
</table>

Outro formato que merece cuidado é o formulário, que deve ter todos os campos, labels e teclas de acesso nos lugares corretos.

<form id="form" method="post" action="#">
<fieldset>

<legend>Dados pessoais</legend>
<label for="nome">Nome</label>
<input id="nome" name="nome" type="text" title="Nome" alt="Nome" tabindex="1" accesskey="n" />
<label for="email">E-mail</label>
<input id="email" name="email" type="text" title="E-mail" alt="E-mail" tabindex="2" accesskey="e" />
</fieldset>
<fieldset>

<legend>Destinatário</legend>
<label for="departamento">Selecione o departamento</label>
<select id="departamento" name="departamento" title="Departamento" tabindex="3">
<optgroup label="Departamento 01">
<option value="nomefunc01" title="Nome do funcionário 01">Nome do funcionário 01</option>
<option value="nomefunc02" title="Nome do funcionário 02">Nome do funcionário 02</option>
</optgroup>

<optgroup label="Departamento 02">
<option value="nomefunc01" title="Nome do funcionário 01">Nome do funcionário 01</option>
<option value="nomefunc02" title="Nome do funcionário 02">Nome do funcionário 02</option>
</optgroup>
</select>
</fieldset>
<fieldset>
<legend>Mensagem</legend>

<label for="mensagem">Escreva sua mensagem</label>
<textarea id="mensagem" name="mensagem" cols="100" rows="10" title="Escreva sua mensagem" tabindex="4" accesskey="m"></textarea>
<input id="enviar" name="enviar" type="submit" value="Enviar" title="Enviar" alt="Enviar" tabindex="5" accesskey="s" />
</fieldset>
</form>

Para saber mais

Seguindo essas regras simples a qualidade do seu site aumentará bastante mas, como em tudo que se relaciona com internet, é um assunto “saco sem fundo”, daqueles que quanto mais você estuda mais tem a estudar. Alguns sites para procurar mais informação à respeito:

http://www.webaim.org/ – citado duas vezes no texto, é uma organização focada em acessibilidade e possuí material vastíssimo sobre o assunto.

http://brasilmedia.com/Acessibilidade-na-Web.html – A Brasil Média pegou parte do material do Webaim e verteu para o português.

http://www.acessibilidadelegal.com/ Um bom site em português também, mas este com produção própria de artigos. Vai um pouco mais fundo nos tópicos levantados neste artigo.

http://www.w3c.br/index-3dez-1.htm – Quer entender como um cego navega? A W3C lançou um hotsite que simula esta experiência.

http://imasters.uol.com.br/artigo/12814 – Ótimo artigo de Horácio Soares sobre como realizar os testes de usabilidade, com vários links e referências de programas, validadores e sites com orientações valiosas.

A versão 1.4, lançada no dia 14 de Janeiro traz muitas novidades interessantes, além de aperfeiçoamentos que ainda precisavam ser feitos. Uma boa melhorada na performance dos scripts fazem essa versão ainda mais competitiva nos aspectos em que perdia para outros grandes frameworks do mercado (ver comparativo de performance entre os frameroks js) aqui ou aqui.

Muitos metodos comuns tiveram melhorias consideráveis de performance nesta nova versão, entre esses estão: css(), attr(), addClass(), removeClass(), hasClass(), html(), remove(), empty() … e muitos outros.

Em varios casos eles citam aumentos de desempenho que chegam superam em até 4x a implementação da versão anterior, muito dessa melhora se obteve atraves da refatoração do código.

As mudanças de performance dos scripts foram muito consideráveis, alguns métodos ganharam “poderes” que antes não tinham, vale a pena dar uma olhada no changelog para conferir métodos que ganharam novas possibilidades de assinaturas.

O único aspecto negativo que encontramos até agora foi o peso da nova versão, agora com 23 kb (Minified,GZIP), contra os 19kb(Minified, GZIP) da sua versão antecessora (v 1.3.2). Acreditamos ser até uma mudança razoável se analizarmos o número de implementações e re-escritas que foram feitos para a nova versão.

Vale destacar algumas das muitas novidades dessa versão. Aos poucos vamos listando mais métodos interessantes:

detach()

O método “detach” armazena o elemento selecionado em uma variável para uso posterior, e o remove da árvore DOM. Funciona de maneira similar ao já existente método “remove”, porém mantendo uma referência para ele sem destruir. Resumidamente ele “recorta(destaca)” um fragmento de html para ser utilizado em outro ponto do código.

Ex:

<span class="origem">

    <p>Item 1</p>

    <p>Item 2</p>

    <p>Item 3</p>

    <p>Item 4</p>

    <p>Item 5</p>

</span>

<span class="destino"></span>

<input type="button" value="Recortar" class="btnRetirar" />

<input type="button" value="Colar" class="btnAdicionar" />

<script src="jquery-1.4.js" type="text/javascript"></script>

<script type="text/javascript">

    $().ready(function() {

        var itens

        $(".origem p").click(function() {

            $(this).addClass("selecionado")

        })

        $(".btnRetirar").click(function() {

            itens = $(".origem .selecionado").detach();

       })

       $(".btnAdicionar").click(function() {

           itens.appendTo(".destino")

           itens = null

       })

    })

</script>

isPlainObject()

Verifica se o objeto foi criado utilizando “{}” ou “new Object”

Ex:

<div id="isPlainObject"></div>

<script src="jquery-1.4.js" type="text/javascript"></script>

<script type="text/javascript">

    $().ready(function() {

        obj1 = new Object

        obj2 = {}

        obj3 = {a:"asd", b:"asdfg"}

        obj4 = []

        obj5 = "asdfg"

        obj6 = function () {}

        $("#isPlainObject").html(

            "<p>jQuery.isPlainObject(new Object) -> " + jQuery.isPlainObject(obj1) + "</p>" +

            "<p>jQuery.isPlainObject({}) -> " + jQuery.isPlainObject(obj2) + "</p>" +

            '<p>jQuery.isPlainObject({a:"asd", b:"asdfg"}) -> ' + jQuery.isPlainObject(obj3) + "</p>" +

            "<p>jQuery.isPlainObject([]) -> " + jQuery.isPlainObject(obj4) + "</p>" +

            '<p>jQuery.isPlainObject("asdfg") -> ' + jQuery.isPlainObject(obj5) + "</p>" +

            "<p>jQuery.isPlainObject(function () {}) -> " + jQuery.isPlainObject(obj6) + "</p>"

        )

    })

</script>

isEmptyObject()

Verifica se o objeto está vazio

Ex:

<div id="isEmptyObject"></div>

<script src="jquery-1.4.js" type="text/javascript"></script>

<script type="text/javascript">

    $().ready(function() {

        obj1 = new Object

        obj2 = {}

        obj3 = {a:"asd", b:"asdfg"}

        obj4 = []

        obj5 = "asdfg"

        obj6 = function () {}

        $("#isEmptyObject").html(

            "<p>jQuery.isEmptyObject(new Object) -> " + jQuery.isEmptyObject(obj1) + "</p>" +

            "<p>jQuery.isEmptyObject({}) -> " + jQuery.isEmptyObject(obj2) + "</p>" +

            '<p>jQuery.isEmptyObject({a:"asd", b:"asdfg"}) -> ' + jQuery.isEmptyObject(obj3) + "</p>" +

            "<p>jQuery.isEmptyObject([]) -> " + jQuery.isEmptyObject(obj4) + "</p>" +

            '<p>jQuery.isEmptyObject("asdfg") -> ' + jQuery.isEmptyObject(obj5) + "</p>" +

            "<p>jQuery.isEmptyObject(function () {}) -> " + jQuery.isEmptyObject(obj6) + "</p>"

        )

    })

</script>

Para ver os exemplos em funcionamento, clique aqui

Referencias:

api.jquery.com

jquery14.com