Javascript sempre foi uma linguagem abominada por muita gente, mas que há algum tempo tem recebido mais atenção. Na minha opinião, grande parte da evolução da linguagem se deve à criação de bibliotecas que simplificam (e muito!) as tarefas mais comuns no dia-a-dia do programador. Dentre estas bibliotecas, a minha favorita é a jQuery.

Comecei a usar jQuery na versão 1.2.6.  De lá pra cá (a versão atual é a 1.4.2), muita coisa melhorou! A documentação está excelente, a existem ferramentas desenvolvidas por terceiros que são uma mão na roda!

Como Python é minha linguagem preferida, muitas vezes sinto falta de algumas funcionalidades dela quando estou programando em Javascript/jQuery. Recentemente descobri equivalentes às funções map e filter, para manipulação de listas, no jQuery.

A primeira opção é usar a jQuery.map(), cuja utilização é bem direta:

var resultado = jQuery.map([1, 2, 3, 4, 5], function(valor, i) {
    return valor * valor;
});

O primeiro argumento é a lista (o array) e o segundo é a função (lambda) que será aplicada a cada item da lista. O retorno é uma nova lista: [1, 4, 9, 16, 25].

Infelizmente, não existe a função jQuery.filter(), mas a jQuery.map() pode ser usada em substituição, bastando que para isso se retorne null para os valores que deseja filtrar:

var resultado = jQuery.map([1, 2, 3, 4, 5], function(valor, i) {
    return valor % 2 == 0 ? valor : null;
});

O retorno neste caso é: [2, 4].

A segunda opção eu acabei descobrindo por acaso. É possível usar as funções .map() e .filter(), originalmente utilizadas para manipulação de objetos jQuery, para manipular listas:

var resultado = $([1, 2, 3, 4, 5]).map(function(i, valor) {
    return valor * valor;
}).get();

var resultado = $([1, 2, 3, 4, 5]).map(function(i, valor) {
    return valor % 2 == 0;
}).get();

Note que neste caso a ordem dos argumentos da função lambda é o inverso do primeiro caso. Como essa última utilização não é tão direta, cabem algumas explicações.

Ao passar um array para a função jQuery (abreviada por $), é possível usar as funções .map() e .filter(), exatamente como você faria para elementos DOM. Como o resultado dessas funções é um objeto jQuery, é necessário usar a função .get(), para transformá-lo novamente em um array Javascript.

Para ajudar na compreensão, escrevi um exemplo funcional, com testes unitários feitos com o framework QUnit.

O CSoC é uma iniciativa que visa ampliar o ensino de linguagens de programação nos cursos de Engenharia do CEFET/RJ. Resumindo, é um curso de programação organizado pelos alunos, em benefício dos alunos.

Várias pessoas já participaram das duas primeiras edições, e agora chegou a sua vez! O curso começa em 2 de fevereiro e dura até o início do período letivo (com pausa para o Carnaval). As aulas serão na COLAN — 3º andar do Bloco E, Unidade Maracanã — às terças e quintas, de 17h30 às 19h, pontualmente.

Até quem não sabe nada sobre programação pode participar! Vamos aprender Python, passando rapidamente por C e C++, utilizando o que há de mais inovador e atual no ensino de linguagens de programação.

Quanto custa? Nada, é de graça! Sério, quanto é? Eu já disse: é de graça!!!

Então, o que você está esperando?! Entre logo no nosso grupo de e-mails e garanta a sua vaga (são só 20!).

Daremos preferência aos alunos do CEFET/RJ; caso as vagas não sejam preenchidas, o curso será aberto ao público externo.

Abração!

Uma dúvida comum quando se está começando é sobre declaração de variáveis: quando e porque utilizar o var? Vejamos um exemplo:

var numero = 1;

function exibe()
{
    alert(numero);
}

exibe();

Conforme esperado, o valor 1 é exibido, já que a variável numero é global. Para confirmar essa informação, vamos fazer:

var numero = 1;

function exibe()
{
    alert(numero);
}

function altera()
{
    numero = 2;
}

exibe();
altera();
exibe();

Como resultado, são exibidos os valores 1 e 2. Assim, a função altera está modificando o valor da variável global numero.

Afinal, onde o var se encaixa nessa história? O var serve para declarar o escopo da variável. Se uma variável é declarada sem o var, ela é automaticamente global. Quer ver?

function define()
{
    numero = 1;
}

function exibe()
{
    alert(numero);
}

define();
exibe();

O número 1 é exibido. Para confirmar, faça o seguinte:

function define()
{
    var numero = 1;
}

function exibe()
{
    alert(numero);
}

define();
exibe();

Neste caso ocorre o seguinte erro: ReferenceError: numero is not defined. Isto ocorre pois a variável numero pertence ao escopo da função define e, portanto, não pode ser acessada de dentro da função exibe.

Quais são as implicações disso? Considere o seguinte exemplo:

var Cachorro = function(nome)
{
    _nome = nome;

    this.get_nome = function()
    {
        return _nome;
    }

    // (...)
}

var Gato = function(nome)
{
    _nome = nome;

    this.get_nome = function()
    {
        return _nome;
    }

    // (...)
}

rex = new Cachorro('Rex');
mimi = new Gato('Mimi');
alert(rex.get_nome());
alert(mimi.get_nome());

Neste caso, é exibido Mimi duas vezes, ao invés do que esperávamos: Rex e Mimi. Isto acontece pois, ao contrário do que pretendíamos, _nome é uma variável global, e o último valor que é atribuído a ela é ‘Mimi’ (dentro do “construtor” da classe Gato).

Para evitar este tipo de problema, sempre declare suas variáveis no Javascript utilizando o var. O código corrigido ficaria assim:

var Cachorro = function(nome)
{
    var _nome = nome;

    this.get_nome = function()
    {
        return _nome;
    }

    // (...)
}

var Gato = function(nome)
{
    var _nome = nome;

    this.get_nome = function()
    {
        return _nome;
    }

    // (...)
}

var rex = new Cachorro('Rex');
var mimi = new Gato('Mimi');
alert(rex.get_nome());
alert(mimi.get_nome());

Um código vale mais do que mil palavras, então acompanhem comigo:

>>> tabela = [[0, 0], [0, 0], [0, 0]]
>>> segunda_linha = tabela[1]
>>> segunda_linha[0] = 1
>>> tabela
[[0, 0], [1, 0], [0, 0]]

Ah, a beleza dos objetos sendo passados por referência! O segunda_linha é uma referência ao segundo elemento da lista tabela, portanto ao alterá-lo, estamos, na verdade, alterando a própria lista original. Quantas possibilidades! Sejamos, então, mais ousados:

 >>> tabela = [[0, 0], [0, 0], [0, 0]]
 >>> primeira_celula_da_segunda_linha = tabela[1][0]
 >>> primeira_celula_da_segunda_linha = 1
 >>> tabela
 [[0, 0], [0, 0], [0, 0]]
 

Êpa! Não funcionou! O que aconteceu?!

O problema neste caso não está na forma como o objeto está sendo passado. Na verdade, o que leva a esse comportamento é o método de atribuição do Python.

Ao invés de alterar tabela, “primeira_celula_da_segunda_linha = 1″ está reatribuindo a variável primeira_celula_da_segunda_linha ao objeto 1. Deste modo, não há como esperar que a lista original seja alterada. Simples, não?

Palestras lotadas

Coding Dojo: sucesso de público

A organização e a estrutura estavam excelentes! Tudo funcionando redondinho, e pequenos detalhes que fizeram a diferença, como os quadros de feedback, estrategicamente posicionados na saída do salão de palestras e na arena do Coding Dojo.

Quadro de feedback: o que foi bom

Quadro de feedback: o que pode melhorar

Vale ressaltar a presença de figuras internacionais, como Jeff Patton e Jacob Kaplan-Moss, e o apoio da galera de São Paulo, que ajudou bastante no Coding Dojo.

Parabéns aos organizadores, Henrique Bastos e Guilherme Chapiewski, e a todos que contribuíram para que o evento fosse um sucesso! Que venha o Dev in Rio 2010!

Da esquerda pra direita: Henrique Bastos, Jacob Kaplan-Moss, eu, Giuseppe Romagnoli e Cláudio Berrondo. Agachados: Guilherme Chapiewski e Ygor Speranza

A apresentação teve uma prática de TDD (usando Python), e assim que eu aprender a usar o Git, e criar uma conta no GitHub, coloco o link aqui (eu poderia colocar o código em outro lugar, mas dessa forma eu me forço a ler o tutorial de Git que há tanto tempo está na minha TOREAD list).

\pdsetup{
    \logocmd={\includegraphics{logo.eps}},
    \logopos={.1\slidewidth,.9\slideheight},
    \logohook=tl
}

Infelizmente, desta forma a logo vai aparecer sempre na mesma posição, o que não é o ideal. Se eu quiser, por exemplo, colocar a logo centralizada na tela de título, e na tela de conteúdo colocá-la no canto superior esquerdo, eu não posso. Ou melhor, não podia!

Fuçando um pouco no arquivo fonte da classe (/usr/share/texmf-dist/tex/latex/powerdot/powerdot.cls, no meu caso) descobri que se eu não definir a posição da logo (logopos), ela não é exibida. Fuçando mais um pouco, descobri como obter a logo definida pelo usuário. Bastou, então, usar meus humildes conhecimentos de PSTricks e definir a posição da logo em cada estilo, por exemplo:

\pddefinetemplate{titleslide}{
    titlefont=\LARGE\bfseries\centering\color{pdcolor3},
    texthook=t,textpos={.5\slidewidth,.75\slideheight},
    textwidth=.9\slidewidth,textfont=\large\centering,
    textheight=.6\slideheight
}{%
    %--- Insere a logo
    \rput[B](.5\slidewidth,.2\slideheight){%
        \resizebox{!}{1.1cm}{\usebox\pd@logobox}}
}

Usei o comando resizebox para definir uma altura padronizada para a logo, de modo que o usuário não tenha que se preocupar com isso.

Em breve pretendo disponibilizar este estilo no qual estou trabalhando. Aguardem!

EDITADO:

A solução proposta acima apresenta um problema de erro de divisão por zero quando não é informada uma logo usando o comando logocmd. Um forma de contornar este problema é usar o pacote ifthen e inserir a logo somente se a largura da savebox for maior do que zero:

%--- Insere a logo
\newlength{\logoboxwidth}
\settowidth{\logoboxwidth}{\usebox\pd@logobox}
\ifthenelse{\logoboxwidth > 0}{
    \rput[B](.5\slidewidth,.2\slideheight){%
        \resizebox{!}{1.1cm}{\usebox\pd@logobox}}
}{}