Baixe o app para aproveitar ainda mais
Prévia do material em texto
M19 opção 5 Ferramentas de Desenvolvimento de Páginas Web PSI 3º ano Ferramentas de Desenvolvimento de Páginas Web TGPSI - Paulo Reis - Agrupamento de Escolas da Batalha A biblioteca JavaScript: jQUERY 3 4 Introdução 5 Interfaces Web Atualmente, o browser não é apenas mais um programa para navegar na web: é uma plataforma aplicacional onde se executam tarefas cada vez mais complexas. Para além de websites, aplicações web e até jogos são uma realidade do browser. Sendo que a necessidade é a maior impulsionadora da evolução, as tecnologias de desenvolvimento web avançaram imenso num curto espaço de tempo, seja ao nível de browser, web application frameworks, bibliotecas JavaScript e nos próprios IDE. 6 jQUERY O jQuery (lê-se “jay-query”) é biblioteca JavaScript (e por isso client-side) totalmente livre e de código aberto. jQuery foi criada por John Resig em 2006 (jquery.com). De uma forma geral, tem como missão tornar o desenvolvimento web mais rápido. Nas palavras do autor, pretende alterar a forma como se escreve JavaScript. Reside na camada de apresentação (no contexto da three tier architecture) de uma aplicação ou website, dado que as suas funcionalidades estão diretamente relacionadas com aquilo que o “utilizador vê e manipula”. https://jquery.com/ 7 Oferece ao programador web: Capacidades de manipulação gráfica – manipulação de página, animações e efeitos; Gestão de eventos; Comunicações Ajax – comunicação entre o browser e o servidor; Utilitários; … O seu poder diferenciador é uma arquitetura baseada em plugins, que lhe oferece uma grande extensibilidade. jQUERY 8 Bibliotecas/Frameworks JavaScript Bibliotecas e frameworks JavaScript apoiam o desenvolvimento da “parte cliente” de uma aplicação ou website, nomeadamente em comunicações Ajax, layout, controlos gráficos, abstração do browser, entre outros, ajudando o programador a concentrar-se no domínio em causa. São escritas em e para JavaScript. As mais conhecidas: Ext JS jQuery MooTools Prototype Node.js https://www.mobileappdaily.com/2018/08/31/guide-on-javascript-frameworks https://www.mobileappdaily.com/2018/08/31/guide-on-javascript-frameworks 9 Porquê usar bibliotecas JavaScript? Tem como principais vantagens: Reduzir a quantidade de código – e, portanto a probabilidade de haver bugs; é verdade que é preciso aprender a usar a biblioteca, mas aquilo que se ganha ao simplificar o client side scripting supera significativamente esse esforço inicial. Aumentar a legibilidade do código – através da coerência e simplificação deste. Reutilizar a funcionalidade – o programador espera fazer o mesmo que habitualmente faz usando funcionalidades avançadas em server side. Diminuir as preocupações com suporte a vários browsers/versões Reduzir as preocupações com o JavaScript – os browsers não o implementam da mesma forma (exemplo: chamada Ajax, subscrição de um evento). Recorrer apenas a tecnologias standard da web – HTML, CSS e JavaScript; o browser é autónomo e dispensa plugins e runtimes (ActiveX, Java applets, Flash, …). 10 Porquê usar o jQUERY ? O jQuery é uma biblioteca JavaScript que tem cada vez mais um papel central no desenvolvimento web. Tanto ao nível de aplicações, como em sites e até jogos na web, o seu uso é dificilmente posto em causa. Totalmente livre e open source pode ser usado em software livre ou proprietário. Excelentes índices de popularidade; Facilidade de uso; Separação de componentes – num só lugar realizamos todas as operações, sem precisar sequer de uma linha JavaScript; Compatibilidade cross-browser e com browsers mais antigos; Estabilidade – são corrigidos detalhes de versão para versão; poucas funcionalidades são adicionadas ou tornadas obsoletas; Extensibilidade através de uso de plugins; Excelentes seletores – permite com facilidade filtrar elementos da página; Utilitário – deteção de browser features, de tipos de dados, etc. Suporte – fóruns, mailing lists, formação. 11 Inclusão do jQuery Para ver o jQuery em ação é necessário incluí-lo no projeto em desenvolvimento. O ficheiro de base (sem plugins) tem menos de 100Kb na versão minified e pode: Estar alojado no projeto (requer o download); Incluir uma referência online para um Content Delivery Network (CDN). 12 Alojamento local Para alojar localmente (junto ao projeto), clicar no botão Download no site oficial https://jquery.com/. Aí escolher a versão de produção ou de desenvolvimento. Pressionar Download the compressed, production jQuery 3.5.x Pressionar o botão direito do rato e escolher Guardar como… na pasta de js do projeto https://jquery.com/ 13 Depois de guardar a versão jQuery na pasta js do projeto, incluir a referencia: Os scripts devem estar posicionados após os estilos (CSS) e que os nossos scripts devem estar colocados após a inclusão do jQuery, para que possam fazer uso do mesmo. NOTA: É mais correto colocar os scripts antes de </head>, embora tenhamos mais performance coloca-los antes de <body> (visto que a página pode ser construída antes da leitura dos scripts). <!DOCTYPE html> <html> <head> <script scr="js/jquery-3.5.1.min.js"></script> <!-- inclusão de scripts definidos localmente --> </head> <body> </body> </html> 14 Acesso via CDN (alojamento externo) Um CDN é uma rede de servidores desenhada para servir conteúdo de forma rápida e escalável. O jQuery é alojado por vários CDN, entre os quais: Google Libraries API (https://developers.google.com/speed/libraries); jQuery CDN (https://code.jquery.com/); Microsoft Ajax Content Delivery Network (https://asp.net/ajaxlibrary/cdn.ashx) cdnjs (https://cdnjs.com/) Para incluir o jQuery usando o Google Libraries API, basta ir ao site do CDN, copiar o link de inclusão e colocá-lo numa tag de script: <script src="https://ajax.googleapis.com/ajax/libs/jquery/X.Y.Z/jquery.min.js"></script> Importante: deve-se substituir X.Y.Z pela versão atual do jQuery (por exemplo 3.5.1). https://developers.google.com/speed/libraries https://code.jquery.com/ https://asp.net/ajaxlibrary/cdn.ashx https://cdnjs.com/ 15 O meu primeiro programa Versão usando CDN <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery demo</title> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script> <script> $(document).ready(function(){ alert("Olá People! Bem vindo ao universo jQuery! "); }); </script> </body> </html> 16 O meu primeiro programa Versão local <html> <head> <script scr='/js/jquery-3.5.1.min.js'></script> </head> <body> <script> $(document).ready(function(){ alert('Olá People! Bem vindo ao universo jQuery!'); }); </script> </body> </html> 17 O JavaScript foi criado por Brendan Eich em 1995 para o navegador Netscape, que foi também um dos fundadores da Mozilla Corporation. As suas primeiras versões eram de uso exclusivo da Netscape e o seu desenvolvimento foi inspirado nas linguagens Java, Scheme e Self. Mas, e o que é JavaScript ?! Conjuntamente com o HTML e CSS , o JavaScript é uma das três principais tecnologias da World Wide Web. JavaScript é uma das linguagens de programação mais populares e usadas no mundo, que pode ser aplicada a um documento HTML, criando assim interações dinâmicas entre sites. Usado por grande maioria dos sites, todos os principais navegadores têm um mecanismo JavaScript dedicado para executá-lo. https://developer.mozilla.org/pt-PT/docs/Web/JavaScript https://www.w3schools.com/js/ https://developer.mozilla.org/pt-PT/docs/Web/JavaScript https://www.w3schools.com/js/
Compartilhar