A algum tempo eu vinha utilizando o Prototype JavaScript Framework para criar efeitos de animações simples e, principalmente, fazer requisições AJAX, em meus projetos. Mas após as constantes indicações de um amigo de que o jQuery JavaScript Framework tornava o desenvolvimento de aplicações web com JavaScript bem mais fácil, e as promessas deste de fazer grandes diferenças com poucas linhas de código, resolvi começar a utilizá-lo em meus novos projetos.

Acontece que o jQuery realmente cumpre o que promete, facilitando trabalhos como alteração de objetos em tempo de execução, requisições ajax e também conta com ótimas animações, tudo com poucas linhas de código muito fáceis de entender. Por isso resolvi fazer uma pequena comparação entre o uso de Prototype, jQuery, ou apenas JavaScript sem se utilizar nenhum framework.

Algumas vantagens do jQuery:

• Tamanho: O jQuery.js (versão 1.2.6) tem apenas 97KB, contando com toda sua API, Ajax e algumas animações básicas (Fade, Slide e o Animate, que pode ser utilizado para se fazeranimações customizadas). Já o prototype.js (versão 1.6.0.2), sem o Script.aculo.us, que provê as animações e efeitos, tem 123KB;
• Seletores: Enquanto com JavaScript é necessário linhas como elemento = getElementById(‘myDiv’); com o jQuery vc pode selecionar qualquer elemento com seletores CSS, utilizando a função $(). Ex: elemento = $(‘#myDiv’); Note que, como ele utiliza seletores CSS, é possivel selecionar facilmente quaisquer elementos, como todas as âncoras de uma página, ou todas as ancoras com a classe link, por exemplo: anchor = $(‘a’); anchorLink = $(‘a.link’);
• Eventos: O Prototype possui uma função para observar determinado evento em um elemento. Para disparar funções no Evento Click de meu link de id ‘myLink’, por exemplo, é necessário: Event.observe(‘myLink’, ‘click’, function(e) { [...] } );. Com jQuery basta fazer: $(‘myLink’).click( function() { [...] });

Vou um exemplo de código para uma aplicação bem comum, dois <select>s relativos de estado e cidade. Não vou postar HTML ou código PHP desnecessário, apenas o código Javascript.

Considere dois <select>, um com id ‘StateId‘ que exibirá os estados para selecionar, e irá atualizar com AJAX as opções do segundo <select>, que terá o id ‘CityId’, contendo as Cidades do estado selecionado previamente.

A url enviada, é uma típica url segmentada, comum em Frameworks MVC, e corresponde ao controle cities, a ação update, e deve receber o id do estado como parâmetro. Seria equivalente a seguinte url: ‘/cities/update.php?state_id=’.

Primeiramente, eis como o código para atualização seria, utilizando-se apenas JavaScript, e nenhum Framework:

//Apenas JavaScript, Nenhum framework
function updateCities(stateId) {
    var httpRequest;
    if (window.XMLHttpRequest) { // Mozilla, Safari, ...
        httpRequest = new XMLHttpRequest();
    } else if (window.ActiveXObject) { // IE
        httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
    }
 
    httpRequest.open("GET", '/cities/update/' + stateId, true);
    httpRequest.onreadystatechange = function() {
        document.getElementById("CityId").innerHTML = httpRequest.responseText;
    }
    httpRequest.send(null);
}

Ainda, como o JavaScript por padrão não possui métodos para observar eventos em elementos diversos, será necessário adicionar explicitamenteuma chamada para a função updateCities() no evento onChange do <select>:

<select id="StateId" name="StateId" onchange="updateCities(this.value)">

Utilizando-se Prototype, o trabalho torna-se bem mas fácil:

//Prototype
Event.observe (
    'StateId',
    'change',
    function(e) {
        new Ajax.Updater('CityId', '/cities/update/' + this.value);
    }
);

Já com jQuery, o código é reduzido significativamente, além de ficar bem mais legível e fácil de entender a uma primeira olhada:

//jQuery
$('#StateId').change(
    function() {
        $('#CityId').load('/cities/update/' + this.value);
    }
);

Este é um exemplo simples de como fica fácil reduzir código e torná-lo mais legível com uso do framework Js jQuery.
Veja a documentação do jQuery para mais métodos e exemplos de uso.

O highslide é um visualizador de miniaturas feito em JavaScript. Ele exibe as imagens em pop-ups sobre sua página (em html, nao novas janelas), podendo ser movidos ou abertos em sequencia. O efeito visual é melhor que qualquer visualizador de imagens já visto, mesmo em sistemas operacionais. Veja minhas imagens e screenshots para ter uma idéia. Vou mostrar aqui como intalar o plugin para Wordpress e como adicionar automaticamente o highslide a TODAS as imagens do blog, sem precisar editar os posts antigos.

O visualizador de miniaturas Highslide é free para uso não-comercial, e custa $29, dólares para cada domínio deu8m website comercial, então, caso você possua um blog comercial (?) você deverá pagar pelo Highslide.js. Veja a licença.

Primeiramente, baixe e instale o plugin wp-highslide (descompacte-o dentro de uma pasta ‘highslide’ em wp-content/plugins/) e também baixe a biblioteca highslide (copie apenas o arquivo highslide.js para dentro de wp-content/plugins/highslide). Após isso vá em ‘Plugins’ (ou ‘Extenções’, em português), na administração de seu blog e ative o wp-highslide. Com isso você terá o plugins instalado, podendo usar a tag <highslide></highslide> para adicionar miniaturas usando a biblioteca, o que é um saco. Então, para facilitar as coisas, vá em ‘Opções’ e clique em ‘wp-highslide’, ajuste as opções como deseja e em ‘JAVASCRIPT settings’ adicione o seguinte:

Caso seu tema não utilize ‘prototype‘ (um framework JavaScript), adicione no início do textarea o seguinte código:

<script>
src="http://prototypejs.org/assets/2007/6/20/prototype.js"
 type="text/javascript"></script>

E abaixo da linha: ‘hs.preloadImages();’

var elements = $A(document.getElementsByTagName('a'));
elements.each
(
    function(element)
    {
        if(element.href.endsWith('jpg')
            || element.href.endsWith('png')
            || element.href.endsWith('gif'))
        {
            element.className = 'highslide';
 
            Event.observe
            (
                element,
                'click',
                function(event)
                {
                    Event.stop(event);
                    var element = Event.element(event);
                    return hs.expand(this);
                }
            );
        }
    }
)

Isso vai adicionar automaticamente o Highslide a todos os links para imagens da página, inclusive dos posts antigos.