No dia 21 de Maio de 2010, em comemoração aos 30 anos do jogo Pac Man, o Google colocou em sua home uma versão do Jogo toda desenvolvida em JavaScript, alguns pensaram que era só de enfeite, mas os mais espertos viram que era possível jogar e em consequência tomar vários esporros do chefe por conta disso.

Se você não viu, pode ver na seguinte URL a versão que foi ao ar nesse dia. Foi então que Michael pegou o código fonte e disponibilizou em seu blog, com isso, qualquer pessoa pode inserir o jogo agora em seu site/blog. Ou então faça o download do código no GitHub.

Caso queira vê-lo em funcionamento, basta dar uma olhada aqui. Para jogar clique em Insert Coin. Ao contrário do que muita gente pensava, não é feito em HTML5, é feito em puro JavaScript, além de usar do Flash para o som do jogo.

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• Livros com 20% de desconto na Editora Novatec
• Aprendendo JavaScript
• As engines de JavaScript
• CSS3 Selectors & JavaScript ‘this’
• Palestra: Designers x JavaScript

Este é um post rápido de se ler. Vai a título de curiosidade.

Com os lançamentos de novos navegadores e novas versões nos últimos anos, o desempenho de JavaScript melhorou muito. Muito disso se deve a melhorias (e mesmo substituições completas) das engines de JavaScript de cada navegador.

A seguir, uma pequena lista das engines de JavaScript atuais, da mais rápida para a mais lenta.

• Carakan – é a engine lançada no Opera 10.50. Testes demonstram que ela é a engine mais rápida atualmente.
• V8 – a engine do Google Chrome. É muito importante na história recente dos browsers, por ter sido a primeira a dar um salto de desempenho frente às demais engines. Tem praticamente um empare técnico com a Carakan em termos de desempenho, perde por quase nada.
• SquirrelFish – antigamente era chamada JavaScriptCore, mas adquiriu seu novo nome após ter integrado o JIT (Just-In-Time compilation). É usada no Safari, sendo parte do WebKit.
• TraceMonkey – a engine lançada no Firefox 3.5. Uma evolução da antiga SpiderMonkey, que teve uma grande melhoria de desempenho.
• JScript – engine do Internet Explorer, faz parte da engine de layout Trident. Perto das demais engines, tem um péssimo desempenho quanto a tempo de execução.

E essas são as principais engines do mercado atualmente. Espero que tenha sido interessante aos leitores saber dessas informações.

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• Livros com 20% de desconto na Editora Novatec
• Coloque o jogo do Pac Man no seu site
• Aprendendo JavaScript
• CSS3 Selectors & JavaScript ‘this’
• Palestra: Designers x JavaScript

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• Seletores CSS com jQuery
• Peppy – Seletor JavaScript CSS3 mais rápido da Web
• Livros com 20% de desconto na Editora Novatec
• CSS Cookbook
• Coloque o jogo do Pac Man no seu site

O Grupo Impacta está convidando a todos para assistir da palestra gratuita “Web Designers X Javascript”, ministrada pelo consultor da Adobe no Brasil Leon Kulikowski.

O conteúdo apresentado ajudará os profissionais a melhorar sua produtividade no dia a dia ao desenvolverem sites, aplicando métodos para organização do trabalho; a lidar com a necessidade crescente de layouts interativos, mas sem desejar tornar-se um programador; e a criar livremente sem que isso incorra em atrasos no prazo de entrega.

Conteúdo programático

• Metodologias para workflow
• Frameworks Javascript
• Validação do código fonte
• Pensando em acessibilidade
• Pensando em semântica

Caso queira se inscrever, basta acessar o seguinte link. Nos encontramos lá.

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• Livros com 20% de desconto na Editora Novatec
• Coloque o jogo do Pac Man no seu site
• Aprendendo JavaScript
• As engines de JavaScript
• CSS3 Selectors & JavaScript ‘this’

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• Seletores CSS com jQuery
• CSS Cookbook
• CSS3 Selectors & JavaScript ‘this’
• CSS3 Borders & HTML5 Sections
• Help do jQuery 1.4 em formato .chm

De quem é a responsabilidade de validar um formulário? Do desenvolvedor front-end ou do programador? A sim, vocês preferem tirar no cara ou coroa.

A um tempo atrás fui questionado sobre isso e então resolvi fazer um post sobre o assunto para saber a opinião de vocês. Então, imaginem um formulário, simples de cadastro por exemplo, com alguns campos obrigatórios como Nome, Email, CPF, etc. Na sua opinião, quem deve efetuar a validação desses dados é somente o desenvolvedor front-end através de JavaScript, ou ele deve deixar isso de lado e a validação deve ser toda feita do lado servidor?

A minha opinião é a seguinte, a validação deve ser efetuada do lado cliente e do lado servidor, muitos desenvolvedores na maioria das vezes não estão nem aí pra isso e só querem saber da validação do lado cliente.

Sabe por que digo que a validação deve ser feita também do lador servidor, leve em consideração que o JavaScript roda do lado cliente, portanto, pode em algum momento falhar e você terá salvo dados inconsistentes em seu banco de dados. E você, qual sua opinião?

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• 72 Acrônimos que falam os Geeks
• Aprenda PHP, MySQL, JavaScript, CSS
• Tutocle – Tutoriais para desenvolvedores web
• EyeOS: um sistema operacional rodando na web
• Livros com 20% de desconto na Editora Novatec

Arquivos do tipo .chm são arquivos de ajuda do Windows semelhantes aos .hlp, porém são compilados utilizando fontes .html. Se você buscava até agora uma referência de consulta rápida para o Framework jQuery, está aí a solução, ótimo para aquelas horas em que você precisa consultar a ajuda do jQuery está sem internet. Se você utiliza Windows, basta baixar o arquivo, descomprimir o mesmo e utilizá-lo.

Caso você abra o arquivo e receba um aviso de página não encontrada ou algo do tipo, efetue os seguintes passos:

• Clique com o botão direito do mouse no arquivo CHM e clique em Propriedades.
• Clique em Desbloquear.
• Clique duas vezes no arquivo .chm para abrí-lo.

Maiores informações você pode ver no site da Microsoft.

Usuários de Linux

Para visualizar arquivos .chm no Linux você vai precisar de um programa chamado xchm, para instalá-lo no Ubuntu, por exemplo, basta executar o seguinte comando:

sudo apt-get install xchm

Usuários de MAC OS

Os usuários de MAC OSX devem ter o programa Chmox instalado para visualizar arquivos .chm no MAC OSX.

Todos os créditos do arquivo são do site charupload por ter compilado o mesmo.

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• Colunas com alturas iguais com JavaScript
• Ebook grátis de JankoAtWarpSpeed: Os melhores tutoriais
• Live event binding com jQuery 1.3
• jQuery Price Plugin
• Prototype vs. jQuery

Com a popularização dos Frameworks JavaScript fica a cada dia mais difícil você encontar alguma coisa na web desenvolvida com puro JavaScript. Desenvolver um sistema de Tabs com a utilização de jQuery é muito simples, mas as vezes pode ser desnecessário você utilizar tanto JavaScript para fazer simples tabs. Foi pensando nisso que resolvi efetuar a tradução do artigo do site Elated, onde ele ensina de uma forma muito simples a desenvolver um sistema de Tabs com puro JavaScript.

Criação do HTML para nossas abas

O HTML para as tabs e conteúdo é muito simples. Você armazena o conteúdo de cada tab dentro de um elemento div com uma classe chamada tabContent e um id exclusivo para referência. Aqui está como exemplo o conteúdo da primeira de 3 tabs:

<div class="tabContent" id="about">
  <h2>About JavaScript tabs</h2>
  <div>
    <p>JavaScript tabs partition your Web page content into tabbed sections. Only one section at a time is visible.</p>
    <p>The code is written in such a way that the page degrades gracefully in browsers that don't support JavaScript or CSS.</p>
  </div>
</div>

As tabs são simplesmente links dentro de uma lista desordenada:

<ul id="tabs">
  <li><a href="#about">About JavaScript tabs</a></li>
  <li><a href="#advantages">Advantages of tabs</a></li>
  <li><a href="#usage">Using tabs</a></li>
</ul>

Você deve definir que o ul tenha o id “tabs” para que o código JavaScript possa localizá-lo. Cada link dentro da lista de links faz referência a sua div conteúdo (“about”, “advantages”, e “usage”). Uma vez que eles são links padrão do HTML, também funcionam com o JavaScript desabilitado.

Você pode adicionar quantas tabs quiser a sua página. Basta criar uma nova div com um identificação única e em seguida adicionar um link a mesma dentro da lista de tabs.

Criação do CSS

O CSS é necessário para tornar as guias parecidas com abas e também tornar a sua aparência mais agradável:

body { font-size: 80%; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; }
ul#tabs { list-style-type: none; margin: 30px 0 0 0; padding: 0 0 0.3em 0; }
ul#tabs li { display: inline; }
ul#tabs li a { color: #42454a; background-color: #dedbde; border: 1px solid #c9c3ba; border-bottom: none; padding: 0.3em; text-decoration: none; }
ul#tabs li a:hover { background-color: #f1f0ee; }
ul#tabs li a.selected { color: #000; background-color: #f1f0ee; font-weight: bold; padding: 0.7em 0.3em 0.38em 0.3em; }
div.tabContent { border: 1px solid #c9c3ba; padding: 0.5em; background-color: #f1f0ee; }
div.tabContent.hide { display: none; }

Essas regras CSS funcionam da seguinte forma:

body

Contém as regras de fonte para a página e as tabs.

ul#tabs

Definição de estilo para as guias e remoção dos bullets da lista.

ul#tabs li

O uso de display:inline é para que as tabs tenham sua disposição na horizontal.

ul#tabs li a

Aplicamos estilos aos links da lista. Cada link agora possui uma borda, exceto border-bottom para que ela combine perfeitamente com sua div conteúdo.

ul#tabs li a:hover

A tab fica em destaque ao passar o mouse sob ela.

ul#tabs li a.selected

Estilos definidos para a guia selecionada, aplicando um fundo mais claro, texto em negrito e também aumentamos o tamanho da fonte. Observe que o padding-bottom foi definido como 0.38em para que ele se funda com a sua div conteúdo.

div.tabContent

Define um estilo para as áreas de conteúdo.

div.tabContent.hide

Usado para ocultar as tabs não selecionadas.

Criação do código JavaScript

Finalmente, é claro, você precisa de JavaScript para que as tabs funcionem.

• Adicionar a função showTab() ao evento onclick para cada um dos links das tabs.
• Ocultar todas as divs conteúdo, exceto a primeira, de modo que só o conteúdo da primeira tab esteja visível ao carregar a página.
• getFirstChildWithTagName() é uma função auxiliar que recupera o primeiro filho de um determinado elemento que possui um tag name.
• gethash () é outra função auxiliar que retorna parte da URL que aparece após o símbolo #.

Veja como funciona essas funções.

Função init()

A primeira, e mais complexa, é a função init(). É chamada quando a página é carregada, graças ao evento onload no elemento body:

<body onload="init()">

Abaixo a própria função:

function init() {

      // Pega todas as tabs e as divs conteúdo da página
      var tabListItems = document.getElementById('tabs').childNodes;
      for ( var i = 0; i < tabListItems.length; i++ ) {
        if ( tabListItems[i].nodeName == "LI" ) {
          var tabLink = getFirstChildWithTagName( tabListItems[i], 'A' );
          var id = getHash( tabLink.getAttribute('href') );
          tabLinks[id] = tabLink;
          contentDivs[id] = document.getElementById( id );
        }
      }

      // Adiciona eventos onclick as tabs e destaca a primeira aba
      var i = 0;

      for ( var id in tabLinks ) {
        tabLinks[id].onclick = showTab;
        tabLinks[id].onfocus = function() { this.blur() };
        if ( i == 0 ) tabLinks[id].className = 'selected';
        i++;
      }

      // Oculta todas as divs conteúdo, exceto a primeira
      var i = 0;

      for ( var id in contentDivs ) {
        if ( i != 0 ) contentDivs[id].className = 'tabContent hide';
        i++;
      }
    }

Essa função faz 3 coisas:

• Ele percorre todos os elementos li na lista desordenada. Para cada elemento li ele chama a função getFirstChildWithTagName() para recuperar o elemento dentro com o link. Em auxílio, ele também chama a função getHash() para extrair parte da URL do link, após o hash, que é o ID da div conteúdo correspondente. O link então é armazenado no array tabLinks, e a div de conteúdo é armazenada no array contentDivs.
• Ele atribui o evento onclick com a função showTab() para cada link da lista e destaca a primeira tab com a classe ‘selected’.
• Ele oculta todas as divs conteúdo, exceto a primeira, definindo que as divs tenham as classes ‘tabContent hide’.

Função showTab()

showTab() é chamada toda vez que uma tab é clicada. Ele destaca a tab selecionada e mostra o conteúdo relacionado a tab. Ele também remove o destaque das outras tabs e oculta as divs com o conteúdo relacionado.

function showTab() {
      var selectedId = getHash( this.getAttribute('href') );

      // Destaca a tab selecionada e remove o destaque das outras
      // Mostra a div com o conteúdo relacionado e oculta as outras
      for ( var id in contentDivs ) {
        if ( id == selectedId ) {
          tabLinks[id].className = 'selected';
          contentDivs[id].className = 'tabContent';
        } else {
          tabLinks[id].className = '';
          contentDivs[id].className = 'tabContent hide';
        }
      }

      // Faz com que o browser não siga o link
      return false;
    }

A função estrai o ID do link selecionado e os armazena na variável selectedId. Em seguida, percorre todos os IDs. Nos selecionados ocorre o destaque a div com o conteúdo correspondente é mostrado, para as outras tabs o destaque é removido e o conteúdo relacionado é oculto.

A função possui um return false para que anule o comportamento padrão do browser de seguir o link e adicionar o mesmo ao histórico do browser.

Função getFirstChildWithTagName()

Essa função retorna o primeiro filho de um elemento especificado correspondente a tag. init() chama essa função para recuperar o link dentro de cada item da lista.

function getFirstChildWithTagName( element, tagName ) {
      for ( var i = 0; i < element.childNodes.length; i++ ) {
        if ( element.childNodes[i].nodeName == tagName ) return element.childNodes[i];
      }
    }

A função percorre os nós filho do elemento até encontrar um nó correspondente a seu tagName. Em seguida, ele retorna o nó.

Leia mais sobre as propriedades childNodes e nodeName no artigo: Looking inside DOM page elements.

Função getHash()

A função getHash() retorna parte da URL após encontrar qualquer símbolo hash(#). Usado por init() e showTab() para extrair o ID da div conteúdo relacionado com o link das tabs.

function getHash( url ) {
      var hashPos = url.lastIndexOf ( '#' );
      return url.substring( hashPos + 1 );
    }

Todas as funções em conjunto

Isso é tudo o que você precisa para desenvolver tabs com JavaScript. Veja a demonstração e olhe o código fonte da página para ver como o HTML, CSS e JavaScript aparecem.

• O CSS e o JavaScript vão no topo da página. (Você pode colocá-los em arquivos separadados).
• Elemento body da página que contém o manipulador de eventos onload para iniciar a função init().
• O elemento ul que contém as tabs com os links.
• Cada conteúdo da tab é armazenado em uma div com a classe tabContent e um id único (referenciado no link da aba correspondente).

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• Livros com 20% de desconto na Editora Novatec
• Coloque o jogo do Pac Man no seu site
• Aprendendo JavaScript
• As engines de JavaScript
• CSS3 Selectors & JavaScript ‘this’

Diga adeus aos códigos CSS cheios de hacks que em alguns casos acabam mais atrapalhando do que ajudando e projete seus códigos muito mais enxutos.
Estou falando do eCSStender, com ele você pode usar seletores CSS avançados como border-radius e ter a certeza de que vai funcionar até no IE6.

Acesse o site e descubra como esse framework maravilhoso pode facilitar sua vida.

Link direto: http://ecsstender.org

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• Livros com 20% de desconto na Editora Novatec
• Colunas com alturas iguais com JavaScript
• Ebook grátis de JankoAtWarpSpeed: Os melhores tutoriais
• 24 ways: Versão 2008
• Seletores CSS com jQuery

Trata-se de uma ferramenta opensource de Mobile Phone Detection, que oferece suporte para as principais linguagens do mercado (PHP,Rails,Javascript,ASP,etc).

É só escolher a linguagem desejada e baixar o arquivo.

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• Mobile User Experience: O que um Web Designer precisa saber
• Detectar Mobile Browsers com PHP
• Mobile Phone Development Tools
• 1º Mobile Expert
• Skyfire – Browser alternativo para Windows Mobile

Fui convidado a um tempo atrás pela editora Bookman para fazer a avaliação do livro A Arte e a Ciência da CSS, um livro muito bom que traz soluções práticas para problemas mais corriqueiros do dia-a-dia. O livro tem foco no que você mais utiliza, como formulários, títulos, imagens, backgrounds, navegação.

Se já não bastasse eu ter enviado o review do livro de CSS, fui chamado para fazer mais um, dessa vez do livro Só JavaScript. Esse livro é ideal para iniciantes, e para aqueles que também já trabalham com JavaScript, pois com ele você aprenderá a programar da forma correta.

Eles explicam muito bem eventos, validação de formulários, entre outras coisas essenciais para programar em JavaScript. Ao decorrer do livro, você vai montando sua própria biblioteca, inclusive com a possibilidade de criar animações via JavaScript. Ficou interessado no livro? Eu possuo um exemplar para sortear aqui no blog e o sorteio funciona da seguinte forma:

O primeiro que enviar um Tweet para a Editora Bookman dizendo que lê o meu blog e quer o livro ganha o mesmo. Muito simples não, só basta ser rápido.

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• Livros com 20% de desconto na Editora Novatec
• Coloque o jogo do Pac Man no seu site
• Aprendendo JavaScript
• As engines de JavaScript
• CSS3 Selectors & JavaScript ‘this’

O setTimeout tem dois parâmetros; o primeiro é uma string contendo o código a ser executado. O segundo é o tempo, em milissegundos, que se deve esperar para executar tal código. O seguinte trecho de código mostrará um alerta após 2000 milissegundos (ou seja, 2 segundos).

setTimeout("alert('Viva!')", 2000);

A diferença entre setTimeout e setInterval é que o setTimeout executa o código especificado apenas uma vez. O setInterval executa infinitas vezes, com o intervalo de tempo especificado entre cada execução. Por exemplo, o seguinte código exibirá um alerta a cada 10 segundos.

setInterval("alert('Viva!')", 10000);

Você pode se arrepender de ter agendado a execução do código. Nesse caso, são necessárias duas coisas: ter guardado a tarefa numa variável, e usar a função de cancelamento de execução. São duas as funções de cancelamento: clearTimeout, para cancelar as tarefas agendadas com setTimeout, e clearInterval, que cancela as agendadas com setInterval.
Por exemplo, o código abaixo não mostrará alerta algum, pois as tarefas agendadas serão canceladas.

var alerta_unico = setTimeout("alert('Viva!')", 5000);
var alerta_intermitente = setInterval("alert('Viva!')", 10000);

clearTimeout(alerta_unico); // Cancela o alerta agendado em setTimeout
clearInterval(alerta_intermitente); // Cancela o alerta agendado em setInterval

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• Livros com 20% de desconto na Editora Novatec
• Coloque o jogo do Pac Man no seu site
• Aprendendo JavaScript
• As engines de JavaScript
• CSS3 Selectors & JavaScript ‘this’

Em JavaScript não deveria ser diferente. Você faz isso, testa no seu Firefox cheio de extensões (ou até mesmo em safe-mode), e tudo funciona. O seu cliente abre a página, e nos primeiros dez segundos ele diz que não funciona. Provavelmente seu cliente está usando o Internet Explorer.

Acessar um caracter específico de uma string em JavaScript como se fosse um array não funciona no IE. Por exemplo, se temos isso:

var str = "abcdef";
alert(str[4]);

No Firefox será alertado corretamente a letra “e”. No Internet Explorer, será alertado “undefined”. Assim, o recomendado é acessar um caracter específico com a função charAt, da classe String. Desse modo, o código ficaria assim:

var str = "abcdef";
alert(str.charAt(4));

E isso funciona em ambos os browsers.

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• Debugbar – Firebug para Internet Explorer
• Livros com 20% de desconto na Editora Novatec
• Coloque o jogo do Pac Man no seu site
• Aprendendo JavaScript
• As engines de JavaScript

Achei o assunto interessante e resolvi divulgar aqui para quem precisar utilizar.

Primeiro vou postar as soluções sérias para o pessoal que está pesquisando e precisa utilizar em seu código

Soluções simples

Exemplo longo (função):

function daysInMonth(month,year) {
	var m = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
	if (month != 2) return m[month - 1];
	if (year % 4 != 0) return m[1];
	if (year % 100 == 0 && year%400 != 0) return m[1];

	return m[1] + 1;
}

Exemplo curto (função):
Aqui está a grande sacada do javaScript, que interpreta o 0(zero) como “o dia antes do dia primeiro” que obviamente é o último dia do mês anterior.

function daysInMonth(month,year) {
	var dd = new Date(year, month, 0);
	return dd.getDate();
}

Exemplo curto (inline):

var lastDay = (new Date(year, month, 0)).getDate();

Soluções criativas

Não se assustem, mas as soluções citadas abaixo funcionam!

Solução utilizando Switch:

function getLastDayOfMonth(month,year)
{
	var day;

	switch(month)
	{
		case 1 :
		case 3 :
		case 5 :
		case 7 :
		case 8 :
		case 10:
		case 12:
			day = 31;
			break;
		case 4 :
		case 6 :
		case 9 :
		case 11:
		   	day = 30;
			break;
		case 2 :
			if( ( (year % 4 == 0) && ( year % 100 != 0) ) || (year % 400 == 0) )
				day = 29;
			else
				day = 28;
			break;

	}
	return day;
}

Essa é legal

function anoBissexto(anoCompleto)
{
	if(!(anoCompleto%4) && (anoCompleto%100 || !(anoCompleto%400))) return true;
	return false;
}
function diasNoMes(mes,ano)
{
	var var_type=typeof mes;
	if(var_type != "number" && var_type != "string") return false;
	if(var_type == "number" && (mes > 11 || mes =0) return dias[indice_eng];
		if(indice_bra>=0) return dias[indice_bra];
		return false;
	}
	else return dias[mes];
}

Façam bom proveito!

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• Livros com 20% de desconto na Editora Novatec
• Coloque o jogo do Pac Man no seu site
• Aprendendo JavaScript
• As engines de JavaScript
• CSS3 Selectors & JavaScript ‘this’

Exemplos simples

Exemplo curto (funções com expressão regular):

	//trim completo
	function trim(str) {
		return str.replace(/^\s+|\s+$/g,"");
	}

	//left trim
	function ltrim(str) {
		return str.replace(/^\s+/,"");
	}

	//right trim
	function rtrim(str) {
		return str.replace(/\s+$/,"");
	}

	alert(trim("        TEXTO        "));

Exemplo curto (métodos da string com expressão regular):
Essa solução é bem mais elegante!

	//trim completo
	String.prototype.trim = function () {
		return this.replace(/^\s+|\s+$/g,"");
	}

	//left trim
	String.prototype.ltrim = function () {
		return this.replace(/^\s+/,"");
	}

	//right trim
	String.prototype.rtrim = function () {
		return this.replace(/\s+$/,"");
	}
	alert("        TEXTO        ".trim());

Outras soluções

Exemplo longo

function trim (str)
	{
		var whitespace = ' \n\r\t\f\x0b\xa0\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u200b\u2028\u2029\u3000';
		for (var i = 0; i = 0; i--)
		{
			if (whitespace.indexOf(str.charAt(i)) == -1)
			{
				str = str.substring(0, i + 1);
				break;
			}
		}
	    return whitespace.indexOf(str.charAt(0)) == -1 ? str : '';
	}

Outro exemplo

	function isWhitespace(charToCheck) {
		var whitespaceChars = " \t\n\r\f";
		return (whitespaceChars.indexOf(charToCheck) != -1);
	}

	//left trim
	function ltrim(str) {
		for(var k = 0; k =0 && isWhitespace(str.charAt(j)) ; j--) ;
		return str.substring(0,j+1);
	}

	//trim completo
	function trim(str) {
		return ltrim(rtrim(str));
	}

Caso queira se aprofundar no assunto, aconselho a leitura do artigo Faster JavaScript Trim que mostra vários testes de performance no IE e FF.

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

• Livros com 20% de desconto na Editora Novatec
• Coloque o jogo do Pac Man no seu site
• Aprendendo JavaScript
• As engines de JavaScript
• CSS3 Selectors & JavaScript ‘this’