Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Curso JavaScript - Aula sobre DOM e Ajax

44 views

Published on

Nesta aula vamos aprender o funcionamento do DOM e recuperar informações via Ajax. Também vemos a notação de objetos em JavaScript: JSON.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Curso JavaScript - Aula sobre DOM e Ajax

  1. 1. • Estudar e compreender os conceitos e inter- relacionar as tecnologias: – DOM – JavaScript e CSS – Ajax – JSON
  2. 2. Modificando o HTML 5 Dinamicamente
  3. 3. • Document Object Model: – Desenvolvida pela W3C nos anos 90. – Especificação para manipular documentos: HTML e XML. • Acessar e criar novos elementos dentro de documentos. – Independente de linguagem: • Qualquer linguagem pode implementar a API DOM. • Conjunto de métodos e propriedades.
  4. 4. • Pode-se manipular o HTML: – JavaScript com DOM: – Métodos e Propriedades: <header id=“cabeca”> <img scr=“logo.jpg” /> <p>Site da Empresa... </header> var x = document.getElementById(“cabeca”); x.getElementsByTagName(“img”);
  5. 5. • Pode-se capturar eventos que acontecem no documento com o DOM: document.getElementById(“cabeca”).onclick = function() { alert(‘Você clicou em mim!’); }
  6. 6. Alterando Estilos Dinamicamente
  7. 7. • Usa-se em conjunto com o DOM: – Modificação da propriedade style do elemento. – Alteração das propriedades CSS via JavaScript var x = document.getElementById(“cabeca”); x.style.background = ‘#CCC’; x.style.color = ‘#000’; }
  8. 8. Carregando Conteúdos Dinamicamente
  9. 9. • Objeto do navegador: – XmlHTTPResquest • Permite carregar conteúdos de forma assíncrona: – Sem reload do documento. – Com o conteúdo carregado, usa-se o DOM para manipular o documento. – As resposta do servidor podem ser em HTML, XML, JSON ou String Simples.
  10. 10. function abreAjax() { var obj_xml_http_resquest; try { obj_xml_http_resques = new XMLHttpRequest(); } catch(ee) { try { obj_xml_http_resques = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) { try { obj_xml_http_resques = new ActiveXObject("Microsoft.XMLHTTP"); } catch(E) { obj_xml_http_resques = false; } } } return obj_xml_http_resques; }
  11. 11. var ajax_obj = abreAjax(); ajax_obj.open('POST', 'categoria.php?ajax=true&cmd=cadastrar', true); ajax_obj.setRequestHeader('Content-Type', 'application/x-www-form- urlencoded'); ajax_obj.onreadystatechange = function () { if(ajax_obj.readyState == 1) { // Carregando solicitação } if(ajax_obj.readyState == 4) { if(ajax_obj.status == 200) { // Solicitação concluída } } }; ajax_obj.send(dataPost);
  12. 12. Transportando Dados entre Serviços
  13. 13. • JavaScript Object Notation: – Desenvolvida por Douglas Crockford (1999). – Não é uma tecnologia nova: RFC: 4687. – É uma Estrutura de Dados em JavaScript: • Especificamente: Notação de Objetos. – Estes objetos podem ser armazenados em arquivos: • Extensão: .json • Mime-Type: application/json
  14. 14. • Utilização Prática do JSON: – WebServices, por exemplo: Google e Yahoo • Seu uso não necessita do interpretador JavaScript instalado: – Linguagens como, por exemplo, PHP e Java tem seus interpretadores JSON. • Muito utilizado em detrimento do XML, mas as duas tecnologias podem ser utilizadas juntas.
  15. 15. • A sintaxe do JSON é simples: par:valor • Pode-se validar a sintaxe em: – http://jsonlint.com • Onde par é uma propriedade do objeto, que seu valor pode ser: – String – Number – Object { // objeto vazio em Js } – Array [‘João’, ‘Maria’, ‘Pedro’] – Boleana (true ou false) – Null
  16. 16. { “aluno" : [ { "nome": "João", "notas": [ 8, 9, 7 ] }, { "nome": "Maria", "notas": [ 8, 10, 7 ] }, { "nome": "Pedro", "notas": [ 10, 10, 9 ] } ] } <?xml version='1.0' encoding='utf-8'?> <aluno nome=“João”> <provas> <prova nota=“8” /> <prova nota=“9” /> <prova nota=“7” /> </provas> </aluno>
  17. 17. • Trabalhando com JSON em JavaScript: var dados_alunos = eval(json_alunos); alert(dados_alunos.aluno[0].nome); // Exibe “João” alert(dados_alunos.aluno[0].notas[0]); // Exite “8” var json_alunos = { “aluno" : [ { "nome": "João", "notas": [ 8, 9, 7 ] }, { "nome": "Maria", "notas": [ 8, 10, 7 ] }, { "nome": "Pedro", "notas": [ 10, 10, 9 ] } ] };
  18. 18. www.tiago.blog.br tiago@tiago.blog.br

×