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.

Desenvolvimento Web com Python, SQLObject e PSE – Parte 4

Comente »

Depois de mais uma longa pausa na série de desenvolvimento web com python[bb] cá estou, de volta com os posts.

Mas desta vez a pausa foi por um motivo nobre. Recentemente adquiri um MacBook[bb] e logo resolvi configurar o Apache2[bb] + mod_python + PSE + SQLObject + MySQL-python (MySQLdb). Precisava desta configuração para dar continuidade à série.

Então resolvi dedicar a 4ª parte da série exclusivamente para mostrar como configurar o ambiente no Mac OS X Leopard[bb].

Antes de efetuar os passos abaixo você precisará do Xcode instalado. Basta executar o 2º Disco do MAC OS X e executar o pacote de instalação do Xcode.

Apache

O Apache já vem instalado no MAC OS X, por isso precisaremos apenas habilitá-lo:
Vá em Preferências do Sistema, na opção Compartilhamento ative o serviço Compartilhamento Web.
Agora basta acessar http://localhost para ver o apache funcionando. Dentro do seu diretório home existe um diretório chamado Sites, basta colocar os arquivos lá e acessar pelo endereço http://localhost/~SEU_LOGIN.

Mod_Python

Agora chegou a hora de compilar o mod_python e configurá-lo no Apache.
Primeiramente faça o download do mod_python 3.3.1 (última versão disponível até a data deste post).

No terminal execute:

$ gunzip mod_python-3.3.1.tgz 
$ tar xvf mod_python-3.3.1.tar
$ cd mod_python-3.3.1
$ ./configure --with-apxs=/usr/sbin/apxs

Após executar os comandos acima o arquivo src/Makefile foi criado. Abra-o em seu editor de texto preferido e altere a linha 27:

LIBS=-lm  -framework  Python    -ldl
LDFLAGS= -Wl,-framework,Python  -u _PyMac_Error -framework Python   -Wl,-F.
OPT=

por:

LIBS=-lm  -framework  Python    -ldl
LDFLAGS= -Wl,-framework,Python  -u _PyMac_Error -framework Python   -Wl,-F. -arch x86_64
OPT=

Altere também a linha 49:

mod_python.so: $(SRCS)
    @echo
    @echo 'Compiling for DSO.'
    @echo
    $(APXS) $(INCLUDES) -c $(SRCS) $(LDFLAGS) $(LIBS) 
    @rm -f mod_python.so
    @ln -s .libs/mod_python.so mod_python.so

por:

mod_python.so: $(SRCS)
    @echo
    @echo 'Compiling for DSO.'
    @echo
    $(APXS) $(INCLUDES) -c -Wc,"-arch x86_64" $(SRCS) $(LDFLAGS) $(LIBS)
    @rm -f mod_python.so
    @ln -s .libs/mod_python.so mod_python.so

Cuidado para não quebrar a indentação. O arquivo todo está indentado por TAB se você utilizar espaço dará erro na hora de rodar o make.
Salve o arquivo e execute os comandos abaixo no terminal:

$ make
$ sudo make install

Precisamos efetuar uma alteração no mod_python para que ele funcione corretamente no Apache. Para isso abra o arquivo $ /Library/Python/2.5/site-packages/mod_python/importer.py como root e troque a linha 304 por esta:

        return __import__(module_name, {}, {})

Agora precisamos habilitar o mod_python no apache, para isso abra o arquivo /etc/apache2/httpd.conf (você precisará abrir o arquivo como root) e adicione a linha abaixo após a linha 116 (pelo menos foi a linha do meu arquivo):

LoadModule python_module libexec/apache2/mod_python.so

Pronto, agora é só reiniciar o Apache e o mod_python já estará configurado.

PSE

Baixe o PSE e execute os comandos abaixo no terminal:

$ tar xvf PSE-3.0.6.tar
$ cd PSE-3.0.6
$ sudo python setup.py install

Agora vamos configurar o Apache para aceitar os arquivos escritos usando o PSE. Abra o arquivo /etc/apache2/httpd.conf e adicione as linhas abaixo no final do arquivo:

PythonHandler pse_handler
AddHandler python-program .pt

Reinicie mais uma vez o Apache e crie dois arquivos de testes para ver se tudo está funcionando corretamente:
teste.py

msg = "Hello World!"

teste.pt

<?= msg ?>

Basta executar no navegador: http://localhost/teste.pt ou http://localhost/~SEU_LOGIN/teste.pt.

SQLObject

Instalar o SQLObject é simples, basta executar no terminal:

$ sudo easy_install -U sqlobject

MySQLdb

Instalar o MySQL-python exige uma pequena configuração. Primeiro baixe o arquivo e execute no terminal:

$ tar xzvf MySQL-python-1.2.2.tar.gz
$ cd MySQL-python-1.2.2

Abra o arquivo setup_posix.py e na linha 26 altere:

mysql_config.path = "mysql_config"

por:

mysql_config.path = "/usr/local/mysql/bin/mysql_config"

Agora abra o arquivo _mysql.c e remova as linhas 34, 37, 38 e 39:

#else
#include "my_config.h"
#endif
#ifndef uint
#define uint unsigned int
#endif

Também será preciso alterar as linhas 480 e 481:

    uint port = MYSQL_PORT;
    uint client_flag = 0;

por:

    unsigned port = MYSQL_PORT;
    unsigned client_flag = 0;

No terminal execute:

$ sudo ln -s /usr/local/mysql/lib /usr/local/mysql/lib/mysql
$ sudo python setup.py build
$ sudo python setup.py install

Quando fizer o comando de sudo python setup.py build você poderá receber algumas mensagens de warning, ignore-as.

Para testar o SQLObject execute o script python abaixo:

from sqlobject import *
sqlhub.processConnection = connectionForURI('mysql://root:SUA_SENHA@localhost/test')
class Usuario(SQLObject):
    nome = StringCol()
 
Usuario.createTable()

Após executar o script acima a tabela usuario deverá existir no banco de dados test.

Se você tiver problemas para executar o SQLObject com MySQL verifique se a versão do MySQL instalada é a de 32bits.

Pronto, o ambiente está completamente configurado no MAC OS X.

Agora voltaremos com nossa programação normal!
;)

Screencaster – Novidades na Web

Comente »

Meus amigos Guilherme Rambo e André Luz acabaram de lançar o Screencaster.com.br.

Segundo eles, o Screencaster “trata-se de um blog focado principalmente na produção de vídeo-aulas, podcasts e outros conteúdos multimídia. Nosso objetivo é mostrar nosso conhecimento e, dessa forma, fazer com que você aprenda.”

Acho a idéia muito válida e espero que dê tudo certo para o Guilherme e o André.

Boa sorte!

Desenvolvimento Web com Python, SQLObject e PSE – Parte 3

Comente »

Continuando com a série sobre desenvolvimento web[bb] com Python[bb], vou mostrar agora como deixar as coisa mais interessante com includes e formulários.

Includes

É muito comum utilizar arquivos separados que estarão em várias partes da aplicação. Por exemplo, podemos ter um arquivo para o cabeçalho HTML[bb], um outro para o menu e um terceiro para o rodapé do HTML[bb].

Mas antes de criarmos nossos arquivos de include, teremos que configurar o PSE para apontar para nosso diretório de includes. Para isso abra o arquivo pse.conf (no Linux este arquivo fica em /etc/pse/pse.conf). Procure pela linha

;IncludePath = /app/servlet/path,/other/servlet/path

E troque por:

IncludePath = /var/www/includes,.

Caso você não esteja usando Linux[bb] (eu uso o Ubuntu[bb]) configure para o diretório que o Apache aponta. Isso muda de sistema para sistema.
Dentro deste diretório crie um sub-diretório chamado includes e dentro deste sub-diretório vamos colocar os arquivos abaixo:

cabecalho.pt

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="pt-BR">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Biblioteca ABC</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="language" content="pt-br" />
</head>
<body>
    <div id="geral">
        <div id="topo">
            <h1>Biblioteca ABC</h1>
        </div>
        <div id="menu">
            <ul>
                <li class="primeiro"><a href="home.pt">Home</a></li>
                <li><a href="categorias_list.pt">Categorias</a></li>
                <li><a href="livros_list.pt">Livros</a></li>
                <li><a href="clientes_list.pt">Clientes</a></li>
                <li class="ultimo"><a href="sair.pt">Sair</a></li>
            </ul>
        </div>

rodape.pt

        <address class="rodape">
            &copy; Biblioteca ABC
        </address>
    </div>
</body>
</html>

Ok, os arquivos estão criados!
Agora vamos criar o arquivo principal do nosso sistema. Este arquivo terá um formulário de login, porém ele fará include do cabeçalho e do rodapé.
Salve o arquivo abaixo na raiz de onde ficará a sua aplicação, ou seja, em um diretório acima do sub-diretório includes.

index.pt

<?= pse.include("cabecalho.pt") ?>
<form id="frm-login" method="post" action="">
    <fieldset>
        <legend>Logar no Sistema</legend>
        <label>E-mail: <input type="text" id="email" name="email" /></label>
        <label>Senha: <input type="password" id="senha" name="senha" /></label>
        <input type="submit" id="entrar" name="entrar" value="Entrar" class="botao" />
    </fieldset>
</form>
<?= pse.include("rodape.pt") ?>
 

Perceberam o quanto é simples?
Toda página PSE possui um objeto chamado pse que contém vários métodos e objetos e no exemplo acima utilizamos o método include. Mais para frente mostrarei outras funcionalidades do objeto pse.

O método include recebe como parâmetro o nome do arquivo que iremos incluir. O PSE procura este arquivo nos diretórios que configuramos no arquivo pse.conf.

Para não prolongar muito, explicarei como trabalhar com formulários utilizando PSE no próximo post.

Prometo não demorar muito para postar o próximo post da série e aproveito para pedir o feedback de vocês em relação à esta série.

Desenvolvimento Web com Python, SQLObject e PSE – Parte 2

Comente »

Continuando o post anterior, vamos agora instalar e configurar nosso ambiente para começar o desenvolvimento com Python, SQLObject e PSE.

Vou assumir que você utiliza Ubuntu, ou qualquer outra distribuição Linux baseada no Debian. Caso você utilize outro Sistema Operacional, verifique na página oficial dos programas (veja no post anterior) como instalar cada um deles.

O Elcio publicou um post explicando, detalhadamente, como instalar o apache2, o mod_python e o PSE na versão 7.10 do Ubuntu, incluindo uma correção necessária para essa versão do Ubuntu.

Após executar os passos descritos pelo Elcio, falta apenas instalar o SQLObject:

sudo apt-get install python-sqlobject
[ATUALIZADO] Seguindo a dica do Elcio:
sudo apt-get install python-mysqldb python-setuptools
sudo easy_install sqlobject

Tudo instalado e configurado? Ok, agora vamos entender um pouco o funcionamento do PSE para depois desenvolvermos algo funcional.

O PSE trabalha com arquivos na extensão .pt, então vamos fazer um teste criando um arquivo chamado hello_world.pt no diretório do apache (no Ubuntu esse diretório fica em /var/www):

<?="Hello World"?>

As tags <? e ?> indicam a abertura e o fechamento de código Python e tags especiais do PSE, que veremos mais adiante.

Execute no navegador: http://localhost/hello_world.pt.

Vamos alterar agora nosso arquivo para integrar código Python com o PSE gerado:

hello_world.pt

<?= msg ?>

hello_world.py

import datetime
msg = "Hello Word<br>Hoje é %s" % datetime.date.today().strftime("%d/%m/%Y")

Execute novamente no navegador: http://localhost/hello_world.pt.

Perceba que escrevemos código Python normalmente e que o arquivo hello_world.pt identificou a variável msg e escreveu seu conteúdo na tela. Isso acontece porque o PSE integra automaticamente arquivos que tenham o mesmo nome, ou seja, ele sempre executara hello_world.py junto com hello_world.pt.

No próximo post mostrarei como trabalhar com includes no PSE e formulários. Prometo que os próximos posts não demorarão tanto quanto este. ;)

Desenvolvimento Web com Python, SQLObject e PSE – Parte 1

Comente »

Já faz um tempo que estou ensaiando para escrever sobre como desenvolvemos aplicações web[bb] lá na Visie. Nós utilizamos Python porque amamos essa linguagem e achamos uma dupla excelente para auxiliar no desenvolvimento Web. Estou falando do PSE e do SQLObject.

Existem muitas alternativas que permitem a criação de aplicações web com Python, mas a que irei apresentar nessa série de artigos é a que prefiro.

Primeiro explicarei do que se trata cada ingrediente que utilizaremos e depois como instalá-los, configurá-los e como utilizá-los.

Python
Uma linguagem dinâmica, interativa e orientada a objetos. Diferente de linguagens como o PHP[bb], Python possui tipagem forte, mas não necessita de declarações de variáveis. É uma linguagem interpretada e não compilada, como JAVA[bb] e DotNet[bb].

falei sobre Python anteriormente, citando exemplos comparativos com PHP. Mas se você ainda não conhece a linguagem e quiser aprender sobre ela, segue abaixo uma lista de sites que recomendo:

SQLObject
Trata-se de uma biblioteca de mapeamento objeto-relacional[bb] escrita em Python.
O objetivo do SQLObject é o mesmo do Hibernate[bb] para JAVA e do nHibernate para DotNet: permitir que as tabelas de um banco de dados sejam mapeadas e utilizadas como objetos dentro do programa.

Felizmente, o SQLObject possui uma documentação completa disponibilizada online.

PSE
É um framework escrito em Python que permite a publicação de páginas na web. Necessita do Apache e do mod_python instalados e configurados para funcionar.
Seu funcionamento é parecido com o Framework SmartyTemplate, feito para PHP. Mas ele vai muito além, pois nos permite: efetuar requisições de dados enviados por formulários (POST) e de QueryStrings (GET), a criação de Sessões e Cookies, a criação de tags customizadas (Custom Tags), a recuperação do IP do usuário, etc.

Maiores informações podem ser encontradas no site oficial e no manual.

 

Após apresentar os ingredientes necessários para a utilização do Python no desenvolvimento web, mostrarei como instalar e configurar todos os ingredientes para podermos colocar a mão na massa.
Para este post não ficar muito extenso, publicarei a instalação e a configuração em um próximo post.

Twitter – Minhas Impressões

Comente »

Muita gente já falou sobre o Twitter então acho que não preciso explicar o que ele é e como funciona. Até por que esse não é o foco desse post.

Lembro que em 2005, quando ainda trabalhava em São José dos Campos, ficava adimirado em ler blogs sobre Padrões Web[bb], Produtividade Web[bb], Open Source[bb] e etc.

O que mais me animava era quando eu tinha uma dúvida e mandava um e-mail para os donos desses blogs e eles respondiam com a maior boa vontade do mundo, falavam de uma forma como se fossemos amigos. Sim, claro, afinal eu fazia (e faço) parte da audiência dos seus blogs e é interessante para ele me tratar bem.

Faz alguns meses que conheci o Twitter e o mais engraçado foi que o conheci através de uma crítica do Bruno Torres. Tudo bem que hoje ele “se converteu” e é uma das pessoas que eu mais vejo escrever no Twitter.

Bom, essas pessoas famosas possuem várias pessoas que a estão seguindo pelo Twitter e eu? Bom, eu tenho algumas dezenas…rs Mas o que acho mais interessante no Twitter é poder acompanhar o dia-a-dia de quem antes eu somente acompanhava um post ou outro por semana.

Esse negócio de responder “O que você está fazendo agora?” fez com que as pessoas ficassem mais próximas, mesmo as que não se conhecem.

É verdade que você pode “seguir” uma pessoa que não te “segue”, mas e daí? Você fica sabendo tudo o que ela faz, o que ela lê, o que ela indica, etc. Você consegue até ser chamado para um barzinho, fazer uma happy hour com pessoas do twitter.

Enfim, não sei até quando essas onda vai durar, mas está sendo uma experiência muito interessante.

Mais leitura sobre o Twitter:

GeoBlogs Brasil > Divulgando

Comente »

O Mauro Amaral (CarreiraSolo.org e Contém Conteúdo) está montando uma lista de endereços de blogs do brasil, é o GeoBlogs Brasil.

O serviço utiliza a API do Google Maps para “alfinetar” no mapa os endereços dos blogs espalhados pelo nosso país. Para cadastrar o seu blog é simples, basta acessar o post do Mauro e deixar um comentário com seus dados residenciais.

Vai ser interessante quando o mapa estiver lotado de alfinetes…rs

Palestras

Comente »

Na semana que vem, do dia 09/11 até o dia 11/11, acontecerá a 5ª edição do CONISLI (Congresso Nacional de Software Livre).

O evento visa promover o Software Livre através de palestras, mini-cursos e tutoriais apresentados por profissionais que utilizam Software Livre no seu dia-a-dia.

Eu acompanho o CONISLI desde 2004, e na edição desse ano fui convidado como palestrante do evento. Confesso que fiquei muito contente com o convite, mas não foi nada fácil pensar em um tema para apresentar em um evento tão grande e que conta com muitas pessoas que poderiam estar lá, no meu lugar, apresentando a palestra.

Depois de longo tempo pensando e conversando com algumas pessoas resolvi falar sobre “Desenvolvimento Web com Python, SQLObject e PSE”.

Agora que a palestra está confirmada, as datas marcadas, o conteúdo da palestra quase pronto, voltarei a publicar novos posts aqui no blog. Muitos deles sobre o tema da palestra.

Inscrições e Grade de Horários:

Também fui convidado como palestrante do PHPConference Brasil 2007. Assim que liberarem eu postarei as informações sobre esse evento.