TidBits

Nada mais fácil do que trabalhar com jQuery, e nada melhor pra aprender do que entender sites alheios.

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

Nessa segunda feira (21/04/2009) o Google anunciou um novo software, chamado de Google O3D, um sistema que permite criar ambientes 3d e visualizá-los diretamente no navegador, independente do sistema operacional, e suportando gráficos 3D modernos com execução “suave”.

Veja o vídeo do demo que a Google disponibilizou:

O Google O3D necessita de uma placa de vídeo com suporte para os efeitos shader, como a série GeForce 8 da Nvidia ou linha Radeon HD da ATI, ou seja, qualquer placa de vídeo disponível a venda já é o suficiente.

Com o Google 3d é possível programar usando JavaScript e obter gráficos melhores em games e outros programas, possibilitando a criação de jogos mais realistas, substituindo hoje, o que é feito em Flash. Além disso será possível criar ambientes 3D para websites, oferecendo uma experiência como a do Google Earth – o usuário navega pelas páginas, e os gráficos vão renderizando em tempo real.

Funcionando como plugin para Internet Explorer, Firefox, Chrome e Safari, o Google espera que, num futuro próximo, a tecnologia já venha instalada nos navegadores. .

Versões de teste já funcionam para o Google Chrome, Firefox, Internet Explorer ou Safari, no Windows XP/Vista, Linux com kernel 2.6 e Mac OS X 10.5.

Faça o teste do Google O3D, é interessante e não demora nada.

Primeiro entre na página de download do software, clicando aqui.

Instale, reinicie o seu navegador e em seguida, veja os demos disponíveis.

Entre os jogos, tem um de aventura estilo plataforma interessante pois aproxima-se muito de gráficos do PSP, por exemplo:

O jogo se chama Prince IO: The SketchUp Knight, clique aqui para jogar , depois de ter instalado o Google O3D, é claro.

[]s

No último post eu mostrei como declarar e obter valores de um Array, hoje vamos a segunda parte do post.

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

Os Arrays são amados por um e odiado por outros, só que esses outros normalmente são aqueles que tem pouca base e pouca experiência em lógica de programação.

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