1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

var interval = (function(){
 
	var ids = {}, names = {};
 
	return {
		add: function(name, timer, fn) {
			var interval = setInterval(fn, timer);
			ids[interval] = name;
			names[name] = interval;
		},
		stop: function(name) {
			clearInterval(names[name]);
		}
	}
 
})();

A utilização aconteceria mais ou menos assim:

1
2
3
4
5
6

function coisas_legais() {
   alert('Função legal');
 
}
 
interval.add('invervalo_legal', 300, coisas_legais);

Para parar a execução deste intervalo:

1

interval.stop('intervalo_legal')

Funções como argumentos

1
2
3
4
5
6
7
8
9
10

function imprimir(fn) {
    var texto = fn();
    alert(texto);
}
 
function gerador() {
    return 'Sou um texto!';
}
 
imprimir(gerador);

Neste primeiro exemplo, declaramos uma função chamada “imprimir” que espera como argumento uma outra função. Ela executa esta outra função, pega o seu retorno e passa ele como argumento de “alert”.

É importante perceber que na linha 10 “gerador” é passado como argumento sem os parênteses “()” no final. Ou seja, ela não está sendo invocada, somente passada. A execução da função ocorre na linha 2. Uma variação do nosso exemplo:

1
2
3
4
5
6
7
8
9
10
11
12
13

function imprimir(fn) {
    var texto = fn('por');
    alert(texto);
}
 
function gerador(lingua) {
    if (lingua === 'por') {
        return 'Sou um texto!';
    }
    return 'I´m a text!';
}
 
imprimir(gerador);

Agora “gerador” espera um parâmetro “lingua”. Este parâmetro é passado por “imprimir” no ato da execução, linha 2.

Funções anônimas

O nome pode parecer estranho mas o conceito é bem simples: funções anônimas são funções que não tem nome:

1
2
3
4
5
6
7
8
9
10
11

function imprimir(fn) {
    var texto = fn('por');
    alert(texto);
}
 
imprimir(function(lingua) {
    if (lingua === 'por') {
        return 'Sou um texto!';
    }
    return 'I´m a text!';
});

“Imprimir” continua sendo exatamente igual. Aguarda uma função como parâmetro. A diferença é que, ao invocarmos “imprimir”, declaramos uma função anônima ao mesmo tempo. Como ela não tem nome, não existe a possibilidade dela ser executada por uma outra função ou em outro momento do código. Somente “imprimir” a contém e pode executá-la.

E pra quê serve isso?

Funções como argumentos e funções anônimas são amplamente utilizadas como “callbacks”. Se você atrela um evento de click a um botão, algo deve acontecer quando este botão for clicado. Este “algo” é uma função. Ou então uma requisição Ajax. Vamos supor que temos uma requisição que busca se um determinado email já foi ou não cadastrado em um banco de dados. Quando a requisição finalmente termina, uma resposta é enviada ao nosso programa. Esta resposta é normalmente passada como argumento de uma função “callback”.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

(function($){
	$.fn.hhSelectMaker = function(data, cfg) {
 
		var cfg = cfg || {};
		if ( !cfg.key) cfg.key = 'key';
		if ( !cfg.value) cfg.value = 'value';
		if ( !cfg.selected) cfg.selected = false;
 
		var snippet = '';
		for (var i = 0; i < data.length; i++) {
 
			snippet += "<option value='" + data[i][cfg.key]; 
 
			if (cfg.selected === data[i][cfg.key]) {
				snippet += " selected='selected' ";
			}
 
			snippet += "'>" + data[i][cfg.value] + '</option>';
		}
		return this.append(snippet);
	};
})(jQuery);

Como funciona?

Montei dois exemplos para ilustrar o funcionamento do plugin.
O plugin recebe dois argumentos. O primeiro, obrigatório, é a fonte de dados. O segundo, opcional, é a configuração da fonte de dados.

Caso somente o primeiro argumento seja passado, o plugin espera um estrutura de dados no seguinte formato:

var dados = [
    { key: 'Chave1', value: 'Valor1' },
    { key: 'Chave2', value: 'Valor2' },
    { key: 'Chave3', value: 'Valor3' }
    // etc...
];

O nome das chaves pode ser modificado utilizando-se o segundo argumento:

$('select').hhSelectMaker(dados, {
	key: 'id', value: 'nome', selected: '5'				
});

Configurando-se o plugin desta maneira a estrutura de dados esperada é a seguinte:

var dados = [
    { id: 'Chave1', nome: 'Valor1' },
    { id: 'Chave2', nome: 'Valor2' },
    { id: 'Chave3', nome: 'Valor3' }
    // etc...
];

Além disso, a chave selected permite que um determinado valor seja selecionado como padrão após o carregamento do plugin.

Ele é muito útil porque geralmente determinados objetos de uma página possuem algum tipo de relação que os agrupa. Vamos imaginar a seguinte estrutura:

1
2
3
4
5
6
7
8
9
10
11

	<ul id="menu">
	    <li><a href="#">Capítulo 1</a></li>
	    <li><a href="#">Capítulo 2</a></li>
	    <li><a href="#">Capítulo 3</a></li>
	</ul>
 
	<div id="capitulos">
	    <div>Conteúdo capítulo 1</div>
	    <div>Conteúdo capítulo 2</div>
	    <div>Conteúdo capítulo 3</div>
	</div>

Um item de menu, ao ser clicado, faz com que seu respectivo conteúdo seja mostrado na tela. Todas as divs de conteúdo estão inicialmente escondidas. Se um item de menu for clicado novamente, todas as divs são escondidas e a div de conteúdo correspondente é revelada. Uma situação muito comum, trivial e extremamente recorrente. O código abaixo implementa a situação:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

var gerenciarCapitulos = function(){
	$('#menu li a').click(function(e){
		e.preventDefault();
		var indice = $(this).index('#menu li a');
		mostrarConteudo(indice);
	});
};
 
var mostrarConteudo = function(indiceCapitulo){
	var 
	capitulos = $('#capitulos div'),
	divCapitulo = $(capitulos[indiceCapitulo]);
 
	capitulos.hide();
	divCapitulo.show();
};
 
$(function(){
	gerenciarCapitulos();
});

Index é utilizado na linha 4:

4

		var indice = $(this).index('#menu li a');

Neste caso index recebe como argumento um seletor que indica o contexto que deve ser utilizado para descobrir o índice em relação a this (ou seja, o elemento clicado). Como os items de menu estão na mesma sequência das divs de capítulos o índice acaba sendo o mesmo. O valor do índice é passado para a função mostrarConteudo que recupera do vetor capitulos a div que deve ser mostrada:

12

	divCapitulo = $(capitulos[indiceCapitulo]);

Aqui você pode encontrar o exemplo funcionando.

Um exemplo ruim que não utiliza o método index

É possível programar a mesma funcionalidade de várias outras maneiras sem a utilização de index. Antes eu contava com “ids” que tivessem números em comum. Entretanto, isso implicava em mais código html:

1
2
3
4
5
6
7
8
9
10
11

	<ul id="menu">
	    <li id="link-1"><a href="#">Capítulo 1</a></li>
	    <li id="link-2"><a href="#">Capítulo 2</a></li>
	    <li id="link-3"><a href="#">Capítulo 3</a></li>
	</ul>
 
	<div id="capitulos">
	    <div id="capitulo-1">Conteúdo capítulo 1</div>
	    <div id="capitulo-2">Conteúdo capítulo 2</div>
	    <div id="capitulo-3">Conteúdo capítulo 3</div>
	</div>

Percebam que agora todos as lis de menu e todas as divs de capítulo possuem ids. O código JavaScript correspondente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

var gerenciarCapitulos = function(){
	$('#menu li a').click(function(e){
		e.preventDefault();
		var indice = $(this).parent().attr('id').split('-')[1];
		mostrarConteudo(indice);
	});
};
 
var mostrarConteudo = function(indiceCapitulo){
	var 
	capitulos = $('#capitulos div'),
	divCapitulo = $('#capitulo-' + indiceCapitulo);
 
	capitulos.hide();
	divCapitulo.show();
};
 
$(function(){
	gerenciarCapitulos();
});

Somente as linhas 4 e 12 foram modificadas. Na linha 4 utilizamos um split para obter o índice. Na 12 um seletor é montado dinamicamente utilizando este índice. É um código fraco e pouquíssimo elegante. Exemplo ruim pode ser encontrado aqui.

O framework JavaScript do Yahoo!,YUI, sempre recomendou que seus códigos fossem carregados remotamente. Este post do Ajaxian elenca uma série de vantagens. Destaco algumas delas:

• caching é feito corretamente; desenvolvedores não precisam mais se preocupar com isso
• gzip funciona
• a CDN do Google, distribuida em vários lugares do mundo, possibilita que os arquivos hospedados estejam “próximos” do usuário
• se uma quantidade significativa de websites utilizar a mesma URL para carregar um determinado framework, quando alguém entrar no seu site pode ser que este arquivo já tenha sido carregado

Faz bastante sentido para mim. Claro que se por um acaso os servidores do Google ficarem indisponíveis, ou o serviço descontinuado, você terá graves problemas. Além disso, os mais paranóicos podem afirmar que este é apenas mais um método desenvolvido para colher informações de usuários. Mas isso com certeza não impede que as pessoas continuem utilizando Gmail ou Analytics.

Outro potencial problema é que você fica dependente de uma conexão com a internet para desenvolver. A vantagem é que a maioria dos desenvolvedores não consegue mesmo trabalhar offline. Nosso trabalho já depende demais ferramentas online para isso ser uma preocupação genuína.

Como funciona?

Existem dois jeitos de se utilizar o serviço. O primeiro, é mais “estático” e simples. O processo é igual ao que você já faz: para incluir um framework, como MooTools, Dojo, jQuery, você deve incluir script src=”" em seu html. Basta fazer com que o atributo src desta tag aponte para uma URL do serviço: http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js. Este link leva diretamente para a versão minificada do jQuery 1.4 (que hoje é a mais atual).

O segundo jeito, mais “dinâmico”, consiste em incluir utilizando script src=”" o código fonte da API Ajax do Google: http://www.google.com/jsapi. Com este código disponível, você pode carregar os frameworks. Vamos incluir novamente o jQuery utilizando o método estático:

google.load("jquery", "1"); // obtém a última versão da família 1 (que hoje é a 1.4)
google.setOnLoadCallback(function() {
 
    $(function(){
        alert('Olá');
    });
 
});

A vantagem desta forma é que, com ela, você pode definir, como no exemplo acima, que quer pegar a versão mais atual do jQuery família de versão 1. É possível ser mais específico:

// obtém versão 1.3.2 (que é a última da família 1.3)
google.load("jquery", "1.3"); 
 
// obtém especificamente a versão 1.2.6 sem compressão
google.load("jquery", "1.2.6", {uncompressed:true});

É uma funcionalidade um pouco mais difícil de implementar mas sem dúvida interessante, pois permite que o seu código sempre utilize a versão mais atual de uma determinada família.

Manipulação e validação de datas é um assunto chato em qualquer linguagem de programação. Em JavaScript temos ao nosso dispor o objeto Date. Tarefas repetitivas como a validação de datas ou verificação de idade acabam se tornando extremamente maçantes. Esta foi a motivação que me levou a criar o eDate (Easy Date).

Download do eDate

Você pode baixar o eDate aqui. Não sei usar direito o GitHub ainda, então se vocês tiverem qualquer dificuldade é só avisar. Feito o download, é só incluir o arquivo na sua página utilizando uma tag script e começar a usar. eDate não é um plugin de nenhuma biblioteca funcionando com JavaScript puro.

Como funciona?

eDate funciona através de métodos estáticos. Praticamente todos os métodos recebem um objeto Date como argumento. As exceções são os métodos isValid e getNew. Vamos começar por eles.

isValid

Este método serve para determinar se uma data é ou não válida (retornando true / false). Recebe como argumento um objeto que será utilizado para validar a data.

1
2
3
4
5
6

var result = eDate.isValid({
    day: 29,
    month: 2,
    year: 2009   
});
alert(result);

A data não é válida porque 2009 não é um ano bissexto. Notem que utilizamos 2 para fevereiro. Uma das inconveniências do objeto date é a sua bizarra atribuição de números aos meses. Janeiro é 0, fevereiro 1, etc. eDate “conserta” isso, fazendo com que janeiro seja 1, fevereiro 2, etc. isValid pode receber parâmetros de outra forma:

1
2
3
4

var result = eDate.isValid({
    'dd/mm/yyyy': '29/02/2009'
});
alert(result);

Foi por isso que optei em utilizar um objeto como argumento para isValid. No exemplo acima utilizamos a máscara dd/mm/yyyy. É possível também utilizar mm/dd/yyyy e yyyy/mm/dd.

A grande vantagem das máscaras é que, muitas vezes, as datas que manipulamos em páginas estão em um único campo input de um formulário. Pretendo adicionar mais máscaras utilizando expressões regulares no futuro.

getNew

Este método retorna um novo objeto date. A vantagem de utilizar getNew ao invés de new Date é que podemos utilizar as máscaras. Além disso, não precisamos nos preocupar em subtrair o mês.

1
2
3
4
5
6
7

var 
d1 = new Date(2009, 11, 13),
d2 = eDate.getNew({'dd/mm/yyyy': '13/12/2009'});
 
if (d1.toString() === d2.toString()) {
    alert(d2.toString());
}

getToday

getToday retorna a data atual do seu computador mas com uma diferença: o horário vem zerado (meia-noite):

1
2

var t = eDate.getToday();
alert(t.toString());

Isso é diferente de:

1
2

var t = new Date();
alert(t.toString());

addDays

Este método serve para adicionar ou subtrair dias de um objeto date:

1
2
3

var d = eDate.getNew({'dd/mm/yyyy': '1/1/2010'});
eDate.addDays(d, -1);
alert(d.toString());

Criamos um objeto date através de eDate.getNew(). Depois utilizamos o método addDays para subtrair um dia do objeto. Percebam que o objeto em si foi manipulado por referência.

diffDays

Caso você precise saber a diferença em dias de uma data para outra:

1
2
3
4
5

var diff = eDate.diffDays(
    eDate.getNew({'dd/mm/yyyy': '03/03/2010'}),
    eDate.getNew({'dd/mm/yyyy': '20/02/2010'})
);
alert(diff);

Neste caso a primeira data está 11 dias no futuro em relação a segunda. Se invertéssemos a ordem das datas, o resultado seria -11. Se as datas fossem iguais o resultado seria 0.

isOverAge

Este método permite verificar, por exemplo, se alguém é ou não maior de idade:

1
2
3
4
5

var result = eDate.isOverAge(
    eDate.getNew({'dd/mm/yyyy': '20/10/1985'}),
    18
);
alert(result);

O primeiro argumento é um objeto date, o segundo o número de anos que deve ser utilizado para a comparação. Uma gama de websites exige que o usuário informe sua idade antes de liberar o acesso. É uma política um tanto quanto duvidosa porque o usuário pode mentir a idade ou alterar a data do seu computador, já que as datas geradas pelo JavaScript dependem do horário do computador do usuário.

Sugestões e melhorias

Por enquanto é isso que a o eDate faz. Penso em adicionar métodos e resolver bugs conforme a necessidade surgir. Aguardo comentários e sugestões.