Trabalhando com jQuery e ASP.NET - Revista .Net Magazine 90
O artigo trata da biblioteca de JavaScript jQuery, apresentando seus conceitos básicos, principais funcionalidades e utilização em conjunto com o ASP.NET. A partir de uma aplicação, também é demonstrada a realização de chamadas AJAX a PageMethods.
O jQuery melhora a interatividade das páginas WEB, proporcionando um ganho de produtividade com o suporte aos principais navegadores do mercado, resultando na redução de código JavaScript. Assim, ele é utilizado quando se deseja utilizar requisições AJAX em aplicações ASP.NET, possibilitando melhorias em termos de usabilidade, e promovendo aplicações de Front-View mais ricas.
Neste artigo são apresentadas algumas funcionalidades do jQuery, e através de uma aplicação exemplo, demonstrada a realização de chamadas AJAX a PageMethods do ASP.NET. Também é abordada a comunicação entre cliente e servidor usufruindo do JSON, que utiliza propriedades e valores para representar dados de objetos.
Autores: Everton Coimbra de Araújo, Fábio Augusto Pandolfo e Esmael Somenzi
A evolução no desenvolvimento de páginas WEB trouxe uma crescente e desafiadora busca por interatividade e usabilidade entre usuário e aplicação. Desenvolvimento rápido e ágil é um dos desafios do jQuery, que juntamente com a estrutura DOM (Document Object Model) simplifica a manipulação dos elementos HTML, a fim de proporcionar uma maior produtividade. A Microsoft segue esta mesma linha e por isso está lançando um novo conceito em relação aos seus componentes, usufruindo da biblioteca jQuery.
Apresentando o jQuery
A biblioteca jQuery surgiu em 2006, criada pelo americano John Resing que observou a necessidade de simplificar a utilização do JavaScript e seus complexos e trabalhosos recursos. O jQuery se destaca pela capacidade de resolver questões de compatibilidade entre navegadores de forma transparente, reduzindo significativamente a quantidade de código necessário para criar animações personalizadas, produzir efeitos distintos, acessar e modificar estruturas de documentos, entre outros.
O jQuery está centrado na recuperação de elementos e execução de ações em páginas HTML, destacando-se a função $(), que dependendo dos parâmetros passados pode tanto selecionar e criar elementos como manipular eventos.
A função $() retorna um objeto do tipo jQuery, que armazena todos os elements do DOM, como div, h, p e a. Um element pode conter atributos e elementos filhos, fornecendo métodos para navegar entre seus nós. Nesse sentido, o objeto jQuery se comporta como um array (apesar de não ser um tipo Array do JavaScript), sendo possível acessar e percorrer seus elements por meio de um índice. Sempre que um método provocar alterações no conjunto de elementos, será criado um novo objeto jQuery contendo essas alterações, possibilitando o retorno ao estado anterior através do método end().
A utilização de uma string passada como parâmetro para a função $() permite retornar um objeto jQuery com os elementos da seleção, que podem ser utilizados na edição e manipulação da estrutura do documento. Esse é o mecanismo dos seletores, que possuem uma sintaxe parecida com a utilizada no CSS, porém com algumas opções adicionais do jQuery, resultando em um poderoso mecanismo de busca. No código a seguir,
$("p").css("text-align", "justify");
um seletor CSS "p" foi passado como parâmetro para filtrar todos os parágrafos do documento, e também a ação que configura o alinhamento do texto como justificado.
Um dos métodos mais importantes do jQuery é o ready(), que permite executar código logo após o navegador analisar o documento e converter o HTML para a estrutura de árvore DOM. Isto significa que não é necessário esperar o carregamento de recursos externos como imagens e vídeos para acrescentar novos comportamentos. Na sentença a seguir,
$("table tbody tr:even").css("background","#00FF22");
o efeito "zebrado" foi definido, adicionando um novo comportamento ao elemento table, e sem a necessidade de aguardar o carregamento completo da página. Em contrapartida, com JavaScript puro seria necessário utilizar o efeito onLoad, que ocorre apenas quando todos os recursos das páginas foram carregados.
Caso alguma funcionalidade da biblioteca padrão do jQuery não atenda as necessidades do desenvolvedor, este tem à disposição uma gama de plugins que poderão ser utilizados para prover recursos adicionais, tais como validação, mudança de aparência, personalização de mensagem e novos componentes visuais.
Nota: As folhas de estilos ou CSS (Cascading Style Sheets) são responsáveis por definir a apresentação do conteúdo de páginas web, através de um conjunto de regras aplicadas sobre os elementos que compõem o HTML.
DOM (Document Object Model) é uma API padronizada pela W3C (World Wide Web Consortium) que permite acessar a estrutura de documentos HTML/XML, possibilitando realizar modificações no seu conteúdo e apresentação de forma dinâmica. É totalmente independente de linguagem e plataforma. Os navegadores WEB no momento do carregamento de uma página criam sua estrutura na memória, desta forma todos os elementos HTML ficam prontos para serem acessados e manipulados através do DOM juntamente com o JavaScript.