mar 2 2010

Javascript Orientado a Objetos?

Como assim?  Você quer dizer usando jQuery não é?

Não!

Cada vez que aprofundo os meus conhecimentos de Javascript me vem à cabeça o artigo do lendário Douglas Crockford, aonde ele o qualifica qualifica como  “a linguagem de programação mais incompreendida do mundo”.

E convenhamos, não é a toa!  Como o pessoal do jQuery e outras bibliotecas já descobriu, o javascript pode fazer muito mais do que validar formulários e dar alerts e confirms… O surgimento destas bibliotecas foi uma faca de dois gumes pois apesar de ser enormemente responsável pelo ressurgimento da linguagem e por torná-la popular, também fez com que poucas pessoas de fato saibam usá-lo sem o auxílio de uma biblioteca… e eu me incluo neste grupo!

Recentemente decidi tentar criar algo em js puro e gostaria de compartilhar algumas coisas.

Objetos no Javascript

Quem já trabalhou com JSON com certeza já conhece o tal do “Object Literal”:

{
    nome : 'Alex',
    idade : 26
}

Pois aí está a forma mais simples de um objeto Javascript, o tal do literal! Veja outro exemplo: (e desculpem a falta de criatividade…)

function carro(params){
    this.velocidadeAtual = 0;
    var velocidadeMax = 100;

    this.acelerar = function(){
        if(this.velocidadeAtual < velocidadeMax){
            this.velocidadeAtual += 10;
            alert('vroom');
        }
    }
}

var car = new carro();
alert(car.velocidadeAtual);
car.acelerar();

O objeto pode ser instanciado e os seus métodos e propriedades podem ser acessados pela instância... legal não é? E aí, está se perguntando porque usei var para declarar uma variável e this pra declarar a outra?

Escopo de Métodos e Propriedades
obs - eu uso os termos métodos e funções intercaladamente, assim como propriedades e atributos... :)

Quando se está trabalhando com objetos no javascript, apesar de não existir palavras-chave delimitadoras de escopo como public ou private, é possível obter o mesmo resultado usando this e var, respectivamente.

Tal como o PHP e outras linguagens orientadas a objetos, o this se refere à instância do objeto, até aí sem novidades... Já o var tem a sua visibilidade delimitada ao escopo atual, ou seja, se for declarada dentro da função não será visível fora dela. Neste caso, o efeito resultante é o de uma variável privada.

E finalmente...

Herança

Antes de mais nada, não dá pra frisar o suficiente que o javascript não possui um sistema de "herança clássica". Na verdade nem possui classes e os seus objetos são "prototipados", ou seja: são definidos na hora para atender a uma necessidade. Existem várias formas de obter o efeito de herança entre objetos e isto é até hoje um tema para o qual não há uma só solução. Veja um exemplo simples:

function ClassePai() {
    this.teste = function(){
        alert('teste da classe pai');
    }
}

function ClasseFilho() {

}

// agora a parte legal, vamos herdar os métodos da classe pai
ClasseFilho.prototype = new ClassePai();

// testando
var filhote = new ClasseFilho();
filhote.teste();

Em conclusão: O javascript é uma linguagem bastante subestimada e poderosa, que pode ser usada para agregar bastante valor e transformar completamente a experiência do usuário no seu site. E claro, use o jQuery, YUI, MooTools, etc... só não se esqueça como programar em javascript! :)

Leia mais
http://ejohn.org/blog/simple-javascript-inheritance/
http://javascript.crockford.com/prototypal.html
http://www.sitepoint.com/blogs/2006/01/17/javascript-inheritance/
http://ajaxpatterns.org/Javascript_Inheritance
http://www.kevlindev.com/tutorials/javascript/inheritance/index.htm


ago 26 2009

Typekit, o fim das Web-safe Fonts?

Está no ar o beta do Typekit, um serviço que promete revolucionar como web designers encaram o processo de desenhar e implementar sites.

O problema:

Hoje em dia são poucas as fontes que são padrão para usuários de diferentes sistemas operacionais e as suas respectivas versões.  O que acaba acontecendo, para que tenhamos a segurança de que um site aparecerá da forma como planejamos, é que usamos as fontes mais comuns como Arial, Georgia e Verdana.

A solução?

O Typekit é um serviço que promete permitir total liberdade a desenvolvedores na hora de implementar o design de seus sites, permitindo o uso de qualquer fonte na web, sem a necessidade do usuário a ter instalada.  É só se cadastrar no site, incluir a biblioteca de Javascript deles e pronto!

Veja alguns exemplos:

Fonte “Edding 780″:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quam erat, feugiat sed suscipit ac, lacinia sit amet ligula? Nulla facilisi. Mauris et leo tellus. Integer ante leo, eleifend tincidunt ornare non; lacinia quis nisl.

Fonte “CarbonType”:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quam erat, feugiat sed suscipit ac, lacinia sit amet ligula?

Percebeu que não é flash, nem imagem, é texto mesmo! Dá pra selecionar, copiar, etc…Revolucionário, não?

Na verdade, nem tanto! Após investigar um pouco, percebi que o Typekit nada mais faz do que utilizar a nova propriedade de CSS3, @font-face, que permite a inclusão de qualquer fonte em uma página, contanto que seja especificada uma url para a mesma.

@font-face {
    font-family: Fenwick;
    src: url('fenwick_ol_free.ttf');
}
.ff-fenwick {font-family: Fenwick;}

Veja um exemplo usando somente a propriedade @font-face:

Fonte “Fenwick”:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quam erat, feugiat sed suscipit ac, lacinia sit amet ligula? Nulla facilisi. Mauris et leo tellus. Integer ante leo, eleifend tincidunt ornare non; lacinia quis nisl.

Se você está não está vendo nenhuma diferença provavelmente é porque está usando Internet Explorer! Firefox, Opera, Safari e Chrome já oferecem suporte, porém em alguns casos é necessário habilitar a funcionalidade. Leia este artigo para saber mais sobre a compatibilidade dos navegadores.

Para satisfazer a curiosidade do pessoal do Internet Explorer, segue uma foto:

Demonstração da propriedade CSS3 @font-face

Conclusão
Em relação ao Typekit, não dá para culpá-los. Eles de fato cumprem o que prometem, apesar do método deles não ser estritamente necessário, já que algumas linhas de css produzem o mesmo resultado.

A sacada e proposta de valor deles se dá em relação às fontes comerciais que não podem ser distribuídas de graça: a partir da utilização de 2 fontes, é cobrada uma taxa mensal.

Quanto ao CSS3, que não era nem o assunto deste artigo, fica uma surpresa agradável. Para ser sincero até agora eu nem havia me inteirado muito (apenas com as bordas arredondadas que aparecem pelo site) mas percebi que a hora do CSS3 é agora! E, de fato, estamos chegando ao fim da era das chamadas “web-safe fonts”. RIP.

E você, o que acha?  Será mesmo o fim das web-safe fonts, ou é mais uma modinha que não vai dar em nada?  Comente!

Agradecimentos: Josh Salverda e CSS3.info

Veja aonde baixar a fonte gratuita Fenwick


ago 21 2009

10 dicas para programar melhor com jQuery

Excelente post com boas dicas de como programar melhor usando a biblioteca de Javascript jQuery.

Gostei especialmente da dica de evitar o body onload e usar $(window).load() como alternativa mais elegante e flexível.

Vale a pena conferir!

Link: 10 Tips for Writing Better jQuery Code


ago 20 2009

Minesweeper… versão jQuery!

Projeto Pessoal

Data: Agosto 2009

Descrição:

Esta é mais um lançamento do meu projeto de usar Javascript como alternativa para o Flash na criação de jogos online.

Escolhi o Minesweeper pelo fato de ser um jogo aparentemente simples e que pudesse ser fielmente recriado usando Javascript.

Quem sabe eu escreva um artigo descrevendo a criação do jogo em breve…

Confira o resultado final:

Minesweeper

Características:

  • Jogo feito com back-end PHP e front-end em Javascript usando jQuery
  • Uso extensivo de Ajax
  • Armazenamento de estatísticas e recordes

Link: Minesweeper


ago 19 2009

O Que é AJAX?

O surgimento e subsequente popularidade de bibliotecas da Javascript tais como jQuery, Dojo, MooTools, YUI, entre outras facilitaram bastante o desenvolvimento de páginas dinâmicas e possibilitaram até então interações com o usuário que só eram possíveis através do Flash.

Mas, afinal, o que exatamente é AJAX?

AJAX (Asynchronous JavaScript And XML) é, acima de tudo, um chavão.  Não é uma linguagem de programação e nem é nada novo.  Simplesmente, é uma técnica para enviar dados ao servidor e receber uma resposta sem ter de recarregar a página.  Os dados são enviados normalmente via GET/POST mas a grande sacada é que ao invés da página ficar “congelada” esperando, o usuário pode continuar navegando normalmente e a página será atualizada assim que houver uma resposta do servidor. Ou seja, o request é feito de maneira assíncrona.

O XML (eXtensible Markup Language) entrou na história por ser um formato mais “amigável” de armazenar informações e permite que o Javascript “converse” com o servidor (PHP/ASP/.NET/JAVA, etc).  O XML é facilmente interpretado e permite a utilização de schemas para padronizar o formato esperado da resposta.

Porém, hoje em dia o JSON (Javascript Object Notation) é uma alternativa mais usada para as respostas pelo fato de ser mais simples e também por ser um subconjunto da notação de objetos do Javascript, o que torna a sua interpretação no cliente ainda mais fácil.

Ou seja: Sabe quando você clica numa foto e a tela fica toda escura e a foto aparece em destaque no meio da tela?  Quando vota numa enquete online e os resultados aparecem na hora sem abrir outra página?  E quando envia um formulário e aparece aquela animação de um circulo girando?  É Ajax!

Espero que caso ainda não entendesse, eu tenha ajudado a explicar melhor e, se gostou, fique de olho!  Em breve postarei um tutorial completo e você verá como é simples criar uma aplicação web usando Ajax!


ago 14 2009

Jogo de Memória em Javascript

Projeto Pessoal

Data: Agosto 2009

Descrição:

Surgiu como um desafio pessoal de criar um mini-game online divertido e fácil de jogar, mas sem usar Flash.

Com o surgimento há alguns anos de inúmeras bibliotecas de Javascript tais como o prototype, scriptaculous e jQuery, entre outras, criar jogos rápidos e cross-browser usando Javascript deixou de ser algo experimental e passou a ser uma realidade.  Porém, o Flash continua líder absoluto no segmento de mini-games online.

Este é meu primeiro mini-game em javascript e fiquei muito satisfeito com o resultado, confiram!

Jogo de Memória

Características:

  • Jogo feito com back-end PHP e front-end em Javascript usando jQuery
  • Uso extensivo de Ajax
  • Armazenamento de estatísticas e recordes

Link: Jogo de Memória