Melhorando o objeto Array do javascript

O Guilherme falou num post passado sobre "javascript mais hard" com o qual ele tem tido que trabalhar mais desde que veio fazer parte da equipe lá na MMCafé… e se tem uma coisa que quem está já mais acostumado com javascript acha ruim é a classe Array. Poucos métodos para muita coisa que se pode fazer, ainda mais quando se compara com essa classe em outras linguagens.

Mas, para isso, há a propriedade (sempre digo isso: não confundam com a biblioteca Prototype) prototype do javascript, que possibilita a manipulação de objetos do javascript em runtime, adicionando métodos, por exemplo.

Não vou me dedicar ao funcionamento dessa propriedade, pois já expliquei aqui, então vamos a alguns métodos adicionados a classe Array que podem ser muito úteis:

Bubble Sorte

Array.prototype.sort=function()
  {
      var tmp;
      for(var i=0;i<this.length;i++)
      {
          for(var j=0;j<this.length;j++)
          {
              if(this[i]<this[j])
              {
                  tmp = this[i];
                  this[i] = this[j];
                  this[j] = tmp;
              }
          }
      }
  };

Clear

Array.prototype.clear=function()
  {
      this.length = 0;
  };

Contains

 

Array.prototype.contains = function (element)
  {
          for (var i = 0; i < this.length; i++)
       {
              if (this[i] == element)
          {
                      return true;
              }
          }
          return false;
  };

Você pode adicionar os métodos que você precisar; tenha certeza que sua produtividade aumentará!

Como descobrir se um número é par ou ímpar no Javascript

Desde que comecei a trabalhar com o Chris aqui na MM Café estou em um contato mais hard com Javascript, linguagem que comecei a me interessar bastante graças ao jQuery e a evolução dos navegadores (com a excessão do IE, obviamente).

Hoje precisei de uma solução para colocar background intercalados em uma lista criada por javascript (com jQuery), a famosa "lista coloridinha" que auxilia na visualização dos dados. Existem seletores avançados de CSS (even e odd) mas nos meus testes aqui eles não funcionaram no Internet Explorer (6, 7 e 8) e também os seletores (2n) ou :first que funcionam no Firefox porém nada acontece em nenhuma das versões do Internet Explorer.

Resolvi então aplicar uma classe de forma intercaladas nas linhas quando o javascript criava a lista. Para fazer eu tinha alguma ções:
 

  1. Ficar setando uma variável para 1 e 0 e fazendo um IF dentro do loop que gera as linhas para conferir se é um ou zero
  2. Conferir se o número é 1, 3, 5, 7 (POG, eu sei…)
  3. Verificar se o contador (o i do loop) é par ou ímpar

 

Optei pela última, pois a variável já existia e eu só precisava de um if else para conferir se o número daquela linha era par ou ímpar.

Alex Kid, o rei do par ou ímpar!

 

Lembra?

 

 

Como verificar se um número é par ou ímpar no Javascript?

A lógica simples é: se o resto da divisão por dois for 0, é par. A lógica complicada é: se a unidade final do número for 0,2,4,6 ou 8 é par.

 

if (i % 2 == 0) {

alert("O número i é par, pois o resto da divisão por dois é igual a zero")

}else{

 alert("Existe resto na divisão por dois, portando o número i é ímpar")

}

 

Simples, a função "n % 2" retorna o valor do resto da divisão por dois! 😀

Conferindo a versão do Internet Explorer…

E hoje eu precisava validar um site no Internet Explorer 6 (die, die, die). Belezinha, com o navegador aberto fui conferir a versão, para ver se era o que eu precisava. Depois de clicar em Help -> About, vejam a confirmação de que era a PRAGA do IE6:

 

 

O erro confirmou: é o 6, né.

E o erro se repetiu a cada vez que eu ia ver a versão dele… o IE estava sendo rodando usando o aplicativo de browsers do Spoon.

 

Beleza, IE!

Jogo de dados – Javascript orientado a objetos

Hola!

Talvez alguns de vocês que me acompanham no twitter (@gserrano) ou acompanham o Chris (@chrisloki) já saibam, mas não moro mais no Rio Grande do Sul (Tchê!) e estou morando a uma semana em São Paulo, trabalhando na MM Café na equipe de interface, trabalhando na equipe do Chris 😀

E em uma tarde da semana passada estava eu sugando informações do Chris, que me mandou alguns links sobre Javascript Orientado a Objetos.

Lembrei de um post dele aqui no O Desenvolvedor, que vale a leitura: utilizando Prototype para criar classes em Javascript.

Li os exemplos que o Chris me passou e resolvi colocar em prática, criei um mini-game de jogo de dados. Bom, chamar de "mini-game" é um exagero, criei apenas uma interface e tres "objetos".

 

Joguinho de dados

O funcionamento é bastante simples, não explicarei a teoria da orientação a objetos, apenas a prática e o código.

Clique para jogar

 

Utilizei 3 objetos e algumas poucas funções, os objetos são:

  • Dado
  • Cash
  • Fichas

 

O dado tem uma única função, que se chama jogar. Eis o código dele:

 

function dado(){

this.lados = 6;

this.valor = 1;

this.joga = function(){

this.valor = getrand(this.lados);

return this.valor;

}

}

Cada dado tem dois valores: número de lados (o padrão é 6) e o valor, utilizado cada vez que ele é jogado. A função "jogar" gera um número randômico de 1 até o número de lados, neste caso de um a seis, retornando o valor jogando e alterando o valor do objeto dado.

Os objetos chips e cash são muito parecidos, apenas armazenam o valor de "dinheiro" ou de "fichas" do jogador, e possuem funções em comum (repeti elas no código, talvez esta não seja a melhor opção), vamos aos códigos:

 

function chips(){

this.valor = 0;

this.soma = function(x){

this.valor = this.valor + x;

$("#chips").html(this.valor);

}

this.subtrai = function(x){

if(this.valor<x){

$("#feedback").html("<h1>Warning!</h1><br />Você não tem fichas para isso, malandro!")

}else{

this.valor = this.valor – x;

$("#chips").html(this.valor);

}

}

}

function cash(){

this.valor = 0;

this.soma = function(x){

this.valor = this.valor + x;

$("#cash").html(this.valor);

}

this.subtrai = function(x){

if(this.valor<x){

$("#feedback").html("<h1>Warning!</h1><br />Você não tem dinheiro para isso, malandro!")

}else{

this.valor = this.valor – x;

$("#cash").html(this.valor);

}

}

}

 

A função "subtrai" verifica se o número que será subtraído (das fichas ou do dinheiro) não é maior do que o existente, evitando criar jogadores endividados! 😀

Estas poucas linhas são a base de funcionamento do "jogo". Com dois botões e algumas mensagens de feedback, podemos fazer o usuário jogar o dado e apostar e comprr mais fichas, eis o código "onload" da página:

 

 

$(document).ready(function(){

//Inicializa, cria dado e cash

var dado1 = new dado();

var u_chips = new chips();

u_chips.soma(100);

var u_cash = new cash();

u_cash.soma(50);

//Quando joga

$("#acao").click(function(){

$("#valor").html("Você jogou " + dado1.joga());

if(dado1.valor <= dado1.lados/2){

u_chips.subtrai(4);

$("#feedback").html("<h2>Perdeu!</h2><br />Você pagou 4 chips para a banca.")

}else{

u_chips.soma(3);

$("#feedback").html("<h2>Ganhou!</h2><br />Você recebeu 3 chips da banca.")

}

});

$("#buy_chips").click(function(){

if(u_cash.valor >= 25){

u_cash.subtrai(25);

u_chips.soma(50);

}else{

$("#feedback").html("<h1 class="red">Warning!</h1><br />Você não tem dinheiro para isso, malandro!")

}

});

});

 

Quando a página é inicializada, crio um objeto para cada classe (dado, cash, chips) e adiciono as chips e cash (isso vai atualizar a interface automaticamente, devido as funções soma e subtrai).

Quando o usuário clica em jogar, através da função jogar do dado criado, verifico se o númeor é maior ou menor que a metade do valor máximo do dado (o número de lados) e novamente com as funções soma e subtrai, retiro ou adiciono fichas pro usuário.

A função "buy" subtrai do cash e adiciona nas chips.

 

Simples, prático e fácil de entender!

Veja o exemplo funcionando

 

Curiosidades

  • Demorei mais para explicar o código do que para desenvolver a brincadeira.
  • O layout do joguinho foi feito em 15 minutos, com uma busca no SXC e bom uso do CSS.
  • O Internet Explorer foi completamente ignorado durante todo o processo
  • As expectativas de vitórias são negativas: a banca ganha no longo prazo.

O joguinho está simples, não armazena naada em banco e pode se tornar divertido com "desafios" a outros jogadores, armazenar fichas e cash, integração com o twitter… eu só queria mesmo iniciar a brincadeira, utilizem os códigos a vontade. 🙂

Quer saber mais sobre javascript orientado a objetos, por quem entende de verdade do que tá falando? Acessa aí:

 

Agradecimento ao Chris pelas explicações e referências que me passou 🙂

 

 

 

SQL – como agrupar registros por uma coluna e pegar o último pela data

Não sou bom com SQL – nunca fui, nunca quis me aprofundar e tenho um certo bloqueio com relação a isso.
Mas, algumas vezes tenho que mexer com isso, e sempre me deparo com alguns erros bobos ou algumas coisas mais complexas.

No caso, incrivelmente as questões bobas não me atrapalharam, mas quebrei a cabeça quando tinha uma tabela com uma estrutura mais ou menos semelhante a essa (vou suprimir as colunas que não interessam para o problema):

  • id: id primário, auto-incremente
  • f_id: é uma relação de cada registro com registros de outra tabela. Não é único
  • adddate: data do registro
  • nome: nome do registro

Minha necessidade era agrupar os registros por esse f_id e retornar a data mais recente de cada grupo.
À princípio estava tentando fazer um SELECT e agrupar por GROUP BY, dando um ORDER BY depois, mas percebi que uma vez usado o GROUP BY nada garante qual é o registro que ele vai usar quando der um ORDER BY.
Vi então que a coisa seria mais séria, e que teria que usar SUBSELECTS… estava quebrando a cabeça e o Alexandre (@kurko) me ajudou após um pedido de SOS pelo twitter, e a seguinte query abaixo me salvou!

SELECT u.f_id, u.nome, ( SELECT adddate FROM usuario AS t WHERE t.f_id=u.f_id ORDER BY t.adddate DESC LIMIT 1) as data FROM usuario AS u GROUP BY u.f_id ORDER BY u.f_id

Espero que seja de utilidade!