M19 jQuery - introducao

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/