LPII_Aula_7-JQuery.pdf

1. JavaScript e Ajax com jQuery Disciplina: Linguagem de Programação II Profa. Gabriela Mota

2. Agenda  Introdução ao jQuery  Revisão de JavaScript  Revisão de Document Object Model (DOM)  Preparando o Ambiente  Seletores jQuery  Manipulando CSS  Manipulando Conteúdo  Eventos  Animação  Funções jQuery  Ajax  Formulários

3. Introdução ao jQuery

4. JavaScript hoje 4 / 41

5. JavaScript hoje 5 / 41

6. 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

7. jQuery não vai resolver todos os seus problemas  Você ainda precisa de JavaScript  jQuery é pesado (comparado a JS puro)  Construa agora, melhore depois

8. Revisão de JavaScript

9. 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 ( ; )

10. 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)

11. 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 ( ; )

12. 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

13. 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”]

14. Operações numéricas 10 + 5;  15 10 / 2;  5 parseInt(“10 reais”);  10 var num = 10; num.toString();  “10”

15. 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)

16. Revisão de Document Object Model (DOM)

17. DOM <html> </head> <title>jQuery na Prática</title> </head> <body> <h1 id="titulo">Aula de jQuery</h1> <p class="autor">Gabriela Mota</p> <ul> <li>JS</li> <li>DOM</li> <li>jQuery</li> </ul> <p id="rodape">https://portal.ifba.edu.br</p> </body> </html>

18. DOM html head body title h1#titulo p.autor ul li li li jQuery na Prática Aula de jQuery Gabriela Mota JS DOM jQuery p#rodape https://portal. ifba.edu.br

19. Jquery - Preparando o Ambiente

20. http://jquery.com

21. Carregando jQuery  Referenciar o local onde foi baixado  <script type=“text/javascript” src=“jquery-3.6.4.min.js”></script>  Ou referenciar uma fonte online:  <script src=“https://code.jquery.com/jquery-3.6.4.min.js”></script>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>  Ou qualquer outro Content Delivery Network (CDN)

22. 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!)

23. jQuery $(“h1”); (Nome do elemento) $(“h1”).text(); -> mostra o texto, equivale a innerHTML DOM html body h1  Aula de jQuery p.autor  Gabriela Mota p#rodape  https://portal.ifba.edu.br Seletores jQuery

24. Seletores jQuery jQuery $(“p”); (Nome do elemento) DOM html body h1  Aula de jQuery p.autor  Gabriela Mota p#rodape  https://portal.ifba.edu.br

25. Seletores jQuery jQuery $(“p.autor”); (Elemento + . + Classe) DOM html body h1  Aula de jQuery p.autor  Gabriela Mota p#rodape  https://portal.ifba.edu.br

26. Seletores jQuery jQuery $(“.autor”); (Somente a classe) DOM html body h1  Aula de jQuery p.autor  Gabriela Mota p#rodape  https://portal.ifba.edu.br

27. Seletores jQuery jQuery $(“p#rodape”); (Elemento + # + Id) DOM html body h1  Aula de jQuery p.autor  Gabriela Mota p#rodape  https://portal.ifba.edu.br

28. Resultado da Seleção jQuery $(“p”); DOM p.autor  Gabriela Mota p#rodape  https://portal.ifba.edu.br JavaScript [“<p class=‘autor’> Gabriela Mota </p>”, “<p id=‘rodape’> https://portal.ifba.edu.br </p>”]

29. Resultado da Seleção jQuery $(“h1, p#rodape”); $(“h1”, “p#rodape”); DOM h1  jQuery na Prática p#rodape  https://portal.ifba.edu.br JavaScript [“<h1>Gabriela Mota</h1>”, “<p id=‘rodape’> https://portal.ifba.edu.br </p>”] Errado!

30. Espaço em branco $(“p#rodape”); Elemento p com id rodape $(“p #rodape”); Elemento com id rodape dentro do elemento p

31. 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”);

32. 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”

33. 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

34. 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)

35. Manipulando CSS

36. 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

37. 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”});

38. Mas... vamos com calma HTML Conteúdo CSS Apresentação JavaScript Interação

39. Interface CSS  DOM e CSS comunicam via IDs e Classes  Use .css() com cautela  Manipule IDs e Classes  Mais seguro e manutenível

40. 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

41. Visibilidade $(“p.autor”).hide(); [<p class=“autor” style=“display: none”> Gabriela Mota</p>] $(“p.autor”).show(); [<p class=“autor” style=“display: normal”>Gabriela Mota</p>] $(“p.autor”).toggle(); Alterna entre hide e show

42. Manipulando Conteúdo

43. 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”>15/05</span></p> <p>Horário: <span class=“hora”> 20:20 às 21:15</span></p> </body> </html>

44. Acessando text e html • html  Recupera todo conteúdo dentro do elemento selecionado, inclusive as tags HTML $(“p:first”).html(); [“Data: <span class=‘data’>15/15</span>”] • text  Recupera todo texto dentro do elemento selecionado, ignorando as tags HTML $(“p:first”).text(); [“Data: 15/05”]

45. Definindo text $(“span.data”).text(“15/05”); <span class=“data”> 15/05 </span> Cronograma • Fundamentos JavaScript • DOM • jQuery Data: 21/01 à 25/01 Horário: 19:00 às 22:40 Cronograma • Fundamentos JavaScript • DOM • jQuery Data: 15/05 Horário: 20:20 às 21:15

46. Definindo text $(“span.data”).text(“<u>15/05</u>”); <span class=“data”><u>15/05</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: <u>15/05</u> Horário: 20:20 às 21:15

47. Definindo html $(“span.data”).html(“<u>15/05</u>”); <span class=“data”><u>15/05</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: 15/05 Horário: 20:20 às 21:15

48. 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

49. 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

50. 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

51. 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

52. 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

53. Eventos

54. 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> Possui handler? Possui handler? Possui handler? Possui handler?

55. 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”> 20:20 às 21:15</span></p> </body> </html>

56. 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”>15/05</span></p> <p>Horário: <span class=“hora”>20:20 às 21:15</span></p> </body> </html>  DOM está pronto!

57. 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

58. 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

59. Eventos de Mouse (continuação) $(“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

60. Click function esconder() { $(“p”).hide(); } $(“p”).click(esconder); Normalmente utilizamos funções anônimas $(“p”).click(function () { $(“p”).hide(); });

61. 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

62. 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

63. 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

64. Eventos de Teclado $(“input”).keydown(); //Dispara ao apertar a tecla $(“input”).keypress(); //Dispara ao pressionar a tecla $(“input”).keyup(); //Dispara ao soltar a tecla

65. 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

66. 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

67. Animação

68. 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

69. slideUp, slideDown e slideToggle $(“p”).slideUp(“slow”); $(“p”).slideUp(1000, function () { alert(“Concluiu a animação!”); }); $(“p”).slideDown(“fast”); $(“p”).slideToggle();

70. 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();

71. Funções jQuery

72. Adicionando funções customizadas $.fn.vazio = function () { var value = $(this).val(); if (value == “”) { return true; } else { return false; } }; $(“input”).vazio();

73. Ajax

74. XMLHttpRequest  Requisições assíncronas de forma transparente $.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 } });

75. 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 });

76. 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: “gbrlamota”, senha: “123456” }); $.post(“login.php”, $(“form”).serialize(), function () { // Executa callback });

77. 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: “ba” }, function (data) { $(“select”).html(data); });

78. Formulários

79. 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=Gabriela&email=gbrlamota@gmail.com&cpf=123456789012 Gabriela gbrlamota@gmail.com 123456789012 Nome: Email: Cpf:

80. Serializando em array $(“#cadastro”).serializeArray(); [ { name = “nome”, value = “gabriela” }, { name = “email”, value = “gbrlamota@gmail.com” }, { name = “cpf”, value = “123456789012” } ]

81. Atividade com JQuery  Faça um site no estilo SPA (Single Page Application) sobre um assunto que você goste  O site deve ter a seguinte estrutura HTML  h1 -> Título da página  section  h2 -> título da section  p -> conteúdo da section  A página deverá ter o seguinte comportamento:  Inicialmente apenas a primeira section está totalmente visível, as demais terão apenas o título visível  Ao clicar sob o título de uma section, seu conteúdo deve ser exibido e o conteúdo da section que estava ativa se torna invisível.  Use CSS para estilizar sua página 81 / 41

82. Atividade com Jquery - exemplo <!DOCTYPE html> <html lang="en"> <head> <title>Document</title> </head> <body> <h1>Choosing an Apple</h1> <section> <h2>Introduction</h2> <p>This document provides a guide to help with the important task of choosing the correct Apple.</p> </section> <section> <h2>Criteria</h2> <p>There are many different criteria to be considered when choosing an Apple — size, color, firmness, sweetness, tartness... </p> </section> </body> </html> 82 / 41

83. Referências  W3Schools jQuery Tutorial  https://www.w3schools.com/jquery/jquery_get_started.asp  JQuery Learning Center  https://learn.jquery.com/  jQuery API  https://api.jquery.com/

LPII_Aula_7-JQuery.pdf

LPII_Aula_7-JQuery.pdf

Recommandé

Contenu connexe

Similaire à LPII_Aula_7-JQuery.pdf

Similaire à LPII_Aula_7-JQuery.pdf(20)

Dernier

Dernier(6)

LPII_Aula_7-JQuery.pdf