TECNOLOGIAS PARA INTERNET II (AULA 04)

•

ESTÁCIO

Junior Revoltei

14/06/2019

E aí, curtiu este material?

Ajude a incentivar outros estudantes a melhorar o conteúdo

Gostou desse material? Compartilhe! 🧡

Programação para Internet II

198 Materiais compartilhados

Baixe o app para aproveitar ainda mais

Leia os materiais offline, sem usar a internet. Além de vários outros recursos!

Prévia do material em texto

01/03/2019
1
TECNOLOGIAS PARA
INTERNET II
Aula 04 – Usando a biblioteca 
jQuery.
Prof. Ronaldo Candido
posinf_ronaldo@yahoo.com.br 2019.1
AULA 04
TECNOLOGIAS PARA INTERNET II
Prof. Ronaldo Candido
Conteúdo Programático
1. Introdução à biblioteca jQuery;
2. Instalação e uso ;
3. Seletores por tag, id e class ;
4. Eventos ;
5. Métodos.
01/03/2019
2
AULA 04
TECNOLOGIAS PARA INTERNET II
Prof. Ronaldo Candido
Introdução à biblioteca jQuery
• O desenvolvimento de páginas com JavaScript (JS) pode se
tornar uma tarefa maçante devido a uma grande quantidade de
funções e várias linhas de código para se chegar a um objetivo.
Para melhorar o desenvolvimento, a filosofia da biblioteca
jQuery é: “Escreva menos e faça mais”.
• jQuery é uma biblioteca construída com os comandos do JS e
tem como principal objetivo facilitar a construção de
programas em JS, podendo ser associada a outras bibliotecas
existentes como Bootstrap, Prototype e Angular.
AULA 04
TECNOLOGIAS PARA INTERNET II
Prof. Ronaldo Candido
Recursos da jQuery
• A biblioteca jQuery contém os seguintes recursos:
 HTML / manipulação DOM ;
 Manipulação de CSS ;
 Métodos de eventos HTML ;
 Efeitos e animações ;
 AJAX (Asynchronous Javascript and XML);
 Diversos serviços de utilidade pública.
01/03/2019
3
AULA 04
TECNOLOGIAS PARA INTERNET II
Prof. Ronaldo Candido
Vantagens da jQuery
• Resolve problema de compatibilidade entre navegadores ;
• Reduz código:
• Reutilização de código através de plug-ins ;
• Uma expressão jQuery é formada de duas partes principais:
a) o quê vai ser manipulado; b) e como isso vai acontecer.
• Como selecionar todos os parágrafos e mudar a cor de fundo
para verde ?
<p class="par">Primeira linha</p>
<p class="impar">Segunda linha</p>
<input type="text" id="texto" class="par” value="” />
$("p").css("background-color", "lightgreen");
AULA 04
TECNOLOGIAS PARA INTERNET II
Prof. Ronaldo Candido
Instalação e uso da jQuery
• A utilização da biblioteca pode ser feita de 2 formas:
1) Realizando o download completo da biblioteca ou utilizando
aplicativos de controle de versão como o Composer e o
Bower, para posteriormente carregar a biblioteca de uma
pasta específica ;
2) Carregando diretamente do site.
Exemplo 1) - Acessar https://jquery.com/ e clicar em download;
- Usando o botão direito sobre a opção “Download the
uncompressed, development jQuery 3.x.x”, salve o
arquivo em uma pasta;
Exemplo 2) – Na página em HTML use o carregamento do script :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
01/03/2019
4
AULA 04
TECNOLOGIAS PARA INTERNET II
Prof. Ronaldo Candido
Exemplo01.html com jQuery
<html>
<head><title>Usando jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body><script>
$(document).ready(function() { //função jQuery() ou simplificando $()
$("button").click(function() {
$("p").hide();
}); // fechar button
}); // fechar document
</script>
<p>Texto de exemplo</p>
<button>Ocultar texto</button>
</body>
</html>
AULA 04
TECNOLOGIAS PARA INTERNET II
Prof. Ronaldo Candido
Seletores do jQuery
• Todo o acesso aos elementos DOM é realizado com a seguinte
sintaxe: $(seletor).ação();
• Seletores são comandos que permitem acessar um objeto DOM.
 Seletor de elementos  Acessa um ou vários elementos na
página. Ex.: $("p") - Faz referência a todas as tags <p>.
 Seletor ID  Acessa os elementos pela sua id. Ex.: $("#p1")
 Seletor por classe css  Seleciona as tags que possuem uma
classe especifica. Ex.: $(".classecor")
 Seletor por classe this  Acessa somente o elemento que
está sendo utilizado no momento. Ex.: $(this)
• Para acessar os elementos da página, o jQuery inicia a função de
página pronta : $(document).ready(function() { //código aqui }
01/03/2019
5
AULA 04
TECNOLOGIAS PARA INTERNET II
Prof. Ronaldo Candido
Exemplo02.html – Seletor de elementos
<html><head><title>Exemplo02 - jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script></head>
<body><p> Teste 1</p> <p> Teste 2</p> <p> Teste 3</p> <div> Teste 1</div>
<script>
$(document).ready(function() {
/*Código das funções em jquery
Apos clicar em uma das tag <p> todas as tags são alteradas
para o fundo azul e letra branca */
$("p").click(function() {
$("p").attr("style", "background-color:blue; color:white");
});
});
</script>
</body></html>
AULA 04
TECNOLOGIAS PARA INTERNET II
Prof. Ronaldo Candido
Exemplo03.html – Seletor pelo id
<html><head><title>Exemplo03 - jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script></head>
<body>
<p id="titulo">Teste 1</p> <p> Teste 2</p> <p> Teste 3</p>
<div> Teste 1</div>
<script>
$(document).ready(function() {
/*Código das funções em jquery
A tag com a identificação id="titulo" troca a
cor do fundo para azul e letra branca */
$("#titulo").attr("style","background-color:blue; color:white");
});
</script>
</body> </html>
01/03/2019
6
AULA 04
TECNOLOGIAS PARA INTERNET II
Prof. Ronaldo Candido
Exemplo04.html – Seletor pela class
<html><head><title>Exemplo04 - jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script></head>
<body>
<p id="titulo">Teste 1</p><p class="cor">Teste 2</p><p>Teste 3</p>
<div class="cor">Teste 1</div>
<script>
$(document).ready(function() {
/*Código das funções em jquery
A tag com a classe troca a cor do fundo para azul e
letra branca */
$(".cor").attr("style", "background-color:blue; color:white");
});
</script>
</body> </html>
AULA 04
TECNOLOGIAS PARA INTERNET II
Prof. Ronaldo Candido
Exemplo05.html – Seletor pela class $(this)
<html><head><title>Exemplo05 - jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script></head>
<body>
<p>Teste 1</p> <p> Teste 2</p> <p> Teste 3</p><div> Teste 1</div>
<script>
$(document).ready(function() {
/*Código das funções em jquery
Apos clicar em uma das tag <p>, somente a tag será alterada para
o fundo azul e letra branca */
$("p").click(function() {
$(this).attr("style", "background-color:blue; color:white");
});
});
</script> </body> </html>
01/03/2019
7
AULA 04
TECNOLOGIAS PARA INTERNET II
Prof. Ronaldo Candido
Mais exemplos de seletores
AULA 04
TECNOLOGIAS PARA INTERNET II
Prof. Ronaldo Candido
Seletores com CSS
• jQuery possui uma forma bem prática de pegar e setar
propriedades nos elementos.
• Propriedades CSS que incluem um hífen precisam ser
acessadas no estilo “camel-case” em JS :
$('h1').css('fontSize'); //obter o tamanho da fonte
$('h1').css('fontSize', '100px'); //alterar o tamanho
$('h1').css({ 'fontSize' : '100px', 'color' : 'red' });
https://pt.wikipedia.org/wiki/CamelCase
01/03/2019
8
AULA 04
TECNOLOGIAS PARA INTERNET II
Prof. Ronaldo Candido
Eventos no jQuery
• Os navegadores podem captar eventos que são acionados
conforme as ações dos usuários em um site, como por
exemplo: clicar, foco em um elemento, etc... Eventos mais
comuns :
Eventos de
Mouse
Eventos de 
Teclado
Eventos de 
Formulário
Eventos de 
Documento
click keypress submit load
dblclick keydown change resize
mouseover keyup focus scroll
mouseleave blur unload
AULA 04
TECNOLOGIAS PARA INTERNET II
Prof. Ronaldo Candido
Eventos mais comuns
• $(document).ready()
 Método que permite executar uma função quando o
documento for completamente carregado.
• click()
 Associa um manipulador do evento de “click” a um
elemento HTML.
• dblclick()
 Associa o evento de “duplo clique”a um elemento HTML.
$("p").click(function(){
$(this).hide();
});
$("p").dblclick(function(){
$(this).hide();
});
01/03/2019
9
AULA 04
TECNOLOGIAS PARA INTERNET II
Prof. Ronaldo Candido
Eventos mais comuns
• focus()
 Evento do foco em um campo de um formulário.
• blur()
 Evento da perda de foco de um campo de um formulário.
$("input").focus(function(){
$(this).css("background-color","#cccccc");
});
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});
AULA 04
TECNOLOGIAS PARA INTERNET II
Prof. Ronaldo Candido
Exemplo06.html – Evento click
<html><head><title>Exemplo06 – Evento click</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script></head>
<body>
<p>Teste 1</p> <p> Teste 2</p> <p> Teste 3</p><div> Teste 1</div>
<script>
$(document).ready(function() {
/*Código das funções em jquery
Apos clicar em uma das tag <p>
somente a tag clicada irá mostrar a mensagem */
$("p").click(function() {
window.alert('Voce Clicou em um paragrafo'); });
});
</script>
</body> </html>
01/03/2019
10
AULA 04
TECNOLOGIAS PARA INTERNET II
Prof. Ronaldo Candido
Exemplo07.html – Evento mouseover
<html><head><title>Exemplo07 – Evento mouseover</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script></head>
<body>
<p>Teste 1</p> <p> Teste 2</p> <p> Teste 3</p><div> Teste 1</div>
<script>
$(document).ready(function() {
/*Código das funções em jquery
Apos posicionar em uma das tag <p>
irá mostrar a mensagem */
$("p").mouseover(function() {
window.alert('Voce passou o mouse em um paragrafo');
});
</script>
</body> </html>
AULA 04
TECNOLOGIAS PARA INTERNET II
Prof. Ronaldo Candido
Métodos no JQuery
• Assim como os eventos, JQuery possui vários métodos que
podem executar ações sobre os elementos. Ex.:
 val() - Pega o valor de uma tag input.
 attr() - Adiciona ou remove o valor de um atributo.
 addclass() - Adiciona uma classe css em um elemento.
• jQuery “sobrecarrega” seus métodos, então o método usado
para setar um valor geralmente tem o mesmo nome do
método usado para obter um valor.
$('h1').html('olá mundo'); //setter
$('h1').html(); //getter
01/03/2019
11
AULA 04
TECNOLOGIAS PARA INTERNET II
Prof. Ronaldo Candido
Exemplo08.html – Métodos
<html><head><title>Exemplo08 – Métodos</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script></head>
<body>
<p>Teste 1</p> <p> Teste 2</p> <p> Teste 3</p><div> Teste 1</div>
<script>
$(document).ready(function() {
$("p").mouseover(function() { //quando o mouse passar sobre parágrafos
$(this).attr("style", "background-color:blue; color:white");
});
$("p").mouseleave(function() { //quando o mouse deixar os parágrafos
$(this).attr("style", "background-color:white; color:black");
});
});
</script> </body> </html>
AULA 04
TECNOLOGIAS PARA INTERNET II
Prof. Ronaldo Candido
1. Verifique as afirmações a seguir :
I. JQuery é uma biblioteca escrita em JSON.
II. JQuery é uma biblioteca escrita em Javascript.
III. JQuery usa seletores CSS para selecionar elementos.
Estão corretas:
a) Somente I.
b) Somente II.
c) Somente III.
d) Somente I e III.
e) Somente II e III.
Exercícios de fixação e aprendizagem
01/03/2019
12
AULA 04
TECNOLOGIAS PARA INTERNET II
Prof. Ronaldo Candido
2. Qual é o caractere usado como seletor em JQuery ?
a) % b) ? c) $ d) # e) .
3. O que o comando $(“div”) seleciona dentro de um
documento HTML ?
a) Todos os elementos “div”.
b) O primeiro elemento “div”.
c) Todas as tags com classe “div”.
d) Todas as tags com id “div”.
e) O último elemento “div”.
4. JQuery é uma biblioteca escrita para atuar no cliente ou no
servidor ? Justifique sua resposta.
R:
Exercícios de fixação e aprendizagem
AULA 04
TECNOLOGIAS PARA INTERNET II
Prof. Ronaldo Candido
5. Qual é o código escrito com JQuery correto para alterar a cor
de fundo de todos os parágrafos de um documento HTML
para vermelho ?
a) $(“p”).css(“background-color”,”red”)
b) $(“p”).manipulate(“background-color”,”red”)
c) $(“p”).layout(“background-color”,”red”)
d) $(“p”).style(“background-color”,”red”)
e) $(“p”).css(“background-color:red”)
6. Indique o código para selecionar todos os elementos DIV que
possuem a classe ”module” :
R:
Exercícios de fixação e aprendizagem
01/03/2019
13
AULA 04
TECNOLOGIAS PARA INTERNET II
Prof. Ronaldo Candido
7. Criar o projeto Aula04_Exercicio01 baseado no site de
Produtos de aeromodelismo presente no livro didático da
disciplina, capítulo 2, páginas 44-59. Usar o NetBeans para
criar o projeto em HTML5, criando pastas separadas para :
• imagens
• css
• scripts
Exercício prático
AULA 04
TECNOLOGIAS PARA INTERNET II
Prof. Ronaldo Candido
1. SANTOS, F. G. Tecnologias para Internet II. Rio de Janeiro:
SESES, 2018 (Livro-texto, Capítulo 2).
2. DEITEL, H. M.; DEITEL, P. J. Ajax, Rich Internet Applications e
desenvolvimento Web para programadores. São Paulo:
Pearson, 2008.
3. Download da Biblioteca jQuery (Acesso em 25/02/19) :
https://jquery.com/
4. Sobre o jQuery (Acesso em 25/02/19) :
https://pt.wikipedia.org/wiki/JQuery
5. Tutorial sobre jQuery (Acesso em 25/02/19) :
https://www.w3schools.com/jquery/default.asp
Bibliografia Básica
01/03/2019
14
Fim da apresentação
Prof. Ronaldo Candido
posinf_ronaldo@yahoo.com.br
Dúvidas, sugestões ou análises ???
TECNOLOGIAS PARA
INTERNET II