GUJS - Grupo de Usuários Javascript » Tutoriais Básicos

Compactação JavaScript

Rafael Quines — Mon, 30 Apr 2007 03:40:11 +0000

Compactação javascript consiste na otimização de código, a fim de diminuir ao máximo o tamanho dos arquivos que o browser deverá fazer o download na hora que um usuário acessa um determinado site. Além de deixar uma página muito mais leve e rápida, os arquivos compactados ocuparão menos espaço no servidor também. Como JavaScript é uma linguagem interpretada, o que os compactadores fazem é aplicar técnicas específicas como nome de variáveis com poucos caracteres, tirar espaços desnecessários, comentários, etc.

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:

ficaria:

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:

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.

Movendo itens entre list boxs

Rafael Quines — Tue, 10 Apr 2007 02:40:53 +0000

Hoje em dia, este é um recurso muito usado em formulários em geral. Permite que sejam selecionados vários itens para um relatório, por exemplo. Normalmente se tem um listbox com os ítens disponíveis, e outro, inicialmente vazio, ficam os itens selecionados na primeira list.

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.

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.

Ordenando um array numérico

Matheus Zeuch — Thu, 29 Mar 2007 15:01:31 +0000

Um pequeno impecílho, na hora de ordenar um vetor número em javascript, pode deixar o programador com um pouco de dor de cabeça. O método sort() do objeto Array utiliza um algoritmo de ordenação de caracteres para ordenar os itens do array, ou seja, quando você quer ordenar um array de números, ele coloca o 10 antes do 2, por exemplo. Veja como resolver isto.

[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

Tutorial básico sobre Ajax

Eduardo Bohrer — Tue, 27 Mar 2007 11:34:51 +0000

Asynchronous Javascript and XML, mais conhecido como AJAX.

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;