Resumo : Sites e aplicativos da web modernos tendem a contar com JavaScript extensivo no lado do cliente para fornecer interatividade rica. Especificamente, retornar dados ou obter uma resposta de um script do lado do servidor (ou sistema de dados) por meio de uma solicitação assíncrona sem atualizar a página. Neste artigo, você aprenderá como as estruturas JavaScript tornam mais rápida e fácil a criação de sites e aplicativos da web interativos e responsivos.
Introdução : JavaScript é uma linguagem de script orientada a objetos que tem sido usada há muito tempo como interface de script do lado do cliente preferida para aplicativos de navegador da web. JavaScript permite que desenvolvedores web trabalhem programaticamente com objetos em páginas web, fornecendo uma plataforma para manipular esses objetos do nada. Quando o JavaScript foi introduzido pela primeira vez, ele era frequentemente usado para fornecer funcionalidades triviais, como relógios e rolagem de texto na barra de status do navegador. Outro recurso comum é o “link de rollover”, que altera a cor do texto ou da imagem de fundo quando o usuário passa o mouse sobre o objeto. No entanto, nos últimos anos, o Ajax trouxe novas interações para a programação de rede e o JavaScript evoluiu e se tornou mais útil. Antes do Ajax, qualquer processamento do lado do servidor ou acesso ao banco de dados exigia que a página inteira fosse "atualizada" ou que uma nova página fosse renderizada pelo navegador. Isso não é apenas lento e frustrante para os usuários, mas também desperdiça largura de banda e recursos.
Ajax é JavaScript e XML assíncronos Embora a referência a XML não seja mais válida, o Ajax pode responder a dados em vários outros formatos além de XML, como JSON (JavaScript Object Notation). O princípio de funcionamento do Ajax é enviar uma solicitação HTTP ao servidor web de forma assíncrona, sem atualizar ou renderizar a página inteira, apenas o conteúdo da resposta. Em vez disso, os desenvolvedores normalmente usam operações DOM (Document Object Model) para modificar partes de uma página da web, e os dados retornados pela resposta HTTP refletirão essas alterações.
O que é uma estrutura JavaScript?
O JavaScript em si é uma linguagem muito poderosa e você não precisa de nenhuma estrutura adicional para criar aplicativos ricos para Internet (RIA) alimentados por ele. No entanto, trabalhar com JavaScript não é uma tarefa fácil, principalmente devido às diversas complicações que surgem ao tentar fornecer suporte a vários navegadores. Assim como HTML e CSS, navegadores diferentes executam JavaScript de maneira diferente, portanto, garantir que seu código JavaScript seja compatível com vários navegadores pode ser um pesadelo.
Uma estrutura ou biblioteca JavaScript é, na verdade, um conjunto de ferramentas e funções que facilitam a produção de código JavaScript compatível com vários navegadores. Cada biblioteca foi rigorosamente testada nas versões mais recentes de muitos navegadores populares. Portanto, você pode ter certeza de que usando qualquer uma dessas estruturas, seu RIA baseado em JavaScript será geralmente consistente em todos os navegadores e plataformas.
Deixando de lado os problemas de compatibilidade do navegador, as estruturas JavaScript facilitam a escrita de código para obter, percorrer e manipular elementos DOM. Eles não apenas fornecem uma função rápida para obter uma referência a um elemento DOM, mas também permitem o encadeamento de funções de passagem do DOM para encontrar elementos pai, filho ou irmão em qualquer profundidade. Por fim, o framework oferece uma série de funções que facilitam a manipulação desses objetos, permitindo alterar, adicionar, excluir seu conteúdo ou manipular o estilo da classe para afetar a aparência do elemento.
Outra característica importante da estrutura JavaScript é o seu melhor suporte para manipulação de eventos. Devido às diferentes implementações entre navegadores, o tratamento de eventos entre navegadores pode ser um pesadelo. Portanto, as estruturas JavaScript geralmente envolvem eventos do navegador e fornecem uma série de funções úteis entre navegadores para lidar com eles. Algumas estruturas também fornecem eventos padronizados que representam séries de códigos de teclas do teclado (como tecla Esc, tecla Enter, cursor, etc.).
Todos esses recursos são muito úteis e as estruturas JavaScript têm desempenhado um papel importante em seus recentes aplicativos Ajax populares. Tal como acontece com outros aspectos do JavaScript, cada navegador tende a suportar Ajax de uma maneira diferente, e tornar o suporte Ajax para todos os navegadores daria muito trabalho. Quase todas as estruturas JavaScript incluem alguma forma de biblioteca Ajax, geralmente fornecendo objetos de solicitação e resposta Ajax, atualizando elementos DOM após avaliar as respostas e pesquisando uma solicitação específica.
Características típicas de um framework JavaScript
Agora vamos dar uma olhada em alguns dos recursos que a maioria das estruturas JavaScript possui. Esses recursos incluem:
Para explicar melhor esses recursos, darei um exemplo de um ou mais dos seguintes frameworks JavaScript: Prototype, jQuery, YUI, ExtJS e MooTools. Embora a implementação e a sintaxe de cada estrutura sejam diferentes, os conceitos são basicamente os mesmos. Cada estrutura possui uma referência de API detalhada que você pode consultar ao decidir como usar os recursos dessas bibliotecas específicas.