Archive for 'javascript'
Solução para trabalhar com cookies em JavaScript
December 23rd, 2006. Published under add-on, javascript. 4 Comments.
Estou envolvido com um projeto, o qual necessitou da utilização de cookies. Como o projeto se baseia totalmente (e somente) de forma client-side. Minha única solução foi o JavaScript 
Com isto criei o w3cookies, uma forma simples e fácil para criar, ler ou deletar cookies. Observe o código abaixo:
/**
* w3cookies (0.1) - 23/12/2006
* Leandro Vieira Pinho
* http://leandrovieira.com
*/
var w3cookies = {
date: new Date(),
// Cria o(s) cookie(s)
// Forma de uso: w3cookies.create('nome_do_cookie','valor',dias_para_expirar);
create: function(strName, strValue, intDays) {
if ( intDays ) {
this.date.setTime(this.date.getTime()+(intDays*24*60*60*1000));
var expires = "; expires=" + this.date.toGMTString();
} else {
var expires = "";
}
document.cookie = strName + "=" + strValue + expires + "; path=/";
},
// Ler as informações de um cookie em específico
// Forma de uso: w3cookies.read('nome_do_cookie');
read: function(strName) {
var strNameIgual = strName + "=";
var arrCookies = document.cookie.split(";");
for ( var i = 0, strCookie; strCookie = arrCookies[i]; i++ ) {
while ( strCookie.charAt(0) == " ") {
strCookie = strCookie.substring(1,strCookie.length);
}
if ( strCookie.indexOf(strNameIgual) == 0 ) {
return strCookie.substring(strNameIgual.length,strCookie.length);
}
}
return null;
},
// Delete um cookie desejado
// Forma de uso: w3cookies.erase('nome_do_cookie');
erase: function(strName) {
this.create(strName,"",-1);
}
}
Enjoy
Dúvidas? Comente aí.
Diferenças entre os browsers ao interpretar JavaScript #1
December 21st, 2006. Published under IE, crossbrowser, firefox, javascript, opera. 2 Comments.
Estou lançando uma série que pretendo manter aqui no blog: Diferença entre browsers ao interpretar JavaScript. Ela terá a simples intenção de arquivar algumas diferença que percebo duramente o meu dia-a-dia de desenvolvimento utilizando tal linguagem. Mas, como não quero manter isso só pra mim, decidir compartilhar e disponibilizar por aqui
Vamos ao primeiro exemplo de hoje, o qual me motivou a iniciar esta série. Observe o seguinte código:
// Seleciona todos os links contidos na página
var arrLinks = $tags('a');
// Loop entre os links selecionados
for ( var i = 0, objLink; objLink = arrLinks[i]; i++) {
// Selecionamos o atributo rel do link em questão
var objLinkAttRel = objLink.getAttribute('rel');
// Descobrimos o tipo da varíavel que armazenou o atributo rel do link
alert('Tipo: ' + typeof(objLinkAttRel));
}
Bom, o código está auto-explicativo (se não o compreendeu, comente). Observe o resultado obtido:
- Tipo: string = Internet Explorer 6
- Tipo: object = Firefox 2.0.0.1
- Tipo: object = Opera 9
Como você percebeu, somente o Internet Explorer interpreta o tipo da variável como Object String. Então, se você faz um código assim:
...
var objLinkAttRel = objLink.getAttribute('rel');
if ( objLinkAttRel.substring(0,3) == 'foo' ) {
// Faz alguma coisa
}
Com o intuito de verificar o conteúdo do atributo rel dos links selecionados, e testa somente no Internet Explorer, você verá seu script funcionando perfeitamente. Mas ao testar em outros navegadores - como o Firefox e o Opera - você terá uma mensagem de erro - objLinkAttRel has no properties. Isto por que você está utilizando um método - substring - para trabalhar com Objects Strings. E como eles não interpretam tal variável como Object String, certamente não funcionará.
Então, o que fazer para que tenhamos esse código de forma crossbrowser? Simples, ao selecionar o conteúdo do atributo rel dos links, iremos transformá-lo em um Object String. Para que todos os browsers o interpretam dessa maneira (como Object String). Observe:
// Seleciona todos os links contidos na página
var arrLinks = $tags('a');
// Loop entre os links selecionados
for ( var i = 0, objLink; objLink = arrLinks[i]; i++) {
// Selecionamos o atributo rel do link em questão
var objLinkAttRel = new String(objLink.getAttribute('rel')); // Observe: new String()
if ( objLinkAttRel.substring(0,3) == 'foo' ) {
// Faz alguma coisa
}
}
}
Somente. Gosto sempre de trabalhar com vários navegadores abertos e testando tudo ao mesmo tempo, assim já identifico de imediato algumas divergências entre os navegadores e procuro uma alternativa para deixar meus códigos sempre de forma crossbrowser
Microsoft se prepara para 2007 com redesign drástico em sua Home Page
December 20th, 2006. Published under IE, acessibilidade, ajax, javascript, microsoft, opinião, web standards. 3 Comments.
A Microsoft Corporation lançou sua nova home page e sinceramente, me surpreendi com o redesign. Primeiro, por se tratar de uma empresa que mantém o browser do ícone azul. Segundo por ela não aderir como deveria os padrões da web (será?).
Com o lançamento do Internet Explorer 7, e a preparação para o Windows Vista e o Office 2007 para o próximo ano, a empresa de Bill Gates estrutura sua nova home page com base nos padrões da web e na utilização do Ajax. Acredite: eles usaram javascript não-obstrutivo.
A dois anos atrás, um grande nome ligado aos padrões da web, refez a home page da companhia com técnicas de CSS para Layout. Confira. Mas agora em 2006, caminhando para 2007 a sugestão parece ter surgido efeito (como demorou hein).
A nova interface como demonstrada abaixo:
Utiliza o Ajax para carregar o conteúdo dinâmicamente através dos links dispostos no menu flutuante à direita. Caso o usuário esteja com o JavaScript desabilitado ou não tenha suporte a esse recurso, ele navegará perfeitamente pelo site, uma vez que os desenvolvedores utilizaram o JavaScript como deve ser: não-obstrutivo.
Uma vez clicado nos links do menu, o conteúdo é exibido em um painel que oferece três opções de visualização de conteúdo (Detail, Thumbnail, Text). Observe a imagem abaixo:
O painel exibido ao clicar nos links do menu flutuante à direita, também oferece uma navegação em um menu flutuante à esquerda, que também utilizada o Ajax para carregar o conteúdo e exibi-lo nesse mesmo painel.
A navegação secundária, localizada na parte inferior da página, altera seu conteúdo dinâmicamente através do evento onmouseover. Os desenvolvedores também privilegiaram a navegação através do teclado, testei aqui e funcionou perfeitamente.
Meu primeiro contato com esta nova Home Page da Microsoft foi super positiva. Fiquei feliz de ver essa empresa se preocupar com a acessibilidade e com os padrões da web. E você, o que achou deste redesign?
Lançado o novo CSS Validator do W3C
December 19th, 2006. Published under css, javascript, w3c. 2 Comments.
Após a leitura do post do Henrique pude conhecer o novo CSS Validator do W3C e os novos recursos que ele oferece. O W3C o lançou no mesmo momento em que celebra os 10 anos das CSS. Olha que frase linda “Cascading Style Sheets Have Changed the Face of the Web“.
Gostei muito da forma como o site do CSS Validator foi desenvolvida e principalmente a utilização de um simpático javascript não-obstrutivo. Entre no site com o javascript habilitado e desabilitado para observar que de uma forma ou de outra, você estará apto a utilizar todos os recursos oferecidos
Para mais informações sobre o CSS Validator do W3C consulte: About the CSS Validator. Foi disponibilizado também uma documentação sobre ele na página Documentation index for the CSS Validator.
Além do mais, você poderá baixá-lo enviar seu feedback e visualizá-lo nas nove línguas disponíveis até o momento em que escrevo este post.
Ajax com uma linha de código.
December 18th, 2006. Published under DOM, add-on, ajax, freeDOM.js, javascript. 6 Comments.
Utilizando a freeDOM.js é possível trabalhar com o Ajax com apenas 1 (uma) linha de código. Tornando a tarefa de desenvolver interfaces mais ricas e com uma melhor interatividade com o usuário super simples.
Uma vez que você já inseriu a freeDOM.js na sua página, basta inserir o módulo de Ajax - freeDOM-ajax.js - ambos podem ser baixados na página da freeDOM.js. Você estará adapto a trabalhar com o Ajax com apenas uma linha de código.
Primeiramente, você precisará instanciar a classe de Ajax do módulo freeDOM-ajax.js da seguinte maneira:
var ajax = new ajax();
Feito isso, seu próximo passo é criar uma simples linha de código assim:
ajax.addRequest('/pg_serve_side.php',fnSeguinte,$('formID'));
Só isso :). Mas vou explicar em detalhes.
ajax.AddRequest = chama o método - addRequest - responsável em adicionar uma nova requisição Ajax à fila.
pg_serve_side.php = Nesse primeiro parâmetro do método addRequest, você informa a URL da página responsável pela comunicação com o servidor.
fnSequinte = O segundo parâmetro do método refere-se a uma função de retorno, que você poderá utilizar para tratar os dados retornados pelo Ajax - responseText.
Para finalizar temos o terceiro parâmetro, onde informamos o formulário que contém os dados quem devem ser “coletados” e enviados juntos a requisição. Isto é uma mão na roda em tanto.
Imagine que você tenha um formulário com “trocentos” campos e para enviar os seus dados, você teria que manualmente fazer algo assim:
...
dataPost += '&nome=' + $('nome').value;
dataPost += '&email=' + $('desc').value;
...
Informando o formulário no terceiro parâmetro da freeDOM-ajax.js, ele tratará de “coletar” os dados de todos os campos do formulário informado e facilitando a sua vida.
Esse módulo - freeDOM-ajax.js - ainda está em desenvolvimento, mas já apresenta significativa vantagem para o desenvolvedor. Gostaria de saber o seu comentário a respeito desses recursos e o que ela possa vir a ter
Como validar radio buttons com o w3FormValidation
December 18th, 2006. Published under DOM, add-on, freeDOM.js, javascript. No Comments.
A partir da versão 2.2 o w3FormValidation suporta a validação de radio buttons, de uma forma muita simples e eficiente.
Um grupo de campos do tipo radio - radio group - é um pouco diferente de outros tipos como: text, password, textarea, entre outros. Uma vez que o tipo radio button possue o mesmo atributo name para todos os campos de um determinado grupo e pode vir a ter id diferentes para cada um deles (óbvio).
Sendo assim, não podemos informar ao w3FormValidation o id de um radio button em específico. Mas sim, o atributo name do radio group, o qual se deseja que um dos campos seja selecionado. Juntamente com atributo name, informamos também o atributo id do formulário onde o radio group se encontra.
Ciente dessas informações, procedemos da seguinte maneira:
var c = [];
c.push('req,id_do_form:name_do_radio_group,mensagem desejada');
Ou seja, informamos ao w3FormValidation, que o tipo de validação será o req. Isto é, o campo é requerido. Em seguida informamos o ID do formulário seguindo de : - dois pontos - e o name do radio group. Logo depois a mensagem que desejamos exibir, caso nenhum dos radio button do radio group seja selecionado.
Visite a página do w3FormValidation para conhecer outros tipos de validação.
freeDOM e o método createElement
December 15th, 2006. Published under DOM, freeDOM.js, javascript. 3 Comments.
O método createElement tem o seu nome bem condicente com sua funcionalidade, ou seja, criar um elemento.
Esse método é utilizado em conjunto com outros métodos como o appendChild e o insertBefore (falaremos sobre eles ainda, fique tranqüilo).
Através da freeDOM é muito simples trabalhar com o método createElement. A função da freeDOM referente a esse método é a $new(). Essa função possui três parâmetros, sendo eles:
- strTagName = o nome da tag que será criada.
- strParams = os atributos que serão adicionados referente à tag.
- strConteudo = O conteúdo concernente à tag.
Observe como criaríamos uma tag div com um parâmetro e algum conteúdo.
$new('div','id=global','algum texto para o conteúdo');
Mas, vamos conhecê-la mais a fundo, afim de lhe mostrar o poder da freeDOM. Suponhamos que você deseja criar vários atributos para uma tag. Você faz isso simplesmente da seguinte maneira:
$new('a',["title=Oi, sou um link.","href=http://leandro.w3invent.com.br"],'texto do link')
Simples não é? Agora se a tag a ser criada não precisar de nenhum atributo, você procede assim:
$new('div','algum texto para o conteúdo');
Ou seja, embora o segundo parâmetro da função $new() seja referente aos atributos, a freeDOM o considera como o conteúdo da tag caso o terceiro parâmetro não seja informado.
w3AlertBox - Solução para customizar o Alert Box do JavaScript
December 14th, 2006. Published under add-on, freeDOM.js, html, javascript. 18 Comments.
Acredito que você sempre sentiu a necessidade de customizar o Alert Box do Javscript. E sentiu-se frustrado por não ser possível e ter percebido que aquela janelinha não poderia se enquadrar à identidade visual do seu site.
Mas agora seus problemas acabaram (meio tabajara essa frase né, rs…), criei o w3AlertBox que é uma solução para customizar o Alert Box do JavaScript, deixando-o como você julgar necessário
Você poderá alterar o título da janela do Alert Box, inserir códigos HTML na mensagem, tudo de forma muito simples e prática. E o melhor de tudo que você gastará apenas 1 (eu disse uma) linha de código para isso.
Um exemplo:
w3AlertBox.show('mensagem aqui','título aqui');
Para usar códigos HTML, faça o seguinte:
w3AlertBox.show(varQueContemOsCodigos,'título aqui',true);
Informando o terceiro parâmetro como true, você indica que usará códigos HTML.
Para baixar o w3AlertBox e saber mais detalhes a respeito, acesse: w3AlertBox - Solução para customizar o Alert Box do JavaScript.
JavaScript Object Literal no IE e no Opera
December 14th, 2006. Published under javascript. 6 Comments.
Estava agora a pouco criando um Object Literal em JavaScript e como de costume testando primeiro no meu querido Firefox. Tudo redondo, funcionando perfeitamente. Até quando fui testar no IE e no Opera.
Nesses dois últimos o script não funciona por nada. No Opera não obtive nenhuma mensagem de erro para facilitar o debug, já o IE me informou o seguinte:
Identificador, seqüência ou número esperado.
Ok, pra mim ficou na mesma. O IE como sempre exibe suas mensagens de erro que só ele compreende.
Bom, mexe daqui e mexe dali, descobri o seguinte. Trabalhando com Object Literal no IE e no Opera não podemos colocar a vírgula (,) após o último o método do Objeto. Já no Firefox, isso é opcional
A forma errônea é esta:
var foo = {
am: function() {
alert('Salve a Amazônia.');
},
ps: function() {
alert('Please!');
},
}
foo.am();
Ou seja o último método - ps() - tem uma vírgula no final. Dessa forma no IE e no Opera não irá funcionar. A forma correta para funcionar em todos os browsers (considerando os três que testei) é a seguinte:
var foo = {
am: function() {
alert('Salve a Amazônia.');
},
ps: function() {
alert('Please!');
}
}
foo.am();
Fica aí a dica. Para que você não perca algumas horas de trabalho ou tenha uma dor de cabeça por causa de uma simples vírgula.
freeDOM e o método getElementsByTagName
December 14th, 2006. Published under DOM, freeDOM.js, javascript. No Comments.
No post anterior, falamos sobre os benefícios em se trabalhar com o método getElementById através da freeDOM. Neste post, falaremos sobre seu “irmão”, o método getElementsByTagName.
Qual a utilidade do getElementsByTagName?
O método getElementsByTagName retorna uma lista de elementos cujo a tag desses elementos é igual a informada no parâmetro do método.
Observe a sintaxe e uma forma de uso do método getElementsByTagName.
var tagLinks = document.getElementsByTagName('a');
for ( var i = 0, foo; foo = tagLinks[i]; i++ ) {
alert(foo.innerHTML);
}
Agora, compare a utilização do mesmo método através da freeDOM:
var tagLinks = $tags('a');
for ( var i = 0, foo; foo = tagLinks[i]; i++ ) {
alert(foo.innerHTML);
}
Ainda acha que é pouco? Tudo bem. Imagine que você precisa que seja retornado apenas as tags a que estão dentro de um objeto cujo ID desse objeto seja igual a menu. Com a freeDOM, é só fazer assim:
var tagLinks = $tags('a',$('menu'));
for ( var i = 0, foo; foo = tagLinks[i]; i++ ) {
alert(foo.innerHTML);
}
Pronto
Referência sobre o método getElementsByTagName