Um método simples de compactação é feito com o JSMIN. O que ele faz é simplesmente tirar comentários e espaços em branco desnecessários. Segue uma demonstração da compactação feita pelo JSMIN:

<script type="text/javascript">
//TAMANHO: 932 bytes

// The -is- object is used to identify the browser.  Every browser edition
// identifies itself, but there is no standard way of doing it, and some of
// the identification is deceptive. This is because the authors of web
// browsers are liars. For example, Microsoft's IE browsers claim to be
// Mozilla 4. Netscape 6 claims to be version 5.

var is = {
    ie:      navigator.appName == 'Microsoft Internet Explorer',
    java:    navigator.javaEnabled(),
    ns:      navigator.appName == 'Netscape',
    ua:      navigator.userAgent.toLowerCase(),
    version: parseFloat(navigator.appVersion.substr(21)) ||
             parseFloat(navigator.appVersion),
    win:     navigator.platform == 'Win32'
}
is.mac = is.ua.indexOf('mac') >= 0;
if (is.ua.indexOf('opera') >= 0) {
    is.ie = is.ns = false;
    is.opera = true;
}
if (is.ua.indexOf('gecko') >= 0) {
    is.ie = is.ns = false;
    is.gecko = true;
}
</script>

ficaria:

<script type="text/javascript">
// TAMANHO: 440 bytes
var is={ie:navigator.appName=='Microsoft Internet Explorer',java:navigator.javaEnabled(),ns:navigator.appName=='Netscape',ua:navigator.userAgent.toLowerCase(),version:parseFloat(navigator.appVersion.substr(21))||parseFloat(navigator.appVersion),win:navigator.platform=='Win32'}
is.mac=is.ua.indexOf('mac')>=0;if(is.ua.indexOf('opera')>=0){is.ie=is.ns=false;is.opera=true;}
if(is.ua.indexOf('gecko')>=0){is.ie=is.ns=false;is.gecko=true;}
</script>

Como podem ver, apenas uma lógica simples já diminuiu em pouco mais de 50%. Esse é objetivo do JSMIN. Mas ainda existe uma outra maneira de compactar mais ainda seu código.

Essa outra técnica consiste em pegar as palavras usadas repetidas, como “function”, “var”, “alert”, e usar em seu lugar, uma variável de nome pequeno, como a, b, c. Depois, é feito um eval desse resultado que, via expressão regulares, irão substituir os a, b, c por seus nomes originais como “function”, “var”, “alert”, etc. Para pequenos códigos, essa técnina não faz muita diferença, mas para grandes códigos é muito mais eficiente. O mesmo código do exemplo anterior compactado ficaria:

<script type="text/javascript">
eval(function(p,a,c,k,e,d){while(c--){if(k[c]){p=p.replace(new RegExp('\b'+c.toString(a)+'\b','g'),k[c])}}return p}('j 1={5:2.7=='m k i',g:2.h(),6:2.7=='l',3:2.u.s(),t:9(2.b.r(q))||9(2.b),n:2.o=='p'}1.a=1.3.4('a')>=0;d(1.3.4('c')>=0){1.5=1.6=e;1.c=8}d(1.3.4('f')>=0){1.5=1.6=e;1.f=8}',31,31,'|is|navigator|ua|indexOf|ie|ns|appName|true|parseFloat|mac|appVersion|opera|if|false|gecko|java|javaEnabled|Explorer|var|Internet|Netscape|Microsoft|win|platform|Win32|21|substr|toLowerCase|version|userAgent'.split('|')))
</script>

Neste caso ficou com 529 bytes. Mas experimente pegar grandes arquivos e passar essa compactação. Uso o framework MooTools e baixei uma versão compactada, e outra normal. A versão normal tem 140kb, já a compactada ficou com 49kb. Muita diferença neh. Só não esqueça de ao usar essas compactações javascript, sempre guarde a versão original do arquivo, pois muitas vezes o código fica ilegível. Não é a toa que os compactadores são chamados também de ofuscadores.

Segue uma maneira muito simples de fazer uma requisição ajax usando o mootools:

<script src="mootools.js" type="text/javascript"></script>
<script type="text/javascript">
    var url = "./inc/ajax_processa.php";
    var params = {operacao: 'excluiUsuario', idUsuario: '50'};
    /*
    o postBody pode receber tanto uma querystring
    ("operacao=excluiUsuario&idUsuario=50"), um objeto,
    como no exemplo, ou então um elemento form
    */
    var myAjax = new Ajax(url, {method: 'post', postBody: params}).request();
</script>

Além de Ajax, o MooTools tem muitos outros recursos. Por exemplo, para quem já precisou pegar o tamanho da janela, sabe que é um problema para ser cross-browser, usando document.documentElement.clientWidth ou document.body.clientWidth. Você não teria esse problema. Apenas dar o include no arquivo do mootools, e o objeto window terá dois novos métodos: getWidth() e getHeight(). Muito interessante neh.

Algumas funções auxiliares também foram adicionados nos objetos javascript, como o método “trim()” em todas as strings, métodos de conversão de QueryString para Objeto JSON e vice-versa. Arrays ganharam novos métodos como forEach, extend, associate, remove. Elementos ganharam também getParent(), getTag(), getValue(), injectBefore(), injectAfter(), e muito mais.

Ainda não explorei tanto, mas uma coisa que dá pra notar é que o framework se propõe a facilitar ainda mais o dia-a-dia com JavaScript. Por favor, gostaria que comentassem a opinião dos leitores sobre o Mootools. Para quem não conhece, vale a pena pelo menos dar uma olhada.

O código abaixo é a parte principal do nosso contador. Observe que utilizei variáveis para setar qual a data e hora futura. A vantagem disso é que essas variáveis podem ser atualizadas por uma outra função javascript, fazendo com que o nosso contador possa ser atualizado em tempo real (veremos isso em funcionamento no exemplo prático).

var YY = 2007;
var MM = 12;
var DD = 31;
var HH = 23;
var MI = 59;
var SS = 59; 

function atualizaContador() {
  var hoje = new Date();
  var futuro = new Date(YY,MM-1,DD,HH,MI,SS); 

  var ss = parseInt((futuro - hoje) / 1000);
  var mm = parseInt(ss / 60);
  var hh = parseInt(mm / 60);
  var dd = parseInt(hh / 24); 

  ss = ss - (mm * 60);
  mm = mm - (hh * 60);
  hh = hh - (dd * 24); 

  var faltam = '';
  faltam += (dd && dd > 1) ? dd+' dias, ' : (dd==1 ? '1 dia, ' : '');
  faltam += (toString(hh).length) ? hh+' hr, ' : '';
  faltam += (toString(mm).length) ? mm+' min e ' : '';
  faltam += ss+' seg'; 

  if (dd+hh+mm+ss > 0) {
    document.getElementById('contador').innerHTML = faltam;
    setTimeout(atualizaContador,1000);
  } else {
    document.getElementById('contador').innerHTML = 'CHEGOU!!!!';
    setTimeout(atualizaContador,1000);
  }
}

A função atualizaContador() foi escrita de maneira que possa ser alterada facilmente. Você pode, por exemplo, alterar o código para que retorne o contador em vez de exibí-lo.

Abaixo está o código html que utilizei para demonstrar o funcionamento. Fiz com que o evento onchange dos campos atualizem as variáveis da data futura.

<body onload="atualizaContador()">
<input size="1" onchange="DD=this.value" style="text-align: center" /> /
<input size="1" onchange="MM=this.value" style="text-align: center" /> /
<input size="4" onchange="YY=this.value" style="text-align: center" /> às
<input size="1" onchange="HH=this.value" style="text-align: center" /> :
<input size="1" onchange="MI=this.value" style="text-align: center" /> :
<input size="1" onchange="SS=this.value" style="text-align: center" />
<br />
Faltam <span id="contador"></span>
</body>

Você pode ver um exemplo em funcionamento deste código aqui. Ou se preferir, pode baixar o código para estudar melhor.

Exemplo | Download

Até a próxima!

Além da vantagem de não precisar carregar mais itens que o necessário, o usuário também não perde de vista os posts que já estavam carregados quando os novos são exibidos. Este é um problema que acontece naquele conhecido modelo de paginação com os links das páginas e os de próxima página e página anterior.

O objetivo é carregar somente o número de mensagens que preencha o espaço na tela do usuário e, caso o usuário baixe até o final a barra de rolagem, o sistema carregue novas mensagens, mantendo na tela as anteriores. 

No exemplo deste artigo, você pode ver na prática como funciona este modelo de paginação. Se preferir, baixe os códigos fontes para fazer seus estudos e alterações.

Como funciona? 

Não vou me aprofundar explicando a utilização da classe Ajax utilizada no projeto, deixo isso para um futuro post. No momento, veremos as funções essenciais do exemplo, e a primeira delas é a função addLine(), que insere (via DOM) uma nova linha no div dos itens.

A função recebe como parâmetro um objeto contendo os atributos id e text e monta a linha que será inserida logo em seguida. Note que a função também controla a variável global id que será passada como parâmetro em todas as requisições dos notos itens. No nosso caso, apenas para que cada mensagem tenha um número maior que a anterior.

As funções paginationComplete() e pagination() são as responsáveis por fazer as requisições das próximas mensagens.

A função onScroll() verifica se a barra de rolagem está no rodapé da página. Se estiver, executa a função pagination(), que como vimos, fará a requisição das novas mensagens.

A função init() é quem chama pela primeira vez a função pagination(). Ela também atribui aos eventos window.onscroll e window.onresize, para que no sistema faça requisições sempre que ainda tiver espaço para novas mensagens.

Onde utilizar o método?

Utilizei este método (e estes mesmos códigos) em um sistema de monitoramento de mensagens, onde o usuário abria a tela de via as últimas mensagens, e conforme ia baixando a tela as mensagens antigas eram carregadas (até que não houvessem mais mensagens antigas no banco). Outro sistema de refresh fazia as requisições das novas mensagens, que eram exibidas no topo. Com isso consegui um bom sistema de monitoramento em tempo real de mensagens, e que ao mesmo tempo era prático para visualizar mensagens antigas.

Você pode usar sua imaginação para utilizar estes códigos em seus projetos. Acho que é um bom exemplo de se usar em sistemas de mensagens, leitor de e-mails, agregador de feeds rss, e em qualquer lugar onde o método convencional de paginação não é a melhor opção.

Considerações finais

Testei o exemplo no Firefox e no IE 7, portanto, se você encontrar algum erro por favor me avise que eu corrijo.

Se tiver dúvidas ou quiser fazer algum comentário sobre o artigo e o exemplo, sinta-se à vontade para utilizar o formulário de comentários abaixo ou então acompanhar a discussão no fórum.

Divirta-se!

Exemplo | Download

Um bom exemplo seria em um cadastro de vendedor, o usuário deve selecionar as cidades que aquele vendedor atua. Numa list, aparece todas as cidades cadastradas. Na outra, só as seleiconadas para aquele vendedor.

Em primeiro lugar, teremos 2 lists: listOrigem e a listDestino.

<select name="listOrigem" id="listOrigem" MULTIPLE size="10">
<option value="1">Porto Alegre</option>
<option value="2">São Paulo</option>
<option value="3">Rio de Janeiro</option>
<option value="4">Natal</option>
<option value="5">Fortaleza</option>
</select>

<select name="listDestino" id="listDestino" MULTIPLE size="10">
</select>

e quatro simples funções, facilmente adaptáveis para o uso em outras situações:

//1. Para passar todos os ítens da list de origem para a de destino:

function allLeft2Right() {
  var listOri = document.getElementById("listOrigem")
  var listDest = document.getElementById("listDestino");
  for(var i = 0; i < listOri.length; i++) {
    var opcao = listOri.options[i];
    var novaOpcao = new Option(opcao.text, listDest.length);
    novaOpcao.value = opcao.value;
    listOri.remove(i);
    try {
      listDest.add(novaOpcao,null);
    } catch (e) {
      listDest.add(novaOpcao);
    }
    i--;
  }
}

//2. função para passar todos os ítens do destino para a origem:

function allRight2Left() {
  var listOri = document.getElementById("listOrigem")
  var listDest = document.getElementById("listDestino");
  for(var i = 0; i < listDest.length; i++) {
    var opcao = listDest.options[i];
    var novaOpcao = new Option(opcao.text, listOri.length);
    novaOpcao.value = opcao.value;
    listDest.remove(i);
    try {
      listOri.add(novaOpcao,null);
    } catch (e) {
      listOri.add(novaOpcao);
    }
    i--;
  }
}

//3. Função para apenas os ítens selecionados da origem para o destino:

function left2Right() {
  var listOri = document.getElementById("listOrigem")
  var listDest = document.getElementById("listDestino");
  for(var i = 0; i < listOri.length; i++) {
    var opcao = listOri.options[i];
    if(opcao.selected) {
      var novaOpcao = new Option(opcao.text, listDest.length);
      novaOpcao.value = opcao.value;
      listOri.remove(i);
      try {
        listDest.add(novaOpcao,null); //Firefox
      } catch(e) {
        listDest.add(novaOpcao); //IE
      }
      i--;
    }
  }
}

//4. e por último, para passar os ítens marcados do destino para a origem

function right2Left() {
  var listOri = document.getElementById("listOrigem")
  var listDest = document.getElementById("listDestino");
  for(var i = 0; i < listDest.length; i++) {
    var opcao = listDest.options[i];
    if(opcao.selected) {
      var novaOpcao = new Option(opcao.text, listOri.length);
      novaOpcao.value = opcao.value;
      listDest.remove(i);
      try {
        listOri.add(novaOpcao,null);
      } catch (e) {
        listOri.add(novaOpcao);
      }
      i--;
    }
  }
}

Exemplo funcionando:

Agora é só vc adaptar. Se preferir que no OnDblClick no combo de origem passar para o destino, é só colocar no OnDblClick do listOrigem a chamada ao left2Right. Poderia criar dois botões também para passar todos os ítens de um campo para o outro.

Bom, espero ter ajudado. Muitas vezes já procurei um artigo como esse, com exemplos na WEB, porém não encontrei. Então fica aqui minha contribuição.

[4,7,2,10,35,67,3,2].sort(function(){return arguments[0] - arguments[1];});

Note que estamos passando um parâmetro para o método sort(). Esse parâmetro é a função que vamos utilizar para determinar se qual dos dois itens é maior. Se não passarmos esse parâmetro para o sort, ele vai considerar que os itens do array são caracteres.

Você também pode criar um novo método para o objeto Array, o que lhe permite usar este novo método em qualquer array. Para isso, vamos usar o conceito de prototype do javascript. Veja como ficou nosso novo método para ordenar vetores numéricos:

Array.prototype.sortnum = function() {
  return this.sort(function(){return arguments[0] - arguments[1];});
}

Para finalizar, preparei um exemplo para vocês demonstrando os resultados da ordenação normal e da utilizando nosso novo método sortnum.

Exemplo | Download

O que é Ajax?
Ajax foi criado com o principio de ser uma maneira rápida e otimizada de podermos fazer requisições WEB, sendo esta totalmente transparente ao usuário.

Sabemos que todo o tipo de acesso a dados de um servidor de sites na internet, roda encima de requisições WEB(Requisições via Protocolo HTTP ao servidor de destino), e por resposta o servidor também com o mesmo protocolo retorna os dados solicitados, tais como HTML’s.

Este processo normalmente não é notado na visão do usuário, mas é isso que acontece quando digitamos em nosso navegador de internet um endereço da WEB.O ajax por sua vez também roda encima desta lógica.

Mas e afinal, para que usamos o Ajax?

Hoje esta tecnologia é utilizada para uma infinidade de processos, mas o que precisamos saber não é o que fazer com ele, mas sim saber como ele trabalha para podermos adequar tal tecnologia em nosso dia-a-dia.
Um Exemplo Básico da utilização de ajax, é um refresh de página, sem que o usuário necessite faze-lo.

O programador que cria a página, programa uma requisição ajax, para que busque novos dados no servidor em um limite de tempo, e então também por javascript, altera a visualização do usuário, talvez inserindo linhas em uma tabela ou algo do gênero, assim dando um aspecto de atualização automática.

Como Utilizar?

Hoje, o ajax é suportado pelos principais browsers disponíveis no mercado, e utilizados pela comunidade WEB.

Para isso utilizados objetos javascript, que rodam encima do browser do usuário e transitam dados por estas requisições.

Assim sendo, podemos fazer interações com processos de servidor, sem que seja necessário por exemplo recarregar a página do usuário, ou mesmo se quer visualize tal iteração.

Vejamos um exemplo básico.

//variavel ajax
var ajax = null;

//função que faz a requisição ajax
function requisicaoAjax(){
    //utilizado para requisições no browser Internet Explorer
    if (window.ActiveXObject) ajax = new ActiveXObject('Microsoft.XMLHTTP');
    //utilizado como o padrão javascript para requisições AJAX.
    else if (window.XMLHttpRequest) ajax = new XMLHttpRequest();
    //se a variável ajax for nula, logo o browser não suporta tal tecnologia
    if(ajax != null){
      //abre a requisição ajax, passando o método de acesso, a url solicitada e o parâmetro sobre sincronia
      ajax.open('GET','http://gujs.com.br/',false);
      //seta a funcao que sera chamada quando o ajax for retornado
      ajax.onreadystatechange = statusAjax;
      //inicia o tranporte
      ajax.send(null);
    }
}

//função que trata o retorno ajax
function statusAjax(){
  //caso o status do ajax esteja ok, então chama a função retornoAjax enviando o retorno da requisição como parâmetro
  if(ajax.readyState == 4 && ajax.status == 200){
    retornoAjax(ajax.responseText);
  }
}

//função que é chamada quando o ajax for retornado
function retornoAjax(response){
  //dá um alerta no texto de retorno
  alert(response);
}
requisicaoAjax();

1º) Criamos um objeto para o transporte do ajax;

2º) Setamos ao objeto as diretivas da solicitação como a url a ser solicitado e o método. O terceiro parâmetro é se deve ser assíncrono ou não, no caso estamos passando false, para o javascript aguardar o retorno da requisição.

3º) Indicamos qual será a função que ira fazer o tratamento de estados da requisição. (O status da requisição é retornado pelo browser para tratamento a cada vez que este status muda).
Você pode ver a listagem completa de status aqui: http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html

Quando dizemos

ajax.onreadystatechange = statusAjax;

Estamos indicando que toda a vez que este ajax mudar de status, ele deve chamar esta função.

No nosso caso, o único status interessante é o status de requisição ok.

Se a requisição retornar um status ok, então a partir daí trabalharemos em nosso refresh, como dito acima, onde trataríamos os dados retornados e aplicaríamos na visualização do usuário;

Uma coisa que devemos considerar e que por sua vez é de grande importância, é que não podemos fazer requisições Ajax a outro domínio diferente ao que o site atual roda.
Por exemplo:
Sendo que minha página exemplo_ajax.htm estivesse dentro de http://www.gujs.com.br/, só poderei fazer requisições ajax para arquivos que fiquem dentro de http://www.gujs.com.br/.

Este exemplo é bem simples, mas apenas para podermos ter uma noção de como funciona uma requisição ajax.

Existem hoje, várias bibliotecas javascript para formalizar tais requisições, bibliotecas que fazem o controle de estados inválidos da requisição, ou mesmo que facilitam o transporte de requisições via método POST.

O intuito deste artigo é simplesmente desmistificar este fênomeno chamado ajax.

Fique a vontade para deixarem comentários, ou entrar em contato ok?

Até a próxima pessoal;

Para utilizar a classe, basta importar o arquivo js e instanciar um objeto que estará associado à sua lista. Feito isso você pode criar seus próprios links para manipular os eventos de ordenação da lista (mover para cima ou para baixo). Veja o exemplo abaixo:

var bozo;

function init() { bozo = new SortableList($('list')); } //<ul id="list">

window.onload = init;

Ao instanciar o SortableList você também pode definir duas opções interessantes:

• A primeira é o “rotate”, que define se os itens vão girar ou não (true ou false), ou seja, se o primeiro da lista vai para baixo quando o usuário clicar para cima, e vice-versa, quando o último item se torna o primeira ao clicar para baixo.
• E a segunda é o onComplete, onde você pode setar uma função que será executada toda vez que a lista for reordenada. Nesta função você pode, por exemplo, fazer uma requisição Ajax que salvará a ordenação no seu banco de dados, onde você pode, para isso, acessar o atributo “list“, que contém a lista ordenada.

Exemplo | Download

O GUJS é um projeto independente, e por isso a sua ajuda é fundamental para que o site cresça. Visite o fórum e participe!