Willian Fernandes

Como usar jQuery para remover um item de um Array JS

Comente »

Quem trabalha com JavaScript sabe que para remover um item de um array basta utilizar o método splice. Como o código abaixo:

frutas = ['maçã', 'banana', 'pera', 'uva'];
frutas.splice(1,1);

O código acima retira a banana do array frutas. Isso porque no 1º parâmetro do método splice informamos qual a posição do item no array que queremos remover. O 2º parâmetro indica quantos itens, contando do item que informamos, queremos remover. Sendo assim, se quisermos remover a banana e a pera basta fazer assim:

frutas = ['maçã', 'banana', 'pera', 'uva'];
frutas.splice(1,2);

Mas em muitos casos não sabemos qual a posição do item que queremos remover e sim qual o valor do item. Uma abordagem é procurar qual a posição do item percorrendo o Array e comparando os valores com o valor que temos. Um tanto quanto chato, concorda?

jQuery para todas as horas!

Como é mais que comum termos jQuery em projetos web, realizar o trabalho acima fica fácil. Pra isso precisaremos da função $.grep. Está função encontra todos os elementos de um array de acordo com uma expressão. Vamos aplicar nosso exemplo removendo a fruta banana do nosso array, mas agora não sabemos qual a posição que essa fruta se encontra no array. Nosso código ficará assim:

frutas = ['maçã', 'banana', 'pera', 'uva'];
frutas = $.grep(frutas, function(val, index) {
	return val != 'banana';
});

Com a funcão $.grep podemos ir muito além. Por exemplo, ter um array com somente os elementos que forém pares:

numeros = [1, 2, 3, 4, 5, 6, 7, 8];
pares = $.grep(numeros, function(v) {
	return v % 2 == 0;
});
 
// Valor do array pares: [2, 4, 6, 8]

A função $.grep recebe 2 parâmetros obrigatórios: o array original e uma função callback. Esse callback recebe, por sua vez, 2 parâmetros: o valor do item atual e o índice (posição) desse valor no array.
Existe um terceiro parâmetro (não obrigatório) da função $.grep chamado inverse, que por padrão tem o valor false. Esse parâmetro inverte a condição dentro do callback, fazendo exatamente o contrário que mandamos ela fazer. Se adicionarmos o parâmetro inverse no exemplo acima, teremos:

numeros = [1, 2, 3, 4, 5, 6, 7, 8];
pares = $.grep(numeros, function(v) {
	return v % 2 == 0;
}, true); // Perceba que adicionamos um novo parâmetro
 
// Valor do array pares: [1, 3, 5, 7]
// pares agora só contém os valores ímpares

Perceba que a função $.grep não altera o array original. Nos exemplos acima o array numeros continuará tendo todos os elementos.

Bom, é isso. Espero que agora remover itens de um array JavaScript utilizando o valor seja mais fácil no seu dia-a-dia.

[ATUALIZADO]

Algumas pessoas se manifestaram no Twitter dizendo que isso é errado. Realmente, existe uma forma bem simples de remover um item de um Array em JavaScript sem saber a posição desse item e sem usar jQuery. Segue abaixo:

frutas = ['maçã', 'banana', 'pera', 'uva'];
index = frutas.indexOf('banana');
frutas.splice(index, 1);

Utilizamos o indexOf para descobrir qual a posição do valor que queremos remover e depois conseguiremos utilizar o splice normalmente.

Agora, sobre a parte de retornar somente os números pares, o Nando Vieira deu uma dica boa:

[1, 2, 3, 4, 5, 6, 7, 8].filter(function(item) {
	return item % 2 == 0;
});

OBS.: Navegadores antigos não suportam a função filter(). Use por sua conta e risco.

Como gerar validações client-side em projetos Rails usando jQuery Validator com ClientValidations

Comente »

Estou fazendo uma nova aplicação aqui na empresa e teremos muitos formulários. Para não precisar criar um script de validação para cada formulário, fui atrás de um plugin que gerasse as validação JavaScript automáticamente, com base nas validações do modelo.

Sem maiores problemas, encontrei o plugin Live Validations. Ele faz tudo o que preciso, quer dizer, quase tudo. :(

Alguns dos formulários dessa aplicação são Nested Model Form e o Live Validations não suporta esse tipo de formulário.

Sendo assim, resolvi fazer meu próprio plugin, chamado Client Validations. O que ele faz é basicamente ler as validações definidas no Model e traduzi-las para JavaScript usando jQuery Validator.

Instalação

script/plugin install git://github.com/willian/client_validations.git

Como o Client Validations depende do plugin Validation Reflection, preciaremos instalar ele também:

script/plugin install git://github.com/redinger/validation_reflection.git

E por último basta instalar o jQuery e o jQuery Validator:

Não esqueça de carregar o jquery e o validator no seu HTML:

<%= javascript_include_tag 'jquery-latest.min.js', 'jquery.validate.min.js' %>

Supondo que temos o modelo abaixo:

class Task < ActiveRecord::Base
  validates_presence_of :name
end
 

E o formulário desse modelo:

<% form_for(@task) do |f| %>
  <%= f.error_messages %>
 
  <p>
    <%= f.label :name %><br />
    <%= f.text_field :name %>
  </p>
  <p>
    <%= f.submit 'Create' %>
  </p>
<% end %>

Tudo o que precisamos fazer para a validação client-side funcionar é adicionar o helper client_validations no formulário. Ficará assim:

<% form_for(@task) do |f| %>
  <%= f.error_messages %>
 
  <p>
    <%= f.label :name %><br />
    <%= f.text_field :name %>
  </p>
  <p>
    <%= f.submit 'Create' %>
  </p>
  <%= f.client_validations %>
<% end %>

Provavelmente você receberá a seguinte mensagem de validação:

translation missing: en, activerecord, attributes, task, name can't be blank

Para resolver esse problema, basta criar o arquivo de internacionalização em config/locales.

O plugin ainda está na versão 0.1.0 e muita coisa pode ser feita para melhorá-lo. Se tiver alguma sugestão, crie um comentário ou use a página do GitHub: http://github.com/willian/client_validations

Validação de Formulários com jQuery

Comente »

Não é difícil fazer validações de formulários no lado do cliente usando JavaScript. E com jQuery a brincadeira fica ainda mais fácil.

A primeira coisa a fazer é baixar o jQuery: http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js
Renomei o arquivo para jquery.js.

Depois precisaremos baixar o plugin de validação, feito em jQuery: http://jquery.bassistance.de/validate/jquery.validate.zip
Descompacte o zip. Utilizaremos apenas o arquivo jquery.validate.js.

Agora vamos ao código!

O Formulário

<form id="form-signup" action="#" method="post" accept-charset="utf-8">
    <fieldset>
        <legend>Formulário de Cadastro</legend>
        <label>
            Nome:
            <input type="text" name="nome" />
        </label>
        <label>
            E-mail:
            <input type="text" name="email" />
        </label>
        <label>
            Sexo:
            <select name="sexo">
                <option value="">Selecione</option>
                <option value="F">Feminino</option>
                <option value="M">Masculino</option>
            </select>
        </label>
        <input type="submit" value="Cadastrar" />
    </fieldset>
</form>

A Validação JavaScript

// Inicia o validador ao carregar a página
$(function() {
    // valida o formulário
    $('#form-signup').validate({
        // define regras para os campos
        rules: {
            nome: {
                required: true,
                minlength: 2
            },
            email: {
                required: true,
                email: true
            },
            sexo: {
                required: true
            }
        },
        // define messages para cada campo
        messages: {
            nome: "Preencha o seu nome",
            email: "Preencha seu e-mail de contato",
            sexo: "Informe seu sexo"
        }
    });
});

Veja o exemplo!

Eu não tenho medo de JavaScript

Comente »

Muitos desenvolvedores possuem medo (ou será preconceito?) quando alguém lhe diz que precisarão desenvolver algo em Client-Side.

Recentemente, o Elcio e eu participamos de um projeto que não tinha nenhuma linha de código Server-Side (PHP, Python, Ruby, etc), era puro JavaScript.

Sim, sabemos que não podemos prender o usuário ao JavaScript. Sabemos que devemos permitir que o usuário navegue pelo site mesmo se ele não estiver com o JavaScript habilitado no navegador dele. Mas não podemos ser radicais. Existem alguns casos que permitem o desenvolvedor não se preocupar com questões de Acessibilidade e JavaScript Não-Obstrutivo, esse era o nosso caso.

Com a combinação de AJAX, DOM e JSON podemos fazer coisas incríveis sem precisar, na maioria das vezes, de uma linguagem Server-Side. Veja como exemplo o Wallpapr, uma aplicação desenvolvida pelo Marco Gomes utilizando o framework jQuery e sem nenhuma linguagem Server-Side.

Assim que comecei a ouvir falar do framework jQuery comecei a estudá-lo e estou ficando cada vez mais curioso em aprendê-lo, mas até agora não consegui fazer testes reais. Por isso irei escrever uma série de posts falando sobre a utilização do jQuery, desenvolvimento de JavaScript Orientado à Objetos e JSON, muito JSON.

Até o próximo post!