Marcar e desmarcar checkboxes de um form por javascript

Publicado em Publicado por gserrano

O Danilo fez ontem um post no blog dele sobre como implementar uma solução com jQuery para fazer aquele famoso "marcar todos" onde um checkbox, ao ser clicado, marca ou desmarca todos os checkboxes d eum certo grupo. Bem bacana!

Ai, resolvi aproveitar o gancho e mostrar como pode ser feito isso sem o uso de qualquer biblioteca javascript – ou seja, na mão. O código, claro, é mais extenso do que se tivesse sido feito com alguma biblioteca, mas acho que vale no mínimo como referência!

Segue, abaixo, a implementação com os devidos comentários!

<html>
<head>
<title>Manipulação de checkboxes</title>
<script type="text/javascript">
    window.onload = function() {
        //listener para click do checkbox que marca/desmarca todos
        document.getElementById("checkAll").onclick = function() {
            var form = document.getElementById("myForm"); //formulário
            //percorre todos os checkboxes e seta se está ou não checado, conforme o valor do check mandatório
            var checks = form.getElementsByTagName("input");
            for(var i=0; i<checks.length; i++) {
                var chk = checks[i];
                if(chk.name == "dados[]")
                    chk.checked = this.checked;
            }
        }   
    }
</script>
</head>
<body>
<h1>Meu form</h1>
<form action="#" id="myForm">
    <fieldset>
    <input type="checkbox" name="dados[]" />check 1<br />
    <input type="checkbox" name="dados[]" />check 2<br />
    <input type="checkbox" name="dados[]" />check 3<br />
    <input type="checkbox" name="dados[]" />check 4<br />
    <input type="checkbox" name="dados[]" />check 5<br />
    </fieldset>
    marcar todos: <input type="checkbox" id="checkAll" />
</form>
</body>
</html>

Como criar seletores customizados com jQuery

Publicado em Publicado por gserrano

Dia desses estava estudando os seletores do jQuery e nas pesquisas internérdicas encontrei um post bastante interessante sobre seletores customizados do jQuery. Isso significa que eu posso criar uma regra em javascript para praticamente verificar qualquer coisa dos elementos, e utilizar isso como um selector do jQuery.

Exemplo de uso

Tenho um site com diversos links para a wikipedia e gostaria de aplicar uma classe nos links específicos para a wikipedia. Eu posso colocar a classe para cada link criado, mas vamos supor que eu quero automatizar isso (para aplicar a aregra também em links antigos, por exemplo).

A idéia é eu criar um seletor tipo:

$("a:wikipedia").addClass("wikipedia")

Este seletor não existe no jQuery, então vamos ao objetivo do post: criar um seletor customizado. Para extender (não sei se esta seria a palavra correta) e jQuery e criar um seletor customizado o comando á:

$.expr[":"].nomedoseletor = function(obj){
   //Aqui vão as regras
   //return true inclui o elemento no seletor
   //return false
};

 

No meu caso, a regra é simples: quero que o seletor procure links que contenham em alguma parte de sua href o link "wikipedia.org". Para a regra resolvi utilizar expressões regulares (ER), e o nome do meu seletor é wikipedia.

 

Seletor customizado com jquery

Eis o código:

$.expr[":"].wikipedia = function(obj){
   return obj.href.match(/wikipedia.org/);
};

 

E para chamar o seletor:

$("a:wikipedia").addClass("wikipedia")

 

O Chris já alertou que isso não deve ser muito performático, mas tenho que dizer: pode ser bastante útil. Neste exemplo fiz um seletor simples, mas as regras podem ser mais complexas: selecionar links internos, links para áreas específicas do seu site para aplicar ícones nos links, selecionar imagens pelo tamanho, elementos com ou sem atributos específicos…

Ainda sobre a performance, recomendo utilizar seletores específicos preferencialmente dentro de ID´s, poe exemplo: $("#content a:wikipedia") e não "globalizar" os apenas quando necessário não deve causar TANTOS problemas, né?

Não realizei nenhum teste de performance com os seletores customizados, testei apenas o códido de exemplo, funcionou certinho. Hoje a noite quando eu estiver em casa publico o exemplo* no diretório de exemplos do O Desenvolvedor! 🙂

 

Referência: jQuery howto (recomendo a leitura, vários posts interessantes)

 

* resolvi postar mesmo sem o exemplo devido a simplicidade do código 😉

Melhorando o objeto Array do javascript

Publicado em Publicado por gserrano

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

Publicado em Publicado por gserrano

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! 😀

Jogo de dados – Javascript orientado a objetos

Publicado em Publicado por gserrano

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 🙂