Web 2.0 com Ajax: JQuery/PHP (Aula 02)

702 visualizações

Publicada em

Treinamento ministrado para turma iniciante em 2011

Aula 02

0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

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

Nenhuma nota no slide

Web 2.0 com Ajax: JQuery/PHP (Aula 02)

  1. 1. Aula 02Wagner Silva
  2. 2. Agenda  HTML DOM  JQuery  Vantagens e Desvantagens  Baixando a Biblioteca  Conhecendo a SintaxeWagner Silva # Web 2.0 com Ajax Aula 02
  3. 3. HTML DOM  HTML Document Object Model  Objetivo: Simplificação e Padronização  Permite acesso dinâmico a conteúdo e estilo  Pode manipular mais de um elementoWagner Silva # Web 2.0 com Ajax Aula 02
  4. 4. HTML DOM  Tudo numa página é considerado um nó:  A página inteira é um nó;  Todas as tags HTML são nós;  Todos os atributos de tags tornam-se atributos dos nós;  Textos são nós.Wagner Silva # Web 2.0 com Ajax Aula 02
  5. 5. HTML DOM <html> <head> <title>HTML DOM</title> </head> <body> <p>Hello world!</p> </body> </html>Wagner Silva # Web 2.0 com Ajax Aula 02
  6. 6. HTML DOM Html Head Body Title P “HTML DOM” “Hello world!”
  7. 7. HTML DOM  Hierarquia entre nós:  O nó do topo é o nó raiz;  Todos os nós, exceto o raiz, possuem um nó pai;  Um nó pode possuir inúmeros filhos;  Folhas são nós sem filhos;  Nós também podem acessar seus irmãos.Wagner Silva # Web 2.0 com Ajax Aula 02
  8. 8. HTML DOM childNodes Html Head Body Title P “HTML DOM” “Hello world!”
  9. 9. HTML DOM firstChild Html Head Body Title P “HTML DOM” “Hello world!”
  10. 10. HTML DOM lastChild Html Head Body Title P “HTML DOM” “Hello world!”
  11. 11. HTML DOM nextSibling Html Head Body Title P “HTML DOM” “Hello world!”
  12. 12. HTML DOM previousSibling Html Head Body Title P “HTML DOM” “Hello world!”
  13. 13. HTML DOM  Nós possuem propriedades, exemplos:  nó.innerHTML : o “nó texto” do elemento;  nó.nodeName : seu nome;  nó.nodeValue : retorna o valor do nó; --xml  nó.attributes : retorna um array contendo os atributos do nó.Wagner Silva # Web 2.0 com Ajax Aula 02
  14. 14. HTML DOM  Nós possuem métodos, exemplos:  nó.getElementById(id) : retorna o elemento com o id especificado;  nó.getElementsByTagName(tagName) : retorna um array com os elementos que possuem a tag;  nó.appendChild(nó) : adiciona um nó como filho de determinado elemento;  nó.removeChild(nó) : remove um nó de um nó pai;Wagner Silva # Web 2.0 com Ajax Aula 02
  15. 15. HTML DOM  Exemplo: Utilizando o formulário de exemplo do curso, vamos avisar ao usuário que os dados foram enviados com sucesso sem utilizar o elemento alert.  1º Passo: Retirar o alerta.  2º Passo: Modificar o “nó texto” do formulário.Wagner Silva # Web 2.0 com Ajax Aula 02
  16. 16. HTML DOM  Exercício: Ainda utilizando o formulário de exemplo do curso:  Cidade só poderá ser escolhida quando um estado for selecionado.  Os campos nome, cpf e sexo devem ser obrigatórios.  1º Passo: Adicionar uma função para modificar o atributo disabled de cidade quando selecionar um estado.  2º Passo: Veriricar se os campos obrigatórios foram preenchidos.Wagner Silva # Web 2.0 com Ajax Aula 02
  17. 17. HTML DOM  Pode-se mudar o estilo dos objetos  Folha de Estilos = Conjunto de estilos  Atributo styleWagner Silva # Web 2.0 com Ajax Aula 02
  18. 18. HTML DOM  Características das propriedades:  Hífens não são utilizados  Escritas em letras minúsculas  Exceto as palavras separadas por hífens que suas iniciais serão com letras maiúsculasWagner Silva # Web 2.0 com Ajax Aula 02
  19. 19. HTML DOM  Exemplos:  nó.style.magin  nó.style.maginTop  nó.style.backgroundColor  nó.style.display  nó.style.fontStyleWagner Silva # Web 2.0 com Ajax Aula 02
  20. 20. HTML DOM  Exemplo: Disponibilizar 4 cores ao usuário, o qual poderá escolher entre uma delas para a cor de fundo da página.  1º Passo: Criar uma div com 4 elementos do tipo radio com as cores possíveis  2º Passo: Ao clicar num desses elementos, modificar a cor de fundo da páginaWagner Silva # Web 2.0 com Ajax Aula 02
  21. 21. HTML DOM  Exemplo: Construir uma página com 3 divs 100 x 100, as quais o usuário terá a opção de selecionar a div e uma cor para ela.  1º Passo: Criar uma página com três divs e uma folha de estilos para elas  2º Passo: Criar uma div com as possíveis escolhas e um botão para efetuar as ações  3º Passo: Quando o usuário clicar no botão, efetuar as mudanças a partir de uma função em javaScript utilizando HTML DOMWagner Silva # Web 2.0 com Ajax Aula 02
  22. 22. HTML DOM  Exercício: Modificar a página com 3 divs 100 x 100. A div “opções” deve possuir 3 pequenas divs preenchidas com cores distintas. O usuário clicará numa dessas divs e, ao clicar em uma das 3 divs 100 x 100, esta fica com a mesma cor.  1º Passo: Modificar a div opções  2º Passo: Adicionar uma função para selecionar a cor  3º Passo: Adicionar uma função para colorir a divWagner Silva # Web 2.0 com Ajax Aula 02
  23. 23. JQuery  Conceitos implementados para atender HTML e CSS  Utiliza estrutura semelhante à do HTML DOM  Não é necessária a inclusão de eventos no HTML  Oferece ferramentas para criar animações  Inibe hacks ao programadorWagner Silva # Web 2.0 com Ajax Aula 02
  24. 24. JQuery  Atende às atividades de programadores e designers  Permite a criação de plug-ins  Iteração implícita  Encadeamento  Licenças Públicas e ProprietáriasWagner Silva # Web 2.0 com Ajax Aula 02
  25. 25. JQuery  Não é necessária nenhuma instalação  www.jquery.com  Importada via HTML <script>  Versões:  Production (Minified)  Development (Uncompressed)Wagner Silva # Web 2.0 com Ajax Aula 02
  26. 26. Wagner Silva # Web 2.0 com Ajax Aula 02
  27. 27. Wagner Silva # Web 2.0 com Ajax Aula 02
  28. 28. Wagner Silva # Web 2.0 com Ajax Aula 02
  29. 29. JQuery <!DOCTYPE HTML> <html> <head> ... <script language="JavaScript" type="text/javascript" src="../js/jquery.js"> </script> </head> <body> ... </body> </html>Wagner Silva # Web 2.0 com Ajax Aula 02
  30. 30. JQuery  Operação fundamental: Selecionar objetos facilmente  Operador: $(<seletor>)  <seletor>:  String  Tags, Idenfificadores e/ou Classes  Atributos de TagsWagner Silva # Web 2.0 com Ajax Aula 02
  31. 31. JQuery  Exemplo: $(“p a”) <html> <head>...</head> <body> ... <p> ... <a>...</a> ... </p> ... </body> </html>Wagner Silva # Web 2.0 com Ajax Aula 02
  32. 32. JQuery  Exemplo: $(“div:gt(0)”) <html> <head>...</head> <body> <div>...</div> <div>...</div <div>...</div> </body> </html>Wagner Silva # Web 2.0 com Ajax Aula 02
  33. 33. JQuery  Exemplo: $(“#tabela tr td :hidden[name=link]”) <html> <head>...</head> <body> <table id=“tabela”> ...<tr><td> ...<input type=“hidden” name=“link”>... </td></tr>... </table> </body> </html>Wagner Silva # Web 2.0 com Ajax Aula 02
  34. 34. JQuery  Função: $(document).ready(); = <body onload=“”> $(document).ready(function(){ ... });  Aguarda a página carregar por inteiroWagner Silva # Web 2.0 com Ajax Aula 02
  35. 35. JQuery  Exemplo: Modificar a função do formulário. Quando o usuário clicar em enviar, se os campos obrigatórios estiverem preenchidos, a parece a mensagem de sucesso.  1º Passo: Incluir a biblioteca JQuery  2º Passo: Na função javaScript, adicionar $(document).ready(function(){...});  3º Passo: Modificar a função que modifica o html para o padrão JQuery.Wagner Silva # Web 2.0 com Ajax Aula 02
  36. 36. JQuery  Exemplo: Modificar o Exemplo 02.04 para JQuery.  1º Passo: Incluir a biblioteca JQuery  2º Passo: Na função javaScript, adicionar $(document).ready(function(){...});  3º Passo: Modificar a função que modifica o html para o padrão JQuery.Wagner Silva # Web 2.0 com Ajax Aula 02
  37. 37. Web 2.0 com Ajax # Aula 02  Próxima Aula:  Seletores e Filtros  Seleção através de Tags  E-mail: web2softeam@gmail.com  Twitter: twitter.com/web2softeamWagner Silva # Web 2.0 com Ajax Aula 02

×