E para comemorar o aniversário a um ótimo post no blog da Jquery intitulado como jQuery 1.3 and the jQuery Foundation que nos alerta sobre as novidades de aniversário:

• Lançamento de uma nova versão: 1.3;
• Uso do “JavaScript Selector Library” Sizzle;
• Considerável melhoria de performance;
• Suporte nativo ao Live events;
• Nova interface a documentação das API;

Segue o código da função:

/**
 * Shows a singular or plural message based in a informed number
 * How to use: alert( singular_plural( '%d child', '%d children', 2 ) );
 *
 * @version 0.1
 * @date Monday, January 7, 2008
 * @author Leandro Vieira Pinho - http://leandrovieira.com
 */
function singular_plural( strMsgSingular, strMsgPlural, intTotal ) {
	if ( intTotal > 1 )
		return strMsgPlural.replace( '%d', intTotal );
		return strMsgSingular.replace( '%d', intTotal );
}

Exemplos de uso:

alert( singular_plural( '%d child', '%d children', 2 ) );

alert( singular_plural( '%d child', '%d children', 1 ) );

Em ambos exemplos, teremos os seguinte resultados: 2 children e 1 child.

Alguns frameworks oferecem soluções para que tal conflito seja evitado; consulte a documentação de cada framework e aplique-a.

Recentemente, precisei utilizar o jQuery para utilizar alguns efeitos que ele oferece, e como desenvolvi todo o projeto utilizando a freeDOM, o conflito entre as funções dólar $() de ambos os frameworks foi inevitável.

Para impedir que a função dólar $() do jQuery entre em conflito com outros frameworks, utilize a seguinte solução:

var $j = jQuery.noConflict();
//ou
var $foo = jQuery.noConflict();
//ou
var $comoQuiser = jQuery.noConflict();

Para quem utiliza o Spry (alguém utiliza?) a indicação é renomear a função $() para Spry.$(); também é possível fazer o processo reverso, ou seja:

var $ = Spry.$;

A freeDOM, ainda não pensei neste aspecto, mas levaremos esse detalhe no próximo release.

Para utilizá-la proceda assim:

echo formata_data_extenso('2007-04-17');
echo formata_data_extenso('2007-04-17 15:20:35');

Essa função é muito útil quando se deseja formatar as datas armazenadas em um banco de dados MySQL, por exemplo; em que elas estão armazenadas no formato date, datetime ou timestamp.

Já falhei por aqui sobre Formatar as datas do MySQL com SQL ou PHP. O código da função segue abaixo:

/**
 * Esta função retorna uma data escrita da seguinte maneira:
 * Exemplo: Terça-feira, 17 de Abril de 2007
 * @author Leandro Vieira Pinho [http://leandro.w3invent.com.br]
 * @param string $strDate data a ser analizada; por exemplo: 2007-04-17 15:10:59
 * @return string
 */
function formata_data_extenso($strDate)
{
	// Array com os dia da semana em português;
	$arrDaysOfWeek = array('Domingo','Segunda-feira','Terça-feira','Quarta-feira','Quinta-feira','Sexta-feira','Sábado');
	// Array com os meses do ano em português;
	$arrMonthsOfYear = array(1 => 'Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro');
	// Descobre o dia da semana
	$intDayOfWeek = date('w',strtotime($strDate));
	// Descobre o dia do mês
	$intDayOfMonth = date('d',strtotime($strDate));
	// Descobre o mês
	$intMonthOfYear = date('n',strtotime($strDate));
	// Descobre o ano
	$intYear = date('Y',strtotime($strDate));
	// Formato a ser retornado
	return $arrDaysOfWeek[$intDayOfWeek] . ', ' . $intDayOfMonth . ' de ' . $arrMonthsOfYear[$intMonthOfYear] . ' de ' . $intYear;
}

Comentários para melhoria são bem-vindos.

Os tipos em JavaScript são os seguintes:

• Number
• String
• Boolena
• Object
• • Function
  • Array
  • Date
  • Math
  • RegExp
  • Error
• Null
• Undefined

Esqueci de alguém?

Tal recurso é feito utilizando-se do evento onbeforeunload da seguinte maneira:

window.onbeforeunload = function() {
	return "Aqui você especifica uma mensagem a ser anexada junto a mensagem padrão do navegador.";
}

Quando o usário tentar fechar a página, apertar a tecla F5 ou navegar para uma outra URL, ele deverá confirmar a sua real vontade de sair da página. Observe um exemplo:

Bom, utilizando a imaginação é possível fazer um bom uso desse recurso, ainda mais com o advento do Ajax e das aplicações on-line.

Infelizmente o evento onbeforeunload não funciona no Opera (ou funciona e eu não sei?), somente no Internet Explorer e a partir da versão 0.9 do Firefox.

Criei essa extensão para facilitar meu trabalho ao utilizar a freeDOM.js no Dreamweaver. A versão atual é a 0.1 e toda sugestão será muito bem vinda

Exemplo de uso

Uma vez que a instalação foi instalada, abra um arquivo do tipo JavaScript e digite $ (cifrão). Ao digitar esse caractere será exibido um menu popup com as funções da freeDOM.js, com isso utilize as teclas para cima e para abaixo do seu teclado para navegar entre as funções do menu.

Observe a imagem de exemplo:

Ao digitar o nome da função e abrir o parênteses, por exemplo: $after(. O Dreamweaver exibirá uma tooltip com os parâmetros da referida função; à media em que você for adicionando as vírgulas para informar o parâmetro posterior o menu é atualizado; sempre exibindo em negrito o parâmetro em questão.

Observe outra imagem de exemplo; agora com a tooltip:

Faça o download da freeDOM.js inside Dreamweaver (freeDOM-inDW), versão atual 0.1

Espero que go

A idéia do programa é bem simples e oferece duas formas para você ganhar dinheiro com esse programa de afiliados.

A primeira consiste na indicação de alunos para os cursos que a Visie oferece; onde ganhamos 5% do valor do curso. Já a segunda é indicados novos afiliados ao Programa de Afiliados deles; onde faturamos sobre cada venda que nosso indicado fizer e sobre cada comissão que ele faturar indicando outros afiliados que façam vendas, nesse caso, ganhamos um valor igual à metade da comissão que ele ganhar.

Então se você deseja faturar uma grana com o seu blog cadastre-se no Programa de Afiliados da Visie e boa sorte

Ah, não se esqueça de ir até lá por este link aqui: Programa de Afiliados da Visie. Assim eles saberão que eu estou lhe indicando, e claro, ganharei com isso e você também.

w3Opacity são recursos em JavaScript para você trabalhar com efeitos de opacidade em elementos HTML de forma fácil, simples e prática.

Com o w3Opacity será simples realizar Fade Out, Fade In, Toogle de Fade, Definir opacidade e consultar a opacidade de elementos HTML. Veja alguns exemplos:

Exemplo de um Fade Out

w3Opacity.fading('img_fadeout',100,0,600);

Onde, img_fadeout é o ID do objeto; 100 é a opacidade inicial e 0 a final; 600 é o tempo em milisegundos que o efeito irá durar.

Exemplo de um Fade In

w3Opacity.fading('img_fadein',0,100,600)

Percebeu a diferença entre o Fade Out? Exatamente, a opacidade inicial é menor do que a final, somente.

Exemplo de Toggle de Fade

w3Opacity.toggle('img_togglefade',600);

O Toggle de fade funciona assim: o método – toggle – consultará a opacidade do elemento HTML, se ele estiver visível será realizado um Fade Out, caso contrário, um Fade In.

Como definir Opacidade

Definir opacidade em elementos HTML com o w3Opacity é super simples, observe:

w3Opacity.set('img_set',30);

onde img_set é o ID do objeto e 30 é a opacidade desejada, ou seja, 30% de opacidade.

Como consultar a Opacidade de um objeto

Utilize o método get_opacity para tal, assim:

w3Opacity.get_opacity('img_get_opacity');

Há outros projetos no meu Labs.

Com o advento da web 2.0 tornou-se muito comum categorizar artigos, por exemplo, através de tags (rótulos). Cada aplicativo que utiliza esse tipo de categorização separa as tags através de espaços, outros com vírgulas (minha preferência), entre outros separadores. Alguns limitam a quantidade de tags durante o ato de categorizar, outros não.

A solução abaixo foi desenvolvida com base nessas divergências e por isso permite ser customizada de acordo com a característica da aplicação em que esta solução for utilizada.

/**
 * w3_manager_tags (0.1) - 02/01/2007
 * Leandro Vieira Pinho
 * Localize-me. Blog: [ http://leandro.w3invent.com.br ], E-mail leandro[at]w3invent[dot]com[dot]br
 */
var w3_manager_tags = {
	// Configuração
	objFieldId: 'id_do_campo', // ID do campo onde as tags serão digitadas
	strSpliter: ',', // Separador desejado para as tags. Ex. , (vírgula) |  (espaço) | ; (ponto e vírgula)
	intTotalTagsMax: 5, // Total máximo de tags permitido
	boolShowAlert: true, // Exibir ou não um alerta, caso exceda o total de tags
	strMessage: 'Utilize no máximo 5 (cinco) tags.', // Mensagem a ser exibida
	start: function() {
		var objField = this.$(this.objFieldId);
		objField.onkeyup = function() {
			w3_manager_tags.manager(this.value);
		};
	},
	manager: function(strTagsParam) {
		var arrTags = strTagsParam.split(this.strSpliter);
		var intTotalTags = arrTags.length;
		if ( intTotalTags > this.intTotalTagsMax ) {
			var strTagsInValue = "";
			for ( var i = 0; i < this.intTotalTagsMax; i++ ) {
				strTagsInValue = strTagsInValue + arrTags[i] + this.strSpliter;
			}
			this.$(this.objFieldId).value = strTagsInValue.substring(0,(strTagsInValue.length - 1));
			if ( this.boolShowAlert ) {
				alert(this.strMessage);
			}
		}
	},
	$: function(strObjId) {
		return document.getElementById(strObjId);
	}
};

O script está auto-explicativo, bem como os itens a serem configurados. Se tiver alguma dúvida ou sugestão, comente.