A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

vitorfs.com/jquery-na-pratica

Apresentações semelhantes


Apresentação em tema: "vitorfs.com/jquery-na-pratica"— Transcrição da apresentação:

1 vitorfs.com/jquery-na-pratica
jQuery na Prática vitorfs.com/jquery-na-pratica

2 vitorfs@gmail.com github.com/vitorfs
Vitor Freitas github.com/vitorfs

3 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

4 Introdução ao JavaScript e jQuery

5 Em 1995 nasce o JavaScript VBSCRIPT MOCHA MOCHA LIVESCRIPT LIVESCRIPT

6 JavaScript hoje

7 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

8 jQuery não é nenhuma panacéia
Você ainda precisa de JavaScript jQuery é pesado Construa agora, melhore depois

9 Fundamentos de JavaScript

10 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 ( ; )

11 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)

12 Funções Palavra reservada: function
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 ( ; )

13 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

14 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”]

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

16 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)

17 Document Object Model (DOM)

18 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>

19 DOM html head body title h1#titulo p.autor ul li li li
jQuery na Prática Curso de jQuery Vitor Freitas li li li JS DOM jQuery

20 Preparando o Ambiente

21

22 Carregando jQuery <script type=“text/javascript” src=“jquery min.js”></script> ", "description": "Carregando jQuery ", "width": "800" }

23 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!) 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!)", "width": "800" }

24 Seletores jQuery jQuery DOM html body h1  jQuery na Prática
(Nome do elemento) DOM html body h  jQuery na Prática p.autor  Vitor Freitas p#rodape  vitorfs.com/jquery-na-pratica

25 Seletores jQuery jQuery DOM html body h1  jQuery na Prática
(Nome do elemento) DOM html body h  jQuery na Prática p.autor  Vitor Freitas p#rodape  vitorfs.com/jquery-na-pratica

26 Seletores jQuery jQuery DOM html body h1  jQuery na Prática
$(“p.autor”); (Elemento Classe) DOM html body h  jQuery na Prática p.autor  Vitor Freitas p#rodape  vitorfs.com/jquery-na-pratica

27 Seletores jQuery jQuery DOM html body h1  jQuery na Prática
$(“.autor”); (Somente a classe) DOM html body h  jQuery na Prática p.autor  Vitor Freitas p#rodape  vitorfs.com/jquery-na-pratica

28 Seletores jQuery jQuery DOM html body h1  jQuery na Prática
$(“p#rodape”); (Elemento + # + Id) DOM html body h  jQuery na Prática p.autor  Vitor Freitas p#rodape  vitorfs.com/jquery-na-pratica

29 Resultado da Seleção jQuery DOM JavaScript 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>”]

30 Resultado da Seleção jQuery DOM JavaScript h1  jQuery na Prática
$(“h1, p#rodape”); $(“h1”, “p#rodape”); DOM h  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!

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

32 Selecionando atributos
$(“input”); // Todos inputs do DOM $(“input[type=‘text’]”); // Todos inputs do tipo text $(“input[type=‘text’][name=‘ ’]”); // Selecione por mais de um atributo $(“p[id=‘rodape’]”); ou $(“p#rodape”); $(“p[class=‘autor’]”); ou $(“p.autor”);

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

34 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

35 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)

36 Manipulando CSS

37 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

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

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

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

41 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

42 Visibilidade $(“p.autor”).hide(); $(“p.autor”).show();
[<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

43 Manipulando Conteúdo

44 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>

45 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”]

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

47 Definindo text Cronograma Cronograma
$(“span.data”).text(“<u>28/01 à 01/02</u>”); <span class=“data”><u>28/01 à 01/02</u></span> <span class=“data”>21/01 à 25/01</span> Cronograma Fundamentos JavaScript DOM jQuery Data: <u>28/01 à 01/02</u> Horário: 19:00 às 22:40 Cronograma Fundamentos JavaScript DOM jQuery Data: 21/01 à 25/01 Horário: 19:00 às 22:40

48 Definindo html Cronograma Cronograma
$(“span.data”).html(“<u>28/01 à 01/02</u>”); <span class=“data”><u>28/01 à 01/02</u></span> <span class=“data”>21/01 à 25/01</span> Cronograma Fundamentos JavaScript DOM jQuery Data: 28/01 à 01/02 Horário: 19:00 às 22:40 Cronograma Fundamentos JavaScript DOM jQuery Data: 21/01 à 25/01 Horário: 19:00 às 22:40

49 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

50 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

51 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

52 Before Cronograma $(“ul”).before(“<h3>Conteúdo</h3>”);
Fundamentos JavaScript DOM jQuery Data: 21/01 à 25/01 Horário: 19:00 às 22:40

53 After Cronograma $(“ul”).after(“<h3>Data e Hora:</h3>”);
Fundamentos JavaScript DOM jQuery Data e Hora: Data: 21/01 à 25/01 Horário: 19:00 às 22:40

54 Eventos

55 Como funciona Click! Possui handler? Possui handler? Possui handler?
<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? Click!

56 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>

Cronograma

  • Fundamentos JavaScript
  • DOM
  • jQuery

Data: 21/01 à 25/01

Horário: 19:00 às 22:40

", "width": "800" }

57 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!  Nenhum parágrafo no documento!

Cronograma

  • Fundamentos JavaScript
  • DOM
  • jQuery

Data: 21/01 à 25/01

Horário: 19:00 às 22:40

 DOM está pronto!", "width": "800" }

58 Document Ready Executa o handler Documento está pronto!
<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> Executa o handler Documento está pronto!

Cronograma

  • Fundamentos JavaScript
  • DOM
  • jQuery

Data: 21/01 à 25/01

Horário: 19:00 às 22:40

Executa o handler. Documento está pronto!", "width": "800" }

59 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

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

61 Hover Data: 21/01 à 25/05 Data: 21/01 à 25/05 Horário: 19:00 às 22:40
.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 Data: 21/01 à 25/05 Data: 21/01 à 25/05 Horário: 19:00 às 22:40
.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 Data: 21/01 à 25/05 Data: 21/01 à 25/05 Horário: 19:00 às 22:40
.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 callback
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 por trá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 });

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 () {

76 post O método post do jQuery corresponde à seguinte implementação:
$.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

77 get O método get do jQuery corresponde à seguinte implementação:
$.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);

78 Formulários

79 Serializando formulários
<form method=“post” action=“cadastro.php” id=“cadastro”> Nome: <input type=“text” name=“nome” id=“nome”> <input type=“text” name=“ ” id=“ ”> Cpf: <input type=“text” name=“cpf” id=“cpf”> <button type=“submit”>Enviar</button> </form> $(“#cadastro”).serialize(); Retorna: Nome: Vitor Cpf:

80 Serializando em array $(“#cadastro”).serializeArray(); [ {
name = “nome”, value = “vitor” }, name = “ ”, value = name = “cpf”, value = “ ” } ]


Carregar ppt "vitorfs.com/jquery-na-pratica"

Apresentações semelhantes


Anúncios Google