É inegável a evolução experimentada pela internet nos últimos anos. De um ambiente estático (onde sites eram constituídos de centenas de milhares de páginas em formato HTML puro com alguns comportamentos gerenciados por scripts JavaScript) passando pelo dinamismo implementado pelas bases de dados, nos dias atuais, chegou-se ao estágio oposto, isto é, o da interatividade.
Do ponto de vista técnico, o conceito predominante na web atual é o RIA (Rich Internet Application). Como o próprio nome sugere, ao falarmos em RIA, estamos falando em tecnologias/metodologias/conceitos que possibilitam a contrução de aplicações ricas para o usuário final. Neste contexto, é de fundamental importância a observância de alguns critérios, sendo que, os principais são:
- Bom nível de interatividade entre o usuário e a aplicação;
- Usabilidade;
- Load de informações de forma assíncrona (postbacks em locais específicos e não na página como um todo);
- Manutenção do usuário no ambiente em que ele está acostumado;
- Dentre outros;
Olhando para este cenário, algumas plataformas de desenvolvimento propuseram alternativas (tecnologias) visando atender a demanda criada. Olhando para a plataforma de ferramentas e serviços da Adobe, por exemplo, podemos encontrar o “Flash”. Na plataforma Microsoft (.NET), podemos encontrar o Silverlight (que atualmente é muito mais do que simplesmente um plugin para ambiente web, haja vista as possibilidades de trabalho com WPF, Windows Phone 7, e outras).
As tecnologias mencionadas acima, de fato implementam o conceito de RIA, entretanto, é inegável o desconforto causado por estas, haja vista, a dependência gerada delas para com as aplicações. Assim, é possível que um ou outro usuário prefira não acessar sua aplicação a ter de instalar complementos ou plugins para que esta funcione corretamente. Além disso, incomoda (pelo menos a mim) o fato de criar uma aplicação que não é web por natureza. Mas então, qual a solução?
JavaScript – Uma visão geral da linguagem
Se você possui alguma experiência com desenvolvimento para web, certamente já ouviu falar de uma linguagem chamada JavaScript.
Inicialmente LiveScript e tempos depois, JavaScript (graças a forte colaboração da Sun Microsystems no aperfeiçoamento da linguagem), JavaScript é uma linguagem interpretada baseada em scripts (como o próprio nome sugere) criada por Brendam Eich. Inicialmente incorporada ao Netscape (principal browser da época) em um curto período de tempo, já se fazia presente na grande maioria dos navegadores.
O JavaScript foi proposto com o objetivo principal de otimizar a manipulação de dados e comportamentos de/em elementos HTML de páginas web, aumentando assim a interatividade destas páginas e principalmente, enriquecendo a experiência do usuário com elas. Uma observação importante é que JavaScript atua no lado do cliente, ou seja, diferentemente de linguagens como ASP, C#, VB.NET, PHP e outras, JavaScript somente é interpretada no computador do cliente.
Em relação à estrutura funcional, muito embora hajam semelhanças entre JavaScript e Java no nome e na sintaxe, conceitualmente elas são completamente diferentes. Enquanto temos a linguagem Java no paradigma Orientado a Objetos temos a linguagem JavaScript no paradigma estruturado (se você quiser saber mais sobre paradigmas computacionais, recomendo o livro de Robert W. Sebesta – Conceitos de Linguagens de Programação). Mas as diferenças não páram por aí. Enquanto temos a linguagem Java compilada, temos a linguagem JavaScript interpretada, conforme mencionado anteriormente, ou seja, Java e JavaScript são completamente diferentes.
Outra característica interessante em relação ao JavaScript é a possibilidade criarmos HTML’s dinâmicos (DHTML). Graças a este recurso, é possível associar as características de estilos de páginas (CSS) com scripts e alterar estes estilos de forma dinâmica, em tempo de execução.
Ok Fabrício, mas, seu artigo é sobre JavaScript ou sobre jQuery?
JavaScript e jQuery – Qual a relação?
É impossível falar em jQuery sem falar em JavaScript. Porque? Simples, porque jQuery é uma biblioteca criada sob a linguagem JavaScript.
Muito embora a linguagem JavaScript apresente interessantes possibilidades, não há como negar sua verbosidade. Muito embora esta característica não esteja associada a complexidade de produção de código, ela está associada a legibilidade e a expressividade, ou seja, poucas ações e muitas linhas de código.
Com base neste cenário, em 2005, John Resig (Figura 1), webdeveloper e profundo conhecedor da linguagem JavaScript, publicou em seu blog uma proposta diferente para a escrita de código JavaScript, baseada na utilização de seletores CSS (Cascade Style Sheet).
Figura 1: John Resig – criador do jQuery
Esta proposta, proporcionava (segundo Resig) maior legibilidade, manutenibilidade e versatilidade ao código escrito. Em 2006, a primeira versão do jQuery foi lançada oficialmente em uma convenção em Nova Iorque.
Para que serve jQuery?
jQuery possui alguns objetivos, sendo que, os principais deles são:
- Interatividade e dinamismo as aplicações;
- Código mais legível e expressivo;
- Criar scripts não obstrusivos (em um artigo futuro, falaremos especificamente sobre técnicas não obstrusivas);
- Incrementar usabilidade e acessibilidade;
- Enriquecer o design das aplicações;
No atual período pelo qual passa a internet (interativa e focada nas pessoas), é inimaginável a ausência do jQuery nas aplicações. Atualmente, muitos plugins construídos sob a biblioteca jQuery, que realizam os diferentes tipos de operações, encontram-se disponíveis na internet e são de fácil utilização, entretanto, conhecer a estrutura da biblioteca é fundamental, pois, permitirá a você criar seus próprios, de modo a reutilizar em outras aplicações.
Como funciona o jQuery?
jQuery é um framework e, como você já deve estar imaginando, um framework possui uma coleção de classes e métodos amplamente testados disponíveis para utilização de forma pré-definida.
É importante deixar claro que, jQuery não é uma nova linguagem de programação e nem é a única framework disponível para JavaScript. Podemos citar, por exemplo, MooTools e ExtJS. jQuery é uma framework/biblioteca construída sobre a linguagem JavaScript. A Figura 2 apresenta o core da framework jQuery na versão 1.2.
Figura 2: Estrtura interna do jQuery
Como é possível observar, jQuery é uma framework recheada de recursos. O desenvolvedor pode realizar operações que vão desde a simples manipulação de elementos DOM até chamadas assíncronas, animações, etc. Nesta série de artigos, iremos abordar praticamente todos os aspectos relacionados ao core do jQuery.
Algumas características do jQuery
jQuery possui algumas características que o tornam uma opção interessante. A seguir listamos as principais:
- Seletores CSS: jQuery utiliza seletores CSS para localizar os elementos HTML das páginas;
- Plugins: jQuery é extensível e “plugável”, isso quer dizer que, adicionar novas funcionalidades na forma de extensões/plugins são processos perfeitamente possíveis.
- Interoperável: jQuery funciona corretamente com qualquer navegador, pois é baseado nos padrões web;
- Interação implícita: Com jQuery o desenvolvedor está dispensado de efetuar loops interativos na busca de elementos na página web.
- Programação encadeada: cada método retorna um objeto, portanto, você pode encadear métodos sem problemas;
Nos artigos futuros, veremos de forma demorada cada um dos recursos desta poderosa biblioteca com exemplos práticos, do dia a dia do programador. Fique ligado.
Baixando e utilizando a biblioteca
jQuery é uma biblioteca open source, portanto, você pode baixar e utilizá-la sem custos. Para efetuar o download, basta ir até o site oficial da biblioteca, selecionar a versão desejada (Production ou Development), ambas estão na versão 1.5 (na ocasião em que este artigo foi escrito). A diferença básica entre as duas versões é que, a primeira, é aquela para ser colocada já em produção em suas aplicações. A segunda é a versão de colaboração, ou seja, a versão que contém os códigos abertos da framework, para estudo (entendimento de como a biblioteca foi construída) e colaboração (aperfeiçoamento da biblioteca).
Para utilizar o jQuery em sua aplicação, basta inserir a biblioteca no head da página, conforme ilustra as Listagens 1 e 2.
[javascript]
<script type=”text/javascript” src=”js/jquery-1.4.2.min.js”></script>
[/javascript]
Listagem 1: Inserindo o jQuery no head da página
ou então o jQuery hospedado nos servidores do Google, da seguinte forma:
[javascript]
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”></script>
[/javascript]
Listagem 2: Inserindo o jQuery hospedado nos servidores do Google
Por hoje é isso pessoal. Nos próximos artigos entraremos nos conceitos relacionados a biblioteca e construiremos os exemplos necessários para o entendimento de cada um deles. Tentarei associar os exemplos sempre com aplicações ASP.NET MVC, para que possamos entender como se dá a utilização da biblioteca com o pattern.
Não se esqueça de deixar seus comentários. Eles são de fundamental importância para podermos melhorar a qualidade dos textos.
Facebook
Twitter
Instagram
LinkedIn
RSS