Curso de Desenvolvimento Web - Módulo 03 - JavaScript

508 visualizações

Publicada em

Curso desenvolvimento de Desenvolvimento Web, incluindo as linguagens HTML, CSS e Javascript. O conteúdo é dividido em 03 Módulos.

Publicada em: Internet
0 comentários
3 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
508
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
81
Comentários
0
Gostaram
3
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Curso de Desenvolvimento Web - Módulo 03 - JavaScript

  1. 1. S Desenvolvimento Web Com HTML, CSS e JavaScript Prof. Rodrigo Santa Maria rodrigo@digitallymade.com.br
  2. 2. Sobre o Prof. Rodrigo Santa Maria S  Bacharel em Ciência da Computação (PUC Minas); S  Especialista com MBA Internacional em Gerenciamento de Projetos (FGV/Ohio University, USA); S  Professor Universitário (UNIFEOB); S  Micro-empresário da área de TI; S  Acesse: www.digitallymade.com.br S  E-mail: rodrigo@digitallymade.com.br
  3. 3. Sobre o Prof. Rodrigo Santa Maria S  Analista/Desenvolvedor de aplicações desde 2000; S  Ex-IBMer (de 2009 a 2013); S  Diretor-Presidente/Co-fundador do Instituto Internacional de Ideias; S  Fundador do Google Developers Group São João da Boa Vista;
  4. 4. Visão Geral S  Ao final deste curso, você será capaz de: S  Criar páginas HTML5; S  Utilizar folhas de estilo CSS3; S  Utilizar JavaScript e o framework jQuery; S  Criar páginas com funcionalidades Ajax; S  Utilizar frameworks como o Bootstrap;
  5. 5. Desenvolvimento Web MÓDULO 03 S  Pauta: Ø  Introdução ao Javascript Ø  Funcionalidades Ø  Exemplos Ø  Frameworks Javascript Ø  Introdução ao jQuery Ø  Funcionalidades Ø  Exemplos
  6. 6. S Introdução ao Javascript
  7. 7. Muito obrigado! Prof. Rodrigo Santa Maria rodrigo@digitallymade.com.br facebook.com/rodrigobsm Contato
  8. 8. O que é JavaScript? S  É uma linguagem de programação S  Desenvolvida pela Netscape® S  Microsoft® tem o VBScript ⇒ não é tanto utilizado quanto o JavaScript S  JavaScript também roda no Microsoft Internet Explorer® S  O código é escrito dentro da página HTML (client-side) S  Roda no navegador do usuário (e não no servidor) S  Simples e Útil (para fazer coisas simples) Obs.: JavaScript NÃO É Java S  Java entra nas páginas HTML através de applets S  JavaScript é escrito dentro da página HTML
  9. 9. Para que serve“JavaScript”? S  Efeitos visuais S  Efeitos interativos S  Geração dinâmica de conteúdo (on-the-fly) S  Adequações para a resolução do monitor S  Padronização da apresentação S  Armazenamento de informações (cookies) Personalização do conteúdo S  Manipular objetos de interface S  Janelas, Barra de status, Formulários etc. S  Operações matemáticas e textuais S  Validação de dados de um formulário S  Animações S  DHTML
  10. 10. Exemplos de JavaScript: “Maçã” <IMG src="maca1.gif" name="maca" onMouseOver="maca.src='maca2.gif'" onMouseDown="maca.src='maca3.gif'" onMouseUp="maca.src='maca4.gif'" onMouseOut="maca.src='maca5.gif'"> maca1.gif maca2.gif maca3.gif maca4.gif maca5.gif
  11. 11. Exemplos de JavaScript: “Olá” <HTML> <HEAD> <TITLE>Olá</TITLE> </HEAD> <BODY> <P>Script que escreve “Olá”:</P> <SCRIPT> <!-- document.write("<B>Olá!</B>"); //--> </SCRIPT> </BODY>
  12. 12. Exemplos de JavaScript: “Rodapé v1” <BODY> <SCRIPT language="JavaScript"> <!-- nome = ”João da Silva"; document.write("<HR>"); document.write("<I>Autor: </I>"); document.write(nome); //--> </SCRIPT> </BODY> OBS1: nome é uma variável ⇒ armazena uma informação
  13. 13. OBS1: prompt é uma função ⇒ faz alguma coisa: - Abre uma janela de diálogo para o usuário entrar com um texto - Retorna o texto digitado pelo usuário OBS2: “Seja bem vindo"+nome+"</B> !!!" é uma expressão ⇒ soma textos Exemplos de JavaScript: “Conteúdo Personalizado” <BODY> <SCRIPT language="JavaScript"> <!-- nome = prompt("Qual o seu nome?",""); document.write("Seja bem vindo <B>"+nome+"</B> !!!"); //--> </SCRIPT> </BODY>
  14. 14. Exemplos de JavaScript: “Rodapé v2” <BODY> <SCRIPT language="JavaScript"> <!-- nome = ”Maria Pereira"; document.write("<HR>"); document.write("<I>Autor: </I>"+nome+"<BR>"); document.write("<I>Última Modificação: </I>"+ document.lastModified); //--> </SCRIPT> </BODY> OBS1: document é uma objeto OBS2: document.lastModified é uma propriedade do documento ⇒ retorna a data (mm/dd/aa) e hora da última modificação do documento
  15. 15. Exemplos de JavaScript: “Rodapé v3” <HTML> <HEAD> <TITLE>Página com nome do leitor</TITLE> <SCRIPT language="JavaScript"> <!-- function Rodape(){ document.write("<HR><I>Autor:</I> João da Silva<BR>"); document.write("<I>Última Modificação: </I>"+document.lastModified); } //--> </SCRIPT> </HEAD> <BODY> <P>Aqui escrevo qualquer coisa</P> <SCRIPT language="JavaScript"> Rodape(); </SCRIPT> </BODY> </HTML> OBS: Rodape() é uma função (definida pelo programador) ⇒ escreve o rodapé
  16. 16. Exemplos de JavaScript: “Título e Rodapé, v1” <HTML> <HEAD> <TITLE>Página com nome do leitor</TITLE> <SCRIPT language="JavaScript"> <!-- function Titulo(){ document.write("<H1 align=center><I>Aula de JavaScript</I></H1>"); } function Rodape(){ document.write("<HR><I>Autor: </I>João da Silva<BR>"); document.write("<I>Última Modificação: </I>"+document.lastModified); } //--> </SCRIPT> </HEAD> <BODY> <SCRIPT>Titulo();</SCRIPT> <P>Aqui escrevo qualquer coisa</P> <SCRIPT>Rodape();</SCRIPT> </BODY> </HTML>
  17. 17. function Titulo(){ document.write("<H1 align=center><I>Curso de JavaScript</I></H1>"); } function Rodape(){ document.write("<HR><I>Autor: </I>João da Silva<BR>"); document.write("<I>Última Modificação: </I>"+document.lastModified); } geral.js <HTML> <HEAD> <TITLE>1 - Introdução</TITLE> <SCRIPT language="JavaScript" src="geral.js"> </SCRIPT> </HEAD> <BODY> <SCRIPT>Titulo();</SCRIPT> <H2>Capítulo 1 - Introdução</H2> <P>Blá blá blá...</P> <SCRIPT>Rodape();</SCRIPT> </BODY> capitulo1.html <HTML> <HEAD> <TITLE>2 - Fundamentos</TITLE> <SCRIPT language="JavaScript" src="geral.js"> </SCRIPT> </HEAD> <BODY> <SCRIPT>Titulo();</SCRIPT> <H2>Capítulo 2 - Fundamentos</H2> <P>Blá blá blá...</P> <SCRIPT>Rodape();</SCRIPT> </BODY> capitulo2.html
  18. 18. Onde escrever um JavaScript? S  Solução 1: Embutido na página HTML S  1.1 - Como evento de um elemento (IMG, A, INPUT etc): S  Maçã S  Mestre-Cuca S  1.2 - Como elemento SCRIPT dentro de BODY: S  Olá S  Rodapé, v1 S  Conteúdo Personalisado S  Rodapé, v2 S  1.3 - Como função, dentro de HEAD S  Rodapé, v3 S  Título e Rodapé, v1 S  Solução 2: Num arquivo a ser importado S  Título e Rodapé, v2
  19. 19. Programando Javascript S  Conceitos de programação S  Dados, Variáveis, Expressões e Operadores S  Tomada de decisão, Repetição S  Funções, Eventos, Objetos S  O que é preciso para programar em JavaScript? S  Exercícios
  20. 20. Conceitos de Programação JavaScript linguagem de programação processar informações resolver um problema Processar informações (ou seja, resolver um problema) exige um tipo de pensamento particular ⇒ Lógica de Programação
  21. 21. Conceitos de Programação S  Dado = informação Tipos de Dados: “Pedro” 75 1.57 true S  Variável ⇒ armazena dado nome = “Patricia” Idade = 25 S  Expressão e Operador ⇒ opera dados x = (y – 5) / 7 é diferente de x = y – 5 / 7 operadores operadores precedência string inteiro real (ponto-flutuante) boleano (verdadeiro ou falso)
  22. 22. Conceitos de Programação S  Tomada de decisão (é necessário testar: if) if (x<10) { alert(“x é menor que 10”); } else{ alert(“x é maior ou igual a 10”); } S  Repetição x = ""; while (x != "fim"){ document.write(x); x = prompt("Entre com um texto HTML ('fim' para terminar):",""); }
  23. 23. Conceitos de Programação S  Função ⇒ bloco de programa; quebra do problema em partes! function Par(x){ resto = x % 2; alert(resto); if (resto==0) {return true} else {return false} } function Classifica(){ numero = prompt("Entre com um número:",""); if (Par(numero)) {alert("O número "+numero+" é par.");} else {alert("O número "+numero+" é impar.");} } function Par(x){ return (x % 2)==0; }
  24. 24. Conceitos de Programação S  Evento ⇒ se alguma coisa acontece, então faça algo... <FORM> <INPUT type="button" value="Par ou Impar?" onClick="Classifica()"> </FORM> EVENTO O botão, ao se clicado, chama a função Classifica()
  25. 25. Conceitos de Programação S  Objetos ⇒ elementos de uma página Web S  Propriedades (variáveis) document.title; (contém o título do documento) document.location; (contém a URL do documento) S  Métodos (funções) document.write("<B>Bom Dia!</B>"); window.open("http://www.google.com.br", ”Google");
  26. 26. O que é preciso para programar em JavaScript? S  Saber programar ⇒ S  Quebrar o problema em pedaços (funções) S  Resolver os pedaços do problemas utilizando: S  dados, variáveis e operações S  decisões + repetições S  Conhecer os eventos e saber utilizá-los S  Conhecer os objetos e saber utilizá-los desenvolver a Lógica de Programação !!! Algoritmo
  27. 27. O que é preciso para programar em JavaScript? 3 passos para desenvolver a Lógica de programação: 1 – Faça exercícios 2 – Faça mais exercícios 3 – Continue fazendo ! desenvolver a Lógica de Programação !!!
  28. 28. Eventos e Objetos 3 •  Eventos •  Objetos •  Window •  Location •  History •  Document •  Form •  TextArea, Text, Password •  Select •  Frame •  Image
  29. 29. Eventos <BODY onLoad="alert('Página carregada.’)"> <script> window.onbeforeunload = function() { return "Deseja sair mesmo?"; }; </script> <P>Testando alguns eventos...</P> <FORM> <INPUT type="button" value="Não aperte este botão!" onClick="alert('Clique o botão Ok para formatar o HD')"> </FORM> </BODY> <INPUT type="button" value= "Formatar o HD" onClick="confirm(‘Tem certeza?')">
  30. 30. Eventos A, IMG A, IMG A, IMG A, IMG A, IMG A, IMG, Botões, SELECT Caixa de Texto Caixa de Texto Caixa de Texto Ponteiro do mouse entra Ponteiro do mouse se movimenta Ponteiro do mouse sai Botão do mouse é apertado Botão do mouse é desapertado Clique (MouseDown + MouseUp) Tecla apertada Tecla desapertada Tecla “clicada” (KeyDown + KeyUp) onMouseOver onMouseMove onMouseOut onMouseDown onMouseUp onClick onKeyDown onKeyUp onKeyPress
  31. 31. Eventos antes de enviar o formulário antes de limpar o formulário quando elemento recebe o foco quando elemento perde o foco quando modifica-se texto ou seleção após carregar uma página BODY antes de sair da página BODY quando a janela é redimensionada quando a janela é arrastada quando um erro ocorre ao carregar quando interrompe-se carregamento onSubmit onReset onFocus onBlur onChange onLoad onUnLoad onResize onMove onError onAbort FORM FORM compts. de FORM, BODY compts. de FORM, BODY SELECT, TEXTAREA, INPUT:text, INPUT:passw. BODY BODY BODY BODY BODY, IMG IMG
  32. 32. Objetos Window Frame Document Location History Link Image Area Anchor Applet Plugin Form Option TextArea Text Password Radio Select Reset Submit FileUpload Hidden Button
  33. 33. Window (exemplo) <HTML> <HEAD> <SCRIPT language="JavaScript"> <!-- function AbrirJanela(){ window.open("http://www.google.com.br"); } //--> </SCRIPT> </HEAD> <BODY> <A href="javascript:AbrirJanela();">Abrir Janela</A> </BODY> </HTML>
  34. 34. Window (exemplo) window.open("http://www.google.com.br"); Cada chamada à função AbrirJanela(), irá abrir uma nova janela window.open("http://www.google.com.br", "j1"); Nome da Janela mesmo com várias chamadas à função AbrirJanela(), somente uma janela será aberta window.open("http://www.google.com.br", ""); Nome não especificado Netscape: Abre só 1 janela Internet Explorer: Abre várias janelas
  35. 35. Window (exemplo) window.open("http://www.google.com.br","j1", "width=400,height=400,resizable=no"); Opções: •  width=número largura da janela •  height=número altura da janela •  left=número posição do canto esquerdo da janela •  top=número posição do topo da janela •  resizable=yes|no permite o usuário redimensionar a janela •  menubar=yes|no exibe a barra de menu •  toolbar=yes|no exibe a barra de ferramentas •  location=yes|no exibe a barra de endereço •  directories=yes|no exibe a barra de ferramentas •  status=yes|no exibe a barra de status •  scrollbars=yes|no exibe as barras de rolamento Obs.: Quando uma opção do tipo yes|no é apenas declarada, seu valor é yes. Caso contrário, seu valor é no. Ex.: "width=400, height=400, menubar, status“
  36. 36. Window (exemplo) function AbrirJanela(){ janela=window.open("","wndPropaganda","width=300,height=100"); janela.document.open(); janela.document.write("<DIV align=center><P>Você já conhece o Google?</P>"); janela.document.write('<P><A href="http://www.google.com.br" target="_blank">'); janela.document.write("Quero Conhecer</A></P>"); janela.document.close(); janela.focus(); } Abrir uma janela e escrever o conteúdo dinamicamente:
  37. 37. Window (exemplo) <HTML> <HEAD></HEAD> <BODY onBlur="window.focus()"> <P><A href="javascript:window.close();">Fechar</A></P> <FORM> <INPUT type="button" value="Fechar" onClick="window.close()"> </FORM> </BODY> </HTML> Abrir uma página “bloqueadora”: <BODY> <SCRIPT><!-- window.open("google.html", "", "width=300,height=100"); //--> </SCRIPT> </BODY> index.html google.html
  38. 38. Window (propriedades e métodos) S  Propriedades S  frames[index] quadros filhos, indexados pela ordem de criação S  frames.length número de quadros existentes S  self janela atual S  parent janela pai S  top janela mais antiga S  opener janela que a abriu S  Métodos S  alert("texto") exibe caixa de diálogo para exibir um aviso S  confirm("texto") exibe caixa de diálogo para exibir um aviso S  prompt("texto","inicial") exibe caixa de diálogo para entrada de texto S  home() vai para a página inicial do navegador S  open("URL", "nome", "opções")cria janela cliente S  close() fecha janela
  39. 39. Location (propriedades e métodos) S  Propriedades S  href URL completo S  protocol protocolo utilizado S  host nome e port do host S  hostnamenome do host S  port port do host S  path diretório e arquivo (exclui protocolo e host) S  hash URL após sinal # S  search URL após sinal ? S  Métodos S  toString() retorna uma string S  assign("string") ajusta a localização S  reload(true) recarrega a página atual incondicionalmente
  40. 40. Location (exemplo) <BODY> <SCRIPT language="JavaScript"> <!-- alert("Você está em "+ window.location.href); novoHREF=prompt("entre com um novo endereço:","http://"); window.location.href=novoHREF; //--> </SCRIPT> <BODY>
  41. 41. History (propriedades e métodos) S  Propriedades S  back penúltimo URL acessado S  foward URL posterior da lista de URLs acessados S  current URL da página atual S  length tamanho da lista de histórico atual S  Métodos S  back() volta uma posição no histórico S  foward() avança uma posição no histórico S  go(n) vai para o URL localizado em n posições em relação a posição atual (+n ou –n) S  go("string") vai para a página mais recente cujo título ou URL contenha a string especificada. Obs.: o sistema diferencia maiúsculas e minúsculas. S  toString() retorna uma tabela HTML com ligações para todas as entradas da lista de diretório Ex.: <A href="javascript:history.back()">Voltar</A>
  42. 42. Document (propriedades e métodos) S  Propriedades S  title S  location S  lastModified S  Métodos S  write("textoHTML") escreve uma linha de texto HTML S  writeln("textoHTML") escreve e adiciona um avanço de linha S  clear() limpa o texto do documento S  close() fecha o documento •  bgColor •  fgColor •  linkColor •  aLinkColor •  vLinkColor •  form[index] •  form.length •  links[index] •  links.length •  anchors[index] •  anchors.length Ex.: window.document.write("<B>Olá</B>"); window.document.bgColor="silver";
  43. 43. Form (propriedades e métodos) S  Propriedades S  elements Array. Vetor de elementos do formulário S  elements.length Número de elementos do formulário S  name conteúdo do atributo NAME S  action conteúdo do atributo ACTION S  encodingconteúdo do atributo ENCTYPE S  method valor do atributo METHOD ("get"=0; "post"=1) S  target janela alvo usada para resposta após envio do formulário (atributo TARGET) S  Métodos S  submit() envia o formulário
  44. 44. <HTML> <HEAD> <SCRIPT language="JavaScript"> <!-- function Cadastrar(){ wndCadastro = window.open("","jc","width=300,height=80"); wndCadastro.document.open(); wndCadastro.document.write("<B>Nome: </B>"); wndCadastro.document.write(window.document.frmCadastro.txtNome.value); wndCadastro.document.write("<BR>"); wndCadastro.document.write("<B>Idade: </B>"); wndCadastro.document.write(window.document.forms[0].elements[1].value); wndCadastro.document.close(); wndCadastro.focus(); } //--> </SCRIPT> </HEAD> <BODY> <FORM name="frmCadastro"> Nome: <INPUT type=text size=35 name=txtNome><BR> Login: <INPUT type=text size=10 name=txtLogin></P> <INPUT type=button value="Cadastrar Dados" name="btnCadastrar" onClick="Cadastrar()"> </FORM> </BODY> </HTML> TextArea, Text, Password (exemplo) elements[0]=Caixa de texto “txtNome”; elements[1]=Caixa de texto “txtLogin”; elements[2]=Botão “btnCadastrar”;
  45. 45. <HTML> <HEAD> <SCRIPT language="JavaScript"> <!-- function Navegar(){ var x = document.frmSites.slcSites.selectedIndex; if (x==0){} if (x==1){document.location.href="http://www.google.com.br"} if (x==2){document.location.href="http://www.facebook.com"} if (x==3){document.location.href="http://www.uol.com.br "} } //--> </SCRIPT> </HEAD> <BODY> <FORM name="frmSites"> <SELECT size="1" name="slcSites" onChange="Navegar()"> <OPTION>Sites:</OPTION> <OPTION>Google</OPTION> <OPTION>Facebook</OPTION> <OPTION>UOL</OPTION> </SELECT> </FORM> </BODY> </HTML> Select (exemplo) slcSites.options[0]=“Sites”; slcSites.options[1]=“Google”; slcSites.options[2]=“Facebook ”; slcSites.options[3]=“UOL;
  46. 46. Lógica de Programação 4 •  Variáveis •  Tipos de Dados •  Operadores •  Tomada de Decisão (if...else) •  Repetição (while e for) •  Funções •  Exemplos e Exercícios
  47. 47. Variáveis S  Variável armazena dado S  nome="Pedro"; S  idade=25; S  nome="Pedro"; /*não precisa declarar nem tipar a variável*/ S  var nome; /*declaração sem atribuição de valor*/ S  var nome="Pedro"; /*declaração com atribuição de valor*/ S  Identificador de variável S  letras, números e "_" (underscore) S  tem que começar com um letra S  case sentive ⇒ nome ≠ Nome ≠ NoMe
  48. 48. §  Inteiro: » 5 » 14509 §  Ponto-flutuante » 14.075 » 1.78e-45 Tipos de Dados S  string (cadeia de letras) S  “João da Silva”; S  “Qualquer ‘texto’, inclusive, toda uma página HTML.”; S  “123” S  number TIPO REPRESENTAÇÃO §  Indeterminado »  NaN (Not a Number) §  Infinito: »  Infinity »  -Infinity VALORES ESPECIAIS §  Decimal »  734.25 §  Hexadecimal (Ex.: cores) »  0xFF87C1 §  Octal »  0677
  49. 49. Tipos de Dados S  true S  false S  undefined valor ainda não definido Ex.: var nome; /* nome=undefined */ S  null valor nulo (inválido) S  object S  objetos: documento, janela, componente de formulário etc. boolean
  50. 50. Operadores S  Aritméticos S  * multiplicação S  / divisão S  + soma S  - subtração S  % resto S  String S  + concatenação x = 5 / 3; x = 5 % 3; x = 5 + (5 - 2) / 2; x = (5 + (5 – 2)) / 2; nome = ”Fabio"; sobreNome = ”Pereira"; meioNome = ”Marques"; nomeCompleto = nome + " " + meioNome + " " + sobreNome;
  51. 51. Operadores S  Atribuição S  = (Ex.: x = 5) S  op= (atribuição com operação) S  Incrementais S  var++ ou ++var S  var-- ou --var x += y; x = x + y; x –= y; x = x – y; x /= y; x = x / y; x *= y; x = x * y; x %= y; x = x % y; x = 5; y = ++x; /* x=6; y=6; */ x=5; y = x++; /* y=5; x=6; */
  52. 52. Operadores S  Comparação S  > maior S  >= maior ou igual S  < menor S  <= menor ou igual S  == igual S  != diferente if (x<10) {...} if (senha!="12345") {alert("Senha inválida!");} if (x==y) {...}
  53. 53. Operadores S  Lógicos S  && e S  || ou S  ! not if ( (x<y) && (y<z) ) {alert(x +" é menor que " +z);} if ( (x<z) || (y<z) ) {...} if !(senha=="12345") {alert("Senha inválida!");}
  54. 54. Tomada de Decisão S  if ... else if (condição) { // instruções caso condição==true } else { // instruções caso condição==false }
  55. 55. Repetição S  for (inicialização; condição; incremento){...} S  while (condição) {...} for (i=1; i<=1000; i = i + 1) { document.write("<P>" + i + "</P>"); } i=1; while (i<=1000) { document.write("<P>" + i + "</P>"); i = i + 1; }
  56. 56. Funções S  function NomeFuncao(param1, param2) {...} function Soma(x, y) { return x + y; }
  57. 57. Funções nativas parseInt(string) Converte a string num número inteiro texto="7"; x = parseInt(texto); x = numero + 5; //x==12 (7 + 5) texto = texto + 5; //texto=="75" ("7" +"5“) x = parseInt("7.5"); //x==7 x = parseInt("7a"); //x==7 Converte a string num número real x = parseFloat("7.5"); //x==7.5 Retorna true se a string não é número texto = prompt("Entre com um número:",""); if ( isNaN(texto) ) { alert("Você não digitou um número válido.") } Executa o conteúdo de uma string resultado = eval(“5 + 6 / 2”); // resultado = 8 escape = ("João"); // nome = "Jo%E3o" unescape("Jo%E3o"); // nome = "João" parseFloat(string) eval(string) isNaN(string) escape(string) unescape(string)
  58. 58. Exemplo: Antes de enviar o formulário, verificar se o campo ‘Nome’ foi preenchido
  59. 59. Solução <HTML> <HEAD> <SCRIPT language="javascript"> <!-- function Enviar(){ if (window.document.Cadastro.nome.value==""){ alert("O campo 'Nome' precisa ser preenchido"); window.document.Cadastro.nome.focus(); } else{ alert("Os dados do formulário foram preenchidos corretamente"); //window.document.Cadastro.submit(); } } //--> </SCRIPT> </HEAD> <BODY> <FORM name="Cadastro" onSubmit="return false"> Nome:<INPUT name="nome" type=text size=50><BR> <INPUT type=button value="Enviar" onClick="Enviar()"> </FORM> </BODY> </HTML>
  60. 60. Exemplo: Fazer uma função para saber se um texto é ou não um número inteiro •  Verificar se o texto é um número •  Verificar se este número é inteiro •  Se ambas as condições forem verdadeiras, então retornar true caso contrário, retornar false. Passos:
  61. 61. <HTML> <HEAD> <SCRIPT language="javascript"><!-- function isInt(texto){ bValido=true; //testar se texto é um número if ( isNaN(texto) ) {bValido=false} else{ //testar se texto é um número inteiro if ( parseInt(texto)!=parseFloat(texto) ) {bValido=false} } return bValido; } //--> </SCRIPT> </HEAD> <BODY> <SCRIPT language="javascript"> <!-- numero = prompt("Digite um número inteiro:",""); if ( isInt(numero) ) {alert("Ok, o número é inteiro")} else {alert("Você não digitou um número inteiro")} //--> </SCRIPT> </BODY></HTML> Solução 1
  62. 62. function isInt(texto){ if ( isNaN(texto) ) {return false} else{ return ( parseInt(texto)==parseFloat(texto) ) } } Solução 2 function isInt(texto){ bValido=true; if ( isNaN(texto) ) {bValido=false} else{ if ( parseInt(texto)!=parseFloat(texto) ) {bValido=false} } return bValido; } PROVA
  63. 63. Exercício: Fazer um formulário que seja validado antes de ser enviado Validar: Ø preenchimento de Nome Ø validade de Data
  64. 64. Objetos Nativos 5 •  Math •  String •  Date •  Array •  Novos Objetos
  65. 65. Math random() número pseudo-aleatório entre 0 e 1 min(a, b) min(5, 7) -> 5 max(a,b) max(5, 7) -> 7 abs(x) abs(-5.7) -> 5.7 floor(x) floor(5.7) -> 5 ceil(x) ceil(5.4) -> 6 round(x) round(5.7) -> 6; round(5.4) -> 5 Ex.: x = 1 + Math.floor(Math.random()*50); // x recebe um número entre 1 e 50
  66. 66. String txt = "Pedro" charAt(n) txt.charAt(2) ⇒ ”d" indexOf("sub-string") txt.indexOf(”e") ⇒ 1 txt.indexOf(”d") ⇒ 2 txt.indexOf("k") ⇒ -1 *não encontrado! split("separdor") txt="20/02/1975"; data = txt.split("/"); // data[0] = "20"; // data[1] = "02"; // data[2] = "1975”; *length; txt = "Pedro"; x = txt.length; // x = 5 0 1 2 3 4
  67. 67. Date S  dataHoje = new Date(); dataHoje.getDay(); //dia da semana (0 a 6) dataHoje.getDate(); //dia do mês (1 a 31) dataHoje.getMonth(); dataHoje.getYear(); dataHoje.getHour(); dataHoje.getMinutes(); dataHoje.getSeconds();
  68. 68. Array S  Armazena dados indexados data = new Array(3); data[0] = 20; data[1] = 02; data[2] = 1975; data = new Array(20,02,1975); data = new Array(); //sem indexação prédefinida data[0] = "20"; data[2] = "1975"; if (data[1]==null) {data[1]=prompt("Entre com o mês", "");} txt = "20/02/1975"; data = txt.split("/"); data.length ⇒ 3 // length é uma propriedade de Array
  69. 69. Array (continuação) produtos = "1:Porta retrato PHT:21.00;2:Abajur Róse:35.50; 34:Cesta lixo valise:5.99"; produtosArray = produtos.split(";"); for (i=0; i < produtosArray.length; i++){ prod = produtosArray[i].split(":"); document.write(prod[0] + "<BR>"); document.write(prod[1] + "<BR>"); document.write(prod[2] + "<BR>"); }
  70. 70. Novos Objetos function Produto(aCodigo, aNome, aPreco){ this.codigo = aCodigo; this.nome =aNome; this.preco = aPreco; } ... p1 = new Produto(1, “Porta retrato PHT”, 21.00); P2 = new Produto(2, “Abajur Róse”, 35.50); P3 = new Produto (34, “Cesta lixo valise”, 5.99); ... document.write(p1.nome);
  71. 71. Cookies 6 document.cookie = “nomeCookie=texto_escape; expires=dataGMT;” Ex.: document.cookies = "cliente=Pedro; expires=Monday, 22-Feb-15 00:00:00 GMT" document.cookies = "RG=123456789" alert(document.cookie); //cliente=Pedro; RG=123456789 dataMorte = new Date(05,12,31); document.cookies = "nome="+escape("João Grandão")+ "; expires="+dataMorte.toGMTString();
  72. 72. Ler um Cookie function getConteudoCookie(nome){ cookies = document.cookie.split("; "); for (i=0; i<=cookies.length-1; i++){ cookies[i] = cookies[i].split("="); nomeCookie = unescape(cookies[i][0]); if (nomeCookie==nome) {return unescape(cookies[i][1])} } return ""; }
  73. 73. Cancelar um Cookie function CancelarCookie(nome){ diaHoje = new Date(); diaOntem = new Date( diaHoje.getTime() - 1000*60*60*24 ); diaOntemGMT = diaOntem.toGMTString(); document.cookie = nome+"=; expires=" + diaOntemGMT; }
  74. 74. Criar um Cookie function Cria Cookie(nome, valor){ cookies=getConteudoCookie("compras"); if (cookies!=""){cookies+="*”} document.cookie = ”nome="+escape(valor); } }
  75. 75. Relógios (timers) S  id = setTimeout("funcao()", 1000); Cria um relógio (id) para chamar uma função após n milisegundos S  clearTimeout(id) Cancela o relógio 7 Obs: setTimeout() e clearTimeout() são funções nativas
  76. 76. S Introdução ao jQuery
  77. 77. Conteúdo   S  Introdução  ao  JavaScript  e  jQuery   S  Fundamentos  de  JavaScript   S  Document  Object  Model  (DOM)   S  Preparando  o  Ambiente   S  Seletores  jQuery   S  Manipulando  CSS   S  Manipulando  Conteúdo   S  Eventos   S  Animação   S  Funções  jQuery   S  Ajax   S  Formulários  
  78. 78. Em  1995  nasce  o  JavaScript   VBSCRIPT   JAVASCRIPT  
  79. 79. JavaScript  hoje  
  80. 80. Por  que  usar  jQuery?   jQuery  é  uma  camada  de  abstração   Use  jQuery  porque...     ...  é  fácil   ...  é  produVvo   ...  browsers  são  incompaXveis   ...  seus  usuários  uVlizam  browsers  anVgos  
  81. 81. jQuery  não  é  nuhum  milagre!   S  Você  ainda  precisa  de  JavaScript   S  jQuery  é  pesado   S  Construa  agora,  melhore  depois  
  82. 82. S Document  Object   Model  (DOM)  
  83. 83. DOM   <html> <head> <title>jQuery na Prática</title> </head> <body> <h1 id=“titulo”>Curso de jQuery</h1> <p class=“autor”>Rodrigo</p> <ul> <li>JS</li> <li>DOM</li> <li>jQuery</li> </ul> </body> </html>
  84. 84. DOM   html head body title h1#titulo p.autor ul lilili jQuery na Prática Curso de jQuery Rodrigo Santa Maria JS DOM jQuery
  85. 85. S Preparando  o  Ambiente  
  86. 86. h^p://jquery.com  
  87. 87. Carregando  jQuery   Local Library: <script type=“text/javascript” src=“jquery-2.1.3.min.js”></script> Hosted Libraries: <script src="https://ajax.googleapis.com/ajax/libs/ jquery/2.1.3/jquery.min.js"></script>
  88. 88. 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!)
  89. 89. jQuery   $(“h1”); (Nome do elemento)   DOM   html body h1 à jQuery na Prática p.autor à Rodrigo Santa Maria p#rodape à rodrigobsm.com.br/jquery-na-pratica   Seletores  jQuery  
  90. 90. Seletores  jQuery   jQuery   $(“p”); (Nome do elemento)   DOM   html body h1 à jQuery na Prática p.autor à Rodrigo Santa Maria p#rodape à rodrigobsm.com.br/jquery-na-pratica  
  91. 91. jQuery   $(“p.autor”); (Elemento + . + Classe)   DOM   html body h1 à jQuery na Prática p.autor à Rodrigo Santa Maria p#rodape à rodrigobsm.com.br/jquery-na-pratica   Seletores  jQuery  
  92. 92. jQuery   $(“.autor”); (Somente a classe)   DOM   html body h1 à jQuery na Prática p.autor à Rodrigo Santa Maria p#rodape à rodrigobsm.com.br/jquery-na-pratica   Seletores  jQuery  
  93. 93. Seletores  jQuery   jQuery   $(“p#rodape”); (Elemento + # + Id)   DOM   html body h1 à jQuery na Prática p.autor à Rodrigo Santa Maria p#rodape à rodrigobsm.com.br/jquery-na-pratica  
  94. 94. Resultado  da  Seleção   jQuery   $(“p”);   DOM   p.autor à Rodrigo Santa Maria p#rodape à google.com/jquery-na-pratica   JavaScript   “<p class=‘autor’>Rodrigo Santa Maria</p>”, “<p id=‘rodape’>google.com/jquery-na-pratica</p>”]  
  95. 95. Espaço  em  branco   $(“p#rodape”); Elemento  p  com  id  rodape     $(“p #rodape”); Elemento  com  id  rodape  dentro  do  elemento  p
  96. 96. 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”);
  97. 97. 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”  
  98. 98. 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
  99. 99. 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)
  100. 100. S Manipulando  CSS  
  101. 101. 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
  102. 102. Definindo  múlVplos  atributos   UVlizando  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”});
  103. 103. Mas...  vamos  com  calma   HTML   Conteúdo   CSS   Apresentação   JavaScript   Interação  
  104. 104. Interface  CSS   S  DOM  e  CSS  comunicam  via  IDs  e  Classes   S  Use  .css()  com  cautela   S  Manipule  IDs  e  Classes   S  Mais  seguro  e  manutenível  
  105. 105. 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
  106. 106. Visibilidade   $(“p.autor”).hide(); [<p class=“autor” style=“display: none”>Rodrigo</p>] $(“p.autor”).show(); [<p class=“autor” style=“display: normal”>Rodrigo</p>] $(“p.autor”).toggle(); Alterna entre hide e show
  107. 107. S Manipulando  Conteúdo  
  108. 108. 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>
  109. 109. Acessando  text  e  html   S  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>”] S  text  à  Recupera  todo  texto  dentro  do  elemento  selecionado,  ignorando   as  tags  HTML   $(“p:first”).text(); [“Data: 21/01 à 25/01”]
  110. 110. Definindo  text   $(“span.data”).text(“28/01 à 01/02”); <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    
  111. 111. Definindo  text   $(“span.data”).text(“<u>28/01 à 01/02</u>”); <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    
  112. 112. Definindo  html   $(“span.data”).html(“<u>28/01 à 01/02</u>”); <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    
  113. 113. 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  
  114. 114. 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    
  115. 115. 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    
  116. 116. 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    
  117. 117. Amer   $(“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    
  118. 118. S Eventos  
  119. 119. 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!
  120. 120. 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>
  121. 121. 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!
  122. 122. 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
  123. 123. 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
  124. 124. Click   function esconder() { $(“p”).hide(); } $(“p”).click(esconder); Normalmente  uVlizamos  funções  anônimas   $(“p”).click(function () { $(“p”).hide(); });
  125. 125. 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  
  126. 126. 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  
  127. 127. 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  
  128. 128. Eventos  de  Teclado   $(“input”).keydown(); //Dispara ao apertar a tecla $(“input”).keypress(); //Dispara ao pressionar a tecla $(“input”).keyup(); //Dispara ao soltar a tecla
  129. 129. 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
  130. 130. 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
  131. 131. S Animações  
  132. 132. Animações  slide   .slideUp([duração][,callback]); duração S  Tempo da animação em milisegundos S  Default 400 milisegundos S  Aceita parâmetros “slow” (600ms) e “fast” (200ms) callback S  Função que será executada após o término da animação
  133. 133. slideUp,  slideDown  e  slideToggle   $(“p”).slideUp(“slow”); $(“p”).slideUp(1000, function () { alert(“Concluiu a animação!”); }); $(“p”).slideDown(“fast”); $(“p”).slideToggle();
  134. 134. Animações  fade   S  UVliza  os  mesmos  parâmetros  do  slide   $(“p”).fadeIn(“slow”); $(“p”).fadeIn(1000, function () { alert(“Concluiu a animação!”); }); $(“p”).fadeOut(“fast”); $(“p”).fadeToggle();
  135. 135. S Funções  jQuery  
  136. 136. Adicionando  funções   customizadas   $.fn.vazio = function () { var value = $(this).val(); if (value == “”) { return true; } else { return false; } }; $(“input”).vazio();
  137. 137. S Ajax  
  138. 138. XMLH^pRequest   S  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 } });
  139. 139. 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 });
  140. 140. 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: “rodrigobsm”, senha: “123456” }); $.post(“login.php”, $(“form”).serialize(), function () { // Executa callback });
  141. 141. 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); });
  142. 142. S Formulários  
  143. 143. 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=Rodrigo&email=rodrigobsm.gm@gmail.com&cpf=123456789012 Rodrigo Rodrigobsm.gm@gmail.com 123456789012 Nome: Email: Cpf:
  144. 144. Serializando  em  array   $(“#cadastro”).serializeArray(); [ { name = “nome”, value = “rodrigo” }, { name = “email”, value = “rodrigobsm.gm@gmail.com” }, { name = “cpf”, value = “123456789012” } ]
  145. 145. Plugins jQuery S  Um dos grandes trunfos do jQuery é a sua vasta gama de plugins. S  Um plugin é uma extensão da biblioteca do jQuery que implementa uma nova funcionalidade. S  Praticamente qualquer efeito, ação ou manipulação que você consiga imaginar já deve possuir um plugin. Caso contrário, quem sabe você mesmo não desenvolve um?
  146. 146. Plugins jQuery úteis S  http://jquery.malsup.com/cycle/ S  http://jqueryvalidation.org/ S  http://digitalbush.com/projects/masked-input-plugin/ S  http://www.linhadecodigo.com.br/artigo/3584/10-plugins- de-jquery-que-voce-precisa-conhecer.aspx S  http://daviwp.com/os-40-melhores-plugins-jquery-para- facilitar-a-vida-do-desenvolvedor-web/
  147. 147. Muito obrigado! Prof. Rodrigo Santa Maria rodrigo@digitallymade.com.br facebook.com/rodrigobsm Contato

×