TidBits

É um serviço relativamente novo, pouco usado, mas muito interessante.

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:

[sourcecode language="javascript"]


$(document).ready(function(){
$(’button#traduzir’).click(function(){
$(’div#texto’).translate(’en’)
});
});
[/sourcecode]

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.

Post mais técnico seria impossível né? Enfim, se você leu o título e está lendo até agora é porque sabe do problema que estou falando: o ajax do jQuery tem um problema quando se trabalha com XML, o problema só acontece adivinha onde? No nosso querido browser Internet Explorer.

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)

[sourcecode language="javascript"]
$.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);
}
});
[/sourcecode]

Com o plugin XMLDOM

[sourcecode language="javascript"]
$.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);
}
});
[/sourcecode]

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

[]s

Primeiro devo admitir, dei uma sumida, caiu o número de posts aqui, mas tá dificil conseguir tempo, ultimamente, além do trabalho, estou fazendo freela e estudando e meio sem criatividade pra postar, espero que seja breve.

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

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.

[sourcecode language="javascript"]
(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();
})();
[/sourcecode]

[]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.

[sourcecode language="javascript"]
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());
[/sourcecode]

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.

[sourcecode language="javascript"]
var arrTvs= new Array();
arrTvs[0] = “Samsung”;
arrTvs[1] = “Gradiente”;
arrTvs[2] = “Sony”;
alert(arrTvs);
arrTvs.pop();
alert(arrTvs);
arrTvs.push(”Philips”);
alert(arrTvs);
[/sourcecode]

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:

[sourcecode language="javascript"]
var arrTvs= new Array();
arrTvs[0] = “Samsung”;
arrTvs[1] = “Gradiente”;
arrTvs[2] = “Sony”;
alert(arrTvs);
arrTvs.shift();
alert(arrTvs);
arrTvs.unshift(”Philips”);
alert(arrTvs);
[/sourcecode]

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

[sourcecode language="javascript"]
var frase = ‘Teste do Tidbits. Internet e Vida a dois’;
var palavras = frase.split(’ ‘);
for(i=0;i alert('palavra '+i+' = '+palavras[i]);
}
alert('join = '+palavras.join('...'));
[/sourcecode]

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

[sourcecode language="javascript"]
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 alert(bolas[i]);
}
[/sourcecode]

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

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

Arrays bidemensionais

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

[sourcecode language="javascript"]
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
[/sourcecode]

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