slides

Programação para Internet II

•
ESTÁCIO

Gustavo Vieira
27/09/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
*
*
jQuery na Prática
vitorfs.com/jquery-na-pratica
*
*
Vitor Freitas
vitorfs@gmail.com
github.com/vitorfs
*
*
Agenda
Introdução ao JavaScript e jQuery
Fundamentos de JavaScript
Document Object Model (DOM)
Preparando o Ambiente
Seletores jQuery
Manipulando CSS
Manipulando Conteúdo
Eventos
Animação
Funções jQuery
Ajax
Formulários
*
*
Introdução ao JavaScript e jQuery
*
*
Em 1995 nasce o JavaScript
VBSCRIPT
MOCHA
LIVESCRIPT
JAVASCRIPT
*
*
JavaScript hoje
*
*
Por que usar jQuery?
jQuery é uma camada de abstração
Use jQuery porque...
... é fácil
... é produtivo
... browsers são incompatíveis
... seus usuários utilizam browsers antigos
*
*
jQuery não é nenhuma panacéia
Você ainda precisa de JavaScript
jQuery é pesado
Construa agora, melhore depois
*
*
Fundamentos de JavaScript
*
*
Criando variáveis
Dê nome aos dados
 var titulo = “jQuery na Prática”;
Palavra reservada: var
Nomes de variáveis normalmente em snake_case
Linha termina em ponto e vírgula ( ; )
*
*
Variáveis e dados
Tipagem fraca, dinâmica e implícita
var numero = 100;
(int)
var titulo = “jQuery na Prática”;
(string)
var quantidade = 5.7;
(float)
var erro = true;
(boolean)
*
*
Funções
function soma (num1, num2) {
 var resultado;
 resultado = num1 + num2;
 return resultado;
}
Palavra reservada: function
Nomes de funções normalmente em camelCase
Linha termina em ponto e vírgula ( ; )
*
*
Funções globais do JavaScript
alert(“Olá, mundo!”);
void
var resposta = confirm(“Confirmar exclusão do registro?”);
Retorna boolean
var idade = prompt(“Informe sua idade:”);
Retorna string
*
*
Funções de string
var titulo = “jQuery na Prática”;
titulo.toLowerCase();  “jquery na prática”
titulo.toUpperCase();  “JQUERY NA PRÁTICA”
titulo.charAt(2);  “u”
titulo.replace(“a”, “4”);  “jQuery n4 Prátic4”
titulo.split(“ ”);  [“jQuery”, “na”, “Prática”]
*
*
Operações numéricas
10 + 5;  15
10 / 2;  5
parseInt(“10 reais”);  10
var num = 10;
num.toString();  “10”
*
*
Arrays
var frutas = [“maçã”, “uva”, “abacaxi”];
(Inicializa um array na variável frutas)
frutas[2];  “abacaxi”
(Retorna a posição 2)
frutas.length;  3
(Retorna o tamanho da lista)
frutas.reverse();  [“abacaxi”, “uva”, “maçã”]
(Retorna a lista em ordem inversa)
*
*
Document Object Model (DOM)
*
*
DOM
<html>
 <head>
 <title>jQuery na Prática</title>
 </head>
 <body>
 <h1 id=“titulo”>Curso de jQuery</h1>
 <p class=“autor”>Vitor Freitas</p>
 <ul>
 <li>JS</li>
 <li>DOM</li>
 <li>jQuery</li>
 </ul>
 </body>
</html>
*
*
DOM
html
head
body
title
h1#titulo
p.autor
ul
li
li
li
jQuery na Prática
Curso de jQuery
Vitor Freitas
JS
DOM
jQuery
*
*
Preparando o Ambiente
*
*
http://jquery.com
*
*
Carregando jQuery
<script type=“text/javascript” src=“jquery-1.9.0.min.js”></script>
*
*
Verificando se o jQuery está carregado
<script>
 console.log(jQuery);
 //ou
 alert(jQuery);
</script>
jQuery;  ReferenceError: jQuery is not defined
(jQuery não está carregado)
jQuery;  function (e,t){return new v.fn.init(e,t,n)}
(Pronto para começar!)
$;  function (e,t){return new v.fn.init(e,t,n)}
(Também jQuery!)
*
*
Seletores jQuery
jQuery
$(“h1”);
(Nome do elemento)
DOM
html
 body
 h1  jQuery na Prática
 p.autor  Vitor Freitas
 p#rodape  vitorfs.com/jquery-na-pratica
*
*
Seletores jQuery
jQuery
$(“p”);
(Nome do elemento)
DOM
html
 body
 h1  jQuery na Prática
 p.autor  Vitor Freitas
 p#rodape  vitorfs.com/jquery-na-pratica
*
*
Seletores jQuery
jQuery
$(“p.autor”);
(Elemento + . + Classe)
DOM
html
 body
 h1  jQuery na Prática
 p.autor  Vitor Freitas
 p#rodape  vitorfs.com/jquery-na-pratica
*
*
Seletores jQuery
jQuery
$(“.autor”);
(Somente a classe)
DOM
html
 body
 h1  jQuery na Prática
 p.autor  Vitor Freitas
 p#rodape  vitorfs.com/jquery-na-pratica
*
*
Seletores jQuery
jQuery
$(“p#rodape”);
(Elemento + # + Id)
DOM
html
 body
 h1  jQuery na Prática
 p.autor  Vitor Freitas
 p#rodape  vitorfs.com/jquery-na-pratica
*
*
Resultado da Seleção
jQuery
$(“p”);
DOM
p.autor  Vitor Freitas
p#rodape  vitorfs.com/jquery-na-pratica
JavaScript
[“<p class=‘autor’>Vitor Freitas</p>”,
 “<p id=‘rodape’>vitorfs.com/jquery-na-pratica</p>”]
*
*
Resultado da Seleção
jQuery
$(“h1, p#rodape”); $(“h1”, “p#rodape”);
DOM
h1  jQuery na Prática
p#rodape  vitorfs.com/jquery-na-pratica
JavaScript
[“<h1>Vitor Freitas</h1>”,
 “<p id=‘rodape’>vitorfs.com/jquery-na-pratica</p>”]
Errado!
*
*
Espaço em branco
$(“p#rodape”);
Elemento p com id rodape
$(“p #rodape”);
Elemento com id rodape dentro do elemento p
*
*
Selecionando atributos
$(“input”);
// Todos inputs do DOM
$(“input[type=‘text’]”);
// Todos inputs do tipo text
$(“input[type=‘text’][name=‘email’]”);
// Selecione por mais de um atributo
$(“p[id=‘rodape’]”); ou $(“p#rodape”);
$(“p[class=‘autor’]”); ou $(“p.autor”);
*
*
Seletores css também são válidos
<i class=“icon-ok”></i>
<i class=“icon-cancelar”></i>
$(“i[class^=‘icon-’]”);
// Todos elementos i que a classe começa com “icon-”
$(“i[class$=‘ok’]”);
// Todos elementos i que a classe termina com “ok”
$(“i[class*=‘icon’]”);
// Todos elementos i que a classe possua “icon”
*
*
Filtros de seleção
Filtros baseados no index do array de retorno da seleção
$(“p:first”); // primeiro p da seleção
$(“p:last”); // último p da seleção
$(“li:eq(2)”); // elemento li com index 2
$(“tr:even”); // todos tr com index par
$(“tr:odd”); // todos tr com index ímpar
*
*
Filtros de hierarquia
Filtros baseados no hierarquia do DOM
$(“body div”); // todas as divs dentro do body
$(“body > div”); // todas as divs que estão diretamente abaixo do body
$(“label + input”); // label com input adjacente (deve possuir o mesmo elemento pai)
*
*
Manipulando CSS
*
*
Manipulando CSS
<p>Lorem ipsum dolor sit amet</p>
$(”p”).css(”font-size”); // retorna o valor do font-size do elemento p
$(”p”).css(”font-size”, ”12px”); // define o font-size do elemento p para 12px
*
*
Definindo múltiplos atributos
Utilizando métodos encadeados
$(“p”).css(“font-size”, “24px”)
 .css(“font-weight”, “bold”)
 .css(“line-height”, “32px”);
Ou um map
$(“p”).css({“font-size”: “24px”,
 “font-weight”: “bold”,
 “line-height”: “32px”});
*
*
Mas... vamos com calma
HTML
Conteúdo
CSS
Apresentação
JavaScript
Interação
*
*
Interface CSS
DOM e CSS comunicam via IDs e Classes
Use .css() com cautela
Manipule IDs e Classes
Mais seguro e manutenível
*
*
Manipulando classes
$(“p”).hasClass(“autor”); // retorna true ou false
$(“p”).addClass(“bigger”);
$(“p”).removeClass(“bigger”); // remove a classe passada via parâmetro
$(“p”).removeClass(); // remove todas as classes
$(“p”).toggleClass(“bigger”); // se o elemento tiver a classe bigger, o jQuery remove. Se não tiver, adiciona
*
*
Visibilidade
$(“p.autor”).hide();
[<p class=“autor” style=“display: none”>Vitor Freitas</p>]
$(“p.autor”).show();
[<p class=“autor” style=“display: normal”>Vitor Freitas</p>]
$(“p.autor”).toggle();
Alterna entre hide e show
*
*
Manipulando Conteúdo
*
*
Template
<html>
 <head>
 <title>jQuery na Prática</title>
 </head>
 <body>
 <h2>Cronograma</h2>
 <ul><li>Fundamentos <span class=“js”>JavaScript</span></li>
 <li>DOM</li>
 <li>jQuery</li>
 </ul>
 <p>Data: <span class=“data”>21/01 à 25/01</span></p>
 <p>Horário: <span class=“hora”>19:00 às 22:40</span></p>
 </body>
</html>
*
*
Acessando text e html
html  Recupera todo conteúdo dentro do elemento selecionado, inclusive as tags HTML
$(“p:first”).html();
[“Data: <span class=‘data’>21/01 à 25/01</span>”]
text  Recupera todo texto dentro do elemento selecionado, ignorando as tags HTML
$(“p:first”).text();
[“Data: 21/01 à 25/01”]
*
*
Definindo text
$(“span.data”).text(“28/01 à 01/02”);
<span class=“data”>21/01 à 25/01</span>
<span class=“data”>28/01 à 01/02</span>
Cronograma
 Fundamentos JavaScript
 DOM
 jQuery
Data: 21/01 à 25/01
Horário: 19:00 às 22:40
Cronograma
 Fundamentos JavaScript
 DOM
 jQuery
Data: 28/01 à 01/02
Horário: 19:00 às 22:40
*
*
Definindo text
$(“span.data”).text(“<u>28/01 à 01/02</u>”);
<span class=“data”>21/01 à 25/01</span>
<span class=“data”>&lt;u&gt;28/01 à 01/02&lt;/u&gt;</span>
Cronograma
 Fundamentos JavaScript
 DOM
 jQuery
Data: 21/01 à 25/01
Horário: 19:00 às 22:40
Cronograma
 Fundamentos JavaScript
 DOM
 jQuery
Data: <u>28/01 à 01/02</u>
Horário: 19:00 às 22:40
*
*
Definindo html
$(“span.data”).html(“<u>28/01 à 01/02</u>”);
<span class=“data”>21/01 à 25/01</span>
<span class=“data”><u>28/01 à 01/02</u></span>
Cronograma
 Fundamentos JavaScript
 DOM
 jQuery
Data: 21/01 à 25/01
Horário: 19:00 às 22:40
Cronograma
 Fundamentos JavaScript
 DOM
 jQuery
Data: 28/01 à 01/02
Horário: 19:00 às 22:40
*
*
Inserindo html no DOM
$(“ul”).append(“<li>Seletores jQuery</li>”);
Insere elemento dentro do final da seleção
$(“ul”).prepend(“<li>Seletores jQuery</li>”);
Insere elemento dentro do inicio da seleção
$(“ul”).before(“<h3>Conteúdo</h3>”);
Insere elemento antes da seleção
$(“ul”).after(“<h3>Data e Hora:</h3>”);
Insere elemento após a seleção
*
*
Append
$(“ul”).append(“<li>Seletores jQuery</li>”);
Cronograma
 Fundamentos JavaScript
 DOM
 jQuery
 Seletores jQuery
Data: 21/01 à 25/01
Horário: 19:00 às 22:40
*
*
Prepend
$(“ul”).prepend(“<li>Seletores jQuery</li>”);
Cronograma
 Seletores jQuery
 Fundamentos JavaScript
 DOM
 jQuery
Data: 21/01 à 25/01
Horário: 19:00 às 22:40
*
*
Before
$(“ul”).before(“<h3>Conteúdo</h3>”);
Cronograma
Conteúdo
 Fundamentos JavaScript
 DOM
 jQuery
Data: 21/01 à 25/01
Horário: 19:00 às 22:40
*
*
After
$(“ul”).after(“<h3>Data e Hora:</h3>”);
Cronograma
 Fundamentos JavaScript
 DOM
 jQuery
Data e Hora:
Data: 21/01 à 25/01
Horário: 19:00 às 22:40
*
*
Eventos
*
*
Como funciona
<html>
 <head>
 <title>jQuery na Prática</title>
 </head>
 <body>
 <h2>Cronograma</h2>
 <ul>
 <li>Fundamentos <span class=“js”>JavaScript</span></li>
 <li>DOM</li>
 <li>jQuery</li>
 </ul>
 <p>Data: <span class=“data”>21/01 à 25/01</span></p>
 <p>Horário: <span class=“hora”>19:00 às 22:40</span></p>
 </body>
</html>
Click!
Possui handler?
Possui handler?
Possui handler?
Possui handler?
*
*
Timing
<html>
 <head>
 <title>jQuery na Prática</title>
 <script src=“jquery.js”></script>
 <script>
 $(“p”).hide();
 </script> 
 </head>
 <body>
 <h2>Cronograma</h2>
 <ul>
 <li>Fundamentos <span class=“js”>JavaScript</span></li>
 <li>DOM</li>
 <li>jQuery</li>
 </ul>
 <p>Data: <span class=“data”>21/01 à 25/01</span></p>
 <p>Horário: <span class=“hora”>19:00 às 22:40</span></p>
 </body>
</html>
*
*
Timing
<html>
 <head>
 <title>jQuery na Prática</title>
 <script src=“jquery.js”></script>
 <script>
 $(“p”).hide();
 </script>  Nenhum parágrafo no documento!
 </head>
 <body>
 <h2>Cronograma</h2>
 <ul>
 <li>Fundamentos <span class=“js”>JavaScript</span></li>
 <li>DOM</li>
 <li>jQuery</li>
 </ul>
 <p>Data: <span class=“data”>21/01 à 25/01</span></p>
 <p>Horário: <span class=“hora”>19:00 às 22:40</span></p>
 </body>
</html>  DOM está pronto!
*
*
Document Ready
<html>
 <head>
 <title>jQuery na Prática</title>
 <script src=“jquery.js”></script>
 <script>
 $(document).ready(function () {
 $(“p”).hide();
 });
 </script> 
 </head>
 <body>
 <h2>Cronograma</h2>
 <ul>
 <li>Fundamentos <span class=“js”>JavaScript</span></li>
 <li>DOM</li>
 <li>jQuery</li>
 </ul>
 <p>Data: <span class=“data”>21/01 à 25/01</span></p>
 <p>Horário: <span class=“hora”>19:00 às 22:40</span></p>
 </body>
</html>
Documento está pronto!
Executa o handler
*
*
Eventos de Mouse
$(“p”).click();
//Dispara no evento de click do mouse
$(“p”).dblclick();
//Dispara com click duplo
$(“p”).hover();
//Dispara quando mouse entra e/ou sai do elemento
$(“p”).mousedown();
//Dispara quando o botão do mouse é pressionado
$(“p”).mouseenter();
//Dispara quando o mouse entra no elemento
$(“p”).mouseleave();
//Dispara quando o mouse sai do elemento
$(“p”).mousemove();
//Dispara quando o mouse se move
$(“p”).mouseup();
//Dispara quando ao término do click do mouse
*
*
Click
function esconder() {
 $(“p”).hide();
}
$(“p”).click(esconder);
Normalmente utilizamos funções anônimas
$(“p”).click(function () {
 $(“p”).hide();
});
*
*
Hover
.destacar {
 background: yellow;
}
$(“p”).hover(function () {
 $(this).addClass(“destacar”);
});
Data: 21/01 à 25/05
Horário: 19:00 às 22:40
Data: 21/01 à 25/05
*
*
Hover
.destacar {
 background: yellow;
}
$(“p”).hover(
 function () { $(this).addClass(“destacar”);},
 function () { $(this).removeClass(“destacar”);}
);
Data: 21/01 à 25/05
Horário: 19:00 às 22:40
Data: 21/01 à 25/05
*
*
Hover
.destacar {
 background: yellow;
}
$(“p”).hover(function () {
 $(this).toggleClass(“destacar”);
});
Data: 21/01 à 25/05
Horário: 19:00 às 22:40
Data: 21/01 à 25/05
*
*
Eventos de Teclado
$(“input”).keydown();
//Dispara ao apertar a tecla
$(“input”).keypress();
//Dispara ao pressionar a tecla
$(“input”).keyup();
//Dispara ao soltar a tecla
*
*
Eventos de Formulário
$(“input”).blur();
//Dispara ao input perder o foco
$(“input”).change();
//Dispara quando um valor é alterado
$(“input”).focus();
//Dispara quando um input recebe foco
$(“input”).select();
//Dispara ao selecionar um texto, option, radio
$(“input”).submit();
//Dispara submeter o formulário
*
*
Objeto event
$(“body”).keypress(function (event) {
});
event.which; // código númerico da tecla pressionada
event.preventDefault(); // evita a ação padrão do browser
event.stopPropagation(); // evita propagação do evento no DOM
*
*
Animação
*
*
Animações slide
.slideUp([duração][,callback]);
duração
Tempo da animação em milisegundos
Default 400 milisegundos
Aceita parâmetros “slow” (600ms) e “fast” (200ms)
callback
Função que será executada após o término da animação
*
*
slideUp, slideDown e slideToggle
$(“p”).slideUp(“slow”);
$(“p”).slideUp(1000, function () {
 alert(“Concluiu a animação!”);
});
$(“p”).slideDown(“fast”);
$(“p”).slideToggle();
*
*
Animações fade
Utiliza os mesmos parâmetros do slide
$(“p”).fadeIn(“slow”);
$(“p”).fadeIn(1000, function () {
 alert(“Concluiu a animação!”);
});
$(“p”).fadeOut(“fast”);
$(“p”).fadeToggle();
*
*
Funções jQuery
*
*
Adicionando funções customizadas
$.fn.vazio = function () {
 var value = $(this).val();
 if (value == “”) {
 return true;
 }
 else {
 return false;
 }
};
$(“input”).vazio();
*
*
Ajax
*
*
XMLHttpRequest
Requisições assíncronas portrás dos panos
$.ajax({
 url: ‘usuarios.php’,
 data: { id: “10”, acao: “editar” },
 cache: false,
 type: “POST”,
 beforeSend: function () {
 // execução antes de realizar requisição
 },
 success: function (data) {
 // execução em caso de sucesso
 },
 error: function () {
 // execução em caso de erro
 }
 complete: function () {
 // execução ao terminar requisição
 }
});
*
*
load
Permite especificar um elemento para receber a resposta e uma função de callback
$('#resultado').load(‘usuarios.php‘);
// A resposta da requisição à página usuarios.php é inserida dentro do elemento #resultado
$('#resultado').load(‘usuarios.php‘, function () {
 // Executa após terminar a requisição
});
$('#resultado').load(‘usuarios.php‘, { id: 10 } function () {
 // Executa após terminar a requisição
});
*
*
post
$.post(url [,data] [,success(data, textStatus, jqXHR)] [,dataType])
O método post do jQuery corresponde à seguinte implementação:
$.ajax({
 type: "POST",
 url: url,
 data: data,
 success: success,
 dataType: dataType
});
$.post(“login.php”, { usuario: “vitorfs”, senha: “123456” });
$.post(“login.php”, $(“form”).serialize(), function () {
 // Executa callback
});
*
*
get
$.get(url [,data] [,success(data, textStatus, jqXHR)] [,dataType])
O método get do jQuery corresponde à seguinte implementação:
$.ajax({
 url: url,
 data: data,
 success: success,
 dataType: dataType
});
$.get(“cidades.php”, { uf: “mg” }, function (data) { 
 $(“select”).html(data);
});
*
*
Formulários
*
*
Serializando formulários
<form method=“post” action=“cadastro.php” id=“cadastro”>
 Nome: <input type=“text” name=“nome” id=“nome”>
 Email: <input type=“text” name=“email” id=“email”>
 Cpf: <input type=“text” name=“cpf” id=“cpf”>
 <button type=“submit”>Enviar</button>
</form>
$(“#cadastro”).serialize();
Retorna: nome=Vitor&email=vitorfs@gmail.com&cpf=123456789012
Vitor
vitorfs@gmail.com
123456789012
Nome:
Email:
Cpf:
*
*
Serializando em array
$(“#cadastro”).serializeArray();
[
 {
 name = “nome”,
 value = “vitor”
 },
 {
 name = “email”,
 value = “vitorfs@gmail.com”
 },
 {
 name = “cpf”,
 value = “123456789012”
 }
]