Archive for 'javascript'
Função JavaScript para exibir uma string em singular ou plural
January 7th, 2008. Published under javascript. 4 Comments.
Chegou a vez do JavaScript, após criar um Plugin Smarty para exibir uma string em singular ou plural e uma função PHP com o mesmo propósito, demonstro agora a mesma função em JavaScript.
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.
Como evitar conflitos com a função dólar $() de frameworks JavaScript
May 23rd, 2007. Published under framework, freedom, javascript, jquery, spry. 3 Comments.
Praticamente todos os frameworks JavaScript possuem a função dólar $(); e cada um deles com suas peculiaridades. O que significa dizer que em certos momentos conflitos entre essas funções ocorrerão.
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.
Função em PHP para exibir datas por extenso
April 17th, 2007. Published under javascript. 6 Comments.
Abaixo há uma função em PHP para exibir datas por extenso no seguinte formato: [Nome do dia da semana], [dia do mês] de [Nome do mês] de [Ano com 4 dígitos]. Um exemplo: Terça-feira, 17 de Abril de 2007.
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
February 27th, 2007. Published under javascript. 1 Comment.
O JavaScript trabalha na manipulação de valores o tempo todo. O que significa dizer que se faz necessário conhecer os tipos; uma vez que em alguns momentos, você precisará consultar o tipo desse valor. Isto é, se ele é um número, array, entre outros.
Os tipos em JavaScript são os seguintes:
- Number
- String
- Boolena
- Object
-
- Function
- Array
- Date
- Math
- RegExp
- Error
- Null
- Undefined
Esqueci de alguém?
Como solicitar do usuário uma confirmação ao sair de uma página
February 7th, 2007. Published under ajax, event, javascript, onbeforeunload. 8 Comments.
Tenho visto um recurso interessante em alguns sites e principalmente em aplicativos web a la 2.0. Trata-se de uma solicitação ao usuário quando ele tenta fechar a página ou dirigir-se a outra URL. Quando o usuário executa alguma dessas ações, será necessário uma confirmação para fechar ou sair da página em questão.
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.
freeDOM.js inside Dreamweaver
January 23rd, 2007. Published under DOM, add-on, adobe, dreamweaver, freeDOM.js, javascript. 7 Comments.
O Dreamweaver passará a reconhecer as funções da freeDOM.js através da extensão freeDOM.js inside Dreamweaver.
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
Nova forma para ganhar dinheiro com blogs
January 18th, 2007. Published under blog, blogosfera, dinheiro, javascript. 1 Comment.
Acabei de ser aprovado na nova forma de ganhar dinheiro com blogs. Falo a respeito do Programa de Afiliados da Visie.
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 - Efeitos de opacidade em elementos HTML com JavaScript
January 15th, 2007. Published under DOM, add-on, javascript, labs, w3opacity. 9 Comments.
Eu havia criado anteriormente o w3FadingOpacity, mas agora ele se chama w3Opacity.
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.
Gerenciador de tags em campos de formulários
January 2nd, 2007. Published under DOM, javascript, web 2.0. No Comments.
Desenvolvi uma solução em JavaScript que gerencia as tags em um campo de formulário de acordo com as configurações informadas pelo utilizador dessa solução.
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.
Solução para limpar e resgatar o valor default do atributo value de um campo
December 28th, 2006. Published under DOM, crossbrowser, javascript. 3 Comments.
Criei uma solução super simples e prática com o intuito de limpar e resgatar o valor default do atributo value de um campo de formulário. Observe o script:
/**
* manager_field_default_value (0.1) - 28/12/2006
* Leandro Vieira Pinho
* Localize-me. Blog: [ http://leandro.w3invent.com.br ], E-mail leandro[at]w3invent[dot]com[dot]br
*/
var manager_field_default_value = {
objFieldId: ‘id_do_campo’,
start: function() {
objField = this.$(this.objFieldId);
objField.onclick = function() {
manager_field_default_value.clearDefaultValue();
}
objField.onfocus = function() {
manager_field_default_value.clearDefaultValue();
}
objField.onblur = function() {
manager_field_default_value.backDefaultValue();
}
},
clearDefaultValue: function() {
if ( this.$(this.objFieldId).value == this.$(this.objFieldId).defaultValue ) {
this.$(this.objFieldId).value = ”;
}
},
backDefaultValue: function() {
if ( this.$(this.objFieldId).value == ” ) {
this.$(this.objFieldId).value = this.$(this.objFieldId).defaultValue;
}
},
$: function(strObjId) {
return document.getElementById(strObjId);
}
}
Para usá-lo, você precisará informar apenas o atributo ID do campo desejado. E essa informação é atribuída na propriedade objFieldId. No exemplo acima, coloquei como exemplo: id_do_campo. Uma vez configurada tal propriedade, o script saberá com qual campo de formulário ele irá trabalhar.
Feita isso, você precisa apenas chamar o método start() após a página ser carregada - window.onload. O método deve ser chamado assim:
manager_field_default_value.start();
A lógica do script é a seguinte:
Ao clicar no campo de formulário informado ou quando ele receber um foco. Será verificado se o seu valor é igual ao valor atribuído ao atributo value. Caso sim, será chamado o método clearDefaultValue que deixará o campo em branco. Quando o campo perder o foco - onblur - será verificado se o valor está em branco, se tiver voltamos com o valor default do campo