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!

jQuery UI

Fazem algumas semanas que resolvi utilizar um plugin jQuery (não lembro qual) que utilizava a jQuery UI, um framework com diversas classes prontas para trabalhar com jQUery, uma verdadeira mão na roda!

Como utilizei apenas o plugin pronto, fiz as alterações necessárias mas não havia realmente trabalhando com o framework. Em um projeto recente em que estou trabalhando, fui procurar uma nova forma de fazer uma navegação com accordion (já havia utilizado um plugin eficiente de jQuery anteriormente) e encontrei novamente com o jQuery UI.

Deixei a preguiça de lado e fui verificar como funcionava o jQuery UI, gostei bastante! Apesar de estar apenas iniciando os estudos pareceu bem fácil de utilizar. 

 

jQuery UI CSS Framework

Essa foi a única parte que até o momento eu realmente utilize, um completo framework CSS que permite personalização fácil e vem com muitas, MUITAS classes prontas.

No site do jQuery UI existe um gerador de tema, que permite configurar o seu framework de CSS de forma rápida:

Theme Generator (clique para ampliar)

O gerador de temas gera um framework CSS, que facilita no desenvolvimento com o restante dos utilitários.

Existem diversas classes prontas, para:

  • Bordas arredondadas
  • Overlay ("cobrir" parte da página para destacar determinado conteúdo)
  • Interação (hover, focus, etc.)
  • Exibição de erro
  • Highlight
  • Elemento desabilitado

E mais algumas, que ainda não explorei… 🙂

Falar de CSS me embrou de uma idéia interessante, que instiga algumas boas práticas no desenvlvimento das folhas de estilos: CSS orientado a objetos

 Ah, a parte de 

Interação

Além das facilidades na parte do CSS o framework facilita muito a criação de efeitos de interação.

  • Draggable
  • Droppable
  • Resizable
  • Selectable
  • Sortable

O melhor de tudo é a simplicidade com a qual funciona tudo, por exemplo para criar um elemento que possa ser arrastado, com apenas uma linha isto é feito:

$("#draggable").draggable();

Para os outros comandos a facilidade é a mesma. Isso associado aos diversos estilos dos temas pode acelerar muito o desenvolvimento de interfaces amigáveis!

 

Widgets

Mais facilidades com pouco código, existem algumas ferramentas prontas como:

 

  • Accordion
  • Datepicker
  • Dialog
  • Progressbar
  • Slider
  • Tabs

Testei o accordion, as personalizações possíveis são bacanas! Nos testes que fiz do accordion o funcionamento foi bom em IE (inclusive o 6 – exceto com listas de conteúdo), FF (perfeito) e Chrome (perfeito).

 

Animação

Os comando apra animação com o jQuery são bastante evoluídos e permitem fazer muita coisa, mas para efeitos padrão de interface o framework de user interface facilita com alguns efeitos prontos e bastante customizaveis:

  • Effect
  • Show
  • Hide
  • Toggle
  • Color animation
  • Add class
  • Remove class

 

 

Escrevi o post como uma introdução e estímulo aos usuários da biblioteca jQuery para estudar e utilizar a jQuery UI e facilitar ainda mais a vida!