Aula 02Wagner Silva
Agenda        HTML DOM        JQuery        Vantagens e Desvantagens        Baixando a Biblioteca        Conhecendo a...
HTML DOM        HTML Document Object Model        Objetivo: Simplificação e Padronização        Permite acesso dinâmico...
HTML DOM        Tudo numa página é considerado um nó:              A página inteira é um nó;              Todas as tags...
HTML DOM       <html>        <head>         <title>HTML DOM</title>        </head>        <body>         <p>Hello world!</...
HTML DOM           Html  Head            Body   Title           P    “HTML DOM”    “Hello world!”
HTML DOM        Hierarquia entre nós:              O nó do topo é o nó raiz;              Todos os nós, exceto o raiz, ...
HTML DOM                   childNodes           Html  Head            Body   Title           P    “HTML DOM”    “Hello wor...
HTML DOM                    firstChild           Html  Head            Body   Title           P    “HTML DOM”    “Hello wo...
HTML DOM                    lastChild           Html  Head            Body   Title           P    “HTML DOM”    “Hello wor...
HTML DOM                   nextSibling           Html  Head            Body   Title           P    “HTML DOM”    “Hello wo...
HTML DOM                  previousSibling           Html  Head            Body   Title           P    “HTML DOM”    “Hello...
HTML DOM        Nós possuem propriedades, exemplos:              nó.innerHTML : o “nó texto” do elemento;              ...
HTML DOM        Nós possuem métodos, exemplos:              nó.getElementById(id) : retorna o elemento com o id         ...
HTML DOM        Exemplo: Utilizando o formulário de exemplo do         curso, vamos avisar ao usuário que os dados foram ...
HTML DOM        Exercício: Ainda utilizando o formulário de exemplo do           curso:              Cidade só poderá se...
HTML DOM        Pode-se mudar o estilo dos objetos        Folha de Estilos = Conjunto de estilos        Atributo styleW...
HTML DOM        Características das propriedades:              Hífens não são utilizados              Escritas em letra...
HTML DOM        Exemplos:              nó.style.magin              nó.style.maginTop              nó.style.backgroundC...
HTML DOM        Exemplo: Disponibilizar 4 cores ao usuário, o qual poderá           escolher entre uma delas para a cor d...
HTML DOM        Exemplo: Construir uma página com 3 divs 100 x 100, as           quais o usuário terá a opção de selecion...
HTML DOM        Exercício: Modificar a página com 3 divs 100 x 100. A div           “opções” deve possuir 3 pequenas divs...
JQuery        Conceitos implementados para atender HTML e CSS        Utiliza estrutura semelhante à do HTML DOM        ...
JQuery        Atende às atividades de programadores e designers        Permite a criação de plug-ins        Iteração im...
JQuery        Não é necessária nenhuma instalação        www.jquery.com        Importada via HTML <script>        Vers...
Wagner Silva # Web 2.0 com Ajax   Aula 02
Wagner Silva # Web 2.0 com Ajax   Aula 02
Wagner Silva # Web 2.0 com Ajax   Aula 02
JQuery       <!DOCTYPE HTML>       <html>         <head>               ...               <script language="JavaScript" typ...
JQuery        Operação fundamental: Selecionar objetos facilmente        Operador: $(<seletor>)        <seletor>:      ...
JQuery        Exemplo: $(“p a”)             <html>                <head>...</head>                <body>                 ...
JQuery        Exemplo: $(“div:gt(0)”)             <html>                <head>...</head>                <body>           ...
JQuery        Exemplo: $(“#tabela tr td :hidden[name=link]”)             <html>               <head>...</head>           ...
JQuery        Função: $(document).ready(); = <body onload=“”>           $(document).ready(function(){                    ...
JQuery        Exemplo: Modificar a função do formulário. Quando o           usuário clicar em enviar, se os campos obriga...
JQuery        Exemplo: Modificar o Exemplo 02.04 para JQuery.              1º Passo: Incluir a biblioteca JQuery        ...
Web 2.0 com Ajax # Aula 02        Próxima Aula:              Seletores e Filtros              Seleção através de Tags  ...
Próximos SlideShares
Carregando em…5
×

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

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

×