Javascript – Retirando espaços de string (função trim)

Postado por: Luiz Paulo em
  • 29 jun
  • 7

Veja abaixo algumas soluções para retirar espaços do início e final de strings.

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());

Continuar lendo »

JavaScript – Pegadinha no getElementById

Postado por: Jeronimo Fagundes em
  • 27 jun
  • 9

Claramente inspirei o título deste post no outro escrito pelo colega Luiz Paulo. O problema do getElementById no Internet Explorer já é bem conhecido, mas posto aqui, pois muita gente ainda não deve saber.

Como sabemos, a função document.getElementById retorna um elemento da página cujo id é passado como parâmetro. Contudo, o Internet Explorer (até a versão 7) tem uma implementação dessa função um tanto, digamos, controversa.

Na execução dessa função, o IE procura não só por elementos cujo id seja igual ao passado por parâmetro, mas também considera os elementos cujo name seja igual àquele id.

Continuar lendo »

Cheat Sheet – Guia rápido sobre Jquery 1.3.2

Postado por: Luiz Paulo em
  • 26 jun
  • 2

O Cheat Sheet é um resumo de um assunto específico que pode ser utilizada como guia rápido. Nele você pode encontrar sintaxes, códigos, exemplos, conceitos e dicas.
Não podemos considerá-lo um manual completo pois é bem compacto, mas quebra bastante o galho! Além de úteis, normalmente são feitos com visual agradável, podendo ser impresso e facilmente colado no seu escritório.

Aqui você encontra outros CheatSheet – Guia rápido sobre Jquery mas são das versões anteriores do jQuery, então segue a documentação para o jQuery 1.3.2.

Clique aqui e baixe de uma vez!

Façam bom proveito!

Javascript – Pegadinha no parseInt()

Postado por: Luiz Paulo em
  • 24 jun
  • 10

Já estamos cansados de saber que javascript é totalmente dinâmico e podemos mudar facilmente o tipo das variáveis.

Uma das facilidades em javascript é a conversão de variáveis em inteiro, com a função parseInt(). Só que essa função tem uma pegadinha que pode atrapalhar bastante aos desatentos.

Sua sintaxe é bem simples como segue:

var number = "123456348965";
var integerNumber = parseInt(number);
alert(integerNumber); //123456348965

Continuar lendo »

Menu Accordion com jQuery

Postado por: Pedro Rogério em
  • 15 jun
  • 12

Esse efeito de Accordion que vou mostrar aqui hoje pode ser usado não somente para menus, mas também para outras finalidades. É muito simples conseguir esse tipo de efeito utilizando a jQuery, que proporciona uma simplicidade ao escrever código JavaScript. A marcação HTML utilizada nesse exemplo é a seguinte:

<dl>
	<dt><a href="http://www.pinceladasdaweb.com.br/blog/">Pinceladas da Web</a></dt>
	<dd>
        <ul>
            <li><a href="http://www.pinceladasdaweb.com.br/blog/category/css/">CSS</a></li>
            <li><a href="http://www.pinceladasdaweb.com.br/blog/category/xhtml/">XHTML</a></li>
            <li><a href="http://www.pinceladasdaweb.com.br/blog/category/webstandards/">WebStandards</a></li>
        </ul>
	</dd>
	<dt><a href="http://www.cssnolanche.com.br">CSS no Lanche</a></dt>
	<dd>
        <ul>
            <li><a href="http://www.cssnolanche.com.br/categoria/css/">Tutoriais CSS</a></li>
            <li><a href="http://www.cssnolanche.com.br/categoria/javascript/">JavaScript</a></li>
            <li><a href="http://www.cssnolanche.com.br/categoria/jquery/">jQuery</a></li>
        </ul>
	</dd>
	<dt><a href="http://www.jquery.com">jQuery</a></dt>
    <dd>
        <ul>
            <li><a href="http://docs.jquery.com/Downloading_jQuery">Download</a></li>
            <li><a href="http://docs.jquery.com/">Documentação</a></li>
            <li><a href="http://docs.jquery.com/Tutorials">Tutoriais</a></li>
        </ul>
    </dd>
</dl>

Continuar lendo »

jQuery: Como evitar problemas com animate()

Postado por: Pedro Rogério em
  • 8 jun
  • 22

Você provavelmente já deve ter passado por esse tipo de problema utilizando o framework jQuery para fazer animações nos elementos de sua página, o problema ocorre principalmente quando se deseja criar menus animados, onde através da função animate() da jQuery ao passar o mouse rapidamente pelo menu, o efeito pode ser executado ainda diversas vezes mesmo após você retirar o mouse.

Para que fique claro a natureza do problema, basta você acessar esse exemplo criado e experimente passar o mouse rapidamente diversas vezes encima do menu. Você verá que mesmo após retirar o mouse, o efeito de animate() ainda é executado.

Observe abaixo o código JavaScript com a utilização da jQuery para o efeito do menu:

$(document).ready(function() {
	$('ul.anim_queue a')
		.hover(function() {
		$(this).animate({ left: 20 }, 'fast');
		},function(){
		$(this).animate({ left: 0 }, 'fast');
	});
});

Para evitar esse problema indesejável, basta utilizar a função stop(). Agora vamos ao código final sem problemas de animação:

$(document).ready(function() {
	$('ul.anim_queue a')
		.hover(function() {
		$(this).stop().animate({ left: 20 }, 'fast');
		},function() {
		$(this).stop().animate({ left: 0 }, 'fast');
	});
});

Agora observem o exemplo com o código corrigido. Como você pode ver, a animação só ocorre uma vez, mesmo após você passar rapidamente o mouse sobre o menu, evitando assim o problema anterior.

Esse post foi escrito com base no artigo original de Brandon Aaron

Alternativa a Google AJAX Libraries API

Postado por: Pedro Rogério em
  • 20 mai
  • 3

O Google que até então parecia um serviço indestrutível não é mais o que parece. Após quedas relatadas no Twitter, o que podemos fazer se dependemos desse serviço? Ainda mais aqueles que dependem da Google AJAX Libraries API para que suas aplicações fucionem.

Recentemente descobri uma alterantiva ao Google AJAX Libraries API, onde caso o serviço esteja off-line, ele utiliza o arquivo JavaScript que está hospedado em seu servidor. Basicamente você teria que criar um arquivo JavaScript e colocá-lo antes do fechamento da tag body:

<script type="text/javascript" src="meu-script-google.js"></script>

O conteúdo desse arquivo deve ser o seguinte:

var sc = document.createElement("script");
sc.type = "text/javascript";
// SRC do Google
sc.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?rand=' + Math.random();
var timer = setTimeout(function(){
   if (typeof jQuery == 'function') return;
        var sc = document.createElement("script");
        sc.type = "text/javascript";
        // SRC local
        sc.src = 'http://www.pinceladasdaweb.com.br/blog/js/jquery-1.3.2.min.js';
        document.getElementsByTagName("head")[0].appendChild(sc);
   // Tempo em milisegundos antes de carregar o arquivo local.
}, 200);

sc.onload = sc.onreadystatechange =  function(e){
    clearTimeout(timer);
}
document.getElementsByTagName("head")[0].appendChild(sc);

É uma ótima alternativa, pois caso o serviço fique indisponível, é carregado um JavaScript alternativo.

Páginas:«123456789...17»