Parece algo mínimo, mas irrita profundamente quem está acostumado a trabalhar da forma correta.

Porque forma correta? Simples, porque pode dar erro se colocar a chave na linha de baixo.

Pensem na função abaixo getUser que retorna um objeto em JavaScript

function getUser(){
	return {
		nome:'Danilo',
		idade:28
	}
}

getUser() // retorna um objeto

Se fosse pra deixar a chave embaixo, ficaria assim:

function getUser()
{
	return
	{
		nome:'Danilo',
		idade:28
	}
}

getUser() // retorna undefined

Só que há um problema: pelo fato do ponto e vírgula indicando quebra de linha ser no JavaScript ser opcional, o return não entende que é pra retornar um objeto e encerra a função ali, retornando undefined.

E tem um caso pior, que simplesmente dá erro de sintaxe:

function getPosition()
{
   return
   {
       top:32,
       left:50
   }
}
// dá erro "SyntaxError: Unexpected token :"

E se fosse feito com os braces na linha de cima, daria certo.

O incrível é que mesmo com esse argumento, tem programador que não dá o braço a torcer e insiste dizendo que JavaScript veio do java e no java se programa assim. ERRADO, JavaScript veio de Scheme e qualquer livro de Padrões em Javascript vai aconselhar abrir o bloco com a chave na linha de cima.

Dá pra configurar isso no Visual Studio 2010 (no 2008 deve dar também).

Porém, nessa edição o formato foi diferente, o tema era HTML5 e os convidados foram o Élcio da Visie (empresa de treinamento e desenvolvimento web que vai oferecer um curso de html5) e a AgênciaClick, onde esteve presente eu (Programador de Interface), Robson Dantas (Gerente de Tecnologia) e Ricardo Murer (Diretor de Tecnologia).

Durante a nossa apresentação, mostramos alguns protótipos de estudos que fizemos aqui na AgênciaClick, entre eles um player usando a tag <audio> simulando a interface do winamp e um jogo simulando o Guitar Hero:

O jogo está disponível aqui. Funciona para Chrome 5+, Ópera 10.5+, Safari 5+ e Firefox 3.5+ (sendo que para Firefox, é necessário estar hospedado em um servidor, ou seja, se você abrir o html como um arquivo, não funciona por questão de segurança do Firefox).

O jogo usa os conceitos de <audio> e <canvas> do HTML5, CSS3 e bastante javascript. Eu desenvolvi o game em 4 dias, ou seja, dá pra melhorar muito, devo aprimorar o código, colocar Ranking Online, mais músicas, etc.

Mas a idéia inicial era mostrar que pode ser feito um jogo em html5, com 20kb de JavaScript que antes só era possível ser desenvolvido em flash.

Pra iniciar, fiz um jogo simples daqueles que todo celular tem, usando somente o elemento Canvas.

O Canvas funciona como se fosse um “shape” do photoshop, você cria um elemento e lá você pode desenhar literalmente, circulos, quadrados, linhas, pontos, colocar backgrounds, usar degradê, etc.

O Canvas não dá suporte ao ie6, ie7 e ie8. Existe um elemento similar pra eles chamado “shape” e existem algumas libs em javascript que traduz automaticamente tudo o que for desenhado em canvas pra shape, ou seja, você chama o js que ele se vira com o resto. No caso, usei o explorercanvas (dica do Koji), mas também tem o html5.js e o canvas.js disponível pra gente usar.

O jogo é bem simples, não tem muitos recursos, poderia ter ranking, som, opções e um monte plus mas não era essa a intenção do primeiro post sobre html5. O jogo tem 8kb (somando html / css e javascript ) pros browsers que suportam canvas e 19kb para os que não suportam. não usa nenhum framework de javascript (do tipo jquery, mootols, prototype) e não faz requisição de nenhuma imagem, tudo que está na tela foi desenhado em canvas com javascript.

Deixei disponível o código fonte e para jogar é só clicar na imagem ou entrar aqui

Por sinal, recomento o Chrome ou Opera 10.5 que são os browsers mais rápidos da atualidade.

Quem jogar, fala quantos pontos fez.
=)

A ferramenta de idiomas do Google, acredito que todo mundo já conhece. Porém pouca gente sabe que o Google oferece uma API em ajax para tradução.

E pra facilitar ainda mais, existe também um plugin de jQuery chamado jquery-translate que interage com a API do google, aí fica bem simples:

Para traduzir um texto basta chamar o node do html pelo seletor do jQuery e chamar a função translate:

	<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
	<script type="text/javascript" src="js/jquery-translate-1.3.9.min.js"></script>
	$(document).ready(function(){
		$('button#traduzir').click(function(){
			$('div#texto').translate('en')
		});
	});

No exemplo acima, quando clicarem no botão traduzir, irá traduzir todo o conteúdo da div id=”texto” para o inglês, a API do Google detecta automaticamente o idioma original.

Veja um demo abaixo que eu fiz:

Clique em uma das bandeiras abaixo do texto para traduzir para o idioma selecionado:

Quem quiser entender, deixei o exemplo disponível pra download.

Mas como quase tudo na vida, tem solução:

Solução número 1 – Pare de trabalhar com XML e comece a usar JSON.

Solução número 2 – Existe um parseXML que funciona pro IE. E alguém de muita boa vontade que se chama Jonathan Sharp fez disso um plugin que pra jQuery que se chama XMLDOM .

E como funciona?

assim:

Forma normal (que normalmente dá erro no IE)

$.ajax({
	url: 'xml/erros.xml,
	type: "GET",
	dataType: "xml",
	contentType: "application/x-www-form-urlencoded; charset=UTF-8",
	success: function(xml){
		var htm ='';
		$(xml).find('item').each(function(n){
			htm += $(this).text();
		}
		$('#erros').append(htm);
	}
});

Com o plugin XMLDOM

$.ajax({
	url: 'xml/erros.xml,
	type: "GET",
	dataType: "html",
	contentType: "application/x-www-form-urlencoded; charset=UTF-8",
	success: function(xml){
		var htm ='';
		$.xmlDOM(xml).find('item').each(function(n){
			htm += $(this).text();
		}
		$('#erros').append(htm);
	}
});

E pra quem quiser evitar o trabalho, pode baixar o plugin direto aqui.

[]s

No post de hoje vou falar sobre duas coisas que me ajudam muito na minha profissão, Firefox e Javascript.

Ontem ví uma notícia, que a versão 3.5 Beta 4 do Firefox (que está demorando um tantão pra ser lançada), tem um algoritmo que executa Javascript 19% mais rápido do que a versão Beta 3, esta que também já é mais rápida que a versão atual do Firefox. Isso é bom pra quem é programador de interface, e principalmente pro usuário.

Comecei a usar o Firefox em meados de 2005, achei legal porque “tinha abas”. Na época eu era programador back end, e como a maioria, pouco me importava se meus sites rodavam em outro browser ou não. De lá pra cá eu, as empresas, as agências, os clientes, os navegadores, os sites e até os usuários mudaram. Hoje temos (todos nós) o conceito de webstandards muito forte, e hoje os próprios usuários também são mais exigentes… normalmente temos diversas opções pra qualquer tipo de serviço web, então se um site não funcionou no navegador do usuário, ele não muda de navegador, muda de site… procura por outro serviço que faz a mesma coisa, é claro que não serve pra tudo (como sites de bancos, malditos).

Comecei a programar em Javascript pois detestava sites em flash, e comecei a ver que em algumas aplicações simples, dava pra fazer o mesmo efeito em Javascript.

E depois, quando “descobri” o firebug, ficou tudo mais fácil.

Mais uma vez o Firefox contribui diretamente e incentiva o uso de Firefox pra desenvolvimento de interação.

Além do mais, até nas extensões do Firefox (como GreaseMonkey e Ubiquity) é possível fazer coisas muito interessantes usando somente javascript.

Enfim, usem firefox… =)

[]s

Com o jQuerify (que acabou de ser atualizado) é possível (com a ajuda do firebug pra Firefox, debug bar pra IE, etc…), executar comandos jQuery (como jQuery.ajax ou qualquer outro) mesmo se o site não tiver jQuery carregado.

Basta executar um script (que o chamamos de jQuerify) no seu depurador de javascript ( no firebug, clique em console, cole o script no box da direita e clique em “Executar” ) e pronto, o script invoca o invoca o jQuery. Depois, para testar, ao invés de usar $ use o jQuery nos seus seletores.

Segue script abaixo.

(function() {
var s=document.createElement('script'),
	el=document.createElement('div'),
	b=document.getElementsByTagName('body')[0];
var otherlib=false,
	startCounter=tryCounter=10,
	delay=250,
	msg='';
s.setAttribute('src','http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js');
el.style.position='fixed';
el.style.height='32px';
el.style.width='220px';
el.style.marginLeft='-110px';
el.style.top='0';
el.style.left='50%';
el.style.padding='5px 10px 5px 10px';
el.style.fontSize='12px';
el.style.color='#222';
el.style.backgroundColor='#f99';

if(typeof jQuery!='undefined') {
  msg='This page already using jQuery v'+jQuery.fn.jquery;
  return showMsg();
} else {
  if(typeof $=='function') {
	otherlib=true;
  }
  document.getElementsByTagName('head')[0].appendChild(s);
}

function showMsg() {
  el.innerHTML=msg;
  b.appendChild(el);
  window.setTimeout(function() {
	if (typeof jQuery=='undefined') {
	  b.removeChild(el);
	} else {
	  jQuery(el).fadeOut('slow',function() {
		jQuery(this).remove();
	  });
	  if (otherlib) {
		$jq=jQuery.noConflict();
	  }
	}
  } ,2500);
}

var tryjQuery=function() {
  setTimeout(function() {
	if (typeof jQuery=='undefined') {
	  if (tryCounter) {
		tryCounter--;
		tryjQuery();
	  } else {
		msg='Sorry, but after ' + startCounter + ' attempts, jQuery hasn\'t loaded';
		showMsg();
	  }
	} else {
	  msg='This page is now jQuerified with v' + jQuery.fn.jquery;
	  if (otherlib) {msg+=' and noConflict(). Use $jq(), not $().';}
	  showMsg();
	}
  }, delay);
};
tryjQuery();
})();

[]s

O Array é um objeto javascript, e existe métodos pra ajudar a manipulçao dos seus elementos. Nesse post vou falar e demonstrar os principais métodos que são usados, são eles:

• sort() e reverse()
• pop() e push()
• shift() e unshift()
• split() e join()

Sort e Reverse

O sort() ordena os elementos do Array, por ordem alfabética.
reverse() inverte a ordem os elementos do Array.
Ambos os métodos alteram o valor do Array original.

var arrTvs= new Array(4); // Reparem no 4
arrTvs[0] = "LG - não comprem";
arrTvs[1] = "Gradiente";
arrTvs[2] = "Sony";
arrTvs[3] = "Philips";
alert(arrTvs);
alert(arrTvs.sort());
alert(arrTvs.reverse());

O primeiro alert irá mostrar:
LG – não comprem,Gradiente,Sony,Philips

O Segundo alert, que foi ordenado pelo sort, irá mostrar:
Gradiente,LG – não comprem,Philips,Sony

O Terceiro alert, que teve a ordem invertida pelo método reverse(), vai ter a ordem alfabética decrescente já que ele foi ordenado pelo sort() anteriormente:
Sony,Philips,LG – não comprem,Gradiente

Observação:
O Array(4) determina quantos ítens terá dentro do array, esse número não é obrigatório, porém, limitando o array, você gasta menos memória na execução do javascript, então, sempre que possível, usem.

Observação 2
(Tive / estou tendo problemas com uma tv da LG)

Pop e Push

Pop serve para retirar o último elemento do Array, push para adicionar um elemento no final dele.

var arrTvs= new Array();
arrTvs[0] = "Samsung";
arrTvs[1] = "Gradiente";
arrTvs[2] = "Sony";
alert(arrTvs);
arrTvs.pop();
alert(arrTvs);
arrTvs.push("Philips");
alert(arrTvs);

O primeiro alert irá mostrar:
Samsung,Gradiente,Sony
Tudo certo, ok?

O Segundo alert, depois do pop() irá mostrar :
Samsung,Gradiente

O Terceiro alert, depois do push() onde foi inserido “Philips” irá mostrar:
Samsung,Gradiente,Philips

Shift e Unshift

Semelhante a pop e push, porém aqui, se insere e remove o primeiro elemento do Array, e não o último:

var arrTvs= new Array();
arrTvs[0] = "Samsung";
arrTvs[1] = "Gradiente";
arrTvs[2] = "Sony";
alert(arrTvs);
arrTvs.shift();
alert(arrTvs);
arrTvs.unshift("Philips");
alert(arrTvs);

O primeiro alert, mais uma vez, irá mostrar:
Samsung,Gradiente,Sony

O Segundo alert, depois do shift() irá mostrar :
Gradiente,Sony

O Terceiro alert, depois do push() onde foi inserido “Philips” irá mostrar:
Philips,Gradiente,Sony

Split e Join

Pra quem programa em outras linguagens, split() funciona igual ao de explode(). A partir de um string, basta definir um valor para separá-lo, uma virgula, espaço em branco, etc.

Já o join() serve para formar uma string a partir de um array concatenado com parâmetro passado

var frase = 'Teste do Tidbits. Internet e Vida a dois';
var palavras = frase.split(' ');
for(i=0;i<palavras.length;i++){
	alert('palavra '+i+' = '+palavras[i]);
}
alert('join = '+palavras.join('...'));

Então é mostrado diversos alerts, cada um com uma palavra, da frase, que agora é um Array.
Depois é mostrado o alert com join de todos os ítens do Array concatenado com reticências.

Bom, é isso… essas são as principais funções usadas para manipular um array em javascript, no site da w3c schools tem uma referência completa do objeto Array em JavaScript .

[]s

Vou tentar explicar como usar um array, do básico ao avançado.

Neste primeiro post, vou falar do básico, é claro, portanto se você já conhece, até mais.

O básico – Declarando um array

var bolas = new Array();
bolas[0] = 'Topper';
bolas[1] = 'Nike';
bolas[2] = 'Penalty';

alert(bolas[1]); // retorna Nike
alert(bolas.length); // retorna 3 

// for percorrendo todas as posições de um array.
for(i=0;i<bolas.length;i++){
alert(bolas[i]);
}

Observações

Repare que o Índice de um Array sempre começa de 0.
E que bolas.length retorna o número de elementos dentro do Array.
Sendo assim bolas.length – 1 vai retornar sempre o índice da última posição do Array.

Declarando array de forma mais simplificada

var bolas = new Array('Topper','Nike','Penalty');
alert(bolas[1]); // retorna Nike também

Arrays bidemensionais

Um array pode ter outro array dentro dele ( array bidemensional ):

var bolas = new Array();
bolas[0] = new Array('Topper','Amarela','Futebol','Capotão');
bolas[1] = new Array('Nike','Branca','Futsal','Couro');

// Também pode ser feito assim:
bolas[2] = new Array();
bolas[2][0] = 'Penalty';
bolas[2][1] = 'Azul';
bolas[2][2] = 'Voley';
bolas[2][3] = 'Fibra';

alert(bolas[1][2]); // retorna Futsal

Observações

Um array pode ter quantas dimensões for preciso.
bolas[2].length retorna quantos ítens existe no array bolas[2], no caso 4.

Veja a parte dois desse post

[]s

Para quem não sabe o que é o validate, recomendo saber do que se trata, você pode ganhar muito tempo no desenvolvimento utilizando o plugin, principalmente para desenvolver interface de back end, com diversas validações. Tem um post do Alexandre Magno antigo, porém muito bom, explicando o que é o plugin, o que faz, como utilizá-lo e um exemplo bem simples de um formulário validado pelo plugin.

Quando se faz o download do validate, ele vêm com uma coleção de médotos, mas alguns que nós precisamos, como verificação de data ( formato dd/mm/aaaa ) e verificação de cpf, não tem.

Alguns métodos que serão postados aqui não fui eu quem fez, queria dar os créditos a quem fez, porém não sei quem foi. Mas… vamos ao ponto, veja como é facil adicionar novos métodos.

Verificação de CPF

O código abaixo adiciona um Método que chamamos de “verificaCPF” :

jQuery.validator.addMethod("verificaCPF", function(value, element) {
	value = value.replace('.','');
	value = value.replace('.','');
	cpf = value.replace('-','');
	while(cpf.length < 11) cpf = "0"+ cpf;
	var expReg = /^0+$|^1+$|^2+$|^3+$|^4+$|^5+$|^6+$|^7+$|^8+$|^9+$/;
	var a = [];
	var b = new Number;
	var c = 11;
	for (i=0; i<11; i++){
		a[i] = cpf.charAt(i);
		if (i < 9) b += (a[i] * --c);
	}
	if ((x = b % 11) < 2) { a[9] = 0 } else { a[9] = 11-x }
	b = 0;
	c = 11;
	for (y=0; y<10; y++) b += (a[y] * c--);
	if ((x = b % 11) < 2) { a[10] = 0; } else { a[10] = 11-x; }
	if ((cpf.charAt(9) != a[9]) || (cpf.charAt(10) != a[10]) || cpf.match(expReg)) return false;
	return true;
}, "Informe um CPF válido."); // Mensagem padrão

E agora na hora de validar seu formulário, você já pode utilizar o método adicionado:

$("form#cadastro").validate({
	rules: {
		'CampoCPF': {
			required: true,
			verificaCPF: true
		}
	},
	messages: {
		CampoCPF: {
			required: "Digite seu cpf"
			verificaCPF: "CPF inválido"
		}
	},
});

Verificação de Data (formato dd/mm/aaaa)

Agora o método se chama dateBR e a mensagem padrão (caso não seja colocada outra na hora de usar o validate, será “Informe uma data válida”.

jQuery.validator.addMethod("dateBR", function(value, element) {
	 //contando chars
	if(value.length!=10) return false;
	// verificando data
	var data 		= value;
	var dia 		= data.substr(0,2);
	var barra1		= data.substr(2,1);
	var mes 		= data.substr(3,2);
	var barra2		= data.substr(5,1);
	var ano 		= data.substr(6,4);
	if(data.length!=10||barra1!="/"||barra2!="/"||isNaN(dia)||isNaN(mes)||isNaN(ano)||dia>31||mes>12)return false;
	if((mes==4||mes==6||mes==9||mes==11)&&dia==31)return false;
	if(mes==2 && (dia>29||(dia==29&&ano%4!=0)))return false;
	if(ano < 1900)return false;
	return true;
}, "Informe uma data válida");  // Mensagem padrão

Verificação de Data e Hora (formato dd/mm/aaaa hh:mm)

jQuery.validator.addMethod("dateTimeBR", function(value, element) {
	 //contando chars
	if(value.length!=16) return false;
	 // dividindo data e hora
	if(value.substr(10,1)!=' ') return false; // verificando se há espaço
	var arrOpcoes = value.split(' ');
	if(arrOpcoes.length!=2) return false; // verificando a divisão de data e hora
	// verificando data
	var data 		= arrOpcoes[0];
	var dia 		= data.substr(0,2);
	var barra1		= data.substr(2,1);
	var mes 		= data.substr(3,2);
	var barra2		= data.substr(5,1);
	var ano 		= data.substr(6,4);
	if(data.length!=10||barra1!="/"||barra2!="/"||isNaN(dia)||isNaN(mes)||isNaN(ano)||dia>31||mes>12)return false;
	if ((mes==4||mes==6||mes==9||mes==11)&&dia==31)return false;
	if (mes==2 && (dia>29||(dia==29&&ano%4!=0)))return false;
	// verificando hora
	var horario 	= arrOpcoes[1];
	var	hora 		= horario.substr(0,2);
	var doispontos 	= horario.substr(2,1);
	var minuto 		= horario.substr(3,2);
	if(horario.length!=5||isNaN(hora)||isNaN(minuto)||hora>23||minuto>59||doispontos!=":")return false;
	return true;
}, "Informe uma data e uma hora válida");

Se alguém tiver (ou fizer) o método de CNPJ (ou algum outro legal que não tem aqui) me manda por e-mail ou posta aqui nos comentários.

[]s