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!

Retornando o último número (script JavaScript)

Comente »

O DGmike publicou o post Retornando o último número (script PHP), o Elcio mostrou a visão dele em Retornando o último número (script Python) e resolvi fazer o mesmo em JavaScript[bb]:

function ultimoNumero(str) {
    return str.match(/\d+/g).pop();
}

[UPDATE]

Uma simples correção para quando não for passado uma string e para quando a string for vazio ou não tiver números:

function ultimoNumero(str) {
    try {
        return str.match(/\d+/g).pop();
    } catch(e) {
        return '';
    }
}

Muito simples, não?

E os Padrões Web?

Comente »

Atualmente estou alocado em um cliente, desenvolvendo um projeto de grande porte. Esse cliente reformulou todo o seu site e estão tendo alguns problemas com as mudanças.

Ontem ouvi uma conversa vindo de uma mesa próxima a minha. Aquela conversa me deixou indignado a ponto de colocar o fone de ouvido, procurar algumas músicas do System of a Down e aumentar o volume do som. Veja um trecho da conversa:

Fulano 1: Cara, você conhece o navegador Safari?
Fulano 2: Sim, é um navegador da Apple.
Fulano 1: Você tem ele instalado aí?
Fulano 2: Aqui não, tenho somente em casa. Por quê?
Fulano 1: Você já acessou o novo site da Nossa Empresa no Safari? Tem alguns clientes ligando aqui dizendo que o site fica todo desformatado no Safari.
Fulano 2: Não, ainda não abri. Mas abri no no Firefox e vi que nele também fica desformatado. O menu vai parar no canto da tela…
Fulano 1: Assim não dá! Não posso fazer uma programação diferente para cada tipo de navegador! O usuário que se vire para acessar o site. Ele que utilize o Internet Explorer para navegar em nosso site. No IE funciona perfeitamente.
Fulano 2: Acho que você terá que fazer um “scriptizinho” para identificar o navegador do usuário e utilizar um JavaScript para cada navegador.

E depois disso a conversa foi piorando cada vez mais… Fazia tempo que eu não ouvia alguém falando um absurdo desses e achava que não ouviria mais.

Para que servem os Padrões Web? E a programação de JavaScript Cross-browser?

Muitas pessoas, assim como eu, ouviram esse diálogo e, na hora do almoço, foi o comentário da mesa…rs Daí comecei a chegar em uma conclusão:
A maioria das pessoas que estavam na mesa tinham aproximadamente 25 anos de idade. Os dois aí da conversa devem ter ultrapassado os 30. Será que isso é problema de pessoa mais velha?
Será que só porque a pessoa é mais velha ela tem o direito de não acompanhar a evolução da Web?

Não é possível. Conheço pessoas com mais de 30 anos que sabem, e sabem muito, os Padrões Web, JavaScript Cross-browser, Acessibilidade, e o quanto é importante tudo isso.

Não sei no que deu o final da história. O fone de ouvido e as pesadas músicas do System of a Down me salvaram de ouvir o resto. Mas acredito que gambiarras virão para que o site funcione pelo menos no Firefox.

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!