GUJS - Grupo de Usuários Javascript » Cross-browser

MooTools – Ótimo framework JavaScript

Rafael Quines — Mon, 30 Apr 2007 03:06:01 +0000

MooTools é um framework javascript orientado a objetos. É muito fácil de usar e totalmente extensível, sendo simples para você criar suas classes usando recursos desse Frameworks. Baseado em Prototype, esse framework cria e sobrescreve métodos de objetos javascript já existentes, facilitando muito o seu uso.

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

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.

Contagem regressiva

Matheus Zeuch — Thu, 19 Apr 2007 00:02:43 +0000

Hoje vamos aprender a fazer um contador regressivo simples para uma data e hora futura. Nosso contador deve mostrar o resultado em um formato texto, numa tag span, para que seu estilo possa ser configurado. O resultado é interessante.

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.


 /
 /
 às
 :
 :



Faltam

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!

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;

Ordenando listas com Javascript

Matheus Zeuch — Mon, 26 Mar 2007 18:26:01 +0000

A classe SortableList é um pequeno exemplo de utilização de métodos DOM sendo utilizados para facilitar a ordenação de itens de uma lista.

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')); } //

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